/* ===================== LIGHT THEME (ghi đè) ===================== */
:root{
  --bg:#f4f6fb;--bg2:#fff;--card:#fff;--card-solid:#fff;--card-hover:#f8fafc;
  --text:#334155;--heading:#0f172a;--muted:#64748b;--dim:#94a3b8;
  --line:rgba(15,23,42,.08);--line2:rgba(15,23,42,.14);
  --chrome:#fff;--chrome-line:rgba(15,23,42,.08);
}
html{color-scheme:light}
body{background:#f4f6fb;color:var(--text);
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(99,102,241,.10),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(139,92,246,.07),transparent 60%)}
::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18)}

/* ---------- Header ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(15,23,42,.02),0 8px 24px rgba(15,23,42,.04)}
.brand{color:var(--heading)}
.brand-name{background:linear-gradient(90deg,#1e1b4b,#4338ca);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-name em{background:linear-gradient(90deg,#6366f1,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-logo{box-shadow:0 6px 16px rgba(99,102,241,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.icon-btn{background:#f1f5f9;border-color:var(--line);color:#334155}
.search{background:#f1f5f9;border-color:transparent;color:#94a3b8}
.search:focus-within{background:#fff;border-color:var(--p);box-shadow:0 0 0 4px rgba(99,102,241,.12);color:var(--p)}
.search input{color:#0f172a}.search input::placeholder{color:#94a3b8}
.search kbd{background:#fff;border-color:var(--line);color:#64748b}
.chip{background:#f1f5f9;border-color:transparent;color:#64748b}
.chip:hover{background:#e8edf5;border-color:transparent}
.chip b{color:#0f172a}
.chip-vip{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fcd34d;color:#92400e}
.chip-vip .ic{color:#d97706}
.wallet-pill{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-color:#a7f3d0;box-shadow:0 4px 14px rgba(16,185,129,.12)}
.wp-ic{background:#fff;color:#059669;box-shadow:0 2px 6px rgba(16,185,129,.2)}
.wp-txt small{color:#047857}
.wp-txt b{color:#064e3b}
.icon-btn-r{background:#f1f5f9;border-color:transparent;color:#64748b}
.icon-btn-r:hover{background:#eef0ff;color:var(--p)}
.badge-dot{box-shadow:0 0 0 2px #f1f5f9}
.divider{background:var(--line2)}
.btn-ghost{color:#334155;background:#fff;border:1px solid var(--line2)}
.btn-ghost:hover{background:#f1f5f9}
.btn-primary{box-shadow:0 6px 18px rgba(99,102,241,.38),inset 0 1px 0 rgba(255,255,255,.25)}
.lang .ic{color:#64748b}

/* ---------- Sidebar ---------- */
.sidebar{background:#fff;border-right:1px solid var(--line);box-shadow:none;scrollbar-color:rgba(15,23,42,.18) transparent}
.brand{border-right-color:var(--line)}
.grp{color:#94a3b8}.grp:hover{color:var(--p)}
.nav{color:#475569}
.nav-ic{background:#f1f5f9;color:#64748b}
.nav:hover{background:#f8fafc;color:#0f172a}
.nav:hover .nav-ic{background:#eef0ff;color:var(--p)}
.nav.active{background:#eef0ff;border-color:#dfe3ff;color:#3730a3}
.nav.active .nav-ic{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;box-shadow:0 6px 14px rgba(99,102,241,.4)}
.nav.active:before{box-shadow:none}
.acc-n{background:#f1f5f9;color:#64748b}
.acc-head .chev{color:#94a3b8}
.acc.open>.acc-head{background:#f8fafc;color:#0f172a}
.acc.open>.acc-head .chev{color:var(--p)}
.acc.open>.acc-head .nav-ic{box-shadow:0 6px 14px rgba(99,102,241,.35)}
.acc-in{border-left-color:#e2e8f0}
.sub-link{color:#64748b}
.sub-link:hover{background:#eef0ff;color:#3730a3}
.tag{background:#fee2e2;color:#dc2626;border-color:#fecaca}
.tag.g{background:#d1fae5;color:#047857;border-color:#a7f3d0}
.tag.y{background:#fef3c7;color:#b45309;border-color:#fde68a}
.nav.active .tag{background:#fee2e2;color:#dc2626}
.nav.child .dot{border-color:#cbd5e1}

/* ---------- Footer ---------- */
.footer{background:#fff;border-top:1px solid var(--line);color:#64748b}
.footer:before{opacity:.35}
.footer h4{color:#0f172a}
.footer a:not(.brand):hover{color:var(--p)}
.footer a:not(.brand) .ic{color:var(--p)}
.foot-bottom{border-top-color:var(--line);color:#94a3b8}

/* ---------- Khối kính -> thẻ trắng ---------- */
.glass{background:#fff;border:1px solid var(--line);backdrop-filter:none;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05)}
.card{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05)}
.card:hover{background:#fff}
.eyebrow{color:#64748b}
.muted{color:#64748b}

/* ---------- Số dư + thống kê ---------- */
.bal{background:linear-gradient(135deg,#ecfdf5,#fff 60%);border-color:#a7f3d0;box-shadow:0 10px 30px rgba(16,185,129,.12)}
.bal-glow{background:linear-gradient(135deg,rgba(52,211,153,.35),rgba(34,211,238,.25));opacity:.7}
.bal:after{background:linear-gradient(to top,rgba(16,185,129,.08),transparent)}
.bal-num{color:#0f172a}
.btn-em{box-shadow:0 8px 20px rgba(16,185,129,.35)}
.stat2-h span{color:#64748b}
.c-amber{--cc:#d97706}.c-pink{--cc:#db2777}.c-emerald{--cc:#059669}.c-violet{--cc:#7c3aed}.c-cyan{--cc:#0891b2}
.c-pink .stat2-v,.c-violet .stat2-v{color:#0f172a}
.stat2.terms:hover{border-color:#a5f3fc;background:#f8fdff}
.stat2.terms .stat2-v{color:#0f172a}
.stat2.terms small{color:#94a3b8}

/* ---------- Banner cầu vồng ---------- */
.rainbow{box-shadow:0 12px 34px rgba(139,92,246,.18)}
.rainbow:before{opacity:.35}
.rainbow-in{background:linear-gradient(135deg,#faf5ff,#fff 55%,#f0fdff)}
.rainbow-in h4{color:#0f172a}
.rainbow-in p{color:#475569}
.rainbow-in p b{color:#0f172a}
.grad-text{background:linear-gradient(90deg,#7c3aed,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-em{background:linear-gradient(90deg,#059669,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent}
.rb-hot{background:#ffe4e6;color:#e11d48}

/* ---------- Tiêu đề, thao tác nhanh, hỗ trợ ---------- */
.sec-h h3,.sec-h2 h3{color:#0f172a}
.sec-h i{background:rgba(15,23,42,.08)}
.more{color:var(--p)}.more:hover{color:#4338ca}
.qic{background:#f1f5f9;color:var(--p)}
.qcard b{color:#0f172a}
.qcard:hover b{color:#fff}
.qcard:hover{background:#6366f1;border-color:#6366f1}
.qcard:hover .qic{background:rgba(255,255,255,.22);color:#fff}
.link-card h4{color:#0f172a}
.link-card p{color:#64748b}
.lc-cyan:hover h4{color:#0891b2}.lc-violet:hover h4{color:#7c3aed}
.lc-ext{color:#94a3b8}

/* ---------- Bảng xếp hạng ---------- */
.rk-badge{background:#fffbeb;border-color:#fde68a;color:#b45309}
.trophy{color:#d97706}
.rk:before{background:radial-gradient(circle,rgba(245,158,11,.18),transparent 70%)}
.pd-crown{color:#f59e0b;filter:drop-shadow(0 0 10px rgba(245,158,11,.5))}
.pd-no{border-color:#fff;background:#0f172a;color:#fff}
.pd-name{color:#0f172a}
.pd-gold .pd-name{color:#b45309}.pd-silver .pd-name{color:#475569}.pd-bronze .pd-name{color:#c2410c}
.pd-val{background:#ecfdf5;color:#047857}
.pd-val .ic{color:#d97706}
.pd-step{color:#0f172a}
.pd-gold .pd-step{background:linear-gradient(180deg,rgba(251,191,36,.55),rgba(251,191,36,.08))}
.pd-silver .pd-step{background:linear-gradient(180deg,rgba(148,163,184,.45),rgba(148,163,184,.06))}
.pd-bronze .pd-step{background:linear-gradient(180deg,rgba(217,119,6,.4),rgba(217,119,6,.06))}
.pd-step span{opacity:.5}
.rk-list{background:#f8fafc;border-top-color:var(--line)}
.rk-row{border-bottom-color:rgba(15,23,42,.06)}
.rk-row:hover{background:#fff}
.rk-n{color:#94a3b8}
.rk-av{background:#eef0ff;color:var(--p)}
.rk-mid b{color:#0f172a}
.rk-bar{background:#e2e8f0}
.rk-val{color:#047857}
.rk-val .ic{color:#d97706}
.rk-foot{background:#f8fafc;color:#94a3b8;border-top:1px solid var(--line)}

/* ---------- Mobile backdrop ---------- */
.backdrop.show{background:rgba(15,23,42,.35)}
@media(max-width:960px){.sidebar{box-shadow:0 0 50px rgba(15,23,42,.18)}}

/* ===== Thẻ ví trên header (số dư + đang chờ) ===== */
.wlt{display:flex;align-items:stretch;height:48px;border-radius:16px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 16px rgba(15,23,42,.05);overflow:hidden}
.wlt-cell{display:flex;align-items:center;gap:10px;padding:0 16px 0 8px;position:relative}
.wlt-main{background:linear-gradient(135deg,#ecfdf5,#d1fae5);padding-left:7px}
.wlt-pend{border-left:1px solid #e2e8f0}
.wlt-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.wlt-main .wlt-ic{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;box-shadow:0 4px 10px rgba(16,185,129,.35)}
.wlt-pend .wlt-ic{background:#fffbeb;color:#d97706}
.wlt-tx{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.wlt-tx small{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.wlt-tx b{font-size:15px;font-weight:800;margin-top:2px}
.wlt-tx em{font-style:normal;font-size:11px;font-weight:700;opacity:.65;margin-left:1px}
.wlt-main small{color:#047857}.wlt-main b{color:#064e3b}
.wlt-pend small{color:#b45309}.wlt-pend b{color:#78350f}
.wlt-add{width:46px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);transition:.2s}
.wlt-add:hover{filter:brightness(1.1)}
.wlt-add .ic{transition:transform .25s}.wlt-add:hover .ic{transform:rotate(90deg)}
@media(max-width:960px){.wlt{height:42px}.wlt-tx small{display:none}.wlt-tx b{margin-top:0}.wlt-main{padding-right:12px}.wlt-ic{width:30px;height:30px}.wlt-add{width:38px}}

/* ===== Header mobile: nhường chỗ cho thẻ ví ===== */
@media(max-width:960px){
  .topbar{gap:10px;padding-right:12px}
  .brand-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
  .wlt{margin-left:auto;flex:none}
}
@media(max-width:560px){
  .brand-name{display:none}
  .icon-btn{margin-left:12px}
}

/* ===== Ví header v3: tối giản ===== */
.pend{display:flex;align-items:center;gap:7px;color:#94a3b8;font-size:13px;font-weight:500;white-space:nowrap;padding-right:6px}
.pend b{color:#475569;font-weight:700;margin-left:2px}
.pend .ic{color:#cbd5e1}
.coinpill{display:flex;align-items:center;gap:8px;height:42px;padding:0 5px 0 8px;border-radius:99px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:.2s}
.coinpill:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(15,23,42,.08)}
.cp-coin{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fef3c7;color:#d97706}
.cp-num{font-size:16px;font-weight:800;color:#0f172a;letter-spacing:-.2px}
.cp-unit{font-size:12.5px;font-weight:600;color:#94a3b8;margin-left:-3px}
.cp-add{display:grid;place-items:center;width:32px;height:32px;margin-left:4px;border-radius:50%;background:#0f172a;color:#fff;transition:.2s}
.cp-add:hover{background:#6366f1;transform:rotate(90deg)}
@media(max-width:560px){.cp-unit{display:none}}

/* ===== Header: tên dài không được gãy dòng ===== */
.brand{min-width:0;overflow:hidden}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.search{min-width:140px;flex-shrink:1}
.pend{flex:none}
.coinpill{flex:none}
@media(max-width:1200px){.pend span{font-size:12.5px}}
@media(max-width:1100px){.pend{display:none}}

/* ===== Thẻ thống kê: số lớn không làm vỡ nhãn ===== */
.stat-grid{grid-template-columns:minmax(0,1.9fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.1fr)}
.stat2-h span{white-space:nowrap}
.stat2-v{overflow:hidden;text-overflow:ellipsis}
@media(max-width:1280px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat-grid{grid-template-columns:minmax(0,2.5fr) minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1.05fr)}
.stat-grid .stat2:first-child .stat2-v{font-size:16.5px;letter-spacing:-.2px}
@media(max-width:1280px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-grid .stat2:first-child .stat2-v{font-size:18px}}

/* ===== Thống kê: Đang chờ chiếm cả hàng, 3 ô còn lại chia đều ===== */
@media(min-width:1281px){
  .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat-grid .stat2:first-child{grid-column:1/-1}
  .stat-grid .stat2:first-child .stat2-v{font-size:20px}
  .stat-grid .stat2.terms{grid-column:1/-1}
}

/* ===== Số dư rất lớn: co chữ theo độ rộng, không gãy dòng ===== */
.bal-row{min-width:0}
.bal-row>div:last-child{min-width:0;flex:1}
.bal-num{white-space:nowrap;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.8px}
.bal-num em{font-style:normal;font-size:.55em;font-weight:700;color:#64748b;margin-left:4px}
.cp-num{white-space:nowrap}
/* header điện thoại: viên thuốc coin co lại, không tràn */
@media(max-width:560px){
  .topbar{overflow:hidden}
  .coinpill{min-width:0;margin-left:auto;padding-left:6px}
  .cp-num{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
  .cp-coin{width:24px;height:24px}
  .cp-add{width:28px;height:28px;margin-left:2px}
  .bal-num{font-size:clamp(20px,7vw,28px)}
  .stat2-v{font-size:16px}
  .stat-grid .stat2:first-child .stat2-v{font-size:16px}
}

@media(max-width:560px){
  .coinpill{flex:0 1 auto;max-width:calc(100vw - 150px)}
  .cp-num{max-width:none;font-size:13px}
}
@media(max-width:420px){
  .brand-logo{display:none}
  .brand{width:0;min-width:0}
  .coinpill{max-width:calc(100vw - 80px)}
  .cp-coin{display:none}
  .coinpill{padding-left:12px}
}

/* ===== Logo header ===== */
.topbar .brand-full{display:flex;align-items:center;justify-content:center;padding:0 12px;text-decoration:none;flex:0 0 var(--side);min-width:0;overflow:hidden}
.topbar .brand-full-logo{height:64px;max-height:66px;max-width:100%;width:auto;object-fit:contain;display:block}
@media(max-width:960px){
  .topbar .brand-full{flex:1 1 0;width:auto;justify-content:flex-start;padding:0 4px}
  .topbar .brand-full-logo{height:54px;max-height:54px}
}
@media(max-width:420px){
  .topbar .brand-full-logo{height:50px;max-height:50px}
  .topbar .btn{padding:0 12px;height:38px;font-size:13px}
}