/*
 * Design tokens KiDao. Giá trị đo từ ảnh chụp production ở bề rộng 1920px.
 * Hệ đơn vị: desktop (≥1000px) 1rem = 1/192 bề rộng màn hình → 10px ở 1920px, mọi màn hình desktop
 * nhìn cùng tỷ lệ. Dưới 1000px: 1rem = 10px cố định + bố cục mobile.
 * Chữ nhỏ có ngưỡng tối thiểu (max(…rem, 13px)) để còn đọc được ở màn 1280–1366px.
 */

/* Font tự host (Google Fonts, giấy phép OFL). Work Sans là variable font 400–700. */
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/work-sans-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/work-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/work-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/playfair-display-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/playfair-display-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/playfair-display-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html { font-size: 10px; }
@media (min-width: 1000px) {
  html { font-size: calc(100vw / 192); }
}

:root {
  /* Màu (doc §1.1 + đo ảnh) */
  --c1: #fff;
  --c2: #f5f5f5;
  --c4: rgba(6, 79, 120, .69);
  --c5: #064f78;
  --c5-hover: #086aa2;
  --c6: #dbd0d0;
  --c7: #bfbab5;
  --c8: #333;
  --c9: #c4351a;
  --tile: #5386a2;          /* nền thẻ tin trang chủ */
  --sidebar-bg: #f6f4f4;    /* nền sidebar blog */
  --footer-top: #ccc4c2;
  --footer-bottom: #c1bbb7;
  --social-bg: #e9e5e4;
  --line: #ddd;

  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Cỡ chữ: mobile trước, desktop đè ở dưới */
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-lead: 15px;
  --fs-eyebrow: 14px;
  --fs-title: 28px;
  --fs-banner: 28px;
  --fs-card-title: 16px;
  --fs-menu: 14px;

  --container: calc(100% - 4.8rem);
  --header-h: 72px;
  --section-y: 64px;
  --radius: 1.2rem;
  --radius-pill: 2.5rem;
  /* Avada gốc: box_shadow vertical 20, blur 38 (thẻ khóa học) / 26 (thẻ GS. đồng hành), màu ~ rgba(0,0,0,.12) */
  --shadow-card: 0 2rem 3.8rem rgba(0, 0, 0, .12);
  --shadow-card-sm: 0 2rem 2.6rem rgba(0, 0, 0, .12);
  /* Chuyển động chậm, giảm tốc êm (hero FIND YOUR BALANCE, theo yêu cầu chủ site) */
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 1000px) {
  :root {
    --fs-body: max(1.6rem, 13px);
    --fs-small: max(1.4rem, 12px);
    --fs-lead: max(1.7rem, 13px);
    --fs-eyebrow: max(2rem, 12px);
    --fs-title: 4.8rem;
    --fs-banner: 4.4rem;
    --fs-card-title: max(1.8rem, 13px);
    --fs-menu: max(1.5rem, 12px);

    --container: 134rem;
    --header-h: 10.4rem;
    --section-y: 9rem;
  }
}