/* HVSC trang chủ v2 — hero "chòm sao hội tụ" + bento 4 khối trụ (#bon-mang) + nhịp cuộn.
   Thay hoàn toàn home-hero.css v1. JS: assets/js/home-hero.js (v2). Tôn trọng prefers-reduced-motion. */
:root {
  --hx-navy: #060b1e; --hx-navy-2: #0b1430; --hx-navy-3: #121d42;
  --hx-gold: #E8C98E; --hx-gold-2: #F6E2B8; --hx-line: rgba(232, 201, 142, .18);
}
[data-group="air"] { --g: var(--air); --g-hi: var(--air-hi); --g-rgb: 255, 154, 92; }
[data-group="tech"] { --g: var(--tech); --g-hi: var(--tech-hi); --g-rgb: 167, 171, 255; }
[data-group="mkt"] { --g: var(--mkt); --g-hi: var(--mkt-hi); --g-rgb: 255, 125, 182; }
[data-group="csr"] { --g: var(--csr); --g-hi: var(--csr-hi); --g-rgb: 94, 219, 156; }

/* ---------- HERO ---------- */
.hx { position: relative; isolation: isolate; overflow: hidden; color: var(--on-night); background: var(--hx-navy);
  padding: calc(var(--header-h) + clamp(20px, 3.4vw, 52px)) 0 clamp(120px, 9vw, 150px); }
.hx__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(227, 30, 36, .20), transparent 62%),
    radial-gradient(700px 480px at 12% 0%, rgba(68, 96, 200, .22), transparent 60%),
    radial-gradient(1200px 600px at 50% 120%, rgba(232, 201, 142, .10), transparent 60%),
    linear-gradient(180deg, var(--hx-navy) 0%, var(--hx-navy-2) 70%, var(--hx-navy) 100%); }
.hx__sky::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 10%, transparent 75%); }
.hx__sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(to bottom, transparent, rgba(6, 11, 30, .9)); }
.hx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.hx__top { position: relative; z-index: 2; display: grid; gap: 28px; align-items: center; }
.hx__copy { max-width: 640px; }
.hx__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 11px; border-radius: 99px; border: 1px solid var(--hx-line);
  background: rgba(255,255,255,.035); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--hx-gold-2); }
.hx__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(227,30,36,.25); }
.hx__display { margin-top: 22px; font-size: clamp(42px, 4.4vw + 10px, 84px); line-height: 1.08; font-weight: 800; letter-spacing: -.038em; color: #fff; text-wrap: balance; }
.hx__display em { font-style: normal; display: inline-block; padding-bottom: .06em;
  background: linear-gradient(100deg, #FF4148 0%, #E31E24 38%, #F0B27A 78%, var(--hx-gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx__h1 { margin-top: 18px; font-size: clamp(16px, .45vw + 13.5px, 19px); line-height: 1.55; font-weight: 500; color: #C9CEDC; max-width: 46ch; }
.hx__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Hub logo (đích hạt hội tụ) */
.hx__hub { position: relative; justify-self: center; display: grid; place-items: center; width: min(100%, 520px); aspect-ratio: 1.25; pointer-events: none; }
.hx__logo { position: relative; z-index: 2; width: clamp(180px, 22vw, 330px); height: auto; filter: drop-shadow(0 10px 30px rgba(227,30,36,.35)); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.hx__tag { position: absolute; z-index: 2; left: 50%; top: calc(50% + clamp(44px, 4.6vw, 70px)); transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--hx-gold); opacity: .85; transition: opacity .9s; }
.hx__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(232,201,142,.14); transform: translate(-50%, -50%); }
.hx__ring--1 { width: 62%; aspect-ratio: 1; }
.hx__ring--2 { width: 84%; aspect-ratio: 1; border-style: dashed; border-color: rgba(232,201,142,.09); animation: hxSpin 90s linear infinite; }
.hx__ring--3 { width: 104%; aspect-ratio: 1; border-color: rgba(255,255,255,.05); }
@keyframes hxSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hx.is-forming .hx__logo, .hx.is-forming .hx__tag { opacity: 0; transform: scale(.96); }

/* Bốn cổng trụ */
.hx__doors { position: relative; z-index: 2; margin-top: clamp(28px, 3vw, 44px); }
.hx__doors-k { font-size: 13px; font-weight: 600; color: #AEB5C7; margin-bottom: 14px; letter-spacing: .01em; }
.hx__doors-k span { color: var(--hx-gold-2); }
.hx__ports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hx__port a { position: relative; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 2px; min-height: 100%; padding: 74px 16px 16px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); color: #fff; overflow: hidden;
  transition: border-color .35s, background-color .35s, transform .45s var(--ease-out), box-shadow .45s; }
.hx__port a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--g-hi), transparent); opacity: .35; transition: opacity .35s; }
.hx__fx { position: absolute; left: 0; right: 0; top: 0; height: 70px; }
.hx__n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--g-hi); opacity: .9; }
.hx__port b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.hx__t { font-size: 13.5px; line-height: 1.45; color: #B9C0D0; }
.hx__go { position: absolute; right: 14px; top: 14px; font-size: 18px; color: rgba(255,255,255,.55); transition: transform .35s var(--ease-out), color .35s; }
.hx__port a:is(:hover, :focus-visible), .hx__port.is-active a { border-color: rgba(var(--g-rgb), .55); background-color: rgba(var(--g-rgb), .07); box-shadow: 0 18px 50px -20px rgba(var(--g-rgb), .55), inset 0 1px 0 rgba(255,255,255,.08); }
.hx__port a:is(:hover, :focus-visible)::before, .hx__port.is-active a::before { opacity: 1; }
.hx__port a:is(:hover, :focus-visible) .hx__go, .hx__port.is-active .hx__go { color: var(--g-hi); transform: translate(2px, -2px); }
.hx__port a:focus-visible { outline: 2px solid var(--g-hi); outline-offset: 3px; }

@media (min-width: 640px) { .hx__port b { font-size: 18px; } }
@media (min-width: 1024px) {
  .hx__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; }
  .hx__ports { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hx__port a { padding: 92px 22px 22px; }
  .hx__fx { height: 88px; }
  .hx__port a:hover { transform: translateY(-4px); }
}
@media (max-width: 1023px) {
  .hx__hub { width: min(100%, 420px); aspect-ratio: 1.7; margin-top: -4px; }
  .hx__ring--3 { display: none; }
}
@media (max-width: 639px) {
  .hx { padding-bottom: 104px; }
  .hx__display { margin-top: 16px; }
  .hx__h1 { font-size: 15px; }
  .hx__ctas { margin-top: 22px; }
  .hx__ctas .btn--lg { flex: 1 1 auto; min-height: 50px; padding: 12px 14px; font-size: 15px; }
  .hx__hub { aspect-ratio: 2.5; width: 100%; margin-top: 4px; }
  .hx__logo { width: 150px; }
  .hx__ring--1 { width: 46%; } .hx__ring--2 { width: 64%; }
  .hx__tag { font-size: 11px; letter-spacing: .26em; top: calc(50% + 30px); }
  .hx__doors-k { font-size: 12.5px; }
  .hx__port a { padding: 62px 12px 14px; border-radius: 16px; }
  .hx__fx { height: 58px; }
  .hx__port b { font-size: 15.5px; }
  .hx__t { font-size: 12.5px; }
  .hx__go { right: 10px; top: 10px; }
}
.booking { margin-top: -72px; }

/* ---------- BỐN MẢNG (bento) ---------- */
.pz { position: relative; isolation: isolate; color: var(--on-night); margin: clamp(40px, 5vw, 72px) clamp(8px, 1vw, 16px) 0; padding: clamp(56px, 7vw, 112px) 0 clamp(48px, 6vw, 88px);
  border-radius: clamp(24px, 3vw, 44px); overflow: hidden;
  background: radial-gradient(900px 500px at 85% 0%, rgba(227,30,36,.16), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(232,201,142,.08), transparent 60%), linear-gradient(180deg, var(--hx-navy-2), var(--hx-navy)); }
.pz::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.pz__head { max-width: 820px; }
.pz__head .lead { color: #BFC6D6; }
.pz__stage { position: relative; display: grid; gap: 14px; margin-top: clamp(32px, 4vw, 56px); }
.pz__links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.pz__hub { display: none; }

.pz__tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); background: radial-gradient(600px 300px at 70% 0%, rgba(var(--g-rgb), .10), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition: border-color .4s, box-shadow .5s, opacity .4s, transform .6s var(--ease-out); }
.pz__fx { position: absolute; left: 0; right: 0; top: 0; height: 62%; width: 100%; z-index: -1; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.pz__body { position: relative; padding: 22px 20px 22px; }
.pz__k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pz__n { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--g-hi); }
.pz__team { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #E7EAF2; background: rgba(var(--g-rgb), .12); border: 1px solid rgba(var(--g-rgb), .3); }
.pz__team .ph { font-size: 14px; color: var(--g-hi); }
.pz__t { font-size: clamp(26px, 1.6vw + 16px, 38px); font-weight: 800; letter-spacing: -.028em; line-height: 1.12; color: #fff; }
.pz__main { color: inherit; }
.pz__main::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
.pz__main:focus-visible { outline: none; }
.pz__tile:has(.pz__main:focus-visible) { outline: 2px solid var(--g-hi); outline-offset: 3px; }
.pz__d { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #BFC6D6; max-width: 54ch; }
.pz__sub { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pz__sub a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 13px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: #EEF0F6; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background-color .25s, border-color .25s, color .25s; }
.pz__sub a:hover, .pz__sub a:focus-visible { background: rgba(var(--g-rgb), .18); border-color: rgba(var(--g-rgb), .6); color: #fff; }
.pz__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14.5px; font-weight: 700; color: var(--g-hi); }
.pz__cta .ph { transition: transform .35s var(--ease-out); }
.pz__tile:hover, .pz__tile.is-active { border-color: rgba(var(--g-rgb), .5); box-shadow: 0 30px 80px -30px rgba(var(--g-rgb), .45), inset 0 1px 0 rgba(255,255,255,.06); }
.pz__tile:hover .pz__cta .ph, .pz__tile.is-active .pz__cta .ph { transform: translateX(4px); }
.pz__fx { transition: opacity .45s; }
.pz__stage[data-active]:not([data-active=""]) .pz__tile:not(.is-active) .pz__fx { opacity: .5; }
.pz__tile.is-linked { border-color: rgba(232,201,142,.22); }

.pz__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255,255,255,.08); }
.pz__facts b { display: block; font-size: clamp(34px, 2.6vw + 16px, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 20%, var(--hx-gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pz__facts span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: #AEB5C7; max-width: 26ch; }

@media (min-width: 900px) {
  .pz__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .pz__tile { min-height: 520px; }
  .pz__body { padding: 30px 32px 32px; }
  .pz__hub { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; z-index: 4; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 35% 30%, #ff4a50, var(--brand) 55%, #8f0d12); box-shadow: 0 0 0 8px var(--hx-navy-2), 0 0 0 9px rgba(232,201,142,.25), 0 20px 50px rgba(227,30,36,.45); }
  .pz__hub-core { font-weight: 800; font-size: 26px; letter-spacing: -.04em; color: #fff; }
  .pz__hub-cap { position: absolute; top: calc(100% + 16px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--hx-gold-2);
    padding: 5px 12px; border-radius: 99px; background: rgba(6,11,30,.92); border: 1px solid var(--hx-line); opacity: 0; transition: opacity .35s, transform .35s var(--ease-out); }
  .pz__stage.is-linking .pz__hub-cap { opacity: 1; transform: translate(-50%, 0); }
  .pz__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .pz__tile { min-height: 560px; } }
@media (max-width: 639px) {
  .pz { margin-inline: 0; border-radius: 28px 28px 0 0; }
  .pz__tile { min-height: 0; padding-top: 170px; }
  .pz__fx { height: 230px; }
  .pz__d { font-size: 14.5px; }
}

/* ---------- Nhịp cuộn: hiện dần từng khu (chỉ khi JS bật & không giảm chuyển động) ---------- */
.hx-sx .sx { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), border-color .4s, box-shadow .5s; transition-delay: var(--sx-d, 0s); }
.hx-sx .sx.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hx__ring--2 { animation: none; }
  .hx-sx .sx { opacity: 1; transform: none; transition: none; }
  .hx__port a, .pz__tile { transition: none; }
}

/* review1: dải pháp lý dưới nút hero */
.hx__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; color: #B7BDD0; }
.hx__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hx__trust i { font-size: 15px; color: #F0C987; }
@media (max-width: 640px) { .hx__trust { font-size: 12.5px; gap: 6px 14px; } }