/* Màn Khối lượng / BOQ — chia đôi cố định chiều cao màn: trái 40% tham số + dán, phải 60% bảng soát. Lưới 8px, màu lấy từ ht.css. */
.kl-man { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; height: calc(100vh - 48px); }
.kl-trai, .kl-phai { min-height: 0; min-width: 0; }
.kl-trai { overflow-y: auto; padding-right: 4px; }
.kl-trai .dau-trang { margin-bottom: 16px; }
.kl-phai { display: flex; flex-direction: column; gap: 8px; background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; padding: 16px; container-type: inline-size; }
.kl-phai > .kl-khung { flex: 1 1 auto; min-height: 120px; max-height: none; }
.the { background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.the h3 { margin: 0 0 8px; font-size: 14px; display: flex; gap: 4px; align-items: center; }
.the .dau-dong h3 { margin: 0; }
.the textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.hang-nut-trai { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
#kl-dan-kq { margin-top: 8px; }

/* danh sách phiên bản: liên kết nhiều dòng (không phải nút) */
.ds-pb { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
a.pb { display: grid; gap: 4px; padding: 8px 12px; border: 1px solid var(--vien); border-radius: 6px; color: var(--chu); text-decoration: none; }
a.pb:hover { border-color: var(--chinh); }
a.pb.dang-mo { border-color: var(--chinh); background: var(--chinh-nhat); }
a.pb .pb-nhan { display: flex; flex-wrap: wrap; gap: 4px; }
a.pb .phu { color: var(--chu-phu); font-size: 12px; }

/* đầu phiên bản + lọc mức soát */
.dau-pb { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: flex-start; }
.dau-pb h2 { margin: 0; font-size: 17px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dau-pb .hang-nut-trai { margin-top: 0; }
.dau-pb .phu, .ly-do-khoa { color: var(--chu-phu); font-size: 13px; }
.ly-do-khoa { background: var(--vang-nen); color: var(--vang); padding: 4px 8px; border-radius: 6px; }
.kl-loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kl-loc .hang { display: flex; flex-wrap: wrap; gap: 4px; }
.chip.dang-chon { border-color: var(--chinh); background: var(--chinh-nhat); }
.chip[data-muc="do"] { color: var(--do); }
.chip[data-muc="vang"] { color: var(--vang); }
.chip[data-muc="xanh"] { color: var(--xanh); }
#kl-them { margin-left: auto; }

/* bảng soát */
.kl-phai .bang tr.nhom-hm td { background: #f0f3f7; font-weight: 600; font-size: 13px; position: static; }
.kl-phai .bang tr.muc-do td:first-child { box-shadow: inset 3px 0 0 var(--do); }
.kl-phai .bang tr.muc-vang td:first-child { box-shadow: inset 3px 0 0 var(--vang); }
.ly-do { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--chu-phu); }
.kl-tong { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--vien); padding-top: 8px; }
.kl-tong > div { display: flex; flex-direction: column; font-size: 12px; color: var(--chu-phu); }
.kl-tong strong { font-size: 15px; color: var(--chu); }
.kl-tong .cong strong { color: var(--chinh); font-size: 17px; }
.kl-tong > .phu { grid-column: 1 / -1; }
.kl-phai .hang-loat { bottom: 0; margin-top: 0; }
.kl-phai .nguon { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* chia đôi: thanh hàng loạt nổi đè lên vùng tổng tiền thay vì đẩy bảng ngắn lại (laptop 1024×768 bảng chỉ còn ~220px — đo 09/11) */
@media (min-width: 901px) {
  .kl-phai { position: relative; }
  .kl-phai .hang-loat { position: absolute; left: 16px; right: 16px; bottom: 16px; }
}

/* ngăn kéo dòng */
.gia-tot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -8px 0 16px; font-size: 13px; color: var(--chu-phu); }
fieldset.nhom-xn { border: 1px solid var(--vien); border-radius: 6px; padding: 8px 16px 16px; margin: 0; }
fieldset.nhom-xn legend { font-weight: 600; font-size: 13px; padding: 0 4px; display: flex; gap: 4px; align-items: center; }
fieldset.nhom-xn p { margin: 4px 0 0; }
#f-kl-xn { width: 120px; }
.hop-xac-nhan textarea { margin-top: 4px; }
.nhan-o { display: block; font-weight: 600; font-size: 13px; margin-top: 8px; }

/* Cột phải hẹp hơn 760px (laptop 1280 chỉ còn ~590px): 7 cột không vừa → mỗi dòng thành THẺ LƯỚI gọn, đo theo bề ngang CỘT.
   Hàng 1: vật tư · hàng 2: khối lượng | đơn giá | thành tiền · hàng 3: soát | nút. (Thẻ dọc từng ô cao ~350px/dòng — đo 09/11.) */
@container (max-width: 760px) {
  .kl-phai table.bang thead { display: none; }
  .kl-phai table.bang, .kl-phai .bang tbody { display: block; width: 100%; }
  .kl-phai .bang tr.nhom-hm, .kl-phai .bang tr.nhom-hm td { display: block; }
  .kl-phai .bang tr.nhom-hm td { padding: 4px 12px; }
  .kl-phai .bang tr[data-id] { display: grid; grid-template-columns: 28px repeat(3, minmax(0, 1fr)); gap: 4px 12px; padding: 8px 12px 8px 4px; border-bottom: 1px solid var(--vien); }
  .kl-phai .bang tr[hidden] { display: none; }
  .kl-phai .bang td { border: 0; padding: 0; min-width: 0; }
  .kl-phai .bang td[data-nhan]::before { content: attr(data-nhan); display: block; font-size: 11px; color: var(--chu-phu); text-transform: uppercase; }
  .kl-phai .bang td.c-vt::before { display: none; }
  .kl-phai .bang td.cot-chon { grid-column: 1; grid-row: 1 / span 3; width: auto; padding-top: 2px; }
  .kl-phai .bang td.c-vt { grid-column: 2 / -1; }
  .kl-phai .bang td.c-kl { grid-column: 2; } .kl-phai .bang td.c-gia { grid-column: 3; } .kl-phai .bang td.c-tien { grid-column: 4; }
  .kl-phai .bang td.c-soat { grid-column: 2 / 4; }
  .kl-phai .bang td.c-sua { grid-column: 4; justify-self: end; align-self: end; text-align: right; }
  .kl-phai .bang tr.muc-do td:first-child, .kl-phai .bang tr.muc-vang td:first-child { box-shadow: none; }
  .kl-phai .bang tr.muc-do { box-shadow: inset 3px 0 0 var(--do); } .kl-phai .bang tr.muc-vang { box-shadow: inset 3px 0 0 var(--vang); }
  .kl-tong { grid-template-columns: 1fr 1fr; }
}
/* điện thoại: thẻ còn 2 cột số */
@container (max-width: 440px) {
  .kl-phai .bang tr[data-id] { grid-template-columns: 28px repeat(2, minmax(0, 1fr)); }
  .kl-phai .bang td.c-kl { grid-column: 2; } .kl-phai .bang td.c-gia { grid-column: 3; }
  .kl-phai .bang td.c-tien { grid-column: 2; } .kl-phai .bang td.c-soat { grid-column: 3; }
  .kl-phai .bang td.c-sua { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 900px) {
  .kl-man { grid-template-columns: 1fr; height: auto; }
  .kl-trai { overflow: visible; padding-right: 0; }
  .kl-phai > .kl-khung { max-height: 520px; }
}

/* bản in A4: trên màn hình ẩn, lúc in chỉ hiện bản in */
#kl-ban-in { display: none; }
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body > *:not(#kl-ban-in) { display: none !important; }
  html, body { background: #fff; }
  #kl-ban-in { display: block; color: #000; font-size: 12px; }
}
.ban-in h1 { text-align: center; font-size: 17px; margin: 16px 0 8px; }
.ban-in .in-dau { display: flex; justify-content: space-between; font-size: 12px; }
.ban-in table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ban-in .in-tt td { padding: 2px 8px 2px 0; } .ban-in .in-tt td:first-child { width: 96px; color: #444; }
.ban-in .in-bang th, .ban-in .in-bang td { border: 1px solid #999; padding: 4px 6px; vertical-align: top; }
.ban-in .in-bang th { background: #eee; }
.ban-in .in-bang .so { text-align: right; white-space: nowrap; }
.ban-in .in-bang .nhom-hm td { background: #f4f4f4; font-weight: 700; }
.ban-in .in-bang .ma { font-size: 11px; color: #555; }
.ban-in tfoot td { font-weight: 600; } .ban-in tfoot .cong td { font-size: 14px; }
.ban-in .in-chu { font-size: 11px; color: #444; }
.ban-in .nhap-mo { position: fixed; top: 38%; left: 0; right: 0; text-align: center; font-size: 110px; font-weight: 800; color: rgba(180, 35, 24, .14); transform: rotate(-28deg); pointer-events: none; }