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

@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;
    }
}