/* ════════════════════════════════════════════════════════════════════════════
   css/dilo-typography.css
   LUẬT FONT TIÊU ĐỀ CỦA DILO. MỘT NƠI DUY NHẤT.

   VÌ SAO CÓ FILE NÀY
   ------------------
   Font tiêu đề đã sai ba lần, ở ba chỗ khác nhau, và mỗi lần vá một chỗ thì lần
   sau lại lòi ra chỗ khác:

     1. `.event-title` (art.css) không ai đặt font-family -> thừa kế Segoe UI của body.
     2. Hero carousel trang chủ -> vẫn font serif.
     3. profile.html, video.html, nhom-chat.html, clothing-detail.html,
        reset-password.html KHÔNG hề nạp League Gothic từ Google Fonts.
        CSS khai đúng cũng vô ích: font không tải về thì trình duyệt fallback.

   Gốc rễ chung: **font tiêu đề được khai rải rác ở 15 file CSS**, ai thêm class mới
   mà quên khai font là hỏng, và không ai phát hiện cho tới khi nhìn tận mắt.

   Chủ dự án chốt: "cứng luôn là League Gothic cho dù tiêu đề nào ở đâu nữa".
   File này làm đúng thế.

   CÁCH DÙNG
   ---------
   Nạp SAU CÙNG, sau mọi file CSS khác, trên MỌI trang (trừ admin):

     <link rel="stylesheet" href="css/dilo-typography.css">

   Và trang đó PHẢI có dòng nạp font, nếu không thì file này vô nghĩa:

     <link href="https://fonts.googleapis.com/css2?family=League+Gothic&display=swap" rel="stylesheet">

   VỀ `!important`
   ---------------
   Bình thường `!important` là mùi code xấu. Ở đây nó CỐ Ý, vì hai lý do:

     1. Chủ dự án muốn CỨNG. Không cho phép trang nào tự đè.
     2. 🔴 Nó là hàng rào chống chữ giả font. Shop dán tiêu đề copy từ Canva hay
        "web tạo chữ đẹp" (Mathematical Bold 𝐀𝐅𝐓𝐄𝐑, Fullwidth ＡＦＴＥＲ). Backend
        đã có `chuanHoaTieuDe()` chặn lúc lưu, file này là lớp phòng thủ thứ hai
        ở lúc hiển thị.

   ⛔ KHÔNG áp cho admin (admin.css cố ý dùng font hệ thống, đó là trang nội bộ,
      cần đọc số liệu dày đặc, League Gothic condensed đọc mỏi mắt).
   ⛔ KHÔNG áp cho chữ nhỏ: mô tả, phụ đề, meta, nút, body. League Gothic là font
      hiển thị (display), hẹp và cao. Dùng cho đoạn văn là tra tấn người đọc.
      Đó là lý do danh sách dưới CHỈ có tiêu đề.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --dilo-font-title: 'League Gothic', 'Arial Narrow', sans-serif;
}

/* ── TIÊU ĐỀ. League Gothic, cứng, không đàm phán. ─────────────────────────── */
.hero-title,
.hero-title span,
.hero-title em,
.hero-title strong,

.card-title,
.event-title,
.dilo-promo .dptitle,
.blog-title,
.places-title,
.fh-head h2,

.related-title,
.rc-title,
.tk-title,
.cd-title,
.cdp-title,
.sd-title,
.cl-title,
.ev-title,
.vd-title,
.gr-title,

/* ⛔ ĐỪNG THÊM `.cgroup-title` VÀO ĐÂY LẦN NỮA.
   Đó là TÊN NHÓM trong ô nhóm ở bình luận — một NHÃN GIAO DIỆN 14px, không phải tiêu đề
   trưng bày. League Gothic là font nén rất chặt, dựng cho chữ 28px+; ép nó xuống 14px thì
   tên nhóm teo lại và bẹp dí, đọc không ra. Đã xảy ra thật 15/07/2026.
   Font của nó được ghi tường minh trong css/group-chat.css. */

.section-title,
.filter-section h2,
.site-footer__top h2,
.why-title,
.why-item-title,
.cl-home-head h2,
.shop-clothes-section .blog-header h2 {
  font-family: var(--dilo-font-title) !important;
  font-weight: 400 !important;   /* League Gothic chỉ có MỘT weight. 700 làm trình
                                    duyệt "bôi đậm giả" (synthetic bold), chữ nhoè. */

  /* 🔴 `font-synthesis: none`, KHÔNG PHẢI `font-synthesis-weight: none`.
     ------------------------------------------------------------------------
     Đây là chỗ sinh ra lỗi "một tiêu đề, hai font" ở hero carousel.

     `font-synthesis-weight` chỉ chặn ĐẬM GIẢ. Nó KHÔNG chặn NGHIÊNG GIẢ.
     `.hero-title span` ở club.css / art.css / ws.css đặt `font-style: italic`,
     mà League Gothic KHÔNG CÓ mặt chữ nghiêng -> trình duyệt tự bóp méo chữ
     thẳng thành nghiêng (synthetic oblique). Chữ bị xiên, nét mảnh đi, và mắt
     đọc ra đó là MỘT FONT KHÁC nằm giữa câu.

     `font-synthesis: none` chặn cả hai. Trình duyệt sẽ dùng đúng mặt chữ thật,
     không bịa thêm cái gì.

     ⚠ Đã kiểm: League Gothic trên Google Fonts CÓ ĐỦ subset `vietnamese`, nên
       dấu tiếng Việt KHÔNG bị rơi về font khác. Đừng đi tìm lỗi ở đó. */
  font-synthesis: none;
  font-style: normal !important;
}

/* ── 🔴 CHỮ NHỎ THÌ KHÔNG ÉP FONT TIÊU ĐỀ. ────────────────────────────────────
   `.fh-title` (tên sự kiện dưới poster ở trang chủ) là chữ 12.5-15px, cắt 2 dòng.
   Nó được thiết kế cho font giao diện ở nét đậm 600. Ép nó thành League Gothic
   400 làm chữ TEO LẠI hai lần: font hẹp hơn, và mất luôn nét đậm.

   Chính file này đã ghi ở đầu: "⛔ KHÔNG áp cho chữ nhỏ". Rồi vẫn áp. Sửa rồi.
   ⛔ ĐỪNG thêm `.fh-title` (hay bất kỳ chữ dưới 18px nào) vào danh sách trên.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Thẻ tiêu đề chuẩn HTML. Chỉ trên các trang công khai. ─────────────────── */
body:not(.admin) h1,
body:not(.admin) h2 {
  font-family: var(--dilo-font-title) !important;
  font-weight: 400 !important;
  font-synthesis-weight: none;
}

/* ── 🔴 CHỮ GIẢ FONT. Lớp phòng thủ thứ hai. ───────────────────────────────
   Nếu tiêu đề lọt vào Firestore với ký tự Mathematical / Fullwidth / Small Caps,
   League Gothic KHÔNG CÓ GLYPH cho chúng, và trình duyệt sẽ lặng lẽ fallback
   sang font khác cho RIÊNG mấy ký tự đó. Kết quả: một tiêu đề, hai font.

   CSS không sửa được chuyện đó. Chỉ dữ liệu mới sửa được:
     - Lúc lưu : `chuanHoaTieuDe()` ở functions/index.js (đã có).
     - Dữ liệu cũ: `node scripts/normalize-titles.js ./serviceAccount.json --apply`
     - Soi ký tự : `node scripts/soi-tieu-de.js ./serviceAccount.json`
   Thấy tiêu đề hai font thì chạy hai script trên, ĐỪNG đi sửa CSS.
   ────────────────────────────────────────────────────────────────────────── */