/* ============================================================================
   vongquay.css — Landing vòng quay học bổng (Apollo, tháng 9)

   Ưu tiên MOBILE: truyền thông chủ yếu qua Zalo, gần như toàn bộ lượt xem là
   điện thoại dọc. Desktop chỉ cần không vỡ — kẹp bề ngang lại giữa màn hình.

   Màu và font kế thừa home-version-3 để đồng bộ với trang chủ Apollo.
   ========================================================================== */

:root {
    /* ── Bảng màu lấy từ theme.jpg ──────────────────────────────────────
       Xanh cobalt sáng cho tiêu đề, navy đậm cho dải nhấn và nút, gold cho
       con số lớn. */
    --xanh-apollo: #1E60C6;   /* headline, chữ nhấn */
    --xanh-nhac: #3B82E0;
    --xanh-dam: #06307E;      /* dải navy */
    --xanh-sau: #002A6C;      /* nút CTA, navy sâu nhất */
    --gold: #C6A87E;          /* chữ gold trên nền navy */
    --gold-sang: #E8D5A8;

    /* ── Nền vàng ──────────────────────────────────────────────────────
       Lấy tông ấm của trang ket-qua (#FFD84D vàng nhấn, #C89B3C vàng đậm,
       #FFF3C7 kem nhạt) rồi dựng thang nền từ sáng đến đậm dần. */
    /* Nền kem chuẩn của theme Apollo (--page-bg trong page-background-2026) */
    --vang-nen: #FAF5EE;
    --nau-vang: #6E6252;        /* chữ phụ trên nền kem */
    --xanh-nhat: #E3EEFA;
    --hong: #EE3D8F;
    --hong-dam: #D22B78;
    --vang: #FFD84D;
    --vang-dam: #C89B3C;
    --kem: #FAF5EE;
    --than: #252525;
    --xam: #6E7683;
    --trang: #FFFFFF;
    --do-loi: #D93A3A;

    /* Chừa chỗ cho thanh điều hướng của webview Zalo (đo từ ảnh chụp: ~90px
       trên iPhone, gồm cả status bar + nút ... / X ở góc phải). */
    --dinh-zalo: calc(env(safe-area-inset-top, 0px) + 56px);
    --day-an-toan: env(safe-area-inset-bottom, 0px);
}

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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Nền sáng → chữ mặc định chuyển sang tông đậm */
    color: var(--than);
    background: var(--vang-nen);
    -webkit-font-smoothing: antialiased;
    /* Chặn kéo ngang khi vòng quay tràn mép */
    overflow-x: hidden;
}

/* ── Nền ảnh ────────────────────────────────────────────────────────────
   Hai ảnh riêng cho hai khổ màn: bản mobile dựng dọc, bản desktop dựng ngang.
   Ảnh gốc 2,2MB đã nén còn 22KB (WebP) — nền phần lớn là dải chuyển sắc mượt
   nên nén rất tốt, quan trọng với webview Zalo.

   `background-color` giữ nguyên nền kem làm lớp lót: ảnh chưa tải xong hoặc
   màn quá dài thì vẫn ra đúng tông, không lộ nền trắng. */
.nen {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--vang-nen) url("/landings/niem-vui-nhan-ba-vua-van-de-bay-xa/assets/img/bg-mobile.webp") no-repeat center top / cover;
}

@media (min-width: 900px) {
    .nen {
        background-image: url("/landings/niem-vui-nhan-ba-vua-van-de-bay-xa/assets/img/bg-desktop.webp");
    }
}

/* ── Mascot hai bên ─────────────────────────────────────────────────────
   Đặt cố định hai bên khung nội dung, chỉ để trang trí. Ẩn dưới 1100px vì
   màn hẹp không còn chỗ trống hai bên — đúng cách trang lộ trình may đo làm.
   ────────────────────────────────────────────────────────────────────── */
.mascot {
    display: none;
    position: fixed;
    height: auto;
    z-index: -1;
    pointer-events: none;
    /* Không đổ bóng: mascot dán sát mép nên bóng sẽ bị cắt cụt ở cạnh màn */
}

/* Hai ảnh mascot vốn được cắt SÁT CẠNH (nhân vật nhô vào từ mép), nên dán
   thẳng vào hai mép màn hình — không chừa lề, không neo theo khung. */
.mascot {
    /* Hai ảnh mascot có tỉ lệ khác nhau nên đặt theo BỀ RỘNG chung, chiều cao
       tự co — neo đáy nên chân hai bên vẫn thẳng hàng. */
    --rong-mascot: clamp(150px, 13vw, 230px);
    width: var(--rong-mascot);
}

/* Mascot trái: neo GIỮA trang theo chiều dọc */
.mascot--trai {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Mascot phải: nhỏ hơn (60%) và neo góc DƯỚI bên phải.
   Hai file là hai tư thế RIÊNG (kindy_apo_1 / _2) nên không lật ngang. */
.mascot--phai {
    right: 0;
    bottom: 0;
    width: calc(var(--rong-mascot) * .6);
}

/* Hiện khi dải trống mỗi bên đủ chứa mascot: khung 1080px + 2 × 13vw.
   Ở 1440px dải trống chỉ 180px trong khi mascot rộng ~187px nên vẫn đè —
   1500px là mốc đầu tiên an toàn. */
@media (min-width: 1500px) {
    .mascot {
        display: block;
    }
}

/* ── Bố cục chung ───────────────────────────────────────────────────────── */
/* Nội dung nằm thẳng trên nền kem, không khung bao. */
.man {
    display: none;
    padding: 26px 20px 26px;
    max-width: 520px;
    /* 60px header + safe-area + lề 16px */
    margin: calc(60px + env(safe-area-inset-top, 0px) + 16px) auto 0;
}

.man.hien {
    display: block;
    animation: hien-len .35s ease both;
}

@keyframes hien-len {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER — dựng theo bố cục ket-qua.html của Apollo:
   thanh trắng CỐ ĐỊNH trên đỉnh, cao 80px (desktop) / 60px (di động),
   logo bên trái, nút hành động bo tròn màu vàng bên phải.
   ══════════════════════════════════════════════════════════════════════════ */
.dinh-trang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
    background: var(--trang);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    /* Chừa thanh điều hướng của webview Zalo phía trên */
    padding-top: env(safe-area-inset-top, 0px);
}

/* Bề rộng khớp ĐÚNG khung nội dung bên dưới (.man) để logo và nút thẳng hàng
   với mép khung, không lệch ra ngoài. */
.dinh-trang-trong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 60px;
    padding: 0 20px;
    max-width: 520px;
    margin: 0 auto;
}

.dinh-trang-logo {
    display: flex;
    align-items: center;
    /* Cho phép co lại khi header chật, thay vì đẩy nút ra ngoài mép */
    flex: 0 1 auto;
    min-width: 0;
}

.dinh-trang-logo img {
    display: block;
    /* Logo ngang tỉ lệ 7.11 — đặt theo bề rộng, cao tự co.
       185px = 142px + 30% theo yêu cầu. */
    width: 185px;
    max-width: 100%;
    /* Không co nhỏ hơn mức còn đọc được chữ "APOLLO ENGLISH" */
    min-width: 118px;
    height: auto;
}

/* Tab Thể lệ — kiểu chữ trơn có gạch chân, nhẹ hơn nút hotline vàng để không
   tranh chỗ với CTA chính. */
.nut-the-le {
    flex: 0 0 auto;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--xanh-apollo);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nut-the-le:active {
    opacity: .7;
}

.nut-the-le:focus-visible {
    outline: 3px solid var(--xanh-apollo);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Nút bật/tắt nhạc — tròn, vùng chạm 40px theo chuẩn di động */
.nut-nhac {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    border: 1.5px solid rgba(28, 116, 188, .3);
    border-radius: 50%;
    background: transparent;
    color: var(--xanh-apollo);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}

.nut-nhac:active {
    transform: scale(.92);
}

/* Đang phát: nền xanh đặc + nốt nhạc nhún nhẹ theo nhịp */
.nut-nhac--bat {
    background: var(--xanh-apollo);
    border-color: var(--xanh-apollo);
    color: var(--trang);
}

.nut-nhac--bat .nut-nhac-icon {
    animation: nhun-nhac 1.2s ease-in-out infinite;
}

@keyframes nhun-nhac {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2.5px); }
}

/* Đang tắt: gạch chéo qua nốt nhạc cho biết trạng thái */
.nut-nhac:not(.nut-nhac--bat)::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transform: rotate(-45deg);
    opacity: .75;
}

.nut-nhac {
    position: relative;
}

.nut-nhac:focus-visible {
    outline: 3px solid var(--xanh-apollo);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .nut-nhac--bat .nut-nhac-icon {
        animation: none;
    }
}

/* Nút vàng bo tròn — cùng kiểu .hv3-btn-book của trang gốc */
.nut-dinh-trang {
    display: inline-flex;
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 14px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 36px;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    background: #FFCE1F;
    color: var(--than);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .2s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}

/* white-space: nowrap gộp khoảng trắng giữa "Hotline:" và số — dùng gap của
   flex để tách hai phần cho chắc. */
.nut-dinh-trang {
    gap: 5px;
}

.nut-dinh-trang strong {
    font-weight: 900;
}

/* Màn hẹp: bỏ chữ "Hotline:", chỉ giữ số — logo to hơn nên header đã chật */
.nhan-hotline {
    display: none;
}

@media (min-width: 430px) {
    .nhan-hotline {
        display: inline;
    }
}

.nut-dinh-trang:hover {
    background: #F5C21A;
}

.nut-dinh-trang:active {
    transform: scale(.96);
}

.nut-dinh-trang:focus-visible {
    outline: 3px solid var(--xanh-apollo);
    outline-offset: 2px;
}

/* ── FOOTER rút gọn ─────────────────────────────────────────────────────── */
.chan-trang {
    text-align: center;
    padding: 18px 20px calc(18px + var(--day-an-toan));
}

/* Thể lệ + nút nhạc nằm cùng hàng dưới logo */
.chan-trang-nut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}

.chan-trang-logo {
    display: inline-block;
    width: 132px;
    height: auto;
    opacity: .7;
}

/* ── Chữ ────────────────────────────────────────────────────────────────── */
/* Tiêu đề theo đúng format trang ket-qua của Apollo: Brauer NeueVN, in hoa,
   xanh Apollo trên nền sáng, không đổ bóng. */
.tieu-de {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: clamp(27px, 8.4vw, 40px);
    line-height: 1.02;
    letter-spacing: -.3px;
    text-align: center;
    color: var(--xanh-apollo);
    margin: 0 0 10px;
    text-wrap: balance;
}

/* Tiêu đề màn kết quả là câu dài — hạ cỡ chữ và nới dòng cho dễ đọc,
   khác với tiêu đề ngắn ở hai màn trước. */
.kq-tieu-de {
    font-size: clamp(21px, 6.2vw, 28px);
    line-height: 1.24;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 6px;
}

/* Tên bé được tô vàng để bật lên giữa câu */
.kq-tieu-de #kqTenBe {
    color: var(--hong);
}

/* Tiêu đề chương trình phải nằm gọn TRÊN MỘT DÒNG ở mọi bề ngang máy.
   "Mở kho học bổng tri thức" dài 24 ký tự; với Brauer NeueVN bề ngang trung
   bình ~0.47em mỗi ký tự nên cỡ chữ tối đa ≈ bề ngang khả dụng / 11.3.
   Dùng vw để cỡ chữ co theo máy, và nowrap để chặn xuống dòng. */
.tieu-de--mot-dong {
    font-size: min(7.4vw, 30px);
    white-space: nowrap;
    letter-spacing: -.2px;
}

.phu-de {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 22px;
    color: var(--nau-vang);
}

.nhan-manh {
    color: var(--hong);
    font-weight: 900;
}

/* Màn intro KHÔNG dùng ảnh nền trang, cũng KHÔNG có mascot hai bên — banner đã
   là toàn bộ phần hình, ở cả di động lẫn desktop. Các màn còn lại (quay, kết
   quả) vẫn giữ nền và mascot bình thường. */
body:has(#manGioiThieu.hien) .nen,
body:has(#manGioiThieu.hien) .mascot {
    display: none;
}

body:has(#manGioiThieu.hien) {
    background: var(--trang);
}

/* ── Màn 1: BANNER FULL MÀN ─────────────────────────────────────────────
   Toàn bộ nội dung intro nằm trong ảnh (kể cả nút "ĐĂNG KÝ NGAY"), nên màn này
   chỉ là một tấm ảnh phủ kín màn hình và bấm được.

   Ảnh hiển thị THEO BỀ NGANG khung, chiều cao tự chạy theo tỉ lệ — không phóng
   to, không cắt mép, không gò vào một màn.

   Lý do: banner chứa rất nhiều chữ nhỏ. `object-fit: cover` thì cắt mất nút
   "ĐĂNG KÝ NGAY" ở sát đáy ảnh (đo thực tế: mất trên iPhone SE và tablet), còn
   `contain` trong khung một màn lại thu ảnh xuống dưới cỡ gốc làm chữ mờ.
   ────────────────────────────────────────────────────────────────────── */
.man--intro {
    display: none;
}

.man--intro.hien {
    /* Xếp dọc: banner SÁT header, vòng quay mồi bên dưới.
       `flex-start` thay vì `center` để banner dính đỉnh — khoảng trống dồn
       xuống dưới, nơi vòng mồi đã lấp phần lớn. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    /* Chiếm trọn phần màn dưới header, trừ footer (~96px). `.man` đã có
       margin-top chừa header nên ở đây chỉ trừ footer. */
    /* border-box: padding-top nằm TRONG min-height, nên chỉ trừ footer.
       Footer đo thực tế cao 109px (logo + hàng nút). */
    min-height: calc(100svh - 109px);
    box-sizing: border-box;

    /* Phá khỏi khung nội dung 520px: banner tràn hết bề ngang trang, nhưng
       không vượt quá cỡ ảnh gốc (1000px) để chữ không bị phóng vỡ. */
    width: 100vw;
    max-width: 1000px;
    margin: 0 auto;
    /* Header cố định che phần trên: bù đúng bằng chiều cao header, không thêm
       lề nào nữa để banner nằm SÁT header. */
    padding: calc(60px + env(safe-area-inset-top, 0px)) 0 0;
}

/* Cả tấm banner là một nút.

   DI ĐỘNG: ảnh vuông 1:1 — để chiều cao chạy theo tỉ lệ ảnh (không gò vào
   chiều cao màn), nhờ vậy banner phủ hết bề ngang và không thừa dải trống
   trên/dưới. Màn hình cao hơn thì chỉ cần cuộn nhẹ. */
.banner-nut {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    /* KHÔNG đặt nền: ảnh tự lấp kín khung, đặt nền trắng sẽ lộ dải trắng hai
       bên khi tỉ lệ ảnh lệch tỉ lệ khung. Desktop có nền riêng ở dưới. */
    background: none;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.banner-nut:active .banner-anh {
    transform: scale(1.01);
}

.banner-nut:focus-visible {
    outline: 3px solid var(--xanh-apollo);
    outline-offset: -6px;
}

.banner-anh {
    display: block;
    width: 100%;
    height: auto;
    /* Banner phủ FULL BỀ NGANG, chiều cao tự chạy theo tỉ lệ ảnh.

       Không cắt, không kẹp chiều cao: nút "ĐĂNG KÝ NGAY" đã nằm sẵn trong ảnh
       nên phải thấy trọn tấm. Màn hình thấp thì cuộn nhẹ — chấp nhận được, đổi
       lại banner luôn hiện đủ và không bao giờ bị phóng. */
    width: 100%;
    height: auto;
    transition: transform .18s;
}

@media (prefers-reduced-motion: reduce) {
    .banner-anh {
        transition: none;
    }
    .banner-nut:active .banner-anh {
        transform: none;
    }
}

/* ── Vòng quay MỒI ở màn 1 (chỉ di động) ────────────────────────────────
   Banner 3:2 chỉ chiếm ~1/3 chiều cao màn điện thoại; vòng mồi lấp phần dư
   và mời chạm. Bấm vào mở popup form, không quay thật.
   ────────────────────────────────────────────────────────────────────── */
/* ĐANG ẨN: banner mobile dọc 9:16 phủ trọn chiều cao màn, không còn chỗ trống.
   Giữ lại toàn bộ mã (HTML + JS + CSS) — đổi thành `display: block` là dùng lại
   được nếu sau này quay về banner vuông/ngang. */
.vong-moi {
    display: none;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.vong-moi-khung {
    position: relative;
    display: block;
    /* Banner đã bị kẹp chiều cao ở trên nên phần còn lại là cố định: trần
       180px, và không quá 48vw để vòng không lấn bề ngang trên máy hẹp. */
    width: min(48vw, 180px);
    aspect-ratio: 1;
    margin: 0 auto;
}

.vong-moi canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Vành gold mảnh + bóng, gợi lại vòng thật ở màn 2 mà không cần vẽ đèn LED */
    box-shadow:
        0 0 0 3px #C9992A,
        0 0 0 9px var(--trang),
        0 0 0 11px rgba(198, 168, 126, .55),
        0 8px 22px rgba(6, 48, 126, .22);
}

/* Nút giả ở tâm — chỉ là chữ, cả vòng mới là vùng bấm thật */
.vong-moi-tam {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 4px solid var(--trang);
    background: linear-gradient(160deg, #124A9E 0%, #06307E 55%, #002A6C 100%);
    color: var(--trang);
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(11px, 3.2vw, 14px);
    line-height: 1.15;
    text-align: center;
    letter-spacing: .3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
    animation: dap 1.8s ease-in-out infinite;
}

.vong-moi:active .vong-moi-khung {
    transform: scale(.97);
    transition: transform .12s;
}

@media (prefers-reduced-motion: reduce) {
    .vong-moi-tam {
        animation: none;
    }
}

/* ── Thẻ nền mờ (thể lệ, form) ──────────────────────────────────────────── */
.the {
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(28, 116, 188, .16);
    border-radius: 18px;
    padding: 20px 18px;
    margin-bottom: 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.the-tieu-de {
    font-weight: 800;
    font-size: 17px;
    text-align: center;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

/* Hai gạch ngang hai bên tiêu đề, như ảnh tham chiếu */
.the-tieu-de::before,
.the-tieu-de::after {
    content: '';
    height: 1px;
    width: 44px;
    background: rgba(200, 155, 60, .55);
}

.the-noi-dung {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4A3B14;
    text-align: center;
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.o-nhap {
    margin-bottom: 14px;
}

.nhan {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--than);
}

.nhan .bat-buoc {
    color: var(--hong);
}

.o-nhap input[type="text"],
.o-nhap input[type="tel"] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: 12px;
    border: 2px solid #E2D9BF;
    background: #FFFDF6;
    color: var(--than);
    /* 16px trở lên để iOS không tự phóng to khi chạm vào ô nhập */
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    transition: border-color .18s;
}

.o-nhap input::placeholder {
    color: #9AA1AC;
    font-weight: 400;
}

.o-nhap input:focus {
    outline: none;
    border-color: var(--vang);
}

.o-nhap input[aria-invalid="true"] {
    border-color: var(--do-loi);
    background: #FFF2F2;
}

.loi {
    display: block;
    min-height: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--do-loi);
    margin-top: 5px;
}

.loi:empty {
    margin-top: 0;
}

/* Checkbox điều khoản */
.o-tick {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 16px 0 4px;
    cursor: pointer;
}

.o-tick input[type="checkbox"] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--hong);
    /* vùng chạm rộng hơn ô nhìn thấy */
    transform: translateY(1px);
}

.o-tick span {
    font-size: 14px;
    line-height: 1.5;
    color: #4A3B14;
}

.lien-ket {
    color: var(--xanh-apollo);
    font-weight: 800;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}

/* ── Nút ────────────────────────────────────────────────────────────────── */
.nut {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 15px 26px;
    border: 0;
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s, box-shadow .2s, background-color .2s;
    -webkit-tap-highlight-color: transparent;
}

/* CTA theo mẫu: navy sâu, viền gold mảnh */
.nut--chinh {
    background: linear-gradient(180deg, #0A3A8C 0%, var(--xanh-sau) 100%);
    color: var(--trang);
    border: 2px solid var(--gold);
    box-shadow: 0 6px 22px rgba(0, 42, 108, .4);
}

.nut--chinh:active {
    transform: scale(.975);
}

.nut--chinh:disabled {
    background: rgba(122, 90, 18, .18);
    color: rgba(74, 59, 20, .5);
    box-shadow: none;
    cursor: not-allowed;
}

.nut--phu {
    background: transparent;
    color: var(--xanh-dam);
    border: 2px solid rgba(28, 116, 188, .5);
    box-shadow: none;
}

.nut--phu:active {
    transform: scale(.975);
}

.nut:focus-visible {
    outline: 3px solid var(--xanh-apollo);
    outline-offset: 3px;
}

/* ── Màn 2: vòng quay ───────────────────────────────────────────────────── */
/* ── Tiêu đề màn quay: 2 dòng ───────────────────────────────────────────
   Nhãn "Lượt n" nhỏ ở trên, tên lượt cỡ lớn bên dưới.
   ────────────────────────────────────────────────────────────────────── */
.khoi-luot {
    text-align: center;
    margin-bottom: 12px;
}

.nhan-luot {
    margin: 0 0 4px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--nau-vang);
}

.nhan-luot[hidden] {
    display: none;
}

/* Tên lượt — dòng chính. Lượt 3 dài 40 ký tự nên cỡ chữ vừa phải và cho
   xuống dòng cân đối. */
.tieu-de--luot {
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.12;
    margin: 0;
}

/* Ghi chú điều kiện dưới vòng quay */
.ghi-chu-quyen-loi {
    margin: 10px 0 0;
    font-size: 12.5px;
    font-style: italic;
    text-align: center;
    color: var(--nau-vang);
}

.cham-hang {
    display: flex;
    gap: 9px;
    justify-content: center;
    margin-top: 0;
    /* Chừa khoảng cho kim chỉ nhô lên khỏi mép vòng (kim cao 44px, thò
       lên trên khung 14px) — nếu không, chấm sẽ đè lên đầu kim. */
    margin-bottom: 20px;
}

.cham {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(122, 90, 18, .25);
    transition: background-color .3s, transform .3s;
}

.cham.xong {
    background: var(--hong);
    transform: scale(1.18);
}

.cham.dang {
    background: var(--xanh-apollo);
}

/* Khung vòng quay — hình vuông, co theo bề ngang màn hình */
.khung-vong {
    position: relative;
    width: min(90vw, 380px);
    aspect-ratio: 1;
    /* Chừa chỗ cho kim nhô lên và cho vành đèn nhô ra 22px mỗi bên */
    margin: 30px auto 40px;
}

/* VIỀN HAI LỚP quanh mặt vòng, theo mẫu luckywheel.png:
     lớp 1 — vòng gold MẢNH ôm sát mép các múi,
     lớp 2 — vành trắng dày tách nó khỏi vành đèn bên ngoài.
   Cả hai dựng bằng box-shadow chồng nhau nên không cần thêm thẻ. */
.khung-vong canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    box-shadow:
        0 0 0 3px #C9992A,
        0 0 0 4px rgba(255, 245, 205, .55),
        0 0 0 12px var(--trang),
        0 10px 30px rgba(0, 0, 0, .3);
}

/* ══════════════════════════════════════════════════════════════════════════
   VÀNH ĐÈN LED
   Một đĩa lớn hơn vòng quay, nằm phía sau, mang 24 bóng đèn đặt đều theo chu
   vi. Mỗi bóng được JS xoay ra đúng vị trí của nó.

   Dùng bóng đèn RỜI thay vì viền phát sáng: giống máy vòng quay thật, và chạy
   được kiểu đèn đuổi (chẵn/lẻ nhấp nháy so le).
   ══════════════════════════════════════════════════════════════════════════ */
.vanh-led {
    position: absolute;
    /* Canvas đã có vành trắng 10px do box-shadow. Vành đèn phải nhô ra XA hơn
       thế, nếu không bóng đèn bị lớp trắng đó phủ mất. */
    inset: -34px;
    border-radius: 50%;
    /* Vành VÀNG GOLD chuyển sắc như kim loại đánh bóng, theo mẫu tham khảo */
    background:
        linear-gradient(150deg,
            #FBEBB0 0%, #E0B94A 18%, #C9992A 38%,
            #F5DC94 55%, #C9992A 74%, #A8781C 100%);
    box-shadow:
        /* Viền gold đậm ngoài cùng, khép lại lớp thứ hai */
        0 0 0 2px #A8781C,
        0 10px 30px rgba(140, 105, 25, .38),
        inset 0 2px 6px rgba(255, 250, 220, .85),
        inset 0 -4px 10px rgba(120, 88, 18, .45);
    z-index: 0;
}

/* Canvas và kim phải nổi trên vành đèn */
.khung-vong canvas,
.kim,
.nut-quay {
    position: relative;
    z-index: 1;
}

.kim {
    z-index: 3;
}

.nut-quay {
    z-index: 2;
}

/* Một bóng đèn. JS đặt --goc cho từng bóng; chuỗi transform xoay bóng ra mép
   rồi xoay ngược lại để bóng luôn tròn đều. */
.den {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    transform:
        rotate(var(--goc))
        translateY(calc(var(--ban-kinh-den) * -1));
    background: #FFFFFF;
    box-shadow:
        0 0 8px 3px rgba(255, 252, 235, .95),
        0 0 20px 7px rgba(255, 236, 160, .7);
    animation: den-nhap 1.1s ease-in-out infinite;
}

/* Bóng lẻ lệch pha nửa nhịp → hiệu ứng đèn chạy so le */
.den--le {
    animation-delay: .55s;
}

@keyframes den-nhap {
    0%, 100% {
        background: #FFFFFF;
        box-shadow:
            0 0 8px 3px rgba(255, 252, 235, .95),
            0 0 20px 7px rgba(255, 236, 160, .7);
    }
    50% {
        /* Tắt gần hẳn, chỉ còn ánh mờ như bóng đèn đang nguội */
        background: #B08E32;
        box-shadow: 0 0 3px 1px rgba(176, 142, 50, .45);
    }
}

/* Lúc ĐANG QUAY: đèn chạy nhanh gấp ~3,5 lần cho khớp nhịp hồi hộp */
.khung-vong.dang-quay .den {
    animation-duration: .32s;
}

/* Máy bật giảm chuyển động: đèn đứng yên, sáng đều */
@media (prefers-reduced-motion: reduce) {
    .den {
        animation: none;
    }
}

/* Kim chỉ hồng ở đỉnh, chồng lên mép vòng */
.kim {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 44px;
    z-index: 3;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
}

/* Nút QUAY tròn ở tâm vòng */
.nut-quay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 27%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 5px solid var(--trang);
    /* Ăn theo navy của vòng quay và nút CTA */
    background: linear-gradient(160deg, #124A9E 0%, #06307E 55%, #002A6C 100%);
    color: var(--trang);
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(15px, 4.4vw, 19px);
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: transform .12s;
    -webkit-tap-highlight-color: transparent;
}

.nut-quay:active:not(:disabled) {
    transform: translate(-50%, -50%) scale(.93);
}

.nut-quay:disabled {
    cursor: default;
    opacity: .75;
}

/* Nhịp đập nhẹ mời chạm, tắt khi đang quay */
.nut-quay.moi-cham {
    animation: dap 1.7s ease-in-out infinite;
}

@keyframes dap {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 0 rgba(255, 255, 255, .5); }
    55%      { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 14px rgba(255, 255, 255, 0); }
}

/* ── Màn 3: kết quả ─────────────────────────────────────────────────────── */
/* Card gọn: một dòng ngang, chỉ đủ nêu lượt + giá trị. Cố ý làm nhẹ để phần
   chữ bên dưới (lời cảm ơn, 3 gạch đầu dòng, khẩu hiệu) mới là điểm nhìn. */
.the-kq {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(28, 116, 188, .14);
    border-radius: 11px;
    padding: 8px 12px;
    margin-bottom: 6px;
}

.the-kq-so {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(28, 116, 188, .14);
    color: var(--xanh-dam);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
}

/* Nhãn và giá trị nằm cùng một dòng, đẩy về hai phía — thay vì xếp chồng */
.the-kq-than {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.the-kq-nhan {
    font-size: 18px;
    color: var(--nau-vang);
    margin: 0;
    flex: 0 0 auto;
}

.the-kq-tien {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.2;
    color: var(--xanh-apollo);
    margin: 0;
    flex: 1 1 auto;
}

/* Thẻ học bổng cao nhất — viền vàng, nền sáng, có huy hiệu */
/* Thẻ cao nhất vẫn nhận ra ngay nhờ viền hồng, nhưng không phóng to hay toả
   sáng nữa — để phần chữ bên dưới giữ vai trò điểm nhìn. */
.the-kq--cao-nhat {
    background: #FFF0F7;
    border: 1.5px solid var(--hong);
}

.the-kq--cao-nhat .the-kq-so {
    background: var(--hong);
    color: var(--trang);
}

.the-kq--cao-nhat .the-kq-tien {
    color: var(--hong);
    font-size: 27px;
}

.huy-hieu {
    display: inline-block;
    /* Chiếm dòng riêng bên dưới giá trị, không chen ngang */
    flex: 0 0 100%;
    align-self: flex-start;
    width: max-content;
    background: var(--hong);
    color: var(--trang);
    /* Giữ sàn 18px nhưng bỏ in hoa + giãn chữ: ở 18px mà in hoa thì huy hiệu
       dài bằng cả dòng, lấn át chính con số học bổng. */
    font-size: 18px;
    font-weight: 900;
    text-transform: none;
    letter-spacing: 0;
    padding: 3px 12px;
    border-radius: 999px;
    margin: 0;
}

.tong-tien {
    text-align: center;
    margin: 18px 0 22px;
    font-size: 15px;
    color: rgba(255, 255, 255, .88);
}

.tong-tien strong {
    display: block;
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 30px;
    color: var(--vang);
    margin-top: 3px;
}

/* Khung viền bao cả màn kết quả — nền trắng mờ 0.8 để hoạ tiết nền vẫn thấp
   thoáng phía sau, viền navy nhạt cho gọn khối. */
#manKetQua.hien {
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(6, 48, 126, .18);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(6, 48, 126, .1);
    padding: 26px 22px;
}

/* ── Màn kết quả: hai cột ───────────────────────────────────────────────
   Di động xếp chồng (một cột); desktop tách đôi, ngăn bằng đường chấm nhẹ.
   ────────────────────────────────────────────────────────────────────── */
.kq-hai-cot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

/* Trên DI ĐỘNG hai khối nằm chồng nên đường ngăn phải là gạch NGANG */
.kq-cot--phai {
    border-top: 2px dotted rgba(28, 116, 188, .3);
    padding-top: 20px;
}

/* ── Ghi chú màn kết quả ────────────────────────────────────────────────
   Trình bày phẳng trên nền trang, không khung — để 3 dòng voucher phía trên
   vẫn là phần bắt mắt nhất.
   ────────────────────────────────────────────────────────────────────── */
.kq-ghi-chu {
    margin: 26px 0 4px;
    text-align: center;
}

.kq-cam-on {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.6;
    color: #4A3B14;
}

.kq-cam-on em {
    font-style: normal;
    font-weight: 800;
    color: var(--xanh-apollo);
}

.kq-dan {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--than);
}

/* Ba gạch đầu dòng: căn trái để dễ đọc, dấu ✓ xanh thay bullet tròn */
.kq-danh-sach {
    list-style: none;
    margin: 0 auto 20px;
    padding: 0;
    max-width: 34ch;
    text-align: left;
}

.kq-danh-sach li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.55;
    color: #4A3B14;
}

.kq-danh-sach li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 900;
    color: var(--xanh-apollo);
}

/* Khối xác nhận tĩnh ở màn kết quả — thay cho nút CTA cũ. Dữ liệu đã gửi từ
   lúc submit form nên đây chỉ là lời báo, không phải hành động. */
/* Link "Xem điều kiện và điều khoản áp dụng" dưới danh sách voucher */
.kq-link-dk {
    margin: 12px 0 0;
    text-align: center;
}

.kq-link-dk .lien-ket {
    font-size: 18px;
    /* Chữ thường, không in đậm — đây là ghi chú phụ, không phải hành động
       chính (nút "Tư vấn qua Zalo" mới là CTA của màn này). */
    font-weight: 400;
}

/* Nút "Tư vấn qua Zalo" — xanh Zalo để nhận ra ngay đây là kênh chat, không lẫn
   với CTA navy của chương trình.

   DI ĐỘNG: dính đáy màn hình. Màn kết quả cao 911–987px so với viewport
   740–852px nên nút nằm cuối cột phải sẽ khuất, phải cuộn 104–292px mới thấy —
   mà đây là hành động chính của màn này. */
.nut--zalo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 22px;
    position: sticky;
    bottom: calc(10px + var(--day-an-toan));
    z-index: 4;
    background: linear-gradient(180deg, #2B8CFF 0%, #0068FF 100%);
    color: var(--trang);
    border: 0;
    box-shadow: 0 6px 20px rgba(0, 104, 255, .32);
}

.nut--zalo:hover {
    background: linear-gradient(180deg, #1A7FF5 0%, #005AE0 100%);
}

/* CTA dính đáy màn hình — luôn thấy được mà không phải cuộn */
.cta-day {
    position: sticky;
    bottom: 0;
    padding: 14px 0 calc(6px + var(--day-an-toan));
    /* Nền mờ dần để chữ phía sau không dính vào nút */
    background: linear-gradient(to top, #F2F7FC 62%, rgba(242, 247, 252, 0));
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.trang-thai-gui {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin: 10px 0 0;
    min-height: 20px;
}

.trang-thai-gui.loi-gui {
    color: var(--do-loi);
}

.trang-thai-gui.xong-gui {
    color: #1F7A3D;
}

/* ── Popup kết quả từng lượt ────────────────────────────────────────────── */
.lop-phu {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(74, 59, 20, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: mo-dan .25s ease both;
}

.lop-phu[hidden] {
    display: none;
}

@keyframes mo-dan {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Popup dạng HỘP, chiều cao TỰ GIÃN theo nội dung.

   KHÔNG ràng `aspect-ratio` theo tỉ lệ ảnh nền như trước: nó khoá chiều cao nên
   nội dung 332–348px bị nhồi vào khung 271–323px và chữ dính vào nhau.

   Bề ngang 92vw (rộng hơn mức 440px cũ trên máy lớn) và cao tối đa 92svh — đủ
   chỗ cho nội dung dài nhất mà vẫn thấy rõ đây là hộp nổi trên nền mờ. Ảnh nền
   dùng `cover` vì khung không còn cùng tỉ lệ với ảnh. */
.hop-thoai {
    width: 92vw;
    max-width: 480px;
    min-height: 0;
    max-height: 92svh;
    overflow-y: auto;
    /* Nền ảnh theo mẫu bg_popup.png.

       Ảnh gốc tỉ lệ 1,15 (ngang) trong khi popup di động là khung DỌC 0,48 —
       `cover` sẽ cắt mất hai đầu và chỉ chừa lại mảng trắng ở giữa ảnh. Nên
       dùng bản dọc dựng riêng (ghép gương) cho di động, bản gốc cho desktop. */
    background: #EFF6FD url("/landings/niem-vui-nhan-ba-vua-van-de-bay-xa/assets/img/bg-popup.webp") no-repeat center / cover;
    color: var(--than);
    border-radius: 20px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
    animation: bat-len .32s cubic-bezier(.2, 1.2, .4, 1) both;
}

@keyframes bat-len {
    from { opacity: 0; transform: scale(.88) translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.hop-thoai-tieu-de {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 25px;
    color: var(--xanh-apollo);
    margin: 0 0 8px;
}

.hop-thoai-tieu-de[hidden] {
    display: none;
}

/* Đây là cả một câu chúc, không phải con số đứng riêng — dùng Nunito cho dễ
   đọc, cỡ vừa phải, và tô đậm riêng phần số tiền bên trong. */
.hop-thoai-tien {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.4;
    color: var(--than);
    margin: 4px 0 14px;
    text-wrap: balance;
}

/* Dòng dẫn nhỏ phía trên giá trị học bổng */
/* Dòng chúc — ĐỎ in hoa theo mẫu popup.jpg */
.dan-nhan-duoc {
    display: block;
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: clamp(17px, 4.6vw, 21px);
    line-height: 1.25;
    text-transform: uppercase;
    color: #D02028;
    margin-bottom: 12px;
    text-wrap: balance;
}

/* GIÁ TRỊ HỌC BỔNG — điểm nhấn duy nhất của popup. Không khung nền, chỉ dùng
   cỡ chữ lớn và màu hồng đậm để nổi hẳn giữa nền trắng phẳng. */
/* GIÁ TRỊ HỌC BỔNG — điểm nhấn lớn nhất popup, xanh đậm theo mẫu */
.so-tien-trung {
    display: block;
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: clamp(32px, 9.4vw, 44px);
    /* 1.15: Brauer NeueVN thân chữ cao, chật quá thì dấu tiếng Việt chạm dòng */
    line-height: 1.15;
    color: var(--xanh-apollo);
    text-transform: uppercase;
    letter-spacing: -.5px;
    margin-bottom: 22px;
    text-wrap: balance;
    text-shadow: 0 2px 6px rgba(255, 255, 255, .9);
}

/* .hop-thoai là mốc định vị cho nút đóng */
.hop-thoai {
    position: relative;
}

/* Popup trúng thưởng: dùng flex-column để .nhac-luot (order:10) tụt xuống dưới
   nút, đúng thứ tự của mẫu popup.jpg. */
#hopThoaiTrung > * {
    flex: 0 0 auto;
}

/* Popup trúng thưởng ít chữ nên canh giữa màn cho cân, khác popup form dài */
#hopThoaiTrung,
.hop-thoai--dieu-khoan {
    justify-content: center;
}

/* Popup form và điều khoản có nhiều chữ hơn ảnh nền vuông chứa nổi — bỏ ràng
   buộc tỉ lệ, để khung cao theo nội dung. */
.hop-thoai--form,
.hop-thoai--dieu-khoan {
    aspect-ratio: auto;
}

/* Popup form: căn trái cho các ô nhập, chừa chỗ cho nút đóng góc phải */
.hop-thoai--form {
    text-align: left;
    padding-top: 30px;
}

.hop-thoai--form .hop-thoai-tieu-de,
.hop-thoai--form .hop-thoai-chu {
    text-align: center;
}

.hop-thoai--form .hop-thoai-chu {
    margin-bottom: 18px;
    font-size: 14px;
    /* Câu dẫn nay dài 2–3 dòng nên cần nới dòng cho dễ đọc */
    line-height: 1.6;
    text-align: left;
}

/* Tiêu đề form là câu chào hàng 2 dòng, không phải nhãn ngắn */
.form-tieu-de {
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.25;
    text-wrap: balance;
}

/* Vế "10 triệu đồng / phần" — phần đắt giá nhất của câu */
.form-nhan {
    display: inline-block;
    margin-top: 3px;
    color: var(--hong);
    font-size: 1.28em;
}

/* Ô nhập trong popup nằm trên nền TRẮNG, không phải nền xanh — đổi viền và
   màu chữ cho hợp, nếu không viền trắng mờ sẽ tàng hình. */
.hop-thoai--form .o-nhap input[type="text"],
.hop-thoai--form .o-nhap input[type="tel"] {
    background: #F6F8FA;
    border-color: #D8DEE6;
}

.hop-thoai--form .o-nhap input:focus {
    border-color: var(--xanh-apollo);
    background: var(--trang);
}

.hop-thoai--form .o-tick span {
    color: #445064;
}

.hop-thoai--form .lien-ket {
    color: var(--xanh-apollo);
}

.hop-thoai--form .loi {
    color: var(--do-loi);
}

/* Nút gửi lúc chưa hợp lệ: kiểu disabled mặc định là trắng-mờ, vốn dành cho
   nền xanh — đặt trên nền TRẮNG của popup thì tàng hình. Đổi sang xám đặc. */
.hop-thoai--form .nut--chinh:disabled {
    background: #DFE4EA;
    color: #98A1AD;
}

/* Nút đóng góc trên bên phải — vùng chạm 44px theo chuẩn di động */
.nut-dong {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #8A93A0;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

.nut-dong:active {
    background: rgba(0, 0, 0, .06);
}

/* ── Popup lượt chốt 10 triệu — dựng riêng cho khác hẳn 2 lượt đầu ────── */
.hop-thoai--dinh-cao {
    /* Giữ nền ảnh chung, chỉ phủ thêm lớp vàng kem mờ để tách khỏi lượt thường */
    background-image:
        linear-gradient(165deg, rgba(255, 253, 242, .55) 0%, rgba(255, 244, 206, .6) 100%),
        url("/landings/niem-vui-nhan-ba-vua-van-de-bay-xa/assets/img/bg-popup.webp");
    background-size: 100% 100%, 100% 100%;
    border: 3px solid var(--vang);
    box-shadow:
        0 0 0 6px rgba(255, 216, 77, .28),
        0 20px 56px rgba(0, 0, 0, .4);
    animation: bat-len-manh .55s cubic-bezier(.2, 1.5, .35, 1) both;
}

/* Bật lên mạnh hơn, có nhún nhẹ ở cuối */
@keyframes bat-len-manh {
    0%   { opacity: 0; transform: scale(.6) translateY(24px); }
    60%  { opacity: 1; transform: scale(1.06); }
    80%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

.hop-thoai--dinh-cao .hop-thoai-tieu-de {
    font-size: 23px;
    line-height: 1.2;
    color: var(--vang-dam);
    letter-spacing: .2px;
    text-wrap: balance;
}

.hop-thoai--dinh-cao .hop-thoai-tien {
    font-size: 21px;
    color: #7A5A12;
}

/* Con số lượt chốt to hơn hẳn và có ánh vàng */
/* Lượt chốt: chữ vàng gradient cũ CHÌM vào nền ảnh sáng vàng-trắng. Dùng xanh
   cobalt như các lượt khác cho đọc được, và giữ khác biệt bằng cỡ chữ lớn hơn
   cùng viền sáng quanh chữ. */
.hop-thoai--dinh-cao .so-tien-trung {
    font-size: clamp(34px, 9.4vw, 46px);
    color: var(--xanh-dam);
    text-shadow:
        0 0 10px rgba(255, 255, 255, .95),
        0 2px 4px rgba(255, 255, 255, .9);
    animation: nhip-tien 1.1s ease-in-out infinite;
}

@keyframes nhip-tien {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.hop-thoai--dinh-cao .hop-thoai-chu {
    color: #7A5A12;
    font-weight: 700;
}

.hop-thoai--dinh-cao .nut--hop-thoai {
    background: linear-gradient(135deg, #FFB800, #EE3D8F);
}

/* Số lượt vừa quay — dòng nhỏ trên cùng popup, nhạt hơn tiêu đề để không
   tranh chỗ với câu chúc. */
.popup-luot {
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--xam);
}

.hop-thoai--dinh-cao .popup-luot {
    color: var(--vang-dam);
}

/* Dải "GIẢI CAO NHẤT" trên đầu popup lượt chốt */
.dai-dinh-cao {
    display: inline-block;
    background: var(--vang);
    color: #6B4E0A;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 6px 16px;
    border-radius: 999px;
    margin: 0 0 12px;
    box-shadow: 0 3px 10px rgba(200, 155, 60, .4);
}

.dai-dinh-cao[hidden] {
    display: none;
}

.hop-thoai-chu {
    font-size: 15px;
    line-height: 1.6;
    color: var(--xam);
    margin: 0 0 20px;
}

/* Dòng nhắc còn lượt quay — đây là thứ kéo người chơi bấm "Quay tiếp",
   nên dựng thành khối riêng có nền, không để chìm thành chữ xám. */
/* Trình bày PHẲNG: không khung, không nền — chỉ là một câu chữ chảy bình
   thường, để giá trị học bổng phía trên là thứ duy nhất nổi lên. */
/* Câu nhắc lượt — theo mẫu nằm DƯỚI nút, chữ xám nhỏ */
.nhac-luot {
    display: block;
    order: 10;              /* đẩy xuống cuối khối flex của popup */
    text-align: center;
    padding: 0;
    margin: 16px 0 0;
    color: #6E7683;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.55;
}

/* Con số lượt còn lại: viên tròn hồng cho đập vào mắt */
/* Chỉ tô đậm bằng màu, không viên nền — giữ dòng chữ phẳng */
.so-luot-con {
    color: #D02028;
    font-weight: 900;
}

/* Điều khoản: căn trái cho dễ đọc, khác popup trúng thưởng */
.hop-thoai--dieu-khoan {
    text-align: left;
}

.hop-thoai--dieu-khoan h2 {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: 21px;
    color: var(--xanh-apollo);
    margin: 0 0 12px;
    text-align: center;
}

.hop-thoai--dieu-khoan li {
    font-size: 14px;
    line-height: 1.65;
    color: #40484F;
    margin-bottom: 8px;
}

.hop-thoai--dieu-khoan ol {
    padding-left: 20px;
    margin: 0 0 20px;
}

/* Nút theo mẫu: xanh navy chuyển sắc, viền gold mảnh */
.nut--hop-thoai {
    background: linear-gradient(180deg, #0A3A8C 0%, var(--xanh-sau) 100%);
    color: var(--trang);
    border: 2px solid var(--gold);
    box-shadow: 0 4px 14px rgba(22, 76, 158, .35);
}

/* Lớp confetti phủ toàn màn, không chắn thao tác */
#lopConfetti {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}

/* Chỉ dành cho trình đọc màn hình */
.chi-doc-man-hinh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Tôn trọng cài đặt giảm chuyển động của máy ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .nut-quay.moi-cham,
    .nut--quay-ngay {
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   BẢN DESKTOP  (≥ 900px)

   Truyền thông chạy qua Zalo nên di động vẫn là chính, nhưng link được chia sẻ
   lại trên máy tính thì trang phải ra dáng, không phải một cột hẹp giữa màn
   hình rộng. Ba thay đổi chính:

     1. Intro thành HAI CỘT — chữ bên trái, CTA bên phải, không còn dính đáy.
     2. Vòng quay to hơn, đặt cạnh phần chữ hướng dẫn.
     3. Kết quả xếp ba thẻ NGANG hàng thay vì dọc.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

    .man {
        max-width: 1080px;
        padding: 48px 40px 40px;
    }

    /* DESKTOP: KHÔNG gò chiều cao, KHÔNG phóng ảnh.

       Banner chứa rất nhiều chữ nhỏ; ép nó vừa một màn bằng object-fit sẽ thu
       ảnh xuống dưới cỡ gốc và làm chữ mờ. Thay vào đó kẹp bề ngang ở đúng cỡ
       ảnh gốc (1600px) và để chiều cao chạy theo tỉ lệ — người dùng cuộn nhẹ
       nếu màn thấp, đổi lại chữ luôn sắc nét. */
    .man--intro.hien {
        max-width: 1600px;
    }

    .banner-nut {
        background: var(--trang);
    }

    .man--intro.hien {
        /* padding-bottom cân bằng phần footer để banner nằm đúng giữa khoảng
           trống nhìn thấy, không lệch lên 20px như khi chỉ có padding-top. */
        /* Desktop: banner 3:2 đã chiếm 630–910px, không còn chỗ cho vòng mồi */
    .vong-moi {
        display: none;
    }

    /* Desktop giữ nền trắng + canh giữa dọc (không có vòng mồi bên dưới) */
    .man--intro.hien {
        justify-content: center;
    }

    .banner-nut {
        background: var(--trang);
    }

    .banner-anh {
        /* Desktop: ảnh 3:2 vừa khung, dùng contain để thấy trọn banner */
        height: auto;
        max-height: calc(100svh - 60px - 109px);
        object-fit: contain;
    }

    /* Header thực đo 60px (luật 80px desktop đã bỏ từ lần sửa trước).
           KHÔNG đặt padding-bottom: flex `align-items: center` đã chia đều
           khoảng trống hai đầu; thêm padding một phía sẽ làm lệch. */
        padding-top: 60px;
        min-height: calc(100svh - 109px);
    }

    /* Kẹp bề ngang banner theo CHIỀU CAO còn trống: ảnh 16:9 nên bề ngang tối
       đa = chiều cao khả dụng × 1,78. Nhờ vậy banner vừa trọn một màn mà vẫn
       chỉ thu nhỏ (không bao giờ phóng quá cỡ gốc 1600px). */
    .banner-nut {
        /* 1,78 = tỉ lệ ảnh desktop 16:9. Kẹp bề ngang theo chiều cao còn
           trống để banner luôn vừa một màn, kể cả màn rộng 1920. */
        /* 1,5 = tỉ lệ ảnh banner mới (3:2). Kẹp bề ngang theo chiều cao còn
           trống để banner luôn vừa một màn. */
        max-width: min(1536px, calc((100svh - 60px - 109px) * 1.5));
        margin: 0 auto;
        /* Banner có nền sáng riêng, không trùng nền trắng của trang — bo góc,
           viền mảnh và đổ bóng để tấm ảnh tách hẳn ra thay vì lẫn vào nền. */
        border: 1px solid rgba(6, 48, 126, .16);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 34px rgba(6, 48, 126, .16);
    }

    /* Chữ hướng dẫn + ghi chú quyền lợi đẩy xuống ĐÁY màn quay, tách khỏi vòng
       quay để mắt tập trung vào vòng. */
    #manQuay.hien {
        justify-content: flex-start;
    }

    #manQuay .the-noi-dung {
        margin-top: auto;
        padding-top: 20px;
    }

    #manQuay.hien {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Màn kết quả canh GIỮA theo chiều dọc của phần màn còn lại
       (trừ header 80px + footer ~110px) */
    #manKetQua.hien {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100svh - 104px - 130px);
    }

    /* KHÔNG đặt min-height: nó cộng dồn với margin-top 104px và footer 80px
       làm trang cao hơn màn. Để chiều cao chạy theo nội dung, vòng quay đã tự
       co bằng min() ở trên. */
    #manQuay.hien {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .nhan-luot {
        font-size: 20px;
    }

    /* ── Màn quay: vòng to hơn ──────────────────────────────────────── */

    /* Vòng quay phải LỌT TRONG MỘT MÀN, kể cả MacBook 15" ở chế độ cửa sổ
       (viewport ~800px). Đo thực tế các khối quanh nó trên desktop:

         header 80 + lề trên 24 + tiêu đề 88 + chấm 31
         + lề vòng 38 + hướng dẫn 24 + ghi chú 27 + lề dưới 24 + footer 80
         ≈ 416px

       Trừ thêm 24px đệm an toàn → 440. `min()` giữ trần 440px để trên màn
       cao hơn vòng không phình quá cỡ. */
    .khung-vong {
        width: min(440px, calc(100svh - 470px));
        margin: 14px auto 16px;
    }

    .tieu-de {
        font-size: 40px;
    }

    /* ── Màn kết quả: ba thẻ nằm ngang ──────────────────────────────── */
    .kq-tieu-de {
        font-size: 30px;
    }

    /* Hai cột cân nhau, ngăn bằng đường CHẤM DỌC */
    .kq-hai-cot {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        align-items: start;
    }

    .kq-cot--trai {
        padding-right: 40px;
    }

    /* Đường ngăn chuyển từ ngang sang dọc */
    .kq-cot--phai {
        border-top: 0;
        border-left: 2px dotted rgba(28, 116, 188, .3);
        padding-top: 0;
        padding-left: 40px;
    }

    /* Cột trái: nội dung căn trái cho khớp mép đường ngăn */
    .kq-cot--trai .kq-tieu-de {
        text-align: left;
    }

    .kq-cot--phai .kq-ghi-chu {
        margin-top: 0;
        text-align: left;
    }

    .kq-cot--phai .kq-danh-sach {
        margin-left: 0;
    }

    /* Cột trái hẹp hơn cả trang nên 3 voucher trở lại xếp DỌC */
    #danhSachKQ {
        display: block;
    }

    .the-kq {
        gap: 12px;
        padding: 11px 15px;
    }

    /* Thẻ cao nhất không phóng to nữa — hàng ngang mà scale sẽ đè thẻ bên cạnh */
    .the-kq--cao-nhat {
        transform: none;
    }

    .the-kq-tien {
        font-size: 21px;
    }

    .the-kq--cao-nhat .the-kq-tien {
        font-size: 24px;
    }

    /* Giữ sàn 18px như bản di động — 16px cũ làm chữ nhỏ trên màn lớn */
    .kq-cam-on,
    .kq-dan,
    .kq-danh-sach li {
        font-size: 19px;
        line-height: 1.6;
    }

    .kq-danh-sach {
        max-width: 40ch;
    }

        /* Desktop: màn kết quả vừa một màn nên nút không cần dính đáy */
    .nut--zalo {
        position: static;
    }

    /* CTA kết quả: thôi dính đáy, gom về giữa */
    .cta-day {
        position: static;
        background: none;
        margin: 26px auto 0;
        padding: 0;
        max-width: 460px;
    }

    /* ── Popup to hơn 30% trên desktop ──────────────────────────────────
       Không dùng transform: scale() vì nó phóng cả đường viền và làm chữ mờ
       trên một số màn. Thay vào đó phóng từng đại lượng theo hệ số 1,3 để mọi
       thứ vẫn nét. Cỡ mobile ghi trong ngoặc để dễ đối chiếu. */
    /* DESKTOP: trả popup về dạng HỘP (di động mới là full màn), rộng thêm 20%
       so với mức cũ: 494 × 1,2 ≈ 593px. */
    .lop-phu {
        padding: 24px;
    }

    /* DESKTOP: trả popup về dạng HỘP (di động mới là full màn) */
    .hop-thoai {
        max-width: 593px;
        min-height: 0;
        max-height: 88svh;
        border-radius: 28px;
        padding: 38px 34px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    }

    .nut-dong {
        top: 8px;
    }

    .popup-luot {
        font-size: 17px;         /* 13 */
        margin-bottom: 8px;
    }

    .hop-thoai-tieu-de {
        font-size: 32px;         /* 25 */
        margin-bottom: 10px;
    }

    .hop-thoai-tien {
        font-size: 26px;         /* 20 */
        margin-bottom: 18px;
    }

    .dan-nhan-duoc {
        font-size: 25px;
    }

    /* Giá trị học bổng — điểm nhấn chính, phóng theo đúng hệ số */
    .so-tien-trung {
        font-size: 52px;
    }

    .nhac-luot {
        font-size: 19px;
        margin-top: 20px;
    }

    .so-luot-con {
        font-size: 21px;         /* 16 */
    }

    .nut--hop-thoai {
        min-height: 66px;        /* 56 */
        font-size: 20px;         /* 17 */
    }

    /* Popup lượt chốt */
    .dai-dinh-cao {
        font-size: 15px;         /* 12 */
        padding: 8px 20px;
    }

    .hop-thoai--dinh-cao .hop-thoai-tieu-de {
        font-size: 30px;         /* 23 */
    }

    .hop-thoai--dinh-cao .hop-thoai-tien {
        font-size: 27px;         /* 21 */
    }

    .hop-thoai--dinh-cao .so-tien-trung {
        font-size: 52px;         /* 40 */
    }

    /* Popup form: các ô nhập cũng phóng theo cho cân */
    .hop-thoai--form .o-nhap input[type="text"],
    .hop-thoai--form .o-nhap input[type="tel"] {
        height: 60px;            /* 52 */
        font-size: 17px;
    }

    .hop-thoai--form .o-tick span,
    .hop-thoai--form .hop-thoai-chu {
        font-size: 16px;         /* 14 */
    }

    .form-tieu-de {
        font-size: 26px;
    }

    .nut-dong {
        top: 8px;
        width: 52px;             /* 44 */
        height: 52px;
        font-size: 34px;
    }

    /* Điều khoản: khối chữ dài, phóng vừa phải cho dễ đọc */
    .hop-thoai--dieu-khoan h2 {
        font-size: 26px;         /* 21 */
    }

    .hop-thoai--dieu-khoan li {
        font-size: 16px;         /* 14 */
    }
}

/* ── Màn hình rất thấp (iPhone SE ngang, Android nhỏ) ───────────────────── */
@media (max-height: 700px) {
    .khung-vong {
        width: min(76vw, 300px);
    }

    .tieu-de {
        font-size: clamp(24px, 7.4vw, 34px);
    }


}