/* HCL ONE — module VỎ KEG NPP (0.9.3, agent k2). Chỉ lớp .vk-* và biến màu của hệ thiết kế (web/giao_dien.css); bản web (body.hc-web) tự dàn trang. */
main.vk{max-width:1180px}
.vk-tab{margin-bottom:14px}
.vk-tab2{margin-bottom:12px}
.vk-kpi{margin-top:0}
.vk-nut-dau{flex-wrap:wrap}
.vk-nut-dau>.hc-nut{flex:1 1 180px}
.vk-loc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.vk-tim{flex:1 1 220px;margin:0}
.vk-chon{flex:0 1 auto}
.vk-bang td{vertical-align:middle}
.vk-bang tbody tr{cursor:pointer}
.vk-bang tr.vk-vuot td{background:var(--do-nhat)}
.vk-nw{white-space:nowrap}
.vk-chu-thich{margin:4px 2px 16px;line-height:1.5}
.vk-dn-nut{flex-direction:row;align-items:center;gap:6px}
.vk-dn .hc-dong-giua .t{font-size:15px}

/* ---- 3 số lớn của NPP trong khối anh hùng */
.vk-hero{margin-bottom:12px}
.vk-ba-so{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin:12px 0 8px}
.vk-ba-so>div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-vua);padding:10px 10px 9px;min-width:0}
.vk-ba-so span{display:block;font:700 12px/1.35 var(--tieu-de);color:#fff;opacity:.8;letter-spacing:.02em}
.vk-ba-so b{display:block;font:800 30px/1.1 var(--tieu-de);font-variant-numeric:tabular-nums;color:#fff;margin-top:4px;white-space:nowrap}
.vk-ba-so small{display:block;font-size:12px;color:#fff;opacity:.8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vk-ba-so .vk-so-chinh{background:var(--vang);border-color:var(--vang)}
.vk-ba-so .vk-so-chinh span,.vk-ba-so .vk-so-chinh small{color:var(--cham-dam);opacity:.85}
.vk-ba-so .vk-so-chinh b{color:var(--cham-dam);font-size:36px}
.vk-ba-so .vk-so-chinh.do{background:var(--do);border-color:var(--do)}
.vk-ba-so .vk-so-chinh.do span,.vk-ba-so .vk-so-chinh.do small,.vk-ba-so .vk-so-chinh.do b{color:#fff}
.vk-hero p b{color:var(--vang)}
/* đã lấy đang ở đâu */
.vk-o-dau{margin-top:10px}
.vk-o-thanh{display:flex;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.14)}
.vk-o-thanh i{display:block;height:100%}
.vk-o-dau i.kho{background:var(--vang)} .vk-o-dau i.quan{background:var(--lac)} .vk-o-dau i.con{background:rgba(255,255,255,.35)}
.vk-o-chu{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;font-size:13px;color:#fff}
.vk-o-chu span{display:inline-flex;align-items:center;gap:6px}
.vk-o-chu i{display:inline-block;width:10px;height:10px;border-radius:3px}
.vk-o-chu b{color:#fff;font-variant-numeric:tabular-nums}
.vk-o-chu .vk-o-lech{color:var(--cam-sang)} .vk-o-chu .vk-o-lech b{color:var(--cam-sang)}
.vk-hero p.vk-o-giai{margin:6px 0 0;font-size:12.5px;opacity:.85}
.vk-nut-hang{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.vk-nut-hang>.hc-nut{flex:1 1 150px}
.vk-tg .nd b{font-weight:700}

/* ---- đặt hàng */
.vk-sp .hc-sp-giua .p b{color:var(--chu)}
.vk-khac{margin:0 0 12px}
.vk-khac>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px;padding:0 4px;font:700 14px var(--noi-dung);color:var(--chinh);list-style:none}
.vk-khac>summary::-webkit-details-marker{display:none}
.vk-khac>summary::before{content:"▸";color:var(--mo)} .vk-khac[open]>summary::before{content:"▾"}
.vk-hm{margin-bottom:12px}
.vk-hm h3{margin:0}
.vk-hm-luoi{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:10px 0}
.vk-hm-luoi .hc-so{text-align:left;padding:10px 12px}
.vk-hm .hc-bao{margin:8px 0 0}
.vk-chan{display:flex;align-items:center;gap:10px;width:100%}
.vk-chan>.hc-phu{flex:1;min-width:0;margin:0}
.vk-chan-nut{display:flex;gap:8px;flex:none}
@media (max-width:420px){ .vk-chan{flex-direction:column;align-items:stretch;gap:6px} .vk-chan>.hc-phu{text-align:center} .vk-chan-nut>*{flex:1} }

/* ---- đơn nhập / phiếu kiểm kê */
.vk-don-dau .hc-bao{margin:10px 0 0}
.vk-buoc{list-style:none;margin:12px 0 4px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:b}
.vk-buoc li{position:relative;padding:8px 8px 8px 30px;border-radius:var(--r-nho);background:var(--nen-2);min-width:0}
.vk-buoc li::before{counter-increment:b;content:counter(b);position:absolute;left:8px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--vien);color:var(--mo);font:700 11px/16px var(--tieu-de);text-align:center}
.vk-buoc li.xong::before{content:"✓";background:var(--xanh);color:#fff}
.vk-buoc b{display:block;font-size:13px}
.vk-buoc span{display:block;font-size:12px;color:var(--mo);overflow-wrap:anywhere}
@media (max-width:640px){ .vk-buoc{grid-template-columns:repeat(2,minmax(0,1fr))} }
.vk-nhom-chan{margin:0;flex-wrap:wrap}
.vk-nhom-chan>.hc-nut{flex:1 1 140px}
.vk-kk .hc-kv{margin-top:6px}
.vk-kk-so{margin:10px 0 6px}
.vk-kk-so .hc-so b{font-size:20px}
.vk-kk-kq{margin-top:4px;padding:10px 12px;border-radius:var(--r-nho);background:var(--nen-2);font-size:14.5px}
.vk-kk-kq b{font-variant-numeric:tabular-nums}
.vk-nut-bb{margin:4px 0 12px}
@media (max-width:640px){ .vk-kk-so{grid-template-columns:repeat(2,minmax(0,1fr))} .vk-ba-so{grid-template-columns:1fr 1fr} .vk-ba-so .vk-so-chinh{grid-column:1 / -1} }

/* ---- thẻ trang chủ */
.vk-the-tc .hc-so-luoi{margin:10px 0 0}

/* ---- biên bản đối chiếu: màn hình = tờ A4 (máy tính) / giấy chảy (điện thoại); in = trang A4 riêng (vkA4) */
.vk-thanh-in{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;font-size:14px}
.vk-nhom-in{max-width:520px}
.vk-a4{--vk-chu:var(--cham-dam); --vk-vien:var(--cham); --vk-nen2:var(--cham-nhat); --vk-vang:color-mix(in srgb,var(--vang) 22%,#fff);
  background:#fff;color:var(--vk-chu);font:13.5px/1.45 var(--noi-dung)}
.vk-a4 .vk-bb-quoc-hieu{text-align:center;font-size:13px;line-height:1.5}
.vk-a4 .vk-bb-quoc-hieu span{text-decoration:underline;text-underline-offset:3px}
.vk-a4 .vk-bb-tieu-de{text-align:center;font:800 20px/1.3 var(--tieu-de);margin:18px 0 4px;color:var(--vk-chu);letter-spacing:.02em}
.vk-a4 .vk-bb-phu{text-align:center;margin:0 0 14px}
.vk-a4 .vk-bb-ben{width:100%;border-collapse:collapse;margin:0 0 10px}
.vk-a4 .vk-bb-ben td{vertical-align:top;width:50%;padding:0 10px 0 0;line-height:1.5}
.vk-a4 .vk-bb-bang{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:13px}
.vk-a4 .vk-bb-bang th,.vk-a4 .vk-bb-bang td{border:1px solid var(--vk-vien);padding:5px 8px;vertical-align:middle}
.vk-a4 .vk-bb-bang th{background:var(--vk-vien);color:#fff;font-weight:700;text-align:center}
.vk-a4 .vk-bb-bang td.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vk-a4 .vk-bb-bang tr.vk-bb-nhom td{background:var(--vk-nen2);font-weight:700}
.vk-a4 .vk-bb-bang tr.vk-bb-dam td{background:var(--vk-vang)}
.vk-a4 .vk-bb-bang tr{break-inside:avoid;page-break-inside:avoid}
.vk-a4 .vk-bb-tien{font-size:11.5px;opacity:.8}
.vk-a4 .vk-bb-nho{font-size:12px;opacity:.85}
.vk-a4 .vk-bb-ghi ul{margin:4px 0 8px;padding-left:20px}
.vk-a4 .vk-bb-ky{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:18px;break-inside:avoid;page-break-inside:avoid}
.vk-a4 .vk-bb-ky td{text-align:center;vertical-align:top;font-weight:700;font-size:12.5px;padding:0 6px}
.vk-a4 .vk-bb-ky-ten{margin-top:52px;font-weight:700;font-size:13.5px}
.vk-a4 .vk-bb-ky-luc{margin-top:4px;font-weight:400;font-size:11px;opacity:.8;line-height:1.35}
@media screen{
  .vk-giay{background:var(--nen-2);border-radius:var(--r-lon);padding:16px;overflow-x:auto}
  .vk-a4{width:210mm;min-height:297mm;margin:0 auto;padding:16mm 16mm 18mm;box-shadow:var(--bong-2);border-radius:2px}
}
@media screen and (max-width:840px){
  .vk-giay{background:none;padding:0;border-radius:0;overflow:visible}
  .vk-a4{width:auto;min-height:0;padding:16px 12px 20px;border:1px solid var(--vien-2);border-radius:var(--r-vua);box-shadow:var(--bong-1)}
  .vk-a4 .vk-bb-bang{font-size:12px}
  .vk-a4 .vk-bb-bang th,.vk-a4 .vk-bb-bang td{padding:4px 5px}
  .vk-a4 .vk-bb-ben td{display:block;width:auto;padding:0 0 8px}
}
/* cửa sổ in riêng (nút "In biên bản"): chỉ tờ biên bản, không có mã của app */
body.vk-cua-so-in{margin:0;padding:16px 0}
@page vkA4{size:A4 portrait;margin:14mm 15mm}
@media print{
  html:has(body.vk-in),body.vk-in{background:#fff!important}
  body.vk-in{page:vkA4}
  body.vk-in main{padding:0!important;margin:0!important;max-width:none!important}
  body.vk-in .vk-tab,body.vk-in .khong-in{display:none!important}
  .vk-giay{background:none;padding:0;margin:0;overflow:visible}
  .vk-a4{page:vkA4;width:auto;min-height:0;margin:0;padding:0;box-shadow:none;border:0;border-radius:0;font-size:11pt}
  body.vk-cua-so-in{padding:0}
}