/* ===================================================================== AN PHÁT 43 — Brand Guidelines print.css — CSS in (loaded với media="print") ===================================================================== */ @page { size: A4 portrait; margin: 18mm 14mm 16mm 14mm; } /* ===== Toàn cục ẩn các UI element không in ===== */ .bg-sidebar, .bg-side-print, .bg-concept-nav, .bg-side-list a::after, .bg-variant-link::after, .bg-competitor-website-link::after { display: none !important; } body { background: #fff !important; color: #000 !important; font-size: 10pt; line-height: 1.5; } /* Reset layout grid → flow đơn */ .bg-app { display: block !important; } .bg-main { grid-column: auto !important; margin: 0 !important; } /* Hero compact khi in */ .brand-hero { background: #040F28 !important; color: #fff !important; padding: 24mm 12mm !important; page-break-after: always; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .brand-hero::before { display: none !important; } /* Stage dividers — bắt đầu trang mới */ .bg-stage-divider { page-break-before: always; page-break-after: avoid; padding: 18mm 12mm !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Section spacing nhỏ lại */ .bg-section { padding: 6mm 0 !important; border-bottom: 1px solid #ccc !important; page-break-inside: avoid; } .bg-section-title { font-size: 22pt !important; page-break-after: avoid; } .bg-section-lead { font-size: 10.5pt !important; margin-bottom: 6mm !important; } /* Concept — mỗi concept 1 trang */ .bg-concept { page-break-before: always; page-break-inside: avoid; padding: 6mm 0 !important; border-bottom: none !important; } .bg-concept-header { page-break-after: avoid; } /* Cards & grids — tránh cắt giữa */ .bg-mc-card, .bg-audit-card, .bg-bopt-card, .bg-aud-card, .bg-colorsys-card, .bg-competitor-card, .bg-typo-option-card, .bg-variant-card, .bg-swatch { page-break-inside: avoid; box-shadow: none !important; transform: none !important; } /* Hover effects off */ *:hover { transform: none !important; box-shadow: none !important; } /* Force màu nền hiển thị trên print (Chrome / Edge) */ .bg-stage-divider, .bg-print-table th, .bg-mc-section.mc-implication h6, .bg-bopt-pill, .bg-bopt-pillar, .bg-mc-intro, .bg-audit-intro, .bg-competitor-hint, .bg-colorsys-swatches > div, .bg-swatch-color, .bg-variant-preview.bg-dark, .bg-variant-preview.bg-primary, .bg-endnote { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } /* Bỏ sticky positioning */ .bg-concept-nav { position: static !important; } /* Mockup masonry → 2 cột khi in */ .bg-mockups-masonry { column-count: 2 !important; column-gap: 4mm !important; } /* Endnote */ .bg-endnote { page-break-before: avoid; padding: 12mm !important; } /* ============================================================ IN TỪNG GIAI ĐOẠN JS toggle 1 trong 4 class trên : printing-stage-1 / -2 / -3 → in giai đoạn đó (không có class) → in tất cả ============================================================ */ /* In Giai đoạn 1 → ẩn stage 2, 3 */ body.printing-stage-1 .bg-stage[data-stage="2"], body.printing-stage-1 .bg-stage[data-stage="3"], body.printing-stage-1 .bg-endnote { display: none !important; } /* In Giai đoạn 2 → ẩn stage 1, 3 + hero */ body.printing-stage-2 .brand-hero, body.printing-stage-2 .bg-stage[data-stage="1"], body.printing-stage-2 .bg-stage[data-stage="3"], body.printing-stage-2 .bg-endnote { display: none !important; } /* In Giai đoạn 3 → ẩn stage 1, 2 + hero */ body.printing-stage-3 .brand-hero, body.printing-stage-3 .bg-stage[data-stage="1"], body.printing-stage-3 .bg-stage[data-stage="2"], body.printing-stage-3 .bg-endnote { display: none !important; } /* Stage divider của giai đoạn được in → bỏ page-break-before để không có trang trắng trước divider */ body.printing-stage-2 .bg-stage[data-stage="2"] .bg-stage-divider, body.printing-stage-3 .bg-stage[data-stage="3"] .bg-stage-divider { page-break-before: avoid; } /* ============================================================ v2.2 — IN CHỈ PHƯƠNG ÁN ĐÃ CHỐT body.printing-chosen → giữ Phần 3, ẩn các card không có .is-chosen ============================================================ */ body.printing-chosen .brand-hero, body.printing-chosen .bg-stage[data-stage="1"], body.printing-chosen .bg-stage[data-stage="2"], body.printing-chosen .bg-stage[data-stage="3"] .bg-stage-divider, body.printing-chosen .bg-endnote, body.printing-chosen .bg-sidebar, body.printing-chosen .bg-concept-nav, body.printing-chosen .bg-add-wrap, body.printing-chosen .bg-choice-btn-group, body.printing-chosen .bg-choice-banner, body.printing-chosen .bg-comp-agg-usage { display: none !important; } /* Trong stage 3 — hide mọi card không phải .is-chosen */ body.printing-chosen .bg-concept:not(.is-chosen), body.printing-chosen .bg-preview-card:not(.is-chosen), body.printing-chosen .bg-colorsys-card:not(.is-chosen), body.printing-chosen .bg-typo-option-card:not(.is-chosen) { display: none !important; } /* Grid trong stage 3 → ép 1 cột để card chốt căn giữa, không bị lệch */ body.printing-chosen .bg-typo-options-grid, body.printing-chosen .bg-colorsys-grid { display: block !important; } /* Section "Phương án đã chốt" — heading riêng cho bản in */ body.printing-chosen .bg-stage[data-stage="3"]::before { content: "Phương án đã chốt — AN PHÁT 43"; display: block; font-size: 18pt; font-weight: 700; color: #FD5D14; border-bottom: 2px solid #FD5D14; padding: 0 0 4mm; margin: 0 0 6mm; } /* Mỗi section của Phần 3 bắt đầu trang mới */ body.printing-chosen .bg-stage[data-stage="3"] section[id="website-preview"], body.printing-chosen .bg-stage[data-stage="3"] section[id="gallery"], body.printing-chosen .bg-stage[data-stage="3"] section[id="color-systems"], body.printing-chosen .bg-stage[data-stage="3"] section[id="typography"] { page-break-before: auto; } /* Concept gallery — khi đã chốt logo, in luôn cả concept-XX section đầy đủ */ body.printing-chosen .bg-concept.is-chosen { page-break-before: always; padding-top: 0 !important; } body.printing-chosen .bg-stage[data-stage="3"] > section:first-of-type, body.printing-chosen .bg-stage[data-stage="3"] .bg-concept.is-chosen:first-of-type { page-break-before: avoid; } /* Placeholder khi 1 section chưa có card nào chốt (placeholder DOM được JS chèn vào ngay trước khi in, xoá sau in) */ body.printing-chosen .bg-print-empty-note { display: block !important; padding: 8mm; color: #999; font-style: italic; font-size: 11pt; text-align: center; border: 1px dashed #ccc; border-radius: 4px; margin: 4mm 0; } .bg-print-empty-note { display: none; } /* Hide links underline / external icons trong content */ a[href^="http"]::after, a[href^="//"]::after { content: ""; } a { color: #000 !important; text-decoration: none !important; } /* Bảng */ .bg-print-table { font-size: 9.5pt; } .bg-print-table th, .bg-print-table td { padding: 2mm 3mm; }