/**
 * Nhịp chữ và nhịp khối của trang chủ, áp cho mọi trang con.
 *
 * Trước file này mỗi trang con mang một thang riêng: tiêu đề mục chạy từ 18px
 * (/gioithieu/) tới 50px (/bandan/), đoạn văn 11.5–12px với ba họ chữ khác
 * nhau, khoảng cách giữa các khối dao động 144–370px. Đứng cạnh trang chủ thì
 * rõ là hai website khác nhau.
 *
 * Ba lớp được đồng bộ, lấy đúng số đo của trang chủ:
 *
 *   Tiêu đề mục   40px desktop · 28px điện thoại · Plus Jakarta Sans 300
 *   Đoạn văn      14px desktop · 12px điện thoại · giãn dòng 1.72
 *   Khoảng khối   250px desktop · 114px điện thoại
 *
 * Nạp SAU mọi stylesheet khác của trang con, và dùng !important vì các file
 * subpage-shell.css, g2i-headings.css đều khai báo cỡ chữ với !important.
 *
 * typography-scale.js làm tròn cỡ chữ theo thang riêng cho trang con; các mốc
 * của nó đã được chỉnh về đúng bộ số này (xem chú thích trong file đó).
 */

/* ==========================================================================
   1. Tiêu đề mục
   ==========================================================================
   g2i-headings.css và subpage-shell.css cũng khai báo cỡ này (đã sửa về cùng
   một con số), nhưng /gioithieu/ không nạp hai file đó nên vẫn cần khai ở đây.
   Hai nơi cùng 40px nên không đá nhau. */

body:not(.page-thomas-home) main > section:not(:first-child) h2:not(.sr-only),
body:not(.page-thomas-home) main > section:not(:first-child) h2:not(.sr-only) * {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--fs-h2-sub, 40px) !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: .005em !important;
  -webkit-text-stroke: 0 !important;
}

/* Cỡ mới hẹp hơn cỡ cũ nên trả lại quyền xuống dòng cho những tiêu đề từng bị
   khoá một dòng, nếu không chữ sẽ tràn khỏi khung. */
body:not(.page-thomas-home) main > section:not(:first-child) h2:not(.sr-only) {
  max-width: 100%;
  white-space: normal !important;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ==========================================================================
   2. Đoạn văn
   ========================================================================== */

body:not(.page-thomas-home) main p:not([class*="label"]):not([class*="kicker"]):not([class*="meta"]):not([class*="eyebrow"]):not([class*="caption"]):not([class*="note"]):not([class*="index"]) {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--fs-body, 14px) !important;
  font-weight: 300 !important;
  line-height: 1.72 !important;
}

/* ==========================================================================
   3. Khoảng cách giữa các khối
   ==========================================================================
   Cùng cách tính với trang chủ: khoảng trắng = padding-bottom khối trên +
   margin + padding-top khối dưới. Ghim padding để phép tính luôn đúng.

     96 + 58 + 96 = 250

   Khoảng giữa banner và khối đầu tiên là ngoại lệ: mỗi trang con có một kiểu
   banner riêng (ảnh tràn viền, nền tối, nền sáng) nên phần đệm dưới của nó
   thuộc về thiết kế banner, không gộp vào nhịp chung. */

@media (min-width: 981px) {
  body:not(.page-thomas-home) main > section:not(:first-child) {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
    margin-top: 58px !important;
    margin-block-start: 58px !important;
  }

  /* Trang /bandan/ chèn một câu trích thẳng vào <main>, không bọc trong
     <section>, nên nó rơi ra ngoài nhịp chung. Câu trích giữ phần đệm riêng
     (48px) nên lề hai bên nó phải là 250 − 96 − 48 = 106. */
  body:not(.page-thomas-home) main > blockquote,
  body:not(.page-thomas-home) main > blockquote + section:not(:first-child) {
    margin-top: 106px !important;
    margin-block-start: 106px !important;
  }
}

@media (max-width: 620px) {
  body:not(.page-thomas-home) main > section:not(:first-child) h2:not(.sr-only),
  body:not(.page-thomas-home) main > section:not(:first-child) h2:not(.sr-only) * {
    font-size: var(--fs-h2-sub, 28px) !important;
  }

  body:not(.page-thomas-home) main p:not([class*="label"]):not([class*="kicker"]):not([class*="meta"]):not([class*="eyebrow"]):not([class*="caption"]):not([class*="note"]):not([class*="index"]) {
    font-size: var(--fs-body, 12px) !important;
  }

  /* 48 + 18 + 48 = 114 */
  body:not(.page-thomas-home) main > section:not(:first-child) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    margin-top: 18px !important;
    margin-block-start: 18px !important;
  }

  /* 48 + 42 + 24 = 114 */
  body:not(.page-thomas-home) main > blockquote {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  body:not(.page-thomas-home) main > blockquote,
  body:not(.page-thomas-home) main > blockquote + section:not(:first-child) {
    margin-top: 42px !important;
    margin-block-start: 42px !important;
  }
}