/* 🧾 KIỂU TỜ PHIẾU BÁN HÀNG — dùng chung cho màn xem và bản in.
   ⚖ Đây là PHIẾU BÁN HÀNG NỘI BỘ, không phải hoá đơn thuế: không ô thuế suất, không ô mã
   cơ quan thuế, không ô chữ ký số. */

.bl-to { background: #fff; color: #111; padding: 14px 16px; border-radius: 8px; font-size: 12px; line-height: 1.5; }
.bl-huy { border: 2px solid #c00; color: #c00; font-weight: 700; text-align: center;
  padding: 4px; margin-bottom: 10px; letter-spacing: 1px; }
.bl-tieu { text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.bl-phu { text-align: center; color: #555; margin-bottom: 10px; }
.bl-kh { margin-bottom: 10px; }
.bl-bang { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.bl-bang th, .bl-bang td { border: 1px solid #bbb; padding: 4px 6px; }
.bl-bang th { background: #f0f0f0; font-size: 11px; }
.bl-tong > div { display: flex; justify-content: space-between; padding: 2px 0; }
.bl-tong .bl-lon { border-top: 1px solid #333; margin-top: 4px; padding-top: 4px;
  font-size: 15px; font-weight: 700; }
.bl-chu { margin-top: 8px; }
.bl-ghi { margin-top: 4px; color: #555; }
.bl-ky { display: flex; justify-content: space-around; text-align: center;
  margin-top: 22px; font-size: 11px; }
.bl-ky > div { flex: 1; }
/* Đầu tờ: tên đơn vị · địa chỉ · điện thoại — công ty tự đặt (kho-in-phieu). */
.bl-dv { text-align: center; color: #333; font-size: 11px; margin-bottom: 8px; line-height: 1.4; }
.bl-dv b { font-size: 13px; letter-spacing: .3px; }
/* Logo công ty (kho-in-phieu, 07/09/2026): ảnh nhỏ, cao tối đa 48px; đứng trái hay giữa theo cài đặt. */
.bl-dv .bl-logo { display: block; max-height: 48px; max-width: 180px; object-fit: contain; margin: 0 auto 4px; }
.bl-dv.bl-dv-trai { display: flex; align-items: center; gap: 12px; text-align: left; }
.bl-dv.bl-dv-trai .bl-logo { margin: 0; }

/* ═══ 🎨 MƯỜI THEME TỜ PHIẾU (07/09/2026) ═══════════════════════════════════════════
   Mọi tờ in được bọc trong `.ki-theme.ki-t-<mã>` với biến --ki-mau (màu chính công ty chọn).
   Theme chỉ đổi KIỂU (kẻ, màu, chữ), không đổi nội dung — nội dung là việc của từng màn.
   Không tải theme từ ngoài: bản in phải chạy không mạng, và dự án không chép nguồn ngoài. */
.ki-theme { --ki-mau: #1f4e79; }
.ki-theme .bl-tieu { color: var(--ki-mau); }
/* 1 · Cổ điển — như bản gốc, chỉ tiêu đề mang màu chính. */
/* 2 · Tối giản */
.ki-t-toi_gian .bl-bang th, .ki-t-toi_gian .bl-bang td { border: none; border-bottom: 1px solid #ddd; }
.ki-t-toi_gian .bl-bang th { background: none; border-bottom: 2px solid var(--ki-mau); text-align: left; }
.ki-t-toi_gian .bl-tieu { text-align: left; font-size: 16px; letter-spacing: 1px; }
.ki-t-toi_gian .bl-phu { text-align: left; }
/* 3 · Hiện đại */
.ki-t-hien_dai .bl-to { border-top: 6px solid var(--ki-mau); padding-top: 12px; }
.ki-t-hien_dai .bl-tieu { text-align: left; font-size: 18px; }
.ki-t-hien_dai .bl-phu { text-align: left; }
.ki-t-hien_dai .bl-bang th, .ki-t-hien_dai .bl-bang td { border: none; border-bottom: 1px solid #ccc; }
.ki-t-hien_dai .bl-bang th { background: none; color: var(--ki-mau); border-bottom: 2px solid var(--ki-mau); }
/* 4 · Doanh nghiệp */
.ki-t-doanh_nghiep .bl-dv { border-bottom: 3px double var(--ki-mau); padding-bottom: 6px; margin-bottom: 10px; }
.ki-t-doanh_nghiep .bl-bang th { background: #eef2f6; color: #111; border-color: #999; font-weight: 700; }
.ki-t-doanh_nghiep .bl-bang td { border-color: #999; }
.ki-t-doanh_nghiep .bl-tong .bl-lon { border-top: 2px solid var(--ki-mau); }
/* 5 · Khối màu */
.ki-t-khoi_mau .bl-dv { background: var(--ki-mau); color: #fff; padding: 8px 12px; border-radius: 4px; }
.ki-t-khoi_mau .bl-dv b { color: #fff; }
.ki-t-khoi_mau .bl-bang th { background: var(--ki-mau); color: #fff; border-color: var(--ki-mau); }
.ki-t-khoi_mau .bl-bang tbody tr:nth-child(even) td { background: #f3f5f8; }
/* 6 · Kẻ sọc */
.ki-t-ke_soc .bl-bang th, .ki-t-ke_soc .bl-bang td { border-left: none; border-right: none; }
.ki-t-ke_soc .bl-bang tbody tr:nth-child(odd) td { background: #f5f7fa; }
.ki-t-ke_soc .bl-bang th { background: #e6ebf1; }
/* 7 · Viền đậm */
.ki-t-vien_dam .bl-to { border: 3px solid var(--ki-mau); padding: 16px 18px; }
.ki-t-vien_dam .bl-tieu { font-size: 20px; letter-spacing: 1.5px; }
.ki-t-vien_dam .bl-bang th, .ki-t-vien_dam .bl-bang td { border: 1px solid #333; }
/* 8 · Thanh lịch */
.ki-t-thanh_lich .bl-to { font-family: Georgia, "Times New Roman", serif; }
.ki-t-thanh_lich .bl-tieu { font-weight: 400; letter-spacing: 3px; font-size: 18px; }
.ki-t-thanh_lich .bl-bang th, .ki-t-thanh_lich .bl-bang td { border: none; border-bottom: 1px solid #bbb; padding: 5px 6px; }
.ki-t-thanh_lich .bl-bang th { background: none; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; border-bottom: 1px solid var(--ki-mau); }
/* 9 · Lưới mờ */
.ki-t-luoi_mo .bl-bang th, .ki-t-luoi_mo .bl-bang td { border: 1px solid #e3e3e3; }
.ki-t-luoi_mo .bl-bang th { background: none; color: var(--ki-mau); font-weight: 700; }
/* 10 · Gọn */
.ki-t-nhiet_gon .bl-to { font-size: 10.5px; line-height: 1.3; padding: 8px 10px; }
.ki-t-nhiet_gon .bl-bang th, .ki-t-nhiet_gon .bl-bang td { padding: 2px 4px; font-size: 10px; }
.ki-t-nhiet_gon .bl-tieu { font-size: 14px; }
.ki-t-nhiet_gon .bl-ky { margin-top: 12px; }
/* Xem thử trong hộp cài đặt: tờ nhỏ, nền trắng cưỡng bức để theme nhìn đúng trên giao diện tối. */
.ki-xemthu { background: #fff; color: #111; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.ki-xemthu .bl-to { border-radius: 0; font-size: 10px; padding: 10px 12px; }
.ki-xemthu .bl-ky { margin-top: 10px; }

/* ═══ 💳 KHỐI MÃ QR THANH TOÁN (21/09/2026) ═══════════════════════════════════════════
   In trên phiếu báo giá và phiếu giao nhận khi công ty bật công tắc — người MUA quét bằng ứng
   dụng ngân hàng để chuyển thẳng vào tài khoản bên bán, KHÔNG qua VTransOps. Chỉ đen trên nền
   trắng: trình duyệt mặc định KHÔNG in nền màu, dựa vào nền là mất khối lúc in.
   `page-break-inside: avoid` là BẮT BUỘC: tệp này trước giờ KHÔNG có quy tắc chống ngắt trang
   nào cho bảng hay dải ô ký, một khối đứng cuối tờ rất dễ bị cắt làm đôi giữa hai trang giấy. */
.bl-qr { display: flex; gap: 12px; align-items: center; border: 1px solid #333; border-radius: 6px;
  padding: 8px 10px; margin: 10px 0; background: #fff; color: #111;
  page-break-inside: avoid; break-inside: avoid; }
.bl-qr svg { display: block; flex: none; }
.bl-qr-tt { font-size: 11px; line-height: 1.6; }
.bl-qr-tt b { font-weight: 700; }

/* Màn xem = tờ hoàn chỉnh (17/09/2026): cùng thân tờ, cùng theme với bản in; nền trắng cưỡng bức
   trên giao diện tối, khổ A4 thu gọn — để chụp màn hình gửi khách. */
.bl-xem-to { background: #fff; color: #111; padding: 12px; border-radius: 6px; overflow: auto; }
.bl-xem-to .bl-to { width: 190mm; max-width: 100%; margin: 0 auto; box-shadow: 0 0 0 1px #ddd; }

/* Khung in nằm ngoài luồng cho tới lúc in — không ẩn hẳn bằng display:none, vì một số trình
   duyệt bỏ qua phần tử display:none khi dựng trang in. */
#bl-khung-in { position: absolute; left: -10000px; top: 0; }

@media print {
  /* Đang in thì GIẤU TOÀN BỘ ứng dụng và chỉ chừa tờ phiếu. Giấu theo body > * để không phải
     liệt kê từng khối — thêm một khối mới vào trang mà quên khai ở đây là nó lọt vào bản in. */
  body.bl-dang-in > * { display: none !important; }
  body.bl-dang-in > #bl-khung-in { display: block !important; position: static !important; }
  body.bl-dang-in .bl-to { border-radius: 0; padding: 0; }

  .bl-in-a4 { width: 100%; font-size: 12px; }
  .bl-in-a4 .bl-to { max-width: 190mm; margin: 0 auto; }

  /* Giấy nhiệt 80mm: bảng sáu cột không vừa, nên thu cỡ chữ và bỏ viền cho đỡ tốn mực.
     Cột ĐVT bỏ hẳn — trên khổ này nó chiếm chỗ hơn là giúp đọc. */
  .bl-in-nhiet { width: 72mm; font-size: 10px; }
  .bl-in-nhiet .bl-to { padding: 0; }
  .bl-in-nhiet .bl-tieu { font-size: 13px; }
  .bl-in-nhiet .bl-bang th, .bl-in-nhiet .bl-bang td { border: none; padding: 2px 1px; font-size: 10px; }
  .bl-in-nhiet .bl-bang thead tr { border-bottom: 1px dashed #000; }
  .bl-in-nhiet .bl-bang th:nth-child(3), .bl-in-nhiet .bl-bang td:nth-child(3) { display: none; }
  .bl-in-nhiet .bl-tong .bl-lon { font-size: 13px; }
  .bl-in-nhiet .bl-ky { display: none; }
  /* 💳 21/09/2026 — giấy nhiệt 72mm quá hẹp cho khối mã QR + năm dòng chữ đi kèm, vỡ dòng chắc
     chắn xảy ra; phía JS đã không gọi mã QR cho khổ này, chốt thêm một lớp ở đây phòng khi khối
     lỡ có mặt trong HTML (vd tái dùng thân tờ ở một chỗ khác chưa lọc theo khổ giấy). */
  .bl-in-nhiet .bl-qr { display: none; }

  @page { margin: 10mm; }
}

/* ─── NHÃN MÃ VẠCH (03/09/2026) ─────────────────────────────────────────────
   Cùng khuôn với phiếu bán: khung nằm ngoài luồng cho tới lúc in, không dùng display:none
   vì một số trình duyệt bỏ qua phần tử ấy khi dựng trang in. */
#mv-khung-in { position: absolute; left: -10000px; top: 0; }

.mv-nhan {
  display: inline-block; text-align: center; padding: 3mm 2mm;
  vertical-align: top; page-break-inside: avoid; break-inside: avoid;
}
.mv-nhan .mv-ten {
  font-size: 10px; font-weight: 600; max-width: 46mm;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv-nhan .mv-so { font-family: monospace; font-size: 11px; letter-spacing: 1px; }
.mv-nhan svg { display: block; margin: 1mm auto 0; }

@media print {
  body.mv-dang-in > * { display: none !important; }
  body.mv-dang-in > #mv-khung-in { display: block !important; position: static !important; }
  /* Nhãn in ĐEN TUYỀN trên nền trắng — máy quét đọc bằng tương phản, nền xám của giao diện
     tối lọt vào bản in là tem quét chập chờn hoặc không đọc được. */
  body.mv-dang-in, body.mv-dang-in #mv-khung-in { background: #fff !important; color: #000 !important; }
  .mv-nhan { border: none; }
}