/* ============================================================
   home-v3.css — CSS cho home-version-3
   Tiền tố: hv3-
   Màu sắc chuẩn:
   - Page bg: #FAF5EE
   - Apollo Blue: #2576B9
   - Header CTA Gold: #FFD95C
   - Secondary Gold: #CBB666
   - Light Gold/Number: #EAE4D5
   - Text main: #252525
   - Text paragraph: #3F3F3F
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

/* overflow-x: clip (KHÔNG dùng hidden) — hidden biến html/body thành scroll
   container và làm chết position:sticky của section Hành trình.
   style-revamp.css đặt html{overflow-x:hidden}, dòng dưới ghi đè nó. */
html,
body {
    overflow-x: clip;
    overflow-y: visible;
}

body {
    margin: 0;
    padding-top: 80px;
    background-color: #FAF5EE;
    color: #252525;
    font-family: 'Nunito', sans-serif;
}

/* Header buttons styling */
.header-actions-new2025 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hv3-btn-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1.5px solid #2576B9;
    border-radius: 999px;
    background: transparent;
    color: #2576B9;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hv3-btn-login:hover {
    background: rgba(37, 118, 185, 0.08);
    color: #2576B9;
    text-decoration: none;
}

.hv3-btn-login img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.hv3-btn-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: #FFD95C;
    color: #252525;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hv3-btn-book:hover {
    background: #f5cb42;
    color: #252525;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Section 1: HERO
   ------------------------------------------------------------ */
/* Hero đổi slide theo cuộn, cùng cơ chế với section Hành trình: khối ngoài cao
   400vh (4 slide), khối trong dính lại đúng một màn hình. home-v3.js tính phần
   trăm đã cuộn qua rồi bật slide tương ứng. */
.hv3-hero {
    position: relative;
    width: 100%;
    /* 4 khung × ~1.35 màn hình. Bản 400vh chỉ cho mỗi khung 0.77 màn hình nên
       chưa kịp đọc hết câu đã sang khung khác. */
    height: 540vh;
    background-color: #1a1a1a;
}

.hv3-hero-sticky {
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    min-height: 600px;
    width: 100%;
    overflow: hidden;
}

.hv3-hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* KHÔNG đặt transition ở đây: home-v3.js ghi thẳng opacity/transform theo vị trí
   cuộn từng khung hình. Thêm transition vào là hiệu ứng chạy trễ hơn tay người
   dùng — đúng cái lỗi "độ trễ và lướt nhanh" của bản trước. */
.hv3-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    margin: 0;
}

.hv3-hero-slide img,
.hv3-hero-slide .hv3-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Video hero: poster là chính ảnh cũ nên khung không trắng lúc chờ tải.
   Nền tối sẵn để lúc video chưa có khung hình đầu vẫn không loé trắng. */
.hv3-hero-slide .hv3-hero-video {
    background: #0B2553;
}

.hv3-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.20) 40%, transparent 65%);
    pointer-events: none;
}

.hv3-hero-caption {
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: 50px;
    z-index: 2;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hv3-hero-eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #FFFFFF;
    opacity: 0.95;
}

.hv3-hero-title {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    /* Cả 4 slide phải gọn trên MỘT dòng. Tiêu đề dài nhất (slide 3) rộng
       1322px khi để 58px, nên cỡ chữ co theo bề ngang màn hình:
       58px khi còn đủ chỗ, nhỏ dần khi hẹp. Dưới 1024px thì cho xuống dòng. */
    white-space: nowrap;
    font-size: min(58px, calc(4.25vw - 4.4px));
    line-height: 1.1;
    margin: 0 0 10px 0;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.hv3-hero-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 31px;
    font-weight: 400;
    margin: 0;
    color: #FFFFFF;
    opacity: 0.95;
}

.hv3-hero-dots {
    position: absolute;
    /* Phải cao hơn z-index của slide: home-v3.js gán tới 11 cho khung đang hiện
       (1 + độ_hiện × 10) để khung mới luôn chồng lên khung cũ khi giao nhau. */
    z-index: 20;
    left: 50px;
    /* Bám theo chiều cao caption (home-v3.js đo và ghi vào --hv3-cap-h) vì mỗi
       slide có số dòng khác nhau — slide 1 ba dòng, các slide sau hai dòng. */
    bottom: calc(var(--hv3-cap-h, 190px) + 88px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hv3-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.hv3-hero-dot.is-active {
    width: 40px;
    height: 10px;
    border-radius: 5px;
    background: #FFFFFF;
}

/* ------------------------------------------------------------
   Section 2: HÀNH TRÌNH 5 BƯỚC
   ------------------------------------------------------------ */
.hv3-journey {
    position: relative;
    width: 100%;
    /* 5 bước × ~1.3 màn hình */
    height: 650vh;
    background-color: #FAF5EE;
}

/* Khung dính: mọi toạ độ dọc bên trong tính theo % chiều cao khung này,
   để giữ đúng nhịp của bản thiết kế (frame gốc 907px) trên mọi màn hình. */
.hv3-journey-sticky {
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    min-height: 680px;
    width: 100%;
    overflow: hidden;
}

.hv3-journey-title {
    position: absolute;
    /* Dịch LÊN 20px (yêu cầu 30/08). Dùng translateY thay vì trừ vào top:
       top tính theo % của khung dính cao ~5850px nên 20px chỉ là 0.34% —
       sửa bằng % sẽ sai số và lệch theo chiều cao màn hình. */
    transform: translateY(-20px);
    top: 13.9%;
    left: 0;
    right: 0;
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 58px;
    line-height: 1.15;
    color: #2576B9;
    text-align: center;
    margin: 0;
    padding: 0 20px;
}

/* Khung toạ độ của chữ + ảnh: chốt 1512px — đúng bề ngang màn hình MacBook
   Air 15" — rồi căn giữa. Chữ (left:100px) và ảnh (left:32%, width:60%) đều
   tính theo khung này, nên trên màn 27" 4K bố cục giữ đúng tỉ lệ bản thiết kế
   thay vì bị kéo dãn ra hai mép. Ảnh dùng object-fit:contain nên chốt bề ngang
   khung là kích thước ảnh hiển thị cũng bằng đúng trên Air 15.
   Nền #FAF5EE nằm ở .hv3-journey nên vẫn trải hết bề ngang màn hình. */
.hv3-journey-stage {
    position: absolute;
    inset: 0;
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 1512px;
    transform: translateX(-50%);
}

/* Như hero: JS ghi thẳng opacity/transform theo vị trí cuộn, không transition. */
.hv3-step {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}

/* ── Cột chữ: rộng 400px, cách mép 100px (đo từ 2.png / 3.png) ── */
.hv3-step-text {
    position: absolute;
    top: 36.7%;
    width: 400px;
    z-index: 2;
}

.hv3-step[data-side="left"] .hv3-step-text { left: 100px; }
.hv3-step[data-side="right"] .hv3-step-text { right: 100px; }

/* ── Ảnh nhân vật: bắt đầu dưới tiêu đề dính, tràn xuống đáy khung và bị cắt
   như thiết kế. Dùng contain + neo trên để ảnh cao/thấp khác nhau vẫn cân. ── */
.hv3-step-photo {
    position: absolute;
    top: 21%;
    height: 100%;
    width: 60%;
}

.hv3-step[data-side="left"] .hv3-step-photo { left: 32%; }
.hv3-step[data-side="right"] .hv3-step-photo { right: 32%; }

/* Bước 04: ảnh cao ngang chữ nên trông sát cột chữ bên phải. Hạ thêm 20%
   so với vị trí chung (21% → 25.2%) cho thoáng (yêu cầu 30/08). */
.hv3-step[data-step="4"] .hv3-step-photo {
    top: 25.2%;
}

.hv3-step-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

/* Ảnh bước 02 (After-07) khung cao hơn các bước khác nên nhìn bị trễ xuống —
   kéo lên 100px cho cân với khối chữ. Dịch ở thẻ <img> chứ KHÔNG phải
   .hv3-step-photo, vì transform của khung đó do vòng lặp scrub trong home-v3.js
   ghi đè mỗi khung hình. Chỉ áp dụng từ 1024px trở lên; dưới mức đó ảnh có bố
   cục riêng (cao 40%, căn đáy) nên dịch lên sẽ hụt. */
@media (min-width: 1024px) {
    .hv3-step[data-step="2"] .hv3-step-photo img {
        transform: translateY(-100px);
    }
}

/* Chữ số mờ: Brauer bị rộng hơn font gốc ~16% nên nén ngang lại cho khớp
   khối 147x180 đo được trên 2.png. */
.hv3-step-num {
    display: block;
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 218px;
    line-height: 0.78;
    color: #EAE4D5;
    user-select: none;
    transform: scaleX(0.84);
    transform-origin: left top;
    /* -8px thay vì -28px: đo bằng canvas TextMetrics thì đáy mực số và đỉnh mực
       chữ tên trước đây cách nhau đúng 0px (dính nhau). Nới thêm 20px. */
    margin: 0 0 -8px -6px;
}

.hv3-step-name {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    color: #2576B9;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    margin: 0;
}

.hv3-step-lead {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: #CBB666;
    margin: 20px 0 0 0;
}

.hv3-step-body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 28.5px;
    color: #3F3F3F;
    margin: 14px 0 0 0;
}

/* ── Dots: nằm thẳng hàng với mép trái cột chữ, đổi bên theo bước đang mở ── */
.hv3-journey-dots {
    position: absolute;
    top: 87.2%;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    z-index: 3;
}

/* Chấm tròn nằm NGOÀI .hv3-journey-stage nên chốt riêng theo cùng mốc 1512px,
   nếu không nó sẽ bám mép màn hình trong khi cột chữ đã lùi vào giữa.
   756px = 1512/2; cộng 100px cho khớp lề của .hv3-step-text. */
.hv3-journey-dots[data-side="left"] {
    left: max(100px, calc(50% - 756px + 100px));
    right: auto;
}

.hv3-journey-dots[data-side="right"] {
    right: max(100px, calc(50% - 756px + 100px));
    left: auto;
}

.hv3-journey-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #DCD6CC;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.hv3-journey-dot.is-active {
    width: 40px;
    background: #2576B9;
}

/* ------------------------------------------------------------
   Section 3: 10 SỰ THẬT (Theo hình 7.png)
   ------------------------------------------------------------ */
.hv3-facts {
    width: 100%;
    padding: 90px 0 100px 0;
    background-color: #FAF5EE;
}

.hv3-facts-container {
    max-width: 1620px;
    margin: 0 auto;
    padding: 0 50px;
}

.hv3-facts-title {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 52px;
    line-height: 1.15;
    color: #2576B9;
    text-align: center;
    margin: 0 0 54px 0;
}

.hv3-facts-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 17px;
}

.hv3-fact-card {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 34px 20px 28px 20px;
    min-height: 315px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hv3-fact-card:hover,
.hv3-fact-card:focus-within {
    transform: translateY(-8px);
    border-color: rgba(43, 108, 212, .28);
    box-shadow: 0 14px 30px rgba(37, 118, 185, .18);
}

/* Icon phóng nhẹ theo thẻ — chuyển động riêng để cảm giác có chiều sâu */
.hv3-fact-card .hv3-fact-icon {
    transition: transform .25s ease;
}

.hv3-fact-card:hover .hv3-fact-icon,
.hv3-fact-card:focus-within .hv3-fact-icon {
    transform: scale(1.12);
}

/* Chữ đậm màu lên cho dễ đọc khi đang trỏ vào */
.hv3-fact-card .hv3-fact-text {
    transition: color .25s ease;
}

.hv3-fact-card:hover .hv3-fact-text,
.hv3-fact-card:focus-within .hv3-fact-text {
    color: #16386F;
}

/* Máy cảm ứng không có trạng thái rê chuột: bỏ hết để khỏi "dính" hover
   sau khi chạm (iOS giữ trạng thái hover tới lần chạm kế tiếp). */
@media (hover: none) {
    .hv3-fact-card:hover {
        transform: none;
        border-color: rgba(0, 0, 0, .05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
    }
    .hv3-fact-card:hover .hv3-fact-icon { transform: none; }
    .hv3-fact-card:hover .hv3-fact-text { color: #3F3F3F; }
}

/* Tôn trọng thiết lập giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
    .hv3-fact-card,
    .hv3-fact-card .hv3-fact-icon,
    .hv3-fact-card .hv3-fact-text { transition: none; }
    .hv3-fact-card:hover { transform: none; }
    .hv3-fact-card:hover .hv3-fact-icon { transform: none; }
}

.hv3-fact-icon {
    width: auto;
    height: 96px;
    object-fit: contain;
    margin-bottom: 22px;
    flex-shrink: 0;
}

.hv3-fact-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.5;
    color: #3F3F3F;
    margin: 0;
}

/* ------------------------------------------------------------
   Section 4: VIDEO
   ------------------------------------------------------------ */
.hv3-video-section {
    width: 100%;
    padding: 80px 20px;
    background-color: #FAF5EE;
}

.hv3-video-container {
    max-width: 1520px;
    margin: 0 auto;
    text-align: center;
}

.hv3-video-title {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 52px;
    line-height: 1.15;
    color: #2576B9;
    margin: 0 0 16px 0;
}

/* Thiết kế để câu này gọn trên MỘT dòng (đo trên 8.png: rộng 1102px, cỡ 21px).
   Cỡ chữ co theo bề ngang để không rớt dòng; dưới 1024px thì cho xuống dòng. */
.hv3-video-sub {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    white-space: nowrap;
    font-size: min(21px, calc(1.85vw - 0.9px));
    line-height: 1.6;
    color: #3F3F3F;
    margin: 0 auto 40px auto;
}

.hv3-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 679;
    border-radius: 20px;
    overflow: hidden;
    background-color: transparent;
    cursor: pointer;
}

.hv3-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hv3-video-wrapper:hover .hv3-video-poster {
    transform: scale(1.02);
}

.hv3-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background-color 0.25s ease;
    z-index: 2;
}

.hv3-video-play-btn::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent #FFFFFF;
    margin-left: 5px;
}

.hv3-video-wrapper:hover .hv3-video-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(37, 118, 185, 0.85);
}

.hv3-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ------------------------------------------------------------
   Section 5: CTA CHUYÊN VIÊN
   ------------------------------------------------------------ */
.hv3-cta-section {
    width: 100%;
    padding: 100px 20px 100px 20px;
    background-color: #FAF5EE;
}

/* Tiêu đề nằm TRÊN, danh sách collapse nằm DƯỚI — xếp dọc, căn giữa.
   (Trước đây là flex ngang từ bố cục hai cột ảnh|chữ, nay không còn ảnh nên
   tiêu đề và danh sách bị đứng cạnh nhau.)
   Khoảng cách 72px đo từ file thiết kế: đáy chữ tiêu đề → đỉnh nút đầu tiên. */
.hv3-cta-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.hv3-cta-title {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 50px;
    line-height: 1.15;
    color: #2576B9;
    text-align: center;
    margin: 0 0 71px 0;   /* để khoảng cách CHỮ→nút = 72px như thiết kế */
}

/* Footer top border */
.footer-rewarm_new_form_link-new-footer-2025,
.footer-rewarm_new_form_link {
    border-top: 1px solid #B9C9DC;
}

/* ------------------------------------------------------------
   Responsive Breakpoints
   ------------------------------------------------------------ */

@media (max-width: 1439px) {
    .hv3-journey-title,
    .hv3-facts-title,
    .hv3-video-title,
    .hv3-cta-title {
        font-size: 44px;
    }
    .hv3-step-num {
        font-size: 200px;
    }
    .hv3-facts-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1023px) {
    /* Khối ngoài giữ nguyên đoạn cuộn cho 4 slide; khối dính phải lấp ĐẦY vùng
       dưới header, nếu để 70vh thì hở một dải nền đen phía dưới.
       dvh để trừ đúng phần thanh công cụ của trình duyệt di động. */
    .hv3-hero-sticky {
        height: calc(100vh - 80px);
        height: calc(100dvh - 80px);
        min-height: 480px;
    }
    .hv3-hero-caption {
        left: 24px;
        bottom: 36px;
        right: 24px;
    }
    .hv3-hero-dots {
        left: 24px;
        /* --hv3-cap-h do home-v3.js đo theo caption của slide đang mở */
        bottom: calc(var(--hv3-cap-h, 150px) + 54px);
    }
    .hv3-hero-title {
        white-space: normal;
        font-size: 34px;
    }
    .hv3-journey-title,
    .hv3-facts-title,
    .hv3-video-title,
    .hv3-cta-title {
        font-size: 36px;
    }
    .hv3-video-sub {
        white-space: normal;
        font-size: 17px;
    }
    /* Tablet/mobile: ảnh nằm trên, chữ nằm dưới, dots sát đáy khung dính */
    .hv3-journey-sticky {
        min-height: 560px;
    }
    .hv3-journey-title {
        /* Bản desktop dịch lên 20px (translateY) và có top 106px nên vẫn
           thoáng. Khổ hẹp top chỉ 18px, trừ 20px thành -2px → chữ trèo lên
           section hero phía trên. Bỏ transform và cho top đủ thoáng
           (yêu cầu 30/08). */
        transform: none;
        top: 40px;
        padding: 0 16px;
    }
    .hv3-step[data-side="right"] .hv3-step-photo,
    .hv3-step[data-side="left"] .hv3-step-photo {
        top: 13%;
        left: 4%;
        right: auto;
        width: 92%;
        height: 40%;
    }
    .hv3-step-photo img {
        object-position: bottom center;
    }
    .hv3-step[data-side="right"] .hv3-step-text,
    .hv3-step[data-side="left"] .hv3-step-text {
        top: 56%;
        left: 24px;
        right: 24px;
        width: auto;
    }
    .hv3-step-num {
        font-size: 120px;
        /* Đo được đáy mực số chồng lên đỉnh mực chữ tên ~3px ở mức -14px;
           nới lên +20px cho bằng khoảng cách bên desktop. */
        margin-bottom: 9px;
    }
    .hv3-journey-dots[data-side="left"],
    .hv3-journey-dots[data-side="right"] {
        top: auto;
        bottom: 26px;
        left: 24px;
        right: auto;
        width: auto;
    }
    .hv3-facts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Bố cục dọc giờ là mặc định ở mọi cỡ màn hình; chỉ thu khoảng cách lại */
    .hv3-cta-title {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .hv3-hero-sticky {
        min-height: 420px;
    }
    .hv3-hero-caption {
        left: 16px;
        right: 16px;
        bottom: 24px;
    }
    .hv3-hero-eyebrow {
        font-size: 16px;
    }
    .hv3-hero-title {
        font-size: 26px;
    }
    .hv3-hero-sub {
        font-size: 16px;
    }
    .hv3-hero-dots {
        left: 16px;
        bottom: calc(var(--hv3-cap-h, 140px) + 46px);
    }
    .hv3-journey-title,
    .hv3-facts-title,
    .hv3-video-title,
    .hv3-cta-title {
        font-size: 28px;
    }
    .hv3-step-num {
        font-size: 100px;
    }
    .hv3-step-name {
        font-size: 22px;
    }
    .hv3-step-lead {
        font-size: 17px;
    }
    .hv3-step-body {
        font-size: 15px;
    }
    /* Di động: khung vẫn giữ padding 50px của bản desktop → màn 390px chỉ
       còn 290px cho thẻ, chữ bó lại 167px nên câu nào cũng xuống 4-5 dòng.
       Thu lề xuống 16px để thẻ rộng thêm ~68px (yêu cầu 30/08). */
    .hv3-facts-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Di động: xếp dọc một cột — hai cột làm chữ bị bó hẹp, thẻ nào cũng
       xuống 4-5 dòng và cao thấp so le nhau. */
    .hv3-facts-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* Di động: mỗi thẻ nằm ngang — hình trái, chữ phải. Xếp dọc như bản
       desktop thì thẻ nào cũng cao gần bằng nửa màn hình, cuộn 10 thẻ rất mệt. */
    .hv3-fact-card {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        min-height: 0;
        padding: 16px 18px;
        text-align: left;
    }
    /* Cố định bề ngang cột icon để mép chữ của 10 thẻ thẳng hàng nhau —
       icon bắt tay rộng gần gấp đôi icon huy chương. */
    .hv3-fact-icon {
        width: 64px;
        height: 56px;
        object-fit: contain;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .hv3-fact-text {
        font-size: 15px;
        line-height: 1.45;
        text-align: left;
    }
    .hv3-video-wrapper {
        aspect-ratio: 16 / 9;
        min-height: 220px;
        border-radius: 12px;
    }
    .hv3-video-play-btn {
        width: 60px;
        height: 60px;
    }
    .hv3-video-play-btn::after {
        border-width: 10px 0 10px 16px;
        margin-left: 3px;
    }
}

/* ------------------------------------------------------------
   Header: bản desktop cần ~1100px mới đủ chỗ, nhưng shell gốc chỉ đổi sang
   header mobile ở 767px → khoảng 768–1023px bị tràn. Hạ ngưỡng xuống 1023px
   (header-footer-mobile.css cũng đã đổi media query đầu file cho khớp).
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    .header-fixed-navRevamap-New2025.desktop {
        display: none !important;
    }
    .header-fixed-navRevamap-New2025.mobile {
        display: block !important;
    }
}

/* ============================================================
   STORYTELLING — nội dung hiện dần theo mạch cuộn

   Ba lớp hiệu ứng:
   1. [data-tell]        : phần tử tĩnh, hiện khi cuộn tới (JS gắn .is-told)
   2. .hv3-hero-slide    : caption vào so le + ảnh zoom chậm theo nhịp slide
   3. .hv3-step          : 5 bước hành trình vào so le khi đổi bước
   Tất cả tắt sạch khi hệ điều hành bật "giảm chuyển động".
   ============================================================ */

/* Phần tử scrub: JS ghi thẳng opacity/transform theo vị trí cuộn — KHÔNG
   transition, nếu không lại lặp đúng lỗi trễ nhịp của bản cũ. */
[data-scrub] {
    opacity: 0;
    will-change: opacity, transform;
}

/* Hiện đủ rồi thì JS gỡ style nội tuyến và gắn class này — từ đây CSS lại làm
   chủ, hiệu ứng hover chạy bình thường. */
[data-scrub].is-shown {
    opacity: 1;
    /* KHÔNG đặt transform ở đây: rule này nằm sau .hv3-fact-card:hover trong
       file nên `transform: none` sẽ nuốt mất hiệu ứng nhấc thẻ. Style nội tuyến
       đã được JS xoá rồi nên không còn transform nào sót lại. */
}

[data-tell] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .62s cubic-bezier(.22, 1, .36, 1),
        transform .62s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--tell-i, 0) * 90ms);
    will-change: opacity, transform;
}

[data-tell].is-told {
    opacity: 1;
    transform: none;
}

/* Hiện xong thì bỏ will-change để không giữ layer thừa */
[data-tell].is-told.is-settled {
    will-change: auto;
    transition-delay: 0s;
}

/* Ảnh lớn vào bằng phóng nhẹ thay vì trôi lên — đỡ giật bố cục */
[data-tell="media"] {
    transform: scale(.965);
}

[data-tell="media"].is-told {
    transform: none;
}

/* ── Hero: chữ vào so le, ảnh zoom chậm suốt thời gian slide hiển thị ── */
/* Caption và ảnh cũng do JS ghi thẳng theo vị trí cuộn — không transition.
   Ba dòng chữ so le nhau bằng cách lệch điểm bắt đầu của dải hiện dần. */
.hv3-hero-caption > * {
    opacity: 0;
    will-change: opacity, transform;
}

.hv3-hero-slide img {
    transform: scale(1);
    will-change: transform;
}

/* ── Hành trình: từng phần tử vào so le, do JS ghi theo vị trí cuộn ── */
.hv3-step-text > *,
.hv3-step-photo {
    opacity: 0;
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    [data-scrub],
    [data-tell],
    [data-tell="media"] {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}

/* Các rule [data-tell].is-told ở trên đặt transform:none nên cùng độ đặc hiệu
   với .hv3-fact-card:hover / .hv3-cta-primary:hover và ghi đè mất hiệu ứng
   nhấc lên khi rê chuột. Nâng độ đặc hiệu để giữ lại. */
.hv3-fact-card[data-tell].is-told:hover,
.hv3-fact-card[data-tell].is-told:focus-within {
    transform: translateY(-8px);
}

/* Icon nằm TRONG thẻ nên không bị [data-tell] chạm tới, nhưng khai lại ở đây
   cho cùng chỗ với rule trên — ai đọc sau còn thấy đủ bộ hover. */
.hv3-fact-card[data-tell].is-told:hover .hv3-fact-icon,
.hv3-fact-card[data-tell].is-told:focus-within .hv3-fact-icon {
    transform: scale(1.12);
}

@media (hover: none) {
    .hv3-fact-card[data-tell].is-told:hover { transform: none; }
    .hv3-fact-card[data-tell].is-told:hover .hv3-fact-icon { transform: none; }
}

/* ============================================================
   MODAL ĐẶT LỊCH GẶP CHUYÊN GIA
   Form giữ nguyên contract của appjs.js (#name / #phone / #email /
   #ButtonSubmitLead). Kiểu dáng theo hệ màu của trang: nền kem, ô bo tròn,
   nút xanh Apollo — không kéo theo cta-bottom-2026.css của bản cũ.
   ============================================================ */
.hv3-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 26, 40, .55);
    opacity: 0;
    transition: opacity .28s ease;
    overflow-y: auto;
}

.hv3-modal-overlay[hidden] {
    display: none;
}

.hv3-modal-overlay.is-open {
    opacity: 1;
}

.hv3-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 44px 48px 40px;
    background: #FAF5EE;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 26, 40, .28);
    transform: translateY(18px) scale(.98);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.hv3-modal-overlay.is-open .hv3-modal {
    transform: none;
}

.hv3-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6B7480;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.hv3-modal-close:hover {
    background: rgba(37, 118, 185, .1);
    color: #2576B9;
}

.hv3-modal-eyebrow {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #CBB666;
    margin-bottom: 10px;
}

.hv3-modal-title {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 34px;
    line-height: 1.15;
    color: #2576B9;
    margin: 0 0 12px 0;
}

.hv3-modal-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #3F3F3F;
    margin: 0 0 26px 0;
}

.hv3-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hv3-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hv3-label {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #252525;
}

.hv3-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: #252525;
    background: #FFFFFF;
    border: 1px solid #E7E0D6;
    border-radius: 999px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.hv3-input::placeholder {
    color: #9AA3AF;
}

.hv3-input:focus {
    border-color: #2576B9;
    box-shadow: 0 0 0 3px rgba(37, 118, 185, .14);
}

/* Thông báo lỗi do appjs.js chèn vào .parent() của ô nhập */
.hv3-field small {
    display: block;
    margin-top: -2px;
    padding-left: 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    color: #E4002B;
}

.hv3-modal-submit {
    width: 100%;
    min-height: 60px;
    margin-top: 8px;
    padding: 16px 28px;
    border: none;
    border-radius: 999px;
    background: #2576B9;
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(37, 118, 185, .25);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hv3-modal-submit:hover {
    background: #1d6199;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 118, 185, .35);
}

/* appjs.js gắn class này trong lúc đang gửi */
.hv3-modal-submit.disable-click {
    pointer-events: none;
    opacity: .65;
}

.hv3-modal-privacy {
    font-family: 'Nunito', sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: #6B7480;
    margin: 2px 0 0;
}

/* Khoá cuộn nền khi modal mở */
body.hv3-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    /* Popup chiếm trọn màn hình: form dài, để dạng thẻ nổi thì vừa hẹp vừa
       phải cuộn hai tầng (cuộn trong thẻ và cuộn nền). */
    .hv3-modal-overlay {
        padding: 0;
        align-items: stretch;
    }
    .hv3-modal {
        max-width: none;
        min-height: 100%;
        margin: 0;
        padding: 32px 20px 28px;
        border-radius: 0;
        box-shadow: none;
    }
    .hv3-modal-title {
        font-size: 26px;
    }
    /* Chừa chỗ cho nút đóng ở góc phải */
    .hv3-modal-eyebrow,
    .hv3-modal-title {
        padding-right: 36px;
    }
    .hv3-modal-sub {
        font-size: 15px;
        margin-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hv3-modal-overlay,
    .hv3-modal {
        transition: none;
    }
}

/* Ô email ẩn: chỉ tồn tại để appjs.js đọc, không chiếm chỗ trong form */
.hv3-field-hidden {
    display: none;
}

/* Nhảy tới neo (#hv3-cta từ nút "Đặt hẹn Apollo" trên header): chừa đúng
   chiều cao header cố định để đầu section không nằm khuất phía sau. */
html {
    scroll-behavior: smooth;
}

[id^="hv3-"] {
    scroll-margin-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
   CỔNG MAY ĐO
   Lớp phủ toàn màn hình hiện trước trang index. Trang index vẫn nằm nguyên
   trong DOM phía dưới — chỉ bị khoá cuộn và ẩn khỏi trình đọc màn hình —
   để công cụ tìm kiếm vẫn đọc được nội dung.
   ============================================================ */
#hv3-gate {
    position: fixed;
    top: 80px;           /* chừa chỗ cho header thật của trang */
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #FAF5EE;
}

/* Khi cổng đang mở: khoá cuộn nền và giấu trang index khỏi trình đọc màn hình.
   Dùng visibility (không phải display:none) để bố cục bên dưới vẫn được tính,
   gỡ cổng ra là hiện ngay, không phải dựng lại. */
html.hv3-gated {
    overflow: hidden;
}

html.hv3-gated main.main,
html.hv3-gated .footer-rewarm_new_form_link-new-footer-2025,
html.hv3-gated .footer-rewarm_new_form_link,
html.hv3-gated .hv3-modal-overlay {
    visibility: hidden;
}

/* KHÔNG ẩn .maydo-modal-backdrop: nó thuộc về may đo, và nút "Đặt lịch" ở
   khối kết quả (nằm TRONG cổng) mở chính modal này. z-index của nó là 99999
   nên vẫn nổi trên cổng (900). */

/* Header giữ nguyên như trang index khi đang ở cổng, chỉ cần nâng lớp lên
   trên cổng (z-index gốc của header là 12) để menu xổ xuống không bị cắt. */
html.hv3-gated .header-fixed-navRevamap-New2025 {
    z-index: 950;
}

/* Cổng đã gỡ thì không còn gì của nó trên trang */
html:not(.hv3-gated) #hv3-gate {
    display: none;
}

/* Thanh trên cùng của cổng: chỉ logo, không menu — để phụ huynh tập trung
   vào may đo, không có lối tắt gây rối. */
/* May đo lấp đầy cổng và dùng đúng khổ container của trang index.
   Bản gốc để .maydo-quiz-inner rộng 1280px và chừa padding-top 104px (vì ở
   new-home-3 nó nằm dưới header trong luồng trang); ở đây cổng đã bắt đầu ngay
   dưới header rồi nên phải bỏ khoảng đó đi. */
#hv3-gate .maydo-quiz {
    background: #FAF5EE;
    min-height: 100%;
    padding-top: clamp(20px, 2.5vw, 40px);
    padding-bottom: clamp(20px, 2.5vw, 40px);
    justify-content: center;
}

/* Màn chào: nền TRẮNG theo bản thiết kế section_intro_maydo (11/09).
   Cần !important vì page-background-2026.css:45 đặt
   `.maydo-quiz { background: var(--page-bg) !important }` — chỉ !important mới
   đè được !important, độ đặc hiệu cao hơn cũng vô ích.
   Chỉ áp cho data-state="idle"; các màn hỏi vẫn nền kem như cũ. */
#hv3-gate .maydo-quiz[data-state="idle"],
.maydo-quiz[data-state="idle"] {
    background: #FFFFFF !important;
}

#hv3-gate .maydo-quiz-inner,
#hv3-gate .maydo-quiz[data-step="0"] .maydo-quiz-inner {
    width: 100%;
    max-width: 1520px;   /* bằng khổ nội dung của trang index */
    margin: 0 auto;
    padding: 0;
}

/* Màn chào và các panel "full" của bản gốc tự đặt min-height 100vh-80 để chiếm
   trọn màn hình; trong cổng thì chiều cao đã do #hv3-gate quyết định. */
#hv3-gate .mq-intro-panel,
#hv3-gate .mq-intro-panel--full {
    min-height: 0;
}

@media (max-width: 767px) {
}

/* Nút phụ "Xem thêm thông tin" ở khối kết quả may đo (thêm bởi may-do-quiz.js,
   xem chú thích "[SỬA CHO home-version-3 — 2/3]" trong file đó) */
.rq-cta-btn--ghost {
    background: transparent !important;
    color: #2576B9 !important;
    border: 1px solid #C9C2B7 !important;
    box-shadow: none !important;
    margin-top: 12px;
}

.rq-cta-btn--ghost:hover {
    border-color: #2576B9 !important;
    background: rgba(37, 118, 185, .06) !important;
}

/* ============================================================
   NÚT "MAY ĐO LỘ TRÌNH CHO CON" — góc phải dưới màn hình
   Bấm vào: xoá bài quiz cũ rồi nạp lại trang ở chế độ ?maydo=1 để phụ huynh
   làm lại từ đầu (xem HV3.restartQuiz trong index.html).
   ============================================================ */
.hv3-remeasure {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 26px;
    border: none;
    border-radius: 999px;
    background: #2576B9;
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37, 118, 185, .32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s,
                background-color .2s ease, box-shadow .2s ease;
}

/* Chỉ hiện sau khi cuộn qua hero (home-v3.js gắn class này) — tiêu đề hero
   chạy dài hết bề ngang màn hình nên để nút ở đó sẽ đè lên chữ. */
.hv3-remeasure.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s,
                background-color .2s ease, box-shadow .2s ease;
}

.hv3-remeasure.is-visible:hover {
    background: #1d6199;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 118, 185, .42);
}

.hv3-remeasure-icon {
    flex-shrink: 0;
}

/* Đang ở trong cổng thì không cần nút này — may đo đã ở ngay trước mặt */
html.hv3-gated .hv3-remeasure {
    display: none;
}

@media (max-width: 767px) {
    /* Ẩn hẳn trên di động: nút nổi chiếm chỗ ở đáy màn hình vốn đã chật, và
       che mất nội dung khi cuộn. */
    .hv3-remeasure,
    .hv3-remeasure.is-visible {
        display: none;
    }

    /* Footer di động: chỉ giữ logo, bỏ menu liên kết.
       header-footer-mobile.css có rule .reworkfooter2025.mobile .footer-...href
       (hai class) nên phải bám đủ mới ghi đè được. */
    .reworkfooter2025.mobile .footer-rewarm_new_form_link_content_href,
    .footer-rewarm_new_form_link.mobile .footer-rewarm_new_form_link_content_href {
        display: none;
    }
}

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

/* ============================================================
   HEADLINE TRÊN DI ĐỘNG — không để rớt một chữ xuống dòng cuối

   Mặc định trình duyệt ngắt dòng theo kiểu "nhồi đầy dòng trên", nên câu nào
   cũng còn đúng một từ rơi xuống dòng cuối: "…từ đây!" / "…an tâm" / "…bay xa…"
   / "…với con!". text-wrap: balance chia đều chữ cho các dòng nên hết cảnh đó.
   Chỉ bật dưới 1024px — từ 1024px trở lên các tiêu đề này vốn đã gọn một dòng.
   ============================================================ */
@media (max-width: 1023px) {
    .hv3-hero-eyebrow,
    .hv3-hero-title,
    .hv3-hero-sub,
    .hv3-journey-title,
    .hv3-step-name,
    .hv3-step-lead,
    .hv3-facts-title,
    .hv3-fact-text,
    .hv3-video-title,
    .hv3-video-sub,
    .hv3-cta-title,
    .hv3-modal-title,
    .hv3-modal-sub {
        text-wrap: balance;
    }

    /* Đoạn văn dài thì balance không hợp (trình duyệt chỉ cân được vài dòng),
       dùng pretty để tránh dòng cuối trơ trọi một từ. */
    .hv3-step-body,
    .hv3-modal-privacy {
        text-wrap: pretty;
    }
}

/* ============================================================
   POPUP TRÊN DI ĐỘNG — chiếm trọn màn hình
   ============================================================ */

/* Video: mở lớp phủ toàn màn hình (home-v3.js dựng khi bấm ở màn <768px).
   iframe lấp đầy khung nên video khung dọc sau này cũng vừa. */
.hv3-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
}

.hv3-video-overlay.is-open {
    opacity: 1;
}

.hv3-video-overlay iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.hv3-video-overlay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #FFFFFF;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 767px) {
    /* Modal đặt lịch của may đo: bỏ khung thẻ nổi, trải kín màn hình */
    .maydo-modal-backdrop {
        padding: 0;
    }

    /* Bản gốc đặt .maydo-modal-dialog.rq-paper { max-width: 1160px; max-height: 90vh }
       — hai class nên phải bám đủ cả hai mới ghi đè được. */
    .maydo-modal-dialog,
    .maydo-modal-dialog.rq-paper {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    /* Xếp dọc và cho FORM lên trước: đây là việc phụ huynh cần làm, ba ghi chú
       giải thích để sau. Bản gốc chia 2 cột nên khi dồn xuống một cột thì form
       bị đẩy xuống dưới màn hình, phải cuộn mới thấy. */
    .maydo-modal-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .maydo-modal-right {
        order: 1;
    }

    .maydo-modal-left {
        order: 2;
    }

    /* Chừa chỗ cho nút đóng ở góc phải, nếu không chữ chạy xuống dưới nút */
    .maydo-modal-title,
    .maydo-modal-left .maydo-left-title {
        padding-right: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hv3-video-overlay {
        transition: none;
    }
}

/* "Bỏ qua" trong từng bước may đo: trình bày dạng link, đặt tách khỏi cặp
   "Quay lại / Tiếp tục" để không bị nhìn nhầm là nút thao tác chính. */
.mq2-actions .mq-skip {
    margin-left: auto;
    padding: 0 4px;
    border: none;
    background: none;
    color: #6B7480;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .18s ease;
}

.mq2-actions .mq-skip:hover {
    color: #2576B9;
}

@media (max-width: 767px) {
    .mq2-actions .mq-skip {
        font-size: 14px;
    }
}

/* ============================================================
   MAY ĐO TRÊN DI ĐỘNG — cho mỗi bước vừa một màn hình

   Bản gốc để đáp án 1 cột (10 ô × 50px = 642px) cộng ảnh 230px, tổng thẻ 1214px
   trong khi khung chỉ 764px — phụ huynh phải cuộn hai tầng mới thấy nút Tiếp tục.
   Nén ảnh, xếp đáp án 2 cột và thu gọn chữ để mỗi bước gọn trong một màn.
   ============================================================ */
@media (max-width: 767px) {
    /* Nén ẢNH của các BƯỚC QUIZ xuống 100px cho vừa một màn.
       Loại trừ ảnh/video ở MÀN HÌNH CHÀO (.mq2-card--hello): nén 100px là nó
       bẹp còn 326x100 và chữ bên dưới bị đè.

       Trước đây loại trừ bằng :not(.mq2-video) — chỉ đúng khi màn chào dùng
       thẻ <video>. Ngày 30/08 đổi lại thành <img> nên phải loại trừ theo THẺ
       CHA .mq2-card--hello, cách này đúng cho cả ảnh lẫn video. */
    #hv3-gate .mq2-photo:not(.mq2-video) {
        max-height: 100px;
        object-fit: contain;
    }

    #hv3-gate .mq2-card--hello .mq2-photo {
        max-height: none;
    }

    /* Dòng chữ nhỏ phía trên tiêu đề lặp lại ý của chính tiêu đề — trên di động
       nó ngốn 2-3 dòng mà không thêm thông tin gì, ẩn đi để đổi lấy chỗ. */
    #hv3-gate .mq2-eyebrow {
        display: none;
    }

    #hv3-gate .mq2-card-right {
        flex: 0 0 auto;
    }

    /* Bước nào có danh sách đáp án thì bỏ ảnh minh hoạ: ảnh chỉ để trang trí,
       trong khi 9-10 ô đáp án cộng ảnh thì không tài nào gọn một màn hình.
       Bước nhập tên/tuổi (không có đáp án) vẫn giữ ảnh. */
    #hv3-gate .mq2-card:has(.mq2-opts) .mq2-card-right {
        display: none;
    }

    /* Đáp án 2 cột — quan trọng nhất, cắt được hơn 200px */
    #hv3-gate .mq2-opts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
        grid-auto-flow: row !important;
        gap: 7px !important;
    }

    #hv3-gate .mq2-opt {
        min-height: 0;
        padding: 8px 10px;
        font-size: 13px;
        line-height: 1.28;
        text-align: left;
    }

    #hv3-gate .mq2-title {
        font-size: 19px;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    #hv3-gate .mq2-desc {
        font-size: 13.5px;
        line-height: 1.4;
        margin-bottom: 4px;
    }

    #hv3-gate .mq2-hint {
        font-size: 12.5px;
        margin-bottom: 6px;
    }

    #hv3-gate .mq2-card {
        padding: 16px;
    }

    #hv3-gate .mq2-actions {
        margin-top: 12px;
    }

    /* Trang kết quả: các thẻ xếp dọc thay vì nằm ngang cuộn ngang */
    #hv3-gate .rq-cards,
    #hv3-gate .rq-grid,
    #hv3-gate .rq-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #hv3-gate .rq-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
}

/* ============================================================
   TIẾN TRÌNH CÁC BƯỚC MAY ĐO — chỉ con số "n/N"
   (may-do-quiz.js vẽ, xem chú thích "[SỬA CHO home-version-3 — 5/5]")
   ============================================================ */
.mq2-progress {
    display: block;
    margin-bottom: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #2576B9;
}

@media (max-width: 767px) {
    /* Neo vào góc phải trên của thẻ: mỗi bước chỉ vừa đúng một màn hình, thêm
       một dòng nữa là tràn — để trong góc thì không tốn chiều cao nào. */
    .mq2-progress {
        position: absolute;
        top: 14px;
        right: 16px;
        margin: 0;
        font-size: 13px;
        opacity: .75;
    }
}
/* ============================================================
   DANH SÁCH COLLAPSE Ở SECTION CTA
   5 hàng pill căn giữa. Mục 1 (đặt lịch) nền xanh đặc, mục 5 (Zalo) viền —
   cả hai không có dấu +. Mục 2·3·4 mở panel, mỗi lúc chỉ một mục.
   ============================================================ */
.hv3-acc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.hv3-acc-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 14px 52px;
    border: 1px solid #C9C2B7;
    border-radius: 999px;
    background: transparent;
    color: #252525;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

/* Màu focus: style-revamp.css (kế thừa từ trang cũ) đặt hồng
   rgba(242,126,127,.6) !important cho input/textarea/select/button:focus — lặp 8
   lần trong file đó. Không sửa file kế thừa, ghi đè ở đây vì home-v3.css nạp
   sau cùng. Đổi sang xám trung tính để không chọi màu thương hiệu. */
input:focus,
textarea:focus,
select:focus,
button:focus {
    border-color: rgba(120, 120, 120, .55) !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 1px rgba(120, 120, 120, .55) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 1px rgba(120, 120, 120, .55) !important;
}

/* Hàng accordion: giữ nguyên viền/nền xanh của trạng thái hover và mở, không để
   viền xám của rule focus ở trên đè lên. Bấm chuột xong thẻ vẫn giữ :focus nên
   nếu không chặn thì hàng bị viền xám suốt. */
.hv3-acc-row:focus,
.hv3-acc-row:focus-visible {
    border-color: #2576B9 !important;
    box-shadow: none !important;
    outline: 0;
}

.hv3-acc-row--primary:focus,
.hv3-acc-row--primary:focus-visible {
    border-color: #1d6199 !important;
}

/* Bàn phím: cần thấy rõ đang ở đâu, dùng vòng xám thay vì hồng. */
.hv3-acc-row:focus-visible {
    box-shadow: 0 0 0 3px rgba(120, 120, 120, .35) !important;
}

.hv3-acc-row:hover {
    border-color: #2576B9;
    color: #2576B9;
    background: rgba(37, 118, 185, .05);
}

/* Mục 1 — đặt lịch */
.hv3-acc-row--primary {
    border-color: #2576B9;
    background: #2576B9;
    color: #FFFFFF;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(37, 118, 185, .22);
}

.hv3-acc-row--primary:hover {
    background: #1d6199;
    border-color: #1d6199;
    color: #FFFFFF;
}

/* Dấu + ở góc phải, mở ra thì gạch dọc biến mất còn dấu − */
.hv3-acc-icon {
    position: absolute;
    right: 24px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.hv3-acc-icon::before,
.hv3-acc-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    border-radius: 1px;
}

.hv3-acc-icon::before {
    width: 14px;
    height: 1.5px;
    margin: -0.75px 0 0 -7px;
}

.hv3-acc-icon::after {
    width: 1.5px;
    height: 14px;
    margin: -7px 0 0 -0.75px;
    transition: opacity .28s cubic-bezier(.22, 1, .36, 1),
                transform .28s cubic-bezier(.22, 1, .36, 1);
}

.hv3-acc-head[aria-expanded="true"] {
    border-color: #2576B9;
    color: #2576B9;
}

/* Mở: giấu gạch dọc → chỉ còn gạch ngang, thành dấu "−" (không xoay) */
.hv3-acc-head[aria-expanded="true"] .hv3-acc-icon::after {
    opacity: 0;
    transform: scaleY(0);
}

/* Panel: mở/đóng bằng chiều cao động, JS ghi --hv3-acc-h */
/* Panel phải rộng bằng cả màn hình NGAY TẠI ĐÂY, không phải ở lớp con:
   overflow:hidden (cần cho hiệu ứng mở/đóng) sẽ CẮT mọi thứ tràn ra ngoài khung
   panel. Trước đây panel chỉ rộng 620px nên nội dung full-bleed bên trong bị xén
   — và getBoundingClientRect vẫn báo 1617px vì nó đo hộp bố cục, không tính
   phần bị cắt. Đẩy chính panel ra 100vw thì hết. */
.hv3-acc-panel {
    overflow: hidden;
    height: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    transition: height .38s cubic-bezier(.22, 1, .36, 1);
}

.hv3-acc-panel[hidden] {
    display: block;   /* ghi đè mặc định để còn chuyển động; JS giữ height 0 */
    height: 0;
}

.hv3-acc-panel.is-open {
    height: var(--hv3-acc-h, auto);
}

/* Nội dung panel tràn hết bề ngang màn hình, không bị bó theo 620px của hàng
   pill. Thoát khỏi mọi lớp bọc bằng mẹo full-bleed: đẩy sang trái đúng nửa
   phần chênh giữa khung cha và khung nhìn. */
.hv3-acc-panel-inner {
    width: 100%;
    padding: 30px 0 10px;
}

/* Nội dung chiếm trọn bề ngang màn hình. Ba section mượn về đều có khung trong
   khoá cứng (`allcontent-center-location` 1440px, gallery cơ sở vật chất, khung
   tiêu đề 860px) — phải gỡ từng cái, chỉ nới lớp ngoài là chưa đủ. */
.hv3-acc-panel-inner > section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.hv3-acc-panel .facilities-2026-inner,
.hv3-acc-panel .allcontent-center-location-apollo2025,
.hv3-acc-panel .section-heading,
.hv3-acc-panel .teacher-team-stage {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Chừa 24px hai bên để chữ và nút không dính sát mép màn hình */
.hv3-acc-panel .facilities-2026-inner,
.hv3-acc-panel .allcontent-center-location-apollo2025 {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Bản gốc dùng justify-content: space-between trong khung khoá 1440px. Bỏ khoá
   để tràn màn hình thì hai khối bị đẩy về hai mép, cách nhau hơn 400px. Gom lại
   giữa, giữ nguyên khoảng cách 56px của bản gốc. */
.hv3-acc-panel .allcontent-center-location-apollo2025 {
    justify-content: center;
}

/* Ba section mượn về nằm trong panel: bỏ khoảng đệm dọc vốn dành cho section
   đứng riêng, và bỏ nền riêng để ăn theo nền kem của trang. */
.hv3-acc-panel-inner > section {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    min-height: 0;
}

@media (max-width: 1023px) {
    .hv3-acc {
        max-width: 560px;
    }
}

@media (max-width: 767px) {
    .hv3-acc-row {
        min-height: 52px;
        padding: 12px 44px;
        font-size: 15px;
    }
    .hv3-acc-icon {
        right: 18px;
    }
    .hv3-acc-panel-inner {
        padding: 20px 0 4px;
    }
    .hv3-acc-panel .facilities-2026-inner,
    .hv3-acc-panel .allcontent-center-location-apollo2025 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hv3-acc-panel,
    .hv3-acc-icon {
        transition: none;
    }
}

/* ── Panel "Chat với tư vấn viên": ảnh chuyên viên + lời chào + nút Zalo ── */
.hv3-chat-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.hv3-chat-photo {
    flex-shrink: 0;
    width: 300px;
    margin: 0;
}

.hv3-chat-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.hv3-chat-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: 520px;
}

.hv3-chat-bubble {
    margin: 0;
    padding: 18px 30px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #252525;
}

.hv3-chat-zalo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 40px;
    border-radius: 999px;
    background: #2576B9;
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 118, 185, .25);
    transition: background-color .2s ease, transform .2s ease;
}

.hv3-chat-zalo:hover {
    background: #1d6199;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .hv3-chat-panel {
        flex-direction: column;
        gap: 22px;
    }
    .hv3-chat-photo {
        width: 200px;
    }
    .hv3-chat-body {
        align-items: center;
        text-align: center;
        gap: 18px;
    }
    .hv3-chat-bubble {
        font-size: 15px;
        padding: 14px 22px;
    }
    .hv3-chat-zalo {
        width: 100%;
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hv3-chat-zalo {
        transition: none;
    }
}

/* ── Đội ngũ giáo viên: tạm tắt phần rê chuột ──
   Chưa có thông tin chi tiết cho 5 giáo viên nên bỏ thẻ pop-up và mọi tín hiệu
   "bấm được". Đổi lại, tên hiện SẴN cả 5 (bản gốc chỉ hiện khi rê chuột).
   Khi có nội dung: gỡ khối này + nạp lại teachers-2026.js + đổi <span> thành
   <button> kèm data-teacher trong index.html. */
.teachers-section .teacher-team-card {
    display: none !important;
}

/* ── Nhãn giáo viên trên ảnh + thẻ thông tin khi rê chuột ─────────────────
   Ảnh mới hinhgiaovien.png (30/08). Vị trí đo bằng cách dò vùng mặt trên
   chính ảnh: 17.4% · 35.9% · 50.6% · 65.5% · 83.7% (trái → phải).
   ────────────────────────────────────────────────────────────────────────── */
.teachers-section .teacher-hotspot {
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    transform: translate(-50%, -50%);
    /* Nhãn là chấm "+" (04/09): kích thước cố định 48px, phần hình tròn do
       ::before của teachers-2026.css vẽ nên hotspot để trong suốt. */
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Đặt TRÊN VAI (yêu cầu 30/08): đo vị trí cằm từng người rồi cộng 4%.
   Trước đây nhãn nằm ngay trên mặt, che mất khuôn mặt giáo viên. */
.teachers-section .teacher-hotspot--one { left: 17.3%; top: 47.5%; }
.teachers-section .teacher-hotspot--two { left: 35.8%; top: 63.5%; }
.teachers-section .teacher-hotspot--three { left: 50.5%; top: 56.3%; }
.teachers-section .teacher-hotspot--four { left: 65.5%; top: 63.5%; }
.teachers-section .teacher-hotspot--five { left: 83.6%; top: 46.2%; }

/* Tên hiện thường trực, nền mờ để đọc được trên mọi nền ảnh */
/* Tên màu TRẮNG (yêu cầu 30/08). Bỏ nền viên thuốc, thay bằng đổ bóng chữ
   để vẫn đọc được trên áo xanh mà không che ảnh. */
.teachers-section .teacher-name {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(11px, 0.95vw, 15px);
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(11, 37, 83, .85), 0 0 2px rgba(11, 37, 83, .7);
    padding: 0;
    opacity: 1;
    transition: opacity .2s ease;
}

/* Rê chuột: ẩn tên đi, nhường chỗ cho thẻ chi tiết (thẻ đã có sẵn tên) */
.teachers-section .teacher-hotspot:hover .teacher-name,
.teachers-section .teacher-hotspot:focus-visible .teacher-name {
    opacity: 0;
}

/* Thẻ chi tiết — ẩn, chỉ hiện khi rê chuột hoặc focus bàn phím */
.teachers-section .teacher-card {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    width: 290px;
    max-width: 78vw;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(11, 37, 83, .18);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
    z-index: 6;
}

.teachers-section .teacher-hotspot:hover .teacher-card,
.teachers-section .teacher-hotspot:focus-visible .teacher-card {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Hai nhãn ngoài cùng: kéo thẻ vào trong để không tràn khỏi ảnh */
.teachers-section .teacher-hotspot--one .teacher-card { left: 0; transform: none; }
.teachers-section .teacher-hotspot--five .teacher-card { left: auto; right: 0; transform: none; }

/* Thẻ hover HIỆN tên thầy/cô ở trên cùng, in đậm (Eric đổi ý 30/08 —
   trước đó ẩn đi vì đã có tên trên ảnh). */
.teachers-section .teacher-card-name {
    display: block;
}

/* Chữ trong thẻ dùng định dạng thường, KHÔNG in đậm (yêu cầu 30/08) */
.teachers-section .teacher-card-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #6E7683;
    margin-bottom: 4px;
}

.teachers-section .teacher-card-label {
    font-family: 'Nunito', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #3F3F3F;
}

.teachers-section .teacher-card-item {
    position: relative;
    padding-left: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #3F3F3F;
}

.teachers-section .teacher-card-item::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #C08A22;
}

/* Dòng tên giáo viên: chỉ dùng trên di động, thay cho 5 nhãn đè nhau trên ảnh */
.hv3-teacher-names {
    display: none;
}

@media (max-width: 767px) {
    .teachers-section .teacher-hotspot {
        display: none;
    }

    .hv3-teacher-names {
        display: block;
        margin: 14px 16px 0;
        font-family: 'Nunito', sans-serif;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 600;
        color: #3F3F3F;
        text-align: center;
        text-wrap: balance;
    }
}

/* Ảnh cơ sở vật chất to hơn 50% trên desktop.
   Ba ảnh xếp ngang nên KHÔNG nới được bề rộng (nới là tràn màn hình) — tăng
   chiều cao: tỉ lệ 16/10 → 16/15, cao 312px → 468px, diện tích +50%. */
@media (min-width: 1024px) {
    /* !important là bắt buộc: hv3-sections.css trích từ section-rhythm-2026.css
       nên mang theo `aspect-ratio: 16 / 10 !important` của bản gốc. */
    .hv3-acc-panel .facilities-2026-card {
        aspect-ratio: 16 / 15 !important;
    }
}


/* ── Cổng may đo trên màn hình thấp (laptop Windows 15.4", ~640px khả dụng) ──
   Cặp với breakpoint (min-width:901px) and (max-height:800px) ở cuối
   may-do-quiz.css. Đặt ở đây vì "#hv3-gate .maydo-quiz" phía trên cùng độ đặc
   hiệu, mà home-v3.css nạp sau may-do-quiz.css nên file này mới thắng. */
@media (min-width: 901px) and (max-height: 800px) {
    #hv3-gate .maydo-quiz {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/* ── Section "Hành trình" trên màn hình thấp ────────────────────────────────
   .hv3-journey-sticky đặt min-height: 680px để giữ nhịp bản thiết kế. Trên
   laptop 15.4" (1366x768, trừ toolbar còn ~640px) vùng nhìn thấy chỉ cao
   640-80=560px, nên khung 680px thò xuống dưới màn hình: đo được chấm tròn nằm
   ở y=683 — khuất hẳn. Bỏ min-height ở khổ này để mọi toạ độ % co lại vừa
   đúng phần nhìn thấy. */
@media (min-width: 1024px) and (max-height: 800px) {
    .hv3-journey-sticky {
        min-height: 0;
    }
}


/* ── Di động: danh sách giáo viên bấm mở ──────────────────────────────────
   Nhãn đặt trên ảnh chỉ hợp với màn rộng; khổ ~360px năm nhãn đè lên nhau và
   thẻ chi tiết không đủ chỗ. Thay bằng <details>: bấm tên là mở nội dung ngay
   bên dưới (yêu cầu 30/08).
   ────────────────────────────────────────────────────────────────────────── */
.hv3-teacher-list {
    display: none;
}

@media (max-width: 767px) {
    .hv3-teacher-list {
        display: block;
        margin: 14px 16px 0;
    }

    .hv3-teacher-item {
        border-bottom: 1px solid #E9E3DA;
    }

    .hv3-teacher-item summary {
        /* Bỏ mũi tên mặc định của trình duyệt để tự vẽ dấu + / − */
        list-style: none;
        cursor: pointer;
        position: relative;
        padding: 13px 30px 13px 0;
        font-family: 'Nunito', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #2576B9;
    }

    .hv3-teacher-item summary::-webkit-details-marker {
        display: none;
    }

    .hv3-teacher-item summary::after {
        content: "+";
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        font-weight: 700;
        color: #C08A22;
        line-height: 1;
    }

    .hv3-teacher-item[open] summary::after {
        content: "−";
    }

    .hv3-teacher-body {
        padding: 0 0 14px;
    }

    .hv3-teacher-meta {
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        color: #6E7683;
        margin: 0 0 8px;
    }

    .hv3-teacher-label {
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: #3F3F3F;
        margin: 0 0 4px;
    }

    .hv3-teacher-body ul {
        margin: 0;
        padding-left: 18px;
    }

    .hv3-teacher-body li {
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        line-height: 1.55;
        color: #3F3F3F;
        margin-bottom: 4px;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   NHÃN GIÁO VIÊN — ghi đè teachers-2026.css
   ══════════════════════════════════════════════════════════════════════════
   teachers-2026.css nạp SAU home-v3.css và có rule
     .teachers-section .teacher-hotspot span { color:#16386F; ... }
   khớp cả .teacher-name lẫn .teacher-card (đều là <span> con), nên:
     - tên bị ép về xanh đậm thay vì trắng
     - hotspot phình 600px vì .teacher-card cũng bị tính vào
     - ::before vẫn vẽ chấm "+"
   Cùng độ đặc hiệu mà nạp trước thì thua → phải tăng độ đặc hiệu bằng cách
   lặp class (.teacher-hotspot.teacher-hotspot).
   ══════════════════════════════════════════════════════════════════════════ */
.teachers-section .teacher-hotspot.teacher-hotspot {
    /* Đúng bằng chấm 48px của ::before: nếu để auto, hộp hotspot vẫn ôm
       theo .teacher-card (380px) và tâm bị kéo lệch khỏi vai. */
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

/* Chỉ tắt ::after; ::before là chấm "+" của bản gốc, nay dùng lại (04/09). */
.teachers-section .teacher-hotspot.teacher-hotspot::after {
    content: none;
}

/* Chấm to gấp đôi (24 -> 48px) và ĐẢO MÀU: nền trắng, dấu "+" xanh
   (yêu cầu 04/09). Lặp class để thắng teachers-2026.css nạp sau. */
.teachers-section .teacher-hotspot.teacher-hotspot::before {
    width: 48px;
    height: 48px;
    background: #FFFFFF;
    color: #2B6CD4;
    font-size: 34px;
    border: 2px solid #2B6CD4;
    box-shadow: 0 4px 14px rgba(11, 37, 83, .26);
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

/* Rê chuột: đảo lại thành nền xanh chữ trắng cho rõ phản hồi */
.teachers-section .teacher-hotspot.teacher-hotspot:hover::before,
.teachers-section .teacher-hotspot.teacher-hotspot:focus::before,
.teachers-section .teacher-hotspot.teacher-hotspot:focus-visible::before,
.teachers-section .teacher-hotspot.teacher-hotspot.is-active::before {
    background: #2B6CD4;
    color: #FFFFFF;
}

.teachers-section .teacher-hotspot.teacher-hotspot:hover,
.teachers-section .teacher-hotspot.teacher-hotspot:focus,
.teachers-section .teacher-hotspot.teacher-hotspot:focus-visible {
    background: none;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

/* Tên: TRẮNG, luôn hiện, nằm trong luồng của hotspot */
/* Ẩn nhãn TÊN trên ảnh, quay lại chấm "+" của bản gốc (yêu cầu 04/09).
   Lý do: nhãn tên rộng 110-277px, neo theo % chiều cao ảnh; ở màn 15.6"
   (768px) ảnh bị cắt bởi max-height:74vh + object-fit:cover nên nhãn trôi
   khỏi vai, càng rộng càng lộ. Chấm 24px cố định lệch ít hơn hẳn.
   Chữ vẫn nằm trong DOM (clip) để trình đọc màn hình đọc được. */
.teachers-section .teacher-hotspot .teacher-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}



/* Thẻ chi tiết: KHÔNG bị rule .teacher-hotspot span kéo về static */
.teachers-section .teacher-hotspot .teacher-card {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    /* Nới từ 290px: chữ 18px cần chỗ, giữ 290px thì mỗi gạch đầu dòng
       xuống 3-4 dòng. */
    width: 380px;
    max-width: 84vw;
    padding: 18px 20px;
    background: #FFFFFF;
    border-radius: 14px;
    color: #3F3F3F;
    font-weight: 400;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
}

.teachers-section .teacher-hotspot:hover .teacher-card,
.teachers-section .teacher-hotspot:focus-visible .teacher-card {
    opacity: 1;
    visibility: visible;
}

.teachers-section .teacher-hotspot--one .teacher-card { left: 0; transform: none; }
.teachers-section .teacher-hotspot--five .teacher-card { left: auto; right: 0; transform: none; }


/* Chữ trong thẻ hover: định dạng THƯỜNG, không in đậm (yêu cầu 30/08).
   teachers-2026.css đặt .teacher-hotspot span { font-weight:700 } khớp cả các
   span con trong thẻ, nên phải ghi đè bằng selector đặc hiệu hơn. */
.teachers-section .teacher-hotspot .teacher-card .teacher-card-meta,
.teachers-section .teacher-hotspot .teacher-card .teacher-card-label,
.teachers-section .teacher-hotspot .teacher-card .teacher-card-item {
    display: block;
    position: static;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    /* 18px theo yêu cầu 30/08 — bản trước 12.5px quá nhỏ, khó đọc */
    font-size: 18px;
    line-height: 1.5;
    white-space: normal;
    text-shadow: none;
    opacity: 1;
    transform: none;
    background: none;
    padding: 0;
}

.teachers-section .teacher-hotspot .teacher-card .teacher-card-meta {
    color: #6E7683;
    margin-bottom: 10px;
}

.teachers-section .teacher-hotspot .teacher-card .teacher-card-label {
    color: #3F3F3F;
    margin-bottom: 6px;
}

/* Bullet thụt vào cho thoáng: chấm ở lề, chữ lùi 22px và các dòng cuộn
   xuống vẫn thẳng hàng với dòng đầu (padding-left + ::before ở left:4px). */
.teachers-section .teacher-hotspot .teacher-card .teacher-card-item {
    /* relative để dấu • (::before, position:absolute) neo vào chính dòng này,
       không trôi ra ngoài thẻ. */
    position: relative;
    color: #3F3F3F;
    padding-left: 22px;
    margin-bottom: 6px;
}

.teachers-section .teacher-hotspot .teacher-card .teacher-card-item::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: #C08A22;
}


/* Tên thầy/cô trong thẻ hover: dòng đầu tiên, IN ĐẬM (yêu cầu 30/08).
   Selector đủ đặc hiệu để thắng .teachers-section .teacher-hotspot span
   của teachers-2026.css. */
.teachers-section .teacher-hotspot .teacher-card .teacher-card-name {
    display: block;
    position: static;
    font-family: 'Nunito', sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    color: #2576B9;
    white-space: normal;
    text-shadow: none;
    opacity: 1;
    transform: none;
    background: none;
    padding: 0;
    margin-bottom: 8px;
}


/* ── Ảnh giáo viên vừa màn hình laptop thấp ───────────────────────────────
   Ảnh 2200×1227 (tỉ lệ 1.79): ở khổ 1366 nó cao 762px trong khi màn 15.6"
   chỉ còn ~640px sau thanh trình duyệt — không xem trọn được cả 5 thầy cô,
   phải cuộn mới thấy hết.

   Giới hạn chiều cao theo chiều cao khung nhìn và cắt bớt hai bên. Nhãn tên
   đặt theo % nên tự bám đúng vị trí sau khi cắt.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-height: 800px) {
    /* Lặp class để thắng teachers-2026.css (nạp sau home-v3.css, cùng độ
       đặc hiệu thì file nạp sau thắng). */
    /* teachers-2026.css:97 đặt `max-height: none !important` và
       `height: auto !important` — chỉ !important mới đè được. */
    .teachers-section .teacher-team-stage.teacher-team-stage > img {
        max-height: 74vh !important;
        height: auto !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Toạ độ đọc TRỰC TIẾP từ ảnh chụp màn 15.6" của Eric (08/09).
       Bản bù bằng công thức (y/0.746) trước đó sai đích: nó nhắm vào vai theo
       ẢNH GỐC, trong khi ảnh đã bị object-fit:cover cắt đáy nên tư thế từng
       người hiện ra khác. Rick và Pavel bị đẩy xuống tận ngực (83%), nay kéo
       lên đúng vai; Ntombienhle thấp hơn vì đứng lùi và thấp hơn hàng trước. */
    .teachers-section .teacher-hotspot--one   { left: 16.7%; top: 55.8%; }
    .teachers-section .teacher-hotspot--two   { left: 35.2%; top: 63.5%; }
    .teachers-section .teacher-hotspot--three { left: 49.9%; top: 75.0%; }
    .teachers-section .teacher-hotspot--four  { left: 64.9%; top: 66.3%; }
    .teachers-section .teacher-hotspot--five  { left: 83.0%; top: 53.8%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BANNER DÍNH ĐÁY MÀN HÌNH (14/09)
   Video 1280x164 dẫn tới bài TCBC "10 năm liên tiếp 90% điểm tuyệt đối".
   Chỉ hiện sau khi bố mẹ cuộn quá nửa màn hình đầu (JS gắn .is-hien).

   Desktop: rộng 1/2 màn, canh giữa. Mobile: trải hết bề ngang.
   Chừa góc phải dưới cho cụm nút Zalo/hotline nổi sẵn có của trang.
   ══════════════════════════════════════════════════════════════════════════ */
.hv3-sticky-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 850;           /* dưới modal (1000) nhưng trên nội dung trang */
    width: 50%;
    max-width: 760px;
    /* Ẩn mặc định: dịch xuống dưới mép màn + mờ hẳn. Không dùng display:none
       để còn chạy được chuyển động trượt lên. */
    transform: translate(-50%, calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 37, 83, .28);
    line-height: 0;
}

.hv3-sticky-banner.is-hien {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

/* Bố mẹ đã đóng thì ẩn hẳn, không chiếm chỗ nữa */
.hv3-sticky-banner.is-dong {
    display: none;
}

.hv3-sticky-banner-link {
    display: block;
    line-height: 0;
}

.hv3-sticky-banner-el {
    display: block;
    width: 100%;
    height: auto;
    /* Giữ đúng tỉ lệ gốc để không nhảy khung lúc video chưa tải */
    aspect-ratio: 1280 / 164;
    object-fit: cover;
    background: #0B2553;   /* nền xanh lúc video chưa tải, không loé trắng */
}

.hv3-sticky-banner-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(11, 37, 83, .55);
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.hv3-sticky-banner-close:hover {
    background: rgba(11, 37, 83, .85);
}

/* Mobile: trải hết bề ngang, sát đáy */
@media (max-width: 900px) {
    .hv3-sticky-banner {
        width: calc(100% - 16px);
        max-width: none;
        bottom: 10px;
        border-radius: 10px;
    }
}

/* Tôn trọng thiết lập giảm chuyển động: hiện thẳng, không trượt */
@media (prefers-reduced-motion: reduce) {
    .hv3-sticky-banner {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   HIỆU ỨNG CHÀO MỪNG — section video Cambridge (15/09)
   Nội dung là thành tích "90% điểm tuyệt đối" nên reveal mang nhịp ăn mừng:
   video phóng nhẹ vào vị trí, một vệt sáng quét ngang, kèm pháo giấy rơi.
   Chạy MỘT LẦN khi cuộn tới (JS gắn .is-mung), không lặp lại khi cuộn lên.
   ══════════════════════════════════════════════════════════════════════════ */
.hv3-cambridge-video {
    position: relative;
}

/* Mặc định video HIỆN BÌNH THƯỜNG. Chỉ khi JS chạy được mới gắn .san-sang
   để ẩn đi chờ ăn mừng.
   Làm ngược lại (CSS ẩn sẵn, chờ JS hiện) là sai: JS bị chặn hay lỗi mạng thì
   video kẹt ở opacity:0 vĩnh viễn. Bản trước tôi dùng animation làm phanh dự
   phòng, nhưng fill 'forwards' của nó ghi đè cả rule .is-mung — đo ra opacity
   kẹt ở 0 dù class đã gắn đúng. */
.hv3-cambridge-video .hv3-cambridge-video-el {
    transition: opacity .55s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
}

/* Chờ ăn mừng: thu nhỏ + mờ */
.hv3-cambridge-video.san-sang .hv3-cambridge-video-el {
    opacity: 0;
    transform: scale(.94);
}

/* Đã ăn mừng: hiện hẳn */
.hv3-cambridge-video.san-sang.is-mung .hv3-cambridge-video-el {
    opacity: 1;
    transform: scale(1);
}

/* Vệt sáng quét ngang một lần, ngay sau khi video hiện */
.hv3-cambridge-video::after {
    content: "";
    position: absolute;
    inset: 0 50px;            /* khớp padding của section */
    pointer-events: none;
    border-radius: 12px;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, .34) 48%,
        rgba(255, 255, 255, .10) 56%,
        transparent 64%);
    background-size: 260% 100%;
    background-position: 190% 0;
    opacity: 0;
}

.hv3-cambridge-video.is-mung::after {
    animation: hv3QuetSang 1.15s cubic-bezier(.3, .8, .4, 1) .28s 1 forwards;
}

@keyframes hv3QuetSang {
    0%   { opacity: 0;   background-position: 190% 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0;   background-position: -60% 0; }
}

/* ── Pháo giấy ─────────────────────────────────────────────────────────────
   Mỗi mảnh là một <i> do JS sinh ra; vị trí, màu, độ trễ đặt bằng biến CSS
   nên không phải viết 20 rule riêng. */
.hv3-mung-phao {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 12px;
}

.hv3-mung-phao i {
    position: absolute;
    top: -12%;
    left: var(--x, 50%);
    width: var(--w, 8px);
    height: var(--h, 14px);
    background: var(--mau, #FFCE1F);
    opacity: 0;
    border-radius: 2px;
}

.hv3-cambridge-video.is-mung .hv3-mung-phao i {
    animation: hv3PhaoRoi var(--thoi, 2.4s) cubic-bezier(.35, .55, .5, 1)
               var(--tre, 0s) 1 forwards;
}

@keyframes hv3PhaoRoi {
    0%   { opacity: 0; transform: translate3d(0, -10%, 0) rotate(0deg); }
    8%   { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--dx, 0px), 120%, 0) rotate(var(--xoay, 540deg)); }
}

/* Màn hẹp: vệt sáng bám theo padding nhỏ hơn của section */
@media (max-width: 900px) {
    .hv3-cambridge-video::after {
        inset: 0 24px;
    }
}

/* Giảm chuyển động: hiện thẳng, không phóng, không pháo giấy */
@media (prefers-reduced-motion: reduce) {
    .hv3-cambridge-video .hv3-cambridge-video-el {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hv3-cambridge-video::after,
    .hv3-mung-phao { display: none; }
}

/* ── Nút bật/tắt tiếng video Cambridge (16/09) ────────────────────────────
   Góc TRÊN-TRÁI video, đủ lớn để bố mẹ nhận ra ngay (không phải icon nhỏ
   xíu kiểu điều khiển mặc định). Nền tối mờ để nổi trên mọi khung hình. */
/* Khung bọc video: mốc định vị cho nút bật tiếng. Đặt quanh chính thẻ
   <video> nên nút luôn nằm trong lòng video, không phụ thuộc padding của
   section (cộng tay padding từng breakpoint đều lệch: -17px rồi -27px). */
.hv3-cambridge-khung {
    position: relative;
    line-height: 0;
}

.hv3-cambridge-sound {
    position: absolute;
    /* Neo theo LỀ TRONG của section (padding-box) thay vì cộng tay con số
       padding: cộng tay thì ở khổ mà video hẹp hơn section, nút lệch ra
       ngoài mép trái video (đo được -17px). */
    top: clamp(14px, 1.6vw, 26px);
    left: clamp(14px, 1.6vw, 26px);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(11, 37, 83, .62);
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .2s ease, transform .2s ease;
}

.hv3-cambridge-sound:hover {
    background: rgba(11, 37, 83, .82);
    transform: translateY(-1px);
}

.hv3-cambridge-sound svg {
    width: 26px;
    height: 26px;
    flex: none;
    display: block;
}

.hv3-cambridge-sound svg[hidden] { display: none; }

/* Đang bật tiếng: đổi sang xanh Apollo cho thấy rõ trạng thái.
   Bắt cả class .is-bat lẫn aria-pressed — class do JS gắn, thuộc tính aria
   giữ cho trình đọc màn hình; hai đường không phụ thuộc nhau. */
.hv3-cambridge-sound.is-bat,
.hv3-cambridge-sound[aria-pressed="true"] {
    background: rgba(37, 118, 185, .88);
}

/* Hover khi ĐANG bật tiếng: giữ tông xanh, không rơi về nền tối */
.hv3-cambridge-sound.is-bat:hover,
.hv3-cambridge-sound[aria-pressed="true"]:hover {
    background: rgba(29, 97, 153, .94);
}

@media (max-width: 767px) {
    .hv3-cambridge-sound {
        top: 12px;
        left: 12px;
        gap: 8px;
        padding: 9px 16px 9px 13px;
        font-size: 13.5px;
    }

    .hv3-cambridge-sound svg { width: 22px; height: 22px; }
}