/* =====================================================================================================
   HCL ONE — HỆ THIẾT KẾ v1 (27/09/2026) · một tệp CSS cho app nhân viên, app chủ quán và mọi module.
   Tài liệu dùng: web/THIET_KE_GIAO_DIEN.md. Nhận diện: web/../01_THIET_KE/nhan_dien/BANG_MAU_VA_LUAT_DUNG.md
   Phần 1 = chữ + mã màu (token) · Phần 2 = nền + lớp cũ (giữ tương thích) · Phần 3 = thư viện thành phần hc-*
   ===================================================================================================== */
/* Chữ tự phục vụ trong web/chu (không gọi Google Fonts → mất sóng vẫn đúng chữ, không rò thông tin ra ngoài) */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(chu/be-vietnam-pro-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(chu/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(chu/be-vietnam-pro-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(chu/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(chu/be-vietnam-pro-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(chu/be-vietnam-pro-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(chu/be-vietnam-pro-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(chu/be-vietnam-pro-vietnamese-800-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
/* Nhận diện HCL ONE (27/09): HCL Navy #2A3371 · Gold #F9BD25 · Cream #FAF7F0 · Peanut #EDCB8D · Deep Navy #191E43.
   Navy/Cream/Trắng là 80% màn hình; xanh lá / cam / đỏ CHỈ cho trạng thái nghiệp vụ. Chữ: Be Vietnam Pro (400 thân · 600 nhãn · 700/800 tiêu đề, số).
   Mất mạng thì rơi về chữ hệ thống — app vẫn chạy. */
:root{
  --cham:#2A3371; --cham-dam:#191E43; --cham-nhat:#EAECF5; --vang:#F9BD25; --vang-dam:#8A5A00; --vang-nhat:#FFF3D1; --lac:#EDCB8D;
  --kem:#FAF7F0; --than:#191E43; --gao:#2E7D32; --gao-nhat:#E4EFE3; --do-hcl:#C62828; --cam:#E38B00; --cam-nhat:#FFF1DB;
  /* màu từng dòng bia — để tô theo SKU ở màn tồn/đặt hàng khi cần */
  --bia-tao:#7FA83C; --bia-chieu:#4E8FC0; --bia-tuoi:#2A3371; --bia-gao:#15481C; --bia-di:#C08A2E; --bia-do:#7A1414; --bia-mua:#B4551C; --bia-dem:#241C17;
  /* --mo (chữ phụ) #5E6178: ≥ 4,5:1 trên trắng, kem, nền phụ, chàm nhạt, viền (bản cũ #6B6E85 chỉ 4,3:1 trên nền kem phụ) */
  --nen:var(--kem); --the:#FFFFFF; --chu:var(--than); --mo:#5E6178; --vien:#E3DFD3;
  --chinh:var(--cham); --chinh-2:#2B3A9C; --chinh-nhat:var(--cham-nhat);
  --vang-chu:var(--vang-dam); --do:#C62828; --do-nhat:#FBE9E7; --xanh:var(--gao); --xanh-nhat:var(--gao-nhat);
  --bo:14px; --bong:0 1px 2px rgba(25,30,67,.06),0 2px 10px rgba(25,30,67,.06);
  --tieu-de:"Be Vietnam Pro",system-ui,sans-serif; --noi-dung:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --nen:#0F1330; --the:#181D45; --chu:#F3EFE6; --mo:#A9ACC4; --vien:#2C3360;
    --chinh:#8F9BFF; --chinh-2:#6F7DFF; --chinh-nhat:#232B66; --vang-chu:var(--vang); --vang-nhat:#3A2E08;
    --do:#FF8A80; --do-nhat:#4A1A16; --xanh:#8FD39A; --xanh-nhat:#173A22; --bong:none; }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--nen);color:var(--chu);font:16px/1.45 var(--noi-dung)}
h1,h2,.logo,.kpi b,.chan .tong b{font-family:var(--tieu-de)}
button,input,select,textarea{font:inherit;color:inherit}
.dau{position:sticky;top:0;z-index:5;background:var(--cham);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:10px;border-bottom:3px solid var(--vang)}
@media (prefers-color-scheme: dark){.dau{background:var(--cham-dam)}}
.dau h1{font-size:18px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dau{padding-left:6px;padding-right:8px;gap:2px}
.dau h1{padding:0 6px}.dau h1.giua{text-align:center}.dau h1.dai{font-size:15px;letter-spacing:.01em}
.nut-dau{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;cursor:pointer;border-radius:12px;padding:0;text-decoration:none}
.nut-dau.toi{color:var(--chu);background:var(--vien);width:32px;height:32px;border-radius:50%}
/* ---- trang chủ ô lớn (bố cục quen tay từ DMS cũ) */
main.trang-chu{padding:0 16px 16px;display:flex;flex-direction:column;min-height:calc(100vh - 66px)}
.chao{text-align:right;padding:14px 0 12px;font-size:16px}
.luoi-o{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.o{position:relative;border-radius:14px;color:#fff;display:flex;flex-direction:column;padding:0;text-decoration:none;box-shadow:var(--bong);overflow:hidden;background:var(--cham)}
.o-anh{display:block;width:100%;aspect-ratio:355/247;background-size:cover;background-position:center}
.o-duoi{position:relative;padding:8px 46px 12px 12px;display:flex;flex-direction:column;gap:6px;min-height:70px}
.o.sang{color:var(--cham-dam)} .o.sang .o-nhan{background:rgba(42,51,113,.12);color:var(--cham-dam)}
.o-mui{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:var(--vang);color:var(--cham-dam);display:flex;align-items:center;justify-content:center}
.o:active{filter:brightness(1.08)}
.o-ten{align-self:flex-start;text-align:left;font:800 19px/1.1 var(--tieu-de);letter-spacing:-.01em}
.o-nhan{align-self:flex-start;font-size:12px;font-weight:600;background:rgba(255,255,255,.16);padding:3px 9px;border-radius:14px;white-space:normal;overflow-wrap:anywhere;max-width:100%;line-height:1.25}   /* 0.9.3 (R3-04): số / giờ trên chip không bị cắt — xuống dòng thay vì "…" */
.o-nhan.vang{background:var(--vang);color:var(--cham-dam);font-weight:700}
.chan-tc{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--mo);position:relative;padding-bottom:12px}
.chan-tc b{color:var(--cham)}
.chan-tc .vach{position:absolute;left:0;right:0;bottom:0;height:9px;border-top:3px solid var(--cham);border-bottom:3px solid var(--vang)}
/* ---- menu ☰ (ngăn kéo trái như DMS cũ) */
.ngan-phu{position:fixed;inset:0;z-index:30}
.ngan-toi{position:absolute;inset:0;background:rgba(20,27,77,.62)}
.ngan{position:absolute;left:0;top:0;bottom:0;width:min(308px,86vw);background:var(--the);display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(20,27,77,.35)}
.ngan-dau{flex:none;background:var(--cham);color:#fff;border-bottom:3px solid var(--vang);padding:calc(16px + env(safe-area-inset-top)) 16px 14px;display:flex;align-items:center;gap:12px}
.ngan-dau img{width:52px;height:52px;border-radius:50%;background:#fff;flex:none}
.ngan-dau .nho{color:#D9DCF0}
.ngan-than{flex:1;overflow-y:auto;padding-bottom:16px}
.ngan h3{font-size:12.5px;line-height:1.45;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mo);margin:14px 18px 4px;padding-top:8px;border-top:1px solid var(--vien)}
.ngan h3:first-child{border:0;padding-top:0}
.m-muc{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 14px 0 18px;color:var(--chu);text-decoration:none;font-size:16px;width:100%;background:none;border:0;text-align:left;cursor:pointer}
.m-muc svg{color:var(--cham);flex:none}.m-muc span{flex:1}
.m-muc.mo{color:var(--mo)}.m-muc.mo svg{color:#A09A8C}
.m-muc.thoat{color:var(--do-hcl)}.m-muc.thoat svg{color:var(--do-hcl)}
.m-ghi{font-style:normal;font-size:11px;font-weight:600;color:var(--mo);background:var(--vien);padding:2px 8px;border-radius:99px;white-space:nowrap}
.m-ghi.co{color:var(--gao);background:var(--gao-nhat)}
/* ---- thẻ khách hàng (viếng thăm / khách hàng) */
.o-tim{display:flex;align-items:center;gap:10px;height:48px;background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:0 14px;color:var(--mo);margin:0}
.o-tim input{border:0;background:none;min-height:0;padding:0;flex:1;font-size:16px}.o-tim input:focus{outline:0}
.kh{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden;margin-bottom:10px;box-shadow:var(--bong)}
.kh-dau{background:var(--vien);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
@media (prefers-color-scheme: dark){.kh-dau{background:#20264f}}
.kh-td{min-width:0}.kh-ten{font-weight:700;font-size:16px;overflow-wrap:anywhere}
.kh-so{display:inline-block;min-width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:var(--cham);color:#fff;font-size:12px;margin-right:6px}
.kh-than{padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.kh-dong{display:flex;gap:8px;align-items:flex-start}.kh-dong svg{color:var(--cham);flex:none;margin-top:2px}
.kh-dong .hd{color:#B4551C}.kh-dong a{color:var(--chinh)}
.kh-link{display:flex;gap:18px;padding-top:2px}.kh-link a{display:flex;gap:8px;align-items:center;color:var(--gao);font-weight:600;min-height:32px;text-decoration:none}
.kh-nut{display:flex;gap:8px;padding-top:6px}
.kh-nut a{flex:1;height:44px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;text-decoration:none;box-sizing:border-box}
.n-dat{background:var(--gao)}.n-bc{background:#B4551C}.n-ci{background:var(--cham)}.n-cd{background:var(--the);border:1.5px solid var(--cham-nhat);color:var(--cham)!important}
/* ---- bản đồ */
main.rong{padding:0;max-width:none;position:relative}
.ban-do{height:calc(100vh - 66px - env(safe-area-inset-top));background:#EEF1EA}
.cum span{display:flex;align-items:center;justify-content:center;border-radius:50%;font:700 16px var(--tieu-de);color:var(--cham-dam);box-shadow:0 0 0 10px rgba(229,179,33,.32)}
.cum span.vang{background:#E5B321}.cum span.xanh{background:#7FA83C;box-shadow:0 0 0 10px rgba(127,168,60,.32)}
.cum{background:none;border:0}
.the-noi{position:absolute;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:500;background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:12px 14px;box-shadow:0 6px 20px rgba(20,27,77,.18)}
.nut-bd{height:44px;padding:0 14px;border:1.5px solid var(--vien);border-radius:10px;background:var(--the);color:var(--cham);font:600 13.5px var(--noi-dung);cursor:pointer;box-shadow:var(--bong)}
.leaflet-container{font-family:var(--noi-dung)}
/* nút phóng to / thu nhỏ bản đồ: 44 × 44 (mặc định Leaflet 30 px — khó bấm ngoài đường) */
.leaflet-bar a,.leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}
.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:24px}
/* chip "Đã gửi hết / Chờ gửi / Mất sóng" trên thanh trên: NÚT cao 44 px (vùng bấm), viên thuốc nhìn thấy là .gv bên trong */
.gui{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;border:0;background:none;color:#fff;cursor:pointer;white-space:nowrap;font:600 13px var(--noi-dung)}
.gui .gv{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;min-width:36px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.18)}
.gui .gv svg{flex:none}
.gui.cho .gv{background:var(--vang);color:var(--cham-dam)}
.gui.gon .gv{padding:0 8px}
main{padding:12px 16px calc(96px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto}
.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);box-shadow:var(--bong);padding:14px;margin-bottom:12px}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.kpi div{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:10px 8px;text-align:center}
.kpi b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--mo)}
.thanh{height:8px;border-radius:9px;background:var(--vien);overflow:hidden;margin-top:6px}
.thanh i{display:block;height:100%;background:var(--vang)}
.dong{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);margin-bottom:8px;cursor:pointer;min-height:64px}
.dong .so{width:30px;height:30px;border-radius:50%;background:var(--chinh-nhat);color:var(--chinh);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.dong .giua{flex:1;min-width:0}
.dong .ten{font-weight:600;overflow-wrap:anywhere}
.dong .phu{font-size:13px;color:var(--mo);overflow-wrap:anywhere}
.nhan{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.n-xanh{background:var(--chinh-nhat);color:var(--chinh)} .n-vang{background:var(--vang-nhat);color:var(--vang-chu)}
.n-do{background:var(--do-nhat);color:var(--do)} .n-lam{background:var(--xanh-nhat);color:var(--xanh)} .n-xam{background:var(--vien);color:var(--mo)}
.nut{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;border-radius:14px;border:0;font-size:18px;font-weight:700;cursor:pointer;margin-bottom:10px;padding:0 16px}
.nut:disabled{opacity:.5}
.nut-chinh{background:var(--vang);color:var(--cham-dam);font-family:var(--tieu-de);letter-spacing:.01em} .nut-phu{background:var(--the);color:var(--cham);border:2px solid var(--cham-nhat)}
@media (prefers-color-scheme: dark){.nut-phu{color:var(--chu);border-color:var(--vien)}}
.nut-do{background:var(--do-nhat);color:var(--do)} .nut-vang{background:var(--cham);color:#fff}
.luoi2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.luoi2 .nut{margin:0;min-height:84px;flex-direction:column;font-size:16px}
.luoi2 .nut .bt{font-size:26px}
h2{font-size:15px;line-height:1.4;margin:18px 2px 8px;color:var(--mo);text-transform:uppercase;letter-spacing:.03em}
label{display:block;font-size:14px;color:var(--mo);margin:10px 0 4px}
input,select,textarea{width:100%;min-height:50px;border:1.5px solid var(--vien);border-radius:12px;padding:10px 12px;background:var(--the);font-size:17px}
textarea{min-height:80px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--chinh-nhat);border-color:var(--chinh-2)}
.sp{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--vien)}
.sp:last-child{border-bottom:0}
.sp .giua{flex:1;min-width:0}
.sp .ten{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.sp .gia{font-size:13px;color:var(--mo)}
.buoc{display:flex;align-items:center;gap:4px;flex:none}
.buoc button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--vien);background:var(--the);font-size:22px;font-weight:700;cursor:pointer}
.buoc input{width:58px;min-height:44px;text-align:center;padding:4px;font-weight:700}
.chan{position:fixed;left:0;right:0;bottom:0;background:var(--the);border-top:1px solid var(--vien);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:6}
.chan .trong{max-width:720px;margin:0 auto}
.chan .tong{display:flex;justify-content:space-between;font-size:15px;margin-bottom:8px}
.chan .nut{margin:0}
/* thông báo nổi: trên cả tấm trượt (z 40) — báo lỗi khi đang mở tấm trượt (vd "Chọn hoặc ghi lý do") phải nhìn thấy */
.thong-bao{position:fixed;left:16px;right:16px;bottom:calc(100px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;background:var(--cham-dam);color:#fff;border-left:4px solid var(--vang);padding:12px 16px;border-radius:12px;z-index:50;font-size:15px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.thong-bao.loi{background:var(--do)}
.trong-rong{color:var(--mo);text-align:center;padding:24px 8px}
.tim{position:relative;margin-bottom:12px}
.tab{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.tab button{flex:none;min-height:40px;padding:0 14px;border-radius:99px;border:1.5px solid var(--vien);background:var(--the);cursor:pointer;font-weight:600}
.tab button.chon{background:var(--cham);color:#fff;border-color:var(--cham)}
.dang-nhap{max-width:420px;margin:0 auto;padding:0 16px 24px;min-height:100vh;display:flex;flex-direction:column}
.dn-anh{position:relative;height:min(44vh,380px);min-height:250px;margin:0 -16px 18px;background:#20297C;border-bottom:4px solid var(--vang);overflow:hidden}
.dn-anh>img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.dn-chu{position:absolute;left:0;right:0;bottom:0;padding:14px 24px 14px;background:linear-gradient(180deg,rgba(25,30,67,0) 0%,rgba(25,30,67,.9) 40%);text-align:center;color:#fff}
.dn-chu .logo-anh{height:44px;width:auto;display:block;margin:0 auto 4px}
.dn-chu .khau-hieu{color:#E6E8F5;font-size:14px;margin:8px 0 0}.dn-chu .khau-hieu em{color:var(--vang);font-style:normal;font-weight:600}
.dn-form label{margin-top:12px}
.dn-chan{margin-top:auto;padding-top:18px;text-align:center;font-size:12px;color:var(--mo)}
.chip-ngay{flex:none;min-height:40px;padding:0 14px;border-radius:99px;border:1.5px solid var(--vien);background:var(--the);display:flex;align-items:center;font-weight:600;color:var(--chu);text-decoration:none}
.chip-ngay.chon{background:var(--cham);color:#fff;border-color:var(--cham)}
.dn-dau{background:var(--cham);color:#fff;margin:0 -16px 20px;padding:calc(28px + env(safe-area-inset-top)) 24px 26px;text-align:center;border-bottom:4px solid var(--vang);position:relative;overflow:hidden}
.dn-dau::after{content:"∞";position:absolute;right:-6px;bottom:-34px;font:900 140px/1 var(--tieu-de);color:rgba(254,193,43,.12);pointer-events:none}
.dn-dau img{width:84px;height:84px;border-radius:22px;box-shadow:0 6px 20px rgba(0,0,0,.25);background:#fff}
.logo{font:800 30px/1.1 var(--tieu-de);color:#fff;margin:14px 0 4px;letter-spacing:-.01em}
.logo b{color:var(--vang)}
.dn-dau .khau-hieu{color:rgba(255,255,255,.82);font-size:14px;margin:0}
.dn-dau .khau-hieu em{color:var(--vang);font-style:normal;font-weight:600}
.nho{font-size:13px;color:var(--mo)}
.hang{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--vien);font-size:15px}
.hang:last-child{border-bottom:0}
.hang span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.an{display:none!important}
[hidden]{display:none!important}   /* thuộc tính hidden luôn ẩn — kể cả phần tử có display riêng (.hc-sp, .hc-dong…) */

/* =====================================================================================================
   PHẦN 3 — THƯ VIỆN THÀNH PHẦN hc-*  (dùng cho mọi màn mới; lớp cũ ở trên giữ để màn cũ không vỡ)
   Luật màu: Chàm (--cham) + Kem + Trắng = 80% màn hình. Vàng (--vang) = HÀNH ĐỘNG CHÍNH (một nút vàng mỗi màn).
   Xanh lá / cam / đỏ CHỈ để báo trạng thái nghiệp vụ (ổn / cần chú ý / sai – bị chặn). Không dùng màu để trang trí.
   ===================================================================================================== */
:root{
  --r-lon:18px; --r-vua:14px; --r-nho:10px;
  --bong-1:0 1px 2px rgba(25,30,67,.06),0 4px 14px rgba(25,30,67,.06);
  --bong-2:0 2px 6px rgba(25,30,67,.08),0 12px 32px rgba(25,30,67,.12);
  --vien-2:#ECE7DB; --nen-2:#F2EEE4; --chu-2:#3B3F5C;
  --xanh-dam:#1E5E22; --cam-dam:#8A5200; --do-dam:#8E1B1B;
  --cam-sang:#FFC46B;   /* chữ cam trên nền tối (khối anh hùng, thanh trên) */
}
@media (prefers-color-scheme: dark){ :root{ --vien-2:#2C3360; --nen-2:#141943; --chu-2:#D9D6CC; --bong-1:none; --bong-2:0 12px 32px rgba(0,0,0,.4);
  /* chế độ tối: nền trạng thái tối + chữ sáng (nền cam nhạt + chữ sáng là không đọc được) */
  --cam-nhat:#3A2A0C; --cam-dam:#FFC46B; --xanh-dam:#8FD39A; --do-dam:#FF8A80; } }

/* ---- bố cục */
main.hc-may{max-width:1180px}                                   /* màn văn phòng (kế toán, điều phối) — rộng hơn */
.hc-luoi{display:grid;gap:12px}
.hc-luoi.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .hc-luoi.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:900px){ .hc-luoi.may-c2{grid-template-columns:repeat(2,minmax(0,1fr))} .hc-luoi.may-c3{grid-template-columns:repeat(3,minmax(0,1fr))} .hc-luoi.may-c4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.hc-hang-ngang{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hc-gian{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hc-cach{height:12px} .hc-cach.lon{height:24px}

/* ---- chữ */
/* nhãn CHỮ HOA nhỏ: line-height ≥ 1,45 + đệm trên — dấu chồng (Ắ Ầ Ễ Ỗ) không bị cắt khi nằm trong khung overflow:hidden */
.hc-muc{display:flex;align-items:baseline;gap:8px;margin:20px 2px 10px;padding-top:2px;font:700 12.5px/1.45 var(--tieu-de);letter-spacing:.08em;text-transform:uppercase;color:var(--mo)}
.hc-muc .dem{color:var(--chu);letter-spacing:0}
/* liên kết nhỏ trên tiêu đề mục ("Xem hết", "Hạng này làm gì?"): vùng bấm cao 44 px mà không đẩy bố cục (đệm + lề âm) */
.hc-muc a,.hc-muc button{margin-left:auto;text-transform:none;letter-spacing:0;font:600 13.5px var(--noi-dung);color:var(--chinh);background:none;border:0;cursor:pointer;text-decoration:none;padding:14px 4px;margin-top:-14px;margin-bottom:-14px}
.hc-tieu-de{font:800 22px/1.2 var(--tieu-de);letter-spacing:-.01em;margin:0}
.hc-phu{font-size:13.5px;color:var(--mo);margin:2px 0 0}
.so,.hc-so-chu{font-variant-numeric:tabular-nums}
.hc-to{font:800 34px/1 var(--tieu-de);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mo{color:var(--mo)} .dam{font-weight:700} .giua{text-align:center} .phai{text-align:right}
/* chữ cam dùng --cam-dam (≥ 4,5:1); --cam chỉ cho nền, viền, thanh, biểu tượng (2,6:1 — không đủ cho chữ) */
.chu-xanh{color:var(--xanh)} .chu-cam{color:var(--cam-dam)} .chu-do{color:var(--do)} .chu-cham{color:var(--chinh)}

/* ---- khối anh hùng (đầu màn quan trọng: nhiệm vụ hôm nay, ca hôm nay…) */
.hc-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#2F3A86 0%,var(--cham) 45%,var(--cham-dam) 100%);color:#fff;border-radius:var(--r-lon);
  padding:16px 16px 14px;margin:4px 0 14px;box-shadow:var(--bong-2)}
.hc-hero::after{content:"∞";position:absolute;right:-8px;top:-46px;font:900 170px/1 var(--tieu-de);color:rgba(249,189,37,.10);pointer-events:none}
.hc-hero>*{position:relative;z-index:1}
.hc-hero .hc-hero-nhan{font:700 12px/1.4 var(--tieu-de);letter-spacing:.1em;text-transform:uppercase;color:var(--vang)}
.hc-hero h2{margin:8px 0 2px;font:800 26px/1.15 var(--tieu-de);letter-spacing:-.01em;color:#fff;text-transform:none}
.hc-hero p{margin:2px 0 0;color:#D9DCF0;font-size:14px}
.hc-hero .hc-so-luoi .hc-so{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)} .hc-hero .hc-so b{color:#fff} .hc-hero .hc-so span{color:#C9CDEB}
.hc-hero .hc-thanh{background:rgba(255,255,255,.14)}
.hc-hero .hc-nut.phu{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}

/* ---- ô số (KPI) */
.hc-so-luoi{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0}
.hc-so-luoi.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .hc-so-luoi.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hc-so{background:var(--the);border:1px solid var(--vien-2);border-radius:var(--r-vua);padding:10px 8px;text-align:center;min-width:0}
.hc-so b{display:block;font:800 24px/1.1 var(--tieu-de);font-variant-numeric:tabular-nums;color:var(--chu);white-space:nowrap;overflow:hidden;text-overflow:clip}   /* 0.9.3 (k7): số không bao giờ "…" — app.js vuaSo() thu nhỏ chữ cho vừa ô */
.hc-so span{display:block;font-size:12px;color:var(--mo);margin-top:3px;line-height:1.25}
.hc-so.xanh b{color:var(--xanh)} .hc-so.cam b{color:var(--cam-dam)} .hc-so.do b{color:var(--do)} .hc-so.cham b{color:var(--chinh)}
.hc-hero .hc-so.cam b{color:var(--cam-sang)}
a.hc-so{text-decoration:none;color:inherit}

/* ---- thẻ */
.hc-the{display:block;background:var(--the);border:1px solid var(--vien-2);border-radius:var(--r-lon);box-shadow:var(--bong-1);padding:14px 16px;margin-bottom:12px;color:var(--chu);text-decoration:none}
.hc-the.gon{padding:10px 14px} .hc-the.khong-dem{padding:0;overflow:hidden}
.hc-the.bam{cursor:pointer;transition:transform .08s ease} .hc-the.bam:active{transform:scale(.99)}
.hc-the.vien-xanh{border-left:4px solid var(--xanh)} .hc-the.vien-cam{border-left:4px solid var(--cam)} .hc-the.vien-do{border-left:4px solid var(--do)}
.hc-the.vien-vang{border-left:4px solid var(--vang)} .hc-the.vien-cham{border-left:4px solid var(--chinh)}
.hc-the.nen-vang{background:var(--vang-nhat);border-color:#F4DC96} .hc-the.nen-cham{background:var(--chinh-nhat);border-color:transparent}
.hc-the-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hc-the-dau h3{margin:0;font:800 17px/1.3 var(--tieu-de);overflow-wrap:anywhere}
.hc-the-dau .hc-phu{margin-top:3px}
.hc-the-chan{display:flex;gap:8px;margin-top:12px}
.hc-the-chan>*{flex:1}

/* ---- dòng danh sách (trong thẻ hoặc đứng riêng) */
.hc-ds{background:var(--the);border:1px solid var(--vien-2);border-radius:var(--r-lon);box-shadow:var(--bong-1);overflow:hidden;margin-bottom:12px}
.hc-dong{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:60px;color:var(--chu);text-decoration:none;border-bottom:1px solid var(--vien-2);background:var(--the);width:100%;text-align:left;font:inherit}
.hc-ds>.hc-dong:last-child{border-bottom:0}
a.hc-dong,button.hc-dong{cursor:pointer} a.hc-dong:active,button.hc-dong:active{background:var(--nen)}
button.hc-dong{border-left:0;border-right:0;border-top:0}
.hc-dong-dau{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--chinh-nhat);color:var(--chinh);font:800 15px var(--tieu-de)}
.hc-dong-dau.tron{border-radius:50%} .hc-dong-dau.vang{background:var(--vang-nhat);color:var(--vang-chu)} .hc-dong-dau.xanh{background:var(--xanh-nhat);color:var(--xanh)}
.hc-dong-dau.do{background:var(--do-nhat);color:var(--do)} .hc-dong-dau.cam{background:var(--cam-nhat);color:var(--cam-dam)}
.hc-dong-giua{flex:1;min-width:0}
.hc-dong-giua .t{display:block;font-weight:700;font-size:15.5px;overflow-wrap:anywhere;line-height:1.3}
.hc-dong-giua .p{display:block;font-size:13px;color:var(--mo);overflow-wrap:anywhere;margin-top:2px;line-height:1.35}
.hc-dong-cuoi{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.hc-dong-cuoi b{font:800 16px var(--tieu-de);font-variant-numeric:tabular-nums}

/* ---- chip trạng thái + hạng điểm */
.hc-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;font:700 12px/1 var(--noi-dung);white-space:nowrap;background:var(--vien);color:var(--mo);vertical-align:middle}
.hc-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.hc-chip.khong-cham::before{display:none}
.hc-chip.xanh{background:var(--xanh-nhat);color:var(--xanh)} .hc-chip.cam{background:var(--cam-nhat);color:var(--cam-dam)} .hc-chip.do{background:var(--do-nhat);color:var(--do)}
.hc-chip.cham{background:var(--chinh-nhat);color:var(--chinh)} .hc-chip.vang{background:var(--vang);color:var(--cham-dam)} .hc-chip.xam{background:var(--vien);color:var(--mo)}
@media (prefers-color-scheme: dark){ .hc-chip.cam{color:#FFC46B} }
.hc-hang{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:8px;font:800 14px/1 var(--tieu-de);vertical-align:middle}
.hc-hang.A{background:var(--vang);color:var(--cham-dam)} .hc-hang.B{background:var(--cham);color:#fff} .hc-hang.C{background:var(--chinh-nhat);color:var(--chinh)} .hc-hang.D{background:var(--vien);color:var(--mo)}
.hc-hang.lon{min-width:44px;height:44px;border-radius:12px;font-size:22px}

/* ---- nút */
.hc-nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;border-radius:var(--r-vua);border:1.5px solid transparent;
  font:800 16px/1.1 var(--tieu-de);letter-spacing:.01em;cursor:pointer;text-decoration:none;touch-action:manipulation;user-select:none;transition:transform .06s ease,filter .1s}
.hc-nut:active{transform:translateY(1px)} .hc-nut:disabled,.hc-nut[aria-disabled=true]{opacity:.45;pointer-events:none}
.hc-nut.chinh{background:var(--vang);color:var(--cham-dam);box-shadow:0 3px 0 var(--vang-dam)} .hc-nut.chinh:active{box-shadow:0 1px 0 var(--vang-dam)}
.hc-nut.cham{background:var(--cham);color:#fff}
.hc-nut.phu{background:var(--the);color:var(--chinh);border-color:var(--cham-nhat)}
@media (prefers-color-scheme: dark){ .hc-nut.phu{color:var(--chu);border-color:var(--vien)} }
.hc-nut.do{background:var(--do-nhat);color:var(--do)} .hc-nut.xanh{background:var(--xanh);color:#fff}
@media (prefers-color-scheme: dark){ .hc-nut.xanh{background:var(--gao);color:#fff} }
.hc-nut.chu{background:none;color:var(--chinh);min-height:44px;padding:0 8px;font-weight:700}
.hc-nut.khoi{display:flex;width:100%} .hc-nut.nho{min-height:44px;padding:0 12px;font-size:14px;border-radius:var(--r-nho)}   /* ≥ 44 px: bấm được bằng ngón cái ngoài đường */
.hc-nut.to{min-height:72px;font-size:21px;border-radius:18px}
.hc-nut.khong-lo{min-height:96px;font-size:30px;border-radius:22px}
.hc-nhom-nut{display:flex;gap:8px;margin:10px 0}
.hc-nhom-nut>*{flex:1;min-width:0}
.hc-nut-tron{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;border:1.5px solid var(--vien);background:var(--the);color:var(--chinh);cursor:pointer}

/* ---- tab phân đoạn */
.hc-tab{display:flex;gap:4px;padding:4px;background:var(--nen-2);border-radius:14px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none}
.hc-tab::-webkit-scrollbar{display:none}
.hc-tab>button,.hc-tab>a{flex:1 0 auto;min-height:44px;padding:0 14px;border:0;border-radius:11px;background:none;color:var(--mo);font:700 14px var(--noi-dung);cursor:pointer;white-space:nowrap;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px}
.hc-tab>.chon{background:var(--the);color:var(--chinh);box-shadow:var(--bong-1)}
.hc-tab .dem{font-size:12px;background:var(--vien);color:var(--mo);padding:1px 7px;border-radius:99px}
.hc-tab .chon .dem{background:var(--chinh-nhat);color:var(--chinh)}

/* ---- khoá – giá trị (hồ sơ) */
.hc-kv{display:grid;grid-template-columns:minmax(110px,40%) 1fr;margin:0;font-size:14.5px}
.hc-kv dt{color:var(--mo);padding:9px 0;border-bottom:1px dashed var(--vien-2)}
.hc-kv dd{margin:0;padding:9px 0;border-bottom:1px dashed var(--vien-2);text-align:right;font-weight:600;overflow-wrap:anywhere}
.hc-kv dt:nth-last-of-type(1),.hc-kv dd:last-of-type{border-bottom:0}

/* ---- tiến độ */
.hc-thanh{height:8px;border-radius:99px;background:var(--vien);overflow:hidden;margin:8px 0 4px}
.hc-thanh>i{display:block;height:100%;border-radius:inherit;background:var(--vang);transition:width .4s ease}
.hc-thanh.xanh>i{background:var(--xanh)} .hc-thanh.cam>i{background:var(--cam)} .hc-thanh.do>i{background:var(--do)} .hc-thanh.cham>i{background:var(--chinh)}
.hc-vong{--p:0;--mau:var(--vang);--co:88px;position:relative;width:var(--co);height:var(--co);border-radius:50%;flex:none;
  background:conic-gradient(var(--mau) calc(var(--p)*1%),rgba(127,127,160,.18) 0);display:grid;place-items:center}
.hc-vong::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--the)}
.hc-hero .hc-vong::before{background:#232C66}
.hc-vong>div{position:relative;text-align:center;line-height:1}
.hc-vong b{font:800 24px var(--tieu-de);font-variant-numeric:tabular-nums} .hc-vong span{display:block;font-size:11.5px;color:var(--mo);margin-top:3px}
.hc-hero .hc-vong span{color:#C9CDEB}

/* ---- báo tin trong trang */
.hc-bao{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-vua);font-size:14px;line-height:1.45;margin:0 0 12px;background:var(--chinh-nhat);color:var(--chu)}
.hc-bao>svg{flex:none;margin-top:1px;color:var(--chinh)}
.hc-bao.cam{background:var(--cam-nhat)} .hc-bao.cam>svg{color:var(--cam)}
.hc-bao.do{background:var(--do-nhat)} .hc-bao.do>svg{color:var(--do)}
.hc-bao.xanh{background:var(--xanh-nhat)} .hc-bao.xanh>svg{color:var(--xanh)}
.hc-bao b{font-weight:700}

/* ---- trạng thái rỗng (luôn nói rõ bước tiếp theo) */
.hc-rong{text-align:center;padding:28px 18px 18px;color:var(--mo)}
.hc-rong img{width:148px;height:auto;border-radius:18px;margin:0 auto 12px;display:block;opacity:.95}
.hc-rong h3{margin:0 0 6px;color:var(--chu);font:800 17px var(--tieu-de)}
.hc-rong p{margin:0 auto 14px;max-width:300px;font-size:14px}

/* ---- ô tìm, trường nhập */
.hc-tim{display:flex;align-items:center;gap:10px;height:48px;background:var(--the);border:1.5px solid var(--vien-2);border-radius:14px;padding:0 14px;color:var(--mo);margin:0 0 12px}
.hc-tim input{border:0;background:none;min-height:0;padding:0;flex:1;font-size:16px;outline:0}
.hc-truong{margin:0 0 12px} .hc-truong>label{display:block;font:600 13.5px var(--noi-dung);color:var(--mo);margin:0 0 5px}
.hc-truong .goi-y{font-size:12.5px;color:var(--mo);margin-top:4px}
.hc-chon{display:flex;flex-wrap:wrap;gap:8px}                        /* nhóm lựa chọn dạng nút (thay radio) */
.hc-chon>button{min-height:44px;padding:0 14px;border-radius:12px;border:1.5px solid var(--vien);background:var(--the);color:var(--chu);font:600 14.5px var(--noi-dung);cursor:pointer}
.hc-chon>button.chon{background:var(--cham);border-color:var(--cham);color:#fff}
.hc-chon.xanh>button.chon{background:var(--xanh);border-color:var(--xanh)} .hc-chon.do>button.chon{background:var(--do);border-color:var(--do)}

/* ---- ảnh */
.hc-anh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:6px 0 12px}
.hc-anh-luoi img,.hc-anh-them{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--vien-2);background:var(--nen-2)}
.hc-anh-them{display:grid;place-items:center;border:2px dashed var(--vien);color:var(--chinh);cursor:pointer;font:700 12.5px var(--noi-dung);text-align:center;padding:6px}
.hc-anh-bia{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lon);background:var(--nen-2);display:block}

/* ---- bộ đếm cỡ lớn (BA, kỹ thuật) */
.hc-dem{display:flex;align-items:center;gap:10px}
.hc-dem .so{flex:1;text-align:center;font:800 44px/1 var(--tieu-de)}
.hc-dem button{width:64px;height:64px;border-radius:18px;border:1.5px solid var(--vien);background:var(--the);font:800 28px var(--tieu-de);color:var(--chu);cursor:pointer;touch-action:manipulation}
.hc-dem button.cong{width:96px;background:var(--vang);border-color:var(--vang);color:var(--cham-dam);box-shadow:0 3px 0 var(--vang-dam)}

/* ---- dòng thời gian */
.hc-tg{position:relative;margin:4px 0 12px;padding-left:22px}
.hc-tg::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--vien)}
.hc-tg-muc{position:relative;padding:4px 0 12px}
.hc-tg-muc::before{content:"";position:absolute;left:-20px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--the);border:2.5px solid var(--chinh)}
.hc-tg-muc.xanh::before{border-color:var(--xanh);background:var(--xanh)} .hc-tg-muc.cam::before{border-color:var(--cam)} .hc-tg-muc.do::before{border-color:var(--do)}
.hc-tg-muc .luc{font-size:12.5px;color:var(--mo)} .hc-tg-muc .nd{font-size:14.5px}

/* ---- bảng số (màn văn phòng) */
.hc-bang-cuon{overflow-x:auto;border:1px solid var(--vien-2);border-radius:var(--r-vua);background:var(--the);box-shadow:var(--bong-1);margin-bottom:12px}
.hc-bang{width:100%;border-collapse:collapse;font-size:13.5px}
.hc-bang th{position:sticky;top:0;background:var(--nen-2);color:var(--mo);font:700 12px/1.4 var(--noi-dung);text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--vien-2)}
.hc-bang td{padding:10px 12px;border-bottom:1px solid var(--vien-2);vertical-align:top}
.hc-bang tr:last-child td{border-bottom:0}
.hc-bang tbody tr:hover td{background:var(--nen)}
.hc-bang .so,.hc-bang td.so,.hc-bang th.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-bang tfoot td{font-weight:800;background:var(--nen-2)}
.hc-bang td.am{color:var(--do);font-weight:700}

/* ---- tấm trượt đáy (chọn nhanh) */
.hc-man-toi{position:fixed;inset:0;background:rgba(20,27,77,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.hc-sheet{width:100%;max-width:720px;max-height:88vh;overflow:auto;background:var(--the);border-radius:22px 22px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--bong-2)}
.hc-sheet::before{content:"";display:block;width:44px;height:5px;border-radius:99px;background:var(--vien);margin:0 auto 12px}
.hc-sheet h3{margin:0 0 10px;font:800 18px var(--tieu-de)}

/* ---- ký tên trên màn hình */
.hc-ky{position:relative;border:2px dashed var(--vien);border-radius:var(--r-vua);background:#fff;height:180px;touch-action:none}
.hc-ky canvas{width:100%;height:100%;display:block;border-radius:inherit}
.hc-ky .xoa{position:absolute;right:8px;top:8px}
.hc-ky .goi-y{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:var(--mo);font-size:13px;pointer-events:none}

/* ---- thanh tab dưới đáy (màn cấp 1 của app điện thoại) */
.hc-tab-day{position:fixed;left:0;right:0;bottom:0;z-index:7;background:var(--the);border-top:1px solid var(--vien-2);display:flex;justify-content:space-around;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(25,30,67,.06)}
.hc-tab-day a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:var(--mo);text-decoration:none;font:600 11px var(--noi-dung);position:relative}
.hc-tab-day a.chon{color:var(--chinh)} .hc-tab-day a.chon::before{content:"";position:absolute;top:-7px;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--vang)}
.hc-tab-day .so-do{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--do);color:#fff;font:700 10.5px/17px var(--noi-dung)}
body.co-tab-day main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}

/* ---- đang tải */
.hc-tai{border-radius:12px;background:linear-gradient(90deg,var(--nen-2) 25%,var(--vien-2) 37%,var(--nen-2) 63%);background-size:400% 100%;animation:hc-tai 1.3s ease infinite}
@keyframes hc-tai{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---- in ấn (phiếu, nhãn QR, hợp đồng) */
@media print{ .dau,.chan,.hc-tab-day,.thong-bao,.khong-in{display:none!important} body{background:#fff} main{padding:0;max-width:none} .hc-the,.hc-ds{box-shadow:none} }

/* =====================================================================================================
   PHẦN 4 — bổ sung v1.1 (27/09/2026, làm lại app bán hàng). CHỈ THÊM: không đổi tên / không xoá lớp hc-* ở phần 3.
   Thành phần mới dùng chung: đầu trang có biểu tượng + dòng phụ, tab đáy có nút, tấm bìa ảnh (hc-bia), bước lượt ghé (hc-buoc),
   thanh nút dính đáy (hc-thanh-nut + hc-nut-o), dòng sản phẩm có vạch màu dòng bia (hc-sp + hc-so-buoc), khối mở rộng (hc-mo-rong),
   dòng cơ hội (hc-dong-co-hoi), công tắc bật/tắt (hc-cong-tac). Phần riêng từng màn app bán hàng: tiền tố tc- vt- dm- dh- kh- cc- gs- bc- tb- db- dn- ht-.
   ===================================================================================================== */
:root{ --bia-nuoc:#2E9AA3; }
@media (prefers-color-scheme: dark){ :root{ --bia-nuoc:#5FC3CB; } }

/* ---- thanh trên: biểu tượng (màn cấp 1), tiêu đề + dòng phụ, số đỏ trên nút */
.dau-logo{flex:none;width:44px;height:44px;display:grid;place-items:center;margin-left:2px}
.dau-logo img{width:38px;height:auto;display:block}
.dau-tieu-de{flex:1;min-width:0;padding:0 6px;display:flex;flex-direction:column;justify-content:center}
.dau-tieu-de h1{flex:none;padding:0;line-height:1.2}
.dau-tieu-de h1.dai{font-size:16px}
.dau-phu{font-size:12.5px;line-height:1.25;color:#C9CDEB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.nut-dau{position:relative}
.nut-dau .so-do{position:absolute;top:3px;right:1px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--do-hcl);color:#fff;font:700 11px/15px var(--noi-dung);border:2px solid var(--cham)}
.gui.loi .gv{background:var(--do-hcl);color:#fff}
.gui.mat-song .gv{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,196,107,.8)}

/* ---- tab đáy: thêm nút "Thêm" (button) và số đỏ ẩn được */
.hc-tab-day a,.hc-tab-day button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:var(--mo);text-decoration:none;font:600 11px var(--noi-dung);position:relative;background:none;border:0;cursor:pointer;min-height:50px;justify-content:center}
.hc-tab-day a.chon{color:var(--chinh)}
.hc-tab-day .so-do[hidden]{display:none}
.hc-tab-day .so-do{line-height:17px;text-align:center}
body.co-tab-day .thong-bao{bottom:calc(84px + env(safe-area-inset-bottom))}
body.co-chan main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
body.co-chan .thong-bao{bottom:calc(150px + env(safe-area-inset-bottom))}
body.co-sheet{overflow:hidden}
.chan{box-shadow:0 -6px 22px rgba(25,30,67,.08)}
.hc-sheet{animation:hc-len .18s ease-out}
@keyframes hc-len{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* ---- số, vòng, chip nhỏ */
.hc-so b small,.hc-vong b small{font-size:.6em;font-weight:700;opacity:.7;margin-left:1px}
.hc-hero .hc-so b small{color:#C9CDEB;opacity:1}
.hc-muc .dem.xanh{color:var(--xanh)} .hc-muc .dem.do{color:var(--do)}
button.hc-hang{border:0;cursor:pointer;font-family:var(--tieu-de)}
.hc-bang tr.chon td{background:var(--vang-nhat)}
.hc-chon.nho{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hc-chon.nho>button{min-height:44px;padding:0 12px;font-size:13.5px;border-radius:10px}
.hc-chon.doc{flex-direction:column}
.hc-chon.doc>button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:62px;padding:10px 14px;text-align:left;width:100%}
.hc-chon.doc>button span{font-weight:400;font-size:13px;opacity:.85}
.chu-do-sang{color:#FF9E94!important} .chu-xanh-sang{color:#9BE0A6!important}

/* ---- dòng cơ hội – rủi ro – việc (màu theo nhóm) */
.hc-dong-co-hoi{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4;padding:8px 10px;border-radius:10px;margin:10px 0 0;background:var(--nen-2);color:var(--chu-2)}
.hc-dong-co-hoi svg{flex:none;margin-top:2px}
.hc-dong-co-hoi b{font-weight:800}
.hc-dong-co-hoi i{font-style:normal;opacity:.75}
.hc-dong-co-hoi.do{background:var(--do-nhat);color:var(--do-dam)} .hc-dong-co-hoi.do svg{color:var(--do)}
.hc-dong-co-hoi.xanh{background:var(--xanh-nhat);color:var(--xanh-dam)} .hc-dong-co-hoi.xanh svg{color:var(--xanh)}
.hc-dong-co-hoi.cam{background:var(--cam-nhat);color:var(--cam-dam)} .hc-dong-co-hoi.cam svg{color:var(--cam)}
@media (prefers-color-scheme: dark){ .hc-dong-co-hoi.do{color:var(--do)} .hc-dong-co-hoi.xanh{color:var(--xanh)} .hc-dong-co-hoi.cam{color:#FFC46B} }

/* ---- tấm bìa ảnh (ảnh mặt tiền / tranh minh hoạ) + tên đè lên */
.hc-bia{position:relative;aspect-ratio:16/9;max-height:280px;background:var(--cham-dam);overflow:hidden}
.hc-bia>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.hc-bia>img[data-tep]:not(.co){opacity:0}
.hc-bia.minh-hoa>img{object-position:center 28%}
.hc-bia::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,30,67,.05) 30%,rgba(25,30,67,.9) 100%);pointer-events:none}
.hc-bia-chu{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;align-items:flex-end;gap:12px;color:#fff}
.hc-bia-chu .hc-hang.lon{flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.95),0 4px 14px rgba(0,0,0,.25)}
.hc-bia-nut{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:99px;border:0;
  background:rgba(25,30,67,.72);color:#fff;font:700 13px var(--noi-dung);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hc-bia.minh-hoa .hc-bia-nut{background:var(--vang);color:var(--cham-dam)}

/* ---- bước của lượt ghé (Check-in → Ảnh → … → Check-out) */
.hc-buoc{display:flex;list-style:none;margin:12px 0 2px;padding:0;gap:2px;counter-reset:buoc}
.hc-buoc li{flex:1;min-width:0;position:relative;text-align:center;font:600 11.5px/1.2 var(--noi-dung);color:var(--mo);padding-top:30px}
.hc-buoc li::before{counter-increment:buoc;content:counter(buoc);position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;box-sizing:border-box;
  background:var(--the);border:2px solid var(--vien);display:grid;place-items:center;font:800 12px/20px var(--tieu-de);color:var(--mo);z-index:1}
.hc-buoc li::after{content:"";position:absolute;top:11px;left:calc(-50% + 13px);right:calc(50% + 13px);height:2px;background:var(--vien)}
.hc-buoc li:first-child::after{display:none}
.hc-buoc li.xong{color:var(--xanh)} .hc-buoc li.xong::before{content:"✓";background:var(--xanh);border-color:var(--xanh);color:#fff} .hc-buoc li.xong::after{background:var(--xanh)}
.hc-buoc li.dang{color:var(--cam-dam);font-weight:800} .hc-buoc li.dang::before{border-color:var(--cam);color:var(--cam-dam);background:var(--cam-nhat)}
@media (prefers-color-scheme: dark){ .hc-buoc li.dang{color:#FFC46B} }

/* ---- thanh nút dính đáy (màn đang ở quán): 4 nút biểu tượng + chữ */
.hc-thanh-nut{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hc-nut-o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;padding:6px 4px;border-radius:14px;
  border:1.5px solid var(--vien);background:var(--the);color:var(--chinh);font:700 12.5px/1.1 var(--noi-dung);text-decoration:none;cursor:pointer;touch-action:manipulation}
.hc-nut-o:active{transform:translateY(1px)}
.hc-nut-o.chinh{background:var(--vang);border-color:var(--vang);color:var(--cham-dam);box-shadow:0 3px 0 var(--vang-dam)}
.hc-nut-o.cham{background:var(--cham);border-color:var(--cham);color:#fff}
.hc-nut-o.mo{opacity:.5}
.hc-nut-o .so-do{position:absolute;top:4px;right:6px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;font:800 11px/19px var(--noi-dung);background:var(--do);color:#fff}
.hc-nut-o .so-do.xanh{background:var(--xanh)}
@media (prefers-color-scheme: dark){ .hc-nut-o{color:var(--chu)} .hc-nut-o.chinh{color:var(--cham-dam)} }

/* ---- dòng sản phẩm có vạch màu dòng bia + ô đếm − số + */
.hc-sp{display:block;padding:12px 12px 12px 18px;border-bottom:1px solid var(--vien-2);position:relative;background:var(--the);transition:background .15s}
.hc-sp-ten{font-weight:800;font-size:15px;line-height:1.3;overflow-wrap:anywhere;color:var(--chu)}
.hc-sp-duoi{display:flex;align-items:center;gap:10px;margin-top:6px}
.hc-sp-giua .p b{color:var(--chu);font-weight:700}
.hc-sp::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:5px;border-radius:0 4px 4px 0;background:var(--dong,var(--vien))}
.hc-ds>.hc-sp:last-child{border-bottom:0}
.hc-sp-giua{flex:1;min-width:0}
.hc-sp-giua .t{font-weight:700;font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.hc-sp-giua .p{font-size:12.5px;color:var(--mo);margin-top:2px}
.hc-sp-truoc{display:inline-block;margin-top:6px;font-size:12px;line-height:1.3;color:var(--chinh);background:var(--chinh-nhat);padding:2px 8px;border-radius:99px}
.hc-sp.co-so{background:var(--vang-nhat)}
.hc-so-buoc{display:flex;align-items:center;gap:4px;flex:none}
.hc-so-buoc button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--vien);background:var(--the);color:var(--chinh);font:800 22px/1 var(--tieu-de);cursor:pointer;touch-action:manipulation;padding:0}
.hc-so-buoc button.cong{background:var(--cham);border-color:var(--cham);color:#fff}
.hc-so-buoc input{width:50px;min-height:44px;height:44px;padding:0 2px;text-align:center;font:800 18px var(--tieu-de);border-radius:10px}
.hc-sp.co-so .hc-so-buoc input{border-color:var(--vang)}
.dh-vach{flex:none;width:5px;align-self:stretch;border-radius:4px;background:var(--dong,var(--vien));margin:-2px 0}

/* ---- khối mở rộng (hồ sơ đầy đủ, hàng tặng…) */
.hc-mo-rong{background:var(--the);border:1px solid var(--vien-2);border-radius:var(--r-lon);box-shadow:var(--bong-1);margin:16px 0 12px;overflow:hidden}
.hc-mo-rong>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;cursor:pointer;font:800 16px var(--tieu-de);color:var(--chu)}
.hc-mo-rong>summary::-webkit-details-marker{display:none}
.hc-mo-rong>summary>svg:first-child{color:var(--chinh);flex:none}
.hc-mo-rong>summary span{flex:1}
.hc-mo-rong>summary i{font:600 12.5px var(--noi-dung);font-style:normal;color:var(--mo)}
.hc-mo-rong>summary>svg:last-child{color:var(--mo);transition:transform .2s;flex:none}
.hc-mo-rong[open]>summary>svg:last-child{transform:rotate(180deg)}
.hc-mo-rong-than{padding:0 16px 12px;border-top:1px solid var(--vien-2)}
.hc-mo-rong-than h4{margin:16px 0 0;padding-top:1px;font:700 11.5px/1.45 var(--tieu-de);letter-spacing:.08em;text-transform:uppercase;color:var(--chinh)}

/* ---- công tắc bật / tắt */
.hc-cong-tac{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;margin:0;font:600 14.5px var(--noi-dung);color:var(--chu)}
.hc-cong-tac input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.hc-cong-tac i{position:relative;width:52px;height:30px;border-radius:99px;background:var(--vien);transition:background .15s;flex:none}
.hc-cong-tac i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.hc-cong-tac input:checked+i{background:var(--xanh)} .hc-cong-tac input:checked+i::after{transform:translateX(22px)}
.hc-cong-tac input:focus-visible+i{outline:3px solid var(--chinh-nhat)}
.hc-cong-tac input:disabled+i{opacity:.5}

/* =============== app bán hàng — trang chủ */
.tc-chao{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:4px 2px 10px;font-size:16px}
.tc-chao .hc-phu{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-hero-dong{display:flex;align-items:center;gap:16px;margin:12px 0 2px}
.tc-hero-chu{min-width:0;flex:1}
.hc-hero .tc-hero-chu h2{margin:0 0 3px}
.tc-hero-chu p{overflow-wrap:anywhere}
.tc-hero-ch{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:700 12.5px/1.2 var(--noi-dung);color:var(--cham-dam);background:var(--vang);padding:6px 10px;border-radius:99px;text-decoration:none}
.tc-hero-ch::after{content:"";position:absolute;inset:-9px -4px}   /* vùng bấm ≥ 44 px, viên thuốc vẫn gọn */
.hc-hero .hc-so-luoi{margin-bottom:2px}
.tc-hero .hc-so{padding:10px 6px 9px}
.tc-hero .hc-nut.phu{margin-top:10px}
.tc-thanh{display:block;height:4px;border-radius:99px;background:rgba(255,255,255,.16);margin:7px 8px 0;overflow:hidden}
.tc-thanh>i{display:block;height:100%;background:var(--vang);border-radius:inherit}
.tc-nhan{font:700 11.5px/1.45 var(--tieu-de);letter-spacing:.08em;text-transform:uppercase;color:var(--vang-chu);margin:0 0 6px;padding-top:1px}
.tc-tiep{padding:14px 16px}
.tc-tiep-ten{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--chu)}
.tc-tiep-ten>span:last-child{min-width:0;display:flex;flex-direction:column}
.tc-tiep-ten b{font:800 18px/1.25 var(--tieu-de);overflow-wrap:anywhere}
.tc-tiep-ten .hc-phu{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-tiep .hc-nhom-nut{margin:12px 0 0}
.tc-dang-o h3{font:800 18px/1.25 var(--tieu-de)}
.tc-dang-o svg{color:var(--vang-chu);flex:none;align-self:center}
.tc-dh{padding:12px 14px} .tc-dh .hc-the-dau{align-items:center} .tc-dh .hc-the-dau>div{flex:1;min-width:0} .tc-dh .hc-the-dau>svg{color:var(--mo);flex:none}
.luoi-o{margin-bottom:4px}
.o-duoi{min-height:66px}
.chan-tc{margin-top:18px}

/* =============== viếng thăm */
.vt-ngay{margin-bottom:12px}
.vt-tom .hc-gian{align-items:center}
.vt-tom-ten{margin:0;font:800 17px/1.25 var(--tieu-de);overflow-wrap:anywhere}
.vt-tom .hc-so{background:var(--the)}
.vt-tom .hc-vong::before{background:var(--chinh-nhat)}
.vt-the{padding:12px 14px}
.vt-dau{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--chu)}
.vt-ten{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.vt-ten b{font:800 16.5px/1.25 var(--tieu-de);overflow-wrap:anywhere}
.vt-ten .hc-hang-ngang{gap:6px}
.vt-dong{display:flex;gap:7px;align-items:flex-start;font-size:13.5px;line-height:1.4;margin-top:10px;color:var(--chu-2)}
.vt-dong+.vt-dong{margin-top:4px}
.vt-dong svg{flex:none;margin-top:2px;color:var(--chinh)}
.vt-dong.mo{color:var(--mo)} .vt-dong.mo svg{color:var(--mo)}
.vt-dong b{color:var(--chu)}
.vt-nut{margin:12px 0 0}
.vt-nut .vt-cd{flex:0 0 48px;padding:0}
#dong-xep button{font-size:13px}

/* =============== màn điểm bán */
.dm-dau{margin:-12px -16px 12px}
.dm-ten{min-width:0;flex:1}
.dm-ten h2{margin:0;font:800 22px/1.2 var(--tieu-de);color:#fff;text-transform:none;letter-spacing:-.01em;overflow-wrap:anywhere}
.dm-ten p{margin:4px 0 0;font-size:13px;line-height:1.35;color:#D9DCF0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-chip{padding:12px 16px 0;gap:6px}
.dm-gps{margin-top:2px}
.dm-dang{padding:12px 14px}
.dm-dang-chu{font:800 16px var(--tieu-de)}
.dm-so .hc-so b{font-size:20px}
.dm-so .hc-so span{font-size:11.5px}
.dm-ch .hc-dong{align-items:flex-start}
.dm-anh .hc-anh-luoi{margin-top:0}
.hc-anh-them{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.hc-anh-luoi img[data-tep]:not(.co){opacity:.35}
.dm-anh-mc{border-style:solid;color:var(--mo);font-weight:600}
.dm-hen{margin-top:14px}
.dm-hang-thu{display:flex;align-items:center;gap:8px;min-height:30px;margin:0 0 10px;font-weight:700}
.dm-nhac{display:flex;align-items:center;gap:6px;font:700 13px/1.3 var(--noi-dung);margin:0 2px 8px}
.dm-nhac.cam{color:var(--cam-dam)} .dm-nhac.xanh{color:var(--xanh)}
@media (prefers-color-scheme: dark){ .dm-nhac.cam{color:#FFC46B} }
.dm-cq .hc-dong{padding:10px 0}

/* =============== đặt hàng, ghi tồn, đơn hàng */
.dh-gio{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 2px 8px;font-size:14px;color:var(--mo)}
.dh-gio b{font:800 22px var(--tieu-de);color:var(--chu);font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-po{padding:12px 14px}
.dh-po .hc-gian{flex-wrap:wrap}
.dh-po b{display:inline-flex;align-items:center;gap:6px}
.dh-xong{text-align:center;padding:6px 0 10px}
.dh-xong svg{color:var(--xanh)}
.dh-xong h3{margin:8px 0 6px}
.dh-xong p{margin:0 0 8px}
.dh-tong{background:var(--nen-2)}
.dh-tom{padding:12px 14px 4px}
.dh-tom .hc-so-luoi{margin:4px 0 8px}
.dh-tom .hc-so{background:var(--the)}
label.ton-het{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding-right:8px;font-size:13.5px;color:var(--mo);cursor:pointer}
label.ton-het input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--do)}
/* 0.9.2 · ghi tồn theo date (rà soát UX A1): hàng date chỉ hiện khi số > 0 · chip tháng kéo ngang (chạm, không gõ) · thiếu date → viền đỏ + nháy */
.ton-nhanh{margin:0 0 8px}
.ton-date-cu{margin:0 0 8px}
.ton-date{display:none;margin-top:8px}
.ton-sp.co-so:not(.het) .ton-date{display:block}
.ton-date-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;color:var(--mo)}
.ton-date-phu{display:flex;gap:2px;flex:none}
.ton-date-phu button{min-height:40px;padding:0 8px;border:0;background:none;color:var(--chinh);font:700 12.5px var(--noi-dung);cursor:pointer;border-radius:8px}
.ton-date-phu button.chon{background:var(--cham);color:#fff}
.ton-date-chip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 1px 2px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.ton-date-chip::-webkit-scrollbar{display:none}
.ton-date-chip button{flex:none;min-width:62px;min-height:44px;padding:0 10px;border-radius:12px;border:1.5px solid var(--vien);background:var(--the);color:var(--chu);font:800 15px/1.1 var(--tieu-de);cursor:pointer;scroll-snap-align:start;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
.ton-date-chip button small{font:600 10.5px var(--noi-dung);color:var(--mo)}
.ton-date-chip button.cu{border-style:dashed;border-color:var(--cham)}
.ton-date-chip button.qua-han{color:var(--do)}
.ton-date-chip button.chon{background:var(--cham);border-color:var(--cham);color:#fff}
.ton-date-chip button.chon small{color:#fff}
.ton-sp.thieu-date .ton-date{outline:2px solid var(--do);outline-offset:4px;border-radius:12px}
.hc-nut.chinh.thieu{background:var(--nen-2);color:var(--chu);box-shadow:none;border-color:var(--vien)}
.ton-nam{margin:4px 0 10px;flex-wrap:nowrap} .ton-nam>button{flex:1;min-width:0;padding:0 4px}
.ton-luoi-thang{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}
.ton-luoi-thang button{min-height:48px;border-radius:12px;border:1.5px solid var(--vien);background:var(--the);color:var(--chu);font:800 15px var(--tieu-de);cursor:pointer}
.ton-luoi-thang button.qua{color:var(--do)}
.ton-luoi-thang button.chon{background:var(--cham);border-color:var(--cham);color:#fff}
.ton-luoi-thang button:disabled{opacity:.3;cursor:default}
.ton-ngay{margin:0 0 12px;font-size:14px} .ton-ngay summary{cursor:pointer;color:var(--chinh);font-weight:700;min-height:44px;display:flex;align-items:center}
.ton-ngay-o{display:flex;gap:8px;align-items:center} .ton-ngay-o input{flex:1;min-width:0}
@keyframes hc-nhay{0%,100%{box-shadow:0 0 0 0 transparent}30%,70%{box-shadow:0 0 0 4px var(--do)}}
.nhay{animation:hc-nhay .8s ease 2}
.lap-bb{padding-top:10px}

/* =============== khách hàng */
.kh-loc{display:flex;gap:8px;margin:0 0 10px}
.kh-loc select{flex:1;min-width:0;min-height:44px;height:44px;padding:0 8px;font-size:14px;border-radius:12px}
.kh-bia{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:12px;border:1.5px solid var(--vien);background:var(--the);color:var(--chu);font:600 14px var(--noi-dung);cursor:pointer}
.kh-bia.chon{background:var(--cham);border-color:var(--cham);color:#fff}
.kh-dem{margin:0 2px 8px;display:flex;align-items:center;gap:6px;min-height:28px}
.kh-hang{border-radius:12px;font:800 17px var(--tieu-de)}
.kh-hang.A{background:var(--vang);color:var(--cham-dam)} .kh-hang.B{background:var(--cham);color:#fff} .kh-hang.C{background:var(--chinh-nhat);color:var(--chinh)} .kh-hang.D,.kh-hang.X{background:var(--vien);color:var(--mo)}
.kh-chip{margin-top:6px;gap:4px}
.kh-chip .hc-chip{height:20px;font-size:11px;padding:0 7px}
.kh-chip:empty{display:none}
.kh-dong .hc-dong-cuoi b{font-size:14px}
.kh-dong .hc-dong-cuoi .hc-phu{margin:0;font-size:11.5px}

/* =============== chấm công, giám sát, báo cáo, thông báo, đồng bộ */
.cc-chip{margin-top:6px;gap:4px}
.cc-chip .hc-chip{height:22px;font-size:11.5px}
.hc-tg-muc .nd a{color:var(--chu);text-decoration:none}
.gs-ngay input{max-width:230px}
.gs-cc .hc-vong::before{inset:6px}
.gs-tien{font:800 18px var(--tieu-de);white-space:nowrap;font-variant-numeric:tabular-nums}
.bc-bd{margin:0}
/* 0.8.1 — 3 số tuần (Báo cáo của tôi): mũi tên so tuần trước */
.bc-tuan .hc-so i{display:block;font-style:normal;font-size:11.5px;font-weight:700;margin-top:4px;line-height:1.2}
.bc-len{color:var(--xanh,#1B8A4C)} .bc-xuong{color:var(--do,#C8322B)} .bc-bang{color:var(--mo);font-weight:600}
.bc-bd figcaption{font-size:13.5px;margin-bottom:10px;min-height:20px}
.bc-bd svg{width:100%;height:120px;display:block;overflow:visible}
.bc-cot{cursor:pointer}
.bc-cot path{fill:var(--chinh);transition:fill .15s}
.bc-cot.nay path{fill:var(--vang)}
.bc-cot.chon path{fill:var(--chu)}
.bc-rong{fill:var(--vien)}
.bc-truc{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mo);margin-top:6px}
.tb-dong.moi{background:var(--vang-nhat)}
.tb-dong.moi .t{font-weight:800}
.tb-doc-het{color:#fff!important}
.db-tieu-de{margin:0;font:800 20px/1.2 var(--tieu-de)}
.db-loi{background:var(--do-nhat)}
.the-noi{border-radius:var(--r-lon);border-color:var(--vien-2);box-shadow:var(--bong-2)}

/* =============== menu ☰ */
.ngan-dau>div{min-width:0;flex:1}
.ngan-dau b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ngan-dong{margin-left:auto}
.ngan h3{font-family:var(--tieu-de)}
.m-muc>svg:last-child{color:var(--mo)}
.m-ghi.cho{background:var(--vang);color:var(--cham-dam)}
.m-sap-co>summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:46px;padding:0 14px 0 18px;color:var(--mo);cursor:pointer;font-size:16px}
.m-sap-co>summary::-webkit-details-marker{display:none}
.m-sap-co>summary svg{color:#A09A8C;flex:none} .m-sap-co>summary span{flex:1}
.m-sap-co .m-muc{padding-left:30px;min-height:44px;font-size:15px}
.ngan-ban{font-size:12px;color:var(--mo);text-align:center;margin:18px 0 0}

/* =============== đăng nhập: điện thoại (tranh trên – form dưới) · máy tính ≥ 900 px (2 cột: tranh | form) */
.dang-nhap{max-width:none;padding:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--nen)}
.dn-anh{height:min(46vh,400px);min-height:250px;margin:0;border-radius:0 0 30px 30px;border-bottom:5px solid var(--vang);box-shadow:var(--bong-2)}
.dn-chu{padding:14px 24px 18px}
.dn-phai{flex:1;display:flex;flex-direction:column;width:100%;max-width:440px;margin:0 auto;padding:22px 20px calc(14px + env(safe-area-inset-bottom))}
.dn-form{display:block}
.dn-tieu-de{margin:0;font:800 26px/1.2 var(--tieu-de);color:var(--chu);text-transform:none;letter-spacing:-.01em}
.dn-loi-chao{margin:4px 0 18px}
.dn-mk{position:relative}
.dn-mk input{padding-right:72px}
.dn-mk .hc-nut{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.dn-form .hc-nut.to{margin-top:6px}
.dn-quen{text-align:center;margin:14px 0 0}
.dn-chan{margin-top:auto;padding-top:20px}
@media (min-width:900px){
  .dang-nhap{flex-direction:row}
  .dn-anh{flex:1.1;height:auto;min-height:100vh;border-radius:0;border-bottom:0;border-right:6px solid var(--vang);box-shadow:none}
  .dn-anh>img{object-position:center 40%}
  .dn-chu{padding:40px 48px 44px;text-align:left;background:linear-gradient(180deg,rgba(25,30,67,0) 0%,rgba(25,30,67,.92) 45%)}
  .dn-chu .logo-anh{height:64px;margin:0 0 10px}
  .dn-chu .khau-hieu{font-size:19px}
  .dn-phai{flex:1;max-width:none;padding:48px 40px 24px;justify-content:center}
  .dn-form{width:100%;max-width:420px;margin:auto;background:var(--the);border:1px solid var(--vien-2);border-radius:26px;padding:36px 34px 28px;box-shadow:var(--bong-2)}
  .dn-chan{margin-top:0;padding-top:24px}
}

/* =============== màn văn phòng (hệ thống / cấu hình) */
@media (min-width:900px){
  main.hc-may{padding-left:32px;padding-right:32px}
  .ht-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .ht-luoi>.hc-the{margin:0}
}
.ht-nhom-dau{display:flex;align-items:center;gap:10px;margin:24px 2px 10px}
.ht-nhom-dau h2{margin:0;font:800 18px var(--tieu-de);color:var(--chu);text-transform:none;letter-spacing:0}
.ht-nhom-dau .hc-chip{margin-left:auto}
.ht-ch{padding:14px 16px}
.ht-ch h3{margin:0;font:800 15.5px/1.3 var(--tieu-de)}
.ht-ch .ht-khoa{font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mo);margin-top:2px;overflow-wrap:anywhere}
.ht-ch .ht-ghi{font-size:13.5px;color:var(--chu-2);margin:8px 0 10px;line-height:1.45}
.ht-ch .ht-sua{font-size:12px;color:var(--mo);margin-top:8px}
.ht-ch.khoa{background:var(--nen-2)}
.ht-o{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ht-o input[type=number],.ht-o input.so{max-width:160px;font-weight:700}
.ht-o input[type=time],.ht-o input.gio{max-width:130px;font-weight:700;font-variant-numeric:tabular-nums}
.ht-don-vi{color:var(--mo);font-size:14px}
.ht-luu{min-height:44px}
.ht-nguong td,.ht-nguong th{vertical-align:middle}
.ht-nguong input{min-height:40px;height:40px;max-width:90px;padding:0 8px;font-weight:700}
.ht-hd textarea{min-height:76px;font-size:14px}
.ht-hd label{display:flex;align-items:center;gap:8px;margin:10px 0 6px;color:var(--chu);font-weight:700}
.ht-json{font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:110px}
.ht-khoa-nhan{display:inline-flex;align-items:center;gap:6px}
.ht-tim{max-width:520px}

/* ---- v1.1 vòng sửa 1 (27/09): chữ trong dòng danh sách xuống dòng đúng; số dài tự thu cỡ; nút vuông; kẹp 2 dòng */
.hc-dong-giua .t,.hc-dong-giua .p{display:block}
.hc-so b.dai{font-size:19px} .hc-so b.rat-dai{font-size:16px}
.hc-nhom-nut>.nut-vuong{flex:0 0 56px;padding:0}
.hai-dong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vt-ngay a small{font-weight:600;font-size:12px;opacity:.75;margin-left:3px}
.bc-max{white-space:nowrap}
.hc-dong-giua .p.hai-dong{display:-webkit-box}
.hc-kv a{color:var(--chinh);font-weight:700}

/* =====================================================================================================
   PHẦN 5 — bổ sung v1.2 (28/09/2026, rà soát trải nghiệm theo từng vai). CHỈ THÊM.
   Luật mới: vùng bấm ≥ 44 px · chữ ≥ 4,5:1 (chữ cam dùng --cam-dam, chữ phụ --mo) · nhãn CHỮ HOA line-height ≥ 1,45.
   ===================================================================================================== */
/* ---- thanh trên: chỗ trống thay nút ☰ ở màn bắt buộc (đổi mật khẩu lần đầu) */
.dau-trong{flex:none;width:10px}
/* ---- tấm hỏi lý do (HCL.hoiLyDo): chip lý do chọn nhanh (chọn nhiều được) + ô ghi — dùng trước mọi quyết định một chạm */
.hc-sheet-phu{font-size:14.5px;margin:-4px 0 12px}
.hc-ly-do{margin:0 0 12px}
.hc-ly-do>button{min-height:44px;font-size:14px;text-align:left}
/* ---- đặt hàng: hàng chưa có giá (khoá ô số), tổng sau chiết khấu, dòng lỗi chặn gửi */
.hc-sp.chua-gia .hc-sp-ten{color:var(--mo)}
.hc-sp.chua-gia::before{opacity:.4}
.hc-sp-chua-gia{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--cam-dam)}
.hc-so-buoc.tat{opacity:.4}
.hc-so-buoc button:disabled,.hc-so-buoc input:disabled{cursor:not-allowed}
.dh-gio-tien{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.dh-gio-tien small{font:700 12.5px/1.3 var(--noi-dung);color:var(--xanh);white-space:nowrap}
.dh-chan-loi{margin:-2px 2px 8px;font:700 13px/1.35 var(--noi-dung);color:var(--do)}
/* ---- đơn bị máy chủ từ chối (Đơn hàng, Đồng bộ, trang chủ): đỏ, có lý do, 2 việc: Sửa lại đơn / Bỏ đơn này */
.dh-loi .dh-loi-ly-do{margin:10px 0 8px}
.dh-loi .hc-nhom-nut{margin:10px 0 0}
.db-loi .hc-dong-giua .t .hc-chip{margin-left:4px}
.db-nut{margin:10px 0 2px;flex-wrap:wrap}
.db-nut>*{flex:0 1 auto}
.tc-don-loi .tc-nhan{color:var(--do)}
.tc-don-loi svg{color:var(--do);flex:none;align-self:center}
/* ---- chấm công đội: người nghỉ (không có tuyến ngày đó) */
.gs-nghi .hc-dong-giua .t{color:var(--mo)}
/* ---- màn "Có lỗi" */
.man-loi-nut{justify-content:center;max-width:360px;margin:0 auto 8px}
/* ---- máy tính: thanh tab đáy + chân nút nằm đúng cột 720 px của nội dung, không kéo hết bề ngang màn hình */
@media (min-width:760px){
  .hc-tab-day{left:50%;right:auto;width:720px;transform:translateX(-50%);border:1px solid var(--vien-2);border-bottom:0;border-radius:18px 18px 0 0}
  body:not(:has(main.hc-may)) .chan{left:50%;right:auto;width:720px;transform:translateX(-50%);border:1px solid var(--vien);border-bottom:0;border-radius:18px 18px 0 0}
}

/* =====================================================================================================
   PHẦN 6 — bổ sung v1.3 (28/09/2026, bản 0.8). CHỈ THÊM. Bản web điều hành (máy tính) nằm ở web/web.css.
   Logo mới "Hai Củ Lạc ONE": màn chờ mở app, màn đăng nhập (logo dọc trên nền chàm), biểu tượng ở thanh trên / menu.
   Khối "HÔM NAY LÀM GÌ?" đầu trang chủ người bán hàng (lớp hn-*).
   ===================================================================================================== */
/* ---- màn chờ mở app (index.html vẽ sẵn trong #goc; app vẽ màn đầu là tự mất) */
.hc-cho-mo{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:radial-gradient(120% 80% at 50% 20%,#36418C 0%,var(--cham) 45%,var(--cham-dam) 100%)}
.hc-cho-mo img{width:min(56vw,230px);height:auto;animation:hc-hien .45s ease-out both}   /* logo dọc: rộng 160–240 px */
.hc-cho-mo-vach{position:relative;display:block;width:120px;height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.hc-cho-mo-vach::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:inherit;background:var(--vang);animation:hc-chay 1.1s ease-in-out infinite}
@keyframes hc-hien{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes hc-chay{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion: reduce){ .hc-cho-mo img,.hc-cho-mo-vach::after{animation:none} }
/* ---- đăng nhập: logo dọc trên nền chàm (thay tranh linh vật) */
.dn-anh.dn-thuong-hieu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(16px + env(safe-area-inset-top)) 24px 22px;
  background:radial-gradient(120% 90% at 50% 0%,#36418C 0%,var(--cham) 48%,var(--cham-dam) 100%)}
.dn-thuong-hieu::after{content:"∞";position:absolute;right:-12px;bottom:-64px;font:900 200px/1 var(--tieu-de);color:rgba(249,189,37,.08);pointer-events:none}
.dn-logo-khung{position:relative;z-index:1;display:flex;justify-content:center;min-height:0}
.dn-logo{display:block;width:auto;height:min(29vh,250px);max-width:100%}
.dn-thuong-hieu .khau-hieu{position:relative;z-index:1;margin:0;color:#E6E8F5;font-size:14px;text-align:center}
.dn-thuong-hieu .khau-hieu em{color:var(--vang);font-style:normal;font-weight:600}
@media (min-width:900px){
  .dn-anh.dn-thuong-hieu{gap:18px;padding:48px}
  .dn-logo{height:min(46vh,380px)}
  .dn-thuong-hieu .khau-hieu{font-size:19px;max-width:520px}
}
/* ---- biểu tượng mới trên thanh trên / đầu menu */
.dau-logo img{width:40px}
.ngan-dau img{object-fit:contain;padding:0;background:none;border-radius:0}   /* biểu tượng đặt thẳng trên nền chàm (không thêm viền / nền trắng) */
/* ---- "HÔM NAY LÀM GÌ?" (gợi ý hành động xếp sẵn, đầu trang chủ người bán hàng) */
.hn-khoi{margin:2px 0 16px}
.hn-dau{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 2px 10px}
.hn-dau h2{margin:0;padding-top:1px;font:800 13px/1.45 var(--tieu-de);letter-spacing:.08em;text-transform:uppercase;color:var(--chinh)}
.hn-cu{margin-left:auto}
.hn-ds{list-style:none;margin:0;padding:0}
.hn-ds:empty{display:none}
.hn-the{padding:14px 14px 4px;margin-bottom:10px;transition:opacity .16s ease,transform .16s ease}
.hn-the.di{opacity:0;transform:translateX(24px)}
.hn-the.da-nhan{border-left:4px solid var(--xanh)}
.hn-the-dau{display:flex;align-items:flex-start;gap:12px}
.hn-so{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--cham);color:#fff;font:800 14px/1 var(--tieu-de)}
.hn-the.vien-vang .hn-so{background:var(--vang);color:var(--cham-dam)}
.hn-chu{flex:1;min-width:0}
.hn-chu h3{margin:3px 0 0;font:800 16.5px/1.3 var(--tieu-de);letter-spacing:.01em;overflow-wrap:anywhere}
.hn-tieu{margin-top:2px;font:700 12.5px/1.4 var(--noi-dung);color:var(--chinh)}
.hn-ly-do{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--chu-2)}
.hn-chac{height:20px;padding:0 8px;margin-left:2px;font-size:11px;vertical-align:1px}
.hn-dang{flex:none;margin-top:3px}
.hn-nut{margin:12px 0 2px}
.hn-nut .hc-nut{min-height:48px;padding:0 12px;gap:6px;font-size:15px;white-space:nowrap}
.hn-phu{display:flex;justify-content:flex-end;gap:4px;margin:0 -6px}
.hn-the[hidden],.hn-them[hidden]{display:none!important}
.hn-them{margin-top:2px}
.hn-phu .hc-nut{color:var(--mo);font-weight:700}
.hn-rong{display:flex;align-items:center;gap:8px;margin:0 2px 10px;font-size:14px;color:var(--mo)}
.hn-rong svg{flex:none;color:var(--xanh)}
.hn-chan{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:var(--chinh-nhat);font-size:13.5px;color:var(--chu)}
.hn-chan b{font-weight:800}
.hn-tien-do .hc-thanh{margin:6px 0 0}
.hn-chon-ly-do>button{flex:1 1 calc(50% - 8px)}
/* ---- menu ☰: "Mở bản web" (người văn phòng) */
.m-muc.m-web svg{color:var(--cham)}

/* 0.9 · dòng báo khi ảnh nền bản đồ không tải được (lopNen trong app.js) */
.bd-loi-nen { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 900; background: rgba(255,255,255,.94); color: #202A72; border: 1px solid #FEC12B;
  border-radius: 10px; padding: 8px 12px; font: 600 13px/1.4 var(--chu, 'Be Vietnam Pro', system-ui, sans-serif); box-shadow: 0 2px 8px rgba(0,0,0,.12); pointer-events: none; }

/* 0.9 · thẻ module cuối trang chủ người không bán hàng (theModuleCuoiTrang) */
.tc-mod-khac { margin-top: 16px; }
.tc-mod-khac:empty { display: none; }

/* 0.9.1 · camera chụp ảnh tại quán (moCamera trong app.js): toàn màn hình, trên tấm trượt (40), dưới thông báo (50) */
.hc-cam { position: fixed; inset: 0; z-index: 45; background: #000; color: #fff; display: flex; flex-direction: column; }
.hc-cam [hidden] { display: none !important; }
.hc-cam video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.hc-cam-tren { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 10px 18px; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); font: 700 15px var(--noi-dung); }
.hc-cam-x { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; padding: 0; }
.hc-cam-duoi { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; min-height: 116px; padding: 26px 16px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7)); }
.hc-cam-chup { width: 72px; height: 72px; flex: none; border-radius: 50%; border: 5px solid #fff; background: var(--vang, #FEC12B); box-shadow: 0 0 0 3px rgba(0,0,0,.35); cursor: pointer; padding: 0; }
.hc-cam-chup:active { transform: scale(.94); }
.hc-cam-chup:disabled { opacity: .4; }
.hc-cam-xong { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.hc-cam-xong .hc-nut { flex: 1; }
.hc-cam-loi { position: absolute; left: 16px; right: 16px; bottom: calc(140px + env(safe-area-inset-bottom)); margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.7); text-align: center; font: 600 14px/1.4 var(--noi-dung); }

/* 0.9.3 (k4): màn "Máy đang chờ duyệt" (MAN.mayCho) — máy mới chờ quản lý duyệt: biểu tượng lớn, chữ giữa, nút to */
.may-cho{max-width:520px;margin:8px auto 16px;padding:22px 18px;text-align:center}
.may-cho-icon{width:84px;height:84px;margin:0 auto 12px;border-radius:99px;display:flex;align-items:center;justify-content:center;background:var(--cam-nhat);color:var(--cam)}
.may-cho h2{margin:0 0 8px;font:800 20px/1.3 var(--tieu-de);color:var(--chu)}
.may-cho>p{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--chu)}
.may-cho .hc-kv,.may-cho .hc-truong,.may-cho .hc-bao{text-align:left}
.may-cho .hc-truong{margin-top:14px}
.may-cho .hc-chon>button{flex:1 1 180px}
.may-cho .hc-nut.khoi{margin-top:10px}
/* ---- 0.9.3 (k7) · số trong ô / thẻ KPI không bao giờ bị cắt: app.js vuaSo() thu nhỏ chữ tới khi vừa (tối thiểu 12 px); nhỏ nhất vẫn không vừa → xuống dòng */
.so-vua{text-overflow:clip!important}
.so-xuong-dong{white-space:normal!important;overflow-wrap:normal;word-break:normal;text-overflow:clip!important;overflow:visible!important}
.so-xuong-dong.so-ngat-bat-ky{overflow-wrap:anywhere}
.hc-muc .dem.cam{color:var(--cam-dam)}
/* ---- 0.9.3 (k7) · màn đặt hàng: ô tìm + "Quán hay lấy" + nhóm thu / mở (Bia tươi · keg / Lon / Chai / Nước / Hàng tặng – khác) */
.dh-tim{margin:14px 0 4px}
.dh-tim input::-webkit-search-cancel-button{cursor:pointer}
.dh-hay .hc-muc{margin-top:14px}
.dh-hay .hc-muc .dh-hay-phu{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mo)}
.dh-nhom{margin:10px 0}
.dh-nhom>summary{padding:0 14px;gap:10px}
.dh-nhom>summary>span{min-width:0;overflow-wrap:anywhere}
.dh-nhom>summary i{flex:none;max-width:52%;text-align:right;line-height:1.3}
.dh-nhom>summary i.co{color:var(--chinh);font-weight:700}
.dh-nhom>.dh-nhom-ds{margin:0;border:0;border-top:1px solid var(--vien-2);border-radius:0;box-shadow:none}
.dh-tim-rong{margin:8px 2px 12px}
.dh-gio #sl{min-width:0}
/* ---- 0.9.3 (k7) · ghi tồn theo NSX: dòng kết quả "NSX 08/2026 → HSD 08/2027 · còn 10 tháng" (màu theo mức date) */
.ton-kq{margin:8px 2px 0;font:700 13px/1.4 var(--noi-dung);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ton-kq .hc-chip{height:22px}
.ton-date-chip button.qua-han:not(.chon){color:var(--do);border-color:var(--do-nhat)}
.ton-luoi-chu{margin:-4px 2px 12px;font-size:12.5px}
.ton-luoi-thang button.qua:not(:disabled):not(.chon){color:var(--do)}