/* =========================================================
   TAB 1 – Hero video (chuyển từ bản Home)
   video nền + nghiêng 3D theo chuột + spotlight + dây đàn (canvas) + HUD
   ========================================================= */
.hv {
  --hv-cyan: #29e3ff; --hv-pink: #ff3d8b; --hv-orange: #ff8a1f;
  --hv-gutter: clamp(16px, 4vw, 56px);
  --hv-tech: "Chakra Petch", "Saira Semi Condensed", sans-serif;
  display: grid; place-items: end center; isolation: isolate; background: #05070d; color: #eef2ff;
  padding: var(--hdr, 75px) var(--hv-gutter) clamp(56px, 9vh, 100px);
}
.hv-stage { position: absolute; inset: 0; overflow: hidden; perspective: 1400px; z-index: 0; }
.hv-plane { position: absolute; inset: -5%; transform-style: preserve-3d; will-change: transform; }
.hv-plane > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-poster { opacity: 0; transition: opacity .6s ease; }
.hv-poster.is-on { opacity: 1; }
.hv-video { opacity: 0; transition: opacity 1s ease; }
.hv[data-video="on"] .hv-video { opacity: 1; }
.hv[data-video="buffering"] .hv-video { opacity: .35; }
.hv-shade, .hv-spot, .hv-strings { position: absolute; inset: 0; pointer-events: none; }
.hv-shade {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(5,7,13,.92) 0%, rgba(5,7,13,.55) 40%, transparent 70%),
    linear-gradient(180deg, rgba(5,7,13,.55) 0%, transparent 22%, transparent 55%, rgba(5,7,13,.85) 100%);
}
.hv-spot { background: radial-gradient(circle 340px at var(--sx, 50%) var(--sy, 40%), rgba(41,227,255,.10) 0%, rgba(255,138,31,.04) 35%, rgba(5,7,13,.38) 75%); opacity: 0; transition: opacity .5s; }
.hv.is-hover .hv-spot { opacity: 1; }
.hv-strings { z-index: 2; mix-blend-mode: screen; }
.hv .halftone {
  position: absolute; inset: 0; z-index: 1; opacity: .6; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 90%); mask-image: linear-gradient(115deg, transparent 30%, #000 90%);
}
.hv .hud-frame { position: absolute; z-index: 3; inset: calc(var(--hdr, 75px) + 14px) var(--hv-gutter) 22px; pointer-events: none; }
.hv .hud-frame i { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.55); }
.hv .hud-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.hv .hud-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.hv .hud-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.hv .hud-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hv .hero__hud { position: absolute; z-index: 3; font: 500 11px/1.6 var(--hv-tech); letter-spacing: .2em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.hv .hero__hud--tr { right: calc(var(--hv-gutter) + 34px); top: calc(var(--hdr, 75px) + 36px); text-align: right; }
.hv .hero__hud--br { right: calc(var(--hv-gutter) + 34px); bottom: 44px; display: flex; gap: 10px; align-items: center; }
.hv .scroll-ind { position: relative; width: 18px; height: 28px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 10px; }
.hv .scroll-ind::after { content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--hv-orange); animation: hvScroll 1.6s ease-in-out infinite; }
@keyframes hvScroll { 60% { transform: translateY(9px); opacity: 0; } 61% { transform: none; opacity: 0; } 100% { opacity: 1; } }

.hv-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(1100px, 100%); will-change: transform; }
.hv-tag {
  display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; margin-bottom: 10px;
  font: 500 12px/1.4 var(--hv-tech); letter-spacing: .24em; text-transform: uppercase;
  background: rgba(255,61,139,.15); border: 1px solid rgba(255,61,139,.5); color: #ffc2da;
}
.hv-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--hv-pink); box-shadow: 0 0 12px var(--hv-pink); animation: hvBlink 1.2s infinite; }
@keyframes hvBlink { 50% { opacity: .2; } }
.hv-banner { margin: 0; line-height: 0; width: min(1000px, 100%); }
.hv-banner img { width: 100%; height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)); animation: hvFloat 5s ease-in-out infinite; }
@keyframes hvFloat { 50% { translate: 0 -6px; } }
.hv-sub { margin: 8px auto 26px; max-width: 600px; color: #c9d1ec; font: 400 clamp(15px, 1.4vw, 18px)/1.6 var(--f-semi); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.hv-cta { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hv-cta .btn { position: relative; left: auto; top: auto; }
.hv-play { display: inline-flex; align-items: center; gap: 14px; font: 500 14px/1 var(--hv-tech); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.hv-play__btn { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.7); transition: background .25s, border-color .25s; }
.hv-play__btn::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(41,227,255,.6); animation: hvPulse 2s cubic-bezier(.16,1,.3,1) infinite; }
.hv-play__btn svg { width: 18px; margin-left: 3px; }
.hv-play:hover .hv-play__btn { background: var(--c-key); border-color: var(--c-key); }
@keyframes hvPulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.hv-store { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.hv-store a { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); font: 400 12px/1.2 var(--f-semi); color: #fff; text-align: left; transition: .25s; }
.hv-store a b { display: block; font-size: 14px; }
.hv-store a:hover { border-color: var(--hv-cyan); background: rgba(41,227,255,.1); }
.hv-store svg { width: 22px; height: 22px; }

.hv-ctrl { position: absolute; z-index: 4; left: calc(var(--hv-gutter) + 34px); bottom: 34px; display: flex; align-items: center; gap: 10px; }
.hv-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(5,7,13,.45); backdrop-filter: blur(6px); color: #fff; transition: .25s; }
.hv-btn[hidden] { display: none; }
.hv-btn:hover { border-color: var(--hv-orange); color: var(--hv-orange); }
.hv-btn svg { width: 18px; height: 18px; fill: currentColor; }
.hv-btn .i-play, .hv.is-paused .hv-btn .i-pause { display: none; }
.hv.is-paused .hv-btn .i-play { display: block; }
.hv-sound .i-on, .hv.is-sound .hv-sound .i-off { display: none; }
.hv.is-sound .hv-sound .i-on { display: block; }
.hv-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(5,7,13,.55); border: 1px solid rgba(255,255,255,.15); font: 500 12px/1 var(--hv-tech); letter-spacing: .12em; text-transform: uppercase; color: #cfd6ee; }
.hv-status[hidden] { display: none; }
.hv-status i { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--hv-orange); border-radius: 50%; animation: hvSpin .8s linear infinite; }
@keyframes hvSpin { to { rotate: 360deg; } }

/* hiện dần khi trang tải xong */
html.js .hv-content > * { opacity: 0; translate: 0 24px; transition: opacity .9s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.16,1,.3,1); }
html.is-ready .hv-content > * { opacity: 1; translate: none; }
html.is-ready .hv-content > :nth-child(2) { transition-delay: .1s; }
html.is-ready .hv-content > :nth-child(3) { transition-delay: .2s; }
html.is-ready .hv-content > :nth-child(4) { transition-delay: .3s; }
html.is-ready .hv-content > :nth-child(5) { transition-delay: .4s; }

/* modal trailer */
.trailer { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.85); backdrop-filter: blur(6px); }
.trailer[hidden] { display: none; }
.trailer video { width: min(1200px, 100%); max-height: 80vh; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); border: 2px solid var(--c-key); }
.trailer__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; }
.trailer__close img { width: 100%; height: 100%; }

@media (max-width: 1023px), (orientation: portrait) {
  .hv { padding-bottom: 96px; }
  .hv .hero__hud, .hv .hud-frame { display: none; }
  .hv-store { display: none; }
  .hv-ctrl { left: auto; right: 16px; bottom: 22px; }
  .hv-status b { display: none; }
  .hv-tag { font-size: 10px; letter-spacing: .16em; }
  .hv-cta { gap: 16px; }
  .hv-play__btn { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-strings { display: none; }
  .hv-banner img, .hv-tag i, .hv-play__btn::before { animation: none; }
}