/* Newing brand — shared by / and /dang-ky.
   Cream paper + navy type, gold only as accent, square hairline blocks, no glass/blur shadows.
   Aurora + H1 gradient kept as effects, recoloured to navy → indigo → gold → cream. */
@font-face{font-family:"Aeonik";src:url("/fonts/aeonik-regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/fonts/aeonik-medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/fonts/aeonik-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/fonts/aeonik-black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}

:root{
  --paper:#F7F4EC; --paper2:#FCFAF4; --ink:#0E1F3C; --indigo:#1B3A6B; --text:#3A4763; --line:#DED5C0;
  --gold:#B8912F;      /* rules + fills only (2.7:1 on cream — never small text) */
  --gold-ink:#8C6B1F;  /* gold used as TEXT on cream: 4.5:1 */
  --gold-soft:#E3C27E; /* fills only on cream; text on navy */
  --navy:#0A1628; --on-navy:#C9CFDB;
  --pad:clamp(20px,5vw,64px);
  --font:"Aeonik",Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{font-family:var(--font);color:var(--text);background:var(--paper);line-height:1.6;font-size:17px;-webkit-text-size-adjust:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
h1,h2,h3{color:var(--ink);line-height:1.08;letter-spacing:-.03em;font-weight:700;overflow-wrap:break-word}
h2{font-size:clamp(30px,4.6vw,52px);margin:0 0 18px;max-width:20ch;text-wrap:balance}
h3{font-weight:500;letter-spacing:-.015em}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--gold-ink);margin-bottom:22px;display:flex;align-items:center;gap:14px;text-transform:uppercase}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--gold);flex:none}
.sub{max-width:58ch;font-size:18px;text-wrap:pretty}
section{padding:clamp(72px,10vw,128px) 0;position:relative}
section+section{border-top:1px solid var(--line)}
.nb{white-space:nowrap}

/* ---------- aurora (soft paper wash) + grid ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.b1{width:70vw;height:26vw;min-height:170px;max-width:1000px;left:-18%;top:-4%;background:radial-gradient(ellipse at center,#0E1F3C 0%,rgba(14,31,60,.5) 45%,transparent 72%);opacity:.14;animation:d1 30s ease-in-out infinite alternate}
.b2{width:76vw;height:24vw;min-height:160px;max-width:1100px;right:-22%;top:24%;background:radial-gradient(ellipse at center,#1B3A6B 0%,rgba(27,58,107,.5) 45%,transparent 72%);opacity:.18;animation:d2 36s ease-in-out infinite alternate}
.b3{width:60vw;height:22vw;min-height:150px;max-width:900px;left:22%;bottom:-8%;background:radial-gradient(ellipse at center,#B8912F 0%,rgba(184,145,47,.5) 45%,transparent 72%);opacity:.2;animation:d3 42s ease-in-out infinite alternate}
.b4{width:46vw;height:20vw;min-height:140px;max-width:700px;right:-6%;top:-6%;background:radial-gradient(ellipse at center,#E3C27E 0%,rgba(227,194,126,.5) 45%,transparent 72%);opacity:.22;animation:d4 38s ease-in-out infinite alternate}
@keyframes d1{from{transform:translate3d(0,0,0) rotate(-12deg) scale(1)}to{transform:translate3d(14vw,7vh,0) rotate(-5deg) scale(1.12)}}
@keyframes d2{from{transform:translate3d(0,0,0) rotate(10deg) scale(1)}to{transform:translate3d(-16vw,9vh,0) rotate(3deg) scale(.92)}}
@keyframes d3{from{transform:translate3d(0,0,0) rotate(-6deg) scale(1)}to{transform:translate3d(12vw,-9vh,0) rotate(-16deg) scale(1.18)}}
@keyframes d4{from{transform:translate3d(0,0,0) rotate(8deg) scale(1)}to{transform:translate3d(-12vw,6vh,0) rotate(16deg) scale(1.1)}}
.grid{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(14,31,60,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(14,31,60,.055) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);mask-image:linear-gradient(180deg,#000 0%,transparent 88%)}
/* Phones: no filter:blur (iOS Safari / in-app webviews drop or wash out a blur on huge layers, which is
   why the glow vanished). The radial gradients fade to transparent on their own, so they stay soft.
   Cream hero: a light wash. Navy band: real indigo + gold light (rules further down, after .band). */
@media (max-width:700px){
  .blob{filter:none}
  .b1{width:150vw;height:300px;left:-60%;top:-2%;opacity:.16}
  .b2{width:150vw;height:280px;right:-70%;top:34%;opacity:.2}
  .b3{width:140vw;height:300px;left:-30%;bottom:-2%;opacity:.3}
  .b4{width:120vw;height:260px;right:-50%;top:-4%;opacity:.4}
}

/* ---------- gradient text ----------
   Static left-to-right ramp, applied per LINE (never one ramp over a tall wrapped box: on a phone that
   collapses to near-flat navy). The text layer is not animated (iOS Safari / webviews repaint animated
   background-clip:text unreliably). Fallback without background-clip:text: solid --ink. */
:root{--ramp:linear-gradient(90deg,#0E1F3C 0%,#1B3A6B 28%,#3B4A86 52%,#8C6B1F 80%,#A47E25 100%)}
.grad,.hgrad{color:var(--ink)}
.grad{width:fit-content;max-width:100%}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  /* hero H1: phones paint each of the 5 .seg lines, ≥700px each of the 3 .ln lines */
  .hgrad .seg{background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  @media (min-width:700px){
    .hgrad .seg{background:none;-webkit-background-clip:border-box;background-clip:border-box}
    .hgrad .ln{background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  }
}
@media (forced-colors:active){.grad,.hgrad .seg,.hgrad .ln{background:none;color:CanvasText;-webkit-text-fill-color:currentColor}}

/* ---------- paper blocks (kept class name .glass; flat hairline paper, no blur) ---------- */
.glass{background:var(--paper2);border:1px solid var(--line);border-radius:0;transition:border-color .25s ease}
.glass:hover{border-color:var(--gold)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;background:var(--ink);color:var(--paper);font-weight:500;font-size:16px;letter-spacing:.01em;text-decoration:none;border:0;border-radius:0;transition:background-color .2s ease}
.btn:hover{background:var(--indigo)}
.link{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:6px;min-height:44px;display:inline-flex;align-items:center}
.link:hover{text-decoration-thickness:2px}

/* ---------- hero ---------- */
.hero{padding:clamp(24px,4vw,40px) 0 clamp(72px,10vw,120px);overflow:hidden;position:relative}
.brandbar{display:flex;flex-direction:column;gap:4px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(48px,8vw,96px)}
.brandbar .mark{font-weight:700;letter-spacing:.22em;font-size:14px;color:var(--ink);text-decoration:none;width:fit-content}
.brandbar .parent{font-size:14px;color:var(--text);letter-spacing:.01em}
.hero h1{margin:0 0 30px;letter-spacing:-.035em;line-height:1.04}
/* Every line is its own nowrap block, so a compound word can never split.
   Phones: 5 lines (each .seg is a line), sized so the longest line ("NĂNG LỰC VẬN HÀNH?", ≈10.15em) fits at 320px.
   ≥700px: 3 lines (each .ln is a line, its .segs inline), longest phrase ≈14.6em. */
.hero h1 .ln,.hero h1 .seg{display:block;width:fit-content;max-width:100%;white-space:nowrap}
.hero h1{font-size:min(40px,calc((100vw - 2 * var(--pad)) / 10.6))}
@media (min-width:700px){.hero h1{font-size:min(68px,calc((100vw - 2 * var(--pad)) / 15.4))}.hero h1 .seg{display:inline}}
.lead{font-size:clamp(18px,2vw,22px);max-width:46ch;text-wrap:balance;color:var(--text)}
.dates{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:48px;border:1px solid var(--line);background:rgba(252,250,244,.75);width:fit-content}
.dates>div{padding:18px 32px 16px;min-width:150px}
.dates>div+div{border-left:1px solid var(--line)}
.dates b{display:block;color:var(--ink);font-weight:500;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.dates small{font-size:15px;color:var(--text)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:40px}

/* ---------- context ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:48px 0 14px}
.stat{padding:32px}
.num{font-size:clamp(56px,8vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .num::before,.pstats .num::before{content:"";display:block;width:40px;height:2px;background:var(--gold);margin-bottom:22px}
.stat p{margin-top:16px;max-width:34ch}
.source{font-size:14px;color:var(--text)}
.qs{list-style:none;margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.qs li{padding:24px 24px 0 0;font-size:20px;font-weight:500;line-height:1.35;color:var(--ink);letter-spacing:-.01em}
.qs li+li{padding-left:24px;border-left:1px solid var(--line)}

/* ---------- problems ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.card{padding:32px 28px 36px}
.card .n{display:block;font-size:15px;font-weight:500;letter-spacing:.1em;color:var(--gold-ink);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:36px}
.card h3{font-size:23px;margin-bottom:12px}
.card p{font-size:16px}

/* ---------- partner band (deep navy) ---------- */
.band{background:var(--navy);color:var(--on-navy);overflow:hidden}
section.band,section.band+section{border-top:0}
.band h2{color:var(--paper)}
.band .sub{color:var(--on-navy)}
.band .eyebrow{color:var(--gold-soft)}
.band .eyebrow::before{background:var(--gold-soft)}
.band .b1{background:radial-gradient(ellipse at center,#1B3A6B 0%,rgba(27,58,107,.5) 45%,transparent 72%);opacity:.55}
.band .b2{background:radial-gradient(ellipse at center,#2A4E86 0%,rgba(42,78,134,.45) 45%,transparent 72%);opacity:.3}
.band .b3{opacity:.16}
.band .b4{opacity:.12}
/* Phones: on navy, brighter indigo + gold light so the glow actually reads (no blur here, see aurora) */
@media (max-width:700px){
  .band .b1{background:radial-gradient(ellipse at center,#3A62B0 0%,rgba(58,98,176,.45) 38%,transparent 70%);opacity:.75}
  .band .b2{background:radial-gradient(ellipse at center,#C9A24A 0%,rgba(201,162,74,.4) 38%,transparent 70%);opacity:.45}
  .band .b3{background:radial-gradient(ellipse at center,#4A6FC0 0%,rgba(74,111,192,.4) 38%,transparent 70%);opacity:.6}
  .band .b4{background:radial-gradient(ellipse at center,#E3C27E 0%,rgba(227,194,126,.35) 38%,transparent 70%);opacity:.35}
}
.band .grid{background-image:linear-gradient(rgba(227,194,126,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(227,194,126,.06) 1px,transparent 1px)}
.pstats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;max-width:780px}
.pstats>div{padding:32px;border:1px solid rgba(227,194,126,.32);background:rgba(10,22,40,.4);transition:border-color .25s ease}
.pstats>div:hover{border-color:var(--gold-soft)}
.pstats .num{color:var(--gold-soft)}
.pstats p{margin-top:12px;color:var(--paper)}
.psource{margin-top:16px;font-size:14px;color:#A9B3C6;letter-spacing:.02em}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
.person{padding:18px 18px 22px;display:flex;flex-direction:column;height:100%}
.person.key{border-top:3px solid var(--gold)}
.photo{width:100%;aspect-ratio:1;border:1px solid var(--line);overflow:hidden;margin-bottom:18px;background:#fff}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.badge{align-self:flex-start;font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--gold-ink);border:1px solid var(--gold);padding:4px 10px;border-radius:0;margin-bottom:14px}
.key .badge{background:var(--gold-soft);color:var(--ink);border-color:var(--gold-soft)}
.person h3{font-size:clamp(17px,1.7vw,20px);font-weight:700;letter-spacing:-.01em}
.role{font-size:15px;margin-top:8px;line-height:1.5}

/* ---------- agenda: ruled rows ---------- */
.agenda{margin-top:48px;list-style:none;border-top:1px solid var(--ink)}
.agenda li{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line)}
.time{font-size:clamp(20px,2.4vw,26px);font-weight:500;color:var(--gold-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.agenda h3{font-size:clamp(19px,2vw,23px)}
.who{font-size:16px;margin-top:6px}

/* ---------- register ---------- */
.regbox{padding:clamp(28px,5vw,56px);margin-top:8px;border-top:3px solid var(--ink)}
.regbox:hover{border-color:var(--line);border-top-color:var(--ink)}
.reghead{margin-bottom:28px}

/* ---------- footer (deep navy) ---------- */
footer{padding:56px 0 36px;font-size:15px;background:var(--navy);color:var(--on-navy)}
footer .brand{color:var(--paper);font-weight:700;letter-spacing:.2em}
footer p{margin-top:8px}
footer a{color:var(--gold-soft);display:inline-block;padding:10px 0}
footer :focus-visible{outline-color:var(--gold-soft)}
.fine{margin-top:28px;padding-top:20px;border-top:1px solid rgba(227,194,126,.22);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px}
.fine a{color:#A9B3C6;padding:0;font-size:14px}

/* ---------- scroll reveal ---------- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .glass.rv.in{transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),border-color .25s ease}

/* ---------- registration page ---------- */
.fpage{padding:clamp(24px,4vw,40px) 0 clamp(56px,8vw,96px);overflow:hidden;min-height:100vh;position:relative}
.fpage .brandbar{margin-bottom:clamp(36px,6vw,64px)}
.fpage h1{font-size:clamp(32px,5vw,56px);margin:0 0 14px;text-wrap:balance}
.evline{font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--gold-ink);margin-bottom:32px;max-width:44ch;text-wrap:balance}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:15px;font-weight:500;color:var(--ink)}
.field input,.field select{width:100%;min-height:52px;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #C9BEA4;border-radius:0;transition:border-color .2s}
.field input:focus,.field select:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.field.bad input,.field.bad select{border-color:#B42318}
.err{font-size:14px;color:#B42318}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formerr{margin-top:16px;font-size:15px;color:#B42318}
.formerr:empty{display:none}
#regbtn{margin-top:28px;cursor:pointer}
#regbtn[disabled]{opacity:.65;cursor:progress}
.ok{display:flex;align-items:center;gap:20px;padding:8px 0}
.ok[hidden]{display:none}
.ok p{color:var(--ink);font-size:clamp(18px,2.2vw,22px);font-weight:500;line-height:1.4}
.ok:focus{outline:none}
.tick{flex:none;width:52px;height:52px;display:grid;place-items:center;font-size:24px;font-weight:700;color:var(--paper);background:var(--ink)}
.back{margin-top:24px;color:var(--ink);font-size:15px;text-decoration-color:var(--gold);text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}

/* ---------- responsive ---------- */
@media (max-width:980px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .cards,.qs{grid-template-columns:1fr}
  .qs li,.qs li+li{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}
  .card .n{margin-bottom:24px}
  .agenda li{grid-template-columns:1fr;gap:6px}
}
@media (max-width:600px){
  body{font-size:16px}
  .stats,.pstats,.fields{grid-template-columns:1fr}
  .dates{grid-template-columns:1fr 1fr;width:100%}
  .dates>div{padding:14px 18px;min-width:0}
  .dates>div:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .btn{width:100%}
  .actions{align-items:stretch;flex-direction:column;gap:8px}
  .link{justify-content:center}
  .ok{align-items:flex-start}
}
@media (max-width:560px){.people{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .blob{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .glass,.btn,.pstats>div{transition:none}
}