/* ==========================================================================
   lien-he.css — 06 · Liên hệ (unit P05). Page-scoped: body[data-page="lien-he"] / .p-lh-*
   Extraction beacon hero · 4 route cards (steps on a route line ending at EX) ·
   contact dogtag · FAQ · official Garena exits · "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)}
.p-lh-eta{font-size:var(--fs-label);color:var(--text)}
.p-lh-eta .i{color:var(--ok)}
.p-lh-eta .cfg-empty{text-transform:none;letter-spacing:.02em}

/* 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}

/* ───────────── 02 · contact dogtag ───────────── */
.p-lh-tagrow .feature__title{max-inline-size:16ch}
.p-lh-tagrow .feature__title em{display:block}
.p-lh-candid{margin-top:var(--s-6)}
.p-lh-tagwrap{position:relative;overflow:visible;padding:40px 0 20px;min-height:0}
.p-lh-tag.dogtag{position:relative;z-index:2;inline-size:100%;max-inline-size:34rem;margin-inline:auto;padding:28px 28px 26px 64px;border-radius:26px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .07), transparent 40%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .012) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #2A312C, #1A1F1B);
  border:1px solid #7C877E;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -2px 0 rgb(0 0 0 / .4), 0 30px 60px -28px rgb(0 0 0 / .95)}
.p-lh-tag.dogtag::before{left:22px;width:20px;height:20px;margin-top:-10px}
.p-lh-tag--back{position:absolute;z-index:1;left:50%;top:28px;inline-size:min(100%, 34rem);block-size:calc(100% - 40px);translate:-46% 0;rotate:-5deg;
  border-radius:26px;background:linear-gradient(180deg, #232A25, #151916);border:1px solid #525C54}
.p-lh-tag .dogtag__title{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--khaki)}
.p-lh-tag dd{font-size:.9375rem;text-shadow:0 1px 0 rgb(0 0 0 / .6)}
.p-lh-tag dt{color:var(--text-2)}
.p-lh-subject{color:var(--accent)}
.p-lh-copy{margin-top:18px}
@media (max-width:559px){
  .p-lh-tagwrap{overflow-x:clip;padding-inline:4px}
  .p-lh-tag--back{inline-size:calc(100% - 24px);translate:-50% 0;rotate:-3deg}
  .p-lh-tag.dogtag{padding:24px 18px 22px 50px;border-radius:20px}
  .p-lh-tag.dogtag::before{left:16px}
}

/* ───────────── 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: key promise between name and steps */
.p-lh-route__name{min-height:0}
@media (min-width:1180px){ .p-lh-route__name{min-height:2.04em} }
.p-lh-promise{margin-top:14px;padding:12px 14px 13px;font:600 1rem/1.45 var(--ff-body);color:var(--text);text-wrap:pretty;
  background:rgb(124 203 139 / .07);border-left:3px solid var(--ok)}
.p-lh-promise__k{display:block;margin-bottom:4px;font:700 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
@media (min-width:1180px){ .p-lh-promise{min-height:calc(2 * 1.45em + 25px + var(--fs-micro) * 1.2 + 4px)} }
.p-lh-route .p-lh-steps{margin-top:16px}

/* 02 · sau buổi gặp — two debrief panels */
.p-lh-after{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:800px){ .p-lh-after{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} }
.p-lh-brief{--hc:var(--line-strong);position:relative;display:flex;flex-direction:column;min-width:0;padding:22px 24px 24px;
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 55%, var(--bg-1) 100%);border:1px solid var(--line-strong);box-shadow:var(--shadow-card)}
.p-lh-brief::before{content:"";position:absolute;inset:8px;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)) bottom right / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) bottom right / 2px var(--arm);
  background-repeat:no-repeat}
.p-lh-brief--next{--hc:var(--ok);border-color:rgb(124 203 139 / .55)}
.p-lh-brief__bar{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line);
  font:700 var(--fs-label)/1.2 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.p-lh-brief__bar .i{width:20px;height:20px;color:var(--accent)}
.p-lh-brief--next .p-lh-brief__bar .i{color:var(--ok)}
.p-lh-check{display:grid;gap:0;margin:6px 0 0;padding:0;list-style:none}
.p-lh-check li{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;border-bottom:1px dashed rgb(233 231 223 / .1);
  font:500 1.0625rem/1.4 var(--ff-body);color:var(--text)}
.p-lh-check li:last-child{border-bottom:0}
.p-lh-check .i{flex:none;width:20px;height:20px;margin-top:2px;color:var(--accent)}
.p-lh-brief__to{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin-top:auto;padding-top:8px;
  font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.p-lh-brief__to .i{width:16px;height:16px;transition:translate 240ms var(--ease-expo)}
.p-lh-brief__to:hover .i,.p-lh-brief__to:focus-visible .i{translate:0 3px}
.p-lh-steps--next{margin:10px 0 0}
.p-lh-steps--next li{font-size:1.0625rem}

/* contact card: always-on Discord + ticket rows */
.p-lh-tag dd .ext-link{display:inline-block;min-height:44px;padding-block:11px;line-height:1.3;overflow-wrap:anywhere}
.p-lh-tag dl > div:has(.ext-link){align-items:center}
.p-lh-invite{white-space:nowrap}
.p-lh-steps--next li{min-height:60px;padding-block:17px}
.p-lh-steps--next li::before{top:16px}
.p-lh-steps--next::before{top:24px;bottom:26px}
.p-lh-brief__eta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font:500 var(--fs-small)/1.4 var(--ff-body);color:var(--text-2)}
.p-lh-brief__eta[hidden]{display:none}
.p-lh-brief__eta .i{width:18px;height:18px;color:var(--ok)}