/* ==========================================================================
   Quản trị TMĐT Minh Trung — giao diện Preact, thiết kế theo mt-tudong
   ========================================================================== */
:root{
  --bg:#f4f6f9; --card:#fff; --line:#e4e8ee; --line2:#eef1f5;
  --ink:#101828; --ink2:#344054; --mut:#667085;
  --brand:#0f5ea8; --brand2:#1a7ed1; --brand-s:#eaf3fb;
  --ok:#0a8043; --ok-s:#e7f6ed; --warn:#b45309; --warn-s:#fef4e6;
  --bad:#c0392b; --bad-s:#fdeceb; --gold:#f5a800; --red:#c8102e;
  --r:12px; --r2:9px;
  --sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --sh2:0 4px 14px rgba(16,24,40,.09);
  --hh:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font:14.5px/1.55 "Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* ảnh chìm sản phẩm Minh Trung, phủ nền đục 93% */
html,body{background-image:linear-gradient(rgba(244,246,249,.93),rgba(244,246,249,.93)),url("/img/collage-bg.webp");
  background-repeat:no-repeat,repeat;background-size:cover,300px 300px;background-attachment:fixed,fixed}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
p{margin:0 0 10px}
.ic{flex:none;vertical-align:-.18em}
.sp{flex:1}
.sm{font-size:13px}.mut{color:var(--mut)}.b{font-weight:650}.nw{white-space:nowrap}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.r{text-align:right}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- khởi động ---------- */
.boot{min-height:100dvh;display:grid;place-items:center;gap:14px;color:var(--mut)}
.boot i{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:spin .8s linear infinite;display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- đăng nhập ---------- */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(145deg,#0b4d8c,#0f5ea8 45%,#2f96de)}
.login .box{background:#fff;border-radius:18px;padding:30px 26px 24px;width:100%;max-width:392px;
  box-shadow:0 24px 64px rgba(0,0,0,.3);position:relative;overflow:hidden}
.login .box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--gold) 55%,var(--brand))}
.login .logo{display:block;width:116px;height:auto;margin:2px auto 12px}
.login h1{font-size:19.5px;text-align:center}
.login .sub{text-align:center;color:var(--mut);font-size:13px;margin:4px 0 18px}
.login .lerr{color:var(--bad);font-size:13.5px;margin-top:11px;text-align:center;font-weight:550}
.login .foot{margin-top:18px;text-align:center;font-size:11.5px;color:#98a2b3;line-height:1.6}
.login input{width:100%;margin-bottom:12px}

/* ---------- khung ---------- */
header{position:sticky;top:0;z-index:40;background:var(--brand);color:#fff;display:flex;
  align-items:center;gap:10px;padding:8px 14px;flex-wrap:nowrap;height:var(--hh);
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 2px 10px rgba(16,24,40,.14)}
header .bg{display:none;background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:8px;padding:7px}
header .brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
header .brand img{width:33px;height:auto;flex:none;background:#fff;border-radius:7px;padding:2px 3px}
header .t{font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
header .t small{display:block;font-size:10.5px;font-weight:400;opacity:.82;letter-spacing:.2px}
header .hb{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:8px;padding:7px 10px;
  display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;flex:none}
header .hb:hover{background:rgba(255,255,255,.28)}
.wrap{display:flex;align-items:flex-start}
nav{width:212px;flex:none;padding:12px 10px;position:sticky;top:var(--hh);height:calc(100dvh - var(--hh));overflow:auto}
nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--ink2);
  font-weight:520;font-size:14px;margin-bottom:1px;cursor:pointer}
nav a:hover{background:#e8edf3}
nav a.on{background:var(--brand);color:#fff;font-weight:600;box-shadow:var(--sh)}
main{flex:1;min-width:0;padding:16px 20px 64px;max-width:1500px}
.backdrop{position:fixed;inset:0;top:var(--hh);background:rgba(16,24,40,.4);z-index:45;display:none}
.backdrop.on{display:block}

/* ---------- khối thương hiệu ---------- */
.brandbar{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:11px 18px;margin-bottom:14px;position:relative;overflow:hidden}
.brandbar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--gold) 55%,var(--brand))}
.brandbar .bl{width:54px;height:auto;flex:none}
.brandbar .bt{flex:1;min-width:0}
.brandbar .bt b{display:block;font-size:13.5px;letter-spacing:.2px}
.brandbar .bt i{display:block;font-size:12.5px;color:var(--red);font-style:italic;margin-top:1px}
.brandbar .bt span{display:block;font-size:12.5px;color:var(--mut);margin-top:3px}
.ctbox{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;max-width:120px;
  border:0;background:transparent;padding:0;cursor:zoom-in}
.ctbox img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;
  border:2.5px solid var(--gold);outline:3px solid rgba(245,168,0,.28);outline-offset:2px;
  box-shadow:0 6px 16px rgba(200,16,46,.16);background:#dceafd}
.ctbox .ct-name{font-size:10.5px;font-style:italic;text-align:center;color:var(--mut);line-height:1.35}
.ctbox .ct-name b{display:block;font-style:normal;font-size:12px;color:var(--brand);font-weight:700;white-space:nowrap}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:300;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px}

/* ---------- tiêu đề trang ---------- */
.ptitle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.ptitle h1{font-size:20px}
.ptitle>span{font-size:13px;color:var(--mut)}

/* ---------- thẻ ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  margin-bottom:14px;overflow:hidden}
.card>.hd{padding:12px 16px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card>.hd h2{font-size:15px;flex:1;display:flex;align-items:center;gap:8px}
.card>.hd .hd-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card>.bd{padding:14px 16px}
.card>.bd>:last-child{margin-bottom:0}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;
  background:var(--brand);color:#fff;border-radius:var(--r2);padding:9px 14px;font-size:14px;font-weight:600;
  line-height:1.2;transition:background .13s,border-color .13s;white-space:nowrap}
.btn:hover{background:#0d5292}
.btn.ghost{background:#fff;color:var(--ink2);border-color:var(--line)}
.btn.ghost:hover{background:#f6f8fa;border-color:#d5dbe4}
.btn.t-ok{background:var(--ok)}.btn.t-ok:hover{background:#096b39}
.btn.t-danger{background:var(--bad)}.btn.t-danger:hover{background:#a53024}
.btn.ghost.t-danger{background:#fff;color:var(--bad);border-color:#f2c9c4}
.btn.sm{padding:6px 9px;font-size:13px;border-radius:7px;gap:5px}
.btn.lg{padding:12px 20px;font-size:15.5px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- biểu mẫu ---------- */
.field{margin-bottom:12px;min-width:0}
.field>label{display:block;font-size:12.5px;color:var(--mut);margin:0 0 5px;font-weight:600}
.field .hint{font-size:12.5px;color:var(--mut);margin-top:4px}
input,select,textarea{padding:9px 11px;border:1px solid #d5dbe4;border-radius:var(--r2);
  background:#fff;transition:border-color .13s,box-shadow .13s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(26,126,209,.14)}
input:disabled,select:disabled{background:#f6f8fa;color:var(--mut)}
input.tiny{padding:5px 8px;font-size:13px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.row:last-child{margin-bottom:0}

/* ---------- bảng ---------- */
.tbl{overflow:auto;max-height:calc(100dvh - 250px)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:#f8fafc;
  position:sticky;top:0;z-index:1;font-weight:700}
td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f7f9fc}
th.num{text-align:right}

/* ---------- nhãn ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2.5px 9px;border-radius:6px;font-size:12px;
  font-weight:650;white-space:nowrap;border:1px solid transparent}
.t-khop{background:var(--ok-s);color:var(--ok);border-color:#c3e9d3}
.t-cho_tt{background:var(--warn-s);color:var(--warn);border-color:#f7dcb4}
.t-dang_giao{background:var(--brand-s);color:var(--brand);border-color:#cfe4f6}
.t-huy{background:#f2f4f7;color:#475467;border-color:#e4e7ec}
.t-hoan,.t-hoan_tien,.t-lech_phi{background:var(--bad-s);color:var(--bad);border-color:#f6cec9}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.d-green{background:var(--ok)}.d-yellow{background:var(--gold)}.d-red{background:var(--bad)}

/* ---------- ô số liệu ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--sh);
  cursor:pointer;transition:box-shadow .13s,transform .13s;position:relative}
.kpi:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.kpi .ik{position:absolute;top:12px;right:13px;color:#c4cdd8}
.kpi .n{font-size:23px;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-top:3px}
.kpi .l{font-size:11.5px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.kpi .s{font-size:12.5px;color:var(--mut);margin-top:3px}
.kpi.k-ok .n{color:var(--ok)}.kpi.k-warn .n{color:var(--warn)}.kpi.k-bad .n{color:var(--bad)}

/* ---------- việc cần xử lý ---------- */
.todo{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;background:#fff;cursor:pointer;transition:border-color .13s}
.todo:hover{border-color:#c9d2dd;background:#fbfcfd}
.todo .ti{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none}
.todo .ti.b{background:var(--bad-s);color:var(--bad)}
.todo .ti.w{background:var(--warn-s);color:var(--warn)}
.todo .ti.i{background:var(--brand-s);color:var(--brand)}
.todo .tx{flex:1;min-width:0}
.todo .tx b{display:block;font-size:13.5px}
.todo .tx span{display:block;font-size:12.5px;color:var(--mut)}
.todo .n{font-weight:700;font-size:15.5px;white-space:nowrap}
.todo .n.bad{color:var(--bad)}.todo .n.warn{color:var(--warn)}
.alldone{display:flex;align-items:center;gap:10px;padding:14px;border-radius:10px;background:var(--ok-s);
  color:var(--ok);font-weight:600;border:1px solid #c3e9d3}

/* ---------- biểu đồ ---------- */
.spark{display:flex;align-items:flex-end;gap:3px;height:70px;margin-top:8px}
.spark i{flex:1;background:linear-gradient(180deg,#4aa8e8,var(--brand));border-radius:3px 3px 0 0;min-height:3px}
.spark i.today{background:linear-gradient(180deg,var(--gold),#d98f00)}
.spark-lb{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-top:4px}
.bars{height:120px;display:flex;align-items:flex-end;gap:2px}
.bars i{flex:1;background:linear-gradient(180deg,#4aa8e8,var(--brand));border-radius:2px 2px 0 0;min-height:2px}

/* ---------- thông báo ---------- */
.msg{padding:10px 14px;border-radius:9px;margin:10px 0;font-weight:600;font-size:13.5px;border:1px solid transparent}
.m-ok{background:var(--ok-s);color:var(--ok);border-color:#c3e9d3}
.m-err{background:var(--bad-s);color:var(--bad);border-color:#f6cec9}
.m-info{background:var(--brand-s);color:#0b4a84;border-color:#cfe4f6}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#101828;color:#fff;
  padding:11px 18px;border-radius:11px;z-index:200;box-shadow:0 12px 32px rgba(0,0,0,.32);font-size:14px;
  max-width:92vw;display:flex;align-items:center;gap:9px;animation:pop .16s}
.toast.err{background:var(--bad)}.toast.ok{background:var(--ok)}
@keyframes pop{from{opacity:0;transform:translate(-50%,6px)}}

/* ---------- kéo thả ---------- */
.drop{border:2px dashed #cbd5e1;border-radius:12px;padding:26px 14px;text-align:center;color:var(--mut);
  cursor:pointer;transition:.15s;background:#f8fafc;display:flex;flex-direction:column;align-items:center;gap:8px}
.drop:hover,.drop.over{border-color:var(--brand2);color:var(--brand);background:var(--brand-s)}
.drop b{font-size:14px}

/* ---------- khung xương ---------- */
.skel{border-radius:12px;background:linear-gradient(100deg,#eceff3 40%,#f6f8fa 50%,#eceff3 60%);
  background-size:200% 100%;animation:sk 1.1s infinite linear;margin-bottom:12px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- linh tinh ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fee-note{font-size:12px;color:var(--mut);margin-top:6px;line-height:1.6}
.hl-y{background:#fff7e0}
.steps{margin:0 0 4px;padding-left:20px;font-size:13.5px;line-height:2;color:var(--ink2)}

/* ---------- màn hình nhỏ ---------- */
@media (max-width:900px){
  header .bg{display:grid;place-items:center}
  nav{position:fixed;left:0;top:var(--hh);bottom:0;background:#fff;z-index:50;transform:translateX(-100%);
    transition:transform .2s;box-shadow:6px 0 26px rgba(16,24,40,.18);height:auto}
  nav.open{transform:none}
  main{padding:13px 12px 70px}
  .tbl{max-height:none}
  th{position:static}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:700px){
  header{gap:7px;padding:7px 10px}
  header .t small{display:none}
  header .brand img{width:28px}
  header .t{font-size:14px}
  header .hb .lbl{display:none}
  .kpis{grid-template-columns:1fr 1fr;gap:9px}
  .kpi{padding:11px 12px}.kpi .n{font-size:18.5px}
  .brandbar{gap:11px;padding:10px 12px}
  .brandbar .bl{width:42px}
  .brandbar .bt b{font-size:12px;line-height:1.35}
  .brandbar .bt span{display:none}
  .ctbox{max-width:70px}
  .ctbox img{width:48px;height:48px}
  .ctbox .ct-name{font-size:9.5px}
  .ctbox .ct-name b{font-size:10.5px}
  td,th{padding:7px 8px;font-size:12.5px}
}

/* ==================== Công nợ ==================== */
.seg{display:inline-flex;border:1px solid var(--bd,#d8dee7);border-radius:8px;overflow:hidden;background:#fff}
.seg button{border:0;background:#fff;padding:7px 13px;font:inherit;font-size:13px;color:#516070;cursor:pointer;border-right:1px solid var(--bd,#e3e8ef)}
.seg button:last-child{border-right:0}
.seg button.on{background:#0f5ea8;color:#fff;font-weight:600}
.seg button:hover:not(.on){background:#f1f5fa}
.fbar{gap:10px;flex-wrap:wrap;margin-bottom:12px}
.kvline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sumrow td{background:#f6f9fc;border-top:2px solid #dbe3ec}
.agingw{display:flex;flex-direction:column;gap:9px}
.agrow{display:grid;grid-template-columns:150px 1fr 130px 80px;align-items:center;gap:12px}
.agb{background:#eef2f7;border-radius:6px;height:16px;overflow:hidden}
.agb i{display:block;height:100%;border-radius:6px}
.ag-ok{background:#1f9d55}.ag-warn{background:#f5a800}.ag-bad{background:#c8102e}
.agv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.agc{text-align:right;font-size:12px}
@media(max-width:700px){.agrow{grid-template-columns:1fr 90px;grid-template-areas:'l l' 'b b' 'v c'}
  .agl{grid-area:l}.agb{grid-area:b}.agv{grid-area:v;text-align:left}.agc{grid-area:c}}
.mdl-bd{position:fixed;inset:0;background:rgba(16,26,40,.55);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:16px}
.mdl{background:#fff;border-radius:12px;width:min(620px,100%);max-height:90vh;overflow:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.mdl-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e6ebf2}
.mdl-h h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px;color:#0f5ea8}
.mdl-x{border:0;background:0;cursor:pointer;color:#7b8794;padding:4px;line-height:0}
.mdl-b{padding:16px 18px}
.mdl-f{display:flex;justify-content:flex-end;gap:9px;padding:13px 18px;border-top:1px solid #e6ebf2;background:#fafbfd}
.mdl-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;
  background:#f6f9fc;border:1px solid #e6ebf2;border-radius:9px;padding:12px;margin-bottom:14px}
.mdl-sum span{display:block;font-size:12px;color:#7b8794;margin-bottom:2px}
.mdl-sum b{font-size:14px}
.mdl .grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:560px){.mdl .grid2{grid-template-columns:1fr}}
.mdl .field{display:flex;flex-direction:column;gap:4px}
.mdl .field span{font-size:12px;color:#63707e}
.mdl .field input,.mdl .field select{width:100%}
small.sm,p.sm{font-size:12px}
.tagx{border:0;background:0;cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 5px;color:inherit;opacity:.6}
.tagx:hover{opacity:1}