/* ===================================================
   IMPORT FONTS: KANIT
=================================================== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

/* ---------- 1. GLOBAL & BASE STYLES ---------- */
* {
    box-sizing: border-box;
}

html, body, body.site {
    background-color: #fdfbf7 !important; 
    color: #171717 !important; 
    font-family: 'Kanit', "Segoe UI", sans-serif !important;
    overflow-x: hidden;
}

/* เปลี่ยนสีหัวข้อเป็น น้ำเงินสว่างพรีเมียม */
h1, h2, h3, h4, h5, h6, .site-title {
    font-family: 'Kanit', "Segoe UI", sans-serif !important;
    color: #2563eb !important; 
    font-weight: 700;
}

/* ---------- 2. RESPONSIVE BANNER (NO OVERLAP) ---------- */
header.header, .container-header {
    position: sticky !important;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important; /* ไล่เฉดสีน้ำเงินลึกหรูหรา */
    box-shadow: 0 8px 30px rgba(30, 58, 138, 0.2) !important; 
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
}

.container-header .site-grid,
.container-header .grid-child {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.navbar-brand {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-brand img,
.container-header img,
.brand-logo img,
header.header img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; 
    max-height: none !important;
    min-height: none !important;
    aspect-ratio: 2400 / 400 !important;
    object-fit: fill !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

.site-title-container, .site-title, .site-description {
    display: none !important; 
}

/* ---------- 3. DESKTOP MENU (>= 1200px) ---------- */
@media (min-width: 1200px) {
    .container-nav {
        display: block !important;
        width: 100% !important;
        padding: 12px 15px 18px 15px !important;
        background: transparent !important;
    }

    .mod-menu, .metismenu.mod-menu {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .mod-menu > li > a, 
    .metismenu.mod-menu > li > a {
        display: inline-flex !important;
        align-items: center;
        padding: 10px 22px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 30px !important;
        color: #ffffff !important;
        font-size: 14.5px !important;
        font-weight: 500;
        text-decoration: none !important;
        white-space: nowrap !important;
        backdrop-filter: blur(8px);
        transition: all 0.25s ease;
    }

    /* เปลี่ยนสีฟอนต์โฮเวอร์เมนูหลัก -> น้ำเงินสว่างพรีเมียม */
    .mod-menu > li > a:hover {
        background: #ffffff !important;
        color: #2563eb !important; 
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    /* เปลี่ยนสีฟอนต์เมนู Active -> น้ำเงินสว่างพรีเมียม */
    .mod-menu .current > a, 
    .metismenu.mod-menu .active > a {
        background: #ffffff !important;
        color: #2563eb !important; 
        font-weight: 600 !important;
    }

    .navbar-toggler {
        display: none !important;
    }
}

/* ---------- 4. RESPONSIVE SIDEBAR SYSTEM (< 1200px) [PREMIUM UPDATE] ---------- */
@media (max-width: 1199.98px) {
    .container-nav {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        padding: 12px 20px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e5e5e5;
    }

    .navbar-toggler, 
    button[data-bs-toggle="collapse"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f5efe6 !important; 
        border: 1px solid #e5e5e5 !important;
        border-radius: 10px !important;
        padding: 8px 16px !important;
        color: #2563eb !important; /* ปุ่มเมนูโมบายล์สีน้ำเงินพรีเมียม */
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08) !important;
        transition: all 0.2s ease;
    }
    
    .navbar-toggler::after {
        content: " เมนู";
    }

    .navbar-toggler:hover {
        background-color: #e5e5e5 !important;
    }

    .navbar-collapse,
    #navbar-main {
        position: fixed !important;
        top: 0 !important;
        right: -320px; 
        left: auto !important;
        width: 300px !important;
        height: 100vh !important;
        background: #ffffff !important;
        padding: 40px 20px !important;
        box-shadow: -10px 0 35px rgba(23, 23, 23, 0.12) !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        display: block !important;
        visibility: visible !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .navbar-collapse.show,
    #navbar-main.show {
        transform: translateX(-320px); 
    }

    .mod-menu, .metismenu.mod-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-top: 20px !important;
        list-style: none !important;
        width: 100% !important;
    }

    .mod-menu > li > a, 
    .metismenu.mod-menu > li > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        background: #faf9f6 !important; 
        color: #171717 !important;
        padding: 12px 18px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border: 1px solid #e5e5e5 !important;
        text-decoration: none !important;
        width: 100% !important;
        transition: all 0.2s ease !important;
    }

    .mod-menu > li > a:hover {
        background: #f5efe6 !important;
        color: #2563eb !important; 
        border-color: #e5e5e5 !important;
    }

    .mod-menu .current > a, 
    .metismenu.mod-menu .active > a {
        background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%) !important; /* แถบโมบายล์ Active ไล่เฉดน้ำเงินพรีเมียม */
        color: #ffffff !important;
        border: none !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2) !important;
    }

    .metismenu.mod-menu ul,
    .mod-menu li ul,
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        background: #fdfbf7 !important;
        margin: 4px 0 8px 10px !important;
        padding: 6px !important;
        box-shadow: none !important;
        border-radius: 10px !important;
        border: 1px dashed #737373 !important;
        list-style: none !important;
        display: block !important;
        width: calc(100% - 10px) !important;
    }

    .metismenu.mod-menu ul a,
    .mod-menu li ul a,
    .dropdown-menu a {
        display: block !important;
        padding: 10px 16px !important;
        color: #737373 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
        text-align: left !important;
        transition: all 0.2s ease !important;
    }

    .metismenu.mod-menu ul a:hover,
    .mod-menu li ul a:hover,
    .dropdown-menu a:hover {
        background: #ffffff !important;
        color: #2563eb !important; 
        padding-left: 20px !important;
    }

    body:has(.navbar-collapse.show)::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4); /* ม่านหลังโทนน้ำเงินมืด */
        backdrop-filter: blur(4px);
        z-index: 9990px;
    }
}

/* ---------- 5. CONTENT AREA STYLING ---------- */
main, .component {
    background: #ffffff !important;
    border-radius: 26px !important;
    padding: clamp(20px, 4vw, 40px) !important;
    box-shadow: 0 12px 35px rgba(30, 58, 138, 0.04) !important; 
    margin-top: 25px;
    border: 1px solid #e5e5e5;
}

.mod-breadcrumbs {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 14px 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    color: #2563eb !important; 
    border: 1px solid #e5e5e5;
}

/* ---------- 6. NEW: SERVICE LINKS STYLING (น้ำเงินพรีเมียมโมเดิร์น) ---------- */
.service-links-section {
    max-width: 1400px;
    margin: 45px auto;
    padding: 0 20px;
}

.service-links-header {
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
}

.service-links-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #1e3a8a); /* เส้นขีดใต้หัวข้อน้ำเงินพรีเมียม */
    border-radius: 2px;
}

.service-links-main-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1e3a8a !important; 
    letter-spacing: 0.5px;
    margin: 0 !important;
}

.service-links-subtitle {
    font-size: 14.5px;
    color: #737373;
    margin: 4px 0 0 0;
}

.service-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: 100%;
}

.service-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 18px !important;
    padding: 24px 16px !important;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #f5efe6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: background-color 0.3s ease;
}

.card-icon {
    font-size: 24px;
}

.card-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #171717 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4;
}

.card-desc {
    font-size: 12.5px;
    color: #737373;
    margin: 0;
    line-height: 1.4;
}

.service-card:hover {
    transform: translateY(-5px);
    background: #ffffff !important;
    border-color: #2563eb !important; 
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.12) !important; /* เงาโฮเวอร์โทนน้ำเงินหรูหรา */
}

.service-card:hover .card-icon-wrapper {
    background-color: #e5e5e5;
}

@media (max-width: 1199px) {
    .service-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .service-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .service-grid-container {
        grid-template-columns: 1fr;
    }
    .service-card {
        padding: 20px 15px !important;
    }
}

/* ---------- 7. MODERN PREMIUM FOOTER STYLING ---------- */
.site-footer {
    background-color: #171717 !important;
    color: #e5e5e5 !important;
    padding: 60px 0 0 0 !important;
    margin-top: 50px;
    font-size: 14.5px;
    line-height: 1.6;
    border-top: 4px solid #2563eb; /* ขอบบนฟุตเตอร์น้ำเงินสง่างาม */
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-title {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 3px;
    background-color: #2563eb !important; 
    border-radius: 2px;
}

.university-name {
    color: #f5efe6 !important;
    font-weight: 500;
    margin-top: -12px;
    margin-bottom: 20px;
    font-size: 14px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}

.info-item p {
    margin: 0;
    color: #e5e5e5;
}

.info-item strong {
    color: #ffffff;
}

.info-icon {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.footer-map {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid #737373;
}

.footer-map iframe {
    display: block;
    width: 100% !important;
    height: 160px !important;
    transition: all 0.3s ease;
}

.footer-map:hover {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.2) !important;
    border-color: #2563eb !important;
}

.footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-links li {
    margin-bottom: 12px;
    padding-left: 15px;
    position: relative;
}

.footer-links li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: -2px;
    color: #2563eb !important; 
    font-size: 18px;
    font-weight: bold;
}

.footer-links li a {
    color: #e5e5e5 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, padding 0.2s ease;
}

.footer-links li a:hover {
    color: #ffffff !important;
    padding-left: 4px;
}

.contacts a {
    color: #2563eb !important; 
    text-decoration: none !important;
    font-weight: 500;
}
.contacts a:hover {
    color: #ffffff !important;
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.social-btn.fb { background-color: #1877f2; }
.social-btn.web { background-color: #2563eb; } 

.social-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.footer-bottom {
    background-color: #171717 !important;
    padding: 20px 0 !important;
    margin-top: 50px;
    border-top: 1px solid #737373;
    font-size: 13px;
    color: #e5e5e5;
}

.footer-bottom-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-bottom-container p {
    margin: 0;
}

.bottom-policies a {
    color: #e5e5e5 !important;
    text-decoration: none !important;
}

.bottom-policies a:hover {
    color: #ffffff !important;
}

.bottom-policies .divider {
    margin: 0 8px;
    color: #737373;
}

@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }
}

@media (max-width: 767px) {
    .site-footer {
        padding: 40px 0 0 0 !important;
    }
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-map iframe {
        height: 180px !important;
    }
}


/* ===================================================
   HISTORY PAGE STYLING (ROYAL BLUE & CREAM THEME)
=================================================== */
.history-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Kanit', sans-serif !important;
    color: #171717 !important;
}

.history-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.header-icon-wrapper {
    width: 70px;
    height: 70px;
    background-color: #2563eb; 
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.history-title {
    font-size: 32px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
}

.history-subtitle {
    font-size: 16px;
    color: #737373;
    margin: 0;
}

.history-timeline {
    position: relative;
    padding-left: 35px;
    margin-left: 15px;
    border-left: 3px solid #e5e5e5;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-badge {
    position: absolute;
    left: -56px;
    top: 2px;
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    border: 3px solid #2563eb; 
    color: #2563eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-badge {
    background-color: #2563eb;
    color: #ffffff;
}

.timeline-panel {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.06) !important;
    border-color: #2563eb !important;
}

.timeline-year {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%); 
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.timeline-title {
    font-size: 19px !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
}

.timeline-body p {
    font-size: 15px;
    line-height: 1.6;
    color: #171717;
    margin-bottom: 10px;
}

.department-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.badge-item {
    background-color: #f5efe6;
    color: #171717;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid #e5e5e5;
}

.alert-note {
    background-color: #fdfbf7;
    border-left: 4px solid #2563eb; 
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
    margin: 15px 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
}

.alert-note i {
    color: #2563eb;
    font-size: 18px;
    margin-top: 2px;
}

.custom-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 0 0 !important;
}

.custom-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14.5px;
}

.custom-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #2563eb; 
    font-size: 10px;
    top: 2px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.grid-box {
    background-color: #fdfbf7;
    border: 1px dashed #737373;
    border-radius: 10px;
    padding: 15px;
}

.grid-box strong {
    display: block;
    color: #2563eb;
    margin-bottom: 5px;
    font-size: 15px;
}

.grid-box i {
    margin-right: 5px;
}

.grid-box span {
    font-size: 13.5px;
    color: #171717;
    line-height: 1.5;
    display: block;
}

.mission-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.mission-card {
    background-color: #f5efe6;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}

.mission-card i {
    color: #2563eb;
    font-size: 20px;
    display: block;
    margin-bottom: 6px;
}

.mission-card span {
    font-size: 13px;
    font-weight: 600;
}

.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }

@media (max-width: 991px) {
    .nested-grid { grid-template-columns: 1fr; }
    .mission-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .history-timeline { padding-left: 25px; margin-left: 5px; }
    .timeline-badge { left: -44px; width: 32px; height: 32px; font-size: 12px; top: 5px; }
    .timeline-panel { padding: 15px !important; }
    .history-title { font-size: 26px !important; }
    .mission-row { grid-template-columns: 1fr; }
}


/* ===================================================
   PHILOSOPHY, VISION, MISSION PAGE (KANIT & ROYAL BLUE)
=================================================== */
.pvm-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    font-family: 'Kanit', "Segoe UI", sans-serif !important;
    color: #171717 !important;
}

.pvm-main-header {
    text-align: center;
    margin-bottom: 45px;
}

.pvm-header-icon {
    width: 65px;
    height: 65px;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.15);
}

.pvm-main-title {
    font-size: 32px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    margin: 0 0 5px 0 !important;
}

.pvm-main-subtitle {
    font-size: 16px;
    color: #737373;
    margin: 0;
}

.pvm-section-title { margin-bottom: 30px; }
.pvm-section-title h2 { font-size: 24px !important; color: #2563eb !important; font-weight: 700 !important; margin: 0 0 8px 0 !important; }
.pvm-section-title p { font-size: 15.5px; color: #737373; margin: 0; line-height: 1.6; }
.text-center { text-align: center; }

.pvm-core-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 50px;
}

.pvm-core-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 20px !important;
    padding: 30px 25px !important;
    position: relative;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease;
}

.philosophy-card { border-top: 4px solid #2563eb !important; background-color: #fdfbf7 !important; }
.vision-card { border-top: 4px solid #171717 !important; }
.pvm-core-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08) !important; }

.pvm-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.vision-card .pvm-card-badge { color: #171717; }
.pvm-core-text { font-size: 20px; font-weight: 600; line-height: 1.6; color: #2563eb; margin: 0; }
.pvm-core-text-dash { font-size: 15.5px; line-height: 1.6; color: #171717; margin: 0; }

.pvm-mission-section { margin-bottom: 50px; }
.pvm-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pvm-mission-item {
    display: flex;
    gap: 20px;
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
    transition: border-color 0.25s ease;
}

.pvm-mission-item:hover { border-color: #2563eb !important; }
.pvm-mission-number { font-size: 32px; font-weight: 800; color: #e5e5e5; line-height: 1; transition: color 0.25s ease; }
.pvm-mission-item:hover .pvm-mission-number { color: #2563eb; }
.pvm-mission-content h3 { font-size: 16.5px !important; color: #171717 !important; font-weight: 600 !important; margin: 0 0 6px 0 !important; }
.pvm-mission-content p { font-size: 14px; line-height: 1.6; color: #737373; margin: 0; }

.pvm-identity-section {
    margin-bottom: 50px;
    background-color: #fdfbf7;
    padding: 35px 25px;
    border-radius: 24px;
    border: 1px solid #e5e5e5;
}

.pvm-quote-box {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #2563eb;
    background-color: #ffffff;
    padding: 8px 25px;
    border-radius: 30px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.04);
    margin-top: 5px;
}

.pvm-identity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }

.pvm-id-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    text-align: center;
    transition: all 0.3s ease;
}

.pvm-id-icon {
    width: 48px;
    height: 48px;
    background-color: #f5efe6;
    color: #2563eb;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
    transition: background-color 0.25s ease;
}

.pvm-id-card h3 { font-size: 16px !important; color: #171717 !important; font-weight: 600 !important; margin: 0 0 8px 0 !important; }
.pvm-id-card p { font-size: 13px; line-height: 1.5; color: #737373; margin: 0; }
.pvm-id-card:hover { transform: translateY(-5px); border-color: #2563eb !important; box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08) !important; }
.pvm-id-card:hover .pvm-id-icon { background-color: #2563eb; color: #ffffff; }

.pvm-uniqueness-banner {
    background: linear-gradient(135deg, #171717 0%, #111111 100%) !important;
    border-left: 5px solid #2563eb;
    border-radius: 16px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.pvm-unique-icon {
    width: 55px;
    height: 55px;
    background-color: rgba(37, 99, 235, 0.15);
    border: 1px solid #2563eb;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pvm-tag { display: inline-block; font-size: 12.5px; font-weight: 500; color: #2563eb; letter-spacing: 1px; margin-bottom: 4px; text-transform: uppercase; }
.pvm-unique-title { font-size: 24px !important; color: #ffffff !important; font-weight: 600 !important; margin: 0 !important; }

@media (max-width: 991.98px) {
    .pvm-core-grid { grid-template-columns: 1fr; gap: 20px; }
    .pvm-mission-grid { grid-template-columns: 1fr; }
    .pvm-identity-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}

@media (max-width: 575.98px) {
    .pvm-main-title { font-size: 26px !important; }
    .pvm-quote-box { font-size: 17px; padding: 6px 18px; }
    .pvm-identity-grid { grid-template-columns: 1fr; }
    .pvm-uniqueness-banner { flex-direction: column; text-align: center; gap: 15px; padding: 20px; }
    .pvm-unique-title { font-size: 20px !important; }
}


/* ===================================================
   POWERS AND DUTIES PAGE (KANIT & ROYAL BLUE THEME)
=================================================== */
.duty-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    font-family: 'Kanit', "Segoe UI", sans-serif !important;
    color: #171717 !important;
}

.duty-main-header { text-align: center; margin-bottom: 50px; }

.duty-header-icon {
    width: 65px;
    height: 65px;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.15);
}

.duty-main-title { font-size: 32px !important; color: #2563eb !important; font-weight: 700 !important; margin: 0 0 6px 0 !important; }
.duty-main-subtitle { font-size: 16px; color: #737373; margin: 0; }
.duty-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; width: 100%; }

.duty-card-item {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 18px !important;
    padding: 30px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02) !important;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

.duty-card-item::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: #e5e5e5; transition: background-color 0.3s ease; }
.duty-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.duty-number { font-size: 26px; font-weight: 800; color: #737373; opacity: 0.3; letter-spacing: 0.5px; transition: opacity 0.3s ease, color 0.3s ease; }

.duty-icon-box {
    width: 46px;
    height: 46px;
    background-color: #fdfbf7;
    border: 1px solid #e5e5e5;
    color: #2563eb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.duty-title { font-size: 18px !important; color: #171717 !important; font-weight: 600 !important; margin: 0 0 10px 0 !important; line-height: 1.4; transition: color 0.3s ease; }
.duty-text { font-size: 14.5px; line-height: 1.6; color: #737373; margin: 0; text-align: justify; transition: color 0.3s ease; }

.duty-card-item:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08) !important; border-color: rgba(37, 99, 235, 0.2) !important; }
.duty-card-item:hover::before { background-color: #2563eb; }
.duty-card-item:hover .duty-number { color: #2563eb; opacity: 0.6; }
.duty-card-item:hover .duty-icon-box { background-color: #2563eb; color: #ffffff; border-color: #2563eb; }
.duty-card-item:hover .duty-title { color: #2563eb !important; }
.duty-card-item:hover .duty-text { color: #171717; }

@media (max-width: 991.98px) { .duty-card-grid { gap: 18px; } .duty-card-item { padding: 24px !important; } }
@media (max-width: 767.98px) { .duty-card-grid { grid-template-columns: 1fr; gap: 16px; } .duty-main-title { font-size: 26px !important; } .duty-main-header { margin-bottom: 35px; } }


/* ===================================================
   ORGANIZATIONAL STRUCTURE STYLING (ROYAL BLUE & CREAM)
=================================================== */
.org-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Kanit', sans-serif !important;
    color: #171717 !important;
}

.org-main-header { text-align: center; margin-bottom: 50px; }

.org-header-icon {
    width: 65px;
    height: 65px;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.15);
}

.org-main-title { font-size: 32px !important; color: #2563eb !important; font-weight: 700 !important; margin: 0 0 6px 0 !important; }
.org-main-subtitle { font-size: 16px; color: #737373; margin: 0; }

.org-section {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 22px;
    padding: 35px 25px;
    margin-bottom: 40px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.01);
}

.org-section-title { border-bottom: 2px solid #f5efe6; padding-bottom: 15px; margin-bottom: 30px; }
.org-section-title h2 { font-size: 22px !important; color: #2563eb !important; font-weight: 600 !important; margin: 0 !important; }

.org-box {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 15px 20px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    transition: all 0.25s ease;
}

.main-hub { background-color: #fdfbf7 !important; border: 2px solid #2563eb !important; width: 100%; max-width: 380px; }
.main-hub h3 { font-size: 18px !important; color: #2563eb !important; margin: 8px 0 0 0 !important; font-weight: 600 !important; }
.main-hub i { font-size: 24px; color: #2563eb; }
.org-top-level { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 35px; }
.org-three-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 35px; }
.pillar-card { padding: 22px 15px; border-top: 4px solid #2563eb; }
.pillar-card i { font-size: 22px; color: #2563eb; margin-bottom: 10px; }
.pillar-card h4 { font-size: 15px !important; color: #171717 !important; font-weight: 600 !important; line-height: 1.5; margin: 0 !important; }
.org-mid-link { display: flex; justify-content: center; margin-bottom: 35px; }
.dean-office { background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%); color: #ffffff; border: none; padding: 12px 40px; }
.dean-office h3 { font-size: 16.5px !important; color: #ffffff !important; margin: 5px 0 0 0 !important; }
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.program-item { background-color: #fdfbf7; border: 1px solid #e5e5e5; border-radius: 10px; padding: 14px 15px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.program-item i { color: #2563eb; font-size: 15px; }

.admin-top { display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; }
.leader-box { border: 2px solid #171717; background-color: #ffffff; min-width: 260px; padding: 18px; }
.leader-box h3 { font-size: 20px !important; color: #2563eb !important; margin: 4px 0 2px 0 !important; }
.leader-box span { font-size: 13px; color: #737373; }

.admin-committees-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; max-width: 800px; margin: 0 auto 15px auto; }
.committee-branch-left { display: flex; flex-direction: column; align-items: center; }
.committee-branch-right { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.branch-vertical-dot { width: 2px; height: 15px; border-left: 2px dashed #737373; margin: 4px 0; }
.advisory-box-sm { background-color: #ffffff; font-size: 13px; padding: 10px 16px; border: 1px solid #e5e5e5; border-radius: 8px; width: 100%; max-width: 320px; text-align: center; }
.admin-bridge-line { width: 2px; height: 25px; background-color: #e5e5e5; margin: 0 auto 20px auto; }
.admin-vicedeans-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 10px; }

.vicedean-header-box {
    background-color: #f5efe6;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.01);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vicedean-header-box i { font-size: 18px; color: #2563eb; margin-bottom: 8px; }
.vicedean-header-box h5 { font-size: 14px !important; color: #171717 !important; font-weight: 600 !important; line-height: 1.4; margin: 0 !important; }
.admin-head-row { display: flex; flex-direction: column; align-items: center; }
.head-of-dean-office { background-color: #ffffff; color: #2563eb; font-weight: 600; font-size: 15px; border: 2px solid #2563eb; padding: 12px 35px; border-radius: 12px; box-shadow: 0 4px 12px rgba(37,99,235,0.06); }
.admin-tasks-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.task-column-card { background-color: #fdfbf7; border: 1px solid #e5e5e5; border-radius: 16px; padding: 15px; }
.task-body { display: flex; flex-direction: column; gap: 8px; }

.executive-card { display: inline-block; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 25px 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); margin-bottom: 30px; border-top: 4px solid #2563eb; }
.exec-avatar { width: 50px; height: 50px; background-color: #f5efe6; color: #2563eb; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }
.exec-name { font-size: 18px !important; color: #171717 !important; font-weight: 600 !important; margin: 0 0 4px 0 !important; }
.exec-position { font-size: 14px; color: #737373; margin: 0; }
.staff-vice-deans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.member-inner {
    background-color: #f5efe6;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 18px 15px;
    text-align: center;
    width: 100%;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.member-name { font-size: 14.5px !important; color: #2563eb !important; font-weight: 600 !important; margin: 0 0 4px 0 !important; }
.member-role { font-size: 12.5px; color: #171717; margin: 0; line-height: 1.4; }
.staff-head-wrapper { display: flex; flex-direction: column; align-items: center; }
.connect-vertical-line { width: 2px; height: 25px; background-color: #e5e5e5; }
.staff-head-box { background-color: #ffffff; color: #171717; font-weight: 600; font-size: 15px; border: 2px solid #171717; padding: 12px 35px; border-radius: 12px; }
.staff-head-box i { color: #2563eb; margin-right: 5px; }
.staff-columns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.staff-column-card { background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.01); }
.column-badge { background-color: #fdfbf7; color: #2563eb; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 8px; border: 1px solid #e5e5e5; margin-bottom: 12px; text-align: center; }
.column-badge i { margin-right: 4px; }
.sub-staff-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.staff-person {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    text-align: left;
    transition: border-color 0.2s ease;
}

.staff-person:hover { border-color: #2563eb; }
.staff-person .num { font-size: 13px; font-weight: 700; color: #737373; background-color: #f5efe6; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.staff-person .info { display: flex; flex-direction: column; }
.staff-person .info strong { font-size: 13px; color: #171717; }
.staff-person .info span { font-size: 11.5px; color: #737373; margin-top: 2px; }

.text-bold { font-weight: 600; }
.text-burgundy { color: #2563eb !important; }
.bg-cream { background-color: #fdfbf7 !important; }

@media (max-width: 1199.98px) {
    .org-three-pillars, .program-grid, .admin-vicedeans-row, .admin-tasks-columns, .staff-vice-deans-grid, .staff-columns-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
}
@media (max-width: 991.98px) {
    .org-three-pillars, .admin-vicedeans-row, .admin-tasks-columns, .staff-vice-deans-grid, .staff-columns-grid { grid-template-columns: 1fr; gap: 16px; }
    .admin-committees-container { grid-template-columns: 1fr; gap: 12px; }
    .program-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-bridge-line, .connect-vertical-line, .branch-vertical-dot { display: none; }
    .admin-head-row { margin: 15px 0; }
}
@media (max-width: 575.98px) {
    .org-section { padding: 25px 15px; }
    .org-main-title { font-size: 26px !important; }
    .program-grid { grid-template-columns: 1fr; }
    .executive-card { padding: 20px; width: 100%; }
}


/* ===================================================
   [CORE UPDATE]: SIDE-FLYOUT 3RD LEVEL DROPDOWN SYSTEM
   (ปรับพรีเมียมเมนูระดับที่ 3 กางออกด้านข้างแบบคลีนโมเดิร์น)
=================================================== */
@media (min-width: 1200px) {
    .mod-menu li, 
    .metismenu.mod-menu li,
    .container-nav .navbar-nav .nav-item,
    .container-nav .dropdown-menu li {
        position: relative !important;
    }

    /* กล่องเมนูย่อยระดับที่ 2 (Dropdown หลัก) */
    .mod-menu li > ul, 
    .metismenu.mod-menu li > ul,
    .container-nav .navbar-nav .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(0) !important;
        background-color: #ffffff !important;
        border: 1px solid #e5e5e5 !important; 
        border-radius: 12px !important;
        padding: 8px 0 !important;
        min-width: 230px !important;
        box-shadow: 0 10px 30px rgba(30, 58, 138, 0.12) !important; /* เงาฟุ้งโทนน้ำเงินสุขุม */
        display: none !important;
        z-index: 99999 !important;
        list-style: none !important;
        margin: 0 !important;
    }

    /* เมนูย่อยระดับที่ 3 (Sub-submenu) กางออกด้านข้าง */
    .mod-menu li ul li > ul,
    .metismenu.mod-menu li ul li > ul,
    .container-nav .dropdown-menu li > .dropdown-menu {
        top: 0 !important;          
        left: 100% !important;        
        transform: translateX(0) !important; 
        margin-left: 2px !important;  
        border-radius: 12px !important;
    }

    .mod-menu li:hover > ul, 
    .metismenu.mod-menu li:hover > ul,
    .container-nav .navbar-nav .nav-item:hover > .dropdown-menu,
    .container-nav .dropdown-menu li:hover > .dropdown-menu {
        display: block !important;
    }

    .mod-menu .dropdown-toggle::after,
    .metismenu.mod-menu .dropdown-toggle::after,
    .container-nav .dropdown-toggle::after {
        display: none !important;
    }

    .mod-menu li ul li a, 
    .metismenu.mod-menu li ul li a,
    .container-nav .dropdown-menu a {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        padding: 11px 20px !important;
        color: #171717 !important; 
        font-family: 'Kanit', sans-serif !important; 
        font-size: 14px !important;
        text-decoration: none !important;
        text-align: left !important;
        transition: all 0.2s ease !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    /* สัญลักษณ์ลูกศรระดับที่ 2 เพื่อบอกว่ามีสาขาต่อในระดับที่ 3 */
    .mod-menu li ul li:has(ul) > a::after,
    .metismenu.mod-menu li ul li:has(ul) > a::after,
    .container-nav .dropdown-menu li:has(.dropdown-menu) > a::after {
        content: "›" !important;
        font-size: 18px !important;
        font-weight: bold !important;
        color: #737373 !important; 
        line-height: 1;
        margin-left: 10px;
        transition: transform 0.2s ease;
    }

    .mod-menu li ul li a:hover, 
    .metismenu.mod-menu li ul li a:hover,
    .container-nav .dropdown-menu a:hover {
        background-color: #f5efe6 !important; 
        color: #2563eb !important;          /* ตัวอักษรไฮไลท์เวลาโฮเวอร์เป็นสีน้ำเงิน */
        padding-left: 24px !important;
    }
    
    .mod-menu li ul li:has(ul):hover > a::after,
    .container-nav .dropdown-menu li:has(.dropdown-menu):hover > a::after {
        transform: translateX(3px);
        color: #2563eb !important;
    }
}


/* ===================================================
   FIX: IMAGE-BASED ICON WRAPPER (แก้ปัญหาไอคอนไม่ขึ้นระบบเก่า)
=================================================== */
.header-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%) !important; /* เปลี่ยนกล่องวงกลมไอคอนเป็นเฉดน้ำเงินพรีเมียม */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.25); 
    position: relative;
}

/* สร้างสัญลักษณ์ด้วยสไตล์ CSS Shape ป้องกันแท็กหาย */
.header-icon-wrap::before {
    content: "";
    width: 26px;
    height: 26px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    position: absolute;
}
.header-icon-wrap::after {
    content: "";
    width: 3px;
    height: 9px;
    background-color: #ffffff;
    position: absolute;
    top: 22px;
    left: 31px;
    box-shadow: 6px 6px 0 0 #ffffff;
    transform-origin: bottom;
}

/* สัญลักษณ์จุดเชื่อม Timeline สำรองกรณีระบบลบล้าง Icon Module */
.timeline-badge::before {
    content: "📜"; 
    font-size: 16px;
}
.timeline-badge.badge-highlight::before {
    content: "📌";
    font-size: 16px;
}


/* ===================================================
   ผู้บริหารคณะมนุษยศาสตร์และสังคมศาสตร์
=================================================== */

/* ===================================================
   EXECUTIVE DIRECTORY PAGE STYLING (PREMIUM ROYAL BLUE)
=================================================== */

/* คอนเทนเนอร์รากหลัก */
.exec-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Kanit', sans-serif !important;
    color: #171717 !important;
}

/* ส่วนหัวข้อหลัก */
.exec-main-header {
    text-align: center;
    margin-bottom: 50px;
}

.exec-header-icon-wrap {
    width: 65px;
    height: 65px;
    background-color: #2563eb; 
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
}

.exec-svg-icon {
    width: 28px;
    height: 28px;
    color: #ffffff;
}

.exec-main-title {
    font-size: 32px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
}

.exec-main-subtitle {
    font-size: 16px;
    color: #737373;
    margin: 0;
}

/* หัวข้อหมวดหมู่สายงานระดับย่อย */
.exec-section-title {
    border-bottom: 2px solid #f5efe6;
    padding-bottom: 12px;
    margin: 45px 0 25px 0;
}

.exec-section-title h2 {
    font-size: 22px !important;
    color: #1e3a8a !important; /* สีกรมท่าสุขุมน่าเลื่อมใส */
    font-weight: 600 !important;
    margin: 0 !important;
}

.exec-section-title h2 i {
    color: #2563eb;
    margin-right: 8px;
}

/* --- การควบคุม Layout และขนาดการ์ดตามสัดส่วน --- */

/* ระดับที่ 1: คณบดี (แสดงผลเดี่ยวตรงกลาง ขนาดพรีเมียมพอเหมาะ) */
.exec-tier-leader {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.exec-tier-leader .exec-card {
    max-width: 330px; /* คุมขนาดไม่ให้กว้างเกินไปเมื่อแสดงผลเดี่ยว */
    width: 100%;
}

.leader-card-theme {
    border-top: 4px solid #2563eb !important;
    background-color: #ffffff !important;
}

/* ระดับที่ 2: รองคณบดี (จัดเรียง 3 คอลัมน์กระชับ) */
.exec-tier-vicedeans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* ระดับที่ 3: ประธานสาขาวิชา (ขยายเป็น 4 คอลัมน์ เพื่อขนาดรูปภาพกะทัดรัด ไม่ใหญ่ไป) */
.exec-tier-chairs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

/* โครงสร้างตัวกล่องการ์ดร่วม */
.exec-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.02) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s ease;
}

/* อัตราส่วนพอร์ตเทรตแนวตั้ง 3:4 สวยงาม เห็นรูปสัดส่วนลำตัวชัดเจน */
.exec-image-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #fdfbf7;
    border-bottom: 1px solid #e5e5e5;
}

.exec-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center top; 
    display: block;
    transition: transform 0.4s ease;
    image-rendering: -webkit-optimize-contrast; /* ล็อคความคมชัดสูงสุด */
}

/* บล็อกเนื้อหาข้อมูลด้านใน */
.exec-info-content {
    padding: 18px 16px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.exec-name {
    font-size: 16px !important;
    color: #1e3a8a !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4;
}

.exec-position {
    font-size: 13px;
    color: #737373;
    font-weight: 500;
    margin: 0 0 14px 0;
    line-height: 1.4;
}

/* ส่วนจัดเรียงดีเทลการติดต่อ */
.exec-contact-details {
    margin-top: auto; 
    border-top: 1px solid #f5efe6;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.icon-label {
    color: #2563eb;
    font-weight: bold;
    flex-shrink: 0;
    width: 15px;
    text-align: center;
}

.contact-item .label {
    color: #737373;
    font-weight: 500;
    flex-shrink: 0;
}

.contact-item .value {
    color: #171717;
    word-break: break-all; 
}

a.value {
    color: #2563eb !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

a.value:hover {
    color: #1e3a8a !important;
    text-decoration: underline !important;
}

/* ===================================================
   HOVER EFFECTS
=================================================== */
.exec-card:hover {
    transform: translateY(-5px);
    border-color: #2563eb !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.12) !important;
}

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

/* ===================================================
   📱 RESPONSIVE BREAKPOINTS (รองรับการแสดงผลทุกหน้าจอ)
=================================================== */

/* จอแล็ปท็อปขนาดกลาง หรือแท็บเล็ตแนวนอน */
@media (max-width: 1199.98px) {
    .exec-tier-chairs {
        grid-template-columns: repeat(3, 1fr); /* ยุบจาก 4 เหลือ 3 คอลัมน์ */
    }
}

/* จอแท็บเล็ตแนวตั้ง */
@media (max-width: 991.98px) {
    .exec-tier-vicedeans,
    .exec-tier-chairs {
        grid-template-columns: repeat(2, 1fr); /* ยุบเหลือแถวละ 2 คอลัมน์เพื่อความเหมาะสม */
        gap: 16px;
    }
}

/* จอมือถือสมาร์ตโฟนทั่วไป */
@media (max-width: 575.98px) {
    .exec-tier-vicedeans,
    .exec-tier-chairs {
        grid-template-columns: 1fr; /* สแต็กเรียงเป็น 1 แถวตอนลึก */
        gap: 16px;
    }
    .exec-main-title {
        font-size: 26px !important;
    }
    .exec-main-header {
        margin-bottom: 35px;
    }
    .exec-card {
        max-width: 300px; /* คุมขนาดไม่ให้ภาพสยายใหญ่เต็มหน้าจอมือถือ */
        margin: 0 auto; 
        width: 100%;
    }
}

/* ===================================================
   ทำเนียบผู้บริหาร" (อดีตคณบดีและหัวหน้าคณะวิชา)
=================================================== *//* ===================================================
   HALL OF FAME DIRECTORY STYLING (PREMIUM NAVY BLUE)
=================================================== */

/* คอนเทนเนอร์รากหลัก */
.hall-of-fame-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Kanit', sans-serif !important;
    color: #171717 !important;
}

/* ส่วนหัวข้อประจำเพจ */
.hall-main-header {
    text-align: center;
    margin-bottom: 50px;
}

.hall-header-icon-wrap {
    width: 65px;
    height: 65px;
    background-color: #2563eb; 
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
}

.hall-svg-icon {
    width: 26px;
    height: 26px;
    color: #ffffff;
}

.hall-main-title {
    font-size: 32px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
}

.hall-main-subtitle {
    font-size: 16px;
    color: #737373;
    margin: 0;
}

/* ส่วนแบ่งหมวดหมู่ */
.hall-category-title {
    border-bottom: 2px solid #f5efe6;
    padding-bottom: 12px;
    margin: 45px 0 30px 0;
}

.hall-category-title h2 {
    font-size: 22px !important;
    color: #1e3a8a !important; /* สีกรมท่าหรูหราน่านับถือ */
    font-weight: 600 !important;
    margin: 0 !important;
}

.hall-category-title h2 i {
    color: #2563eb;
    margin-right: 8px;
}

/* โครงสร้างผังตารางทำเนียบ (4 คอลัมน์บนจอใหญ่ เพื่อขนาดการ์ดกะทัดรัดตามบรีฟ) */
.hall-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

/* การตกแต่งกล่องการ์ดเกียรติยศ */
.hall-member-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.01) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s ease;
}

/* การ์ดผู้บริหารวาระปัจจุบัน (มีขอบเน้นสีน้ำเงินหรูหรา) */
.current-leader {
    border-top: 4px solid #2563eb !important;
    background-color: #fdfbf7 !important; /* พื้นหลังสีครีมจางเพิ่มความหรูหรา */
}

/* การ์ดทำเนียบยุคเก่าดั้งเดิม */
.legacy-card {
    border-top: 4px solid #737373 !important; /* สีเทาเข้มทรงคุณค่าตามกาลเวลา */
}

/* กรอบรูปภาพทรงสัดส่วน Portrait 3:4 ขนาดกะทัดรัด คมชัด */
.hall-image-box {
    width: 100%;
    aspect-ratio: 3 / 4; 
    overflow: hidden;
    background-color: #fdfbf7;
    border-bottom: 1px solid #e5e5e5;
}

.hall-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
    image-rendering: -webkit-optimize-contrast; /* บังคับประมวลผลภาพให้คมชัด ไม่เบลอ */
}

/* บล็อกรายละเอียดด้านล่าง */
.hall-details-box {
    padding: 16px 14px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}

/* ปีงบประมาณ/ระยะเวลาดำรงตำแหน่ง */
.hall-term {
    display: inline-block;
    background-color: #f5efe6; /* สีครีมพรีเมียม */
    color: #1e3a8a;
    font-size: 13.5px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    margin: 0 auto 10px auto;
    border: 1px solid #e5e5e5;
}

.current-leader .hall-term {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
    color: #ffffff;
    border: none;
}

.hall-name {
    font-size: 15.5px !important;
    color: #171717 !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4;
}

.hall-job-title {
    font-size: 13px;
    color: #737373;
    margin: 0;
    line-height: 1.4;
}

/* ===================================================
   HOVER EFFECTS
=================================================== */
.hall-member-card:hover {
    transform: translateY(-4px);
    border-color: #2563eb !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1) !important;
}

.hall-member-card:hover .hall-img {
    transform: scale(1.02); /* เอฟเฟกต์ซูมภาพนุ่มนวล */
}

/* ===================================================
   📱 RESPONSIVE BREAKPOINTS (รองรับทุกอุปกรณ์และเบราว์เซอร์)
=================================================== */

/* จอคอมพิวเตอร์ขนาดกลาง-เล็ก / จอแท็บเล็ตแนวนอน */
@media (max-width: 1199.98px) {
    .hall-grid-layout {
        grid-template-columns: repeat(3, 1fr); /* ยุบเหลือแถวละ 3 คอลัมน์ */
        gap: 16px;
    }
}

/* จอแท็บเล็ตแนวตั้ง */
@media (max-width: 991.98px) {
    .hall-grid-layout {
        grid-template-columns: repeat(2, 1fr); /* ยุบเหลือแถวละ 2 คอลัมน์ */
    }
}

/* จอมือถือสมาร์ตโฟนพกพาทั่วไป */
@media (max-width: 575.98px) {
    .hall-grid-layout {
        grid-template-columns: 1fr; /* แถวเดี่ยวตอนลึกสไตล์โมบายล์คลีน */
        gap: 15px;
    }
    .hall-main-title {
        font-size: 26px !important;
    }
    .hall-main-header {
        margin-bottom: 35px;
    }
    .hall-member-card {
        max-width: 290px; /* คุมขนาดไม่ให้ภาพขยายใหญ่เกินไปยามสแต็กแถวเดี่ยว */
        margin: 0 auto;
        width: 100%;
    }
}
/* ===================================================
   คณะกรรมการประจำคณะมนุษยศาสตร์และสังคมศาสตร์
=================================================== */
/* ===================================================
   FACULTY COMMITTEE BOARD STYLING (PREMIUM ROYAL BLUE)
=================================================== */

/* คอนเทนเนอร์รากหลัก */
.committee-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Kanit', sans-serif !important;
    color: #171717 !important;
}

/* ส่วนหัวข้อประจำเพจ */
.committee-main-header {
    text-align: center;
    margin-bottom: 50px;
}

.committee-header-icon-wrap {
    width: 65px;
    height: 65px;
    background-color: #2563eb; 
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
}

.committee-svg-icon {
    width: 26px;
    height: 26px;
    color: #ffffff;
}

.committee-main-title {
    font-size: 32px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
}

.committee-main-subtitle {
    font-size: 16px;
    color: #737373;
    margin: 0;
}

/* หัวข้อประจำแต่ละเซกชันชั้นตำแหน่ง */
.committee-section-title {
    border-bottom: 2px solid #f5efe6;
    padding-bottom: 12px;
    margin: 45px 0 25px 0;
}

.committee-section-title h2 {
    font-size: 20px !important;
    color: #1e3a8a !important; /* สีกรมท่าสง่างาม น่านับถือ */
    font-weight: 600 !important;
    margin: 0 !important;
}

.committee-section-title h2 i {
    color: #2563eb;
    margin-right: 8px;
}

/* --- การควบคุมผังโครงสร้างสัดส่วน Layout (Responsive Grid) --- */

.committee-tier-row {
    display: grid;
    gap: 20px;
    width: 100%;
}

/* บังคับจัดกึ่งกลางกรณีแสดงผลตำแหน่งประธานเดี่ยว */
.center-layout {
    display: flex;
    justify-content: center;
}

.center-layout .committee-card {
    max-width: 320px;
    width: 100%;
}

/* ระบบ Grid สำหรับเลเยอร์ระดับที่ 2 (4 คอลัมน์พรีเมียม เพื่อให้การ์ดไม่ใหญ่ไป) */
.split-4-columns {
    grid-template-columns: repeat(4, 1fr);
}

/* ระบบ Grid สำหรับเลเยอร์ระดับที่ 3 (ขยาย 5 คอลัมน์ ขนาดกะทัดรัด คมชัด ไม่กินพื้นที่) */
.split-5-columns {
    grid-template-columns: repeat(5, 1fr);
}

/* --- คุณสมบัติสไตล์ตัวกล่องการ์ดร่วม --- */
.committee-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.02) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s ease;
}

/* ไฮไลท์การ์ดประธานบอร์ดระดับสูงสุด */
.prime-chairman {
    border-top: 4px solid #2563eb !important;
}

/* ไฮไลท์การ์ดส่วนเลขาฯ เพื่อความชัดเจนของผังบริหาร */
.secretary-highlight {
    border-top: 4px solid #737373 !important;
}

/* จัดสัดส่วนกรอบรูปเป็นแนวตั้งสากล Portrait 3:4 คมชัดสูงสุด ไม่เบี้ยว */
.committee-image-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #fdfbf7;
    border-bottom: 1px solid #e5e5e5;
}

.committee-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
    image-rendering: -webkit-optimize-contrast; /* ล็อคความคมชัดบนเบราว์เซอร์ */
}

/* บล็อกรายละเอียดเนื้อหาข้อมูล */
.committee-info-box {
    padding: 16px 14px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}

/* ป้ายสถานะบทบาทหน้าที่ในคณะกรรมการ */
.role-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    margin: 0 auto 12px auto;
}

.bg-blue { background-color: #2563eb; color: #ffffff; }
.bg-light-blue { background-color: #f5efe6; color: #1e3a8a; border: 1px solid #e5e5e5; }
.bg-gray { background-color: #f5efe6; color: #171717; border: 1px solid #e5e5e5; }
.bg-dark-slate { background-color: #171717; color: #ffffff; }

.committee-name {
    font-size: 15px !important;
    color: #1e3a8a !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4;
}

.committee-pos-detail {
    font-size: 12.5px;
    color: #737373;
    margin: 0;
    line-height: 1.4;
    margin-top: auto; /* ดันข้อความยึดติดขอบล่างสมดุล */
}

/* ===================================================
   HOVER EFFECTS (เอฟเฟกต์ตอบสนองยามเมาส์ชี้)
=================================================== */
.committee-card:hover {
    transform: translateY(-4px);
    border-color: #2563eb !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1) !important;
}

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

/* ===================================================
   📱 RESPONSIVE BREAKPOINTS (รองรับเบราวเซอร์และอุปกรณ์เคลื่อนที่)
=================================================== */

/* จอแล็ปท็อปขนาดกลาง หรือแท็บเล็ตแนวนอน */
@media (max-width: 1199.98px) {
    .split-4-columns {
        grid-template-columns: repeat(3, 1fr); /* ยุบเหลือแถวละ 3 */
    }
    .split-5-columns {
        grid-template-columns: repeat(4, 1fr); /* ยุบเหลือแถวละ 4 */
    }
}

/* จอแท็บเล็ตแนวตั้งมาตรฐาน */
@media (max-width: 991.98px) {
    .split-4-columns,
    .split-5-columns {
        grid-template-columns: repeat(2, 1fr); /* ยุบสัดส่วนสแต็กคู่แถวละ 2 */
        gap: 16px;
    }
}

/* จอมือถือขนาดพกพาทั่วไป */
@media (max-width: 575.98px) {
    .split-4-columns,
    .split-5-columns {
        grid-template-columns: 1fr; /* เรียงแถวเดี่ยวตามกลไกโมบายล์สากล */
        gap: 16px;
    }
    .committee-main-title {
        font-size: 26px !important;
    }
    .committee-main-header {
        margin-bottom: 35px;
    }
    .committee-card {
        max-width: 290px; /* จำกัดขนาดการ์ดไม่ให้ล้นหรือขยายภาพแตกบนมือถือ */
        margin: 0 auto;
        width: 100%;
    }
}
/* ===================================================
   คณะกรรมการบริหารคณะมนุษยศาสตร์และสังคมศาสตร์
=================================================== */
/* ===================================================
   FACULTY EXECUTIVE BOARD STYLING (PREMIUM ROYAL BLUE)
=================================================== */

/* คอนเทนเนอร์รากหลัก */
.board-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Kanit', sans-serif !important;
    color: #171717 !important;
}

/* ส่วนหัวข้อประจำหน้าเว็บ */
.board-main-header {
    text-align: center;
    margin-bottom: 50px;
}

.board-header-icon-wrap {
    width: 65px;
    height: 65px;
    background-color: #2563eb; 
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
}

.board-svg-icon {
    width: 26px;
    height: 26px;
    color: #ffffff;
}

.board-main-title {
    font-size: 32px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
}

.board-main-subtitle {
    font-size: 16px;
    color: #737373;
    margin: 0;
}

/* หัวข้อแบ่งเซกชันระดับบริหาร */
.board-section-title {
    border-bottom: 2px solid #f5efe6;
    padding-bottom: 12px;
    margin: 45px 0 25px 0;
}

.board-section-title h2 {
    font-size: 20px !important;
    color: #1e3a8a !important; /* สีกรมท่าสง่างาม น่านับถือองค์กร */
    font-weight: 600 !important;
    margin: 0 !important;
}

.board-section-title h2 i {
    color: #2563eb;
    margin-right: 8px;
}

/* --- การจัดการผังระบบ Layout (Responsive Grid) --- */
.board-tier-layout {
    display: grid;
    gap: 20px;
    width: 100%;
}

/* คุมการจัดวางแบบสมดุลสำหรับกรณีจัดกึ่งกลางเดี่ยว */
.center-flex {
    display: flex;
    justify-content: center;
}

.center-flex .board-card {
    max-width: 310px; /* คุมความกว้างการ์ดเดี่ยวให้พอเหมาะกะทัดรัด */
    width: 100%;
}

/* ผังตารางกรรมการ 4 คอลัมน์บนจอใหญ่ เพื่อขนาดตัวการ์ดที่กระชับ ไม่ใหญ่เกินโครงสร้างเว็บ */
.grid-4-columns {
    grid-template-columns: repeat(4, 1fr);
}

/* --- คุณสมบัติร่วมของตัวกล่องคาร์ดทำเนียบบอร์ด --- */
.board-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.02) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s ease;
}

/* ปรับแต่งสไตล์คาร์ดประธานการประชุม */
.prime-president {
    border-top: 4px solid #2563eb !important;
}

/* ปรับแต่งสไตล์คาร์ดของส่วนฝ่ายเลขาฯ บอร์ด */
.secretary-layout-theme {
    border-top: 4px solid #737373 !important;
}

/* กำหนดขนาดและสัดส่วนกรอบรูปเป็นพอร์ตเทรตแนวตั้ง 3:4 สวยงาม เห็นรูปสัดส่วนชัดเจนตามบรีฟ */
.board-image-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #fdfbf7;
    border-bottom: 1px solid #e5e5e5;
}

.board-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
    image-rendering: -webkit-optimize-contrast; /* สั่งรูปภาพล็อคความคมชัดสูงในทุกเบราว์เซอร์ */
}

/* บล็อกรายละเอียดส่วนข้อความด้านล่างคาร์ด */
.board-info-box {
    padding: 16px 14px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}

/* แถบป้ายป้ายบอกสถานะวาระตำแหน่งกรรมการ */
.board-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    margin: 0 auto 12px auto;
}

.bg-royal { background-color: #2563eb; color: #ffffff; }
.bg-slate { background-color: #f5efe6; color: #1e3a8a; border: 1px solid #e5e5e5; }
.bg-dark { background-color: #171717; color: #ffffff; }

.board-name {
    font-size: 15px !important;
    color: #1e3a8a !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4;
}

.board-position-sub {
    font-size: 12.5px;
    color: #737373;
    margin: 0;
    line-height: 1.4;
    margin-top: auto; /* จัดวางข้อความให้อยู่ระนาบส่วนล่างเสมอกัน */
}

/* ===================================================
   HOVER EFFECTS (เอฟเฟกต์ตอบรับความเคลื่อนไหว)
=================================================== */
.board-card:hover {
    transform: translateY(-4px);
    border-color: #2563eb !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1) !important;
}

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

/* ===================================================
   📱 RESPONSIVE BREAKPOINTS (รองรับทุกอุปกรณ์พกพาและเบราว์เซอร์)
=================================================== */

/* หน้าจอแล็ปท็อป/จอขนาดกลาง หรือแท็บเล็ตโหมดแนวนอน */
@media (max-width: 1199.98px) {
    .grid-4-columns {
        grid-template-columns: repeat(3, 1fr); /* ปรับยุบจาก 4 เหลือแถวละ 3 */
        gap: 16px;
    }
}

/* หน้าจอแท็บเล็ตโหมดแนวตั้งมาตรฐาน */
@media (max-width: 991.98px) {
    .grid-4-columns {
        grid-template-columns: repeat(2, 1fr); /* ปรับยุบเหลือสแต็กคู่แถวละ 2 */
    }
}

/* หน้าจอมือถือสมาร์ตโฟนพกพาขนาดเล็ก */
@media (max-width: 575.98px) {
    .grid-4-columns {
        grid-template-columns: 1fr; /* เรียงแถวเดี่ยวตอนลึกสไตล์คลีนโมบายล์ */
        gap: 16px;
    }
    .board-main-title {
        font-size: 26px !important;
    }
    .board-main-header {
        margin-bottom: 35px;
    }
    .board-card {
        max-width: 290px; /* คุมขนาดไม่ให้ภาพสยายใหญ่เกินไปหรือขยายแตกบนมือถือ */
        margin: 0 auto;
        width: 100%;
    }
}

/* ===================================================
   อาจารย์ประจำสาขาวิชานิติศาสตร์
=================================================== */
/* ===================================================
   LAW FACULTY DIRECTORY STYLING (PREMIUM ROYAL BLUE)
=================================================== */

/* คอนเทนเนอร์รากหลัก */
.faculty-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Kanit', sans-serif !important;
    color: #171717 !important;
}

/* ส่วนหัวข้อหลักประจำเพจ */
.faculty-main-header {
    text-align: center;
    margin-bottom: 50px;
}

.faculty-header-icon-wrap {
    width: 65px;
    height: 65px;
    background-color: #1e3a8a; /* สีน้ำเงินลึกหรูหรา */
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.25);
}

.faculty-svg-icon {
    width: 26px;
    height: 26px;
    color: #ffffff;
}

.faculty-main-title {
    font-size: 32px !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
}

.faculty-main-subtitle {
    font-size: 16px;
    color: #737373;
    margin: 0;
}

/* ผังตารางคณาจารย์ (4 คอลัมน์บนจอใหญ่ เพื่อขนาดการ์ดที่กระชับ ไม่ใหญ่เทอะทะ) */
.faculty-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

/* โครงสร้างตัวกล่องคาร์ด */
.faculty-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.02) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s ease;
}

/* ไฮไลท์สำหรับคณาจารย์ที่มีตำแหน่งบริหาร (ขอบบนสีน้ำเงินพรีเมียม) */
.admin-highlight {
    border-top: 4px solid #2563eb !important;
    background-color: #fdfbf7 !important; /* พื้นหลังครีมพรีเมียมอ่อนจาง */
}

/* จัดสัดส่วนกรอบรูปเป็นแนวตั้ง Portrait 3:4 คมชัดสูงสุด */
.faculty-image-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #fdfbf7;
    border-bottom: 1px solid #e5e5e5;
}

.faculty-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
    image-rendering: -webkit-optimize-contrast; /* สั่งภาพล็อคความคมชัดสูง ไม่เบลอ */
}

/* บล็อกรายละเอียดส่วนข้อความด้านใน */
.faculty-info-box {
    padding: 18px 15px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.faculty-name {
    font-size: 16px !important;
    color: #1e3a8a !important; /* สีกรมท่าองค์กร */
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4;
}

.faculty-rank {
    font-size: 13px;
    color: #737373;
    font-weight: 500;
    margin: 0 0 10px 0;
}

/* ป้ายแสดงตำแหน่งบริหาร */
.faculty-admin-badge {
    background-color: #2563eb;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    margin-bottom: 14px;
    line-height: 1.4;
}

/* รายการข้อมูลการติดต่อด้านล่างการ์ด */
.faculty-contact-list {
    margin-top: auto; /* ดันข้อมูลลงท้ายให้การ์ดทุกล่องดูสมดุลเสมอกัน */
    border-top: 1px solid #f5efe6;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.icon-label {
    color: #2563eb; /* สีไอคอนน้ำเงินสว่าง */
    font-weight: bold;
    flex-shrink: 0;
    width: 15px;
    text-align: center;
}

.contact-line .label {
    color: #737373;
    font-weight: 500;
    flex-shrink: 0;
}

.contact-line .value {
    color: #171717;
    word-break: break-all; /* ป้องกันอีเมลยาวล้นขอบสำหรับการแสดงผลบนมือถือ */
}

/* สไตล์ลิงก์อีเมลตอบสนองผู้ใช้งาน */
a.value {
    color: #2563eb !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

a.value:hover {
    color: #1e3a8a !important;
    text-decoration: underline !important;
}

/* ===================================================
   HOVER EFFECTS
=================================================== */
.faculty-card:hover {
    transform: translateY(-4px);
    border-color: #2563eb !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15) !important;
}

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

/* ===================================================
   📱 RESPONSIVE BREAKPOINTS (รองรับทุกอุปกรณ์พกพาและเบราว์เซอร์)
=================================================== */

/* จอคอมพิวเตอร์ขนาดกลาง-เล็ก หรือแท็บเล็ตแนวนอน */
@media (max-width: 1199.98px) {
    .faculty-grid-layout {
        grid-template-columns: repeat(3, 1fr); /* ปรับยุบจาก 4 เหลือแถวละ 3 */
        gap: 16px;
    }
}

/* จอแท็บเล็ตแนวตั้งมาตรฐาน */
@media (max-width: 991.98px) {
    .faculty-grid-layout {
        grid-template-columns: repeat(2, 1fr); /* ปรับยุบเหลือแถวละ 2 */
    }
}

/* จอมือถือขนาดเล็กทั่วไป */
@media (max-width: 575.98px) {
    .faculty-grid-layout {
        grid-template-columns: 1fr; /* ปรับพับเป็นแถวเดี่ยวตอนลึกสไตล์โมบายล์ */
        gap: 16px;
    }
    .faculty-main-title {
        font-size: 26px !important;
    }
    .faculty-main-header {
        margin-bottom: 35px;
    }
    .faculty-card {
        max-width: 295px; /* คุมขนาดไม่ให้ภาพขยายใหญ่ล้นจนแตกบนมือถือ */
        margin: 0 auto;
        width: 100%;
    }
}

/* ==========================================================================
   Global & Typography Master Stylesheet (Cassiopeia Template Compatible)
   โทนสี: น้ำเงินองค์กร พรีเมียม หรูหรา น่านับถือ อัพเดตขนาดฟอนต์
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

:root {
    /* จานสีหลักองค์กร (Corporate Navy Blue Theme) */
    --primary-navy: #002d62;
    --secondary-blue: #2563eb;
    --accent-gold: #b38600;
    --dark-slate: #1e293b;
    --text-charcoal: #171717;
    --text-muted: #555555;
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
}

/* ตั้งค่ามาตรฐานแบบอักษรขนาดใหญ่ อ่านง่าย ทุกเบราว์เซอร์ */
body, .faculty-page-container {
    font-family: 'Kanit', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* โครงสร้างคอนเทนเนอร์หลักของหน้าเพจ */
.faculty-page-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 15px;
    box-sizing: border-box;
}

/* ==========================================================================
   Header Section (ส่วนหัวข้อหลักประจำหน้าเพจ)
   ========================================================================== */
.faculty-main-header {
    text-align: center;
    margin-bottom: 35px;
}

.faculty-header-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #2563eb 0%, #002d62 100%);
    color: #ffffff;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 18px rgba(0, 45, 98, 0.2);
}

.faculty-svg-icon {
    width: 32px;
    height: 32px;
}

.faculty-main-title {
    font-size: 2rem !important; /* ปรับขนาดตัวอักษรหัวข้อใหญ่ 32px */
    font-weight: 700 !important;
    color: var(--primary-navy) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.25;
}

.faculty-main-subtitle {
    font-size: 1.125rem !important; /* ขนาด 18px อ่านง่าย */
    color: var(--text-muted) !important;
    margin: 0 !important;
    font-weight: 400;
}

/* ==========================================================================
   2-Column Layout System (โครงสร้างตาราง 2 คอลัมน์พรีเมียม)
   ========================================================================== */
.faculty-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* บังคับแบ่งเป็น 2 คอลัมน์เท่ากัน */
    gap: 25px;
    align-items: start;
    width: 100%;
}

/* โครงสร้างการ์ด (Block Container) */
.faculty-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 8px 25px rgba(0, 45, 98, 0.03);
    transition: all 0.25s ease-in-out;
    box-sizing: border-box;
}

.faculty-card:hover {
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08);
    transform: translateY(-2px);
}

/* แถบไฮไลท์สีน้ำเงินขอบบนสำหรับกล่องเด่น */
.faculty-card.admin-highlight {
    border-top: 4px solid var(--secondary-blue) !important;
}

/* ==========================================================================
   Header Inside Cards (หัวข้อภายในกล่อง)
   ========================================================================== */
.card-section-header {
    display: flex;
    align-items: center;
    border-bottom: 2.5px solid var(--primary-navy);
    padding-bottom: 12px;
    margin-bottom: 22px;
}

.card-header-icon {
    font-size: 26px;
    margin-right: 12px;
    line-height: 1;
}

.card-header-title {
    font-size: 1.3rem !important; /* ขนาด 20.8px ใหญ่เด่นชัด */
    color: var(--primary-navy) !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.sub-category-title {
    font-size: 1.15rem !important; /* ขนาด 18.4px */
    color: var(--accent-gold) !important;
    margin: 20px 0 10px 0 !important;
    font-weight: 600 !important;
    border-left: 4px solid var(--accent-gold);
    padding-left: 10px;
    line-height: 1.3;
}

/* ==========================================================================
   Content Lists & Links (ส่วนเนื้อหาและลิงก์ความรู้)
   ========================================================================== */
.faculty-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.05rem; /* ขนาด 16.8px */
    line-height: 1.5;
}

.icon-label {
    font-size: 18px;
    line-height: 1.4;
    flex-shrink: 0;
}

.contact-line a.value {
    color: var(--text-charcoal);
    text-decoration: none !important;
    font-weight: 400;
    transition: color 0.2s ease;
}

.contact-line a.value:hover {
    color: var(--secondary-blue) !important;
    font-weight: 500;
}

.author-label {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 300;
    margin-left: 4px;
}

/* ==========================================================================
   Responsive Breakpoints (รองรับทุกอุปกรณ์ มือถือ แท็บเล็ต คอมพิวเตอร์)
   ========================================================================== */
@media (max-width: 991.98px) {
    .faculty-grid-layout {
        grid-template-columns: 1fr; /* ปรับเป็น 1 คอลัมน์บนหน้าจอขนาดเล็ก */
        gap: 20px;
    }
    .faculty-card {
        padding: 20px;
    }
    .faculty-main-title {
        font-size: 1.65rem !important;
    }
}



/* ==========================================================================
   Activity Article Template Extension (Cassiopeia Template Compatible) CSS สไตล์ลิสต์สำหรับข่าวกิจกรรม (activity-detail.css)
   ========================================================================== */

/* Breadcrumb นำทาง */
.activity-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.breadcrumb-link {
    color: #2563eb;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.breadcrumb-link:hover {
    color: #002d62;
    text-decoration: underline !important;
}
.breadcrumb-separator { color: #cbd5e1; }
.breadcrumb-current { color: #475569; font-weight: 500; }

/* โครงสร้างตัวบทความข่าว */
.activity-article-container {
    padding: 35px !important;
    max-width: 1000px;
    margin: 0 auto;
}

.activity-header {
    margin-bottom: 25px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 20px;
}
.activity-meta-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.meta-tag {
    background-color: #1e3a8a;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}
.meta-date {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}
.activity-title {
    font-size: 1.65rem !important;
    color: #002d62 !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}
.activity-author-bar {
    font-size: 0.95rem;
    color: #475569;
}

/* ภาพปกหลัก */
.activity-cover-wrapper {
    position: relative;
    width: 100%;
    max-height: 480px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.activity-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.activity-cover-wrapper:hover .activity-cover-img {
    transform: scale(1.03);
}
.cover-overlay-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 45, 98, 0.8);
    color: #ffffff;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

/* เนื้อหาบทความ */
.activity-content-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #1e293b;
    margin-bottom: 35px;
}
.content-lead {
    font-size: 1.15rem;
    color: #0f172a;
    line-height: 1.8;
}

/* กล่องรายชื่อโรงเรียนเครือข่าย */
.network-schools-box {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 20px;
    margin: 25px 0;
}
.box-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #002d62;
    margin-bottom: 12px;
}
.school-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 15px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1rem;
    color: #334155;
}

/* Blockquote โควทเน้นย้ำ */
.activity-highlight-quote {
    background-color: #eff6ff;
    border-left: 4px solid #2563eb;
    padding: 20px 24px;
    border-radius: 0 10px 10px 0;
    margin: 30px 0;
    font-size: 1.05rem;
    color: #1e3a8a;
    font-style: italic;
    line-height: 1.7;
}

/* แกลเลอรีรูปภาพประมวลกิจกรรม (6 รูป) */
.activity-gallery-section {
    border-top: 2px dashed #e2e8f0;
    padding-top: 30px;
    margin-bottom: 30px;
}
.gallery-title {
    font-size: 1.3rem !important;
    color: #002d62 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}
.gallery-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์พรีเมียม */
    gap: 16px;
}
.gallery-item-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
}
.gallery-item-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.gallery-hover-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(37, 99, 235, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
}
/* เอฟเฟกต์ Hover โอเวอร์ขยายรูปภาพ */
.gallery-item-card:hover img {
    transform: scale(1.08);
}
.gallery-item-card:hover .gallery-hover-overlay {
    opacity: 1;
}

/* แถบส่วนล่างบทความ */
.activity-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
}
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f1f5f9;
    color: #1e293b !important;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
}
.back-btn:hover {
    background-color: #002d62;
    color: #ffffff !important;
}
.share-btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.share-label {
    font-size: 0.95rem;
    color: #64748b;
}

/* ==========================================================================
   Lightbox Modal CSS (ระบบขยายภาพใหญ่เต็มจอ)
   ========================================================================== */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn 0.25s ease;
}
.lightbox-modal-content {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    object-fit: contain;
}
.lightbox-close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}
.lightbox-close-btn:hover { color: #ef4444; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Breakpoints */
@media (max-width: 767.98px) {
    .activity-article-container { padding: 20px !important; }
    .activity-title { font-size: 1.35rem !important; }
    .school-list-grid { grid-template-columns: 1fr; }
    .gallery-grid-layout { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .gallery-grid-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Activity Article Template Extension (Full-Width & High-Res Fix) CSS ปรับปรุงแก้ไข (ขยายเต็มหน้าจอ + ปรับ Lightbox
   ========================================================================== */

.activity-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.breadcrumb-link {
    color: #2563eb;
    text-decoration: none !important;
}
.breadcrumb-link:hover {
    color: #002d62;
    text-decoration: underline !important;
}
.breadcrumb-separator { color: #cbd5e1; }
.breadcrumb-current { color: #475569; font-weight: 500; }

/* 🛠️ ปรับแก้ปัญหาการแสดงผลไม่เต็มหน้าจอ (Full Width Fix) */
.faculty-page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.activity-article-container {
    padding: 30px !important;
    width: 100% !important;
    max-width: 100% !important; /* ขยายเต็มความกว้างหน้าจอ */
    box-sizing: border-box !important;
}

.activity-header {
    margin-bottom: 25px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 20px;
}
.activity-meta-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.meta-tag {
    background-color: #1e3a8a;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}
.meta-date {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}
.activity-title {
    font-size: 1.8rem !important;
    color: #002d62 !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}
.activity-author-bar {
    font-size: 0.95rem;
    color: #475569;
}

/* 🛠️ ภาพปกหลัก คมชัด ไม่บิดเบี้ยว */
.activity-cover-wrapper {
    position: relative;
    width: 100%;
    max-height: 550px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    background-color: #f8fafc;
}
.activity-cover-img {
    width: 100%;
    height: 100%;
    max-height: 550px;
    object-fit: contain; /* รักษาความคมชัดและอัตราส่วนภาพปกไม่ให้โดนตัด */
    display: block;
    margin: 0 auto;
}

/* เนื้อหาบทความ */
.activity-content-body {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #1e293b;
    margin-bottom: 35px;
}
.content-lead {
    font-size: 1.2rem;
    color: #0f172a;
    line-height: 1.8;
}

.network-schools-box {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 20px;
    margin: 25px 0;
}
.box-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #002d62;
    margin-bottom: 12px;
}
.school-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 15px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.05rem;
    color: #334155;
}

.activity-highlight-quote {
    background-color: #eff6ff;
    border-left: 4px solid #2563eb;
    padding: 20px 24px;
    border-radius: 0 10px 10px 0;
    margin: 30px 0;
    font-size: 1.1rem;
    color: #1e3a8a;
    font-style: italic;
    line-height: 1.7;
}

/* แกลเลอรีรูปภาพประมวลกิจกรรม */
.activity-gallery-section {
    border-top: 2px dashed #e2e8f0;
    padding-top: 30px;
    margin-bottom: 30px;
}
.gallery-title {
    font-size: 1.35rem !important;
    color: #002d62 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}
.gallery-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.gallery-item-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    background-color: #000000;
}
.gallery-item-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.3s ease;
}
.gallery-hover-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 45, 98, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
}
.gallery-item-card:hover img {
    transform: scale(1.06);
    opacity: 0.85;
}
.gallery-item-card:hover .gallery-hover-overlay {
    opacity: 1;
}

.activity-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
}
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f1f5f9;
    color: #1e293b !important;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 500;
}
.back-btn:hover {
    background-color: #002d62;
    color: #ffffff !important;
}

/* 🛠️ แก้ไขปัญหารูปภาพขยายไม่ขึ้น (Lightbox High Z-Index Fix) */
.lightbox-modal {
    display: none;
    position: fixed !important;
    z-index: 999999 !important; /* ดึงขึ้นหน้าสุด ไม่โดน Template บัง */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
.lightbox-modal-content {
    max-width: 92% !important;
    max-height: 88vh !important;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.8);
    object-fit: contain !important;
    display: block;
    margin: auto;
}
.lightbox-close-btn {
    position: absolute !important;
    top: 25px !important;
    right: 35px !important;
    color: #ffffff !important;
    font-size: 45px !important;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000000 !important;
    line-height: 1;
}
.lightbox-close-btn:hover { color: #ef4444 !important; }

@media (max-width: 767.98px) {
    .school-list-grid { grid-template-columns: 1fr; }
    .gallery-grid-layout { grid-template-columns: repeat(2, 1fr); }
}



/* ==========================================================================
   บังคับลดขนาดฟอนต์หัวข้อข่าวในโมดูล Mini Frontpage แบบครอบคลุมสากล
   ========================================================================== */

/* บังคับเจาะลึกทุกระดับแท็กหัวข้อและลิงก์ในโมดูลข่าว */
div[class*="minifrontpage"] a,
div[class*="minifrontpage"] h2,
div[class*="minifrontpage"] h3,
div[class*="minifrontpage"] h4,
div[class*="minifrontpage"] .title,
div[class*="minifrontpage"] .mf-title,
div[class*="minifrontpage"] .mf-title a,
.mod-minifrontpage a,
.mod-minifrontpage h3,
.mod-minifrontpage h4 {
    font-size: 15px !important;            /* บังคับขนาดฟอนต์ 15px กระชับ พอดีตา */
    font-weight: 600 !important;           /* ตัวหนากำลังดี */
    line-height: 1.4 !important;           /* ระยะห่างบรรทัดพอดี ไม่ซ้อนกัน */
    color: #002d62 !important;             /* สีน้ำเงินองค์กร */
    text-decoration: none !important;
}

/* ปรับขนาดข้อความวันที่ด้านล่าง */
div[class*="minifrontpage"] .small,
div[class*="minifrontpage"] .created,
div[class*="minifrontpage"] .published,
div[class*="minifrontpage"] .mf-date,
div[class*="minifrontpage"] time {
    font-size: 12.5px !important;          /* ขนาดวันที่ 12.5px */
    color: #64748b !important;            /* สีเทาสุภาพ */
    font-weight: 400 !important;
}



/* ==========================================================================
   Activity Article Global Stylesheet (Fix Text Center & Lightbox Popup)
   ========================================================================== */

/* 1. บังคับยึดข้อความบทความข่าวให้ชิดซ้ายเสมอ ป้องกันเอดิเตอร์โยนข้อความมากึ่งกลาง */
.activity-article-container,
.activity-content-body,
.activity-content-body p,
.activity-content-body blockquote {
    text-align: left !important; /* ยึดชิดซ้ายสากลอ่านง่าย */
    word-break: break-word !important;
}

.activity-content-body p {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: #171717 !important;
    margin-bottom: 16px !important;
}

.activity-content-body p.content-lead {
    font-size: 1.1rem !important;
    color: #000000 !important;
}

.activity-highlight-quote {
    background-color: #eff6ff !important;
    border-left: 4px solid #2563eb !important;
    padding: 18px 22px !important;
    border-radius: 0 10px 10px 0 !important;
    margin: 25px 0 !important;
    font-size: 1.05rem !important;
    color: #1e3a8a !important;
    font-style: italic !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/* 2. ระบบ Lightbox Modal Popup รูปภาพขยายใหญ่ */
.activity-lightbox-modal {
    display: none;
    position: fixed !important;
    z-index: 999999 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(5px);
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.activity-lightbox-modal img {
    max-width: 92% !important;
    max-height: 88vh !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8) !important;
    object-fit: contain !important;
    margin: auto !important;
    display: block !important;
}

.activity-lightbox-close {
    position: absolute !important;
    top: 20px !important;
    right: 30px !important;
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    line-height: 1 !important;
}

.activity-lightbox-close:hover {
    color: #ef4444 !important;
}
/* ==========================================================================
   Pure CSS Lightbox (TinyMCE Safe - ปลอดภัยจากการถูกเอดิเตอร์ลบโค้ด)
   ========================================================================== */

/* ซ่อน Lightbox ไว้ก่อน */
.mce-lightbox {
    display: none;
    position: fixed !important;
    z-index: 999999 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(5px);
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* แสดงผล Lightbox เมื่อกดคลิกแท็ก :target */
.mce-lightbox:target {
    display: flex !important;
}

/* ภาพขยายใหญ่กึ่งกลางหน้าจอ */
.mce-lightbox img {
    max-width: 90vw !important;
    max-height: 85vh !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    object-fit: contain !important;
}

/* ปุ่มปิด Popup (กากบาท X) */
.mce-lightbox-close {
    position: absolute !important;
    top: 20px !important;
    right: 30px !important;
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.mce-lightbox-close:hover {
    color: #ef4444 !important;
}

/* ==========================================================================
   Global Auto-Lightbox for Activity News (TinyMCE Safe)
   ========================================================================== */

/* สไตล์กรอบ Lightbox Popup */
#globalNewsLightbox {
    display: none;
    position: fixed !important;
    z-index: 999999 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(5px);
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

#globalNewsLightbox img {
    max-width: 90% !important;
    max-height: 88vh !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    object-fit: contain !important;
    margin: auto !important;
    display: block !important;
}

.global-lightbox-close {
    position: absolute !important;
    top: 20px !important;
    right: 30px !important;
    color: #ffffff !important;
    font-size: 40px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
}
.global-lightbox-close:hover { color: #ef4444 !important; }

/* เปลี่ยนเคอร์เซอร์เป็นรูปแว่นขยายอัตโนมัติ */
.activity-cover-wrapper img,
.gallery-item-card img {
    cursor: zoom-in !important;
}



/* =========================================================
   Custom News PR Template - Royal Navy & Gold Theme
   Designed for Cassiopeia Template - MCRU CSS สำหรับหน้าข่าวประชาสัมพันธ์
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

.news-pr-container.kanit-font {
    font-family: 'Kanit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #2b2b2b;
    line-height: 1.6;
}

/* Image Wrapper & Sticky Styling */
.pr-image-wrapper {
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 35, 102, 0.15) !important;
}

.pr-image-wrapper img.hover-zoom {
    transition: transform 0.5s ease;
    object-fit: cover;
}

.pr-image-wrapper:hover img.hover-zoom {
    transform: scale(1.03);
}

/* Hover Animation Effects */
.hover-top {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Pulse Animation for Highlights */
.animate-pulse {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* Links & Buttons Styles */
.hover-text-gold:hover {
    color: #ffc107 !important;
}

/* Responsive adjustments for desktop sticky alignment */
@media (min-width: 992px) {
    .sticky-lg-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
    }
}




/* ==========================================================================
   Knowledge Base Stylesheet (Cassiopeia & TinyMCE Compatible) คลังข้อมูลความรู้
   โทนสี: น้ำเงินองค์กร พรีเมียม หรูหรา น่านับถือ
   ========================================================================== */

/* คอนเทนเนอร์หลัก */
.faculty-page-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    font-family: 'Kanit', sans-serif !important;
}

/* ส่วนหัวข้อหลัก */
.faculty-main-header {
    text-align: center;
    margin-bottom: 30px;
}
.faculty-header-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2563eb 0%, #002d62 100%);
    color: #ffffff;
    border-radius: 50%;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0, 45, 98, 0.2);
}
.faculty-svg-icon {
    width: 30px;
    height: 30px;
}
.faculty-main-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #002d62 !important;
    margin: 0 0 8px 0 !important;
}
.faculty-main-subtitle {
    font-size: 1.1rem !important;
    color: #555555 !important;
    margin: 0 !important;
}

/* ผังตาราง 2 คอลัมน์ */
.knowledge-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    align-items: start;
}

/* โครงสร้างการ์ดกลุ่มหลัก */
.main-group-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0, 45, 98, 0.04);
}
.main-group-card.admin-highlight {
    border-top: 4px solid #2563eb !important;
}

/* หัวข้อกลุ่มใหญ่ */
.card-section-header {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #002d62;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.card-header-icon {
    font-size: 24px;
    margin-right: 10px;
}
.card-header-title {
    font-size: 1.25rem !important;
    color: #002d62 !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

/* 🌟 บล็อกการ์ดย่อย (การ์ดหมายเลข 1 - 6) */
.knowledge-sub-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    transition: all 0.2s ease-in-out;
}
.knowledge-sub-card:last-child {
    margin-bottom: 0;
}
.knowledge-sub-card:hover {
    background-color: #faf8f5;
    border-color: #cbd5e1;
}

/* หัวข้อหมวดหมู่ย่อย (แถบสีทอง) */
.sub-category-title {
    font-size: 1.15rem !important;
    color: #b38600 !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
    border-left: 4px solid #b38600;
    padding-left: 10px;
    line-height: 1.3;
}

/* รายการลิงก์และเนื้อหา */
.contact-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 1.05rem;
    line-height: 1.6;
}
.contact-line:last-child {
    margin-bottom: 0;
}
.icon-label {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.4;
}

.contact-line a.value {
    color: #171717;
    text-decoration: none !important;
    font-weight: 400;
    transition: color 0.2s ease;
}
.contact-line a.value:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}
.contact-line a.value.link-highlight {
    color: #2563eb !important;
    font-weight: 500;
}
.contact-line a.value.bold-text {
    font-weight: 600 !important;
}

.author-label {
    color: #555555;
    font-size: 0.95rem;
    margin-left: 4px;
}
.date-label {
    color: #555555;
    font-weight: 500;
    margin-right: 6px;
}
.sub-desc {
    font-size: 0.95rem;
    color: #64748b;
    margin-top: 2px;
}

/* ระยะห่างการ์ดฝั่งขวา */
.active-learning-block {
    margin-bottom: 25px;
}

/* Responsive Breakpoints */
@media (max-width: 991.98px) {
    .knowledge-grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* ==========================================================================
   ITA 2569 Master Stylesheet (TinyMCE & Cassiopeia Compatible)  การประเมินคุณธรรมและความโปร่งใสในการดำเนินงาน พ.ศ. 2569 (ITA) 
   ========================================================================== */

/* แถบหัวข้อตัวชี้วัดหลัก */
.ita-section-banner { 
    display: block !important; 
    background: #1e3a8a !important; 
    color: #ffffff !important; 
    padding: 12px 20px !important; 
    border-radius: 8px !important; 
    font-weight: 600 !important; 
    font-size: 16px !important; 
    margin: 30px 0 15px 0 !important; 
    box-shadow: 0 4px 10px rgba(30,58,138,0.15) !important; 
}

/* หัวข้อตัวชี้วัดย่อย */
.ita-subsection-title { 
    font-weight: 600 !important; 
    color: #b38600 !important; 
    font-size: 15px !important; 
    margin: 20px 0 10px 0 !important; 
    padding-left: 10px !important; 
    border-left: 4px solid #b38600 !important; 
}

/* โครงสร้างการจัดเรียงตาราง 2 คอลัมน์ */
.ita-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

/* กล่องการ์ด o1 - o26 */
.ita-item-card { 
    background: #ffffff !important; 
    border: 1px solid #e5e5e5 !important; 
    border-radius: 12px !important; 
    padding: 20px !important; 
    transition: all 0.25s ease !important; 
    box-sizing: border-box !important;
}

.ita-item-card:hover { 
    border-color: #2563eb !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 6px 20px rgba(37,99,235,0.08) !important; 
}

/* โค้ดรหัสตัวชี้วัด เช่น o1, o2 */
.ita-item-code { 
    display: inline-block !important; 
    background-color: #2563eb !important; 
    color: #ffffff !important; 
    font-weight: bold !important; 
    font-size: 13px !important; 
    padding: 3px 12px !important; 
    border-radius: 20px !important; 
    margin-bottom: 10px !important; 
}

.ita-item-title { 
    font-size: 15px !important; 
    color: #002d62 !important; 
    font-weight: 600 !important; 
    margin: 0 0 12px 0 !important; 
    line-height: 1.4 !important;
}

/* รายการลิงก์ภายในกล่องการ์ด */
ul.ita-link-list { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 8px !important; 
}

ul.ita-link-list > li {
    margin: 0 !important;
    padding: 0 !important;
}

.ita-link-btn { 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
    background-color: #faf9f6 !important; 
    border: 1px solid #e5e5e5 !important; 
    border-radius: 8px !important; 
    padding: 10px 14px !important; 
    text-decoration: none !important; 
    transition: all 0.2s ease !important; 
}

.ita-link-btn:hover { 
    background-color: #ffffff !important; 
    border-color: #2563eb !important; 
}

.ita-link-text { 
    font-size: 14px !important; 
    color: #171717 !important; 
}

.ita-link-btn:hover .ita-link-text { 
    color: #2563eb !important; 
    font-weight: 500 !important; 
}

/* กล่องรอดำเนินการ */
.ita-empty-box { 
    background-color: #f5f5f5 !important; 
    color: #737373 !important; 
    border: 1px dashed #cbd5e1 !important; 
    border-radius: 8px !important; 
    padding: 12px 14px !important; 
    font-size: 13.5px !important; 
}

/* Responsive รองรับหน้าจอมือถือ */
@media (max-width: 991.98px) {
    .ita-grid-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}
/* ==========================================================================
   Master Faculty Grid Stylesheet (Cassiopeia Template Compatible)
   แสดงผล: คอมพิวเตอร์ 3 ภาพ/แถว | แท็บเล็ต 2 ภาพ/แถว | มือถือ 1 ภาพ/แถว
   ========================================================================== */

/* 1. ระบบ Grid แบ่ง 3 คอลัมน์สากลบนหน้าจอคอมพิวเตอร์ */
.faculty-grid-layout {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* บังคับ 3 การ์ดต่อ 1 แถว */
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. โครงสร้างการ์ดคณาจารย์แต่ละท่าน */
.faculty-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 45, 98, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transition: all 0.25s ease-in-out !important;
    box-sizing: border-box !important;
}

.faculty-card:hover {
    border-color: #2563eb !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.1) !important;
}

.faculty-card.admin-highlight {
    border-top: 4px solid #2563eb !important;
}

/* 3. คุมขนาดกล่องรูปภาพและรูปอาจารย์ให้อยู่ในอัตราส่วน 3:4 กะทัดรัด สมส่วน ไม่ใหญ่เกินไป */
.faculty-image-wrap {
    width: 100% !important;
    max-width: 220px !important;       /* คุมความกว้างรูปภาพไม่ให้ใหญ่เกินไป */
    aspect-ratio: 3 / 4 !important;    /* อัตราส่วนแนวตั้งมาตรฐานรูปติดบัตร/บุคลากร */
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    background-color: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
}

.faculty-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       /* ตัดรูปเข้าขอบสวยงาม ไม่เบี้ยว ไม่ยืด */
    object-position: top center !important; /* ยึดใบหน้าช่วงบนเป็นหลัก */
    display: block !important;
}

/* 4. รายละเอียดข้อความข้อมูลอาจารย์ */
.faculty-info-box {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.faculty-name {
    font-size: 1.05rem !important;     /* ขนาดชื่อกำลังดี 16.8px */
    font-weight: 700 !important;
    color: #002d62 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
}

.faculty-rank {
    font-size: 0.9rem !important;
    color: #64748b !important;
    margin: 0 0 10px 0 !important;
    font-weight: 500 !important;
}

.faculty-admin-badge {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    border: 1px solid #bfdbfe !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

/* ช่องทางติดต่อ */
.faculty-contact-list {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 0.875rem !important;
    border-top: 1px dashed #e2e8f0 !important;
    padding-top: 10px !important;
    margin-top: 4px !important;
}

.contact-line {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #334155 !important;
    word-break: break-all !important;
}

.contact-line a.value {
    color: #2563eb !important;
    text-decoration: none !important;
}

.contact-line a.value:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   Responsive Breakpoints (รองรับอุปกรณ์ตามโจทย์)
   ========================================================================== */

/* หน้าจอแท็บเล็ต (Tablet): 2 ภาพ ต่อ 1 แถว */
@media (max-width: 991.98px) {
    .faculty-grid-layout {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}

/* หน้าจอโทรศัพท์มือถือ (Mobile): 1 ภาพ ต่อ 1 แถว */
@media (max-width: 575.98px) {
    .faculty-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .faculty-image-wrap {
        max-width: 200px !important;
    }
}



/* ==========================================================================
   Plan & Report Document Stylesheet (TinyMCE & Cassiopeia Compatible)  เอกสารแผน / รายงาน 
   ========================================================================== */

/* คอนเทนเนอร์และหัวข้อหลัก */
.plan-doc-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ผังตารางแบ่ง 2 คอลัมน์หลัก */
.plan-doc-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

/* การ์ดคอลัมน์ใหญ่ */
.plan-doc-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 6px 20px rgba(0, 45, 98, 0.04) !important;
    box-sizing: border-box !important;
}

.plan-doc-card.admin-highlight {
    border-top: 4px solid #2563eb !important;
}

/* หัวข้อกลุ่มใหญ่ */
.plan-section-header {
    display: flex !important;
    align-items: center !important;
    border-bottom: 2px solid #002d62 !important;
    padding-bottom: 8px !important;
    margin-bottom: 18px !important;
}

.plan-section-header .header-icon {
    font-size: 20px !important;
    margin-right: 8px !important;
}

.plan-section-header .header-title {
    font-size: 1.15rem !important;
    color: #002d62 !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

/* บล็อกการ์ดย่อยประจำหัวข้อย่อย */
.plan-sub-block {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
}

.plan-sub-block:last-child {
    margin-bottom: 0 !important;
}

/* หัวข้อหมวดหมู่ย่อย (ขอบสีทอง) */
.plan-sub-title {
    font-size: 1.05rem !important;
    color: #b38600 !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
    border-left: 3px solid #b38600 !important;
    padding-left: 8px !important;
    line-height: 1.3 !important;
}

/* รายการลิงก์เอกสารดาวน์โหลด */
ul.plan-link-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

ul.plan-link-list > li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100 !important;
}

ul.plan-link-list .doc-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
    line-height: 1.5 !important;
}

ul.plan-link-list a.doc-link {
    font-size: 0.95rem !important;
    color: #171717 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    transition: color 0.2s ease !important;
}

ul.plan-link-list a.doc-link:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}

/* Responsive รองรับหน้าจอมือถือ */
@media (max-width: 991.98px) {
    .plan-doc-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}
/* ==========================================================================
   Manual & Service Standard Stylesheet (TinyMCE & Cassiopeia Compatible) คู่มือ มาตรฐานการปฏิบัติงาน การให้บริการ และเอกสารแบบฟอร์ม 
   ========================================================================== */

/* คอนเทนเนอร์และผังตารางแบ่ง 2 คอลัมน์หลัก */
.manual-doc-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    box-sizing: border-box;
}

.manual-doc-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

/* การ์ดคอลัมน์ใหญ่ */
.manual-doc-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 6px 20px rgba(0, 45, 98, 0.04) !important;
    box-sizing: border-box !important;
}

.manual-doc-card.admin-highlight {
    border-top: 4px solid #2563eb !important;
}

/* หัวข้อกลุ่มใหญ่ */
.manual-section-header {
    display: flex !important;
    align-items: center !important;
    border-bottom: 2px solid #002d62 !important;
    padding-bottom: 8px !important;
    margin-bottom: 18px !important;
}

.manual-section-header .header-icon {
    font-size: 20px !important;
    margin-right: 8px !important;
}

.manual-section-header .header-title {
    font-size: 1.15rem !important;
    color: #002d62 !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

/* บล็อกการ์ดย่อยประจำหัวข้อย่อย */
.manual-sub-block {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
}

.manual-sub-block:last-child {
    margin-bottom: 0 !important;
}

/* หัวข้อหมวดหมู่ย่อย (ขอบสีทอง) */
.manual-sub-title {
    font-size: 1.05rem !important;
    color: #b38600 !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
    border-left: 3px solid #b38600 !important;
    padding-left: 8px !important;
    line-height: 1.3 !important;
}

/* รายการลิงก์เอกสารและแบบฟอร์ม */
ul.manual-link-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

ul.manual-link-list > li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

ul.manual-link-list .doc-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
    line-height: 1.5 !important;
}

ul.manual-link-list a.doc-link {
    font-size: 0.95rem !important;
    color: #171717 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    transition: color 0.2s ease !important;
}

ul.manual-link-list a.doc-link:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}

ul.manual-link-list a.doc-link strong {
    color: #002d62 !important;
}

/* Responsive รองรับหน้าจอมือถือ */
@media (max-width: 991.98px) {
    .manual-doc-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}


/* ==========================================================================
   Contact & Service Tabs Master Stylesheet (TinyMCE & Cassiopeia Compatible) ข้อมูลการติดต่อและช่องทางบริการ 
   ========================================================================== */

/* คอนเทนเนอร์หลัก */
.contact-tabs-wrapper {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
}

/* ซ่อนวิทยุ Radio Trigger */
.contact-tabs-radio {
    display: none !important;
}

/* แถบปุ่มเมนูแท็บด้านบน */
.contact-tabs-nav {
    display: flex !important;
    gap: 10px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    margin-bottom: 25px !important;
    flex-wrap: wrap !important;
}

.contact-tab-label {
    padding: 12px 20px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border-radius: 8px 8px 0 0 !important;
    cursor: pointer !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    transition: all 0.2s ease !important;
}

.contact-tab-label:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* กล่องเนื้อหาของแต่ละแท็บ (ซ่อนไว้ก่อน) */
.contact-tab-content-box {
    display: none !important;
}

/* สวิตช์เปิด-ปิดกล่องเนื้อหาเมื่อคลิกแท็บ */
#contact-tab-1:checked ~ .contact-tabs-nav .label-1,
#contact-tab-2:checked ~ .contact-tabs-nav .label-2,
#contact-tab-3:checked ~ .contact-tabs-nav .label-3 {
    background: #002d62 !important;
    color: #ffffff !important;
    border-color: #002d62 !important;
}

#contact-tab-1:checked ~ .contact-content-1,
#contact-tab-2:checked ~ .contact-content-2,
#contact-tab-3:checked ~ .contact-content-3 {
    display: block !important;
}

/* การจัดผังกล่องการ์ดเนื้อหา */
.contact-card-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 6px 20px rgba(0, 45, 98, 0.04) !important;
    box-sizing: border-box !important;
}

.contact-card-box.admin-highlight {
    border-top: 4px solid #2563eb !important;
}

/* ลิงก์การ์ดสำหรับช่องทางร้องเรียน */
.contact-link-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.contact-link-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: #faf9f6 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.contact-link-card:hover {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08) !important;
}

.contact-link-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #002d62 !important;
}

/* สไตล์กรอบ Google Maps */
.contact-map-iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 380px !important;
    border: 0 !important;
    border-radius: 12px !important;
}

/* Responsive สำหรับมือถือ */
@media (max-width: 767.98px) {
    .contact-tabs-nav {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .contact-tab-label {
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        text-align: center !important;
    }
}




/* ==========================================================================
   Module Section Header Pattern (Cassiopeia Template Compatible)
   สไตล์: โทนสีน้ำเงินองค์กรพรีเมียม หรูหรา น่านับถือ  หัวข้อข่าว
   ========================================================================== */

.section-header-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid #002d62 !important; /* แถบสีน้ำเงินเด่นด้านซ้าย */
    border-radius: 12px !important;
    padding: 14px 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ฝั่งซ้าย: หัวข้อและไอคอน */
.section-header-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.section-header-icon {
    font-size: 22px !important;
    line-height: 1 !important;
}

.section-header-title {
    font-size: 1.25rem !important; /* ขนาด 20px กำลังดี */
    font-weight: 700 !important;
    color: #002d62 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.section-header-title .title-accent {
    color: #2563eb !important; /* ไฮไลท์สีฟ้าเพิ่มมิติความหรูหรา */
}

/* ฝั่งขวา: ปุ่มดูข่าวทั้งหมด */
.section-header-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #ffffff !important;
    color: #002d62 !important;
    border: 1.5px solid #2563eb !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1) !important;
    white-space: nowrap !important;
}

.section-header-more-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #002d62 100%) !important;
    color: #ffffff !important;
    border-color: #002d62 !important;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.2) !important;
    transform: translateY(-1px) !important;
}

.section-header-more-btn .btn-arrow {
    font-size: 12px !important;
    transition: transform 0.2s ease !important;
}

.section-header-more-btn:hover .btn-arrow {
    transform: translateX(3px) !important;
}

/* Responsive สำหรับหน้าจอมือถือ */
@media (max-width: 575.98px) {
    .section-header-bar {
        padding: 12px 15px !important;
    }
    .section-header-title {
        font-size: 1.05rem !important;
    }
    .section-header-more-btn {
        padding: 5px 12px !important;
        font-size: 0.825rem !important;
    }
}



/* ==========================================================================
   Responsive Google Calendar Embed Stylesheet   ปฏิทินการขอใช้ห้องประชุม คณะมนษย์ฯ
   ========================================================================== */
.calendar-responsive-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 600px !important; /* ขยายความสูงเพิ่มเป็น 600px เพื่อแสดงหลายรายการ */
    max-height: 80vh !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.calendar-responsive-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* ปรับระดับความสูงสำหรับหน้าจอมือถือ */
@media (max-width: 575.98px) {
    .calendar-responsive-wrapper {
        height: 500px !important;
    }
}





/* ==========================================================================
   Curriculum / Courses Master Stylesheet (TinyMCE & Cassiopeia Compatible)  หลักสูตรที่เปิดสอน 
   ========================================================================== */

/* สถาปัตยกรรม Grid 3 คอลัมน์พรีเมียม (คอมพิวเตอร์ 3 / แท็บเล็ต 2 / มือถือ 1) */
.course-premium-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* โครงสร้างตัวกล่องการ์ดหลักสูตร */
.course-premium-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 6px 20px rgba(0, 45, 98, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    transition: all 0.25s ease-in-out !important;
    box-sizing: border-box !important;
}

.course-premium-card:hover {
    border-color: #2563eb !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08) !important;
}

.course-premium-card.admin-highlight {
    border-top: 4px solid #2563eb !important;
}

/* ส่วนหัวของการ์ด (ล็อคความสูงขั้นต่ำเพื่อให้ปุ่มดาวน์โหลดเริ่มระนาบเดียวกัน) */
.course-card-header-zone {
    min-height: 85px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 12px !important;
}

/* ป้ายวุฒิการศึกษา (Badges) */
.course-badge {
    display: inline-block !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 11.5px !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    margin-bottom: 8px !important;
    align-self: flex-start !important;
    line-height: 1.4 !important;
}

.badge-nb   { background-color: #2563eb !important; } /* น.บ. */
.badge-rpb  { background-color: #0284c7 !important; } /* รป.บ. */
.badge-kb   { background-color: #16a34a !important; } /* ค.บ. */
.badge-sasb { background-color: #b45309 !important; } /* ศศ.บ. */

.course-title-main {
    font-size: 1.05rem !important;
    color: #002d62 !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.course-title-sub {
    font-size: 0.875rem !important;
    color: #64748b !important;
    margin: 0 !important;
    text-align: left !important;
}

.course-title-sub a {
    color: #2563eb !important;
    text-decoration: none !important;
}

.course-title-sub a:hover {
    text-decoration: underline !important;
}

/* ปุ่มลิงก์โครงสร้างหลักสูตร (Google Drive) */
.course-btn-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.course-action-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background-color: #faf9f6 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.course-action-link:hover {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateX(2px) !important;
}

.course-action-text {
    font-size: 0.875rem !important;
    color: #171717 !important;
    font-weight: 500 !important;
}

.course-action-link:hover .course-action-text {
    color: #2563eb !important;
}

/* ส่วนแสดงวิดีโอ */
.course-video-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.video-group-title {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
    margin: 4px 0 6px 0 !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.video-caption {
    font-size: 0.8rem !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
    text-align: left !important;
    font-weight: 600 !important;
}

/* กรอบครอบวิดีโอ 16:9 ไร้ปัญหาจอดำหรือล้น */
.course-video-wrapper {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #cbd5e1 !important;
    position: relative !important;
}

.course-video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* กล่องรอดำเนินการสำหรับสื่อมีเดีย */
.course-video-empty {
    background-color: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 20px 10px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

/* ปุ่มลิงก์สไตล์ YouTube Premium Card */
.youtube-premium-card-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background-color: #fff5f5 !important;
    border: 1px solid #feb2b2 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.youtube-premium-card-btn:hover {
    background-color: #ffe4e4 !important;
    border-color: #f56565 !important;
    transform: translateX(2px) !important;
}

.youtube-btn-icon-brand {
    font-size: 18px !important;
    line-height: 1 !important;
}

.youtube-btn-main-text {
    font-size: 0.85rem !important;
    color: #c53030 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* Responsive Breakpoints */
@media (max-width: 1199.98px) {
    .course-premium-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .course-card-header-zone {
        min-height: auto !important;
    }
}

@media (max-width: 767.98px) {
    .course-premium-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}





/* ==========================================================================
   Faculty Quality Assurance (QA) Stylesheet (Cassiopeia Template) งานประกันคุณภาพการศึกษาระดับคณะ
   ========================================================================== */

/* ระบบ Grid จัดวางการ์ดประกันคุณภาพ 2 คอลัมน์ */
.qa-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* กล่องการ์ดประจำแต่ละปีการศึกษา */
.qa-year-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 22px !important;
    box-shadow: 0 4px 15px rgba(0, 45, 98, 0.04) !important;
    transition: all 0.25s ease-in-out !important;
    box-sizing: border-box !important;
}

.qa-year-card:hover {
    border-color: #2563eb !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.08) !important;
}

.qa-year-card.admin-highlight {
    border-top: 4px solid #2563eb !important;
}

/* ส่วนหัวของการ์ดปีการศึกษา */
.qa-year-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 2px solid #002d62 !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}

.qa-year-title {
    font-size: 1.15rem !important;
    color: #002d62 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.qa-badge {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
}

/* รายการเอกสาร QA ภายในปีการศึกษา */
ul.qa-doc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

ul.qa-doc-list > li {
    margin: 0 !important;
    padding: 0 !important;
}

.qa-doc-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background-color: #faf9f6 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.qa-doc-btn:hover {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateX(3px) !important;
}

.qa-doc-text {
    font-size: 0.95rem !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.qa-doc-btn:hover .qa-doc-text {
    color: #2563eb !important;
}

/* กล่องรอดำเนินการ (สำหรับปีการศึกษาที่ยังไม่มีลิงก์) */
.qa-empty-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background-color: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
}

/* Responsive สำหรับหน้าจอมือถือและแท็บเล็ต */
@media (max-width: 767.98px) {
    .qa-grid-container {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* ==========================================================================
   Program-Level QA 3-Column Stylesheet (TinyMCE & Cassiopeia Compatible) งานประกันคุณภาพการศึกษาระดับหลักสูตร
   ========================================================================== */

/* ระบบ Grid 3 คอลัมน์สากล (คอมพิวเตอร์ 3 / แท็บเล็ต 2 หรือ 1 / มือถือ 1) */
.qa-program-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* การ์ดประจำแต่ละหมวดเอกสารประกันคุณภาพ */
.qa-program-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 22px !important;
    box-shadow: 0 4px 16px rgba(0, 45, 98, 0.04) !important;
    transition: all 0.25s ease-in-out !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.qa-program-card:hover {
    border-color: #2563eb !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.08) !important;
}

.qa-program-card.admin-highlight {
    border-top: 4px solid #2563eb !important;
}

/* ส่วนหัวของการ์ดหมวดหมู่ */
.qa-program-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 2px solid #002d62 !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    gap: 8px !important;
}

.qa-program-title {
    font-size: 1.05rem !important;
    color: #002d62 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.3 !important;
}

.qa-program-badge {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
}

/* รายการปุ่มลิงก์เอกสาร */
ul.qa-program-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

ul.qa-program-list > li {
    margin: 0 !important;
    padding: 0 !important;
}

.qa-program-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #faf9f6 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.qa-program-btn:hover {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateX(3px) !important;
}

.qa-program-btn .doc-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.qa-program-btn .qa-doc-text {
    font-size: 0.875rem !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.qa-program-btn:hover .qa-doc-text {
    color: #2563eb !important;
}

/* Responsive Breakpoints */
@media (max-width: 1199.98px) {
    .qa-program-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767.98px) {
    .qa-program-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}