/* Màn Báo giá (bao-gia.js). Chỉ dùng biến chung của style.css; mọi lớp bắt đầu bằng bg-/bgp- để không đụng màn khác. */

/* ----- Lưới bộ mẫu: 2 cột ở điện thoại, 3 cột tablet, 4 cột PC; ảnh nhỏ 4:3 ----- */
.qgrid.bg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:768px){.qgrid.bg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
@media (min-width:1200px){.qgrid.bg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bg-the .qimg{aspect-ratio:4/3;max-height:220px;overflow:hidden}
.bg-the .qimg img{width:100%;height:100%;object-fit:cover}
.bg-the .qb{display:flex;flex-direction:column;gap:6px;padding:8px;min-width:0;flex:1}
.bg-the .r1 b{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.bg-the .meta{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:12px;color:var(--muted);align-items:center}
.bg-the .qp b{font-size:15px;color:var(--lacquer)}
.bg-acts{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:auto}
.bg-acts .btn{width:100%;min-height:34px;font-size:12.5px;padding:4px 6px;white-space:normal;line-height:1.2}
@media (min-width:768px){.bg-acts{grid-template-columns:repeat(3,minmax(0,1fr))}.bg-acts .btn{font-size:12px}}
.lk.bg-len{align-self:flex-start;white-space:normal;text-align:left;border-style:dashed}
.bm-qlbar .bg-xoa-nut{color:var(--bad);border-color:var(--bad)}

/* Ảnh ở khung chi tiết bộ: không chiếm hết màn */
.tdet.bg-tdet img,.bg-tdet img{max-height:320px;object-fit:cover}

/* Bộ đã xoá (chỉ Ban giám đốc thấy) */
.bm-an.bg-xoa .bm-anh-tg{color:var(--bad)}

/* ----- Tab Tạo báo giá ----- */
.bg-form{display:grid;gap:10px}
.bg-form input,.bg-form select,.bg-form textarea{min-width:0;max-width:100%}
.bg-res{max-height:260px;overflow:auto;-webkit-overflow-scrolling:touch}
.bg-res:empty{display:none}
.bg-nut{display:flex;flex-wrap:wrap;gap:8px}
.bg-nut .btn{flex:1 1 160px}
.bg-sua{margin:0 4px 10px}
.bg-sua .lk{margin-left:4px}
#taoBo{width:100%}

/* ----- Tab Lịch sử ----- */
.bg-ls-wrap{overflow:auto;-webkit-overflow-scrolling:touch;max-height:75vh}
.bg-ls{width:100%;border-collapse:collapse;font-size:13px}
.bg-ls th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.bg-ls td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;white-space:normal}
.bg-ls td:first-child,.bg-ls th:first-child{position:static;background:transparent}
.bg-ls th:first-child{background:var(--surface-2);position:sticky}
.bg-ls .c-kh{overflow-wrap:anywhere;min-width:160px}
.bg-ls td small{display:block;color:var(--muted);font-size:11.5px}
.bg-ls tr[data-open]{cursor:pointer}
.bg-ls tr[data-open]:hover td{background:var(--surface-2)}
.bg-ls tr[data-open]:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.bg-ls td.c-tien,.bg-ls th.c-tien{text-align:right;white-space:nowrap}
.bg-ls td.c-t{white-space:nowrap}
.bg-ls .c-don .lk{font-size:12px}
.p-warn-t{color:var(--warn)!important}
.muted{color:var(--muted)}
/* Điện thoại: mỗi báo giá một thẻ, không cuộn ngang */
@media (max-width:640px){
  .bg-ls thead{display:none}
  .bg-ls,.bg-ls tbody{display:block}
  .bg-ls tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 4px;border-bottom:1px solid var(--line)}
  .bg-ls td{display:block;border:0;padding:0;min-width:0}
  .bg-ls .c-kh{grid-column:1;grid-row:1;overflow-wrap:anywhere;min-width:0}
  .bg-ls .c-tien{grid-column:2;grid-row:1}
  .bg-ls td.c-t{grid-column:1;grid-row:2;font-size:12px;color:var(--muted);white-space:normal}
  .bg-ls .c-t small{display:inline;margin-left:6px}
  .bg-ls td.c-tt{grid-column:2;grid-row:2;text-align:right}
  .bg-ls .c-nv{grid-column:1;grid-row:3;font-size:12px;color:var(--muted)}
  .bg-ls td.c-don{grid-column:2;grid-row:3;text-align:right}
}

/* ----- Giấy báo giá (kiểu Hoá đơn đặt hàng KiotViet), khổ A4 dọc, đọc được trên điện thoại ----- */
.bgp{background:#fff;color:#111;font-family:var(--font);font-size:13px;line-height:1.45;max-width:780px;margin:0 auto;padding:16px;border:1px solid var(--line);border-radius:6px;width:100%;box-sizing:border-box}
.bgp *{color:inherit}
.bgp-h{display:flex;gap:10px;align-items:center;font-size:12.5px}
.bgp-h img{width:56px;height:56px;object-fit:contain;flex:none}
.bgp-h b{font-size:15px;letter-spacing:.02em}
.bgp-t{text-align:center;margin:14px 0 2px;font-size:20px;letter-spacing:.06em;color:#111}
.bgp-so,.bgp-ng{text-align:center;font-size:12.5px}
.bgp-ng{font-style:italic;margin-bottom:10px}
.bgp-kh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:8px 0}
.bgp-kh>div{min-width:0;overflow-wrap:anywhere}
.bgp-kh span{color:#444}
.bgp-kh .trong{display:inline-block;min-width:80px;border-bottom:1px dotted #999}
.bgp-bo{font-weight:600;margin:4px 0 6px}
.bgp-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bgp-tb{width:100%;border-collapse:collapse;border-spacing:0;font-size:12.5px}
.bgp-tb th,.bgp-tb td,.bgp-tb th:first-child,.bgp-tb td:first-child{position:static;white-space:normal;z-index:auto}
.bgp-tb th,.bgp-tb td{border:1px solid #333;padding:4px 5px;background:#fff;color:#111;vertical-align:top;text-align:left}
.bgp-tb th{font-weight:700;text-align:center;background:#f3f3f3}
.bgp-tb td.c,.bgp-tb .c{text-align:center;white-space:nowrap}
.bgp-tb td.r,.bgp-tb .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bgp-tb .ma{white-space:nowrap}
.bgp-tb .ten{min-width:120px}
.bgp-tb tr.qua td{font-style:italic;color:#444}
.bgp-tong{margin:8px 0 0 auto;width:min(100%,340px);display:grid;gap:2px}
.bgp-tong>div{display:flex;justify-content:space-between;gap:12px}
.bgp-tong b{font-variant-numeric:tabular-nums}
.bgp-tong .tt{border-top:1px solid #333;padding-top:3px;margin-top:2px;font-size:14px}
.bgp-chu{text-align:right;font-style:italic;font-size:12px;margin:4px 0 8px}
.bgp-lu{font-size:12.5px;display:grid;gap:2px}
.bgp-ky{margin-top:14px}
.bgp-ngk{text-align:right;font-style:italic;font-size:12.5px;margin-bottom:6px}
.bgp-kys{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:16px;min-height:110px}
.bgp-kys>div{display:flex;flex-direction:column;align-items:center}
.bgp-kys i{font-size:11.5px;color:#555}
.bgp-kys .ten{margin-top:auto;font-weight:600}
@media (max-width:480px){
  .bgp{padding:10px;font-size:12px}
  .bgp-kh{grid-template-columns:minmax(0,1fr)}
  .bgp-tb{font-size:10px;table-layout:auto}
  .bgp-tb th,.bgp-tb td{padding:3px 2px}
  .bgp-tb th{font-size:9.5px;white-space:normal}
  .bgp-tb .ma{white-space:normal;word-break:break-all}
  .bgp-tb .ten{min-width:0;overflow-wrap:anywhere}
  .bgp-tb th:first-child,.bgp-tb td:first-child{width:18px;padding:3px 1px}
}

/* Khung xem: trang A4 thu nhỏ vừa màn (bao-gia.js vuaGiay) */
.bgp-khung{width:100%;overflow:hidden}
.bgp-khung .bgp{transform-origin:0 0;max-width:none}
@media(min-width:800px){.bgp-khung .bgp{max-width:780px}}
/* Cửa sổ in */
body.bgp-in{background:#fff;color:#111;margin:0;padding:12px}
body.bgp-in .bgp{border:0;padding:0;max-width:none}
@page{size:A4 portrait;margin:12mm}
@media print{
  body.bgp-in{padding:0}
  .bgp{border:0;padding:0;max-width:none;font-size:12px}
  .bgp-tw{overflow:visible}
  .bgp-tb{font-size:11px}
  .bgp-tb th,.bgp-tb td{padding:2px 4px}
  .bgp-tb tr{break-inside:avoid}
  .bgp-t{margin:8px 0 0}
  .bgp-ng{margin-bottom:6px}
  .bgp-ky{break-inside:avoid;margin-top:8px}
  .bgp-kys{min-height:90px}
  .bgp-kh{grid-template-columns:repeat(2,minmax(0,1fr))}
}