/* LAYOUT CONCEPT: bố cục bất đối xứng, chữ lớn, hai "luồng" hỏi – đáp xanh lá / san hô chạy xuyên trang; hành trình là một đường uốn lượn được vẽ dần khi cuộn. */
:root{
  --bg:#FBF5EA; --surface:#FFFFFF; --sunken:#F3EAD8; --ink:#17301F; --muted:#586A5E; --line:#E4D8C2;
  --green-fill:#23613A; --on-green:#FBF5EA; --green-text:#23613A;
  --coral-fill:#E8553D; --coral-btn:#C8432E; --on-coral:#FFFFFF; --coral-text:#C8432E;
  --shadow:0 1px 0 rgba(23,48,31,.06);
  --font-display:'Nunito','Be Vietnam Pro',system-ui,sans-serif;
  --font-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:20px; --wrap:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F2318; --surface:#173323; --sunken:#12291C; --ink:#F4EDDD; --muted:#B3C5B8; --line:#2A4A37;
  --green-fill:#2C7A4A; --green-text:#8FD4A8;
  --coral-fill:#FF8A6B; --coral-btn:#FF8A6B; --on-coral:#17301F; --coral-text:#FF8A6B;
  --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F2318; --surface:#173323; --sunken:#12291C; --ink:#F4EDDD; --muted:#B3C5B8; --line:#2A4A37;
  --green-fill:#2C7A4A; --green-text:#8FD4A8;
  --coral-fill:#FF8A6B; --coral-btn:#FF8A6B; --on-coral:#17301F; --coral-text:#FF8A6B;
  --shadow:none; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--coral-text);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(64px,10vw,120px)}
.eyebrow{font:600 13px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--coral-text);margin-bottom:18px;display:block}
.h2{font-size:clamp(2rem,5vw,3.4rem)}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:56ch}
.hl{color:var(--coral-text)} .hg{color:var(--green-text)}
.demo-tag{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--muted);border-radius:999px;padding:7px 12px}

/* logo theme swap */
.logo{display:block;height:44px;width:auto}
.logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-light{display:none}:root:not([data-theme="light"]) .logo-dark{display:block}}
:root[data-theme="dark"] .logo-light{display:none}:root[data-theme="dark"] .logo-dark{display:block}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:block;line-height:0}
.nav{display:flex;gap:4px;align-items:center}
.nav a{text-decoration:none;font-weight:500;font-size:15px;padding:10px 12px;border-radius:999px;color:var(--ink)}
.nav a:hover{background:var(--sunken)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:12px;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .25s,background .25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .burger{display:flex}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 12px;font-size:17px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid transparent;font-weight:600;font-size:16px;text-decoration:none;transition:transform .2s,background .2s,color .2s}
.btn-primary{background:var(--coral-btn);color:var(--on-coral)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--green-text);color:var(--green-text);background:transparent}
.btn-ghost:hover{background:var(--green-fill);color:var(--on-green);border-color:var(--green-fill)}
.btn svg{width:18px;height:18px;transition:transform .2s}.btn:hover svg{transform:translateX(3px)}

/* HERO */
.hero{padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,104px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:center}
.slogan{font:600 clamp(15px,2vw,18px)/1.3 var(--font-body);letter-spacing:.01em;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.slogan::before{content:"";width:36px;height:3px;background:var(--coral-fill);border-radius:2px}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.6rem);line-height:1.02;letter-spacing:-.025em}
.hero h1 .l2{display:block;color:var(--coral-text)}
.hero p.lead{margin-top:26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.stage{position:relative;padding:0 0 28px 0}
.stage-block{background:var(--green-fill);border-radius:36px 36px 120px 36px;padding:clamp(18px,3vw,34px);color:var(--on-green);position:relative}
.stage-label{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:18px;gap:8px}
.msgs{display:flex;flex-direction:column;gap:12px;min-height:318px}
.msg{max-width:88%;padding:14px 18px;border-radius:20px;font-size:16px;line-height:1.45;position:relative;transform-origin:left bottom}
.msg small{display:block;font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;opacity:.75}
.msg.t{background:var(--bg);color:var(--ink);border-bottom-left-radius:6px;align-self:flex-start}
.msg.s{background:var(--coral-fill);color:var(--on-coral);border-bottom-right-radius:6px;align-self:flex-end;transform-origin:right bottom}
:root:not([data-theme="dark"]) .msg.s{color:#fff}
.msg.pending{display:none}
.msg.pop{animation:pop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:scale(.85) translateY(8px)}to{transform:none}}
.caret::after{content:"";display:inline-block;width:2px;height:1em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.replay{background:transparent;border:1px solid rgba(251,245,234,.5);color:var(--on-green);border-radius:999px;font:600 12px/1 var(--font-body);padding:8px 12px;letter-spacing:.04em}
.replay:hover{background:rgba(251,245,234,.14)}
.steps{display:flex;gap:10px;align-items:flex-end;position:absolute;right:-6px;bottom:-14px;pointer-events:none}
.steps i{display:block;width:34px;border-radius:10px 10px 0 0;background:var(--coral-fill);opacity:.9}
.steps i:nth-child(1){height:26px}.steps i:nth-child(2){height:44px;opacity:.8}.steps i:nth-child(3){height:62px;opacity:.7}.steps i:nth-child(4){height:82px;opacity:.6}
.hero-note{margin-top:12px;font-size:13px;color:var(--muted)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.msgs{min-height:300px}.steps{right:8px}}

/* WHY */
.why{background:var(--sunken)}
.why-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.say{font:800 clamp(2.4rem,6vw,4.4rem)/1 var(--font-display);color:var(--green-text);letter-spacing:-.02em}
.say span{display:block;font:500 15px/1.4 var(--font-body);color:var(--muted);letter-spacing:0;margin-top:10px}
.meanings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.meaning{border-top:3px solid var(--green-fill);padding-top:16px}
.meaning:nth-child(2){border-color:var(--coral-fill)}
.meaning h3{font-size:1.25rem;margin-bottom:8px}
.meaning p{color:var(--muted);font-size:16px}
.switch{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;margin-top:48px;gap:4px}
.switch button{border:0;background:transparent;border-radius:999px;min-height:44px;padding:0 20px;font-weight:600;font-size:15px;color:var(--muted)}
.switch button[aria-pressed="true"]{background:var(--green-fill);color:var(--on-green)}
.flow{margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,36px);display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,150px);gap:12px;align-items:center}
.node{text-align:center}
.node b{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;margin:0 auto 10px;font:800 15px/1.1 var(--font-display);color:var(--on-green);background:var(--green-fill)}
.node.stu b{background:var(--coral-fill);color:var(--on-coral)}
.node span{font-size:14px;color:var(--muted);display:block;min-height:42px}
.lanes{display:flex;flex-direction:column;gap:14px}
.lane{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;transition:opacity .4s,transform .4s}
.lane .ar{flex:1;height:3px;border-radius:2px;position:relative;background:var(--green-fill)}
.lane .ar::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:10px solid var(--green-fill);border-right:0}
.lane.back{flex-direction:row-reverse}
.lane.back .ar{background:var(--coral-fill)}
.lane.back .ar::after{right:auto;left:-1px;border-left:0;border-right:10px solid var(--coral-fill)}
.lane.back{color:var(--coral-text)}
.lane .tx{min-width:96px;text-align:center}
.flow[data-mode="one"] .lane.back{opacity:.18;transform:scaleX(.9)}
.flow[data-mode="one"] .lane.back .tx{text-decoration:line-through}
.flow-cap{margin-top:14px;color:var(--muted);font-size:15px;min-height:50px}
@media (max-width:700px){.why-head,.meanings{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.node b{width:64px;height:64px}.lane{font-size:13px}}

/* VALUES */
.val-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px;align-items:start}
.val{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;transition:transform .25s,border-color .25s}
.val:nth-child(2){margin-top:28px}.val:nth-child(4){margin-top:28px}
.val:hover{transform:translateY(-4px);border-color:var(--green-fill)}
.val svg{width:44px;height:44px;margin-bottom:18px;stroke:var(--green-text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.val svg .ac{stroke:var(--coral-text)}
.val h3{font-size:1.3rem;margin-bottom:8px}
.val p{color:var(--muted);font-size:15.5px}
@media (max-width:980px){.val-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.val:nth-child(n){margin-top:0}.val:nth-child(even){margin-top:24px}}
@media (max-width:560px){.val-grid{grid-template-columns:1fr}.val:nth-child(n){margin-top:0}}

/* PROGRAMMES */
.prog{background:var(--sunken)}
.finder{margin-top:36px}
.finder-label{font-weight:600;margin-bottom:12px;display:block}
.grades{display:flex;flex-wrap:wrap;gap:8px}
.grades button{width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font:800 16px/1 var(--font-display)}
.grades button:hover{border-color:var(--green-fill)}
.grades button[aria-pressed="true"]{background:var(--coral-btn);border-color:var(--coral-btn);color:var(--on-coral)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;min-height:46px;padding:0 20px;font-weight:600;font-size:15px}
.tabs button[aria-selected="true"]{background:var(--green-fill);color:var(--on-green);border-color:var(--green-fill)}
.panel{margin-top:20px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.panel[hidden]{display:none}
.panel-side{background:var(--green-fill);color:var(--on-green);padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:280px}
.panel-side .big{font:800 clamp(3rem,8vw,5.5rem)/.95 var(--font-display);letter-spacing:-.03em}
.panel-side .big small{display:block;font:600 14px/1.3 var(--font-body);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;opacity:.8}
.panel-side p{opacity:.92;font-size:16px}
.panel-main{padding:clamp(24px,4vw,44px)}
.panel-main h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:6px}
.panel-main .sub{color:var(--muted);margin-bottom:22px}
.panel-main ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.panel-main li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.panel-main li::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--coral-fill);margin-top:7px;transform:rotate(45deg)}
.panel-note{margin-top:24px;padding:14px 16px;background:var(--sunken);border-radius:14px;font-size:14.5px;color:var(--muted)}
.hint{margin-top:14px;min-height:26px;color:var(--muted);font-size:15px}
.hint a{color:var(--coral-text);font-weight:600}
@media (max-width:760px){.panel{grid-template-columns:1fr}.panel-side{min-height:0}}

/* JOURNEY */
.jr{position:relative;margin-top:56px}
.jr-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.jr-svg path{fill:none;stroke-linecap:round}
.jr-bg{stroke:var(--line);stroke-width:6;stroke-dasharray:1 14}
.jr-fg{stroke:var(--coral-fill);stroke-width:6}
.jr-list{list-style:none;margin:0;padding:0;position:relative;height:980px}
.st{position:absolute;width:min(36%,400px);left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translateY(-50%)}
.st.right{transform:translate(18px,-50%)}
.st.left{transform:translate(calc(-100% - 18px),-50%);text-align:right}
.st .dot{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--bg);border:4px solid var(--line);transition:background .4s,border-color .4s}
.st.right .dot{left:-33px}
.st.left .dot{right:-33px}
.st.on .dot{background:var(--coral-fill);border-color:var(--coral-fill)}
.st .no{font:800 13px/1 var(--font-display);letter-spacing:.1em;color:var(--green-text);margin-bottom:8px;display:block;text-transform:uppercase}
.st h3{font-size:1.45rem;margin-bottom:8px}
.st p{color:var(--muted);font-size:15.5px}
.jr-loop{margin-top:20px;display:flex;gap:12px;align-items:center;color:var(--muted);font-size:15px;justify-content:center;text-align:center}
.jr-loop svg{width:28px;height:28px;stroke:var(--coral-text);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:820px){
  .jr-svg{display:none}
  .jr-list{height:auto;display:grid;gap:36px;padding-left:44px}
  .jr-list::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--line)}
  .jr-list::after{content:"";position:absolute;left:14px;top:8px;width:4px;height:calc((100% - 16px)*var(--p,0));border-radius:2px;background:var(--coral-fill)}
  .st,.st.left,.st.right{position:relative;left:auto;top:auto;width:auto;transform:none;text-align:left}
  .st .dot,.st.left .dot,.st.right .dot{left:-44px;right:auto;margin:-15px 0 0 -1px;top:18px;margin-top:-4px;z-index:1}
}

/* EXPERIENCE */
.exp{background:var(--green-fill);color:var(--on-green)}
.exp .eyebrow{color:var(--coral-fill)}
:root[data-theme="dark"] .exp,:root:not([data-theme="light"]) .exp{}
.exp .lead{color:rgba(251,245,234,.82)}
.exp-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);margin-top:44px;align-items:start}
.exp-steps{display:grid;gap:10px}
.exp-steps button{text-align:left;border:1px solid rgba(251,245,234,.25);background:transparent;color:var(--on-green);border-radius:18px;padding:18px 20px;display:grid;gap:4px;transition:background .25s,border-color .25s}
.exp-steps button b{font:800 1.15rem/1.2 var(--font-display)}
.exp-steps button span{font-size:15px;opacity:.85}
.exp-steps button:hover{border-color:rgba(251,245,234,.6)}
.exp-steps button[aria-selected="true"]{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.exp-steps button[aria-selected="true"] span{opacity:1;color:var(--muted)}
.scene{background:var(--bg);color:var(--ink);border-radius:28px;padding:clamp(20px,3vw,36px);min-height:420px;display:flex;flex-direction:column;gap:14px;position:relative}
.scene .demo-tag{align-self:flex-start}
.scene-title{font:800 1.3rem/1.2 var(--font-display)}
.scene-stage{display:flex;flex-direction:column;gap:12px;flex:1;justify-content:center}
.scene .msg{animation:pop .4s both}
.scene .msg.t{background:var(--sunken)}
.scene .msg.s{color:var(--on-coral)}
.scene .chip{align-self:center;background:var(--green-fill);color:var(--on-green);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600}
.scene-foot{font-size:14px;color:var(--muted)}
@media (max-width:860px){.exp-grid{grid-template-columns:1fr}.scene{min-height:360px}}

/* PARENTS */
.par-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);margin-top:44px;align-items:start}
.promises{display:grid;gap:22px}
.promise{display:grid;grid-template-columns:48px 1fr;gap:16px}
.promise i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--sunken);font:800 18px/1 var(--font-display);font-style:normal;color:var(--green-text)}
.promise h3{font-size:1.2rem;margin-bottom:4px}
.promise p{color:var(--muted);font-size:15.5px}
.dash{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(18px,3vw,32px);position:relative}
.dash-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;margin-bottom:22px}
.dash-top b{font:800 1.15rem/1.2 var(--font-display)}
.seg{display:inline-flex;background:var(--sunken);border-radius:999px;padding:4px;gap:2px}
.seg button{border:0;background:transparent;border-radius:999px;min-height:38px;padding:0 16px;font-weight:600;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--green-fill);color:var(--on-green)}
.skill{display:grid;grid-template-columns:64px 1fr 44px;gap:12px;align-items:center;margin:12px 0;font-size:15px}
.skill .bar2{height:12px;border-radius:999px;background:var(--sunken);overflow:hidden}
.skill .bar2 i{display:block;height:100%;width:var(--w);border-radius:999px;background:var(--green-fill);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.skill:nth-child(even) .bar2 i{background:var(--coral-fill)}
.skill span:last-child{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.dash-sub{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
.spark{width:100%;height:96px;display:block}
.spark .gl{stroke:var(--line);stroke-width:1}
.spark .ln{fill:none;stroke:var(--coral-fill);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.spark .pt{fill:var(--bg);stroke:var(--coral-fill);stroke-width:3}
.spark .pt.last{fill:var(--coral-fill)}
.spark text{fill:var(--muted);font:500 11px var(--font-body)}
.note{background:var(--sunken);border-radius:16px;padding:14px 16px;font-size:15px;margin-top:18px}
.note b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-text);margin-bottom:4px}
@media (max-width:860px){.par-grid{grid-template-columns:1fr}}

/* FAQ */
.faq{background:var(--sunken)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px)}
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item h3{font-size:inherit;margin:0;letter-spacing:0}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;background:transparent;border:0;padding:22px 0;font:800 clamp(1.05rem,2vw,1.25rem)/1.3 var(--font-display)}
.acc-btn:hover{color:var(--green-text)}
.acc-btn .pm{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);position:relative;background:var(--surface);transition:background .25s,transform .25s}
.acc-btn .pm::before,.acc-btn .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transition:transform .25s}
.acc-btn .pm::after{transform:rotate(90deg)}
.acc-btn[aria-expanded="true"] .pm{background:var(--coral-fill);border-color:var(--coral-fill);transform:rotate(180deg)}
.acc-btn[aria-expanded="true"] .pm::before,.acc-btn[aria-expanded="true"] .pm::after{background:var(--on-coral)}
.acc-btn[aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.acc-panel.open{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel p{padding:0 48px 22px 0;color:var(--muted)}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.acc-panel p{padding-right:0}}

/* END */
.end{text-align:left}
.end-box{background:var(--green-fill);color:var(--on-green);border-radius:36px 36px 36px 120px;padding:clamp(32px,6vw,72px)}
.end-box h2{font-size:clamp(2rem,5vw,3.6rem);max-width:16ch}
.end-box p{margin-top:18px;max-width:52ch;opacity:.9}
.end-box .btn-primary{margin-top:30px}
.end-box .btn-ghost{border-color:var(--on-green);color:var(--on-green)}
.end-box .btn-ghost:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
footer{padding-block:40px 56px;border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.foot .logo{height:64px}
.foot p{font-size:14px;color:var(--muted);max-width:46ch}

/* reveal: transform only, content visible at rest */
.js .rv{transform:translateY(22px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{transform:none}
}

/* ===== bổ sung cho bản public ===== */
.top-phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--green-fill);color:var(--on-green);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.top-phone:hover{filter:brightness(1.1)}
.bar-right{display:flex;align-items:center;gap:8px}
@media (max-width:1100px){.top-phone{display:none}}
.call-fab{display:none;position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:52px;padding:0 20px;border-radius:999px;background:var(--coral-btn);color:var(--on-coral);font-weight:600;text-decoration:none;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
@media (max-width:900px){.call-fab{display:inline-flex}}
.contact{background:var(--sunken)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);margin-top:40px;align-items:start}
.info{display:grid;gap:18px}
.info-row{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.info-row i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.info-row svg{width:22px;height:22px;stroke:var(--green-text);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.info-row b{display:block;font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.info-row a{color:var(--ink);font-weight:600}
.info-row .big{font:800 1.5rem/1.2 var(--font-display)}
.map{width:100%;height:260px;border:0;border-radius:20px;margin-top:22px;background:var(--surface)}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,36px)}
.form-card h3{font-size:1.5rem;margin-bottom:6px}
.form-card .sub{color:var(--muted);font-size:15px;margin-bottom:18px}
.form-card label{display:block;font-weight:600;font-size:15px;margin-bottom:14px}
.form-card input,.form-card select,.form-card textarea{width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:var(--bg);color:var(--ink);min-height:48px}
.form-card textarea{min-height:96px;resize:vertical}
.form-card .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-card .btn{width:100%;justify-content:center;cursor:pointer}
.form-card .fine{font-size:13px;color:var(--muted);margin-top:12px}
.ok-banner{background:var(--green-fill);color:var(--on-green);border-radius:14px;padding:14px 16px;margin-bottom:16px;font-weight:600}
.err-banner{background:var(--coral-btn);color:var(--on-coral);border-radius:14px;padding:14px 16px;margin-bottom:16px;font-weight:600}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:36px}
.news-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.news-card h3{font-size:1.25rem}.news-card h3 a{text-decoration:none}.news-card h3 a:hover{color:var(--green-text)}
.news-card time{font-size:13px;color:var(--muted)}.news-card p{color:var(--muted);font-size:15.5px}
.post-page{max-width:740px;margin-inline:auto;padding-block:clamp(40px,8vw,88px)}
.post-page h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:12px}
.post-page img.cover{width:100%;border-radius:20px;margin:20px 0}
.post-page h2{font-size:1.6rem;margin:1.6em 0 .5em}
.post-page p{margin:0 0 1.1em}
.post-page .back{display:inline-block;margin-bottom:24px;font-weight:600;color:var(--green-text)}
.foot-col{display:grid;gap:6px;font-size:15px}
.foot-col a{text-decoration:none;font-weight:600}.foot-col a:hover{text-decoration:underline}
.foot{align-items:flex-start}
.skip{position:absolute;left:-999px;top:8px;background:var(--coral-btn);color:var(--on-coral);padding:10px 16px;border-radius:10px;z-index:100}.skip:focus{left:8px}