/* ============================================================
   /he-sinh-thai — trang Hệ sinh thái học tập (port mockup v2)
   Prefix bắt buộc: .hst-*  (CLAUDE.md quy tắc 6).
   Token: chỉ dùng biến trong home-pne.css.
   ============================================================ */

.hst-wrap { max-width: 1060px; margin: 0 auto; padding: 0 40px; }
.hst-de {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: #5F4800; background: var(--gold); padding: 2px 9px; border-radius: 6px;
}

/* ============ HERO — light, lưới chấm tech ============ */
.hst-hero { position: relative; text-align: center; padding: 52px 0 26px; max-width: 760px; margin: 0 auto; }
.hst-hero::before {
  content: ''; position: absolute; inset: -20px -120px 0;
  background-image: radial-gradient(rgba(209,32,38,.13) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 50% 0%, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 90% at 50% 0%, #000 35%, transparent 75%);
  pointer-events: none;
}
.hst-hero > * { position: relative; }
.hst-eyebrow { font: 700 12px var(--ff); text-transform: uppercase; letter-spacing: .14em; color: var(--red); margin-top: 12px; }
.hst-hero h1 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -.028em; margin-top: 10px; }
.hst-hero h1 em { font-style: normal; color: var(--red); }
.hst-hero p { font-size: 14.5px; color: var(--text-2); margin-top: 14px; line-height: 1.65; max-width: 620px; margin-left: auto; margin-right: auto; }

/* ============ ECOSYSTEM MAP — dark tech band ============ */
.hst-map {
  margin-top: 34px; position: relative; overflow: hidden;
  /* #28: nền bớt trầm — sáng hơn tông đen tuyền cũ (var(--ink)) */
  background: linear-gradient(135deg, #2b2740 0%, #211d33 55%, #2b2740 100%);
}
/* #28: linh vật Pi ở node trung tâm (thay icon người vàng) */
.hst-node-pi { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(0,0,0,.45)); }
/* #29: linh vật Pi trang trí khối Đặc quyền */
.hst-in { position: relative; }
.hst-perk-pi { position: absolute; right: 20px; bottom: 8px; width: 104px; height: auto; pointer-events: none; }
@media (max-width: 820px) {
  .hst-perk-pi { width: 72px; right: 8px; opacity: .9; }
  /* #64(B): chừa chỗ để fine-print KHÔNG chui xuống dưới Pi (Pi bottom-right 72px + right:8) → đọc đủ chữ. */
  .hst-perks .hst-cond { padding-right: 84px; }
}
.hst-map::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--gold); z-index: 2; }
.hst-map::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(209,32,38,.22) 0%, transparent 55%);
  pointer-events: none;
}
.hst-map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hst-map-in { position: relative; max-width: 1060px; margin: 0 auto; padding: 46px 40px 50px; text-align: center; z-index: 1; }
.hst-map-eyebrow { font: 700 11px var(--ff); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.hst-map h2 { color: #fff; font-size: clamp(21px, 2.7vw, 29px); font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.hst-map-sub { color: rgba(255,255,255,.62); font-size: 13.5px; margin-top: 8px; }
.hst-orbit { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; margin-top: 34px; }
.hst-node-c {
  width: 148px; height: 148px; margin: 0 auto; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 30%, #2A2740, #14121F 70%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 14px rgba(209,32,38,.08), 0 0 0 30px rgba(209,32,38,.04), 0 18px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hst-node-c i { font-size: 30px; color: var(--gold); }
.hst-node-c b { color: #fff; font-size: 13px; }
.hst-node-c span { color: rgba(255,255,255,.55); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.hst-side { display: flex; flex-direction: column; gap: 16px; }
.hst-node {
  position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px); border-radius: 16px; padding: 15px 18px; text-align: left;
  display: flex; gap: 12px; align-items: center; transition: .18s;
}
.hst-node:hover { background: rgba(255,255,255,.09); border-color: rgba(255,204,0,.45); transform: translateY(-2px); }
.hst-node i.ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: rgba(209,32,38,.2); border: 1px solid rgba(209,32,38,.45); color: #FF8A8E;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.hst-node b { color: #fff; font-size: 13.5px; display: block; }
.hst-node span { color: rgba(255,255,255,.58); font-size: 11.5px; display: block; margin-top: 2px; }
/* Connection lines từ node đến tâm */
.hst-side.l .hst-node::after, .hst-side.r .hst-node::before {
  content: ''; position: absolute; top: 50%; width: 42px; height: 1px;
  background: linear-gradient(90deg, rgba(255,204,0,.0), rgba(255,204,0,.55));
}
.hst-side.l .hst-node::after { right: -42px; }
.hst-side.r .hst-node::before { left: -42px; transform: scaleX(-1); }

/* ============ FEATURES zigzag — light, UI giả lập nổi ============ */
.hst-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding: 50px 0 6px; }
.hst-feat.hst-rev .hst-media { order: 2; }
.hst-media { position: relative; display: flex; justify-content: center; padding: 18px 0; }
.hst-media::before {
  content: ''; position: absolute; inset: 6% 10%;
  background: radial-gradient(closest-side, rgba(209,32,38,.12), transparent 72%);
}
.hst-ph {
  position: relative; width: min(252px, 72%);
  border-radius: 30px; border: 7px solid var(--ink); background: var(--ink); overflow: hidden;
  box-shadow: var(--sh-m);
}
.hst-ph img { width: 100%; display: block; }
.hst-lap {
  position: relative; width: min(430px, 96%);
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border-s); box-shadow: var(--sh-m);
}
.hst-lap img { width: 100%; display: block; }

/* Floating glass UI chips */
.hst-fchip {
  position: absolute; background: rgba(255,255,255,.88); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 14px; box-shadow: var(--sh-s);
  padding: 10px 13px; z-index: 2;
}
.hst-fchip .hst-h { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.hst-fchip .hst-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; width: 128px; }
.hst-fchip .hst-bars > div { display: grid; grid-template-columns: 34px 1fr; gap: 7px; align-items: center; font-size: 10.5px; font-weight: 700; }
.hst-fchip .hst-bars i { height: 5px; border-radius: 99px; background: var(--red-light); position: relative; display: block; }
.hst-fchip .hst-bars i::after { content: ''; position: absolute; inset: 0; border-radius: 99px; background: var(--red); width: var(--w); }
.hst-fchip.hst-score { top: 6%; right: 2%; }
.hst-fchip.hst-note { bottom: 8%; left: 0; max-width: 170px; }
.hst-fchip.hst-note .hst-tx { font-size: 11px; line-height: 1.45; margin-top: 5px; }
.hst-fchip.hst-note .hst-tx b { color: var(--red); }
.hst-fchip .hst-wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 8px; }
.hst-fchip .hst-wave i { width: 4px; border-radius: 2px; background: var(--red); opacity: .85; }
.hst-fchip.hst-ai { top: 4%; left: 0; }
.hst-fchip.hst-ai .hst-ok {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
  color: var(--green); background: var(--green-bg); padding: 3px 8px; border-radius: 99px; margin-top: 7px;
}
.hst-fchip.hst-streak { bottom: 10%; right: 2%; }
.hst-fchip.hst-streak b { font-size: 16px; color: var(--red); }
.hst-fchip.hst-streak span { font-size: 10.5px; color: var(--text-2); display: block; }
.hst-fchip.hst-graded { top: 8%; right: 4%; }
.hst-fchip.hst-graded .hst-big { font-size: 15px; font-weight: 800; color: var(--green); margin-top: 4px; }
.hst-fchip.hst-graded .hst-sm { font-size: 10px; color: var(--text-2); }

.hst-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; border-radius: 99px; padding: 4px 12px;
  background: var(--red-light); color: var(--red-deep);
}
.hst-feat h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; margin-top: 12px; }
.hst-feat .hst-d { font-size: 13.5px; color: var(--text-2); margin-top: 8px; max-width: 460px; text-wrap: pretty; }
.hst-feat ul { margin-top: 14px; list-style: none; padding: 0; }
.hst-feat li { display: flex; gap: 10px; font-size: 13.5px; padding: 6px 0; line-height: 1.55; }
.hst-feat li i { color: var(--red); font-size: 16px; flex: none; margin-top: 2px; }
.hst-applink {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  color: var(--red); margin-top: 12px;
}

/* ============ PIPELINE 1 buổi học ============ */
.hst-day { margin-top: 56px; }
.hst-day > h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; text-align: center; }
.hst-day > .hst-day-sub { font-size: 13.5px; color: var(--text-2); margin-top: 6px; text-align: center; }
.hst-pipe { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.hst-pipe::before {
  content: ''; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--red-light), var(--red), var(--red-light));
}
.hst-pipe > div { position: relative; text-align: center; padding: 0 10px; }
.hst-pipe .hst-dot {
  position: relative; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
  background: #fff; border: 2px solid var(--red); color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 0 0 8px var(--bg), var(--sh-s);
}
.hst-pipe .hst-t { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-top: 14px; }
.hst-pipe b { display: block; font-size: 14.5px; margin-top: 4px; }
.hst-pipe span { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 5px; max-width: 270px; margin-left: auto; margin-right: auto; }

/* ============ PERKS — nền sáng, vàng chỉ điểm nhấn nhỏ (pill + viền thẻ) ============ */
.hst-perks {
  margin-top: 56px;
  background: var(--bg-soft);   /* bỏ mảng vàng tràn section — vàng giữ ở pill .hst-de + viền thẻ perk */
  border-top: 1px solid var(--border-s); border-bottom: 1px solid var(--border-s);
}
.hst-perks .hst-in { max-width: 1060px; margin: 0 auto; padding: 38px 40px; }
.hst-perks h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; margin-top: 10px; }
.hst-perks .hst-sub { font-size: 13px; color: var(--text); margin-top: 6px; }
.hst-perk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.hst-perk-row > div {
  position: relative; background: #fff; border: 1px dashed #E1BD00;
  border-radius: var(--r-m); padding: 18px 20px 16px; box-shadow: var(--sh-xs);
}
.hst-perk-row > div::before {
  content: ''; position: absolute; left: -7px; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: #FFF6D6; border: 1px dashed #E1BD00; transform: translateY(-50%);
}
.hst-perk-row b { font-size: 18px; color: var(--red); display: block; }
.hst-perk-row span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; display: block; margin-top: 4px; }
.hst-perks .hst-cond { font-size: 11.5px; color: var(--text-2); margin-top: 12px; }

/* ============ END CTA ============ */
.hst-cta {
  margin: 46px 0 70px; background: #F7F7F8; border: 1px solid var(--border-s);
  border-left: 4px solid var(--red); border-radius: var(--r-m);
  padding: 22px 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.hst-cta i.hst-lead { font-size: 28px; color: var(--red); }
.hst-cta .hst-tx { flex: 1; min-width: 240px; font-size: 13.5px; }
.hst-cta .hst-tx b { color: var(--red); }
.hst-btn-go {
  font-size: 13.5px; font-weight: 700; color: #fff; background: var(--red);
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px;
  border-radius: 10px; box-shadow: var(--sh-red); transition: .15s;
}
.hst-btn-go:hover { background: var(--red-deep); color: #fff; }
.hst-btn-line {
  font-size: 13.5px; font-weight: 700; color: var(--red); background: #fff;
  border: 1px solid var(--red-border); display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-radius: 10px;
}

@media (max-width: 900px) {
  /* #64(A): nền chấm trang trí .hst-hero::before có `inset:-20px -120px 0` (lem 120px MỖI bên) — trên
     màn hẹp phần lem phải chọc RA NGOÀI viewport → cả trang tràn ngang (đo 390px: scrollWidth 494 > 390).
     Bỏ lem ngang ở mobile (chỉ giữ lem dọc trên) → hết tràn; desktop >900 giữ nguyên hiệu ứng lem. */
  .hst-hero::before { inset: -20px 0 0; }
  .hst-feat { grid-template-columns: 1fr; gap: 26px; }
  .hst-feat.hst-rev .hst-media { order: 0; }
  .hst-orbit { grid-template-columns: 1fr; gap: 18px; }
  .hst-side.l .hst-node::after, .hst-side.r .hst-node::before { display: none; }
  .hst-node-c { order: -1; }
  .hst-pipe { grid-template-columns: 1fr; gap: 26px; }
  .hst-pipe::before { display: none; }
  .hst-perk-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hst-wrap, .hst-perks .hst-in, .hst-map-in { padding-left: 16px; padding-right: 16px; }
  .hst-fchip.hst-note { max-width: 140px; }
}