/* ScrollReveal FOUC Prevention (https://scrollrevealjs.org/guide/customization.html) */
        .sr .load-hidden {
            visibility: hidden;
        }

        /* UTM-Mabella Font */
        @font-face {
            font-family: 'UTM-Mabella';
            src: url('../fonts/UTM-Mabella.ttf') format('truetype');
            font-weight: 100 900;
            font-style: normal;
            font-display: swap;
        }

        /* Gilroy Fonts from assets/fonts */
        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy Italic.otf') format('opentype');
            font-weight: 400;
            font-style: italic;
            font-display: swap;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy Medium Italic.otf') format('opentype');
            font-weight: 500;
            font-style: italic;
            font-display: swap;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy SemiBold Italic.otf') format('opentype');
            font-weight: 600;
            font-style: italic;
            font-display: swap;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy Bold Italic.otf') format('opentype');
            font-weight: 700;
            font-style: italic;
            font-display: swap;
        }

        .font-serif {
            font-family: 'Lora', 'Playfair Display', serif !important;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy Regular.otf') format('opentype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy Medium.otf') format('opentype');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy SemiBold.otf') format('opentype');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy Bold.otf') format('opentype');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy Heavy.otf') format('opentype');
            font-weight: 800;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Gilroy';
            src: url('../fonts/SVN-Gilroy Black.otf') format('opentype');
            font-weight: 900;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'SVN-Gilroy';
            src: url('../fonts/SVN-Gilroy Regular.otf') format('opentype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'SVN-Gilroy';
            src: url('../fonts/SVN-Gilroy Medium.otf') format('opentype');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'SVN-Gilroy';
            src: url('../fonts/SVN-Gilroy SemiBold.otf') format('opentype');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'SVN-Gilroy';
            src: url('../fonts/SVN-Gilroy Bold.otf') format('opentype');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        /* Base Body Typography */
        body {
            font-family: 'Gilroy', 'SVN-Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        .font-gilroy {
            font-family: 'Gilroy', 'SVN-Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        }

        .font-playfair,
        h1.font-playfair,
        h2.font-playfair,
        h3.font-playfair,
        h4.font-playfair,
        h5.font-playfair,
        h6.font-playfair {
            font-family: 'Playfair Display', serif !important;
        }

        /* Navigation font */
        header,
        header nav,
        nav,
        #mobile-menu {
            font-family: 'Gilroy', 'SVN-Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
            font-weight: 600;
        }

        header nav a,
        header nav button,
        #mobile-menu a,
        #mobile-menu button {
            font-weight: 600;
        }

        /* Chữ viền vàng di sản (#D4AF37) */
        .text-stroke-gold {
            -webkit-text-stroke: 0.6px #D4AF37;
            paint-order: stroke fill;
            text-shadow: -0.5px -0.5px 0 #D4AF37, 0.5px -0.5px 0 #D4AF37, -0.5px 0.5px 0 #D4AF37, 0.5px 0.5px 0 #D4AF37, 0 0 1px rgba(212, 175, 55, 0.4);
        }

        /* Ribbon Cut Badge (> <) */
        .ribbon-cut {
            clip-path: polygon(0% 0%, 100% 0%, calc(100% - 6px) 50%, 100% 100%, 0% 100%, 6px 50%);
        }

        /* GTranslate Flag Styling - Vertical Stack */
        .gtranslate_wrapper {
            display: flex !important;
            flex-direction: column !important;
            gap: 4px !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: visible !important;
        }

        .gtranslate_wrapper a {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 0 !important;
            transition: transform 0.2s, opacity 0.2s !important;
        }

        .gtranslate_wrapper a:hover {
            transform: scale(1.15) !important;
        }

        .gtranslate_wrapper img,
        .gtranslate_wrapper a img {
            display: block !important;
        }

        /* Ensure hidden icon states are strictly respected */
        #mobile-menu-btn svg.hidden,
        #close-icon.hidden,
        #hamburger-icon.hidden {
            display: none !important;
        }

        body:has(#fixed-body-bg) {
            background-color: #1a1715;
            color: #1c1917;
        }

        /* Dropdown transition */
        .group:hover .group-hover\:block {
            display: block;
            animation: fadeIn 0.2s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Elegant text selection */
        ::selection {
            background: #D4AF37;
            color: #1c1917;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #F9F6F0;
        }

        ::-webkit-scrollbar-thumb {
            background: #7a1c1c;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #5a1313;
        }

        /* Swiper Controls */
        .swiper-button-disabled {
            opacity: 0.25 !important;
            pointer-events: none !important;
            cursor: not-allowed !important;
        }

        #history-swiper .swiper-slide {
            height: auto;
        }

        #history-swiper-pagination {
            bottom: 0 !important;
        }

        #history-swiper-pagination .swiper-pagination-bullet {
            background: #7a1c1c;
            opacity: 0.35;
        }

        #history-swiper-pagination .swiper-pagination-bullet-active {
            background: #d4af37;
            opacity: 1;
        }

        #articles-swiper .swiper-slide {
            height: auto;
        }

        /* The article card itself is clickable; remove the redundant footer CTA. */
        #articles-swiper .article-card > .px-3 {
            display: none !important;
        }

        #articles-swiper-pagination {
            bottom: 0 !important;
        }

        #articles-swiper-pagination .swiper-pagination-bullet {
            background: #7a1c1c;
            opacity: 0.35;
        }

        #articles-swiper-pagination .swiper-pagination-bullet-active {
            background: #d4af37;
            opacity: 1;
        }

        /* A single article card on responsive screens needs the same visual
           weight as a featured card, not the former compact two-column size. */
        @media (max-width: 1023px) {
            #articles-swiper .article-card .relative.h-36 {
                height: 15rem !important;
            }

            #articles-swiper .article-card .p-3 {
                padding: 1.25rem !important;
                padding-bottom: 1rem !important;
            }

            #articles-swiper .article-card h3 {
                font-size: 1.125rem !important;
                line-height: 1.35 !important;
                margin-bottom: 0.75rem !important;
            }

            #articles-swiper .article-card p.font-gilroy {
                font-size: 0.95rem !important;
                line-height: 1.65 !important;
                -webkit-line-clamp: 4 !important;
            }

            #articles-swiper .article-card > .px-3 {
                padding: 1rem 1.25rem !important;
                font-size: 0.9rem !important;
            }
        }

        @media (min-width: 640px) and (max-width: 1023px) {
            #articles-swiper .article-card .relative.h-36 {
                height: 18rem !important;
            }

            #articles-swiper .article-card .p-3 {
                padding: 1.5rem !important;
                padding-bottom: 1.25rem !important;
            }

            #articles-swiper .article-card h3 {
                font-size: 1.35rem !important;
            }

            #articles-swiper .article-card p.font-gilroy {
                font-size: 1rem !important;
            }
        }

        #history-swiper {
            width: 100%;
            overflow: hidden;
        }

        #history-swiper .swiper-slide {
            height: auto;
            width: 100%;
            box-sizing: border-box;
        }

        @media (min-width: 1024px) {

            #articles-swiper {
                overflow: visible !important;
                padding-bottom: 0 !important;
            }

            #articles-swiper .articles-swiper-track {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 2rem;
                transform: none !important;
            }

            #articles-swiper .article-card {
                width: auto !important;
                margin-right: 0 !important;
            }

            #articles-swiper-pagination {
                display: none !important;
            }
        }

        /* Prevent Headings from inheriting text-align: justify & fix orphan words (rớt chữ) */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            text-align: left;
            text-wrap: balance;
        }

        .text-center h1,
        .text-center h2,
        .text-center h3,
        .text-center h4,
        .text-center h5,
        .text-center h6 {
            text-align: center;
        }

        p {
            text-wrap: pretty;
        }

        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 1;
            padding-right: 0.5rem;
            padding-top: 0.5rem;
            color: #7a1c1c;
            font-family: 'Playfair Display', serif;
            font-weight: bold;
        }


        /* ========================================================
           RESPONSIVE FLUID TYPOGRAPHY & SPACING USING CSS CLAMP()
           ======================================================== */
        .hero-subtitle-clamp {
            font-size: clamp(1.125rem, 0.85rem + 1.25vw, 1.875rem) !important;
            line-height: 1.35;
        }

        .heading-h2-clamp {
            font-size: clamp(1.85rem, 1.35rem + 2.2vw, 3rem) !important;
            line-height: 1.25;
        }

        .heading-h3-clamp {
            font-size: clamp(1.125rem, 0.98rem + 0.75vw, 1.5rem) !important;
            line-height: 1.45;
        }

        .card-title-clamp {
            font-size: clamp(1.2rem, 1.05rem + 0.65vw, 1.5rem) !important;
            line-height: 1.35;
        }

        .body-lead-clamp {
            font-size: clamp(1rem, 0.925rem + 0.4vw, 1.125rem) !important;
            line-height: 1.8;
        }

        .tag-clamp {
            font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem) !important;
            letter-spacing: 0.12em;
        }

        .section-py-clamp {
            padding-top: clamp(3.5rem, 2.5rem + 3.5vw, 6.5rem) !important;
            padding-bottom: clamp(3.5rem, 2.5rem + 3.5vw, 6.5rem) !important;
        }

        /* Prevent Headings from inheriting text-align: justify & fix orphan words (rớt chữ) */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            text-align: left;
            text-wrap: balance;
        }

        .text-center h1,
        .text-center h2,
        .text-center h3,
        .text-center h4,
        .text-center h5,
        .text-center h6 {
            text-align: center;
        }

        p {
            text-wrap: pretty;
        }

        .text-balance {
            text-wrap: balance;
        }

        .text-pretty {
            text-wrap: pretty;
        }

        .drop-cap::first-letter {
            float: left;
            font-size: clamp(3.2rem, 2.6rem + 2.5vw, 4.5rem) !important;
            line-height: 0.9;
            padding-right: 0.65rem;
            padding-top: 0.25rem;
            color: #7a1c1c;
            font-family: 'Playfair Display', serif;
            font-weight: bold;
        }

        /* Custom Pannellum tweaks */
        #hero-panorama,
        #hero-panorama .pnlm-container,
        .pnlm-container {
            background: transparent !important;
            background-color: transparent !important;
            background-image: none !important;
        }

        #hero-panorama .pnlm-load-box,
        #hero-panorama .pnlm-info-box {
            display: none !important;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* ======================================================== */
        /* INTRO 360 HERO &amp; SMOOTH DROP-DOWN ANIMATION               */
        /* ======================================================== */
        :root {
            --header-total-height: 125px;
        }

        /* ========================================================
           RESPONSIVE HEADER & MOBILE SIDEBAR BREAKPOINT (1311PX)
           <= 1311px: Switch completely to Mobile Header & Sidebar
           > 1311px: Standard Desktop Header & Horizontal Navbar
           ======================================================== */
        @media (min-width: 1312px) {
            #header-contacts {
                display: flex !important;
            }
            #mobile-menu-btn {
                display: none !important;
            }
            header#header-nav-bar {
                display: block !important;
                position: sticky !important;
                top: 0 !important;
                z-index: 40 !important;
                border-bottom: 4px solid #D4AF37 !important;
                background-color: #7a1c1c !important;
            }
            header#header-nav-bar > .container {
                display: block !important;
            }
            #desktop-nav {
                display: flex !important;
            }
            #search-toggle-wrapper {
                display: flex !important;
            }
            #mobile-menu {
                display: none !important;
            }
        }

        @media (max-width: 1311px) {
            :root {
                --header-total-height: 70px;
            }

            /* 1. Header White Bar becomes Sticky at Top */
            #header-white-bar {
                position: sticky !important;
                top: 0 !important;
                z-index: 50 !important;
                background-color: #ffffff !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
                padding-top: 8px !important;
                padding-bottom: 8px !important;
                height: 70px !important;
                display: flex !important;
                align-items: center !important;
            }

            #header-white-bar > .container {
                height: 100% !important;
            }

            #header-white-bar > .container img,
            #header-logo-img {
                height: 52px !important;
                max-height: 52px !important;
                width: auto !important;
            }

            /* Watermark icon at the bottom of mobile menu */
            #mobile-menu-watermark,
            #mobile-menu .relative.w-full img {
                height: 180px !important;
                max-height: 220px !important;
                width: auto !important;
                opacity: 0.22 !important;
                display: block !important;
                margin: 0 auto !important;
                mix-blend-mode: screen !important;
            }

            /* Mobile menu item typography and color */
            #mobile-menu,
            #mobile-menu .mobile-dropdown-btn {
                color: #ffffff !important;
            }

            #mobile-menu .mobile-dropdown-btn svg {
                color: #ffffff !important;
                stroke: currentColor !important;
            }

            #mobile-menu .mobile-dropdown-btn:hover,
            #mobile-menu .mobile-dropdown-btn:hover svg {
                color: #D4AF37 !important;
            }

            #mobile-menu > ul > li > a {
                color: #ffffff !important;
            }

            #mobile-menu > ul > li > a:hover {
                color: #D4AF37 !important;
            }

            #mobile-menu > ul > li > a.text-heritage-gold,
            #mobile-menu .text-heritage-gold {
                color: #D4AF37 !important;
            }

            #mobile-menu ul ul a {
                color: #F9F6F0 !important;
            }

            #mobile-menu ul ul a:hover {
                color: #D4AF37 !important;
            }

            /* 2. Hide Desktop Contact Blocks */
            #header-contacts {
                display: none !important;
            }

            /* 3. Show Mobile Hamburger Button */
            #mobile-menu-btn {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* 4. Hide Horizontal Desktop Red Nav Bar completely on mobile/tablet */
            header#header-nav-bar {
                display: none !important;
            }

            /* 5. Mobile Menu as Fullscreen Sidebar / Drawer anchored to Sticky White Bar */
            #mobile-menu {
                position: absolute !important;
                top: 70px !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                width: 100vw !important;
                height: calc(100vh - 70px) !important;
                height: calc(100dvh - 70px) !important;
                z-index: 49 !important;
                background-color: #5a1313 !important;
                background-image: url('../images/image.png') !important;
                background-repeat: repeat !important;
                border-top: 3px solid #D4AF37 !important;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                overscroll-behavior: contain !important;
                touch-action: pan-y !important;
                animation: slideDownMobileNav 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }

            #mobile-menu.hidden {
                display: none !important;
            }

            #mobile-menu:not(.hidden) {
                display: flex !important;
                flex-direction: column !important;
            }

            @keyframes slideDownMobileNav {
                from {
                    opacity: 0;
                    transform: translateY(-8px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* 6. Adjust Hero VR Controls on Tablet/Mobile */
            #hero-vr-controls {
                top: 85px !important;
            }
        }

        #header-white-bar,
        #header-nav-bar {
            transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out;
            will-change: transform, opacity;
        }

        #header-white-bar.header-intro-hidden {
            transform: translateY(-130%) !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        #header-nav-bar.header-intro-hidden {
            transform: translateY(-280%) !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* When intro has already been seen (on reload or return): Instantly show header, hide center logo/des/buttons, and show docked tabs */
        .intro-skipped #header-white-bar,
        .intro-skipped #header-nav-bar {
            transform: none !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            transition: none !important;
        }

        .intro-skipped #hero-content-wrapper {
            display: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: none !important;
        }

        .intro-skipped #hero-brand-block {
            display: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: none !important;
        }

        .intro-skipped #hero-docked-tabs {
            transform: translateY(0) !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            transition: none !important;
        }

        .intro-skipped #hero-gradient-overlay {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .intro-skipped #hero-banner-bg {
            display: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .intro-skipped #hero-panorama {
            opacity: 1 !important;
            pointer-events: none;
        }

        /* ======================================================== */
        /* 360 PREVIEW vs ACTIVE INTERACTION RULES                 */
        /* ======================================================== */
        /* In Preview Mode: user CANNOT drag/rotate panorama, and hotspots are hidden */
        #hero-section:not(.mode-360-active) #hero-panorama {
            pointer-events: none !important;
            cursor: default !important;
        }

        #hero-section:not(.mode-360-active) .pnlm-hotspot-base,
        #hero-section:not(.mode-360-active) .hotspot-map-pin,
        #hero-section:not(.mode-360-active) .hotspot-info-pin {
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            display: none !important;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        /* In Active 360 Mode: user CAN drag/rotate panorama, and hotspots are visible */
        #hero-section.mode-360-active #hero-panorama {
            pointer-events: auto !important;
            cursor: grab !important;
        }

        #hero-section.mode-360-active #hero-panorama:active {
            cursor: grabbing !important;
        }

        #hero-section.mode-360-active .pnlm-hotspot-base,
        #hero-section.mode-360-active .hotspot-map-pin,
        #hero-section.mode-360-active .hotspot-info-pin {
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            display: block !important;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        /* ======================================================== */
        /* HERO BRAND & CTA TRANSITION ANIMATION                    */
        /* ======================================================== */
        #hero-content-wrapper {
            position: absolute;
            top: var(--header-total-height);
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10;
            pointer-events: none;
            transition: opacity 0.8s ease-out;
            will-change: opacity;
        }

        #hero-content-wrapper.hero-intro-hidden {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* Hero Brand Block (Logo + Subtitle + 2 Nút giữa): Căn giữa hoàn hảo trong khung nhìn */
        #hero-brand-block {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out;
            will-change: transform, opacity;
            max-width: 900px;
            width: 100%;
        }

        #hero-content-wrapper.hero-intro-hidden #hero-brand-block {
            transform: translate(-50%, -60%) scale(0.96) !important;
            opacity: 0 !important;
        }

        /* Khi chuyển cảnh: Ẩn hoàn toàn cụm giữa (Logo + Subtitle + 2 Nút giữa) siêu nhẹ nhàng */
        #hero-section.scene-transitioned #hero-brand-block {
            opacity: 0 !important;
            transform: translate(-50%, -58%) scale(0.95) !important;
            pointer-events: none !important;
        }

        /* 2 Nút ở giữa (Màu chuẩn theo nhận diện thương hiệu di sản: Đỏ di sản & Vàng kim hoàng gia) */
        .hero-center-btn-vr {
            background-color: #7a1c1c;
            color: #D4AF37;
            border: 2px solid #D4AF37;
            border-radius: 9999px;
            padding: 11px 28px;
            font-family: 'Gilroy', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            gap: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
        }

        .hero-center-btn-vr:hover {
            background-color: #5a1313;
            color: #ffffff;
            border-color: #ffffff;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
        }

        .hero-center-btn-vr:hover svg {
            color: #ffffff;
            stroke: #ffffff;
        }

        .hero-center-btn-learn {
            background-color: #D4AF37;
            color: #5a1313;
            border: 2px solid #D4AF37;
            border-radius: 9999px;
            padding: 11px 28px;
            font-family: 'Gilroy', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            gap: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
        }

        .hero-center-btn-learn:hover {
            background-color: #ffffff;
            color: #5a1313;
            border-color: #ffffff;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
        }

        /* Cụm 2 nút Tab mọc ở góc phải dưới màn hình khi chuyển cảnh */
        #hero-docked-tabs {
            position: absolute;
            bottom: 0;
            right: 28px;
            z-index: 40;
            display: flex;
            align-items: flex-end;
            gap: 6px;
            transform: translateY(115%);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out;
            will-change: transform, opacity;
        }

        /* Khi chuyển cảnh: Mọc ngoi lên từ mép đáy màn hình */
        #hero-section.scene-transitioned #hero-docked-tabs {
            transform: translateY(0) !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            transition-delay: 0.15s;
            /* Đợi cụm giữa mờ đi rồi tab mọc lên nhanh chóng */
        }

        /* Khi xem 360 độ: Hiệu ứng kéo tụt nút xuống đáy để không che tầm nhìn */
        #hero-section.mode-360-active #hero-docked-tabs {
            transform: translateY(115%) !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out !important;
        }

        /* Đường kẻ baseline đỏ di sản bên dưới cụm tab */
        #hero-docked-tabs::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -16px;
            right: -16px;
            height: 2px;
            background-color: #7a1c1c;
            pointer-events: none;
        }

        /* Style Tab 1 (Đồng bộ nút Xem 360 độ ở giữa: Nền đỏ di sản #7a1c1c, viền & chữ vàng kim #D4AF37) */
        .hero-docked-tab-red {
            background-color: #7a1c1c;
            color: #D4AF37;
            border: 1.5px solid #D4AF37;
            border-bottom: 0;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding: 9px 20px;
            font-family: 'Gilroy', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.35);
            transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
            pointer-events: auto !important;
            position: relative;
            z-index: 2;
        }

        .hero-docked-tab-red>*,
        .hero-docked-tab-white>* {
            pointer-events: none;
        }

        .hero-docked-tab-red:hover {
            background-color: #5a1313;
            color: #ffffff;
            border-color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5);
        }

        /* Style Tab 2 (Đồng bộ nút Tìm hiểu thân thế ở giữa: Nền vàng kim #D4AF37, chữ đỏ đậm #5a1313) */
        .hero-docked-tab-white {
            background-color: #D4AF37;
            color: #5a1313;
            border: 1.5px solid #D4AF37;
            border-bottom: 0;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding: 9px 20px;
            font-family: 'Gilroy', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.3);
            transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
            pointer-events: auto !important;
            position: relative;
            z-index: 2;
        }

        .hero-docked-tab-white:hover {
            background-color: #ffffff;
            color: #5a1313;
            border-color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
        }

        /* Hero VR Controls: Nằm ngay dưới thanh điều hướng với khoảng cách thanh thoát */
        #hero-vr-controls {
            top: calc(var(--header-total-height) + 14px);
            z-index: 45;
        }

        /* Khi Fullscreen (cả Native và Pseudo-Fullscreen trên Mobile): Đóng và ẩn hoàn toàn toàn bộ Header */
        body.is-fullscreen #header-white-bar,
        body.is-fullscreen #header-nav-bar,
        body.is-fullscreen #mobile-menu,
        html.is-fullscreen #header-white-bar,
        html.is-fullscreen #header-nav-bar,
        html.is-fullscreen #mobile-menu,
        :fullscreen #header-white-bar,
        :fullscreen #header-nav-bar,
        :fullscreen #mobile-menu,
        :-webkit-full-screen #header-white-bar,
        :-webkit-full-screen #header-nav-bar,
        :-webkit-full-screen #mobile-menu {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transform: translateY(-200%) !important;
            height: 0 !important;
            min-height: 0 !important;
            max-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
        }

        /* Nâng stacking context cho main khi ở Fullscreen để không bị bất kỳ thẻ nào che khuất */
        body.is-fullscreen main,
        html.is-fullscreen main {
            position: static !important;
            z-index: 99999 !important;
        }

        /* Khi Fullscreen: Đưa cụm điều khiển lên sát đỉnh màn hình */
        :fullscreen #hero-vr-controls,
        :-webkit-full-screen #hero-vr-controls,
        #hero-section:fullscreen #hero-vr-controls,
        #hero-section:-webkit-full-screen #hero-vr-controls,
        #hero-section.is-fullscreen #hero-vr-controls,
        body.is-fullscreen #hero-vr-controls,
        html.is-fullscreen #hero-vr-controls {
            top: 16px !important;
            right: 16px !important;
            z-index: 100000 !important;
        }

        :fullscreen #hero-section,
        :-webkit-full-screen #hero-section,
        #hero-section:fullscreen,
        #hero-section:-webkit-full-screen,
        #hero-section.is-fullscreen,
        body.is-fullscreen #hero-section,
        html.is-fullscreen #hero-section {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100dvh !important;
            max-width: 100vw !important;
            max-height: 100dvh !important;
            z-index: 99999 !important;
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        body.is-fullscreen,
        html.is-fullscreen {
            overflow: hidden !important;
        }

        #hero-section.is-fullscreen #scene-pills-wrapper,
        body.is-fullscreen #scene-pills-wrapper,
        html.is-fullscreen #scene-pills-wrapper {
            z-index: 100000 !important;
        }

        /* The information modal is moved inside the fullscreen hero by JS.
           It must sit above the panorama and the 360 controls. */
        #hero-section:fullscreen #heritage-info-modal,
        #hero-section:-webkit-full-screen #heritage-info-modal,
        #hero-section.is-fullscreen #heritage-info-modal {
            z-index: 100001 !important;
        }

        @media (max-width: 768px) {
            #hero-vr-controls {
                right: 10px !important;
                gap: 5px !important;
                z-index: 45 !important;
            }

            #hero-vr-controls button {
                padding-left: 6px !important;
                padding-right: 6px !important;
            }

            #hero-vr-controls #exit-vr-btn {
                padding-left: 8px !important;
                padding-right: 8px !important;
                font-size: 11px !important;
            }

            #hero-vr-controls #exit-vr-btn span {
                font-size: 11px !important;
            }

            :fullscreen #hero-vr-controls,
            :-webkit-full-screen #hero-vr-controls,
            #hero-section:fullscreen #hero-vr-controls,
            #hero-section:-webkit-full-screen #hero-vr-controls,
            #hero-section.is-fullscreen #hero-vr-controls,
            body.is-fullscreen #hero-vr-controls,
            html.is-fullscreen #hero-vr-controls {
                top: 12px !important;
                right: 10px !important;
            }

            #hero-docked-tabs {
                right: 12px;
                gap: 5px;
            }

            #hero-docked-tabs::after {
                left: -8px;
                right: -8px;
            }

            .hero-docked-tab-red,
            .hero-docked-tab-white {
                padding: 7px 12px;
                font-size: 12px;
                gap: 5px;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
            }

            .hero-center-btn-vr,
            .hero-center-btn-learn {
                padding: 8px 16px;
                font-size: 12px;
                gap: 6px;
            }

            #scene-pills-wrapper {
                bottom: 16px !important;
            }
        }

        /* Hero Gradient: Khi chuyển cảnh thì mờ đi để cảnh 360 rực rỡ và thông thoáng */
        #hero-section.scene-transitioned #hero-gradient-overlay {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        #hero-gradient-overlay {
            transition: opacity 0.4s ease-out;
            will-change: opacity;
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.35) 0%,
                    rgba(0, 0, 0, 0.20) 35%,
                    rgba(0, 0, 0, 0.25) 65%,
                    rgba(0, 0, 0, 0.45) 100%);
        }

        /* Hero starts from top y=0 so the 360 Little Planet fills the screen without any gap */
        #hero-section {
            margin-top: calc(-1 * var(--header-total-height));
            height: 100vh;
            height: 100dvh;
            min-height: 100vh;
            min-height: 100dvh;
            padding-top: var(--header-total-height);
            box-sizing: border-box;
        }

        /* High contrast, sharp text shadows without darkening the scenery */
        .hero-title-shadow {
            text-shadow:
                0 2px 4px rgba(0, 0, 0, 0.95),
                0 4px 14px rgba(0, 0, 0, 0.85),
                0 0 24px rgba(0, 0, 0, 0.8);
        }

        .hero-gold-shadow {
            text-shadow:
                0 1px 3px rgba(0, 0, 0, 0.95),
                0 2px 8px rgba(0, 0, 0, 0.9),
                0 0 16px rgba(0, 0, 0, 0.75);
        }

        .hero-desc-shadow {
            text-shadow:
                0 1px 3px rgba(0, 0, 0, 0.95),
                0 2px 8px rgba(0, 0, 0, 0.9);
        }

        .hero-scrim-card {
            background: transparent;
            padding: 8px 12px;
        }

        /* Hide Pannellum default bottom-left title &amp; info box */
        .pnlm-panorama-info,
        .pnlm-title-box,
        .pnlm-author-box,
        .pnlm-load-button {
            display: none !important;
        }

        /* ========================================================
           CUSTOM 360 HOTSPOTS: GREEN MAP PINS & RED INFO PINS
           ======================================================== */
        .pnlm-hotspot-base {
            position: absolute !important;
            z-index: 25 !important;
            pointer-events: auto !important;
            cursor: pointer !important;
        }

        /* 1. Green Map Navigation Pin */
        .hotspot-map-pin {
            width: 42px;
            height: 54px;
            margin-left: -21px;
            margin-top: -52px;
            cursor: pointer !important;
            pointer-events: auto !important;
            user-select: none;
        }

        .map-pin-anchor {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
        }

        /* Base radar ripple ping */
        .map-pin-pulse {
            position: absolute;
            bottom: -3px;
            left: 50%;
            transform: translateX(-50%);
            width: 34px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #10b981;
            background: rgba(16, 185, 129, 0.35);
            animation: pingRadar 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
            pointer-events: none;
        }

        .map-pin-pulse-2 {
            position: absolute;
            bottom: -3px;
            left: 50%;
            transform: translateX(-50%);
            width: 34px;
            height: 16px;
            border-radius: 50%;
            border: 1.5px solid #34d399;
            animation: pingRadar 2.2s cubic-bezier(0, 0, 0.2, 1) infinite 0.7s;
            pointer-events: none;
        }

        @keyframes pingRadar {
            0% {
                transform: translateX(-50%) scale(0.3);
                opacity: 1;
            }

            100% {
                transform: translateX(-50%) scale(2.4);
                opacity: 0;
            }
        }

        .map-pin-body {
            position: relative;
            width: 38px;
            height: 50px;
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
            transform-origin: bottom center;
        }

        .hotspot-map-pin:hover .map-pin-body {
            transform: translateY(-6px) scale(1.16);
            filter: drop-shadow(0 8px 16px rgba(16, 185, 129, 0.8)) drop-shadow(0 0 12px rgba(251, 191, 36, 0.85));
        }

        /* Map Pin Tooltip */
        .map-pin-tooltip {
            position: absolute;
            bottom: 56px;
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: rgba(15, 23, 42, 0.94);
            border: 1px solid rgba(212, 175, 55, 0.85);
            color: #ffffff;
            font-family: 'Gilroy', sans-serif;
            font-weight: 700;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 9999px;
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), 0 0 10px rgba(212, 175, 55, 0.3);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
            z-index: 50;
        }

        .map-pin-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: rgba(212, 175, 55, 0.85) transparent transparent transparent;
        }

        .hotspot-map-pin:hover .map-pin-tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(-2px);
        }

        /* 2. Red Cultural Info Pin (chữ i màu đỏ) */
        .hotspot-info-pin {
            width: 38px;
            height: 38px;
            margin-left: -19px;
            margin-top: -19px;
            cursor: pointer !important;
            pointer-events: auto !important;
            user-select: none;
        }

        .info-pin-anchor {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .info-pin-pulse {
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid #ef4444;
            background: rgba(239, 68, 68, 0.28);
            animation: redPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
            pointer-events: none;
        }

        .info-pin-pulse-2 {
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 1.5px solid #f87171;
            animation: redPing 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.65s;
            pointer-events: none;
        }

        @keyframes redPing {
            0% {
                transform: scale(0.6);
                opacity: 0.95;
            }

            100% {
                transform: scale(2.3);
                opacity: 0;
            }
        }

        .info-pin-body {
            position: relative;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #ef4444, #991b1b);
            border: 2px solid #ffffff;
            box-shadow: 0 0 14px rgba(239, 68, 68, 0.85), 0 4px 8px rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
        }

        .info-pin-letter {
            font-family: Georgia, 'Times New Roman', serif;
            font-style: italic;
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            line-height: 1;
            margin-top: -1px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        }

        .hotspot-info-pin:hover .info-pin-body {
            transform: scale(1.22);
            box-shadow: 0 0 22px rgba(239, 68, 68, 1), 0 0 12px rgba(251, 191, 36, 0.9);
        }

        /* Info Pin Tooltip */
        .info-pin-tooltip {
            position: absolute;
            bottom: 44px;
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: rgba(20, 18, 14, 0.96);
            border: 1px solid rgba(239, 68, 68, 0.85);
            color: #ffffff;
            font-family: 'Gilroy', sans-serif;
            font-weight: 700;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 9999px;
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), 0 0 10px rgba(239, 68, 68, 0.4);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            display: flex;
            align-items: center;
            gap: 5px;
            z-index: 50;
        }

        .info-pin-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: rgba(239, 68, 68, 0.85) transparent transparent transparent;
        }

        .hotspot-info-pin:hover .info-pin-tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(-2px);
        }

        @media (max-width: 768px) {
            /* Responsive Hotspot Map Pin (Tối ưu hiển thị sắc nét trên Mobile & Tablet) */
            .hotspot-map-pin {
                width: 34px !important;
                height: 44px !important;
                margin-left: -17px !important;
                margin-top: -42px !important;
            }

            .map-pin-body {
                width: 32px !important;
                height: 42px !important;
            }

            /* Vùng chạm cảm ứng rộng rãi trên màn hình cảm ứng để dễ bấm */
            .hotspot-map-pin::before {
                content: '';
                position: absolute;
                inset: -10px;
                border-radius: 50%;
                z-index: 10;
            }

            /* Vòng xung radar ping trên mobile thu gọn tinh tế, không che khuất màn hình */
            .map-pin-pulse,
            .map-pin-pulse-2 {
                width: 24px !important;
                height: 11px !important;
                bottom: -2px !important;
            }

            /* Nhãn địa danh hiển thị rõ ràng trên mobile (do mobile không có hover chuột) */
            .map-pin-tooltip {
                bottom: 48px !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: translateX(-50%) translateY(0) !important;
                font-size: 11px !important;
                font-weight: 700 !important;
                padding: 3px 8px !important;
                background: rgba(15, 23, 42, 0.92) !important;
                border: 1px solid rgba(212, 175, 55, 0.8) !important;
                border-radius: 6px !important;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6) !important;
                pointer-events: none !important;
                white-space: nowrap !important;
                max-width: 150px !important;
                text-overflow: ellipsis !important;
                overflow: hidden !important;
                backdrop-filter: blur(4px) !important;
                -webkit-backdrop-filter: blur(4px) !important;
            }

            .map-pin-tooltip::after {
                border-width: 4px !important;
                bottom: -8px !important;
            }

            /* Responsive Red Info Pin */
            .hotspot-info-pin {
                width: 32px !important;
                height: 32px !important;
                margin-left: -16px !important;
                margin-top: -16px !important;
            }

            .info-pin-body {
                width: 28px !important;
                height: 28px !important;
            }

            .info-pin-letter {
                font-size: 15px !important;
            }

            .info-pin-tooltip {
                bottom: 38px !important;
                font-size: 11px !important;
                padding: 3px 8px !important;
            }
        }

        /* ========================================================
           BACK TO TOP BUTTONS (Floating & Footer)
           ======================================================== */
        #back-to-top {
            position: fixed !important;
            bottom: 28px !important;
            right: 28px !important;
            width: 46px !important;
            height: 46px !important;
            border-radius: 9999px !important;
            background: linear-gradient(135deg, #8b1d1d 0%, #5a1313 100%) !important;
            color: #D4AF37 !important;
            border: 2px solid rgba(212, 175, 55, 0.85) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            /* Keep the floating button above content, but below navigation/sidebar layers. */
            z-index: 35 !important;
            cursor: pointer !important;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
        }

        #back-to-top.btt-hidden {
            opacity: 0 !important;
            transform: translateY(40px) scale(0.85) !important;
            pointer-events: none !important;
        }

        #back-to-top.btt-visible {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
            pointer-events: auto !important;
        }

        #back-to-top:hover {
            background: #D4AF37 !important;
            color: #5a1313 !important;
            border-color: #ffffff !important;
            transform: translateY(-4px) scale(1.08) !important;
            box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5) !important;
        }

        #footer-back-to-top {
            cursor: pointer !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        #footer-back-to-top:hover {
            background-color: #D4AF37 !important;
            color: #5a1313 !important;
            border-color: #ffffff !important;
            transform: translateY(-3px) scale(1.1) !important;
            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4) !important;
        }

        /* On mobile the contact details are hidden, but retain the language
           flags in the header beside the hamburger button. */
        @media (max-width: 1311px) {
            #header-contacts {
                display: flex !important;
                margin-left: auto !important;
                margin-right: 0.5rem !important;
                flex-shrink: 0 !important;
            }

            #header-contacts > div:not(:last-child) {
                display: none !important;
            }

            #header-contacts > div:last-child {
                display: flex !important;
                margin: 0 !important;
                padding-left: 0 !important;
                border-left: 0 !important;
            }

            #header-contacts .gtranslate_wrapper {
                flex-direction: row !important;
                gap: 5px !important;
            }

            /* Scale by height only so each flag keeps its native aspect ratio. */
            #header-contacts .gtranslate_wrapper img {
                height: 18px !important;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                object-fit: contain !important;
            }
        }

        /* Keep long desktop dropdown labels inside their menu panel. */
        #desktop-nav .group > ul,
        #desktop-nav .group > ul a {
            white-space: normal !important;
        }

        #desktop-nav .group > ul a {
            overflow-wrap: break-word;
            line-height: 1.35;
        }