/* ============================================================================
IN-AN-CU.CSS — BỘ MÃ BẢN IN "AN CƯ"
Dựng 02/08/2026 · phiên Não Tập Đoàn
Nguồn số: 04-BO-MA-THIET-KE.md mục 4.3 (thang chữ giấy in) + mục 2 (thang màu)
Luật câu chữ: 06-CHUAN-NHAN-DIEN-CHO-APP.md TC21.5 (chân trang pháp lý)
🔴 BA ĐIỀU CẤM CỦA BẢN IN — khác hẳn màn hình:
1. CẤM nền màu lớn. Giấy in nền màu = tốn mực, photo ra đen sì, fax mất chữ.
Màu chỉ được dùng cho: logo · vạch kẻ · chữ tiêu đề.
2. CẤM chữ dưới 12pt. Kể cả dòng miễn trừ, kể cả điều khoản phụ.
Hợp đồng chữ 9pt là cách nhanh nhất để chủ nhà 55 tuổi ký mà không đọc.
3. CẤM in ra thứ không phải giấy tờ: nút bấm, thanh tab, nút nổi, ô tìm kiếm.
CÁCH DÙNG: nạp sau style.css.
Muốn xem thử trên màn hình thì bỏ media="print" và mở MAU-XEM-THU-GIAY-IN.html
========================================================================== */
/* ---------------------------------------------------------------------------
1. KHỔ GIẤY
A6 = phiếu thu, phiếu chi, phiếu nghiệm thu (105 × 148 mm)
A5 = hoá đơn tháng, biên bản chốt chỉ số (148 × 210 mm)
A4 = hợp đồng, biên bản bàn giao, bảng nội quy
Lề 10mm: máy in phun/laser phổ thông đều in được, không bị cắt chữ.
------------------------------------------------------------------------- */
@page { size: A4 portrait; margin: 12mm 10mm; }
@page phieu-a6 { size: A6 portrait; margin: 8mm; }
@page hoadon-a5 { size: A5 portrait; margin: 10mm; }
.giay-a6 { page: phieu-a6; }
.giay-a5 { page: hoadon-a5; }
/* ---------------------------------------------------------------------------
2. NỀN CHUNG CỦA MỌI TỜ GIẤY
Phông: Be Vietnam Pro — CÙNG một phông với app.
⚠️ Bộ mã 04 mục 4.1 để ngỏ Lora cho tiêu đề giấy. Ở đây CHỌN KHÔNG dùng Lora:
thêm 1 phông = thêm ~40 KB tải về + 1 chỗ nữa để lệch. Tiêu đề dùng
Be Vietnam Pro 800 — chính là phương án dự phòng mà mục 4.1 đã cho phép.
------------------------------------------------------------------------- */
.giay {
font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 13pt; /* thân bài — mặc định */
line-height: 1.5; /* tiếng Việt dấu 2 tầng, dưới 1.5 là dấu đâm nhau */
color: #1F2A24; /* --xam-900 */
background: #FFFFFF;
-webkit-print-color-adjust: exact; /* giữ đúng màu logo khi in */
print-color-adjust: exact;
}
.giay * { box-sizing: border-box; }
/* Sàn cứng: không có chữ nào nhỏ hơn 12pt trên giấy */
.giay small,
.giay .ghi-chu,
.giay .chan-trang { font-size: 12pt; }
/* ---------------------------------------------------------------------------
3. ĐẦU TRANG — logo ngang + tên pháp nhân
------------------------------------------------------------------------- */
.giay-dau {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8mm;
padding-bottom: 3mm;
border-bottom: 0.6mm solid #0E5C43; /* --chinh-800 */
margin-bottom: 5mm;
}
.giay-dau .logo { height: 14mm; } /* sàn logo trên giấy: 12mm */
.giay-dau .don-vi { font-size: 12pt; line-height: 1.35; text-align: right; }
.giay-dau .don-vi b { font-weight: 700; }
/* ---------------------------------------------------------------------------
4. TIÊU ĐỀ GIẤY
------------------------------------------------------------------------- */
.giay-ten {
font-size: 19pt; /* thang 4.3: tiêu đề giấy 18–20pt */
font-weight: 800;
line-height: 1.2;
color: #0E5C43;
text-align: center;
margin: 0 0 1mm;
letter-spacing: 0.02em; /* chữ IN HOA ngắn mới được giãn */
}
.giay-so { /* số phiếu — thứ giữ chữ MINH BẠCH */
text-align: center;
font-size: 13pt;
font-weight: 600;
margin: 0 0 5mm;
}
.giay-so .so { font-variant-numeric: tabular-nums; }
.giay-de-muc { /* Điều 1, Điều 2… */
font-size: 15pt;
font-weight: 700;
margin: 5mm 0 2mm;
}
/* ---------------------------------------------------------------------------
5. BẢNG SỐ — tiền, chỉ số điện nước
Số căn phải, dùng chữ số đều cột (tabular) để cột tiền thẳng hàng.
------------------------------------------------------------------------- */
.giay-bang { width: 100%; border-collapse: collapse; font-size: 12.5pt; }
.giay-bang th,
.giay-bang td {
border: 0.25mm solid #8A8F86; /* --xam-500, đủ đậm để photo còn thấy */
padding: 2mm 2.5mm;
vertical-align: top;
}
.giay-bang th {
background: #F3EEE6; /* --xam-100: xám rất nhạt, tốn mực không đáng kể */
font-weight: 700;
text-align: left;
}
.giay-bang td.tien,
.giay-bang th.tien { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.giay-bang tr.tong td { font-weight: 800; font-size: 14pt; border-top: 0.6mm solid #0E5C43; }
.giay-tien-chu { font-size: 12.5pt; font-style: italic; margin-top: 2mm; }
/* ---------------------------------------------------------------------------
6. Ô KÝ TÊN — hai cột, luôn có ô cho khách ký
------------------------------------------------------------------------- */
.giay-ky { display: flex; gap: 6mm; margin-top: 8mm; }
.giay-ky > div { flex: 1; text-align: center; font-size: 12pt; }
.giay-ky .vai { font-weight: 700; }
.giay-ky .huong-dan { font-size: 12pt; color: #5F6D65; } /* --xam-600 */
.giay-ky .cho-ky { height: 20mm; } /* chỗ trống để ký tay */
/* ---------------------------------------------------------------------------
7. CHÂN TRANG PHÁP LÝ — TC21.5, bắt buộc trên hoá đơn và hợp đồng
------------------------------------------------------------------------- */
.giay-chan {
margin-top: 6mm;
padding-top: 2mm;
border-top: 0.25mm solid #E6DFD3; /* --xam-200: vạch trang trí */
font-size: 12pt;
line-height: 1.35;
color: #37433C; /* --xam-800 */
text-align: center;
}
.giay-chan .lien { font-weight: 700; }
/* ---------------------------------------------------------------------------
8. LIÊN 1 / LIÊN 2 — dải nhận biết ở mép trên
Không dùng nền màu lớn: chỉ một vạch 3mm.
------------------------------------------------------------------------- */
.giay-lien { font-size: 12pt; font-weight: 700; letter-spacing: .02em; margin-bottom: 2mm; }
.giay-lien.luu { color: #0E5C43; }
.giay-lien.khach { color: #B4530F; } /* --cam-700, chữ trên nền trắng: 4.9:1 */
/* ---------------------------------------------------------------------------
9. 🔴 KHI IN TỪ TRONG APP — ẨN THỨ KHÔNG PHẢI GIẤY TỜ
Đây là phần mà app đang thiếu hoàn toàn (đo 02/08/2026: 0 dòng @media print).
Danh sách class lấy từ AN-CU/public/style.css + index.html.
------------------------------------------------------------------------- */
@media print {
/* nền app màu kem -> giấy phải trắng */
html, body { background: #FFFFFF !important; }
/* thứ chỉ có nghĩa trên màn hình */
.tabbar, .topbar, .fab, [class*="-fab"], .sheet-close, .nav, .bottom-nav,
.btn, button, input[type="button"], input[type="submit"],
.search, .searchbar, .toast, .banner-cap-nhat, .chip-loc,
.an-mung, .confetti, .skeleton { display: none !important; }
/* thẻ trên màn có bóng và bo góc -> giấy thì không */
.card, .the, .khoi { box-shadow: none !important; border-radius: 0 !important; }
/* không để bảng tiền bị cắt đôi sang trang sau */
table, .giay-bang { page-break-inside: auto; }
tr, .giay-ky { page-break-inside: avoid; }
thead { display: table-header-group; } /* lặp đầu bảng mỗi trang */
/* mỗi tờ giấy một trang */
.giay + .giay { page-break-before: always; }
/* in ra giấy thì đường dẫn của link phải hiện, không thì mất thông tin */
.giay a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12pt; }
}
/* ═══════════════════════════════════════════════════════════════════════════
10. ÁNH XẠ THẺ TRẦN — PHẦN NÃO APP THÊM 02/08/2026, KHÔNG CÓ TRONG BẢN GỐC
═══════════════════════════════════════════════════════════════════════════
Bản gốc của não Tập Đoàn đặt tên class cho từng phần (.giay-ten, .giay-bang…).
Nhưng bốn đường in trong app KHÔNG dựng HTML bằng tay: chúng đổi văn bản
markdown (mẫu biểu · hồ sơ hộ kinh doanh · hồ sơ PCCC · định mức) thành thẻ
trần h1/h2/table/blockquote. Muốn giấy in theo bộ mã mà không phải viết lại
từng mẫu thì phải ánh xạ thẻ trần về đúng thang chữ ở đây.
🔴 Sửa số ở mục 4 và 5 thì sửa cả mục này cho khớp — hai chỗ cùng một thang.
🔴 Mã HEX ở file này CỐ Ý không gọi var(): bộ mã còn được cắm vào iframe và cửa
sổ mới, những chỗ đó KHÔNG nạp style.css nên biến CSS giải ra rỗng. Rào
TC19.1 chỉ quét .js và .html nên file .css này không vướng — và đây là lý do.
------------------------------------------------------------------------- */
.giay h1 {
font-size: 19pt; font-weight: 800; line-height: 1.2;
color: #0E5C43; text-align: center; margin: 0 0 3mm;
}
.giay h2 { font-size: 15pt; font-weight: 700; margin: 5mm 0 2mm; }
.giay h3 { font-size: 13.5pt; font-weight: 700; margin: 4mm 0 1.5mm; }
.giay p { margin: 0 0 2mm; }
.giay table { width: 100%; border-collapse: collapse; font-size: 12.5pt; margin: 3mm 0; }
.giay th, .giay td {
border: 0.25mm solid #8A8F86; padding: 2mm 2.5mm; vertical-align: top;
}
.giay th { background: #F3EEE6; font-weight: 700; text-align: left; }
/* Dòng trích trong hồ sơ là CĂN CỨ PHÁP LÝ, không phải chú thích phụ —
trước 02/08 nó là 11pt, dưới sàn cứng của giấy in. */
.giay blockquote {
border-left: 0.6mm solid #8A8F86; margin: 3mm 0; padding: 1.5mm 3mm;
font-size: 12pt; color: #37433C;
}
/* Tờ định mức điện nước đổi dòng trích "> …" thành
chứ không thành
như hai file kia. Cho nó cùng dáng với blockquote để giấy in đồng bộ. */
.giay .mt { font-size: 12pt; color: #37433C; }
.giay hr { border: 0; border-top: 0.25mm solid #E6DFD3; margin: 4mm 0; }
.giay ul, .giay ol { margin: 0 0 2mm; padding-left: 6mm; }
/* ---------------------------------------------------------------------------
11. CHỈ HIỆN KHI IN — phần não App thêm
Chân trang pháp lý và số phiếu chỉ có nghĩa trên giấy. Để nó hiện trên màn
hình là thêm chữ vào màn, trái Tiêu chuẩn 18 "ít chữ".
🔴 Ô ẨN phải viết THẲNG vào thẻ: style="display:none". File này nạp bằng
media="print" nên mọi dòng trong đây KHÔNG có hiệu lực trên màn hình —
đặt .chi-in{display:none} ở đây là ô vẫn hiện lúc không in. Đã vấp
02/08/2026, sửa trong cùng phiên.
------------------------------------------------------------------------- */
@media print { .chi-in { display: block !important; } }