/* ============================================================
   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 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.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 {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(37, 118, 185, 0.1);
}

.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 {
    transform: translateY(-4px);
}

/* ============================================================
   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;
}

#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%);
    /* Bỏ chấm tròn của teachers-2026.css — giờ nhãn là chữ, không phải chấm */
    width: auto;
    height: auto;
    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 {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

/* Bỏ chấm "+" của bản gốc */
.teachers-section .teacher-hotspot.teacher-hotspot::before,
.teachers-section .teacher-hotspot.teacher-hotspot::after {
    content: none;
}

.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 */
.teachers-section .teacher-hotspot .teacher-name {
    position: static;
    display: inline-block;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    /* To hơn bản 13px (yêu cầu 30/08) nhưng có trần 15px và co theo màn hình:
       tên dài nhất "Cô Ntombienhle Nomaswazi Maduwane" ở 16px đã đè lên hai
       nhãn bên cạnh 14-15px, ở khổ 1024px đè tới 65px. */
    font-size: clamp(11px, 0.95vw, 15px);
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(11, 37, 83, .9), 0 0 3px rgba(11, 37, 83, .8);
    opacity: 1;
    transform: none;
    transition: opacity .18s ease;
}

/* Rê chuột: ẩn tên, chỉ còn thẻ chi tiết */
.teachers-section .teacher-hotspot:hover .teacher-name,
.teachers-section .teacher-hotspot:focus-visible .teacher-name {
    opacity: 0;
    color: #FFFFFF;
}

/* 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;
    }
}