/* Nghia Baby - bang mau lay tu logo: xanh ngoc (chinh) + hong (nhan) + vang / xanh la / xanh duong / navy (phu) */
:root{
  --teal:#2aa0b8;--teal-d:#1d7f93;--pink:#e0609e;--pink-d:#c4417f;--yellow:#f6c21c;--green:#5fb83a;--blue:#2f8fd8;--navy:#2b3990;
  --bg:#f5f9fa;--card:#fff;--card2:#f0f6f7;--fg:#1d2b30;--muted:#62767c;--line:#e1ebed;--acc:var(--teal);--acc-fg:#fff;--acc2:#e3f4f7;--pink2:#fdeaf3;
  --bad:#d13d3d;--warn:#b7791f;--good:#2f9e44;--r:14px;--r-sm:10px;--sh:0 1px 2px rgba(16,40,48,.05),0 4px 14px rgba(16,40,48,.06);
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* trang thai don (nen dac + chu trang: doc ro ca nen sang lan toi) */
  --tt-moi_chot:#2f6fdb;--tt-chot_that:#0f9488;--tt-khach_im:#c26a0a;--tt-huy:#6b7680;--tt-da_bill:#7b4ae0;--tt-len_haravan:#1385b3;--tt-dang_giao:#2f9e44;--tt-qua_han:#cf2f5a;--tt-gop:#8b98a3;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0e181c;--card:#152227;--card2:#1b2b31;--fg:#e6f0f2;--muted:#94a9af;--line:#243840;--acc2:#163c45;--pink2:#3a1a2a;--sh:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
    --tt-moi_chot:#4a86f0;--tt-chot_that:#17a99c;--tt-khach_im:#d9822a;--tt-huy:#7d8a94;--tt-da_bill:#9068ef;--tt-len_haravan:#2a9fcf;--tt-dang_giao:#3fb457;--tt-qua_han:#e14a72;--tt-gop:#6f7d88;--bad:#f06a6a;--warn:#e0a23a;--good:#4cc463;color-scheme:dark}
}
*{box-sizing:border-box}html,body{margin:0}
body{font:15px/1.5 var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
a{color:var(--teal-d)}@media (prefers-color-scheme: dark){a{color:#5cc6dc}}
.hidden{display:none!important}.muted{color:var(--muted);font-size:13px}.err{color:var(--bad);min-height:1em;font-size:14px}.small{font-size:12.5px;margin:2px 0 8px}
input,select,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--fg)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--acc2);border-color:var(--acc)}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 12px;font-weight:500}label input,label select,label textarea{margin-top:5px}
.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--card);padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--fg);display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn:hover{border-color:var(--acc)}.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.btn.primary:hover{background:var(--teal-d)}
.btn:disabled{opacity:.5;cursor:default}.btn.ghost{background:transparent}.btn.sm{padding:5px 12px;font-size:13px}.btn.block{width:100%}.btn.lg{padding:13px 18px;font-size:16px}.btn.on{background:var(--acc2);border-color:var(--acc);color:var(--teal-d)}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.ic.lg{width:34px;height:34px;stroke-width:1.6}
.icon-btn{border:0;background:transparent;color:var(--muted);width:36px;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer}.icon-btn:hover{background:var(--acc2);color:var(--teal-d)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-d);margin-bottom:2px}.eyebrow.light{color:#ffe1ef}
@media (prefers-color-scheme: dark){.eyebrow{color:#f08cbc}}

/* ---- dang nhap ---- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.login-side{position:relative;overflow:hidden}.login-side img{width:100%;height:100%;object-fit:cover;display:block}
.login-side::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,127,147,.05) 40%,rgba(20,60,72,.75))}
.login-side-txt{position:absolute;left:32px;right:32px;bottom:32px;color:#fff;z-index:1;display:grid;gap:4px}.login-side-txt b{font-size:clamp(22px,2.6vw,32px);line-height:1.2}.login-side-txt span{opacity:.9}
.login-main{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px 18px;gap:18px}
.login-card{background:var(--card);width:min(100%,400px);padding:28px 26px;border-radius:20px;border:1px solid var(--line);box-shadow:var(--sh)}
.login-card h1{font-size:22px;margin:4px 0 2px}.login-card .muted{margin:0 0 18px}
.login-logo{display:block;width:150px;height:150px;object-fit:contain;margin:-6px auto 4px;border-radius:16px;background:#fff}
@media (max-width:820px){.login{grid-template-columns:1fr}.login-side{height:190px}.login-side-txt{left:18px;bottom:16px}.login-side-txt b{font-size:20px}.login-main{justify-content:flex-start;padding-top:0}.login-card{margin-top:-46px;position:relative;z-index:2}}

/* ---- thanh tren ---- */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:8px clamp(12px,3vw,28px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);flex:none}.brand .mark{width:38px;height:38px;border-radius:11px;display:block}
.bname{display:grid;line-height:1.15}.bname b{font-size:15px;color:var(--pink-d)}.bname small{font-size:12px;color:var(--muted);font-weight:600}
@media (prefers-color-scheme: dark){.bname b{color:#f08cbc}}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none;justify-content:center}.nav::-webkit-scrollbar{display:none}
.nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;font-weight:600;font-size:14px;color:var(--muted);text-decoration:none}
.nav a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{background:var(--card2);color:var(--fg)}.nav a.active{background:var(--acc2);color:var(--teal-d)}
@media (prefers-color-scheme: dark){.nav a.active{color:#7fd6e8}}
.who{display:flex;align-items:center;gap:2px;font-size:13px;color:var(--muted);flex:none}.who span{margin-right:6px;font-weight:600}
.banner{background:#fff3c4;color:#6b4b00;text-align:center;font-weight:700;font-size:12px;padding:4px;letter-spacing:.04em}
main{max-width:1180px;margin:0 auto;padding:clamp(14px,3vw,28px) clamp(12px,3vw,28px) 24px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
h1{font-size:clamp(22px,3vw,30px);margin:0;line-height:1.2;letter-spacing:-.01em}h2{font-size:16px;margin:0 0 10px}h3{font-size:13px;margin:14px 0 8px;color:var(--muted)}
h2.sub{font-size:14px;margin:18px 0 8px;color:var(--muted)}
.count-pill{background:var(--acc2);color:var(--teal-d);font-weight:700;border-radius:999px;padding:4px 12px;font-size:13px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.box-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}.box-head h2{margin:0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;max-width:90vw}.toast.show{opacity:1}
.empty{padding:34px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}

/* ---- chan trang: thong tin shop ---- */
.shopinfo{max-width:1180px;margin:0 auto;padding:18px clamp(12px,3vw,28px) 28px;color:var(--muted);font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;text-align:center}
.shopinfo span{display:inline-flex;align-items:center;gap:6px}.shopinfo svg{width:14px;height:14px;fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.shopinfo b{color:var(--fg);font-weight:600}
.login .shopinfo{padding:0;max-width:440px}

/* ---- trang chu ---- */
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:clamp(170px,26vw,250px);margin-bottom:18px;box-shadow:var(--sh);background:var(--teal)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,74,88,.88) 0%,rgba(29,127,147,.62) 45%,rgba(224,96,158,.12) 100%)}
.hero-txt{position:relative;z-index:1;color:#fff;padding:clamp(18px,4vw,34px);max-width:560px}.hero-txt h1{color:#fff;font-size:clamp(24px,3.6vw,36px)}.hero-txt p{margin:6px 0 0;opacity:.95;font-size:15px}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:14px;margin-bottom:18px}
.app{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px 16px;background:var(--card);border:1px solid var(--line);border-radius:18px;text-decoration:none;color:var(--fg);box-shadow:var(--sh);transition:transform .15s,box-shadow .15s,border-color .15s;cursor:pointer;min-height:170px}
.app:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 10px 26px rgba(16,40,48,.12)}
.app .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--c);color:#fff;margin-bottom:4px}
.app .ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app b{font-size:16px;line-height:1.3}.app p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.app .nhac{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:600;color:var(--c2,var(--fg));display:flex;align-items:center;gap:6px}
.app .nhac i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.app .nhac.warn{color:var(--bad)}.app .nhac.warn i{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 25%,transparent)}
.c-teal{--c:var(--teal)}.c-pink{--c:var(--pink)}.c-yellow{--c:#e3a90b}.c-green{--c:var(--green)}.c-blue{--c:var(--blue)}.c-navy{--c:var(--navy)}
@media (prefers-color-scheme: dark){.c-navy{--c:#5566c9}}
.sp-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.sp{display:grid;gap:4px;font-size:12.5px}.sp img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--card2);border:1px solid var(--line)}
.sp b{font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sp span{color:var(--muted)}.sp em{font-style:normal;color:var(--pink-d);font-weight:700}

/* ---- chon ngay + loc ---- */
.datebar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:2px 0 12px}
.dnav{display:flex;gap:4px;align-items:center}.dnav input{height:36px;padding:0 8px;font-size:14px;width:auto}.dnav .btn{min-width:36px;height:36px;font-size:19px;line-height:1;padding:0}
.dquick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.dquick button{white-space:nowrap;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.dquick button.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.drange{display:flex;gap:8px}.drange label{display:flex;gap:4px;align-items:center;font-size:13px;margin:0}.drange input{height:34px;margin:0;width:auto}
.filters{display:grid;grid-template-columns:1fr 170px 140px;gap:8px;margin-bottom:12px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;margin-bottom:4px;scrollbar-width:thin}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.chip b{font-weight:700;color:var(--muted)}.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--d,var(--muted))}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}.chip.on b{color:inherit;opacity:.8}
.chip.hot{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));color:var(--bad)}.chip.hot.on{background:var(--bad);border-color:var(--bad);color:#fff}
.listbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.listbar .small{margin:0}
.legend{margin:0 0 10px;font-size:13px}.legend summary{cursor:pointer;color:var(--muted);font-weight:600;width:max-content;padding:2px 0}
.legend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:6px 14px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);margin-top:6px}
.legend-grid div{display:flex;gap:8px;align-items:center;color:var(--muted)}.legend-grid h4{grid-column:1/-1;margin:6px 0 0;font-size:12px;color:var(--fg)}

/* ---- nhan trang thai + tuoi don ---- */
.badge{font-style:normal;display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;color:#fff;background:var(--tt,#6b7680);cursor:help}
.badge .g{font-size:10px;opacity:.9}
.b-moi_chot{--tt:var(--tt-moi_chot)}.b-chot_that{--tt:var(--tt-chot_that)}.b-khach_im{--tt:var(--tt-khach_im)}.b-huy{--tt:var(--tt-huy)}.b-da_bill{--tt:var(--tt-da_bill)}
.b-len_haravan{--tt:var(--tt-len_haravan)}.b-dang_giao{--tt:var(--tt-dang_giao)}.b-qua_han{--tt:var(--tt-qua_han)}
.b-gop{background:transparent;color:var(--tt-gop);border:1px dashed var(--tt-gop);padding:1px 8px}
.d-moi_chot{--d:var(--tt-moi_chot)}.d-chot_that{--d:var(--tt-chot_that)}.d-khach_im{--d:var(--tt-khach_im)}.d-huy{--d:var(--tt-huy)}.d-da_bill{--d:var(--tt-da_bill)}.d-len_haravan{--d:var(--tt-len_haravan)}.d-dang_giao{--d:var(--tt-dang_giao)}.d-qua_han{--d:var(--tt-qua_han)}.d-gop{--d:var(--tt-gop)}
.age{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap;cursor:help;border:1px solid transparent;font-variant-numeric:tabular-nums}
.age svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.age.a0{color:var(--muted);border-color:var(--line);background:var(--card2)}
.age.a1{background:#fde68a;color:#6b4800}
.age.a2{background:#f97316;color:#fff}
.age.a3{background:#dc2626;color:#fff}
@media (prefers-color-scheme: dark){.age.a1{background:#d4a514;color:#1d1400}.age.a2{background:#ea6a12}.age.a3{background:#e03a3a}}
.ttwrap{display:inline-flex;gap:4px;align-items:center;flex-wrap:nowrap}

/* ---- danh sach don chot dang hang (kieu Haravan) ---- */
.olist{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--sh)}
.ohead,.orow{display:grid;grid-template-columns:96px 70px minmax(130px,1.2fr) minmax(110px,1.5fr) 92px 88px 64px 178px 86px;gap:8px;align-items:center;padding:9px 12px;font-size:13px}
.ohead{background:var(--card2);color:var(--muted);font-weight:600;font-size:12px;border-bottom:1px solid var(--line)}
.orow{border-bottom:1px solid var(--line);cursor:pointer;border-left:3px solid var(--tt,transparent)}.orow:hover{background:var(--card2)}.orow.mo{background:var(--acc2)}
.orow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.orow .c-kh b{display:block;overflow:hidden;text-overflow:ellipsis;font-weight:600}.orow .c-kh small{color:var(--muted)}
.orow .c-tt{overflow:visible}
.orow .c-m2{display:none}
.orow .c-id{color:var(--teal-d);font-weight:700}.orow .c-tien{font-weight:700;font-variant-numeric:tabular-nums}.n{text-align:right}
.orow a.link,.odetail a.link{font-size:12.5px;font-weight:600;color:var(--teal-d);text-decoration:none}
.tt-moi_chot{--tt:var(--tt-moi_chot)}.tt-chot_that{--tt:var(--tt-chot_that)}.tt-khach_im{--tt:var(--tt-khach_im)}.tt-huy{--tt:var(--tt-huy)}.tt-da_bill{--tt:var(--tt-da_bill)}.tt-len_haravan{--tt:var(--tt-len_haravan)}.tt-dang_giao{--tt:var(--tt-dang_giao)}.tt-qua_han{--tt:var(--tt-qua_han)}.tt-gop{--tt:var(--tt-gop)}
.orow.tt-huy,.orow.tt-gop{opacity:.72}
.odetail{padding:14px 16px;background:var(--acc2);border-bottom:1px solid var(--line);display:grid;gap:8px;font-size:13.5px}
.odetail .tt-full{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.odetail label{display:grid;gap:3px;margin:0}.odetail select,.odetail textarea{width:100%;max-width:540px}
.meta{font-size:12.5px;color:var(--muted)}.meta.warn{color:var(--warn)}
.more{text-align:center;margin:12px 0}

/* ---- nhap don ---- */
.nhap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.drop{display:grid;place-items:center;min-height:150px;border:2px dashed color-mix(in srgb,var(--teal) 55%,var(--line));border-radius:14px;cursor:pointer;color:var(--muted);text-align:center;padding:14px;margin:0;background:var(--card2)}
.drop span{display:grid;gap:4px;justify-items:center}.drop b{color:var(--fg)}.drop .ic{color:var(--teal)}.drop img{max-width:100%;max-height:300px;border-radius:8px}
.item{display:grid;grid-template-columns:1.3fr .7fr .8fr .6fr 1fr auto;gap:6px;align-items:end;padding:8px 0;border-bottom:1px solid var(--line)}.item label{margin:0;font-size:11.5px}.item .x{border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer;padding:4px 6px}
.item .ten{grid-column:1/-1;font-size:12px;color:var(--muted)}
.pay>div,.pay label{display:flex;justify-content:space-between;align-items:center;gap:12px}.pay label input{width:140px;text-align:right;margin:0}.pay>div{padding:6px 0}.pay .total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-size:17px}.pay .total b{color:var(--pink-d)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kiem{list-style:none;margin:0;padding:0;font-size:13.5px}.kiem li{padding:4px 0 4px 18px;position:relative}.kiem li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.kiem .loi{color:var(--bad)}.kiem .loi::before{background:var(--bad)}.kiem .canh{color:var(--warn)}.kiem .canh::before{background:#eab308}.kiem .ok{color:var(--good)}.kiem .ok::before{background:var(--good)}
input.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--card))}
.mini{display:grid;gap:6px;font-size:13.5px}.mini div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:6px 0;flex-wrap:wrap}
.gialap{margin-top:10px;padding:9px 12px;border-radius:10px;background:#fff4d6;border:1px solid #f0b429;color:#7a4b00;font-size:13px}
.gialap b,.gialap-tag{color:#b45309;font-weight:700}
#kiemList .btn.sm{margin-left:4px;padding:2px 8px}

/* ---- tong quan / quang cao ---- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}.seg button{font:inherit;font-size:13.5px;border:0;background:transparent;color:var(--fg);padding:7px 15px;cursor:pointer}.seg button.on{background:var(--teal);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--teal))}
.kpi span{font-size:12.5px;color:var(--muted);font-weight:500}.kpi b{display:block;font-size:22px;font-variant-numeric:tabular-nums;margin-top:2px;letter-spacing:-.01em}.kpi small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.kpi.neg b{color:var(--bad)}.kpi.pos b{color:var(--good)}.kpi.na b{font-size:14px;color:var(--muted);font-weight:600;padding-top:6px}
.kpi-hv{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.kpi-hv .t{padding:12px 16px;display:grid;align-content:center;background:var(--pink2)}.kpi-hv .t b{font-size:14px}.kpi-hv .t span{font-size:12px;color:var(--muted)}
.kpi-hv a{padding:12px 14px;text-decoration:none;color:var(--fg);border-left:1px solid var(--line);display:grid;gap:2px}.kpi-hv a:hover{background:var(--card2)}
.kpi-hv a b{font-size:22px;font-variant-numeric:tabular-nums}.kpi-hv a span{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi-hv a.l3 b{color:var(--bad)}.kpi-hv a.l1 b{color:#d97706}
canvas{width:100%!important;display:block}
.tbl-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}.tbl-wrap.flat{border:0;border-radius:0;margin:0 -16px;width:calc(100% + 32px)}
.tbl{border-collapse:collapse;width:100%;font-size:13.5px}.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.tbl th{background:var(--card2);font-size:12px;color:var(--muted);font-weight:600}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}.tbl td.neg{color:var(--bad)}.tbl td small{color:var(--muted);font-weight:400}
.tbl td.wrap{white-space:normal;min-width:220px;color:var(--muted);font-size:12.5px}
.tbl .na{color:var(--muted);font-size:12px;font-style:italic}
.tbl tr.cd{cursor:pointer;font-weight:600}.tbl tr.cd td:first-child::before{content:"▸";display:inline-block;width:14px;color:var(--teal);transition:transform .15s}.tbl tr.cd.mo td:first-child::before{transform:rotate(90deg)}
.tbl tr.ad td:first-child{padding-left:30px;font-weight:400}.tbl tr.ad td{background:var(--card2)}
.tbl td .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.tbl td.ten{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.note{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.legend-inline{font-size:12.5px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}.sw{display:inline-block;width:10px;height:10px;border-radius:3px}.sw-chi{background:var(--teal)}.sw-don{background:var(--pink);border-radius:50%}
.nguon-bar{display:grid;gap:8px}.nguon-bar .r{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;font-size:13px}
.nguon-bar .bar{height:10px;background:var(--card2);border-radius:999px;overflow:hidden}.nguon-bar .bar i{display:block;height:100%;background:var(--c,var(--teal));border-radius:999px}
.datanote{background:color-mix(in srgb,var(--yellow) 12%,var(--card));border-color:color-mix(in srgb,var(--yellow) 45%,var(--line))}.datanote h2{font-size:14px}.datanote ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--muted)}.datanote li{margin:3px 0}.datanote code{font-size:12px}
.userform{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:12px}
.role{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--card2)}.role.chu{background:var(--pink2);color:var(--pink-d)}.role.quangcao{background:color-mix(in srgb,var(--blue) 15%,var(--card));color:var(--blue)}.role.quanly{background:var(--acc2);color:var(--teal-d)}

/* ---- dien thoai ---- */
@media (max-width:760px){
  .top{gap:6px;padding:6px 10px;flex-wrap:wrap}.bname small{display:block}.who span{display:none}
  .nav{order:3;flex-basis:100%;justify-content:flex-start;margin:0 -10px;padding:0 8px 2px}.nav a{padding:7px 11px;font-size:13px}
  main{padding:12px 12px 20px}.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}
  .apps{grid-template-columns:1fr 1fr;gap:10px}.app{min-height:158px;padding:14px 12px 12px;border-radius:16px}.app .ico{width:42px;height:42px;border-radius:12px}.app b{font-size:14.5px}.app p{font-size:12px}.app .nhac{font-size:11.5px}
  .hero{border-radius:18px;min-height:150px}.hero-txt p{font-size:13.5px}
  .ohead{display:none}
  .orow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kh tien" "tt tt" "meta meta";gap:4px 10px;padding:10px 12px}
  .orow .c-id,.orow .c-nguon,.orow .c-act,.orow .c-gio,.orow .c-ng,.orow .c-mon{display:none}
  .orow .c-kh{grid-area:kh}.orow .c-kh small{display:none}.orow .c-tien{grid-area:tien;font-size:13.5px}.orow .c-tt{grid-area:tt}
  .orow .c-m2{display:block;grid-area:meta;font-size:12px;color:var(--muted)}
  .nhap{grid-template-columns:1fr}
  .item{grid-template-columns:1fr 1fr 1fr}.item .x{grid-column:3;justify-self:end}
  .sticky-save{position:sticky;bottom:0;background:var(--bg);padding:8px 0;margin:0}.sticky-save .btn{flex:1}
  .pay label input{width:120px}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}.kpi{padding:11px 12px}.kpi b{font-size:18px}
  .kpi-hv{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi-hv .t{grid-column:1/-1}.kpi-hv a:nth-child(2){border-left:0}.kpi-hv a{padding:10px 12px}.kpi-hv a b{font-size:19px}
  .box{padding:14px}.tbl-wrap.flat{margin:0 -14px;width:calc(100% + 28px)}
  .tbl th,.tbl td{padding:8px 10px;font-size:12.5px}
  .nguon-bar .r{grid-template-columns:90px 1fr auto}
  .datebar{gap:6px}.dquick{width:100%}
}

/* ---- Chat quan ly (kieu Messenger) ---- */
.chat{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;height:min(76vh,760px)}
.clist{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.seg.full{display:flex;margin:10px;border-radius:999px}.seg.full button{flex:1;padding:7px 6px;font-size:13px}.seg.full button b{font-weight:700;opacity:.75}
.cl-items{overflow-y:auto;flex:1}
.ci{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 12px;cursor:pointer;font:inherit;color:var(--fg)}
.ci:hover{background:var(--card2)}.ci.on{background:var(--acc2)}
.ci .ct{min-width:0;display:grid}.ci .ct b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.ci .ct small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci.moi .ct b,.ci.moi .ct small{font-weight:700;color:var(--fg)}
.ci .cm{display:grid;justify-items:end;gap:3px}.ci .cm small{color:var(--muted);font-size:11.5px}
.un{font-style:normal;background:var(--pink);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 6px}
.av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--pink));color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.gl{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;color:#7a4b00;background:#ffe9a8;border-radius:4px;padding:0 5px;width:max-content}
.cpane{display:flex;flex-direction:column;min-width:0;min-height:0}
.cempty{margin:auto;display:grid;justify-items:center;gap:6px;color:var(--muted);text-align:center;padding:30px}.cempty b{color:var(--fg)}.cempty .ic{color:var(--teal)}
.ch{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ch .cn{flex:1;min-width:120px;display:grid}.ch .cn small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ch select{width:auto;padding:6px 10px;font-size:13px}
.ch .back{display:none;font-size:26px}
.msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.mday{align-self:center;font-size:11.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin:6px 0}
.msg{display:grid;max-width:min(78%,520px);gap:2px}.msg.in{align-self:flex-start}.msg.out{align-self:flex-end;justify-items:end}
.msg .bub{border-radius:18px;padding:8px 12px;background:var(--card);border:1px solid var(--line);display:grid;gap:6px}
.msg.out .bub{background:var(--teal);color:#fff;border-color:var(--teal)}
.msg.in .bub{border-bottom-left-radius:6px}.msg.out .bub{border-bottom-right-radius:6px}
.msg p{margin:0;font-size:14px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}.msg img{max-width:220px;width:100%;border-radius:12px;display:block}
.msg small{font-size:11px;color:var(--muted);padding:0 6px}
.att{font-size:12px;opacity:.8}
.compose{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex-wrap:wrap;align-items:flex-end}
.compose textarea{flex:1;min-width:0;resize:none;border-radius:20px;padding:10px 14px;max-height:120px}
.compose .btn{border-radius:20px}
.warn24{flex-basis:100%;font-size:12.5px;color:var(--bad);font-weight:600;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.warn24 .ha{margin:0;font-weight:500;color:var(--muted);display:flex;gap:6px;align-items:center}.warn24 .ha input{width:auto;margin:0}
.tok-off{color:var(--bad);font-weight:700}
.cdon{border-top:2px solid var(--pink);padding:12px 14px;background:var(--card);max-height:46vh;overflow-y:auto}
.cdon-g{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.cdon-g .w2{grid-column:1/-1}.cdon-g label{margin-bottom:8px}
.mini-t input{padding:6px 8px;font-size:13px}.mini-t td{padding:4px 6px}.mini-t .x{border:0;background:none;font-size:20px;color:var(--muted);cursor:pointer}
.empty.sm{padding:22px;margin:10px;font-size:13px}
@media (max-width:760px){
  .chat{grid-template-columns:1fr;height:calc(100vh - 190px);min-height:480px}
  .chat .cpane{display:none}.chat.mo .clist{display:none}.chat.mo .cpane{display:flex}
  .ch{gap:8px;padding:8px 10px}.ch .back{display:grid}.ch .av{width:34px;height:34px}.ch select{order:5}.ch .btn{order:6}
  .msg{max-width:86%}.cdon-g{grid-template-columns:1fr}
}

@media (max-width:1400px){.who span{display:none}.nav a{padding:8px 10px;font-size:13.5px;gap:6px}.top{gap:10px}}

/* ---- thanh tab ngang (26/10) ---- */
.nav{justify-content:flex-start}
.nav a{position:relative}
.nav a.active{background:var(--teal,#2aa0b8);color:#fff;box-shadow:0 2px 8px rgba(42,160,184,.35)}
@media (prefers-color-scheme: dark){.nav a.active{background:#2aa0b8;color:#fff}}
.nav .nb{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e8538f;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.nav .nb.hidden{display:none}
.nav a.active .nb{background:#fff;color:#e8538f}
@media (max-width:760px){.nav{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.nav a{scroll-snap-align:center;flex:0 0 auto}}

/* ---- huy don (26/10) ---- */
.btn.danger{background:#d64545;color:#fff;border-color:#d64545}.btn.danger:hover{background:#b93636}
.huy-box{margin-top:10px;padding:12px;border:1.5px solid #d64545;border-radius:12px;background:rgba(214,69,69,.06);display:grid;gap:8px}
.huy-box p{margin:0}.huy-lydo{display:flex;flex-wrap:wrap;gap:6px 14px}.huy-lydo label{display:inline-flex;gap:6px;align-items:center;font-weight:500}
.huy-box input[data-act=huy-gc]{width:100%}
.huy-info{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:rgba(214,69,69,.08);color:inherit}.huy-info svg{width:18px;height:18px;fill:none;stroke:#d64545;stroke-width:2;flex:0 0 auto;margin-top:2px}

/* ---- nhat ky thao tac (26/10) ---- */
.nkhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.nkhead h2{margin:0}.nkhead #btnXuat{margin-left:auto}
.nkform{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.nkform input[type=search]{flex:1 1 220px}.nkform select,.nkform input{min-width:0}.nkform label.d{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.nklist{display:flex;flex-direction:column;border:1px solid var(--line,rgba(127,127,127,.2));border-radius:12px;overflow:hidden}
.nk{border-bottom:1px solid var(--line,rgba(127,127,127,.15))}.nk:last-child{border-bottom:0}
.nk summary{display:flex;gap:10px;align-items:baseline;padding:9px 12px;cursor:pointer;list-style:none;line-height:1.4}.nk summary::-webkit-details-marker{display:none}
.nk summary:hover{background:var(--card2)}.nk time{font-variant-numeric:tabular-nums;color:var(--muted);flex:0 0 auto;font-size:13px;min-width:44px}
.nk summary span{flex:1;min-width:0;overflow-wrap:anywhere}.nk .chip{flex:0 0 auto;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--acc2);color:inherit;text-decoration:none}
.nk.warn summary span{color:#c0392b}@media (prefers-color-scheme: dark){.nk.warn summary span{color:#ff8a80}}
.nkd{padding:4px 12px 12px 66px;display:grid;gap:6px}.nkd pre{margin:0;max-height:220px;overflow:auto;font-size:12px;background:var(--card2);padding:8px;border-radius:8px;white-space:pre-wrap}
@media (max-width:640px){.nkd{padding-left:12px}.nk summary{flex-wrap:wrap}}
.lsdon{margin-top:10px;border-top:1px dashed var(--line,rgba(127,127,127,.3));padding-top:8px}.lsdon summary{cursor:pointer;font-weight:600}
.lslist{margin:6px 0 0;padding-left:18px;display:grid;gap:3px}.lslist time{font-variant-numeric:tabular-nums;color:var(--muted)}

/* ---- sua bo cuc loc nhat ky + ly do huy (26/10, sau khi xem anh) ---- */
#nkForm.nkform{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;align-items:end}
#nkForm input[type=search]{grid-column:1/-1}
#nkForm input,#nkForm select{width:100%;margin:0}
#nkForm label.d{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0}
#nkForm .btn{width:auto;justify-self:start}
.huy-lydo{display:flex;flex-wrap:wrap;gap:8px}
.huy-lydo label{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;width:auto!important;margin:0;padding:6px 12px;border:1px solid var(--line,rgba(127,127,127,.3));border-radius:999px;white-space:nowrap;cursor:pointer;font-weight:500}
.huy-lydo label:has(input:checked){border-color:#d64545;background:rgba(214,69,69,.1);color:#d64545}
.huy-lydo input{width:auto!important;margin:0}