/* App Sale HSC – điện thoại trước. Xanh lá HSC, vàng làm điểm nhấn, đỏ = cảnh báo (hết hàng, dưới giá sàn). */
:root{
  color-scheme:light;
  --bg:#f3f6f4; --app:#ffffff; --fg:#14201a; --mute:#5b6b62; --line:#dfe7e2; --chip:#eef3f0;
  --brand:#0b5d3b; --brand-700:#084a2f; --brand-soft:#e3f1ea; --on-brand:#fff;
  --gold:#f2b632; --gold-soft:#fdf3dc;
  --red:#b42025; --red-soft:#fbe9e9; --orange:#b85f0b; --orange-soft:#fff1e2; --blue:#2d5aa6; --blue-soft:#e6edf9;
  --f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f);font-size:14px;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{margin:0;letter-spacing:-.01em}
.app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--app);position:relative;box-shadow:0 0 40px rgba(11,93,59,.08)}
.nho{color:var(--mute);font-size:12.5px;margin:2px 0 0}
.loi{color:var(--red);font-size:13px;min-height:1em;margin:0}
.so{font-variant-numeric:tabular-nums}

/* nút */
.nut{border:1px solid var(--line);background:var(--app);border-radius:10px;padding:10px 14px;font-weight:600}
.nut.chinh{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.nut.chinh:disabled{opacity:.6}
.nut.do{background:var(--app);border-color:var(--red);color:var(--red)}
.nut.nho-nut{padding:6px 10px;font-size:13px;border-radius:8px}
.nut-tron{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--app);display:grid;place-items:center;color:var(--brand)}
.nut-tron.quay svg{animation:quay 1s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}

/* đăng nhập */
.dn{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px 20px;background:linear-gradient(180deg,var(--brand-soft),var(--app) 55%)}
.dn-dau{text-align:center;margin-bottom:20px}
.dn-dau img{border-radius:16px}
.dn-dau h1{font-size:26px;margin-top:10px;color:var(--brand-700)}
.dn-dau p{color:var(--mute);margin:4px 0 0}
.the{background:var(--app);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px}
input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;font-weight:400;font-size:15px;width:100%}
textarea{min-height:70px;resize:vertical}

/* đầu trang + nav */
.dau{position:sticky;top:0;z-index:5;background:var(--app);border-bottom:1px solid var(--line);padding:14px 16px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.dau h1{font-size:20px}
.noi-dung{padding:12px 16px 96px}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;background:var(--app);border-top:1px solid var(--line);display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:6}
.nav button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:600;color:var(--mute);padding:4px 0}
.nav svg{width:24px;height:24px;fill:currentColor}
.nav button.on{color:var(--brand)}

/* chip lọc */
.loc{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.loc::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--mute)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tim{margin-bottom:10px}

/* thẻ */
.ds{display:flex;flex-direction:column;gap:10px}
.k{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--app)}
.k-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.k-ten{font-weight:600;font-size:14.5px;line-height:1.35}
.k-tong{text-align:right;flex:none}
.k-tong b{font-size:20px;display:block;line-height:1.1}
.k-tong span{font-size:11.5px;color:var(--mute)}
.nhom-tieu-de{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin:14px 2px 2px}
.dong{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px dashed var(--line);font-size:13.5px}
.dong:first-of-type{margin-top:8px}
.dong .phai{text-align:right}
.dong.phu{padding:3px 0 3px 12px;border:0;font-size:12.5px;color:var(--mute)}
.het{color:var(--red);font-weight:600}
.it{color:var(--orange);font-weight:600}

/* nhãn trạng thái */
.nhan{display:inline-block;border-radius:6px;padding:2px 7px;font-size:11.5px;font-weight:700;white-space:nowrap}
.nhan.xanh{background:var(--brand-soft);color:var(--brand-700)}
.nhan.vang{background:var(--gold-soft);color:#7a5600}
.nhan.cam{background:var(--orange-soft);color:var(--orange)}
.nhan.do{background:var(--red-soft);color:var(--red)}
.nhan.lam{background:var(--blue-soft);color:var(--blue)}
.nhan.xam{background:var(--chip);color:var(--mute)}

/* mốc thời gian cont */
.moc{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.moc div{background:var(--chip);border-radius:10px;padding:6px 8px}
.moc span{display:block;font-size:11px;color:var(--mute)}
.moc b{font-size:13.5px}
.moc .toi{background:var(--brand-soft)}

/* bảng giá sàn */
.bang{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
.bang th{font-size:11.5px;color:var(--mute);font-weight:600;text-align:right;padding:4px 6px;border-bottom:1px solid var(--line)}
.bang th:first-child,.bang td:first-child{text-align:left;padding-left:0}
.bang td{padding:7px 6px;text-align:right;border-bottom:1px dashed var(--line)}
.bang tr:last-child td{border-bottom:0}
.bang input{padding:7px 8px;font-size:14px;text-align:right;min-width:0}
.trong{color:#a4b0a9}

/* biểu mẫu ban hành */
.luoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.luoi label{min-width:0}
input[type=date]{min-width:0;-webkit-appearance:none;appearance:none;min-height:44px}
.luoi .rong{grid-column:1/-1}
.hang-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hang-nut .nut{flex:1}
.mo-ta{background:var(--gold-soft);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5}
.goi-y{border:1px solid var(--line);border-radius:10px;margin-top:4px;max-height:220px;overflow:auto}
.goi-y button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:9px 12px}
.goi-y button:last-child{border-bottom:0}
.quay-lai{background:none;border:0;color:var(--brand);font-weight:600;padding:0 0 10px}
.rong-tam{text-align:center;color:var(--mute);padding:40px 10px}

.thong-bao{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--fg);color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;z-index:20;max-width:90vw;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.thong-bao.loi-tb{background:var(--red)}

@media (min-width:600px){.app{margin-top:16px;border-radius:20px;min-height:calc(100vh - 32px);overflow:clip}.nav{bottom:16px;border-radius:0 0 20px 20px}}

/* lên đơn (GĐ2) */
.dong-sp.co{border-color:var(--brand);background:#fbfefc}
.dong-sp.duoi{border-color:var(--red);background:var(--red-soft)}
.hang-sp{display:flex;gap:10px;align-items:flex-end;margin-top:8px}
.buoc{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;flex:none}
.buoc button{width:40px;height:44px;border:0;background:var(--chip);font-size:20px;font-weight:600;color:var(--brand)}
.buoc input{width:56px;border:0;border-radius:0;text-align:center;padding:10px 4px;font-weight:600}
.o-gia{flex:1;min-width:0;font-size:12px}
.o-gia input{text-align:right;padding:10px}
.canh-bao{font-size:12.5px;margin-top:6px}
.canh-bao:empty{display:none}
.canh-bao.cam{color:var(--orange)}
.chan-don{position:sticky;bottom:72px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--app);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;box-shadow:0 -6px 20px rgba(11,93,59,.10)}
.chan-don b{display:block;font-size:18px}
.chan-don .nut{padding:12px 22px}

/* ô nhập giá bán / giá sàn theo kênh */
.luoi-gia{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:6px 8px;align-items:center;margin-top:8px}
.luoi-gia input{padding:8px;text-align:right;font-size:14px}

/* đi thị trường (GĐ3) */
.ban-do{height:230px;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;margin-bottom:4px;z-index:0;background:var(--chip)}
.ban-do.trong-bd{height:auto}
.buoc-ghe{display:flex;gap:6px;margin-bottom:10px}
.buoc-ghe span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:7px 4px;border-radius:8px;background:var(--chip);color:var(--mute)}
.buoc-ghe span.on{background:var(--brand);color:#fff}
.buoc-ghe span.xong{background:var(--brand-soft);color:var(--brand-700)}
.anh-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.anh{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--chip);display:block}
.anh img{width:100%;height:100%;object-fit:cover;display:block}
.anh button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff}
.anh.them{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed var(--line);font-size:26px;color:var(--brand);cursor:pointer;font-weight:600}
details.k > summary{list-style:none}
details.k > summary::-webkit-details-marker{display:none}

/* ===== gọn + căn thẳng (18/10/2026) ===== */
.ds-gon{gap:6px}
.ds-gon .k{padding:10px 12px}
.ten-sp{min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}
.ten-sp b{font-weight:600;font-size:14.5px}
.ten-sp .nhan{display:inline-block;margin-top:2px}
/* bộ +/−: cao 40, ô số co giãn, không thừa khoảng trắng */
.buoc{display:inline-flex;align-items:stretch;height:40px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;flex:none}
.buoc button{width:36px;height:auto;border:0;background:var(--chip);font-size:20px;font-weight:600;color:var(--brand);display:grid;place-items:center;padding:0}
.buoc input{flex:1;min-width:0;width:44px;height:100%;border:0;border-radius:0;text-align:center;padding:0 2px;font-weight:600;font-size:15px}
input.o-gia,input.o-ban{height:40px;padding:0 10px;text-align:right;font-size:15px;min-width:0}
/* tiêu đề cột */
.dau-cot{display:grid;grid-template-columns:minmax(0,1fr) 118px 96px;gap:8px;padding:10px 12px 4px;font-size:11.5px;font-weight:600;color:var(--mute)}
.dau-cot span:not(:first-child){text-align:center}
.dau-ke{grid-template-columns:minmax(0,1fr) 118px 64px}
/* lên đơn: tên | SL | giá trên 1 dòng, thông tin phụ dòng dưới */
.hang-don{display:grid;grid-template-columns:minmax(0,1fr) 118px 96px;gap:8px;align-items:center}
.hang-don .buoc{width:118px}
.meta-sp{margin-top:4px}
/* tồn kệ: tên | tồn | bán ra trên 1 dòng */
.dong-ke{display:grid;grid-template-columns:minmax(0,1fr) 118px 64px;gap:8px;align-items:center}
.dong-ke .buoc{width:118px}
.nut-them{width:100%;margin-top:8px;border-style:dashed;color:var(--brand)}
.chon-them{margin-top:8px;gap:4px}
/* tồn kho gập: bấm mới mở chi tiết */
details.ton-sp > summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:10px;align-items:center;cursor:pointer}
details.ton-sp > summary::-webkit-details-marker{display:none}
details.ton-sp > summary b{font-size:17px}
details.ton-sp .mui{color:var(--mute);font-size:18px;transition:transform .15s;text-align:center}
details.ton-sp[open] .mui{transform:rotate(90deg)}
/* danh sách khách */
.dong-kh{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:var(--app)}
.dong-kh .ten-sp b{font-size:14px}
.dong-kh .phai{flex:none}
.hang-nut .nut{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.k-dau .nut.nho-nut{flex:none}
@media (max-width:360px){.dau-cot,.hang-don{grid-template-columns:minmax(0,1fr) 108px 84px}.hang-don .buoc,.dong-ke .buoc{width:108px}.dong-ke,.dau-ke{grid-template-columns:minmax(0,1fr) 108px 56px}}
.ten-sp .nhan{align-self:flex-start}
details.ton-sp .ten-sp{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px;font-weight:600;font-size:14.5px}
details.ton-sp .ten-sp .nhan{margin-top:0;font-weight:700}
.chan-don .nut{white-space:nowrap;flex:none}
.chan-don > span,.chan-don > div{min-width:0}

/* công tắc lớn Giao tuyến & đội / Tôi đi thị trường */
.cong-tac{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--chip);border-radius:12px;padding:4px;margin-bottom:12px}
.cong-tac .chip{border:0;border-radius:9px;padding:10px 6px;font-size:13.5px;background:transparent}
.cong-tac .chip.on{background:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(11,93,59,.25)}

/* chọn ngày trong tuần: 7 ô vừa 1 hàng */
.ngay-tuan{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:4px 0 8px}
.ngay-tuan button{border:1px solid var(--line);background:var(--chip);border-radius:10px;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--fg)}
.ngay-tuan b{font-size:12.5px}
.ngay-tuan span{font-size:11px;color:var(--mute)}
.ngay-tuan i{font-style:normal;font-size:10.5px;color:var(--brand);font-weight:600}
.ngay-tuan button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ngay-tuan button.on span,.ngay-tuan button.on i{color:#e3f1ea}
.ngay-tuan button.qua{opacity:.55}

/* gợi ý nên ghé / khách cần chăm */
.dong-goi-y{display:block;width:100%;text-align:left;background:var(--app)}
.nhan-hang{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.nhan-hang:empty{display:none}

.nhan-hang{align-items:center}
.ly-do{font-size:13px;font-weight:600;color:var(--fg)}

/* tab Sự kiện */
.nav button{font-size:11px;min-width:0}
.timeline{display:flex;flex-direction:column;gap:6px}
.sk-the{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;width:100%;text-align:left;background:var(--app);padding:8px}
.sk-anh{width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--chip);display:grid;place-items:center;font-size:24px}
.sk-anh img{width:100%;height:100%;object-fit:cover}
.anh .video{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;font-size:12px;text-align:center;color:var(--fg);text-decoration:none}
.anh .tai{position:absolute;bottom:4px;right:4px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;text-decoration:none;font-size:16px}
.sk-dong{padding:6px 0;border-top:1px dashed var(--line)}
.sk-dong:first-child{border-top:0}
.sk-dong div{white-space:pre-wrap}

/* link bài đăng nhiều nền tảng */
.hang-link{display:flex;align-items:center;gap:6px;margin-top:6px}
.hang-link input{flex:1;min-width:0}
.hang-link .nhan{flex:none}
.link-nt{flex:1;min-width:0;justify-content:flex-start;text-align:left;text-decoration:none;color:var(--fg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}