/* ============ BỘ KHUNG APP QUẢN TRỊ NỘI BỘ ============ */
/* Bảng màu hướng "đáng tin cậy": xanh navy sâu làm chủ đạo — màu ngân hàng
   và kiểm toán vẫn dùng vì nó nói lên sự vững vàng, không phô trương.
   Chữ đậm hơn, viền rõ hơn, bóng sâu hơn để số liệu nổi khối và dễ đọc.
   Xanh lá đổi sang xanh ngọc trầm, đỏ sang đỏ rượu — vẫn cảnh báo được
   nhưng không chói như đèn báo động. */
:root{
  --bg:#eef1f8; --panel:#fff; --ink:#0b1220; --ink2:#465575; --line:#d3dbe9;
  --brand:#123a8c; --brand2:#e6ecfa; --brand-s:#1c50bd;
  --ok:#0a7351; --ok2:#e2f2eb; --warn:#96650a; --warn2:#fbf1dc;
  --bad:#a52834; --bad2:#fae9ea; --purple:#5a3fb0;
  --shadow:0 1px 2px rgba(11,18,32,.10),0 10px 28px rgba(11,18,32,.10); --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;
  font-family:"Segoe UI",system-ui,-apple-system,"Noto Sans",Roboto,Arial,sans-serif}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
a{color:var(--brand)}

/* ---------- Màn hình đăng nhập ---------- */
#manDangNhap{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#060f24,#123a8c 55%,#1c50bd);padding:20px}
.login-box{background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.35);width:100%;max-width:400px;padding:28px}
.login-box h2{font-size:20px;margin-bottom:4px}
.login-box p.s{color:var(--ink2);font-size:13px;margin:0 0 18px}
.login-err{background:var(--bad2);color:#7d1c26;padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:12px;display:none}

/* ---------- Header ---------- */
.topbar{background:linear-gradient(100deg,#08132c,#123a8c 60%,#1c50bd);color:#fff;padding:13px 20px 0}
.topbar-in{max-width:1560px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{font-size:18px;font-weight:800;letter-spacing:-.02em}
.logo small{display:block;font-size:11px;font-weight:500;opacity:.82;letter-spacing:0}
.topbar .spacer{flex:1}
.hbtn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  padding:7px 12px;border-radius:9px;font-size:12.5px;cursor:pointer;font-weight:600;font-family:inherit}
.hbtn:hover{background:rgba(255,255,255,.26)}
.who{font-size:12.5px;background:rgba(255,255,255,.16);padding:6px 11px;border-radius:99px;font-weight:600}

/* ---------- Tabs ---------- */
.tabbar{max-width:1560px;margin:9px auto 0;display:flex;gap:4px;overflow-x:auto}
.tabbar::-webkit-scrollbar{height:0}
.tab{white-space:nowrap;padding:10px 15px;border-radius:10px 10px 0 0;cursor:pointer;color:rgba(255,255,255,.82);
  font-weight:600;font-size:13.5px;border:0;background:transparent;font-family:inherit}
.tab:hover{background:rgba(255,255,255,.12);color:#fff}
.tab.active{background:var(--bg);color:var(--ink)}

/* ---------- Layout ---------- */
.wrap{max-width:1560px;margin:0 auto;padding:18px 20px 70px}
.page{display:none}.page.active{display:block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px}
.card-h{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h3{font-size:15px}
.card-h .sub{color:var(--ink2);font-size:12px}
.card-b{padding:16px}.card-b.tight{padding:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.g23{grid-template-columns:2fr 3fr}.g32{grid-template-columns:3fr 2fr}
@media(max-width:1200px){.g5,.g4{grid-template-columns:repeat(2,1fr)}.g3,.g23,.g32{grid-template-columns:1fr}}
@media(max-width:760px){.g5,.g4,.g3,.g2{grid-template-columns:1fr}}

/* ---------- Sub tabs ---------- */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.subtab{padding:8px 13px;border-radius:99px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-weight:600;font-size:13px;color:var(--ink2);font-family:inherit}
.subtab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.subpage{display:none}.subpage.active{display:block}

/* ---------- KPI ---------- */
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.kpi .lb{color:var(--ink2);font-size:12px;font-weight:600}
.kpi .vl{font-size:22px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.kpi .ft{font-size:11.5px;color:var(--ink2);margin-top:5px}
.kpi.ok .vl{color:var(--ok)}.kpi.bad .vl{color:var(--bad)}.kpi.warn .vl{color:var(--warn)}
.kpi.brand{background:linear-gradient(125deg,#0d2c6b,#1c50bd);border-color:transparent;color:#fff}
.kpi.brand .lb,.kpi.brand .ft{color:rgba(255,255,255,.88)}

/* ---------- Table ---------- */
.tbl-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#e7ecf6;text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--ink2);white-space:nowrap;position:sticky;top:0;z-index:1}
td{padding:9px 11px;border-bottom:1px solid #e6ebf4;vertical-align:top}
tbody tr:hover{background:#f2f6fd}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tfoot td{font-weight:700;background:#e7ecf6;border-top:2px solid var(--line)}
.empty{padding:28px;text-align:center;color:var(--ink2)}
.rowact{display:flex;gap:5px;justify-content:flex-end}
.mini{background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px 8px;cursor:pointer;font-size:12px;color:var(--ink2);font-family:inherit}
.mini:hover{border-color:var(--brand);color:var(--brand)}
.mini.del:hover{border-color:var(--bad);color:var(--bad)}
tr.pl-total td{background:#e3e9f5;font-weight:700}
tr.pl-sub td{background:#f2f5fb;font-weight:600}

/* ---------- Form ---------- */
label.f{display:block;margin-bottom:10px}
label.f>span{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:4px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand2)}
textarea{min-height:70px;resize:vertical}
input[type=checkbox]{width:auto;margin-right:6px;vertical-align:-2px}
.hint{font-size:11.5px;color:var(--ink2);margin-top:3px}
.btn{background:var(--brand);color:#fff;border:0;padding:9px 16px;border-radius:9px;font-weight:700;cursor:pointer;font-size:13.5px;font-family:inherit}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);filter:none}
.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.full{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1;min-width:130px}
.row>.fit{flex:0 0 auto;min-width:0}

/* ---------- Badge ---------- */
.bg{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap}
.bg.b{background:var(--brand2);color:var(--brand)}.bg.g{background:var(--ok2);color:var(--ok)}
.bg.y{background:var(--warn2);color:var(--warn)}.bg.r{background:var(--bad2);color:var(--bad)}
.bg.n{background:#dfe5f0;color:var(--ink2)}.bg.p{background:#e9e3f8;color:var(--purple)}

/* ---------- Bar / progress ---------- */
.pbar{height:8px;background:#dde4f0;border-radius:99px;overflow:hidden}
.pbar>i{display:block;height:100%;background:var(--brand);border-radius:99px}
.pbar.g>i{background:var(--ok)}.pbar.y>i{background:var(--warn)}.pbar.r>i{background:var(--bad)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.chart{display:flex;align-items:flex-end;gap:12px;height:215px;padding:10px 4px 0}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.chart .bars{display:flex;gap:3px;align-items:flex-end;width:100%;flex:1 1 auto;min-height:0;justify-content:center}
.chart .bar{width:26px;border-radius:5px 5px 0 0;min-height:2px}
.chart .lb{font-size:11px;color:var(--ink2);font-weight:600;text-align:center;line-height:1.35}
/* % đạt so với mục tiêu, đặt ngay trên đầu cột */
.chart .dat{font-size:12px;font-weight:700;white-space:nowrap}

/* ---------- Modal ---------- */
.mask{position:fixed;inset:0;background:rgba(16,22,38,.5);display:none;align-items:flex-start;justify-content:center;z-index:90;padding:26px 16px;overflow:auto}
.mask.on{display:flex}
.modal{background:#fff;border-radius:14px;width:100%;max-width:720px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.wide{max-width:980px}
.modal-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal-h h3{font-size:16px;flex:1}
.modal-b{padding:18px}
.modal-f{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:#fafbfe;border-radius:0 0 14px 14px}
.x{background:0;border:0;font-size:22px;cursor:pointer;color:var(--ink2);line-height:1;padding:0 4px}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#141c2e;color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.3);animation:up .25s ease}
.toast.ok{background:var(--ok)}.toast.bad{background:var(--bad)}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Misc ---------- */
.note{background:var(--brand2);border-left:3px solid var(--brand);padding:10px 13px;border-radius:0 9px 9px 0;font-size:12.5px;color:#25326b;margin-bottom:14px}
.note.y{background:var(--warn2);border-color:var(--warn);color:#6b4d00}
.note.r{background:var(--bad2);border-color:var(--bad);color:#7d2020}
.note.g{background:var(--ok2);border-color:var(--ok);color:#0a5c40}
.pos{color:var(--ok);font-weight:700}.neg{color:var(--bad);font-weight:700}
.muted{color:var(--ink2)}.b{font-weight:700}.sm{font-size:12px}
.chk{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-bottom:1px solid #e6ebf4}
.chk:hover{background:#f2f6fd}
.chk.done .ct{opacity:.55;text-decoration:line-through}
hr.sep{border:0;border-top:1px solid var(--line);margin:16px 0}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filters label.f{margin:0;min-width:120px}
/* Bộ chọn thời gian dùng chung — nằm gọn trên một hàng ở đầu mỗi tab */
.chon-tg{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.chon-tg label.f{margin:0;min-width:118px}
.chon-tg label.f select,.chon-tg label.f input{min-width:118px}
@media(max-width:760px){.chon-tg label.f{min-width:calc(50% - 4px)}}
#loading{position:fixed;top:0;left:0;height:3px;background:var(--brand);width:0;z-index:500;transition:width .25s}

/* Ô tick bàn giao ngay trong bảng đơn hàng — bấm được cả vào chữ */
.giao-o{display:flex;align-items:flex-start;gap:6px;font-size:12px;line-height:1.35;cursor:pointer;margin-bottom:3px}
.giao-o input{margin-top:2px;flex:0 0 auto}
.giao-o span{color:var(--ink2)}
.giao-o input:checked+span{color:var(--ok);font-weight:600}
.giao-o i{font-style:normal}

/* ---------- Biểu đồ thanh ngang (doanh thu theo sản phẩm) ----------
   Tên sản phẩm tiếng Việt dài nên để hẳn một cột riêng bên trái,
   không nhồi vào trong thanh. */
.thanh-ds{display:flex;flex-direction:column;gap:10px}
.thanh{display:grid;grid-template-columns:minmax(150px,240px) 1fr 130px;gap:12px;align-items:center}
.thanh-ten{min-width:0}
.thanh-ten .b{font-size:13px;line-height:1.3;word-break:break-word}
.thanh-vach{position:relative;background:#dde4f0;border-radius:7px;height:30px;display:flex;align-items:center}
.thanh-chay{height:100%;border-radius:7px;min-width:4px;display:flex;align-items:center;
  justify-content:flex-end;padding-right:9px;transition:width .3s}
.thanh-chay span{color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.thanh-ngoai{position:absolute;left:calc(100% + 0px);margin-left:9px;font-size:12px;font-weight:700;
  color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.thanh-so{text-align:right;font-variant-numeric:tabular-nums}
.thanh-so .b{font-size:15px}
@media(max-width:760px){
  .thanh{grid-template-columns:1fr;gap:4px}
  .thanh-vach{height:24px}
  .thanh-so{text-align:left;display:flex;gap:10px;align-items:baseline}
}
.rowact{flex-wrap:wrap}

/* ---------- Thanh chọn cơ sở (Trung tâm / Mầm non / Gộp) ---------- */
.chon-cs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tab-cs{background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 16px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink2)}
.tab-cs:hover{border-color:var(--brand);color:var(--brand)}
.tab-cs.active{background:var(--brand);border-color:var(--brand);color:#fff}
/* Ô ngày gõ Ngày/Tháng/Năm + nút 📅 (26/10/2026) */
.o-ngay{position:relative;display:block}
.o-ngay>input[type=text]{padding-right:34px}
.o-ngay>input.sai{border-color:var(--bad);background:var(--bad2)}
.o-ngay-nut{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:15px;padding:2px 5px;line-height:1}
.o-ngay-lich{position:absolute;left:0;bottom:0;width:100%!important;min-width:0!important;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
.chon-tg label.f .o-ngay>input[type=text]{min-width:140px}