/* =========================================================
   Thuyết minh tính toán dùng chung (js/common/calc-report.js) — thẻ trên trang + bản in A4
   ========================================================= */

/* ---------- Thẻ thuyết minh ---------- */
.cr-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cr-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.cr-options { grid-column: 1 / -1; display: flex; gap: 8px 24px; flex-wrap: wrap; }
.cr-hint { margin-right: auto; font-size: 12px; color: var(--text-secondary); }
.cr-text {
    height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface, #fff); font: inherit; font-weight: 400; color: var(--text); min-width: 0;
}
.cr-text:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (max-width: 1024px) { .cr-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .cr-form { grid-template-columns: minmax(0, 1fr); }
    .cr-actions { justify-content: stretch; }
    .cr-actions .tp-btn { flex: 1; }
}

/* ---------- Thuyết minh (khổ A4) ---------- */
.cr { display: none; }
.cr.is-preview {
    display: block; max-width: 210mm; margin: 24px auto 48px; padding: 16mm 15mm;
    background: #fff; box-shadow: 0 2px 16px rgba(13, 43, 78, 0.12); border-radius: 4px;
}
.cr, .cr * { box-sizing: border-box; }
.cr { color: #111; font-family: 'Times New Roman', Times, serif; font-size: 12.5pt; line-height: 1.45; }
.cr-frame { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cr-frame > thead td, .cr-frame > tbody > tr > td { padding: 0; }
.cr-running { display: flex; justify-content: space-between; gap: 12px; font-family: Arial, sans-serif; font-size: 8.5pt; color: #555; border-bottom: 0.6pt solid #999; padding-bottom: 3px; margin-bottom: 10px; }
.cr-cover { text-align: center; margin-bottom: 14px; }
.cr-brand { font-family: Arial, sans-serif; font-size: 9pt; letter-spacing: 1px; color: #0D2B4E; font-weight: 700; }
.cr-cover h1 { font-size: 17pt; margin: 8px 0 12px; color: #0D2B4E; letter-spacing: 0.3px; }
.cr-meta { width: 100%; border-collapse: collapse; font-size: 11pt; text-align: left; }
.cr-meta th, .cr-meta td { border: 0.6pt solid #888; padding: 4px 8px; }
.cr-meta th { width: 16%; background: #F1F4F8; font-weight: 600; }
.cr-verdict { margin: 12px 0 4px; padding: 8px 12px; border: 1pt solid; border-radius: 3px; text-align: left; font-weight: 600; break-inside: avoid; }
.cr-verdict.ok { border-color: #1E7B45; background: #EEF8F1; color: #155A33; }
.cr-verdict.pend { border-color: #B7791F; background: #FDF6EA; color: #7A4A0B; }
.cr-verdict.ng { border-color: #B42318; background: #FDEEEC; color: #8A1C12; }
.cr-toc { margin: 10px 0 6px; padding: 8px 12px; border: 0.6pt solid #bbb; }
.cr-toc h2 { font-size: 12pt; margin: 0 0 4px; }
.cr-toc ol { margin: 0; padding-left: 0; list-style: none; }
.cr-toc li.l2 { padding-left: 22px; font-size: 10.5pt; }
.cr-toc a { color: inherit; text-decoration: none; }
.cr h2 { font-size: 13.5pt; margin: 16px 0 6px; color: #0D2B4E; border-bottom: 0.8pt solid #0D2B4E; padding-bottom: 2px; break-after: avoid; }
.cr h2 .num { margin-right: 4px; }
.cr h3 { font-size: 12pt; margin: 10px 0 4px; break-after: avoid; }
.cr p { margin: 4px 0 6px; }
.cr ul, .cr .cr-notes { margin: 4px 0; padding-left: 22px; }
.cr-table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 11pt; }
.cr-table th, .cr-table td { border: 0.6pt solid #888; padding: 3px 6px; vertical-align: top; }
.cr-table th { background: #F1F4F8; text-align: left; font-weight: 600; }
.cr-table .r { text-align: right; white-space: nowrap; }
.cr-table th.r { white-space: normal; }
.cr-table tr { break-inside: avoid; }
.cr-param th:nth-child(2), .cr-param th:nth-child(4) { width: 1%; white-space: nowrap; }
.cr-param td:nth-child(2), .cr-param td:nth-child(4) { white-space: nowrap; }
.cr-sum td:nth-child(n+3) { white-space: nowrap; }
.cr-sum td:nth-child(2) { font-size: 10pt; }
.cr figure { margin: 6px 0 10px; text-align: center; break-inside: avoid; }
.cr figure > svg, .cr figure > img { width: 100%; max-width: var(--fig-w, 120mm); height: auto; }
.cr figure > img { display: block; margin: 0 auto; border: 1px solid #ccd6dd; }
.cr figcaption { font-size: 10pt; font-style: italic; color: #333; margin-top: 2px; }
.cr-step { margin: 8px 0 10px; break-inside: avoid; }
.cr-step-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cr-step-head .num { font-weight: 700; min-width: 34px; }
.cr-step-head .ref { margin-left: auto; font-family: Arial, sans-serif; font-size: 9pt; color: #1C4F86; font-style: italic; }
.cr-eq { margin: 4px 0 2px 34px; padding: 2px 0; overflow-x: auto; overflow-y: hidden; font-size: 11.5pt; }
.cr-eq .katex { font-size: 1.02em; }
.cr-note { margin-left: 34px; font-size: 10.5pt; color: #444; }
.cr-res { margin-left: 34px; font-weight: 700; font-size: 11pt; }
.cr-res.ok, .cr-tag.ok { color: #155A33; }
.cr-res.ng, .cr-tag.ng { color: #8A1C12; }
.cr-res.pend, .cr-tag.pend { color: #7A4A0B; }
.cr-tag { font-weight: 700; }
.cr-sign { width: 100%; border-collapse: collapse; margin-top: 18px; break-inside: avoid; text-align: center; }
.cr-sign td { width: 33.3%; vertical-align: top; padding: 4px 6px; }
.cr-sign .role { font-weight: 700; text-transform: uppercase; font-size: 11pt; }
.cr-sign .hint { font-style: italic; font-size: 9.5pt; color: #555; }
.cr-sign .name { margin-top: 20mm; font-weight: 700; }
.cr-disclaimer { font-size: 9.5pt; color: #555; font-style: italic; margin-top: 10px; }
/* Mẫu gọn (doc.compact): thuyết minh ngắn vài trang, bảng chữ nhỏ */
.cr-frame.is-compact { font-size: 11.5pt; }
.cr-frame.is-compact h2 { margin: 12px 0 5px; }
.cr-frame.is-compact .cr-table { font-size: 9.5pt; margin: 3px 0 6px; }
.cr-frame.is-compact .cr-table th, .cr-frame.is-compact .cr-table td { padding: 2px 5px; }
.cr-frame.is-compact .cr-step { margin: 5px 0 6px; }
.cr-frame.is-compact ul, .cr-frame.is-compact .cr-notes { font-size: 10.5pt; }
.cr .cr-tex.is-raw { font-family: 'Courier New', monospace; font-size: 9.5pt; white-space: pre-wrap; word-break: break-word; }

@media screen and (max-width: 760px) {
    .cr.is-preview { padding: 16px; margin: 16px; }
    .cr-eq, .cr-note, .cr-res { margin-left: 0; }
}

/* ---------- In: khi trang có thuyết minh thì chỉ in thuyết minh ---------- */
@page {
    size: A4;
    margin: 14mm 14mm 16mm;
    @bottom-right { content: counter(page) " / " counter(pages); font-family: Arial, sans-serif; font-size: 8.5pt; color: #555; }
}
@media print {
    body.has-calc-report > *:not(#calcReport) { display: none !important; }
    body.has-calc-report { background: #fff !important; }
    body.has-calc-report .cr { display: block !important; max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
    .cr-frame > thead { display: table-header-group; }
    .cr-eq { overflow: visible; }
    .cr a { color: inherit; }
    .cr-toc { break-after: page; }
}