/* Giao diện kiểu Corona (mẫu free của BootstrapDash), tinh chỉnh cho web mình:
   nền #000, thẻ/sidebar #191c24, viền #2c2e33, chữ phụ #6c7293,
   màu chính = hồng #ec567c, font Outfit toàn trang. */
:root{
  --bg:#000000; --panel:#191c24; --panel2:#13151c; --line:#2c2e33; --rowline:#21232b;
  --txt:#ffffff; --mut:#6c7293; --desc:#bfbfbf;
  --pink:#ec567c; --pinksoft:#f58bab; --green:#00d25b; --amber:#ffab00; --red:#fc424a; --purple:#8f5fe8;
  /* bí danh cho vài style nội tuyến còn sót trong app.js */
  --ak-muted:#a1a1aa; --ak-muted-weak:#6c7293;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:400 14px/1.55 Outfit,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
input{font:inherit}
h1,h2,h3{margin:0}

/* ---------- Đăng nhập / cài đặt ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(800px 400px at 50% -10%,rgba(236,86,124,.14),transparent 60%),#000}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:34px 30px 26px;text-align:center}
.login-logo{width:52px;height:52px;border-radius:10px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff8a3c,#ec567c)}
.login-card h1{font-size:21px;font-weight:700}
.login-card .addr{color:var(--mut);font-size:13px;margin-top:2px}
.login-card .desc{color:var(--desc);font-size:13.5px;margin:12px 0 18px}
.field{width:100%;background:#0d0e13;border:1px solid var(--line);border-radius:5px;padding:11px 12px;color:#fff;margin-bottom:12px;outline:none}
.field:focus{border-color:var(--pink)}
.field::placeholder{color:#565d75}
.login-btn{width:100%;background:var(--pink);color:#fff;border:0;border-radius:5px;padding:12px;font-weight:700;font-size:14.5px}
.login-btn:hover{filter:brightness(1.08)}
.login-btn:disabled{opacity:.55;cursor:wait}
.form-error{display:none;color:var(--red);font-size:13px;margin-top:10px}
.form-error.show{display:block}
.login-note{margin-top:12px;color:var(--mut);font-size:12.5px}

/* ---------- Khung app ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:244px;flex:0 0 244px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:30}
.logo{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}
.logo-mark{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff8a3c,#ec567c);flex:0 0 40px}
.logo b{font-size:14px;display:block;line-height:1.25;white-space:nowrap}
.logo small{color:var(--mut);font-size:12px;display:block}
.gold{margin-left:auto;font-size:10px;font-weight:700;color:var(--amber);border:1px solid rgba(255,171,0,.5);border-radius:4px;padding:1px 5px;letter-spacing:.04em}
.nav{padding:6px 12px;flex:1;overflow:auto}
.nav-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--mut);padding:12px 10px 6px}
.nav button{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:6px;color:#d7dae3;font-weight:500;font-size:13.5px;cursor:pointer;border:0;background:none;width:100%;text-align:left;margin-bottom:2px}
.nav button .ic{width:26px;height:26px;border-radius:50%;background:#0d0e13;display:flex;align-items:center;justify-content:center;flex:0 0 26px}
.nav button .ic svg{width:14px;height:14px}
.nav button:hover{background:#20232e;color:#fff}
.nav button.active{background:rgba(236,86,124,.13);color:var(--pink)}
.nav button.active .ic{background:rgba(236,86,124,.2)}
.count{margin-left:auto;background:var(--pink);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:0 7px;line-height:18px}
.logout{margin:12px;background:none;border:1px solid var(--line);color:var(--desc);border-radius:5px;padding:9px;font-weight:600}
.logout:hover{color:#fff;border-color:#3a3d46}
.scrim{display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{min-height:60px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:8px 22px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:16.5px;font-weight:600}
.topbar .sub{color:var(--mut);font-size:12px}
.topbar .spacer{flex:1}
.hamb{display:none;background:none;border:0;color:#fff;padding:6px}
.hamb svg{width:22px;height:22px;display:block}
.avatar-sprite{display:inline-block;flex:0 0 auto;border-radius:3px;background-image:url(/avatars-sprite-w2.png);background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(24,24,30,.45),0 1px 2px rgba(0,0,0,.12)}

.content{padding:22px;max-width:1240px;width:100%;margin:0 auto}
.page-head{margin:2px 0 16px}
.page-head h2{font-size:19px;font-weight:700}
.page-head p{color:var(--mut);margin:2px 0 0;font-size:13px}

/* ---------- Thẻ chung & hàng dữ liệu ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:16px}
.card.rows{padding:6px 0}
.loading,.empty{padding:34px 20px;text-align:center;color:var(--mut)}
.card.loading,.card.empty{padding:34px 20px}
.row{display:flex;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--rowline)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.t1{font-weight:600;font-size:14px}
.t2{color:var(--mut);font-size:12.5px;margin-top:1px;word-break:break-word}
.amt{font-weight:700;font-size:15px;white-space:nowrap}
.amt.plus{color:var(--green)} .amt.minus{color:var(--red)}
.when{color:var(--mut);font-size:12px;white-space:nowrap;text-align:right;margin-top:1px}
.alert-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.btn{font:inherit}
.btn-sm{background:#0d0e13;border:1px solid var(--line);color:var(--desc);border-radius:5px;padding:6px 12px;font-size:12.5px;font-weight:600;text-decoration:none;display:inline-block;white-space:nowrap}
a.btn-sm:hover,.btn-sm:hover{color:#fff;border-color:#3a3d46}

/* ---------- Nhãn trạng thái kiểu Corona ---------- */
.chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:5px;padding:2.5px 9px;white-space:nowrap}
.chip.ok{color:var(--green);background:rgba(0,210,91,.13)}
.chip.warn{color:var(--amber);background:rgba(255,171,0,.13)}
.chip.bad{color:var(--red);background:rgba(252,66,74,.13)}
.chip.dim{color:#9aa0ae;background:rgba(154,160,174,.14)}
.chip.pink{color:var(--pinksoft);background:rgba(236,86,124,.14)}

/* ---------- Tổng quan ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:6px}
.card.stat{margin-bottom:16px}
.stat .label{color:var(--mut);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.stat .value{font-size:25px;font-weight:700;margin-top:6px;line-height:1.2}
.stat .value.pink{color:var(--pink)} .stat .value.green{color:var(--green)}
.stat .value.amber{color:var(--amber)} .stat .value.red{color:var(--red)}
.stat .note{color:var(--mut);font-size:12.5px;margin-top:3px}
.sec-title{font-size:15px;font-weight:600;margin:10px 0 12px}
.info-card{padding:8px 18px}
.info-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.info-row:last-child{border-bottom:0}
.info-row .k{color:var(--mut)}
.info-row .v{font-weight:600;text-align:right;word-break:break-all}

/* ---------- Đơn nạp ---------- */
.card.order{padding:15px 18px}
.order .r1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.order .code{font-weight:800;font-size:15px;letter-spacing:.02em}
.order .time{margin-left:auto;color:var(--mut);font-size:12.5px}
.order .r2{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:10px;font-size:13.5px;color:var(--desc)}
.order .r2 b{color:#fff}
.order .r3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.order .addr{color:var(--mut);font-size:12.5px}
.order .view{margin-left:auto;color:var(--pinksoft);text-decoration:none;font-size:12.5px;font-weight:600}
.order .view:hover{text-decoration:underline}

/* ---------- Bộ lọc & tìm kiếm ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filters button{border:1px solid var(--line);background:#0d0e13;color:var(--desc);border-radius:5px;padding:6px 13px;font-size:12.5px;font-weight:600}
.filters button:hover{color:#fff}
.filters button.active{background:var(--pink);border-color:var(--pink);color:#fff}
.search{width:100%;max-width:420px;background:#0d0e13;border:1px solid var(--line);border-radius:5px;padding:10px 13px;color:#fff;outline:none;margin-bottom:14px;display:block}
.search:focus{border-color:var(--pink)}
.search::placeholder{color:#565d75}

/* ---------- Cửa sổ cộng/trừ ---------- */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.backdrop.open{display:flex}
.modal{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px}
.modal h3{font-size:16.5px;margin-bottom:10px}
.modal .who{color:var(--desc);font-size:13.5px;margin-bottom:14px}
.seg{display:flex;gap:8px;margin-bottom:12px}
.seg button{flex:1;border:1px solid var(--line);background:#0d0e13;color:var(--desc);border-radius:5px;padding:9px 0;font-weight:700}
.seg button.on-plus{background:rgba(0,210,91,.13);color:var(--green);border-color:var(--green)}
.seg button.on-minus{background:rgba(252,66,74,.15);color:var(--red);border-color:var(--red)}
.actions{display:flex;gap:8px;margin-top:4px}
.btn-ghost{background:#0d0e13;border:1px solid var(--line);color:var(--desc);border-radius:5px;padding:10px;font-weight:600}
.btn-ghost:hover{color:#fff;border-color:#3a3d46}
.actions .btn-ghost{flex:1}
.row .btn-ghost{padding:6px 12px;font-size:12.5px}
.btn-pink{flex:1;background:var(--pink);color:#fff;border:0;border-radius:5px;padding:10px;font-weight:700}
.btn-pink:hover{filter:brightness(1.08)}
.btn-pink:disabled{opacity:.55;cursor:wait}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--panel);border:1px solid var(--green);color:#eafff2;border-radius:8px;padding:11px 18px;font-weight:600;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Điện thoại ---------- */
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);transition:transform .25s}
  .sidebar.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:25;opacity:0;pointer-events:none;transition:.25s}
  .scrim.show{opacity:1;pointer-events:auto}
  .hamb{display:block}
  .topbar .sub{display:none}
  .content{padding:16px}
  .row{padding:12px 14px;flex-wrap:wrap}
  .order .time{margin-left:0}
  .order .view{margin-left:0}
}