/* Visible language choices remain in the header at every viewport width. */
html{scroll-padding-top:var(--header-offset,105px)}
html.locale-switching{overflow-anchor:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;padding-block:14px}
header>.brand{grid-column:1;min-width:0}
header>nav{grid-column:2;justify-content:flex-end}
.mobile-menu-toggle{display:none}
.language-picker{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#edf3fa;border:1px solid #c4d3e4;border-radius:12px;min-width:0}
.language-picker p{display:flex;align-items:center;gap:8px;margin:0;color:#203e65;font-size:13px;font-weight:600;line-height:1.4}
.language-options{display:flex;gap:8px}
.language-options button{position:relative;min-height:44px;padding:9px 25px 9px 16px;border:1px solid #a9bfd5;border-radius:8px;background:#fff;color:#203e65;font-size:14px;font-weight:600;line-height:1.25}
.language-options button:hover{background:#e0eaf5}
.language-options button[aria-pressed="true"]{border-color:#203e65;background:#203e65;color:#fff}
.language-check{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:12px}
.language-options button[aria-pressed="false"] .language-check{display:none}
.language-options button:focus-visible{outline:3px solid #156eb1;outline-offset:3px}
.language-options button:disabled{opacity:.65;cursor:progress}
.locale-status:not(.sr-only){grid-column:1/-1;color:#9a261e;font-size:13px}
.locale-rank-note{margin:-12px 0 28px;max-width:900px}
.locale-credit-note{margin:20px 0 0}
html[lang="vi"] body,html[lang="id"] body{font-family:Arial,'Microsoft JhengHei',sans-serif}
html[lang="vi"] .hero h1,html[lang="id"] .hero h1{letter-spacing:-1.5px;line-height:1.15}
html[lang="vi"] .hero h1 em,html[lang="id"] .hero h1 em{font-size:.65em;line-height:1.2;display:inline-block;margin-top:8px}
html[lang="vi"] h2,html[lang="vi"] .hero h1 em,html[lang="vi"] .program-identity h3,html[lang="vi"] .recognition-panel h3{font-family:'Times New Roman',Georgia,serif;letter-spacing:-.3px}
html[lang="vi"] header nav,html[lang="id"] header nav{gap:0 14px;justify-content:center}
html[lang="vi"] .teacher .role,html[lang="id"] .teacher .role{min-height:68px;overflow-wrap:anywhere}
.teacher .administrative-role{overflow-wrap:anywhere}
.course-chip{text-wrap:pretty}
.course .meta{flex-wrap:wrap;gap:4px 10px}
.route-header h3,.section-head h2,.features h3,.teacher .role{overflow-wrap:break-word}
@media(max-width:900px){
  header{grid-template-columns:minmax(0,1fr);gap:10px}
  header>nav{grid-column:1;grid-row:3;width:100%;justify-content:center}
  .language-picker{grid-row:2}
}
@media(max-width:600px){
  header{grid-template-columns:minmax(0,1fr) auto;padding:10px 4%;gap:8px}
  .brand{min-width:0}
  .mobile-menu-toggle{display:block;grid-column:2;grid-row:1;min-height:44px;padding:8px 12px;border:1px solid #a9bfd5;border-radius:8px;background:#fff;color:#203e65;font-size:13px}
  .mobile-menu-toggle:focus-visible{outline:3px solid #156eb1;outline-offset:3px}
  header>nav{grid-column:1/-1;grid-row:3}
  header>nav[data-mobile-open="false"]{display:none}
  header>nav[data-mobile-open="true"]{display:flex;padding-top:4px}
  header nav,html[lang="vi"] header nav,html[lang="id"] header nav{justify-content:flex-start;gap:0 15px}
  .language-picker{display:block;padding:9px}
  .language-picker p{font-size:12px;margin-bottom:8px}
  .language-options{display:grid;grid-template-columns:.8fr 1fr 1.45fr;gap:6px}
  .language-options button{min-width:0;padding:9px 15px 9px 5px;font-size:13px}
  .language-check{right:4px;font-size:10px}
  .locale-rank-note{font-size:12px}
  html[lang="vi"] .teacher .role,html[lang="id"] .teacher .role{min-height:0}
  html[lang="vi"] .hero h1,html[lang="id"] .hero h1{font-size:42px}
  html[lang="vi"] .hero h1 em,html[lang="id"] .hero h1 em{font-size:.7em}
  .hero{height:auto;min-height:0;padding-top:34px}
}
@media(max-width:380px){
  .brand b{font-size:21px}
  .brand b span{font-size:7px;letter-spacing:.3px}
  html[lang="vi"] .hero h1,html[lang="id"] .hero h1{font-size:37px}
}