/* ⚠ FILE NÀY CHÉP TỪ BỘ BÀN GIAO "Thiết kế lại thuyết minh" (2026-08-06), CÓ VÁ 2 LỖI CÚ PHÁP.
Đừng chép đè bằng bản gốc mà không vá lại — xem hai chú thích "VÁ CÚ PHÁP" bên dưới.
Nạp SAU calcsheet.css; cần fonts/barlow.css nạp trước (chạy ban-giao/tai-font-barlow.js). */
/* ============================================================================
* mau-thuyet-minh.css — Mẫu trình bày bản thuyết minh in (A4 dọc, đen trắng)
* Nạp SAU calcsheet.css. Chỉ đổi TRÌNH BÀY, không đụng cấu trúc DOM của app.
*
* Cách nạp trong tiepdia-app/index.html:
*
* <-- thêm dòng này
*
* Bật/tắt: thêm/bỏ lớp `tm-print` trên (mặc định dưới đây là LUÔN BẬT khi in,
* và bật trên màn hình khi ).
* ========================================================================== */
:root{
/* --- HỆ CỠ CHỮ (pt — dùng pt để khớp Word, không dùng px) --- */
--tm-fs-body: 13pt; /* thân bài, đoạn thuyết minh */
--tm-fs-formula: 12pt; /* công thức (nhỏ hơn thân bài 1 bậc) */
--tm-fs-table: 11pt; /* MỌI ô bảng, kể cả tiêu đề cột */
--tm-fs-head: 13pt; /* tiêu đề mục "1. ĐIỆN TRỞ SUẤT ĐẤT" */
--tm-fs-label: 10pt; /* nhãn "BẢNG 3 — …" */
--tm-fs-note: 11pt; /* ghi chú, nguồn, chú thích hình */
--tm-fs-pghdr: 11pt; /* header trang */
--tm-fs-pgftr: 10pt; /* footer trang / số trang */
--tm-fs-ref: 11pt; /* tài liệu tham khảo */
/* --- MÀU (in đen trắng: KHÔNG nhấn bằng màu, chỉ bằng đậm/nền xám) --- */
--tm-ink: #1d1f20; /* toàn bộ chữ */
--tm-rule: rgba(29,31,32,.16); /* đường kẻ mảnh (header/footer) */
--tm-grid: #1d1f20; /* lưới bảng — đen, nét 1px */
--tm-th-bg: #f5f5f8; /* nền tiêu đề cột (xám rất nhạt) */
--tm-hi-bg: #e7e7ea; /* nền dòng ĐANG TRA trong bảng tra */
/* --- FONT — KHỚP TUYỆT ĐỐI VỚI BẢN MẪU ---
Barlow (thân bài) + Barlow Condensed (tiêu đề, header, tên công trình).
ĐIỀU KIỆN: đã chạy `node ban-giao/tai-font-barlow.js` và nạp fonts/barlow.css
trong TRƯỚC file này. Nếu chưa, hai dòng dưới tự lùi về Be Vietnam Pro
nhờ danh sách dự phòng — bản in vẫn đúng cỡ chữ, chỉ khác dáng chữ. */
--tm-font-body: 'Barlow', 'Be Vietnam Pro', system-ui, sans-serif;
--tm-font-head: 'Barlow Condensed', 'Barlow', 'Be Vietnam Pro', system-ui, sans-serif;
/* Weight: Barlow Condensed hẹp hơn Barlow ~12%, nên tiêu đề dùng 700 (không phải
600 như trên web) để giữ đúng độ đậm thị giác của bản mẫu khi in. */
--tm-fw-head: 700;
/* --- TRANG IN --- */
--tm-page-mt: 9mm; /* lề trên (= 34px @96dpi trong bản mẫu) */
--tm-page-mb: 9mm; /* lề dưới */
--tm-page-ml: 10.6mm; /* lề trái (= 40px) */
--tm-page-mr: 10.6mm; /* lề phải */
}
/* ==========================================================================
1. TRANG IN
========================================================================== */
@page{
size: A4 portrait;
margin: var(--tm-page-mt) var(--tm-page-mr) var(--tm-page-mb) var(--tm-page-ml);
}
/* 🔴 [2026-08-06] VÁ CÚ PHÁP so với bản bàn giao: bản gốc viết
`body.tm-print,` xuống dòng rồi `@media print{ body{ … }}`
— đó KHÔNG phải CSS hợp lệ (danh sách selector không được kết thúc bằng at-rule).
ĐO TRÊN TRÌNH DUYỆT: nguồn có 3 khối @media, chỉ 1 khối sống sót ⇒ hai khối in bị nuốt,
Ctrl+P khi body chưa mang class `tm-print` thì cỡ chữ và căn đều KHÔNG áp.
Nay tách làm hai luật rời, đúng ý tác giả. */
/* 🔴 [2026-08-08, vá TRÀN PHẠM VI — user báo "giao diện bị thay đổi"] Bản mẫu của chủ trì viết
cho MỘT TRANG thuyết minh độc lập nên áp thẳng lên body; trong app thì body = CẢ GIAO DIỆN
THAO TÁC. Đo trên live: toàn app đổi Be Vietnam Pro→Barlow, 14px→13pt, nền xám→trắng; .icard
mọi thẻ mất viền/bóng; bảng Thẻ 2/5 (.ltab/.guide-mtx/.panel/.cm-tab) đổi dáng; badge .verdict
ngoài phiếu mất màu. NGUYÊN TẮC từ nay: luật MÀN HÌNH của mẫu chỉ áp TRONG `.result-sheet`
(phiếu Thẻ 3); khối @media print giữ nguyên (khi in, giao diện thao tác đã bị ẩn ở mục 9). */
body.tm-print .result-sheet{
background:#fff;
color:var(--tm-ink);
font-family:var(--tm-font-body);
font-size:var(--tm-fs-body);
line-height:1.6;
}
@media print{
body{
background:#fff;
color:var(--tm-ink);
font-family:var(--tm-font-body);
font-size:var(--tm-fs-body);
line-height:1.6;
}
}
/* Đoạn văn căn đều hai biên — nếp trình bày hồ sơ hành chính */
/* (cùng lỗi cú pháp như trên — tách rời) */
body.tm-print .result-sheet p{ text-align:justify; text-wrap:pretty; }
@media print{ p{ text-align:justify; text-wrap:pretty; } }
/* Ép font xuống MỌI phần tử trong phiếu — calcsheet.css gán font riêng cho
.fx / .trace / .kbadge / .mv-sym (var(--mono)) và input/select (font:inherit
nhưng bị trình duyệt ghi đè), nên chỉ đặt ở body là không đủ. */
body.tm-print .result-sheet,
body.tm-print .result-sheet *{
font-family:var(--tm-font-body);
}
body.tm-print .blk > .blk-top .b-name,
body.tm-print .tm-pg-hdr b,
body.tm-print .tm-pg-hdr > div:last-child,
body.tm-print .tm-bia-title,
body.tm-print .tm-bia-sub{
font-family:var(--tm-font-head);
}
/* ==========================================================================
2. KHỐI MỤC (.blk) — bỏ dáng "thẻ web", trả về khối văn bản
--------------------------------------------------------------------------
Bản mẫu: không bo góc, không đổ bóng, không viền hộp. Mục phân cách bằng
khoảng trắng + kẻ chân tiêu đề, không phải bằng card.
========================================================================== */
/* [2026-08-08] BỎ `.icard` và `.mini` khỏi danh sách của bản mẫu: `.icard` là thẻ dùng KHẮP
giao diện thao tác (Thẻ 1/2/4/5) — giữ lại là bóc viền/bóng của cả app; `.mini` không có
trong app. `.blk`/`.sumcard` là của phiếu, scope vào .result-sheet. */
body.tm-print .result-sheet .blk,
body.tm-print .result-sheet .sumcard{
background:#fff;
border:0;
border-radius:0;
box-shadow:none;
padding:0;
margin:0 0 18px;
}
/* Tiêu đề mục cấp 1: 13pt, ĐẬM, CHỮ HOA, giãn ký tự nhẹ, kẻ chân mảnh */
body.tm-print .blk > .blk-top{
border-bottom:1px solid var(--tm-rule);
padding-bottom:6px;
margin-bottom:10px;
break-after:avoid;
page-break-after:avoid;
}
body.tm-print .blk > .blk-top .b-name{
font-family:var(--tm-font-head);
font-size:var(--tm-fs-head);
font-weight:var(--tm-fw-head);
text-transform:uppercase;
letter-spacing:.03em;
color:var(--tm-ink);
}
/* Mục con (3.1, 3.2…): cùng 13pt đậm nhưng KHÔNG chữ hoa, không kẻ chân */
body.tm-print .subblk{
border-top:0;
padding-top:0;
margin-top:12px;
}
body.tm-print .subblk > .blk-top .b-name{
font-size:var(--tm-fs-head);
font-weight:700;
text-transform:none;
letter-spacing:0;
}
/* Giá trị lớn (.b-val): bản mẫu KHÔNG dùng số cỡ lớn treo bên phải tiêu đề.
Kết quả được viết thành MỘT DÒNG kẻ trên/dưới ở cuối mục (xem mục 6). */
body.tm-print .b-val{
font-size:var(--tm-fs-body);
font-weight:700;
letter-spacing:0;
}
/* ==========================================================================
3. CÔNG THỨC (.fx) — kiểu sách giáo khoa, căn giữa, không nền
========================================================================== */
body.tm-print .fx{
background:transparent;
border-radius:0;
padding:6px 0;
margin:8px 0 14px;
font-family:var(--tm-font-body); /* KHÔNG dùng mono — công thức đọc như sách */
font-size:var(--tm-fs-formula);
color:var(--tm-ink);
text-align:center;
overflow-x:visible;
}
body.tm-print .fx sub,
body.tm-print .fx sup{ font-size:.72em; }
/* Phân số: app đã có .frac/.fr-n/.fr-d đúng kiểu sách giáo khoa — giữ nguyên,
chỉ chỉnh nét gạch cho in đen trắng rõ. */
body.tm-print .frac > .fr-d{ border-top:1.1px solid var(--tm-ink); }
/* Vết tính (.trace): cùng font thân bài, không mono, không xám */
body.tm-print .trace,
body.tm-print .trace .tr-head{
font-family:var(--tm-font-body);
font-size:var(--tm-fs-note);
color:var(--tm-ink);
line-height:1.75;
}
body.tm-print .trace .tr-row b{ color:var(--tm-ink); font-weight:700; }
/* ==========================================================================
4. BẢNG — mọi bảng dùng CHUNG một diện mạo
--------------------------------------------------------------------------
11pt · lưới 1px đen · tiêu đề cột nền xám nhạt chữ ĐEN (không xanh, không
chữ trắng — chữ trắng trên nền màu biến mất khi in đen trắng).
========================================================================== */
/* [2026-08-08] BỎ `.ltab` (bảng toàn tuyến Thẻ 2), `.guide-mtx` + `.panel table` (Thẻ 5),
`.cm-tab` (so sánh Thẻ 2) khỏi bản mẫu: chúng thuộc GIAO DIỆN THAO TÁC, không nằm trong
phiếu — giữ lại là đổi dáng bảng của cả app ngay trên màn hình. Trong phiếu chỉ có
`table.reftab` (bảng tra) — scope vào .result-sheet. */
body.tm-print .result-sheet table.reftab{
width:100%;
border-collapse:collapse;
border-spacing:0;
border:1px solid var(--tm-grid);
border-radius:0;
background:#fff;
font-size:var(--tm-fs-table);
margin:6px 0 10px;
}
body.tm-print .result-sheet table.reftab th,
body.tm-print .result-sheet table.reftab td{
border:1px solid var(--tm-grid);
border-radius:0;
padding:5px 8px;
color:var(--tm-ink);
vertical-align:middle;
font-size:var(--tm-fs-table);
}
/* 🔴 [2026-08-06] BỔ SUNG so với bản bàn giao: BẢNG CHÚ GIẢI KÝ HIỆU (`table.rt-round`, do
`sectionLegend` sinh) BỊ SÓT khỏi danh sách selector — và nó tô kiểu bằng STYLE NỘI TUYẾN
trong JS (`color:#fff`, `background:var(--grid-hdr)`, `font-size:10.5px`), nên luật CSS
thường KHÔNG thắng nổi. ĐO ĐƯỢC trước khi vá: th 7,9pt nền xanh EVN chữ TRẮNG, td 8,6pt chữ
xanh — tức đúng cái bản mẫu muốn diệt (chữ trắng trên nền màu, in đen trắng là mất chữ), mà
lại nằm ngay bảng chú giải của hình vẽ.
Dùng `!important` có chủ đích: file này là LỚP PHỦ CHỈ DÙNG KHI IN, không đụng giao diện thao
tác — đây là chỗ duy nhất thắng được style nội tuyến mà không phải sửa hàm dựng hình. */
body.tm-print .result-sheet table.rt-round th,
body.tm-print .result-sheet table.rt-round td{
font-size:var(--tm-fs-table) !important;
color:var(--tm-ink) !important;
background:transparent !important;
border:1px solid var(--tm-grid) !important;
border-radius:0 !important;
}
body.tm-print .result-sheet table.rt-round th{
background:var(--tm-th-bg) !important;
font-weight:700 !important;
text-align:center !important;
}
body.tm-print .result-sheet table.rt-round{ border-collapse:collapse !important; border-radius:0 !important; }
/* [2026-08-06] Mẫu §Trang in: "Không bo góc, không đổ bóng, không hộp màu ở BẤT KỲ ĐÂU".
Đo trên DOM sau khi áp mẫu vẫn còn 3 chỗ bo góc (khung bảng ρtt 12px, details.reftbl 12px,
thanh đo .gauge-track 999px) — quét sạch một lượt thay vì đuổi từng lớp. */
body.tm-print .result-sheet *{ border-radius:0 !important; box-shadow:none !important; }
/* Tiêu đề cột: nền xám nhạt, chữ ĐEN đậm, căn giữa (chỉ bảng tra TRONG phiếu — 2026-08-08) */
body.tm-print .result-sheet table.reftab th{
background:var(--tm-th-bg);
color:var(--tm-ink);
font-weight:700;
text-align:center;
letter-spacing:.02em;
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
/* BỎ sọc chẵn/lẻ khi in — lưới đen đã đủ dò dòng, sọc làm bản in bẩn */
body.tm-print .result-sheet table.reftab tr:nth-child(even) td,
body.tm-print .result-sheet .reftab tr:nth-child(even) td{ background:#fff; }
/* Dòng / ô ĐANG TRA: nền xám + chữ đậm (thay cho vàng — vàng in ra gần như trắng) */
body.tm-print .result-sheet table.reftab tr.hi-row td,
body.tm-print .result-sheet table.reftab td.hi-col{
background:var(--tm-hi-bg);
color:var(--tm-ink);
font-weight:700;
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
/* Nhãn trên bảng ("BẢNG 3 — ĐIỆN TRỞ TẢN CỦA TỪNG BỘ") */
body.tm-print .tm-tbl-label{
font-size:var(--tm-fs-label);
text-transform:uppercase;
letter-spacing:.06em;
opacity:.72;
margin:0 0 5px;
}
/* Không cắt bảng giữa chừng (scope phiếu — 2026-08-08) */
body.tm-print .result-sheet table{ break-inside:auto; }
body.tm-print .result-sheet tr{ break-inside:avoid; page-break-inside:avoid; }
body.tm-print .result-sheet thead{ display:table-header-group; }
/* ==========================================================================
5. GHI CHÚ / NGUỒN — bỏ hộp màu, về chữ thường 11pt
========================================================================== */
/* [2026-08-08] BỎ `.line-cmp-note` (ghi chú của Thẻ 2 — ngoài phiếu); `.note` cũng có ở Thẻ 2
nên scope .result-sheet: chỉ ghi chú TRONG phiếu theo mẫu, ngoài phiếu giữ hộp màu của app. */
body.tm-print .result-sheet .src,
body.tm-print .result-sheet .note,
body.tm-print .result-sheet .reftab-note{
background:transparent;
border:0;
border-left:0;
border-radius:0;
padding:0;
margin:6px 0 0;
font-size:var(--tm-fs-note);
color:var(--tm-ink);
opacity:.78;
line-height:1.55;
}
/* Tài liệu tham khảo */
body.tm-print .tm-refs{ font-size:var(--tm-fs-ref); line-height:1.55; }
body.tm-print .tm-refs p{ margin:0 0 5px; text-align:left; }
/* ==========================================================================
6. KẾT LUẬN — MỘT DÒNG kẻ trên/dưới (thay cho "viên thuốc" .verdict)
--------------------------------------------------------------------------
Bản mẫu viết kết quả thành một dòng chạy hết bề ngang, ví dụ:
Điện trở tiếp địa hệ thống: R_ht = 19,27 Ω ≤ [Rđ] = 30,00 Ω → ĐẠT
Markup đề nghị (thay cho ):
Nhãn:Biểu thức → ĐẠT
========================================================================== */
body.tm-print .tm-ket-luan{
display:flex;
align-items:baseline;
gap:8px;
margin:10px 0 0;
padding:6px 0;
border-top:1px solid var(--tm-ink);
border-bottom:1px solid var(--tm-ink);
font-size:var(--tm-fs-formula);
break-inside:avoid;
}
body.tm-print .tm-ket-luan b{ font-size:var(--tm-fs-body); font-weight:700; }
body.tm-print .tm-ket-luan sub{ font-size:.72em; }
/* Nếu vẫn dùng .verdict sẵn có thì ép nó về khung viền đen chữ đen.
[2026-08-08] scope .result-sheet: badge ĐẠT/CHƯA ĐẠT ở Thẻ 2 (bảng toàn tuyến) và các thẻ
thao tác GIỮ MÀU của app — chỉ trong phiếu mới về đen trắng theo mẫu. */
body.tm-print .result-sheet .verdict{
background:transparent !important;
color:var(--tm-ink) !important;
border:1.5px solid var(--tm-ink);
border-radius:0;
font-size:var(--tm-fs-table);
font-weight:700;
padding:2px 10px;
}
/* ==========================================================================
7. HEADER / FOOTER LẶP MỖI TRANG
--------------------------------------------------------------------------
Markup đề nghị đặt ĐẦU và CUỐI mỗi trang (hoặc dùng position:running() nếu
engine in hỗ trợ):