/* Sim Cải Vận – thành phần giao diện. Dùng token trong tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--font); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--jade-500); text-underline-offset: 3px; }
a:hover { color: var(--jade-600); }
button { font-family: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--jade-500); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--jade-500) 30%, transparent); }
@keyframes scv-spin { to { transform: rotate(360deg); } }

/* ── Khung app ─────────────────────────────── */
.app {
  width: 100%; max-width: var(--max-w); margin: 0 auto; height: 100dvh;
  padding-top: env(safe-area-inset-top); background: var(--bg);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
}
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { display: none; }
.screen { padding: 4px var(--gutter) 104px; display: flex; flex-direction: column; } /* đáy chừa chỗ cho nút gọi nổi */
.screen--input { padding-top: 12px; }
.safe-bottom { height: env(safe-area-inset-bottom); flex: none; }

/* ── Chữ ─────────────────────────────────── */
.kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.muted { color: var(--neutral-700); }
.serif-num { font-weight: 600; font-feature-settings: "tnum" 1; }
.phone-lg { font-weight: 600; letter-spacing: 0.03em; }
.h1 { font-size: 36px; line-height: 1.08; margin: 28px 0 12px; text-wrap: pretty; color: var(--crimson-800); }
.h2 { font-size: 32px; margin: 20px 0 6px; color: var(--crimson-800); }
.lead { font-size: 15px; color: var(--neutral-700); margin: 0 0 32px; text-wrap: pretty; }
.note { font-size: 14px; color: var(--neutral-700); text-wrap: pretty; }
.section-title { font-weight: 600; font-size: 18px; }

/* ── Nút ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; font-family: var(--font); font-weight: 600;
  font-size: 14px; line-height: 1.2; color: var(--ink); background: transparent;
  border: 1px solid transparent; padding: 10px 18px; border-radius: var(--radius-md);
  min-height: 44px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--jade-800); color: var(--gold-btn-text); border-color: var(--gold);
  letter-spacing: 0.04em; min-height: 52px; font-size: 17px; width: 100%;
}
.btn-primary:not(:disabled):hover { background: var(--jade-700); color: var(--gold-btn-text); }
.btn-primary:not(:disabled):active { background: var(--jade-600); }
.btn-secondary { border-color: var(--divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.btn-secondary:active { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.btn-ghost { color: var(--jade-500); padding-inline: 5px; white-space: nowrap; }
.btn-ghost:hover { background: color-mix(in srgb, var(--jade-500) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--jade-500) 18%, transparent); }
.btn-icon { width: 44px; height: 44px; padding: 0; }
.btn-block { width: 100%; }

/* ── Ô nhập ──────────────────────────────── */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.input {
  width: 100%; min-height: 44px; padding: 6px 10px; font: inherit; font-size: 16px;
  color: var(--ink); caret-color: var(--jade-500); background: var(--surface);
  border: 1px solid var(--divider); border-radius: var(--radius-md);
}
.input::placeholder { color: color-mix(in srgb, var(--ink) 65%, transparent); opacity: 1; }
.input:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.input:focus-visible { border-color: var(--jade-500); outline-offset: 0; }
.input--phone { font-size: 22px; min-height: 52px; letter-spacing: 0.04em; font-weight: 600; }

/* ── Segmented ───────────────────────────── */
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--divider); border-radius: var(--radius-md); align-self: flex-start; }
.seg-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; font-size: 14px; cursor: pointer; white-space: nowrap;
  border: 0; background: transparent; color: var(--ink); font-family: inherit; min-height: 44px;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--divider); }
.seg-opt[aria-pressed="true"] { background: var(--jade-500); color: var(--bg); }
.seg-opt:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg-opt:focus-visible { outline: 2px solid var(--jade-500); outline-offset: -2px; }

/* ── Trang trí ───────────────────────────── */
.double-rule { display: flex; flex-direction: column; gap: 3px; }
.double-rule::before, .double-rule::after { content: ""; border-top: 1px solid var(--gold); }
.fret {
  height: 10px; margin-top: 5px; background-repeat: repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2710%27%3E%3Cpath%20d%3D%27M0%209H12V1H4V6H8V4%27%20fill%3D%27none%27%20stroke%3D%27%23b8914a%27%20stroke-width%3D%271.1%27%2F%3E%3C%2Fsvg%3E");
}
.ornament { display: flex; align-items: center; gap: 10px; margin: 40px 0 8px; }
.ornament .line { flex: 1; border-top: 1px solid var(--gold); }
.ornament .diamond { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
.ornament .kicker { letter-spacing: 0.22em; }
.bagua svg { display: block; width: 100%; height: 100%; animation: scv-spin 240s linear infinite; }
@media (prefers-reduced-motion: reduce) { .bagua svg { animation: none; } }

/* ── Thanh đầu trang ─────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; height: 44px; gap: 8px; }
.topbar .btn-ghost { font-size: 15px; margin-left: -6px; flex: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.logo-btn {
  border: 0; background: transparent; padding: 5px; margin: -5px; cursor: pointer; border-radius: 50%;
  flex: none; display: flex; transition: transform .15s; /* hình 34px, vùng bấm 44px */
}
.logo-btn:hover { transform: scale(1.08); }
.logo-btn:active { transform: scale(0.94); }
.logo-btn img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px var(--gold); }

/* ── Màn đầu ─────────────────────────────── */
.hero { display: flex; justify-content: center; padding: 4px 0 12px; position: relative; }
.hero .bagua { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -156px 0 0 -150px; opacity: 0.16; pointer-events: none; }
.hero img { width: 196px; height: 196px; position: relative; }
.dateline { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; }
.dateline .date { font-size: 11px; color: var(--neutral-700); }
.form { display: flex; flex-direction: column; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.form-row .seg { height: 44px; }
.form-row .seg-opt { padding: 0 18px; font-size: 15px; height: 100%; }
.profile { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; }
.profile .canchi { font-weight: 600; font-size: 20px; }
.profile .napam { font-size: 14px; font-style: italic; color: var(--neutral-700); }
.input-error { font-size: 12px; color: var(--crimson-700); margin-top: 8px; min-height: 18px; }
.block { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.block-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.block-head .btn-ghost { font-size: 14px; margin-right: -8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.history { display: flex; flex-direction: column; }
.history-item {
  border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 0;
  border-bottom: 1px solid var(--card-border); align-items: baseline;
}
.history-item:hover { background: var(--row-hover); }
.history-item .big { font-weight: 600; font-size: 18px; letter-spacing: 0.03em; }
.history-item .small { font-size: 12px; color: var(--neutral-700); }

/* ── Bảng điểm ───────────────────────────── */
.scoreboard { position: relative; overflow: hidden; background: var(--jade-800); border-radius: var(--radius-md); padding: 5px; margin-top: 24px; box-shadow: var(--shadow-md); }
.scoreboard-inner { position: relative; border: 1px solid var(--gold); border-radius: 2px; padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.scoreboard .bagua { position: absolute; right: -80px; top: -70px; width: 250px; height: 250px; opacity: 0.22; pointer-events: none; }
.scoreboard .kicker { position: relative; color: var(--gold-label); }
.score-row { position: relative; display: flex; align-items: flex-end; gap: 14px; }
.score-num { font-weight: 600; font-size: 112px; line-height: 0.9; letter-spacing: -0.03em; color: var(--gold-light); }
.score-num--84 { font-size: 84px; }
.score-num--72 { font-size: 72px; }
.score-meta { display: flex; flex-direction: column; padding-bottom: 6px; }
.score-meta .of { font-size: 14px; color: var(--mist-on-dark); }
.score-meta .verdict { font-weight: 600; font-size: 22px; color: var(--cream-on-dark); }
.score-summary { position: relative; font-size: 16px; font-style: italic; margin-top: 6px; color: var(--mist-on-dark-2); text-wrap: pretty; }

/* ── Ba mặt ──────────────────────────────── */
.aspects { display: flex; flex-direction: column; gap: 4px; }
.aspect-row {
  border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
  margin: 0 -12px; padding: 14px 12px; border-radius: var(--radius-md);
  display: grid; grid-template-columns: 40px 1fr auto; gap: 2px 14px; align-items: center;
}
.aspect-row:hover { background: var(--row-hover); }
.aspect-row .ring { grid-row: span 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--jade-700); font-size: 20px; }
.aspect-row .name { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.aspect-row .pts { grid-row: span 3; display: flex; align-items: center; gap: 6px; }
.aspect-row .pts b { font-weight: 600; font-size: 28px; }
.aspect-row .pts i { color: var(--neutral-600); }
.aspect-row .headline { font-weight: 600; font-size: 19px; line-height: 1.2; }
.aspect-row .sub { font-size: 13px; color: var(--neutral-700); }
.aspect-row--compact { padding: 12px; }
.aspect-row--compact .ring, .aspect-row--compact .pts { grid-row: span 2; }
.aspect-row--compact .pts b { font-size: 24px; }
.aspect-row--compact .headline { font-size: 15px; }

.share-row { display: flex; gap: 8px; margin-top: 14px; }
.share-row .btn { white-space: nowrap; }
.share-row .btn:first-child { flex: 1; }
.cta { margin-top: 40px; display: flex; flex-direction: column; gap: 6px; }
.cta-title { font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--crimson-800); text-wrap: pretty; }
.cta .btn-primary { margin-top: 16px; }

/* ── Luận giải chi tiết ──────────────────── */
.tab-body { display: flex; flex-direction: column; margin-top: 36px; }
.hexes { gap: 32px; }
.hex { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.hex-bars { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.hex-bar { display: flex; height: 7px; }
.hex-bar span { flex: 1; }
.hex-text { display: flex; flex-direction: column; gap: 3px; }
.hex-role { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-700); }
.hex-name { font-weight: 600; font-size: 21px; line-height: 1.2; }
.hex-tri { font-size: 13px; color: var(--jade-700); }
.body-text { font-size: 14px; color: var(--neutral-800); text-wrap: pretty; }
.fine { font-size: 13px; color: var(--neutral-700); text-wrap: pretty; }
.bc { gap: 36px; }
.bc-ratio { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bc-bar { display: flex; gap: 3px; height: 8px; }
.bc-bar span { flex: 1; border-radius: 1px; }
.stars { display: flex; flex-direction: column; gap: 12px; }
.star-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: baseline; font-size: 15px; }
.star-row .key { font-weight: 600; font-size: 19px; letter-spacing: 0.06em; }
.pt { gap: 26px; }
.pt-row { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; }
.pt-row .full { grid-column: 1 / -1; }
.digits4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.digit { display: flex; flex-direction: column; gap: 2px; }
.digit .n { font-weight: 600; font-size: 34px; line-height: 1; }
.digit .w { font-size: 14px; font-weight: 600; }
.digit .m { font-size: 12px; color: var(--neutral-700); }
.combo { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.combo b { letter-spacing: 0.06em; color: var(--jade-700); }

/* ── Thẻ sim ─────────────────────────────── */
.cards { display: flex; flex-direction: column; gap: 12px; }
.sim-card {
  border: 1px solid var(--card-border); background: var(--card-bg); border-radius: var(--radius-md);
  text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 16px 18px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%;
}
.sim-card:hover { background: var(--card-hover); }
.sim-card .kick { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jade-700); }
.sim-card .right { grid-row: span 2; align-self: center; text-align: right; display: flex; flex-direction: column; }
.sim-card .right b { font-weight: 600; font-size: 26px; line-height: 1; }
.sim-card .right small { font-size: 11px; color: var(--neutral-700); }
.sim-card .num { font-weight: 600; font-size: 22px; letter-spacing: 0.03em; }
.sim-card .full { grid-column: 1 / -1; }
.sim-card .line3 { font-size: 13px; color: var(--neutral-700); }
.sim-card .price { font-size: 14px; color: var(--neutral-800); }
.sim-card .profit-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sim-card .memo { font-size: 13px; font-style: italic; color: var(--neutral-700); }
.sim-card.is-sold { opacity: 0.6; }

/* ── Chi tiết sim ────────────────────────── */
.detail-net { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jade-700); margin-top: 20px; }
.promise { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; font-size: 14px; color: var(--neutral-800); }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }

/* ── Kho số ──────────────────────────────── */
.kho-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.setup { margin-top: 18px; padding: 18px; border: 1px solid var(--card-border); background: var(--card-bg); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 14px; }
.setup .btn-primary { min-height: 44px; font-size: 15px; }
.setup ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--neutral-800); }
.setup a { font-size: 13px; display: flex; gap: 6px; align-items: center; min-height: 44px; }
.kho-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kho-summary .kicker { letter-spacing: 0.14em; }
.kho-summary b { font-weight: 600; font-size: 18px; }
.empty { margin-top: 36px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.empty i { font-size: 40px; color: var(--gold); }
.empty b { font-weight: 600; font-size: 20px; }

/* ── Nút gọi nổi, toast, bảng đặt mua ────── */
.fab {
  position: absolute; right: 18px; bottom: calc(46px + env(safe-area-inset-bottom)); z-index: 4;
  width: 56px; height: 56px; border-radius: 50%; background: var(--jade-800); border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center;
  color: var(--gold-light); font-size: 26px; text-decoration: none;
}
.fab:hover { color: var(--gold-light); }
.fab:active { transform: scale(0.94); }
.toast {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(64px + env(safe-area-inset-top)); z-index: 6;
  background: var(--jade-800); color: var(--cream-on-dark); border: 1px solid var(--gold); border-radius: var(--radius-md);
  padding: 12px 16px; font-size: 14px; box-shadow: var(--shadow-lg); text-align: center;
}
.sheet-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--neutral-900) 50%, transparent); display: flex; align-items: flex-end; z-index: 5; }
.sheet {
  width: 100%; background: var(--bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg);
  padding: 24px 24px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px;
}
.sheet { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; gap: 14px; }
.steps { display: flex; gap: 6px; }
.steps span { flex: 1; height: 3px; background: var(--card-border); border-radius: 2px; }
.steps span.on { background: var(--jade-500); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; }
.sheet-lines { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
.sheet-lines b { font-weight: 600; color: var(--crimson-700); }
.bank { border: 1px solid var(--card-border); background: var(--card-bg); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; }
.bank-qr { width: 180px; height: auto; aspect-ratio: 540 / 640; align-self: center; margin-bottom: 6px; background: #fff; }
.bank-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; min-height: 40px; }
.bank-row + .bank-row { border-top: 1px dashed var(--card-border); }
.bank-val { display: flex; align-items: center; gap: 2px; text-align: right; }
.bank-val b { font-weight: 600; letter-spacing: 0.02em; }
.bank-val .btn-icon { margin-right: -10px; font-size: 18px; }
.bill-pick { position: relative; font-size: 14px; min-height: 48px; border-style: dashed; border-color: var(--gold); }
.bill-preview { margin-top: 10px; max-height: 220px; width: auto; max-width: 100%; border: 1px solid var(--card-border); border-radius: var(--radius-md); align-self: flex-start; }
.sheet-title { font-weight: 600; font-size: 22px; }
.sheet-total { display: flex; justify-content: space-between; font-size: 15px; }
.sheet-done { display: flex; flex-direction: column; gap: 10px; }
.sheet .field { display: flex; flex-direction: column; }
.sheet-done > i { font-size: 40px; color: var(--jade-500); }
.sheet-done .sheet-title { font-size: 24px; }
.sheet-done .btn-primary { font-size: 16px; margin-top: 8px; }
.sheet-done .btn-secondary { min-height: 48px; font-size: 15px; }
[hidden] { display: none !important; }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 13px; color: var(--neutral-800); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--jade-500); }
.disclaimer { font-size: 12px; font-style: italic; color: var(--neutral-700); margin-top: 10px; }
.app-footer { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--card-border); font-size: 12px; color: var(--neutral-700); }
.app-footer p { margin: 0 0 4px; }
.app-footer a { display: inline-block; padding: 6px 0; }