/*
 * KHÓA TYPOGRAPHY TOÀN WEBSITE
 *
 * Đây là nơi duy nhất dùng để thay đổi cỡ chữ chuẩn của website.
 * File được nạp sau toàn bộ CSS trang/component và dùng !important để
 * các chỉnh sửa rải rác không thể vô tình làm chữ nhỏ trở lại.
 */

:root {
  --locked-font-body: 21px;
  --locked-font-small: 15px;
  --locked-font-h1: 48px;
  --locked-font-h2: 35px;
  --locked-font-h3: 18px;
  --locked-font-h4: 22px;
  --locked-font-h5: 20px;
  --locked-font-h6: 18px;
  --locked-font-card-title: 24px;
  --locked-font-promise-title: 18px;
  --locked-font-footer-title: 22px;
  --locked-font-admin-page-title: 36px;
  --locked-font-admin-title: 26px;
  --locked-font-header-nav: 18px;
}

html,
body {
  font-size: var(--locked-font-body) !important;
}

body {
  line-height: 1.7;
}

/* Các element nội dung có thể định size mặc định */
#site-root :where(p,
  li,
  dt,
  dd,
  label,
  summary,
  address,
  blockquote,
  figcaption,
  caption,
  th,
  td,
  input,
  select,
  textarea,
  button,
  legend,
  option,
  code,
  pre) {
  font-size: 1rem;
}

#site-root :where(a,
  span,
  strong,
  b,
  em,
  time,
  cite,
  abbr) {
  font-size: inherit;
}

#site-root :where(small, .eyebrow, .status-chip, .article-detail__meta),
#site-root :where([class*="__meta"],
  [class*="__category"],
  [class*="__status"],
  [class$="__tag"],
  [class*="__label"]) {
  font-size: var(--locked-font-small) !important;
  line-height: 1.55;
}

#site-root :where(p, li, dt, dd, label, summary) :where(a, span, strong, b, em),
#site-root :where(h1, h2, h3, h4, h5, h6) :where(a, span, strong, b, em) {
  font-size: inherit !important;
}

/* Giữ nguyên kích thước các ký tự trang trí có chủ đích. */
#site-root .brand strong {
  font-size: 18px !important;
}

#site-root .hero-carousel__arrow span {
  font-size: 42px !important;
}

#site-root .promise-strip__number {
  font-size: 29px !important;
}

#site-root .why__hanzi {
  font-size: 178px !important;
}

#site-root .teacher-standard-card__number {
  font-size: 28px !important;
}

#site-root .article-card__cover .category-icon {
  font-size: 66px !important;
}

#site-root .contact-dock__item i {
  font-size: 21px !important;
}

#site-root .contact-dock__zalo-mark {
  font-size: 15px !important;
}

#site-root .contact-dock__label {
  font-size: 15px !important;
}

#site-root h1,
#site-root h2,
#site-root h3,
#site-root h4,
#site-root h5,
#site-root h6 {
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

#site-root h1 {
  font-size: var(--locked-font-h1) !important;
}

#site-root h2 {
  font-size: var(--locked-font-h2) !important;
}

#site-root h3 {
  font-size: var(--locked-font-h3) !important;
}

#site-root h4 {
  font-size: var(--locked-font-h4) !important;
}

#site-root h5 {
  font-size: var(--locked-font-h5) !important;
}

#site-root h6 {
  font-size: var(--locked-font-h6) !important;
}

/* Các ngoại lệ có chủ đích vẫn được quản lý tập trung tại đây. */
#site-root .promise-strip__content h2,
#site-root .promise-strip__content h3 {
  font-size: var(--locked-font-promise-title) !important;
}

#site-root .course-card h2,
#site-root .course-card h3,
#site-root .course-card__body h3,
#site-root .teacher-grid h2,
#site-root .teacher-grid h3,
#site-root .quality-grid h3,
#site-root .campus-grid h2,
#site-root .campus-grid h3,
#site-root .article-grid h2,
#site-root .article-grid h3 {
  font-size: var(--locked-font-card-title) !important;
}

#site-root .site-footer h2 {
  font-size: var(--locked-font-footer-title) !important;
}

#site-root .admin-panel h2,
#site-root .admin-form h2 {
  font-size: var(--locked-font-admin-title) !important;
}

#site-root .admin-heading h1 {
  font-size: var(--locked-font-admin-page-title) !important;
}

#site-root .topbar,
#site-root .topbar a,
#site-root .nav-submenu a,
#site-root .header__actions a,
#site-root .header__actions button,
#site-root .account-nav a,
#site-root .account-nav button,
#site-root .site-footer a {
  font-size: 18px !important;
}

/*
 * Typography của main nav là một module riêng.
 * Cả link và button dropdown phải có cùng chính xác một kiểu chữ;
 * quy tắc button chung phía trên không được làm dropdown lớn hơn link.
 */
#site-root .site-header .main-nav>a,
#site-root .site-header .nav-dropdown__main-button {
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: var(--locked-font-header-nav) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}