/* =========================================================================
   home-guest.css — Trang chủ khách (public/home-guest.php). Chép NAVSEnglish 20/10/2026; màu tự theo token đỏ TTKK.
   Hướng "Chồng lớp, sản phẩm dẫn": nền có hạt nhiễu + quầng sáng, giao diện
   sản phẩm thật chồng lớp làm nhân vật chính, lưới 12 cột lệch ô.

   🚨 File này ĐỘC LẬP — trang chủ KHÔNG nạp landing.css nữa. Hai lý do:
      1. landing.css bind --kh-primary về --color-warning (AMBER) nên cả trang
         ra màu cam, sai nhận diện (thương hiệu là --color-primary).
      2. `.kh-page a` (0,1,1) đè `.kh-btn--primary` (0,1,0) làm chữ trên nút
         trùng màu nền — xem [gotcha_landing_css_kills_primary_button_text].
      Tách ra là hết cả hai, và sửa trang chủ không đụng 6 trang landing khác.

   🚨 0 hex cứng — chỉ var(--color-*) / color-mix(). Pre-commit chặn.
   ========================================================================= */

/* ── Nền trang ─────────────────────────────────────────────────────────── */
.hg {
    position: relative;
    font-family: var(--font-sans);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(68% 46% at 78% -4%,  color-mix(in srgb, var(--color-accent)  20%, transparent), transparent 62%),
        radial-gradient(56% 40% at 2%  10%,  color-mix(in srgb, var(--color-primary) 15%, transparent), transparent 60%),
        var(--color-bg);
}
/* Hạt nhiễu phủ toàn trang — phá cảm giác "phẳng số". SVG inline, không thêm request. */
.hg::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.hg > * { position: relative; z-index: 1; }
.hg img { max-width: 100%; height: auto; display: block; }

.hg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6); }

/* ── Nút ───────────────────────────────────────────────────────────────── */
.hg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 28px; border-radius: 14px;
    font-family: inherit; font-size: 15.5px; font-weight: var(--fw-bold);
    text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
                background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.hg-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 40%, transparent); outline-offset: 2px; }
.hg-btn--fill {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-on-dark);
    box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--color-primary) 90%, transparent);
}
.hg-btn--fill:hover  { transform: translateY(-2px); box-shadow: 0 22px 46px -16px color-mix(in srgb, var(--color-primary) 95%, transparent); color: var(--color-on-dark); }
.hg-btn--fill:active { transform: translateY(0); }
.hg-btn--ghost { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border); }
.hg-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.hg-btn--onDark { background: var(--color-on-dark); color: var(--color-primary-deep); }
.hg-btn--onDark:hover { transform: translateY(-2px); color: var(--color-primary-deep); }
.hg-btn--lineDark {
    background: color-mix(in srgb, var(--color-on-dark) 14%, transparent); color: var(--color-on-dark);
    border-color: color-mix(in srgb, var(--color-on-dark) 44%, transparent);
}
.hg-btn--lineDark:hover { background: color-mix(in srgb, var(--color-on-dark) 24%, transparent); color: var(--color-on-dark); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hg-hero { padding: var(--space-16) 0 0; text-align: center; }
.hg-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: var(--fw-bold);
    background: var(--color-surface); color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.hg-h1 {
    font-size: clamp(36px, 5.2vw, 68px); line-height: 1.03; letter-spacing: -.04em;
    font-weight: var(--fw-extrabold); color: var(--color-ink);
    margin: var(--space-5) auto 0; max-width: 17ch; text-wrap: balance;
}
.hg-lead {
    margin: var(--space-5) auto 0; max-width: 58ch;
    font-size: 17.5px; line-height: 1.6; color: var(--color-secondary-text); text-wrap: pretty;
}
.hg-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
.hg-trust {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--space-2) var(--space-5); margin-top: var(--space-4);
    font-size: 13.5px; color: var(--color-muted);
}
.hg-trust b { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.hg-trust .hg-stars i { color: var(--color-warning); font-size: 12.5px; margin-right: -1px; }
.hg-trust .hg-stars i.is-off { color: var(--color-border); }

/* ── Sân khấu sản phẩm: các tấm CHỒNG lên nhau ─────────────────────────── */
.hg-stage { position: relative; margin: var(--space-12) auto 0; max-width: 980px; height: 400px; }
.hg-panel {
    position: absolute; border-radius: 20px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    box-shadow: 0 40px 80px -34px color-mix(in srgb, var(--color-primary) 58%, transparent),
                0 6px 18px -10px  color-mix(in srgb, var(--color-ink) 26%, transparent);
}
/* 🚨 Hai tấm bên phải ĐỌC ĐƯỢC, không chỉ để trang trí: tấm giữa che ngang là mất
   tiêu đề ("FLASHCARD HÔM NA…") và mất chữ số ("12" còn "2"). Nên tấm giữa hẹp lại
   và hai tấm bên tụt xuống thấp hơn — chồng lớp ở MÉP, không chồng lên phần chữ. */
.hg-panel--main  { left: 50%; transform: translateX(-50%); top: 0; width: min(556px, 53%); padding: var(--space-6); z-index: 3; }
.hg-panel--left  { left: 0;  top: 196px; width: min(268px, 26%); padding: var(--space-4); transform: rotate(-3deg); transform-origin: bottom right; z-index: 2; }
.hg-panel--right { right: 0; top: 214px; width: min(276px, 27%); padding: var(--space-4); transform: rotate(2.5deg); transform-origin: bottom left; z-index: 2; }

.hg-pn__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.hg-pn__word { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-extrabold); letter-spacing: -.025em; color: var(--color-ink); }
.hg-pn__ipa  { font-family: var(--font-mono); font-size: 13.5px; color: var(--color-muted); margin-top: 2px; }
.hg-ring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
           background: conic-gradient(var(--color-primary) 0 88%, var(--color-line) 88% 100%); }
.hg-ring span { width: 58px; height: 58px; border-radius: 50%; background: var(--color-surface);
                display: grid; place-items: center; font-size: 19px; font-weight: var(--fw-extrabold);
                color: var(--color-primary); font-variant-numeric: tabular-nums; }
.hg-phon { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.hg-ph { padding: 8px 13px; border-radius: 10px; font-family: var(--font-mono); font-size: 13.5px; font-weight: var(--fw-semibold);
         background: var(--color-primary-soft); color: var(--color-primary-deep); }
.hg-ph.is-bad { background: var(--color-warning-soft); color: var(--color-warning-deep);
                box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-warning) 55%, transparent); }
.hg-tip { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 12px;
          font-size: 13.5px; line-height: 1.55; background: var(--color-soft); color: var(--color-secondary-text); }
.hg-tip i { color: var(--color-accent); margin-top: 3px; flex-shrink: 0; }
.hg-wave { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-top: var(--space-4); }
.hg-wave i { flex: 1; border-radius: 3px; background: color-mix(in srgb, var(--color-primary) 42%, transparent); }
/* Nhãn trong ảnh mô phỏng: chữ thường, thôi giãn chữ — cùng gu với phần còn lại của trang. */
.hg-pn__t { font-size: 12.5px; font-weight: 650; color: var(--color-muted); margin-bottom: var(--space-3); }
.hg-fc      { font-size: 19px; font-weight: var(--fw-extrabold); color: var(--color-ink); letter-spacing: -.02em; }
.hg-fc__sub { font-size: 12.5px; color: var(--color-muted); margin-top: 4px; line-height: 1.4; }
.hg-fc__row { display: flex; gap: 6px; margin-top: var(--space-4); }
.hg-fc__row b { flex: 1; text-align: center; padding: 8px 0; border-radius: 9px; font-size: 11.5px; font-weight: var(--fw-bold);
                background: var(--color-soft); color: var(--color-secondary-text); }
.hg-fc__row b.is-on { background: var(--color-secondary-soft); color: var(--color-secondary-deep); }
.hg-streak { display: flex; align-items: center; gap: var(--space-3); }
.hg-flame { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 18px;
            background: var(--color-warning-soft); color: var(--color-warning-deep); flex-shrink: 0; }
.hg-streak b { font-size: 21px; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.hg-streak span { font-size: 12.5px; color: var(--color-muted); }
.hg-days { display: flex; gap: 4px; margin-top: var(--space-3); }
.hg-days i { flex: 1; height: 24px; border-radius: 6px; background: var(--color-secondary-soft); }
.hg-days i.is-off { background: var(--color-line); }

/* ── Dải số liệu chồng lên sân khấu ────────────────────────────────────── */
.hg-stats {
    position: relative; z-index: 4; margin-top: -46px;
    border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border);
    display: grid; grid-template-columns: repeat(4, 1fr);
    box-shadow: 0 30px 70px -36px color-mix(in srgb, var(--color-primary) 62%, transparent);
}
.hg-stat { padding: var(--space-6) var(--space-4); text-align: center; position: relative; }
.hg-stat + .hg-stat::before { content: ''; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--color-line); }
.hg-stat b { display: block; font-size: clamp(21px, 2.3vw, 31px); font-weight: var(--fw-extrabold);
             letter-spacing: -.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.hg-stat span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--color-muted); line-height: 1.4; }

/* ── Khối nội dung ─────────────────────────────────────────────────────── */
.hg-sec { padding: var(--space-20) 0; }
.hg-sec--tight { padding-top: var(--space-16); }
.hg-head { max-width: 640px; margin-bottom: var(--space-10); }
.hg-head--center { margin-inline: auto; text-align: center; }
/* Nhãn nhỏ VIẾT HOA (.hg-kicker) và ô icon trang trí (.hg-ic) đã gỡ 23/09/2026 theo gu chủ site —
   tiêu đề mục tự đứng được, thẻ dẫn bằng CHỮ chứ không cần một ô icon mở đầu. */
.hg-h2 { font-size: clamp(26px, 3vw, 40px); font-weight: var(--fw-extrabold); letter-spacing: -.03em;
         line-height: 1.13; color: var(--color-ink); margin: 0; text-wrap: balance; }
.hg-sub { margin: var(--space-4) 0 0; color: var(--color-muted); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

/* Lưới 12 cột lệch ô — KHÔNG phải 3 cột đều nhau */
.hg-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.hg-c {
    border-radius: 18px; padding: var(--space-6);
    background: var(--color-surface); border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--color-primary) 70%, transparent);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.hg-c:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
              box-shadow: 0 26px 54px -26px color-mix(in srgb, var(--color-primary) 75%, transparent); }
/* Khai đủ 3→12. Thiếu một cỡ là ô đó rơi về span 1 và bị bóp thành cột chữ dựng đứng. */
.hg-c--3  { grid-column: span 3; }  .hg-c--4  { grid-column: span 4; }
.hg-c--5  { grid-column: span 5; }  .hg-c--6  { grid-column: span 6; }
.hg-c--7  { grid-column: span 7; }  .hg-c--8  { grid-column: span 8; }
.hg-c--9  { grid-column: span 9; }  .hg-c--10 { grid-column: span 10; }
.hg-c--11 { grid-column: span 11; } .hg-c--12 { grid-column: span 12; }
/* Ô tối: gradient ĐẬM để chữ trắng còn tương phản — bản nháp dùng gradient nhạt nên chữ chìm. */
.hg-c--dark {
    color: var(--color-on-dark); border-color: transparent;
    background: radial-gradient(120% 140% at 92% 2%, color-mix(in srgb, var(--color-accent) 52%, transparent), transparent 56%),
                linear-gradient(145deg, var(--color-primary-deep) 0%, var(--color-primary-deep) 34%, var(--color-primary) 100%);
    box-shadow: 0 24px 54px -24px color-mix(in srgb, var(--color-primary) 85%, transparent);
}
.hg-c--dark .hg-c__title { color: var(--color-on-dark); }
.hg-c--dark .hg-c__desc  { color: color-mix(in srgb, var(--color-on-dark) 92%, transparent); }
.hg-c__title { margin: 0 0 8px; font-size: 17px; font-weight: var(--fw-bold); color: var(--color-ink); letter-spacing: -.01em; }
.hg-c__desc  { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-muted); }

/* ── Thử ngay ──────────────────────────────────────────────────────────── */
.hg-try__form { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hg-try__field { position: relative; flex: 1 1 190px; display: flex; align-items: center; }
.hg-try__field i { position: absolute; left: 14px; color: var(--color-mute2); font-size: 14px; pointer-events: none; }
.hg-try__field input {
    width: 100%; height: var(--btn-h-lg); padding: 0 var(--space-4) 0 38px;
    font-family: var(--font-sans); font-size: var(--fs-body); color: var(--color-text);
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px;
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.hg-try__field input::placeholder { color: var(--color-mute2); }
.hg-try__field input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.hg-try__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* ── Chương trình học ──────────────────────────────────────────────────── */
.hg-track { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; }
.hg a.hg-track { color: var(--color-text); }
.hg a.hg-track:hover { color: var(--color-text); }
.hg-track__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                  font-size: 18px; font-weight: var(--fw-bold); color: var(--color-ink); margin: var(--space-3) 0 0; }
.hg-track__desc { font-size: 14px; color: var(--color-muted); line-height: 1.6; margin: 0; flex: 1; }
.hg-track__go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4);
                font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--color-primary); }
.hg-track__go i { font-size: 11px; transition: transform var(--dur-base) var(--ease); }
.hg a.hg-track:hover .hg-track__go i { transform: translateX(3px); }
.hg-track--soon { background: var(--color-soft); border-style: dashed; box-shadow: none; }
.hg-track--soon:hover { transform: none; box-shadow: none; border-color: var(--color-border); }
.hg-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill);
            font-size: 12px; font-weight: 700;
            background: var(--color-accent-soft); color: var(--color-accent); }

/* ── Ba bước ───────────────────────────────────────────────────────────── */
.hg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); counter-reset: hgstep; }
.hg-step { position: relative; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-6);
           border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border);
           box-shadow: 0 10px 30px -24px color-mix(in srgb, var(--color-primary) 70%, transparent); }
.hg-step__n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
              font-size: 16px; font-weight: var(--fw-extrabold); margin-bottom: var(--space-4);
              background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
              color: var(--color-on-dark);
              box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-primary) 85%, transparent); }
.hg-step h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: var(--fw-bold); color: var(--color-ink); }
.hg-step p  { margin: 0; font-size: 14px; color: var(--color-muted); line-height: 1.6; }

/* ── Tường đánh giá ────────────────────────────────────────────────────── */
.hg-rv { columns: 3; column-gap: var(--space-4); }
.hg-rv__item { break-inside: avoid; margin: 0 0 var(--space-4); padding: var(--space-5);
               border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border);
               box-shadow: 0 10px 28px -24px color-mix(in srgb, var(--color-primary) 70%, transparent); }
.hg-rv__stars { color: var(--color-warning); font-size: 12.5px; margin-bottom: var(--space-3); }
.hg-rv__stars i.is-off { color: var(--color-border); }
.hg-rv__quote { margin: 0 0 var(--space-4); font-size: 14.5px; line-height: 1.65; color: var(--color-secondary-text); }
.hg-rv__by { display: flex; align-items: center; gap: var(--space-3); }
.hg-rv__av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
             font-size: 14px; font-weight: var(--fw-bold); color: var(--color-on-dark);
             background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); }
.hg-rv__nm { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-ink); }
.hg-rv__dt { font-size: 12px; color: var(--color-muted); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.hg-faq { max-width: 820px; margin: 0 auto; }
.hg-faq__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px;
                margin-bottom: var(--space-3); overflow: hidden;
                transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.hg-faq__item[open] { border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
                      box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--color-primary) 80%, transparent); }
.hg-faq__item > summary { padding: var(--space-5) var(--space-6); cursor: pointer; list-style: none;
                          display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
                          font-weight: var(--fw-semibold); font-size: 15.5px; color: var(--color-ink); }
.hg-faq__item > summary::-webkit-details-marker { display: none; }
.hg-faq__item > summary::after { content: '+'; font-family: var(--font-sans); font-weight: var(--fw-bold);
                                 font-size: 20px; line-height: 1; color: var(--color-muted); flex-shrink: 0; }
.hg-faq__item[open] > summary::after { content: '−'; color: var(--color-primary); }
.hg-faq__body { padding: 0 var(--space-6) var(--space-5); color: var(--color-text); line-height: 1.7; font-size: 14.5px; }
.hg-faq__body b { color: var(--color-ink); }

/* ── CTA chốt ──────────────────────────────────────────────────────────── */
.hg-cta { position: relative; overflow: hidden; border-radius: 26px; padding: var(--space-16) var(--space-8);
          color: var(--color-on-dark); text-align: center;
          background: radial-gradient(90% 120% at 88% 0%, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 58%),
                      linear-gradient(140deg, var(--color-primary-deep) 0%, var(--color-primary) 62%, var(--color-secondary-deep) 100%);
          box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--color-primary) 90%, transparent); }
.hg-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .4;
                  background-image: radial-gradient(color-mix(in srgb, var(--color-on-dark) 28%, transparent) 1px, transparent 1px);
                  background-size: 20px 20px;
                  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
                          mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%); }
.hg-cta::after { content: ''; position: absolute; right: -140px; top: -180px; width: 520px; height: 520px; border-radius: 50%;
                 border: 1px solid color-mix(in srgb, var(--color-on-dark) 22%, transparent);
                 box-shadow: 0 0 0 54px color-mix(in srgb, var(--color-on-dark) 6%, transparent); pointer-events: none; }
.hg-cta__in { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.hg-cta h2 { color: var(--color-on-dark); font-size: clamp(26px, 3.4vw, 40px); font-weight: var(--fw-extrabold);
             letter-spacing: -.03em; line-height: 1.12; margin: 0 0 var(--space-4); text-wrap: balance; }
.hg-cta p { color: color-mix(in srgb, var(--color-on-dark) 90%, transparent); font-size: 16px; line-height: 1.6; margin: 0 0 var(--space-6); }
.hg-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.hg-cta__mascot { position: absolute; left: 3%; bottom: 0; width: 168px; opacity: .95; pointer-events: none; }

/* ── Máy tính bảng ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hg-rv { columns: 2; }
    .hg-c--3, .hg-c--4, .hg-c--5 { grid-column: span 6; }
    .hg-c--6, .hg-c--7, .hg-c--8, .hg-c--9,
    .hg-c--10, .hg-c--11, .hg-c--12 { grid-column: span 12; }
    .hg-cta__mascot { display: none; }
}

/* ── Điện thoại ────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .hg-hero { padding-top: var(--space-8); }
    /* Tiêu đề lớn ở khổ điện thoại đang ăn ba dòng cỡ 44px — hạ xuống cho gọn mà vẫn đủ mạnh. */
    .hg-h1 { font-size: clamp(30px, 8.6vw, 38px); margin-top: var(--space-4); max-width: 15ch; }
    .hg-hero__cta { margin-top: var(--space-5); gap: var(--space-2); }
    /* Bỏ chồng lớp: xếp dọc, giữ đủ chữ thay vì cắt cụt. */
    .hg-stage { height: auto; display: grid; gap: var(--space-3); margin-top: var(--space-8); }
    .hg-panel { position: static; transform: none; width: auto; }
    .hg-panel--left, .hg-panel--right { transform: none; }
    .hg-stats { margin-top: var(--space-6); grid-template-columns: repeat(2, 1fr); }
    .hg-stat:nth-child(3)::before, .hg-stat:nth-child(1)::before { display: none; }
    .hg-stat:nth-child(3), .hg-stat:nth-child(4) { border-top: 1px solid var(--color-line); }
    /* Rút ngắn trên điện thoại (23/09/2026): trang đang dài ~3.000px, khách phải vuốt mãi mới tới phần đăng ký.
       Khoảng cách mục, đệm thẻ và cỡ chữ tiêu đề đều co lại; phần minh hoạ giao diện chỉ giữ MỘT bảng. */
    .hg-sec { padding: var(--space-10) 0; }
    .hg-sec--tight { padding-top: var(--space-8); }
    .hg-head { margin-bottom: var(--space-6); }
    .hg-h2 { font-size: clamp(23px, 6.4vw, 28px); }
    .hg-sub { margin-top: var(--space-2); font-size: 15px; }
    .hg-c { padding: var(--space-4); border-radius: 16px; }
    .hg-c:hover { transform: none; }
    .hg-grid { gap: var(--space-3); }
    .hg-lead { font-size: 15.5px; }
    .hg-stage { margin-top: var(--space-5); }
    .hg-panel--left { display: none; }   /* ba bảng chồng nhau xếp dọc thành ba khối cao — giữ bảng chính là đủ hiểu */
    /* Mục "Tài khoản miễn phí" là 6 thẻ xếp dọc = khối cao nhất trang (1.277px). Trên điện thoại gom thành
       MỘT danh sách gạch ngang: vẫn đủ chữ, mà tiết kiệm phần lớn khoảng đệm và viền của từng thẻ. */
    #mien-phi .hg-grid { gap: 0; background: var(--color-surface); border: 1px solid var(--color-border);
                         border-radius: 16px; overflow: hidden; }
    #mien-phi .hg-c { border: 0; border-radius: 0; box-shadow: none; padding: 14px 16px;
                      border-top: 1px solid var(--color-line); }
    #mien-phi .hg-c:first-child { border-top: 0; }
    #mien-phi .hg-c__title { font-size: 15.5px; }
    #mien-phi .hg-c__desc { font-size: 13.5px; }
    /* Mục "Công cụ học" cũng là một chồng thẻ — gom danh sách y như trên. */
    #tinh-nang .hg-grid { gap: 0; background: var(--color-surface); border: 1px solid var(--color-border);
                          border-radius: 16px; overflow: hidden; }
    #tinh-nang .hg-c { border: 0; border-radius: 0; box-shadow: none; padding: 14px 16px;
                       border-top: 1px solid var(--color-line); }
    #tinh-nang .hg-c:first-child { border-top: 0; }
    #tinh-nang .hg-c__title { font-size: 15.5px; }
    #tinh-nang .hg-c__desc { font-size: 13.5px; }
    /* Đánh giá: ba cái là đủ tin, người đọc trên điện thoại không vuốt hết cả tường. */
    .hg-rv__item:nth-child(n+4) { display: none; }
    /* 🚨 PHẢI liệt kê ĐỦ 3→12. Sót một cỡ (vd --12) là ô đó giữ `span 12` trên lưới
       1 cột → grid tự đẻ 12 cột ngầm → cả khối bị bóp thành các cột chữ dựng đứng. */
    .hg-grid { grid-template-columns: 1fr; }
    .hg-c--3,  .hg-c--4,  .hg-c--5,  .hg-c--6, .hg-c--7,
    .hg-c--8,  .hg-c--9,  .hg-c--10, .hg-c--11, .hg-c--12 { grid-column: span 1; }
    .hg-steps { grid-template-columns: 1fr; }
    .hg-rv { columns: 1; }
    .hg-hero__cta .hg-btn { width: 100%; }
    .hg-try__form { flex-direction: column; }
    .hg-try__form .hg-btn { width: 100%; }
    .hg-cta { padding: var(--space-10) var(--space-5); border-radius: 20px; }
}