/* Xuân Thu · chị Hằng (kho tổng, vai kho) theo mock-up Anna duyệt 03/11/2026.
   Chỉ vai kho: mọi luật dưới đây nằm trong body.vt-kho (Hân, Liên, Diễm, cửa hàng không đổi; test_so_vai đo màn Hân 375 px).
   Cỡ bậc kho: nút ≥ 64 px, chữ ≥ 20 px (test_hang_kho). Màu nền, chữ lấy token ds.css; màu cửa hàng chỉ là điểm nhấn (--sc). */
:root { --kh-ok: #15803d; --kh-ok-fg: #ffffff; --kh-ok-soft: #e3f4e8; --kh-ok-text: #166534; --kh-kd: #7c3aed; --kh-kd-soft: #f3edff; --kh-kd-ink: #5b21b6; --kh-sc0: #5d6670; }
:root[data-theme="dark"] { --kh-ok: #22a356; --kh-ok-fg: #06210f; --kh-ok-soft: #12301d; --kh-ok-text: #7ee2a4; --kh-kd: #a78bfa; --kh-kd-soft: #241b3d; --kh-kd-ink: #cbb8ff; --kh-sc0: #9ba5b0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kh-ok: #22a356; --kh-ok-fg: #06210f; --kh-ok-soft: #12301d; --kh-ok-text: #7ee2a4; --kh-kd: #a78bfa; --kh-kd-soft: #241b3d; --kh-kd-ink: #cbb8ff; --kh-sc0: #9ba5b0; } }

body.vt-kho #view .pad.kh-v3 { max-width: 680px; margin-left: auto; margin-right: auto; }
body.vt-kho .kh-v3 .kh-bao { margin-bottom: 10px; }

/* ô đếm trên cùng: Nhận · Nhập kho · Giao, mỗi số có nhãn */
body.vt-kho .kh-o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
body.vt-kho .kh-o1 { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 118px; padding: 10px 4px; border: 0; border-radius: var(--ds-r-card, 16px); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge, 0 0 0 1px var(--ds-hairline)); color: var(--ds-text); font: inherit; text-align: center; cursor: pointer; min-width: 0; }
body.vt-kho .kh-o1 i { font-size: 32px; line-height: 1; color: var(--ds-primary-text); }
body.vt-kho .kh-o-lbl { font-size: 20px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
body.vt-kho .kh-o-so { font-size: 32px; font-weight: 800; line-height: 1.05; }
body.vt-kho .kh-o-dv { font-size: 20px; color: var(--ds-text-2); line-height: 1.1; }
body.vt-kho .kh-o1.xong { background: var(--ds-sunken); box-shadow: none; }
body.vt-kho .kh-o1.xong i { color: var(--ds-text-2); }
body.vt-kho .kh-o-xong { font-size: 24px; color: var(--ds-text-2); padding-top: 4px; }

/* thẻ việc */
body.vt-kho .kh-v3 .kh-the { border: 0; border-radius: 20px; background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge, 0 0 0 1px var(--ds-hairline)); padding: 14px; gap: 10px; background-image: none; }
body.vt-kho .kh-v3 .kh-the.cho-lau { box-shadow: inset 0 0 0 2px var(--status-warn-line), var(--ds-shadow); }
body.vt-kho .kh-v3 .kh-tiep { margin: 0; font-size: 20px; font-weight: 700; color: var(--ds-text-2); }
body.vt-kho .kh-v3 .kh-tieu { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--ds-text); overflow-wrap: anywhere; }
body.vt-kho .kh-v3 .kh-dau .kh-tieu { font-size: 24px; }
body.vt-kho .kh-v3 .kh-the.kh-dau, body.vt-kho .kh-v3 .kh-ch.kh-dau { box-shadow: 0 0 0 3px var(--ds-text), var(--ds-shadow-lift, var(--ds-shadow)); }
body.vt-kho .kh-v3 .kh-muc { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--ds-hairline); font-size: 20px; overflow-wrap: anywhere; }
body.vt-kho .kh-v3 .kh-tieu + .kh-muc, body.vt-kho .kh-v3 .nm-tag + .kh-tieu + .kh-muc { border-top: 0; padding-top: 0; }
body.vt-kho .kh-v3 .kh-ma { font-weight: 800; }
body.vt-kho .kh-v3 .kh-to { font-size: 30px; font-weight: 800; line-height: 1.2; margin: 0; }
body.vt-kho .kh-v3 .kh-phu2 { margin: 0; font-size: 20px; color: var(--ds-text-2); overflow-wrap: anywhere; }
body.vt-kho .kh-v3 .kh-szs { display: flex; flex-wrap: wrap; gap: 8px; }
body.vt-kho .kh-v3 .kh-sz { display: inline-flex; align-items: baseline; gap: 6px; background: var(--ds-sunken); border-radius: 12px; padding: 2px 12px; }
body.vt-kho .kh-v3 .kh-sz span { font-size: 22px; font-weight: 700; color: var(--ds-text-2); }
body.vt-kho .kh-v3 .kh-sz b { font-size: 30px; font-weight: 800; line-height: 1.15; }
body.vt-kho .kh-v3 .nm-tag, body.vt-kho .kh-v3 .nm-tuoi, body.vt-kho .kh-v3 .nm-tuoi i { font-size: 20px; }
body.vt-kho .kh-v3 .nm-tag { align-self: flex-start; justify-self: start; }

/* hai nút: Đủ (xanh, to) và Lệch (xám); đủ cả bề ngang, ≥ 64 px */
body.vt-kho .kh-v3 .kh-hai { display: grid; gap: 10px; margin-top: 4px; }
body.vt-kho #view .kh-v3 .kh-nut { min-height: 64px; font-size: 22px; font-weight: 700; border-radius: 16px; margin: 0; white-space: normal; line-height: 1.25; }
body.vt-kho #view .kh-v3 .kh-nut.kh-du { background: var(--kh-ok); border-color: var(--kh-ok); color: var(--kh-ok-fg); }
body.vt-kho #view .kh-v3 .kh-nut2, body.vt-kho #view .kh-v3 a.kh-nut2 { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 64px; padding: 8px 14px; border: 0; border-radius: 16px; background: var(--ds-sunken); color: var(--ds-text); font-size: 21px; font-weight: 700; text-align: center; text-decoration: none; white-space: normal; line-height: 1.25; }
body.vt-kho #view .kh-v3 .kh-xem { margin: 4px 0 18px; }
body.vt-kho .kh-v3 .kh-ca { margin: 0 0 12px; }

/* khách đặt: viền tím bên trái, nền tím nhạt */
body.vt-kho .kh-v3 .kh-the.kh-kd { box-shadow: inset 8px 0 0 var(--kh-kd), var(--ds-shadow); background: var(--kh-kd-soft); padding-left: 22px; }
body.vt-kho .kh-v3 .kh-the.kh-kd.kh-dau { box-shadow: inset 8px 0 0 var(--kh-kd), 0 0 0 3px var(--ds-text), var(--ds-shadow); }
body.vt-kho .kh-v3 .kh-kdline { margin: 0; font-size: 20px; font-weight: 700; color: var(--kh-kd-ink); }
body.vt-kho .kh-v3 .kh-ch-ten { white-space: nowrap; }
body.vt-kho .kh-cham { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--sc, var(--kh-sc0)); flex: none; vertical-align: 1px; }

/* một cửa hàng: dải màu trên cùng, tên luôn viết */
body.vt-kho .kh-v3 .kh-ch.kh-st { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px; border-radius: 20px; background: var(--ds-sunken); border-top: 10px solid var(--sc, var(--kh-sc0)); }
body.vt-kho .kh-v3 .kh-st-dau { display: grid; gap: 6px; }
body.vt-kho .kh-v3 .kh-st-tag { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border-radius: 999px; background: var(--sc, var(--kh-sc0)); color: #fff; font-size: 20px; font-weight: 800; }
body.vt-kho .kh-v3 .kh-st:not([style]) .kh-st-tag { background: var(--ds-text-2); color: var(--ds-surface); }
body.vt-kho .kh-v3 .kh-st-di .kh-st-tag { opacity: .85; }
body.vt-kho .kh-v3 .kh-ck { margin: 0; }
body.vt-kho .kh-v3 .kh-ck-kd { box-shadow: inset 0 0 0 2px var(--kh-kd), var(--ds-shadow); background: var(--kh-kd-soft); }
body.vt-kho .kh-v3 .kh-ck.on { box-shadow: inset 0 0 0 2px var(--kh-ok); background: var(--kh-ok-soft); }
body.vt-kho .kh-v3 .kh-sao { color: var(--kh-kd); font-size: 24px; line-height: 1; }
body.vt-kho #view .kh-v3 .kh-tick { justify-content: flex-start; text-align: left; background: var(--ds-surface); color: var(--ds-text); border: 2px solid var(--ds-text-3, var(--ds-hairline)); }
body.vt-kho .kh-v3 .kh-hop { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border: 3px solid var(--ds-text-2); border-radius: 10px; }
body.vt-kho .kh-v3 .kh-hop i { opacity: .25; font-size: 26px; }
body.vt-kho .kh-v3 .kh-da { margin: 0; font-size: 20px; font-weight: 700; color: var(--kh-ok-text); }
body.vt-kho .kh-v3 .kh-tui { box-shadow: inset 0 0 0 2px var(--sc, var(--kh-sc0)), var(--ds-shadow); }
body.vt-kho .kh-v3 .kh-the.cho { background: var(--ds-surface); }
body.vt-kho .kh-v3 .kh-ghim-o { display: grid; gap: 10px; margin: 0 0 22px; }

/* xong hết */
body.vt-kho .kh-v3 .kh-xong-het { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 16px; margin: 0 0 20px; border-radius: 20px; background: var(--ds-surface); box-shadow: var(--ds-shadow); }
body.vt-kho .kh-v3 .kh-vong { width: 96px; height: 96px; border-radius: 50%; background: var(--kh-ok); color: var(--kh-ok-fg); display: grid; place-items: center; }
body.vt-kho .kh-v3 .kh-vong i { font-size: 56px; }

/* Hoàn tác 10 giây: dải dính đáy, trên thanh tab */
body.vt-kho .kh-hoan { position: fixed; left: 12px; right: 12px; bottom: calc(var(--ds-tab-h, 64px) + 14px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 616px; margin: 0 auto; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--ds-text); color: var(--ds-surface); font-size: 20px; line-height: 1.3; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
body.vt-kho .kh-hoan-chu { flex: 1; min-width: 0; overflow-wrap: anywhere; }
body.vt-kho .kh-hoan .kh-hoan-nut { flex: none; max-width: 52%; min-height: 56px; padding: 6px 12px; border: 0; border-radius: 12px; background: var(--ds-surface); color: var(--ds-text); font-size: 20px; font-weight: 700; white-space: normal; line-height: 1.2; }
@media (min-width: 1024px) { body.vt-kho .kh-hoan { bottom: 24px; } }

/* dấu tích lớn 1 giây */
body.vt-kho .kh-tich { position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: color-mix(in srgb, var(--ds-page, #f7f7f5) 88%, transparent); }
body.vt-kho .kh-tich.hien { display: flex; }
body.vt-kho .kh-tich-vong { width: 150px; height: 150px; border-radius: 50%; background: var(--kh-ok); color: var(--kh-ok-fg); display: grid; place-items: center; animation: khPop .25s ease-out; }
body.vt-kho .kh-tich-vong i { font-size: 96px; }
body.vt-kho .kh-tich-chu { font-size: 32px; font-weight: 800; color: var(--kh-ok-text); }
@keyframes khPop { from { transform: scale(.6); opacity: .2; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.vt-kho .kh-tich-vong { animation: none; } }

/* tấm Lệch, Xem tất cả (trong #xsheet) */
body.vt-kho #xsheet .kh-pad, body.vt-kho #xsheet .kh-ds { display: grid; gap: 10px; font-size: 20px; }
body.vt-kho #xsheet .kh-pad-h { margin: 0; font-size: 26px; line-height: 1.25; }
body.vt-kho #xsheet .kh-pad-sub { margin: 0; font-size: 20px; color: var(--ds-text-2); }
body.vt-kho #xsheet .kh-disp { border: 3px solid var(--ds-text); border-radius: 18px; text-align: center; font-size: 56px; font-weight: 800; line-height: 1.4; min-height: 88px; }
body.vt-kho #xsheet .kh-disp.pre { color: var(--ds-text-2); border-color: var(--ds-hairline); }
body.vt-kho #xsheet .kh-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body.vt-kho #xsheet .kh-key { min-height: 64px; border: 1px solid var(--ds-hairline); border-radius: 14px; background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: 30px; font-weight: 700; display: grid; place-items: center; cursor: pointer; }
body.vt-kho #xsheet .kh-key.trong { visibility: hidden; }
body.vt-kho #xsheet .kh-key-xoa { font-size: 22px; }
body.vt-kho #xsheet .kh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.vt-kho #xsheet .kh-chip { min-height: 56px; padding: 6px 16px; border: 2px solid var(--ds-hairline); border-radius: 999px; background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
body.vt-kho #xsheet .kh-chip.on { border-color: var(--ds-text); background: var(--ds-text); color: var(--ds-surface); }
body.vt-kho #xsheet .kh-ds-dong { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--ds-hairline); border-radius: 14px; background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: 20px; text-align: left; cursor: pointer; }
body.vt-kho #xsheet .kh-ds-dong.dang { border: 2px solid var(--ds-primary); }
body.vt-kho #xsheet .kh-ds-dong b { margin-left: auto; white-space: nowrap; }
body.vt-kho #xsheet .kh-ds-ten { flex: 1; min-width: 0; overflow-wrap: anywhere; }
body.vt-kho #xsheet .kh-chon .kh-hop { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border: 3px solid var(--ds-text-2); border-radius: 10px; }
body.vt-kho #xsheet .kh-chon.on { border-color: var(--status-warn-line); background: var(--status-warn-bg); }
body.vt-kho #xsheet .kh-ma { font-weight: 800; }
body.vt-kho #view #xsheet .kh-nut, body.vt-kho #xsheet .kh-nut { min-height: 64px; font-size: 22px; font-weight: 700; border-radius: 16px; white-space: normal; }
body.vt-kho #xsheet .kh-nut.kh-du { background: var(--kh-ok); border-color: var(--kh-ok); color: var(--kh-ok-fg); }
body.vt-kho #xsheet .btn.ghost { min-height: 64px; font-size: 21px; }