/* ==========================================================================
   INFOGRAPHIC — bản một trang khổ A4 để in / lưu PDF
   --------------------------------------------------------------------------
   Đây là bản DUY NHẤT trong ứng dụng dùng nền sáng: bản in trên nền tối vừa
   tốn mực vừa khó đọc, nên poster này có bảng màu riêng chứ không kế thừa
   biến màu của app.css.

   Đơn vị dùng mm và pt, không dùng px hay rem: trang này sinh ra để rơi vào
   đúng một tờ A4, nên mọi kích thước phải neo vào kích thước giấy thật.

   Toàn bộ nằm trong #infoSheet, và app.css không chạm tới cây con này.
   ========================================================================== */

#infoSheet {
  --ink: #17233A;
  --ink-2: #3D4A60;
  --mute: #6B7688;
  --navy: #1B3A6B;
  --navy-2: #24508F;
  --gold: #C9A24B;
  --gold-soft: #F3E8CC;
  --paper: #FDF9F1;
  --card: #FFFFFF;
  --line: #E2D9C6;
  --line-soft: #EFE8DA;

  --wx-moc: #4C9A5B;
  --wx-hoa: #D9513F;
  --wx-tho: #C9962F;
  --wx-kim: #7C8896;
  --wx-thuy: #2F72C4;

  /* Chiều cao TỰ DO, tối thiểu một mặt A4.
     Bản trước ép mọi thứ vào đúng một trang bằng cách cắt bớt diễn giải và
     thu nhỏ chữ xuống 0,88. Đổi lại là các câu cụt lửng và chữ Hán nhỏ tới
     mức đọc nhầm. Nội dung đầy đủ quan trọng hơn số trang, nên nay để trang
     tự dài ra và ngắt sạch giữa các thẻ. */
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 5mm;
  box-sizing: border-box;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 6.9pt;
  line-height: 1.32;
}

#infoSheet * { box-sizing: border-box; }
#infoSheet p { margin: 0; }
#infoSheet strong { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------- đầu trang */

.ig-head {
  display: grid;
  grid-template-columns: 16mm 1fr 38mm;
  align-items: center;
  gap: 4mm;
  padding: 2mm 3.5mm;
  border-radius: 2mm;
  background: linear-gradient(100deg, #16305C 0%, var(--navy) 45%, var(--navy-2) 100%);
  color: #fff;
}
.ig-avatar {
  width: 14mm; height: 14mm; border-radius: 50%;
  border: 0.6mm solid var(--gold);
  background: linear-gradient(170deg, #2C5E9E, #0E1F3C);
  display: flex; align-items: center; justify-content: center;
  font-size: 16pt;
}
.ig-head-mid { text-align: center; }
.ig-kicker {
  font-size: 6.6pt; font-weight: 700; letter-spacing: .22em;
  color: var(--gold-soft); text-transform: uppercase;
}
.ig-name {
  font-family: Fraunces, Georgia, serif;
  font-size: 19pt; font-weight: 700; line-height: 1;
  margin: 0.4mm 0 0.6mm; letter-spacing: .02em;
}
.ig-meta { font-size: 6.8pt; color: #DCE6F5; }
.ig-meta span { margin: 0 1.5mm; }
.ig-meta b { color: #fff; font-weight: 600; }

.ig-sign { text-align: right; display: flex; align-items: center; gap: 3mm; }
.ig-sign-badge {
  width: 12mm; height: 12mm; border-radius: 50%; flex: 0 0 auto;
  border: 0.5mm solid var(--gold);
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center; font-size: 13pt;
}
.ig-sign-name { font-family: Fraunces, Georgia, serif; font-size: 13pt; font-weight: 700; }
.ig-sign-latin { font-size: 6.4pt; color: #C9D6EA; letter-spacing: .1em; }
.ig-sign-row { font-size: 6pt; color: #DCE6F5; margin-top: 0.5mm; }

/* --------------------------------------------------- dải nguyên tắc đọc */

.ig-principle {
  display: grid;
  grid-template-columns: 1fr 62mm;
  gap: 4mm;
  margin-top: 1.6mm;
  padding: 1.4mm 2.2mm;
  border: 0.35mm solid var(--gold);
  border-radius: 1.6mm;
  background: #FCF3DE;
}
.ig-principle-main { display: flex; gap: 2.5mm; }
.ig-principle-icon { font-size: 10pt; line-height: 1; }
.ig-principle h4 {
  margin: 0 0 0.5mm; font-size: 6.4pt; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
}
.ig-principle .lead { font-weight: 700; font-size: 6.4pt; }
.ig-principle .sub { color: var(--ink-2); font-size: 5.6pt; margin-top: 0.4mm; }

.ig-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm; }
.ig-quick-item { text-align: center; }
.ig-quick-item .qi-icon { font-size: 9pt; line-height: 1; }
.ig-quick-item .qi-label {
  font-size: 5.6pt; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); margin-top: 0.5mm;
}
.ig-quick-item .qi-value { font-weight: 700; font-size: 7pt; color: var(--navy); }
.ig-quick-item .qi-note { font-size: 5.8pt; color: var(--ink-2); }

/* ------------------------------------------------------------ khung lưới */

.ig-grid {
  display: grid;
  grid-template-columns: 53mm 1fr 53mm;
  gap: 2mm;
  margin-top: 1.6mm;
  align-items: start;
}
.ig-col { display: flex; flex-direction: column; gap: 2mm; }
.ig-wide { margin-top: 2mm; display: grid; grid-template-columns: 62mm 1fr 1fr; gap: 2mm; align-items: start; }

/* ----------------------------------------------------------------- thẻ */

.ig-card {
  border: 0.3mm solid var(--line);
  border-radius: 1.6mm;
  background: var(--card);
  overflow: hidden;
  break-inside: avoid;
}
.ig-card > h3 {
  margin: 0;
  padding: 1mm 1.8mm;
  font-size: 6.2pt; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff; background: var(--navy);
  display: flex; align-items: center; gap: 1.5mm;
}
.ig-card > h3.gold { background: var(--gold); color: #2B2110; }
.ig-card > h3 small {
  font-weight: 400; letter-spacing: .02em; text-transform: none;
  opacity: .8; font-size: 5.8pt;
}
.ig-body { padding: 1.4mm 1.8mm; }

/* --------------------------------------------------------------- bảng */

#infoSheet table { width: 100%; border-collapse: collapse; }
#infoSheet th, #infoSheet td {
  padding: 0.9mm 1.2mm;
  border-bottom: 0.25mm solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
#infoSheet th {
  font-size: 5.6pt; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); font-weight: 700;
  background: #FAF6EC;
  border-bottom: 0.3mm solid var(--line);
}
#infoSheet tr:last-child td { border-bottom: 0; }
#infoSheet td.num { font-weight: 700; color: var(--navy); text-align: center; }

/* dòng khóa - giá trị có biểu tượng, dùng cho mục A */
.ig-kv { display: grid; grid-template-columns: 3.6mm 1fr 1.4fr; gap: 0.9mm; padding: 0.6mm 0; border-bottom: 0.25mm solid var(--line-soft); }
.ig-kv:last-child { border-bottom: 0; }
.ig-kv .k { color: var(--mute); }
.ig-kv .v { font-weight: 600; }
.ig-kv .ico { text-align: center; }

/* ------------------------------------------- bảng chỉ số có ô giá trị */
/*
 * Bảng chỉ số có ô diễn giải dài ngắn rất khác nhau, nên chiều cao hàng chênh
 * nhau gần gấp đôi (44px so với 81px). Khi con số canh TRÊN trong một hàng
 * cao, mắt người đọc dễ trượt sang nhãn của hàng kế bên — một lượt rà soát đã
 * đọc nhầm giá trị của hai chỉ số đúng vì lý do này.
 *
 * Hai biện pháp cùng lúc: đưa con số vào một huy hiệu nền đậm cho nổi bật, và
 * tô nền hàng chẵn để mắt bám được theo chiều ngang suốt cả hàng.
 *
 * Huy hiệu canh TRÊN chứ không canh giữa: nhãn chỉ số cũng canh trên và có
 * thể xuống ba dòng, nên canh giữa sẽ đẩy con số xuống lệch khỏi dòng đầu của
 * nhãn — đúng cái cần tránh.
 */
#infoSheet .ig-index td:nth-child(2) {
  vertical-align: top;
  text-align: center;
  width: 11mm;
  padding-left: 0.4mm;
  padding-right: 0.4mm;
}
#infoSheet .ig-index td:nth-child(2) .v-badge {
  display: inline-block;
  min-width: 6.4mm;
  padding: 0.5mm 1.2mm;
  border-radius: 1mm;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 8.4pt;
  line-height: 1.15;
}
.ig-index tbody tr:nth-child(even) { background: #FAF7F0; }
.ig-index td:first-child { font-weight: 600; }

/* ------------------------------------------------------ bảng Tứ Trụ lớn */

.ig-pillars th:first-child, .ig-pillars td:first-child {
  width: 16mm; background: #FAF6EC; font-weight: 700;
  font-size: 5.8pt; color: var(--navy); text-transform: uppercase; letter-spacing: .05em;
}
.ig-pillars .glyph { font-size: 11.5pt; font-weight: 700; line-height: 1.15; display: block; }
.ig-pillars .el { font-size: 6.2pt; color: var(--mute); }
.ig-pillars td { text-align: center; }
.ig-pillars td:first-child { text-align: left; }
.ig-pillars .scope { font-size: 5.6pt; color: var(--ink-2); line-height: 1.3; }

.el-moc { color: var(--wx-moc); }
.el-hoa { color: var(--wx-hoa); }
.el-tho { color: var(--wx-tho); }
.el-kim { color: var(--wx-kim); }
.el-thuy { color: var(--wx-thuy); }

/* ------------------------------------------------------------ vòng ngũ hành */

.ig-donut { display: grid; grid-template-columns: 26mm 1fr; gap: 1.6mm; align-items: center; }
.ig-donut svg { width: 26mm; height: 26mm; }
.ig-donut .center-label {
  font-size: 5.4pt; fill: var(--mute); text-anchor: middle;
}
.ig-legend { display: flex; flex-direction: column; gap: 0.55mm; }
.ig-legend div { display: flex; align-items: center; gap: 1.2mm; }
.ig-legend i { width: 2mm; height: 2mm; border-radius: 0.4mm; flex: 0 0 auto; }
.ig-legend b { margin-left: auto; }

/* -------------------------------------------------------------- danh sách */

.ig-list { list-style: none; margin: 0; padding: 0; }
.ig-list li {
  position: relative; padding-left: 2.4mm; margin-bottom: 0.7mm; line-height: 1.26;
}
.ig-list li::before {
  content: ""; position: absolute; left: 0; top: 1.1mm;
  width: 1.2mm; height: 1.2mm; border-radius: 50%; background: var(--gold);
}
.ig-list li:last-child { margin-bottom: 0; }
.ig-list.check li::before { background: var(--wx-moc); }
.ig-list.warn li::before { background: var(--wx-hoa); }

/* ----------------------------------------------------------- lưới Lô Thư */

.ig-loshu { display: grid; grid-template-columns: 22mm 1fr; gap: 1.8mm; }
.ig-loshu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8mm; }
.ig-loshu-cell {
  aspect-ratio: 1; border: 0.25mm solid var(--line);
  border-radius: 1mm; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: #FAF6EC;
}
.ig-loshu-cell.filled { background: var(--gold-soft); border-color: var(--gold); }
.ig-loshu-cell .d { font-size: 7.5pt; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.ig-loshu-cell.empty .d { color: #C4BCAA; font-weight: 400; }
.ig-arrow { margin-bottom: 0.9mm; }
.ig-arrow .code {
  font-weight: 700; color: var(--navy); font-size: 6pt;
}
.ig-arrow .nm { font-weight: 700; }
.ig-arrow .ds { color: var(--ink-2); font-size: 5.8pt; }

/* ------------------------------------------------------- dụng thần & đại vận */

.ig-rank td:first-child { text-align: center; width: 11mm; }
.ig-rank .prio {
  display: inline-block; width: 5mm; height: 5mm; line-height: 5mm;
  border-radius: 50%; background: var(--navy); color: #fff;
  font-weight: 700; font-size: 6.6pt; text-align: center;
}
.ig-rank .prio.second { background: var(--mute); }

.ig-daivan tr.current td { background: #FDF1D4; font-weight: 600; }
.ig-daivan tr.current td:first-child { position: relative; }
.ig-daivan .span { display: block; font-size: 5.4pt; color: var(--mute); }

/* ------------------------------------------------------------ đỉnh & thử thách */

.ig-peak .badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 6mm; height: 6mm; border-radius: 1mm; color: #fff; font-weight: 700; font-size: 7.5pt;
}

/* ------------------------------------------------------------- trục thời gian */

.ig-timeline {
  margin-top: 2mm; border: 0.3mm solid var(--line); border-radius: 1.6mm;
  background: var(--card); overflow: hidden;
}
.ig-timeline table td, .ig-timeline table th { text-align: center; font-size: 5.4pt; padding: 0.6mm 0.5mm; }
.ig-timeline table th:first-child, .ig-timeline table td:first-child {
  text-align: left; width: 15mm; background: #FAF6EC; font-weight: 700;
  color: var(--navy); text-transform: uppercase; letter-spacing: .04em;
}
.ig-timeline td.now { background: #FBE2C4; font-weight: 700; }
.ig-timeline .yr { display: block; color: var(--mute); font-size: 5pt; }

/* ------------------------------------------------------------------ chân */

.ig-foot {
  margin-top: 2mm; padding: 1.4mm 2mm;
  border-top: 0.35mm solid var(--gold);
  display: flex; gap: 3mm; align-items: flex-start;
  font-size: 5.8pt; color: var(--ink-2);
}
.ig-foot .stamp { margin-left: auto; text-align: right; white-space: nowrap; color: var(--mute); }

/* ============================================================ chế độ in */

@page { size: A4 portrait; margin: 0; }

/* Khi in: giấu toàn bộ ứng dụng, chỉ để lại tờ poster. Dùng visibility thay
   vì display:none cho phần tổ tiên để không phá bố cục của chính #infoSheet. */
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.printing-sheet > *:not(#infoSheetWrap) { display: none !important; }
  body.printing-sheet #infoSheetWrap { display: block !important; }
  #infoSheetWrap { position: static !important; }
  #infoSheet {
    width: 210mm; min-height: 297mm; margin: 0; box-shadow: none;
    /* Nền in được: nếu người dùng tắt "In màu nền" thì các dải màu sẽ mất,
       nên phần chữ vẫn phải đọc được trên nền trắng — đó là lý do mọi chữ
       quan trọng đều dùng màu tối, không dùng chữ trắng ngoài dải tiêu đề. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ig-card, .ig-timeline, .ig-head, .ig-principle { break-inside: avoid; }
  /* Cột cao hơn một trang thì trình duyệt tự ngắt giữa hai thẻ nhờ
     break-inside: avoid ở trên; ở đây chỉ cần chặn ngắt ngay sau tiêu đề. */
  .ig-card > h3 { break-after: avoid; }
}

/* Xem trên màn hình trước khi in */
#infoSheetWrap { display: none; }

/*
 * Chế độ ĐO — dùng khi xuất ảnh mà không mở bản xem trước.
 *
 * Bản xuất ảnh phải đo được chiều cao thật của tờ poster, mà một khối
 * display:none thì scrollHeight bằng 0. Trước đây lối xuất ảnh từ thanh công
 * cụ dựng tờ poster ở chế độ 'printing-sheet' — chế độ đó chỉ hiện ra trong
 * @media print, nên trên màn hình vẫn là display:none, đo ra 0 và ảnh bị cắt
 * còn đúng một trang A4.
 *
 * Vì vậy cần một chế độ hiển thị THẬT: có bố cục, có kích thước, nhưng đặt xa
 * ngoài khung nhìn để người dùng không thấy gì nhấp nháy.
 */
body.measuring-sheet #infoSheetWrap {
  display: block;
  position: fixed;
  left: -20000px;
  top: 0;
  z-index: -1;
  pointer-events: none;
}
body.previewing-sheet #infoSheetWrap {
  display: block; position: fixed; inset: 0; z-index: 200;
  overflow: auto; background: #6B6355; padding: 6mm 0;
}
body.previewing-sheet #infoSheet { box-shadow: 0 4mm 12mm rgba(0, 0, 0, .35); }