/* HCL ONE — module KẾ TOÁN – KHO: bổ sung cho hệ thiết kế hc-* (web/giao_dien.css). CHỈ dùng biến màu (tự đúng chế độ tối), không mã màu cứng.
   Màn văn phòng: main.hc-may.kho (1180 px), bảng .hc-bang dày số liệu; điện thoại: bảng cuộn ngang, bộ lọc xuống dòng. */

/* ---- khung, thanh mục */
main.kho{padding-top:14px}
.kho-tab{margin-bottom:14px}
.kho-tab>a{font-size:13.5px}
.kho-chan .trong{max-width:1148px}
.kho-chan-hang{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kho-chan-hang .hc-nhom-nut{margin:0;flex:none}
.kho-chan-hang .hc-nhom-nut>*{flex:none}
.kho-chan-hang .hc-nut{min-height:48px;white-space:nowrap}
.kho-chu-thich{margin:4px 2px 12px;line-height:1.5}
.kho-chu-thich svg{vertical-align:-3px}

/* ---- tổng quan */
.kho-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px}
.kho-hero h2{font-size:32px;margin-top:10px}
.kho-hero .hc-nut{flex:none}
.kho-kpi{margin:0 0 6px}
a.hc-so{transition:transform .08s ease}
a.hc-so:hover{border-color:var(--chinh)}
.kho-2cot{display:grid;gap:0 18px}
@media (min-width:900px){ .kho-2cot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} }
.kho-2cot .hc-dong{min-height:56px;padding:10px 14px}
.kho-2cot .hc-dong-cuoi{flex-direction:row;align-items:center;gap:6px;color:var(--mo)}
.kho-luoi{gap:10px}
.kho-the{margin:0;display:flex;flex-direction:column;gap:6px}
.kho-the .hc-the-dau h3{font-size:15px}
.kho-the-so{font:600 13px var(--noi-dung);color:var(--mo)}
.kho-the-so b{font:800 22px/1.15 var(--tieu-de);color:var(--chu);font-variant-numeric:tabular-nums}
.kho-the-so span{display:block;margin-top:1px}
.kho-the-chan{font-size:12.5px;color:var(--mo)}
.kho-the-am{font-size:12.5px;color:var(--do);font-weight:600;font-variant-numeric:tabular-nums}
.kho-the-rong .kho-the-so b,.kho-the-rong h3{color:var(--mo)}
.kho-the-rong{box-shadow:none}

/* ---- bộ lọc (gọn cho máy tính: ô 40 px) */
.kho-loc{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0 0 14px}
.kho-o{position:relative;display:flex;flex-direction:column;gap:4px;margin:0;min-width:150px}
.kho-o>span{font:600 12px var(--noi-dung);color:var(--mo);letter-spacing:.02em}
.kho-o select,.kho-o input{min-height:40px;height:40px;padding:6px 10px;font-size:14.5px;border-radius:10px;border-width:1.5px}
.kho-o select{max-width:320px}
.kho-o-rong{flex:1 1 240px}
.kho-tim{height:40px;margin:0;flex:1 1 220px;min-width:180px;border-radius:10px}
.kho-tim input{font-size:14.5px}
.kho-chon>button{min-height:40px;font-size:13.5px;padding:0 12px;border-radius:10px}
.kho-ky{display:flex;flex-wrap:wrap;gap:6px}
.kho-ky .hc-nut{min-height:40px;font-size:13px;font-weight:700}
.kho-ky .hc-nut.kho-dang{background:var(--cham);color:#fff;border-color:var(--cham)}
.kho-xem{margin:0;flex:none}
.kho-xem>a,.kho-xem>button{min-height:34px;font-size:13px}
.kho-dau-bang{margin:0 2px 8px;flex-wrap:wrap}
.kho-dau-bang .hc-phu{margin:0}

/* ---- bảng số */
.kho-bang{font-size:13.5px}
.kho-bang th{padding:9px 10px}
.kho-bang td{padding:8px 10px}
.kho-bang .kho-ma{font-weight:700;color:var(--chinh);white-space:nowrap}
.kho-bang .kho-ma a{color:inherit;text-decoration:none}
.kho-bang tr.kho-am td{background:var(--do-nhat)}
.kho-bang tr.kho-khong td{color:var(--mo)}
.kho-bang tr.kho-nhom td{background:var(--chinh-nhat);color:var(--chinh);font-weight:800;padding-top:9px;padding-bottom:9px}
.kho-bang tr.kho-nhom a{color:inherit;text-decoration:none}
.kho-bang tr.kho-nhom span{margin-left:12px;font-weight:600;color:var(--mo);font-size:12.5px}
.kho-bang tr.kho-cong td{font-weight:700;background:var(--nen-2)}
.kho-bang td.kho-dam{font-weight:800}
.kho-bang .kho-vach{border-left:2px solid var(--vien-2)}
.kho-bang .kho-0{opacity:.4}
.kho-bang .kho-duong{color:var(--xanh);font-weight:700}
.kho-bang .kho-sao{display:inline-block;width:.65em;text-align:left;padding-left:1px;line-height:0;position:relative;top:-.3em;color:var(--cam-dam);font-weight:800}
.kho-bang tr.kho-nhom em{font-style:normal;font-weight:700}
.kho-bang .hc-phu{margin:1px 0 0;font-size:12px}
.kho-nw{white-space:nowrap}
.kho-tab-dc>a{flex:1 1 0}
.kho-nxt thead tr:first-child th[colspan]{text-align:center;background:var(--chinh-nhat);color:var(--chinh);border-left:2px solid var(--vien-2)}
.kho-bam tbody tr[tabindex]{cursor:pointer}
.kho-bam tbody tr[tabindex]:focus-visible td{outline:2px solid var(--chinh);outline-offset:-2px}
.kho-bang tr.kho-huy td{opacity:.55}
.kho-dt .kho-tam{font-size:11.5px;font-weight:600;color:var(--cam-dam)}
/* bảng nhiều cột số (NXT, doanh thu theo tháng): khoảng đệm ngang hẹp hơn để số tiền dài vẫn vừa màn 1280 */
.kho-nxt th,.kho-nxt td,.kho-dt th,.kho-dt td{padding-left:7px;padding-right:7px}
.kho-bang .kho-ma.kho-ma-dai{white-space:normal}

/* ---- chi tiết phiếu */
.kho-phieu .kho-so-phieu{font:800 13px var(--tieu-de);letter-spacing:.06em;color:var(--chinh);margin-bottom:2px}
.kho-phieu .hc-the-dau h3{font-size:20px}
.kho-phieu .hc-bao{margin:12px 0 0}
.kho-kv{margin-top:10px}
@media (min-width:900px){
  .kho-kv{grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr);column-gap:24px}
  .kho-kv dd{text-align:left}
}

/* ---- lập phiếu */
.kho-form .hc-muc button{font-size:13px}
.kho-loc-form .kho-o{min-width:190px}
.kho-loc-form .kho-o select{max-width:none;min-width:220px}
.kho-goi-y .hc-phu{margin:0 2px 10px}
.kho-nhap-bang td{vertical-align:middle}
.kho-nhap-bang tbody tr:hover td{background:none}
.kho-nhap-bang select.kho-sp{min-height:40px;height:40px;padding:6px 8px;font-size:14px;border-radius:10px;min-width:280px;width:100%}
.kho-nhap-bang input.kho-so{width:120px;min-height:40px;height:40px;padding:6px 10px;text-align:right;font-size:15px;font-weight:700;border-radius:10px;font-variant-numeric:tabular-nums}
.kho-nhap-bang input.kho-gia{width:140px;font-weight:600}
.kho-nhap-bang td.kho-thieu{color:var(--do);font-weight:800}
.kho-xoa{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--mo);cursor:pointer}
.kho-xoa:hover{background:var(--do-nhat);color:var(--do)}
.kho-form>.hc-nut{margin:0 0 14px}
.kho-gc textarea{min-height:64px;font-size:15px}
.kho-goi-y-ds{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--the);border:1px solid var(--vien-2);border-radius:12px;box-shadow:var(--bong-2);max-height:300px;overflow:auto}
.kho-goi-y-ds:empty{display:none}
.kho-goi-y-ds button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-bottom:1px solid var(--vien-2);background:none;cursor:pointer;color:var(--chu)}
.kho-goi-y-ds button:hover{background:var(--nen)}
.kho-goi-y-ds button b{display:block;font-size:14px}
.kho-goi-y-ds button span{font-size:12.5px;color:var(--mo)}
.kho-goi-y-ds .hc-phu{padding:10px 12px;margin:0}
.hc-sheet .hc-truong{position:relative}
.kho-chon-loai{display:flex;align-items:center;gap:14px;margin:0}
.kho-chon-loai>div{flex:1;min-width:0}
.kho-chon-loai h3{margin:0;font:800 17px var(--tieu-de)}
.kho-chon-loai>svg{color:var(--mo);flex:none}

/* ---- tấm trượt, thẻ loại CCDC */
.kho-sheet{max-width:780px}
.kho-sheet a{color:var(--chinh);font-weight:700}
.kho-sheet .hc-bang-cuon{max-height:46vh;overflow:auto}
.kho-sheet .hc-tg{max-height:34vh;overflow:auto;margin-bottom:8px}
.kho-loai{margin-bottom:14px;gap:10px}
.kho-loai .hc-the{margin:0}
.kho-loai .hc-phu{margin:0 0 4px}

/* ---- điện thoại */
@media (max-width:600px){
  .kho-kpi.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kho-hero{padding:16px}
  .kho-hero h2{font-size:28px}
  .kho-hero .hc-nut{width:100%}
  .kho-o{flex:1 1 calc(50% - 5px);min-width:0}
  .kho-o select{max-width:none}
  .kho-tim{flex:1 1 100%}
  .kho-chan-hang .hc-phu{display:none}
  .kho-chan-hang .hc-nhom-nut,.kho-chan-hang>.hc-nut{flex:1}
  .kho-chan-hang .hc-nhom-nut .hc-nut{flex:1;padding:0 10px;font-size:14px}
  .kho-bang{font-size:13px}
}
/* ---- điện thoại: dòng danh sách thay bảng; báo cáo nhiều cột cuộn ngang, không quấn chữ */
.kho-dong .hc-dong-giua .t{font-size:14.5px}
.kho-dong .hc-dong-cuoi b{font-size:17px}
.kho-dong-am{background:var(--do-nhat)}
.kho-dong-huy{opacity:.6}
button.kho-dong{font:inherit;color:inherit}
@media (max-width:640px){
  .kho-bang th,.kho-bang td{white-space:nowrap}
  .kho-nhap-bang thead{display:none}
  .kho-nhap-bang,.kho-nhap-bang tbody{display:block}
  .kho-nhap-bang tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:8px 10px;align-items:center;padding:12px;border-bottom:1px solid var(--vien-2)}
  .kho-nhap-bang tr:last-child{border-bottom:0}
  .kho-nhap-bang td{padding:0;border:0;white-space:normal}
  .kho-nhap-bang .o-sp{grid-column:1/-1}
  .kho-nhap-bang td.o-ton{grid-column:1;grid-row:2;text-align:left}
  .kho-nhap-bang td.o-sl{grid-column:2;grid-row:2}
  .kho-nhap-bang td.o-xoa{grid-column:3;grid-row:2}
  .kho-nhap-bang td.o-gia{grid-column:1;grid-row:3}
  .kho-nhap-bang td.o-tien,.kho-nhap-bang td.o-lech{grid-column:2;grid-row:3;text-align:left}
  .kho-nhap-bang td.o-lech{grid-column:1/3}
  .kho-nhap-bang .o-ton::before,.kho-nhap-bang .o-tien::before,.kho-nhap-bang .o-lech::before{content:attr(data-nhan) ": ";font-size:12.5px;color:var(--mo);font-weight:600}
  .kho-nhap-bang select.kho-sp,.kho-nhap-bang input.kho-so{width:100%;min-width:0}
  .kho-nhap-bang input.kho-gia{width:100%}
}
@media print{ .kho-tab,.kho-loc,.kho-chan,.kho-ky{display:none!important} main.kho{max-width:none} .kho-bang{font-size:11.5px} }
/* 0.7: ô kho để trống → viền đỏ ngay khi đổi (không đợi bấm Ghi phiếu) */
.kho-o.kho-o-loi select{border-color:var(--do);box-shadow:0 0 0 1px var(--do)}