/* --- BIẾN MÀU SẮC & THIẾT LẬP CƠ BẢN --- */
        :root {
            --bg-dark: #0a102b;
            --bg-card: #101b42;
            --bg-card-border: rgba(0, 210, 255, 0.2);
            --cyan-primary: #00d2ff;
            --cyan-hover: #00b0d6;
            --text-light: #ffffff;
            --text-muted: #a0b2d8;
            --purple-accent: #5a4bda;
            /* Font tiêu đề lớn (tròn, đậm). Muốn đổi font chỉ cần sửa dòng này */
            --font-title: 'Baloo 2', 'Fredoka', 'Nunito', 'Montserrat', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-light);
            line-height: 1.6;
            overflow-x: hidden;
            background-image: radial-gradient(circle at 50% 0%, #1a2a5e 0%, var(--bg-dark) 50%);
        }

        section {
            scroll-margin-top: 0px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            padding-top: 60px;
        }

        /* Mọi ảnh luôn co vừa khung chứa nó */
        img {
            max-width: 100%;
            height: auto;
        }

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

        /* --- THANH ĐIỀU HƯỚNG (NAVBAR) --- */
        .site-nav {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            background-color: var(--bg-dark);
            width: 100%;
            z-index: 1000;
        }

        .nav-panel {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            flex: 1 1 auto;
            min-width: 0;
        }

        .logo {
            position: relative;
            z-index: 1;
            font-size: 24px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 0px;
            flex-shrink: 0;
        }

        .logo img {
            height: 40px;      /* Chiều cao của logo, bạn có thể chỉnh thành 30px hoặc 50px tùy ý */
            width: auto;       /* Chiều rộng tự động co giãn theo chiều cao để không bị méo ảnh */
            object-fit: contain;
        }


        .logo a {
            display: flex;
            align-items: center;
            gap: 0px; /* Khoảng cách giữa ảnh và chữ */
        }

        .logo span {
            color: var(--cyan-primary);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
            justify-content: center;
            flex: 1 1 auto;
        }

        .nav-links a {
            position: relative;
            z-index: 0;
            display: inline-block;
            padding: 8px 18px;
            border-radius: 999px;
            transition: color 0.3s ease;
        }

        /* Hình oval phía sau chữ: ẩn sẵn, rê chuột thì hiện ra (phóng nhẹ + sáng dần) */
        .nav-links a::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(0, 210, 255, 0.18);
            opacity: 0;
            transform: scale(0.75);
            transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.8, 0.24, 1);
        }

        .nav-links a:hover::before {
            opacity: 1;
            transform: scale(1);
        }

        /* Rê chuột: chữ chuyển màu gradient chạy ngang (giữ như cũ) */
        .nav-links a:hover {
            background-image: linear-gradient(90deg, #00d2ff, #7b5cff, #ff6ec7, #00d2ff);
            background-size: 300% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            animation: navGradient 2s linear infinite;
        }


        @keyframes navGradient {
            0%   { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 14px;
            flex-shrink: 0;
        }

        .music-toggle {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            padding: 0;
            border: 1px solid rgba(94, 224, 255, 0.3);
            border-radius: 50%;
            background: rgba(12, 21, 43, 0.82);
            color: var(--cyan-primary);
            box-shadow: inset 0 0 18px rgba(0, 210, 255, 0.08), 0 0 18px rgba(0, 210, 255, 0.12);
            cursor: pointer;
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
            flex-shrink: 0;
        }

        .music-toggle:hover,
        .music-toggle:focus-visible {
            transform: translateY(-2px);
            border-color: rgba(94, 224, 255, 0.7);
            box-shadow: inset 0 0 18px rgba(0, 210, 255, 0.14), 0 0 20px rgba(0, 210, 255, 0.2);
            outline: none;
        }

        .music-toggle:focus-visible {
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 0 6px rgba(0, 210, 255, 0.4);
        }

        .music-toggle svg {
            width: 18px;
            height: 18px;
            display: block;
            fill: currentColor;
        }

        .music-toggle.is-loading {
            border-style: dashed;
            color: #dfeeff;
            opacity: 0.9;
        }

        .music-toggle.is-playing {
            background: rgba(0, 210, 255, 0.18);
            border-color: rgba(94, 224, 255, 0.85);
            color: #dffcff;
            box-shadow: inset 0 0 18px rgba(0, 210, 255, 0.18), 0 0 20px rgba(0, 210, 255, 0.28);
        }

        .music-toggle.is-paused {
            color: var(--cyan-primary);
        }

        .music-toggle.is-unavailable {
            border-color: rgba(160, 178, 216, 0.38);
            color: rgba(160, 178, 216, 0.9);
            box-shadow: none;
            opacity: 0.8;
            cursor: not-allowed;
        }

        .mobile-nav-toggle {
            display: none;
            position: relative;
            width: 48px;
            height: 48px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 12px;
            background: rgba(14, 26, 58, 0.7);
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
            z-index: 2;
        }

        .mobile-nav-toggle:hover,
        .mobile-nav-toggle:focus-visible {
            border-color: rgba(0, 210, 255, 0.7);
            background: rgba(11, 22, 43, 0.9);
            outline: none;
        }

        .mobile-nav-toggle__bar {
            display: block;
            width: 20px;
            height: 2px;
            border-radius: 99px;
            background: #fff;
            transition: transform 0.25s ease, opacity 0.25s ease;
        }

        .site-nav.is-open .mobile-nav-toggle__bar:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .site-nav.is-open .mobile-nav-toggle__bar:nth-child(2) {
            opacity: 0;
        }

        .site-nav.is-open .mobile-nav-toggle__bar:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        .btn {
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background-color: var(--cyan-primary);
            color: #000;
        }

        .btn-primary:hover {
            background-color: #3fe0ff;   /* sáng hơn một chút, không bị tối đi */
            box-shadow: 0 10px 22px rgba(0, 210, 255, 0.45), 0 0 15px rgba(0, 210, 255, 0.5);
        }

        /* Hiệu ứng nhấc nhẹ lên khi rê chuột (mọi nút) + bóng đổ mềm bên dưới */
        .btn {
            transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.24, 1),
                        background-color 0.3s ease,
                        border-color 0.3s ease,
                        box-shadow 0.35s ease;
        }

        .btn:hover {
            transform: translateY(-4px);
        }

        /* Rê chuột: chữ trong nút sáng lên kiểu neon, cùng màu với chữ */
        .btn {
            text-decoration: none;
            transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.24, 1),
                        background-color 0.3s ease,
                        border-color 0.3s ease,
                        box-shadow 0.35s ease,
                        text-shadow 0.3s ease,
                        filter 0.3s ease;
        }
        .btn:hover {
            text-shadow: 0 0 6px currentColor, 0 0 14px currentColor;
        }
        .btn:hover svg {
            filter: drop-shadow(0 0 5px currentColor);
        }
        /* Nút xanh chữ đen / nút trắng: chữ tối nên dùng quầng sáng trắng-xanh để vẫn thấy "neon" */
        .btn-primary:hover {
            text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.6);
        }

        /* (đã bỏ hiệu ứng chữ chạy lên/xuống/qua lại) - giữ class cũ cho an toàn */
        .btn-roll { display: inline; }
        .btn-roll::after { content: none; }

        .btn-outline:hover {
            box-shadow: 0 10px 20px rgba(0, 210, 255, 0.22);
        }

        .btn:active {
            transform: translateY(-1px) scale(0.97);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--text-light);
            border: 1px solid var(--cyan-primary);
        }

        .btn-outline:hover {
            background-color: rgba(0, 210, 255, 0.1);
        }

        /* Rê chuột vào "Xem video" và "Tìm hiểu thêm": viền trong sáng lên */
        .btn-video:hover {
            border-color: #5ee0ff;
            background-color: rgba(0, 210, 255, 0.08);
            box-shadow: inset 0 0 0 1px rgba(94, 224, 255, 0.9),
                        inset 0 0 16px rgba(0, 210, 255, 0.7),
                        0 10px 20px rgba(0, 210, 255, 0.28);
        }

        /* --- SHINY TEXT: vệt sáng chạy qua chữ --- */
        .shiny-text {
            background-image: linear-gradient(110deg, #ffffff 0%, #ffffff 42%, #5ee0ff 50%, #ffffff 58%, #ffffff 100%);
            background-size: 250% 100%;
            background-repeat: no-repeat;
            background-color: #ffffff;   /* nền dự phòng: khi vệt sáng trượt ra ngoài, chữ vẫn hiện đủ */
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            animation: shiny 3.5s linear infinite;
        }

        /* Chữ WISIO màu cyan: vệt sáng màu trắng */
        .shiny-text--cyan {
            background-color: #2fe1f5;
            background-image: linear-gradient(110deg, #2fe1f5 0%, #2fe1f5 42%, #ffffff 50%, #2fe1f5 58%, #2fe1f5 100%);
            animation-delay: 0.3s;
        }

        @keyframes shiny {
            0%   { background-position: 150% 0; }
            100% { background-position: -50% 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .shiny-text,
            .nav-links a:hover {
                animation: none;
            }
        }

        /* --- HIỆU ỨNG CHỮ HIỆN LÊN TỪ DƯỚI (làm mờ -> rõ nét) --- */
        @keyframes revealUp {
            from { opacity: 0; transform: translateY(42px); filter: blur(10px); }
            to   { opacity: 1; transform: translateY(0);    filter: none; }
        }

        /* Hero: chạy ngay khi tải trang */
        .reveal-up {
            animation: revealUp 1s cubic-bezier(0.22, 0.8, 0.24, 1) var(--d, 0s) both;
        }

        /* Từng dòng tiêu đề (vẫn giữ vệt sáng shiny) */
        .reveal-line {
            display: inline-block;
            animation: revealUp 1.1s cubic-bezier(0.22, 0.8, 0.24, 1) var(--d, 0s) both;
        }

        /* Các phần còn lại: hiện lên khi cuộn tới (JS thêm .is-visible) */
        .reveal {
            opacity: 0;
            transform: translateY(42px);
            filter: blur(8px);
            transition: opacity 0.9s cubic-bezier(0.22, 0.8, 0.24, 1) var(--d, 0s),
                        transform 0.9s cubic-bezier(0.22, 0.8, 0.24, 1) var(--d, 0s),
                        filter 0.9s ease var(--d, 0s);
        }

        .reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
            filter: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .reveal-up,
            .reveal-line {
                animation: none;
            }

            .reveal {
                opacity: 1;
                transform: none;
                filter: none;
                transition: none;
            }
        }

        /* --- HERO SECTION --- */
        /* Hero chiếm vừa đúng phần màn hình bên dưới thanh NAV: mở trang chỉ thấy NAV + Hero,
           nội dung căn giữa theo chiều dọc nên chữ và ảnh có tâm cao bằng nhau */
        .hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            min-height: calc(100vh - 60px);
            min-height: calc(100svh - 60px);
            padding: 20px 0 0;
            position: relative;
            isolation: isolate;
        }

        /* Full-viewport image background for HERO.
           Put your image at assets/hero-bg.jpg, or change the URL below. */
        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: calc(50% - 50vw);
            width: 100vw;
            z-index: -1;
            pointer-events: none;
            background-image:
                linear-gradient(
                    180deg,
                    rgba(6, 15, 40, 0.22),
                    rgba(6, 15, 40, 0.38)
                ),
                url("assets/background.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        /* --- GLOBAL STARFALL AND PIXEL CLOUDS --- */
        .starfall-wrapper,
        .pixelclouds-wrapper {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
        }

        .starfall-wrapper {
            z-index: 1;
            opacity: 0.75;
        }

        .pixelclouds-wrapper {
            z-index: 2;
            opacity: 0.45;
        }

        #starfall-canvas,
        #pixelclouds-canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* Let the animation appear above the hero background */
        .hero {
            isolation: auto;
        }

        .hero::before {
            z-index: 0;
        }

        /* Keep hero text and mascot above the animations */
        .hero-text,
        .hero-image {
            z-index: 3;
        }

        /* Keep the other sections' content above the animations */
        section:not(.hero),
        footer {
            position: relative;
            z-index: 3;
        }

        .hero-text {
            flex: 0 0 52%;
            max-width: 52%;
            position: relative;
            z-index: 2;
        }

        .hero-badge {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 20px;
            border: 1px solid var(--cyan-primary);
            color: var(--cyan-primary);
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .hero-text h1.hero-title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 0 0 22px;
            line-height: 0.8;
            letter-spacing: -0.06em;
            gap: 8px;
        }

        .hero-techtext-wrapper {
            width: 100%;
            max-width: 980px;
            min-height: 120px;
            display: block;
            position: relative;
            filter: drop-shadow(2px 6px 0 rgba(18, 117, 203, 0.9))
                    drop-shadow(0 0 28px rgba(103, 220, 255, 0.5));
        }

        .hero-techtext-wrapper.tech-text {
            min-height: 120px;
            height: 120px;
        }

        .hero-techtext-wrapper .tech-text-canvas {
            display: block;
            width: 100%;
            height: 100%;
            max-height: 150px;
            min-height: 120px;
            filter: drop-shadow(0 0 16px rgba(117, 235, 255, 0.45));
        }

        .hero-line {
            display: flex;
            align-items: baseline;
            gap: 0.18em;
            white-space: nowrap;
            font-family: var(--font-title);
            font-weight: 900;
        }

        .hero-line--bottom {
            margin-top: 0;
        }

        .hero-cung {
            display: inline-block;
            color: #edfaff;
            font-size: clamp(68px, 8vw, 200px);
            line-height: 0.82;
            text-shadow: 0 2px 0 rgba(255,255,255,0.8),
                         0 5px 0 rgba(153, 224, 255, 0.9),
                         0 10px 0 rgba(22, 122, 255, 0.78),
                         0 18px 28px rgba(31, 90, 214, 0.38);
        }

        .hero-cung.tech-text {
            position: relative;
            color: transparent;
            text-shadow: none;
        }

        .hero-cung .tech-text-canvas {
            position: absolute;
            top: -10%;
            left: -6%;
            display: block;
            width: 112%;
            height: 120%;
        }

        .hero-wisio {
            display: inline-block;
            font-size: clamp(68px, 8vw, 200px);
            line-height: 0.82;
            background: linear-gradient(180deg, #ffffff 0%, #dffbff 20%, #82e9ff 42%, #4ed0ff 60%, #0e79ff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            text-shadow: 0 2px 0 rgba(255,255,255,0.6),
                         0 5px 0 rgba(124, 220, 255, 0.8),
                         0 10px 0 rgba(18, 103, 218, 0.8);
            filter: drop-shadow(0 0 24px rgba(65, 211, 255, 0.45));
        }

        .hero-text h1 {
            font-family: var(--font-title);
            font-size: clamp(46px, 6.4vw, 82px);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: 0.5px;
            margin-bottom: 28px;
        }

        .hero-text h1 .reveal-line {
            white-space: nowrap;
        }

        .hero-text p {
            color: var(--text-muted);
            font-size: 16px;
            margin-bottom: 40px;
            max-width: 80%;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
        }

        .hero-image {
            flex: 1;
            min-width: 0;
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Linh vật WISIO ở Hero: ảnh tự co vừa khung, không tràn sang phần chữ */
        .mascot {
            position: relative;
            top: 0;                 /* 0 = tâm ảnh bằng tâm khối chữ; muốn lệch lên/xuống thì sửa số này */
            flex: none;
            width: 118%;            /* ảnh to hơn cột chứa một chút, phần dư là vùng trong suốt */
            max-width: 740px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mascot img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 700px;
            object-fit: contain;
            filter: drop-shadow(0 0 25px rgba(0, 210, 255, 0.35));
        }

        /* --- SECTION CHUNG --- */
        section {
            padding: 60px 0;
        }

        .section-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .section-subtitle {
            color: var(--text-muted);
            font-size: 15px;
            margin-bottom: 40px;
        }

        /* Icon pixel art (dùng ở ô "Mỗi ngày là một bước tiến") */
        .pixel-icon {
            width: 100%;
            height: 100%;
            display: block;
            image-rendering: pixelated;
        }

        /* --- WISIO LÀ AI --- */
        .who-is-wisio {
            background-color: var(--bg-card);
            border: 1px solid var(--bg-card-border);
            border-radius: 24px;
            padding: 40px 50px;
            display: flex;
            align-items: center;
            gap: 20px;
            overflow: hidden;
        }

        .wisio-text {
            flex: 1.15;
            padding-right: 20px;
            position: relative;
            z-index: 2;
        }

        .wisio-text p {
            color: var(--text-muted);
            font-size: 15px;
            margin-bottom: 20px;
        }

        /* Ảnh k3.1 (linh vật) và k3.2 (4 khung ảnh) có viền trong suốt khá rộng,
           nên phóng to hơn khung chứa và kéo margin âm để ảnh lấp đầy chỗ trống mà không làm card cao thêm */
        .wisio-center-img {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .wisio-gallery {
            flex: 1.1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .wisio-center-img img,
        .wisio-gallery img {
            display: block;
            flex: none;
            height: auto;
            max-width: none;
            pointer-events: none;   /* không chặn click vào nút "Tìm hiểu thêm" */
        }

        .wisio-center-img img {
            width: 136%;
            margin: -45px 0 -45px 14px;
            filter: drop-shadow(0 0 22px rgba(0, 210, 255, 0.25));
        }

        .wisio-gallery img {
            width: 122%;
            margin: -45px 0;
        }

        .mascot-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 100%;
            border-radius: 16px;
            border: 2px dashed var(--cyan-primary);
            color: var(--cyan-primary);
            font-weight: 600;
        }

        .gallery-img img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
        }

        .gallery-img {
            overflow: hidden;
            width: 100%;
            aspect-ratio: 1;
            background-color: #1a2a5e;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* --- TIMELINE (MỘT NGÀY CÙNG WISIO) --- */
        .timeline {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0;
            margin-top: 40px;
            margin-bottom: 60px;
            padding: 40px 32px;
            background-color: #0f1c3f;
            border: 1px solid var(--cyan-primary);
            border-radius: 20px;
            position: relative;
        }

        .timeline-step {
            flex: 1 1 0;
            min-width: 0;
            text-align: center;
            position: relative;
        }

        .timeline-icon {
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
        }

        .timeline-icon img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;   /* giữ đúng tỷ lệ, không méo, không tràn khỏi khung */
            filter: drop-shadow(0 0 12px rgba(0, 200, 255, 0.35));
        }

        .timeline-step h4 {
            font-size: 16px;
            color: var(--cyan-primary);
            margin-bottom: 5px;
        }

        .timeline-step p {
            font-size: 12px;
            color: var(--text-muted);
            padding: 0 6px;
        }

        .timeline-step p strong {
            color: var(--text-light);
            font-size: 13px;
        }

        /* Mũi tên nối giữa các bước */
        .timeline-connector {
            flex: 0 0 56px;
            height: 120px;            /* bằng chiều cao icon để mũi tên nằm ngang tâm ảnh */
            position: relative;
            display: flex;
            align-items: center;
        }

        .timeline-connector::before {   /* thân mũi tên: đường nét đứt kiểu pixel */
            content: "";
            flex: 1;
            height: 3px;
            margin-right: 6px;
            background-image: repeating-linear-gradient(
                to right,
                var(--cyan-primary) 0, var(--cyan-primary) 4px,
                transparent 4px, transparent 8px
            );
            opacity: 0.8;
            filter: drop-shadow(0 0 4px rgba(0, 210, 255, 0.8));
        }

        .timeline-connector::after {    /* đầu mũi tên */
            content: "";
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 11px solid var(--cyan-primary);
            filter: drop-shadow(0 0 4px rgba(0, 210, 255, 0.8));
        }

        .timeline-dot {                 /* chấm sáng giữa mũi tên */
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            margin: -4px 0 0 -8px;
            background: #fff;
            border: 2px solid var(--cyan-primary);
            transform: rotate(45deg);
            z-index: 1;
        }

        /* Ô "Mỗi ngày là một bước tiến" */
        .timeline-note {
            flex: 0 0 190px;
            margin-left: 8px;
            align-self: center;
            text-align: center;
            padding: 24px 16px 18px;
            border-radius: 24px;
            border: 1px solid rgba(0, 210, 255, 0.55);
            background: linear-gradient(160deg, rgba(0, 210, 255, 0.10), rgba(123, 92, 255, 0.14));
            box-shadow: 0 0 18px rgba(0, 210, 255, 0.25), inset 0 0 14px rgba(0, 210, 255, 0.08);
        }

        .timeline-note p {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.5;
            color: var(--text-light);
            margin: 10px 0 12px;
        }

        .note-moon,
        .note-heart {
            width: 30px;
            height: 30px;
            margin: 0 auto;
        }

        .note-heart {
            width: 24px;
            height: 24px;
        }

        .note-moon .pixel-icon,
        .note-heart .pixel-icon {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* --- TÍNH NĂNG NỔI BẬT --- */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-top: 40px;
        }

        .feature-card {
            background-color: var(--bg-card);
            border: 1px solid var(--bg-card-border);
            border-radius: 20px;
            padding: 24px 30px 24px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 190px;
            overflow: hidden;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            border-color: var(--cyan-primary);
        }

        /* Ảnh bên trái mỗi ô: ảnh có viền trong suốt rộng nên phóng to hơn khung để nhân vật đủ lớn */
        .feature-img {
            flex: 0 0 210px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .feature-img img {
            display: block;
            flex: none;
            width: 250px;
            max-width: none;
            height: auto;
            pointer-events: none;
            filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
            transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.24, 1);
        }

        .feature-card:hover .feature-img img {
            transform: translateY(-6px) scale(1.05);
        }

        .feature-body {
            flex: 1;
            min-width: 0;
        }

        .feature-card h3 {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .feature-card p {
            font-size: 14px;
            color: var(--text-muted);
        }

        /* --- TRẢI NGHIỆM THỰC TẾ --- */
        .experience-section {
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, rgba(16, 27, 66, 0.8) 0%, rgba(16, 27, 66, 0) 100%);
            background-color: var(--bg-dark);
            border-radius: 24px;
            padding: 40px;
            margin-bottom: 60px;
            position: relative;
            overflow: hidden;
        }

        .exp-images {
            flex: 1;
            position: relative;
        }

        .exp-img-main {
            width: 80%;
            border-radius: 16px;
            border: 2px solid var(--cyan-primary);
            background-color: #1a2a5e;
            height: 200px;
        }

        .exp-img-main img,
        .exp-img-sub img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
        }

        .exp-img-main,
        .exp-img-sub {
            overflow: hidden;
        }

        .exp-img-sub {
            position: absolute;
            bottom: -20px;
            left: 40%;
            width: 45%;
            border-radius: 12px;
            border: 2px solid var(--text-light);
            background-color: #0f1c3f;
            height: 120px;
        }

        .exp-text {
            flex: 1;
            padding-left: 40px;
            z-index: 2;
        }



        /* --- FOOTER --- */
        /* --- FOOTER BASE --- */

        footer {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            background-color: var(--bg-dark);
            padding: 60px 20px 20px 20px;

    /* Extend the footer background beyond .container */
            width: 100vw;
            max-width: none;
            margin-left: calc(50% - 50vw);
            margin-right: 0;
}


        /* --- THE 5-COLUMN GRID LAYOUT --- */
        .footer-container {
            display: grid;
            /* 2fr for the brand column, 1fr for link columns, 1.5fr for the CTA column */
            /* 4 cột dàn đều từ mép trái sang mép phải */
            grid-template-columns: minmax(0, 260px) auto minmax(0, 320px) minmax(0, 260px);
            justify-content: space-between;
            gap: 30px;
            margin-bottom: 60px;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- COLUMN STYLING --- */
        .brand-col .logo {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 15px;
        }

        .brand-col .logo span {
            color: var(--cyan-primary, #00e5ff);
            /* Uses your cyan color */
        }

        .brand-col .tagline {
            font-size: 13px;
            color: var(--text-muted, #888);
            margin-bottom: 30px;
            line-height: 1.5;
        }

        .footer-col h3 {
            font-size: 16px;
            color: #fff;
            margin-bottom: 24px;
            font-weight: 500;
        }

        .footer-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-col ul li {
            margin-bottom: 16px;
        }

        .footer-col ul li a {
            text-decoration: none;
            color: var(--text-muted, #888);
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .footer-col ul li a:hover {
            color: var(--cyan-primary, #00e5ff);
        }

        /* --- CỘT LIÊN HỆ --- */
        .contact-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .contact-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
            font-size: 14px;
            line-height: 1.5;
            color: var(--text-muted, #888);
        }

        .contact-list svg {
            flex: 0 0 16px;
            width: 16px;
            height: 16px;
            margin-top: 4px;
            fill: #7fdcff;
        }

        .contact-list a {
            color: var(--text-muted, #888);
            transition: color 0.3s ease;
            word-break: break-word;
        }

        .contact-list a:hover {
            color: var(--cyan-primary, #00e5ff);
        }

        /* --- CTA COLUMN SPECIFICS --- */
        .cta-col h3 {
            font-size: 18px;
        }

        .cta-col p {
            font-size: 13px;
            color: var(--text-muted, #888);
            margin-bottom: 20px;
            line-height: 1.5;
        }

        /* --- SOCIAL ICONS --- */
        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            /* Pushes them down below the tagline */
        }

        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-decoration: none;
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                        background-color 0.3s ease,
                        box-shadow 0.3s ease,
                        color 0.3s ease;
        }

        .social-icon svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
            transition: transform 0.35s ease;
        }

        /* Rê chuột: hình tròn phóng to + sáng lên */
        .social-icon:hover {
            transform: scale(1.25);
            background-color: var(--cyan-primary, #00e5ff);
            color: #000;
            box-shadow: 0 0 18px rgba(0, 210, 255, 0.6);
        }

        .social-icon:hover svg {
            transform: scale(1.05);
        }

        /* --- COPYRIGHT BOTTOM SECTION --- */
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-bottom p {
            font-size: 13px;
            color: var(--text-muted, #888);
            margin: 0;
        }

        /* --- RESPONSIVE DESIGN (Mobile / Tablet) --- */
        /* When screen is smaller than 1024px, drop to 3 columns */
        @media (max-width: 900px) {
            .nav-actions {
                gap: 10px;
            }

            .music-toggle {
                width: 40px;
                height: 40px;
            }
        }

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

            .brand-col {
                grid-column: span 2;
                margin-bottom: 20px;
            }

            .cta-col {
                grid-column: span 2;
                margin-top: 20px;
            }
        }

        /* When screen is smaller than 768px, drop to 2 columns */
        @media (max-width: 768px) {
            .footer-container {
                grid-template-columns: repeat(2, 1fr);
            }

            .brand-col {
                grid-column: span 2;
            }

            .cta-col {
                grid-column: span 2;
            }
        }


        /* --- RESPONSIVE: màn hình nhỏ --- */
        @media (max-width: 900px) {
            .site-nav {
                padding: 14px 18px;
                align-items: center;
                min-height: 70px;
            }

            .nav-panel {
                position: absolute;
                top: calc(100% + 8px);
                left: 14px;
                right: 14px;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 18px;
                padding: 16px 18px 18px;
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 20px;
                background: rgba(10, 16, 43, 0.96);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(-8px);
                transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
            }

            .site-nav.is-open .nav-panel {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateY(0);
            }

            .nav-links,
            .nav-actions {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }

            .nav-links {
                gap: 12px;
                flex: none;
            }

            .nav-links a {
                width: 100%;
                padding: 10px 12px;
                border-radius: 10px;
                font-size: 15px;
                color: var(--text-light);
                background: rgba(255, 255, 255, 0.02);
            }

            .nav-links a::after {
                display: none;
            }

            .nav-actions {
                margin-top: 4px;
            }

            .nav-actions .btn {
                width: 100%;
                justify-content: center;
            }

            .mobile-nav-toggle {
                display: inline-flex;
            }

            .logo {
                font-size: 20px;
            }

            .logo img {
                height: 32px;
            }

            .hero {
                flex-direction: column;
                text-align: center;
                gap: 30px;
                min-height: 0;
                padding: 40px 0;
            }

            .hero-text,
            .hero-image {
                flex: none;
                max-width: 100%;
                width: 100%;
            }

            .mascot {
                width: 100%;
            }

            .hero-text p {
                max-width: 100%;
            }

            .hero-buttons {
                justify-content: center;
            }

            .hero-text h1 {
                font-size: 46px;
            }

            .hero-text h1.hero-title {
                align-items: center;
            }

            .timeline {
                flex-direction: column;
                align-items: center;
                padding: 30px 20px;
            }

            .timeline-step {
                flex: none;
                width: 100%;
                max-width: 320px;
            }

            .timeline-connector {
                flex: 0 0 auto;
                width: 56px;
                height: 40px;
                transform: rotate(90deg);
                margin: 10px 0;
            }

            .timeline-note {
                margin: 0;
                flex: none;
                width: 100%;
                max-width: 260px;
            }

            .who-is-wisio,
            .experience-section {
                flex-direction: column;
            }

            .wisio-center-img img,
            .wisio-gallery img {
                width: 100%;
                max-width: 480px;
                margin: 0;
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .mascot {
                top: 0;
            }

            .exp-text {
                padding-left: 0;
                margin-top: 40px;
            }
        }


        @media (max-width: 560px) {
            .feature-card {
                flex-direction: column;
                text-align: center;
                padding: 20px;
            }

            .feature-img {
                flex: none;
                width: 100%;
            }

            .hero-text h1 {
                font-size: 38px;
            }
        }

/* --- FINAL HERO TEXT OVERRIDES --- */
/* Restore the moving shine on WISIO */
/* WISIO: preserve the blue gradient */
.hero-wisio {
    position: relative;
    display: inline-block;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #dffbff 20%,
        #82e9ff 42%,
        #4ed0ff 60%,
        #0e79ff 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    background-size: 100% 100%;
    background-position: 0 0;
    animation: none;
}

/* A separate layer creates the moving white shine */
.hero-wisio::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;

    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: none;

    background: linear-gradient(
        110deg,
        transparent 42%,
        rgba(255, 255, 255, 0.98) 50%,
        transparent 58%
    );

    background-size: 250% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: wisio-shine 2.6s linear infinite;
}

@keyframes wisio-shine {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-wisio::after {
        animation: none;
    }
}
.hero-wisio {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: #00d2ff !important;
    color: #00d2ff !important;
}
/* Align the beginning of "Học tiếng Anh" with "cùng" */
.hero-techtext-wrapper--top {
    position: relative;
    left: 0px;
    font-family: var(--font-title);
    font-size: clamp(40px, 8vw, 120px);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.04em;
    color: #edfaff;
    white-space: nowrap;
}

/* Keep the heading centered on smaller screens */
@media (max-width: 900px) {
    .hero-techtext-wrapper--top {
        left: 0;
    }
}
/* Bring "cùng" and "WISIO" closer together */
.hero-line--bottom {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0;
    width: 100%
}

.hero-wisio {
    margin-left: 0.12em;
}
@media (max-width: 900px) {
    .hero-line--bottom {
        justify-content: center;
    }
}
/* Match "cùng" to the shadow and glow on "Học" */
.hero-cung.tech-text {
    filter:
        drop-shadow(2px 6px 0px rgba(18, 117, 203, 0.9))
        drop-shadow(0 0 28px rgba(103, 220, 255, 0.5));
}

@media (max-width: 900px) {
    .hero-text h1.hero-title {
        gap: 4px;
    }

    .hero-techtext-wrapper--top:not(.tech-text) {
        min-height: 48px;
        height: auto;
    }
}

        .wisio-boot {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: grid;
            place-items: center;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 18%, rgba(56, 201, 255, 0.14), transparent 26%),
                linear-gradient(180deg, rgba(3, 8, 18, 0.96), rgba(3, 7, 15, 0.98));
            opacity: 1;
            visibility: visible;
            transition: opacity 0.45s ease, visibility 0.45s ease;
        }

        .wisio-boot.is-hidden {
            opacity: 0;
            visibility: hidden;
        }

        .wisio-boot__content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            transform: translateY(-10px);
            animation: wisio-boot-float 1.2s ease-in-out infinite alternate;
        }

        .wisio-boot__wordmark {
            font-size: clamp(2.2rem, 3vw, 4.2rem);
            font-weight: 800;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #dffbff;
            text-shadow: 0 0 18px rgba(0, 210, 255, 0.4);
        }

        .wisio-boot__bar {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 188px;
            padding: 0 4px;
        }

        .wisio-boot__segment {
            display: block;
            width: 24px;
            height: 6px;
            border-radius: 999px;
            background: rgba(105, 214, 255, 0.38);
            box-shadow: 0 0 12px rgba(78, 214, 255, 0.35);
            animation: wisio-boot-segment 1.2s ease-in-out infinite;
        }

        .wisio-boot__segment:nth-child(2) { animation-delay: 0.12s; }
        .wisio-boot__segment:nth-child(3) { animation-delay: 0.24s; }
        .wisio-boot__segment:nth-child(4) { animation-delay: 0.36s; }
        .wisio-boot__segment:nth-child(5) { animation-delay: 0.48s; }

        .wisio-pixel-reveal {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            image-rendering: pixelated;
            transition: opacity 120ms linear;
        }

        .wisio-aperture {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: block;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            image-rendering: pixelated;
        }

        .wisio-aperture-outline {
            z-index: 10001;
        }

        .hero-image .mascot img {
            opacity: 1;
            transition: opacity 120ms linear;
        }

        html.wisio-reveal-active .hero-image .mascot img {
            opacity: 0;
        }

        @keyframes wisio-boot-float {
            0% { transform: translateY(-10px); }
            100% { transform: translateY(2px); }
        }

        @keyframes wisio-boot-segment {
            0%, 100% {
                transform: scaleX(0.35);
                opacity: 0.36;
                background: rgba(110, 226, 255, 0.32);
            }
            50% {
                transform: scaleX(1.15);
                opacity: 1;
                background: rgba(116, 224, 255, 0.95);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .wisio-boot {
                transition: none;
            }

            .wisio-boot__content {
                animation: none;
            }

            .wisio-boot__segment {
                animation: none;
                opacity: 1;
                transform: none;
            }

            html.wisio-reveal-active .hero-image .mascot img {
                opacity: 1;
                transition: none;
            }
        }

/* ===== Chữ nổi 3D (dùng ở tiêu đề trang about) ===== */

        /* Chữ nổi 3D: bóng xanh dày kéo xuống phải + quầng sáng nhẹ cho nổi bật trên nền tối.
           (xếp chồng drop-shadow để tạo độ dày, vẫn hợp với vệt sáng shiny) */
        .title-3d {
            display: inline-block;
            filter: drop-shadow(1px 1px 0 #3b97ff) drop-shadow(1px 1px 0 #3b97ff)
                    drop-shadow(1px 1px 0 #3b97ff) drop-shadow(1px 1px 0 #3b97ff)
                    drop-shadow(1px 1px 0 #3b97ff) drop-shadow(1px 1px 0 #3b97ff)
                    drop-shadow(0 0 22px rgba(0, 190, 255, 0.45));
        }

        /* WISIO: to hơn, màu cyan, bóng xanh đậm hơn */
        .title-3d--cyan {
            font-size: 1.32em;
            letter-spacing: 1px;
            margin-left: 4px;
            filter: drop-shadow(1px 1px 0 #2a7de8) drop-shadow(1px 1px 0 #2a7de8)
                    drop-shadow(1px 1px 0 #2a7de8) drop-shadow(1px 1px 0 #2a7de8)
                    drop-shadow(1px 1px 0 #2a7de8) drop-shadow(1px 1px 0 #2a7de8)
                    drop-shadow(1px 1px 0 #2a7de8) drop-shadow(1px 1px 0 #2a7de8)
                    drop-shadow(0 0 26px rgba(47, 225, 245, 0.55));
        }


/* =====================================================================
   ===== TRANG ABOUT (about.html) =====
   Chỉ các class riêng của trang "Về chúng tôi" (.about-*, .motto-card, .cta-mascot, .nav-links a.active)
   nên không ảnh hưởng giao diện trang chủ.
   ===================================================================== */

html { scroll-behavior: smooth; }
#story, #motto { scroll-margin-top: 80px; }

/* --- NAV: mục của trang đang mở = nền oval xanh đậm + chữ cyan đậm (luôn hiện) --- */
.nav-links a.active,
.nav-links a.active:hover {
    background: none;
    -webkit-text-fill-color: #33d6ff;
    color: #33d6ff;
    font-weight: 700;
    animation: none;
}
.nav-links a.active::before,
.nav-links a.active:hover::before {
    opacity: 1;
    transform: scale(1);
    background: rgba(0, 170, 255, 0.16);
    border-color: rgba(0, 210, 255, 0.25);
}

/* --- Nhãn nhỏ (eyebrow) có vạch cyan phía trước --- */
.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--cyan-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.about-eyebrow--line::before {
    content: "";
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: var(--cyan-primary);
}

.about-title {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 14px;
}
.about-title .accent { color: var(--cyan-primary); }

/* --- HERO --- */
.about-hero .hero-text h1 {
    font-size: clamp(34px, 4.7vw, 62px);
    line-height: 1.16;
    margin-bottom: 24px;
}
/* "thì sao?" dùng cùng kiểu cyan 3D nhưng không phóng to như chữ WISIO ở trang chủ */
.about-hero .title-3d--cyan {
    font-size: 1em;
    margin-left: 0;
}

/* Khung chứa ảnh linh vật (viền cyan bo tròn, nền lóe xanh) */
.about-hero-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    border-radius: 32px;
    border: 2px solid rgba(0, 210, 255, 0.55);
    background: radial-gradient(circle at 50% 55%, rgba(0, 190, 200, 0.35) 0%, rgba(16, 27, 66, 0.9) 70%);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.18), inset 0 0 40px rgba(0, 210, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.about-hero-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --- SECTION 1: CÂU CHUYỆN THƯƠNG HIỆU --- */
.about-story { padding-top: 70px; }
.about-story-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
    align-items: start;
    margin-top: 36px;
}
.about-brand-card {
    background-color: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: 24px;
    padding: 40px 36px;
}
.about-brand-card .label {
    color: var(--cyan-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.about-brand-card h3 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 16px;
}
.about-brand-card p {
    color: var(--text-muted);
    font-size: 15px;
}
.about-story-text p {
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.8;
    margin-bottom: 22px;
}
.about-story-text strong { color: #fff; font-weight: 700; }
.about-story-text .quote {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    padding-left: 18px;
    border-left: 3px solid var(--cyan-primary);
}

/* --- SECTION 2: PHƯƠNG CHÂM --- */
.about-motto { padding-top: 70px; }
.about-motto-head {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
}
.about-motto-mascot {
    flex: none;
    width: 150px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-motto-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(0, 210, 255, 0.35));
}
.about-motto-head .section-subtitle { margin-bottom: 0; }

.about-motto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.motto-card {
    background-color: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: 24px;
    padding: 34px 30px;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.motto-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 210, 255, 0.6);
    box-shadow: 0 12px 30px rgba(0, 210, 255, 0.15);
}
.motto-card .num {
    font-family: var(--font-title);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--cyan-primary);
    margin-bottom: 10px;
}
.motto-card .tag {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.motto-card h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 12px;
}
.motto-card p {
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.75;
}

/* --- CTA cuối trang --- */
.about-cta { padding: 70px 0 60px; }
.about-cta-box {
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid rgba(0, 210, 255, 0.45);
    border-radius: 32px;
    padding: 60px 200px 64px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.1);
}
.about-cta-box h2 {
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 16px;
}
.about-cta-box p {
    color: var(--text-muted);
    font-size: 15.5px;
    max-width: 560px;
    margin: 0 auto 30px;
}
.cta-mascot {
    position: absolute;
    bottom: 0;
    width: 180px;
    height: 200px;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}
.cta-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.3));
}
.cta-mascot--left  { left: 14px; }
.cta-mascot--right { right: 14px; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .about-hero-frame { max-width: 380px; margin-top: 30px; }
    .about-hero .hero-text h1 { text-align: center; }
    .about-story-grid { grid-template-columns: 1fr; }
    .about-motto-grid { grid-template-columns: 1fr; }
    .about-cta-box { padding: 50px 28px 190px; }
    .cta-mascot { width: 140px; height: 150px; }
}
@media (max-width: 560px) {
    .about-motto-head { flex-direction: column; text-align: center; }
    .about-cta-box { padding: 40px 20px 170px; }
}


/* =====================================================================
   ===== TRANG LIÊN HỆ (contact.html) =====
   Chỉ các class riêng của trang liên hệ (.contact-*, .cf-*), dùng lại nút/chữ/hiệu ứng chung của website.
   ===================================================================== */

#contact-form-section { scroll-margin-top: 90px; }

/* --- Banner đầu trang: ảnh linh vật bên trái + thẻ kính bên phải --- */
.contact-hero .hero-image,
.contact-hero .contact-card {
    position: relative;
    z-index: 3;
}
/* Banner trải hết bề ngang màn hình giống thiết kế:
   ảnh linh vật chiếm ~54% bên trái, thẻ chữ ~42% bên phải (mép phải thẳng hàng nút "Đặt ngay" trên nav) */
.contact-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 20px 40px 0 3.5vw;
    gap: 2vw;
}
.contact-hero .hero-image {
    flex: 0 0 54%;
    max-width: 54%;
    justify-content: flex-start;
    align-self: center;
}
.contact-hero .mascot {
    width: 100%;
    max-width: none;
    top: 0;
}
.contact-hero .mascot img {
    width: 100%;
    max-height: calc(100vh - 130px);
    object-fit: contain;
    object-position: left center;
}

.contact-card {
    flex: 0 0 42.5%;
    max-width: 42.5%;
    margin-left: auto;
    align-self: center;
    padding: clamp(28px, 3vw, 46px) clamp(26px, 3vw, 44px);
    border-radius: 28px;
    border: 1px solid rgba(0, 210, 255, 0.4);
    background: rgba(8, 18, 52, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.12), inset 0 0 30px rgba(0, 210, 255, 0.05);
}
.contact-card .contact-kicker { font-size: clamp(16px, 1.45vw, 21px); }
.contact-kicker {
    color: var(--cyan-primary);
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 14px;
}
.contact-card h1 {
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 800;
    line-height: 1.18;
    margin-bottom: 20px;
}
.contact-card h1 .accent {
    position: relative;
    display: inline-block;
    color: var(--cyan-primary);
}
/* nét gạch lượn dưới chữ "bạn!" */
.contact-card h1 .accent::after {
    content: "";
    position: absolute;
    left: -2%;
    bottom: -8px;
    width: 104%;
    height: 8px;
    background: no-repeat center / 100% 100%
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 25 0 50 4 T 98 3' fill='none' stroke='%2300d2ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.contact-spark {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 6px;
    vertical-align: -0.05em;
    fill: #fff;
    filter: drop-shadow(0 0 8px rgba(120, 230, 255, 0.8));
}
.contact-card p {
    color: #d3def5;
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.55;
    margin-bottom: clamp(22px, 2.2vw, 32px);
}
.btn-icon {
    width: 1.35em;
    height: 1.35em;
    flex: none;
    fill: currentColor;
}

/* Nút "Gửi lời nhắn" lớn ở banner: viền gradient cyan -> hồng, nền xanh sáng, biểu tượng thư + mũi tên */
.btn-send {
    gap: 16px;
    padding: 16px 40px 16px 30px;
    font-size: clamp(18px, 1.75vw, 26px);
    font-weight: 700;
    color: #fff;
    border: 4px solid transparent;
    background:
        linear-gradient(180deg, #62c7ff 0%, #3f9ef2 100%) padding-box,
        linear-gradient(135deg, #25f2ff 0%, #25f2ff 45%, #ff3df0 100%) border-box;
    box-shadow: 0 0 22px rgba(37, 242, 255, 0.45), 0 6px 22px rgba(255, 61, 240, 0.35);
    text-shadow: 0 1px 2px rgba(10, 40, 110, 0.35);
}
.btn-send:hover {
    background:
        linear-gradient(180deg, #78d2ff 0%, #4fb0fb 100%) padding-box,
        linear-gradient(135deg, #25f2ff 0%, #25f2ff 45%, #ff3df0 100%) border-box;
    box-shadow: 0 12px 30px rgba(37, 242, 255, 0.55), 0 8px 26px rgba(255, 61, 240, 0.45);
}
.btn-send .btn-icon { width: 1.9em; height: 1.9em; }
.btn-send .btn-roll { font-size: 1em; }
.btn-send .btn-arrow {
    width: 1.5em;
    height: 1.5em;
    flex: none;
    transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.btn-send:hover .btn-arrow { transform: translateX(6px); }

/* --- Khung "Để lại lời nhắn" --- */
.contact-form-section { padding-top: 40px; }
.contact-form-card {
    position: relative;
    padding: 36px 40px 40px;
    border-radius: 28px;
    border: 1px solid rgba(0, 210, 255, 0.45);
    background: rgba(0, 24, 74, 0.55);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.1);
}
.contact-form-head { margin-bottom: 34px; padding-right: 260px; }
.contact-form-head .contact-kicker { font-size: 16px; margin-bottom: 8px; }
.contact-form-head h2 {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
}
.contact-form-head p { color: var(--text-muted); font-size: 15px; }

/* Linh vật nhô lên ở góc phải trên của khung */
.contact-form-mascot {
    position: absolute;
    top: -62px;
    right: 36px;
    width: 230px;
    height: 290px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.contact-form-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.3));
}

.cf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 28px;
    align-items: stretch;
}
.cf-col { display: flex; flex-direction: column; gap: 20px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-field label {
    font-size: 16px;
    font-weight: 700;
    padding-left: 18px;
}
.cf-field label .req { color: #ff5c6c; margin-left: 2px; }

.cf-field input,
.cf-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: #fff;
    background: rgba(2, 14, 52, 0.7);
    border: 1px solid rgba(0, 210, 255, 0.4);
    border-radius: 999px;
    padding: 15px 22px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.cf-field textarea {
    flex: 1;
    min-height: 250px;
    border-radius: 24px;
    resize: vertical;
    line-height: 1.6;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: #8093bd; }
.cf-field input:hover,
.cf-field textarea:hover { border-color: rgba(0, 210, 255, 0.7); }
.cf-field input:focus,
.cf-field textarea:focus {
    border-color: var(--cyan-primary);
    background: rgba(2, 14, 52, 0.9);
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.18), 0 0 18px rgba(0, 210, 255, 0.25);
}
.cf-field input:user-invalid,
.cf-field textarea:user-invalid { border-color: #ff5c6c; }

.cf-col--msg .cf-field { flex: 1; }
.cf-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.cf-actions .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.cf-status { font-size: 14px; color: var(--text-muted); min-height: 1.4em; }
.cf-status.is-ok { color: #6df0c2; }
.cf-status.is-error { color: #ff8a96; }
.cf-submit .btn-roll { cursor: pointer; }

@media (max-width: 900px) {
    .contact-hero { gap: 20px; padding: 30px 20px 0; }
    .contact-hero .hero-image { order: 2; flex: none; width: 100%; max-width: 100%; justify-content: center; }
    .contact-hero .mascot img { max-height: 460px; object-position: center; }
    .btn-send { font-size: 18px; padding: 13px 28px 13px 22px; }
    .contact-hero .contact-card { order: 1; flex: none; max-width: 100%; width: 100%; text-align: left; }
    .contact-hero .mascot { max-width: 420px; }
    .contact-form-head { padding-right: 0; }
    .contact-form-mascot { position: static; width: 170px; height: 200px; margin: 0 auto 8px; }
    .contact-form-card { padding: 28px 22px 30px; margin-top: 30px; }
    .cf-grid { grid-template-columns: 1fr; }
    .cf-field textarea { min-height: 180px; }
}


/* =====================================================================
   ===== TRANG TRẢI NGHIỆM (experience.html) =====
   Chỉ các class riêng của trang (.xp-*, .btn-light), dùng lại nút/chữ/hiệu ứng chung của website.
   ===================================================================== */

html { scroll-behavior: smooth; }
#journey, #moments { scroll-margin-top: 90px; }

/* Ảnh chữ viết tay / trang trí: nếu chưa có file thì tự ẩn (xem onerror trong HTML) */
.xp-hw {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
    z-index: 4;
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.35));
}

/* Ngôi sao lấp lánh nhỏ */
.xp-spark {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 10px;
    vertical-align: 0.1em;
    fill: #bff4ff;
    filter: drop-shadow(0 0 6px rgba(120, 230, 255, 0.9));
}

/* --- HERO: ảnh lớn phủ toàn bộ bề ngang, chữ nằm đè bên trái --- */
.xp-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(520px, calc(100svh - 60px), 780px);
    padding: 40px 0 50px;
}
.xp-hero-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(circle at 65% 40%, #1a3a8a 0%, #0a102b 70%);
    border-bottom: 1px solid rgba(0, 210, 255, 0.65);
    box-shadow: 0 6px 24px -10px rgba(0, 210, 255, 0.6);
}
.xp-hero-bg img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 70% center;
    display: block;
}
/* lớp tối dần từ trái sang để chữ dễ đọc */
.xp-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 12, 40, 0.92) 0%, rgba(6, 12, 40, 0.7) 28%, rgba(6, 12, 40, 0.15) 55%, transparent 70%),
        linear-gradient(0deg, rgba(6, 12, 40, 0.5) 0%, transparent 25%);
    pointer-events: none;
}
.xp-hero .hero-text {
    position: relative;
    z-index: 2;
    flex: 0 1 46%;
    max-width: 46%;
}
.xp-hero .hero-badge { letter-spacing: 1px; }
.xp-hero .hero-text h1 {
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 1.14;
    margin-bottom: 22px;
}
.xp-hero .hero-text h1 .title-3d--cyan { font-size: 1.12em; margin-left: 0; }
.xp-hero .hero-text p { color: #c9d6f2; max-width: 92%; margin-bottom: 32px; }

/* Nút trắng "Xem video giới thiệu" */
.btn-light {
    gap: 12px;
    padding: 10px 24px 10px 10px;
    background: #fff;
    color: #0a102b;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}
.btn-light:hover {
    background: #eaf8ff;
    box-shadow: 0 12px 26px rgba(0, 210, 255, 0.4);
}
.btn-light .play-dot {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: #0d2a8a;
    display: grid;
    place-items: center;
}
.btn-light .play-dot svg { width: 13px; height: 13px; fill: #fff; margin-left: 2px; }
.btn-light .btn-arrow { width: 1.3em; height: 1.3em; flex: none; transition: transform 0.35s ease; }
.btn-light:hover .btn-arrow { transform: translateX(5px); }

/* Link chữ "Khám phá ngay →" */
.xp-link {
    align-self: center;
    position: relative;
    color: var(--cyan-primary);
    font-weight: 600;
    font-size: 15px;
    padding: 6px 0;
}
.xp-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}
.xp-link:hover::after { transform: scaleX(1); }
.xp-link span { display: inline-block; transition: transform 0.3s ease; }
.xp-link:hover span { transform: translateX(5px); }

/* --- KHUNG BO TRÒN (giống các khung ở trang chủ, about, liên hệ) --- */
.xp-section { padding: 26px 0; }
.xp-frame {
    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(0, 210, 255, 0.45);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.1);
}
.xp-panel {
    position: relative;
    padding: 34px 40px;
    border-radius: 27px;           /* nhỏ hơn khung ngoài 1px (độ dày viền) */
    overflow: hidden;              /* ảnh bên trong không lòi ra ngoài góc bo */
    background:
        radial-gradient(circle at 70% 50%, rgba(0, 120, 255, 0.14), transparent 60%),
        var(--bg-card);
    box-shadow: inset 0 0 40px rgba(0, 210, 255, 0.06);
}
.xp-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 210, 255, 0.7);
    background: rgba(0, 210, 255, 0.08);
    color: var(--cyan-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.xp-title {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 12px;
}
.xp-title .accent { color: var(--cyan-primary); }

/* --- HÀNH TRÌNH TRẢI NGHIỆM --- */
.xp-journey-grid {
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    gap: 10px;
    align-items: center;
}
.xp-journey-text { position: relative; z-index: 2; }
.xp-journey-text p { color: #c3d2f2; font-size: 14.5px; line-height: 1.7; max-width: 290px; }
.xp-journey-mascot {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin-top: 24px;
}
.xp-journey-mascot img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.3));
}
.xp-diagram { position: relative; }
.xp-diagram img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 24px rgba(0, 120, 255, 0.25));
}
.xp-panel .xp-hw--journey { right: 26px; top: 26px; width: clamp(100px, 10vw, 150px); }

/* --- KHOẢNH KHẮC TRẢI NGHIỆM --- */
.xp-moments-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.xp-moments-head .xp-title { margin-bottom: 0; }
.xp-head-right { display: flex; align-items: center; gap: 24px; padding-right: 150px; position: relative; }
.xp-head-right .xp-hw--moments { right: 0; top: 50%; transform: translateY(-50%); width: 140px; }
.xp-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(0, 210, 255, 0.55);
    background: rgba(2, 14, 52, 0.6);
}
.xp-tabs button {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    padding: 9px 38px;
    border-radius: 999px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.xp-tabs button:hover { background: rgba(0, 210, 255, 0.15); }
.xp-tabs button.is-active {
    background: var(--cyan-primary);
    color: #02122e;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.5);
}

.xp-gallery {
    display: grid;
    grid-template-columns: 0.43fr 0.57fr;
    gap: 18px;
}
.xp-feature {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 210, 255, 0.55);
    background: #0f1c3f;
    min-height: 320px;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.15);
}
.xp-feature > img,
.xp-feature > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xp-feature::after {
    content: "";
    position: absolute;
    inset: 45% 0 0 0;
    background: linear-gradient(to top, rgba(2, 10, 36, 0.9), transparent);
    pointer-events: none;
}
.xp-feature--video::after { display: none; }
.xp-feature-play {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(13, 42, 138, 0.85);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.xp-feature-play:hover { transform: scale(1.1); box-shadow: 0 0 16px rgba(0, 210, 255, 0.7); }
.xp-feature-play svg { width: 13px; height: 13px; fill: #fff; margin-left: 2px; }
.xp-quote {
    position: absolute;
    left: 18px; right: 18px; bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(4, 14, 48, 0.7);
    border: 1px solid rgba(0, 210, 255, 0.35);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}
.xp-quote q { quotes: "“" "”"; }
.xp-quote .accent { color: #5fe3ff; }
.xp-quote small {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 9px;
    border-radius: 6px;
    background: rgba(0, 210, 255, 0.18);
    color: #bfefff;
    font-size: 11.5px;
    font-weight: 600;
}
.xp-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 12px;
}
.xp-thumb {
    position: relative;
    display: block;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #fff;
    text-align: left;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 210, 255, 0.45);
    background: #0f1c3f;
    min-height: 150px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.xp-thumb[hidden] { display: none; }
.xp-thumb:hover, .xp-thumb.is-current {
    transform: translateY(-4px);
    border-color: var(--cyan-primary);
    box-shadow: 0 8px 20px rgba(0, 210, 255, 0.25);
}
.xp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-thumb .cap {
    position: absolute;
    left: 6px; right: 6px; bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(2, 10, 36, 0.82);
    border: 1px solid rgba(0, 210, 255, 0.25);
}
.xp-thumb .cap svg { width: 14px; height: 14px; flex: none; fill: #3ee0ff; }
.xp-thumb .play {
    position: absolute;
    top: 42%; left: 50%;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    background: rgba(0, 210, 255, 0.85);
    display: grid;
    place-items: center;
}
.xp-thumb .play svg { width: 13px; height: 13px; fill: #02122e; margin-left: 2px; }
.xp-tabpanel[hidden] { display: none; }
.xp-dots { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.xp-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #5fe3ff;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.xp-dots button:hover { transform: scale(1.25); }
.xp-dots button.is-active { background: #5fe3ff; box-shadow: 0 0 8px rgba(95, 227, 255, 0.8); }

/* --- CTA cuối trang --- */
.xp-cta { padding: 26px 0 70px; }
.xp-cta .xp-panel {
    display: grid;
    grid-template-columns: 0.27fr 0.46fr 0.27fr;
    align-items: center;
    min-height: 210px;
    padding: 0 30px;
}
.xp-cta-mascot { position: relative; align-self: end; }
.xp-cta-mascot img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-top: 16px;
    filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.3));
}
.xp-cta-text { text-align: center; padding: 34px 6px; }
.xp-cta-text h2 { font-size: clamp(20px, 2.1vw, 28px); font-weight: 800; margin-bottom: 8px; }
.xp-cta-text h2 .accent { color: var(--cyan-primary); }
.xp-cta-text p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
.xp-cta-art { align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
.xp-cta-art img { display: block; width: 100%; max-width: 320px; height: auto; }

/* --- RESPONSIVE --- */
@media (max-width: 1000px) {
    .xp-gallery { grid-template-columns: 1fr; }
    .xp-feature { min-height: 300px; }
}
@media (max-width: 900px) {
    .xp-hero { min-height: 560px; }
    .xp-hero .hero-text { flex: none; max-width: 100%; width: 100%; text-align: left; }
    .xp-hero-bg::after { background: linear-gradient(90deg, rgba(6, 12, 40, 0.88), rgba(6, 12, 40, 0.55)); }
    .xp-hero .hero-buttons { justify-content: flex-start; flex-wrap: wrap; }
    .xp-panel { padding: 28px 20px; }
    .xp-journey-grid { grid-template-columns: 1fr; }
    .xp-panel .xp-hw--journey { display: none; }
    /* ảnh hành trình: cho kéo ngang trên điện thoại để chữ trong ảnh vẫn đọc được */
    .xp-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .xp-diagram img { min-width: 620px; }
    .xp-moments-head { flex-direction: column; }
    .xp-head-right { padding-right: 0; }
    .xp-head-right .xp-hw--moments { display: none; }
    .xp-cta .xp-panel { grid-template-columns: 1fr; text-align: center; padding: 0 20px; }
    .xp-cta-mascot { order: 2; justify-self: center; width: 240px; }
    .xp-cta-art { display: none; }
}
@media (max-width: 560px) {
    .xp-thumbs { grid-template-columns: repeat(2, 1fr); }
    .xp-tabs button { padding: 9px 26px; }
}


/* =====================================================================
   ===== TRANG SẢN PHẨM (products.html) =====
   Giữ nguyên thiết kế gốc của trang sản phẩm, chỉ đổi sang màu của website.
   Mọi style nằm trong .pd-main nên không ảnh hưởng các trang khác.
   ===================================================================== */
.pd-main {
    /* màu lấy theo bảng màu chung của website */
    --bg:        var(--bg-dark);                 /* #0a102b */
    --bg-2:      #0d1538;
    --card:      var(--bg-card);                 /* #101b42 */
    --card-2:    #16245a;
    --line:      rgba(0, 210, 255, 0.22);
    --cyan:      var(--cyan-primary);            /* #00d2ff */
    --cyan-2:    var(--cyan-hover);              /* #00b0d6 */
    --text:      #ffffff;
    --muted:     var(--text-muted);              /* #a0b2d8 */
    --radius-lg: 28px;
    --radius-md: 18px;

    font-family: "Be Vietnam Pro", 'Montserrat', system-ui, sans-serif;
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* kéo full bề ngang màn hình (trang nằm trong .container 1200px) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.pd-main img { display: block; max-width: 100%; }
.pd-main section { padding: 0; }

/* Khung ảnh: nếu chưa có ảnh sẽ hiện ô gạch đứt để biết chỗ đặt ảnh */
.pd-main .img-slot {
    position: relative;
    display: grid; place-items: center;
    border: 2px dashed rgba(0, 210, 255, .35);
    border-radius: 20px;
    color: var(--muted);
    font-size: 13px; text-align: center;
}
.pd-main .img-slot:has(img) { border: 0; }
.pd-main .img-slot:has(img) span { display: none; }
.pd-main .img-slot img { width: 100%; height: 100%; object-fit: contain; }

/* ============== PHẦN 1: TIÊU ĐỀ ============== */
.pd-main .pd-hero {
    text-align: center;
    padding: 64px 20px 40px;
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(0, 210, 255, .12), transparent 70%),
        var(--bg);
}
/* Tiêu đề: cùng kiểu chữ + hiệu ứng (hiện dần từ dưới lên, vệt sáng, chữ nổi 3D) như các trang khác */
.pd-main .pd-hero h1 {
    font-family: var(--font-title);
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800; line-height: 1.18;
    letter-spacing: 0.5px;
}
.pd-main .pd-hero .title-3d--cyan { font-size: 1em; margin-left: 0; }
.pd-main .pd-hero p { margin-top: 14px; color: var(--muted); font-size: 16px; }

/* ============== PHẦN 2: SẢN PHẨM + Ô MUA (CHUNG 1 KHUNG) ============== */
.pd-main .product { max-width: 1000px; margin: 0 auto; padding: 30px 20px 90px; }
.pd-main .buy-wrap { position: relative; padding-top: 22px; }
.pd-main .buy-badge {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    background: #fff; color: var(--bg);
    font-size: 13px; font-weight: 800; letter-spacing: .08em;
    padding: 10px 22px; border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    z-index: 2; white-space: nowrap;
}
.pd-main .buy-card {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
    background:
        radial-gradient(70% 60% at 100% 0%, rgba(0, 210, 255, .22), transparent 60%),
        radial-gradient(50% 60% at 20% 80%, rgba(0, 210, 255, .12), transparent 70%),
        linear-gradient(165deg, #1a2a5e 0%, #131f4d 55%, #101b42 100%);
    border: 1px solid rgba(0, 210, 255, .35);
    border-radius: 34px;
    padding: 50px 40px 40px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pd-main .buy-card .star {
    position: absolute; top: 34px; right: 32px;
    width: 40px; height: 40px;
    filter: drop-shadow(0 0 12px rgba(0, 210, 255, .8));
}
/* cột ảnh */
.pd-main .buy-media { display: flex; flex-direction: column; height: 100%; }
.pd-main .buy-media .brand { font-size: 38px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.pd-main .buy-media .tagline { color: var(--muted); font-size: 15px; margin-top: 6px; }
.pd-main .buy-media .img-slot { flex: 1; min-height: 340px; margin-top: 18px; }
/* cột thông tin */
.pd-main .buy-info { border-left: 1px solid rgba(0, 210, 255, .2); padding-left: 36px; }
.pd-main .buy-title { font-size: 22px; font-weight: 700; }
.pd-main .buy-price {
    font-size: clamp(40px, 6vw, 54px); font-weight: 800;
    margin: 18px 0 14px; line-height: 1;
}
.pd-main .buy-save { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.pd-main .save-pill {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 7px 14px; border-radius: 999px;
    font-size: 14px; font-weight: 600;
}
.pd-main .old-price { font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, .45); text-decoration: line-through; }
.pd-main .buy-list { list-style: none; display: grid; gap: 14px; margin-bottom: 30px; }
.pd-main .buy-list li { position: relative; padding-left: 32px; font-size: 16px; font-weight: 500; }
.pd-main .buy-list li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
    background: var(--cyan);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pd-main .buy-list b { color: var(--cyan); }
.pd-main .buy-btn {
    display: block; width: 100%;
    text-align: center; text-decoration: none;
    padding: 20px; border-radius: 999px; border: 0; cursor: pointer;
    font: 700 18px "Be Vietnam Pro", 'Montserrat', sans-serif; color: #02122e;
    background: linear-gradient(90deg, #4fe0ff, var(--cyan));
    box-shadow: 0 10px 28px rgba(0, 210, 255, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.pd-main .buy-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 210, 255, .6); }

/* ============== PHẦN 3: CHỌN HÀNH TRÌNH ============== */
.pd-main .journey {
    position: relative; overflow: hidden;
    padding: 90px 20px 110px;
    background:
        radial-gradient(50% 60% at 80% 100%, rgba(0, 176, 214, .22), transparent 70%),
        radial-gradient(40% 50% at 10% 0%, rgba(0, 210, 255, .10), transparent 70%),
        var(--bg-2);
}
.pd-main .journey-inner { max-width: 1080px; margin: 0 auto; position: relative; }
.pd-main .journey h2 {
    text-align: center;
    font-size: clamp(26px, 4vw, 40px); font-weight: 800;
    margin-bottom: 44px;
}
.pd-main .journey-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
    max-width: 880px; margin: 0 auto;
}
.pd-main .j-card {
    background: rgba(16, 27, 66, .85);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 30px 28px;
    backdrop-filter: blur(6px);
    transition: border-color .2s, transform .2s;
}
.pd-main .j-card:hover { border-color: var(--cyan); transform: translateY(-3px); }
/* khi đang chạy hiệu ứng hiện dần thì dùng transition của .reveal */
.pd-main .j-card.reveal {
    transition: opacity 0.9s cubic-bezier(0.22, 0.8, 0.24, 1) var(--d, 0s),
                transform 0.9s cubic-bezier(0.22, 0.8, 0.24, 1) var(--d, 0s),
                filter 0.9s ease var(--d, 0s),
                border-color .2s;
}
.pd-main .j-icon { font-size: 28px; margin-bottom: 10px; }
.pd-main .j-card h3 { font-size: 20px; font-weight: 800; text-transform: uppercase; }
.pd-main .j-quote { color: var(--cyan); font-weight: 600; font-style: italic; margin: 8px 0 12px; }
.pd-main .j-card p { color: var(--muted); font-size: 15px; }

/* Linh vật trang trí (ảnh tự thay) */
.pd-main .pd-mascot { position: absolute; width: 110px; height: 110px; }
.pd-main .pd-mascot.right { top: -30px; right: 2%; }
.pd-main .pd-mascot.left  { bottom: -60px; left: 0; }

/* ============== ĐIỆN THOẠI ============== */
@media (max-width: 860px) {
    .pd-main .buy-card { grid-template-columns: 1fr; gap: 24px; padding: 46px 24px 28px; }
    .pd-main .buy-info { border-left: 0; padding-left: 0; border-top: 1px solid rgba(0, 210, 255, .2); padding-top: 24px; }
    .pd-main .buy-media .img-slot { min-height: 260px; }
    .pd-main .journey-grid { grid-template-columns: 1fr; }
    .pd-main .pd-mascot { width: 80px; height: 80px; }
    .pd-main .pd-mascot.right { top: -50px; }
    .pd-main .pd-mascot.left { display: none; }
}
@media (max-width: 420px) {
    .pd-main .buy-card { padding: 42px 18px 24px; }
}

/* ===== Mô hình 3D WISIO trong ô mua (products.html) ===== */
.pd-main .wisio-3d {
    position: relative;
    flex: 1;
    min-height: 400px;
    margin-top: 14px;
    cursor: grab;
    touch-action: pan-y;          /* điện thoại: vuốt ngang để xoay, vuốt dọc vẫn cuộn trang */
    user-select: none;
    -webkit-user-select: none;
}
.pd-main .wisio-3d.is-dragging { cursor: grabbing; }
/* bệ sáng dưới chân robot */
.pd-main .wisio-3d::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6%;
    width: 62%;
    height: 14%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 210, 255, 0.45) 0%, rgba(0, 210, 255, 0.12) 45%, transparent 70%);
    filter: blur(2px);
    pointer-events: none;
}
.pd-main .wisio-3d canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.pd-main .wisio-3d-fallback { display: none; }
.pd-main .wisio-3d.no-webgl canvas { display: none; }
.pd-main .wisio-3d.no-webgl .wisio-3d-fallback {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pd-main .wisio-3d-hint {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 210, 255, 0.35);
    background: rgba(10, 16, 43, 0.7);
    color: #bff4ff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.pd-main .wisio-3d-hint { z-index: 1; }
.pd-main .wisio-3d-hint svg { width: 14px; height: 14px; fill: currentColor; }
.pd-main .wisio-3d.is-touched .wisio-3d-hint { opacity: 0; }
.pd-main .wisio-3d.no-webgl .wisio-3d-hint { display: none; }
@media (max-width: 860px) {
    .pd-main .wisio-3d { min-height: 320px; }
}

/* menu điện thoại: nền mục chọn bo góc theo ô */
@media (max-width: 900px) {
    .nav-links a::before { border-radius: 10px; }

    .nav-links a:hover {
        background-image: none;
        animation: none;
        -webkit-text-fill-color: currentColor;
        color: var(--text-light);
    }
    .nav-links a.active:hover {
        color: #33d6ff;
        -webkit-text-fill-color: #33d6ff;
    }
}