/* Thanh cuộn "nối nhà" trang chủ. Tắt: ?hv_no_sb=1 */
.hv-sb-top { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 150; pointer-events: none; opacity: 0; transition: opacity .25s; }
.hv-sb-top.is-on { opacity: 1; }
.hv-sb-top i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(227,30,36,.5), #E31E24); box-shadow: 0 0 10px rgba(227,30,36,.8); will-change: transform; }
.hv-sb { display: none; }
@media (min-width: 1360px) {
  .hv-sb-top { display: none; }
  .hv-sb { position: fixed; left: 14px; top: 50%; height: 50vh; max-height: 520px; min-height: 280px; width: 20px; transform: translateY(-50%); z-index: 80; display: block; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .hv-sb.is-on { opacity: 1; pointer-events: auto; }
  .hv-sb__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(150,155,175,.35); border-radius: 2px; }
  .hv-sb__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(#E31E24, #E31E24); border-radius: 2px; box-shadow: 0 0 8px rgba(227,30,36,.7); }
  .hv-sb__head { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #E31E24, 0 0 14px 4px rgba(var(--g-rgb, 227,30,36), .85); }
  .hv-sb__n { position: absolute; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; text-decoration: none; }
  .hv-sb__n i { width: 12px; height: 12px; border-radius: 50%; background: #2a2d3a; border: 2px solid rgba(var(--g-rgb), .55); transition: transform .25s, background .25s, box-shadow .25s; }
  .hv-sb__n.is-lit i { background: rgb(var(--g-rgb)); }
  .hv-sb__n.is-cur i, .hv-sb__n.is-linked i, .hv-sb__n:hover i { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(var(--g-rgb), .25), 0 0 14px rgba(var(--g-rgb), .8); }
  .hv-sb__n span { position: absolute; left: 28px; top: 50%; transform: translate(-6px, -50%); padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; color: #fff; background: rgba(15,16,18,.92); border: 1px solid rgba(var(--g-rgb), .6); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
  .hv-sb__n.is-cur span, .hv-sb__n:hover span, .hv-sb__n:focus-visible span { opacity: 1; transform: translate(0, -50%); }
  .hv-sb__n:focus-visible { outline: 2px solid #E31E24; outline-offset: 2px; border-radius: 50%; }
  .hv-sb__spark { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 6px rgba(var(--g-rgb), .9); pointer-events: none; transform: translate(-50%, -50%); }
}
/* "bắt tay": thẻ / cổng cùng mảng sáng viền */
.hx__port.is-linked a, .pz__tile.is-linked { box-shadow: 0 0 0 1.5px rgba(var(--g-rgb), .75), 0 18px 50px -20px rgba(var(--g-rgb), .6); }
.hx__port a, .pz__tile { transition: box-shadow .3s; }
@media (prefers-reduced-motion: reduce) { .hv-sb, .hv-sb-top, .hv-sb__n i, .hv-sb__n span { transition: none; } }

/* ===== Câu chuyện: timeline ngang kéo/vuốt, đường nối sáng chạy theo cuộn ===== */
.story__lead { flex: 1 1 100%; max-width: 62ch; margin: -6px 0 4px; font-size: clamp(15.5px, .5vw + 13px, 18px); line-height: 1.6; color: var(--on-night-2); order: 3; }
.story__head .btn { order: 4; }
.story__ctrl { display: flex !important; order: 5; }
.tl-wrap { position: relative; margin-inline: calc(var(--gutter, 20px) * -1); }
.tl-bar { position: absolute; left: var(--gutter, 20px); right: var(--gutter, 20px); top: 0; height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; }
.tl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #E31E24, #FF9A5C); box-shadow: 0 0 12px rgba(227,30,36,.8); border-radius: 2px; transition: width .25s linear; }
.story .timeline { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 34px var(--gutter, 20px) 12px; margin: 0; cursor: grab; scroll-padding-inline: var(--gutter, 20px); outline-offset: -2px; }
.story .timeline::-webkit-scrollbar { display: none; }
.story .timeline.is-drag { cursor: grabbing; scroll-snap-type: none; }
.story .timeline::before { display: none; }
.story .timeline__item { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; position: relative; padding: 22px 20px 20px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); opacity: 1; transform: none; transition: border-color .3s, background .3s, transform .3s; }
.story .timeline__item::before { left: 22px; top: -41px; width: 14px; height: 14px; background: #0F1012; border: 2px solid rgba(255,255,255,.5); transition: background .3s, border-color .3s, box-shadow .3s; }
.story .timeline__item.is-lit::before { background: #E31E24; border-color: #fff; box-shadow: 0 0 0 5px rgba(227,30,36,.25); }
.story .timeline__item:hover { border-color: rgba(227,30,36,.55); background: rgba(255,255,255,.07); transform: translateY(-4px); }
.story .timeline__year { font-size: clamp(26px, 1.4vw + 18px, 38px); min-height: 0; display: block; line-height: 1.05; }
.story .timeline__item--ai .timeline__year { font-size: clamp(20px, 1vw + 14px, 26px); background: linear-gradient(90deg, #A7ABFF, #FF7DB6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl__ico { position: absolute; right: 18px; top: 20px; font-size: 26px; color: rgba(255,255,255,.55); }
.tl__ico svg { width: 26px; height: 26px; }
.story .timeline__item--key .tl__ico { color: #FF7C80; }
.story .timeline__item b { margin-top: 12px; font-size: 18px; line-height: 1.3; }
.story .timeline__item p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; max-width: none; }
.tl__era { display: inline-block; margin-top: 14px; padding: 3px 10px; font-style: normal; font-size: 12px; font-weight: 600; color: #C9CEDC; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; }
.story .timeline__item--key { border-color: rgba(227,30,36,.5); background: linear-gradient(160deg, rgba(227,30,36,.16), rgba(255,255,255,.03)); }
@media (min-width: 1100px) { .story .timeline__item { flex-basis: 316px; } }
@media (prefers-reduced-motion: reduce) { .tl-bar i, .story .timeline__item { transition: none; } }
.story .story__head { gap: 14px 24px; margin-bottom: 40px; }
.story .story__head .h2 { flex: 1 1 100%; max-width: 20ch; }
.story .story__head .story__lead { order: 3; }
@media (min-width: 900px) { .story .story__head .h2 { max-width: 22ch; } }