/* ============================================================
   SCEX Early Access — Design System
   Palette: Emerald Bull (dark) + restrained gold for rewards
   ============================================================ */

:root {
  /* ===================== BẢNG SÁNG (mặc định) =====================
     Vùng TỐI (hero · băng chữ · disclaimer · chân trang) khai báo lại ĐÚNG
     những tên biến này trong .on-dark ngay bên dưới. Nhờ vậy mọi component
     chỉ viết var(--surface), var(--text)... và tự đúng ở cả hai vùng.
     ⚠️ Thêm một biến màu mới thì phải thêm ở CẢ HAI chỗ, nếu không vùng tối
     sẽ rơi xuống giá trị sáng và chữ biến mất.
     Số trong ngoặc là tương phản đo trên nền #F5F8FC. */

  /* Surface — ba tầng: nền < card < card hover */
  --bg:            #F5F8FC;
  --bg-soft:       #FFFFFF;
  --bg-raised:     #F7FAFD;   /* hơi sẫm hơn --bg-soft: các gradient của .panel__inner,
                                 .phone, .loop__arrow cần hai đầu khác nhau mới thấy khối */
  --surface:       rgba(255, 255, 255, .86);
  --surface-2:     #FFFFFF;
  --border:        rgba(13, 32, 64, .10);
  --border-mid:    rgba(13, 32, 64, .17);
  --border-strong: rgba(13, 32, 64, .30);

  /* Text */
  --text:   #0F1B2E;   /* 15.5:1 */
  --text-2: #475A72;   /*  6.6:1 */
  --text-3: #5B6B82;   /*  5.1:1 */

  /* Brand.
     --brand giữ nguyên xanh neon vì nó CHỈ dùng làm NỀN (nút, chấm, viền) —
     chữ --on-brand trên nền đó đạt 10.9:1.
     --brand-ink là sắc xanh dành cho CHỮ và ICON: xanh neon đặt làm chữ trên
     nền trắng chỉ đạt 1.76:1, gần như tàng hình. Đừng dùng --brand làm màu chữ. */
  --brand:      #10E07A;
  --brand-soft: #5CF0AE;
  --brand-ink:  #067A42;   /* 5.4:1 */
  --brand-deep: #009E50;
  --brand-tint: rgba(6, 122, 66, .085);
  --brand-line: rgba(6, 122, 66, .26);
  --brand-glow: rgba(16, 224, 122, .34);
  /* ba chặng của chữ gradient xanh (.grad) */
  --grad-a: #067A42;
  --grad-b: #0BA45B;
  --grad-c: #067A42;

  /* Vàng — trên nền sáng "vàng" phải đọc thành ĐỒNG CỔ.
     Vàng sáng #F1C044 chỉ đạt 1.70:1 trên trắng nên cả dải bị đẩy xuống tông tối. */
  --gold:      #B8860B;   /* 3.25:1 — chỉ cho CHỮ LỚN và đỉnh dải kim loại */
  --gold-ink:  #8A6508;   /* 5.0:1 — chữ nhỏ */
  --gold-soft: #6B4E06;   /* đậm hơn = nhấn mạnh (ở vùng tối thì sáng hơn = nhấn mạnh) */
  --gold-deep: #7A5807;
  --gold-mid:  #9A7010;
  --gold-hi:   #B8860B;
  --gold-edge: #4A3404;
  --gold-tint: rgba(184, 134, 11, .10);
  --gold-line: rgba(184, 134, 11, .30);
  /* Vệt lướt qua chữ vàng: vùng sáng quét SẪM lại nên tương phản chỉ tốt lên;
     vùng tối quét sáng lên như cũ. */
  --gold-sweep: rgba(74, 52, 4, .34);

  --danger: #C42B2B;   /* 5.3:1 — #FF6B6B của bản tối chỉ đạt 2.5:1 trên trắng */

  /* Lớp nền */
  --grad-top:   #FFFFFF;
  --grad-1:     #FBFDFF;
  --grad-2:     #E9EFF7;
  --vignette:   rgba(176, 195, 220, .26);
  --nav-bg:     rgba(255, 255, 255, .85);
  --grid-line:  rgba(13, 32, 64, .04);
  --blob-a:     rgba(16, 224, 122, .16);
  --blob-b:     rgba(56, 132, 255, .13);
  --blob-c:     rgba(16, 224, 122, .09);
  --card-hi:    rgba(255, 255, 255, .9);
  --card-hi-2:  #FFFFFF;
  --on-brand:   #04120A;
  --quote-bg:   rgba(13, 32, 64, .035);
  --mbar-bg:    rgba(255, 255, 255, .92);
  --art-sh:     rgba(13, 32, 64, .22);

  /* Type — Oswald (condensed, hẹp ngang) cho tiêu đề, Inter cho thân bài, mono cho số.
     Oswald TỐI ĐA weight 700 — đặt 800 là trình duyệt bôi đậm giả, nét bệt và dính dấu.
     Dấu tiếng Việt của Oswald vươn rất xa (ymax +1084, dấu nặng -208) nên line-height
     phải nới: chữ thường cần >= 1.17, CHỮ HOA cần >= 1.30. Xem .hero__title. */
  --font-display: "Oswald", "Arial Narrow", Helvetica, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space & shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shell: 1180px;
  --gut: clamp(20px, 5vw, 40px);

  /* Elevation. Ở vùng sáng card PHẢI có bóng mới nổi khỏi nền — đó là thứ
     thay cho "đường sáng 1px ở mép trên" của bản tối.
     ⚠️ .on-dark đặt --card-sh về `0 0 0 0 transparent` chứ KHÔNG phải `none`:
     `none` không hợp lệ khi nằm trong một danh sách box-shadow nhiều lớp. */
  --card-sh:
      0 1px 2px rgba(13, 32, 64, .045),
      0 8px 18px -10px rgba(13, 32, 64, .17),
      0 26px 44px -26px rgba(13, 32, 64, .22);
  /* Vật thể nhỏ (nút, ô đếm ngược, thẻ bước): bóng nông hơn card.
     Dùng chung một bóng cho mọi cỡ thì vật nhỏ trông như bị thả trôi. */
  --lift-sh: 0 1px 2px rgba(13, 32, 64, .05), 0 5px 12px -5px rgba(13, 32, 64, .14);
  --lift-sh-hi: 0 2px 4px rgba(13, 32, 64, .06), 0 12px 24px -8px rgba(13, 32, 64, .20);
  --sh-2: 0 14px 34px -16px rgba(13, 32, 64, .30);
  --sh-3: 0 34px 70px -32px rgba(13, 32, 64, .34);

  /* Motion */
  --ease: cubic-bezier(.22, .68, .3, 1);
  --dur: 260ms;

  /* Layers */
  --z-bg: 0;
  --z-body: 10;
  --z-nav: 40;
  --z-bar: 50;
}

/* ===================== VÙNG TỐI =====================
   Khai báo lại đúng các biến của :root bằng bảng tối đã chạy từ trước.
   Gắn class .on-dark vào: .hero · .strip · .disc · .foot (xem index.html).
   Phải đặt cả `color` chứ không chỉ đặt biến: body đã tính xong màu chữ từ
   :root rồi, con cháu thừa kế giá trị ĐÃ TÍNH — đổi biến không tự đổi nó. */
.on-dark {
  --bg:            #0A101C;
  --bg-soft:       #0E1626;
  --bg-raised:     #141E30;
  --surface:       rgba(255, 255, 255, .05);
  --surface-2:     rgba(255, 255, 255, .085);
  --border:        rgba(255, 255, 255, .10);
  --border-mid:    rgba(255, 255, 255, .155);
  --border-strong: rgba(255, 255, 255, .24);

  --text:   #EDF2F8;
  --text-2: #A9B8CB;
  --text-3: #9DAFC5;

  --brand:      #10E07A;
  --brand-soft: #5CF0AE;
  --brand-ink:  #5CF0AE;
  --brand-deep: #009E50;
  --brand-tint: rgba(16, 224, 122, .14);
  --brand-line: rgba(16, 224, 122, .34);
  --brand-glow: rgba(16, 224, 122, .45);
  --grad-a: #5CF0AE;
  --grad-b: #10E07A;
  --grad-c: #7CF3C0;

  --gold:      #F1C044;
  --gold-ink:  #F1C044;
  --gold-soft: #FFE6A0;
  --gold-deep: #8F5F14;
  --gold-mid:  #C8912A;
  --gold-hi:   #FFF8DC;
  --gold-edge: #6E4708;
  --gold-tint: rgba(241, 192, 68, .11);
  --gold-line: rgba(241, 192, 68, .3);
  --gold-sweep: rgba(255, 255, 255, .4);

  --danger: #FF6B6B;

  --grid-line:  rgba(255, 255, 255, .045);
  --card-hi:    rgba(255, 255, 255, .055);
  --card-hi-2:  rgba(255, 255, 255, .09);
  --on-brand:   #04120A;
  --quote-bg:   rgba(255, 255, 255, .026);
  --art-sh:     rgba(0, 0, 0, .6);

  --card-sh: 0 0 0 0 transparent;
  --lift-sh: 0 0 0 0 transparent;
  --lift-sh-hi: 0 0 0 0 transparent;
  --sh-2: 0 18px 40px -20px rgba(3, 8, 20, .85);
  --sh-3: 0 40px 90px -40px rgba(3, 8, 20, .95);

  color: var(--text);
}

/* Một vùng được gắn .on-dark phải tự vẽ nền của mình, vì .bg-fx phía sau là nền sáng.
   Hiện không khối nào dùng — giữ sẵn để lật một khối sang tối chỉ bằng một chữ. */
.strip.on-dark, .foot.on-dark { background: var(--bg); }
.disc.on-dark { background: var(--bg-soft); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, var(--grad-top) 0%, transparent 62%),
    linear-gradient(180deg, var(--grad-1) 0%, var(--bg) 38%, var(--grad-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4,
.btn, .brand__name, .panel__title, .step__title, .reward__qty {
  font-family: var(--font-display);
}
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.005em; }
::selection { background: var(--brand); color: var(--on-brand); }

:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 50%; top: 10px; transform: translate(-50%, -200%);
  background: var(--brand); color: var(--on-brand); padding: 10px 18px;
  border-radius: 999px; font-weight: 600; z-index: 100;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Layout primitives ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }

/* mọi khối nội dung phải nổi trên lớp nền .bg-fx (fixed, z-index 0) */
section, .strip, .foot { position: relative; z-index: var(--z-body); }
.band { padding-block: clamp(62px, 7.6vw, 104px); }
.band--tight { padding-block: clamp(50px, 6vw, 78px); }

.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--border-mid) 22%, var(--border-mid) 78%, transparent);
}

/* ---------- Ambient background ---------- */
.bg-fx { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; overflow: hidden; }

.bg-fx__grid {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 100% 62% at 50% 0%, #000 12%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 62% at 50% 0%, #000 12%, transparent 78%);
}

.bg-fx__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .58; }
.bg-fx__blob--a {
  width: 62vw; height: 62vw; max-width: 820px; max-height: 820px;
  top: -26vw; left: 50%; margin-left: -31vw;
  background: radial-gradient(circle, var(--blob-a), transparent 66%);
  animation: drift-a 22s var(--ease) infinite alternate;
}
.bg-fx__blob--b {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: 46vh; right: -14vw;
  background: radial-gradient(circle, var(--blob-b), transparent 68%);
  animation: drift-b 28s var(--ease) infinite alternate;
}
.bg-fx__blob--c {
  width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
  bottom: -12vw; left: -12vw;
  background: radial-gradient(circle, var(--blob-c), transparent 70%);
  animation: drift-a 26s var(--ease) infinite alternate-reverse;
}
.bg-fx__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 74% at 50% 0%, transparent 38%, var(--vignette) 96%);
}

@keyframes drift-a { to { transform: translate3d(5%, 7%, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-8%, -6%, 0) scale(1.08); } }

/* ---------- Navigation ---------- */
/* Toàn trang một tông sáng nên nav không cần đảo màu nữa.
   ⚠️ Nếu sau này có khối .on-dark nằm dưới nav thì phải cho nav biết đang ở trên
   nền gì, và Đừng gắn màu vào .is-stuck — đã viết sai một lần như vậy: .is-stuck
   bật ngay từ y > 24px và chỉ có nhiệm vụ thêm NỀN cho viên thuốc, trong khi hero
   cao hơn 1000px nên nav đã đổi màu từ rất sớm trong khi còn nằm trên nền tối.
   Phải dùng một cờ riêng so ĐÁY của nav với đáy vùng tối. */
.nav {
  position: fixed; inset: 12px 12px auto; z-index: var(--z-nav);
  transition: all var(--dur) var(--ease);
}
.nav__inner {
  max-width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 14px 12px 20px;
  border: 1px solid transparent; border-radius: 999px;
  transition: all var(--dur) var(--ease);
}
.nav.is-stuck .nav__inner {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: var(--border);
  box-shadow: var(--sh-2);
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  display: grid; place-items: center;
  box-shadow: 0 0 22px -4px var(--brand-glow);
}
.brand__mark svg { width: 17px; height: 17px; color: var(--on-brand); }
.brand__mark--img { background: none; box-shadow: none; overflow: hidden; }
.brand__mark--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.brand__sub {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .17em;
  color: var(--text-3); text-transform: uppercase;
}

.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  color: var(--text-2);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--text); background: var(--surface-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15.5px; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary {
  position: relative;
  background: linear-gradient(145deg, var(--brand-soft), var(--brand));
  color: var(--on-brand);
  box-shadow: 0 0 0 1px rgba(0,210,106,.4), 0 12px 34px -14px var(--brand-glow);
}
/* Vệt sáng lướt qua MẶT nút (khác với .led là vệt chạy quanh VIỀN — hai thứ độc lập).
   Không dùng overflow:hidden vì sẽ cắt mất vòng LED nằm ngoài mép; border-radius:inherit
   trên nền gradient đã đủ bo tròn. ::after chứ không ::before — ::before là của .led. */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 41%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 59%);
  background-size: 220% 100%; background-repeat: no-repeat;
  background-position: 100% center;
  animation: btn-sheen 3.6s var(--ease) infinite paused;
}
/* JS chỉ gắn shine-live khi nút lọt vào màn hình — đỡ tốn pin khi cuộn qua. */
.btn--primary.shine-live::after { animation-play-state: running; }
@keyframes btn-sheen {
  0%, 62% { background-position: 100% center; }
  100%    { background-position: 0% center; }
}
.btn--primary:hover {
  background: linear-gradient(145deg, #6BF0B2, var(--brand-soft));
  box-shadow: 0 0 0 1px rgba(0,210,106,.6), 0 18px 46px -14px var(--brand-glow);
}
.btn--ghost {
  background: var(--surface-2); border-color: var(--border-mid); color: var(--text);
  box-shadow: var(--lift-sh);
}
.btn--ghost:hover {
  background: var(--surface-2); border-color: var(--border-strong);
  box-shadow: var(--lift-sh-hi); transform: translateY(-1px);
}
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 16.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.nav .btn { display: none; }

/* ---------- Section headers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12.7px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand-ink);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand));
}
.eyebrow--gold { color: var(--gold-soft); }
.eyebrow--gold::before { background: linear-gradient(90deg, transparent, var(--gold)); }

.head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 66px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow::before { display: none; }
.head__title {
  font-size: clamp(30px, 4.6vw, 50px); font-weight: 700;
  margin-top: 18px; text-wrap: balance;
}
.head__lede {
  margin-top: 18px; font-size: clamp(16px, 1.9vw, 18.5px);
  color: var(--text-2); max-width: 62ch; text-wrap: pretty;
}
.head--center .head__lede { margin-inline: auto; }

.grad {
  background: linear-gradient(105deg, var(--grad-a), var(--grad-b) 55%, var(--grad-c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Tiêu đề khối: vàng ánh kim, bóng lướt qua ----------
   Nền chuyển sắc bị cắt theo hình chữ (background-clip: text). Trình duyệt nào
   không hỗ trợ thì @supports không chạy và chữ giữ màu vàng đặc — KHÔNG bao giờ
   tàng hình. Bỏ @supports là chữ biến mất trên trình duyệt cũ.
   Chỉ chạy khi tiêu đề đang hiện trên màn hình (class .shine-live do JS gắn),
   giống cách viền LED đã làm — 6 tiêu đề cùng chạy nền là hao pin trên điện thoại. */
.head__title { color: var(--gold-soft); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .head__title {
    /* Vàng kim loại thật đi theo chiều DỌC: mép trên và chân chữ là đồng tối,
       giữa nét chữ là vệt sáng — đó là thứ làm chữ trông như thanh vàng đúc.
       Gradient ngang chỉ cho ra vàng phẳng như màu tô.
       Dải cao đúng 1 dòng (1.2em) rồi lặp xuống, nên MỖI DÒNG có thanh vàng riêng.
       Cách kia — display:inline + box-decoration-break — cũng ra kết quả này nhưng
       kéo tiêu đề lên nằm cạnh eyebrow (eyebrow là inline-flex) và ăn mất margin-top. */
    background-image:
      linear-gradient(102deg, transparent 32%, var(--gold-sweep) 48%, transparent 64%),
      linear-gradient(180deg,
        var(--gold-edge) 0%, var(--gold-mid) 20%, var(--gold) 39%,
        var(--gold-hi) 52%, var(--gold) 63%, var(--gold-mid) 79%, var(--gold-edge) 100%);
    background-size: 200% 1.2em, 100% 1.2em;
    background-repeat: repeat-y;
    background-position: 130% 0, center 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  /* Dòng gradient xanh nằm trong tiêu đề phải tắt nền riêng, nếu không nó
     tự vẽ màu xanh đè lên lớp vàng của thẻ cha. Hero vẫn giữ xanh vì không dính class này. */
  .head__title .grad { background-image: none; }
}

.head__title.shine-live { animation: gold-sweep 5.5s ease-in-out infinite; }

/* Chỉ vệt sáng chéo chạy; dải kim loại dọc đứng yên. */
@keyframes gold-sweep {
  0%,  8%    { background-position: 130% 0, center 0; }
  55%, 100%  { background-position: -30% 0, center 0; }
}

@media (prefers-reduced-motion: reduce) {
  .head__title.shine-live { animation: none; background-position: 40% 0, center 0; }
}

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--card-hi), var(--card-sh);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card--hover:hover {
  border-color: var(--border-strong); background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--card-hi-2), var(--card-sh), var(--sh-2);
  transform: translateY(-2px);
}

.icon-box {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand-tint); border: 1px solid var(--brand-line); color: var(--brand-ink);
  flex-shrink: 0;
}
.icon-box svg { width: 21px; height: 21px; }

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  padding-top: clamp(122px, 17vw, 178px); padding-bottom: clamp(56px, 8vw, 92px);
}
/* Hero KHÔNG tự vẽ nền. Toàn trang nay cùng một tông sáng nên lớp .bg-fx
   (lưới + ba quầng sáng, position: fixed) làm đúng việc nó vốn được thiết kế —
   không cần vẽ thêm nền riêng cho hero nữa.
   ⚠️ Nếu sau này muốn một khối nền tối trở lại: thêm class .on-dark vào thẻ
   <section> đó (khối biến .on-dark vẫn còn ở trên). Riêng .hero còn mang class
   .shell nên hộp chỉ rộng 1180px — muốn nền tràn viền thì phải vẽ bằng ::before
   kéo width: 100vw chứ đặt background thẳng vào .hero sẽ hở hai bên. */
.hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center; opacity: .22;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.hero__grid { display: grid; gap: clamp(40px, 5vw, 62px); align-items: center; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 9px; border-radius: 999px;
  background: var(--brand-tint); border: 1px solid var(--brand-line);
  font-family: var(--font-mono); font-size: 12.7px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--brand-ink);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); position: relative; }
.dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brand);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 75%, 100% { transform: scale(3); opacity: 0; } }

.hero__title {
  font-size: clamp(34px, 6.1vw, 58px); font-weight: 700;
  /* 1.3 chứ không phải 1.06: dấu nặng của "Ệ" dòng trên chạm dấu sắc của "Ớ" dòng dưới. */
  letter-spacing: -.005em; line-height: 1.3; margin-top: 26px;
}
.hero__title span { display: block; }
.hero__lede {
  margin-top: 24px; font-size: clamp(16.5px, 2vw, 19px);
  color: var(--text-2); max-width: 52ch; text-wrap: pretty;
}
/* Đồng hồ đếm ngược hạn đăng ký. Server nhúng mốc thời gian, JS đếm.
   Mặc định có [hidden] — JS bỏ hidden sau khi vẽ số đầu tiên, nên người tắt JS
   không thấy một khung toàn dấu gạch. */
.countdown { margin-top: 30px; }
.countdown[hidden] { display: none; }
.countdown__label {
  display: block; margin-bottom: 11px;
  font-family: var(--font-mono); font-size: 12.7px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.countdown__grid { display: flex; gap: 9px; }
.countdown__cell {
  min-width: 68px; padding: 11px 8px 9px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border-mid); border-radius: var(--r-sm);
  box-shadow: var(--lift-sh);
}
.countdown__num {
  display: block; font-family: var(--font-mono); font-size: 25px; font-weight: 700;
  line-height: 1.1; color: var(--brand-ink); font-variant-numeric: tabular-nums;
}
.countdown__unit {
  display: block; margin-top: 4px; font-size: 12.7px; color: var(--text-3);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 44px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--card-sh);
}
.stat { background: var(--bg-soft); padding: 18px 16px; }
.stat__num {
  font-family: var(--font-mono); font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700; letter-spacing: -.03em; color: var(--brand-ink);
}
.stat__label {
  margin-top: 3px; font-size: 13.7px; color: var(--text-3);
  letter-spacing: .04em; line-height: 1.4;
}

/* Hero panel — 4 pillars */
.panel {
  padding: 8px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-3);
}
.panel__inner {
  background: linear-gradient(170deg, var(--bg-raised), var(--bg-soft));
  border: 1px solid var(--border); border-radius: calc(var(--r-xl) - 8px);
  box-shadow: inset 0 1px 0 var(--card-hi);
  padding: clamp(22px, 3vw, 30px);
}
.panel__label {
  font-family: var(--font-mono); font-size: 12.2px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.panel__title {
  margin-top: 12px; font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 700; letter-spacing: -.02em;
}

.pillars { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 9px; }
.pillar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.026); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.pillar:hover { border-color: var(--brand-line); background: var(--brand-tint); transform: translateX(4px); }
.pillar__no {
  font-family: var(--font-mono); font-size: 13.2px; font-weight: 700;
  color: var(--brand-ink); width: 22px; flex-shrink: 0;
}
.pillar__text { font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--text); }
.pillar__text em { display: block; font-style: normal; font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* ---------- Marquee strip ---------- */
.strip {
  border-block: 1px solid var(--border);
  background: var(--bg-soft);
  overflow: hidden; padding-block: 15px;
}
/* Trước đây hai mép băng chữ được làm mờ bằng mask đặt thẳng lên .strip.
   mask cắt CẢ NỀN của băng chứ không riêng chữ — hồi nền trang cũng tối thì không
   ai thấy, nhưng nay phía sau là nền SÁNG nên hai đầu băng loé trắng.
   Thay bằng hai tấm phủ chuyển sắc cùng màu nền băng: chữ vẫn tan dần ở mép,
   nền băng giữ nguyên. Không đặt mask lên .strip__track được: track rộng gấp đôi
   khung và đang chạy translateX, vệt mờ sẽ trôi theo chữ. */
.strip::before, .strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(40px, 12%, 160px); pointer-events: none;
}
.strip::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.strip::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.strip__track { display: flex; gap: 46px; width: max-content; animation: slide 34s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__item {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-mono); font-size: 13.7px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.strip__item svg { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   2. THREE VALUES
   ============================================================ */
.values { display: grid; gap: 20px; }
.value { padding: clamp(24px, 3vw, 34px); overflow: hidden; }
.value__no {
  font-family: var(--font-mono); font-size: 13.2px; font-weight: 700;
  letter-spacing: .22em; color: var(--brand-ink); display: block; margin-bottom: 20px;
}
.value__title { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; margin: 18px 0 12px; }
.value__body { color: var(--text-2); font-size: 15.5px; }
.value__quote {
  margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--quote-bg); border-left: 2px solid var(--brand);
  font-size: 15px; color: var(--text-2);
}
.value__quote b { color: var(--text); font-weight: 600; }
.value__quote span { display: block; color: var(--text-3); font-size: 13.5px; margin-bottom: 6px; }
.value__quote .plain { display: inline; color: inherit; font-size: inherit; margin: 0; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; list-style: none; padding: 0; }
.tags li {
  padding: 6px 12px; border-radius: 999px; font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}

/* ============================================================
   3. SESSIONS
   ============================================================ */
.sessions { display: grid; gap: 20px; }
.session { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.session__tag {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  padding: 6px 13px; border-radius: 999px;
  background: var(--brand-tint); border: 1px solid var(--brand-line);
  font-family: var(--font-mono); font-size: 12.7px; font-weight: 600;
  letter-spacing: .16em; color: var(--brand-ink);
}
.session__when {
  display: block; margin-top: 14px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; color: var(--text-2);
}

.session__title {
  font-size: clamp(22px, 2.8vw, 29px); font-weight: 700;
  margin: 20px 0 8px; letter-spacing: -.028em; text-wrap: balance;
}
.session__note { color: var(--text-3); font-size: 14.5px; }
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; }
.checks li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; color: var(--text-2); }
.checks svg { width: 19px; height: 19px; color: var(--brand-ink); flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   4. COMMUNITY LOOP
   ============================================================ */
.loop { display: grid; gap: 16px; counter-reset: loop; }
.loop__item { position: relative; padding: 26px 22px; display: flex; flex-direction: column; gap: 9px; }
.loop__item::before {
  counter-increment: loop; content: counter(loop, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 12.7px; font-weight: 700;
  letter-spacing: .2em; color: var(--brand-ink);
}
.loop__name { font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: .09em; }
.loop__desc { font-size: 14.5px; color: var(--text-2); }
.loop__arrow {
  position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center;
  background: var(--bg-raised); border: 1px solid var(--border-mid); color: var(--brand-ink);
  z-index: 2;
}
.loop__arrow svg { width: 13px; height: 13px; }

/* ============================================================
   5. REASONS — bento
   ============================================================ */
.bento { display: grid; gap: 16px; }
.bento__cell { padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 15px; }
.bento__cell h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.012em; }
.bento__cell p { font-size: 14.8px; color: var(--text-2); }
.bento__cell--wide {
  background: linear-gradient(150deg, var(--brand-tint), var(--quote-bg) 55%);
  border-color: var(--brand-line);
}
.bento__cell--wide h3 { font-size: clamp(20px, 2.4vw, 25px); }
.bento__cell--wide p { font-size: 16px; }

/* ============================================================
   6. STEPS
   ============================================================ */
.steps-wrap { display: grid; gap: clamp(32px, 5vw, 56px); align-items: stretch; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }

/* Mỗi bước là một thẻ riêng. Trước đây đây là chữ trần đặt thẳng lên nền nên khối
   này nhạt hơn hẳn mọi khối khác trên trang, và mắt dồn hết sang card mã giới thiệu.
   Sợi kẻ nối giờ chỉ vẽ trong khe giữa hai thẻ — kẻ suốt sẽ chạy xuyên qua nền thẻ. */
.step {
  display: flex; gap: 18px; position: relative; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--lift-sh);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.step:hover {
  border-color: var(--border-strong); background: var(--surface-2); box-shadow: var(--lift-sh-hi);
}
/* 42px = padding-trái 20 + nửa vòng tròn 23, trừ nửa bề rộng vạch. Đổi padding thì đổi cả đây. */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 100%; left: 42px; width: 2px; height: 12px;
  background: var(--brand-line);
}

.step__dot {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-tint); border: 1px solid var(--brand-line);
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--brand-ink);
  transition: all var(--dur) var(--ease);
}
.step:hover .step__dot { border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 5px var(--brand-tint); }

/* Thiếu mã giới thiệu là hồ sơ không được ghi nhận, nên bước này phải nổi hơn bốn bước kia. */
.step--key { border-color: var(--brand-line); background: var(--brand-tint); }
.step--key .step__dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.step__body { padding-top: 2px; min-width: 0; }
.step__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step__title { font-size: 17px; font-weight: 600; }
.step__tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-brand); background: var(--brand);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.step__desc { font-size: 14.5px; color: var(--text-3); margin-top: 4px; }

/* ---------- Hướng dẫn bằng hình ----------
   Năm ảnh chụp màn hình app xếp thành một dải. Ở khổ này chữ trong ảnh quá nhỏ để
   đọc — nên mỗi ảnh là một cái nút mở hộp xem lớn, và phần chữ cần đọc nằm ở
   chú thích bên dưới chứ không bắt người ta nheo mắt vào ảnh. */
.guide { grid-column: 1 / -1; margin-top: clamp(30px, 4vw, 44px); }

.guide__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.guide__label {
  font-family: var(--font-mono); font-size: 12.4px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
}
.guide__note { font-size: 13.4px; color: var(--text-3); opacity: .8; }

.guide__rail {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 20px);
}

.guide__item { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Khung máy: viền ngoài tối, ảnh bo trong. Không vẽ tai thỏ giả — ảnh chụp
   đã có thanh trạng thái thật rồi, thêm nữa là hai lớp chồng nhau. */
.phone {
  position: relative; display: block; width: 100%; padding: 5px;
  background: linear-gradient(160deg, var(--bg-raised), var(--bg-soft));
  border: 1px solid var(--border-mid); border-radius: 20px;
  cursor: zoom-in; overflow: hidden;
  box-shadow: inset 0 1px 0 var(--card-hi), var(--sh-2);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Khoá đúng tỉ lệ ảnh chụp điện thoại. Admin gán được ảnh bất kỳ ở /admin/media —
   ảnh lệch tỉ lệ mà không khoá thì năm khung cao thấp so le. */
.phone img {
  width: 100%; height: auto; aspect-ratio: 1242 / 2688;
  object-fit: cover; border-radius: 15px;
}
.phone:hover { transform: translateY(-4px); border-color: var(--border-strong); }

/* Số bước nằm ở chú thích, không đặt đè lên ảnh: mọi ảnh chụp app đều có nút quay
   lại hoặc thanh trạng thái ở đúng góc trên trái. */
.guide__no {
  display: inline-block; margin-right: 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--brand-ink); background: var(--brand-tint);
  border: 1px solid var(--brand-line); border-radius: 6px; padding: 1px 6px;
}

.guide__cap { font-size: 13.6px; line-height: 1.5; color: var(--text-3); }
.guide__cap b { color: var(--text); font-weight: 600; }

/* Bước nhập mã là chỗ hỏng nhiều nhất, nên nó được viền xanh như .step--key. */
.guide__item--key .phone { border-color: var(--brand-line); }
.guide__item--key .guide__no { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.guide__code {
  font-family: var(--font-mono); font-weight: 700; color: var(--brand-ink);
  background: var(--brand-tint); border: 1px solid var(--brand-line);
  padding: 1px 7px; border-radius: 6px; white-space: nowrap;
}

/* Dưới 720px năm ảnh cạnh nhau chỉ còn 60px bề ngang — chuyển sang cuộn ngang,
   mỗi ảnh dừng đúng khung. */
@media (max-width: 719px) {
  .guide__rail {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    padding-bottom: 8px; scrollbar-width: thin;
  }
  .guide__item { flex: 0 0 min(62vw, 240px); scroll-snap-align: start; }
}

/* Hộp xem ảnh lớn */
.lb {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; overflow: hidden;
}
.lb::backdrop { background: rgba(4, 8, 16, .88); backdrop-filter: blur(6px); }
.lb[open] { display: grid; place-items: center; }
.lb__img {
  max-width: min(92vw, 420px); max-height: 88vh; width: auto; height: auto;
  border-radius: 20px; border: 1px solid var(--border-mid); box-shadow: var(--sh-3);
}
.lb__close {
  position: fixed; top: 18px; right: 18px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-mid);
  color: var(--text); font-size: 26px; line-height: 1;
}
.lb__close:hover { background: var(--bg-raised); border-color: var(--border-strong); }

/* Cột phải căng bằng chiều cao cột trái rồi dồn nội dung vào giữa — trước đây card
   kết thúc sớm, để lại một mảng trống lớn. Bỏ sticky vì đã căng hết chiều cao. */
.refcode {
  padding: clamp(24px, 3vw, 32px);
  display: flex; flex-direction: column; justify-content: center;
}
.refcode__label {
  font-family: var(--font-mono); font-size: 12.2px; letter-spacing: .19em;
  text-transform: uppercase; color: var(--text-3);
}
.refcode__box {
  margin-top: 16px; display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 16px 20px; border-radius: var(--r-md);
  background: var(--bg); border: 1px dashed var(--brand-line);
}
.refcode__value {
  font-family: var(--font-mono); font-size: clamp(24px, 4vw, 31px); font-weight: 700;
  letter-spacing: .1em; color: var(--brand-ink); flex: 1; min-width: 0;
}
.copy-btn {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-mid); color: var(--text-2);
  box-shadow: var(--lift-sh);
  transition: all var(--dur) var(--ease);
}
.copy-btn:hover { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-ink); }
.copy-btn svg { width: 18px; height: 18px; }
.copy-btn.is-done { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.refcode__hint { margin-top: 14px; font-size: 13.8px; color: var(--text-3); }

/* ============================================================
   7. REWARDS
   ============================================================ */
.rewards { display: grid; gap: 18px; }
/* ⚠️ ĐỪNG THÊM LẠI `overflow: hidden` VÀO ĐÂY.
   Vòng LED (.led::before) chạy ở inset âm, tức nằm NGOÀI mép thẻ — bật overflow
   là cắt sạch, và triệu chứng rất dễ chẩn nhầm: vệt không hiện nên tưởng do
   màu nhạt hay vệt mảnh, chỉnh màu mãi không ra.
   Trước đây overflow ở đây chỉ để xén quầng sáng khi rê chuột; quầng đó nay
   đã tự nằm gọn trong thẻ (xem .reward::after) nên không cần xén nữa. */
.reward {
  padding: 30px 26px 26px; text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
/* Quầng sáng khi rê chuột — dùng ::after vì ::before đã dành cho viền LED (.led).
   Trước đây đây là hình tròn 260px đặt ở top:-60%, tức phần lớn nằm NGOÀI thẻ
   và phải nhờ `overflow: hidden` của thẻ xén bớt — chính cái overflow đó đã ăn
   luôn vòng LED. Nay vẽ thẳng một hbầu dục bám mép trên, cao 190px, NẰM HẲN
   trong thẻ, nên không cần ai xén hộ. Nhìn ra kết quả y hệt cũ. */
.reward::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 190px;
  border-radius: inherit; z-index: 0;
  background: radial-gradient(ellipse 72% 100% at 50% 0%, var(--gold-tint), transparent 70%);
  opacity: 0; transition: opacity 420ms var(--ease);
  pointer-events: none;
}
.reward:hover::after { opacity: 1; }
.reward > * { position: relative; z-index: 1; }
.reward__rank {
  font-family: var(--font-mono); font-size: 12.2px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink);
}
.reward--top .reward__rank { color: var(--gold-soft); }

/* khung cố định + object-fit: ảnh luôn nằm gọn, không đè lên chữ dù tỉ lệ khác nhau */
.reward__art {
  width: 82%; height: 200px; margin: 24px auto 22px;
}
.reward__art img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 20px 26px var(--art-sh));
  transition: transform 420ms var(--ease);
}
.reward:hover .reward__art img { transform: translateY(-6px) scale(1.03); }

.reward__name { font-size: 19.5px; font-weight: 700; letter-spacing: -.018em; }
.reward__meta { margin-top: 6px; font-size: 14px; color: var(--text-3); }
.reward__qty {
  margin-top: 18px; padding: 7px 16px; border-radius: 999px;
  background: var(--gold-tint); border: 1px solid var(--gold-line);
  box-shadow: var(--lift-sh);
  font-size: 13.5px; font-weight: 600; color: var(--gold-soft);
}
.reward__qty span { font-family: var(--font-mono); font-weight: 700; letter-spacing: .06em; }
.reward__qty .reward__qty-unit { font-family: inherit; font-weight: 600; letter-spacing: normal; }

/* ============================================================
   VIỀN LED CHẠY
   Một vệt sáng duy nhất chạy quanh viền 1px. Không nhấp nháy, không đổi màu.
   Chỉ dùng cho: 3 nút CTA chính + 3 thẻ phần quà. Không rải ra chỗ khác.
   Kỹ thuật: conic-gradient xoay bằng @property, khoét ruột bằng mask-composite
   nên không cần overflow:hidden — không ảnh hưởng bố cục hay bóng đổ bên trong.
   ============================================================ */
@property --led-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.led { position: relative; }
.led::before {
  content: "";
  /* --led-gap: đẩy vòng LED ra xa mép, dùng khi phần tử đã có sẵn viền riêng.
     --led-inset: đặt thẳng giá trị inset, dùng khi phần tử có overflow: hidden.
     ⚠️ MẶC ĐỊNH inset ÂM — vòng LED nằm NGOÀI mép phần tử. Phần tử nào có
     overflow: hidden sẽ CẮT SẠCH vòng này và không hiện gì cả (đã vấp thật ở
     .reward — vệt LED của ba thẻ phần quà bị ăn mất suốt một thời gian dài mà
     không ai biết, vì đổi màu thế nào cũng không thấy). Gặp trường hợp đó thì
     hoặc bỏ overflow: hidden, hoặc đặt --led-inset dương cho vòng chạy phía trong. */
  position: absolute;
  inset: var(--led-inset, calc((var(--led-w, 1px) + var(--led-gap, 0px)) * -1));
  border-radius: inherit;
  padding: var(--led-w, 1px);
  pointer-events: none;
  /* KHÔNG dùng từ khoá `transparent` ở đây — nó nội suy qua màu đen làm vệt bị xỉn.
     Dùng chính màu vệt với alpha 0.
     --led-start quyết định ĐUÔI vệt dài bao nhiêu: 288deg (mặc định) cho ra
     vệt chiếm ~20% chu vi — vừa đủ trên nền tối vì còn có drop-shadow toả quang.
     Trên nền SÁNG không có gì toả sáng được nên phải hạ số này xuống cho đuôi
     dài ra, mắt mới bắt được chuyển động. */
  background: conic-gradient(
    from var(--led-angle),
    var(--led-0) 0deg var(--led-start, 288deg),
    var(--led-1) 326deg,
    var(--led-2) 346deg,
    var(--led-1) 356deg,
    var(--led-0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px var(--led-1));
  /* mặc định dừng; JS chỉ bật khi phần tử lọt vào màn hình để đỡ tốn CPU/pin */
  animation: led-run var(--led-speed, 6s) linear infinite paused;
}
.led.led-live::before { animation-play-state: running; }
@keyframes led-run { to { --led-angle: 360deg; } }

/* Ở vùng SÁNG không có gì "phát sáng" được — vệt trắng trên nền trắng là vô hình.
   Nên vùng sáng dùng vệt MÀU ĐẬM chạy quanh viền (vẫn thấy chuyển động, không giả
   quầng sáng), còn .on-dark giữ nguyên vệt sáng như bản tối. */
.btn--led {
  --led-0: rgba(6, 122, 66, 0);
  --led-1: rgba(6, 122, 66, .55);
  --led-2: #067A42;
  --led-speed: 4.5s;
}
.on-dark .btn--led, .on-dark.btn--led {
  --led-0: rgba(255, 255, 255, 0);
  --led-1: rgba(255, 255, 255, .55);
  --led-2: #FFFFFF;
}

/* Thẻ phần quà — vệt vàng, viền dày hơn chút, chạy chậm hơn,
   lệch pha để ba thẻ không cùng sáng một lúc */
/* Vệt chạy quanh thẻ phần quà dùng màu XANH THƯƠNG HIỆU chứ không dùng vàng:
   trên thẻ trắng, vàng đồng chìm vào nền gần như không thấy được.
   Đầu vệt là xanh RẤT ĐẬM chứ không phải xanh neon — neon trên nền trắng
   chỉ đạt 1.76:1, nhìn như vệt xám nhạt.
   ⚠️ Ba con số dưới đây là lý do vệt "nhìn thấy được" trên nền sáng, đừng hạ lại:
   · --led-w 3px  : 1.5px của bản tối là một nét chỉ hơn sợi tóc, mất hút trên trắng
   · --led-start : kéo đuôi từ 20% lên ~40% chu vi để mắt bắt được chuyển động
   · --led-speed : 7.5s là quá chậm, liếc qua không kịp thấy nó nhúch nhích */
.reward.led {
  --led-0: rgba(6, 122, 66, 0);
  --led-1: rgba(11, 164, 91, .8);
  --led-2: #04562F;
  --led-start: 216deg;
  --led-w: 2.5px;
  --led-speed: 5s;
}
.on-dark .reward.led {
  --led-0: rgba(233, 190, 92, 0);
  --led-1: rgba(233, 190, 92, .5);
  --led-2: #FFEFC4;
  --led-start: 288deg;
  --led-w: 1.5px;
}
.rewards .reward:nth-child(2)::before { animation-delay: -2.5s; }
.rewards .reward:nth-child(3)::before { animation-delay: -5s; }
/* giải nhất sáng hơn một bậc để giữ thứ hạng */
.reward--top.led { --led-1: rgba(6, 122, 66, .9); --led-2: #033D21; --led-w: 3px; }
.on-dark .reward--top.led { --led-1: rgba(246, 221, 160, .7); --led-2: #FFF9E8; }

/* Khung mã giới thiệu — vệt xanh lá, chạy vòng NGOÀI viền gạch đứt sẵn có
   (giữ viền gạch đứt vì đó là ngôn ngữ thị giác của "mã cần sao chép") */
.refcode__box.led {
  --led-0: rgba(6, 122, 66, 0);
  --led-1: rgba(6, 122, 66, .5);
  --led-2: #067A42;
  --led-gap: 3px;
  --led-speed: 5.5s;
}
.on-dark .refcode__box.led {
  --led-0: rgba(0, 210, 106, 0);
  --led-1: rgba(0, 210, 106, .55);
  --led-2: #9FFFD0;
}
.refcode__box.led::before { border-radius: calc(var(--r-md) + 3px); }

/* Trình duyệt không hỗ trợ @property: vệt đứng yên chứ không nhấp nháy sai nhịp */
@supports not (background: conic-gradient(from var(--led-angle), red, blue)) {
  .led::before { display: none; }
}

.note {
  display: flex; gap: 13px; align-items: flex-start;
  margin-top: 26px; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 14.5px; color: var(--text-2);
}
.note svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; margin-top: 3px; }

/* ============================================================
   8. FORM
   ============================================================ */
.cta-grid { display: grid; gap: clamp(36px, 5vw, 56px); align-items: start; }

.cta-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.cta-list li { display: flex; gap: 13px; align-items: center; font-size: 16px; color: var(--text-2); }
.cta-list svg { width: 20px; height: 20px; color: var(--brand-ink); flex-shrink: 0; }

.form-card { padding: clamp(24px, 3.2vw, 36px); }
.form-card__title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.form-card__sub { margin-top: 7px; font-size: 14.5px; color: var(--text-3); }
.form { margin-top: 26px; display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.field label .req { color: var(--brand-ink); }
.field input:not([type="checkbox"]) {
  width: 100%; min-height: 50px; padding: 0 15px;
  background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--r-sm);
  font-size: 15.5px; color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:not([type="checkbox"])::placeholder { color: var(--text-3); opacity: .85; }
.field input:not([type="checkbox"]):hover { border-color: var(--border-strong); }
.field input:not([type="checkbox"]):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.field input:not([type="checkbox"])[aria-invalid="true"] { border-color: var(--danger); }
.field__err { font-size: 13px; color: var(--danger); display: none; }
.field.is-bad .field__err { display: block; }
.field__hint { font-size: 14px; color: var(--text-3); }

/* Bẫy bot. Đưa ra ngoài luồng bằng position để không tạo khe hở trong grid của .form.
   Không dùng display:none — bot khá hiện nay biết bỏ qua ô bị ẩn kiểu đó. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Lỗi không thuộc riêng ô nào: trùng đăng ký, gửi quá nhiều lần, đã đóng đăng ký, lỗi mạng. */
.form-alert {
  padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .32);
  font-size: 14px; color: var(--danger);
}
.form-alert[hidden] { display: none; }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; min-height: 0; padding: 0; flex-shrink: 0; margin-top: 2px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg);
  transition: all var(--dur) var(--ease);
}
.consent input:checked { background: var(--brand); border-color: var(--brand); }
.consent input:checked::after {
  content: ""; display: block; width: 100%; height: 100%;
  background: no-repeat center/13px url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304120A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.consent a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }

.form-foot { margin-top: 16px; font-size: 14px; color: var(--text-3); text-align: center; }

.form-done { display: none; text-align: center; padding: 30px 6px; }
.form-done__ring {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 20px;
  display: grid; place-items: center;
  background: var(--brand-tint); border: 1px solid var(--brand-line); color: var(--brand-ink);
}
.form-done__ring svg { width: 28px; height: 28px; }
.form-done h3 { font-size: 21px; font-weight: 700; }
.form-done p { margin-top: 10px; color: var(--text-2); font-size: 15px; }

/* Khối nhắc mở hộp thư. Canh trái giữa một màn hình canh giữa: đây là ba câu hướng dẫn
   phải đọc theo thứ tự, chữ canh giữa nhiều dòng thì mắt mất mốc đầu dòng. */
.form-done__mail {
  margin-top: 22px; text-align: left;
  padding: 14px 16px 15px; border-radius: 10px;
  background: var(--brand-tint); border-left: 3px solid var(--brand-ink);
}
.form-done__mail-title { font-size: 15px; font-weight: 600; color: var(--text); }
.form-done__mail p { margin-top: 8px; font-size: 14px; }
.form-done__mail-from { color: var(--text-3); font-size: 13px; }
.form-done__mail-from span { font-family: "JetBrains Mono", ui-monospace, monospace; }
.form-card.is-done .form,
.form-card.is-done .form-card__title,
.form-card.is-done .form-card__sub,
.form-card.is-done .form-foot { display: none; }
.form-card.is-done .form-done { display: block; }

.spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--on-brand) 28%, transparent); border-top-color: var(--on-brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   9. DISCLAIMER + FOOTER
   ============================================================ */
.disc { background: var(--bg-soft); border-top: 1px solid var(--border); }
.disc__title {
  font-family: var(--font-mono); font-size: 13.2px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-3);
}
.disc__list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 88ch; }
.disc__list li { display: flex; gap: 13px; font-size: 14.6px; line-height: 1.68; color: var(--text-3); }
.disc__list li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-3); margin-top: 10px; opacity: .6;
}
.disc__list li:first-child { color: var(--text-2); }

.foot { border-top: 1px solid var(--border); padding-block: 34px; background: var(--bg-soft); }
.foot__inner { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.foot__copy { font-size: 13.5px; color: var(--text-3); }
.foot__links { display: flex; gap: 22px; }
.foot__links a { font-size: 13.5px; color: var(--text-3); transition: color var(--dur) var(--ease); }
.foot__links a:hover { color: var(--text); }

/* ---------- Mobile sticky CTA ---------- */
.mbar {
  position: fixed; inset: auto 0 0; z-index: var(--z-bar);
  padding: 11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background: var(--mbar-bg);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--border);
  transform: translateY(110%); transition: transform 320ms var(--ease);
}
.mbar.is-on { transform: translateY(0); }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .62s var(--ease), transform .62s var(--ease); }
.rv.on { opacity: 1; transform: none; }
.rv-1 { transition-delay: .07s; } .rv-2 { transition-delay: .14s; }
.rv-3 { transition-delay: .21s; } .rv-4 { transition-delay: .28s; }
.rv-5 { transition-delay: .35s; } .rv-6 { transition-delay: .42s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
  .rewards { grid-template-columns: repeat(3, 1fr); }
  .loop { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .nav { inset: 16px 20px auto; }
  .nav .btn { display: inline-flex; min-height: 42px; padding: 0 20px; font-size: 14.5px; }
  .values { grid-template-columns: repeat(3, 1fr); }
  .sessions { grid-template-columns: repeat(2, 1fr); }
  .loop { grid-template-columns: repeat(4, 1fr); }
  .loop__arrow { display: grid; }
  .loop__item:last-child .loop__arrow { display: none; }
  .bento { grid-template-columns: repeat(3, 1fr); }
  .steps-wrap { grid-template-columns: 1.15fr .85fr; }
  .cta-grid { grid-template-columns: .95fr 1.05fr; }
  .mbar { display: none; }
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.12fr .88fr; }
}

@media (max-width: 859px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; }
}

@media (max-width: 519px) {
  .hero__cta { display: grid; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .bg-fx__blob { animation: none; }
  /* tắt hẳn viền LED thay vì để vệt sáng đứng yên lệch một bên */
  .led::before { display: none; }
}

@media print {
  .bg-fx, .nav, .mbar, .strip { display: none; }
  body { background: #fff; color: #000; }
  .on-dark { background: #fff; color: #000; }
}