# 📋 Hướng dẫn CSS Class cho AI sinh Report

> **Mục đích:** AI đọc file này → biết dùng class nào → sinh body HTML đúng format.
> CSS file: `report_template.css` (load qua `<link>`, KHÔNG thay đổi).

---

## 🏗️ Cấu trúc cơ bản

```
<body>
  <!-- Nút in -->
  <button class="print-btn no-print" onclick="window.print()">🖨  In / Lưu PDF</button>
  
  <!-- Trang bìa -->
  <div class="page">
    <div class="cover">...</div>
  </div>
  
  <!-- Các trang nội dung (mỗi trang = 1 div.page.cp) -->
  <div class="page cp">...</div>
  <div class="page cp">...</div>
  
  <!-- Chart.js script cuối body -->
  <script>...</script>
</body>
```

---

## 📄 1. TRANG BÌA (Cover Page)

```html
<div class="page">
<div class="cover">
  <div class="cover-stripe"></div>          <!-- thanh navy trên cùng -->
  <div class="cover-stripe-gold"></div>     <!-- thanh vàng mỏng -->
  <div class="cover-deco"></div>            <!-- trang trí tròn (decorative) -->
  <div class="cover-deco2"></div>

  <div class="cover-inner">
    <!-- Logo + Meta -->
    <div class="cover-toprow">
      <div class="org-logo">
        <div class="org-badge">LOGO</div>   <!-- badge 42x42pt -->
        <div class="org-info">
          <span class="org-name">Tên công ty</span>
          <span class="org-dept">Phòng ban</span>
        </div>
      </div>
      <div class="doc-meta">
        Số hiệu: <strong>MÃ-SỐ</strong><br>
        Phiên bản: <strong>1.0</strong><br>
        Phân loại: <em>Nội bộ</em>
      </div>
    </div>

    <!-- Tiêu đề chính -->
    <div class="cover-hero">
      <div class="cover-tag">Loại báo cáo</div>
      <h1 class="cover-title">Tiêu đề<br>Báo cáo</h1>
      <p class="cover-subtitle">Mô tả ngắn</p>
      <div class="cover-divider"></div>
      
      <!-- 4 ô thông tin -->
      <div class="cover-metarow">
        <div class="cover-metaitem">
          <span class="cover-metalabel">Label</span>
          <span class="cover-metaval">Value</span>
        </div>
        <!-- ... thêm 3 ô nữa -->
      </div>
    </div>

    <div class="cover-footer">
      <span class="cover-footer-note">Ghi chú bảo mật</span>
      <span class="cover-stamp">BẢO MẬT NỘI BỘ</span>
    </div>
  </div>
</div>
</div>
```

---

## 📃 2. TRANG NỘI DUNG

```html
<div class="page cp">
  <!-- Header chạy -->
  <div class="rh">
    <span class="rh-left"><span class="rh-dot"></span>Tiêu đề báo cáo</span>
    <span class="rh-right">Trang X / Y</span>
  </div>

  <!-- Nội dung ở đây -->

  <!-- Footer trang -->
  <div class="pf">
    <span class="pf-left">Tên công ty · Bảo mật nội bộ</span>
    <span class="pf-center">MÃ-SỐ</span>
    <span class="pf-right">X / Y</span>
  </div>
</div>
```

---

## 🧩 3. CÁC COMPONENT

### Heading
```html
<h1>Tiêu đề lớn</h1>
<h2 data-n="1">Heading cấp 2 (số tự động hiện trong badge)</h2>
<h3>Heading cấp 3 (in nghiêng)</h3>
```

### Đoạn văn
```html
<p>Nội dung thường</p>
<p class="lead">Đoạn mở đầu (to hơn, nhạt hơn)</p>
```

### Executive Summary Box
```html
<div class="esbox">
  <div class="esbox-label">Executive Summary</div>
  <p>Nội dung tóm tắt...</p>
</div>
```

### KPI Cards (grid 4 cột)
```html
<div class="kpi-grid">
  <div class="kpi" style="--kpi-accent:var(--blue-mid)">
    <span class="kpi-label">TÊN CHỈ SỐ</span>
    <span class="kpi-value">142,6<span class="kpi-unit">tỷ</span></span>
    <span class="kpi-change up">↑ 18,4% YoY</span>  <!-- up = xanh, dn = đỏ, nt = xám -->
  </div>
  <!-- ... thêm 3 KPI nữa -->
</div>
```
**Màu accent KPI:** `var(--blue-mid)`, `var(--green)`, `var(--gold)`, `var(--red)`

### Biểu đồ (Chart.js)
```html
<div class="fig">
  <div class="fig-header">
    <span class="fig-num">Hình X.Y</span>
    <span class="fig-title">Tiêu đề biểu đồ</span>
  </div>
  <div class="fig-wrap"><canvas id="c-unique-id" height="175"></canvas></div>
  <div class="fig-cap"><strong>Nguồn:</strong> Mô tả nguồn dữ liệu.</div>
</div>
```

### Bảng dữ liệu
```html
<div class="tbl-wrap">
  <div class="tbl-cap">Bảng X.Y — Tiêu đề bảng</div>
  <table>
    <thead><tr>
      <th>Cột 1</th>
      <th class="r">Cột phải</th>  <!-- class="r" = căn phải -->
    </tr></thead>
    <tbody>
      <tr>
        <td>Dữ liệu</td>
        <td class="r">123,4</td>
      </tr>
      <tr class="trow-total">  <!-- dòng tổng -->
        <td>Tổng</td>
        <td class="r">456,7</td>
      </tr>
    </tbody>
  </table>
</div>
```

### Badge (trong bảng)
```html
<span class="badge up">↑ 18,4%</span>   <!-- xanh lá -->
<span class="badge dn">↓ 4,3%</span>    <!-- đỏ -->
<span class="badge nt">— 0%</span>      <!-- xám -->
```

### Callout / Note
```html
<!-- 3 loại: info (xanh), warn (vàng), success (xanh lá) -->
<div class="note info">
  <div class="note-icon">i</div>
  <p><strong>Lưu ý:</strong> Nội dung ghi chú.</p>
</div>

<div class="note warn">
  <div class="note-icon">!</div>
  <p><strong>Cảnh báo:</strong> Nội dung cảnh báo.</p>
</div>

<div class="note success">
  <div class="note-icon">✓</div>
  <p><strong>Tích cực:</strong> Nội dung tích cực.</p>
</div>
```

### Mục lục (TOC)
```html
<div class="toc-item">
  <span class="toc-num">1.</span>
  <span class="toc-text">Tên mục</span>
  <span class="toc-dots"></span>
  <span class="toc-pg">3</span>
</div>
<div class="toc-item toc-sub">  <!-- mục con: thêm class toc-sub -->
  <span class="toc-num">1.1</span>
  <span class="toc-text">Mục con</span>
  <span class="toc-dots"></span>
  <span class="toc-pg">3</span>
</div>
```

### Khuyến nghị
```html
<div class="rec-item">
  <span class="rec-n">1</span>
  <span class="rec-text">Nội dung khuyến nghị.</span>
</div>
```

### Khối chữ ký
```html
<div class="sigblock">
  <div class="sig-item">
    <div class="sig-label">Chức danh</div>
    <div class="sig-line" style="height:14mm"></div>
    <div class="sig-name">Họ Tên</div>
    <div class="sig-role">Vai trò</div>
  </div>
  <!-- ... thêm 2 sig-item nữa (3 cột) -->
</div>
```

### Chú thích cuối trang
```html
<hr class="fn-rule">
<p class="fn">¹ Nội dung chú thích.</p>
```

---

## 🎨 4. CHART.JS CONFIG (AI cũng sinh phần này)

**Boilerplate helpers** (copy nguyên):
```javascript
const F = {family:"'Inter',sans-serif",size:9}
const TIP = {backgroundColor:"#0F2044",titleColor:"#93C5FD",bodyColor:"#F1F5F9",padding:11,cornerRadius:6,titleFont:{...F,size:9},bodyFont:{...F,size:11,weight:"700"}}
const AX = (cb)=>({grid:{color:"rgba(0,0,0,.05)"},border:{display:false},ticks:{color:"#6B7280",font:F,...(cb?{callback:cb}:{})}})
const AXX = {grid:{display:false},border:{display:false},ticks:{color:"#6B7280",font:F}}
```

**Bảng màu chart** (dùng theo thứ tự):
| Biến | Hex | Dùng cho |
|------|-----|----------|
| `--chart-1` | `#1A4A8C` | Primary (navy blue) |
| `--chart-2` | `#C8860A` | Secondary (gold) |
| `--chart-3` | `#0D6E4F` | Tertiary (green) |
| `--chart-4` | `#7C3AED` | Quaternary (purple) |
| `--chart-5` | `#B91C1C` | Quinary (red) |
| `--chart-6` | `#0891B2` | Senary (cyan) |

**Các loại chart thường dùng:**

| Loại | Chart.js type | Khi nào dùng |
|------|---------------|-------------|
| Bar (dọc) | `bar` | So sánh theo tháng/quý |
| Bar (ngang) | `bar` + `indexAxis:"y"` | Ranking/tăng trưởng |
| Donut | `doughnut` + `cutout:"65%"` | Cơ cấu/tỷ trọng |
| Line | `line` | Xu hướng theo thời gian |
| Grouped bar | `bar` + 2 datasets | So sánh YoY |

---

## 📐 5. LAYOUT PATTERNS

### 2 cột (chart cạnh nhau)
```html
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin:4mm 0">
  <div class="fig">...</div>
  <div class="fig">...</div>
</div>
```

### 2 cột không đều (1.2:1)
```html
<div style="display:grid;grid-template-columns:1.2fr 1fr;gap:8mm;margin:5mm 0 3mm">
  <div class="fig">...</div>
  <div class="fig">...</div>
</div>
```

---

## ⚡ 6. CHECKLIST CHO AI KHI SINH REPORT

- [ ] Bắt đầu bằng `<button class="print-btn">` 
- [ ] Trang bìa: `.page > .cover`
- [ ] Mỗi trang nội dung: `.page.cp`
- [ ] Mỗi trang có `.rh` (header) và `.pf` (footer)
- [ ] `<h2 data-n="X">` — số X tự hiện trong badge navy
- [ ] KPI dùng `.kpi-grid` + 4 `.kpi` cards
- [ ] Chart: `<canvas id="c-xxx">` + script cuối body
- [ ] Badge trong bảng: `.badge.up` / `.badge.dn` / `.badge.nt`
- [ ] Callout dùng `.note.info` / `.note.warn` / `.note.success`
- [ ] Cuối report: `.sigblock` + `.fn` + `.fn-rule`
