/* ===========================================================================
   Campaign landing page — UI v2, /ielts-cho-nguoi-di-lam/ (Young Professionals)
   ---------------------------------------------------------------------------
   Self-contained: loaded INSTEAD of the theme's styles.css AND instead of
   css/lp/base.css (the v1 landing stylesheet). A page renders exactly one
   design, never both.

   Two reasons it cannot be layered on the theme, both from CLAUDE.md:
   styles.css sets `html { font-size: 10px }` while this design is authored
   at the 16px browser default and uses rem throughout, and rem is
   root-relative so no wrapper can undo the 62.5% shrink.

   Kept separate from parents.css rather than split into a shared base:
   the two mockups deliberately use different layout families and differ in
   type scale, so a shared base would have to pick one and silently restyle
   the other. The duplicated token block is the price of keeping each design
   exactly as it was signed off.
   ======================================================================== */

/* ---------- tokens ----------------------------------------------------
   Neutrals, --accent and --surface-* track the site scale in
   static/css/styles.css, the one /styleguideline/ renders: --ink is
   --color-heading, --muted is --color-body, --accent is --color-primary,
   --line is --color-border, --surface-2 is --color-lighter.
   --paper, --body, --accent-soft and --accent-deep have no counterpart
   there: they are the page ground and two shades of the same primary,
   audited from rubricsielts.com and kept as signed off. Everything else
   must come from the scale — no new hex values in this file. */
:root{
  --paper:#FDFCF9;
  --surface:#FFFFFF;
  --surface-2:#F2F5F9;
  --ink:#192335;
  --body:#4A5568;
  --muted:#6B7385;
  --line:#E6E3F1;
  --accent:#2F57EF;
  --accent-ink:#FFFFFF;
  --accent-soft:#EDF1FE;
  --accent-deep:#1E3CC4;
  --shadow:0 18px 44px -24px rgba(25,35,53,.34);
  --shadow-sm:0 6px 18px -12px rgba(25,35,53,.30);
  /* shape system: buttons + pills = full round, cards = 16px, inputs = 10px */
  --r-card:16px;
  --r-input:10px;
  --r-pill:999px;
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#11151F;
    --surface:#171D2A;
    --surface-2:#1C2434;
    --ink:#EEF1F7;
    --body:#B3BBCB;
    --muted:#8B94A8;
    --line:#2A3345;
    --accent:#6E8BFF;
    --accent-ink:#0D1119;
    --accent-soft:#1C2540;
    --accent-deep:#8FA5FF;
    --shadow:0 18px 44px -24px rgba(0,0,0,.7);
    --shadow-sm:0 6px 18px -12px rgba(0,0,0,.6);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:"Be Vietnam Pro",Inter,system-ui,sans-serif;color:var(--ink);margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.14;letter-spacing:-.025em;font-weight:800}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.02em;font-weight:700}
h3{font-size:clamp(1.1rem,1.7vw,1.32rem);line-height:1.3;font-weight:700}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:clamp(56px,7vw,92px) 0}
.lede{font-size:clamp(1rem,1.3vw,1.09rem);max-width:62ch;color:var(--body)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;font-family:Inter,sans-serif}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;border-radius:var(--r-pill);font-weight:600;font-size:.97rem;
  padding:.85rem 1.5rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.16,1,.3,1),background .18s,border-color .18s,box-shadow .18s;
  font-family:Inter,sans-serif;
}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.985)}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-input);
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:1.4rem;height:70px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand img{height:32px;width:auto}/* the file is 1448x240 (6.03:1); sized by height, width follows. */
.brand b{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;color:var(--ink);font-size:1.02rem;letter-spacing:-.02em}
.nav-links{display:flex;gap:1.4rem;margin-inline:auto;align-items:center}/* auto on both sides centres the links between the brand and the right-hand group, instead of margin-left alone shoving them onto it. */
.nav-links a{text-decoration:none;color:var(--body);font-size:.93rem;font-weight:500;white-space:nowrap;transition:color .18s}
.nav-links a:hover{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:.7rem;flex:none}
.langswitch{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:2px;background:var(--surface)}
.langswitch button{
  border:0;background:transparent;color:var(--muted);font:600 .8rem/1 Inter,sans-serif;
  padding:.45rem .7rem;border-radius:var(--r-pill);cursor:pointer;transition:background .18s,color .18s;
}
.langswitch button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.menu-btn{display:none;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--r-pill);width:42px;height:42px;font-size:1.3rem;cursor:pointer;align-items:center;justify-content:center}
/* The desktop nav row needs ~1165px: brand + the seven links + the
   language switch and CTA. Below 1200 it used to overflow the page
   sideways rather than collapse, so the hamburger takes over here. */
@media (max-width:1199px){
  .nav-links{
    position:fixed;inset:70px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 20px 1.1rem;display:none;
  }
  .nav-links a{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links.open{display:flex}
  .menu-btn{display:inline-flex}
  /* The links are position:fixed here, so nothing is left in the row
     to push this group over; without it the switch and the hamburger
     sit against the logo with the whole right half empty. */
  .nav-right{margin-left:auto}
  .nav-right .btn-primary{display:none}
}

/* ---------- hero: asymmetric split ---------- */
.hero{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero-grid>*{min-width:0}
.hero h1{margin:.85rem 0 0;font-size:clamp(1.95rem,3.5vw,2.85rem)}
.hero .lede{margin-top:1.1rem;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.hero-media{position:relative}
.hero-media img{width:100%;height:clamp(320px,42vw,520px);object-fit:cover;border-radius:var(--r-card);box-shadow:var(--shadow)}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-media img{height:300px}
}

/* ---------- proof strip ---------- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.proof-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.proof-cell{background:var(--surface);padding:clamp(22px,3vw,34px) 20px}
.proof-cell .num{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:clamp(1.6rem,2.7vw,2.2rem);color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.proof-cell .lbl{font-size:.88rem;color:var(--muted);margin-top:.35rem;line-height:1.45}
@media (max-width:760px){.proof-inner{grid-template-columns:1fr 1fr}}

/* ---------- bento (cost of staying) ---------- */
.band{background:var(--surface-2)}
.bento{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin-top:2.4rem}
.tile{border-radius:var(--r-card);overflow:hidden;position:relative;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column}
.tile-lg{grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.tile-photo{min-height:clamp(280px,32vw,420px);border:0}
.tile-photo .scrim{position:relative;margin-top:auto;padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(to top,rgba(11,16,26,.93),rgba(11,16,26,.72) 55%,rgba(11,16,26,0));color:#fff}
.tile-photo .scrim h3{color:#fff}
.tile-photo .scrim p{color:rgba(255,255,255,.88);margin-top:.5rem;font-size:.95rem}
.tile-text{padding:clamp(20px,2.4vw,28px)}
.tile-text .fig{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);color:var(--accent);letter-spacing:-.02em}
.tile-text h3{margin:.4rem 0 .5rem}
.tile-text p{font-size:.95rem}
@media (max-width:860px){.bento{grid-template-columns:1fr}.tile-lg{grid-row:auto}}

/* ---------- steps (scroll-snap rail) ---------- */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 18px;margin:2.4rem -20px 0;
  scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}
.step{scroll-snap-align:start;flex:0 0 clamp(250px,30vw,320px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(20px,2.3vw,26px)}
.step i{font-size:1.6rem;color:var(--accent)}
.step h3{margin:.8rem 0 .45rem}
.step p{font-size:.94rem}

/* ---------- timeline ---------- */
.tl{margin-top:2.4rem;display:grid;gap:0}
.tl-row{display:grid;grid-template-columns:132px 1fr;gap:clamp(16px,3vw,40px);padding:clamp(20px,2.6vw,30px) 0;border-top:1px solid var(--line)}
.tl-row:last-child{border-bottom:1px solid var(--line)}
.tl-when{font-family:"Be Vietnam Pro",sans-serif;font-weight:700;color:var(--accent);font-size:.95rem;letter-spacing:.01em}
.tl-row h3{margin-bottom:.4rem}
.tl-row p{font-size:.96rem;max-width:64ch}
@media (max-width:640px){.tl-row{grid-template-columns:1fr;gap:.4rem}}

/* ---------- results ---------- */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;margin-top:2.4rem}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.rcard>img{width:100%;height:190px;object-fit:cover}
.rcard-body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:.8rem;flex:1}
.jump{display:inline-flex;align-items:center;gap:.5rem;font-family:"Be Vietnam Pro",sans-serif;font-weight:800;
  font-size:1.25rem;color:var(--ink);letter-spacing:-.01em}
.jump span{color:var(--accent)}
.rcard blockquote{margin:0;font-size:.95rem;color:var(--body)}
.who{margin-top:auto;font-size:.85rem;color:var(--muted);line-height:1.5}
.who b{color:var(--ink);font-weight:600;display:block}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,40px);margin-top:2.4rem;align-items:start}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.incl-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.incl-item i{color:var(--accent);font-size:1.35rem}
.incl-item h3{font-size:1rem;margin:.6rem 0 .35rem}
.incl-item p{font-size:.9rem}
.panel{background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--r-card);padding:clamp(24px,3vw,32px);box-shadow:var(--shadow);position:sticky;top:92px}
.was{font-size:.95rem;color:var(--muted);text-decoration:line-through}
.now{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);color:var(--ink);letter-spacing:-.03em;line-height:1.05;margin:.2rem 0 .1rem}
.per{font-size:.9rem;color:var(--muted)}
.panel ul{list-style:none;padding:0;margin:1.3rem 0;display:grid;gap:.6rem}
.panel li{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem}
.panel li i{color:var(--accent);margin-top:.3rem;flex:none}/* half-leading, as .checks li i above: (.93rem x 1.65 - .93rem) / 2. */
.pledge{border-top:1px solid var(--line);margin-top:1.3rem;padding-top:1.1rem;font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.price-grid{grid-template-columns:1fr}.panel{position:static}.incl{grid-template-columns:1fr}}

/* ---------- split (mentor) ---------- */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:center}
.split img{width:100%;height:clamp(300px,36vw,440px);object-fit:cover;border-radius:var(--r-card);box-shadow:var(--shadow)}
.checks{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.85rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem}
.checks li i{color:var(--accent);font-size:1.15rem;margin-top:.225rem;flex:none}/* half-leading: (.97rem x 1.65 - 1.15rem) / 2, so the icon centres on the first line instead of riding high. */
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{margin-top:2.2rem;max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.2rem 2.4rem 1.2rem 0;position:relative;
  font-family:"Be Vietnam Pro",sans-serif;font-weight:600;color:var(--ink);font-size:1.03rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:1.05rem;font-size:1.5rem;color:var(--accent);
  font-weight:400;transition:transform .2s}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 1.3rem;font-size:.97rem;max-width:70ch}

/* ---------- final cta ---------- */
.cta{background:var(--secondary);color:#fff;border-radius:var(--r-card);padding:clamp(34px,5vw,64px);text-align:left}
.cta h2{color:#fff;max-width:20ch}
.cta p{color:rgba(255,255,255,.8);margin-top:.9rem;max-width:52ch}
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.cta .btn-ghost:hover{border-color:#fff;color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.cta-grid{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(28px,4vw,56px);align-items:start}
.cta-image{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;margin:2rem 0 0;max-width:520px;padding:clamp(14px,2vw,18px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-card)}
.cta-image img{display:block;flex:0 0 auto;width:clamp(140px,18vw,190px);height:auto;border-radius:10px;box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
.cta-image figcaption{min-width:0}
.cta-image-title{display:block;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;line-height:1.2;color:#fff}
.cta-image-note{display:block;margin-top:.5rem;font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.78)}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr}}
@media (prefers-color-scheme: dark){.cta{background:var(--surface-2);border:1px solid var(--line)}}

/* ---------- form ---------- */
.form{display:grid;gap:.9rem;margin-top:1.6rem;max-width:420px}
.field{display:grid;gap:.4rem}
.field label{font-size:.85rem;font-weight:600;color:var(--ink)}
.field input,.field select{
  width:100%;padding:.78rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-input);
  background:var(--surface);color:var(--ink);font:400 .97rem Inter,sans-serif;
}
.field input::placeholder{color:var(--muted)}
.field input:focus,.field select:focus{border-color:var(--accent)}
.help{font-size:.8rem;color:var(--muted)}
.err{font-size:.8rem;color:var(--accent);font-weight:600;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:var(--accent)}/* The whole-form error is not inside a .field, so the .invalid rule above can never reveal it; it collapses on its own while empty. */.err.form-error{display:block;margin-bottom:.4rem}/* The captcha's own slot has no input to outline. */.field#f-captcha.invalid .err{display:block}
.form-note{font-size:.84rem;color:var(--muted);margin-top:.2rem}
.formwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,34px)}
.sent{display:none;align-items:center;gap:.6rem;color:var(--accent);font-weight:600;font-size:.95rem}
.formwrap.done .form,.formwrap.done .form-note{display:none}
.formwrap.done .sent{display:flex}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(34px,4vw,52px) 0;background:var(--surface)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot h4{font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.9rem}
.foot a{display:block;text-decoration:none;color:var(--body);font-size:.93rem;padding:.25rem 0}
.foot a:hover{color:var(--accent)}
.foot p{font-size:.9rem;color:var(--muted);max-width:40ch}
.legal{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.83rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  *{animation:none!important}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:10px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;border-radius:var(--r-pill)}

/* ===== 2026 EXPERIENCE UPGRADE ===== */
/* Secondary accents. Values come from the site scale in
   static/css/styles.css (--color-secondary, --color-success), which is
   what /styleguideline/ documents. The mockups shipped a lavender and a
   mint of their own; do not reintroduce them. */
:root{--secondary:#b966e7;--success:#3EB75E}
body{overflow-x:hidden}
header{transition:transform .35s ease,box-shadow .35s ease}
header.scrolled{box-shadow:0 14px 40px -30px rgba(25,35,53,.48)}
.page-progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--secondary),var(--success));z-index:1000;transform-origin:left;transform:scaleX(0)}
.page-wipe{position:fixed;inset:0;background:linear-gradient(135deg,var(--ink),#323F92);z-index:999;transform:translateY(100%);pointer-events:none}
.smart-finder{margin-top:1.35rem;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid color-mix(in srgb,var(--line) 86%,transparent);box-shadow:0 18px 50px -28px rgba(19,31,62,.42);border-radius:20px;padding:12px;backdrop-filter:blur(16px)}
.finder-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.finder-input{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.25rem .9rem;min-height:52px}
.finder-input i{font-size:1.25rem;color:var(--accent)}
.finder-input input{border:0;outline:0;background:transparent;color:var(--ink);font:500 .96rem Inter,sans-serif;width:100%;min-width:0}
.finder-input input::placeholder{color:var(--muted)}
.finder-btn{border:0;border-radius:14px;padding:0 1.15rem;background:var(--ink);color:white;font:700 .92rem Inter,sans-serif;cursor:pointer;transition:.2s}
.finder-btn:hover{transform:translateY(-1px);background:var(--accent)}
.finder-chips{display:flex;gap:8px;overflow:auto;padding-top:9px;scrollbar-width:none}
.finder-chips::-webkit-scrollbar{display:none}
.finder-chip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--body);border-radius:999px;padding:.46rem .75rem;font:600 .79rem Inter,sans-serif;cursor:pointer;transition:.2s}
.finder-chip:hover,.finder-chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.finder-result{display:none;margin-top:10px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;font-size:.9rem}
.finder-result.show{display:flex;gap:.7rem;align-items:flex-start;animation:finderIn .3s ease both}
@keyframes finderIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:1rem}
.hero-fact{border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:14px;padding:12px;background:color-mix(in srgb,var(--surface) 90%,transparent)}
.hero-fact b{display:block;color:var(--ink);font-family:'Be Vietnam Pro',sans-serif;font-size:.95rem}
.hero-fact span{display:block;color:var(--muted);font-size:.78rem;margin-top:.18rem}
.section-kicker{display:inline-flex;align-items:center;gap:.45rem;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:.42rem .72rem;font:700 .76rem Inter,sans-serif;margin-bottom:.8rem}
.rich-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:2rem}
.rich-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.rich-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.rich-card h3{margin:.65rem 0 .45rem}.rich-card p{font-size:.92rem}
.rich-card .iconbox{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:1.3rem}
.rich-card.big{grid-column:span 7}.rich-card.side{grid-column:span 5}.rich-card.third{grid-column:span 4}
.metric-line{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;color:var(--muted)}
.metric-line b{color:var(--ink)}
.floating-note{position:absolute;right:18px;top:18px;border-radius:999px;background:var(--ink);color:#fff;padding:.35rem .6rem;font-size:.72rem;font-weight:700}
.story-strip{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:2rem}
.story-visual{border-radius:22px;overflow:hidden;min-height:360px;position:relative}.story-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.story-visual .caption{position:absolute;inset:auto 0 0;padding:24px;background:linear-gradient(transparent,rgba(7,14,31,.86));color:#fff}.story-visual .caption h3{color:#fff}.story-list{display:grid;gap:12px}.story-mini{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;grid-template-columns:42px 1fr;gap:12px}.story-mini i{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:1.15rem}.story-mini h3{font-size:1rem;margin-bottom:.2rem}.story-mini p{font-size:.88rem}
.sticky-cta{position:fixed;right:18px;bottom:18px;z-index:80;background:var(--ink);color:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 18px 45px -18px rgba(0,0,0,.45);display:flex;align-items:center;gap:10px;transform:translateY(120%);opacity:0;transition:.35s cubic-bezier(.16,1,.3,1)}
.sticky-cta.show{transform:none;opacity:1}.sticky-cta span{font-size:.8rem;opacity:.78;display:block}.sticky-cta b{font-size:.9rem;display:block}.sticky-cta a{background:#fff;color:var(--ink);text-decoration:none;border-radius:12px;padding:.65rem .8rem;font-size:.82rem;font-weight:800}
.rv2{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s}.rv2.in{opacity:1;transform:none;filter:none}
@media(max-width:860px){.finder-row{grid-template-columns:1fr}.finder-btn{min-height:48px}.hero-facts{grid-template-columns:1fr}.rich-card.big,.rich-card.side,.rich-card.third{grid-column:span 12}.story-strip{grid-template-columns:1fr}.sticky-cta{left:12px;right:12px;bottom:12px}.sticky-cta a{margin-left:auto}.story-visual{min-height:300px}}


/* ===== PREMIUM CONTENT SECTIONS v2 ===== */
.premium-band{background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--accent-soft) 38%,var(--paper)));position:relative;overflow:hidden}
.premium-band::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--secondary) 16%,transparent),transparent 68%);right:-160px;top:-180px;pointer-events:none}
.section-head-row{display:flex;justify-content:space-between;align-items:end;gap:24px}.section-head-row .lede{margin-top:.8rem}
.section-head-row .mini-badge{flex:none;white-space:nowrap}.mini-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 11px;font-size:.78rem;font-weight:700;color:var(--muted)}
.week-board{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:2.2rem}.week-calendar{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow-sm)}.week-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:18px}.day{min-height:132px;border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--paper);position:relative;overflow:hidden;transition:.22s}.day:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:var(--shadow-sm)}.day .d{font:800 .72rem Inter;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.day .task{margin-top:22px;font-size:.78rem;line-height:1.45;color:var(--body);overflow-wrap:break-word;hyphens:auto}.day .task b{display:block;color:var(--ink);font-size:.82rem}.day.hot{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}.day.hot::after{content:"";position:absolute;right:-22px;bottom:-22px;width:70px;height:70px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.week-side{display:grid;gap:12px}.schedule-card{background:var(--secondary);color:#fff;border-radius:22px;padding:22px;min-height:210px;position:relative;overflow:hidden}.schedule-card::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-55px;top:-55px;background:linear-gradient(135deg,var(--secondary),var(--accent));opacity:.48}.schedule-card h3{color:#fff;max-width:14ch;font-size:1.35rem}.schedule-card p{color:rgba(255,255,255,.74);font-size:.9rem;margin-top:.6rem;max-width:34ch}.schedule-pill{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:.78rem;font-weight:700}.schedule-pill i{flex:none;font-size:1.05em;line-height:1}.time-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.time-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:17px}.time-card i{font-size:1.25rem;color:var(--accent)}.time-card b{display:block;color:var(--ink);font-size:1rem;margin-top:8px}.time-card span{font-size:.79rem;color:var(--muted)}
.workspace-shell{margin-top:2.3rem;background:#192335;border-radius:26px;padding:14px;box-shadow:0 30px 80px -36px rgba(15,23,42,.65);overflow:hidden}.workspace-top{height:46px;display:flex;align-items:center;gap:8px;padding:0 7px}.dot{width:9px;height:9px;border-radius:50%;background:#6b7385}.workspace-url{margin-left:8px;background:#232d40;color:#A1A9AC;border-radius:9px;padding:7px 12px;font-size:.72rem;flex:1;max-width:430px}.workspace-body{display:grid;grid-template-columns:190px 1fr;min-height:490px;background:#F5F7FA;border-radius:18px;overflow:hidden}.ws-side{background:#fff;border-right:1px solid #e6e3f1;padding:20px 14px}.ws-logo{font:800 .9rem 'Be Vietnam Pro';color:#192335;margin-bottom:24px}.ws-menu{display:grid;gap:7px}.ws-item{display:flex;align-items:center;gap:9px;border-radius:10px;padding:9px 10px;font-size:.75rem;color:#6b7385}.ws-item.active{background:#EEEEFF;color:#2f57ef;font-weight:700}.ws-main{padding:24px;color:#273041}.ws-title{display:flex;justify-content:space-between;gap:20px;align-items:center}.ws-title h3{color:#192335}.ws-hello{font-size:.78rem;color:#6b7385}.ws-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:18px}.dash-card{background:#fff;border:1px solid #e6e3f1;border-radius:16px;padding:17px}.dash-card h4{font:700 .82rem 'Be Vietnam Pro';color:#192335;margin:0 0 14px}.skill-row{display:grid;grid-template-columns:82px 1fr 40px;gap:9px;align-items:center;font-size:.72rem;margin:11px 0}.skill-bar{height:7px;border-radius:99px;background:#e6e3f1;overflow:hidden}.skill-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--secondary));transform-origin:left;animation:skillGrow 1.25s cubic-bezier(.16,1,.3,1) both}.skill-row b{color:#192335;text-align:right}.mentor-note{background:linear-gradient(135deg,#EEEEFF,#ffedff);border:1px solid #e6e3f1;border-radius:14px;padding:14px;font-size:.76rem;line-height:1.55}.mentor-note b{display:block;color:#192335;margin-bottom:4px}.next-session{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px;border-radius:13px;background:#192335;color:#fff}.next-session i{font-size:1.2rem}.next-session span{font-size:.68rem;color:#D9D9D9;display:block}.next-session b{font-size:.78rem}.task-list{display:grid;gap:9px}.trow{display:flex;align-items:center;gap:9px;font-size:.72rem}.trow i{width:27px;height:27px;border-radius:8px;background:#EEEEFF;color:#2f57ef;display:grid;place-items:center}.trow b{display:block;color:#192335}.trow span{color:#6b7385;font-size:.65rem}.workspace-note{text-align:center;color:var(--muted);font-size:.8rem;margin-top:12px}
@keyframes skillGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:2rem}.usecase{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;position:relative;transition:.22s;min-height:190px}.usecase:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}.usecase .uc-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:1.2rem}.usecase h3{font-size:1.02rem;margin:.9rem 0 .35rem}.usecase p{font-size:.86rem}.usecase .tagline{position:absolute;right:14px;top:14px;font-size:.68rem;border-radius:999px;padding:5px 7px;background:var(--surface-2);color:var(--muted);font-weight:700}
.rubric-lab{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;margin-top:2.2rem}.rubric-copy{background:var(--secondary);border-radius:24px;padding:27px;color:#fff;position:relative;overflow:hidden}.rubric-copy h3{color:#fff;font-size:1.45rem}.rubric-copy p{color:rgba(255,255,255,.74);margin-top:.7rem}.rubric-legend{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.rubric-legend span{font-size:.74rem;display:flex;align-items:center;gap:6px}.rubric-legend i{width:9px;height:9px;border-radius:50%;display:block}.rubric-panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px}.rubric-row{display:grid;grid-template-columns:145px 1fr 46px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.rubric-row:last-child{border-bottom:0}.rubric-name b{display:block;color:var(--ink);font-size:.86rem}.rubric-name span{font-size:.72rem;color:var(--muted)}.dualbar{height:11px;background:var(--surface-2);border-radius:99px;position:relative;overflow:hidden}.dualbar .base,.dualbar .target{position:absolute;left:0;top:0;height:100%;border-radius:99px}.dualbar .base{background:#D9D9D9}.dualbar .target{background:linear-gradient(90deg,var(--accent),var(--secondary));opacity:.9}.rubric-score{font:800 .82rem 'Be Vietnam Pro';color:var(--accent);text-align:right}
@media(max-width:960px){.week-board,.rubric-lab{grid-template-columns:1fr}.workspace-body{grid-template-columns:1fr}.ws-side{display:none}.usecase-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.usecase-grid{grid-template-columns:1fr}.workspace-shell{padding:8px}.ws-main{padding:15px}.ws-grid{grid-template-columns:1fr}.section-head-row{display:block}.time-cards{grid-template-columns:1fr}.rubric-row{grid-template-columns:105px 1fr 36px}.workspace-body{min-height:0}}


/* ---------- draft preview ribbon ----------
   Not from the mockup. Staff can open an unpublished page while visitors get
   a 404, so the page has to say which one it is — see lp/v2/_base.html. */
.draft-ribbon{background:#FF8F3C;color:#192335;text-align:center;padding:8px 20px;
  font-size:.8125rem;font-weight:700;letter-spacing:.3px;position:relative;z-index:110}

/* The success panel carries a Zalo button under its line of text, because
   nothing is posted anywhere yet and Zalo is the channel that does work.
   Stack it rather than letting the flex row squash the button. */
.sent{align-items:flex-start}
.sent > span{display:flex;flex-direction:column;align-items:flex-start;
  font-weight:600;line-height:1.5}