/* Public pages (landing, checkout, VietQR, student area, legal, 404). WebinarAZ 2026 look: cool grey ground,
   indigo ink from the AI Funel wordmark, signal-blue actions, teal for paid/live, Be Vietnam Pro.
   Variable names are kept from the earlier sheet so page-level styles follow. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --cream:#F4F6FB;--cream2:#F8F9FD;--paper:#fff;--ink:#12133F;--ink2:#3B4166;--ink3:#4A5072;--mute:#5B6183;--line:#E3E7F1;--line2:#EEF1F7;
  --gold:#2453EB;--gold-d:#1D46D1;--soft:#EAF0FF;--soft-line:#C9D6FF;--red:#B4233F;--ok:#0FB5A0;--ok-ink:#0B6F63;--ok-soft:#E3F7F3;--warn-soft:#FFF1E6;--warn-ink:#8A3B06;
  --dark:#12133F;--dark2:#1C1D55;--dline:#2C2E6E;--cr:#fff;--crm:#D4D6F5;
  --shadow:0 1px 2px rgba(18,19,63,.04);--shadow-lg:0 24px 60px -28px rgba(18,19,63,.3);
  --f-head:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;--f-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;--f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--ink2);font:400 15px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--gold-d);text-decoration:none}a:hover{color:var(--ink);text-decoration:underline}
h1,h2,h3{font-family:var(--f-head);font-weight:700;color:var(--ink);line-height:1.2;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.topbar{background:#fff;color:var(--ink);min-height:68px;padding:0 max(20px,calc((100vw - 1160px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line2);position:relative;z-index:2}
.topbar .small{color:var(--ink3)!important}
.logo{font:700 17px var(--f-head);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center}.logo b{color:var(--gold)}
.logo:hover{text-decoration:none;color:var(--ink)}
.logo img{display:block;height:28px;width:auto}
.eye{font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px}
.card.hero{border-color:var(--gold);box-shadow:0 0 0 .5px var(--gold)}
.card.gold{border-color:var(--ok)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;background:var(--gold);color:#fff;border:0;border-radius:14px;padding:0 24px;font:600 15px var(--f-head);text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--gold-d);color:#fff;text-decoration:none}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.block{width:100%;min-height:54px;font-size:16px;font-weight:700}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;background:#fff;color:var(--ink);border:1px solid #D5DBEA;border-radius:14px;padding:0 22px;font:600 15px var(--f-head);text-decoration:none;cursor:pointer}
.btn2:hover{background:var(--cream2);color:var(--ink);text-decoration:none}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 14px var(--f-body);color:var(--ink)}
.input,input.input,select.input,textarea.input{width:100%;padding:12px 14px;border:1px solid #D5DBEA;border-radius:12px;background:#fff;font:400 15px var(--f-body);color:var(--ink);outline:0;min-height:48px}
textarea.input{border-radius:12px}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #2453EB22}
input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px}
.msg{min-height:1.2em;font:500 13px var(--f-body);color:var(--red)}
.chip{display:inline-flex;align-items:center;font:600 12px var(--f-body);padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--gold-d)}
.chip.ok{background:var(--ok-soft);color:var(--ok-ink)}.chip.err{background:#FDECEF;color:var(--red)}
.small{font-size:13px;color:var(--ink3)}
.mono{font-family:var(--f-mono)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.public-foot{max-width:1200px;margin:32px auto 24px;padding:20px 24px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--ink3);font-size:13px}
.public-foot a{color:var(--ink2)}
.public-foot img{height:18px;width:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}