/* =====================================================================
   HỆ THỐNG TYPOGRAPHY DÙNG CHUNG — WEBSITE + TRANG CMS (nạp CUỐI CÙNG trên mọi trang)
   v2.59 · 10/10/2026 tạo · v2.61 · 13/10/2026 mở rộng cho toàn bộ trang chi tiết CMS
   ---------------------------------------------------------------------
   Một nguồn duy nhất cho kiểu chữ. Các trang CMS (phần mềm, giải pháp, khách hàng, insight,
   thiết bị) sinh từ file mẫu product.html / solution.html / article.html — các file mẫu đã nạp
   file này, nên trang CMS và trang viết tay luôn cùng một thang chữ.
   Muốn đổi cả website → chỉ sửa BIẾN trong :root bên dưới.

     Role            Class mới        Dùng cho (đã gán sẵn)
     --------------  ---------------  ------------------------------------------------------------
     Tagline         .t-tagline       nhãn đỏ in hoa phía trên heading (.tagline)
     Display H1      .t-display       tiêu đề hero trang chủ (.v2-hero-title)
     Page title H1   .t-h1            tiêu đề trang con / trang chi tiết CMS (sw-title, article-title,
                                      product-title, blog-hero h1…)
     Section H2      .t-h2            tiêu đề lớn của mọi section (trang chủ + trang CMS)
     Content H2/H3   .t-h3 / .t-h4    tiêu đề con trong nội dung bài viết, mô tả sản phẩm
     Title           .t-title         tiêu đề thẻ: câu chuyện, insight, bài liên quan
     Title nhỏ       .t-title-sm      tiêu đề thẻ tính năng
     Lead            .t-lead          đoạn mô tả ngay dưới H1/H2
     Body            .t-body          đoạn văn nội dung chung
     Reading         .t-reading       nội dung bài viết dài (insight, câu chuyện, mô tả thiết bị)

   Desktop: rem (1rem = 100vw/192) + sàn tối thiểu --fl-* (tokens.css) → 1920px đúng thiết kế,
   1440→1200px chữ nhỏ không co quá mức. Mobile/tablet (<1200px): thang riêng trong mobile-type.css.
   ===================================================================== */
:root {
  --t-tagline-size: max(1.4rem, var(--fl-xs));
  --t-tagline-weight: 500;
  --t-tagline-ls: -1px;

  --t-h-weight: 600;          /* Display, H1, H2 */
  --t-h-ls: -.4rem;
  --t-display-size: 8.8rem;  --t-display-lh: 1.2;
  --t-h1-size: 6.4rem;       --t-h1-lh: 1.1;
  --t-h2-size: 6.4rem;       --t-h2-lh: 1.1;

  --t-h3-size: max(3.2rem, 22px);  --t-h3-lh: 1.25;   /* content H2 trong bài */
  --t-h4-size: max(2.4rem, var(--fl-lg)); --t-h4-lh: 1.3; /* content H3 trong bài */
  --t-content-h-weight: 500; --t-content-h-ls: -.1rem;

  --t-title-size: max(2.8rem, var(--fl-lg));    --t-title-lh: 1.25;
  --t-title-sm-size: max(2.4rem, var(--fl-lg)); --t-title-sm-lh: 1.3;
  --t-title-weight: 500;

  --t-lead-size: max(1.8rem, var(--fl-body));    --t-lead-lh: 1.65;
  --t-body-size: max(1.7rem, var(--fl-body));    --t-body-lh: 1.7;
  --t-reading-size: max(1.8rem, var(--fl-body)); --t-reading-lh: 1.8;
}

/* ---------- TAGLINE (mọi màn hình): IN HOA · 500 · -1px · không dot ---------- */
.t-tagline { font-family: var(--font-mono); color: var(--primary); }
:root body :is(.tagline, .t-tagline) { font-weight: var(--t-tagline-weight); letter-spacing: var(--t-tagline-ls); text-transform: uppercase; }
:root body .v2-sec-label .tagline { padding-left: 0; }
:root body .v2-sec-label .tagline::before { content: none; display: none; }
/* content heading: line-height đủ thoáng ở mọi màn hình (trước 1.05 bị dính dòng) */
:root body :is(.article-body h3, .product-detail-body h3) { line-height: var(--t-h4-lh); }

/* ---------- DESKTOP (≥1200px) ---------- */
@media (min-width: 1200px) {
  :root body :is(.tagline, .t-tagline) { font-size: var(--t-tagline-size); }

  /* Display + H1 + H2: đậm 600 · -.4rem */
  :root body :is(.t-display, .t-h1, .t-h2,
    .v2-hero-title, .v2-h2, .v2-needs-title, .v2-own-title, .ai-title, .insight-title, .ab-history-title, .ab-hero-statement, .ab-quote-text, .about-head h2,
    .sw-title, .product-title, .article-title, .hero-title, .blog-hero h1, .solution-hero h1, .err h1,
    .sol-head h2, .blog-cta h2, .footer-cta h2, .sol-faq-head h2, .related-head h2, .gp-more h2, .sw-feats h2) { font-weight: var(--t-h-weight); letter-spacing: var(--t-h-ls); }
  :root body .t-display { font-size: var(--t-display-size); line-height: var(--t-display-lh); }

  /* Page title H1 — trang con + mọi trang chi tiết CMS */
  :root body :is(.t-h1, .sw-title, .product-title, .article-title, .hero-title, .blog-hero h1, .solution-hero h1) { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); }

  /* Section H2 — cùng cỡ trang chủ */
  :root body :is(.t-h2, .ab-hero-statement, .ab-history-title, .ab-quote-text, .about-head h2, .ai-title, .blog-cta h2, .footer-cta h2,
    .sol-head h2, .related-head h2, .sol-faq-head h2, .gp-more h2, .sw-feats h2) { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); }

  /* Content heading trong bài viết / mô tả thiết bị */
  :root body :is(.t-h3, .article-body h2, .product-detail-body h2) { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: var(--t-content-h-weight); letter-spacing: var(--t-content-h-ls); }
  :root body :is(.t-h4, .article-body h3, .product-detail-body h3:not(.product-spec-table h3)) { font-size: var(--t-h4-size); line-height: var(--t-h4-lh); font-weight: var(--t-content-h-weight); letter-spacing: -.05rem; }

  /* Title thẻ */
  :root body :is(.t-title, .story-title, .insight-card h3, .v2-drawer-body h3) { font-size: var(--t-title-size); font-weight: var(--t-title-weight); line-height: var(--t-title-lh); }
  :root body :is(.t-title-sm, .sw-feat h3) { font-size: var(--t-title-sm-size); font-weight: var(--t-title-weight); line-height: var(--t-title-sm-lh); }

  /* Lead */
  :root body :is(.t-lead, .v2-lead, .v2-needs-sub, .ab-cta-text, .blog-cta p, .sw-lead, .article-lead, .product-lead, .blog-hero p:not(.tagline), .solution-hero p:not(.tagline)) { font-size: var(--t-lead-size); line-height: var(--t-lead-lh); }

  /* Body */
  :root body :is(.t-body, .story-testimonial, .mg-card p, .sol-faq-item p, .ab-vm-item p, .award-desc, .ab-history-intro p, .sw-feat p, .v2-drawer-desc) { font-size: var(--t-body-size); line-height: var(--t-body-lh); }

  /* Reading — nội dung bài dài */
  :root body :is(.t-reading, .article-body p, .article-body li, .product-detail-body p, .product-detail-body li) { font-size: var(--t-reading-size); line-height: var(--t-reading-lh); }
}

/* v2.62 · 13/10/2026 — chữ "ENTERPRISE F&B OPERATIONS PLATFORM" dưới logo (header + footer): luôn 10–12px
   (10px @1200 → 12px @1920, không lớn hơn 12px trên màn to; mobile/tablet đang ẩn) */
:root body .brand-tagline { font-size: clamp(10px, calc(10px + (100vw - 1200px) / 360), 12px); }