/* ===========================================================
   TrederBot — Giao diện "Fintech cao cấp" (bản Premium)
   Aurora động · kính mờ · số gradient · phát sáng · hiệu ứng mượt
   Giữ NGUYÊN mọi tên class cũ để các trang khác không vỡ.
   =========================================================== */

:root{
  --bg:#eef1f8; --bg-2:#e7ebf5; --card:#ffffff; --card-2:#f8fafc;
  --glass:rgba(255,255,255,.86); --glass-brd:rgba(16,24,40,.08); --glass-hi:rgba(255,255,255,.9);
  --text:#0b1220; --muted:#5b6472; --line:#e6e9f1; --line-2:#eef1f6;
  --brand:#5b5bf0; --brand-2:#8b5cf6; --brand-ink:#ffffff;
  --grad:linear-gradient(135deg,#4f6bff 0%,#7c5cff 55%,#9b5cff 100%);
  --grad-txt:linear-gradient(120deg,#4f6bff,#8b5cf6 60%,#b06bff);
  --grad-soft:linear-gradient(135deg,rgba(79,107,255,.12),rgba(155,92,255,.12));
  --ring:rgba(91,91,240,.35);
  --pos:#0ea36b; --neg:#e5484d; --long:#0ea36b; --short:#e5484d;
  --error-bg:#fef2f3; --error:#b42318; --note-bg:#fff8ec; --note-line:#fadfa3;
  --sh-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --sh-2:0 8px 24px rgba(16,24,40,.09),0 2px 8px rgba(16,24,40,.05);
  --sh-3:0 30px 60px rgba(16,24,40,.16),0 10px 22px rgba(16,24,40,.09);
  --glow:0 0 0 1px rgba(124,92,255,.12),0 22px 60px -18px rgba(91,91,240,.5);
  --r-sm:.6rem; --r-md:1rem; --r-lg:1.4rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#060811; --bg-2:#080b14; --card:#111624; --card-2:#161d2e;
    --glass:rgba(19,24,38,.86); --glass-brd:rgba(255,255,255,.09); --glass-hi:rgba(255,255,255,.06);
    --text:#eaedf6; --muted:#96a2ba; --line:#232c3f; --line-2:#1a2131;
    --brand:#8b98ff; --brand-2:#b79dff; --brand-ink:#ffffff;
    --grad:linear-gradient(135deg,#5a74ff 0%,#8b6bff 55%,#a86bff 100%);
    --grad-txt:linear-gradient(120deg,#8ea2ff,#b79dff 60%,#d6a3ff);
    --grad-soft:linear-gradient(135deg,rgba(90,116,255,.18),rgba(168,107,255,.18));
    --ring:rgba(139,152,255,.4);
    --pos:#34d399; --neg:#f8737b; --long:#34d399; --short:#f8737b;
    --error-bg:#2a1416; --error:#fca5a5; --note-bg:#20190c; --note-line:#4a3c12;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 10px 30px rgba(0,0,0,.5);
    --sh-3:0 34px 70px rgba(0,0,0,.66);
    --glow:0 0 0 1px rgba(139,152,255,.18),0 26px 70px -18px rgba(90,116,255,.6);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);line-height:1.55;position:relative;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:linear-gradient(180deg,var(--bg-2),var(--bg))}
/* Aurora ở đỉnh trang — neo absolute nên cuộn theo trang, KHÔNG tái vẽ khi cuộn (nhẹ máy) */
body::before{content:"";position:absolute;top:0;left:-15%;right:-15%;height:900px;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 48% at 14% 12%,rgba(79,107,255,.28),transparent 62%),
    radial-gradient(38% 44% at 88% 8%,rgba(155,92,255,.24),transparent 62%),
    radial-gradient(44% 46% at 70% 92%,rgba(120,92,255,.20),transparent 64%),
    radial-gradient(34% 40% at 30% 80%,rgba(60,150,255,.14),transparent 62%)}
/* Lưới mảnh mờ dần ở đỉnh */
body::after{content:"";position:absolute;top:0;left:0;right:0;height:1100px;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--glass-brd) 1px,transparent 1px),linear-gradient(90deg,var(--glass-brd) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 72%)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--ring);color:var(--text)}

/* ---------- Thanh trên (kính mờ) ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem 1.4rem;position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(8px);backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--glass-brd)}
.brand{font-weight:800;letter-spacing:-.01em;color:var(--text);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.6rem;flex:0 0 auto;font-size:1.08rem}
.brand:hover{text-decoration:none}
.brand .logo{width:1.95rem;height:1.95rem;border-radius:.6rem;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.05rem;
  box-shadow:0 6px 16px rgba(91,91,240,.5),inset 0 1px 0 rgba(255,255,255,.4);flex:0 0 auto}
.brand b{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.badge{font-size:.6rem;font-weight:800;letter-spacing:.06em;background:var(--grad-soft);
  color:var(--brand);border:1px solid var(--glass-brd);padding:.16rem .44rem;border-radius:.42rem;vertical-align:middle}
.topbar nav{display:flex;align-items:center;gap:.2rem}
.topbar nav a{color:var(--text);font-size:.9rem;font-weight:500;padding:.44rem .8rem;
  border-radius:.65rem;white-space:nowrap;flex:0 0 auto;transition:background .15s,color .15s}
.topbar nav a:hover{background:var(--grad-soft);text-decoration:none}
.topbar nav a.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(91,91,240,.4)}
.topbar nav a.active:hover{background:var(--grad)}
.topbar .who{color:var(--muted);font-size:.82rem;margin-right:.4rem;padding:0}
.topbar .who:hover{background:none}
.topbar nav a.muted{color:var(--muted)}
.topbar .muted{color:var(--muted)}
@media (max-width:720px){
  .topbar{flex-direction:column;align-items:stretch;gap:.55rem;padding:.6rem .9rem}
  .topbar nav{width:100%;overflow-x:auto;gap:.3rem;padding-bottom:.1rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar .who{display:none}
}

/* ---------- Khung nội dung ---------- */
.wrap{max-width:920px;margin:1.9rem auto;padding:0 1.1rem}
h1{font-size:1.72rem;font-weight:800;letter-spacing:-.02em;margin:.2rem 0 1.15rem}
h2{font-size:1.14rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .85rem}

.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-md);
  padding:1.4rem;margin-bottom:1.35rem;box-shadow:var(--sh-2);animation:fadeUp .5s both}
.card.narrow{max-width:430px;margin:2rem auto}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shimmer{to{background-position:200% 0}}

/* ---------- Đăng nhập / đăng ký (hero kính mờ phát sáng) ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:2.5rem 1.1rem}
.auth-card{width:100%;max-width:430px;position:relative;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-lg);
  box-shadow:var(--glow),var(--sh-3);padding:2.4rem 2.1rem 2rem;
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  animation:fadeUp .6s both}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,#4f6bff,#8b5cf6,#b06bff,#4f6bff);background-size:200% 100%;
  animation:shimmer 4s linear infinite}
.auth-logo{width:3.7rem;height:3.7rem;border-radius:1.1rem;background:var(--grad);margin:0 auto 1rem;
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.9rem;
  box-shadow:0 14px 34px rgba(91,91,240,.55),inset 0 1px 0 rgba(255,255,255,.5);
  animation:floaty 5s ease-in-out infinite}
.auth-title{text-align:center;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin:.1rem 0}
.auth-sub{text-align:center;color:var(--muted);font-size:.92rem;margin:0 0 1.5rem}
.auth-card .btn,.auth-card button{width:100%;justify-content:center;margin-top:1.1rem}
.auth-foot{text-align:center;color:var(--muted);font-size:.9rem;margin:1.2rem 0 0}
.auth-chips{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin:1.3rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--glass-brd)}
.auth-chips span{font-size:.74rem;font-weight:600;color:var(--muted);background:var(--grad-soft);
  border:1px solid var(--glass-brd);padding:.24rem .6rem;border-radius:999px;display:inline-flex;gap:.3rem;align-items:center}

/* ---------- Form ---------- */
label{display:block;margin:.9rem 0;font-size:.85rem;font-weight:600;color:var(--muted)}
input,select{display:block;width:100%;margin-top:.4rem;padding:.72rem .85rem;font-size:.98rem;
  color:var(--text);background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s,background .15s;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
input::placeholder{color:var(--muted);opacity:.7}

button,.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  padding:.72rem 1.35rem;font-size:.96rem;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--r-sm);background:var(--grad);color:var(--brand-ink);
  cursor:pointer;box-shadow:0 8px 20px rgba(91,91,240,.36),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s,box-shadow .15s,opacity .15s}
button::after,.btn::after{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .55s}
button:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(91,91,240,.48);text-decoration:none}
button:hover::after,.btn:hover::after{left:130%}
button:active,.btn:active{transform:translateY(0)}
button.ghost,.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--line);box-shadow:none}
button.ghost::after,.btn.ghost::after{display:none}
button.ghost:hover,.btn.ghost:hover{background:var(--grad-soft)}

.muted{color:var(--muted)}
.small{font-size:.85rem}
.error{background:var(--error-bg);color:var(--error);padding:.68rem .9rem;border-radius:var(--r-sm);
  font-size:.9rem;border:1px solid color-mix(in srgb,var(--error) 25%,transparent)}
.note{background:var(--note-bg);border:1px solid var(--note-line);padding:.85rem 1rem;
  border-radius:var(--r-sm);font-size:.88rem;margin-bottom:1rem}

/* ---------- Thẻ số liệu (KPI kính mờ, số gradient) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:1.35rem}
.stat{position:relative;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-md);
  padding:1.25rem 1.35rem;box-shadow:var(--sh-2);overflow:hidden;animation:fadeUp .5s both;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.stat:nth-child(2){animation-delay:.07s}.stat:nth-child(3){animation-delay:.14s}
.stat:hover{transform:translateY(-4px);box-shadow:var(--glow),var(--sh-2);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.stat::after{content:"";position:absolute;right:-30%;top:-60%;width:70%;height:150%;
  background:radial-gradient(circle,var(--grad-soft),transparent 70%);opacity:.8;pointer-events:none}
.stat-ic{position:absolute;top:1.1rem;right:1.15rem;width:2.4rem;height:2.4rem;border-radius:.7rem;
  display:grid;place-items:center;font-size:1.2rem;background:var(--grad-soft);color:var(--brand);
  border:1px solid var(--glass-brd);box-shadow:inset 0 1px 0 var(--glass-hi)}
.stat-ic.pos{background:color-mix(in srgb,var(--pos) 14%,transparent);color:var(--pos)}
.stat-ic.neg{background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg)}
.stat-label{font-size:.8rem;font-weight:600;color:var(--muted);position:relative}
.stat-value{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;margin-top:.35rem;line-height:1.1;
  font-variant-numeric:tabular-nums;position:relative;
  background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-value .unit{font-size:.78rem;color:var(--muted);font-weight:600;-webkit-text-fill-color:var(--muted)}
.stat-sub{font-size:.78rem;color:var(--muted);margin-top:.3rem;position:relative}

/* ---------- Bảng ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.66rem .55rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--grad-soft)}
.tag{display:inline-flex;align-items:center;padding:.16rem .55rem;border-radius:.45rem;font-size:.75rem;
  font-weight:800;letter-spacing:.02em;color:#fff}
.tag.long{background:color-mix(in srgb,var(--long) 88%,#000);box-shadow:0 3px 8px rgba(14,163,107,.35)}
.tag.short{background:color-mix(in srgb,var(--short) 90%,#000);box-shadow:0 3px 8px rgba(229,72,77,.35)}
.tag.wait{background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted);box-shadow:none}
.pos{color:var(--pos);font-weight:700}
.neg{color:var(--neg);font-weight:700}

label.row{display:flex;align-items:center;gap:.55rem;color:var(--text);font-weight:500}
label.row input{width:auto;margin-top:0;accent-color:var(--brand)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.run-form{text-align:center;margin-top:.6rem}
.btn-run{font-size:1.02rem;padding:.78rem 2rem;margin:0 auto}
.btn-run.loading{opacity:.75;pointer-events:none;cursor:wait}
.run-result{margin-top:.9rem;padding:.7rem .9rem;border-radius:var(--r-sm);font-size:.9rem;
  background:var(--card-2);border:1px solid var(--line)}
.run-result.ok{background:color-mix(in srgb,var(--pos) 12%,transparent);border-color:color-mix(in srgb,var(--pos) 35%,transparent)}
.run-result.err{background:var(--error-bg);border-color:color-mix(in srgb,var(--neg) 35%,transparent);color:var(--error)}
.run-result.running{background:var(--grad-soft);border-color:var(--line)}
.spinner{display:inline-block;width:.95em;height:.95em;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:-.15em;margin-right:.45em}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Giá trực tiếp ---------- */
.live-price{font-size:.8rem;font-weight:600;color:var(--muted);margin-left:.6rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.3rem}
.live-price b{color:var(--text);font-variant-numeric:tabular-nums}
.live-price b.up{color:var(--pos)}
.live-price b.down{color:var(--neg)}
.live-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--pos);display:inline-block;
  box-shadow:0 0 0 0 rgba(14,163,107,.5);animation:livepulse 1.6s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(14,163,107,.5)}70%{box-shadow:0 0 0 .4rem rgba(14,163,107,0)}100%{box-shadow:0 0 0 0 rgba(14,163,107,0)}}

/* ---------- Badge trạng thái bot ---------- */
.bot-status{font-size:.72rem;font-weight:800;padding:.16rem .58rem;border-radius:.5rem;margin-left:.4rem;white-space:nowrap}
.bot-status.on{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--pos)}
.bot-status.off{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.bot-status.mode{background:var(--grad-soft);color:var(--brand);font-weight:700}

/* ---------- Khối "Cài đặt" gập ---------- */
details.settings{padding:0}
details.settings > summary{list-style:none;cursor:pointer;padding:1.15rem 1.4rem;font-weight:700;
  display:flex;align-items:center;gap:.4rem;user-select:none}
details.settings > summary::-webkit-details-marker{display:none}
details.settings > summary::after{content:"▸";margin-left:auto;color:var(--muted);transition:transform .15s}
details.settings[open] > summary::after{transform:rotate(90deg)}
details.settings > summary:hover{background:var(--grad-soft)}
.settings-body{padding:0 1.4rem 1.4rem}
hr.sep{border:none;border-top:1px solid var(--line);margin:1.3rem 0}

/* ---------- Bảng dữ liệu dày (exch) ---------- */
.table-scroll{overflow-x:auto;border-radius:var(--r-sm)}
table.exch{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
table.exch th,table.exch td{padding:.58rem .72rem;border-bottom:1px solid var(--line);white-space:nowrap}
table.exch th{color:var(--muted);font-weight:600;text-align:left;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.03em;background:var(--card-2)}
table.exch th.num,table.exch td.num{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
table.exch tbody tr:hover{background:var(--grad-soft)}
.status{font-size:.72rem;font-weight:700;padding:.14rem .55rem;border-radius:.4rem;white-space:nowrap}
.status.open{background:var(--grad-soft);color:var(--brand)}
.status.closed{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted)}

/* ---------- Tin tức ---------- */
.ai-text{white-space:pre-wrap;font-size:.92rem;line-height:1.65}
.news-list{list-style:none;padding:0;margin:0}
.news-list li{padding:.62rem 0;border-bottom:1px solid var(--line);font-size:.9rem;display:flex;gap:.55rem;align-items:baseline}
.news-list li:last-child{border-bottom:none}
.src{flex:0 0 auto;font-size:.7rem;font-weight:800;padding:.1rem .44rem;border-radius:.38rem;color:#fff;background:#64748b;letter-spacing:.02em}
.src.crypto{background:#f59e0b}
.src.finance{background:var(--brand)}
.src.world{background:#64748b}

/* ---------- Trang Bot: tab & lưới chọn coin (theme-aware) ---------- */
.tabbar{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin:-.25rem 0 1.1rem;flex-wrap:wrap}
.tab-btn{background:none;border:none;padding:.6rem 1rem;cursor:pointer;font-size:.94rem;font-weight:700;
  color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;border-radius:.5rem .5rem 0 0;
  transition:color .15s,background .15s}
.tab-btn:hover{color:var(--text);background:var(--grad-soft)}
.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab-btn .lock{font-size:.8em;opacity:.7}
.coin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:.55rem;margin:.5rem 0}
.coin-chk{position:relative;display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem;
  border:1.5px solid var(--line);border-radius:.75rem;cursor:pointer;user-select:none;white-space:nowrap;
  overflow:hidden;background:var(--card-2);box-shadow:var(--sh-1);
  transition:border-color .15s,background .15s,transform .12s,box-shadow .15s}
.coin-chk:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--sh-2)}
/* checkbox thật: ẩn đi nhưng vẫn hoạt động (chip là nút bật/tắt) */
.coin-chk input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}
.coin-chk .cbadge{flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--c,#7c5cff);
  color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.18)}
.coin-chk .cname{font-size:.98rem;font-weight:800;letter-spacing:-.01em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis}
.coin-chk .cname{margin-right:1rem}
.coin-chk .ccheck{position:absolute;top:.34rem;right:.38rem;width:1.05rem;height:1.05rem;border-radius:50%;
  display:grid;place-items:center;font-size:.66rem;font-weight:900;color:#fff;background:var(--brand);
  opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s}
.coin-chk:has(input:checked){border-color:var(--brand);background:var(--grad-soft);
  box-shadow:0 0 0 1px var(--brand) inset,var(--sh-1)}
.coin-chk:has(input:checked) .ccheck{opacity:1;transform:scale(1)}

/* Thẻ cảnh báo (viền trái) */
.card.warn{border-left:3px solid #eab308}

/* ---------- Chân trang ---------- */
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:2rem 1rem 2.8rem}

/* ---------- Đăng nhập Google + phân cách ---------- */
.auth-or{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0 .2rem;color:var(--muted);font-size:.82rem}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;margin-top:.9rem;
  padding:.7rem 1rem;font-size:.95rem;font-weight:700;border-radius:var(--r-sm);cursor:pointer;
  background:#fff;color:#1f2937;border:1px solid #dadce0;box-shadow:0 1px 2px rgba(0,0,0,.08);
  text-decoration:none;transition:box-shadow .15s,transform .12s}
.btn-google:hover{box-shadow:0 4px 12px rgba(0,0,0,.14);transform:translateY(-1px);text-decoration:none}

/* ---------- Nạp tiền: thẻ gói + khu chuyển khoản ---------- */
.goi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-top:.3rem}
.goi-card{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:1rem 1rem 1.1rem;
  border:1.5px solid var(--line);border-radius:var(--r-md);cursor:pointer;background:var(--card-2);
  box-shadow:var(--sh-1);transition:border-color .15s,transform .12s,box-shadow .15s;user-select:none}
.goi-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-2)}
.goi-card input{position:absolute;opacity:0;pointer-events:none}
.goi-card:has(input:checked){border-color:var(--brand);background:var(--grad-soft);
  box-shadow:0 0 0 1px var(--brand) inset,var(--sh-1)}
.goi-card .goi-ten{font-size:.9rem;font-weight:700;color:var(--muted)}
.goi-card .goi-gia{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.goi-card .goi-gia .unit{font-size:.75rem;color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:.15rem}
.goi-card .goi-sub{font-size:.78rem;color:var(--muted)}
.goi-tag{position:absolute;top:-.6rem;right:.7rem;font-size:.66rem;font-weight:800;letter-spacing:.02em;
  color:#fff;background:var(--grad);padding:.14rem .5rem;border-radius:999px;box-shadow:0 4px 10px rgba(91,91,240,.4)}
.pay-wrap{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:flex-start}
.pay-qr{flex:0 0 auto;text-align:center}
.pay-qr img{width:200px;height:200px;border-radius:.8rem;background:#fff;padding:.5rem;box-shadow:var(--sh-2)}
.pay-info{flex:1;min-width:230px}
.pay-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.94rem}
.pay-row:last-of-type{border-bottom:none}
.pay-row .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pay-row .hl{background:var(--grad-soft);color:var(--brand);padding:.06rem .4rem;border-radius:.35rem}

@media (max-width:560px){.stats{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}

/* ===========================================================
   MOBILE — thanh điều hướng dưới đáy + tối ưu cho điện thoại
   =========================================================== */
/* Mặc định (máy tính): ẩn toàn bộ phần mobile */
.mobnav,.mob-sheet,.mob-backdrop{display:none}
.mob-more-tg{position:absolute;left:-9999px;opacity:0;pointer-events:none}

@media (max-width:720px){
  /* Thanh trên: gọn 1 hàng, chỉ còn thương hiệu (menu chuyển xuống đáy) */
  .topbar{flex-direction:row;align-items:center;justify-content:space-between;
    gap:.5rem;padding:.6rem .95rem}
  .topbar nav{display:none}
  .brand{font-size:1.02rem}

  /* Nội dung: chừa chỗ cho thanh đáy + gõ phím dễ */
  .wrap{margin:1.05rem auto;padding:0 .9rem}
  h1{font-size:1.38rem;margin:.1rem 0 .9rem}
  h2{font-size:1.05rem}
  .card{padding:1.1rem;border-radius:.85rem;margin-bottom:1rem}
  input,select{font-size:16px}                    /* chặn iOS tự phóng to khi gõ */
  .foot{padding-bottom:calc(5.6rem + env(safe-area-inset-bottom,0px))}
  .stats{grid-template-columns:1fr;gap:.8rem}

  /* ---- Thanh điều hướng dưới đáy (bottom tab bar) ---- */
  .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    justify-content:space-around;align-items:stretch;gap:.1rem;
    padding:.32rem .3rem calc(.32rem + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--card) 90%,transparent);
    -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid var(--glass-brd);box-shadow:0 -8px 26px rgba(0,0,0,.14)}
  .mobnav a,.mobnav .mob-more{position:relative;flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:.16rem;padding:.4rem .1rem;
    font-size:.64rem;font-weight:700;color:var(--muted);text-decoration:none;border-radius:.7rem;
    cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s}
  .mobnav .mi{font-size:1.4rem;line-height:1;transition:transform .15s}
  .mobnav a.on{color:var(--brand)}
  .mobnav a.on .mi{transform:translateY(-2px)}
  .mobnav a.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;
    border-radius:0 0 3px 3px;background:var(--grad)}
  .mobnav a:active,.mobnav .mob-more:active{background:var(--grad-soft)}

  /* ---- Khay "Thêm" trượt từ đáy lên ---- */
  .mob-backdrop{display:none;position:fixed;inset:0;z-index:55;background:rgba(4,6,12,.5);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .mob-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--card);border-top:1px solid var(--glass-brd);border-radius:1.3rem 1.3rem 0 0;
    padding:.5rem 1rem calc(1rem + env(safe-area-inset-bottom,0px));
    transform:translateY(115%);transition:transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -16px 44px rgba(0,0,0,.4)}
  .mob-sheet-grip{width:2.5rem;height:.3rem;border-radius:99px;background:var(--line);margin:.35rem auto .7rem}
  .mob-sheet a,.mob-sheet .mob-sheet-close{display:flex;align-items:center;gap:.8rem;
    padding:.9rem .5rem;font-size:1rem;font-weight:600;color:var(--text);text-decoration:none;
    border-bottom:1px solid var(--line)}
  .mob-sheet a span{font-size:1.25rem;width:1.7rem;text-align:center}
  .mob-sheet a.danger{color:var(--neg)}
  .mob-sheet .mob-sheet-close{justify-content:center;color:var(--muted);font-weight:700;
    border-bottom:none;cursor:pointer;margin-top:.3rem}
  .mob-more-tg:checked ~ .mob-sheet{transform:translateY(0)}
  .mob-more-tg:checked ~ .mob-backdrop{display:block}

  /* Nút chat CSKH: nâng lên trên thanh đáy cho khỏi đè */
  #cskh-toggle{bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important}
  #cskh-panel{bottom:calc(140px + env(safe-area-inset-bottom,0px)) !important;
    height:min(60vh,440px) !important}
}