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

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

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

h1, h2, h3, h4, h5, h6, .site-title {
    font-family: 'Mitr', "Segoe UI", sans-serif !important;
    color: #1a4d4d !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, #14b8a6 0%, #2dd4bf 100%) !important;
    box-shadow: 0 8px 30px rgba(20, 184, 166, 0.15) !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.25) !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !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: #0d9488 !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .mod-menu .current > a, 
    .metismenu.mod-menu .active > a {
        background: #ffffff !important;
        color: #0d9488 !important;
        font-weight: 600 !important;
    }

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

/* ---------- 4. RESPONSIVE SIDEBAR SYSTEM (< 1200px) [NATIVE COLLAPSIBLE FIXED - CLICKABLE - TURQUOISE THEME] ---------- */
@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 #e6f7f5; 
        z-index: 1001 !important;
    }

    .navbar-toggler, 
    button[data-bs-toggle="collapse"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f0faf9 !important; /* ครีมอ่อนอมเทอร์ควอยซ์ */
        border: 1px solid #ccf5f1 !important;
        border-radius: 10px !important;
        padding: 8px 16px !important;
        color: #0d9488 !important; /* เขียวเทอร์ควอยซ์แบรนด์ */    
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(20, 184, 166, 0.08) !important;
        transition: all 0.2s ease;
    }
    
    .navbar-toggler::after {
        content: " เมนู";
    }

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

    /* กล่อง Navbar Collapse ที่ลอยเป็น Off-canvas */
    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 300px !important;
        height: 100vh !important;
        background: #ffffff !important;
        padding: 40px 20px !important;
        box-shadow: -10px 0 35px rgba(20, 50, 50, 0.12) !important;
        z-index: 200000 !important; /* ดันให้อยู่สูงสุดภายในโครงสร้าง Header */
        overflow-y: auto !important;
        display: block !important;
        transform: translateX(100%) !important; 
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: auto !important; /* อนุญาตให้คลิกเนื้อหาภายในได้ */
    }

    /* เมื่อกางเมนูออก */
    .navbar-collapse.show {
        transform: translateX(0) !important;
    }

    .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: #244040 !important; /* สีเทาเข้มเนื้อหา */
        padding: 12px 18px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border: 1px solid #edf7f6 !important;
        text-decoration: none !important;
        width: 100% !important;
        transition: all 0.2s ease !important;
        pointer-events: auto !important; /* การันตีว่าลิงก์ต้องกดได้ */
    }

    .mod-menu > li > a:hover {
        background: #f0faf9 !important;
        color: #0d9488 !important;
        border-color: #ccf5f1 !important;
    }

    .mod-menu .current > a, 
    .metismenu.mod-menu .active > a {
        background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important; /* ไล่เฉดเขียวเทอร์ควอยซ์พรีเมียม */
        color: #ffffff !important;
        border: none !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(20, 184, 166, 0.15) !important;
    }

    /* Dropdown ชั้นใน (เมนูย่อยกางลงล่างแนบในแถว) */
    .metismenu.mod-menu ul,
    .mod-menu li ul,
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        background: #f4fbfb !important; /* สีครีมอมเทอร์ควอยซ์จางๆ */
        margin: 4px 0 8px 10px !important;
        padding: 6px !important;
        box-shadow: none !important;
        border-radius: 10px !important;
        border: 1px dashed #b2f1ea !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: #3b6666 !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: #0d9488 !important;
        padding-left: 20px !important;
    }

    /* 
        [จุดแก้ไขสำคัญ] เปลี่ยนม่านดำไม่ให้ทับเมนู:
        ใช้ตัวครอบของเมนู (.container-nav) เป็นม่านแทน เพื่อล็อกให้ม่านอยู่ต่ำกว่าตัวหนังสือเมนูเสมอ 
    */
    .container-nav:has(.navbar-collapse.show)::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(26, 77, 77, 0.35) !important; /* เงาดำโปร่งแสงอมเทอร์ควอยซ์เข้ม */
        backdrop-filter: blur(4px) !important;
        z-index: 1000 !important; /* อยู่ใต้กล่องเมนู .navbar-collapse แน่นอน */
        pointer-events: none !important; /* ม่านใสยอมให้คลิกทะลุได้ เผื่อกรณีจิ้มพลาด */
    }

    /* ลบคำสั่งเก่าที่เคยทับจอทิ้งไป */
    body:has(.navbar-collapse.show)::after {
        display: none !important;
    }
}
/* ---------- 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(20, 184, 166, 0.05) !important;
    margin-top: 25px;
    border: 1px solid #e6f7f5;
}

.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: #0d9488 !important;
    border: 1px solid #edfbf9;
}

/* ---------- 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, #2dd4bf, #99f6e4);
    border-radius: 2px;
}

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

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

/* โครงสร้าง Grid 5 คอลัมน์บนจอใหญ่ */
.service-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: 100%;
}

/* ตกแต่งกล่องการ์ดแนวโปร่งแสงหรูหรา */
.service-card {
    background: #ffffff !important;
    border: 1px solid #e6f7f5 !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(20, 184, 166, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* วงกลมรอบไอคอน */
.card-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #f0faf9;
    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: #244040 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4;
}

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

/* Hover Effect โทนเทอร์ควอยซ์ละมุน */
.service-card:hover {
    transform: translateY(-5px);
    background: #ffffff !important;
    border-color: #99f6e4 !important;
    box-shadow: 0 12px 30px rgba(45, 212, 191, 0.15) !important;
}

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

/* Responsive ของกลุ่มปุ่มบริการ */
@media (max-width: 1199px) {
    .service-grid-container {
        grid-template-columns: repeat(3, 1fr); /* จอแท็บเล็ตใหญ่เรียงแถวละ 3 */
    }
}

@media (max-width: 768px) {
    .service-grid-container {
        grid-template-columns: repeat(2, 1fr); /* จอแท็บเล็ตเล็กเรียงแถวละ 2 */
        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: #1a2424 !important;
    color: #e0e0e0 !important;
    padding: 60px 0 0 0 !important;
    margin-top: 50px;
    font-size: 14.5px;
    line-height: 1.6;
    border-top: 4px solid #2dd4bf;
}

.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: #2dd4bf !important;
    border-radius: 2px;
}

.university-name {
    color: #2dd4bf !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: #cccccc;
}

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

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

/* กล่องแผนที่ Google Maps */
.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 #2d3d3d;
}

.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(45, 212, 191, 0.25) !important;
    border-color: #2dd4bf !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: #2dd4bf !important;
    font-size: 18px;
    font-weight: bold;
}

.footer-links li a {
    color: #cccccc !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: #2dd4bf !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: #0d9488; }

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

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

.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: #aaaaaa !important;
    text-decoration: none !important;
}

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

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

/* ---------- 📱 RESPONSIVE BREAKPOINTS (FOOTER) ---------- */
@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;
    }
}

/* ===================================================
   IMPORT FONTS & FONTAWESOME (หากระบบยังไม่มี)
=================================================== */
@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&display=swap');

/* ---------- GLOBAL CONTAINER ---------- */
.history-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* สีครีมสว่างอ่อนๆ นวลตา */
    color: #4a5568 !important; /* สีเทาเข้มสำหรับเนื้อหา */
    padding: 30px 15px;
    border-radius: 16px;
}

/* ---------- HEADER SECTION ---------- */
.history-header {
    margin-bottom: 40px;
    text-align: center;
}

.header-icon-wrap {
    width: 70px;
    height: 70px;
    background-color: #14b8a6; /* สีเขียวเทอร์ควอยซ์หลัก */
    color: #ffffff;
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
}

.history-title {
    font-family: 'Mitr', sans-serif !important;
    color: #0f766e !important; /* เทอร์ควอยซ์เข้ม */
    font-weight: 700 !important;
    font-size: 32px !important;
    margin-bottom: 8px !important;
}

.history-subtitle {
    color: #718096 !important; /* สีเทา */
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto !important;
    font-weight: 400;
}

.header-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #14b8a6, #2dd4bf);
    margin: 20px auto 0 auto;
    border-radius: 2px;
}

/* ---------- INTRODUCTION CARD ---------- */
.intro-card {
    background-color: #ffffff !important;
    border-left: 5px solid #14b8a6;
    padding: 24px;
    border-radius: 4px 16px 16px 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 50px;
}

.intro-content p {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    text-indent: 40px;
}

/* ---------- TIMELINE DESIGN ---------- */
.history-timeline {
    position: relative;
    padding: 20px 0;
    list-style: none;
}

/* เส้นแกนกลาง Timeline */
.history-timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    width: 3px;
    background-color: #e2e8f0; /* สีเทาอ่อนเส้นไกด์ */
    content: "";
}

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

.timeline-item::after {
    clear: both;
    content: "";
    display: table;
}

/* จุดวงกลมบนเส้น Timeline */
.timeline-badge {
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff !important;
    border: 3px solid #14b8a6;
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* กล่องเนื้อหาขวา */
.timeline-panel {
    position: relative;
    width: calc(100% - 90px);
    float: right;
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

/* ลูกศรชี้ไปที่จุด */
.timeline-panel::before {
    position: absolute;
    top: 26px;
    left: -11px;
    right: auto;
    display: inline-block;
    border-top: 11px solid transparent;
    border-left: 0;
    border-right: 11px solid #edf2f7;
    border-bottom: 11px solid transparent;
    content: " ";
}

.timeline-panel::after {
    position: absolute;
    top: 27px;
    left: -10px;
    right: auto;
    display: inline-block;
    border-top: 10px solid transparent;
    border-left: 0;
    border-right: 10px solid #ffffff;
    border-bottom: 10px solid transparent;
    content: " ";
}

/* ส่วนหัวข้อภายในแถว */
.timeline-period {
    display: inline-block;
    background-color: #f0fdfa !important; /* ครีมเทอร์ควอยซ์จาง */
    color: #0d9488 !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 4px 14px;
    border-radius: 30px;
    margin-bottom: 10px;
    border: 1px solid #ccf5f1;
}

.timeline-main-title {
    font-family: 'Mitr', sans-serif !important;
    color: #2d3748 !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.timeline-body p {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 15px;
}

.timeline-body p:last-child {
    margin-bottom: 0;
}

/* ย่อยข้อมูลช่วงปัจจุบัน */
.sub-feature-box {
    background-color: #f7fafc !important; /* สีเทาพื้นผิวอ่อน */
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    border: 1px dashed #e2e8f0;
}

.feature-sub-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.feature-sub-item:last-child {
    margin-bottom: 0;
}

.feature-sub-item i {
    color: #0d9488;
    font-size: 16px;
    margin-top: 4px;
    flex-shrink: 0;
}

/* เน้นย้ำข้อความในส่วนอนาคต */
.future-highlight {
    border-top: 1px solid #e6f4f2;
    padding-top: 15px;
    margin-top: 15px;
    color: #115e59 !important;
    font-weight: 500;
    font-style: italic;
}

/* ---------- RESPONSIVE BREAKPOINT (จอขนาดใหญ่กว่า 992px) ---------- */
@media (min-width: 992px) {
    .history-timeline::before {
        left: 50%;
        margin-left: -1.5px;
    }

    .timeline-item .timeline-panel {
        width: 44%;
        float: left;
    }

    .timeline-item .timeline-badge {
        left: 50%;
        margin-left: -22px;
    }

    /* สลับข้างสำหรับไอเทมลำดับคู่ */
    .timeline-item:nth-child(even) .timeline-panel {
        float: right;
    }

    /* สลับทิศทางลูกศรไอเทมซ้าย */
    .timeline-item:nth-child(odd) .timeline-panel::before {
        border-top: 11px solid transparent;
        border-left: 11px solid #edf2f7;
        border-right: 0;
        border-bottom: 11px solid transparent;
        left: auto;
        right: -11px;
    }

    .timeline-item:nth-child(odd) .timeline-panel::after {
        border-top: 10px solid transparent;
        border-left: 10px solid #ffffff;
        border-right: 0;
        border-bottom: 10px solid transparent;
        left: auto;
        right: -10px;
    }

    /* สลับทิศทางลูกศรไอเทมขวา */
    .timeline-item:nth-child(even) .timeline-panel::before {
        border-top: 11px solid transparent;
        border-left: 0;
        border-right: 11px solid #edf2f7;
        border-bottom: 11px solid transparent;
        left: -11px;
        right: auto;
    }

    .timeline-item:nth-child(even) .timeline-panel::after {
        border-top: 10px solid transparent;
        border-left: 0;
        border-right: 10px solid #ffffff;
        border-bottom: 10px solid transparent;
        left: -10px;
        right: auto;
    }
}

/* ===================================================
   FIX: DROPDOWN MENU (ปรับแก้เมนูย่อยให้แสดงผลสวยงาม)
=================================================== */
@media (min-width: 1200px) {
    /* จัดตำแหน่งกล่อง Dropdown เมนูย่อย */
    .mod-menu li, .metismenu.mod-menu li {
        position: relative !important;
    }

    /* ปรับแต่งสไตล์ของกล่องเมนูย่อยเมื่อเอาเมาส์ไปชี้ */
    .mod-menu li ul, .metismenu.mod-menu li ul {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) !important;
        background-color: #ffffff !important;
        border: 1px solid #ccf5f1 !important;
        border-radius: 12px !important;
        padding: 8px 0 !important;
        min-width: 200px !important;
        box-shadow: 0 10px 25px rgba(20, 184, 166, 0.15) !important;
        display: none !important;
        z-index: 9999 !important;
        list-style: none !important;
    }

    /* แสดงผลเมนูเมื่อ Hover */
    .mod-menu li:hover ul, .metismenu.mod-menu li:hover ul {
        display: block !important;
    }

    /* ปรับแต่งลิงก์ภายในเมนูย่อย */
    .mod-menu li ul li a, .metismenu.mod-menu li ul li a {
        display: block !important;
        padding: 10px 20px !important;
        color: #1a4d4d !important; /* อ้างอิงเทอควอยซ์เข้มจากไฟล์เดิม */
        font-family: 'Mitr', sans-serif !important;
        font-size: 14px !important;
        text-decoration: none !important;
        text-align: center !important;
        transition: all 0.2s ease !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    /* เอฟเฟกต์ชี้เมนูย่อย */
    .mod-menu li ul li a:hover, .metismenu.mod-menu li ul li a:hover {
        background-color: #f0faf9 !important; /* ครีมเทอร์ควอยซ์สว่าง */
        color: #0d9488 !important;
    }
}

/* ===================================================
   FIX: SVG ICON WRAPPER (ส่วนประวัติความเป็นมา)
=================================================== */
.header-icon-wrap svg {
    display: block;
    color: #ffffff !important;
}

.timeline-badge svg {
    display: block;
    width: 18px;
    height: 18px;
    color: #0d9488 !important;
}

.timeline-badge.badge-highlight svg {
    color: #ffffff !important;
}

/* Base Layout Timeline (เพิ่มเติมเพื่อความสมบูรณ์) */
.history-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important;
    padding: 20px 10px;
}

.history-header {
    text-align: center;
    margin-bottom: 35px;
}

.header-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.15);
}

.history-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important;
    margin-bottom: 8px !important;
}

.history-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
}

.header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

.intro-card {
    background-color: #ffffff !important;
    border-left: 5px solid #14b8a6 !important;
    padding: 22px 25px;
    border-radius: 4px 18px 18px 4px;
    box-shadow: 0 6px 25px rgba(20, 184, 166, 0.03) !important;
    margin-bottom: 45px;
    border: 1px solid #e6f7f5;
}

.intro-content p {
    font-size: 15.5px;
    line-height: 1.8;
    color: #244040 !important;
    margin: 0;
    text-indent: 35px;
}

.history-timeline {
    position: relative;
    padding: 10px 0;
    list-style: none;
}

.history-timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30px;
    width: 3px;
    background-color: #d1f2ee !important;
    content: "";
}

.timeline-item {
    position: relative;
    margin-bottom: 35px;
    width: 100%;
}

.timeline-badge {
    position: absolute;
    top: 15px;
    left: 11px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff !important;
    border: 3px solid #14b8a6 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.1);
}

.timeline-badge.badge-highlight {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    border-color: #2dd4bf !important;
}

.timeline-panel {
    position: relative;
    width: calc(100% - 65px);
    float: right;
    background: #ffffff !important;
    border: 1px solid #e6f7f5 !important;
    border-radius: 16px !important;
    padding: 22px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.015) !important;
}

.timeline-panel.panel-highlight {
    border-color: #2dd4bf !important;
    background-color: #f0faf9 !important;
    box-shadow: 0 6px 22px rgba(20, 184, 166, 0.06) !important;
}

.timeline-period {
    display: inline-block;
    background-color: #f2fbfb !important;
    color: #0d9488 !important;
    font-weight: 600;
    font-size: 13px;
    padding: 3px 14px;
    border-radius: 30px;
    margin-bottom: 10px;
    border: 1px solid #ccf5f1;
}

.timeline-period.period-highlight {
    background-color: #14b8a6 !important;
    color: #ffffff !important;
    border: none;
}

.timeline-main-title {
    tensor-size: 17.5px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.timeline-body p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #244040 !important;
}

.timeline-sub-box {
    background: #fcfdfd !important;
    border: 1px dashed #b2f1ea;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
}

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

.sub-box-item p {
    font-size: 13.5px;
    margin: 0;
}

.vision-text {
    border-top: 1px solid #e6f7f5;
    padding-top: 12px;
    margin-top: 12px;
    color: #0d9488 !important;
    font-weight: 500;
}

.text-turquoise {
    color: #14b8a6 !important;
}

@media (min-width: 992px) {
    .history-timeline::before {
        left: 50%;
        margin-left: -1.5px;
    }
    .timeline-item .timeline-panel {
        width: 45%;
        float: left;
    }
    .timeline-item .timeline-badge {
        left: 50%;
        margin-left: -20px;
    }
    .timeline-item:nth-child(even) .timeline-panel {
        float: right;
    }
}

/* ===================================================
   FIX: DROPDOWN MENU & ARROW (แก้เมนูหลุด + ซ่อนลูกศรเก่า)
=================================================== */
@media (min-width: 1200px) {
    /* จัดตำแหน่งสัมพัทธ์ให้เมนูหลัก */
    .mod-menu li, 
    .metismenu.mod-menu li,
    .container-nav .navbar-nav .nav-item {
        position: relative !important;
    }

    /* ปรับแต่งกล่องเมนูย่อย: เอาช่องว่างด้านบนออกเพื่อไม่ให้เมาส์หลุด */
    .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; /* เอา Gap 10px ออกเพื่อไม่ให้หลุด */
        background-color: #ffffff !important;
        border: 1px solid #ccf5f1 !important;
        border-radius: 12px !important;
        padding: 6px 0 !important;
        min-width: 220px !important;
        box-shadow: 0 10px 30px rgba(20, 184, 166, 0.18) !important;
        display: none !important;
        z-index: 99999 !important;
        list-style: none !important;
        margin: 0 !important; /* เคลียร์ค่า Margin ของระบบป้องกันเมาส์ตกหล่น */
    }

    /* สั่งแสดงผลทันทีที่ชี้ และสร้างพื้นที่เสมือนเชื่อมรอยต่อ */
    .mod-menu li:hover > ul, 
    .metismenu.mod-menu li:hover > ul,
    .container-nav .navbar-nav .nav-item: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: block !important;
        padding: 11px 20px !important;
        color: #1a4d4d !important;
        font-family: 'Mitr', 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;
    }

    /* เอฟเฟกต์เปลี่ยนสีเมื่อลากเมาส์ไปโดนเมนูย่อย */
    .mod-menu li ul li a:hover, 
    .metismenu.mod-menu li ul li a:hover,
    .container-nav .dropdown-menu a:hover {
        background-color: #f0faf9 !important;
        color: #0d9488 !important;
        padding-left: 24px !important; /* ขยับตัวอักษรเล็กน้อยเพื่อความหรูหรา */
    }
}

/* ===================================================
   FIX: IMAGE-BASED ICON WRAPPER (แก้ปัญหาไอคอนไม่ขึ้น)
=================================================== */
/* สไตล์กล่องรองรับไอคอนที่เปลี่ยนเป็น CSS Shape */
.header-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* ออกแบบสร้างสัญลักษณ์ "นาฬิกาย้อนเวลา" ด้วย CSS ล้วนๆ เพื่อเลี่ยงปัญหาระบบลบแท็ก */
.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 */
.timeline-badge::before {
    content: "📜"; /* ใช้ Emoji มาตรฐานระดับสากล ไม่โดนระบบตัด และขึ้นในทุกเบราว์เซอร์แน่นอน */
    font-size: 16px;
}

.timeline-badge.badge-highlight::before {
    content: "📌";
    font-size: 16px;
}

/* ===================================================
   MISSION & STRATEGIC PAGE STYLING (ธีมเขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.mission-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* ครีมละมุน */
    color: #244040 !important; /* เทาเข้ม */
    padding: 15px 5px;
    width: 100%;
}

/* ---------- ส่วนหัวกระบวนการภารกิจ ---------- */
.mission-header {
    text-align: center;
    margin-bottom: 35px;
}

.mission-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดไอคอนเป้าหมาย/ภารกิจด้วยเทคนิค CSS Shape */
.mission-icon-wrap::before {
    content: "";
    width: 24px;
    height: 24px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    position: absolute;
}

.mission-icon-wrap::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
}

.mission-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important;
    margin-bottom: 8px !important;
}

.mission-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
}

.mission-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- โครงสร้างกลุ่มการ์ดด้านบน (ปรัชญา+วิสัยทัศน์) ---------- */
.mission-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (min-width: 992px) {
    .mission-top-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.mission-top-card {
    background-color: #ffffff !important;
    border: 1px solid #e6f7f5 !important;
    border-radius: 18px !important;
    padding: 25px !important;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.02) !important;
    position: relative;
    overflow: hidden;
}

.philosophy-box { border-top: 5px solid #14b8a6 !important; }
.vision-box { border-top: 5px solid #0d9488 !important; }

.badge-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #0d9488;
    background-color: #f0faf9;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 30px;
    margin-bottom: 10px;
}

.card-main-title {
    font-size: 20px !important;
    color: #1a4d4d !important;
    font-weight: 600 !important;
    margin: 0 0 15px 0 !important;
}

.highlight-quote {
    font-size: 16px;
    font-weight: 500;
    color: #0d9488 !important;
    line-height: 1.6;
    margin-bottom: 12px;
}

.card-p-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: #5c7a7a;
    margin: 0;
}

/* ---------- บล็อกการ์ดหัวข้อแบบมาตรฐานแยกเป็นส่วนๆ ---------- */
.mission-section-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 18px !important;
    padding: 25px !important;
    box-shadow: 0 6px 25px rgba(0,0,0,0.01) !important;
    margin-bottom: 30px;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0faf9;
    padding-bottom: 12px;
}

.section-main-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 !important;
}

/* ระบบจัดวางไอคอนสัญลักษณะหน้าหัวข้อด้วย CSS Emoji */
.section-badge-icon {
    width: 32px;
    height: 32px;
    background-color: #f0faf9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.badge-mission::before { content: "🎯"; }
.badge-identity::before { content: "💎"; }
.badge-values::before { content: "🏅"; }
.badge-objective::before { content: "📢"; }
.badge-strategic::before { content: "🗺️"; }

/* ---------- รายการพันธกิจ (Mission List) ---------- */
.mission-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.mission-list-item {
    background-color: #fafdfd !important;
    border: 1px solid #e0f2f1 !important;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
}

.mission-list-item::before {
    content: "✔";
    position: absolute;
    left: 15px;
    color: #14b8a6;
    font-weight: bold;
    font-size: 14px;
}

.mission-list-item p {
    font-size: 14.5px;
    margin: 0;
    line-height: 1.6;
}

/* ---------- รายการอัตลักษณ์ (Identity) ---------- */
.identity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 768px) {
    .identity-grid { grid-template-columns: repeat(3, 1fr); }
}

.identity-item-card {
    background-color: #fdfdfd !important;
    border: 1px solid #e6f7f5;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    transition: transform 0.25s ease;
}

.identity-item-card:hover { transform: translateY(-3px); border-color: #2dd4bf; }

.identity-item-card h3 {
    font-size: 16.5px !important;
    color: #0d9488 !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.identity-item-card p { font-size: 13.5px; line-height: 1.6; margin: 0; color: #5c7a7a; }

/* ---------- ส่วนโครงสร้างค่านิยมหลัก (Core Values) ---------- */
.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 768px) {
    .values-grid { grid-template-columns: 1fr 1fr; }
}

.value-block {
    display: flex;
    gap: 15px;
    background: #ffffff !important;
    border: 1px solid #edf7f6;
    border-radius: 14px;
    padding: 15px;
}

.value-letter {
    font-size: 28px;
    font-weight: 800;
    color: #14b8a6;
    background-color: #f0faf9;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.value-text-wrap h4 {
    font-size: 15.5px !important;
    color: #1a4d4d !important;
    font-weight: 600 !important;
    margin: 0 0 5px 0 !important;
}

.value-text-wrap p { font-size: 13.5px; line-height: 1.5; margin: 0; color: #5c7a7a; }

/* ---------- ส่วนโครงสร้างเป้าประสงค์ (Objective) ---------- */
.objective-container-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.objective-row {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e6f7f5;
}

.objective-row:last-child { border-bottom: none; }

.obj-number {
    font-size: 14px;
    font-weight: 700;
    color: #0d9488;
    background-color: #e0f2f1;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.objective-row p { font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- แผงแถบประเด็นยุทธศาสตร์ (Strategic Layout) ---------- */
.strategic-timeline-box {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.strat-item {
    border: 1px solid #e6f7f5;
    border-radius: 12px;
    overflow: hidden;
}

.strat-title-bar {
    background-color: #f0faf9 !important;
    color: #1a4d4d !important;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 18px;
    border-bottom: 1px solid #e6f7f5;
}

.strat-content-detail {
    padding: 15px 18px !important;
    background-color: #ffffff !important;
}

.strat-content-detail p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #4a5568;
}

.strat-content-detail p:last-child { margin-bottom: 0; }
.text-turquoise { color: #14b8a6 !important; }

/* ===================================================
   ORG CHART STRUCTURE STYLING (เขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.org-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นหลังครีม */
    color: #244040 !important; /* ตัวอักษรเทาเข้ม */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวเพจ ---------- */
.org-header {
    text-align: center;
    margin-bottom: 45px;
}

.org-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดไอคอนโครงสร้างแบบ CSS Shape */
.org-icon-wrap::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2.5px solid #ffffff;
    position: absolute;
    top: 16px;
}

.org-icon-wrap::after {
    content: "";
    width: 32px;
    height: 12px;
    border: 2.5px solid #ffffff;
    border-top: none;
    position: absolute;
    bottom: 16px;
}

.org-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important;
    margin-bottom: 8px !important;
}

.org-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 720px;
    margin: 0 auto !important;
    line-height: 1.5;
}

.org-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- ตัวครอบแผนผังองค์กร ---------- */
.org-chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

/* กล่องระดับบนสุด (Parent Node) */
.org-parent-node {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 5;
}

.org-main-card {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    border-radius: 16px !important;
    padding: 22px 35px !important;
    color: #ffffff !important;
    text-align: center;
    box-shadow: 0 8px 30px rgba(13, 148, 136, 0.2) !important;
    border: 1px solid #2dd4bf !important;
    min-width: 280px;
    position: relative;
}

.card-badge-top {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff !important;
    color: #0d9488 !important;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 12px;
    border-radius: 20px;
    border: 1px solid #ccf5f1;
    white-space: nowrap;
}

.main-node-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ---------- ส่วนโครงสร้าง Grid และเส้นเชื่อมโยงทางสถาปัตยกรรมองค์กร ---------- */
.org-vertical-line {
    width: 3px;
    height: 30px;
    background-color: #2dd4bf !important;
    display: none; /* ซ่อนในจอมือถือ */
}

.org-children-grid {
    display: grid;
    grid-template-columns: 1fr; /* แถวเดี่ยวในมือถือ */
    gap: 20px;
    width: 100%;
    max-width: 1300px;
    padding: 10px;
}

/* กล่องระดับย่อยย่อย (Child Cards) */
.org-child-card-box {
    background-color: #ffffff !important;
    border: 1px solid #e6f7f5 !important;
    border-top: 4px solid #14b8a6 !important; /* แถบสีเขียวเทอร์ควอยซ์หลัก */
    border-radius: 14px !important;
    padding: 24px 20px !important;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.org-child-card-box:hover {
    transform: translateY(-5px);
    border-top-color: #0d9488 !important;
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.12) !important;
}

.child-card-icon {
    font-size: 26px;
    margin-bottom: 12px;
    display: inline-block;
}

.child-node-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.5 !important;
}

.child-node-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #5c7a7a;
    margin: 0;
}

/* จัดการคำสั่งตัดบรรทัดให้สัมพันธ์กับหน้าจอ */
.mobile-break { display: block; }
.desktop-break { display: none; }

/* ===================================================
   Responsive Layout (เมื่อเปิดหน้าจอบนคอมพิวเตอร์กว้าง >= 992px)
   เพื่อวาดเส้นโยงโครงสร้างผังแบบแนวนอน 4 บล็อกเท่ากันแบบในรูปต้นฉบับ
=================================================== */
@media (min-width: 992px) {
    .mobile-break { display: none; }
    .desktop-break { display: block; }
    .org-vertical-line { display: block; } /* แสดงเส้นดิ่งแกนกลาง */

    /* เปลี่ยนการเรียงตัวของกลุ่มลูกเป็น 4 คอลัมน์กางออกด้านข้างตามภาพ */
    .org-children-grid {
        grid-template-columns: repeat(4, 1fr);
        position: relative;
        gap: 20px;
        padding-top: 25px;
    }

    /* วาดเส้นแนวนอนยาวเชื่อมต่อทั้ง 4 กล่องย่อย */
    .org-children-grid::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12.5%;  /* เริ่มต้นที่กึ่งกลางของกล่องแรก */
        right: 12.5%; /* ไปสิ้นสุดที่กึ่งกลางของกล่องสุดท้าย */
        height: 3px;
        background-color: #2dd4bf !important;
    }

    /* วาดเส้นดิ่งสั้นๆ หัวกล่องย่อยแต่ละกล่องวิ่งขึ้นไปชนเส้นแนวนอน */
    .org-child-card-box::before {
        content: "";
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 25px;
        background-color: #2dd4bf !important;
    }
}

/* ===================================================
   CONTACT PAGE STYLING (เขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.contact-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* สีครีมนวล */
    color: #244040 !important; /* สีเทาเข้ม */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวกระบวนการติดต่อ ---------- */
.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดไอคอนจดหมาย/การติดต่อด้วยเทคนิค CSS Shape */
.contact-icon-wrap::before {
    content: "";
    width: 24px;
    height: 16px;
    border: 2.5px solid #ffffff;
    position: absolute;
    top: 24px;
    border-radius: 2px;
}

.contact-icon-wrap::after {
    content: "▼";
    color: #ffffff;
    font-size: 10px;
    position: absolute;
    top: 22px;
}

.contact-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important;
    margin-bottom: 8px !important;
}

.contact-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
}

.contact-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- โนการ์ดข้อมูลติดต่อหลัก (3 คอลัมน์) ---------- */
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (min-width: 992px) {
    .contact-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.info-base-card {
    background-color: #ffffff !important;
    border: 1px solid #e6f7f5 !important;
    border-radius: 18px !important;
    padding: 25px !important;
    text-align: center;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.02) !important;
}

.info-badge-icon {
    width: 44px;
    height: 44px;
    background-color: #f0faf9;
    color: #0d9488;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    font-size: 18px;
}

/* แทรกสัญลักษณ์ทางอ้อมผ่าน CSS */
.badge-address::before { content: "📍"; }
.badge-phone::before { content: "📞"; }
.badge-facebook::before { content: "👥"; }

.info-base-card h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 0 12px 0 !important;
}

.info-base-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #5c7a7a;
    margin: 0;
}

.phone-numbers a {
    color: #0d9488 !important;
    text-decoration: none !important;
    font-weight: 600;
}

/* ปุ่มลิงก์กลุ่ม Facebook */
.btn-contact-fb {
    display: inline-block;
    background-color: #1877f2 !important; /* ใช้สีน้ำเงินมาตรฐาน Facebook */
    color: #ffffff !important;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.2);
    transition: all 0.25s ease;
}

.btn-contact-fb:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.35);
    filter: brightness(1.08);
}

/* ---------- โซน LINE QR Code และ แผนที่ (2 คอลัมน์) ---------- */
.contact-media-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .contact-media-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.media-side-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 18px !important;
    padding: 25px !important;
}

.section-sub-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a4d4d;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.online-dot {
    width: 8px;
    height: 8px;
    background-color: #14b8a6;
    border-radius: 50%;
    display: inline-block;
}

.line-desc, .map-desc {
    font-size: 13.5px;
    color: #5c7a7a;
    margin: 0 0 15px 0;
}

/* โครงสร้างกล่อง QR Code */
.qr-code-wrapper {
    width: 160px;
    height: 160px;
    margin: 0 auto 10px auto;
    border: 1px solid #e6f7f5;
    padding: 5px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.img-line-qr {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.line-id-text {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #06c755 !important; /* สีเขียว LINE */
}

/* โครงสร้างกล่องแผนที่ */
.map-embed-frame {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #ccf5f1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.map-embed-frame iframe {
    display: block;
}

/* ---------- แบนเนอร์แบบสำรวจความพึงพอใจ (Call to Action) ---------- */
.survey-banner-box {
    background: linear-gradient(135deg, #f0faf9 0%, #e0f2f1 100%) !important;
    border: 1px solid #b2f1ea !important;
    border-radius: 18px !important;
    padding: 25px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    margin-top: 15px;
}

@media (min-width: 992px) {
    .survey-banner-box {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        padding: 30px 40px !important;
    }
}

.survey-icon {
    font-size: 32px;
}

.survey-text-content {
    flex-grow: 1;
}

.survey-text-content h3 {
    font-size: 18px !important;
    color: #1a4d4d !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
}

.survey-text-content p {
    font-size: 14px;
    color: #3b6666;
    margin: 0;
}

.btn-start-survey {
    display: inline-block;
    background-color: #14b8a6 !important; /* เขียวเทอร์ควอยซ์เด่นชัด */
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.25);
    transition: all 0.25s ease;
}

.btn-start-survey:hover {
    transform: translateY(-2px);
    background-color: #0d9488 !important; /* ปรับเข้มขึ้นเมื่อชี้เมาส์ */
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.4);
}

/* ===================================================
   REGULATIONS & DOCUMENTS STYLING (ธีมเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.reg-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นผิวสีครีมนวล */
    color: #244040 !important; /* สีเทาเข้มเนื้อหา */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวข้อเพจ ---------- */
.reg-header {
    text-align: center;
    margin-bottom: 40px;
}

.reg-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดดีไซน์ไอคอนเอกสารซ้อนด้วยเทคนิค CSS Shape */
.reg-icon-wrap::before {
    content: "";
    width: 16px;
    height: 22px;
    border: 2.5px solid #ffffff;
    position: absolute;
    top: 22px;
    border-radius: 2px;
}

.reg-icon-wrap::after {
    content: "";
    width: 10px;
    height: 2.5px;
    background-color: #ffffff;
    position: absolute;
    top: 27px;
    box-shadow: 0 4px 0 0 #ffffff, 0 8px 0 0 #ffffff;
}

.reg-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important;
    margin-bottom: 8px !important;
}

.reg-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
}

.reg-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- บล็อกการ์ดจัดกลุ่มเอกสาร ---------- */
.reg-section-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 18px !important;
    padding: 25px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.01) !important;
    margin-bottom: 30px;
}

.reg-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0faf9;
    padding-bottom: 12px;
}

.reg-main-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 !important;
}

/* ระบบจัดป้ายไอคอนสัญลักษณ์หน้าหัวข้อกลุ่มด้วย CSS Emoji */
.reg-badge-icon {
    width: 34px;
    height: 34px;
    background-color: #f0faf9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.badge-announce::before { content: "📢"; }
.badge-law::before { content: "⚖️"; }
.badge-urgent::before { content: "🚨"; }

/* ---------- กล่องรายการลิงก์ดาวน์โหลดเอกสาร ---------- */
.document-list-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ตัวปุ่มลิงก์หลักแบบเต็มแถว */
.doc-item-link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #fafdfd !important;
    border: 1px solid #e0f2f1 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.doc-item-link:hover {
    transform: translateX(4px);
    background-color: #ffffff !important;
    border-color: #2dd4bf !important;
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.08) !important;
}

/* ปรับแต่งพิเศษสำหรับหนังสือเวียนด่วนที่สุด */
.doc-item-link.urgent-item {
    background-color: #fffafb !important; /* พื้นขาวอมแดงจางๆ */
    border-color: #fee2e2 !important;
}

.doc-item-link.urgent-item:hover {
    border-color: #fca5a5 !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.06) !important;
}

/* ส่วนไอคอนประเภทเอกสารด้านหน้า */
.doc-file-icon {
    font-size: 22px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

/* คอนเทนเนอร์ข้อความรายชิ้น */
.doc-text-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.doc-name {
    font-size: 14.5px;
    line-height: 1.6;
    color: #244040 !important; /* เทาเข้ม */
    margin: 0 !important;
    font-weight: 400;
}

/* รายละเอียดจัดรูปแบบ ย่อยเลขที่หนังสือ และ วันที่ประกาศ */
.doc-no {
    color: #0d9488 !important;
    font-weight: 500;
    background-color: #e0f2f1;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 12.5px;
    display: inline-block;
    margin: 2px 0;
}

.doc-date {
    color: #5c7a7a;
    font-size: 13.5px;
    font-weight: 400;
}

/* ข้อความไกด์นำทางด้านล่างปุ่มลิงก์ */
.doc-action-tag {
    font-size: 12px;
    font-weight: 500;
    color: #14b8a6 !important; /* เทอร์ควอยซ์สว่าง */
    transition: color 0.2s ease;
}

.doc-item-link:hover .doc-action-tag {
    color: #0d9488 !important;
}

.doc-action-tag.urgent-tag {
    color: #ef4444 !important; /* แดงเตือนสำหรับหนังสือด่วน */
}

.doc-item-link:hover .doc-action-tag.urgent-tag {
    color: #b91c1c !important;
}

/* ---------- ระบบรองรับหน้าจออุปกรณ์เคลื่อนที่ (Responsive Mobile) ---------- */
@media (max-width: 768px) {
    .doc-item-link {
        padding: 14px 16px !important;
        gap: 12px;
    }
    
    .doc-file-icon {
        font-size: 18px;
    }
    
    .doc-name {
        font-size: 13.5px;
        line-height: 1.5;
    }
}

/* ===================================================
   INFOGRAPHIC GALLERY STYLING (เขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.info-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นผิวสีครีมนวล */
    color: #244040 !important; /* สีเทาเข้มเนื้อหา */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวข้อของเพจ ---------- */
.info-header {
    text-align: center;
    margin-bottom: 40px;
}

.info-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดดีไซน์ไอคอนกรอบรูป/สื่อเผยแพร่ด้วยเทคนิค CSS Shape */
.info-icon-wrap::before {
    content: "";
    width: 22px;
    height: 18px;
    border: 2.5px solid #ffffff;
    position: absolute;
    border-radius: 2px;
}

.info-icon-wrap::after {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 21px;
    left: 21px;
}

.info-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important;
    margin-bottom: 8px !important;
}

.info-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
}

.info-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- ระบบคลังรูปภาพแบบ Grid (Responsive) ---------- */
.info-gallery-grid {
    display: grid;
    grid-template-columns: 1fr; /* แถวเดี่ยวในมือถือ */
    gap: 25px;
    padding: 10px 5px;
}

/* แท็บเล็ตเรียงแถวละ 2 */
@media (min-width: 768px) {
    .info-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* จอคอมพิวเตอร์กว้างเรียงแถวละ 3 กล่องอย่างสมดุล */
@media (min-width: 1200px) {
    .info-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- กล่องการ์ดอินโฟกราฟิกแต่ละชิ้น ---------- */
.info-gallery-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-gallery-card:hover {
    transform: translateY(-6px);
    border-color: #2dd4bf !important;
    box-shadow: 0 12px 28px rgba(20, 184, 166, 0.12) !important;
}

.info-img-link {
    text-decoration: none !important;
    display: block;
    height: 100%;
}

/* กล่องล็อกขอบภาพเพื่อทำเอฟเฟกต์ซูมภายใน */
.info-img-zoom-box {
    width: 100%;
    aspect-ratio: 4 / 3; /* บังคับอัตราส่วนกล่องพรีวิวให้เท่ากันทุกรูป */
    background-color: #f7fafc;
    overflow: hidden;
    border-bottom: 1px solid #f0faf9;
    position: relative;
}

/* ตัวรูปภาพประชาสัมพันธ์ */
.info-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* จัดภาพให้พอดีกล่องโดยสัดส่วนไม่เบี้ยว */
    object-position: top center; /* เน้นโฟกัสส่วนหัวข้อด้านบนของภาพ Infographic */
    display: block;
    transition: transform 0.5s ease;
}

/* เมื่อเอาเมาส์ชี้ ภาพจะซูมขึ้นอย่างนุ่มนวล */
.info-gallery-card:hover .info-preview-img {
    transform: scale(1.06);
}

/* ---------- รายละเอียดใต้ภาพ ---------- */
.info-card-detail {
    padding: 20px !important;
    background-color: #ffffff !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* ป้าย Tag บอกประเภท */
.info-tag, .info-tag-purple {
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 30px;
}

.info-tag {
    color: #0d9488 !important;
    background-color: #f0faf9;
    border: 1px solid #ccf5f1;
}

.info-tag-purple {
    color: #7c3aed !important;
    background-color: #f5f3ff;
    border: 1px solid #ddd6fe;
}

/* หัวข้อบทความของการ์ด */
.info-card-title {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important; /* เทอร์ควอยซ์เข้ม */
    margin: 4px 0 !important;
    line-height: 1.5 !important;
    min-height: 46px; /* ล็อกความสูงเพื่อสัดส่วนการ์ดเท่ากัน */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ตัวข้อความแอคชันแนะนำให้กดคลิกด้านล่าง */
.info-click-action {
    font-size: 12.5px;
    font-weight: 500;
    color: #14b8a6 !important; /* เทอร์ควอยซ์สว่าง */
    transition: color 0.2s ease;
    margin-top: 4px;
}

.info-gallery-card:hover .info-click-action {
    color: #0d9488 !important; /* เปลี่ยนสีเข้มขึ้นเมื่อชี้เมาส์ */
}

/* ===================================================
   DUTIES & RESPONSIBILITIES STYLING (ธีมเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.duty-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นหลังสีครีมนวล */
    color: #244040 !important; /* สีเทาเข้มสำหรับเนื้อหา */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวกระบวนการหน้าที่ ---------- */
.duty-header {
    text-align: center;
    margin-bottom: 35px;
}

.duty-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดดีไซน์สมุดบันทึกภาระงานด้วยเทคนิค CSS Shape ป้องกันสคริปต์หลุด */
.duty-icon-wrap::before {
    content: "";
    width: 18px;
    height: 22px;
    border: 2.5px solid #ffffff;
    position: absolute;
    border-radius: 3px;
}

.duty-icon-wrap::after {
    content: "";
    width: 8px;
    height: 3px;
    background-color: #ffffff;
    position: absolute;
    top: 28px;
    box-shadow: 0 4px 0 0 #ffffff, 0 8px 0 0 #ffffff;
}

.duty-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important; /* เทอร์ควอยซ์เข้ม */
    margin-bottom: 8px !important;
}

.duty-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
}

.duty-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- การ์ดบทนำความรับผิดชอบ ---------- */
.duty-intro-card {
    background-color: #ffffff !important;
    border-left: 5px solid #14b8a6 !important;
    padding: 22px 25px;
    border-radius: 4px 18px 18px 4px;
    box-shadow: 0 6px 25px rgba(20, 184, 166, 0.03) !important;
    margin-bottom: 40px;
    border: 1px solid #e6f7f5;
}

.duty-intro-content p {
    font-size: 15.5px;
    line-height: 1.8;
    color: #244040 !important;
    margin: 0;
    text-indent: 35px;
}

/* ---------- โครงสร้างกลุ่มการ์ดรายด้าน (Duties Cards Layout) ---------- */
.duty-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.duty-main-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 18px !important;
    padding: 25px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.01) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.duty-main-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.06) !important;
}

/* กำหนดขอบหัวการ์ดแยกเฉดสีเทอร์ควอยซ์สลับความลึกองค์กร */
.duty-card-1 { border-top: 4px solid #14b8a6 !important; }
.duty-card-2 { border-top: 4px solid #0d9488 !important; }
.duty-card-3 { border-top: 4px solid #0f766e !important; }
.duty-card-4 { border-top: 4px solid #2dd4bf !important; }
.duty-card-5 { border-top: 4px solid #115e59 !important; }

/* แถบหัวข้อภายในการ์ด */
.duty-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #f0faf9;
    padding-bottom: 15px;
    margin-bottom: 18px;
}

.duty-card-header h2 {
    font-size: 18.5px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* บล็อกไอคอนรูปภาพสัญลักษณ์หน้าหัวข้อด้วยระบบ CSS Emoji เสถียรสูง */
.duty-badge-icon {
    width: 36px;
    height: 36px;
    background-color: #f0faf9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.icon-procure::before { content: "✍️"; }
.icon-control::before { content: "🗂️"; }
.icon-check::before { content: "🔍"; }
.icon-analysis::before { content: "📊"; }
.icon-system::before { content: "⚙️"; }

/* ---------- ส่วนรายการข้อปฏิบัติย่อย (List Items) ---------- */
.duty-bullet-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.duty-bullet-list li {
    font-size: 14.5px;
    line-height: 1.7;
    color: #4a5568;
    position: relative;
    padding-left: 28px;
}

/* จุดนำสายตารูปแบบหัวลูกศรสีเขียวเทอร์ควอยซ์ */
.duty-bullet-list li::before {
    content: "›" !important;
    position: absolute;
    left: 12px;
    top: -1px;
    color: #14b8a6 !important;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

/* ===================================================
   PROCUREMENT & TABS SYSTEM STYLING (เขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.procure-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นหลังสีครีมนวล */
    color: #244040 !important; /* สีเทาเข้ม */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวกระบวนการของหน้าเพจ ---------- */
.procure-header {
    text-align: center;
    margin-bottom: 35px;
}

.procure-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดดีไซน์ไอคอนตะกร้า/จัดซื้อด้วยเทคนิค CSS Shape เพื่อความนิ่งโครงสร้าง */
.procure-icon-wrap::before {
    content: "";
    width: 20px;
    height: 14px;
    border: 2.5px solid #ffffff;
    position: absolute;
    top: 26px;
    border-radius: 2px 2px 6px 6px;
}

.procure-icon-wrap::after {
    content: "";
    width: 12px;
    height: 8px;
    border: 2.5px solid #ffffff;
    border-bottom: none;
    position: absolute;
    top: 19px;
    border-radius: 8px 8px 0 0;
}

.procure-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important; /* เทอร์ควอยซ์เข้ม */
    margin-bottom: 8px !important;
}

.procure-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
    line-height: 1.5;
}

.procure-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- กล่องแจ้งเตือน / แบบสำรวจด้านในแท็บ 1 ---------- */
.survey-notice-box {
    background: linear-gradient(135deg, #ffffff 0%, #f0faf9 100%) !important;
    border: 1px dashed #2dd4bf !important;
    border-left: 5px solid #14b8a6 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

@media (min-width: 768px) {
    .survey-notice-box {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }
}

.notice-icon { font-size: 28px; }
.notice-text h3 { font-size: 16px !important; color: #1a4d4d !important; font-weight: 600 !important; margin: 0 0 4px 0 !important; }
.notice-text p { font-size: 13.5px; color: #5c7a7a; margin: 0; }

.btn-survey-action {
    background-color: #14b8a6 !important;
    color: #ffffff !important;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
    transition: all 0.2s ease;
}

.btn-survey-action:hover { transform: translateY(-2px); background-color: #0d9488 !important; box-shadow: 0 6px 15px rgba(13, 148, 136, 0.35); }

/* ---------- กลไกสร้าง TAB SWITCHING ด้วย CSS ล้วน ---------- */
.procure-tabs-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
}

/* ซ่อนกล่อง Radio ของจริง */
.tab-radio-input {
    display: none !important;
}

/* ปรับแต่ง Label ให้เป็นปุ่มแท็บทรงเหลี่ยมมนพรีเมียม */
.tab-control-label {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: #5c7a7a;
    background-color: #eef2f2 !important;
    border: 1px solid #edf2f2;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    margin-right: 6px;
    transition: all 0.25s ease;
    user-select: none;
}

.tab-control-label:hover {
    background-color: #e0f2f1 !important;
    color: #0d9488;
}

/* คอนเทนเนอร์เนื้อหาด้านในแท็บ */
.tab-panel-content {
    width: 100%;
    padding: 25px 0;
    display: none; /* ซ่อนไว้ก่อนเริ่มต้น */
    order: 1;
}

/* ดักจับกลไกการคลิกเลือกเพื่อสลับการแสดงผลหน้าหน้าต่างคอนเทนต์ */
#tab-manuals:checked ~ #tab-manuals + label,
#tab-forms:checked ~ #tab-forms + label {
    background-color: #ffffff !important;
    color: #0d9488 !important;
    font-weight: 600;
    border-top: 3px solid #14b8a6 !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.02);
}

#tab-manuals:checked ~ #panel-manuals,
#tab-forms:checked ~ #panel-forms {
    display: block;
}

/* ---------- สไตล์กลุ่มการ์ดข้อมูลเอกสารภายในคลัง ---------- */
.manual-section-card, .form-section-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.01) !important;
    margin-bottom: 25px;
}

.sub-section-title, .form-group-title {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0faf9;
}

/* จัดสิลิสต์แถวปุ่มลิงก์ */
.links-list-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ตัวปุ่มดาวน์โหลด/แก้ไขเอกสารเต็มแถว */
.item-download-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background-color: #fafdfd !important;
    border: 1px solid #e0f2f1 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.item-download-link:hover {
    transform: translateX(4px);
    background-color: #ffffff !important;
    border-color: #2dd4bf !important;
    box-shadow: 0 6px 15px rgba(20, 184, 166, 0.08) !important;
}

/* ปรับสีไอคอนแถบเฉพาะกลุ่มแบบฟอร์มเอกสารแก้ไข */
.item-download-link.form-type {
    background-color: #fbfdfc !important;
    border-color: #e2f5f0 !important;
}

.file-icon-type {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.file-name-text {
    font-size: 14px;
    line-height: 1.6;
    color: #244040 !important; /* เทาเข้ม */
    margin: 0 !important;
    flex-grow: 1;
}

.doc-date-badge {
    color: #eab308; /* สีกรอบปรับปรุงส้ม/เหลือง */
    font-size: 12.5px;
    font-weight: 500;
}

/* ป้ายข้อความสั่งเปิดลิงก์ขวาสุด */
.open-new-window {
    font-size: 12.5px;
    font-weight: 500;
    color: #14b8a6 !important; /* สีเทอร์ควอยซ์ */
    white-space: nowrap;
    align-self: center;
}

.item-download-link:hover .open-new-window {
    color: #0d9488 !important;
}

/* ---------- ระบบ Responsive หน้าจอมือถือขนาดเล็ก ---------- */
@media (max-width: 576px) {
    .tab-control-label {
        width: 100%;
        border-radius: 10px !important;
        margin-bottom: 8px;
        margin-right: 0;
        text-align: center;
    }
     
    .item-download-link {
        padding: 12px 14px !important;
        gap: 10px;
    }
     
    .file-name-text {
        font-size: 13px;
        line-height: 1.5;
    }
     
    .open-new-window {
        display: none !important; /* ซ่อนข้อความไกด์ในมือถือเพื่อไม่ให้ล้นหน้าจอ */
    }
}

/* ===================================================
   ASSETS & EQUIPMENT TABS SYSTEM (เขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.asset-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นหลังครีมนวล */
    color: #244040 !important; /* สีเทาเข้ม */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวกระบวนการของหน้าเพจ ---------- */
.asset-header {
    text-align: center;
    margin-bottom: 35px;
}

.asset-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดดีไซน์ไอคอนครูภัณฑ์/กล่องทรัพย์สินด้วยเทคนิค CSS Shape */
.asset-icon-wrap::before {
    content: "";
    width: 22px;
    height: 16px;
    border: 2.5px solid #ffffff;
    position: absolute;
    top: 25px;
    border-radius: 2px;
}

.asset-icon-wrap::after {
    content: "";
    width: 22px;
    height: 3px;
    background-color: #ffffff;
    position: absolute;
    top: 22px;
}

.asset-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important; /* เทอร์ควอยซ์เข้ม */
    margin-bottom: 8px !important;
}

.asset-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
    line-height: 1.5;
}

.asset-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- กลไกสร้าง TAB SYSTEM 3 แท็บ ด้วย CSS ล้วน ---------- */
.asset-tabs-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
}

/* ซ่อนกล่องอินพุต Radio ดั้งเดิม */
.asset-radio-input {
    display: none !important;
}

/* ตกแต่งปุ่มแท็บสลับหน้าต่าง */
.asset-tab-label {
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 500;
    color: #5c7a7a;
    background-color: #eef2f2 !important;
    border: 1px solid #edf2f2;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    margin-right: 6px;
    transition: all 0.25s ease;
    user-select: none;
}

.asset-tab-label:hover {
    background-color: #e0f2f1 !important;
    color: #0d9488;
}

/* คอนเทนเนอร์แสดงผลข้อมูลด้านใน */
.asset-panel-content {
    width: 100%;
    padding: 25px 0;
    display: none; /* ซ่อนไว้ก่อนเริ่มต้น */
    order: 1;
}

/* ดักจับการเลือกคลิก Radio เพื่อเปิดหน้าต่าง */
#tab-asset-manuals:checked ~ #tab-asset-manuals + label,
#tab-asset-forms:checked ~ #tab-asset-forms + label,
#tab-asset-prices:checked ~ #tab-asset-prices + label {
    background-color: #ffffff !important;
    color: #0d9488 !important;
    font-weight: 600;
    border-top: 3px solid #14b8a6 !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.02);
}

#tab-asset-manuals:checked ~ #panel-asset-manuals,
#tab-asset-forms:checked ~ #panel-asset-forms,
#tab-asset-prices:checked ~ #panel-asset-prices {
    display: block;
}

/* ---------- การ์ดจัดกลุ่มเอกสารภายในแท็บ ---------- */
.asset-section-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.01) !important;
    margin-bottom: 25px;
}

.asset-group-title {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0faf9;
}

.asset-links-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ตัวลิงก์แถวปุ่มมาตรฐาน */
.asset-item-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background-color: #fafdfd !important;
    border: 1px solid #e0f2f1 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.asset-item-link:hover {
    transform: translateX(4px);
    background-color: #ffffff !important;
    border-color: #2dd4bf !important;
    box-shadow: 0 6px 15px rgba(20, 184, 166, 0.08) !important;
}

/* ปรับแต่งความแตกต่างตามประเภทการ์ด */
.asset-item-link.form-style { background-color: #fbfdfc !important; }
.asset-item-link.price-style { background-color: #f6fcfb !important; }

.asset-file-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.asset-file-name {
    font-size: 14px;
    line-height: 1.6;
    color: #244040 !important;
    margin: 0 !important;
    flex-grow: 1;
}

/* ป้ายสถานะ/นามสกุล/วันที่ ย่อย */
.asset-date-tag { color: #5c7a7a; font-size: 13.5px; font-weight: 400; }
.asset-format-doc { color: #2563eb; font-weight: 500; font-size: 12.5px; }
.asset-format-pdf { color: #dc2626; font-weight: 500; font-size: 12.5px; }

.asset-action-text {
    font-size: 12.5px;
    font-weight: 500;
    color: #14b8a6 !important;
    white-space: nowrap;
    align-self: center;
}

.asset-item-link:hover .asset-action-text {
    color: #0d9488 !important;
}

/* ---------- Responsive สำหรับสมาร์ตโฟน ---------- */
@media (max-width: 991px) {
    .asset-tab-label {
        width: 100%;
        border-radius: 10px !important;
        margin-bottom: 6px;
        margin-right: 0;
        text-align: center;
    }
     
    .asset-item-link {
        padding: 12px 14px !important;
        gap: 10px;
    }
     
    .asset-file-name {
        font-size: 13.5px;
        line-height: 1.5;
    }
     
    .asset-action-text {
        display: none !important; /* ซ่อนสัญลักษณ์เสริมในมือถือเพื่อหลีกเลี่ยงข้อความล้นกรอบ */
    }
}

/* ===================================================
   APPOINTMENT ORDERS STYLING (ธีมเขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.appoint-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นหลังสีครีมนวล */
    color: #244040 !important; /* สีเทาเข้มเนื้อหา */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวข้อของเพจ ---------- */
.appoint-header {
    text-align: center;
    margin-bottom: 35px;
}

.appoint-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดดีไซน์ไอคอนดวงตราแต่งตั้ง/อนุมัติด้วยเทคนิค CSS Shape ปลอดภัยจากตัวกรองโค้ด */
.appoint-icon-wrap::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 2.5px solid #ffffff;
    border-radius: 50%;
    position: absolute;
}

.appoint-icon-wrap::after {
    content: "✓";
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 22px;
}

.appoint-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important; /* เทอร์ควอยซ์เข้ม */
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.appoint-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
    line-height: 1.5;
}

.appoint-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- การ์ดบทนำความรับผิดชอบ ---------- */
.appoint-intro-card {
    background-color: #ffffff !important;
    border-left: 5px solid #14b8a6 !important;
    padding: 22px 25px;
    border-radius: 4px 18px 18px 4px;
    box-shadow: 0 6px 25px rgba(20, 184, 166, 0.03) !important;
    margin-bottom: 35px;
    border: 1px solid #e6f7f5;
}

.appoint-intro-content p {
    font-size: 15.5px;
    line-height: 1.8;
    color: #244040 !important;
    margin: 0;
    text-indent: 35px;
}

/* ---------- กล่องบล็อกจัดกลุ่มรายการเอกสาร ---------- */
.appoint-section-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 18px !important;
    padding: 25px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.01) !important;
}

.appoint-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0faf9;
    padding-bottom: 12px;
}

.appoint-main-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 !important;
}

.appoint-badge-icon {
    width: 34px;
    height: 34px;
    background-color: #f0faf9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* ---------- รายการปุ่มลิงก์เอกสารดาวน์โหลด ---------- */
.appoint-list-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.appoint-item-link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #fafdfd !important;
    border: 1px solid #e0f2f1 !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.appoint-item-link:hover {
    transform: translateX(4px);
    background-color: #ffffff !important;
    border-color: #2dd4bf !important;
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.08) !important;
}

.appoint-file-icon {
    font-size: 22px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.appoint-text-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.appoint-name {
    font-size: 15px;
    line-height: 1.6;
    color: #244040 !important;
    margin: 0 !important;
    font-weight: 500;
}

/* กล่องแท็กรายละเอียดเสริม */
.appoint-meta-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0;
}

.meta-tag-date {
    color: #5c7a7a;
    font-size: 13px;
}

.meta-tag-type {
    color: #0d9488 !important;
    font-weight: 500;
    background-color: #e0f2f1;
    padding: 1px 10px;
    border-radius: 4px;
    font-size: 12px;
}

/* ป้ายกำกับแอคชันข้อความแนะแนวการเปิดลิงก์ */
.appoint-action-tag {
    font-size: 12.5px;
    font-weight: 500;
    color: #14b8a6 !important;
    margin-top: 4px;
}

.appoint-item-link:hover .appoint-action-tag {
    color: #0d9488 !important;
}

/* ---------- ระบบจัดรูปเล่มสำหรับหน้าจอมือถือ ---------- */
@media (max-width: 576px) {
    .appoint-title {
        font-size: 22px !important;
    }
     
    .appoint-item-link {
        padding: 14px 16px !important;
        gap: 12px;
    }
     
    .appoint-file-icon {
        font-size: 18px;
    }
     
    .appoint-name {
        font-size: 13.5px;
        line-height: 1.5;
    }
}

/* ===================================================
   UNIVERSITY NEWS PORTAL STYLING (เขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.news-portal-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นหลังครีมนวล */
    color: #244040 !important; /* สีเทาเข้ม */
    padding: 25px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวข้อมูบล็อกข่าวสาร ---------- */
.news-portal-header {
    text-align: center;
    margin-bottom: 35px;
}

.news-portal-icon {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.23);
    position: relative;
}

/* วาดดีไซน์ไอคอนหนังสือพิมพ์กระจายข่าวด้วย CSS Shape */
.news-portal-icon::before {
    content: "";
    width: 22px;
    height: 16px;
    border: 2.5px solid #ffffff;
    position: absolute;
    top: 24px;
    border-radius: 2px;
}

.news-portal-icon::after {
    content: "";
    width: 10px;
    height: 3px;
    background-color: #ffffff;
    position: absolute;
    top: 29px;
    left: 24px;
    box-shadow: 0 4px 0 0 #ffffff;
}

.news-portal-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important; /* เทอร์ควอยซ์เข้ม */
    margin-bottom: 8px !important;
}

.news-portal-subtitle {
    color: #5c7a7a !important;
    font-size: 14.5px;
    max-width: 700px;
    margin: 0 auto !important;
    line-height: 1.6;
}

.news-portal-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- ระบบการจัดวางการ์ดข่าว (Responsive Grid) ---------- */
.news-grid-layout {
    display: grid;
    grid-template-columns: 1fr; /* แถวเดี่ยวบนมือถือ */
    gap: 25px;
    margin-bottom: 35px;
}

/* หน้าจอแท็บเล็ตแยกเป็น 2 คอลัมน์ */
@media (min-width: 768px) {
    .news-grid-layout { grid-template-columns: repeat(2, 1fr); }
}

/* หน้าจอคอมพิวเตอร์กางออกเป็น 3 คอลัมน์สวยงามตามมาตรฐาน */
@media (min-width: 1200px) {
    .news-grid-layout { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ตัวกล่องชิ้นข่าวสาร (News Card) ---------- */
.news-item-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.015) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item-card:hover {
    transform: translateY(-5px);
    border-color: #2dd4bf !important;
    box-shadow: 0 12px 25px rgba(20, 184, 166, 0.1) !important;
}

.news-card-link {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* พื้นที่รูปภาพข่าวพรีวิว */
.news-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f0faf9;
    overflow: hidden;
    position: relative;
}

.news-placeholder-bg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
}

.news-placeholder-bg.bg-dark-turquoise {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
}

/* เนื้อหาบรรยายภายในข่าว */
.news-card-content {
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #ffffff !important;
}

/* ป้ายแท็กหมวดหมู่ข่าว */
.news-type-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    align-self: flex-start;
}

.tag-general { color: #0d9488 !important; background-color: #f0faf9; border: 1px solid #ccf5f1; }
.tag-notice { color: #ea580c !important; background-color: #fff7ed; border: 1px solid #ffedd5; }
.tag-event { color: #2563eb !important; background-color: #eff6ff; border: 1px solid #dbeafe; }

.news-card-main-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.5 !important;
    min-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
    color: #5c7a7a;
    margin: 0 0 15px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ข้อมูลส่วนล่างสุดของการ์ด */
.news-card-footer {
    border-top: 1px dashed #edf7f6;
    padding-top: 12px;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-date { font-size: 12.5px; color: #7a9999; }
.news-readmore { font-size: 13px; font-weight: 500; color: #14b8a6 !important; }
.news-item-card:hover .news-readmore { color: #0d9488 !important; }

/* ---------- บล็อกปุ่ม Call to Action ท้ายเว็บบอร์ดข่าว ---------- */
.news-action-portal-box {
    background: linear-gradient(135deg, #f0faf9 0%, #e0f2f1 100%) !important;
    border: 1px solid #b2f1ea !important;
    border-radius: 18px !important;
    padding: 25px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    margin-top: 10px;
}

@media (min-width: 992px) {
    .news-action-portal-box {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        padding: 28px 40px !important;
    }
}

.news-portal-cta-text h3 {
    font-size: 17.5px !important;
    color: #1a4d4d !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
}

.news-portal-cta-text p {
    font-size: 13.5px;
    color: #3b6666;
    margin: 0;
}

/* ปุ่มลิงก์ข้ามเครือข่ายไปยังเว็บหลัก */
.btn-view-all-mcru-news {
    display: inline-block;
    background-color: #14b8a6 !important; /* สีเทอร์ควอยซ์หลัก */
    color: #ffffff !important;
    padding: 12px 26px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(20, 184, 166, 0.25);
    transition: all 0.25s ease;
}

.btn-view-all-mcru-news:hover {
    transform: translateY(-2px);
    background-color: #0d9488 !important;
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.4);
}

/* จัดระเบียบหน้าจอมือถือขนาดเล็ก */
@media (max-width: 576px) {
    .news-portal-title { font-size: 22px !important; }
    .btn-view-all-mcru-news { width: 100%; text-align: center; }
}

/* ===================================================
   SERVICE LINKS STYLING (เขียวเทอร์ควอยซ์ เทา ครีม - 8 เมนู)
=================================================== */
.service-links-section {
    max-width: 1400px;
    margin: 45px auto;
    padding: 0 20px;
    font-family: 'Mitr', sans-serif !important;
}

.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, #2dd4bf, #99f6e4);
    border-radius: 2px;
}

.service-links-main-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a4d4d !important; /* สีเทอร์ควอยซ์เข้ม */
    letter-spacing: 0.5px;
    margin: 0 !important;
}

.service-links-subtitle {
    font-size: 14.5px;
    color: #3b6666; /* สีเทาอมเขียว */
    margin: 4px 0 0 0;
}

/* โครงสร้าง Grid ปรับปรุงใหม่: รองรับ 8 คาร์ดให้เรียงแถวละ 4 ได้สมดุลพอดิบพอดี */
.service-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* จอคอมพิวเตอร์ใหญ่เรียงแถวละ 4 บล็อก */
    gap: 16px;
    width: 100%;
}

/* ตกแต่งกล่องการ์ดพรีเมียมตามธีมเดิม */
.service-card {
    background: #ffffff !important;
    border: 1px solid #e6f7f5 !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(20, 184, 166, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* วงกลมรองรับไอคอน */
.card-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #f0faf9; /* สีครีมอ่อน */
    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;
    line-height: 1;
}

.card-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #244040 !important; /* สีเทาเข้ม */
    margin: 0 0 8px 0 !important;
    line-height: 1.4;
    min-height: 42px; /* ล็อกความสูงหัวข้อให้เท่ากัน */
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Hover Effect โทนเทอร์ควอยซ์นุ่มนวล */
.service-card:hover {
    transform: translateY(-5px);
    background: #ffffff !important;
    border-color: #99f6e4 !important;
    box-shadow: 0 12px 30px rgba(45, 212, 191, 0.15) !important;
}

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

/* ===================================================
   RESPONSIVE BREAKPOINTS (รองรับทุกบราว์เซอร์และหน้าจอมือถือ)
=================================================== */
@media (max-width: 1199px) {
    .service-grid-container {
        grid-template-columns: repeat(3, 1fr); /* จอแท็บเล็ตแนวนอนเรียงแถวละ 3 */
    }
}

@media (max-width: 768px) {
    .service-grid-container {
        grid-template-columns: repeat(2, 1fr); /* จอแท็บเล็ตแนวตั้งเรียงแถวละ 2 */
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .service-grid-container {
        grid-template-columns: 1fr; /* จอมือถือสลับมาเป็นแถวเดี่ยวแนวตั้ง */
    }
    .service-card {
        padding: 20px 15px !important;
    }
    .card-title {
        min-height: auto; /* เคลียร์สัดส่วนความสูงบนหน้าจอมือถือ */
    }
}

/* ===================================================
   ORG CHART SYSTEM STYLING (เขียวเทอร์ควอยซ์ ครีม เทา - 5 หน่วยย่อย)
=================================================== */
.org-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นผิวสีครีมนวล */
    color: #244040 !important; /* สีเทาเข้มตัวอักษร */
    padding: 20px 10px;
    width: 100%;
}

/* ---------- ส่วนหัวของหน้าเพจ ---------- */
.org-header {
    text-align: center;
    margin-bottom: 45px;
}

.org-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดโครงสร้างไอคอนโครงผังองค์กรแบบคงที่ด้วย CSS Shape */
.org-icon-wrap::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2.5px solid #ffffff;
    position: absolute;
    top: 16px;
}

.org-icon-wrap::after {
    content: "";
    width: 32px;
    height: 12px;
    border: 2.5px solid #ffffff;
    border-top: none;
    position: absolute;
    bottom: 16px;
}

.org-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important; /* เทอร์ควอยซ์เข้ม */
    margin-bottom: 8px !important;
}

.org-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 720px;
    margin: 0 auto !important;
    line-height: 1.5;
}

.org-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- โครงสร้างพื้นที่ครอบแผนผัง ---------- */
.org-chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

/* บล็อกระดับหัวหน้าส่วนงานหลัก (Parent Node) */
.org-parent-node {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 5;
}

.org-main-card {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    border-radius: 16px !important;
    padding: 22px 45px !important;
    color: #ffffff !important;
    text-align: center;
    box-shadow: 0 8px 30px rgba(13, 148, 136, 0.2) !important;
    border: 1px solid #2dd4bf !important;
    min-width: 260px;
    position: relative;
}

.card-badge-top {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff !important;
    color: #0d9488 !important;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 14px;
    border-radius: 20px;
    border: 1px solid #ccf5f1;
    white-space: nowrap;
}

.main-node-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px;
}

/* เส้นเชื่อมแกนดิ่งกลาง */
.org-vertical-line {
    width: 3px;
    height: 30px;
    background-color: #2dd4bf !important;
    display: none; /* ปิดการแสดงผลในหน้าจอมือถือสับเปลี่ยนแนวตั้ง */
}

/* ---------- ระบบกริดจัดเรียง 5 การ์ดย่อยยืดหยุ่น ---------- */
.org-children-grid {
    display: grid;
    grid-template-columns: 1fr; /* ค่าเริ่มต้นหน้าจอมือถือเรียงแนวตั้งเดี่ยว */
    gap: 20px;
    width: 100%;
    max-width: 1400px;
    padding: 10px;
}

/* กล่องย่อยแต่ละหน่วยงาน (Child Cards) */
.org-child-card-box {
    background-color: #ffffff !important;
    border: 1px solid #e6f7f5 !important;
    border-top: 4px solid #14b8a6 !important; /* แถบเทอร์ควอยซ์สว่าง */
    border-radius: 14px !important;
    padding: 24px 20px !important;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.org-child-card-box:hover {
    transform: translateY(-5px);
    border-top-color: #0d9488 !important;
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.12) !important;
}

.child-card-icon {
    font-size: 26px;
    margin-bottom: 12px;
    display: inline-block;
    line-height: 1;
}

.child-node-title {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.5 !important;
}

.child-node-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #5c7a7a;
    margin: 0;
}

/* สลับจังหวะการตัดบรรทัดให้สัมพันธ์กับหน้าต่างเบราว์เซอร์ */
.desktop-break { display: none; }

/* ===================================================
   RESPONSIVE MEDIA BREAKPOINTS (สลับโหมดการวาดเส้นผังอัตโนมัติ)
=================================================== */
/* หน้าจอขนาดกลาง (เช่น แท็บเล็ตแนวนอน) จัดหน้าต่างเป็น 3 คอลัมน์และ 2 คอลัมน์ให้สมดุล */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .org-children-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* หน้าจอคอมพิวเตอร์ขนาดใหญ่ (Desktop กว้าง >= 1200px) วาดผังเส้นขนานแนวนอนโยงทั้ง 5 กล่องพอดิบพอดี */
@media (min-width: 1200px) {
    .desktop-break { display: block; }
    .org-vertical-line { display: block; } /* เปิดเส้นดิ่งกลาง */

    /* กางกริดออกเป็น 5 ส่วนเท่าๆ กันในแนวราบ */
    .org-children-grid {
        grid-template-columns: repeat(5, 1fr);
        position: relative;
        gap: 16px;
        padding-top: 25px;
    }

    /* สูตรคำนวณวาดเส้นแกนนอนเชื่อม 5 คอลลัมน์: รักษาระยะจุดศูนย์กลางจากขอบฝั่งละ 10% (100% / 5 คอลัมน์ / กึ่งกลางการ์ดตัวแรก = 10%) */
    .org-children-grid::before {
        content: "";
        position: absolute;
        top: 0;
        left: 10%;   /* กึ่งกลางกล่องแรก */
        right: 10%;  /* กึ่งกลางกล่องสุดท้าย */
        height: 3px;
        background-color: #2dd4bf !important;
    }

    /* วาดเส้นกิ่งแนวดิ่งสั้นๆ เหนือหัวการ์ดย่อยวิ่งขึ้นไปชนแนวระนาบหลัก */
    .org-child-card-box::before {
        content: "";
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 25px;
        background-color: #2dd4bf !important;
    }
}

/* ===================================================
   STAFF & PERSONNEL DIRECTORY STYLING (เทอร์ควอยซ์ ครีม เทา)
=================================================== */
.staff-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นหลังสีครีมนวล */
    color: #244040 !important; /* สีเทาเข้มเนื้อหา */
    padding: 20px 10px;
    width: 100%;
}

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

.staff-icon-wrap {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
    position: relative;
}

/* วาดดีไซน์รูปสัญลักษณ์กลุ่มบุคคลด้วยเทคนิค Pure CSS Shape */
.staff-icon-wrap::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 16px;
}

.staff-icon-wrap::after {
    content: "";
    width: 28px;
    height: 12px;
    background-color: #ffffff;
    border-radius: 14px 14px 0 0;
    position: absolute;
    bottom: 15px;
}

.staff-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a4d4d !important; /* สีเทอร์ควอยซ์เข้ม */
    margin-bottom: 8px !important;
}

.staff-subtitle {
    color: #5c7a7a !important;
    font-size: 15px;
    max-width: 680px;
    margin: 0 auto !important;
    line-height: 1.5;
}

.staff-header-line {
    width: 70px;
    height: 4px;
    background: #14b8a6 !important;
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* ---------- ผังรายชื่อและการจัดสัดส่วนการ์ด ---------- */
.staff-team-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    width: 100%;
}

.staff-tier {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* โครงสร้างตัวกล่องการ์ดบุคลากร (Staff Base Card) */
.staff-card {
    background-color: #ffffff !important;
    border: 1px solid #e6f7f5 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.015) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 280px; /* จำกัดความกว้างของการ์ดปกติ */
}

.staff-card:hover {
    transform: translateY(-5px);
    border-color: #2dd4bf !important;
    box-shadow: 0 12px 25px rgba(20, 184, 166, 0.12) !important;
}

/* บล็อกรูปภาพ: ล็อกขนาดสัดส่วนอัตราส่วน 3:4 แบบรูปถ่ายบุคคลอย่างเคร่งครัด */
.staff-img-box {
    width: 100%;
    aspect-ratio: 3 / 4 !important; /* บังคับสัดส่วนภาพเท่ากันทุกคน */
    background-color: #f2fbfb;
    overflow: hidden;
    position: relative;
}

.staff-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover; /* จัดการรูปภาพให้พอดีกล่องโดยรูปไม่เบี้ยวหรืออ้วนยืด */
    object-position: top center; /* เน้นจับตำแหน่งบริเวณใบหน้าเป็นหลัก */
    display: block;
}

/* บล็อกข้อความรายละเอียดรายบุคคล */
.staff-info-detail {
    padding: 20px !important;
    background-color: #ffffff !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

/* ป้ายสถานะระดับตำแหน่ง */
.staff-rank-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
    color: #0d9488 !important;
    background-color: #f0faf9;
    border: 1px solid #ccf5f1;
}

.badge-director { color: #ffffff !important; background-color: #0f766e !important; border: none; }
.badge-head { color: #ffffff !important; background-color: #14b8a6 !important; border: none; }

/* ชื่อ-สกุล และตำแหน่ง */
.staff-name, .staff-name-sub {
    font-family: 'Mitr', sans-serif !important;
    color: #1a4d4d !important;
    margin: 0 0 6px 0 !important;
    font-weight: 600 !important;
}

.staff-name { font-size: 17.5px !important; }
.staff-name-sub { font-size: 15.5px !important; min-height: 24px; }

.staff-position, .staff-position-sub {
    font-size: 13.5px;
    color: #5c7a7a;
    margin: 0 0 4px 0;
    font-weight: 400;
}

.staff-position-sub { font-size: 13px; }

.staff-acting {
    font-size: 12.5px;
    color: #ea580c; /* สีส้มสะดุดตาสำหรับตำแหน่งรักษาราชการ/ปฏิบัติหน้าที่ */
    margin: 0 0 8px 0;
    font-weight: 500;
    min-height: 38px; /* ล็อกพื้นที่สำหรับผู้บริหารและหัวหน้างาน */
}

/* บล็อกแสดงข้อมูลเบอร์โทรศัพท์ติดต่อใต้การ์ด */
.staff-contact-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #edf7f6;
    width: 100%;
}

.contact-icon { font-size: 13px; line-height: 1; }

.staff-contact-line p {
    font-size: 12px;
    color: #7a9999;
    margin: 0;
    line-height: 1.4;
}

/* ---------- การปรับแต่งขนาดพิเศษสำหรับผู้บริหารและการจัดวางกลุ่มเจ้าหน้าที่ ---------- */
@media (min-width: 768px) {
    /* ขยายขนาดการ์ดของผู้บริหารระดับผู้อำนวยการและหัวหน้างานให้เด่นสง่าขึ้น */
    .card-leader-level, .card-head-level {
        max-width: 300px;
    }
    .card-leader-level .staff-name { font-size: 19px !important; }
}

/* จัดสัดส่วน Grid คอลัมน์สำหรับกลุ่มเจ้าหน้าที่ปฏิบัติงานทั้ง 5 คน */
.staff-grid-container {
    display: grid;
    grid-template-columns: 1fr; /* แถวเดี่ยวแนวตั้งในมือถือ */
    gap: 25px;
    width: 100%;
    max-width: 1100px;
    padding: 10px 5px;
    justify-items: center;
}

/* แท็บเล็ตขยายตัวเป็นเรียงแถวละ 2 คอลัมน์ */
@media (min-width: 600px) {
    .staff-grid-container { grid-template-columns: repeat(2, 1fr); }
}

/* จอคอมพิวเตอร์ Desktop กว้างขยายตัวกางออกเป็น 3 คอลัมน์พอดิบพอดีแบ่งเฉลี่ยสมดุล */
@media (min-width: 992px) {
    .staff-grid-container { grid-template-columns: repeat(3, 1fr); }
}

/* ===================================================
   ACTIVITIES & NEWS TEMPLATE STYLING (เขียวเทอร์ควอยซ์ ครีม เทา)
=================================================== */
.act-page-container {
    font-family: 'Mitr', sans-serif !important;
    background-color: #faf9f6 !important; /* พื้นหลังสีครีมนวลตา */
    color: #244040 !important; /* สีเทาเข้มสำหรับเนื้อหา */
    padding: 15px 5px;
    width: 100%;
}

/* ---------- ส่วนหัวข้อข่าวและแถบสถานะข้อมูล ---------- */
.act-news-header {
    text-align: left;
    margin-bottom: 25px;
}

.act-category-badge {
    display: inline-block;
    background-color: #f0faf9;
    color: #0d9488 !important;
    font-size: 12.5px;
    font-weight: 500;
    padding: 3px 14px;
    border-radius: 30px;
    border: 1px solid #b2f1ea;
    margin-bottom: 12px;
}

.act-news-main-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important; /* เฉดสีเทอร์ควอยซ์เข้มพรีเมียม */
    line-height: 1.5 !important;
    margin: 0 0 14px 0 !important;
}

.act-meta-info-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #e6f7f5;
    padding-bottom: 15px;
}

.meta-item-text {
    font-size: 13.5px;
    color: #5c7a7a; /* เทาอมเขียวสากล */
}

.act-header-line {
    width: 60px;
    height: 4px;
    background-color: #14b8a6 !important; /* เทอร์ควอยซ์สว่าง */
    border-radius: 2px;
    margin-top: 15px;
}

/* ---------- หน้ากระดาษบรรยายเนื้อความข่าว ---------- */
.act-article-body {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 10px 0 20px 0 !important;
}

.act-paragraph-wrap p {
    font-size: 15.5px;
    line-height: 1.9;
    color: #244040 !important;
    margin-bottom: 18px;
    text-align: justify;
}

/* ตัวขึ้นต้นย่อหน้าแรกเด่น (Lead Paragraph) */
.act-paragraph-wrap p.act-p-lead {
    font-size: 16px;
    font-weight: 500;
    color: #0d9488 !important; /* เน้นสีเทอร์ควอยซ์แบรนด์องค์กร */
}

/* ---------- กล่องคำพูดไฮไลท์เด่นท้ายบทความ ---------- */
.act-quote-callout-box {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-left: 4px solid #14b8a6 !important; /* สันหนาสีเทอร์ควอยซ์ขอบซ้าย */
    border-radius: 4px 14px 14px 4px !important;
    padding: 20px 24px !important;
    margin: 30px 0 15px 0 !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.02) !important;
}

.act-quote-callout-box p {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: #1a4d4d !important;
    font-style: italic; /* ตัวเอียงเพิ่มความหรูหราตามภาพตัวอย่าง */
    margin: 0 !important;
    text-indent: 0 !important;
}

/* ---------- ส่วนหัวคลังรูปประมวลภาพกิจกรรม ---------- */
.act-gallery-container {
    margin-top: 25px;
    padding-top: 10px;
}

.act-gallery-header-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0faf9;
    padding-bottom: 12px;
}

.gallery-icon-badge {
    width: 34px;
    height: 34px;
    background-color: #f0faf9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.gallery-title-text h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a4d4d !important;
    margin: 0 0 2px 0 !important;
}

.gallery-title-text p {
    font-size: 13px;
    color: #7a9999;
    margin: 0 !important;
}

/* ---------- แผงกริดแสดงรูปภาพกิจกรรม 6 ช่องสมมาตร (Photo Gallery Grid) ---------- */
.act-photo-grid {
    display: grid;
    grid-template-columns: 1fr; /* เริ่มต้นที่แถวเดี่ยวแนวตั้งบนจอมือถือเล็กสุด */
    gap: 15px;
}

/* ปรับแต่งเป็น 3 คอลัมน์อย่างพรีเมียม บนหน้าจอแท็บเล็ตและคอมพิวเตอร์ตามภาพตัวอย่าง */
@media (min-width: 768px) {
    .act-photo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

.act-photo-card {
    background-color: #ffffff !important;
    border: 1px solid #edf7f6 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.015) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

.act-photo-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

/* ล็อกสัดส่วนรูปถ่ายในคลังทั้งหมดให้เท่ากันด้วยสัดส่วนยอดนิยม 4:3 ภาพจะไม่เบี้ยวหรืออ้วนยืด */
.act-image-crop-box {
    width: 100%;
    aspect-ratio: 4 / 3 !important;
    background-color: #f7fafc;
    overflow: hidden;
}

.act-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ตัดจัดวางรูปถ่ายให้เต็มบล็อกกล่องอย่างสมบูรณ์ */
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* คลาสป้ายบอกแอคชันตอนเอาเมาส์มาวางชี้ใต้รูปภาพ */
.act-photo-overlay-tag {
    padding: 10px !important;
    font-size: 13px;
    color: #5c7a7a;
    background-color: #ffffff !important;
    text-align: center;
    font-weight: 500;
    border-top: 1px solid #f0faf9;
    transition: all 0.25s ease;
}

/* ---------- 🛠️ EFFECT: โอเวอร์ขยายใหญ่ เหมาะสมสวยงาม (ข้อ 10) ---------- */
.act-photo-card:hover {
    transform: translateY(-5px); /* ยกตัวการ์ดขึ้นเล็กน้อยเพิ่มมิติเงา */
    border-color: #2dd4bf !important;
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.12) !important;
}

.act-photo-card:hover .act-grid-img {
    transform: scale(1.06); /* รูปภาพด้านในขยายใหญ่ขึ้น (Zoom In Effect) อย่างนุ่มนวลชวนคลิก */
}

.act-photo-card:hover .act-photo-overlay-tag {
    background-color: #f0faf9 !important; /* ปรับไฮไลท์แถบข้อความเป็นสีเทอร์ควอยซ์สว่าง */
    color: #0d9488 !important;
}

/* ---------- ระบบแปรผันผวนยืดหยุ่นตามอุปกรณ์ (Responsive Mobile) ---------- */
@media (max-width: 767.98px) {
    .act-news-main-title { font-size: 19px !important; }
    .act-paragraph-wrap p { font-size: 14.5px; line-height: 1.75; }
    .act-quote-callout-box { padding: 16px 18px !important; }
    .act-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* จอมือถือทั่วไปสลับเป็นเรียงคู่ 2 คอลัมน์สมมาตร */
}

@media (max-width: 480px) {
    .act-photo-grid { grid-template-columns: 1fr; } /* จอมือถือขนาดเล็กมากสลับสัดส่วนกลับเป็นแถวเดี่ยว */
}