:root{
  --bg:#070b12;--bg2:#0d1520;--bg3:#131e2e;
  --card:#111927;--card2:#182233;--card3:#1d2940;
  --border:rgba(99,179,237,0.1);--border2:rgba(99,179,237,0.22);
  --accent:#3b9eff;--gold:#f6c90e;--green:#22d984;
  --red:#ff4d6d;--orange:#ff8c42;--purple:#a78bfa;
  --text:#dce8f5;--muted:#5c7a9a;--muted2:#8aabcc;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Mulish',sans-serif;min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse 70% 50% at 0% 0%,rgba(59,158,255,0.07) 0%,transparent 60%),
             radial-gradient(ellipse 50% 40% at 100% 100%,rgba(246,201,14,0.05) 0%,transparent 60%);
  pointer-events:none;z-index:0;}

/* ── AUTH SCREEN ── */
#authScreen{position:fixed;inset:0;background:var(--bg);z-index:500;
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px 20px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* iOS safe-area: padding top tránh URL bar che */
@supports(padding:max(0px)){
  #authScreen{padding-top:max(20px, env(safe-area-inset-top, 20px));
    padding-bottom:max(40px, calc(40px + env(safe-area-inset-bottom)));}
}
/* Center khi form ngắn — dùng auto margin */
#authScreen > .auth-box{margin:auto;}
.auth-box{background:var(--card);border:1px solid var(--border2);border-radius:20px;width:100%;max-width:420px;overflow:hidden;}
.auth-header{background:linear-gradient(135deg,#0d1520,#182233);padding:32px 28px 24px;text-align:center;}
.auth-ball{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#e05a0c);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 12px;box-shadow:0 0 20px rgba(246,201,14,.3);}
.auth-title{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,var(--gold),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.auth-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.auth-body{padding:28px;}
.auth-tabs{display:flex;background:var(--bg3);border-radius:9px;padding:3px;margin-bottom:22px;}
.auth-tab{flex:1;padding:8px;border-radius:7px;border:none;background:transparent;
  color:var(--muted);font-family:'Mulish',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;}
.auth-tab.active{background:var(--accent);color:#000;}
.auth-form{display:none;}
.auth-form.active{display:block;}
.auth-msg{font-size:12px;padding:10px 14px;border-radius:8px;margin-bottom:14px;display:none;}
.auth-msg.success{background:rgba(34,217,132,.12);color:var(--green);border:1px solid rgba(34,217,132,.2);display:block;}
.auth-msg.error{background:rgba(255,77,109,.12);color:var(--red);border:1px solid rgba(255,77,109,.2);display:block;}

/* ── LOADING OVERLAY ── */
#loadingOverlay{position:fixed;inset:0;background:var(--bg);z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
#loadingOverlay .spin{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
#loadingOverlay p{font-size:13px;color:var(--muted);}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── LAYOUT ── */
.app{display:flex;min-height:100vh;position:relative;z-index:1;}
.sidebar{width:228px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:100;}
.main{margin-left:228px;flex:1;padding:28px 30px 80px;}
.page{display:none;animation:fadeUp .3s ease;}
.page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── SIDEBAR ── */
.sb-logo{padding:20px 16px 14px;border-bottom:1px solid var(--border);}
.sb-logo-row{display:flex;align-items:center;gap:9px;margin-bottom:2px;}
.sb-ball{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#e05a0c);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;box-shadow:0 0 12px rgba(246,201,14,.3);}
.sb-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,var(--gold),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.sb-sub{font-size:10px;color:var(--muted);padding-left:41px;}
.sb-user{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.sb-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.sb-user-info{flex:1;min-width:0;}
.sb-user-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user-role{font-size:10px;color:var(--muted);}
.vip-badge{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(90deg,var(--gold),#ff8c00);
  color:#000;border-radius:4px;padding:1px 6px;font-size:9px;font-weight:800;letter-spacing:.5px;}
.free-badge{display:inline-flex;align-items:center;background:var(--card3);
  color:var(--muted);border-radius:4px;padding:1px 6px;font-size:9px;font-weight:700;}
.nav-group{padding:12px 8px 4px;}
.nav-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:0 8px 7px;display:block;}
.nav-btn{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:8px;border:none;
  background:transparent;color:var(--muted2);font-family:'Mulish',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;text-align:left;}
.nav-btn .ico{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:var(--bg3);flex-shrink:0;}
.nav-btn:hover{background:var(--bg3);color:var(--text);}
.nav-btn.active{background:linear-gradient(90deg,rgba(59,158,255,.14),transparent);color:var(--accent);}
.nav-btn.active .ico{background:rgba(59,158,255,.18);}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:10px;font-size:10px;padding:1px 6px;font-weight:700;}
.sb-logout{margin:auto 10px 14px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-family:'Mulish',sans-serif;font-size:12px;font-weight:600;
  cursor:pointer;width:calc(100% - 20px);display:flex;align-items:center;gap:8px;transition:all .15s;}
.sb-logout:hover{border-color:var(--red);color:var(--red);}

/* ── PAGE HEADER ── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:22px;}
.ph-left h2{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;letter-spacing:.5px;margin-bottom:2px;}
.ph-left p{font-size:12px;color:var(--muted);}
.ph-right{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;}
.card h3{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.card h3 .badge{background:var(--accent);color:#000;border-radius:5px;padding:1px 7px;font-size:11px;font-weight:700;}
.mb12{margin-bottom:12px;}.mb18{margin-bottom:18px;}

/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;}
.stat-card .s-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
.stat-card .s-val{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;line-height:1;}
.stat-card .s-sub{font-size:11px;color:var(--muted);margin-top:4px;}
.s-val.gold{color:var(--gold);}.s-val.green{color:var(--green);}.s-val.red{color:var(--red);}.s-val.blue{color:var(--accent);}

/* ── FORMS ── */
.form-row{display:grid;gap:12px;margin-bottom:14px;}
.form-row.col2{grid-template-columns:1fr 1fr;}
.form-row.col3{grid-template-columns:1fr 1fr 1fr;}
.fg{display:flex;flex-direction:column;gap:5px;}
.fg label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;}
.fg input,.fg select,.fg textarea{background:var(--card3);border:1px solid var(--border2);border-radius:8px;
  color:var(--text);font-family:'Mulish',sans-serif;font-size:13px;padding:9px 12px;outline:none;transition:border-color .18s;width:100%;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);}
.fg select option{background:var(--bg3);}
.fg textarea{resize:vertical;min-height:80px;line-height:1.6;}
.fg .hint{font-size:11px;color:var(--muted2);}
.fg .err{font-size:11px;color:var(--red);}
.date-inp{background:var(--card2);border:1.5px solid var(--border2);border-radius:9px;color:var(--text);
  font-family:'Mulish',sans-serif;font-size:14px;font-weight:600;padding:10px 14px;outline:none;
  letter-spacing:0.3px;transition:border-color .15s;width:100%;min-width:0;}
.date-inp:focus{border-color:var(--accent);}

/* ── BUTTONS ── */
.btn{padding:9px 18px;border-radius:8px;border:none;font-family:'Mulish',sans-serif;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:7px;}
.btn-primary{background:var(--accent);color:#000;}
.btn-primary:hover{background:#5ab0ff;transform:translateY(-1px);}
.btn-gold{background:var(--gold);color:#000;}
.btn-gold:hover{background:#ffd740;}
.btn-ghost{background:var(--card2);color:var(--text);border:1px solid var(--border2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{background:#ff6b85;}
.btn-purple{background:linear-gradient(135deg,var(--purple),var(--accent));color:#fff;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;}

/* ── TABLES ── */
.tbl-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead tr{background:var(--card2);}
th{padding:10px 12px;text-align:left;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;white-space:nowrap;}
td{padding:9px 12px;border-top:1px solid var(--border);vertical-align:middle;}
tr:hover td{background:rgba(59,158,255,.03);}
.td-num{font-family:'Barlow Condensed',sans-serif;font-size:17px;letter-spacing:1px;color:var(--gold);
  display:flex;flex-wrap:wrap;gap:2px;align-items:center;}
/* Số cược trong Đối Chiếu / Báo Cáo - giống style num-chip của KQXS */
.num-win{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:28px;padding:0 8px;
  background:rgba(246,201,14,0.2);border:1.5px solid var(--gold);border-radius:6px;
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;
  color:var(--gold);box-shadow:0 0 10px rgba(246,201,14,0.4);margin:2px;}
.num-loss{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:28px;padding:0 8px;
  background:var(--card3);border:1px solid transparent;border-radius:6px;
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;
  color:var(--muted2);margin:2px;}

/* ── TYPE TAGS ── */
.td-type{display:inline-block;padding:2px 8px;border-radius:5px;font-size:11px;font-weight:700;text-transform:uppercase;}
.tag-bon_cang{background:rgba(167,139,250,.15);color:var(--purple);}
.tag-ba_cang{background:rgba(59,158,255,.15);color:var(--accent);}
.tag-de{background:rgba(246,201,14,.15);color:var(--gold);}
.tag-lo_2_so{background:rgba(34,217,132,.15);color:var(--green);}
.tag-lo_3_so{background:rgba(34,217,132,.1);color:#5eead4;}
.tag-xien_2{background:rgba(255,140,66,.15);color:var(--orange);}
.tag-xien_3{background:rgba(255,77,109,.15);color:var(--red);}
.tag-xien_4{background:rgba(255,77,109,.1);color:#fb7185;}
.td-ab{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;}
.ab-a{background:rgba(246,201,14,.15);color:var(--gold);}
.ab-b{background:rgba(59,158,255,.15);color:var(--accent);}

/* ── STATUS ── */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.chip-win{background:rgba(34,217,132,.15);color:var(--green);}
.chip-lose{background:rgba(255,77,109,.12);color:var(--red);}
.chip-pending{background:rgba(246,201,14,.12);color:var(--gold);}

/* ── KQXS ── */
.kqxs-box{background:linear-gradient(180deg,var(--bg2),var(--card));
  border:1px solid var(--border2);border-radius:16px;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);}
.kqxs-head{background:linear-gradient(135deg,#e05a0c 0%,#ff8c42 50%,var(--gold) 100%);
  padding:16px 22px;text-align:center;position:relative;}
.kqxs-head::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at top,rgba(255,255,255,0.2),transparent 70%);pointer-events:none;}
.kqxs-head h3{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:800;letter-spacing:2.5px;color:#000;
  text-shadow:0 1px 2px rgba(255,255,255,0.3);}
.kqxs-head p{font-size:12px;color:rgba(0,0,0,.7);margin-top:3px;font-weight:600;}
.kqxs-table{width:100%;border-collapse:collapse;}
.kqxs-table tr{border-bottom:1px solid var(--border);}
.kqxs-table tr:last-child{border-bottom:none;}
.kqxs-table tr:hover{background:rgba(255,255,255,0.02);}
.kqxs-table td{padding:11px 16px;vertical-align:middle;}
.kqxs-table .pn{color:var(--muted2);font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;width:50px;font-family:'Barlow Condensed',sans-serif;}
.kqxs-table .pv{display:flex;flex-wrap:wrap;gap:7px;}
.num-chip{display:inline-flex;align-items:center;justify-content:center;
  min-width:58px;height:36px;padding:0 10px;
  background:linear-gradient(180deg,var(--card3),var(--card2));
  border:1px solid var(--border2);border-radius:8px;
  font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;letter-spacing:1.5px;
  color:var(--text);transition:all .2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.num-chip:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,0.3);}
.num-chip.db{min-width:88px;height:50px;font-size:28px;letter-spacing:2px;
  background:linear-gradient(135deg,#e05a0c,#ff8c42,var(--gold));color:#000;
  border:2px solid var(--gold);
  box-shadow:0 0 18px rgba(246,201,14,0.5),inset 0 1px 0 rgba(255,255,255,0.3);
  font-weight:800;}
.num-chip.hl{background:linear-gradient(135deg,rgba(246,201,14,.25),rgba(246,201,14,.15));
  border-color:var(--gold);color:var(--gold);
  box-shadow:0 0 12px rgba(246,201,14,.45);}

/* ── ANALYSIS ── */
.anl-box{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:14px;}
.anl-box h4{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.num-list{display:flex;flex-wrap:wrap;gap:4px;}
.num-tag{padding:3px 8px;border-radius:5px;background:var(--card3);
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px;color:var(--muted2);}
.num-tag.hl{background:rgba(246,201,14,.15);color:var(--gold);}

/* ── AB SELECTOR ── */
.ab-selector{display:flex;gap:10px;margin-bottom:18px;}
.ab-opt{flex:1;padding:14px;border-radius:10px;border:2px solid var(--border);
  background:var(--card2);cursor:pointer;transition:all .2s;text-align:center;}
.ab-opt.sel-a{border-color:var(--gold)!important;background:rgba(246,201,14,.07);}
.ab-opt.sel-b{border-color:var(--accent)!important;background:rgba(59,158,255,.07);}
.ab-opt .ab-letter{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:800;line-height:1;}
.ab-opt .ab-name{font-size:12px;font-weight:700;margin-top:3px;}
.ab-opt .ab-desc{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4;}

/* ── RATE GRID ── */
.rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
/* 2 cột Thu | Trả (đề xuất user) */
.rates-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.rates-2col .rate-grid{grid-template-columns:1fr;}
.rate-item{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:12px;}
.rate-item .r-name{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;font-weight:700;}
.rate-item input{background:var(--card3);border:1px solid var(--border2);border-radius:6px;color:var(--text);
  font-family:'Mulish',sans-serif;font-size:14px;font-weight:700;padding:7px 10px;outline:none;width:100%;}
.rate-item input:focus{border-color:var(--accent);}
.rate-item .r-lbl{font-size:10px;color:var(--muted);margin-top:5px;}

/* ── AI PARSE BOX ── */
.ai-box{background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(59,158,255,.05));
  border:1px solid rgba(167,139,250,.25);border-radius:14px;padding:20px;margin-bottom:18px;}
.ai-box-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.ai-box-head h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;}
.ai-quota{font-size:11px;color:var(--muted);background:var(--card2);border-radius:6px;padding:3px 10px;}
.ai-quota b{color:var(--accent);}
.ai-result{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:12px;
  margin-top:12px;font-size:12px;color:var(--muted2);line-height:1.7;display:none;}
.ai-result.show{display:block;}

/* ── VIP PROMO ── */
.vip-promo{background:linear-gradient(135deg,rgba(246,201,14,.08),rgba(255,140,66,.06));
  border:1px solid rgba(246,201,14,.2);border-radius:14px;padding:20px;text-align:center;}
.vip-promo .vp-icon{font-size:36px;margin-bottom:8px;}
.vip-promo h3{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:var(--gold);margin-bottom:6px;}
.vip-promo p{font-size:13px;color:var(--muted2);margin-bottom:14px;line-height:1.6;}

/* ── PROFILE PAGE ── */
.profile-avatar-lg{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;margin-bottom:12px;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:999;
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--card);border:1px solid var(--border2);border-radius:16px;
  width:100%;max-width:640px;max-height:90vh;overflow-y:auto;
  transform:scale(.95);transition:transform .25s;}
.modal-overlay.open .modal{transform:scale(1);}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-head h3{font-size:15px;font-weight:700;}
.modal-close{background:var(--card3);border:none;color:var(--muted2);width:26px;height:26px;border-radius:6px;
  cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{background:var(--red);color:#fff;}
.modal-body{padding:20px;}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}

/* ── TOAST ── */
.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:7px;}
.toast{background:var(--card2);border:1px solid var(--border2);border-radius:10px;
  padding:10px 16px;font-size:13px;font-weight:600;
  box-shadow:0 4px 20px rgba(0,0,0,.4);animation:tin .3s ease;display:flex;align-items:center;gap:8px;}
.toast.success{border-left:3px solid var(--green);}
.toast.error{border-left:3px solid var(--red);}
.toast.info{border-left:3px solid var(--accent);}
@keyframes tin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* ── SYNC INDICATOR ── */
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px;}
.sync-dot.syncing{background:var(--gold);animation:pulse 1s infinite;}
.sync-dot.error{background:var(--red);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.empty{text-align:center;padding:44px 20px;color:var(--muted);}
.empty .e-ico{font-size:36px;margin-bottom:10px;opacity:.3;}
.divider{height:1px;background:var(--border);margin:16px 0;}
.flex-gap{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
.text-gold{color:var(--gold);}.text-green{color:var(--green);}.text-red{color:var(--red);}
.text-muted{color:var(--muted);}.text-accent{color:var(--accent);}
.fw7{font-weight:700;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* Toggle hiển thị desktop/mobile */
.show-only-mobile{display:none;}
.hide-on-mobile{display:block;}

/* ══════════ MOBILE RESPONSIVE — NÂNG CAO ══════════ */
/* Nút hamburger menu — KHÔNG dùng nữa trên mobile vì có bottom nav. Ẩn luôn */
.mobile-menu-btn{display:none !important;}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;}
.sidebar-backdrop.open{display:block;}

/* Bottom navigation — chỉ hiện trên mobile */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);border-top:1px solid var(--border2);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));z-index:150;
  box-shadow:0 -2px 12px rgba(0,0,0,.4);}
.mobile-bottom-nav-row{display:flex;justify-content:space-around;align-items:center;}
.mb-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:6px 4px;color:var(--muted);
  font-family:'Mulish',sans-serif;font-size:9px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.3px;transition:color .15s;min-height:48px;}
.mb-nav-item.active{color:var(--accent);}
.mb-nav-item .mb-ico{font-size:20px;margin-bottom:2px;line-height:1;}
.mb-nav-item .mb-badge{position:absolute;top:4px;right:25%;background:var(--red);color:#fff;
  border-radius:10px;font-size:9px;padding:1px 5px;font-weight:700;display:none;}

/* Mobile sticky header */
.mobile-page-header{display:none;position:sticky;top:0;background:var(--bg);z-index:50;
  padding:10px 14px;border-bottom:1px solid var(--border);
  display:none;align-items:center;gap:10px;}
.mobile-page-header h2{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;flex:1;margin:0;}

@media(max-width:900px){
  /* === LAYOUT TỔNG === */
  /* BỎ HẲN sidebar trên mobile - chỉ dùng Bottom Nav + page-more */
  .sidebar{display:none !important;}
  .sidebar-backdrop{display:none !important;}
  .main{margin-left:0;padding:14px 12px 90px;}

  /* Bottom nav — show */
  .mobile-bottom-nav{display:block;}

  /* === PAGE MORE — menu giống Facebook === */
  #page-more .more-user-card{
    background:linear-gradient(135deg,var(--card),var(--card2));
    border:1px solid var(--border2);border-radius:14px;
    padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:14px;
  }
  #page-more .more-avatar{
    width:54px;height:54px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--purple));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:22px;font-weight:700;flex-shrink:0;
  }
  #page-more .more-user-name{font-size:16px;font-weight:700;margin-bottom:3px;}
  #page-more .more-user-email{font-size:11px;color:var(--muted);margin-top:2px;}

  .more-section-title{
    font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;
    padding:14px 4px 6px;font-weight:700;
  }
  .more-menu-list{
    background:var(--card);border:1px solid var(--border);
    border-radius:12px;overflow:hidden;
  }
  .more-menu-item{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:13px 14px;border:none;background:transparent;
    color:var(--text);font-family:'Mulish',sans-serif;
    font-size:14px;font-weight:600;cursor:pointer;
    border-bottom:1px solid var(--border);
    text-align:left;transition:background .15s;
  }
  .more-menu-item:last-child{border-bottom:none;}
  .more-menu-item:active{background:var(--card2);}
  .more-menu-item .mm-ico{
    width:34px;height:34px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;background:var(--bg3);flex-shrink:0;
  }
  .more-menu-item .mm-txt{flex:1;}
  .more-menu-item .mm-arrow{color:var(--muted);font-size:14px;}
  .more-menu-item .mm-badge{
    background:var(--red);color:#fff;border-radius:11px;
    font-size:10px;padding:2px 7px;font-weight:700;
  }
  .more-logout-btn{
    width:100%;padding:13px;border:none;border-radius:12px;
    background:linear-gradient(135deg,var(--red),#ff6b85);color:#fff;
    font-family:'Mulish',sans-serif;font-size:14px;font-weight:700;
    margin-top:14px;cursor:pointer;
  }

  /* === PAGE HEADER === */
  .ph{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:14px;}
  .ph-left h2{font-size:20px;}
  .ph-left p{font-size:11px;}
  .ph-right{flex-wrap:wrap;gap:6px;}
  .ph-right .btn{flex:1 1 calc(50% - 4px);justify-content:center;font-size:12px;padding:9px 10px;min-height:38px;}
  .ph-right .date-inp{flex:1 1 100%;font-size:16px;padding:11px 14px;min-height:42px;
    text-align:center;font-weight:700;}

  /* === STATS GRID — Đảm bảo 2 cột vẫn fit === */
  .stats-row{grid-template-columns:repeat(2,1fr);gap:8px;}
  .stat-card{padding:12px 10px;overflow:hidden;}
  .stat-card .s-val{font-size:19px;line-height:1.2;word-break:break-all;}
  .stat-card .s-label{font-size:10px;}
  .stat-card .s-sub{font-size:9px;}

  /* === CARDS === */
  .card{padding:12px;border-radius:10px;}
  .card h3{font-size:13px;margin-bottom:10px;}
  .mb18{margin-bottom:12px;}
  .mb12{margin-bottom:10px;}

  /* === FORMS === Touch-friendly */
  .form-row.col2,.form-row.col3,.form-row.col4{grid-template-columns:1fr;gap:10px;}
  .fg input,.fg select,.fg textarea{font-size:16px !important;padding:11px 12px;min-height:42px;}
  .fg label{font-size:10px;}

  /* CHỐNG iOS AUTO-ZOOM: ép TẤT CẢ input/textarea/select font ≥ 16px */
  input[type="text"],input[type="password"],input[type="email"],input[type="number"],
  input[type="tel"],input[type="search"],input[type="url"],input[type="date"],
  input[type="datetime-local"],input[type="time"],textarea,select{
    font-size:16px !important;
  }

  /* === DASHBOARD GRID === */
  .main > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:10px !important;}
  #anlGrid{grid-template-columns:1fr !important;}

  /* === BUTTONS — Touch-friendly === */
  .btn{font-size:13px;padding:10px 14px;min-height:42px;}
  .btn-sm{font-size:12px;padding:7px 11px;min-height:34px;}

  /* === AB SELECTOR === */
  .ab-selector{flex-direction:row;gap:8px;}
  .ab-opt{padding:12px 8px;}
  .ab-opt .ab-letter{font-size:24px;}
  .ab-opt .ab-name{font-size:11px;}
  .ab-opt .ab-desc{font-size:9px;line-height:1.3;}

  /* === RATE GRID === */
  .rate-grid{grid-template-columns:1fr;gap:8px;}
  .rate-item{padding:9px 10px;}
  .rate-item .r-name{font-size:10px;}
  /* 2 cột Thu/Trả vẫn giữ trên mobile */
  .rates-2col{grid-template-columns:1fr 1fr;gap:8px;}
  .rates-2col .card{padding:10px 8px;}
  .rates-2col .card h3{font-size:11px;margin-bottom:8px;}
  .rates-2col .rate-item input{font-size:16px;padding:6px 8px;}
  .rates-2col .rate-item .r-lbl{font-size:9px;}

  /* === TABLES (fallback) === */
  .tbl-wrap{font-size:11px;-webkit-overflow-scrolling:touch;overflow-x:auto;max-width:100%;
    border-radius:8px;position:relative;}
  /* Hint scroll ngang */
  .tbl-wrap::after{content:'→';position:absolute;right:6px;top:50%;transform:translateY(-50%);
    color:var(--accent);font-size:14px;font-weight:700;opacity:0.4;pointer-events:none;
    animation:pulseHint 1.5s ease-in-out infinite;}
  .tbl-wrap:has(table:hover)::after{display:none;}
  @keyframes pulseHint{0%,100%{opacity:0.2;transform:translate(0,-50%);}50%{opacity:0.6;transform:translate(-3px,-50%);}}
  table{font-size:11px;min-width:100%;width:max-content;}
  th,td{padding:6px 7px;white-space:nowrap;}
  th:last-child,td:last-child{padding-right:24px;}
  .td-num{font-size:13px;flex-wrap:wrap;}
  .td-type{font-size:10px;padding:1px 5px;}

  /* === KQXS — chip lớn hơn để đẹp & dễ đọc === */
  .num-chip{min-width:48px;height:32px;font-size:16px;padding:0 8px;}
  .num-chip.db{min-width:72px;height:42px;font-size:23px;letter-spacing:1.5px;}
  .kqxs-head{padding:12px 16px;}
  .kqxs-head h3{font-size:18px;letter-spacing:1.5px;}
  .kqxs-head p{font-size:11px;}
  .kqxs-table td{padding:9px 12px;}
  .kqxs-table .pn{width:38px;font-size:12px;}
  .kqxs-table .pv{gap:5px;}

  /* === BÁO CÁO — số trúng cell layout === */
  /* Khi danh sách số trúng dọc → ép nó wrap chứ không xếp dọc */
  .num-list{display:flex !important;flex-wrap:wrap !important;gap:4px;flex-direction:row !important;}
  .num-list .num-tag{display:inline-flex;flex:0 0 auto;}

  /* === AUTH === */
  .auth-box{max-width:100%;}
  .auth-header{padding:24px 20px 18px;}
  .auth-body{padding:20px;}
  .auth-form input{font-size:16px !important;}

  /* === MODALS — Bottom sheet on mobile === */
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal{max-width:100%;width:100%;max-height:92vh;border-radius:18px 18px 0 0;
    margin-bottom:0;animation:slideUp .25s ease;}
  .modal-head{padding:14px 16px;position:sticky;top:0;background:var(--card);z-index:1;
    border-bottom:1px solid var(--border);}
  .modal-head h3{font-size:14px;}
  .modal-close{width:32px;height:32px;font-size:18px;}
  .modal-body{padding:14px 16px;}
  .modal-foot{padding:10px 16px;flex-direction:column-reverse;gap:8px;
    position:sticky;bottom:0;background:var(--card);
    box-shadow:0 -2px 8px rgba(0,0,0,.2);}
  .modal-foot .btn{width:100%;justify-content:center;}

  @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

  /* === AI BOX === */
  .ai-box{padding:14px;}
  .ai-box-head{flex-direction:column;align-items:flex-start;gap:6px;}
  .ai-box-head h3{font-size:13px;}
  .ai-quota{font-size:10px;}
  #aiInput{font-size:16px !important;min-height:160px !important;line-height:1.5 !important;}

  /* === DATE INPUT === */
  /* === DATE INPUT — iOS đẹp & full width === */
  .date-inp{font-size:16px;padding:11px 14px;min-height:42px;width:100%;
    text-align:center;letter-spacing:0.3px;}
  /* Ép iOS không zoom + không có khoảng trống thừa */
  input[type="date"].date-inp{appearance:none;-webkit-appearance:none;
    background-image:none;text-align:left;padding-right:14px;}
  input[type="date"].date-inp::-webkit-date-and-time-value{text-align:left;}

  /* === TOAST === */
  .toast-wrap{bottom:100px;right:10px;left:10px;}
  .toast{font-size:12px;padding:9px 12px;}

  /* === EMPTY === */
  .empty{padding:30px 16px;}
  .empty .e-ico{font-size:32px;}

  /* === FLEX-GAP === */
  .flex-gap{gap:6px;}
  .flex-gap span{font-size:11px;}

  /* === HIDE certain elements on mobile === */
  .hide-mobile{display:none !important;}
  .hide-on-mobile{display:none !important;}
  .show-only-mobile{display:block !important;}

  /* === FIX: Ngăn scroll ngang toàn cục === */
  body, .main, .page{max-width:100vw;overflow-x:hidden;}
  .card{max-width:100%;overflow-x:hidden;}
  .ph,.ph-left,.ph-right{max-width:100%;}
  .stats-row{max-width:100%;}
}

@media(max-width:480px){
  /* Phones siêu nhỏ */
  .stats-row{grid-template-columns:repeat(2,1fr);gap:6px;}
  .main{padding:12px 8px 100px;}
  .card{padding:10px;}
  .ph-left h2{font-size:18px;}
  .ab-opt{padding:10px 6px;}
  .ab-opt .ab-letter{font-size:22px;}
  .ab-opt .ab-name{font-size:10px;}
  .ab-opt .ab-desc{font-size:9px;}
  .num-chip{min-width:42px;height:28px;font-size:14px;padding:0 7px;}
  .num-chip.db{min-width:64px;height:38px;font-size:20px;}
  .rate-grid{grid-template-columns:1fr;}
  /* Vẫn giữ 2 cột Thu/Trả trên màn nhỏ */
  .rates-2col{grid-template-columns:1fr 1fr;gap:6px;}
  .stat-card .s-val{font-size:17px;}
  .stat-card{padding:10px 8px;}
  .ph-right .btn{flex:1 1 100%;}
}

/* iOS safe area support — PRO MAX có notch dưới */
@supports(padding:max(0px)){
  .mobile-bottom-nav{padding-bottom:max(8px, env(safe-area-inset-bottom));}
  .main{padding-bottom:max(90px, calc(70px + env(safe-area-inset-bottom)));}
}

/* Trên desktop ẩn page-more (không cần) */
@media(min-width:901px){
  #page-more{display:none !important;}
}