/* ===== Lớp hiệu ứng (đi cùng js/wow.js) =====
   Chỉ bật khi wow.js gắn class "wow" lên <html> (có JS và người dùng KHÔNG bật giảm chuyển động).
   Mọi thứ ở đây là lớp phủ thêm: gỡ wow.css + wow.js là trang trở lại như cũ. */

/* ----- Hai phím: tách lớp, bấm vào thì lún xuống rồi bật lên ----- */
.keys-stack { position: relative; width: 100%; aspect-ratio: 1400 / 1073; }
.keys-stack > img, .hero-key { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-object .keys-stack img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.k-shadow, .k-stars { pointer-events: none; }
.keys-stack { pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hero-key { transform-origin: 50% 55%; pointer-events: none; }
.hero-key .k-img { pointer-events: none; }
/* vùng bấm từng phím do wow.js tính theo độ trong suốt của chính ảnh phím (không dùng clip-path) */
/* thả ra: bật lên có nảy (lò xo). Nhấn xuống: lún nhanh */
.wow .hero-key, .wow .k-stars { transition: transform .55s cubic-bezier(.34, 2.1, .5, 1), filter .4s; }
.wow .keys-stack.is-down .hero-key { transform: translateY(2.6%) scale(.955); transition-duration: .08s, .08s; }
.wow .keys-stack.is-down .hero-key { filter: brightness(.9); }
.wow .k-shadow { transition: opacity .5s, transform .5s cubic-bezier(.34, 2.1, .5, 1); transform-origin: 50% 60%; }
.wow .keys-stack.is-down .k-shadow { opacity: .55; transform: scale(.95); transition-duration: .08s; }

/* ----- Màn mở đầu: rèm đen kéo lên ----- */
.wow-intro {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: #0a0a0a; color: #fff;
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s cubic-bezier(.76, 0, .24, 1);
}
.wow-intro.is-out { clip-path: inset(0 0 100% 0); pointer-events: none; }
.wow-intro-mark {
  width: min(52vw, 46vh, 300px); aspect-ratio: 1241 / 1343; background: #fff;
  -webkit-mask: url("../assets/logo-techday.svg") center / contain no-repeat; mask: url("../assets/logo-techday.svg") center / contain no-repeat;
  animation: wow-intro-in .7s cubic-bezier(.16, 1, .3, 1) both;
  transition: transform .9s cubic-bezier(.76, 0, .24, 1), opacity .5s;
}
.wow-intro.is-out .wow-intro-mark { transform: translateY(-40vh) scale(.9); opacity: 0; }
.wow-intro-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #fe68c6, #a50064); transform-origin: left; animation: wow-intro-bar 1.1s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes wow-intro-in { from { opacity: 0; transform: translateY(.4em); filter: blur(12px); } }
@keyframes wow-intro-bar { from { transform: scaleX(0); } }

/* ----- Thanh tiến trình phát sáng ----- */
.wow .scroll-progress { height: 3px; background: linear-gradient(90deg, #fe68c6, #ff8ec0 40%, #fff 100%); }

/* ----- Banner ----- */
.wow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.wow .hero h1.words .wi {
  filter: blur(14px); transform: translateY(.7em) rotate(5deg); transform-origin: 0 100%;
  transition: opacity .9s var(--ease-out), transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .9s var(--ease-out);
  transition-delay: calc(.55s + var(--i, 0) * 110ms);
}
.wow .hero h1.words.in .wi { filter: none; transform: none; }
.wow .hero-tagline, .wow .hero-event { animation: wow-rise 1s cubic-bezier(.16, 1, .3, 1) both; }
.wow .hero-tagline { animation-delay: 1.15s; }
.wow .hero-event { animation-delay: 1.35s; }
@keyframes wow-rise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } }
/* cuộn đi: chữ trôi lên + mờ dần, phím phóng to nhẹ (--hp: 0 → 1 do wow.js đặt); chỉ cho máy dùng chuột */
@media (hover: hover) and (pointer: fine) {
  .wow .hero > .container { opacity: calc(1 - var(--hp, 0) * 1.5); translate: 0 calc(var(--hp, 0) * -90px); }
}
.wow .hero-object { animation: wow-pop 1.4s cubic-bezier(.16, 1, .3, 1) .5s both; }
@media (hover: hover) and (pointer: fine) {
  .wow .hero-object { scale: calc(1 + var(--hp, 0) * .22); rotate: calc(var(--hp, 0) * -7deg); }
}
@keyframes wow-pop { from { opacity: 0; scale: .55; rotate: -16deg; } }
.wow .hero-event-date { cursor: default; }

/* ----- Dải chữ chạy ----- */
.wow-marquee {
  position: relative; z-index: 2; overflow: hidden; background: #0a0a0a; color: #fff;
  padding: clamp(18px, 2.6vw, 34px) 0; border-block: 1px solid rgba(255, 255, 255, .08);
}
.wow-marquee::before, .wow-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 1; pointer-events: none; }
.wow-marquee::before { left: 0; background: linear-gradient(90deg, #0a0a0a, rgba(10, 10, 10, 0)); }
.wow-marquee::after { right: 0; background: linear-gradient(270deg, #0a0a0a, rgba(10, 10, 10, 0)); }
.wow-marquee-track { display: flex; width: max-content; will-change: transform; }
.wow-marquee-item {
  display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding-right: clamp(20px, 3vw, 48px);
  font-family: var(--font-display); font-size: clamp(2rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
}
.wow-marquee-item.is-solid { -webkit-text-stroke: 0; color: #fff; }
.wow-star { flex: none; width: .5em; height: .5em; background: #fa74a9; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: wow-spin 6s linear infinite; }
@keyframes wow-spin { to { transform: rotate(360deg); } }

/* ----- Tiêu đề section: từng từ trượt lên từ sau mặt nạ ----- */
.wow-split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .18em; margin-bottom: -.18em; }
.wow-split .w > span { display: inline-block; transform: translateY(115%) rotate(6deg); transform-origin: 0 100%; transition: transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--w, 0) * 70ms); }
.wow-split.wow-in .w > span { transform: none; }
.wow .section-head h2::after {
  content: ""; display: block; width: 72px; height: 4px; margin-top: .35em; border-radius: 4px;
  background: linear-gradient(90deg, var(--pink-500), var(--pink-300)); transform: scaleX(0); transform-origin: left;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) .35s;
}
.wow .section-head h2.wow-in::after { transform: none; }

/* ----- Quầng sáng trôi trên các nền tối ----- */
.wow-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.wow-aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.wow-aurora i:nth-child(1) { left: -12vmax; top: -18vmax; background: radial-gradient(circle, rgba(235, 47, 150, .55), transparent 65%); animation: wow-drift-a 16s ease-in-out infinite alternate; }
.wow-aurora i:nth-child(2) { right: -14vmax; bottom: -22vmax; background: radial-gradient(circle, rgba(184, 26, 94, .45), transparent 65%); animation: wow-drift-b 20s ease-in-out infinite alternate; }
@keyframes wow-drift-a { to { transform: translate3d(22vmax, 12vmax, 0) scale(1.25); } }
@keyframes wow-drift-b { to { transform: translate3d(-20vmax, -14vmax, 0) scale(.85); } }

/* ----- Challenge + CTA: phím trôi theo cuộn (--cp: -1 → 1) ----- */
.wow .challenge-art { rotate: calc(var(--cp, 0) * 10deg); scale: calc(1.08 - var(--cp, 0) * .1); }
.wow .cta-object { translate: 0 calc(var(--cp, 0) * -46px); rotate: calc(var(--cp, 0) * 9deg); }
.wow .cta-bg img { scale: calc(1.04 - var(--cp, 0) * .04); transform-origin: 100% 50%; }

/* ----- Đèn rọi theo con trỏ trên thẻ ----- */
.wow [data-spot] { background-image: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(235, 47, 150, .13), transparent 70%); }
.wow .faq-item { transition: border-color .2s, box-shadow .35s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.wow .faq-item:hover, .wow .faq-item[open] { box-shadow: 0 14px 36px -18px rgba(0, 0, 0, .18); }
.wow .faq-item:hover { transform: translateX(6px); }
.wow { interpolate-size: allow-keywords; }
.wow .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .4s cubic-bezier(.16, 1, .3, 1), content-visibility .4s allow-discrete; }
.wow .faq-item[open]::details-content { block-size: auto; }

/* ----- Nghiêng 3D theo con trỏ ----- */
.wow [data-tilt]:not(.reveal) {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; transform-style: preserve-3d; will-change: transform;
}
.wow [data-tilt].is-tilting { transition-duration: .12s, .4s; }
.wow .requirements.is-tilting { box-shadow: 0 30px 60px -30px rgba(165, 0, 100, .5); }

/* ----- Các vòng thi ----- */
.wow .step { background-image: linear-gradient(90deg, rgba(235, 47, 150, .09), rgba(235, 47, 150, 0) 70%); background-repeat: no-repeat; background-size: 0% 100%; transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-size .7s cubic-bezier(.16, 1, .3, 1); }
.wow .step.is-on { background-size: 100% 100%; }
.wow .step:not(.reveal):hover { transform: translateX(10px); }
.wow .step::before { transition: transform .45s cubic-bezier(.16, 1, .3, 1), text-shadow .45s; }
.wow .step:hover::before, .wow .step.is-on::before { transform: scale(1.18) rotate(-6deg); text-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
/* Trang Đề thi: các bước là thẻ trong lưới, không phóng số / tô nền / dịch sang phải (số bị tràn ra ngoài thẻ) */
.wow .doc-overview .step, .wow .doc-overview .step.is-on { background-size: 0% 100%; }
.wow .doc-overview .step:not(.reveal):hover { transform: none; }
.wow .doc-overview .step:hover::before, .wow .doc-overview .step.is-on::before { transform: none; text-shadow: none; }

/* ----- Giải thưởng ----- */
.wow .section-prize .container { z-index: 2; }
.wow .prize-item { position: relative; }
.wow .is-main .prize-num { filter: drop-shadow(0 18px 44px rgba(0, 0, 0, .45)); }
.wow .prize-side .prize-item { transition: translate .45s cubic-bezier(.16, 1, .3, 1), border-color .3s; }
.wow .prize-side .prize-item:hover { translate: 12px 0; border-color: rgba(255, 142, 192, .8); }
.wow .prize-side .prize-item:hover .prize-num { color: #ff8ec0; }
.wow .prize-num { transition: color .3s; }
.wow-burst { position: absolute; left: 0; top: 0; width: 14px; height: 14px; pointer-events: none; z-index: 3; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* ----- Giám khảo ----- */
.wow .person-cutout { transition: transform .6s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 100%; }
.wow .person:hover .person-cutout { transform: translateZ(40px) scale(1.09); }
.wow .person-name { transition: color .3s; }
.wow .person:hover .person-name { color: var(--momo-pink); }
@media (hover: hover) and (pointer: fine) {
  .wow .person { transition: opacity .4s, filter .4s; }
  .wow .carousel-track:has(.person:hover) .person:not(:hover) { opacity: .4; filter: grayscale(1); }
}

/* ----- Nút: nam châm + vệt sáng ----- */
.wow .btn { transition: translate .35s cubic-bezier(.16, 1, .3, 1), transform .2s, background-color .2s, border-color .2s, color .2s, box-shadow .3s; }
.wow .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.wow .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.wow .btn-primary:hover::after { transform: translateX(120%); }
.wow .hero .btn-primary::after, .wow .cta-band .btn-primary::after { background: linear-gradient(105deg, transparent 35%, rgba(235, 47, 150, .28) 50%, transparent 65%); }

/* ----- Vòng sáng bám con trỏ (chỉ chuột; con trỏ thật vẫn hiện) ----- */

/* ----- Khối nền tối nở từ thẻ bo góc ra tràn màn hình (--sp: 0 → 1) ----- */
.wow .section-prize, .wow .cta-band { clip-path: inset(0 calc((1 - var(--sp, 1)) * 5vw) round calc((1 - var(--sp, 1)) * 64px)); }

/* ----- Challenge: chữ sáng dần theo cú cuộn ----- */
.wow .section-challenge .lead .rw { opacity: .4; transition: opacity .5s ease-out; }
.wow .section-challenge .lead .rw.on { opacity: 1; }

/* ----- Sao nhấp nháy trên dải kêu gọi ----- */
.wow-twinkles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wow-tw { position: absolute; background: #ffe4f0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: wow-twinkle 4s ease-in-out infinite; }
@keyframes wow-twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 50% { opacity: .9; transform: scale(1) rotate(90deg); } }

@media (max-width: 860px) {
  .wow .faq-item:hover, .wow .step:not(.reveal):hover { transform: none; }
  .wow-aurora i { filter: blur(50px); }
}
/* Điện thoại / màn cảm ứng: bỏ các hiệu ứng nặng (blur chữ, hoà trộn màu canvas, quầng chuyển động) */
@media (hover: none), (pointer: coarse), (max-width: 860px) {
  .wow-canvas { mix-blend-mode: normal; }
  .wow .hero h1.words .wi { filter: none; transform: translateY(.5em); transition: opacity .8s var(--ease-out), transform 1s cubic-bezier(.16, 1, .3, 1); }
  .wow .hero h1.words.in .wi { transform: none; }
  .wow .hero-tagline, .wow .hero-event { animation-name: wow-rise-lite; }
  .wow-intro-mark { animation-name: wow-intro-in-lite; }
  .wow-aurora i { animation: none; filter: blur(40px); opacity: .35; }
  .wow .section-prize, .wow .cta-band { clip-path: none; }
}
@keyframes wow-rise-lite { from { opacity: 0; transform: translateY(24px); } }
@keyframes wow-intro-in-lite { from { opacity: 0; transform: translateY(.4em); } }

/* Cho phép bấm xuyên xuống hai phím: khung chữ không chặn chuột ngoài phần chữ */
.has-kv .hero > .container, .has-kv .hero-inner { pointer-events: none; }
.has-kv .hero-text { pointer-events: auto; }

/* Bấm nhanh nhiều lần vào banner làm trình duyệt "bôi chọn" ảnh nền/canvas -> cả banner phủ màu hồng sáng. Không cho chọn các lớp hình. */
.hero-stage, .hero-bg, .hero-bg img, .hero-object, .hero canvas { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* Tiêu đề lớn trên banner: không bôi chọn */
.hero h1, .hero h1 * { -webkit-user-select: none; user-select: none; }


/* ===== Hiệu ứng lấy ý tưởng từ M16 (nhẹ) ===== */
/* 1. Vệt sáng quét qua nút chính khi hover/focus (nút mờ/disabled thì không) */
.wow .btn-primary:not(:disabled) { position: relative; overflow: hidden; isolation: isolate; }
.wow .btn-primary:not(:disabled)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-130%) skewX(-20deg);
}
.wow .btn-primary:not(:disabled):hover::after, .wow .btn-primary:not(:disabled):focus-visible::after { animation: wow-sheen .75s ease-out 1; }
@keyframes wow-sheen { to { transform: translateX(300%) skewX(-20deg); } }

/* 2. Ảnh nền banner vào chậm: phóng nhẹ rồi về đúng cỡ (dùng thuộc tính scale riêng, không đụng parallax transform) */
.wow .hero-bg img { animation: wow-hero-in 1.6s cubic-bezier(.16, 1, .3, 1) .35s both; }
@keyframes wow-hero-in { from { scale: 1.08; opacity: .7; } to { scale: 1; opacity: 1; } }

/* 4. Sao nhỏ trôi nhẹ ở Challenge */
.section-challenge { position: relative; }
.wow-floaters { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wow-floater { position: absolute; width: 22px; height: 22px; fill: #ffe4f0; opacity: .8; animation: wow-floaty 6s ease-in-out infinite; }
.wow-floater:nth-child(1) { top: 12%; right: 30%; width: 26px; height: 26px; }
.wow-floater:nth-child(2) { top: 64%; right: 8%; width: 16px; height: 16px; animation-delay: -2s; animation-duration: 7s; }
.wow-floater:nth-child(3) { top: 30%; right: 4%; width: 12px; height: 12px; animation-delay: -4s; }
.wow-floater:nth-child(4) { top: 78%; right: 36%; width: 18px; height: 18px; animation-delay: -1s; animation-duration: 8s; }
.wow-floater:nth-child(5) { top: 8%; right: 12%; width: 14px; height: 14px; animation-delay: -3s; animation-duration: 5.5s; }
@keyframes wow-floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
@media (max-width: 860px) { .wow-floater:nth-child(n+4) { display: none; } }

/* 5. Timeline: đường tô dần, chấm sáng lần lượt, chấm chạy dọc, mốc cuối có vòng sóng */
.wow .tl::after { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.45, 0, .2, 1) .15s; }
.wow .tl.is-in::after { transform: none; }
.wow .tl-dot { transform: scale(.6); background: var(--color-surface); transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .3s; }
.wow .tl.is-in .tl-dot { transform: none; }
.wow .tl.is-in .tl-node:nth-of-type(1) .tl-dot { transition-delay: .1s; }
.wow .tl.is-in .tl-node:nth-of-type(2) .tl-dot { transition-delay: .75s; }
.wow .tl.is-in .tl-node:nth-of-type(3) .tl-dot { transition-delay: 1.4s; }
.wow .tl-4.is-in .tl-node:nth-of-type(2) .tl-dot { transition-delay: .6s; }
.wow .tl-4.is-in .tl-node:nth-of-type(3) .tl-dot { transition-delay: 1.1s; }
.wow .tl-4.is-in .tl-node:nth-of-type(4) .tl-dot { transition-delay: 1.6s; }
.wow .tl.is-in .tl-node.is-last .tl-dot { animation: wow-ring 2.4s ease-out 1.6s infinite; }
.wow .tl.is-in .tl-run { animation: wow-tl-run 1.4s cubic-bezier(.45, 0, .2, 1) .15s 1 both; }
@keyframes wow-tl-run { 0% { left: calc(50% / var(--n)); opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 50% / var(--n)); opacity: 0; } }
@keyframes wow-ring { 0% { box-shadow: 0 0 0 0 rgba(165, 0, 100, .45); } 100% { box-shadow: 0 0 0 14px rgba(165, 0, 100, 0); } }
@media (max-width: 520px) {
  .wow .tl::after { transform: scaleY(0); }
  .wow .tl.is-in::after { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wow .btn-primary:not(:disabled)::after, .wow .hero-bg img, .wow-floater, .wow .tl-dot, .wow .tl-run { animation: none !important; }
  .wow .tl::after { transform: none; transition: none; }
}