/* Hoàn To — giao diện web (điện thoại trước, máy tính từ 900px).
 *
 * Màu đo thẳng từ bộ ảnh design đã chốt ngày 09–10/10/2026:
 *  - Theme sáng: cảm giác Shopee nhưng KHÔNG dùng cam đỏ #EE4D2D.
 *  - Theme tối: cảm giác TikTok nhưng KHÔNG dùng đúng mã màu TikTok.
 * Theme theo máy người dùng; nút đổi theme ghi data-theme lên <html>.
 */
:root {
  --zalo: #0068ff;
  /* Vùng an toàn đáy máy báo. Trình duyệt trong app trên Android báo sai (~48px) → JS
     gắn .no-safe-b lên <html> và ép về 0 (xem hoanto.js). */
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Chiều cao thanh 3 nút dưới (điện thoại) = viền 1 + đệm trên 6 + nút 62 + đáy.
     Đáy = đúng vùng an toàn của máy (iPhone ~34px), tối thiểu 6px. Mọi chỗ cần chừa
     chỗ cho thanh dùng biến này, đừng ghi cứng số. */
  --nav-h: calc(69px + max(6px, var(--safe-b)));
  --bg: #FEFEF9;
  --surface: #FFFFFF;
  --ink: #2B1A10;
  --ink-2: #5C4636;
  --line: #F1E3CF;
  --primary: #F8AC4E;
  --on-primary: #2B1A10;
  --ticket: #FDEDD2;
  --ticket-strong: #FEE0AB;
  --stage: #FDF0D9;
  --chip: #F3E7D7;
  --dash: #FDB35B;
  --money: #2B1A10;
  --thumb-bg: #FEEBC2;
  --disabled: #FCDEB8;
  --disabled-ink: #B7A28E;
  --focus: #C86A0A;
  --danger: #B3261E;
  /* Hướng dẫn 4 bước (#howto): khung máy, dấu tích, quầng sáng, ngón tay. Cam Shopee giữ nguyên hai nền. */
  --ok: #1F7A4D; --frame: #2B1A10; --glow: rgba(248, 172, 78, .32); --shade: rgba(43, 26, 16, .18);
  --touch: rgba(43, 26, 16, .2); --touch-edge: rgba(43, 26, 16, .5); --shopee: #EE4D2D;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
:root.no-safe-b { --safe-b: 0px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101115; --surface: #1A1D22; --ink: #FDF9F4; --ink-2: #B9B4C2; --line: #2E333A;
    --primary: #49DEF3; --on-primary: #0E1114; --ticket: #22262C; --ticket-strong: #22262C;
    --stage: #22262C; --chip: #292E34; --dash: #F16EA9; --money: #49DEF3; --thumb-bg: #21262C;
    --disabled: #2E333A; --disabled-ink: #7D828C; --focus: #F16EA9; --danger: #FF8A80;
    --ok: #5FD39A; --frame: #2E333A; --glow: rgba(73, 222, 243, .18); --shade: rgba(0, 0, 0, .45);
    --touch: rgba(253, 249, 244, .22); --touch-edge: rgba(253, 249, 244, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101115; --surface: #1A1D22; --ink: #FDF9F4; --ink-2: #B9B4C2; --line: #2E333A;
  --primary: #49DEF3; --on-primary: #0E1114; --ticket: #22262C; --ticket-strong: #22262C;
  --stage: #22262C; --chip: #292E34; --dash: #F16EA9; --money: #49DEF3; --thumb-bg: #21262C;
  --disabled: #2E333A; --disabled-ink: #7D828C; --focus: #F16EA9; --danger: #FF8A80;
    --ok: #5FD39A; --frame: #2E333A; --glow: rgba(73, 222, 243, .18); --shade: rgba(0, 0, 0, .45);
    --touch: rgba(253, 249, 244, .22); --touch-edge: rgba(253, 249, 244, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
button, input, select { font: inherit; color: inherit; }
/* Bấm nút trên điện thoại hiện viền VUÔNG quanh nút bo tròn (chủ tịch 22/10/2026). Hai nguồn:
   1) ô sáng mặc định khi chạm (-webkit-tap-highlight-color) là hình chữ nhật;
   2) :focus-visible từng đặt border-radius: 10px → nút đang bo 999px bị ép thành góc 10px kèm viền.
   Bỏ ô sáng khi chạm, viền focus đi theo đúng góc bo của phần tử (không ép border-radius), chỉ hiện khi dùng bàn phím. */
html { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }

/* Ảnh minh hoạ có hai bản, đổi theo theme */
.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: block; }
}
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }

/* ---------- Logo: chữ "To" to và đậm hơn "Hoàn" ---------- */
/* Logo thẻ giá (phương án C, chủ tịch chọn 20/10/2026): SVG nét vẽ trong partials/site-head.html, màu theo token
   (cam nền sáng, xanh ngọc nền tối), lỗ treo khoét thật. Bản màu cố định: assets/brand/hoanto-logo-tag*.svg. */
.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; flex: none; justify-self: start; }
.logo svg { display: block; width: auto; height: 52px; }
.logo.sm svg { height: 40px; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 14px 28px; border: 0; border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  font-weight: 800; font-size: 22px; letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(1px) scale(.985); filter: brightness(.96); } /* phản hồi khi chạm, thay cho ô sáng vuông */
.btn.block { display: flex; width: 100%; }
.btn.sm { min-height: 48px; padding: 10px 22px; font-size: 18px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--disabled); color: var(--disabled-ink); cursor: not-allowed; filter: none; transform: none; }
.btn .chev { font-size: 1.1em; line-height: 1; }
.note { color: var(--ink-2); font-size: 16px; text-align: center; }

/* ---------- Vé thưởng: răng cưa hai bên + đường cắt nét đứt ----------
 * Hai lỗ khoét bằng mask nên luôn trùng màu nền trang ở cả hai theme.
 * Lỗ khoét phải nằm ĐÚNG trên đường nét đứt (.cut): hoanto.js đo vị trí
 * .cut và ghi vào --notch-y. Vé không có .cut thì khoét ở giữa. */
.ticket {
  --notch: 16px;
  position: relative;
  background: var(--ticket);
  border-radius: 24px;
  padding: 20px 28px;
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 var(--notch-y, 50%), #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% var(--notch-y, 50%), #0000 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at 0 var(--notch-y, 50%), #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% var(--notch-y, 50%), #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket.strong { background: var(--ticket-strong); }
.ticket .cut { border-top: 3px dashed var(--dash); margin: 14px -28px 0; padding: 12px 28px 0; }
.ticket .cut:empty { padding-bottom: 6px; }
.cap { font-weight: 700; font-size: 20px; }
.money {
  font-weight: 900; letter-spacing: -0.045em; line-height: 1.02;
  font-variant-numeric: tabular-nums; color: var(--money);
  font-size: clamp(48px, 13vw, 76px);
}
.money.md { font-size: clamp(36px, 9vw, 52px); }
.money.sm { font-size: 30px; }
.meta { font-weight: 600; font-size: 18px; text-align: center; }

/* ---------- Thanh điều hướng ---------- */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.site-head.center { justify-content: center; }
.theme-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; cursor: pointer; flex: none;
}
.theme-btn svg { width: 20px; height: 20px; }
.head-tools { display: flex; align-items: center; gap: 12px; }

.app-top { display: none; }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bg); border-top: 1px solid var(--line);
  /* 17/10/2026 chủ tịch: "footer hơi xa đáy màn hình". Bản cũ đáy = 8px + vùng an toàn
     + 6px đệm nút → trên iPhone chữ cách đáy ~48px. Giờ chỉ chừa đúng vùng an toàn
     (như thanh tab app thật, chữ cách đáy ~36px), máy không có vùng an toàn thì 6px. */
  padding: 6px 8px max(6px, var(--safe-b));
}
.bottom-nav a {
  display: grid; justify-items: center; gap: 4px; padding: 6px 4px 2px;
  text-decoration: none; font-size: 16px; font-weight: 600; color: var(--ink);
}
.bottom-nav span { line-height: 20px; }
.bottom-nav svg { width: 30px; height: 30px; }
.bottom-nav a[aria-current="page"] { color: var(--primary); }
/* Chừa đúng chỗ thanh dưới cộng 12px thở. Bản cũ 120px dư 32px: màn vừa khít nội
   dung (320×595) vẫn cuộn được 36px mà chỉ lộ khoảng trống. */
.app-body { padding-bottom: calc(var(--nav-h) + 12px); }

/* ---------- Món trong video (trang Dán link, 17/10/2026) ----------
   Khách tới từ link bình luận reel thấy các món đã gắn vào bài, kèm tiền hoàn. */
.video-items { display: grid; gap: 12px; }
.vi-title { font-weight: 800; font-size: 22px; line-height: 1.25; }
.vi-card { display: grid; gap: 12px; padding: 16px 22px; }
.vi-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.vi-row .thumb { width: 64px; height: 64px; border-radius: 12px; }
.vi-row .thumb:has(.thumb-img) { background: #fff; }
.vi-bag { width: 30px; height: 30px; color: var(--ink-2); }
.vi-main { display: grid; gap: 4px; min-width: 0; }
.vi-main .name { font-weight: 600; font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vi-main .sub { color: var(--ink-2); font-size: 15px; font-weight: 500; }
.vi-cash { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 16px; }
.vi-cash .money { font-size: 26px; line-height: 1.1; }
.page-title.sub { font-size: 22px; font-weight: 800; letter-spacing: 0; padding-block: 6px 0; }

/* Màn mua (check.html?…&buy=1): hai dòng nói trước điều sẽ xảy ra. */
.buy-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.buy-steps li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); font-size: 16px; line-height: 1.4; }
.buy-steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; background: var(--thumb-bg); color: var(--ink); font-weight: 800; font-size: 14px; display: grid; place-items: center; }

/* ---------- Trang chủ ---------- */
.hero { display: grid; gap: 22px; padding-block: 6px 28px; }
/* Điện thoại: màn đầu = tiêu đề + vé + nút, cao đúng một màn hình (trừ header
   ~92px + 6px đệm), nút nằm sát đáy, hình minh hoạ xuống dưới hẳn. svh = chiều
   cao khi thanh công cụ trình duyệt đang hiện, nên trong app Facebook cũng vừa. */
/* Không ép màn đầu cao đủ 100svh nữa (rà UX 20/10/2026): thẻ → nút → 3 bước đứng liền, không hở khoảng trống. */
.hero-fold { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; }
/* Thẻ và nút đứng sát nhau (rà UX 20/10/2026: trước căn giữa theo chiều cao, hở một khoảng lớn trên màn dài). */
.hero-fold .ticket { margin-block: 6px 0; }
.hero h1 { font-weight: 900; font-size: clamp(36px, 10vw, 60px); letter-spacing: -0.035em; }
.hero .ticket { display: grid; gap: 4px; }
/* Thẻ ví dụ (chủ tịch 20/10: "nút chen giữa giá và ảnh món; giá chạy chạy"): ảnh món nằm TRONG thẻ, cạnh số
   tiền; không tự đổi món nữa, chạm vào thẻ thì sang món khác. */
.hero-ticket { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.hero-ticket:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.hero-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hero-thumb { flex: none; width: clamp(76px, 24vw, 104px); aspect-ratio: 1; border-radius: 16px; background: var(--thumb-bg); display: grid; place-items: center; overflow: hidden; }
.hero-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Số tiền co theo bề rộng cột (cqi), không tràn mép thẻ ở 320px: "~16.240đ" từng lẹm chữ đ (soát 23/10/2026). */
.hero-sum { flex: 1; min-width: 0; display: grid; gap: 2px; container-type: inline-size; }
.hero-sum .cap { font-size: 17px; }
.hero-sum .money { font-size: clamp(34px, 9vw, 48px); font-size: clamp(24px, 20.5cqi, 48px); white-space: nowrap; }
.hero-hint { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.hero-thumb, #hero-ticket .money, #hero-ticket .meta { transition: opacity .25s ease; }
.hero-thumb.fading, #hero-ticket.fading .money, #hero-ticket.fading .meta { opacity: 0; }
.hero-cta { display: grid; gap: 12px; }
.steps { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--stage); }
.step { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 19px; }
.step i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--primary); flex: none; font-style: normal; }
.step i svg { width: 28px; height: 28px; }
.section { padding-block: 28px; display: grid; gap: 18px; }
.section h2 { font-size: clamp(28px, 7vw, 40px); font-weight: 900; }
.examples { display: grid; gap: 14px; }
.example { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 18px 22px; }
.example .name { font-weight: 700; }
.example .sub { color: var(--ink-2); font-size: 15px; }
.example .money { grid-row: span 2; font-size: 34px; text-align: right; }
.fineprint { color: var(--ink-2); font-size: 15px; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 14px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-weight: 900; color: var(--primary); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 10px; color: var(--ink-2); }
.foot { border-top: 1px solid var(--line); margin-top: 24px; padding-block: 24px 40px; display: grid; gap: 10px; color: var(--ink-2); font-size: 15px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: var(--ink); }
.org { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); max-width: 760px; }
.org dt { color: var(--ink-2); font-size: 15px; margin-top: 12px; }
.org dt:first-child { margin-top: 0; }
.org dd { margin: 0; font-weight: 700; }

/* ---------- Màn trong app ---------- */
.page-title { font-weight: 900; font-size: clamp(40px, 11vw, 60px); letter-spacing: -0.035em; text-align: center; padding-block: 8px 20px; }
.page-title.left { text-align: left; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.two-col > * { min-width: 0; }
/* Điện thoại: hai khối của trang xếp chồng. Không có khoảng cách thì khối dưới
   ("Món đã tra", ô "Rút được") dính sát nút của khối trên. 40px ≈ nhịp tiêu đề → ô dán link. */
@media (max-width: 899.98px) {
  .two-col.top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* Màn thấp (máy nhỏ, trình duyệt trong app Facebook): bớt khoảng dọc để trang Dán
   link nằm gọn trên thanh dưới thay vì cuộn vài chục px. */
@media (max-width: 899.98px) and (max-height: 700px) {
  .page-title { padding-block: 4px 12px; }
  .two-col.top { gap: 28px; }
}
#home-recent > .note { text-align: left; }
.desk-only { display: none !important; }
.field {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 0 22px;
  border: 2px solid var(--line); border-radius: 26px; background: var(--surface);
}
.field:focus-within { border-color: var(--primary); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 19px; padding-block: 14px; }
.field svg { width: 28px; height: 28px; color: var(--ink-2); flex: none; }
.field-error { color: var(--danger); font-weight: 600; font-size: 16px; }
.row-ticket { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.row-ticket .cap { font-size: 22px; }
.section-title { font-weight: 800; font-size: 28px; }
/* Thẻ món/đơn DÙNG CHUNG (Đơn hàng, Link gần đây, Món đã tra — itemCard() trong hoanto.js):
   hàng đầu ngày + nhãn trạng thái nhỏ; dưới là ảnh 64px + tên tối đa 2 dòng + dòng phụ +
   tiền hoàn. Bản cũ ở 320px: tên 18px 3 dòng, "ngày · đơn" gãy giữa, nhãn to như nút,
   một đơn cao ~270px (chủ tịch 14/10/2026). */
/* align-content: start — thẻ bị kéo cao theo thẻ bên cạnh thì phần thừa nằm dưới đáy,
   không đẩy ngày/nhãn xuống (lỗi bản 3 cột trên máy tính 14/10). */
.order-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "head head" "thumb main" "thumb amount";
  grid-template-rows: auto auto 1fr; align-content: start;
  column-gap: 12px; row-gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
}
.order-row .row-head { grid-area: head; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.order-row > .thumb { grid-area: thumb; width: 64px; height: 64px; border-radius: 12px; align-self: start; }
/* Ảnh món Shopee nền trắng: ô ảnh trắng cho liền với ảnh (nền kem làm ảnh lọt thỏm trong khung). */
.order-row > .thumb:has(.thumb-img) { background: #fff; }
.order-row .row-main { grid-area: main; min-width: 0; display: grid; gap: 4px; align-content: start; }
.order-row .row-amount { grid-area: amount; min-width: 0; }
.thumb { width: 96px; height: 96px; border-radius: 16px; background: var(--thumb-bg); display: grid; place-items: center; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.order-row .name { font-weight: 600; font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.order-row .money { font-size: 22px; line-height: 1.2; color: var(--ink); }
.order-row .wait { font-size: 14px; font-weight: 600; color: var(--ink-2); }
:root[data-theme="dark"] .order-row .money { color: var(--money); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .order-row .money { color: var(--money); } }
.badge { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--ticket-strong); font-weight: 700; font-size: 16px; white-space: nowrap; }
.order-card .badge { white-space: normal; text-align: center; }
/* Nhãn trạng thái nhỏ: chỉ để đọc (không bấm), một dòng. */
.badge.sm { padding: 4px 10px; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 48px; padding: 8px 20px; border-radius: 999px; border: 0; background: var(--chip); font-weight: 600; font-size: 18px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
/* Điện thoại: lưới 2×2 ô bằng nhau, mỗi nhãn một dòng, cao 44px (vùng chạm tối thiểu).
   Không cuộn ngang, không cắt nhãn (skill ui-ux-pro-max: ux 69 "Horizontal Scroll",
   115 "Chip Collection Reflow", 116 "Compact Label Overflow"). Bản đầu xuống 3 hàng to,
   bản vuốt ngang thì giấu nút ở mép màn — chủ tịch bác cả hai 14/10/2026. */
@media (max-width: 899.98px) {
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Cỡ chữ co theo bề ngang: 320px → 14px (nhãn dài nhất "Chờ Shopee trả" cách mép ~14px,
     16px thì chỉ còn 2px — chủ tịch thấy sát mép 14/10); từ 360px trở lên giữ 16px. */
  .chip { min-height: 44px; padding: 8px 10px; font-size: clamp(14px, 4.45vw, 16px); white-space: nowrap; }
}
.note.left { text-align: left; }
.order-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 18px; align-items: center; }
.order-card .thumb { width: 120px; height: 120px; grid-row: span 3; background: transparent; }
.order-card .name { font-weight: 700; font-size: 20px; }
.order-card .money { font-size: 40px; }
.order-card .when { color: var(--ink-2); font-size: 15px; }
.order-card .cut { grid-column: 1 / -1; }
.check-art { display: grid; justify-items: center; gap: 8px; text-align: center; }
.check-art img { max-width: 420px; width: 100%; }
.check-art .name { font-weight: 800; font-size: 30px; }
.check-art .price { font-weight: 900; font-size: 40px; font-variant-numeric: tabular-nums; }
.stage { background: var(--stage); border-radius: 24px; padding: 20px 24px; text-align: center; display: grid; gap: 4px; }
.stage .cap, .ticket .cap.center { text-align: center; }
.stage .money { color: var(--ink); }
:root[data-theme="dark"] .stage .money { color: var(--money); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage .money { color: var(--money); } }
.wallet-grid { display: grid; gap: 16px; }
.wallet-grid .ticket { text-align: center; }
.form-box { background: var(--stage); border-radius: 26px; padding: 22px; display: grid; gap: 14px; }
.form-box h2 { font-size: 28px; font-weight: 900; }
.input { width: 100%; min-height: 60px; padding: 0 18px; border: 2px solid var(--ink-2); border-radius: 18px; background: var(--surface); font-size: 18px; }
.input:focus { border-color: var(--primary); outline: 0; }
.check { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; cursor: pointer; }
.check input { width: 30px; height: 30px; accent-color: var(--primary); }
.amount { width: 100%; border: 0; background: transparent; text-align: center; font-weight: 900; font-size: clamp(44px, 12vw, 72px); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; outline: 0; }
.amount-box { background: var(--stage); border-radius: 26px; padding: 18px; }
.summary { text-align: center; display: grid; gap: 4px; }
.summary .tax { font-weight: 800; font-size: 20px; }
.summary .net { display: flex; justify-content: center; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 24px; }
/* Màn đăng nhập: header chung trên cùng, KHÔNG footer (màn làm một việc; dòng đồng ý
   đã có link Điều khoản + Chính sách — chủ tịch chốt 14/10/2026). Phần còn lại lấp đủ màn. */
body[data-page="login"] { min-height: 100svh; display: flex; flex-direction: column; }
.login { flex: 1 0 auto; display: grid; align-content: center; justify-items: center; gap: 28px; text-align: center; padding: 12px 20px 20px; }
/* Logo nằm ở header chung; khối này chỉ còn tiêu đề. */
.login .brand-side { display: grid; justify-items: center; gap: 18px; }
.login h1 { font-weight: 900; font-size: clamp(30px, 9vw, 54px); text-wrap: balance; }
.login .card { display: grid; gap: 14px; width: 100%; max-width: 460px; }
/* Ở 320px, chữ nút chỉ còn ~184px nên "Tiếp tục với Google" rớt hai dòng, nút cao gấp đôi. */
#google-btn, #facebook-btn, #zalo-btn { white-space: nowrap; padding-inline: 20px; font-size: clamp(18px, 5.6vw, 22px); }
/* Nút Zalo: xanh Zalo, chữ Z trong ô trắng. */
#zalo-btn { background: #0068FF; color: #FFFFFF; }
#zalo-btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.z-mark { width: 30px; height: 30px; border-radius: 9px; background: #0068FF; color: #FFFFFF; display: grid; place-items: center; flex: none; font-weight: 900; font-size: 18px; line-height: 1; }
#zalo-btn:not(.quiet) .z-mark { background: #FFFFFF; color: #0068FF; }
/* Nút Facebook: màu Facebook; chữ G của Google giữ nền trắng theo quy định của Google. */
#facebook-btn { background: #1877F2; color: #FFFFFF; }
#facebook-btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.f-mark { width: 30px; height: 30px; border-radius: 50%; background: #1877F2; display: grid; place-items: center; flex: none; }
.f-mark svg { width: 22px; height: 22px; }
#facebook-btn.quiet .f-mark { background: #1877F2; }
/* Trong app Facebook/Messenger: Facebook là nút chính, khung "Mở bằng Chrome" lùi xuống làm đường phụ cho Google. */
.login .card.fb-first #login-why { order: -3; }
.login .card.fb-first #facebook-btn, .login .card.fb-first #zalo-btn { order: -2; }
.login .card.fb-first #login-error { order: -1; }
.login .card.fb-first #inapp { order: 2; padding: 14px 16px; font-size: 15px; }
.login .card.fb-first .inapp-title { font-size: 16px; }
.login .card.fb-first #inapp .btn { min-height: 48px; font-size: 17px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
/* Điện thoại: tiêu đề ngay dưới header, nút Google + dòng đồng ý sát đáy (tầm ngón
   cái) — cùng cách chia với trang chủ (nút Bắt đầu ngay khít đáy). Căn trái thẳng mép
   header như các trang khác. */
@media (max-width: 899.98px) {
  .login {
    display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
    text-align: left; padding: 12px 20px max(16px, var(--safe-b));
  }
  .login .brand-side { justify-items: start; }
  .login .card { max-width: none; }
  .login .note { text-align: left; }
  /* Khoảng giữa tiêu đề và nút: hình món hàng của trang chủ, co giãn theo chỗ trống
     (390×844 trống ~490px nếu bỏ hình). Màn phải nhường chỗ cho khung "Mở bằng Safari"
     hoặc dòng "đã tra đủ 3 món" thì bỏ hình. */
  .login-art { display: block; position: relative; flex: 1 1 0; min-height: 0; }
  /* Phủ đúng khung còn trống (không tràn lên nút), giữ tỉ lệ, trần 380×300. */
  .login-art img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-width: 380px; max-height: 300px; object-fit: contain; }
  .login.has-notice .login-art { display: none; }
  /* Có khung "Mở bằng Chrome": khung đi liền sau tiêu đề, không đẩy xuống đáy để hở khoảng lớn (rà UX 20/10/2026). */
  .login.has-notice { justify-content: flex-start; gap: 22px; }
}
@media (max-width: 899.98px) and (max-height: 540px) { .login-art { display: none; } }
@media (min-width: 900px) { .login-art { display: none; } }
/* Chữ G nhiều màu của Google luôn nằm trên nền trắng (quy định thương hiệu Google), ở cả hai theme. */
.g-mark { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.g-mark svg { width: 18px; height: 18px; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
/* Đang ở trong app Facebook/Zalo…: nút Google lùi thành lựa chọn phụ. */
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); min-height: 52px; font-size: 18px; }
.inapp { display: grid; gap: 10px; text-align: left; background: var(--stage); border-radius: 24px; padding: 18px 20px; font-size: 16px; }
.inapp-title { font-weight: 800; font-size: 19px; }
.inapp .btn { margin-top: 4px; }
.link-btn { justify-self: center; background: none; border: 0; padding: 6px 8px; color: var(--ink-2); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.inapp-url { font-size: 14px; color: var(--ink-2); word-break: break-all; user-select: all; }
a.order-row { text-decoration: none; color: inherit; }
.thumb .thumb-img { width: 100%; height: 100%; object-fit: cover; }
.product-img { width: 100%; max-width: 420px; aspect-ratio: 1; object-fit: cover; border-radius: 24px; background: var(--thumb-bg); }
/* Ảnh đại diện + huy hiệu cách đăng nhập G/f/Z (chủ tịch duyệt 20/10/2026). Không có ảnh thì chữ cái đầu. */
.avatar { display: block; position: relative; flex: none; width: 40px; height: 40px; font-size: 17px; color: var(--ink); text-decoration: none; }
.avatar.lg { width: 76px; height: 76px; font-size: 32px; }
.ava { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); font-weight: 800; line-height: 1; }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ava-badge { position: absolute; right: -3px; bottom: -3px; width: 44%; height: 44%; min-width: 17px; min-height: 17px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; box-shadow: 0 0 0 2px var(--bg); overflow: hidden; }
.ava-badge svg { width: 64%; height: 64%; }
.ava-badge.facebook { background: #1877F2; }
.ava-badge.facebook svg { width: 80%; height: 80%; }
.ava-badge.zalo { background: #0068FF; color: #FFFFFF; font-weight: 900; font-size: 0.55em; }
.account-card .name { font-weight: 800; font-size: 20px; }
.acct-via b { font-weight: 800; }
.acct-tip { font-size: 15px; }
/* Trang đăng nhập: nhãn "Lần trước" trên nút của cách đã dùng (mỗi cách là một ví riêng). */
#google-btn, #facebook-btn, #zalo-btn { position: relative; }
.last-tag { position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; }
.account-card { display: grid; gap: 6px; justify-items: center; text-align: center; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 8px; }
.btn[aria-disabled="true"] { background: var(--disabled); color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }

/* ---------- Máy tính ---------- */
@media (min-width: 900px) {
  body { font-size: 18px; }
  .bottom-nav { display: none; }
  .app-body { padding-bottom: 60px; }
  .app-top {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding-block: 18px; border-bottom: 1px solid var(--line); margin-bottom: 24px;
  }
  .app-top .links { display: flex; gap: 48px; }
  .app-top .links a { text-decoration: none; font-weight: 700; font-size: 22px; padding-block: 8px; border-bottom: 3px solid transparent; }
  .app-top .links a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
  .app-top .head-tools { justify-self: end; }
  .avatar:not(.lg) { width: 52px; height: 52px; font-size: 22px; }
  .mobile-head { display: none; }

  .desk-only { display: inline-flex !important; }
  .hero { grid-template-columns: 1.25fr 1fr; gap: 24px 48px; padding-block: 24px 40px; }
  .hero-fold { display: contents; }
  .hero h1 { font-size: clamp(48px, 4.2vw, 60px); grid-column: 1; grid-row: 1; align-self: end; }
  .hero .hero-cta { grid-column: 1; grid-row: 2; align-self: start; max-width: 560px; }
  .hero .ticket { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .hero-thumb { width: 140px; }
  .steps { grid-template-columns: repeat(3, 1fr); padding: 28px 36px; }
  .examples { grid-template-columns: repeat(3, 1fr); }
  .example { grid-template-columns: 1fr; text-align: center; }
  .example .money { grid-row: auto; text-align: center; }

  .page-title { font-size: 72px; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .two-col.top { align-items: start; }
  body.is-guest .two-col.top { grid-template-columns: minmax(0, 620px); justify-content: center; }
  /* Máy tính: danh sách mỗi đơn một hàng — ảnh · tên + giá đơn · tiền hoàn (căn phải) ·
     ngày + trạng thái. Dò và so tiền theo một cột dọc, như trang đơn của Shopee web; lưới
     3 cột trước đó bắt mắt nhảy ngang (chủ tịch 14/10/2026). Cùng một thẻ itemCard(). */
  .orders-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .orders-grid .order-row {
    grid-template-columns: 80px minmax(0, 1fr) 160px 150px; grid-template-areas: "thumb main amount head";
    grid-template-rows: auto; align-items: center; column-gap: 24px; padding: 14px 24px;
  }
  .orders-grid .order-row > .thumb { width: 80px; height: 80px; align-self: center; }
  .orders-grid .order-row .row-head { margin-bottom: 0; flex-direction: column; align-items: flex-end; gap: 6px; }
  .orders-grid .order-row .row-amount { text-align: right; }
  .orders-grid .order-row .money { font-size: 24px; }
  .order-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .order-card .thumb { grid-row: auto; width: 180px; height: 160px; }
  .order-card .cut { width: calc(100% + 56px); }
  .wallet-grid { grid-template-columns: repeat(3, 1fr); }
  .wallet-actions { max-width: 640px; margin-inline: auto; width: 100%; }
  .login { grid-template-columns: 1fr 1fr; padding: 0; gap: 0; min-height: 560px; align-content: stretch; justify-items: stretch; }
  .login .brand-side { background: var(--ticket); display: grid; align-content: center; justify-items: center; gap: 24px; padding: 40px; }
  .login .form-side { display: grid; place-items: center; padding: 40px; }
  .login .card { border: 1px solid var(--line); border-radius: 32px; padding: 48px 40px; background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Trang chữ dài: chính sách, điều khoản ---------- */
.legal { max-width: 800px; }
.legal .updated { color: var(--ink-2); font-size: 16px; margin-top: -14px; }
.legal section { display: grid; gap: 10px; }
.legal h2 { font-size: clamp(22px, 5.5vw, 28px); font-weight: 800; letter-spacing: -0.01em; padding-top: 8px; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.legal a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal code { font-size: .9em; background: var(--chip); border-radius: 6px; padding: 1px 6px; }

/* ---------- Đơn hàng + rút tiền ---------- */
.order-row .sub { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.badge.muted { background: var(--chip); color: var(--ink-2); }
.order-row .thumb .thumb-mark { width: 36px; height: 36px; }
#account-name:not(:placeholder-shown) { text-transform: uppercase; }


/* ---------- LUẬT: nút hành động chính phải hiện TRỌN trong màn đầu ----------
   (chủ tịch 14/10/2026: "lỗi UI UX cơ bản, cần thêm rule" — lần 2, sau nút Bắt đầu
   ngay ở trang chủ). Không được để mép màn hoặc thanh điều hướng dưới che. Kiểm bằng
   scripts/hoanto-web/cta-check.cjs ở mọi khổ chuẩn trước khi giao.
   Điện thoại: bọc nút chính trong .cta-dock → thanh dính đáy ngay trên thanh điều
   hướng (như thanh Mua ngay của app Shopee), nút ở đâu trong trang cũng luôn thấy.
   Máy tính: .cta-dock không có tác dụng, nút ở nguyên chỗ. */
@media (max-width: 899.98px) {
  .cta-dock {
    position: fixed; left: 0; right: 0; z-index: 19;
    bottom: var(--nav-h);    /* = chiều cao .bottom-nav */
    padding: 10px 20px; background: var(--bg); border-top: 1px solid var(--line);
  }
  /* Chừa thêm chỗ cho thanh nút (cao ~83px) để nội dung cuối không nằm dưới nó. */
  /* Chỉ khi thanh nút THẬT SỰ hiện — nằm trong khối đang ẩn (vd form khi đã gửi) thì không
     chừa, không thì trang cuộn thừa (đo 320×595 màn đang chờ: 69px). */
  body.app-body:has(.cta-dock:not([hidden] *)) { padding-bottom: calc(var(--nav-h) + 95px); }
  /* Tiền hoàn: ảnh món thành ô 96px cạnh tên + giá, để số tiền hoàn cũng nằm trong màn
     đầu (ảnh to 100% bề ngang đẩy vé tiền hoàn xuống dưới mép màn ở 320–390px). */
  .check-art { grid-template-columns: 96px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 14px; row-gap: 4px; align-items: center; }
  .check-art > img, .check-art > .product-img { grid-row: span 2; width: 96px; height: 96px; max-width: none; border-radius: 16px; }
  .check-art .name { font-size: 18px; line-height: 1.3; align-self: end; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .check-art .price { font-size: 22px; align-self: start; }
  .check-art > .note { grid-column: 1 / -1; }
}
/* Màn mua (chủ tịch duyệt thiết kế 22/10/2026, "bố cục chưa cân"): món + vé căn giữa một trục, ảnh tách khỏi vé,
   khối giữa đứng giữa khoảng trống đầu trang ↔ thanh nút. CHỈ máy cao ≥ 700px: máy thấp (320×568) bản căn giữa đẩy
   vé tiền hoàn xuống dưới thanh nút (đo: đáy vé 500px, thanh nút từ 376px) → giữ ảnh 96px cạnh tên như trên. */
@media (max-width: 899.98px) and (min-height: 700px) {
  main.buy-main { min-height: calc(100svh - var(--nav-h) - 220px); display: flex; flex-direction: column; justify-content: center; }
  main.buy-main .check-art { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 8px; }
  main.buy-main .check-art > img, main.buy-main .check-art > .product-img { grid-row: auto; width: clamp(96px, 15svh, 132px); height: clamp(96px, 15svh, 132px); }
  main.buy-main .check-art .name { align-self: auto; max-width: 320px; }
  main.buy-main .check-art .price { align-self: auto; }
}
@media (max-width: 899.98px) {
  /* Ảnh món không dính vào vé tiền hoàn (chủ tịch 22/10/2026). */
  main.buy-main .two-col { display: grid; gap: 20px; }
}
/* Hai dòng dưới vé tiền hoàn (khách đã đăng nhập) — thay 2 bước + đoạn ghi chú. */
.buy-line { margin: 0 4px; text-align: center; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.buy-line b { color: var(--ink); }

/* Kết quả rút tiền: một tấm vé. Máy tính: tiêu đề + vé căn giữa phần màn dưới header
   (bản hai cột dồn hết lên đầu, nửa dưới trống — chủ tịch 14/10/2026). */
.done-box { width: 100%; max-width: 560px; }
.done-box .note { margin-top: 4px; }
@media (min-width: 900px) {
  body.app-body { min-height: 100svh; display: flex; flex-direction: column; }
  body.app-body > main { flex: 1 0 auto; }
  main.is-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding-bottom: 48px; }
  main.is-done .page-title { text-align: center; padding-block: 0; }
}

/* Báo cập nhật chính sách (một lần mỗi máy, assets/hoanto.js policyNotice). Nổi trên đầu
   trang, KHÔNG chiếm chỗ trong bố cục — nút chính vẫn trọn trong màn đầu (luật bố cục 1). */
.policy-toast {
  position: fixed; z-index: 30; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px));
  max-width: 560px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 10px 10px 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.45;
}
.policy-toast a { color: inherit; font-weight: 700; text-decoration: underline; }
.policy-toast button {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-weight: 700;
  background: var(--chip); color: var(--ink); cursor: pointer;
}

/* Mua khi chưa đăng nhập (16/10/2026): khung "Đã mua xong?" lúc quay lại sau khi bấm mua, và lời
   nhắc ở trang chủ. Khung nổi trên trang, không đổi bố cục bên dưới. */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; display: grid; align-items: end; justify-items: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.buy-sheet {
  position: relative; width: 100%; max-width: 480px; display: grid; gap: 12px;
  background: var(--surface); color: var(--ink); border-radius: 24px 24px 0 0;
  padding: 22px 20px calc(20px + var(--safe-b)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
}
.buy-sheet .sheet-title { font-weight: 800; font-size: 20px; line-height: 1.3; }
@media (min-width: 720px) { .sheet-wrap { align-items: center; } .buy-sheet { border-radius: 24px; } }
.bought-banner { display: grid; gap: 8px; text-align: left; }
.bought-banner .name { font-weight: 800; }
#check-note a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ---------- Hướng dẫn 4 bước (chủ tịch duyệt 18/10/2026) ----------
   Hiện dưới nút chính khi khách tới từ bình luận chung mà bài chưa có link món. Diễn hoạ trong khung
   máy do assets/howto.js dựng bằng GSAP (tải riêng khi mục hiện). CSS mặc định = trạng thái tĩnh
   cuối của từng cảnh, nên giảm chuyển động hay GSAP không tải được vẫn đọc được. Mọi lớp mang tiền tố
   ht- để không dính kiểu .ticket/.field/.money của app. */
.howto-jump { justify-self: start; font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.howto { display: grid; gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.howto .section-title { font-size: 24px; line-height: 1.25; }
.ht-demo { position: relative; display: grid; justify-items: center; gap: 12px; }
.ht-glow { position: absolute; top: 4%; width: 300px; height: 300px; max-width: 100%; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 68%); pointer-events: none; }
.ht-phone { position: relative; width: min(260px, 100%); max-width: 100%; aspect-ratio: 720 / 1449; border: 9px solid var(--frame); border-radius: 36px; background: var(--surface); overflow: hidden; box-shadow: 0 18px 40px -18px var(--shade); }
.ht-screen { position: absolute; inset: 0; font-size: 13px; line-height: 1.35; color: var(--ink); }
/* Video quay thật (720×1449 sau khi cắt thanh trạng thái/điều hướng, cùng tỉ lệ khung máy). Ẩn sẵn,
   howto.js bật khi phát được; cảnh 3 (ví) vẽ đè lên vì nằm sau trong DOM và có nền. */
.ht-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); visibility: hidden; }
/* "Lấy link món thế nào?" — video dán link nằm NGAY DƯỚI ô dán, mở ra mới chạy (chủ tịch 20/10: mục hướng dẫn chỉ
   một video bấm nút; cách dán link để cạnh cái ô, ai cần mới xem). Khung máy nhỏ hơn khung hướng dẫn. */
.paste-how { display: grid; gap: 12px; }
.paste-how > summary { list-style: none; cursor: pointer; justify-self: start; font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; display: flex; align-items: center; gap: 4px; }
.paste-how > summary::-webkit-details-marker { display: none; }
.paste-how > summary .chev { display: inline-block; transition: transform .2s ease; }
.paste-how[open] > summary .chev { transform: rotate(90deg); }
.ph-demo { display: grid; justify-items: center; gap: 10px; }
.ph-phone { position: relative; width: min(220px, 100%); max-width: 100%; aspect-ratio: 720 / 1449; border: 8px solid var(--frame); border-radius: 32px; background: var(--surface); overflow: hidden; box-shadow: 0 18px 40px -18px var(--shade); }
.ph-demo .ht-caption { font-size: 15px; min-height: 2.6em; }
.ht-scene { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--surface); visibility: hidden; }
.ht-scene.on { visibility: visible; }
.ht-top { padding: 13px 13px 9px; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.ht-top.shopee { background: var(--shopee); color: #FFFFFF; border-bottom: 0; }
.ht-body { padding: 13px; display: grid; align-content: start; gap: 9px; position: relative; }
.ht-img { aspect-ratio: 1.15; max-width: 100%; border-radius: 14px; background: var(--thumb-bg); display: grid; place-items: center; font-size: 60px; line-height: 1; }
.ht-name { font-weight: 700; font-size: 13px; }
.ht-price { font-weight: 800; font-size: 17px; color: var(--shopee); }
.ht-share { justify-self: end; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--surface); }
.ht-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 11px 11px 15px; display: grid; gap: 9px; box-shadow: 0 -10px 24px -14px var(--shade); visibility: hidden; }
.ht-grab { justify-self: center; width: 34px; height: 4px; border-radius: 4px; background: var(--line); }
.ht-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; font-size: 10.5px; font-weight: 600; }
.ht-opt { display: grid; justify-items: center; gap: 4px; }
.ht-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--thumb-bg); display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.ht-copy .ht-ic { background: var(--primary); color: var(--on-primary); }
.ht-toast { position: absolute; left: 50%; top: 36%; transform: translateX(-50%); background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 700; padding: 7px 11px; border-radius: 10px; white-space: nowrap; visibility: hidden; }
.ht-headline { font-weight: 800; font-size: 15px; }
.ht-field { border: 1.5px solid var(--line); border-radius: 14px; padding: 9px 11px; font-size: 12px; min-height: 40px; overflow: hidden; white-space: nowrap; position: relative; display: grid; align-items: center; }
.ht-field > .ht-ph, .ht-field > .ht-typed { grid-area: 1 / 1; }
.ht-ph { color: var(--ink-2); visibility: hidden; }
.ht-typed { font-weight: 600; }
.ht-ring { position: absolute; inset: -1.5px; border: 2px solid var(--primary); border-radius: 14px; visibility: hidden; }
.ht-chip { justify-self: start; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 8px; margin-top: -3px; visibility: hidden; }
.ht-cta { background: var(--primary); color: var(--on-primary); border-radius: 999px; font-weight: 800; font-size: 13px; padding: 10px; display: grid; place-items: center; }
.ht-cta > * { grid-area: 1 / 1; }
.ht-busy { display: flex; align-items: center; gap: 7px; visibility: hidden; }
.ht-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.ht-ticket { background: var(--ticket); border-radius: 16px; padding: 13px; display: grid; gap: 2px; text-align: center; }
.ht-ticket .ht-cap { font-weight: 700; font-size: 12px; }
.ht-money { font-weight: 900; font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--money); }
.ht-meta { font-size: 11px; color: var(--ink-2); }
.ht-tag { justify-self: center; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ok); }
.ht-tag svg { width: 14px; height: 14px; flex: none; }
.ht-label { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.ht-bal { font-weight: 900; font-size: 32px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: inline-block; transform-origin: left center; color: var(--money); }
.ht-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ht-row b { color: var(--ok); }
.ht-coins { position: absolute; left: 66px; top: 48px; width: 0; height: 0; visibility: hidden; }
.ht-coin { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
.ht-finger { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--touch); border: 2px solid var(--touch-edge); z-index: 6; pointer-events: none; visibility: hidden; }
.ht-ripple { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--primary); z-index: 5; pointer-events: none; visibility: hidden; }
.ht-caption { min-height: 2.7em; margin: 0; text-align: center; font-weight: 700; font-size: 17px; line-height: 1.35; max-width: 30ch; text-wrap: balance; }
.ht-progress { width: min(220px, 80%); height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ht-progress i { display: block; height: 100%; background: var(--primary); transform-origin: left center; transform: scaleX(0); }
.ht-controls { display: flex; align-items: center; gap: 8px; }
.ht-controls button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font: 700 14px var(--font); cursor: pointer; display: grid; place-items: center; padding: 0; }
.ht-controls button[aria-current="step"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.ht-controls svg { width: 14px; height: 14px; fill: currentColor; }
.ht-why { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; font-size: 16px; color: var(--ink-2); }
.ht-why b { color: var(--ink); }
.ht-steps { display: flex; gap: 8px; }

/* ---------- "Mở Shopee qua Hoàn To" (chủ tịch duyệt 19/10/2026) ---------- */
.home-cta { display: grid; gap: 8px; }
/* Bài CÓ món: nút nằm dưới danh sách gợi ý, không lặp tiêu đề (rà UX 20/10/2026). */
.home-cta.compact { margin-top: 6px; }
.home-cta.compact .home-h { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; padding-block: 0; }
.vi-intro { margin: 0 0 2px; font-weight: 700; font-size: 17px; line-height: 1.35; }
/* Tab Đơn hàng / Ví khi chưa đăng nhập. */
.guest-box { display: grid; gap: 10px; text-align: left; }
.guest-box .name { font-weight: 800; font-size: 20px; }
/* Nút trong thẻ (hẹp hơn trang) cũng phải một dòng: "Mở Shopee qua Hoàn To ›", "Đăng nhập để theo dõi". */
.vi-card .btn, .guest-box .btn { white-space: nowrap; padding-inline: 16px; font-size: clamp(16px, 4.6vw, 20px); }
.home-cta .home-h { margin: 0; font-weight: 900; font-size: clamp(30px, 8.5vw, 44px); line-height: 1.08; letter-spacing: -0.03em; padding-block: 4px 0; }
.home-cta .note { text-align: left; font-size: 15px; }
/* Nhãn "Mở Shopee qua Hoàn To ›" phải nằm MỘT dòng: 22px đậm rộng ~330px, máy 360px chỉ còn 320px
   → chữ co theo bề ngang (360px ≈ 18px, 320px = 16px), không cho gãy dòng (19/10: chữ "To" rơi xuống dòng). */
.home-cta .btn, .howto .btn { white-space: nowrap; padding-inline: 20px; }
.home-cta .btn { font-size: clamp(16px, 5vw, 22px); }
.check-art .home-mark { width: 72px; height: 72px; }
.check-art .home-name { font-size: 24px; line-height: 1.25; max-width: 18ch; }
.ht-cta.shopee { background: var(--shopee); color: #FFFFFF; }
.ht-meta.center { text-align: center; }

/* ---------- Cấp bậc + huy hiệu (bản chốt 21/10/2026) ---------- */
.tier-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px 14px; align-items: center; text-decoration: none; color: inherit; background: var(--ticket); border-radius: 22px; padding: 16px 18px; }
.tier-card .tier-ico { width: 56px; height: 58px; display: block; } .tier-card .tier-ico svg { width: 100%; height: 100%; }
.tier-card .tier-main { display: grid; gap: 5px; min-width: 0; }
.tier-card .cap { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.tier-name { font-weight: 900; font-size: 19px; letter-spacing: -0.01em; line-height: 1.15; }
.tier-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: min(100%, 160px); }
.tier-steps i { display: block; height: 7px; border-radius: 999px; background: var(--line); } .tier-steps i.on { background: var(--primary); }
.tier-card .note { font-size: 13px; margin: 0; text-align: left; }
@media (max-width: 379px) { .tier-name { font-size: 17px; } }
.tier-card .tier-money { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 2px dashed var(--dash); padding-top: 10px; }
.tier-money-cap { font-weight: 700; font-size: 16px; }
.tier-card .money.sm { font-size: 28px; }
.tier-chip { display: inline-flex; align-items: center; gap: 6px; justify-self: center; margin-top: 4px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--chip); color: var(--ink); font-weight: 800; font-size: 14px; text-decoration: none; }
.tier-chip svg { width: 22px; height: 23px; }
.tier-list { display: grid; gap: 10px; margin-top: 14px; }
.tier-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); }
.tier-row.now { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.tier-row.lock { opacity: .6; }
.tier-row .tier-ico { width: 64px; height: 66px; } .tier-row .tier-ico svg { width: 100%; height: 100%; }
.tier-row .tier-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tier-row .tier-head b { font-weight: 900; font-size: 18px; }
.tier-row .tier-rate { font-weight: 900; font-size: 18px; color: var(--primary); }
.tier-row .tier-cond { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.tier-row .tier-perk { font-size: 14px; margin-top: 4px; }
.pbar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.pbar i { display: block; height: 100%; background: var(--primary); }
.tier-row .now-tag { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 10px; }
.badge-cell { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); }
.badge-cell.off { opacity: .45; } .badge-cell.soon { opacity: .35; }
.badge-cell svg { width: 56px; height: 58px; }
.badge-cell b { font-size: 13px; font-weight: 800; line-height: 1.2; }
.badge-cell small { font-size: 11px; color: var(--ink-2); line-height: 1.25; }
.ava-tier { position: absolute; left: -3px; bottom: -3px; width: 44%; height: 44%; min-width: 17px; min-height: 17px; display: grid; place-items: center; }
.ava-tier svg { width: 100%; height: 100%; }

/* ---------- Mời bạn (đợt B, chủ tịch duyệt 21/10/2026) ---------- */
/* Thẻ vào màn Mời bạn: trang chủ (dưới thẻ cấp bậc) và Ví (dòng Thưởng mời bạn). Nền mặt, viền mảnh — nhẹ hơn thẻ cấp bậc. */
.invite-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 14px; }
.invite-ico { width: 44px; height: 46px; display: block; } .invite-ico svg { width: 100%; height: 100%; }
.invite-main { display: grid; gap: 2px; min-width: 0; }
.invite-main b { font-weight: 900; font-size: 17px; line-height: 1.25; }
.invite-main span { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.invite-amt { font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.invite-amt:empty { display: none; }
.invite-card .chev { font-size: 24px; line-height: 1; color: var(--ink-2); }
.wallet-invite { margin-top: 16px; }
/* Màn Mời bạn (app/invite.html). */
.inv-link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; border: 2px dashed var(--dash); border-radius: 16px; padding: 12px 14px; margin-block: 18px 12px; }
/* Link không gãy giữa chữ ("gioi-/thieu"): chật thì nút Sao chép xuống dòng, link vẫn nguyên một dòng. */
.inv-url { font-weight: 800; font-size: clamp(15px, 4.3vw, 17px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.inv-link .link-btn { flex: none; font-weight: 800; margin-left: auto; padding-inline: 0; }
#inv-send { white-space: nowrap; padding-inline: 16px; font-size: clamp(16px, 4.8vw, 22px); }
.inv-fallback { margin-top: 10px; background: var(--chip); border-radius: 12px; padding: 10px 12px; font-size: 15px; -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }
.inv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 20px 8px; }
.inv-stats div { background: var(--ticket); border-radius: 16px; padding: 12px 6px; text-align: center; display: grid; gap: 2px; }
.inv-stats b { font-weight: 900; font-size: clamp(18px, 5.4vw, 24px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.inv-stats span { font-size: 13px; color: var(--ink-2); }
.inv-friends { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.inv-friends .note { padding-block: 10px; }
.friend { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 10px; border-top: 1px solid var(--line); }
.friend-who { display: flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; }
.friend-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--ticket); display: grid; place-items: center; font-weight: 900; font-size: 15px; flex: none; }
.friend-name { display: grid; min-width: 0; }
.friend-name small { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.inv-chip { font-size: 13px; line-height: 1.4; font-weight: 800; border-radius: 999px; padding: 3px 10px; background: var(--chip); color: var(--ink-2); white-space: nowrap; }
.inv-chip.good { background: var(--ticket-strong); color: var(--ink); }
.inv-msg { margin-block: 18px 6px; }
.inv-msg summary { cursor: pointer; font-weight: 700; }
.inv-msg p { margin-top: 8px; background: var(--ticket); border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 15px; overflow-wrap: anywhere; }
/* Trang người được mời (gioi-thieu.html). */
.invited { display: grid; gap: 16px; max-width: 560px; padding-block: 8px 48px; }
.inv-who { font-weight: 800; font-size: 18px; }
.inv-ticket { display: grid; gap: 4px; }
.inv-big { font-weight: 900; font-size: clamp(28px, 8.6vw, 54px); line-height: 1.04; letter-spacing: -0.035em; }
.inv-ticket .meta { text-align: left; font-size: 16px; }
.inv-how { font-size: 17px; }
.tier-bonus { color: var(--ink); font-weight: 700; }
/* Màn thấp (320×595, iPhone SE trong cửa sổ Zalo): nút "Đăng nhập để nhận ưu đãi" phải trọn màn đầu (cta-check). */
@media (max-height: 640px) {
  .invited { gap: 12px; padding-block: 4px 40px; }
  .inv-big { font-size: clamp(28px, 8.4vw, 40px); }
  .inv-ticket { padding-block: 16px; }
  .inv-how { font-size: 15px; line-height: 1.45; }
}

/* ---------- Trang dạng cột: Cấp bậc, Mời bạn (chủ tịch 21/10/2026: "dính 2 section vào nhau") ----------
   Mọi khối cách nhau đều 14px; tiêu đề mục ("Huy hiệu", "Bạn bè") cách khối trên thêm 22px để tách hẳn hai phần.
   Khối con bỏ margin riêng, để chỉ còn một nguồn khoảng cách là gap. */
.page-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 36px; }
.page-stack > .page-title { padding-bottom: 0; }
.page-stack > .section-title { margin-top: 22px; }
.page-stack > .tier-list, .page-stack > .badge-grid, .page-stack > .inv-link, .page-stack > .inv-stats,
.page-stack > .inv-friends, .page-stack > .inv-msg, .page-stack > .inv-fallback { margin-block: 0; }
.page-stack > .note { margin: 0; }
/* Ô huy hiệu: chữ bắt đầu cùng một hàng ở mọi ô; ô Rủ bạn/Đại sứ là link nhưng không gạch chân như chữ thường. */
.badge-cell { align-content: start; }
a.badge-cell { text-decoration: none; color: inherit; }
a.badge-cell:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Tên cấp + mức hoàn (thẻ trang chủ, nhãn Ví): mức hoàn là mảnh riêng không gãy, màu nhạt hơn thay cho dấu "·". */
.tl-rate { display: inline-block; white-space: nowrap; font-size: .8em; font-weight: 800; line-height: 1.5; padding: 0 8px; border-radius: 999px; background: var(--surface); color: var(--ink-2); vertical-align: .12em; }
.tier-chip .tl { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; text-align: center; }
/* Dòng Thưởng mời bạn trong Ví: số tiền nằm cùng hàng tiêu đề, phần mô tả được cả bề ngang (320px không bị ép 4 dòng). */
.invite-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; }
.invite-head b { white-space: nowrap; }
.invite-card:has(.invite-head) { grid-template-columns: 44px minmax(0, 1fr) auto; }

/* ---------- Ô giải thích (chủ tịch 21/10/2026: "ít chữ, hover/click mới hiện chi tiết") ----------
   Thẻ cấp chỉ còn tên + mức hoàn + một dòng; điều kiện/quyền lợi nằm trong ô này. Ô nổi dưới trigger, JS dịch ngang
   cho khỏi tràn mép. .tip-open đưa thẻ đang mở lên trên các thẻ sau. */
.tip-host { position: relative; }
.tip-host.tip-open { z-index: 30; }
.tip-btn { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 800; font-style: italic; line-height: 1; cursor: pointer; padding: 0; position: relative; }
.tip-btn::after { content: ""; position: absolute; inset: -10px; } /* vùng chạm ~42px trên điện thoại */
.tip-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--ink); }
.tier-row .tier-head { justify-content: flex-start; }
.tier-row .tier-head .tier-rate { margin-left: auto; }
.tip-pop { position: absolute; top: calc(100% + 6px); left: 0; width: min(340px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: 0 10px 28px var(--shade); display: grid; gap: 6px; font-size: 14px; line-height: 1.45; text-align: left; color: var(--ink); }
/* Cầu nối phủ khe 6px giữa nút và ô: rê chuột qua khe vẫn tính là trong ô, không bị đóng. */
.tip-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.tip-pop b { font-weight: 800; }
.tip-pop a { font-weight: 800; color: var(--ink); }
.tier-row .tip-pop { left: 12px; width: min(420px, calc(100% - 24px)); }
.badge-cell .tip-pop { left: 50%; margin-left: -120px; width: 240px; }
/* Vé Tiền hoàn (30/10/2026): nút ⓘ sau "Bạn được hoàn khoảng"; ô giải thích nằm trọn trong vé, chữ thường (vé là chữ đậm 20px). */
.ticket .cap .tip-btn { vertical-align: middle; margin-left: 6px; }
.ticket .cap .tip-pop { left: 12px; width: calc(100% - 24px); font-weight: 500; font-size: 15px; text-wrap: wrap; }
.tier-hold { font-size: 13px; color: var(--ink-2); }
/* Ô huy hiệu là nút (bấm xem giải thích), giữ nguyên dáng ô cũ. */
.badge-btn { all: unset; box-sizing: border-box; width: 100%; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; cursor: pointer; border-radius: 12px; }
.badge-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.badge-btn svg { width: 56px; height: 58px; }
.badge-btn b { font-size: 13px; font-weight: 800; line-height: 1.2; text-wrap: balance; } /* tên dài không treo một chữ */
.badge-btn small { font-size: 11px; color: var(--ink-2); line-height: 1.25; }
/* Mờ phần nội dung, KHÔNG mờ cả khối — ô giải thích nằm trong khối phải rõ nét. */
.badge-cell.off, .badge-cell.soon, .tier-row.lock { opacity: 1; }
.badge-cell.off .badge-btn { opacity: .45; } .badge-cell.soon .badge-btn { opacity: .35; }
.tier-row.lock > :not(.tip-pop) { opacity: .6; }

/* Nhắc rủ bạn sau lần rút đầu (Ví): biểu tượng | chữ + nút, nút × góc phải. */
.nudge { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; align-items: start; background: var(--ticket); border-radius: 18px; padding: 14px 14px 14px 12px; margin-bottom: 16px; }
.nudge-ico { width: 40px; height: 42px; display: block; grid-row: span 2; } .nudge-ico svg { width: 100%; height: 100%; }
.nudge p { font-size: 15px; line-height: 1.45; padding-right: 22px; }
.nudge p b { font-weight: 800; }
.nudge .btn.sm { grid-column: 2; justify-self: start; min-height: 40px; padding: 6px 18px; font-size: 16px; }
.nudge-x { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; }
/* Màn rộng: thẻ nhắc một hàng cho thấp, để nút "Rút tiền" vẫn trọn màn đầu ở 1280×720 (cta-check). */
@media (min-width: 900px) {
  .nudge { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; padding-right: 48px; }
  .nudge-ico { grid-row: auto; }
  .nudge p { padding-right: 0; }
  .nudge .btn.sm { grid-column: auto; }
}

/* Thẻ cấp bậc khi vào app lần đầu / lên cấp (dùng khung kéo lên có sẵn). */
.tier-sheet { text-align: center; justify-items: center; }
.tier-sheet .tier-sheet-ico { width: 88px; height: 92px; display: block; } .tier-sheet .tier-sheet-ico svg { width: 100%; height: 100%; }
.tier-sheet .note { text-align: center; }

/* ---------- Đăng nhập được lợi hơn + quà chào mừng + món hoàn cao (chủ tịch 22/10/2026) ---------- */
.welcome-line { margin: 0; color: var(--ink-2); font-size: 16px; font-weight: 600; }
.hero-cta .welcome-line { text-align: center; }
/* Khối "Nhận link hoàn tiền qua [Zalo] [Messenger]" (24/10/2026): một khung riêng dưới nút chính để chữ dẫn và hai nút
   đọc thành một cụm; hai nút cùng cỡ để so lượt bấm công bằng. */
.chat-cta { display: grid; gap: 10px; padding: 12px; border-radius: 24px; background: var(--chip); container-type: inline-size; }
.chat-cap { margin: 0; text-align: center; color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.3; }
.chat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Cỡ chữ theo bề ngang KHUNG (cqi), không theo màn (vw): 24/10 điện thoại chủ tịch, chữ "Messenger" chạm sát viền nút
   (đo Chrome: 320px chỉ còn 2px mỗi bên). Khung hẹp hơn 290px thì hai nút xếp dọc. */
.hero-cta .chat-row .btn { gap: 6px; min-height: 48px; padding-inline: 12px; font-size: clamp(15px, 5.2cqi, 19px); background: var(--surface); }
@container (max-width: 290px) { .chat-row { grid-template-columns: minmax(0, 1fr); } }
.chat-row.stack { grid-template-columns: minmax(0, 1fr); }
.chat-ico { width: 22px; height: 22px; flex: none; }
.zalo-ico { color: var(--zalo); }
.login .welcome-line, main > .welcome-line { margin-top: -6px; }
.welcome-line b { color: var(--ink); }
/* Màn tiền hoàn khi chưa đăng nhập: hai nút — "Đăng nhập rồi mua" (chính) + "Mua luôn" (phụ). */
.cta-dock.two { display: grid; gap: 8px; }
.cta-dock.two .btn { white-space: nowrap; padding-inline: 14px; font-size: clamp(16px, 4.8vw, 20px); }
.cta-dock.two .btn.quiet { min-height: 46px; font-size: 16px; }
@media (max-width: 899.98px) {
  body.app-body:has(.cta-dock.two:not([hidden] *)) { padding-bottom: calc(var(--nav-h) + 150px); }
}
.deals { display: grid; gap: 12px; }
.deals .section-title { font-size: 24px; line-height: 1.25; }
.deal-card .sub s { color: var(--ink-2); font-weight: 500; margin-left: 4px; }
/* Nút trong thẻ món: cam đặc như "Món trong video" — kiểu viền trong suốt chìm trên nền vé (chủ tịch 22/10/2026). */
.deal-card .btn { white-space: nowrap; }
/* Thẻ "Sắp có" trong Ví (báo đơn qua Zalo). */
.soon-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 22px; box-shadow: inset 0 0 0 2px var(--line); color: var(--ink-2); }
.soon-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); }
.soon-ico svg { width: 22px; height: 22px; }
.soon-main { display: grid; gap: 2px; font-size: 14px; line-height: 1.35; min-width: 0; }
.soon-main b { color: var(--ink); font-size: 16px; }
.soon-pill { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--ink); white-space: nowrap; }
.gift-ico { color: var(--primary); }
.gift-ico svg { width: 72px; height: 72px; margin-inline: auto; display: block; }
.bought-banner .btn { white-space: nowrap; width: 100%; }
@media (max-width: 359.98px) {
  .soon-card { grid-template-columns: minmax(0, 1fr) auto; }
  .soon-ico { display: none; }
}
/* Trang chủ 320px: nút chính không rớt hai dòng (luật chu-giao-dien). */
.hero-cta .btn, .chat-soon-sheet .btn { white-space: nowrap; font-size: clamp(17px, 5.2vw, 22px); }
/* Khách mới thấy quà đang chờ + thẻ chào mừng lần đầu đăng nhập (chủ tịch 22/10/2026). */
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.perks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 16px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.perks b { color: var(--ink); }
.perk-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--primary); }
.perk-ico svg { width: 18px; height: 18px; }
.perk-ico.tier svg { width: 26px; height: 26px; }
.perk-list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 12px; text-align: left; }
.perk-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.perk-list li b { display: block; color: var(--ink); font-size: 16px; }
.perk-list .perk-ico { width: 36px; height: 36px; }
.perk-list .perk-ico svg { width: 20px; height: 20px; }
.perk-list .perk-ico.tier svg { width: 30px; height: 30px; }
.welcome-sheet .tier-sheet-ico { height: 76px; }
.gift-teaser { display: grid; }
.gift-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 16px 20px; }
.gift-card .gift-ico svg { width: 44px; height: 44px; }
.gift-card .gift-main { display: grid; gap: 2px; min-width: 0; }
.gift-card .btn { grid-column: 1 / -1; white-space: nowrap; }
.gift-lock { display: grid; justify-items: center; gap: 2px; padding: 14px; border-radius: 20px; background: var(--ticket-strong); margin-bottom: 4px; }
.gift-lock .gift-ico svg { width: 36px; height: 36px; }
.gift-lock .meta { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0; }
.welcome-sheet .btn { white-space: nowrap; font-size: clamp(16px, 5vw, 20px); padding-inline: 14px; }
.gift-card .name { font-weight: 800; font-size: 18px; line-height: 1.3; }
/* ---------- Quà 20k phải dễ thấy (chủ tịch 22/10/2026: "phải cho nó có hiệu ứng… hoặc popup") ----------
   Hộp quà lắc 0,6 giây mỗi 3,2 giây + vệt sáng lướt qua thẻ quà. Không nhấp nháy chữ (khó đọc). Tắt khi máy bật giảm chuyển động. */
@keyframes gift-wiggle { 0%, 80%, 100% { transform: rotate(0) scale(1); } 84% { transform: rotate(-14deg) scale(1.12); } 88% { transform: rotate(11deg) scale(1.12); } 92% { transform: rotate(-7deg) scale(1.06); } 96% { transform: rotate(4deg); } }
@keyframes gift-shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(220%); } }
.gift-ico svg, .gift-mini svg { animation: gift-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 85%; }
.gift-card, .gift-lock { position: relative; overflow: hidden; isolation: isolate; }
.gift-shine { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.gift-shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent); animation: gift-shine 3.2s ease-in-out infinite; }
.gift-mini { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--primary); flex: none; }
.gift-mini svg { width: 20px; height: 20px; }
/* Dòng "Tài khoản mới được tặng 20.000đ vào ví." — chữ cố định, thành viên thuốc nền cam nhạt có vệt sáng + hộp quà lắc. */
.gift-line { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 8px;
  justify-self: center; width: fit-content; max-width: 100%; margin-inline: auto; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: var(--ticket-strong); color: var(--ink); }
.gift-line .gift-mini { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); }
.perk-gift { position: relative; overflow: hidden; isolation: isolate; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ticket-strong); color: var(--ink) !important; }
.perk-gift .perk-ico { background: var(--surface); }
/* Nút Đăng nhập ở đầu trang điện thoại (trước 22/10/2026 chỉ có ở máy tính). */
.btn.head-login { min-height: 40px; padding: 6px 16px; font-size: 16px; gap: 6px; white-space: nowrap; }
.btn.head-login .gift-mini { color: var(--on-primary); }
.gift-sheet .tier-sheet-ico { height: 84px; }
.gift-sheet .btn { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .gift-ico svg, .gift-mini svg, .gift-shine::after { animation: none; }
}
/* Máy hẹp: logo + nút giao diện + nút Đăng nhập phải vừa một hàng (đo 320px: nút Đăng nhập tràn mép phải). */
@media (max-width: 419.98px) {
  .site-head { gap: 8px; }
  .site-head .head-tools { gap: 8px; }
  .site-head .logo:not(.sm) svg { height: 40px; }
  .btn.head-login { padding: 6px 12px; font-size: 15px; }
}
@media (max-width: 359.98px) {
  .site-head .logo svg { height: 34px; }
  .btn.head-login .gift-mini { display: none; }
}
/* Header dính khi cuộn (chủ tịch duyệt 30/10/2026): chỉ trang chủ + trang nội dung (`sticky=1` trong @include
   site-head → header được bọc trong .sticky-bar) để nút Đăng nhập luôn trong tầm tay. Màn app/* KHÔNG dính: đã có
   thanh điều hướng dưới + nút dính đáy, thêm thanh trên thì máy nhỏ hết chỗ cho nội dung. Cuộn xuống thì thu gọn
   82 → 48px (.stuck, do hoanto.js gắn).
   Thanh bọc rộng hết màn nên nền và viền dưới tự trải hai mép. Bản đầu (sáng 30/10) dùng box-shadow 100vmax +
   clip-path + border-image ngay trên phần tử sticky: iPhone Safari kéo chậm thấy nháy — clip-path trên phần tử
   sticky là chỗ WebKit hay vẽ hụt khung. Trang dính cũng KHÔNG dùng viewport-fit=cover: Safari đổi
   env(safe-area-inset-top) mỗi lần thanh công cụ ẩn/hiện (kéo chậm là ẩn/hiện liên tục), padding theo env() làm
   thanh nhảy 8 ↔ ~60px. */
.sticky-bar { position: sticky; top: 0; z-index: 25; background: var(--bg); border-bottom: 1px solid transparent; }
.sticky-bar.stuck { border-bottom-color: var(--line); }
.sticky-bar.stuck .site-head { padding-block: 8px; }
.sticky-bar.stuck .site-head .logo svg { height: 32px; }
.sticky-bar.stuck .site-head .theme-btn { width: 40px; height: 40px; }
/* Ô giải thích huy hiệu: điều kiện → thưởng (nổi bật) → tình trạng (chủ tịch 22/10/2026: bấm huy hiệu thì hiện lợi ích). */
.tip-reward { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--ticket-strong); font-weight: 600; }
.tip-reward span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tip-state { color: var(--ink-2); font-weight: 600; }
/* Màn mua khách chưa đăng nhập (25/10/2026): đăng nhập là dòng chữ dưới nút chính, nút xem video hướng dẫn. */
.login-alt { display: block; text-align: center; font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 10px 0 2px; }
.howto-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0; padding: 8px 14px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.howto-link svg { width: 26px; height: 26px; color: var(--primary); flex: none; }
.video-sheet { justify-items: center; }
.howto-video { width: auto; height: min(62vh, 560px); max-width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; display: block; }
.ticket .src-line { font-size: 15px; line-height: 1.4; white-space: nowrap; }
@media (max-width: 359.98px) { .ticket .src-line { white-space: normal; text-wrap: balance; } .howto-link { white-space: nowrap; font-size: 15px; } }
/* Nút chính màn mua không rớt hai dòng ở 320px; thanh nút có thêm dòng "Đăng nhập trước" nên chừa thêm chỗ cuối trang
   để nút xem video + dòng giá không bị thanh nút che. */
.cta-dock #buy-btn { white-space: nowrap; font-size: clamp(17px, 5.2vw, 22px); }
@media (max-width: 899.98px) {
  body.app-body:has(.cta-dock .login-alt:not([hidden])) { padding-bottom: calc(var(--nav-h) + 140px); }
}
.ticket .cap.center { text-wrap: balance; }
/* Trang nội dung cho Google (26/10/2026): hoan-to-la-gi, hoan-to-co-uy-tin-khong, cach-nhan-tien-hoan, ti-le-hoan-tien.
   Một cột đọc ≤ 64 chữ, tiêu đề mục cỡ vừa (không dùng cỡ 40px của .section h2 trang chủ). */
.guide { gap: 12px; max-width: 760px; }
.guide h2 { font-size: 21px; font-weight: 800; margin-top: 16px; }
.guide p { max-width: 64ch; }
.guide-video { display: block; width: min(100%, 320px); max-width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; margin: 6px 0; }
.guide .table-wrap { overflow-x: auto; }
.guide table { border-collapse: collapse; width: 100%; font-size: 15px; }
.guide th, .guide td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide th:first-child, .guide td:first-child { padding-left: 0; }
@media (max-width: 399.98px) { .guide table { font-size: 14px; } .guide th, .guide td { padding-inline: 5px; } }
.guide th { color: var(--ink-2); font-size: 14px; font-weight: 700; }
.guide td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.guide-cta .btn { white-space: nowrap; font-size: clamp(16px, 4.8vw, 20px); }
.guide-more { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.guide-more a { color: var(--ink); font-weight: 600; }
.faq .guide-more { border-top: 0; margin-top: 4px; }