/* viz-base.css — Chrome chung cho TẤT CẢ visualization.html VÀ index.html trong repo.
 *
 * Cách dùng (cả viz và index đều load cùng file này):
 *   <link rel="stylesheet" href="../../tools/viz-base.css">   (cấp 2: <Lĩnh vực>/lesson-XX/visualization.html)
 *   <link rel="stylesheet" href="../tools/viz-base.css">      (cấp 1: <Lĩnh vực>/index.html)
 *   <link rel="stylesheet" href="../../tools/viz-base.css">   (cấp 2: <Lĩnh vực>/<Tier>/index.html)
 *
 * Mỗi trang chỉ cần override các CSS variable phù hợp (--bg, --accent...) trong
 * <style> nội bộ:
 *
 *   <style>
 *     :root {
 *       --bg: #fafaf7;            // warm cream cho index pages
 *       --accent: #6b46c1;        // tone riêng của lĩnh vực
 *       --accent-soft: #f3eafd;
 *       --accent-hover: #553c9a;
 *     }
 *   </style>
 *
 * Khi cần card variant (vd basic / mid / adv trong DataStructures), thêm modifier
 * class override --card-accent:
 *
 *   <style>
 *     .card.basic { --card-accent: #38a169; --card-accent-hover: #2f855a; }
 *   </style>
 *
 * File này có 2 phần:
 *   1) Base tokens + body + viz-nav sticky (dùng cho visualization.html)
 *   2) Index chrome — .container, header, .intro, .card-grid, .card, footer
 *      (dùng cho index.html, không xuất hiện trong viz, không ảnh hưởng nhau)
 *
 * Khi đổi token/rule ở đây → ảnh hưởng toàn repo, kiểm tra kỹ.
 */

/* ===========================================================================
 * 1. ROOT TOKENS + BODY
 * =========================================================================== */
:root {
  /* Surfaces & ink */
  --bg: #f5f6f8;            /* mặc định cool grey (viz); index override sang #fafaf7 */
  --panel: #ffffff;
  --ink: #1f2328;
  --ink-soft: #4a5568;
  --muted: #718096;
  --line: #e2e8f0;
  --line-strong: #cbd5e0;

  /* Accent (per-page override) */
  --accent: #4299e1;
  --accent-soft: #ebf8ff;
  --accent-hover: #3182ce;

  /* Viz-only — sticky nav strip (chỉ dùng trong visualization.html) */
  --viz-nav-bg: #ffffff;
  --viz-nav-ink: #475569;
  --viz-nav-link: #3b82f6;
  --viz-nav-link-hover: #1d4ed8;
  --viz-nav-current-bg: #1e293b;
  --viz-nav-current-ink: #ffffff;
  --viz-nav-border: #e2e8f0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  /* Font UI chốt: Manrope Variable (bundle local ở tools/fonts/ + @font-face dưới).
     Đổi font toàn viz bằng cách thay tên đầu tiên ở đây. */
  font-family: 'Manrope Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}

/* ===========================================================================
 * 2. STICKY NAV (visualization.html)
 * ===========================================================================
 * Markup chuẩn:
 *   <nav class="viz-nav">
 *     <a href="../index.html">🏠 Trang chính</a>
 *     <span class="sep">·</span>
 *     <a href="../lesson-XX-prev/visualization.html">← L(N-1): Tiêu đề</a>
 *     <span class="sep">·</span>
 *     <span class="current">L(N): Tiêu đề hiện tại</span>
 *     <span class="sep">·</span>
 *     <a href="../lesson-XX-next/visualization.html">L(N+1): Tiêu đề →</a>
 *   </nav>
 */
nav.viz-nav {
  position: fixed; top: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1100px;
  z-index: 100;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5fe 25%, #ffffff 50%, #fef9f3 75%, #ffffff 100%);
  background-size: 300% 300%;
  animation: viz-nav-shift 22s ease-in-out infinite;
  color: var(--viz-nav-ink);
  padding: 10px 20px;
  font-size: 14px;
  border: 1px solid var(--viz-nav-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  /* Đồng bộ với body padding-right transition khi sidebar README đóng/mở.
   * Chỉ animate width + transform (cả 2 đều animatable mượt). KHÔNG đổi left/right/auto
   * vì 'auto' là keyword, không nội suy được → gây glitch trước khi trượt. */
  transition: transform 0.28s cubic-bezier(.4,0,.2,1),
              width 0.28s cubic-bezier(.4,0,.2,1);
}
@keyframes viz-nav-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Khi sidebar README mở (html.rm-sidebar-open + body padding-right) → nav phải thu hẹp
 * vào vùng visible bên trái, không đè lên sidebar panel. */
html.rm-sidebar-open nav.viz-nav {
  /* Width co lại bằng vùng visible (viewport - sidebar) — animate được từ 100% → calc(100% - w). */
  width: calc(100% - var(--rm-sidebar-w, 400px));
  /* Center của nav từ vw/2 dịch sang (vw - sidebar)/2 → thêm translateX(-sidebar/2). */
  transform: translateX(calc(-50% - var(--rm-sidebar-w, 400px) / 2));
}
nav.viz-nav a {
  color: var(--viz-nav-link);
  text-decoration: none;
  font-weight: 500;
  padding: 3px 6px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
nav.viz-nav a:hover { color: var(--viz-nav-link-hover); background: rgba(59,130,246,0.08); text-decoration: none; }
nav.viz-nav .current {
  background: var(--viz-nav-current-bg);
  color: var(--viz-nav-current-ink);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
nav.viz-nav .sep { opacity: 0.35; font-weight: 400; }

/* Content wrapper trong visualization.html.
 * Markup: <body><nav class="viz-nav">...</nav><main>...content...</main></body>
 * Mỗi viz có thể override max-width nếu cần (vd: main { max-width: 1240px; })
 */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 24px;
}

/* ===========================================================================
 * 3. INDEX PAGE CHROME (index.html)
 * ===========================================================================
 * Markup tổng thể:
 *   <body>
 *     <div class="container">
 *       <header>
 *         <div class="back">← <a href="...">🏠 Trang chính</a></div>
 *         <h1>...</h1>
 *         <div class="subtitle">...</div>
 *       </header>
 *       <section class="intro"> ... </section>
 *       <h2 class="branch-title">Tên section <small>chú thích</small></h2>
 *       <div class="card-grid">
 *         <div class="card">
 *           <div class="num">Tier 1</div>
 *           <div class="title">...</div>
 *           <div class="desc">...</div>
 *           <div class="links">
 *             <a class="link-primary" href="...">▶ Trang chính</a>
 *             <a class="link-readme" href="...">📖 README</a>
 *           </div>
 *         </div>
 *       </div>
 *       <footer> ... </footer>
 *     </div>
 *   </body>
 */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}
/* Viz dùng <div class="container"> (English/Vectors) — chừa chỗ cho fixed nav */
body:has(nav.viz-nav) .container { padding-top: 68px; }

/* Header */
header { margin-bottom: 28px; }
header h1 { margin: 0 0 8px; font-size: 32px; font-weight: 800; color: var(--ink); }
header .subtitle { color: var(--muted); font-size: 16px; }
header .back { font-size: 13px; margin-bottom: 12px; }
header .back a { color: var(--accent); text-decoration: none; font-weight: 600; }
header .back a:hover { text-decoration: underline; }

/* Intro card */
.intro {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.intro h2 { margin: 0 0 12px; font-size: 18px; }
.intro p, .intro li { font-size: 14px; }
.intro ul { margin: 8px 0 0; padding-left: 20px; }
.intro li { margin-bottom: 4px; }

/* Branch / section title (cho sub-page có nhiều nhánh) */
.branch-title {
  font-size: 20px;
  font-weight: 700;
  margin: 32px 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--accent);
}
.branch-title:first-of-type { margin-top: 0; }
.branch-title small {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
  margin-left: 8px;
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  border-left: 4px solid var(--card-accent, var(--accent));
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
}
.card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.card.pending {
  opacity: 0.55;
  border-left-color: var(--line);
}
.card.pending:hover {
  box-shadow: none;
  transform: none;
}

.card .num {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.card .title { font-size: 17px; font-weight: 700; margin: 4px 0 8px; color: var(--ink); }
.title > a, .tier-title > a { color: inherit; text-decoration: none; }
.title > a:hover, .tier-title > a:hover { color: var(--card-accent, var(--accent, currentColor)); }
.card .desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  flex: 1;
}
.card .status {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}

.card .links { display: flex; gap: 8px; flex-wrap: wrap; }
.card .links a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.12s;
}
.card .links .link-primary {
  background: var(--card-accent, var(--accent));
  color: #fff;
}
.card .links .link-primary:hover {
  background: var(--card-accent-hover, var(--accent-hover));
}
.card .links .link-readme {
  background: #f5f4f0;
  color: var(--muted);
}
.card .links .link-readme:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Footer */
footer {
  margin-top: 48px;
  font-size: 13px;
  color: var(--muted);
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ===========================================================================
 * 4. RESPONSIVE — MOBILE
 * ===========================================================================
 * Repo gốc thiết kế cho desktop (max-width 1100px, font 13–14px). Trên mobile,
 * những giá trị này khiến chữ tí xíu, padding chật và nav strip wrap xấu. Hai
 * breakpoint dưới đây tăng font, nới padding, gập grid về 1 cột.
 * Mọi viz/index load file này sẽ kế thừa — không cần copy media query vào
 * <style> nội bộ của từng trang.
 */
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 1.6; }

  /* SVG / Canvas — ép co theo container trên mobile.
   * Hầu hết viz trong repo có <svg width="600"...> hoặc <canvas width="760">
   * cứng → tràn viewport 390px. Rule này dùng !important vì attribute trên
   * element có specificity = inline-style; CSS thường thua. Nếu SVG có viewBox
   * thì height: auto giữ tỷ lệ; nếu không có viewBox, ít nhất cũng không tràn. */
  svg, canvas { max-width: 100% !important; height: auto !important; }

  /* Input/textarea/select — nhiều viz set width pixel cứng (vd width:280px) */
  input[type="text"], input[type="number"], input[type="search"],
  textarea, select { max-width: 100%; box-sizing: border-box; }

  /* Table tràn → cho phép scroll ngang trong wrapper, không phá layout cha */
  table { max-width: 100%; }

  /* Nav strip — text dễ đọc hơn, link wrap không vỡ */
  nav.viz-nav {
    padding: 8px 12px;
    font-size: 13px;
    gap: 6px 8px;
    border-radius: 0 0 8px 8px;
  }
  nav.viz-nav a { padding: 4px 8px; }
  nav.viz-nav .current { padding: 4px 10px; font-size: 13px; }

  /* Main content trong viz */
  main { padding: 60px 16px 20px; }

  /* Container index */
  .container { padding: 20px 16px 60px; }
  body:has(nav.viz-nav) .container { padding-top: 64px; }

  /* Header */
  header { margin-bottom: 20px; }
  header h1 { font-size: 26px; }
  header .subtitle { font-size: 15px; }
  header .back { font-size: 14px; }

  /* Intro */
  .intro { padding: 16px 18px; margin-bottom: 20px; }
  .intro h2 { font-size: 17px; }
  .intro p, .intro li { font-size: 15px; }

  /* Branch title */
  .branch-title { font-size: 18px; margin: 24px 0 12px; }
  .branch-title small { display: block; margin-left: 0; margin-top: 2px; font-size: 13px; }

  /* Card grid — 1 cột trên mobile */
  .card-grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 14px 16px; }
  .card .num { font-size: 12px; }
  .card .title { font-size: 17px; }
  .card .desc { font-size: 14px; }
  .card .status { font-size: 13px; }
  .card .links a { font-size: 13px; padding: 7px 12px; }
  .card .links { gap: 6px; }

  footer { font-size: 14px; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }

  /* Nav strip cực hẹp — ẩn separator, gập tight */
  nav.viz-nav {
    padding: 6px 10px;
    font-size: 12.5px;
    gap: 4px 6px;
  }
  nav.viz-nav a { padding: 3px 6px; }
  nav.viz-nav .current { padding: 3px 8px; font-size: 12.5px; }
  nav.viz-nav .sep { display: none; }

  main { padding: 56px 12px 16px; }
  .container { padding: 16px 12px 48px; }

  header h1 { font-size: 22px; }
  .card .title { font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Font UI (local, OFL) — bundle offline để chữ (đặc biệt tiếng Việt) đồng
   nhất mọi máy, không phụ thuộc font hệ thống. Variable woff2, lazy-load
   theo unicode-range. KaTeX math vẫn dùng font KaTeX_* riêng (không đụng).
   3 font sẵn để đổi: 'Roboto Flex Variable' (đang dùng), 'Inter Variable',
   'Manrope Variable'. Đổi font hoạt động bằng cách sửa --ui-font ở dưới.
   Auto-generated từ @fontsource-variable — KHÔNG sửa woff2 tay.
   ───────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(fonts/roboto-flex-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: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(fonts/roboto-flex-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: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(fonts/roboto-flex-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: 'Roboto Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(fonts/roboto-flex-greek.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-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: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-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: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-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: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/manrope-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: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/manrope-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: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/manrope-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: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/manrope-greek.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* Thêm font UI (đợt 2): Be Vietnam Pro (thiết kế cho tiếng Việt), Plus Jakarta
   Sans, Lexend — OFL, để bạn đổi thử. latin/latin-ext/vietnamese (không greek). */
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-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: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-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: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/plus-jakarta-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: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/lexend-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: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/lexend-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: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/lexend-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: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/be-vietnam-pro-latin-400.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: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/be-vietnam-pro-latin-ext-400.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: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/be-vietnam-pro-vietnamese-400.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: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/be-vietnam-pro-latin-700.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: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/be-vietnam-pro-latin-ext-700.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: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/be-vietnam-pro-vietnamese-700.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;
}