/* =========================================================
               Enhanced Modern Header Component Styles
               ========================================================= */
            .site-header {
                position: relative;
                z-index: 1000;
            }

            .header-top-accent {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 3.5px;
                background: linear-gradient(90deg, #521873 0%, #8b28b6 35%, #d97706 70%, #f59e0b 100%);
                z-index: 1001;
            }

            .site-header .navbar {
                position: fixed;
                top: 3.5px;
                left: 0;
                right: 0;
                background: rgba(255, 255, 255, 0.92);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                box-shadow: 0 4px 24px -2px rgba(82, 24, 115, 0.08);
                border-bottom: 1px solid rgba(82, 24, 115, 0.08);
                z-index: 1000;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .site-header .nav-container {
                max-width: 1440px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 28px;
                height: 78px;
            }

            /* Logo Styling */
            .site-header .logo {
                display: flex;
                align-items: center;
                text-decoration: none;
                gap: 14px;
                flex-shrink: 0;
                transition: transform 0.25s ease;
            }

            .site-header .logo:hover {
                transform: translateY(-1px);
            }

            .site-header .logo-images-group {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .site-header .logo-img {
                height: 46px;
                width: auto;
                object-fit: contain;
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
            }

            .site-header .logo:hover .logo-img {
                transform: scale(1.05);
            }

            .site-header .logo-divider {
                width: 1px;
                height: 28px;
                background: rgba(82, 24, 115, 0.15);
                display: inline-block;
            }

            .site-header .logo-text-group {
                display: flex;
                flex-direction: column;
                line-height: 1.25;
            }

            .site-header .logo-title {
                font-family: 'Kanit', sans-serif;
                font-size: 1.25rem;
                font-weight: 700;
                letter-spacing: -0.3px;
                background: linear-gradient(135deg, #521873 0%, #7b2c9f 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .site-header .logo-subtitle {
                font-family: 'Prompt', sans-serif;
                font-size: 0.72rem;
                color: #64748b;
                font-weight: 500;
                letter-spacing: 0.2px;
            }

            /* Navigation Links */
            .site-header .nav-menu {
                display: flex;
                list-style: none;
                gap: 4px;
                align-items: center;
                justify-content: flex-end;
                margin: 0;
                padding: 0;
            }

            .site-header .nav-menu li {
                position: relative;
            }

            .site-header .nav-link {
                text-decoration: none;
                color: #1e293b;
                font-family: 'Prompt', sans-serif;
                font-weight: 500;
                font-size: 0.94rem;
                padding: 8px 14px;
                border-radius: 9999px;
                transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
                display: inline-flex;
                align-items: center;
                gap: 5px;
                white-space: nowrap;
            }

            .site-header .nav-link:hover,
            .site-header .dropdown:hover > .nav-link {
                color: #521873;
                background: rgba(82, 24, 115, 0.07);
            }

            .site-header .dropdown-arrow {
                transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
                color: #64748b;
            }

            .site-header .dropdown:hover .dropdown-arrow,
            .site-header .dropdown.open .dropdown-arrow {
                transform: rotate(180deg);
                color: #521873;
            }

            /* Dropdown Menus */
            .site-header .dropdown {
                position: relative;
            }

            .site-header .dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0;
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                box-shadow: 0 18px 40px -10px rgba(82, 24, 115, 0.16), 0 4px 14px rgba(0, 0, 0, 0.05);
                border: 1px solid rgba(82, 24, 115, 0.1);
                border-radius: 16px;
                min-width: 230px;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(10px) scale(0.98);
                transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                            transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                            visibility 0.25s;
                transition-delay: 0.18s; /* หน่วงเวลาก่อนปิด เพื่อให้เลื่อนเมาส์ข้ามมาคลิกเมนูด้านในได้ทัน */
                list-style: none;
                padding: 10px 8px;
                margin-top: 8px;
                z-index: 1001;
            }

            /* สะพานเชื่อมล่องหน (Invisible bridge) ปิดช่องว่าง 8px ป้องกัน hover หลุดขณะเลื่อนเมาส์ลงมา */
            .site-header .dropdown-menu::after {
                content: '';
                position: absolute;
                top: -16px;
                left: 0;
                right: 0;
                height: 16px;
                background: transparent;
                display: block;
            }

            .site-header .dropdown-menu::before {
                content: '';
                position: absolute;
                top: 0;
                left: 16px;
                right: 16px;
                height: 2px;
                background: linear-gradient(90deg, #521873, #f59e0b);
                border-radius: 2px;
            }

            .site-header .dropdown:hover .dropdown-menu,
            .site-header .dropdown.is-active .dropdown-menu,
            .site-header .dropdown.open .dropdown-menu {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateY(0) scale(1);
                transition-delay: 0s; /* เปิดทันทีเมื่อชี้ */
            }

            .site-header .dropdown:hover .dropdown-arrow,
            .site-header .dropdown.is-active .dropdown-arrow,
            .site-header .dropdown.open .dropdown-arrow {
                transform: rotate(180deg);
                color: #521873;
            }

            .site-header .dropdown-menu li {
                width: 100%;
            }

            .site-header .dropdown-menu .nav-link {
                display: flex;
                align-items: center;
                width: 100%;
                padding: 9px 14px;
                border-radius: 10px;
                margin: 2px 0;
                font-size: 0.9rem;
                color: #334155;
                transition: all 0.2s ease;
            }

            .site-header .dropdown-menu .nav-link:hover {
                background: rgba(82, 24, 115, 0.06);
                color: #521873;
                transform: translateX(4px);
                padding-left: 18px;
            }

            /* Fast Action CTA Button */
            .site-header .nav-cta-item {
                margin-left: 8px;
            }

            .site-header .nav-cta-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: linear-gradient(135deg, #521873 0%, #7b2c9f 50%, #d97706 100%);
                color: #ffffff !important;
                padding: 8px 18px;
                border-radius: 9999px;
                font-family: 'Prompt', sans-serif;
                font-weight: 600;
                font-size: 0.92rem;
                text-decoration: none;
                box-shadow: 0 4px 14px rgba(82, 24, 115, 0.25);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                white-space: nowrap;
            }

            .site-header .nav-cta-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 22px rgba(82, 24, 115, 0.35);
                filter: brightness(1.06);
            }

            .site-header .nav-cta-btn svg {
                transition: transform 0.2s ease;
            }

            .site-header .nav-cta-btn:hover svg {
                transform: translateX(3px);
            }

            /* Mobile Toggle */
            .site-header .mobile-menu-toggle {
                display: none;
                background: rgba(82, 24, 115, 0.05);
                border: 1px solid rgba(82, 24, 115, 0.12);
                font-size: 1.5rem;
                line-height: 1;
                color: #521873;
                cursor: pointer;
                width: 44px;
                height: 44px;
                border-radius: 12px;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
            }

            .site-header .mobile-menu-toggle:hover {
                background: rgba(82, 24, 115, 0.12);
                transform: scale(1.05);
            }

            /* Responsive Breakpoint */
            @media (max-width: 1040px) {
                .site-header .nav-container {
                    padding: 0 18px;
                    height: 72px;
                }

                .site-header .logo-img {
                    height: 38px;
                }

                .site-header .logo-title {
                    font-size: 1.1rem;
                }

                .site-header .logo-subtitle {
                    display: none;
                }

                .site-header .mobile-menu-toggle {
                    display: flex;
                }

                .site-header .nav-menu {
                    position: fixed;
                    top: 72px;
                    left: -100%;
                    width: 100%;
                    max-width: 380px;
                    height: calc(100vh - 72px);
                    background: #ffffff;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: stretch;
                    padding: 24px 20px 40px;
                    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    box-shadow: 10px 0 35px rgba(82, 24, 115, 0.18);
                    overflow-y: auto;
                    gap: 6px;
                }

                .site-header .nav-menu.active {
                    left: 0;
                }

                .site-header .nav-menu li {
                    width: 100%;
                }

                .site-header .nav-link {
                    width: 100%;
                    padding: 12px 18px;
                    font-size: 0.98rem;
                    border-radius: 12px;
                    background: #f8fafc;
                    justify-content: space-between;
                }

                .site-header .dropdown-menu {
                    position: static;
                    box-shadow: none;
                    border: 1px solid rgba(82, 24, 115, 0.08);
                    background: rgba(82, 24, 115, 0.03);
                    opacity: 1;
                    visibility: visible;
                    transform: none;
                    margin: 6px 0;
                    padding: 6px;
                    border-radius: 12px;
                    display: none;
                }

                .site-header .dropdown-menu::before,
                .site-header .dropdown-menu::after {
                    display: none;
                }

                .site-header .dropdown.open .dropdown-menu {
                    display: block;
                }

                .site-header .nav-cta-item {
                    margin-left: 0;
                    margin-top: 12px;
                }

                .site-header .nav-cta-btn {
                    width: 100%;
                    justify-content: center;
                    padding: 12px 20px;
                }
            }