/* Be Vietnam Pro by the Be Vietnam Pro Project Authors, SIL OFL 1.1 (fonts/OFL-BeVietnamPro.txt).
   Full font, including Vietnamese glyphs, hosted locally to avoid per-device fallback. */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/study-hub/fonts/be-vietnam-pro-bold.woff") format("woff");
}
/* IELTS lessons carry both languages (data-lang); the switch shows one. English without scripts. */
body:not([data-study-language="vi"]) [data-lang="vi"],
body[data-study-language="vi"] [data-lang="en"] { display: none; }
/* Shared, keyboard-operable English / Vietnamese switch on the Study and IELTS indexes. */
.study-language-switch[hidden] { display: none; }
.study-language-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--muted-dark);
  border-radius: 24px;
  background: var(--ink);
  color: var(--paper);
  font: 600 13px/1.4 "Segoe UI", Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.study-language-switch:focus-visible { outline: 3px solid var(--hi); outline-offset: 4px; }
.study-language-switch:hover { border-color: var(--hi); }
.language-switch-track { width: 30px; height: 18px; padding: 3px; border-radius: 12px; background: #77786b; }
.language-switch-track::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform .15s; }
.study-language-switch[aria-checked="true"] .language-switch-track { background: var(--hi); }
.study-language-switch[aria-checked="true"] .language-switch-track::before { transform: translateX(12px); background: var(--ink); }
.study-language-switch[aria-checked="true"] [lang="vi"],
.study-language-switch[aria-checked="false"] [lang="en"] { color: var(--hi); }
body[data-study-language] .header-inner { gap: 20px; height: auto; min-height: 64px; padding-block: 10px; }
body[data-study-language] .desktop-nav { gap: 18px; }
body[data-study-language] .header-account { gap: 12px; }
/* System faces remain the body-text fallback for Vietnamese. */
html[lang="vi"] body[data-study-language] { --body: "Segoe UI", Arial, sans-serif; --mono: "Segoe UI", Arial, sans-serif; }
html[lang="vi"] body[data-study-language] main :is(h1, h2, h3, h4, .category-title, .module-title) {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}
html[lang="vi"] body[data-study-language] .slate-line { line-height: 1.5; }
@media (max-width: 1200px) {
  body[data-study-language] .desktop-nav { display: none; }
  body[data-study-language] .header-account { margin-left: auto; }
}
@media (max-width: 640px) {
  body[data-study-language] .header-inner { flex-wrap: wrap; gap: 8px 14px; }
  body[data-study-language] .header-inner > .wordmark { order: 0; }
  body[data-study-language] .study-language-switch { order: 1; margin-left: auto; }
  body[data-study-language] .header-account { order: 2; width: 100%; justify-content: flex-end; }
  body[data-study-language] .header-account .login-link { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .language-switch-track::before { transition: none; }
}