/* 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 {
  --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;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@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;
    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;
  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; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
[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 { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; line-height: 1; font-weight: 800; }
.logo span { font-size: 30px; letter-spacing: -0.02em; }
.logo b { font-size: 56px; font-weight: 900; letter-spacing: -0.05em; }
.logo.sm span { font-size: 22px; }
.logo.sm b { font-size: 38px; }

/* ---------- 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); }
.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);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav a {
  display: grid; justify-items: center; gap: 4px; padding: 6px 4px;
  text-decoration: none; font-size: 16px; font-weight: 600; color: var(--ink);
}
.bottom-nav svg { width: 30px; height: 30px; }
.bottom-nav a[aria-current="page"] { color: var(--primary); }
.app-body { padding-bottom: 120px; }

/* ---------- Trang chủ ---------- */
.hero { display: grid; gap: 22px; padding-block: 6px 28px; }
.hero h1 { font-weight: 900; font-size: clamp(36px, 10vw, 60px); letter-spacing: -0.035em; }
.hero .ticket { display: grid; gap: 4px; }
.hero-art img { width: 100%; height: auto; margin-inline: auto; max-width: 560px; }
.hero-art, #hero-ticket .money, #hero-ticket .meta { transition: opacity .25s ease; }
.hero-art.fading, #hero-ticket.fading .money, #hero-ticket.fading .meta { opacity: 0; }
.hero-art { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.hero-art img { max-height: 100%; object-fit: contain; }
.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; }
.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; }
.order-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.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: 18px; }
.order-row .money { font-size: 32px; color: var(--ink); }
: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, .order-row .badge { white-space: normal; text-align: center; }
.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); }
.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; }
.login { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 28px; text-align: center; padding: 40px 20px; }
.login h1 { font-weight: 900; font-size: clamp(36px, 10vw, 54px); }
.login .card { display: grid; gap: 14px; width: 100%; max-width: 460px; }
.g-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 900; color: var(--ink); }

/* ---------- 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 { width: 52px; height: 52px; border-radius: 50%; background: var(--chip); border: 1px solid var(--line); }
  .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 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; align-self: end; }
  .hero .hero-art { grid-column: 2; grid-row: 2; }
  .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; }
  .orders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .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: 100dvh; 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; } }