/* Hero demo: phòng khách nhỏ — TV (Telly ngồi trên nóc), bé ngồi sofa, điện thoại làm remote.
   Mọi vị trí theo % của sân khấu, cỡ chữ theo cqw để cả cảnh co giãn như một bức tranh. */
.stage {
  position: relative; width: 100%; max-width: 100%; aspect-ratio: 1.1;
  container-type: inline-size; isolation: isolate; user-select: none; -webkit-user-select: none;
}
.stage svg { display: block; }

/* ---------- Phòng ---------- */
.room {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* ---------- TV ---------- */
.tv {
  position: absolute; left: 33%; top: 15%; width: 60%; z-index: 2;
  background: var(--navy); border-radius: 2.4cqw; padding: 1.2cqw;
  box-shadow: 0 3cqw 5cqw rgba(11, 21, 48, 0.22);
}
.tv::after { /* chân TV */
  content: ""; position: absolute; left: 50%; bottom: -2.2cqw; width: 22%; height: 2.2cqw;
  transform: translateX(-50%); background: #26355A; border-radius: 0 0 1.2cqw 1.2cqw;
}
.screen { position: relative; aspect-ratio: 16 / 9; border-radius: 1.4cqw; overflow: hidden; background: var(--peach); }
.screen.flash::before {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 20% 70%, rgba(255, 255, 255, 0.85), transparent 60%);
  animation: flash .45s ease-out forwards;
}
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

.slide-card {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  gap: 3%; padding: 5% 7% 9%;
}
.slide-card.enter { animation: slide-in .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.slide-card.leave { animation: slide-out .3s ease-in both; }
@keyframes slide-in { from { opacity: 0; transform: translateX(14%) rotate(3deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes slide-out { to { opacity: 0; transform: translateX(-12%) rotate(-3deg) scale(.92); } }
.slide-card .art { width: 100%; animation: wobble 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-3%); } }
.slide-card .words { display: flex; flex-direction: column; gap: .6cqw; min-width: 0; }
.slide-card .en { font-weight: 800; font-size: 4.6cqw; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.slide-card .tr { font-weight: 600; font-size: 2cqw; color: var(--muted); }
.voice-chip {
  margin-top: .8cqw; align-self: flex-start; display: inline-flex; align-items: center; gap: .7cqw;
  background: rgba(255, 255, 255, 0.78); border-radius: 999px; padding: .5cqw 1.2cqw; font-size: 1.35cqw; font-weight: 700; color: var(--ink);
}
.wave { display: inline-flex; align-items: center; gap: .25cqw; height: 1.8cqw; }
.wave i { width: .38cqw; height: 30%; border-radius: 1cqw; background: var(--coral); }
.stage.playing .wave i { animation: wave .9s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -.2s; } .wave i:nth-child(3) { animation-delay: -.45s; }
.wave i:nth-child(4) { animation-delay: -.65s; } .wave i:nth-child(5) { animation-delay: -.1s; }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }

.dots { position: absolute; left: 50%; bottom: 4.5%; transform: translateX(-50%); display: flex; gap: .6cqw; z-index: 3; }
.dots span { width: .8cqw; height: .8cqw; border-radius: 1cqw; background: rgba(14, 26, 51, 0.22); transition: width .3s ease, background .3s ease; }
.dots span.on { width: 2.6cqw; background: var(--ink); }
.tv-chip {
  position: absolute; left: 2.5%; top: 4%; z-index: 3; display: inline-flex; align-items: center; gap: .5cqw;
  font-size: 1.15cqw; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.72); padding: .35cqw .9cqw; border-radius: 999px;
}
.tv-chip i { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--green); }
.screen.flash .tv-chip { animation: pop .4s ease; }
@keyframes pop { 50% { transform: scale(1.18); } }
.paused-badge {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(11, 21, 48, 0.28);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.stage.paused .paused-badge { opacity: 1; }
.paused-badge span { width: 8cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; }
.paused-badge svg { width: 45%; }
.finished {
  position: absolute; inset: 0; z-index: 6; background: var(--navy); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.stage.done .finished { opacity: 1; visibility: visible; }
.finished svg { width: 11cqw; }
.stage.done .finished svg { animation: pop-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop-in { from { transform: scale(.3) rotate(-15deg); } to { transform: none; } }
.finished b { font-size: 3.2cqw; font-weight: 800; letter-spacing: -0.02em; }
.sparkle { position: absolute; z-index: 7; width: 2.2cqw; pointer-events: none; animation: sparkle .8s ease-out forwards; }
@keyframes sparkle { from { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); } }
.confetti { position: absolute; z-index: 8; width: 1cqw; height: 1.6cqw; border-radius: .3cqw; pointer-events: none; animation: confetti 1.6s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

/* ---------- Telly trên nóc TV ---------- */
.stage .telly-wrap { position: absolute; left: 76%; top: 1.5%; width: 14%; z-index: 3; transform-origin: 50% 100%; }
.telly-wrap svg { width: 100%; height: auto; filter: drop-shadow(0 1cqw 1.2cqw rgba(11, 21, 48, 0.18)); }
.telly-wrap.hop { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 0% { transform: none; } 30% { transform: translateY(-22%) scale(1.05, .95); } 60% { transform: translateY(0) scale(1.08, .9); } 100% { transform: none; } }
.telly-wrap .eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 4.2s infinite; transition: translate .25s ease; }
.telly-wrap.look .eyes { translate: -7px 3px; }
@keyframes blink { 0%, 93%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
.telly-wrap .m-wow, .telly-wrap .e-wow { display: none; }
.stage.done .telly-wrap .m-smile, .stage.done .telly-wrap .eyes { display: none; }
.stage.done .telly-wrap .m-wow, .stage.done .telly-wrap .e-wow { display: inline; }

/* ---------- Em bé ôm Telly nhồi bông ---------- */
.kid { position: absolute; left: 55%; bottom: -1%; width: 31%; z-index: 4; }
.kid svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1cqw 1.2cqw rgba(11, 21, 48, 0.1)); }
.kid .baby { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3.6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.kid .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5s infinite 1.3s; }
.kid .happy, .kid .open { display: none; }
.kid .plush { transform-box: fill-box; transform-origin: 50% 100%; transition: translate .35s cubic-bezier(.3, 1.6, .5, 1), rotate .35s ease; }
.kid.cheer .eye, .kid.cheer .smile { display: none; }
.kid.cheer .happy, .kid.cheer .open { display: inline; }
.kid.cheer .plush { translate: 0 -14px; rotate: -6deg; }
.kid.cheer .baby { animation: kid-hop .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes kid-hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -7%; } }
.heart { position: absolute; z-index: 8; width: 2.6cqw; pointer-events: none; animation: heart 1.2s ease-out forwards; }
@keyframes heart { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -9cqw) scale(1.1) rotate(var(--rot)); } }

/* ---------- Điện thoại (remote) ---------- */
.phone {
  position: absolute; left: 1%; bottom: 1.5%; width: 33%; aspect-ratio: 9 / 19; z-index: 6;
  background: #0B1530; border-radius: 4.6cqw; border: .9cqw solid #1B2440;
  box-shadow: 0 3cqw 6cqw rgba(11, 21, 48, 0.32), inset 0 0 0 .2cqw #2A3658;
  padding: 2cqw 2cqw 2.2cqw; display: flex; flex-direction: column; gap: 1.4cqw; color: var(--white);
  font-size: 1.3cqw; line-height: 1.3; overflow: hidden;
}
.phone::before { /* nút cạnh */ content: ""; position: absolute; }
.phone .island { position: absolute; left: 50%; top: 1cqw; width: 30%; height: 2.2cqw; transform: translateX(-50%); background: #000; border-radius: 2cqw; }
.ph-status { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1.15cqw; padding: 0 1cqw; height: 2.2cqw; }
.ph-status svg { height: 1.2cqw; width: auto; }
.ph-head { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; margin-top: .6cqw; }
.ph-head small { display: block; font-size: 1.05cqw; color: var(--dim-on-dark); font-weight: 500; }
.ph-head b { display: block; font-size: 1.7cqw; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.wifi-pill { display: inline-flex; align-items: center; gap: .5cqw; font-size: 1.05cqw; font-weight: 700; color: #6FE3B5; background: rgba(111, 227, 181, 0.14); padding: .4cqw .9cqw; border-radius: 999px; white-space: nowrap; }
.wifi-pill i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #6FE3B5; animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }
.ph-card { background: rgba(255, 255, 255, 0.07); border-radius: 2cqw; padding: 1.2cqw; display: flex; flex-direction: column; gap: 1cqw; }
.ph-thumb { position: relative; border-radius: 1.3cqw; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; transition: background .3s ease; }
.ph-thumb svg { width: 42%; }
.ph-thumb.enter svg { animation: pop-in .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.ph-meta { display: flex; flex-direction: column; gap: .3cqw; }
.ph-meta b { font-size: 1.55cqw; font-weight: 800; }
.ph-meta span.now { display: flex; align-items: center; gap: .7cqw; color: var(--dim-on-dark); font-size: 1.15cqw; }
.ph-meta .wave i { background: var(--star); }
.ph-page { display: flex; justify-content: space-between; font-size: 1.15cqw; color: var(--dim-on-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-bar { height: .7cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-top: -.6cqw; }
.ph-bar i { display: block; height: 100%; width: 20%; background: var(--sky-on-dark); border-radius: 1cqw; transition: width .45s cubic-bezier(.3, 1.3, .5, 1); }
.ph-ctrls { display: flex; align-items: center; justify-content: space-between; padding: .4cqw .6cqw; }
.pb {
  position: relative; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--white);
  width: 7.2cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.1);
  display: grid; place-items: center; transition: transform .12s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.pb svg { width: 42%; height: 42%; }
.pb.main { width: 10cqw; background: var(--white); color: var(--ink); }
.pb:hover { background: rgba(255, 255, 255, 0.18); } .pb.main:hover { background: #E7EEFF; }
.pb:active, .pb.press { transform: scale(.86); }
.pb:focus-visible { outline: .5cqw solid var(--star); outline-offset: .4cqw; }
.pb .ico-play { display: none; }
.stage.paused .pb .ico-play { display: block; } .stage.paused .pb .ico-pause { display: none; }
.ripple { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; border: .4cqw solid var(--star); animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.9); } }
.ph-chips { display: flex; gap: .8cqw; flex-wrap: wrap; }
.ph-chips span { font-size: 1.05cqw; font-weight: 700; padding: .5cqw 1.1cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.ph-chips span.on { background: var(--white); color: var(--ink); }
.ph-vol { display: flex; align-items: center; gap: 1cqw; margin-top: auto; }
.ph-vol svg { width: 1.8cqw; height: 1.8cqw; flex: none; }
.ph-vol span { flex: 1; height: .7cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.12); position: relative; }
.ph-vol span i { position: absolute; inset: 0 35% 0 0; background: var(--white); border-radius: 1cqw; }
.ph-vol span i::after { content: ""; position: absolute; right: -.8cqw; top: 50%; width: 1.6cqw; height: 1.6cqw; transform: translateY(-50%); background: var(--white); border-radius: 50%; }

/* ---------- Tín hiệu + ngón tay + gợi ý ---------- */
.signal-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; overflow: visible; }
.signal-layer path { fill: none; stroke: var(--sky); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0; transition: opacity .2s ease; }
.signal-layer path.on { opacity: .55; }
.signal-layer .star { opacity: 0; }
.signal-layer .star.on { opacity: 1; }
.wifi-rings { position: absolute; z-index: 7; width: 9cqw; aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%); }
.wifi-rings i { position: absolute; inset: 0; border-radius: 50%; border: .35cqw solid var(--sky); opacity: 0; }
.wifi-rings.go i { animation: ring .7s ease-out forwards; }
.wifi-rings.go i:nth-child(2) { animation-delay: .12s; }
@keyframes ring { from { opacity: .8; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }
.finger {
  position: absolute; z-index: 9; left: 0; top: 0; width: 6cqw; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.75); box-shadow: 0 .6cqw 1.6cqw rgba(11, 21, 48, 0.35), inset 0 0 0 .35cqw rgba(31, 91, 255, 0.45);
  opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(1); transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.finger.on { opacity: 1; }
.finger.tap { transform: translate(var(--fx, 0), var(--fy, 0)) scale(.78); transition-duration: .12s; }
.try-hint {
  position: absolute; z-index: 9; left: 22%; top: 15%; transform: translateX(-50%);
  background: var(--star); color: var(--ink); font-weight: 800; font-size: 1.5cqw; padding: .7cqw 1.4cqw; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 .8cqw 1.6cqw rgba(242, 100, 58, 0.25); animation: nudge 1.8s ease-in-out infinite; transition: opacity .3s ease;
}
.try-hint::after { content: ""; position: absolute; left: 50%; bottom: -.8cqw; transform: translateX(-50%); border: .8cqw solid transparent; border-bottom: 0; border-top-color: var(--star); }
.try-hint.gone { opacity: 0; pointer-events: none; }
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -18%); } }

@media (prefers-reduced-motion: reduce) {
  .stage *, .stage *::before, .stage *::after { animation: none !important; transition: none !important; }
  .finger { display: none; }
}