/* ============================================================================
   98 — BÙ IN ẤN (compat riêng cho trang /  — Trình Tạo Báo Giá Siêu Tốc)
   Thay cho Tailwind CDN (đã gỡ bỏ khỏi index.html) CHỈ trong phạm vi khu vực xem
   trước A4 / in / xuất PDF (.print-area, dòng ~556-696 của index.html + nội dung
   động do recalculate()/renderDocTypeView() đổ vào bên trong nó).

   ⚠ NGOẠI LỆ DUY NHẤT TRONG TOÀN BỘ DỰ ÁN: các cỡ chữ dưới đây hardcode bằng
     px/em thay vì dùng thang --t1..--t7. Đây là tái tạo NGUYÊN VẸN các giá trị
     Tailwind v3 mặc định mà bản in cũ đang dùng — đổi sang thang chữ co giãn sẽ
     làm lệch layout tờ giấy in thật so với bản đã giao khách hàng trước đây.

   NGUYÊN TẮC AN TOÀN: viết đúng giá trị Tailwind v3 mặc định, không làm tròn.
   Nạp SAU css/07-in-an.css, TRƯỚC css/99-thang-chu.css (xem index.html).
   ============================================================================ */

/* --- Reset viền kiểu Tailwind Preflight (dự án hiện không có) — thiếu dòng này
   thì .border/.border-b/.border-t không ra viền gì (chúng chỉ set border-width,
   còn border-style/border-color đến từ preflight). Chỉ áp trong .print-area. */
.print-area, .print-area *, .print-area *::before, .print-area *::after{
  border-width:0; border-style:solid; border-color:#e5e7eb;
}

/* --- Tờ giấy PHẢI luôn nền trắng/chữ đen bất kể theme sáng/tối đang bật (mục 9) ---
   Chính <section> mang cả 2 lớp .bg-white và .print-area có luật khác trong <style>
   nội tuyến của index.html buộc .print-area nền TRONG SUỐT (để mọi phần tử con
   dùng "background:transparent!important" không đục lỗ loang lổ trên nền trắng) —
   luật đó khiến nền tối của trang lộ ra sau tờ giấy khi bật dark mode. Ghi đè lại
   bằng độ đặc trưng cao hơn (2 lớp cộng lại) để LUÔN thắng, bất kể thứ tự nạp CSS. */
section.print-area.bg-white{
  background:#fff !important; background-color:#fff !important; color-scheme:light;
}

/* --- Bố cục / kích thước khung A4 --- */
:where(.print-area, .print-area *).min-w-\[210mm\]{min-width:210mm}
:where(.print-area, .print-area *).max-w-\[210mm\]{max-width:210mm}
:where(.print-area, .print-area *).min-h-\[297mm\]{min-height:297mm}
:where(.print-area, .print-area *).p-\[12mm\]{padding:12mm}
:where(.print-area, .print-area *).max-w-\[130px\]{max-width:130px}
:where(.print-area, .print-area *).min-w-\[150px\]{min-width:150px}
:where(.print-area, .print-area *).h-\[1\.5px\]{height:1.5px}

/* --- flex / grid --- */
:where(.print-area, .print-area *).flex{display:flex} :where(.print-area, .print-area *).flex-1{flex:1 1 0%} :where(.print-area, .print-area *).flex-col{flex-direction:column}
:where(.print-area, .print-area *).justify-start{justify-content:flex-start} :where(.print-area, .print-area *).justify-between{justify-content:space-between} :where(.print-area, .print-area *).justify-end{justify-content:flex-end}
:where(.print-area, .print-area *).items-start{align-items:flex-start} :where(.print-area, .print-area *).items-end{align-items:flex-end}
:where(.print-area, .print-area *).grid{display:grid}
:where(.print-area, .print-area *).grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(.print-area, .print-area *).grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
:where(.print-area, .print-area *).gap-3{gap:.75rem} :where(.print-area, .print-area *).gap-4{gap:1rem}

/* --- space-y (margin-top trên phần tử con, trừ đứa đầu) --- */
:where(.print-area, .print-area *).space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
:where(.print-area, .print-area *).space-y-1>:not([hidden])~:not([hidden]){margin-top:.25rem}
:where(.print-area, .print-area *).space-y-0\.5>:not([hidden])~:not([hidden]){margin-top:.125rem}

/* --- màu nền / viền --- */
:where(.print-area, .print-area *).bg-white{background-color:#fff}
:where(.print-area, .print-area *).bg-black{background-color:#000}
:where(.print-area, .print-area *).border{border-width:1px}
:where(.print-area, .print-area *).border-b{border-bottom-width:1px}
:where(.print-area, .print-area *).border-t{border-top-width:1px}
:where(.print-area, .print-area *).border-black{border-color:#000}
:where(.print-area, .print-area *).border-slate-100{border-color:#f1f5f9}
:where(.print-area, .print-area *).border-slate-300{border-color:#cbd5e1}
:where(.print-area, .print-area *).border-slate-800{border-color:#1e293b}
:where(.print-area, .print-area *).border-dashed{border-style:dashed}
:where(.print-area, .print-area *).rounded-none{border-radius:0}
:where(.print-area, .print-area *).border-collapse{border-collapse:collapse}
:where(.print-area, .print-area *).table-fixed{table-layout:fixed}

/* --- màu chữ --- */
:where(.print-area, .print-area *).text-slate-900{color:#0f172a}
:where(.print-area, .print-area *).text-slate-400{color:#94a3b8}
:where(.print-area, .print-area *).text-black{color:#000}
:where(.print-area, .print-area *).text-red-600{color:#dc2626}

/* --- chữ: cỡ / trọng lượng / kiểu --- */
:where(.print-area, .print-area *).text-xs{font-size:.75rem;line-height:1rem}
:where(.print-area, .print-area *).text-sm{font-size:.875rem;line-height:1.25rem}
:where(.print-area, .print-area *).text-\[9\.2px\]{font-size:9.2px}
:where(.print-area, .print-area *).text-\[10px\]{font-size:10px}
:where(.print-area, .print-area *).text-\[13px\]{font-size:13px}
:where(.print-area, .print-area *).text-\[14px\]{font-size:14px}
:where(.print-area, .print-area *).font-normal{font-weight:400}
:where(.print-area, .print-area *).font-bold{font-weight:700}
:where(.print-area, .print-area *).font-extrabold{font-weight:800}
:where(.print-area, .print-area *).font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
:where(.print-area, .print-area *).uppercase{text-transform:uppercase}
:where(.print-area, .print-area *).italic{font-style:italic}
:where(.print-area, .print-area *).tracking-tight{letter-spacing:-.025em}
:where(.print-area, .print-area *).tracking-widest{letter-spacing:.1em}
:where(.print-area, .print-area *).whitespace-nowrap{white-space:nowrap}
:where(.print-area, .print-area *).break-words{overflow-wrap:break-word}
:where(.print-area, .print-area *).leading-tight{line-height:1.25}
:where(.print-area, .print-area *).leading-snug{line-height:1.375}
:where(.print-area, .print-area *).leading-relaxed{line-height:1.625}
:where(.print-area, .print-area *).leading-normal{line-height:1.5}
:where(.print-area, .print-area *).text-center{text-align:center}
:where(.print-area, .print-area *).text-left{text-align:left}
:where(.print-area, .print-area *).text-right{text-align:right}

/* --- kích thước / khoảng cách --- */
:where(.print-area, .print-area *).w-full{width:100%} :where(.print-area, .print-area *).w-auto{width:auto} :where(.print-area, .print-area *).w-16{width:4rem} :where(.print-area, .print-area *).h-8{height:2rem} :where(.print-area, .print-area *).h-20{height:5rem}
:where(.print-area, .print-area *).mx-auto{margin-left:auto;margin-right:auto}
:where(.print-area, .print-area *).mt-0\.5{margin-top:.125rem} :where(.print-area, .print-area *).mt-1{margin-top:.25rem} :where(.print-area, .print-area *).mt-2{margin-top:.5rem} :where(.print-area, .print-area *).mt-3{margin-top:.75rem} :where(.print-area, .print-area *).mt-6{margin-top:1.5rem}
:where(.print-area, .print-area *).mb-1{margin-bottom:.25rem} :where(.print-area, .print-area *).mb-2{margin-bottom:.5rem} :where(.print-area, .print-area *).mb-3{margin-bottom:.75rem}
:where(.print-area, .print-area *).pt-0\.5{padding-top:.125rem} :where(.print-area, .print-area *).pt-1{padding-top:.25rem} :where(.print-area, .print-area *).pt-2{padding-top:.5rem}
:where(.print-area, .print-area *).pb-2{padding-bottom:.5rem} :where(.print-area, .print-area *).pb-3{padding-bottom:.75rem}
:where(.print-area, .print-area *).pl-1{padding-left:.25rem} :where(.print-area, .print-area *).pl-2{padding-left:.5rem}
:where(.print-area, .print-area *).pr-2{padding-right:.5rem}
:where(.print-area, .print-area *).px-2{padding-left:.5rem;padding-right:.5rem}
:where(.print-area, .print-area *).p-1{padding:.25rem} :where(.print-area, .print-area *).p-1\.5{padding:.375rem} :where(.print-area, .print-area *).p-2{padding:.5rem} :where(.print-area, .print-area *).p-4{padding:1rem}
:where(.print-area, .print-area *).object-contain{object-fit:contain}
:where(.print-area, .print-area *).my-2{margin-top:.5rem;margin-bottom:.5rem}

/* --- Tiêu đề chữ ký trong bản in — dựng riêng theo từng loại chứng từ (renderDocTypeView),
   chỉ dùng bên trong .print-area nên thuộc phạm vi file này. .sig-title--sm hardcode 9.2px
   (ngoại lệ đã khai ở đầu file); .sig-title--md dùng thang --t3/--ink bình thường vì bản thân
   nó vẫn bị luật !important font-size:15px/color:#000 của .print-area ghi đè khi hiển thị. */
.sig-title { font-weight: 700; text-transform: uppercase; }
.sig-title--sm { font-size: 9.2px; line-height: 1.375; overflow-wrap: break-word; }
.sig-title--sm.nowrap { white-space: nowrap; overflow-wrap: normal; }
.sig-title--md { font-size: var(--t3); color: var(--ink); }
.nowrap { white-space: nowrap; }

/* --- 2 lớp đổi tên để tránh escape ":" (xl:shadow-2xl, print:text-black) — index.html
   đã đổi trực tiếp sang 2 tên này trên thẻ tĩnh. Lớp hover:bg-slate-50/50 gốc (chỉ có
   tác dụng khi xem trên màn, không ảnh hưởng bản in) đã được bỏ hẳn ở nơi sinh ra nó.
   ⚠ xl:shadow-2xl gốc chỉ có tác dụng từ 1280px trở lên — giữ đúng breakpoint để bóng đổ
   không xuất hiện khi xem trên màn hẹp hơn (không ảnh hưởng bản in: đã tắt bằng !important
   trong @media print bên dưới, không ảnh hưởng file .docx: buildDocxXml không đọc CSS). */
@media (min-width:1280px){ :where(.print-area, .print-area *).pa-shadow-xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)} }
@media print{ .pa-print-black{color:#000} }

/* Khung cuộn ngang bọc .print-area (xem index.html): trên màn cho cuộn ngang để giữ
   đúng bề ngang A4 thật; lúc in bỏ cuộn, tương đương "print:overflow-visible" cũ. */
@media print{ .pa-print-visible{overflow:visible!important} }