/* ==========================================================================
   lo-trinh.css — 05 · Lộ trình (unit P05). Page-scoped: body[data-page="lo-trinh"] / .p-lt-*
   Hero "thẻ mùa" XP bar · season-pass tiers with loot tiles + "BẠN ĐANG Ở ĐÂY" marker ·
   AI principles as a locked settings panel · 5 commitments · CTA.
   ========================================================================== */

body[data-page="lo-trinh"]{
  --lt-done:var(--ok);
  --lt-next:var(--accent);
  --lt-gate:var(--gated);
  --lt-cols:minmax(0,1fr) minmax(0,1.32fr) minmax(0,1fr);
  --lt-here-x:calc(100% / 3.32);
}
.p-lt-ok{font-style:normal;color:var(--ok)}
.p-lt-em{font-style:normal;color:var(--accent)}

/* ───────────── HERO ───────────── */
.p-lt-hero{min-height:88vh;min-height:88svh}
.p-lt-hero .terrain{--terrain-calm:.9;--terrain-calm-x:18%;--terrain-calm-y:62%;--terrain-calm-w:70%;--terrain-calm-h:80%}
.p-lt-hero .hero__shade{background:
  linear-gradient(180deg, transparent 50%, var(--bg-0) 100%),
  linear-gradient(90deg, rgb(11 13 12 / .78) 0%, rgb(11 13 12 / .3) 52%, transparent 78%)}
.p-lt-hero .hero__title{max-inline-size:14ch}
/* the terrain toggle owns the top-right corner (terrain.css, G0-09) — the season readout sits under it */
.p-lt-hero .hero__readout{top:calc(var(--header-h) + 72px)}

/* season XP bar */
.p-lt-xp{position:relative;margin-top:clamp(32px, 5vh, 56px);max-inline-size:920px;
  padding:18px clamp(16px, 2vw, 26px) 16px;
  background:linear-gradient(180deg, rgb(23 27 24 / .88), rgb(11 13 12 / .82));
  border:1px solid var(--line);box-shadow:var(--shadow-card)}
.p-lt-xp::before{content:"";position:absolute;inset:-1px auto auto -1px;width:18px;height:18px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);pointer-events:none}
.p-lt-xp::after{content:"";position:absolute;inset:auto -1px -1px auto;width:18px;height:18px;border-bottom:2px solid var(--line-strong);border-right:2px solid var(--line-strong);pointer-events:none}
.p-lt-xp__hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.p-lt-xp__name{font:600 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.p-lt-xp__lvl{display:inline-flex;align-items:baseline;gap:6px;font:500 var(--fs-label)/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.p-lt-xp__lvl b{font:400 clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem)/.9 var(--ff-stencil);color:var(--ok);letter-spacing:0}
.p-lt-xp__lvl b + span{font:400 1.5rem/1 var(--ff-stencil);color:var(--text-3);margin-inline-end:4px}
.p-lt-xp__here{position:relative;display:inline-flex;align-items:center;gap:8px;margin:14px 0 0 calc((100% - 12px) / 3 + 2px);
  padding:7px 11px 6px 9px;font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--on-accent);background:var(--accent)}
.p-lt-xp__here .i{width:14px;height:14px}
.p-lt-xp__bar{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;height:14px;margin-top:10px}
.p-lt-xp__seg{position:relative;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.p-lt-xp__seg.is-done{border-color:var(--ok);background:var(--ok-bg)}
.p-lt-xp__fill{position:absolute;inset:0;background:linear-gradient(90deg, #4f9a5e, var(--ok));transform-origin:0 50%}
.p-lt-xp__fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg, transparent 0 10px, rgb(11 13 12 / .28) 10px 12px)}
.p-lt-xp__seg.is-next{border:1px dashed var(--accent);background:repeating-linear-gradient(135deg, rgb(255 159 28 / .14) 0 5px, transparent 5px 10px)}
.p-lt-xp__seg.is-gated{display:grid;place-items:center;border-color:rgb(184 163 242 / .55);background:repeating-linear-gradient(135deg, rgb(184 163 242 / .12) 0 5px, transparent 5px 10px)}
.p-lt-xp__seg.is-gated .i{width:10px;height:10px;color:var(--gated)}
.p-lt-xp__pin{position:absolute;left:calc((100% - 12px) / 3 + 2px);top:-12px;bottom:-6px;width:2px;background:var(--accent);transform-origin:50% 100%}
.p-lt-xp__pin::after{content:"";position:absolute;left:-4px;bottom:-4px;width:10px;height:10px;background:var(--accent);rotate:45deg}
.p-lt-xp__labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
.p-lt-xp__labels li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0;font:600 .9375rem/1.3 var(--ff-body);color:var(--text)}
.p-lt-xp__labels b{font:700 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.08em;color:var(--text-3)}
.p-lt-xp__labels .is-done b{color:var(--ok)}
.p-lt-xp__labels .is-next b{color:var(--accent)}
.p-lt-xp__labels .is-gated b{color:var(--gated)}
.p-lt-xp__labels .is-gated{color:var(--text-2)}
@media (max-width:599px){
  .p-lt-xp__here{margin-left:0}
  .p-lt-xp__labels li{flex-direction:column;gap:2px;font-size:.8125rem}
}

/* ───────────── 01 · season pass ───────────── */
.p-lt-pass-sec{overflow:clip}
.p-lt-ghost{position:absolute;right:var(--gutter);top:.1em;z-index:0;pointer-events:none;
  font:400 clamp(10rem, 6rem + 16vw, 24rem)/1 var(--ff-stencil);color:rgb(233 231 223 / .03)}
.p-lt-pass{position:relative}
.p-lt-pass__list{position:relative;display:grid;gap:0;list-style:none;margin:0;padding:0}
@media (min-width:1024px){ .p-lt-pass__list{grid-template-columns:var(--lt-cols);padding-top:56px} }

.p-lt-tier{position:relative;isolation:isolate;min-width:0;overflow:hidden;
  padding:clamp(22px, 2.2vw, 36px) clamp(18px, 2vw, 32px) clamp(24px, 2.4vw, 40px);
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-1) 100%);border:1px solid var(--line)}
@media (min-width:1024px){ .p-lt-tier + .p-lt-here + .p-lt-tier,.p-lt-tier + .p-lt-tier{border-left:0} }
.p-lt-tier__rail{position:absolute;left:-1px;right:-1px;top:-1px;height:5px;background:var(--surface-3);overflow:hidden}
.p-lt-tier__rail i{position:absolute;inset:0;transform-origin:0 50%}
.p-lt-tier--done .p-lt-tier__rail i{background:linear-gradient(90deg, #4f9a5e, var(--ok))}
.p-lt-tier--next .p-lt-tier__rail{background:repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 20px)}
.p-lt-tier--gated .p-lt-tier__rail{background:repeating-linear-gradient(135deg, rgb(184 163 242 / .7) 0 4px, transparent 4px 8px)}
.p-lt-tier__ghost{position:absolute;right:10px;top:-.1em;z-index:-1;pointer-events:none;
  font:400 clamp(7rem, 5rem + 5vw, 11rem)/1 var(--ff-stencil);color:rgb(233 231 223 / .04)}
.p-lt-tier--done .p-lt-tier__ghost{color:rgb(124 203 139 / .08)}
.p-lt-tier__label{font:700 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.p-lt-tier__title{margin-top:8px;font:800 clamp(1.75rem, 1.3rem + 1.3vw, 2.75rem)/1.02 var(--ff-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.005em}
.p-lt-tier__state{margin-top:14px}
.p-lt-tier--gated{background:
  repeating-linear-gradient(135deg, rgb(184 163 242 / .035) 0 10px, transparent 10px 20px),
  linear-gradient(180deg, var(--surface) 0%, var(--bg-1) 100%)}
.p-lt-tier--gated .p-lt-tier__title{color:var(--text-2)}

/* stat trio in GĐ1 */
.p-lt-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;padding:14px 0;border-block:1px solid var(--line)}
.p-lt-stats li{display:flex;flex-direction:column;gap:4px;min-width:0;font:500 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.p-lt-stats b{font-size:clamp(2.25rem, 1.7rem + 1.5vw, 3.25rem);line-height:.9;color:var(--ok);font-weight:400}

/* loot tiles */
.p-lt-loot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px;list-style:none;padding:0}
.p-lt-loot__item{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-width:0;min-height:108px;
  padding:14px 12px 12px;background:var(--bg-0);border:1px solid var(--line-strong);
  font:600 .9375rem/1.3 var(--ff-body);color:var(--text)}
.p-lt-loot__item > .i{width:28px;height:28px;stroke-width:1.5;color:var(--text-2)}
.p-lt-loot__item > span{min-width:0;overflow-wrap:break-word}
.p-lt-tier--done .p-lt-loot__item{border-color:rgb(124 203 139 / .45);background:linear-gradient(160deg, rgb(124 203 139 / .1), transparent 60%), var(--bg-0)}
.p-lt-tier--done .p-lt-loot__item > .i{color:var(--ok)}
.p-lt-tier--done .p-lt-loot__item::after{content:"";position:absolute;top:8px;right:8px;width:20px;height:20px;
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%230B0D0C' stroke-width='3.2'/%3E%3C/svg%3E") center / 14px no-repeat}
.p-lt-loot--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:519px){ .p-lt-loot--3{grid-template-columns:repeat(2,minmax(0,1fr))} .p-lt-loot--3 .p-lt-loot__item:last-child{grid-column:1 / -1;min-height:84px} }
.p-lt-tier--next .p-lt-loot__item{border-style:dashed;border-color:rgb(255 159 28 / .55)}
.p-lt-tier--next .p-lt-loot__item > .i{color:var(--accent)}
.p-lt-loot--locked .p-lt-loot__item{border-color:rgb(184 163 242 / .38);color:var(--text-2);background:rgb(35 31 54 / .35)}
.p-lt-loot--locked .p-lt-loot__item > .i{color:var(--gated);opacity:.8}
.p-lt-loot--locked .p-lt-loot__item::after{content:"";position:absolute;top:8px;right:8px;width:18px;height:18px;background:var(--gated);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='1'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='1'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat}
.p-lt-loot--locked .p-lt-loot__item:last-child:nth-child(odd){grid-column:1 / -1;min-height:84px}

/* GĐ2 milestones */
.p-lt-sub{display:flex;align-items:center;gap:10px;margin-top:24px;font:700 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.p-lt-sub::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.p-lt-ms{display:grid;gap:0;margin-top:10px;list-style:none;padding:0}
.p-lt-ms li{display:grid;grid-template-columns:minmax(6.2rem, auto) minmax(0,1fr);align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
  font:500 .9375rem/1.4 var(--ff-body);color:var(--text)}
.p-lt-ms li:last-child{border-bottom:0}
.p-lt-ms__when{justify-self:start;padding:4px 7px 3px;font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.06em;white-space:nowrap;
  color:var(--target);background:var(--target-bg);border:1px solid rgb(224 192 99 / .5)}

/* BẠN ĐANG Ở ĐÂY marker */
.p-lt-here{position:relative;display:flex;align-items:center;gap:0;min-height:64px;padding-left:18px;list-style:none}
.p-lt-here__line{position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--accent);transform-origin:50% 0}
.p-lt-here__chip{position:relative;display:inline-flex;flex-wrap:nowrap;inline-size:max-content;align-items:center;gap:6px 10px;margin-left:0;padding:9px 14px 8px 11px;
  font:700 var(--fs-label)/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--on-accent);background:var(--accent);box-shadow:0 0 0 6px rgb(255 159 28 / .16), 0 14px 30px -12px rgb(0 0 0 / .8)}
.p-lt-here__chip .i{width:16px;height:16px}
.p-lt-here__chip b{padding-left:10px;border-left:1px solid rgb(11 13 12 / .35);font-weight:700}
@media (min-width:1024px){
  .p-lt-here{position:absolute;left:var(--lt-here-x);top:0;bottom:0;width:0;min-height:0;padding:0;z-index:3;display:block}
  .p-lt-here__line{left:-1px;top:40px;bottom:0;background:linear-gradient(180deg, var(--accent), rgb(255 159 28 / .15) 70%, transparent)}
  .p-lt-here__chip{position:absolute;top:0;left:0;translate:-50% 0}
  .p-lt-here__chip::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--accent);translate:-50% 0;rotate:45deg}
}

/* ───────────── 02 · AI principles panel ───────────── */
.p-lt-ai-sec{overflow:clip}
.p-lt-ai .feature__visual{overflow:visible}
.p-lt-ai .feature__title{max-inline-size:12ch;font-size:clamp(2.25rem, 1.4rem + 2.8vw, 4rem)}
.p-lt-cfg{position:relative;inline-size:100%;max-inline-size:620px;justify-self:end;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));border:1px solid var(--line-strong);box-shadow:var(--shadow-card)}
.p-lt-cfg::before{content:"";position:absolute;inset:-7px;pointer-events:none;
  background:
    linear-gradient(var(--intel),var(--intel)) top left / 18px 2px, linear-gradient(var(--intel),var(--intel)) top left / 2px 18px,
    linear-gradient(var(--intel),var(--intel)) bottom right / 18px 2px, linear-gradient(var(--intel),var(--intel)) bottom right / 2px 18px;
  background-repeat:no-repeat;opacity:.7}
.p-lt-cfg__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-strong);
  font:700 var(--fs-label)/1.2 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:rgb(11 13 12 / .45)}
.p-lt-cfg__hd > span{display:inline-flex;align-items:center;gap:8px}
.p-lt-cfg__hd .i{width:18px;height:18px;color:var(--intel)}
/* lock only on the truly permanent rules */
.p-lt-cfg__fixed{display:inline-grid;place-items:center;width:24px;height:24px;color:var(--accent);border:1px solid rgb(255 159 28 / .55);background:var(--accent-tint)}
.p-lt-cfg__fixed .i{width:13px;height:13px}
.p-lt-cfg__ft{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 18px 12px;border-top:1px solid var(--line-strong);
  font:500 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);background:rgb(11 13 12 / .35)}
.p-lt-cfg__ft .p-lt-cfg__fixed{width:20px;height:20px}
.p-lt-cfg__ft .p-lt-cfg__fixed .i{width:11px;height:11px}
.p-lt-cfg__list{display:grid;margin:0;padding:6px 0}
.p-lt-cfg__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;min-height:60px;padding:10px 18px;border-bottom:1px solid var(--line)}
.p-lt-cfg__row:last-child{border-bottom:0}
.p-lt-cfg__row dt{display:inline-flex;align-items:center;gap:12px;min-width:0;font:600 1rem/1.35 var(--ff-body);color:var(--text)}
.p-lt-cfg__row dt .i{width:22px;height:22px;color:var(--text-2);flex:none}
.p-lt-cfg__row dd{display:inline-flex;align-items:center;gap:10px;margin:0 0 0 auto;
  font:700 var(--fs-label)/1.2 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.p-lt-cfg__pick{color:var(--accent) !important;padding:6px 4px;border:1px solid rgb(255 159 28 / .5);background:var(--accent-tint)}
.p-lt-cfg__pick .i{width:16px;height:16px;color:var(--text-3)}
.p-lt-cfg__row--never{background:linear-gradient(90deg, rgb(255 90 78 / .1), transparent 70%)}
.p-lt-cfg__row--never dt .i{color:var(--danger)}
.p-lt-cfg__row--never dd{color:var(--danger)}
.p-lt-sw{position:relative;display:inline-block;width:38px;height:20px;border:1px solid currentColor;background:rgb(11 13 12 / .6)}
.p-lt-sw::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:currentColor}
.p-lt-sw.is-on{background:rgb(124 203 139 / .18)}
.p-lt-sw.is-on::after{left:auto;right:3px}
@media (max-width:479px){
  .p-lt-cfg__row{padding:10px 14px}
  .p-lt-cfg__row dt{font-size:.9375rem;gap:10px}
}

/* ───────────── 03 · commitments ───────────── */
.p-lt-oath{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;list-style:none;margin:0;padding:0}
@media (min-width:640px){ .p-lt-oath{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .p-lt-oath{grid-template-columns:repeat(5,minmax(0,1fr));gap:0} }
.p-lt-oath__item{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:18px 12px;min-width:0;
  padding:clamp(20px, 2vw, 28px);background:var(--bg-0);border:1px solid var(--line)}
@media (min-width:1100px){
  .p-lt-oath__item{min-height:250px}
  .p-lt-oath__item + .p-lt-oath__item{border-left:0}
}
.p-lt-oath__item::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--line-strong)}
.p-lt-oath__item:first-child::before{background:var(--accent)}
.p-lt-oath__n{font:400 clamp(3rem, 2.2rem + 2.2vw, 4.75rem)/.9 var(--ff-stencil);color:var(--text-3)}
.p-lt-oath__item:first-child .p-lt-oath__n{color:var(--accent)}
.p-lt-oath__item > .i{width:28px;height:28px;stroke-width:1.5;color:var(--accent);align-self:start;margin-top:4px}
.p-lt-oath__item p{grid-column:1 / -1;align-self:start} /* integration: titles share one top line */
.p-lt-oath__item p{font-size:1rem;line-height:1.5;color:var(--text-2)}
.p-lt-oath__item p b{display:block;margin-bottom:2px;font:700 1.125rem/1.3 var(--ff-body);color:var(--text)}
@media (max-width:639px){
  .p-lt-oath__item{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto;column-gap:16px;align-items:start}
  .p-lt-oath__n{font-size:2.75rem}
  .p-lt-oath__item > .i{display:none}
  .p-lt-oath__item p{grid-column:2;align-self:center}
}

/* ───────────── CTA ───────────── */
.p-lt-cta .deploy-cta__title{max-inline-size:16ch}
/* terrain behind the deploy band (pattern of index .p-index-deploy) */
.p-lt-cta__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-lt-cta__terrain::before{opacity:.6}
.p-lt-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-lt-cta .deploy-cta__beam{z-index:1}
.p-lt-cta .btn--secondary{background:rgb(17 20 18 / .88)}
@media (min-width:1024px) and (max-width:1279px){
  .p-lt-loot__item{font-size:.875rem;padding:12px 10px 10px}
  .p-lt-tier{padding-inline:16px}
}