<h2 id="callouts" class="section-heading"><span class="section-num">1</span>11 loại Callout</h2>
<p>Mỗi loại có icon + màu riêng, dùng đúng ngữ cảnh sư phạm của nó:</p>

<div class="callout callout-definition"><p class="callout-title">Định nghĩa</p><div class="callout-body"><p>Dùng cho phát biểu định nghĩa/định lý chính thức. Ví dụ: <strong>Số chẵn</strong> là số chia hết cho 2. 🔢</p></div></div>
<div class="callout callout-info"><p class="callout-title">Thông tin</p><div class="callout-body"><p>Thông tin bổ sung, không bắt buộc nhớ. Ví dụ: Trái Đất quay quanh Mặt Trời mất 365 ngày. 🌍</p></div></div>
<div class="callout callout-note"><p class="callout-title">Ghi chú</p><div class="callout-body"><p>Ghi chú phụ, ít quan trọng hơn info. Ví dụ: phần này sẽ học kỹ hơn ở lớp trên. ✏️</p></div></div>
<div class="callout callout-tip"><p class="callout-title">Mẹo hay</p><div class="callout-body"><p>Mẹo giúp làm bài nhanh hơn. Ví dụ: số chia hết cho 5 luôn có tận cùng là 0 hoặc 5. ✨</p></div></div>
<div class="callout callout-example"><p class="callout-title">Ví dụ 1</p><div class="callout-body"><p>12 chia hết cho 3 vì 1 + 2 = 3, mà 3 chia hết cho 3. 🍬</p></div></div>
<div class="callout callout-success"><p class="callout-title">Làm đúng rồi!</p><div class="callout-body"><p>Tuyên dương khi học sinh giải đúng — tạo cảm giác thành công. 🎉</p></div></div>
<div class="callout callout-warning"><p class="callout-title">Chú ý</p><div class="callout-body"><p>Lỗi sai thường gặp. Ví dụ: quên đổi đơn vị trước khi tính. ⚠️</p></div></div>
<div class="callout callout-danger"><p class="callout-title">Sai lầm nghiêm trọng</p><div class="callout-body"><p>Lỗi khái niệm gốc, cần sửa ngay. Ví dụ: nhầm chu vi với diện tích. 🚫</p></div></div>
<div class="callout callout-question"><p class="callout-title">Vì sao lại như vậy?</p><div class="callout-body"><p>Giải thích "tại sao" thay vì chỉ cho công thức suông. 🤔</p></div></div>
<div class="callout callout-homework"><p class="callout-title">Bài tập về nhà</p><div class="callout-body"><p>Danh sách bài tự luyện, không có lời giải kèm theo. 📓</p></div></div>
<div class="callout callout-summary"><p class="callout-title">Tổng kết</p><div class="callout-body"><p>Tóm tắt lại toàn bộ kiến thức cuối bài bằng vài gạch đầu dòng. 📌</p></div></div>

<h2 id="cong-thuc" class="section-heading"><span class="section-num">2</span>Formula box &amp; Steps</h2>

<div class="formula-box">
  <p class="formula">S&nbsp;=&nbsp;a&nbsp;×&nbsp;a</p>
  <p class="formula-legend">S: diện tích hình vuông — a: độ dài cạnh</p>
</div>

<ol class="steps">
  <li><span class="step-badge">Bước 1</span><div class="step-body"><p>Đo độ dài 1 cạnh hình vuông (đơn vị: cm).</p></div></li>
  <li><span class="step-badge">Bước 2</span><div class="step-body"><p>Lấy cạnh nhân với chính nó (a × a).</p></div></li>
  <li><span class="step-badge">Bước 3</span><div class="step-body"><p>Ghi kết quả kèm đơn vị diện tích (cm²).</p></div></li>
</ol>

<h2 id="dang-bai" class="section-heading"><span class="section-num">3</span>Problem type (khối "Dạng bài")</h2>

<section class="problem-type">
  <p class="problem-type__title">Dạng 1. Tính diện tích khi biết cạnh</p>
  <div class="problem-type__body">
    <div class="callout callout-example">
      <p class="callout-title">Ví dụ</p>
      <div class="callout-body">
        <p>Một hình vuông có cạnh dài 5cm. Tính diện tích hình vuông đó.</p>
        <p><strong>Giải:</strong> Diện tích hình vuông là: <code>5&nbsp;×&nbsp;5&nbsp;=&nbsp;25&nbsp;(cm²)</code>. Đáp số: <strong>25cm²</strong>.</p>
      </div>
    </div>
  </div>
</section>

<h2 id="bang" class="section-heading"><span class="section-num">4</span>Table &amp; Table section</h2>

<figure class="table">
  <table>
    <thead><tr><th>Hình</th><th>Công thức diện tích</th><th>Công thức chu vi</th></tr></thead>
    <tbody>
      <tr><td>Hình vuông</td><td><code>a × a</code></td><td><code>a × 4</code></td></tr>
      <tr><td>Hình chữ nhật</td><td><code>a × b</code></td><td><code>(a + b) × 2</code></td></tr>
    </tbody>
  </table>
</figure>

<section class="table-section">
  <p class="table-section__title">📊 Bảng có tiêu đề riêng (table-section)</p>
  <div class="table-section__body">
    <figure class="table">
      <table>
        <thead><tr><th>Khối lớp</th><th>Chủ đề</th></tr></thead>
        <tbody>
          <tr><td>Lớp 4</td><td>Diện tích, chu vi hình chữ nhật</td></tr>
          <tr><td>Lớp 5</td><td>Diện tích hình thang, hình tròn</td></tr>
        </tbody>
      </table>
    </figure>
  </div>
</section>

<h2 id="stat-memory" class="section-heading"><span class="section-num">5</span>Stat grid &amp; Memory box</h2>

<div class="stat-grid">
  <div class="stat-card"><p class="stat-card__number">8</p><p class="stat-card__label">Môn học</p></div>
  <div class="stat-card"><p class="stat-card__number">11</p><p class="stat-card__label">Loại callout</p></div>
  <div class="stat-card"><p class="stat-card__number">8</p><p class="stat-card__label">Màu chủ đề</p></div>
  <div class="stat-card"><p class="stat-card__number">100%</p><p class="stat-card__label">Tự chứa, không cần JS</p></div>
</div>

<div class="memory-box">
  <span class="memory-box__icon">💡</span>
  <div>
    <p class="memory-box__label">Mẹo ghi nhớ nhanh</p>
    <p class="memory-box__seq">RẮN → LỎNG → KHÍ</p>
    <ul class="memory-box__list">
      <li>Nóng chảy: rắn → lỏng</li>
      <li>Bay hơi: lỏng → khí</li>
      <li>Ngưng tụ: khí → lỏng</li>
      <li>Đông đặc: lỏng → rắn</li>
    </ul>
  </div>
</div>

<h2 id="van-ban" class="section-heading"><span class="section-num">6</span>Định dạng văn bản &amp; danh sách</h2>

<p>Văn bản <strong>in đậm</strong>, <em>in nghiêng</em>, <u>gạch chân</u>, <s>gạch ngang</s>, <mark>đánh dấu highlight</mark>, <small>chữ nhỏ</small>, số mũ x<sup>2</sup>, chỉ số H<sub>2</sub>O, phím tắt <kbd>Ctrl</kbd> + <kbd>C</kbd>, viết tắt <abbr title="Ki-lô-gam">kg</abbr>.</p>

<blockquote>
  <p>Học, học nữa, học mãi.</p>
  <cite>Câu nói truyền cảm hứng học tập</cite>
</blockquote>

<pre><code class="language-text">v = s : t
s = v × t
t = s : v</code></pre>

<ul>
  <li>Danh sách không thứ tự</li>
  <li>Mục thứ hai
    <ul><li>Mục con cấp 2</li></ul>
  </li>
</ul>

<ul class="todo-list">
  <li class="todo-list__item"><label class="todo-list__label"><input type="checkbox" checked disabled><span class="todo-list__label__description">Đã học xong bảng cửu chương</span></label></li>
  <li class="todo-list__item"><label class="todo-list__label"><input type="checkbox" disabled><span class="todo-list__label__description">Chưa học xong phân số</span></label></li>
</ul>

<hr>

<h2 id="hinh-anh" class="section-heading"><span class="section-num">7</span>Hình ảnh, phóng to (Lightbox) &amp; Gallery</h2>

<figure class="image">
  <img alt="Hình minh hoạ mẫu (placeholder)" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 220'%3E%3Crect width='640' height='220' fill='%23e0f2fe'/%3E%3Ctext x='320' y='115' font-size='24' text-anchor='middle' fill='%230e7490' font-family='sans-serif' font-weight='700'%3EHình minh hoạ (placeholder)%3C/text%3E%3C/svg%3E">
  <figcaption>Hình mẫu — thay bằng ảnh thật khi soạn bài chính thức.</figcaption>
</figure>

<p>Ảnh có thể bấm để <strong>phóng to toàn màn hình</strong> — không cần JavaScript, dùng kỹ thuật CSS <code>:target</code> (hoạt động cả khi nội dung được chèn bằng <code>dangerouslySetInnerHTML</code>). Icon 🔍 luôn hiện sẵn (mờ) trên thiết bị cảm ứng vì hiệu ứng hover không hoạt động khi chạm:</p>

<figure class="image zoomable">
  <a href="#lb-demo-1" class="zoomable__trigger">
    <img alt="Ảnh minh hoạ có thể phóng to" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 220'%3E%3Crect width='640' height='220' fill='%23fdf2f8'/%3E%3Ctext x='320' y='115' font-size='22' text-anchor='middle' fill='%239d174d' font-family='sans-serif' font-weight='700'%3EBấm vào đây để phóng to 🔍%3C/text%3E%3C/svg%3E">
    <span class="zoomable__hint">🔍</span>
  </a>
  <figcaption>Bấm vào ảnh để xem phóng to toàn màn hình, có nút đóng ở góc.</figcaption>
</figure>

<div class="lightbox" id="lb-demo-1">
  <a href="#_" class="lightbox__backdrop" aria-label="Đóng"></a>
  <figure class="lightbox__frame">
    <a href="#_" class="lightbox__close" aria-label="Đóng">&times;</a>
    <img alt="Ảnh phóng to" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 560'%3E%3Crect width='900' height='560' fill='%23500724'/%3E%3Ctext x='450' y='290' font-size='30' text-anchor='middle' fill='%23fbcfe8' font-family='sans-serif' font-weight='700'%3EẢnh đã phóng to%3C/text%3E%3C/svg%3E">
    <figcaption>Chú thích hiển thị khi ảnh được phóng to.</figcaption>
  </figure>
</div>

<p>Nhiều ảnh trong 1 gallery — có nút chuyển ảnh trước/sau ngay trong khung phóng to:</p>

<div class="gallery">
  <p class="gallery__label">📸 Hình ảnh tham khảo — nhấn để phóng to</p>
  <div class="gallery__track">
    <a href="#lb-g1-1" class="gallery__thumb">
      <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect width='200' height='150' fill='%23e0f2fe'/%3E%3Ctext x='100' y='80' font-size='28' text-anchor='middle' fill='%230369a1' font-family='sans-serif' font-weight='700'%3E1%3C/text%3E%3C/svg%3E" alt="Ảnh 1">
      <span class="zoomable__hint">🔍</span>
    </a>
    <a href="#lb-g1-2" class="gallery__thumb">
      <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect width='200' height='150' fill='%23ecfccb'/%3E%3Ctext x='100' y='80' font-size='28' text-anchor='middle' fill='%233f6212' font-family='sans-serif' font-weight='700'%3E2%3C/text%3E%3C/svg%3E" alt="Ảnh 2">
      <span class="zoomable__hint">🔍</span>
    </a>
    <a href="#lb-g1-3" class="gallery__thumb">
      <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect width='200' height='150' fill='%23fef3c7'/%3E%3Ctext x='100' y='80' font-size='28' text-anchor='middle' fill='%2392400e' font-family='sans-serif' font-weight='700'%3E3%3C/text%3E%3C/svg%3E" alt="Ảnh 3">
      <span class="zoomable__hint">🔍</span>
    </a>
  </div>
</div>

<div class="lightbox" id="lb-g1-1">
  <a href="#_" class="lightbox__backdrop" aria-label="Đóng"></a>
  <figure class="lightbox__frame">
    <a href="#_" class="lightbox__close" aria-label="Đóng">&times;</a>
    <a href="#lb-g1-3" class="lightbox__nav lightbox__prev" aria-label="Ảnh trước">&lsaquo;</a>
    <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 560'%3E%3Crect width='900' height='560' fill='%23075985'/%3E%3Ctext x='450' y='290' font-size='60' text-anchor='middle' fill='%23e0f2fe' font-family='sans-serif' font-weight='800'%3E1%3C/text%3E%3C/svg%3E" alt="Ảnh 1">
    <a href="#lb-g1-2" class="lightbox__nav lightbox__next" aria-label="Ảnh sau">&rsaquo;</a>
    <figcaption>Ảnh 1 / 3</figcaption>
  </figure>
</div>
<div class="lightbox" id="lb-g1-2">
  <a href="#_" class="lightbox__backdrop" aria-label="Đóng"></a>
  <figure class="lightbox__frame">
    <a href="#_" class="lightbox__close" aria-label="Đóng">&times;</a>
    <a href="#lb-g1-1" class="lightbox__nav lightbox__prev" aria-label="Ảnh trước">&lsaquo;</a>
    <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 560'%3E%3Crect width='900' height='560' fill='%233f6212'/%3E%3Ctext x='450' y='290' font-size='60' text-anchor='middle' fill='%23ecfccb' font-family='sans-serif' font-weight='800'%3E2%3C/text%3E%3C/svg%3E" alt="Ảnh 2">
    <a href="#lb-g1-3" class="lightbox__nav lightbox__next" aria-label="Ảnh sau">&rsaquo;</a>
    <figcaption>Ảnh 2 / 3</figcaption>
  </figure>
</div>
<div class="lightbox" id="lb-g1-3">
  <a href="#_" class="lightbox__backdrop" aria-label="Đóng"></a>
  <figure class="lightbox__frame">
    <a href="#_" class="lightbox__close" aria-label="Đóng">&times;</a>
    <a href="#lb-g1-2" class="lightbox__nav lightbox__prev" aria-label="Ảnh trước">&lsaquo;</a>
    <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 560'%3E%3Crect width='900' height='560' fill='%2392400e'/%3E%3Ctext x='450' y='290' font-size='60' text-anchor='middle' fill='%23fef3c7' font-family='sans-serif' font-weight='800'%3E3%3C/text%3E%3C/svg%3E" alt="Ảnh 3">
    <a href="#lb-g1-1" class="lightbox__nav lightbox__next" aria-label="Ảnh sau">&rsaquo;</a>
    <figcaption>Ảnh 3 / 3</figcaption>
  </figure>
</div>

<h2 id="qa" class="section-heading"><span class="section-num">8</span>FAQ accordion (không cần JS)</h2>

<details class="qa">
  <summary class="qa__q">Vì sao dùng &lt;details&gt; thay vì Bootstrap accordion?</summary>
  <div class="qa__a"><p>Vì bài blog publish chỉ chèn HTML thô từ CKEditor — không chắc mọi nơi hiển thị đều load kèm Bootstrap JS.</p></div>
</details>
<details class="qa">
  <summary class="qa__q">Có thể mở nhiều câu cùng lúc không?</summary>
  <div class="qa__a"><p>Có — mỗi &lt;details&gt; độc lập, không giới hạn chỉ mở 1 câu như accordion Bootstrap mặc định.</p></div>
</details>

<h2 id="cta" class="section-heading"><span class="section-num">9</span>CTA banner &amp; Button</h2>

<p>
  <a class="btn btn-primary" href="#">Button primary</a>
  <a class="btn btn-secondary" href="#">Button secondary</a>
</p>

<div class="cta-banner">
  <div>
    <p class="cta-banner__title">Sẵn sàng học bài tiếp theo chưa? 🚀</p>
    <p class="cta-banner__desc">CTA banner dùng ở cuối bài để dẫn sang bài học kế tiếp hoặc trang luyện tập.</p>
  </div>
  <div class="cta-banner__actions">
    <a class="btn btn-light" href="#">Học bài tiếp</a>
    <a class="btn btn-ghost" href="#">Về trang chủ</a>
  </div>
</div>

<h2 id="note-variants" class="section-heading"><span class="section-num">10</span>Year badge, Gloss &amp; Note inline mở rộng</h2>

<p>
  Nhà Lý <span class="year-badge topic-3">1009 – 1225</span>,
  Nhà Trần <span class="year-badge topic-4">1225 – 1400</span>,
  Nhà Nguyễn <span class="year-badge topic-6">1802 – 1945</span>
</p>

<p>Trận <strong>Bạch Đằng</strong> <em class="gloss">(Battle of Bạch Đằng)</em> năm 938 là chiến thắng quyết định của Ngô Quyền.</p>

<div class="note-inline note-inline--warning">
  <p class="note-inline__label">Dễ nhầm</p>
  <p>Có 2 trận Bạch Đằng nổi tiếng: năm 938 (Ngô Quyền) và năm 1288 (Trần Hưng Đạo) — đừng nhầm 2 sự kiện này.</p>
</div>

<div class="note-inline note-inline--success">
  <p class="note-inline__label">Mẹo nhớ</p>
  <p>3 lần đại thắng trên sông Bạch Đằng: Ngô Quyền (938) → Lê Hoàn (981) → Trần Hưng Đạo (1288).</p>
</div>

<details class="note-inline note-inline--tip">
  <summary class="note-inline__label">Mở rộng: vì sao chọn sông Bạch Đằng?</summary>
  <p>Sông Bạch Đằng có chế độ thủy triều lên xuống rõ rệt, thuận lợi để bố trí trận địa cọc ngầm — đây là lý do cả 3 vị tướng đều chọn địa điểm này để phục kích thuỷ quân giặc.</p>
</details>

<h2 id="fun-fact" class="section-heading"><span class="section-num">11</span>Fun fact, Quick chip &amp; Grade badge</h2>

<h3>Địa hình đồi núi Việt Nam <span class="grade-badge grade-badge--l4">L4</span></h3>
<p>Đồi núi chiếm khoảng <strong>3/4 diện tích</strong> lãnh thổ Việt Nam <span class="grade-badge grade-badge--l5">L5</span>, nhưng chủ yếu là đồi núi thấp.</p>

<div class="fun-fact">
  <p class="fun-fact__label">🌟 Em có biết?</p>
  <p>Đỉnh Fansipan cao 3.147m, là đỉnh núi cao nhất Việt Nam và cả Đông Dương — được mệnh danh "Nóc nhà Đông Dương".</p>
</div>

<div class="fun-fact">
  <p class="fun-fact__label">🧠 Mẹo nhớ nhanh</p>
  <p>3/4 diện tích là đồi núi, 1/4 còn lại là đồng bằng — nhưng hơn 2/3 dân số lại sống ở đồng bằng vì đất phù sa màu mỡ, dễ canh tác.</p>
</div>

<p>
  <a class="quick-chip quick-chip--doc" href="#">📄 Tài liệu</a>
  <a class="quick-chip quick-chip--yt" href="#">▶️ Video</a>
</p>

<h2 id="intro-grid" class="section-heading"><span class="section-num">12</span>Intro grid — mở bài kiểu tổng hợp nhiều chủ đề</h2>

<p>Dùng thay cho <code>lesson-hero</code> khi bài KHÔNG phải 1 mạch lý thuyết mà là trang tổng hợp nhiều chủ đề con (nền trắng/trung tính, thiên về tra cứu hơn là một trang đích quảng cáo). Cột trái thực tế sẽ dùng thẻ <code>&lt;h1&gt;</code> — ở đây đổi sang <code>&lt;h3&gt;</code> chỉ vì trang demo này đã có 1 thẻ h1 riêng ở đầu trang.</p>

<div class="intro-grid">
  <div>
    <p class="eyebrow">🔬 Khoa học tự nhiên · Lớp 4–5</p>
    <h3 style="margin-top:0.75rem">Khoa học về Chất</h3>
    <p>Nước, không khí, đất, kim loại — mọi thứ xung quanh ta đều được tạo từ <strong>chất</strong>. Trang này hệ thống 7 chủ đề cốt lõi để em tra cứu bất cứ lúc nào.</p>
    <div class="intro-grid__actions">
      <a class="btn btn-primary" href="#">Ba thể của chất</a>
      <a class="btn btn-secondary" href="#">Khám phá vật liệu</a>
    </div>
  </div>
  <div class="intro-panel">
    <div class="intro-panel__head">
      <p class="intro-panel__title">7 Chủ đề kiến thức</p>
      <span class="badge badge-outline">Lớp 4–5 · Khoa học</span>
    </div>
    <div class="topic-index">
      <a href="#" class="topic-index__row">
        <span class="topic-index__num topic-1">01<small>Thể</small></span>
        <span class="topic-index__text"><strong>Ba thể của chất — Rắn, Lỏng, Khí</strong><small>Hình dạng, thể tích, sự chuyển thể</small></span>
      </a>
      <a href="#" class="topic-index__row">
        <span class="topic-index__num topic-2">02<small>Nước</small></span>
        <span class="topic-index__text"><strong>Nước &amp; sự chuyển thể</strong><small>Bay hơi, ngưng tụ, đông đặc, vòng tuần hoàn</small></span>
      </a>
      <a href="#" class="topic-index__row">
        <span class="topic-index__num topic-3">03<small>KK</small></span>
        <span class="topic-index__text"><strong>Không khí — Thành phần &amp; tính chất</strong><small>78% N₂ + 21% O₂, gió, thang Bô-pho</small></span>
      </a>
      <a href="#" class="topic-index__row">
        <span class="topic-index__num topic-5">05<small>HH&amp;DD</small></span>
        <span class="topic-index__text"><strong>Hỗn hợp &amp; dung dịch</strong><small>Tách chất, lắng lọc, bay hơi</small></span>
      </a>
    </div>
  </div>
</div>

<h2 id="chu-de" class="section-heading"><span class="section-num">13</span>Topic block &amp; Concept card (8 màu chủ đề)</h2>

<section class="topic-block">
  <p class="topic-block__title topic-1">🧮 Các môn học ở trường tiểu học</p>
  <div class="concept-grid concept-grid-4">
    <div class="concept-card topic-1"><div class="concept-card__top"><h4>🧮 Toán</h4><span class="badge badge-info">topic-1</span></div><p>Cộng trừ nhân chia, hình học, đo lường.</p></div>
    <div class="concept-card topic-2"><div class="concept-card__top"><h4>🔬 Khoa học</h4><span class="badge badge-info">topic-2</span></div><p>Chất, năng lượng, cơ thể người, tự nhiên.</p></div>
    <div class="concept-card topic-3"><div class="concept-card__top"><h4>📖 Tiếng Việt</h4><span class="badge badge-info">topic-3</span></div><p>Đọc hiểu, chính tả, tập làm văn.</p></div>
    <div class="concept-card topic-4"><div class="concept-card__top"><h4>🌍 Địa lý</h4><span class="badge badge-info">topic-4</span></div><p>Bản đồ, các châu lục, khí hậu Việt Nam.</p></div>
    <div class="concept-card topic-5"><div class="concept-card__top"><h4>🏯 Lịch sử</h4><span class="badge badge-info">topic-5</span></div><p>Các triều đại, sự kiện lịch sử Việt Nam.</p></div>
    <div class="concept-card topic-6"><div class="concept-card__top"><h4>🔤 Tiếng Anh</h4><span class="badge badge-info">topic-6</span></div><p>Từ vựng, ngữ pháp cơ bản, hội thoại.</p></div>
    <div class="concept-card topic-7"><div class="concept-card__top"><h4>🎨 Nghệ thuật</h4><span class="badge badge-info">topic-7</span></div><p>Vẽ, âm nhạc, thủ công.</p></div>
    <div class="concept-card topic-8"><div class="concept-card__top"><h4>🤝 Kỹ năng sống</h4><span class="badge badge-info">topic-8</span></div><p>Giao tiếp, an toàn, làm việc nhóm.</p>
      <div class="note-inline"><p class="note-inline__label">Ghi nhớ</p><p>note-inline dùng để nhấn 1 dòng ngắn bên trong concept-card.</p></div>
    </div>
  </div>
</section>

<h2 id="tag-divider" class="section-heading"><span class="section-num">14</span>Tag phân loại &amp; Divider label</h2>

<p>7 nhãn phân loại LOẠI nội dung của 1 thẻ (khác <code>.badge</code> — vốn dùng cho trạng thái UI):</p>
<p>
  <span class="tag tag-concept">Khái niệm</span>
  <span class="tag tag-practice">Thực hành</span>
  <span class="tag tag-transition">Chuyển thể</span>
  <span class="tag tag-nature">Tự nhiên</span>
  <span class="tag tag-history">Lịch sử</span>
  <span class="tag tag-material">Vật liệu</span>
  <span class="tag tag-application">Ứng dụng</span>
</p>

<p class="divider-label">Nhóm 1: Ba thể của chất</p>
<p>Divider label dùng để chia nhỏ 1 danh sách flashcard/thẻ dài thành từng nhóm mà không cần thêm 1 cấp heading mới.</p>
<p class="divider-label">Nhóm 2: Hỗn hợp &amp; dung dịch</p>
<p>Mỗi divider-label đứng trước 1 nhóm nội dung liên quan, giúp mắt "quét" nhanh khi ôn tập.</p>

<h2 id="timeline" class="section-heading"><span class="section-num">15</span>Timeline dọc (mốc sự kiện)</h2>
<p>Dùng cho nội dung dạng chuỗi sự kiện theo thời gian (Lịch sử, tiểu sử, quá trình phát triển...). Mốc lẻ card bên trái, mốc chẵn bên phải, tự đổi thành 1 cột trên điện thoại:</p>

<div class="timeline">
  <div class="timeline__item">
    <div class="timeline__side timeline__side--left">
      <div class="timeline__card topic-1">
        <h4>Nhà nước Văn Lang</h4>
        <p>Nhà nước đầu tiên của người Việt, đứng đầu là các Vua Hùng.</p>
      </div>
    </div>
    <div class="timeline__center">
      <span class="timeline__dot topic-1">🏹</span>
      <span class="timeline__year">2879 TCN</span>
    </div>
    <div class="timeline__side timeline__side--right"></div>
  </div>
  <div class="timeline__item">
    <div class="timeline__side timeline__side--left"></div>
    <div class="timeline__center">
      <span class="timeline__dot topic-2">⚔️</span>
      <span class="timeline__year">179 TCN</span>
    </div>
    <div class="timeline__side timeline__side--right">
      <div class="timeline__card topic-2">
        <h4>Bắc thuộc lần 1</h4>
        <p>Bắt đầu hơn 1000 năm dưới ách đô hộ phong kiến phương Bắc.</p>
      </div>
    </div>
  </div>
  <div class="timeline__item">
    <div class="timeline__side timeline__side--left">
      <div class="timeline__card topic-5">
        <h4>Chiến thắng Bạch Đằng</h4>
        <p>Ngô Quyền đánh tan quân Nam Hán, mở ra kỷ nguyên độc lập tự chủ.</p>
      </div>
    </div>
    <div class="timeline__center">
      <span class="timeline__dot topic-5">🌊</span>
      <span class="timeline__year">938</span>
    </div>
    <div class="timeline__side timeline__side--right"></div>
  </div>
</div>

<h2 id="resource" class="section-heading"><span class="section-num">16</span>Resource list (tài liệu &amp; video tham khảo)</h2>
<p>Danh sách liên kết tải tài liệu/xem video, có icon loại file và hiệu ứng hover:</p>

<div class="resource-group">
  <div class="resource-group__header resource-group__header--doc">
    <span aria-hidden="true">📄</span>
    <h3>Tài liệu</h3>
    <span class="badge badge-outline">2 file</span>
  </div>
  <ul class="resource-list">
    <li>
      <a class="resource-link" href="#">
        <span class="resource-link__icon resource-link__icon--pdf">PDF</span>
        <span class="resource-link__info"><strong>Tóm tắt bài học (PDF)</strong><small>1.2 MB — tải về đọc offline</small></span>
        <span class="resource-link__action">⬇</span>
      </a>
    </li>
    <li>
      <a class="resource-link" href="#">
        <span class="resource-link__icon resource-link__icon--rar">RAR</span>
        <span class="resource-link__info"><strong>Bộ đề luyện tập (RAR)</strong><small>850 KB — nén nhiều file</small></span>
        <span class="resource-link__action">⬇</span>
      </a>
    </li>
  </ul>
</div>

<div class="resource-group">
  <div class="resource-group__header resource-group__header--video">
    <span aria-hidden="true">▶️</span>
    <h3>Video</h3>
    <span class="badge badge-outline">1 video</span>
  </div>
  <ul class="resource-list">
    <li>
      <a class="resource-link resource-link--video" href="#">
        <span class="resource-link__icon resource-link__icon--yt">▶</span>
        <span class="resource-link__info"><strong>Video bài giảng minh hoạ</strong><small>12:34 — YouTube</small></span>
        <span class="resource-link__action">↗</span>
      </a>
    </li>
  </ul>
</div>

<h2 id="person" class="section-heading"><span class="section-num">17</span>Person grid (nhân vật/tiểu sử)</h2>
<p>Lưới thẻ nhân vật — có ảnh thật hoặc emoji placeholder khi chưa có ảnh:</p>

<div class="person-grid">
  <div class="person-card topic-1">
    <div class="person-card__avatar person-card__avatar--placeholder">👑</div>
    <h4>Vua Hùng Vương</h4>
    <p class="person-card__years">2879 – 258 TCN</p>
    <p>Người đứng đầu nhà nước Văn Lang, tổ tiên chung của người Việt.</p>
  </div>
  <div class="person-card topic-5">
    <div class="person-card__avatar person-card__avatar--placeholder">⚔️</div>
    <h4>Ngô Quyền</h4>
    <p class="person-card__years">898 – 944</p>
    <p>Đánh tan quân Nam Hán trên sông Bạch Đằng, chấm dứt 1000 năm Bắc thuộc.</p>
  </div>
  <div class="person-card topic-3">
    <div class="person-card__avatar"><img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 200'%3E%3Crect width='160' height='200' fill='%23e0f2fe'/%3E%3Ctext x='80' y='105' font-size='18' text-anchor='middle' fill='%230369a1' font-family='sans-serif' font-weight='700'%3EẢnh thật%3C/text%3E%3C/svg%3E" alt="Ví dụ có ảnh thật"></div>
    <h4>Lý Thái Tổ</h4>
    <p class="person-card__years">974 – 1028</p>
    <p>Dời đô về Thăng Long năm 1010, mở đầu triều Lý.</p>
  </div>
  <div class="person-card topic-6">
    <div class="person-card__avatar person-card__avatar--placeholder">🏯</div>
    <h4>Quang Trung</h4>
    <p class="person-card__years">1753 – 1792</p>
    <p>Đại phá quân Thanh mùa xuân Kỷ Dậu 1789.</p>
  </div>
</div>