/* ============================================================
   hv3-sections.css — style cho 3 section mượn về (giáo viên · cơ sở vật chất ·
   tìm trung tâm), trích từ section-rhythm-2026.css của bản new-home-3.

   KHÔNG chép nguyên file gốc (77KB): nó còn 22 rule đụng vào [data-tell],
   .eyebrow, .section-heading — tức lớp hiệu ứng cuộn và chuẩn hoá tiêu đề mà
   trang này đã tự viết lại theo cách khác, chép vào là đè mất thiết kế.
   ============================================================ */

/* ============================================================
   section-rhythm-2026.css
   Hai việc:
   1. Nhịp "một màn hình một section" trên desktop.
   2. Hiệu ứng storytelling: nội dung hiện dần khi cuộn tới.

   Đặt SAU tất cả CSS section trong index.html để thắng về thứ tự.

   Nguyên tắc khi sửa file này:
   - Chỉ đổi `display` của những section vốn là `block`. Các section đã là
     flex (`#lo-trinh-vua-van` dir=row, `.center-location-apollo2025`
     dir=column) thì CHỈ thêm min-height, đổi display sẽ vỡ bố cục bên trong.
   - Mọi hiệu ứng phải tắt sạch dưới `prefers-reduced-motion`.
============================================================ */

/* ── 1. Nhịp một màn hình một section (chỉ desktop) ────────────────────────
   Header cố định cao 80px nên vùng dùng được là 100vh - 80px. */
@media (min-width: 901px) {

    /* Nhóm A — vốn là `display: block`, một khối bọc bên trong.
       An toàn để chuyển sang flex column và canh giữa. */
    .why-need-course-apollo2025.desktop,
    #may-do-cta,
    .ninetypercent-guarantee-maxscore-apllo2025.desktop,
    .teachers-section,
    #btn-appointment-form {
        min-height: calc(100vh - 80px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Nhóm B — đã là flex column, chỉ cần canh giữa + chiều cao */
    #co-so-vat-chat,
    .center-location-apollo2025 {
        min-height: calc(100vh - 80px);
        justify-content: center;
        box-sizing: border-box;
    }

    /* Nhóm C — đã là flex ROW với bố cục riêng (ảnh nền tuyệt đối, canh đáy).
       CHỈ thêm chiều cao, không đụng display/direction. */
    #lo-trinh-vua-van {
        min-height: calc(100vh - 80px);
        box-sizing: border-box;
    }

    /* Khối video: bản gốc cao cứng 720px làm section vọt lên 1.14 màn hình.
       Buộc theo viewport để section vừa đúng một màn. */
    .bg-why-need-course-apollo2025d-desktop {
        height: min(720px, calc(100vh - 260px));
    }

    /* Hai dải ghi chú KHÔNG ép full màn hình — chúng chỉ là một dòng chú
       thích, kéo cao 820px sẽ thành khoảng trắng vô nghĩa. Giữ dạng dải nối
       mỏng giữa hai section. */
    .lotrinh-note-section,
    .authentic-images-note-desktop-2025 {
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 28px;
    }
}

/* Nút gửi lead (#ButtonSubmitLead) dùng CHUNG format với nút "Tìm trung tâm"
   (#btn-submit-search / .btn-find-center-location, new-style-revamp2025.css).
   Trước 2026-08-13 nút này là bản riêng: nền gradient, chữ 19.5px/800, cao
   54px, đổ bóng vàng và nhấc lên khi hover — khác hẳn các nút vàng còn lại
   của trang. Nay đồng bộ: nền phẳng #FFCE1F, cao 48px, chữ 18px/400.
   Giữ `width` 520px vì đó là bề ngang của cột form, không thuộc phần format. */
.leadform-homepage-apollo2025.desktop .rework-submit-btn-apollo2025 {
    display: flex !important;
    width: 520px !important;
    height: 48px !important;
    padding: 12px 24px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 360px !important;
    background: #FFCE1F !important;
    border: none !important;
    cursor: pointer !important;
    color: #252525 !important;
    text-align: center !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    letter-spacing: 0.15px !important;
    box-shadow: none !important;
    transition: filter 0.2s ease !important;
    margin-top: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHUYỂN NÚT NAVIGATION CƠ SỞ VẬT CHẤT SANG 2 BÊN TRÁI - PHẢI (LEFT - RIGHT)
   ═══════════════════════════════════════════════════════════════════════════ */
.facilities-2026-inner {
    position: relative !important;
}

.facilities-2026-head-row {
    position: relative !important;
    margin-bottom: clamp(24px, 3vw, 40px) !important;
}

.facilities-2026-nav {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.facilities-2026-inner {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 36px !important;
    box-sizing: border-box !important;
}

.facilities-2026-viewport {
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
}

.facilities-2026-track {
    overflow: hidden !important;
    border-radius: 24px !important;
    width: 100% !important;
}

/* ============================================================
   ĐỢT SỬA 2026-08-09 — kết quả rà soát hiển thị desktop + mobile

   Khối này đặt CUỐI FILE có chủ đích. File đang có ~500 khai báo
   !important và một số rule mobile lại nằm TRƯỚC rule gốc của chính nó
   (ví dụ .facilities-nav-btn khai 38px ở phần mobile phía trên rồi bị
   rule 60px không-media phía dưới đè lại). Đặt ở cuối là cách duy nhất
   thắng chắc chắn mà không phải leo thang !important thêm một nấc.
   ============================================================ */

/* ── (3) Neo section không chui xuống dưới header ─────────────────────────
   Header `.header-fixed-navRevamap-New2025` cao 80px và `position: fixed`
   ở CẢ desktop lẫn mobile. Ba section có id nhưng `scroll-margin-top: 0`
   nên khi nhảy neo tới, tiêu đề bị header che mất một nửa.
   Đường đi thật gặp lỗi: nút "Xem điều con nhận được" ở khối quiz
   (index.html) trỏ tới #con-truong-thanh. */
section[id],
.teachers-section[id] {
    scroll-margin-top: 88px;
}

.center-location-apollo2025 .main-title-centerlocation-mobile,
.center-location-apollo2025 .main-content-center-loaction > h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Ảnh thứ 3 của Cơ sở vật chất (thẻ cao bên phải) ─────────────────────
   Khung 693x560 (tỉ lệ 1.24) trong khi ảnh gốc co-so-vat-chat-03.webp là
   1194x617 (tỉ lệ 1.94). `object-fit: cover` phóng ảnh cho cao 560px rồi
   xén mất khoảng 36% bề ngang — đó là cảm giác "bị zoom vào".

   Chỉ đổi sang `contain` thì hết xén nhưng thẻ vẫn cao 560px, để lộ hai
   dải trắng ~80px trên dưới. Nên cho THẺ nhận đúng tỉ lệ ảnh rồi canh giữa
   trong cột: ảnh hiện trọn vẹn, không dải thừa, phần trống trở thành nền
   section chứ không phải mảng trắng giữa thẻ. */
.facilities-section-2026 .facilities-2026-card--tall {
    aspect-ratio: 1194 / 617;
    height: auto !important;
    flex: 0 0 auto !important;
}

/* Cột phải là flex COLUMN, nên canh giữa theo chiều dọc phải dùng
   `justify-content` — `align-self` trên thẻ chỉ tác động trục ngang. */
.facilities-section-2026 .facilities-2026-col--right {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.facilities-section-2026 .facilities-2026-card--tall img {
    object-fit: cover !important;
    object-position: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ĐỘI NGŨ GIÁO VIÊN: FULL MÀN HÌNH & KHÔNG BO GÓC
   ═══════════════════════════════════════════════════════════════════════════ */
.teachers-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}

.teachers-section::before {
    display: none !important;
}

.teachers-section .teacher-team-stage {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
}

.teachers-section .teacher-team-stage > img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
}

.facilities-2026-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.facilities-2026-head {
    text-align: center !important;
    margin-bottom: clamp(24px, 3vw, 36px) !important;
}

.facilities-2026-eyebrow {
    display: block !important;
    font-family: "Brauer NeueVN", "Montserrat", sans-serif !important;
    font-size: clamp(14px, 1.1vw, 16px) !important;
    font-weight: 800 !important;
    color: #DA8A28 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.facilities-2026-title {
    font-family: "Brauer NeueVN", sans-serif !important;
    font-size: clamp(28px, 3.4vw, 52px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #1760B2 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

.facilities-2026-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(14px, 1.8vw, 24px) !important;
    width: 100% !important;
    align-items: stretch !important;
}

.facilities-2026-card {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    aspect-ratio: 16 / 10 !important;
}

.facilities-2026-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 20px !important;
    transition: transform 0.5s ease !important;
}

.facilities-2026-card:hover img {
    transform: scale(1.04) !important;
}

@media (max-width: 900px) {
    .facilities-2026-gallery {
            display: flex !important;
            overflow-x: auto !important;
            scroll-snap-type: x mandatory !important;
            padding-bottom: 12px !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 14px !important;
        }

    .facilities-2026-card {
            flex: 0 0 84% !important;
            scroll-snap-align: center !important;
            aspect-ratio: 16 / 10 !important;
        }

}


/* ══════════════════════════════════════════════════════════════════════════
   Section "90% học sinh đạt điểm Cambridge tuyệt đối" — đổi màu chữ
   ══════════════════════════════════════════════════════════════════════════
   Bản gốc trên apollo.edu.vn đặt section này trên NỀN TỐI nên tiêu đề, phụ đề
   và tên học viên đều màu trắng (#FFF). Trang này nền kem sáng nên chữ trắng
   không đọc được (yêu cầu 30/08).

   Đổi theo bảng màu của trang:
     tiêu đề     #2576B9  (xanh Apollo, giống .hv3-facts-title)
     phụ đề      #3F3F3F  (xám đậm, giống .hv3-fact-text)
     tên học viên #2576B9
     tên trung tâm #3F3F3F

   Ghi đè ở đây thay vì sửa new-style-revamp2025.css vì file đó dùng chung cho
   nhiều trang khác đang có nền tối.
   ══════════════════════════════════════════════════════════════════════════ */
.ninetypercent-guarantee-maxscore-apllo2025 .main-text-title-ninetypercent-guarantee-maxscore h2 {
    color: #2576B9;
}

.ninetypercent-guarantee-maxscore-apllo2025 .main-text-title-ninetypercent-guarantee-maxscore span {
    color: #3F3F3F;
}

.ninetypercent-guarantee-maxscore-apllo2025 .title-img-content-ninetypercent-guarantee-maxscore h3 {
    color: #2576B9;
}

.ninetypercent-guarantee-maxscore-apllo2025 .title-img-content-ninetypercent-guarantee-maxscore span {
    color: #3F3F3F;
}

/* .overlay-description GIỮ chữ trắng: nó hiện khi rê chuột, nằm trên lớp phủ
   tối đè lên ảnh — đổi sang màu tối sẽ không đọc được. */

/* ── Nền ảnh học viên: một tấm nền xanh trải qua cả 5 thẻ ──────────────────
   Lấy cách trình bày từ new-home-3 (section-rhythm-2026.css dòng 1943-1970).

   Ý đồ thiết kế: KHÔNG phải mỗi thẻ một nền riêng. Cả 5 thẻ dùng CHUNG một
   ảnh bg-student.webp (5760×3521), mỗi thẻ hiển thị một lát cắt ngang khác
   nhau (5% → 28% → 50% → 72% → 95%) nên xếp cạnh nhau trông như một phông
   liền mạch phía sau các bé.

   Ảnh bé là PNG nền trong, đặt đè lên nền xanh này.

   Giới hạn trong .ninetypercent-guarantee-maxscore-apllo2025 để không đụng
   .image-wrapper của các section khác dùng chung new-style-revamp2025.css.
   ────────────────────────────────────────────────────────────────────────── */
.ninetypercent-guarantee-maxscore-apllo2025 .children-img-card-item {
    background: transparent;
    background-color: transparent;
}

.ninetypercent-guarantee-maxscore-apllo2025 .children-img-card-item .image-wrapper {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: clamp(340px, 34vw, 440px);
    max-height: none;
    box-shadow: 0 10px 28px rgba(11, 37, 83, .16);
    background-color: #0B2553;
    background-image: url('/landings/home/assets/apollo/images/rewrap-2024/bg-student.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Mỗi thẻ lấy một lát cắt khác nhau của cùng tấm nền */
.ninetypercent-guarantee-maxscore-apllo2025 .children-img-card-item:nth-child(1) .image-wrapper { background-position: 5% top; }
.ninetypercent-guarantee-maxscore-apllo2025 .children-img-card-item:nth-child(2) .image-wrapper { background-position: 28% top; }
.ninetypercent-guarantee-maxscore-apllo2025 .children-img-card-item:nth-child(3) .image-wrapper { background-position: 50% top; }
.ninetypercent-guarantee-maxscore-apllo2025 .children-img-card-item:nth-child(4) .image-wrapper { background-position: 72% top; }
.ninetypercent-guarantee-maxscore-apllo2025 .children-img-card-item:nth-child(5) .image-wrapper { background-position: 95% top; }

/* Ảnh bé nằm đè lên nền, không mang nền trắng của chính nó */
.ninetypercent-guarantee-maxscore-apllo2025 .children-img-card-item .image-wrapper img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    background: transparent;
    background-image: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   HEADER RỘNG BẰNG NỘI DUNG TRANG
   ══════════════════════════════════════════════════════════════════════════
   header-footer.css đặt .navRevamap-New2025 là max-width 1440px + padding
   120px — vốn cho bản trang cũ. Trang này dùng khung nội dung 1620px +
   padding 50px (xem .hv3-facts-container), nên trên màn rộng header hụt
   180px so với nội dung bên dưới, logo và menu bị thụt vào trông lệch.

   Ghi đè cho khớp. Đặt ở hv3-sections.css (nạp sau header-footer.css) và
   giới hạn trong .header-fixed-...desktop để không đụng bản mobile.
   ══════════════════════════════════════════════════════════════════════════ */
.header-fixed-navRevamap-New2025.desktop .navRevamap-New2025 {
    max-width: 1620px;
    padding-left: 50px;
    padding-right: 50px;
}

@media (max-width: 1100px) {
    .header-fixed-navRevamap-New2025.desktop .navRevamap-New2025 {
        padding-left: 24px;
        padding-right: 24px;
    }
}


/* ── Footer rộng bằng nội dung trang ──────────────────────────────────────
   Giống hệt vấn đề của header: header-footer.css đặt khung footer
   max-width 1440px + padding 120px, trong khi trang này dùng 1620px +
   padding 50px, nên hàng link footer hụt 240px so với nội dung bên trên.
   ────────────────────────────────────────────────────────────────────────── */
.reworkfooter2025-new-footer-2025 {
    max-width: 1620px;
    padding-left: 50px;
    padding-right: 50px;
}

@media (max-width: 1100px) {
    .reworkfooter2025-new-footer-2025 {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Hàng link dài 783px, khổ hẹp sẽ tràn — cho xuống dòng thay vì ép một hàng */
@media (max-width: 1024px) {
    .footer-rewarm_new_form_link_content_href-new-footer-2025 {
        flex-wrap: wrap;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   VIDEO CAMBRIDGE — thay cho section "90% đạt điểm Cambridge tuyệt đối"
   ══════════════════════════════════════════════════════════════════════════
   Video 1920×1080 (16:9), dài 9s, tự chạy và lặp không tiếng.
   Khổ nội dung 1620px + padding 50px cho khớp các section khác của trang.
   ══════════════════════════════════════════════════════════════════════════ */
.hv3-cambridge-video {
    width: 100%;
    max-width: 1620px;
    margin: 0 auto;
    /* Nút bật tiếng neo tuyệt đối theo phần tử này; padding ngang bên dưới
       chính là lề trong, nên nút tự nằm trong lòng video. */
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

.hv3-cambridge-video-el {
    display: block;
    width: 100%;
    height: auto;
    /* Giữ khung đúng 16:9 ngay từ đầu để không nhảy bố cục lúc video đang tải */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
    background: #0B2553;
}

@media (max-width: 1100px) {
    .hv3-cambridge-video {
        padding: 0 24px;
    }
}

/* Điện thoại dùng bản video DỌC 9:16 (15/09) — khung phải đổi tỉ lệ theo,
   nếu giữ 16/9 thì object-fit:cover sẽ cắt mất gần hết chiều cao khung hình.
   Cùng ngưỡng 900px với điều kiện chọn nguồn trong hv3-boot.js. */
@media (max-width: 900px) {
    .hv3-cambridge-video-el {
        aspect-ratio: 9 / 16;
        /* Chừa chỗ cho header 80px, không để video cao quá một màn */
        max-height: calc(100vh - 120px);
        margin: 0 auto;
        /* Màn rất rộng mà thấp (điện thoại xoay ngang) thì giới hạn bề ngang
           theo chiều cao, tránh video tràn dài quá khổ. */
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .hv3-cambridge-video {
        padding: 0 18px;
    }

    .hv3-cambridge-video-el {
        border-radius: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER VỪA MÀN HÌNH LAPTOP 15.6" (1366×768)
   ══════════════════════════════════════════════════════════════════════════
   Sau khi thêm hai nhóm "Tin tức & sự kiện" và "Góc phụ huynh" (30/08),
   thanh menu cần ~1676px: logo 255 + menu 881 + hai nút 392 + lề 148.
   Màn 1366px thiếu ~310px nên menu bị ép sát, đè lên nút Đăng nhập.

   Thu gọn theo BA nấc thay vì ẩn bớt mục — phụ huynh vẫn thấy đủ 5 nhóm:
     ≤1600px: chữ 15px, gap 16px      (laptop 15.6" phổ biến 1536/1600)
     ≤1440px: chữ 13px, gap 12px      (1366×768 — khổ Eric yêu cầu)
     ≤1200px: logo nhỏ lại, nút gọn   (netbook / cửa sổ hẹp)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1600px) {
    .header-fixed-navRevamap-New2025.desktop .navRevamap-New2025 {
        padding-left: 28px;
        padding-right: 28px;
        gap: 16px;
    }

    .header-fixed-navRevamap-New2025.desktop .main-menu-new2025 {
        gap: 16px;
    }

    .header-fixed-navRevamap-New2025.desktop .menu-and-actions-new2025-container {
        gap: 16px;
    }

    .header-fixed-navRevamap-New2025.desktop .menu-top-link-new2025 {
        font-size: 15px;
        white-space: nowrap;
    }

    /* Mũi tên dropdown 46px là quá khổ khi menu đã chật */
    .header-fixed-navRevamap-New2025.desktop .dropdown-menu-apollo2025 {
        width: 14px;
        height: auto;
    }
}

@media (min-width: 901px) and (max-width: 1440px) {
    .header-fixed-navRevamap-New2025.desktop .navRevamap-New2025 {
        padding-left: 20px;
        padding-right: 20px;
        gap: 12px;
    }

    .header-fixed-navRevamap-New2025.desktop .main-menu-new2025,
    .header-fixed-navRevamap-New2025.desktop .menu-and-actions-new2025-container {
        gap: 12px;
    }

    .header-fixed-navRevamap-New2025.desktop .menu-top-link-new2025 {
        font-size: 13px;
    }

    /* Logo 255px chiếm gần 1/5 thanh — thu còn 200px vẫn đọc rõ */
    .header-fixed-navRevamap-New2025.desktop .logo-apollo-new2025 img {
        min-width: 200px;
        max-width: 200px;
        height: 28px;
    }

    /* Hai nút bên phải: giảm đệm và cỡ chữ cho gọn */
    .header-fixed-navRevamap-New2025.desktop .hv3-btn-login,
    .header-fixed-navRevamap-New2025.desktop .hv3-btn-book {
        font-size: 12.5px;
        padding: 8px 14px;
        white-space: nowrap;
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    .header-fixed-navRevamap-New2025.desktop .logo-apollo-new2025 img {
        min-width: 170px;
        max-width: 170px;
        height: 24px;
    }

    .header-fixed-navRevamap-New2025.desktop .menu-top-link-new2025 {
        font-size: 12.5px;
    }

    .header-fixed-navRevamap-New2025.desktop .hv3-btn-login,
    .header-fixed-navRevamap-New2025.desktop .hv3-btn-book {
        font-size: 12px;
        padding: 7px 11px;
    }
}

/* ==========================================================
   STICKY CTA DI ĐỘNG + ẩn OmiCall — đồng bộ từ các trang khoá học
   ========================================================== */
.tn-mcta {
  display: none;
}

@media (max-width: 1024px) {
  .tn-mcta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -6px 20px rgba(37, 118, 185, 0.14);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .tn-mcta.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }

  body.has-mcta {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .tn-mcta-btn {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-family: var(--body);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .tn-mcta-btn--zalo {
    background: var(--ap-primary-container);
    color: #fff;
    box-shadow: 0 6px 14px rgba(37, 118, 185, 0.28);
  }

  .tn-mcta-btn--form {
    background: #ffd95b;
    color: #1a3a6e;
    box-shadow: 0 6px 14px rgba(254, 204, 0, 0.32);
  }

  .tn-mcta-btn:active {
    transform: scale(0.97);
  }
}

/* ==========================================================
   OMICALL LIVETALK — chỉ hiện trên DESKTOP (03/10)
   Trong vùng có sticky CTA (<=1024px) thì ẩn widget chat để
   không hiển thị đồng thời 2 thành phần ở đáy màn hình.
   ========================================================== */
@media (max-width: 1024px) {
  #omi_dtl,
  #omi_u38,
  [id^="omi_"],
  [class*="omi-lt-"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ==========================================================
   DI ĐỘNG: HERO CÂN ĐỐI CHO MÀN NHỎ (04/10)
   Video gốc 1280x700 (ngang) nhồi vào khung gần vuông-dọc 390x764
   với object-fit:cover -> cắt mất ~72% chiều ngang, mất cả chữ
   "APOLLO ENGLISH" và người hai bên. Hạ chiều cao khung xuống để
   khung bớt dọc, ảnh hiện được nhiều hơn và CTA lên cao hơn.
   ========================================================== */
@media (max-width: 767px) {
  .hv3-hero-sticky {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;             /* 390 -> ~488px, thay vì 764px */
    max-height: calc(100dvh - 80px);
    top: 80px !important;            /* dính ngay dưới header, không hở phía trên */
  }

  /* Khung ảnh thấp hơn màn -> phần dưới là nền trang (kem), không phải dải đen,
     và phần nội dung kế tiếp được kéo lên cao hơn trong tầm mắt. */
  .hv3-hero { background-color: var(--kn-cream, #fdf6ec) !important; }

  /* Ưu tiên giữ khuôn mặt/nội dung ở phần trên khung hình */
  .hv3-hero-slide img,
  .hv3-hero-slide .hv3-hero-video {
    object-position: 50% 35% !important;
  }

  /* Caption gọn lại cho khung thấp hơn, không đè kín ảnh */
  .hv3-hero-caption {
    left: 16px !important;
    right: 16px !important;
    bottom: 18px !important;
  }
}

/* Màn rất nhỏ (<=360px): hạ thêm một bậc */
@media (max-width: 360px) {
  .hv3-hero-sticky { aspect-ratio: 1 / 1; }
}

/* ==========================================================
   DI ĐỘNG: DỄ ĐỌC + DỄ CHẠM (04/10)
   Mục tiêu tăng tỷ lệ điền form / chat Zalo trên Home.
   ========================================================== */
@media (max-width: 767px) {
  /* 1. Chữ nội dung nhỏ (13–14px) -> 16px cho dễ đọc trên màn nhỏ */
  .mq2-hello-sub,
  .hv3-teacher-meta,
  .teacher-card,
  .teacher-card li,
  .teacher-card p,
  .teacher-hotspot,
  .teacher-name,
  .hv3-modal-eyebrow,
  .teachers-section li {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* 2. Dot chỉ báo slide: vùng chạm đạt chuẩn 44px mà chấm vẫn nhỏ.
        Dùng ::after làm vùng chạm trong suốt, không đổi giao diện. */
  .hv3-hero-dot,
  .hv3-journey-dot {
    position: relative;
  }

  .hv3-hero-dot::after,
  .hv3-journey-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* 3. Thanh CTA dính đáy: nút cao, chữ rõ, dễ bấm bằng ngón cái */
  .tn-mcta-btn {
    height: 52px !important;
    font-size: 16px !important;
  }

  .tn-mcta-btn--zalo {
    background: #0068ff !important;
    color: #fff !important;
  }

  .tn-mcta-btn--form {
    background: #ffce1f !important;
    color: #11284e !important;
    border: 0 !important;
  }
}

/* ==========================================================
   DI ĐỘNG: KHÔNG ĐỂ THANH CTA ĐÁY CHE CHỮ (04/10)
   Các khối sticky (Hành trình, Hero) cao đúng 1 viewport nên
   body.has-mcta{padding-bottom} KHÔNG đẩy được nội dung bên trong.
   Phải trừ thẳng chiều cao thanh CTA (68px) vào khối sticky.
   ========================================================== */
@media (max-width: 767px) {
  body.has-mcta .hv3-journey-sticky {
    height: calc(100dvh - 80px - 68px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
  }

  /* Chừa thêm một khoảng thở dưới cột chữ của mỗi bước */
  body.has-mcta .hv3-step-body {
    margin-bottom: 8px;
  }

  /* Thanh CTA đang hiện -> các section thường cũng chừa đáy */
  body.has-mcta .hv3-cta-section,
  body.has-mcta .hv3-chat-panel,
  body.has-mcta .center-location-apollo2025 {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================
   ĐẶT LỊCH GẶP CHUYÊN GIA — select trung tâm (04/10)
   Đồng bộ kiểu với form trang Promotion.
   ========================================================== */
.hv3-select {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%232576b9' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.hv3-select:invalid,
.hv3-select option[value=""] { color: #8b97a8; }
.hv3-select option { color: #11284e; }

.hv3-select.is-error {
  border-color: #e4572e !important;
  box-shadow: 0 0 0 3px rgba(228, 87, 46, .16);
}

@media (max-width: 767px) {
  .hv3-select { font-size: 16px; }   /* >=16px để iOS không tự zoom khi focus */
}

/* ==========================================================
   VIDEO TRIẾT LÝ — CÂN ĐỐI TRÊN DI ĐỘNG (04/10)
   Di động phát bản DỌC (YouTube qV0QwJKr9po) -> dùng luôn thumbnail
   của chính video đó, crop lấy dải 9:16 ở giữa (bỏ nền mờ hai bên).
   Khung đặt đúng tỷ lệ ảnh nên không cắt mất gì.
   ========================================================== */
@media (max-width: 767px) {
  .hv3-video-wrapper {
    aspect-ratio: 406 / 720 !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ảnh DỌC cho di động nạp bằng CSS: url() trong CSS luôn tính tương đối
     với CHÍNH file CSS, nên đúng cả khi mở local lẫn khi host đặt trang ở
     /landings/home/. (Dùng <picture><source> thì srcset phải khớp thủ công
     với đường dẫn của <img> — trên host đã lệch và gây 404.) */
  .hv3-video-wrapper {
    background-image: url('/landings/home/assets/img/video-poster-doc.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Ẩn ảnh ngang, để lộ ảnh dọc ở nền */
  .hv3-video-poster { opacity: 0; width: 100%; height: 100%; }

  .hv3-video-play-btn { width: 68px !important; height: 68px !important; }
}

/* Desktop: poster lấy từ chính video (16:9) -> khung phải 16:9 cho khớp,
   nếu để tỷ lệ 2.36 của ảnh cũ thì bị cắt trên/dưới. */
@media (min-width: 768px) {
  .hv3-video-wrapper { aspect-ratio: 16 / 9 !important; height: auto !important; }
  .hv3-video-poster  { width: 100%; height: 100%; object-fit: cover; }
}