/* Vietnamese pages (/vi/) only: header, footer and page layouts.
   Header/footer markup comes from scripts/vi-site-chrome.mjs. English pages do not load this file. */
/* Header: same geometry, order and type as the English home header (.public-header in
   /src/styles/public-landing.css): brand · primary links · language pill, log in, get started. */
.mk-header{position:relative;z-index:100;font-family:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
.mk-header,.mk-header *{box-sizing:border-box}
.mk-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1160px,calc(100% - 48px));height:64px;margin-inline:auto;background:rgba(251,250,246,.9);backdrop-filter:blur(8px)}
.mk-brand{color:#091727;font-size:25px;font-weight:800;line-height:1.5;letter-spacing:-.045em;text-decoration:none}
.mk-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px)}
.mk-link{color:#122c48;font-size:14px;font-weight:600;line-height:1.5;text-decoration:none;white-space:nowrap}
.mk-link:hover,.mk-link:focus-visible,.mk-login:hover,.mk-login:focus-visible{color:#07518a}
.mk-link[aria-current="page"]{color:#063c69}
.mk-link.miu-public-link{color:#07518a}
.mk-actions{display:flex;align-items:center;gap:17px}
.mk-login{display:block;padding:11px 8px;color:#122c48;font-size:14px;font-weight:600;line-height:normal;text-decoration:none;white-space:nowrap}
.mk-cta{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 21px;border:1px solid #064f83;border-radius:3px;background:#064f83;color:#fff;font-size:13px;font-weight:600;line-height:1.1;text-decoration:none;white-space:nowrap}
.mk-cta:hover,.mk-cta:focus-visible{background:#063c69}
.mk-lang{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:30px;padding:0 9px;border:1px solid #d9d5ca;border-radius:999px;color:#0e4b86;font:600 12px "IBM Plex Mono",ui-monospace,monospace;text-decoration:none;white-space:nowrap}
.mk-lang:hover,.mk-lang:focus-visible{border-color:#0e4b86}
/* Signed-in state rendered by /public/public-session-nav.js: it swaps the primary nav for .nav-links
   (dropping .mk-nav) and inserts .header-right after it; the language pill stays, log in/get started go. */
.mk-header [data-public-session-nav][data-session-state="authenticated"]~.mk-actions .mk-login,
.mk-header [data-public-session-nav][data-session-state="authenticated"]~.mk-actions .mk-cta{display:none}
.mk-header .nav-links{display:flex;align-items:center;gap:2px}
.mk-header .nav-btn{position:relative;padding:9px 16px;border:1px solid transparent;border-radius:4px;color:#565b64;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.mk-header .nav-btn:hover,.mk-header .nav-btn.active{color:#191b1f}
.mk-header .nav-btn.active::after{content:"";position:absolute;right:16px;bottom:-1px;left:16px;height:2px;background:#b8302f}
.mk-header .header-right{display:flex;align-items:center;gap:16px}
.mk-header .dev-badge{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border:1px solid #d9d5ca;border-radius:4px;background:#fff;font:600 12px "IBM Plex Mono",monospace}
.mk-header .session-identity{max-width:180px;overflow:hidden;color:#191b1f;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:980px){
  .mk-header-inner:has(.nav-links){height:auto;min-height:64px;flex-wrap:wrap}
  .mk-header .nav-links{order:3;width:100%;overflow-x:auto}
}
@media (max-width:900px){.mk-nav{gap:15px}}
@media (max-width:860px){.mk-header .public-core-link{display:none}}
@media (max-width:620px){
  .mk-header-inner{width:calc(100% - 30px);height:60px;gap:10px}
  .mk-brand{font-size:21px}
  .mk-actions{gap:7px}
  .mk-login{padding-inline:5px}
  .mk-cta{min-height:34px;padding-inline:13px}
  .mk-header .dev-badge{max-width:48vw}
  .mk-header .session-identity{max-width:30vw}
}

/* Footer: same markup and layout as the English footer; all footer styling lives in /public/footer.css. */
.mk-footer{line-height:1.5}
.mk-en-only{margin-left:4px;color:#8a919a;font:600 9.5px "IBM Plex Mono",monospace;letter-spacing:.04em}
.mk-moit{display:inline-block;margin-top:16px;line-height:0}
.mk-moit img{width:150px;height:auto}

/* Policy pages */
.policy-shell{padding:48px 0 90px}
.policy-intro{max-width:820px;margin:0 0 28px}
.policy-intro h1{margin:12px 0 12px;text-wrap:balance;font-size:clamp(34px,5vw,54px);line-height:1.08;letter-spacing:-.035em}
.policy-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;align-items:start}
.policy-sidebar{position:sticky;top:20px}
.policy-sidebar nav{display:grid;gap:2px;padding:10px;border:1px solid var(--rule);background:#fff}
.policy-sidebar a{padding:8px 10px;color:var(--muted);font-size:14px;text-decoration:none}
.policy-sidebar a:hover{color:var(--blue-dark);text-decoration:underline}
.policy-sidebar a[aria-current="page"]{color:var(--blue-dark);background:#eef3f8;font-weight:600}
.policy-document{padding:clamp(22px,4vw,44px);border:1px solid var(--rule);background:#fff}
.policy-document h2{margin:30px 0 10px;font-size:22px;line-height:1.25}
.policy-document p,.policy-document li{color:var(--muted)}
.policy-document a{color:var(--blue)}
.policy-document .button{color:#fff}
.policy-document .button.secondary{color:var(--ink)}
.policy-section{margin-top:18px}
.meta{margin:0 0 22px;font-size:14px;color:var(--muted)}
.notice{padding:16px 18px;border:1px solid var(--rule);background:#faf9f6}
.danger-notice{border-color:#e5b6b2;background:#fff7f6}
.vi-market-note{margin:0 0 22px;padding:12px 16px;border-left:3px solid var(--blue);background:#eef3f8;color:#35424d;font-size:14px;line-height:1.55}
.vi-handoff{margin-top:26px}
.vi-handoff .button small{margin-left:6px;font-weight:400;opacity:.8}
.vi-purchase-terms{color:var(--muted);font-size:14px}
.plan .button[disabled]{opacity:.55;cursor:not-allowed}
@media (max-width:860px){
  .policy-layout{grid-template-columns:1fr;gap:18px}
  .policy-sidebar{position:static}
  .policy-sidebar nav{display:flex;flex-wrap:wrap}
}

/* Hub: Vietnamese universities that accept the SAT */
.vn-hub{padding:48px 0 90px}
.vn-hub .policy-intro{max-width:980px}
.vn-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:6px 0 10px;padding:18px;border:1px solid var(--rule);background:#fff}
.vn-filters label{display:grid;gap:6px;color:var(--ink);font-size:13px;font-weight:600}
.vn-filters input,.vn-filters select{width:100%;min-height:42px;padding:0 12px;border:1px solid var(--rule);border-radius:4px;background:#fff;color:var(--ink);font:400 15px var(--sans)}
.vn-count{margin:14px 0;color:var(--muted);font:600 13px var(--mono)}
.vn-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vn-school{display:flex;flex-direction:column;padding:22px;border:1px solid var(--rule);background:#fff}
.vn-school[hidden]{display:none}
.vn-school header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start}
.vn-school h3{margin:0;font-size:19px;line-height:1.3}
.vn-short{color:var(--blue);font:600 12px var(--mono);letter-spacing:.04em}
.vn-meta{grid-column:1;margin:0;color:var(--muted);font-size:13px}
.vn-status{grid-column:2;grid-row:1/span 2;align-self:start;padding:4px 9px;border-radius:999px;font:600 11px var(--mono);white-space:nowrap}
.vn-status-da-xac-minh{background:#e5f2ea;color:#235c3f}
.vn-status-mot-phan{background:#eef3f8;color:#1d4e89}
.vn-status-nguon-thu-cap{background:#fbf0dc;color:#7a4b06}
.vn-status-khong-tim-thay{background:#f1efea;color:#59636e}
.vn-methods{display:grid;gap:12px;margin:16px 0;padding:0;list-style:none}
.vn-kind{display:inline-block;padding:2px 8px;border:1px solid #c9d6e4;border-radius:3px;color:var(--blue-dark);font:600 11.5px var(--mono)}
.vn-facts{color:var(--ink);font-size:14px}
.vn-scope,.vn-detail{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}
.vn-source{margin:auto 0 0;padding-top:12px;border-top:1px solid #ece9e1;color:var(--muted);font-size:12.5px}
.vn-source a{color:var(--blue)}
.vn-empty{padding:24px;border:1px dashed var(--rule);color:var(--muted);text-align:center}
.vn-others{margin:28px 0;padding:16px 20px;border:1px solid var(--rule);background:#fff}
.vn-others summary{cursor:pointer;font-weight:600}
.vn-others ul{columns:2;margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.vn-others a{color:var(--blue)}
.vn-cta{margin-top:28px;padding:32px;border:1px solid var(--rule);background:#fff}
.vn-cta h2{margin:0 0 8px;font-size:clamp(24px,3vw,32px)}
.vn-cta .button{color:#fff}
@media (max-width:900px){.vn-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.vn-list{grid-template-columns:1fr}}
@media (max-width:520px){.vn-filters{grid-template-columns:1fr}.vn-others ul{columns:1}.vn-school{padding:18px}}

/* Pricing hero: text only, so use the full width and avoid one-word last lines */
.hero:has(> :only-child){grid-template-columns:1fr}
.hero h1{max-width:900px;text-wrap:balance}
.hero p,.lede,.policy-intro p{text-wrap:pretty}
.hero p{max-width:720px;color:var(--muted);font-size:18px}
/* Account deletion form (same IDs as /account-deletion/) */
.hidden{display:none!important}
.vi-delete{margin-top:28px}
.vi-delete .form-grid{display:grid;gap:14px;margin:18px 0 20px;max-width:440px}
.vi-delete label{display:grid;gap:6px;font-weight:600;color:var(--ink);margin:12px 0}
.vi-delete input{width:100%;padding:12px 14px;border:1px solid var(--rule,#d9d6cf);border-radius:10px;font:inherit;background:#fff}
.vi-delete button{min-height:46px;padding:0 18px;border:0;border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.vi-delete button:disabled{opacity:.55;cursor:not-allowed}
.vi-delete .primary{background:var(--blue,#1f5fbf);color:#fff}
.vi-delete .secondary{background:#ece9e2;color:var(--ink)}
.vi-delete .danger{background:#b8302f;color:#fff}
.vi-delete .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.vi-delete .notice{margin:14px 0}
.policy-document .status{min-height:24px;font-weight:600}
.policy-document .status.error{color:#b8302f}
.policy-document .status.success{color:#176b3a}

/* Home page (/vi/): same tokens and rhythm as the English home page, which does not load
   /public/public.css. Undo public.css's narrow <main> and 1.6 body line-height, and supply the
   tokens /src/styles/public-landing.css expects from the English app stylesheet. */
.public-landing-shell{--font-sans:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:"IBM Plex Mono",Consolas,"SF Mono",monospace;--text-dim:#83868c;--primary-hover:#123863;--bg-main:#f6f5f0;line-height:1.5}
.public-landing-shell main{width:auto;margin:0}
/* Zero-specificity resets that mirror the English page's base styles; landing rules still win. */
:where(.public-landing-shell){font-family:var(--font-sans)}
:where(.public-landing-shell main) :where(h1,h2,h3,h4,p,ul,ol){margin:0;padding:0}
:where(.public-landing-shell main) :where(h1,h2,h3,h4){color:#191b1f;font-weight:700;letter-spacing:-.01em}
/* One-line note under the pricing cards (VI only). */
.public-pricing-section .vi-home-note{margin:0;color:#5f666e;font-size:12px;line-height:1.5}
.public-pricing-section .vi-home-note a{color:var(--landing-blue,#07518a)}
@media (min-width:901px){.public-pricing-section .vi-home-note{grid-column:2;margin-top:12px}}
@media (max-width:900px){.public-pricing-section .vi-home-note{margin-top:14px}}
.contact-intro .vi-market-note{margin:26px 0 0}
.contact-direct span{color:var(--ink);font-weight:600}