/* ===============================
   GLOBAL
   =============================== */
body{
    font-family:'Noto Sans Thai',sans-serif;
    background:#f5f7fb;
    padding-top:50px;
}

/* ===============================
   NAVBAR
   =============================== */
.navbar{
    background-color:#05579B !important;
}

.navbar-brand{
    color:#ffffff !important;
    font-weight:700;
}

.navbar .btn{
    color:#ffffff;
    border-color:#ffffff;
    transition:background-color .2s ease, transform .15s ease;
}

.navbar .btn:hover{
    background-color:rgba(255,255,255,.15);
}

.navbar .btn:active{
    transform:scale(.95);
}

/* ลบเส้นใต้ลิงก์ทั้งหมด */
.navbar a,
.offcanvas a{
    text-decoration:none !important;
}

/* ===============================
   OFFCANVAS (Slide Menu)
   =============================== */
.offcanvas{
    width:280px;
    background-color:#245278;
    color:#ffffff;
}

.offcanvas-title{
    color:#ffffff;
}

/* ===============================
   OFFCANVAS MENU
   =============================== */
.offcanvas .list-group-item{
    position:relative;
    background:transparent;
    border:none;
    cursor:pointer;
    transition:background-color .25s ease, padding-left .25s ease;
}

/* เส้น accent ด้านซ้าย */
.offcanvas .list-group-item::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:0;
    background:#38bdf8;
    border-radius:4px;
    transition:height .25s ease;
}

/* hover */
.offcanvas .list-group-item:hover{
    background-color:rgba(255,255,255,.12);
    padding-left:14px;
}

.offcanvas .list-group-item:hover::before{
    height:65%;
}

/* link */
.offcanvas .list-group-item a{
    display:block;
    padding:6px 0;
    color:#e5e7eb;
    font-weight:500;
    transition:color .2s ease;
}

.offcanvas .list-group-item:hover a{
    color:#ffffff;
}

/* active menu */
.offcanvas .list-group-item.active{
    background-color:rgba(255,255,255,.18);
    padding-left:14px;
}

.offcanvas .list-group-item.active::before{
    height:70%;
    background:#facc15;
}

.offcanvas .list-group-item.active a{
    color:#ffffff;
    font-weight:600;
}

/* ===============================
   HEADER
   =============================== */
.header{
    background:linear-gradient(135deg,#2563eb,#1e40af);
    color:#fff;
    padding:48px 16px;
    border-radius:0 0 28px 28px;
}

/* ===============================
   PERSON CARD
   =============================== */
.person-card{
    border:none;
    border-radius:22px;
    overflow:hidden;
    height:100%;
    transition:transform .25s ease, box-shadow .25s ease;
}

.person-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 30px rgba(0,0,0,.12);
}

/* ===============================
   IMAGE (บนเหลี่ยม / ล่างโค้ง)
   =============================== */
.person-card img{
    width:100%;
    aspect-ratio:3 / 4;
    object-fit:cover;
    object-position:top;
    background:#f1f5f9;
    border-radius:0 0 22px 22px;
    transition:transform .3s ease;
}

.person-card:hover img{
    transform:scale(1.02);
}

/* ===============================
   TEXT
   =============================== */
.name{
    font-weight:700;
    font-size:1rem;
}

.rank{
    font-size:.9rem;
    color:#1e40af;
    font-weight:600;
}

.position{
    font-size:.9rem;
    color:#6b7280;
}

.degree{
    font-size:.8rem;
    color:#64748b;
}

/* ===============================
   MOBILE OPTIMIZE
   =============================== */
@media (max-width:576px){
    .person-card img{
        aspect-ratio:4 / 5;
        border-radius:0 0 26px 26px;
    }

    .name{
        font-size:1.25rem;
    }

    .rank{
        font-size:1.05rem;
    }

    .position{
        font-size:1rem;
    }

    .degree{
        font-size:.95rem;
    }
}/* ===== CARD ACCENT COLOR ===== */
.card-accent{
    position:relative;
}

.card-accent::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    border-radius:22px 22px 0 0;
}

/* สีแต่ละประเภท */
.accent-primary::before{ background:#2563eb; }   /* น้ำเงิน */
.accent-success::before{ background:#16a34a; }   /* เขียว */
.accent-secondary::before{ background:#64748b; } /* เทา */
.accent-purple::before{ background:#7c3aed; }    /* ม่วง */
.accent-sky::before{ background:#0284c7; }       /* ฟ้า */
.accent-yellow::before{ background:#ca8a04; }    /* เหลือง */
.accent-orange::before{ background:#ea580c; }    /* ส้ม */