/* ============================================================
   EMERALD WALLET — PayYG Skin V5
   Mobile-first · nền trắng · 1 màu emerald · thẻ số dư + segment.
   Light-only. Display: Plus Jakarta Sans · Body: Be Vietnam Pro
   ============================================================ */

:root {
  --bg:#ffffff; --bg-2:#f7f9f8; --card:#ffffff; --card-2:#f6f8f7;
  --text:#131a16; --text-soft:#5b6661; --text-faint:#8a938e;
  --accent:#0e9f6e; --accent-strong:#0a7d56; --accent-press:#086b49;
  --accent-wash:#e9f7f1; --on-accent:#ffffff;
  --pos:#0e9f6e; --neg:#e5484d; --warn:#d9920a;
  --border:#e6ebe8; --border-strong:#d2dad6;
  --radius:14px; --radius-card:20px;
  --shadow-card:0 1px 0 rgba(20,30,25,.03), 0 14px 38px -24px rgba(20,40,30,.40);
  --shadow-accent:0 12px 26px -12px rgba(14,159,110,.45);
  --grad-emerald:linear-gradient(145deg,#0e9f6e,#0a7d56);
  --font-display:"Plus Jakarta Sans","Be Vietnam Pro","Segoe UI",sans-serif;
  --font-body:"Be Vietnam Pro","Segoe UI",sans-serif;
  --shell:480px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin:0; font-family:var(--font-body); font-size:15px; line-height:1.6;
  color:var(--text); background:var(--bg-2); min-height:100vh;
}
img { max-width:100%; height:auto; border:0; }
a { color:var(--accent-strong); text-decoration:none; }
a:hover { color:var(--accent-press); }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0 0 .5em; color:var(--text); }
small { font-size:.82em; }

/* ---------- utilities (legacy hooks) ---------- */
.list-flex { display:flex; } .flex-middle { align-items:center; } .flex-center { justify-content:center; }
.text-center { text-align:center; }
.one-line-ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.show_mb { display:none; }

/* ============================================================
   V5 SHELL — top bar + thẻ số dư + segment (skins/v5/masthead.php)
   ============================================================ */
.app-v5 { min-height:100vh; display:flex; flex-direction:column; }
#app.app-v5 { max-width:var(--shell); margin:0 auto; width:100%; background:var(--bg); box-shadow:0 0 0 1px var(--border); }

.v5-top { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; }
.v5-brand { display:flex; align-items:center; gap:8px; color:var(--text); }
.v5-brand img { border-radius:8px; }
.v5-word { font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.02em; color:var(--accent-strong); }
.v5-tools { margin-left:auto; display:flex; align-items:center; gap:10px; }
.v5-support { display:inline-flex; color:var(--text-soft); }
.v5-support:hover { color:var(--accent-strong); }
.user--avatar { width:30px; height:30px; border-radius:50%; background:var(--grad-emerald); color:#fff; font:800 13px/30px var(--font-display); text-align:center; }

/* thẻ số dư — chữ ký skin V5 */
.v5-card { margin:6px 16px 0; padding:16px 18px; border-radius:var(--radius-card);
  background:var(--grad-emerald); color:#fff; box-shadow:var(--shadow-accent); }
.v5-card-k { font:700 10px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.v5-card-num { font:800 26px/1.05 var(--font-display); margin-top:6px; }
.v5-card-num small { font-size:13px; opacity:.85; }
.v5-card-meta { display:flex; justify-content:space-between; gap:10px; margin-top:14px; font:600 11px/1 ui-monospace,monospace; opacity:.92; }
.v5-card-cta { display:flex; align-items:center; justify-content:space-between; }

/* segment nav — sticky */
.v5-seg { position:sticky; top:0; z-index:30; display:flex; gap:5px; margin:14px 16px 0;
  padding:5px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-card); }
.v5-seg > a { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 6px; border-radius:10px; font:700 12.5px/1 var(--font-body); color:var(--text-soft); transition:.15s; white-space:nowrap; }
.v5-seg > a svg { opacity:.7; flex:0 0 auto; }
.v5-seg > a span { overflow:hidden; text-overflow:ellipsis; }
.v5-seg > a.active { background:var(--accent-strong); color:#fff; }
.v5-seg > a.active svg { opacity:1; }

/* lang picker (reuse V4 pattern, palette V5) */
.lang-pick { position:relative; }
.lang-pick summary { list-style:none; cursor:pointer; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--border); }
.lang-pick summary::-webkit-details-marker { display:none; }
.lang-menu { position:absolute; right:0; top:36px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-card); padding:6px; display:flex; gap:4px; z-index:40; }
.lang-menu a { padding:6px 8px; border-radius:8px; } .lang-menu a:hover { background:var(--accent-wash); }

/* ============================================================
   HOME — Nạp landing (skins/v5/home.php)
   ============================================================ */
.v5-home { padding:16px; display:flex; flex-direction:column; gap:14px; }
.v5-sec { font:700 11px/1 var(--font-body); letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin:4px 0 0; }
.v5-packs { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.v5-pk { position:relative; display:flex; flex-direction:column; gap:5px; padding:14px 13px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); color:var(--text); }
.v5-pk:hover { border-color:var(--accent); box-shadow:var(--shadow-accent); }
.v5-pk-top { display:flex; align-items:center; gap:8px; }
.v5-pk-ic { width:26px; height:26px; flex:0 0 auto; }
.v5-pk-coin { font:800 17px/1 var(--font-display); color:var(--text); }
.v5-pk-coin i { font-style:normal; font-size:11px; color:var(--text-faint); font-weight:600; }
.v5-pk-price { font:600 12px/1 var(--font-body); color:var(--text-soft); }
.v5-pk-tag { position:absolute; top:-8px; right:-6px; font:800 10px/1 var(--font-body); color:var(--accent-strong);
  background:var(--accent-wash); border:1px solid color-mix(in srgb,var(--accent) 25%,#fff); padding:4px 7px; border-radius:9px; }

/* banner strip — CSS scroll-snap (markup .banner-snap/.banner-it chuẩn) */
.banner-snap { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.banner-snap::-webkit-scrollbar { display:none; }
.banner-it { flex:0 0 100%; min-width:0; scroll-snap-align:center; }
.banner-it img { width:100%; border-radius:var(--radius); display:block; }

/* ============================================================
   MAIN SHELL
   ============================================================ */
#main { flex:1; }
.menu-tab-content { display:none; }
.menu-tab-content.active { display:block; }

/* overflow safety: let flex children shrink below intrinsic content (mobile) */
.app-v5 > *, #main, #home, .menu-tab-content, .v5-home, .box-inner, .history-inner { min-width:0; }
.app-v5 img { max-width:100%; }

/* global loader + copy toast (markup luôn có trong body) */
#global-loader { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; background:var(--bg); color:var(--text-soft);
  font-family:var(--font-body); font-size:13px; }
#global-loader i { display:block; width:34px; height:34px; border-radius:50%;
  border:3px solid var(--accent-wash); border-top-color:var(--accent-strong); animation:v5spin .8s linear infinite; }
@keyframes v5spin { to { transform:rotate(360deg); } }
.jaaKgY { display:none; opacity:0; position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:10000;
  background:var(--accent-strong); color:#fff; font:700 13.5px/1 var(--font-body); padding:12px 20px; border-radius:99px;
  box-shadow:0 14px 32px -8px rgba(14,159,110,.55); transition:opacity .2s ease; white-space:nowrap; }
.jaaKgY::before { content:"\2713  "; font-weight:800; }

/* ============================================================
   FOOTER (skins/v5/footer.php)
   ============================================================ */
.v5-foot { padding:22px 16px 28px; }
.v5f-row { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
.v5f-row a { font:600 12.5px/1 var(--font-body); color:var(--text-soft); }
.v5f-row a:hover { color:var(--accent-strong); }
.v5f-row .bq { width:100%; margin:6px 0 0; font-size:12px; color:var(--text-faint); }
.colophon-company { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.cc-name { font-family:var(--font-display); color:var(--text); }
.cc-line { font-size:12px; color:var(--text-soft); margin-top:3px; }
.cc-copy { font-size:11.5px; color:var(--text-faint); margin-top:8px; }

/* ============================================================
   RECHARGE WIZARD — 3 inline steps (shared/recharge.php)
   ============================================================ */
#recharge .box-inner { padding:16px; display:flex; flex-direction:column; gap:14px; }

/* account summary strip — ẨN: số dư + danh tính đã có ở thẻ masthead (tránh lặp, đỡ rối) */
.call-result { display:none; }

/* stepper */
.wizard-rail { counter-reset:wzc; display:flex; align-items:flex-start; gap:6px; }
.wz-step { flex:1; position:relative; font:700 11px/1.3 var(--font-body); color:var(--text-faint); text-align:center; padding-top:26px; }
.wz-step::before { content:counter(wzc); counter-increment:wzc; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%; background:var(--card); border:1.5px solid var(--border);
  color:var(--text-faint); font:800 11px/19px var(--font-display); }
.wz-step.now { color:var(--text); } .wz-step.now::before { background:var(--accent-strong); border-color:var(--accent-strong); color:#fff; }
.wz-step.done::before { background:var(--accent-wash); border-color:var(--accent); color:var(--accent-strong); }

.wz-pane { display:none; } .wz-pane.active { display:block; }
.wz-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.wz-head h3 { font-size:15px; margin:0; }
.wz-back { font:700 12px/1 var(--font-body); color:var(--text-soft); cursor:pointer; }
.wz-back:hover { color:var(--accent-strong); }

/* step 1 packages */
.ticket-rack { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.call-package-it a { position:relative; display:flex; flex-direction:column; gap:6px; padding:14px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); color:var(--text); }
.call-package-it a:hover { border-color:var(--accent); box-shadow:var(--shadow-accent); }
.call-package-box { display:flex; align-items:center; gap:8px; }
.call-package-box img { width:24px; height:24px; }
.call-package-box span { font:800 16px/1 var(--font-display); }
.call-package-it p { margin:0; font:600 12px/1 var(--font-body); color:var(--text-soft); }
.pk-tag { position:absolute; top:-8px; right:-6px; font:800 10px/1 var(--font-body); color:var(--accent-strong);
  background:var(--accent-wash); border:1px solid color-mix(in srgb,var(--accent) 25%,#fff); padding:4px 7px; border-radius:9px; }

/* step 2 channels */
.wz-order-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; background:var(--accent-wash);
  border-radius:var(--radius); padding:10px 13px; font:600 12px/1.3 var(--font-body); color:var(--text-soft); }
.wz-order-line b.price, .wz-order-line b.description { color:var(--accent-strong); font-weight:800; }
.modal-pay-list { display:flex; flex-direction:column; gap:8px; }
.md-pay-it { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-card); padding:11px 12px; cursor:pointer; }
.md-pay-it:hover { border-color:var(--accent); }
.md-pay-it.active { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent), var(--shadow-card); }
.md-pay-it .icon { width:30px; height:30px; border-radius:8px; flex:0 0 auto; }
.md-pay-des { min-width:0; } .md-pay-des p { margin:0; } .md-pay-des p:first-child { font:700 13px/1.2 var(--font-body); color:var(--text); }
.md-pay-des .price { font-size:11.5px; color:var(--text-soft); }
.md-pay-label { margin-left:auto; flex:0 0 auto; font:700 10px/1 var(--font-body); color:var(--accent-strong); background:var(--accent-wash); padding:4px 7px; border-radius:7px; }
.disabled-div { opacity:.45; pointer-events:none; }

/* step 3 confirm */
.wz-confirm { display:flex; flex-direction:column; gap:12px; }
.modal2-info, .modal2-pay, .modal2-total { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:14px 15px; }
.modal2-info > p:first-child { margin:0 0 11px; font:700 11px/1.3 var(--font-body); letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); }
.wallet-info-wrap { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.wallet-left { flex:1; min-width:0; }
.wallet-left p { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0; font-size:13.5px; color:var(--text-soft); }
.wallet-left p .description { color:var(--text); font-weight:800; font-family:var(--font-display); }
.modal2-info select, .wz-confirm select, .wz-confirm input[type="text"], .wz-confirm input[type="number"] { width:100%; margin-top:10px; }
.modal2-pay { display:flex; align-items:center; gap:12px; }
.modal2-pay img { width:34px; height:34px; border-radius:9px; flex:0 0 auto; }
.modal2-pay-info { flex:1; min-width:0; }
.modal2-pay-info p { margin:0; } .modal2-pay-info p:first-child { font:700 14px/1.3 var(--font-body); color:var(--text); }
.modal2-pay-info .description { font-size:12px; color:var(--text-soft); margin-top:2px; }
.modal2-pay .direct-sale { flex:0 0 auto; } .modal2-pay .direct-sale p { margin:0; font:800 11px/1 var(--font-body); color:var(--accent-strong); background:var(--accent-wash); padding:4px 8px; border-radius:7px; }
.change-price-button { flex:0 0 auto; }
.change-price-button a, .choose-again, .choose-again1 { font:700 11.5px/1 var(--font-body); color:var(--accent-strong); cursor:pointer; }
.modal2-total > p:first-child { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 6px; font:700 14px/1.3 var(--font-body); color:var(--text); }
.modal2-total .price { color:var(--accent-strong); font-weight:800; font-family:var(--font-display); font-size:18px; }
.custom-checkbox { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-soft); position:relative; cursor:pointer; margin:10px 0; }
.custom-checkbox input { position:absolute; opacity:0; width:18px; height:18px; margin:0; cursor:pointer; }
.checkmark { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border-strong); flex:0 0 auto; }
.custom-checkbox input:checked ~ .checkmark { background:var(--accent-strong); border-color:var(--accent-strong); }
.modal2-btn, #payment { width:100%; border:0; cursor:pointer; background:var(--accent-strong); color:#fff;
  font:800 15px/1 var(--font-display); padding:14px; border-radius:12px; box-shadow:var(--shadow-accent); }
.modal2-btn:hover { background:var(--accent-press); }
#error-message { color:var(--neg); font-size:12.5px; margin-top:8px; }

/* ============================================================
   COUNTRY PAYMENT SECTIONS (shared/pay-sections.php) — nạp thẻ / QR / code
   ============================================================ */
.box-inner { padding:16px; }
.pay-title-big { font:800 20px/1.2 var(--font-display); color:var(--text); padding-bottom:4px; margin:0 0 16px; }

/* step indicator: ẩn img legacy, vẽ số emerald */
.modal-process { display:flex; align-items:center; gap:10px; margin-bottom:22px; counter-reset:payswz; }
.modal-process .step-icon { counter-increment:payswz; display:flex; align-items:center; gap:8px; }
.modal-process .step-icon img { display:none; }
.modal-process .step-icon::before { content:counter(payswz); width:26px; height:26px; flex:0 0 26px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid transparent; border-radius:50%; font:700 12.5px/1 var(--font-display); background:var(--accent-strong); color:#fff; }
.modal-process .step-icon:last-child::before { background:var(--card); color:var(--text-faint); border-color:var(--border-strong); }
.modal-process .step-name { margin:0; font:600 12px/1.2 var(--font-display); color:var(--text-soft); }
.modal-process .step-line { flex:1; height:1.5px; background:var(--border-strong); border-radius:2px; }
.modal-process .step-line div { display:none; }
.modal-process .step-line-active { background:var(--accent); }

.pay-bg { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-card); position:relative; }
.pay-bg::after { display:none; }

.table-acc, .pay-info { width:100%; margin-bottom:14px; border-collapse:collapse; }
.table-acc td, .pay-info td { padding:9px 4px; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-soft); vertical-align:top; }
.table-acc td:last-child, .pay-info .td-special { text-align:right; color:var(--text); }
.table-acc b, .pay-info b { font-family:var(--font-display); font-weight:700; }
.table-acc b.description, .pay-info b.price { color:var(--accent-strong); }
.pay-info b.price { font-size:17px; }
.pay-info .td-special p { margin:0 0 4px; }

/* hướng dẫn đánh số (.pay-title <span>N</span>) */
.pay-title { font:500 13.5px/1.55 var(--font-body); color:var(--text-soft); display:flex; gap:10px; align-items:baseline; margin:0 0 10px; }
.pay-title span { font-family:var(--font-display); flex:0 0 22px; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-strong); color:#fff; font:700 12px/1 var(--font-display); border-radius:50%; transform:translateY(3px); }
.pay-title a, .pay-bg a, .pay-note a { color:var(--accent-strong) !important; font-weight:600; text-decoration:none !important; }
.pay-title font[color="red"], .pay-bg font[color="red"] { color:var(--neg) !important; font-weight:700; }

.pay-note { background:var(--accent-wash); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; padding:12px 14px; font-size:13px; color:var(--text-soft); margin:16px 0 0; }
.note1 { color:var(--neg); }

/* QR */
.pay-box { display:flex; flex-direction:column; gap:16px; }
.pay-qr { text-align:center; }
.pay-qr-box { position:relative; width:220px; max-width:100%; margin:0 auto; padding:10px; border:1px solid var(--border-strong); border-radius:14px; background:#fff; }
.pay-qr-box .line-border { display:none; }
.pay-qr-box .qr-img-main, #qr-image { display:block; width:100%; border-radius:8px; }
.pay-download { margin-top:10px; }
.pay-download button { display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--border-strong); border-radius:99px; padding:8px 14px; font:500 12.5px/1 var(--font-body); color:var(--text-soft); cursor:pointer; }
.pay-download button:hover { border-color:var(--accent); color:var(--text); }
.pay-download button img { width:14px; height:14px; }

/* nút copy (clipboard .btn) */
button.btn { background:var(--accent-wash); border:1px solid var(--accent); color:var(--accent-strong); font:700 11px/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:99px; cursor:pointer; }
button.btn:hover { background:var(--accent-strong); color:#fff; }

/* form nạp thẻ: loại thẻ / mệnh giá / serial / mã thẻ */
.code-form, .code-form form { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.code-ip { width:100%; }
.code-ip select, .code-ip input, .btn_dropdown, .input-code { width:100%; }
.fun-btn-v3.fluid { width:100%; }
.fun-btn-v3.lg { padding:14px; font-size:15px; }

/* bottom + nút phụ */
.pay-bottom { margin-top:20px; border-top:1px dashed var(--border-strong); padding-top:14px; font-size:13px; color:var(--text-soft); }
.pay-bottom .title-list-bank span { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:1px solid var(--accent); color:var(--accent-strong); border-radius:50%; font:700 11px/1 var(--font-display); }
.pay-bottom .jrlEgk { font-weight:600; color:var(--accent-strong); }
.pay-bottom p img { width:14px; height:14px; margin-right:6px; vertical-align:-2px; }
.pay-btn { display:flex; gap:10px; margin-top:14px; }
.pay-btn a { flex:1; text-align:center; font:600 14px/1 var(--font-display); padding:11px 16px; border:1px solid var(--border-strong); border-radius:12px; color:var(--text); }
.pay-btn a:hover { border-color:var(--accent); background:var(--accent-wash); }
.pay-btn a.btn-orange { background:var(--accent-strong); color:#fff; border-color:transparent; box-shadow:var(--shadow-accent); }

/* lịch sử nạp thẻ */
.history-cardvn { margin-top:20px; }
.history-cardvn table { width:100%; border-collapse:separate; border-spacing:0 8px; }
.history-cardvn td { background:var(--card-2); border:1px solid var(--border); border-right:0; border-left:0; padding:11px 12px; font-size:12.5px; color:var(--text-soft); vertical-align:top; }
.history-cardvn td:first-child { border-left:1px solid var(--border); border-radius:12px 0 0 12px; }
.history-cardvn td:last-child { border-right:1px solid var(--border); border-radius:0 12px 12px 0; text-align:right; }
.history-cardvn p { margin:0 0 2px; color:var(--text); } .history-cardvn small { color:var(--text-faint); }
.history-cardvn .success small { color:var(--pos); font-weight:700; } .history-cardvn .process small { color:var(--warn); font-weight:700; }

/* ============================================================
   HISTORY — tabs + filter + rows + status chip (shared/history.php)
   ============================================================ */
.history-inner { padding:16px; display:flex; flex-direction:column; gap:14px; }
.history-tab-title { display:flex; gap:8px; flex-wrap:wrap; }
.history-tab-title a { padding:8px 14px; border-radius:20px; font:700 12.5px/1 var(--font-body); color:var(--text-soft);
  background:var(--card-2); box-shadow:inset 0 0 0 1px var(--border); transition:.15s; }
.history-tab-title a:hover { color:var(--accent-strong); border-color:var(--accent); }
.history-tab-title a.active { color:var(--accent-strong); background:var(--accent-wash); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,#fff); }
.history-search { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:13px; }
.list-flex-history { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.input-time { flex:1; min-width:120px; } .input-time label { display:block; font:600 11px/1 var(--font-body); color:var(--text-faint); margin-bottom:5px; }
.input-time input { width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 11px; font:600 13px/1 var(--font-body); color:var(--text); background:var(--bg); }
.list-flex-history > span { align-self:center; color:var(--text-faint); padding-bottom:10px; }
.history-btn { margin-top:11px; } #search-btn { width:100%; border:0; cursor:pointer; background:var(--accent-strong); color:#fff; font:800 14px/1 var(--font-display); padding:12px; border-radius:11px; }
.history-tab-it { display:none; } .history-tab-it.active { display:block; }
.history-result { margin-top:4px; }

/* Bảng giao dịch do AJAX (footer.php) bơm vào .history-result — <table> KHÔNG có id.
   Mỗi <tr> = 2 ô: trái (tiêu đề/mã đơn/thời gian) · phải (số tiền + chip trạng thái). */
.history-result table { width:100%; border-collapse:separate; border-spacing:0 9px; }
.history-result td { background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:13px 14px; vertical-align:middle; }
.history-result td:first-child { border-left:1px solid var(--border); border-radius:14px 0 0 14px; }
.history-result td:last-child { border-right:1px solid var(--border); border-radius:0 14px 14px 0; text-align:right; white-space:nowrap; width:1%; }
.history-result td p { margin:0; }
.history-result td:first-child p:first-child { font:700 14px/1.35 var(--font-body); color:var(--text); }
.history-result td:first-child small { font-size:11.5px; color:var(--text-faint); line-height:1.7; }
.history-result td:last-child p:first-child { font:800 15px/1.2 var(--font-display); color:var(--text); display:inline-flex; align-items:center; gap:4px; justify-content:flex-end; }
.history-result td:last-child p:first-child img { vertical-align:middle; }
.history-result td:last-child .success { margin-top:7px; }
.history-result td:last-child .success small { display:inline-block; font:700 10.5px/1 var(--font-body); color:var(--pos); background:var(--accent-wash); padding:4px 9px; border-radius:7px; }
.history-result td .btn { margin-left:6px; background:var(--accent-wash); color:var(--accent-strong); border:0; border-radius:6px; padding:3px 7px; cursor:pointer; font-size:12px; }

/* trạng thái rỗng — căn giữa, dịu, có khoảng thở (thay vì chữ đen lệch trái) */
.history-result > p { text-align:center; color:var(--text-faint); font-size:13.5px; padding:44px 16px; margin:0; }

/* flatpickr override theo token */
.flatpickr-calendar { border-radius:14px; box-shadow:var(--shadow-card); border:1px solid var(--border); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background:var(--accent-strong); border-color:var(--accent-strong); }
.flatpickr-day.inRange { background:var(--accent-wash); border-color:var(--accent-wash); box-shadow:-5px 0 0 var(--accent-wash),5px 0 0 var(--accent-wash); }
.flatpickr-day:hover { background:var(--accent-wash); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-weekday { color:var(--text); fill:var(--text); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill:var(--text-soft); }

/* ============================================================
   ACCOUNT TAB — profile card (shared/account.php)
   ============================================================ */
#account { padding:16px; }
#account.active { display:flex; flex-direction:column; gap:14px; }
.breadcrumbs { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-faint); }
.breadcrumbs a { color:var(--text-soft); display:inline-flex; align-items:center; gap:6px; }
.breadcrumbs svg path { fill:var(--text-faint); }           /* override #8E8E93 inline */
.accp-box { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden; }
.accp-top { padding:16px; gap:12px; }
.accp-user { width:46px; height:46px; border-radius:14px; background:var(--grad-emerald); color:#fff; font:800 19px/46px var(--font-display); text-align:center; flex:0 0 auto; }
.accp-info { min-width:0; } .accp-info h2 { margin:0; font-size:16px; } .accp-info p { margin:3px 0 0; font-size:12px; color:var(--text-faint); }
.accp-update { margin-left:auto; flex:0 0 auto; font:700 12px/1 var(--font-body); color:#fff; background:var(--accent-strong); padding:9px 12px; border-radius:10px; }
.accp-list { padding:6px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.accp-it a { display:flex; align-items:center; gap:10px; background:var(--card-2); border:1px solid var(--border); border-radius:12px; padding:12px; font:700 13px/1 var(--font-body); color:var(--text); }
.accp-it a + a { margin-top:8px; }
.accp-it a img { width:20px; height:20px; flex:0 0 auto; }
.accp-it a span { margin-left:auto; color:var(--text-faint); font-weight:600; font-size:11.5px; }
.accp-logout { padding:0 12px 16px; }
.accp-logout a { display:flex; align-items:center; justify-content:center; gap:8px; background:#fdeced; color:var(--neg); border-radius:12px; padding:13px; font:700 13px/1 var(--font-body); }
.accp-logout svg path { fill:var(--neg); }                  /* override #EE4623 inline */

/* ============================================================
   FORMS — inputs, selects, checkbox, code forms
   ============================================================ */
.input-code, .pass-ip, input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
  font-family:var(--font-body); font-size:14px; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:11px; padding:11px 12px; }
.input-code:focus, .pass-ip:focus, input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
select { cursor:pointer; }
label { color:var(--text-soft); }

/* ============================================================
   AUTH — card nổi giữa nền emerald nhạt (login/signup/forgot)
   Markup .auth-split: bỏ split-screen, xếp dọc canh giữa.
   ============================================================ */
.body-login { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px;
  font-family:var(--font-body); color:var(--text);
  background:radial-gradient(120% 80% at 50% -10%, var(--accent-wash), var(--bg-2)); }
.auth-split { width:100%; max-width:400px; display:flex; flex-direction:column; gap:18px; }
.auth-brand { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.ab-mark { display:flex; align-items:center; gap:8px; color:var(--text); }
.ab-mark img { width:34px; height:34px; border-radius:9px; }
.ab-mark span { font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--accent-strong); }
.auth-brand h1 { font-size:20px; margin:0; } .auth-brand h1 em { color:var(--accent); font-style:normal; }
.ab-sub { margin:2px 0 0; font-size:13px; color:var(--text-soft); }
.ab-foot { display:none; }
.auth-panel { width:100%; }
.auth-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:22px; }
.ac-kicker { margin:0 0 2px; font:700 11px/1 var(--font-body); text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); }
.auth-card h2 { margin:0 0 16px; font-size:21px; }
.login-input { position:relative; margin-bottom:12px; }
.login-input input { width:100%; }
.icon-shp { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:26px; height:26px; display:flex; align-items:center; justify-content:center; opacity:.55; }
.icon-shp::before { content:"👁"; font-size:14px; }
.mui-btn { width:100%; border:0; cursor:pointer; background:var(--accent-strong); color:#fff; font:800 14px/1 var(--font-display);
  letter-spacing:.02em; padding:14px; border-radius:12px; box-shadow:var(--shadow-accent); margin-top:4px; }
.mui-btn:hover { background:var(--accent-press); }
.login-socials { margin-top:16px; }
.txt-sub { position:relative; text-align:center; font-size:12px; color:var(--text-faint); margin:0 0 12px; }
.txt-sub::before, .txt-sub::after { content:""; position:absolute; top:50%; width:28%; height:1px; background:var(--border); }
.txt-sub::before { left:0; } .txt-sub::after { right:0; }
.list-type { display:flex; gap:10px; }
.social-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--card); border:1px solid var(--border);
  border-radius:11px; padding:11px; font:700 13px/1 var(--font-body); color:var(--text); cursor:pointer; }
.social-btn svg { width:18px; height:18px; }
.social-btn:hover { border-color:var(--accent); background:var(--accent-wash); }
.login-bottom { display:flex; justify-content:center; gap:16px; margin-top:14px; }
.login-bottom a { font-size:12.5px; color:var(--accent-strong); font-weight:600; }
.auth-terms { text-align:center; margin-top:10px; } .auth-terms a { font-size:12px; color:var(--text-faint); }

/* Signup: dòng "Đã có tài khoản? Đăng nhập ngay" — gộp 1 hàng canh giữa */
.rgs-bottom { text-align:center; margin-top:16px; }
.rgs-bottom h3 { display:inline; margin:0; font:600 13px/1.4 var(--font-body); color:var(--text-soft); }
.rgs-bottom a { display:inline; margin-left:6px; font-size:13px; font-weight:700; color:var(--accent-strong); }
.rgs-bottom a:hover { color:var(--accent-press); }

/* Forgot password (pass-*): trước đây thiếu -> nút về mặc định trình duyệt.
   Style khớp login: input full-width + nút emerald giống .mui-btn. */
.pass-box .rs { margin:0 0 16px; font-size:13px; line-height:1.55; color:var(--text-soft); }
.pass-form label { display:block; margin:0 0 7px 2px; font-size:12.5px; font-weight:600; color:var(--text-soft); }
.pass-ip { width:100%; }
.pass-submit { width:100%; border:0; cursor:pointer; background:var(--accent-strong); color:#fff;
  font:800 14px/1 var(--font-display); letter-spacing:.02em; padding:14px; border-radius:12px;
  box-shadow:var(--shadow-accent); margin-top:14px; transition:background .15s ease; }
.pass-submit:hover { background:var(--accent-press); }

/* Wallet-card signature: vạch gradient emerald mảnh ở mép trên thẻ auth (cả 3 trang) */
.auth-card { position:relative; }
.auth-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--grad-emerald); border-radius:var(--radius-card) var(--radius-card) 0 0; }

/* ============================================================
   MANAGE ACCOUNT (mui shell) — Manage-Account.php
   ============================================================ */
.interface-body { background:var(--bg-2); color:var(--text); }
.interface-body #header { position:fixed; top:0; left:0; right:0; z-index:500;
  background:rgba(255,255,255,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.mui-appbar, .mui--appbar-height { height:56px; }
.header-container { max-width:var(--shell); margin:0 auto; height:56px; display:flex; align-items:center; gap:14px; padding:0 20px; }
.sidedrawer-toggle { width:26px; height:20px; position:relative; cursor:pointer; flex:0 0 26px; }
.sidedrawer-toggle::before, .sidedrawer-toggle::after { content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--text); }
.sidedrawer-toggle::before { top:3px; box-shadow:0 6px 0 var(--text); }
.sidedrawer-toggle::after { bottom:3px; width:60%; }
.f-txtheader { flex:1; } .f-txtheader h1 { margin:0; font-size:17px; font-weight:700; } .f-txtheader a { color:var(--text); }
.box-login-done { position:relative; }
.ico-avata { width:34px; height:34px; border-radius:50%; background:var(--grad-emerald); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mui-dropdown__menu { display:none; position:absolute; right:0; top:44px !important; min-width:220px; list-style:none; margin:0; padding:6px;
  background:var(--card); border:1px solid var(--border-strong); border-radius:14px; box-shadow:var(--shadow-card); z-index:600; }
.mui-dropdown__menu.mui--is-open { display:block; }
.mui-dropdown__menu li a { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:9px; color:var(--text); font-size:14px; font-weight:500; }
.mui-dropdown__menu li a:hover { background:var(--accent-wash); }
.mui-dropdown__menu li a span { color:var(--text) !important; }
.ico-avata-min { width:26px; height:26px; border-radius:50%; background:var(--grad-emerald); color:#fff;
  font-family:var(--font-display); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-style:normal; }
.ico-logout::before { content:"↩"; color:var(--neg); font-weight:700; }
#content-wrapper { max-width:560px; margin:0 auto; padding:30px 20px 0; }

.userDesc { background:var(--grad-emerald); color:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-accent);
  padding:26px 28px 6px; margin-bottom:26px; position:relative; overflow:hidden; }
.userDesc::after { content:""; position:absolute; right:-50px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); pointer-events:none; }
.userInfo { display:flex; align-items:center; gap:18px; }
.userAvatar { width:58px; height:58px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:26px; display:flex; align-items:center; justify-content:center; float:none !important; }
.txt-userInfoName { margin:0; font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; }
.txt-userInfoId, .txt-userInfoVip { margin:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.txt-userInfoVip strong { color:#fff; }
.userTypeMember { padding-bottom:20px; } .icoMember { display:none; }

.userTask { position:relative; }
.box-tb-baomat { position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:20px 20px 20px 92px; min-height:96px; margin-bottom:20px; }
.box-tb-baomat h3 { font-size:16px; margin-bottom:2px; } .box-tb-baomat p { margin:0; font-size:13px; color:var(--text-soft); }

/* security ring (.c100) — conic gauge */
.c100 { position:relative; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; --ring-color:var(--accent); --ring-pct:100%;
  background:radial-gradient(closest-side, var(--card) 76%, transparent 77% 100%), conic-gradient(var(--ring-color) var(--ring-pct), var(--border) 0); }
.c100 span { position:relative; z-index:1; color:var(--text); text-align:center; line-height:1.1; }
.c100 .slice, .c100 .bar, .c100 .fill { display:none; }
.c100.p70 { --ring-pct:70%; } .c100.p80 { --ring-pct:80%; } .c100.p100 { --ring-pct:100%; }
.c100.red { --ring-color:var(--neg); } .c100.yellow { --ring-color:var(--warn); } .c100.green { --ring-color:var(--pos); }

.lstTask { list-style:none; margin:0; padding:0; } .lstTask li { margin-bottom:10px; }
.lstTask li a { display:block; position:relative; padding:16px 90px 16px 18px; background:var(--card); border:1px solid var(--border);
  border-radius:16px; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:15.5px; transition:.15s; }
.lstTask li a:hover { transform:translateX(5px); border-color:var(--accent); box-shadow:var(--shadow-accent); }
.lstTask li a .text-noticer { display:block; font-family:var(--font-body); font-size:12.5px; font-weight:400; color:var(--text-faint); }
.lstTask li a > span:not(.text-noticer) { position:absolute; right:40px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-size:12px; font-weight:400; color:var(--text-soft); max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lstTask li a::after { content:"→"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--accent); font-family:var(--font-display); font-weight:700; }
.lstTask li a.bm-done .ico-noticer::before { content:"✓"; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  margin-right:8px; background:var(--accent-wash); border:1px solid var(--pos); color:var(--pos); border-radius:50%; font-size:11px; vertical-align:1px; }
.ico-noticer { font-style:normal; }

/* sidedrawer */
#mui-overlay { display:none; position:fixed; inset:0; z-index:900; background:rgba(12,28,20,.45); }
#mui-overlay.active { display:block; }
#sidedrawer { position:fixed; top:0; bottom:0; left:0; width:270px; background:var(--card); border-right:1px solid var(--border-strong); padding:24px 12px; transform:none; z-index:950; }
#sidedrawer ul { list-style:none; margin:0; padding:0; }
#sidedrawer ul li a { display:block; padding:13px 16px; margin-bottom:4px; border-radius:12px; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:15px; }
#sidedrawer ul li a:hover, #sidedrawer ul li a.active { background:var(--accent-wash); color:var(--accent-strong); }
#sidedrawer .f-ico { display:none; }
.mui-divider { border-top:1px solid var(--border); margin-bottom:8px; }

.interface-body #footer { margin-top:50px; border-top:1px solid var(--border); background:var(--bg-2); }
.interface-body #footer p { max-width:560px; margin:0 auto; padding:18px 20px; display:flex; gap:24px; flex-wrap:wrap; }
.f-txtlink { font-size:13px; font-weight:500; color:var(--text); } .f-txtlink:hover { color:var(--accent-strong); }

/* simple page header (forgot / header-3) */
#header-3 { border-bottom:1px solid var(--border); background:rgba(255,255,255,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
#header-3 .box-inner { display:flex; align-items:center; padding:14px 20px; gap:14px; justify-content:flex-start; max-width:var(--shell); margin:0 auto; }
#header-3 h1 { margin:0; font-size:18px; }
.f-ico-back { width:32px; height:32px; flex:0 0 32px; border:1px solid var(--border-strong); border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--text); transition:.15s; }
.f-ico-back:hover { border-color:var(--accent); } .f-ico-back::before { content:"←"; font-weight:700; }
.acc-inner { padding-top:30px; padding-bottom:60px; max-width:560px; margin:0 auto; }

/* ============================================================
   BOOTSTRAP MODAL (manage-account)
   ============================================================ */
.modal.fade .modal-dialog { max-width:460px; }
.modal.fade .modal-content { background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-card); color:var(--text); box-shadow:var(--shadow-card); }
.modal.fade .modal-header { border-bottom:1px solid var(--border); padding:18px 22px 12px; display:block; }
.modal.fade .modal-header h1 { font-size:19px; margin:0; text-align:left !important; color:var(--text); }
.modal.fade .modal-body { padding:20px 22px; }
.modal.fade .modal-body img { border:1px solid var(--border-strong); border-radius:12px; }
.modal.fade .modal-footer { border-top:1px dashed var(--border-strong); padding:14px 22px 18px; display:flex; gap:10px; justify-content:flex-end; }
.modal.fade .modal-footer .fun-btn-v3 { flex:0 0 auto; width:auto; }
.modal-backdrop { background-color:rgba(12,28,20,.5); }
.col-form-label { font-size:11px; font-weight:600; font-family:var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); display:block; margin-bottom:4px; padding:0; }
.mb-3 { margin-bottom:14px; }

/* ============================================================
   LIÊN KẾT TÀI KHOẢN — callout + nút phụ (manage-account #LinkAccount)
   ============================================================ */
.fun-btn-v3.inactive { background:transparent; color:var(--text-soft); border:1px solid var(--border-strong); box-shadow:none; }
.fun-btn-v3.inactive:hover { background:var(--accent-wash); color:var(--accent-strong); border-color:var(--accent); }
#LinkAccount .link-note { display:flex; flex-direction:column; gap:9px; background:var(--accent-wash); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; padding:13px 15px; margin-bottom:18px; }
#LinkAccount .link-note__row { display:flex; align-items:flex-start; gap:10px; }
#LinkAccount .link-note__num { flex:0 0 auto; width:21px; height:21px; display:inline-flex; align-items:center; justify-content:center; background:var(--grad-emerald); color:var(--on-accent); font-family:var(--font-display); font-weight:800; font-size:12px; line-height:1; border-radius:7px; }
#LinkAccount .link-note .rs { margin:0; font-family:var(--font-body); font-size:13.5px; line-height:1.5; color:var(--text-soft); }
#LinkAccount .link-note b { color:var(--accent-strong); font-weight:700; }
#LinkAccount .col-form-label { color:var(--text-soft); }

/* ============================================================
   KÍCH HOẠT EMAIL — chọn phương thức (activemailModal)
   ============================================================ */
#activemailModal .email-intro { margin:0 0 14px; font-family:var(--font-body); font-size:13.5px; line-height:1.5; color:var(--text-soft); }
#activemailModal .email-choices { display:flex; flex-direction:column; gap:10px; }
#activemailModal .email-choice { display:flex; width:100%; align-items:center; gap:12px; text-align:left; cursor:pointer; font-family:var(--font-body); background:var(--bg-2); border:1px solid var(--border); border-radius:14px; padding:13px 14px; box-shadow:none; transition:border-color .15s ease, background .15s ease; }
#activemailModal .email-choice:hover { border-color:var(--accent); background:var(--accent-wash); }
#activemailModal .email-choice__ic { flex:0 0 auto; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-wash); color:var(--accent-strong); border-radius:11px; }
#activemailModal .email-choice__tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
#activemailModal .email-choice__tx strong { font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--text); }
#activemailModal .email-choice__tx small { font-size:12.5px; line-height:1.4; color:var(--text-soft); }
#activemailModal .email-choice__arr { margin-left:auto; color:var(--text-faint); font-size:18px; transition:color .15s ease, transform .15s ease; }
#activemailModal .email-choice:hover .email-choice__arr { color:var(--accent-strong); transform:translateX(2px); }
.modal .form-control { width:100%; border:1px solid var(--border); border-radius:11px; padding:11px 12px; font-family:var(--font-body); color:var(--text); background:var(--bg); }
.modal .form-control:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.modal .btn-primary, .modal .btn-success { background:var(--accent-strong); border-color:var(--accent-strong); }

/* ============================================================
   NÚT CHÍNH — emerald, chữ trắng (.fun-btn-v3)
   ============================================================ */
.fun-btn-v3 { display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; border:0;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:#fff; background:var(--accent-strong);
  padding:11px 18px; border-radius:12px; box-shadow:var(--shadow-accent); transition:.15s; }
.fun-btn-v3:hover { background:var(--accent-press); color:#fff; }
.fun-btn-v3.sm { padding:8px 13px; font-size:12.5px; border-radius:10px; }

/* ============================================================
   SWEETALERT v1 (.sweet-*) — full base (lib ships none)
   ============================================================ */
.sweet-overlay { display:none; position:fixed; inset:0; z-index:10000; background:rgba(12,28,20,.5); }
.sweet-alert { display:none; position:fixed; left:50%; top:50%; width:420px; max-width:calc(100vw - 36px); margin-left:-210px; margin-top:-160px;
  z-index:10001; background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:26px 26px 24px; text-align:center; font-family:var(--font-body); color:var(--text); overflow:hidden; }
@media (max-width:480px){ .sweet-alert { left:18px; right:18px; width:auto; margin-left:0; } }
.sweet-alert h2 { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--text); margin:14px 0 6px; line-height:1.2; }
.sweet-alert p { font-size:14px; color:var(--text-soft); margin:0 0 6px; word-wrap:break-word; }
.sweet-alert fieldset { border:none; padding:0; margin:0; }
.sweet-alert .sa-error-container, .sweet-alert .sa-input-error { display:none; }
.sweet-alert input { width:100%; border:1px solid var(--border); background:var(--bg-2); color:var(--text); border-radius:12px; padding:11px 13px; margin:10px 0; font-size:14px; display:none; }
.sweet-alert .sa-button-container, .sweet-alert .sa-confirm-button-container { display:inline-block; }
.sweet-alert button { background:var(--accent-strong) !important; color:#fff; border:0; border-radius:12px; font-family:var(--font-display);
  font-weight:700; font-size:14px; letter-spacing:.03em; padding:11px 30px; margin:14px 5px 0; box-shadow:var(--shadow-accent); cursor:pointer; }
.sweet-alert button:hover { filter:brightness(1.05); }
.sweet-alert button.cancel { background:transparent !important; color:var(--text-soft); border:1px solid var(--border-strong); box-shadow:none; }
.sweet-alert button.cancel:hover { color:var(--text); border-color:var(--accent); filter:none; }
.sweet-alert .sa-icon { width:64px; height:64px; border:3px solid var(--border-strong); border-radius:50%; margin:4px auto 0; padding:0; position:relative; box-sizing:content-box; }
.sweet-alert .sa-icon.sa-success { border-color:var(--pos); }
.sweet-alert .sa-icon.sa-success .sa-line { position:absolute; height:4px; background:var(--pos); display:block; border-radius:2px; }
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip { width:20px; left:12px; top:36px; transform:rotate(45deg); }
.sweet-alert .sa-icon.sa-success .sa-line.sa-long { width:32px; right:8px; top:30px; transform:rotate(-45deg); }
.sweet-alert .sa-icon.sa-error { border-color:var(--neg); }
.sweet-alert .sa-icon.sa-error .sa-line { position:absolute; height:4px; width:36px; background:var(--neg); display:block; top:30px; border-radius:2px; }
.sweet-alert .sa-icon.sa-error .sa-line.sa-left { transform:rotate(45deg); left:14px; }
.sweet-alert .sa-icon.sa-error .sa-line.sa-right { transform:rotate(-45deg); right:14px; }
.sweet-alert .sa-icon.sa-warning { border-color:var(--warn); }

/* sweetalert (2018 build, .swal-*) — override (lib injects its own css) */
.swal-overlay { background-color:rgba(12,28,20,.5); }
.swal-modal { background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-card); box-shadow:var(--shadow-card); font-family:var(--font-body); }
.swal-title { font-family:var(--font-display); font-weight:700; color:var(--text); }
.swal-text { color:var(--text-soft); text-align:center; }
.swal-button { background-color:var(--accent-strong) !important; color:#fff; border:0; border-radius:12px; font-family:var(--font-display);
  font-weight:700; letter-spacing:.03em; padding:11px 30px; box-shadow:var(--shadow-accent) !important; }
.swal-button:hover { background-color:var(--accent-press) !important; }
.swal-button--cancel { background-color:transparent !important; color:var(--text-soft); border:1px solid var(--border-strong); box-shadow:none !important; }
.swal-button--cancel:hover { color:var(--text); border-color:var(--accent); }
.swal-footer { text-align:center; }
.swal-icon--error { border-color:var(--neg); } .swal-icon--error__line { background-color:var(--neg); }
.swal-icon--success { border-color:var(--pos); } .swal-icon--success__ring { border-color:var(--accent-wash); }
.swal-icon--success__line { background-color:var(--pos); } .swal-icon--success__hide-corners { background-color:var(--card); }
.swal-icon--warning { border-color:var(--warn); } .swal-icon--warning__body, .swal-icon--warning__dot { background-color:var(--warn); }
.swal-icon--info { border-color:var(--accent); } .swal-icon--info::before, .swal-icon--info::after { background-color:var(--accent); }

/* ============================================================
   LEGAL pages (terms / policy / shipping)
   ============================================================ */
.legal-main, .legal-wrap, .legal-body { max-width:var(--shell); margin:0 auto; padding:22px 18px 60px; color:var(--text); }
.legal-main h1, .legal-main h2, .legal-main h3 { font-family:var(--font-display); color:var(--text); }
.legal-main h1 { font-size:24px; } .legal-main h2 { font-size:18px; margin-top:24px; }
.legal-main p, .legal-main li { color:var(--text-soft); font-size:14px; line-height:1.7; }
.legal-main a { color:var(--accent-strong); }
.legal-main hr { border:0; border-top:1px solid var(--border); margin:18px 0; }

/* ============================================================
   RESPONSIVE — mobile-first base; desktop = cột ví canh giữa
   ============================================================ */
@media (min-width:640px) {
  body { background:radial-gradient(130% 70% at 50% -8%, var(--accent-wash), var(--bg-2)); }
  #app.app-v5 { margin:20px auto; border-radius:24px;
    box-shadow:0 1px 0 var(--border), 0 30px 70px -34px rgba(20,40,30,.45); }
  .v5-card-num { font-size:28px; }
}
/* màn rất hẹp: segment co về icon-only để không vỡ */
@media (max-width:340px) {
  .v5-seg > a span { display:none; }
  .v5-seg > a { padding:10px 6px; }
}