/* --- ROOT VARIABLES & BASE STYLES --- */
    :root {
        --primary-color: #2c6e49;
        --secondary-color: #34a853;
        --accent-color: #d9534f;
        --text-color: #333;
        --bg-light: #f8f9fa;
        --sidebar-width: 260px;
    }

    body {
        font-family: 'Kanit', sans-serif;
        margin: 0;
        color: var(--text-color);
        min-height: 100vh;
        /* --- พื้นหลัง Geometric Network V3 --- */
        background-color: #020c1b;
        background-image:
            /* ชั้นที่ 1: ลายเส้น Network */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%2364ffda' stroke-opacity='0.25' stroke-width='1'%3E%3Ccircle cx='100' cy='100' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='300' cy='50' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='600' cy='80' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='750' cy='200' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='50' cy='300' r='2' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='250' cy='250' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='450' cy='300' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='700' cy='450' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='150' cy='550' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='350' cy='650' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='550' cy='550' r='2' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='750' cy='700' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='50' cy='750' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Cpath d='M100 100 L300 50 M300 50 L600 80 M600 80 L750 200 M100 100 L50 300 M100 100 L250 250 M300 50 L250 250 M300 50 L450 300 M600 80 L450 300 M750 200 L700 450 M750 200 L450 300 M50 300 L250 250 M50 300 L150 550 M250 250 L450 300 M250 250 L150 550 M250 250 L350 650 M450 300 L700 450 M450 300 L550 550 M450 300 L350 650 M700 450 L750 700 M700 450 L550 550 M150 550 L350 650 M150 550 L50 750 M350 650 L550 550 M350 650 L50 750 M550 550 L750 700 M100 100 L450 300 M600 80 L750 700 M50 300 L350 650'/%3E%3C/g%3E%3C/svg%3E"),
            /* ชั้นที่ 2: แสงฟุ้งมุมซ้ายบน */
            radial-gradient(circle at 0% 0%, rgba(100, 255, 218, 0.2) 0%, transparent 60%),
            /* ชั้นที่ 3: พื้นหลังไล่เฉด */
            linear-gradient(135deg, #0a192f 0%, #020c1b 100%);

        background-size: 800px 800px, 100% 100%, 100% 100%;
        background-position: center top, 0 0, 0 0;
        background-repeat: repeat, no-repeat, no-repeat;
        background-attachment: fixed;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    /* --- MOBILE HEADER --- */
    .mobile-header {
        display: none;
        background: linear-gradient(to right, #2d9208, #2ebde9);
        color: white;
        padding: 12px 15px;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1001;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        width: 100%;
        box-sizing: border-box;
    }

    .hamburger-btn {
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
    }

    .mobile-logo {
        font-size: 1.4em;
        font-weight: 600;
    }

    /* --- SIDEBAR MENU (Fixed Left) --- */
    .sidebar {
        width: var(--sidebar-width);
        background: linear-gradient(to right, #f2432fff, #f1973eff);
        color: #e9ecef;
        height: 100vh;
        /* ⭐️ ทำให้เมนูอยู่ด้านซ้ายแบบถาวรบน Desktop */
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        z-index: 1002;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar-header {
        background: linear-gradient(to right, #f4321dff, #f48516ff);
        padding: 20px;
        text-align: center;
        font-weight: 600;
        font-size: 1.2em;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .nav-header {
        background-color: rgba(0, 0, 0, 0.2);
        padding: 15px 20px;
        font-size: 0.9em;
        font-weight: 600;
        color: #a8e6cf;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .menu-item {
        display: block;
        padding: 10px 4px 4px 25px;
        cursor: pointer;
        /*transition: all 0.2s;*/
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .menu-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    /* ลบ/ซ่อน CSS ที่ไม่ใช้แล้ว (Sub-menu) */
    .menu-item.has-sub::after,
    .nav-group.open .menu-item.has-sub,
    .nav-group.open .menu-item.has-sub::after,
    .sub-menu,
    .nav-group.open .sub-menu {
        display: none !important;
    }

    /* --- MAIN LAYOUT --- */
    .main-content-wrapper {
        /* ⭐️ ผลักเนื้อหาหลักไปด้านขวาให้เท่าความกว้าง Sidebar */
        margin-left: var(--sidebar-width);
        flex: 1;
        display: flex;
        flex-direction: column;
        transition: margin-left 0.3s;
        /* ลบ padding ที่นี่ เพื่อให้ Content Limiter จัดการแทน */
        padding: 0;
        box-sizing: border-box;
    }

    .desktop-header {
        background: #fff;
        padding: 15px 30px;
        display: flex;
        align-items: center;
        border-bottom: 4px solid var(--accent-color);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .logo-circle {
        width: 50px;
        height: 50px;
        background: var(--secondary-color);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.5em;
        margin-right: 15px;
        border: 3px solid #fff;
        box-shadow: 0 0 0 2px var(--secondary-color);
    }

    /* --- OVERLAY --- */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1001;
        backdrop-filter: blur(3px);
    }

    /* ⭐️ NEW: CONTENT LIMITER (สำหรับจัดกึ่งกลางเนื้อหาหลัก) ⭐️ */
    .content-limiter {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        padding: 25px 25px 50px 25px;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- MEDIA QUERIES (RESPONSIVE DESIGN) --- */
    @media (max-width: 992px) {

        /* แสดง Mobile Header และซ่อน Desktop Header */
        .mobile-header {
            display: flex;
        }

        .desktop-header {
            display: none;
        }

        /* ซ่อน Sidebar และลบ Margin ของเนื้อหาหลัก */
        .sidebar {
            transform: translateX(-100%);
            box-shadow: none;
        }

        .sidebar.active {
            transform: translateX(0);
            box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
        }

        .main-content-wrapper {
            margin-left: 0;
            padding: 0 !important;
        }

        /* ลบ padding ออกจาก content-limiter บนมือถือ และให้เนื้อหาชิดซ้าย */
        .main-content-wrapper main {
            padding: 0 !important;
        }

        .content-limiter {
            padding: 5px !important;
        }

        /* แสดง Overlay เมื่อ Sidebar เปิด */
        .sidebar-overlay.active {
            display: block;
        }
    }
/* --- โค้ดสำหรับ GSAP Animation --- */
.nav-menu .menu-item {
    /* ทำให้รายการเมนูเริ่มต้นอยู่นอกจอ และทึบแสง 0 */
    opacity: 0;
    transform: translateX(-20px); /* เลื่อนไปทางซ้ายเล็กน้อยก่อนเริ่ม */
}