/* ==========================================================================
   pages/nha-phat-hanh.css — 02 · Nhà phát hành (unit P02)
   Page-scoped only: body[data-page="nha-phat-hanh"] … and .p-nph-* classes.
   Signature: "1 · 0 · 0" reels in the hero + the 8-week track draw (see js/pages/nha-phat-hanh.js).
   v3 (PITCH-v3 §2): keypoints after the hero → 02 Bộ phân tích (insight report + metrics + cadence)
   → 03 Vận hành song song → 04 Chia sẻ thế nào → pilot · targets · tiers · pledge · CTA.
   ========================================================================== */

body[data-page="nha-phat-hanh"] .sec-title em{font-style:normal;color:var(--accent)}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.p-nph-hero .terrain{--terrain-line-alpha:.78; --terrain-peak-alpha:.9; --terrain-calm:.78; --terrain-calm-x:20%; --terrain-calm-y:62%; --terrain-calm-w:62%; --terrain-calm-h:78%}
.p-nph-hero .hero__shade{background:
  linear-gradient(180deg, transparent 60%, var(--bg-0) 100%),
  linear-gradient(90deg, rgb(11 13 12 / .78) 0%, rgb(11 13 12 / .3) 50%, transparent 78%)}
/* (0,2,0) so it beats .hero--full .hero__title → H1 stays ≤ 3 lines on desktop */
.p-nph-hero .p-nph-hero__title{font-size:clamp(2.5rem, 1rem + 4.2vw, 5.25rem);max-inline-size:17.5ch;line-height:1.04}
.p-nph-hero .hero__sub{max-inline-size:30ch}
@media (min-width:1024px){
  .p-nph-hero .hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,4.6fr);gap:clamp(40px, 4vw, 88px)}
}

/* the briefing panel: "Phần Garena bỏ ra" */
.p-nph-brief{--arm:18px;--hc:var(--accent);
  position:relative;margin-top:var(--s-7);padding:clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 32px) clamp(18px, 1.6vw, 24px);
  background:linear-gradient(180deg, rgb(17 20 18 / .86), rgb(11 13 12 / .8));
  border:1px solid var(--line);box-shadow:var(--shadow-card)}
.p-nph-brief::before{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:
    linear-gradient(var(--hc),var(--hc)) top left / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) top left / 2px var(--arm),
    linear-gradient(var(--hc),var(--hc)) top right / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) top right / 2px var(--arm),
    linear-gradient(var(--hc),var(--hc)) bottom left / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) bottom left / 2px var(--arm),
    linear-gradient(var(--hc),var(--hc)) bottom right / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) bottom right / 2px var(--arm);
  background-repeat:no-repeat}
@media (min-width:1024px){ .p-nph-brief{margin-top:0} }
.p-nph-brief__head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);
  font:700 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.p-nph-trio{list-style:none;margin:0;padding:0}
.p-nph-stat{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;column-gap:clamp(16px, 1.6vw, 28px);
  padding-block:clamp(8px, 1.1vh, 14px);border-bottom:1px solid var(--line)}
.p-nph-stat__num{display:block;min-inline-size:.72em;font:400 clamp(4.25rem, 2.2rem + 4.4vw, 7.75rem)/.9 var(--ff-stencil);color:var(--text);
  font-variant-numeric:tabular-nums;text-align:center}
.p-nph-stat--key .p-nph-stat__num{color:var(--accent)}
.p-nph-stat__label{font:800 clamp(1.25rem, .9rem + 1vw, 1.875rem)/1.02 var(--ff-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.01em;color:var(--text);text-wrap:balance}
.p-nph-brief__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.p-nph-brief__meta{font:500 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

/* the "1 · 0 · 0" stamp (built by JS during the intro only; static digit otherwise).
   The row shows "·" until it locks; ::after reserves the final digit's width → no layout shift. */
.p-nph-reel{display:inline-block;vertical-align:top}
.p-nph-reel__face{display:inline-grid;transform-origin:50% 55%;will-change:transform}
.p-nph-reel__face > b,.p-nph-reel__face::after{grid-area:1 / 1;font-weight:inherit;text-align:center}
.p-nph-reel__face::after{content:attr(data-final);visibility:hidden}
.p-nph-reel.is-arming:not(.is-locked) .p-nph-reel__face > b{color:var(--text-3)}

/* phones & tablets: trio becomes a 3-up scoreboard, placed right under the sub (before the CTAs) */
@media (max-width:1023px){
  .p-nph-hero .hero__inner{display:flex;flex-direction:column}
  .p-nph-hero__copy{display:contents}
  .p-nph-hero .hero__kicker{order:1}
  .p-nph-hero__title{order:2}
  .p-nph-hero .hero__sub{order:3}
  .p-nph-brief{order:4;margin-top:var(--s-5)}
  .p-nph-hero .hero__ctas{order:5}
  .p-nph-hero .hero__candid{order:6}
  .p-nph-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-nph-stat{grid-template-columns:minmax(0,1fr);row-gap:8px;align-content:start;padding:14px 10px 12px 0;border-bottom:0}
  .p-nph-stat + .p-nph-stat{padding-left:12px;border-left:1px solid var(--line)}
  .p-nph-stat__num{text-align:left;font-size:clamp(3.25rem, 1.8rem + 6vw, 5.5rem)}
  .p-nph-stat__label{font-size:clamp(1rem, .8rem + 1vw, 1.375rem)}
  .p-nph-brief__foot{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
}

/* ── 02 · BỘ PHÂN TÍCH CỘNG ĐỒNG ──────────────────────────────────────── */
.p-nph-intel{overflow-x:clip}
.p-nph-intel__grid{display:grid;gap:clamp(24px, 3vw, 48px);align-items:start}
@media (min-width:1024px){ .p-nph-intel__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
.p-nph-report .insight-mock__kicker{color:var(--accent)}
.p-nph-intel__side{display:grid;gap:var(--s-4);min-width:0}
.p-nph-panel{position:relative;min-width:0;padding:clamp(18px, 1.8vw, 26px);background:var(--bg-1);border:1px solid var(--line)}
.p-nph-panel::before{content:"";position:absolute;left:-1px;top:-1px;width:18px;height:18px;border-left:2px solid var(--accent);border-top:2px solid var(--accent);pointer-events:none}
.p-nph-panel__title{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-4);
  font:800 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.15 var(--ff-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.01em;color:var(--text)}
.p-nph-panel__title .i{width:20px;height:20px;flex:none;color:var(--accent)}
.p-nph-metrics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.p-nph-metric{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px;background:var(--bg-0)}
.p-nph-metric--wide{grid-column:1 / -1}
.p-nph-metric__name{font:700 var(--fs-body)/1.3 var(--ff-body);color:var(--text)}
.p-nph-metric__sub{font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--intel)}
@media (max-width:479px){
  .p-nph-metrics{grid-template-columns:minmax(0,1fr)}
  .p-nph-metric{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:12px;padding:11px 14px}
}
.p-nph-panel__foot{display:flex;align-items:center;gap:8px;margin-top:var(--s-3);font:500 var(--fs-small)/1.4 var(--ff-body);color:var(--text-2)}
.p-nph-panel__foot .i{width:16px;height:16px;flex:none;color:var(--ok)}

/* cadence: a vertical rail of 4 beats; the last one (alert) is red */
.p-nph-cadence{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
.p-nph-cadence::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--line-strong)}
.p-nph-beat{position:relative;display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);align-items:baseline;column-gap:14px;padding:8px 0 8px 26px}
.p-nph-beat::before{content:"";position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5.5px;background:var(--bg-1);border:2px solid var(--accent)}
.p-nph-beat__when{font:700 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-variant-numeric:tabular-nums}
.p-nph-beat__what{font:500 var(--fs-body)/1.35 var(--ff-body);color:var(--text)}
.p-nph-beat--alert::before{background:var(--danger);border-color:var(--danger)}
.p-nph-beat--alert .p-nph-beat__when{color:var(--danger)}
@media (max-width:420px){
  .p-nph-beat{grid-template-columns:minmax(0,1fr);row-gap:2px}
}

/* ── 03 · VẬN HÀNH SONG SONG ─────────────────────────────────────────────────────── */
.p-nph-value__grid{display:grid;gap:clamp(32px, 4vw, 64px);align-items:start}
@media (min-width:1024px){ .p-nph-value__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)} }

.p-nph-demo{padding:clamp(18px, 2vw, 26px);background:linear-gradient(180deg, var(--surface-2), var(--surface) 38%)}
.p-nph-demo__cap{padding-right:96px;margin-bottom:14px;font:800 clamp(1.25rem, 1rem + .8vw, 1.625rem)/1.1 var(--ff-display);font-stretch:80%;color:var(--text)}
.p-nph-demo__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:18px}
.p-nph-demo__list .tabs__tab{justify-content:center;min-height:44px;padding:6px 8px;gap:6px;font-size:.8125rem;text-align:center}
.p-nph-demo__list .tabs__tab .i{width:16px;height:16px}
@media (max-width:420px){ .p-nph-demo__list .tabs__tab .i{display:none} }
.p-nph-demo__panel{min-height:252px}
.p-nph-demo__panel[hidden]{min-height:0;padding:0;margin:0;border:0}
.p-nph-demo__panel:focus-visible{outline-offset:4px}
.p-nph-demo .dc-chan{padding-right:0}
.p-nph-demo .dc-actions .dc-btn{pointer-events:none;min-height:36px;font-size:.8125rem}
.p-nph-strike{color:var(--danger);text-decoration:line-through;text-decoration-thickness:2px}
.p-nph-kill{margin-top:var(--s-4)}
.p-nph-kill b{font-family:var(--ff-mono);color:var(--text)}
.p-nph-kill__meta{font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.04em;color:var(--text-2)}
.p-nph-demo__ping{display:flex;align-items:center;gap:8px;margin-top:var(--s-4);font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.p-nph-demo__ping .i{width:14px;height:14px;color:var(--accent)}
html.no-js .p-nph-demo__panel + .p-nph-demo__panel{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px dashed var(--line)}

.p-nph-gains{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);list-style:none;margin:0;padding:0}
@media (min-width:560px){ .p-nph-gains{grid-template-columns:repeat(2,minmax(0,1fr))} }
.p-nph-gain{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:clamp(132px, 9vw + 40px, 172px);
  padding:clamp(18px, 1.8vw, 28px);background:var(--bg-0);transition:background-color var(--dur-hover) var(--ease-out)}
.p-nph-gain::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform 320ms var(--ease-expo)}
.p-nph-gain:hover{background:var(--bg-1)}
.p-nph-gain:hover::after{transform:none}
.p-nph-gain__icon{display:grid;place-items:center;width:52px;height:52px;color:var(--accent);background:var(--accent-tint);border:1px solid rgb(255 159 28 / .35)}
.p-nph-gain__icon .i{width:26px;height:26px;stroke-width:1.5}
.p-nph-gain__title{font:800 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.1 var(--ff-display);font-stretch:78%;color:var(--text);text-wrap:balance}
.p-nph-gain__sub{margin-top:-6px;font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.04em;color:var(--text-2)}
.sec--band .p-nph-gain{background:var(--bg-1)}
.sec--band .p-nph-gain:hover{background:var(--surface)}
.p-nph-gain__chip{position:absolute;top:clamp(18px, 1.8vw, 28px);right:clamp(18px, 1.8vw, 28px)}
.p-nph-gain--proposal .p-nph-gain__icon{color:var(--khaki);background:var(--khaki-bg);border-style:dashed;border-color:var(--khaki)}

/* ── 04 · CHIA SẺ THẾ NÀO ─────────────────────────────────────────────── */
.p-nph-trust__grid{display:grid;gap:clamp(32px, 4vw, 72px);align-items:start}
@media (min-width:1024px){ .p-nph-trust__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center} }
.p-nph-trust .sec-head{margin-bottom:var(--s-6)}
.p-nph-hold{display:flex;align-items:center;gap:clamp(16px, 2vw, 28px);padding:clamp(16px, 1.6vw, 22px) clamp(18px, 2vw, 28px);
  background:linear-gradient(90deg, var(--ok-bg), transparent 85%);border-left:3px solid var(--ok)}
.p-nph-hold__num{display:flex;align-items:baseline;gap:6px;font:400 clamp(3.5rem, 2.4rem + 3vw, 5.5rem)/.9 var(--ff-stencil);color:var(--ok);font-variant-numeric:tabular-nums}
.p-nph-hold__num small{font:800 clamp(1.125rem, .9rem + .6vw, 1.5rem)/1 var(--ff-display);font-stretch:75%;text-transform:uppercase}
.p-nph-hold__text{font:800 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.15 var(--ff-display);font-stretch:80%;color:var(--text);text-wrap:balance}
.p-nph-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){ .p-nph-rules{grid-template-columns:repeat(2,minmax(0,1fr))} }
.p-nph-rule{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(18px, 1.8vw, 26px);background:var(--bg-0)}
.p-nph-rule__icon{display:grid;place-items:center;width:48px;height:48px;color:var(--ok);background:var(--ok-bg);border:1px solid rgb(124 203 139 / .35)}
.p-nph-rule__icon .i{width:24px;height:24px;stroke-width:1.5}
.p-nph-rule__title{font:800 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.1 var(--ff-display);font-stretch:78%;color:var(--text);text-wrap:balance}
@media (max-width:639px){
  .p-nph-rule{flex-direction:row;align-items:center;padding:14px 16px}
  .p-nph-rule__icon{width:44px;height:44px;flex:none}
}

/* ── 05 · THÍ ĐIỂM 8 TUẦN (signature track) ───────────────────────────── */
.p-nph-pilot{overflow:clip}
.p-nph-pilot__fog{opacity:.8}
.p-nph-track{--p:1;position:relative;margin-top:clamp(8px, 1vw, 16px)}
.p-nph-ruler{position:relative;display:block;margin-bottom:clamp(28px, 3vw, 44px)}
.p-nph-ruler__wks{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));margin-bottom:10px;
  font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.06em;color:var(--text-3)}
.p-nph-ruler__wks > span{position:relative;padding-left:8px}
.p-nph-ruler__wks > span::before{content:"";position:absolute;left:0;top:-2px;bottom:-10px;width:1px;background:var(--line-strong)}
.p-nph-ruler__bar{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;height:clamp(40px, 3vw, 52px)}
.p-nph-ruler__seg{grid-column:var(--a) / var(--b);grid-row:1;position:relative;display:flex;align-items:center;padding-inline:10px;
  background:repeating-linear-gradient(135deg, rgb(233 231 223 / .04) 0 6px, transparent 6px 12px), var(--surface);
  border:1px solid var(--line);transition:background-color 300ms var(--ease-out),border-color 300ms var(--ease-out)}
.p-nph-ruler__seg i{font:400 clamp(1rem, .8rem + .6vw, 1.5rem)/1 var(--ff-stencil);font-style:normal;color:var(--text-3);transition:color 300ms var(--ease-out)}
.p-nph-ruler__seg.is-lit,html.no-js .p-nph-ruler__seg{background:linear-gradient(90deg, rgb(255 159 28 / .22), rgb(255 159 28 / .08)), var(--surface);border-color:rgb(255 159 28 / .6)}
.p-nph-ruler__seg.is-lit i,html.no-js .p-nph-ruler__seg i{color:var(--accent)}
.p-nph-ruler__fill{position:absolute;left:0;right:0;bottom:-7px;height:3px;background:var(--accent);transform:scaleX(var(--p));transform-origin:0 50%}
.p-nph-ruler__bar::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--line-strong);z-index:-1}
.p-nph-ruler__marker{position:absolute;bottom:-18px;left:calc(var(--p) * 100%);display:grid;place-items:center;width:24px;height:24px;margin-left:-12px;
  color:var(--on-accent);background:var(--accent);box-shadow:0 0 0 4px rgb(255 159 28 / .2)}
.p-nph-track.is-done .p-nph-ruler__marker{background:var(--ok);box-shadow:0 0 0 4px rgb(124 203 139 / .22);transition:background-color 300ms var(--ease-out)}
.p-nph-ruler__marker .i{width:16px;height:16px;stroke-width:2}

.p-nph-phases{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);list-style:none;margin:0;padding:0}
@media (min-width:640px){ .p-nph-phases{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .p-nph-phases{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)} }
.p-nph-phase{position:relative;isolation:isolate;overflow:hidden;min-width:0;padding:clamp(18px, 1.8vw, 26px);
  background:var(--bg-0);border:1px solid var(--line);border-top:3px solid var(--line-strong);transition:border-color 300ms var(--ease-out)}
.p-nph-phase.is-lit,html.no-js .p-nph-phase{border-top-color:var(--accent)}
.p-nph-phase--end.is-lit,html.no-js .p-nph-phase--end{border-top-color:var(--ok)}
.p-nph-phase__when{display:flex;align-items:baseline;gap:10px;font:700 var(--fs-label)/1.2 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.p-nph-phase--end .p-nph-phase__when{color:var(--ok)}
.p-nph-phase__code{position:absolute;right:10px;top:-4px;z-index:-1;font:400 clamp(4rem, 3rem + 2.4vw, 6rem)/1 var(--ff-stencil);letter-spacing:0;color:rgb(233 231 223 / .06)}
.p-nph-phase__title{margin-top:12px;font:800 clamp(1.5rem, 1.15rem + 1vw, 2.125rem)/1.04 var(--ff-display);font-stretch:75%;text-transform:uppercase;color:var(--text)}
.p-nph-phase__body{margin-top:10px;font-size:.9375rem;line-height:1.5;color:var(--text-2);max-inline-size:30ch}

/* ── 06 · MỤC TIÊU ────────────────────────────────────────────────────── */
.p-nph-targets{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@media (min-width:560px){ .p-nph-targets{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .p-nph-targets{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)} }
.p-nph-target{min-height:clamp(180px, 10vw + 80px, 232px);justify-content:flex-start}
.p-nph-target .target__value{margin-top:auto;font-size:clamp(3rem, 2rem + 3vw, 5rem);line-height:.95}
.p-nph-target .target__value small{font-size:.46em;letter-spacing:.02em;margin-inline-start:.08em}
.p-nph-target .target__name{font-size:1.0625rem;line-height:1.35}
.p-nph-target--key{border-color:rgb(224 192 99 / .5);background:linear-gradient(180deg, var(--target-bg), var(--bg-1))}

/* ── 07 · BA NẤC ──────────────────────────────────────────────────────── */
.p-nph-pass{counter-reset:none}
.p-nph-tier{display:flex;flex-direction:column;min-height:clamp(260px, 14vw + 120px, 340px)}
.p-nph-tier .pass__title{font-size:clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem);text-transform:uppercase}
.p-nph-tier__label{display:flex;align-items:center;gap:8px}
.p-nph-tier__label .i{width:18px;height:18px}
.p-nph-tier.is-done .p-nph-tier__label{color:var(--ok)}
.p-nph-tier.is-next .p-nph-tier__label{color:var(--accent)}
.p-nph-tier.is-gated .p-nph-tier__label{color:var(--gated)}
.p-nph-tier .pass__list li{font-size:1rem}
.p-nph-tier.is-next .pass__list li::before{background:var(--accent)}
.p-nph-tier.is-gated .pass__list li::before{background:var(--gated)}
.p-nph-tier__foot{margin-top:auto;padding-top:var(--s-5)}
.p-nph-tier--now{background:linear-gradient(180deg, var(--ok-bg), var(--surface) 55%)}
.p-nph-tier.is-gated{background:repeating-linear-gradient(135deg, rgb(184 163 242 / .04) 0 8px, transparent 8px 16px), var(--surface)}
@media (min-width:1024px){
  /* chevron between tiers */
  .p-nph-tier + .p-nph-tier::before{content:"";position:absolute;left:-13px;top:50%;z-index:2;width:24px;height:30px;margin-top:-15px;
    background:var(--line-strong);clip-path:polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%)}
  .p-nph-tier.is-next::before{background:var(--accent)}
}
.p-nph-extra{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
@media (min-width:768px){
  .p-nph-extra .p-nph-extra__card--vision{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"k k" "t b";align-items:baseline;column-gap:clamp(20px, 3vw, 48px)}
  .p-nph-extra__card--vision .card__kicker{grid-area:k}
  .p-nph-extra__card--vision .card__title{grid-area:t}
  .p-nph-extra__card--vision .card__body{grid-area:b}
}
.p-nph-extra__card{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:6px;padding:var(--s-5) clamp(20px, 2vw, 28px);background:var(--bg-0)}
.p-nph-extra__card .card__kicker{flex-basis:100%;color:var(--accent)}
.p-nph-extra__card .card__title{font:800 clamp(1.375rem, 1.1rem + .8vw, 1.75rem)/1.1 var(--ff-display);font-stretch:78%}
.p-nph-extra__card .card__body{flex-basis:100%}
.p-nph-extra__card--vision{border-color:rgb(111 211 232 / .4);background:linear-gradient(135deg, var(--intel-bg), var(--bg-0) 60%)}
.p-nph-extra__card--vision .card__kicker{color:var(--intel)}

/* ── 08 · CAM KẾT ─────────────────────────────────────────────────────── */
.p-nph-pledge__grid{display:grid;gap:clamp(40px, 5vw, 80px);align-items:center}
@media (min-width:1024px){ .p-nph-pledge__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.p-nph-pledge .sec-head{margin-bottom:var(--s-6)}
.p-nph-candid{max-inline-size:52ch;font-size:1rem}
.p-nph-memo{justify-self:center;inline-size:100%;max-inline-size:540px;padding-bottom:64px;rotate:-1.2deg}
.p-nph-memo__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.p-nph-memo__list li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--paper-rule);font:500 1.0625rem/1.4 var(--ff-body);color:var(--paper-ink)}
.p-nph-memo__list li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:8px;border-left:2.5px solid var(--paper-ok);border-bottom:2.5px solid var(--paper-ok);transform:rotate(-45deg)}
.p-nph-memo__stamp{right:22px;bottom:16px;font-size:1.375rem;transform:rotate(-8deg)}
.p-nph-memo .p-nph-memo__stamp{color:var(--paper-ok)}   /* "Công khai" = a public pledge, not a warning → ok-green, never danger red */

/* ── 09 · CTA ─────────────────────────────────────────────────────────── */
.p-nph-cta .deploy-cta__title{max-inline-size:16ch}
.p-nph-cta .deploy-cta__sub{max-inline-size:40ch}

/* print: the reel never shows */
@media print{
  .p-nph-memo{rotate:none}
  .p-nph-panel,.p-nph-hold,.p-nph-rules,.p-nph-metrics{background:none !important;break-inside:avoid}
  .p-nph-rule,.p-nph-metric{background:#fff !important}
  .p-nph-intel__grid,.p-nph-trust__grid{display:block}
  .p-nph-intel__side{margin-top:12pt}
}

/* side reveals (left/right) must never widen the page */
.p-nph-value,.p-nph-pledge,.p-nph-trust{overflow-x:clip}

/* ── phones: denser layouts (fewer screens of scrolling) ── */
@media (max-width:559px){
  .p-nph-gain{flex-direction:row;align-items:center;gap:14px;min-height:0;padding:14px 16px}
  .p-nph-gain__icon{width:44px;height:44px;flex:none}
  .p-nph-gain__icon .i{width:22px;height:22px}
  .p-nph-gain__title{flex:1 1 0;min-width:0;font-size:1.25rem}
  .p-nph-gain--proposal .p-nph-gain__title{flex:1 1 calc(100% - 58px)}
  .p-nph-gain--proposal,.p-nph-gain:has(.p-nph-gain__sub){flex-wrap:wrap}
  .p-nph-gain__sub{flex-basis:100%;margin:-8px 0 0 58px}
  .p-nph-gain__chip{position:static;margin:-4px 0 0 58px}
  .p-nph-targets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .p-nph-target{min-height:0;padding:14px 14px 16px;gap:8px}
  .p-nph-target::after{display:none}
  .p-nph-target .target__tag{padding:4px 6px}
  .p-nph-target .target__value{margin-top:6px;font-size:clamp(2.25rem, 1.2rem + 5vw, 2.75rem)}
  .p-nph-target .target__name{font-size:.9375rem}
}
@media (max-width:1023px){ .p-nph-tier{min-height:0} }
/* before core boots (tabs not wired yet) only the first demo panel shows; no-JS shows all three stacked */
html.js:not(.cd-ready) .p-nph-demo__panel ~ .p-nph-demo__panel{display:none}

/* deploy band over the partner terrain (same recipe as the Sảnh deploy band): calm zone behind the copy, top fade */
.p-nph-cta__terrain{--terrain-calm:.8;--terrain-calm-x:50%;--terrain-calm-y:46%;--terrain-calm-w:76%;--terrain-calm-h:72%;--terrain-fade:var(--bg-0)}
.p-nph-cta__terrain::before{opacity:.6}
.p-nph-cta .deploy-cta__bg::after{content:"";position:absolute;left:0;right:0;top:0;height:28%;z-index:2;background:linear-gradient(180deg, var(--bg-0), transparent)}
.p-nph-cta .deploy-cta__beam{z-index:1}

/* v3 fixes: 5th trust rule spans the row · scale-target note under the 6 target tiles */
@media (min-width:640px){ .p-nph-rule:last-child:nth-child(odd){grid-column:1 / -1} }
.p-nph-scale{display:flex;align-items:flex-start;gap:10px;margin-top:var(--s-4);max-inline-size:62ch;font:500 var(--fs-body)/1.45 var(--ff-body);color:var(--text-2)}
.p-nph-scale .i{width:18px;height:18px;flex:none;margin-top:.2em;color:var(--target)}