/* ==========================================================================
   lien-he.css — 06 · Liên hệ (unit P05). Page-scoped: body[data-page="lien-he"] / .p-lh-*
   Discord-only contact (v3c): beacon hero + live promise chips · 3-step flow beside a ticket mock
   (AI answers instantly, human takes over in office hours) · 4 route cards ending in the Discord CTA ·
   official Garena exits · FAQ · "rút quân thành công" end band.
   ========================================================================== */

.p-lh-em{font-style:normal;color:var(--ok)}

/* ───────────── HERO ───────────── */
.p-lh-hero{min-height:88vh;min-height:88svh}
.p-lh-hero .terrain{--terrain-calm:.9;--terrain-calm-x:16%;--terrain-calm-y:62%;--terrain-calm-w:64%;--terrain-calm-h:80%}
.p-lh-hero .hero__shade{background:
  linear-gradient(180deg, transparent 55%, var(--bg-0) 100%),
  linear-gradient(90deg, rgb(11 13 12 / .8) 0%, rgb(11 13 12 / .3) 50%, transparent 72%)}
.p-lh-hero .hero__title{max-inline-size:13ch}
.p-lh-hero .hero__title em{color:var(--ok)}
.p-lh-hero .hud-corners{--hc:rgb(124 203 139 / .45)}

/* beacon */
.p-lh-beacon{position:relative;pointer-events:none;align-self:stretch}
.p-lh-beacon__svg{display:block;inline-size:100%;block-size:100%;max-block-size:min(66vh, 620px);margin-inline:auto;overflow:visible}
.p-lh-beacon__svg .p-lh-beam,.p-lh-beacon__svg .p-lh-core,.p-lh-beacon__svg .p-lh-smoke{mix-blend-mode:screen}
.p-lh-beacon__tag{position:absolute;left:50%;top:6%;z-index:2;display:inline-flex;align-items:stretch;translate:-10% 0;
  font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.p-lh-beacon__tag b{padding:6px 8px;background:var(--ok);color:var(--on-accent)}
.p-lh-beacon__tag span{padding:6px 10px;color:var(--text);background:rgb(11 13 12 / .78);border:1px solid rgb(124 203 139 / .6);border-left:0}
@media (min-width:1024px){
  .p-lh-hero .hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .p-lh-beacon{block-size:min(66vh, 620px);margin-bottom:-16px}
}
@media (max-width:1023px){
  .p-lh-hero .hero__inner{position:static}
  .p-lh-hero .p-lh-hero__text{position:relative;z-index:2}
  .p-lh-beacon{position:absolute;right:-6%;top:calc(var(--header-h) + 8px);bottom:28%;z-index:0;inline-size:min(62vw, 360px);margin:0;opacity:.8}
  .p-lh-beacon__svg{max-block-size:none}
  .p-lh-beacon__tag{top:4%;translate:-40% 0}
}
@media (max-width:599px){ .p-lh-beacon{opacity:.7;right:-16%;bottom:46%} .p-lh-beacon__tag{display:none} }
/* phones: no tall empty hero — the routes follow the CTAs directly */
@media (max-width:767px){ .p-lh-hero{min-height:auto;padding-bottom:var(--s-6)} .p-lh-routes-sec{padding-top:var(--s-4)} }

/* ───────────── 01 · routes ───────────── */
.p-lh-routes{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:700px){ .p-lh-routes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1180px){ .p-lh-routes{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} }
.p-lh-route{--hc:var(--line-strong);position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;
  padding:22px 22px 22px;background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 40%, var(--bg-1) 100%);
  border:1px solid var(--line-strong);box-shadow:var(--shadow-card);transition:border-color var(--dur-hover) var(--ease-out),transform 300ms var(--ease-expo)}
.p-lh-route::before{content:"";position:absolute;inset:8px;z-index:-1;pointer-events:none;--arm:14px;
  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);
  background-repeat:no-repeat;transition:inset 200ms var(--ease-snap)}
.p-lh-route::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;transition:opacity 300ms var(--ease-out);
  background:radial-gradient(80% 50% at 80% 0%, rgb(124 203 139 / .12), transparent 70%)}
.p-lh-route:hover,.p-lh-route:focus-within{--hc:var(--ok);border-color:var(--ok)}
.p-lh-route:hover::before,.p-lh-route:focus-within::before{inset:4px}
.p-lh-route:hover::after,.p-lh-route:focus-within::after{opacity:1}
@media (hover:hover){ .p-lh-route:hover{transform:translateY(-4px)} }
.p-lh-route__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.p-lh-route__code{font:400 clamp(2rem, 1.6rem + 1vw, 2.75rem)/1 var(--ff-stencil);color:var(--text-3);transition:color var(--dur-hover) var(--ease-out)}
.p-lh-route:hover .p-lh-route__code,.p-lh-route:focus-within .p-lh-route__code{color:var(--ok)}
.p-lh-route__ico{display:grid;place-items:center;width:52px;height:52px;color:var(--ok);border:1px solid rgb(124 203 139 / .5);background:var(--ok-bg)}
.p-lh-route__ico .i{width:26px;height:26px;stroke-width:1.5}
.p-lh-route__name{margin-top:18px;font:800 clamp(1.625rem, 1.3rem + .9vw, 2.125rem)/1.02 var(--ff-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.005em;min-height:2.04em}


/* steps on a route line → EX */
.p-lh-steps{position:relative;display:grid;gap:0;margin:20px 0 22px;padding:0;list-style:none;counter-reset:lhs}
.p-lh-steps::before{content:"";position:absolute;left:11px;top:14px;bottom:16px;width:0;border-left:2px dashed rgb(124 203 139 / .45)}
.p-lh-steps li{position:relative;counter-increment:lhs;min-height:44px;padding:9px 0 9px 38px;font:500 .9375rem/1.4 var(--ff-body);color:var(--text)}
.p-lh-steps li::before{content:counter(lhs);position:absolute;left:0;top:8px;display:grid;place-items:center;width:24px;height:24px;
  font:700 .75rem/1 var(--ff-mono);color:var(--text);background:var(--bg-0);border:1px solid var(--line-strong)}
.p-lh-steps li.is-ex{font-weight:700}
.p-lh-steps li.is-ex::before{content:"EX";width:24px;font-size:.625rem;letter-spacing:0;color:var(--on-accent);background:var(--ok);border-color:var(--ok);
  box-shadow:0 0 0 4px rgb(124 203 139 / .18)}
.p-lh-steps .keycap{font-size:.8125rem}
.p-lh-chan{font:500 .8125rem/1.4 var(--ff-mono);color:var(--intel);overflow-wrap:anywhere}
.p-lh-route__cta{margin-top:auto}

/* ───────────── 03 · FAQ ───────────── */
.p-lh-faq{display:grid;gap:var(--s-6)}
@media (min-width:1024px){
  .p-lh-faq{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-8);align-items:start}
  .p-lh-faq__head{position:sticky;top:calc(var(--header-h) + 32px);margin-bottom:0}
}
.p-lh-faq__meta{margin-top:var(--s-4);font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
@media (max-width:1023px){ .p-lh-faq__head{margin-bottom:0} }
.p-lh-faq__list .acc__sum{font-size:1.0625rem}
.p-lh-faq__list .acc[open]{border-color:var(--ok)}
.p-lh-faq__list .acc[open] > .acc__sum{color:var(--text)}
.p-lh-faq__list .acc__body p{max-inline-size:62ch}
.p-lh-faq__list .acc__body .ext-link{display:inline-block;min-height:44px;padding-block:11px;line-height:1.3}

/* ───────────── 04 · official exits ───────────── */
.p-lh-exit{padding:clamp(20px, 2.4vw, 36px);background:var(--ok-bg);border:1px solid rgb(124 203 139 / .5);border-left:4px solid var(--ok)}
.p-lh-exit__title{display:flex;align-items:center;gap:10px;font:700 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.p-lh-exit__title .i{width:20px;height:20px}
.p-lh-exit__list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:18px;list-style:none;padding:0}
@media (min-width:860px){ .p-lh-exit__list{grid-template-columns:repeat(3,minmax(0,1fr))} }
.p-lh-exit__link{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;
  min-height:72px;padding:14px 16px;color:var(--text);text-decoration:none;background:rgb(11 13 12 / .45);border:1px solid rgb(124 203 139 / .3);
  transition:border-color var(--dur-hover) var(--ease-out),background-color var(--dur-hover) var(--ease-out)}
.p-lh-exit__link > .i:first-child{grid-row:1 / span 2;width:26px;height:26px;color:var(--ok);stroke-width:1.5}
.p-lh-exit__dom{font:700 1rem/1.3 var(--ff-mono);color:var(--text);overflow-wrap:anywhere}
.p-lh-exit__hint{grid-column:2;font-size:var(--fs-small);color:var(--text-2)}
.p-lh-exit__go{grid-column:3;grid-row:1 / span 2;width:20px;height:20px;color:var(--text-3);transition:translate 240ms var(--ease-expo),color var(--dur-hover) var(--ease-out)}
.p-lh-exit__link:hover,.p-lh-exit__link:focus-visible{border-color:var(--ok);background:rgb(124 203 139 / .08);color:var(--text)}
.p-lh-exit__link:hover .p-lh-exit__go,.p-lh-exit__link:focus-visible .p-lh-exit__go{color:var(--ok);translate:3px -3px}

/* ───────────── end band ───────────── */
.p-lh-end__stamp{margin-bottom:var(--s-5)}
.p-lh-end__stamp .stamp{font-size:clamp(1.125rem, 1rem + .6vw, 1.5rem);padding:8px 16px 6px;border-width:3px}
.p-lh-end .deploy-cta__title{max-inline-size:14ch}
/* exfil terrain behind the end band (pattern of index .p-index-deploy) */
.p-lh-end__terrain{--terrain-calm:.8;--terrain-calm-x:50%;--terrain-calm-y:48%;--terrain-calm-w:76%;--terrain-calm-h:70%;--terrain-fade:var(--bg-0)}
.p-lh-end__terrain::before{opacity:.6}
.p-lh-end .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-lh-end .deploy-cta__beam{z-index:1}
.p-lh-end .btn--secondary{background:rgb(17 20 18 / .88)}

/* no-JS: tint the pre-rendered (home) terrain fallback toward the exfil green */
html.no-js .p-lh-hero .terrain::before{filter:hue-rotate(80deg) saturate(.7)}

/* ═════════════ v3 · meeting-ready contact page ═════════════ */
/* route cards */
.p-lh-route__name{min-height:0}
@media (min-width:1180px){ .p-lh-route__name{min-height:2.04em} }
.p-lh-route .p-lh-steps{margin-top:16px}


/* ═════════════ v3c · Discord-only contact ═════════════ */
/* hero: live promise chips (AI 24/7 · human in office hours) */
.p-lh-live{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s-5) 0 0;padding:0;list-style:none}
.p-lh-live__item{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;
  font:600 var(--fs-small)/1.3 var(--ff-body);color:var(--text);background:rgb(11 13 12 / .72);border:1px solid var(--line-strong)}
.p-lh-live__item .i{flex:none;width:18px;height:18px;color:var(--text-2)}
.p-lh-live__item--ai{border-color:rgb(124 203 139 / .6)}
.p-lh-live__item--ai .i{color:var(--ok)}
.p-lh-live__dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.p-lh-live__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:p-lh-ping 1.6s var(--ease-out) 4}
@keyframes p-lh-ping{0%{opacity:.8;scale:1}100%{opacity:0;scale:3}}
@media (max-width:479px){ .p-lh-live__item{inline-size:100%} }

/* 01 · three steps */
.p-lh-flow .feature__title em{display:block}
.p-lh-fsteps{position:relative;display:grid;gap:0;margin:var(--s-6) 0 0;padding:0;list-style:none}
.p-lh-fsteps::before{content:"";position:absolute;left:21px;top:26px;bottom:34px;border-left:2px dashed rgb(124 203 139 / .4)}
.p-lh-fstep{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding:12px 0 18px}
.p-lh-fstep__n{grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;
  font:700 1.125rem/1 var(--ff-mono);color:var(--text);background:var(--bg-0);border:1px solid var(--line-strong)}
.p-lh-fstep--ok .p-lh-fstep__n{color:var(--on-accent);background:var(--ok);border-color:var(--ok);box-shadow:0 0 0 5px rgb(124 203 139 / .18)}
.p-lh-fstep__t{align-self:center;font:800 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.15 var(--ff-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.01em}
.p-lh-fstep__d{margin-top:4px;max-inline-size:44ch;font-size:1.0625rem;line-height:1.5;color:var(--text-2);text-wrap:pretty}
.p-lh-type{font-weight:700;color:var(--text)}
.p-lh-fstep__d .p-lh-invite{display:inline-block;min-height:44px;padding-block:10px;line-height:1.4;overflow-wrap:anywhere}
.p-lh-candid{margin-top:var(--s-4)}
.p-lh-candid > .i{color:var(--accent)}
.p-lh-candid .candid__label{color:var(--accent)}
.p-lh-candid a{display:inline-block;min-height:44px;padding-block:10px;color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* 01 · ticket mock */
.p-lh-ticketwrap{align-self:center}
.p-lh-ticket{inline-size:100%;max-inline-size:34rem;margin-inline:auto;padding:18px 18px 20px;border-color:rgb(124 203 139 / .4)}
.p-lh-ticket__chan{gap:8px;padding-right:100px}
.p-lh-ticket__chan > .i{width:16px;height:16px;color:var(--ok)}
.p-lh-ticket__priv{display:inline-flex;align-items:center;gap:4px;margin-inline-start:4px;padding:2px 6px;
  font:700 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--line-strong)}
.p-lh-ticket__priv .i{width:11px;height:11px}
.p-lh-ticket__time{font:500 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.04em;color:var(--text-3)}
.p-lh-ticket__time--now{color:var(--ok)}
.p-lh-ticket .dc-app{background:var(--ok)}
.p-lh-ticket__ai{position:relative}
.p-lh-typing{position:absolute;left:48px;top:30px;display:flex;gap:5px;align-items:center;padding:10px 12px;margin:0;
  background:var(--surface-2);border-radius:var(--radius);opacity:0;visibility:hidden}
.p-lh-typing i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.p-lh-handoff{display:flex;align-items:flex-start;gap:10px;margin:var(--s-4) 0;padding:10px 12px;
  font:600 var(--fs-small)/1.45 var(--ff-body);color:var(--text);background:var(--ok-bg);border:1px dashed rgb(124 203 139 / .6)}
.p-lh-handoff .i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--ok)}
.p-lh-ticket__staff .dc-alias{background:rgb(124 203 139 / .14);border-color:rgb(124 203 139 / .5);color:var(--ok)}
.p-lh-ticket .dc-msg + .p-lh-handoff{margin-top:var(--s-4)}

/* 02 · which ticket to open (route cards) */
.p-lh-tline{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;margin-top:auto;padding-top:12px;border-top:1px dashed rgb(233 231 223 / .14);
  font:500 var(--fs-small)/1.45 var(--ff-body);color:var(--text-2)}
.p-lh-tline .i{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ok)}
.p-lh-tline b{color:var(--text);font-weight:700}
.p-lh-route .p-lh-route__cta{margin-top:0}

/* 03 · exits: one-line lead */
.p-lh-exit__lead{margin-top:10px;max-inline-size:60ch;font:500 1.0625rem/1.5 var(--ff-body);color:var(--text)}
.p-lh-route__cta.btn{flex-wrap:nowrap;padding-inline:14px;column-gap:8px}
@media (min-width:1180px){ .p-lh-tline{min-height:calc(2 * 1.45em + 12px)} }
.p-lh-ticket__chan > span{white-space:nowrap}
@media (max-width:479px){ .p-lh-ticket__chan{flex-wrap:wrap;padding:18px 0 10px} }