/* ============================================================
   CLUB ISO — game 2.5D isometric, camera cố định ~45°
   ============================================================ */

.club {
  /* Palette học theo club tím–hồng–xanh (IVY / LUSH) */
  --L1: #00e5ff;
  --L2: #ff2e88;
  --L3: #a78bfa;
  --L4: #e879f9;
  --L5: #fbbf24;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #07020f;
}

.club[hidden] { display: none; }

/* ---------- Sky thực tế — ảnh club + sương mù ---------- */
.iso__sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 3, 12, 0.55) 0%, rgba(5, 3, 12, 0.85) 50%, #050308 100%),
    url("/assets/club/crowd-bg.jpg") center 18% / cover no-repeat,
    #050308;
  z-index: 0;
  filter: saturate(0.75) brightness(0.72);
}
.iso__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 40% at 50% 30%, rgba(0, 229, 255, 0.12), transparent 70%),
    radial-gradient(40% 35% at 70% 60%, rgba(255, 46, 136, 0.1), transparent 65%);
  pointer-events: none;
  animation: isoSkyPulse 5s ease-in-out infinite;
}

.iso__video {
  position: absolute;
  left: 50%;
  top: 0;
  width: 70%;
  height: 28%;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0;
  filter: saturate(1.2) brightness(0.85);
  mask-image: linear-gradient(180deg, #000 40%, transparent);
}

.club.has-video .iso__video { opacity: 0.55; }

.iso__sky-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 35% at 50% 10%, rgba(167, 139, 250, 0.35), transparent 70%),
    radial-gradient(40% 30% at 30% 40%, rgba(255, 46, 136, 0.18), transparent 65%),
    radial-gradient(40% 30% at 70% 45%, rgba(0, 229, 255, 0.16), transparent 65%);
  pointer-events: none;
  animation: isoSkyPulse 4s ease-in-out infinite;
}

/* Haze / sương mù xanh tím bắt sáng đèn */
.iso__haze {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(80, 40, 140, 0.22) 0%, transparent 45%, rgba(5, 2, 16, 0.55) 100%),
    radial-gradient(60% 40% at 50% 35%, rgba(120, 80, 200, 0.18), transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: isoHazeDrift 8s ease-in-out infinite;
}
@keyframes isoHazeDrift {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-12px); }
}

@keyframes isoSkyPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* FX confetti / sparkler toàn màn */
.iso__fx {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  overflow: hidden;
}
.iso__confetti {
  position: absolute;
  top: -8%;
  left: var(--x, 50%);
  width: var(--w, 6px);
  height: var(--h, 10px);
  background: var(--c, #ff2e88);
  border-radius: 1px;
  opacity: 0;
  animation: isoConfettiFall var(--dur, 3s) linear var(--delay, 0s) forwards;
  box-shadow: 0 0 6px var(--c, #ff2e88);
}
@keyframes isoConfettiFall {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0.85; transform: translateY(110vh) rotate(var(--rot, 360deg)); }
}
.iso__sparkler {
  position: absolute;
  bottom: 28%;
  left: var(--x, 50%);
  width: 3px;
  height: 90px;
  margin-left: -1px;
  background: linear-gradient(180deg, #fff, #fbbf24 40%, transparent);
  box-shadow: 0 0 12px #fff, 0 0 24px #fbbf24;
  transform-origin: 50% 100%;
  opacity: 0;
  animation: isoSparkler 1.4s ease-out var(--delay, 0s) forwards;
}
.iso__sparkler::before,
.iso__sparkler::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, #fff, transparent);
  box-shadow: 0 0 8px #fff;
}
.iso__sparkler::before { transform: translateX(-50%) rotate(-28deg); }
.iso__sparkler::after { transform: translateX(-50%) rotate(28deg); }
@keyframes isoSparkler {
  0% { opacity: 0; transform: scaleY(0.4); }
  20% { opacity: 1; transform: scaleY(1.1); }
  100% { opacity: 0; transform: scaleY(0.7) translateY(-20px); }
}
.club.is-party .iso__smoke { animation-duration: 1.6s; opacity: 1; }

/* Có quà → cả sàn giơ tay quẩy, đèn nháy gắt hơn */
.club.is-party .iso-actor--crowd .mc--sticker .mc__rig {
  animation-name: mcPoseUp !important;
  animation-duration: calc(var(--beat, 0.48s) * 2.1) !important;
}
.club.is-party .iso__pars i { animation-duration: 0.42s; }
.club.is-party .iso__ledbar i { animation-duration: 0.6s; }
.club.is-party .iso__strobe { animation-duration: 2.6s; }
.club.is-party .iso__blinder { animation-duration: 1.8s; }
.club.is-party .iso__movers i { animation-duration: 2.4s; }
.club.is-party .iso__movers i::after { animation-duration: 0.5s; }

/* ---------- World container ---------- */
.iso {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  perspective: 1600px;
  perspective-origin: 50% 40%;
  overflow: hidden;
}

/* Camera điện ảnh — pan/zoom/cắt góc (không spin liên tục) */
.iso__cam {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 55%;
  will-change: transform;
}

/* Lớp backdrop trong cam */
.iso__rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transition: none;
}

/* Tường bar thực tế phía sau */
.iso__roomwall {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1200px;
  height: 620px;
  margin-left: -600px;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(5, 3, 12, 0.25) 0%, rgba(5, 3, 12, 0.75) 100%),
    url("/assets/club/wall.jpg") center top / cover no-repeat;
  transform: perspective(1400px) rotateX(4deg) scale(1, 0.95);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  pointer-events: none;
}

/* ============================================================
   Màn LED YouTube — phía sau bàn DJ, CSS 3D + Bloom/Neon
   ============================================================ */
.iso__ledwall {
  position: absolute;
  left: 50%;
  /* Nhỏ hơn — kiểu video: màn trên booth DJ */
  top: 10px;
  width: 532px;
  height: 300px;
  margin-left: -266px;
  z-index: 6;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform:
    perspective(1400px)
    rotateX(4deg)
    scale(0.95, 0.92);
  transform-style: preserve-3d;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.7));
}

.iso__ledwall-bloom {
  position: absolute;
  /* Bloom vừa khung 16:9 — không kéo sáng ngang hai bên */
  inset: -20px -16px;
  border-radius: 20px;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 229, 255, 0.65) 0%,
    rgba(255, 46, 136, 0.32) 42%,
    rgba(167, 139, 250, 0.14) 58%,
    transparent 72%
  );
  filter: blur(22px);
  opacity: 0.85;
  animation: ledBloomPulse 2.4s ease-in-out infinite;
  z-index: 0;
}

.iso__ledwall-bloom--soft {
  inset: -32px -22px;
  filter: blur(32px);
  opacity: 0.45;
  animation-delay: 0.5s;
}

@keyframes ledBloomPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

.iso__ledwall-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(160deg, #243048, #0a0c14 55%, #16122a);
  border: 4px solid rgba(0, 229, 255, 0.9);
  box-shadow:
    0 0 0 3px rgba(255, 46, 136, 0.4),
    0 0 60px rgba(0, 229, 255, 0.7),
    0 0 140px rgba(255, 46, 136, 0.4),
    inset 0 0 40px rgba(0, 229, 255, 0.16);
}

.iso__ledwall-bezel {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  bottom: 34px;
  border-radius: 8px;
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 229, 255, 0.15);
}

/* Chân đế LED — tách rõ khỏi sàn nhảy */
.iso__ledwall::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -18px;
  height: 18px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #1a2438, #06060c);
  border: 2px solid rgba(0, 229, 255, 0.35);
  border-top: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  z-index: 0;
}

.iso__ledwall-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #04040a;
}

.iso__ledwall-yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* Chỉ đen khi thật sự có video, không thì che mất chữ báo trạng thái */
  background: transparent;
}
.club.has-yt .iso__ledwall-yt { background: #000; }

.iso__ledwall-yt iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  pointer-events: none;
}

.iso__ledwall-idle {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 18px,
      rgba(255, 46, 136, 0.12) 18px 20px
    ),
    radial-gradient(circle at 30% 40%, rgba(255, 46, 136, 0.35), transparent 45%),
    radial-gradient(circle at 70% 55%, rgba(0, 200, 255, 0.3), transparent 45%),
    radial-gradient(ellipse at 50% 40%, rgba(90, 30, 160, 0.75), #080210 75%);
  color: #ffb0d8;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-shadow: 0 0 16px #ff2e88, 0 0 28px #a78bfa;
  animation: ledIdleFlicker 3s steps(2) infinite;
}
.iso__ledwall-idle small {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #ff9ed0;
  font-weight: 700;
  opacity: 0.85;
}
.club.has-yt .iso__ledwall-idle { opacity: 0; pointer-events: none; }
/* Báo lỗi thì đổi sang tông đỏ cho dễ thấy khi đang live */
.club.has-yt-error .iso__ledwall-idle {
  color: #ffd9d0;
  text-shadow: 0 0 16px #ff4d4d, 0 0 30px #ff2e88;
}
.club.has-yt-error .iso__ledwall-idle small {
  color: #ffc2b6;
  letter-spacing: 0;
  max-width: 82%;
  text-align: center;
  line-height: 1.45;
}

@keyframes ledIdleFlicker {
  0%, 100% { filter: brightness(0.85); }
  50% { filter: brightness(1.25); }
}

.iso__ledwall-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    rgba(0, 0, 0, 0.18) 3px 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.45;
}

.iso__ledwall-glass {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 32%,
    transparent 62%,
    rgba(0, 229, 255, 0.08) 100%
  );
  box-shadow: inset 0 0 50px rgba(0, 229, 255, 0.2);
}

.iso__ledwall-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #cdefff;
  text-shadow: 0 0 10px #00e5ff;
  white-space: nowrap;
}

.club.has-yt .iso__ledwall-frame {
  box-shadow:
    0 0 0 2px rgba(255, 46, 136, 0.45),
    0 0 55px rgba(0, 229, 255, 0.75),
    0 0 120px rgba(255, 46, 136, 0.45),
    inset 0 0 30px rgba(0, 229, 255, 0.18);
}

/* Ticker chữ LED kiểu "Love you / Happy Birthday" */
.iso__led-ticker {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -2px;
  z-index: 5;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(8, 2, 20, 0.88);
  border: 1px solid rgba(255, 46, 136, 0.65);
  color: #ffe4f4;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s;
  text-shadow: 0 0 10px #ff2e88;
  pointer-events: none;
}
.iso__led-ticker.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* Loa line-array treo hai bên sân khấu */
.iso__hang-speaker {
  position: absolute;
  top: 40px;
  width: 36px;
  height: 160px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #1a1a22, #0a0a10);
  border: 2px solid rgba(180, 180, 200, 0.35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(167, 139, 250, 0.25);
}
.iso__hang-speaker--l {
  left: 28px;
  transform: rotate(6deg);
}
.iso__hang-speaker--r {
  right: 28px;
  left: auto;
  transform: rotate(-6deg);
}
.iso__hang-speaker i {
  flex: 1;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%, #555 0 35%, #222 36%);
  border: 1px solid #333;
  box-shadow: inset 0 0 6px #000;
}
.iso__hang-speaker::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  margin-left: -1px;
  background: #444;
  box-shadow: 0 0 4px #000;
}

/* Cột khói CO2 */
.iso__smoke {
  position: absolute;
  top: 560px;
  width: 64px;
  height: 200px;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(200, 220, 255, 0.15) 45%, transparent);
  filter: blur(8px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: isoSmoke 3.2s ease-in-out infinite;
  clip-path: polygon(35% 100%, 65% 100%, 90% 0, 10% 0);
}
.iso__smoke--l { left: 120px; }
.iso__smoke--r { right: 120px; left: auto; animation-delay: 0.8s; }
@keyframes isoSmoke {
  0%, 100% { opacity: 0.25; transform: scaleY(0.85) translateY(10px); }
  50% { opacity: 0.75; transform: scaleY(1.15) translateY(-16px); }
}

/* ---------- Sàn nhảy 3D: lưới phối cảnh + vòng sáng ---------- */
.iso__floor {
  position: absolute;
  left: 0;
  right: 0;
  top: 700px;
  bottom: 0;
  z-index: 8;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #333a4c 0%, #212637 38%, #12141d 72%, #08090f 100%);
  box-shadow: inset 0 40px 90px rgba(0, 0, 0, 0.6);
}
/* Lưới phối cảnh: tia hội tụ về điểm tụ + hàng ngang giãn dần */
.iso__floor-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-conic-gradient(
      from 96deg at 50% -14%,
      rgba(150, 210, 255, 0.16) 0deg 0.35deg,
      transparent 0.35deg 4.2deg
    ),
    linear-gradient(
      180deg,
      transparent 0 3.6%, rgba(150, 210, 255, 0.14) 3.6% 3.9%,
      transparent 3.9% 9%, rgba(150, 210, 255, 0.13) 9% 9.35%,
      transparent 9.35% 15.5%, rgba(150, 210, 255, 0.12) 15.5% 15.9%,
      transparent 15.9% 23.5%, rgba(150, 210, 255, 0.11) 23.5% 23.95%,
      transparent 23.95% 33%, rgba(150, 210, 255, 0.1) 33% 33.5%,
      transparent 33.5% 44%, rgba(150, 210, 255, 0.09) 44% 44.6%,
      transparent 44.6% 56.5%, rgba(150, 210, 255, 0.08) 56.5% 57.2%,
      transparent 57.2% 70.5%, rgba(150, 210, 255, 0.07) 70.5% 71.3%,
      transparent 71.3% 86%, rgba(150, 210, 255, 0.06) 86% 86.9%,
      transparent 86.9% 100%
    );
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, #000 22%, #000 72%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
}
.iso__floor-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 34% at 50% 6%, rgba(140, 190, 255, 0.3), transparent 72%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 0, 0, 0.55), transparent 70%);
  pointer-events: none;
}
/* Vệt sáng ellipse nằm bẹt trên mặt sàn */
.iso__floor-spot {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: floorSpotPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}
.iso__floor-spot--a {
  left: 8%; top: 24%; width: 300px; height: 84px;
  background: radial-gradient(ellipse, rgba(80, 180, 255, 0.6), transparent 70%);
}
.iso__floor-spot--b {
  right: 6%; top: 32%; width: 280px; height: 78px;
  background: radial-gradient(ellipse, rgba(255, 200, 70, 0.5), transparent 70%);
  animation-delay: 0.7s;
}
.iso__floor-spot--c {
  left: 30%; top: 55%; width: 380px; height: 104px;
  background: radial-gradient(ellipse, rgba(120, 255, 190, 0.4), transparent 70%);
  animation-delay: 1.2s;
}
.iso__floor-spot--d {
  left: 14%; bottom: 10%; width: 420px; height: 118px;
  background: radial-gradient(ellipse, rgba(210, 120, 255, 0.42), transparent 70%);
  animation-delay: 1.8s;
}
@keyframes floorSpotPulse {
  0%, 100% { opacity: 0.32; transform: scale(1); }
  50% { opacity: 0.62; transform: scale(1.05); }
}
/* Phản chiếu bóng mặt sàn */
.iso__floor-sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(180, 220, 255, 0.12) 0%, transparent 26%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

/* Gợi ý cmt như video */
/* ---------- Bảng hướng dẫn góc trái dưới ---------- */
.guide { display: none; }
body[data-theme="club"] .guide {
  position: absolute;
  left: 12px;
  bottom: 62px;
  z-index: 50;
  display: grid;
  gap: 5px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(6, 4, 16, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.28);
  pointer-events: none;
}
.guide__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1.15;
  text-shadow: 0 1px 3px #000;
}
.guide__key {
  min-width: 46px;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  color: #04121a;
  background: linear-gradient(180deg, #b8fbff, #35dcf5);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.55);
}
.guide__key--gift {
  background: linear-gradient(180deg, #ffd9ec, #ff5fa8);
  box-shadow: 0 0 10px rgba(255, 95, 168, 0.6);
}
.guide__zh {
  color: #ffd54a;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.guide__vi {
  color: #eaf6ff;
  font-weight: 700;
}
/* Dấu ngắt chỉ xuất hiện khi đang hiện cả hai thứ tiếng */
.guide__zh + .guide__vi::before {
  content: "·";
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.45);
}
body[data-lang="zh"] .guide__vi,
body[data-lang="vi"] .guide__zh { display: none; }
body[data-lang="vi"] .guide__zh + .guide__vi::before { content: none; }

/* Legacy floor bits — tắt */
.iso__floor::before,
.iso__floor::after,
.iso__grid,
.iso__neon-ring,
.iso__neon-star,
.iso__tile-glow { display: none !important; }

.iso__neon-star--2 {
  left: auto;
  right: 16%;
  top: 58%;
  width: 120px;
  height: 120px;
  background: rgba(255, 46, 136, 0.5);
  filter: drop-shadow(0 0 12px rgba(255, 46, 136, 0.8));
  animation-delay: 1s;
}

.iso__tile-glow {
  position: absolute;
  inset: 10%;
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 229, 255, 0.2), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(167, 139, 250, 0.18), transparent 42%);
  animation: isoTilePulse 3s ease-in-out infinite;
}

@keyframes isoTilePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes isoNeonBlink {
  0%, 100% { opacity: 0.45; filter: brightness(0.8); }
  40% { opacity: 1; filter: brightness(1.35); }
  70% { opacity: 0.7; filter: brightness(1); }
}

/* ============================================================
   DJ BOOTH — phong cách nightclub thật
   · Mặt LED fascia cong (semi-circular LED booth)
   · Deck CDJ + mixer trên mặt bàn
   · Circular LED podium phía trước
   · Line-array tower hai bên
   ============================================================ */
.iso__dj {
  position: absolute;
  left: 50%;
  top: 516px;
  width: 1040px;
  height: 500px;
  margin-left: -520px;
  z-index: 12;
  pointer-events: none;
  perspective: 1100px;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}

/* ----- Loa tower chuyên nghiệp ----- */
.iso__tower {
  position: absolute;
  top: 8px;
  width: 78px;
  height: 240px;
  z-index: 8;
  transform-style: preserve-3d;
}
.iso__tower--l {
  left: 48px;
  transform: rotateY(22deg) rotateX(4deg);
}
.iso__tower--r {
  right: 48px;
  transform: rotateY(-22deg) rotateX(4deg);
}
.iso__tower-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 8px;
  background:
    linear-gradient(165deg, #3a3a44 0%, #141418 40%, #08080c 100%);
  border: 2px solid #2a2a32;
  box-shadow:
    12px 16px 0 #030306,
    0 0 24px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.iso__tower-side {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 14px;
  background: linear-gradient(180deg, #1a1a22, #060608);
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.6);
}
.iso__tower--l .iso__tower-side { right: -12px; transform: skewY(-2deg); }
.iso__tower--r .iso__tower-side { left: -12px; transform: skewY(2deg); }
.iso__tower-body i {
  flex: 1;
  border-radius: 50%;
  border: 2px solid #1a1a20;
  background:
    radial-gradient(circle at 42% 38%, #888 0 8%, #444 14% 38%, #1a1a1e 42% 68%, #0a0a0c 70%);
  box-shadow:
    inset 0 0 8px #000,
    0 0 0 1px #333;
  animation: isoSpeaker 1.1s ease-in-out infinite;
}
.iso__tower--r .iso__tower-body i { animation-delay: 0.12s; }
.iso__tower-glow {
  position: absolute;
  inset: -16px;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 60%, rgba(80, 180, 255, 0.28), transparent 65%);
  filter: blur(10px);
  z-index: -1;
  animation: isoVipPulse 2s ease-in-out infinite;
}
@keyframes isoSpeaker {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* ----- Booth LED cong ----- */
.iso__dj-booth {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 560px;
  height: 230px;
  margin-left: -280px;
  z-index: 3;
  transform: rotateX(8deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

/* DJ panda đứng sau bàn deck — chân khuất sau mặt bàn */
.iso__dj-operator {
  position: absolute;
  left: 50%;
  /* Nâng lên để mặt bàn chỉ cắt ngang hông: thấy trọn đầu + thân + tay,
     không còn kiểu cái đầu nổi trên bàn. */
  bottom: 190px;
  width: 340px;
  height: 330px;
  margin-left: -170px;
  /* Dưới deck (z 4) và fascia (z 3) → chỉ đầu + vai nhô lên sau bàn */
  z-index: 1;
  pointer-events: none;
}
.iso__dj-op-slot {
  position: absolute;
  inset: 0;
}

/* Quầng sáng sau lưng DJ — tách người khỏi nền tối cho khỏi chìm */
.iso__dj-operator::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -70px;
  width: 430px;
  height: 430px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 229, 255, 0.34) 0 22%,
    rgba(255, 46, 136, 0.18) 46%,
    transparent 72%
  );
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: djHalo 2.6s ease-in-out infinite;
  z-index: 0;
}
@keyframes djHalo {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.07); }
}

/* Đèn rọi từ giàn truss xuống đúng chỗ DJ đứng */
.iso__dj-operator::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 330px;
  height: 430px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.26),
    rgba(180, 240, 255, 0.1) 45%,
    transparent 80%
  );
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  filter: blur(6px);
  mix-blend-mode: screen;
  animation: djHalo 3.4s ease-in-out infinite reverse;
  z-index: 0;
}
.iso__dj-char {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 2;
}
.iso__dj-char-img {
  display: block;
  height: 330px;
  width: auto;
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 14px rgba(0, 229, 255, 0.35));
  animation: djBob 1.05s ease-in-out infinite;
}
@keyframes djBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}
.iso__dj-op-tag {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff2e88, #a78bfa);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  box-shadow: 0 0 14px rgba(255, 46, 136, 0.7);
  animation: isoVipPulse 1.6s ease-in-out infinite;
}

/* Đế dày dưới booth */
.iso__dj-plinth {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6px;
  height: 22px;
  background: linear-gradient(180deg, #1a1a24, #06060a);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65);
  transform: translateZ(-20px);
}

/* Mặt LED fascia — signature club booth */
/* Fascia = equalizer thanh ngang xanh (học Video/) */
.iso__dj-fascia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  /* Chạm đáy mặt bàn deck → che kín nửa thân dưới của DJ */
  height: 136px;
  z-index: 3;
  border-radius: 10px 10px 18px 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #0a1220, #04060c);
  border: 2px solid rgba(80, 200, 255, 0.55);
  box-shadow:
    0 0 36px rgba(0, 180, 255, 0.45),
    0 14px 0 #030508,
    inset 0 0 30px rgba(0, 140, 220, 0.2);
  transform: translateZ(0);
}
.iso__eq {
  position: absolute;
  inset: 10px 12px 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
  z-index: 1;
}
.iso__eq i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #e8ffff, #00e5ff 35%, #0077aa);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.75);
  height: 40%;
  animation: eqBar 0.55s ease-in-out infinite alternate;
}
.iso__eq i:nth-child(odd) { animation-duration: 0.42s; height: 55%; }
.iso__eq i:nth-child(3n) { animation-duration: 0.7s; height: 70%; }
.iso__eq i:nth-child(4n) { animation-duration: 0.35s; height: 85%; background: linear-gradient(180deg, #fff, #5eead4 40%, #0ea5e9); }
.iso__eq i:nth-child(5n) { animation-duration: 0.5s; height: 45%; }
@keyframes eqBar {
  from { transform: scaleY(0.45); opacity: 0.7; }
  to { transform: scaleY(1); opacity: 1; }
}
.iso__dj-fascia-grid,
.iso__dj-fascia-wave { display: none !important; }
.iso__dj-fascia-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.35) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, 0.25) 3px 4px),
    linear-gradient(180deg, #0a1828, #04060c);
  opacity: 0.9;
}
.iso__dj-fascia-wave {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 90% at 20% 50%, rgba(0, 229, 255, 0.55), transparent 55%),
    radial-gradient(ellipse 70% 80% at 80% 50%, rgba(255, 46, 136, 0.45), transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(167, 139, 250, 0.4), transparent 60%);
  mix-blend-mode: screen;
  animation: djFasciaPulse 2.8s ease-in-out infinite;
}
@keyframes djFasciaPulse {
  0%, 100% { opacity: 0.65; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.04); }
}
.iso__dj-logo {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.35em;
  color: rgba(200, 250, 255, 0.85);
  text-shadow: 0 0 10px #00e5ff;
  z-index: 2;
}

/* Mặt bàn deck phía trên */
.iso__dj-top {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 78px;
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(180deg, #2a2a34 0%, #121218 100%);
  border: 2px solid #3a3a48;
  box-shadow:
    0 4px 0 #050508,
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 20px rgba(0, 0, 0, 0.5);
  z-index: 4;
  overflow: hidden;
}
.iso__dj-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/club/dj.jpg") center 30% / cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: soft-light;
}

.iso__dj-deck {
  position: absolute;
  inset: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

/* CDJ thật hơn — jog wheel + màn nhỏ */
.iso__cdj {
  width: 72px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 6px;
  background: linear-gradient(160deg, #1e1e28, #0a0a10);
  border: 1px solid #333;
  box-shadow: inset 0 0 8px #000;
  position: relative;
}
.iso__cdj-jog {
  position: absolute;
  left: 6px;
  top: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #222 0 28%, transparent 29%),
    repeating-conic-gradient(from 0deg, #333 0 8deg, #111 8deg 16deg);
  border: 2px solid #00e5ff;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
  animation: isoSpin 3.2s linear infinite;
}
.iso__cdj-screen {
  position: absolute;
  right: 5px;
  top: 8px;
  width: 18px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0ea5e9, #0369a1);
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.7);
  opacity: 0.9;
  animation: isoNeonBlink 1.4s ease-in-out infinite;
}
@keyframes isoSpin {
  to { transform: rotate(360deg); }
}

.iso__mixer-pro {
  flex: 1;
  height: 52px;
  border-radius: 5px;
  background: #0c0c12;
  border: 1px solid #2a2a34;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px 8px;
  position: relative;
}
.iso__fader {
  width: 5px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(180deg, #444, #111);
  border: 1px solid #555;
  position: relative;
}
.iso__fader::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 40%;
  width: 11px;
  height: 6px;
  border-radius: 2px;
  background: #e5e5e5;
  box-shadow: 0 0 4px #fff;
}
.iso__mixer-pro i {
  width: 7px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #00e5ff, #a78bfa);
  animation: isoEq 0.5s ease-in-out infinite;
  align-self: flex-end;
}
.iso__mixer-pro i:nth-child(5) { height: 45%; }
.iso__mixer-pro i:nth-child(6) { height: 80%; animation-delay: 0.08s; }
.iso__mixer-pro i:nth-child(7) { height: 55%; animation-delay: 0.16s; }
.iso__mixer-pro i:nth-child(8) { height: 95%; animation-delay: 0.1s; }
.iso__mixer-pro i:nth-child(9) { height: 60%; animation-delay: 0.2s; }
.iso__mixer-pro i:nth-child(10) { height: 70%; animation-delay: 0.12s; }
@keyframes isoEq {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

.iso__dj-laptop {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 48px;
  height: 28px;
  margin-left: -24px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(160deg, #1a3040, #061018);
  border: 1px solid rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
  z-index: 5;
}
.iso__dj-laptop::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: repeating-linear-gradient(90deg, #00e5ff 0 2px, transparent 2px 5px);
  opacity: 0.5;
  animation: isoEq 0.45s ease-in-out infinite;
}

/* ============================================================
   Đường dẫn (runway) từ sàn lên bục DJ — Top 1 / Top 2 quẩy
   ============================================================ */
.iso__runway {
  position: absolute;
  left: 50%;
  top: 196px;
  width: 560px;
  height: 320px;
  margin-left: -280px;
  z-index: 6;
  pointer-events: none;
}
/* Mặt dốc hình thang: hẹp trên (phía DJ) → rộng dưới (phía sàn) */
.iso__runway-deck {
  position: absolute;
  inset: 0;
  clip-path: polygon(33% 0, 67% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(190, 240, 255, 0.55) 0%, transparent 14%),
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(90, 200, 255, 0.45), transparent 70%),
    linear-gradient(180deg, #5a7099 0%, #34405f 42%, #222b44 100%);
  box-shadow: inset 0 0 70px rgba(0, 120, 200, 0.35);
}
.iso__runway-deck::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-conic-gradient(
    from 96deg at 50% -40%,
    rgba(180, 235, 255, 0.34) 0deg 0.5deg,
    transparent 0.5deg 3deg
  );
  opacity: 0.9;
}
/* Quầng sáng dưới chân dốc — nơi runway chạm sàn */
.iso__runway::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 620px;
  height: 96px;
  margin-left: -310px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120, 210, 255, 0.42), transparent 68%);
  mix-blend-mode: screen;
  animation: isoVipPulse 3s ease-in-out infinite;
}
/* Bậc thang ngang */
.iso__runway-steps {
  position: absolute;
  inset: 0;
  clip-path: polygon(33% 0, 67% 0, 100% 100%, 0 100%);
}
.iso__runway-steps i {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(190, 240, 255, 0.9), transparent);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.75);
}
.iso__runway-steps i:nth-child(1) { top: 8%; }
.iso__runway-steps i:nth-child(2) { top: 24%; }
.iso__runway-steps i:nth-child(3) { top: 44%; }
.iso__runway-steps i:nth-child(4) { top: 68%; }
.iso__runway-steps i:nth-child(5) { top: 95%; }
/* Lan can LED hai bên dốc */
.iso__runway-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7df9ff, #00e5ff 40%, #ff2e88);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.8), 0 0 28px rgba(255, 46, 136, 0.4);
  animation: runwayRail 2.2s ease-in-out infinite;
}
.iso__runway-rail--l {
  left: 33%;
  transform-origin: 50% 0;
  transform: rotate(18.4deg) translateX(-50%);
}
.iso__runway-rail--r {
  right: 33%;
  transform-origin: 50% 0;
  transform: rotate(-18.4deg) translateX(50%);
  animation-delay: 0.4s;
}
@keyframes runwayRail {
  0%, 100% { filter: brightness(0.85); }
  50% { filter: brightness(1.4); }
}
.iso__runway-spot {
  position: absolute;
  left: 50%;
  top: -30px;
  width: 380px;
  height: 320px;
  margin-left: -190px;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(200, 235, 255, 0.35) 0%,
    rgba(90, 180, 255, 0.14) 45%,
    transparent 72%
  );
  mix-blend-mode: screen;
  animation: isoVipPulse 2.6s ease-in-out infinite;
}

/* Bục tròn cũ — thay bằng runway */
.iso__dj-pad { display: none !important; }
.iso__dj-pad-legacy {
  position: absolute;
  left: 50%;
  top: 190px;
  width: 400px;
  height: 240px;
  margin-left: -200px;
  z-index: 5;
  transform-style: preserve-3d;
}
/* Thân trụ dày */
.iso__dj-pad-base {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 300px;
  height: 36px;
  margin-left: -150px;
  border-radius: 50%;
  background: linear-gradient(180deg, #1a1a24 0%, #06060a 100%);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.7),
    inset 0 2px 0 rgba(255, 255, 255, 0.06);
}
/* Mặt sàn bục — texture stage thật */
.iso__dj-pad-deck {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 310px;
  height: 95px;
  margin-left: -155px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.2) 0 18%, transparent 40%),
    url("/assets/club/stage.jpg") center / cover no-repeat,
    #1a2438;
  border: 2px solid rgba(160, 210, 255, 0.4);
  box-shadow:
    inset 0 0 40px rgba(0, 100, 200, 0.35),
    0 0 30px rgba(0, 180, 255, 0.25);
  transform: rotateX(55deg);
  transform-origin: 50% 100%;
}
/* Vành LED quanh bục */
.iso__dj-pad-rim {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 330px;
  height: 100px;
  margin-left: -165px;
  border-radius: 50%;
  border: 4px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(
      from 0deg,
      #00e5ff,
      #ff2e88,
      #a78bfa,
      #00e5ff
    ) border-box;
  box-shadow:
    0 0 24px rgba(0, 229, 255, 0.55),
    0 0 48px rgba(255, 46, 136, 0.3);
  animation: djRimSpin 6s linear infinite;
  opacity: 0.9;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes djRimSpin {
  to { filter: hue-rotate(360deg); }
}
/* Spotlight từ trên xuống */
.iso__dj-pad-spot {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 200px;
  height: 160px;
  margin-left: -100px;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(200, 230, 255, 0.45) 0%,
    rgba(80, 180, 255, 0.12) 45%,
    transparent 70%
  );
  mix-blend-mode: screen;
  animation: isoVipPulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.iso__dj-guests {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.iso__dj-guest {
  position: absolute;
  bottom: 30px;
  width: 170px;
  height: 220px;
}
.iso__dj-guest--l { left: 22px; }
.iso__dj-guest--r { right: 22px; }
.iso__dj-guest .iso-actor--ondj {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 0 !important;
  width: 150px;
  height: 210px;
  transform: translateX(-50%) scale(1.05) !important;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 18px rgba(80, 200, 255, 0.75));
  visibility: visible !important;
  z-index: 9;
}
/* Quẩy nhiệt hơn khách sàn */
.iso__dj-guest .iso-actor--ondj .mc {
  --beat: 0.3s;
  animation: runwayHype 0.62s ease-in-out infinite;
}
@keyframes runwayHype {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  25% { transform: translateY(-12px) rotate(3deg) scale(1.04); }
  50% { transform: translateY(0) rotate(4deg); }
  75% { transform: translateY(-9px) rotate(-3deg) scale(1.03); }
}
.iso__dj-guest .iso-actor--ondj .iso-plate {
  bottom: auto;
  top: -10px;
}
/* ---------- Nhãn ngôi vương: vương miện + avatar + tên ---------- */
.iso-vtag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  z-index: 40;
  pointer-events: none;
}
.iso-vtag__crown {
  width: 48px;
  height: 33px;
  overflow: visible;
  animation: vtagShine 2.2s ease-in-out infinite;
}
.iso-vtag__metal {
  stroke: rgba(60, 34, 0, 0.55);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.iso-vtag__glint {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  animation: vtagGlint 2.6s ease-in-out infinite;
}
.iso-vtag__pearl { fill: #fffdf2; }

.iso-vtag--r1 .iso-vtag__metal { fill: url(#vtagGold); }
.iso-vtag--r1 .iso-vtag__gem { fill: #e11d48; }
.iso-vtag--r1 .iso-vtag__gem--top { fill: #22d3ee; }
.iso-vtag--r1 .iso-vtag__crown {
  filter: drop-shadow(0 0 9px rgba(255, 200, 40, 0.95));
}
.iso-vtag--r2 .iso-vtag__metal {
  fill: url(#vtagSilver);
  stroke: rgba(30, 44, 66, 0.5);
}
.iso-vtag--r2 .iso-vtag__gem { fill: #3b82f6; }
.iso-vtag--r2 .iso-vtag__gem--top { fill: #a78bfa; }
.iso-vtag--r2 .iso-vtag__crown {
  filter: drop-shadow(0 0 9px rgba(200, 225, 255, 0.9));
}
@keyframes vtagShine {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.06); }
}
@keyframes vtagGlint {
  0%, 100% { opacity: 0.25; }
  45% { opacity: 0.9; }
  60% { opacity: 0.3; }
}

/* Số hạng trong nhãn — #1 vàng, #2 bạc */
.iso-vtag__rank {
  flex: none;
  padding: 1px 6px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #1a1206;
  background: linear-gradient(180deg, #fff2b8, #ffc93c 55%, #e08a00);
  box-shadow: 0 0 8px rgba(255, 190, 40, 0.6);
}
.iso-vtag--r2 .iso-vtag__rank {
  color: #101a28;
  background: linear-gradient(180deg, #ffffff, #d7e3f2 55%, #94a7bd);
  box-shadow: 0 0 8px rgba(190, 215, 245, 0.55);
}
.iso-vtag__row {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 232px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  background: rgba(8, 10, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.iso-vtag--r1 .iso-vtag__row {
  border-color: rgba(255, 213, 74, 0.9);
  box-shadow: 0 0 12px rgba(255, 190, 40, 0.5), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.iso-vtag--r2 .iso-vtag__row {
  border-color: rgba(219, 231, 245, 0.9);
  box-shadow: 0 0 12px rgba(190, 215, 245, 0.45), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.iso-vtag__name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #f2f8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ---------- Hiệu ứng comment: nảy người, icon bay, hôn, thả tim ---------- */
.iso-actor.is-cheer .mc__rig {
  animation: isoCheer 0.42s ease-in-out 3 !important;
}
@keyframes isoCheer {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-22px) scale(1.06, 0.96); }
  70% { transform: translateY(-4px) scale(0.98, 1.03); }
}

.iso-chatpop,
.iso-kissheart {
  position: absolute;
  left: 50%;
  top: 6px;
  font-size: 26px;
  line-height: 1;
  pointer-events: none;
  z-index: 60;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.iso-chatpop {
  animation: isoChatPop 1.5s ease-out forwards;
}
@keyframes isoChatPop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -84px) scale(0.9); }
}

.iso-kissheart {
  font-size: 30px;
  animation: isoKissHeart 1.5s ease-out forwards;
}
@keyframes isoKissHeart {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  20% { opacity: 1; transform: translate(-50%, -16px) scale(1.2); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -80px)) scale(0.8);
  }
}

.iso-lovefly {
  position: absolute;
  pointer-events: none;
  z-index: 700;
  animation: isoLoveFly 2.4s ease-out forwards;
  text-shadow: 0 0 12px rgba(255, 60, 130, 0.8);
}
@keyframes isoLoveFly {
  0% { opacity: 0; transform: translateY(20px) scale(0.4); }
  15% { opacity: 1; transform: translateY(-10px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-320px) scale(0.85) rotate(12deg); }
}

/* Người chạy lên hôn — đứng trên mọi thứ, nghiêng người khi chạy */
.iso-actor--kiss {
  z-index: 900 !important;
  filter: drop-shadow(0 0 16px rgba(255, 90, 160, 0.9));
}
.iso-actor--kiss.is-kissing .mc__rig {
  animation: isoKissLean 0.55s ease-in-out infinite !important;
}
@keyframes isoKissLean {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(var(--lean, 14px)) rotate(var(--leanDeg, 9deg)) scale(1.05); }
}

/* DJ bị hôn: rung người + toả hồng, vẫn giữ translateX(-50%) căn giữa */
.iso__dj-operator.is-kissed .iso__dj-char {
  animation: djKissed 0.42s ease-in-out 3;
}
.iso__dj-operator.is-kissed .iso__dj-char-img {
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 22px rgba(255, 120, 180, 0.95));
}
@keyframes djKissed {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(0deg); }
  30% { transform: translateX(-50%) scale(1.07) rotate(-6deg); }
  65% { transform: translateX(-50%) scale(1.04) rotate(5deg); }
}

/* Người bị hôn: rung nhẹ + toả hồng. Bọc ngoài đã khoá transform bằng
   !important nên phải rung ở lớp .mc bên trong. */
.is-kissed .iso-actor {
  filter: drop-shadow(0 0 18px rgba(255, 120, 180, 0.95));
}
.is-kissed .iso-actor .mc {
  animation: isoKissed 0.4s ease-in-out 3 !important;
}
@keyframes isoKissed {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.09) rotate(-7deg); }
  65% { transform: scale(1.05) rotate(6deg); }
}

/* Treo trên đầu khách trên đường lên DJ — cao hơn tầm tay giơ */
.iso__dj-guest .iso-vtag { top: -54px; }
/* Treo trên nóc lồng */
.iso__cage .iso-vtag { top: -44px; }

/* ---------- 5 sofa VIP 3D — hàng giữa màn dọc ---------- */
/* VIP — thu nhỏ / mờ theo style video (không chiếm sàn) */
.iso__vip {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 1280px;
  bottom: auto;
  height: 140px;
  z-index: 18;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  gap: 2px;
  opacity: 0.55;
  transform: scale(0.82);
  transform-origin: 50% 100%;
}
.iso__vip-table {
  --vip: #fbbf24;
  position: relative;
  flex: 1;
  max-width: 200px;
  height: 200px;
  transform: perspective(600px) rotateX(12deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
.iso__vip-table--amber { --vip: #f5c26b; }
.iso__vip-table--pink { --vip: #ff4d9a; }
.iso__vip-table--blue { --vip: #5ec8ff; }
.iso__vip-table--violet { --vip: #b794f6; }
.iso__vip-table--cyan { --vip: #22e0d0; }

.iso__vip-sofa {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 48px;
  height: 56px;
  z-index: 1;
}
.iso__vip-back {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 28px;
  border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, #3a3348, #16121f);
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 12px color-mix(in srgb, var(--vip) 35%, transparent);
}
.iso__vip-arm {
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2e2838, #100e16);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.iso__vip-arm--l { left: 0; }
.iso__vip-arm--r { right: 0; }
.iso__vip-cushion {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 4px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, #4a4058, #1c1628);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.iso__vip-top {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 28px;
  height: 36px;
  border-radius: 8px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--vip) 90%, #fff), var(--vip) 40%, color-mix(in srgb, var(--vip) 50%, #000));
  border: 2px solid color-mix(in srgb, var(--vip) 75%, #fff);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--vip) 75%, transparent),
    0 0 48px color-mix(in srgb, var(--vip) 40%, transparent),
    0 10px 0 #06040c,
    inset 0 0 16px rgba(255, 255, 255, 0.3);
  z-index: 2;
  animation: isoVipPulse 2.8s ease-in-out infinite;
}
@keyframes isoVipPulse {
  0%, 100% { filter: brightness(0.95); }
  50% { filter: brightness(1.25); }
}
.iso__vip-top::before,
.iso__vip-top::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 7px;
  height: 12px;
  border-radius: 0 0 3px 3px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.25);
}
.iso__vip-top::before { left: 16%; }
.iso__vip-top::after { right: 16%; }
.iso__vip-seat {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: 90px;
  height: 120px;
  margin-left: -45px;
  z-index: 3;
}
.iso__vip-no {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(8, 4, 20, 0.55);
  border: 1px solid color-mix(in srgb, var(--vip) 35%, transparent);
  text-shadow: none;
  white-space: nowrap;
  opacity: 0.55;
}
.iso-actor--vipseat {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 86px;
  height: 130px;
  transform: translateX(-50%) scale(0.82) !important;
  transform-origin: 50% 100%;
  visibility: visible !important;
  z-index: 3;
}
.iso-actor--vipseat .iso-plate {
  bottom: auto;
  top: -4px;
}
.iso__vip-seat.has-guest ~ .iso__vip-no,
.iso__vip-table:has(.has-guest) .iso__vip-no {
  border-color: rgba(0, 229, 255, 0.75);
  color: #c8f7ff;
  text-shadow: 0 0 8px #00e5ff;
}

/* ---------- Lồng go-go cạnh sân khấu (xa camera → người nhỏ hơn sàn) ---------- */
.iso__cage {
  --cage: #7dd3fc;
  position: absolute;
  /* Rộng hơn người trong lồng để cột sáng đứng lọt hẳn ra hai bên */
  width: 208px;
  height: 300px;
  z-index: 22;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cage) 55%, transparent));
}

/* Cột sáng bao ngoài lồng — chùm sáng dựng đứng hai bên, không cắt ngang người */
.iso__cage::before,
.iso__cage::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 44px;
  width: 26px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cage) 90%, #fff) 0%,
    color-mix(in srgb, var(--cage) 60%, transparent) 42%,
    transparent 100%
  );
  filter: blur(7px);
  opacity: 0.8;
  mix-blend-mode: screen;
  animation: isoNeonBlink 1.9s ease-in-out infinite;
}
.iso__cage::before { left: -12px; }
.iso__cage::after { right: -12px; animation-delay: 0.4s; }
/* Hai bên đường lên DJ — treo cạnh sân khấu */
.iso__cage--l { left: 34px; top: 690px; bottom: auto; --cage: #7dd3fc; }
.iso__cage--r { right: 34px; top: 690px; bottom: auto; left: auto; --cage: #f9a8d4; }

.iso__cage-flash {
  position: absolute;
  /* Chớp sáng nằm sau người, thu vào trong hai hàng cột */
  inset: 8px 30px 42px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--cage) 55%, transparent), transparent 70%);
  opacity: 0.35;
  z-index: 1;
  animation: cageFlash 0.55s steps(2) infinite;
  mix-blend-mode: screen;
}
.iso__cage.is-lit .iso__cage-pole,
.iso__cage.is-lit .iso__cage-topring {
  animation: cageBlink 0.7s ease-in-out infinite;
}
.iso__cage--r.is-lit .iso__cage-pole,
.iso__cage--r.is-lit .iso__cage-topring {
  animation-delay: 0.2s;
}
@keyframes cageFlash {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.85; }
}
@keyframes cageBlink {
  0%, 100% { filter: brightness(0.75); box-shadow: 0 0 6px var(--cage); }
  50% { filter: brightness(1.45); box-shadow: 0 0 18px #fff, 0 0 28px var(--cage); }
}

.iso__cage-pole {
  position: absolute;
  width: 3px;
  top: 18px;
  bottom: 52px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff, var(--cage));
  box-shadow: 0 0 8px #fff, 0 0 16px var(--cage);
  /* Trên cả người trong lồng: nhìn ra người đứng phía sau song sáng */
  z-index: 6;
}
/* Sáu song: hai ngoài làm khung, bốn trong đè lên người cho ra lưới lồng —
   chừa đúng khoảng giữa để mặt vẫn lọt qua hai song */
.iso__cage-pole--1 { left: 8px; }
.iso__cage-pole--2 { left: 55px; opacity: 0.85; }
.iso__cage-pole--3 { right: 55px; left: auto; opacity: 0.85; }
.iso__cage-pole--4 { right: 8px; left: auto; }
.iso__cage-pole--5 { left: 87px; opacity: 0.62; }
.iso__cage-pole--6 { right: 87px; left: auto; opacity: 0.62; }

.iso__cage-topring {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 14px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff, 0 0 18px var(--cage);
  z-index: 6;
  background: transparent;
}

.iso__cage-floor {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 46px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--cage) 70%, #fff), rgba(10, 20, 40, 0.85));
  box-shadow: 0 0 18px var(--cage), 0 0 30px color-mix(in srgb, var(--cage) 50%, transparent);
  z-index: 2;
  animation: isoNeonBlink 2s ease-in-out infinite;
}

.iso__cage-pedestal {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 14px;
  height: 34px;
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #243044, #0c1018);
  border: 2px solid color-mix(in srgb, var(--cage) 55%, #fff);
  border-top: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iso__cage-brand {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #eef8ff;
  text-shadow: 0 0 8px var(--cage);
}

.iso-actor--incage {
  position: absolute !important;
  left: 50% !important;
  bottom: 58px !important;
  width: 144px;
  height: 200px;
  transform: translateX(-50%) scale(0.95) !important;
  transform-origin: 50% 100%;
  z-index: 5;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cage) 55%, transparent));
}

.iso-actor--incage .iso-plate {
  bottom: auto;
  top: -4px;
  font-size: 8px;
  transform: scale(0.85);
}
.iso-actor--incage .bq__sprite,
.iso-actor--incage .mc--sticker .bq__sprite {
  max-width: 134px !important;
  max-height: 188px !important;
}

/* Quẩy nhanh hơn khách dưới sàn — --beat gán inline nên phải !important */
.iso-actor--incage .mc {
  --beat: 0.22s !important;
}

/* ---------- Đèn xoay / beam / wash (chỉ ánh sáng) ---------- */
.iso__lights {
  position: absolute;
  inset: 0;
  /* Trên màn LED để thấy giàn truss / moving head / par can */
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

.iso__light-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 30% at 50% 8%, rgba(100, 80, 180, 0.2), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* Vòng truss đèn trên đầu — học video */
.iso__truss {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 280px;
  height: 140px;
  margin-left: -140px;
  display: none;
  border: 3px solid rgba(160, 170, 190, 0.45);
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.35);
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(20, 24, 36, 0.5) 100%);
  z-index: 2;
  pointer-events: none;
}
.iso__truss::before,
.iso__truss::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  top: 20%;
}
.iso__truss::before { left: 22%; }
.iso__truss::after { right: 22%; }

/* Cone đèn tím / xanh / vàng */
.iso__cone {
  position: absolute;
  top: 12%;
  width: 120px;
  height: 55%;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: 0.45;
  transform-origin: 50% 0;
  pointer-events: none;
  z-index: 1;
}
.iso__cone--a {
  left: 22%;
  background: linear-gradient(180deg, rgba(180, 100, 255, 0.65), transparent 75%);
  animation: coneSwing 5s ease-in-out infinite;
}
.iso__cone--b {
  left: 50%;
  margin-left: -60px;
  background: linear-gradient(180deg, rgba(80, 200, 255, 0.55), transparent 75%);
  animation: coneSwing 4.2s ease-in-out infinite reverse;
}
.iso__cone--c {
  right: 20%;
  background: linear-gradient(180deg, rgba(255, 220, 80, 0.45), transparent 75%);
  animation: coneSwing 6s ease-in-out infinite;
  animation-delay: -1s;
}
@keyframes coneSwing {
  0%, 100% { transform: rotate(-12deg); opacity: 0.3; }
  50% { transform: rotate(14deg); opacity: 0.55; }
}

/* ============================================================
   DÀN ĐÈN CLUB — moving head, par can, blinder, cầu gương
   Chỉ animate transform / opacity / filter để giữ 60fps.
   ============================================================ */

/* --- Truss ngang treo dưới màn LED --- */
.iso__trussbar {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 322px;
  height: 16px;
  z-index: 2;
  border-radius: 3px;
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(150, 160, 180, 0.35) 14px 16px),
    linear-gradient(180deg, #3a3f4d, #16191f);
  border: 1px solid rgba(150, 165, 190, 0.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

/* --- Moving head: đầu đèn trên truss + chùm sáng quét --- */
.iso__movers {
  position: absolute;
  left: 0;
  right: 0;
  top: 336px;
  height: 0;
  z-index: 3;
}
.iso__movers i {
  --hue: calc(185 + var(--i) * 34);
  position: absolute;
  left: var(--x);
  top: 0;
  width: 20px;
  height: 16px;
  margin-left: -10px;
  border-radius: 4px 4px 8px 8px;
  background: linear-gradient(180deg, #2a2e3c, #0d0f16);
  border: 1px solid #444a5c;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  transform-origin: 50% 0;
  animation: moverSwing calc(5.5s + var(--i) * 0.7s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.8s);
}
/* Chùm sáng hình nón toả xuống sàn */
.iso__movers i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 150px;
  height: 1180px;
  margin-left: -75px;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(
    180deg,
    hsla(var(--hue), 95%, 66%, 0.62) 0%,
    hsla(var(--hue), 95%, 60%, 0.2) 38%,
    transparent 76%
  );
  mix-blend-mode: screen;
  animation: moverFlicker calc(1.7s + var(--i) * 0.23s) ease-in-out infinite;
}
/* Bóng đèn sáng ở đầu fixture */
.iso__movers i::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: hsl(var(--hue) 100% 78%);
  box-shadow: 0 0 12px hsl(var(--hue) 100% 65%);
}
@keyframes moverSwing {
  0%, 100% { transform: rotate(-26deg); }
  50% { transform: rotate(24deg); }
}
@keyframes moverFlicker {
  0%, 100% { opacity: 0.35; }
  45% { opacity: 0.95; }
  60% { opacity: 0.5; }
}

/* --- Par can nhấp nháy chạy đuổi --- */
.iso__pars {
  position: absolute;
  left: 0;
  right: 0;
  top: 324px;
  height: 14px;
  z-index: 4;
}
.iso__pars i {
  --hue: calc(300 - var(--i) * 34);
  position: absolute;
  left: var(--x);
  top: 0;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff 0 22%, hsl(var(--hue) 100% 60%) 55%, #14161f 72%);
  box-shadow: 0 0 10px hsl(var(--hue) 100% 60%);
  animation: parChase 1.15s steps(1) infinite;
  animation-delay: calc(var(--i) * -0.19s);
}
@keyframes parChase {
  0%, 22% { opacity: 1; filter: brightness(1.7); }
  23%, 100% { opacity: 0.28; filter: brightness(0.6); }
}

/* --- Đốm cầu gương quét vòng trên sàn nhảy --- */
.iso__mirrorball-dots {
  position: absolute;
  left: 50%;
  top: 74%;
  width: 0;
  height: 0;
  animation: dotsSpin 16s linear infinite;
}
.iso__mirrorball-dots i {
  position: absolute;
  width: 46px;
  height: 26px;
  margin: -13px -23px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(215, 240, 255, 0.8), transparent 66%);
  transform:
    rotate(calc(var(--a) * 30deg))
    translateX(calc(150px + var(--a) * 26px))
    rotate(calc(var(--a) * -30deg));
  animation: dotTwinkle calc(2.4s + var(--a) * 0.2s) ease-in-out infinite;
}
@keyframes dotsSpin {
  to { transform: rotate(360deg); }
}
@keyframes dotTwinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.85; }
}

/* --- Thanh LED chạy dọc hai bên tường --- */
.iso__ledbar {
  position: absolute;
  top: 6%;
  width: 16px;
  height: 34%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, #16181f, #0a0b10);
  border: 1px solid rgba(120, 140, 170, 0.3);
  z-index: 3;
}
.iso__ledbar--l { left: 2.2%; }
.iso__ledbar--r { right: 2.2%; }
.iso__ledbar i {
  --hue: calc(190 + var(--i) * 22);
  flex: 1;
  border-radius: 3px;
  background: hsl(var(--hue) 100% 62%);
  box-shadow: 0 0 8px hsl(var(--hue) 100% 58%);
  animation: ledRun 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.2s);
}
.iso__ledbar--r i { animation-direction: reverse; }
@keyframes ledRun {
  0%, 100% { opacity: 0.2; transform: scaleX(0.75); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* --- Lớp đèn phủ trước đám đông --- */
.iso__lights-front {
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}
/* Beam chéo quét ngang sàn */
.iso__xbeam {
  --hue: calc(170 + var(--i) * 55);
  position: absolute;
  left: calc(8% + var(--i) * 26%);
  top: 22%;
  width: 190px;
  height: 90%;
  margin-left: -95px;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(
    180deg,
    hsla(var(--hue), 95%, 70%, 0.3),
    hsla(var(--hue), 95%, 62%, 0.08) 45%,
    transparent 78%
  );
  transform-origin: 50% 0;
  animation: xbeamSweep calc(6.5s + var(--i) * 0.9s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.4s);
}
@keyframes xbeamSweep {
  0%, 100% { transform: rotate(-18deg); opacity: 0.2; }
  50% { transform: rotate(16deg); opacity: 0.55; }
}
/* Blinder chớp trắng hai bên sân khấu */
.iso__blinder {
  position: absolute;
  top: 26%;
  width: 260px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 244, 214, 0.75), transparent 68%);
  opacity: 0;
  animation: blinderHit 4.6s ease-out infinite;
}
.iso__blinder--l { left: -60px; }
.iso__blinder--r { right: -60px; animation-delay: 2.3s; }
@keyframes blinderHit {
  0%, 74% { opacity: 0; }
  76% { opacity: 0.85; }
  79% { opacity: 0.15; }
  82% { opacity: 0.7; }
  100% { opacity: 0; }
}
/* Strobe cả phòng — chớp thưa, không gây khó chịu */
.iso__strobe {
  position: absolute;
  inset: 0;
  background: rgba(226, 240, 255, 0.5);
  opacity: 0;
  animation: strobeHit 9s steps(1) infinite;
}
@keyframes strobeHit {
  0%, 88% { opacity: 0; }
  89% { opacity: 0.3; }
  90% { opacity: 0; }
  91% { opacity: 0.26; }
  92% { opacity: 0; }
  93% { opacity: 0.22; }
  94%, 100% { opacity: 0; }
}

/* Dây đèn — tắt bớt để đỡ rối */
.iso__string-lights {
  display: none !important;
  position: absolute;
  left: 22%;
  right: 22%;
  top: 4%;
  height: 42%;
  opacity: 0;
  pointer-events: none;
}
@keyframes isoStringPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.65; }
}

/* Glowstick — ẩn */
.iso__stick {
  display: none !important;
}
@keyframes isoStickWave {
  0%, 100% { transform: rotate(-18deg) translateY(0); opacity: 0.55; }
  50% { transform: rotate(22deg) translateY(-10px); opacity: 1; }
}

/* Đèn moving-head xoay */
.iso__spot {
  position: absolute;
  top: 2%;
  left: calc(16% + var(--i) * 18%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, hsla(calc(190 + var(--i) * 50), 100%, 60%, 1) 55%, transparent 70%);
  box-shadow: 0 0 16px hsla(calc(190 + var(--i) * 50), 100%, 60%, 0.9);
  z-index: 2;
}
.iso__spot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 90px;
  height: 70vh;
  margin-left: -45px;
  background: linear-gradient(
    180deg,
    hsla(calc(190 + var(--i) * 50), 95%, 62%, 0.55),
    hsla(calc(190 + var(--i) * 50), 95%, 55%, 0.12) 45%,
    transparent 78%
  );
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  mix-blend-mode: screen;
  animation: isoSpotSwing calc(4.2s + var(--i) * 0.45s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.7s);
}

@keyframes isoSpotSwing {
  0% { transform: rotate(-28deg) scaleY(0.92); opacity: 0.35; }
  50% { transform: rotate(26deg) scaleY(1.08); opacity: 0.9; }
  100% { transform: rotate(-28deg) scaleY(0.92); opacity: 0.35; }
}

.iso__beam {
  position: absolute;
  top: -5%;
  left: calc(18% + var(--i) * 14%);
  width: 70px;
  height: 75%;
  background: linear-gradient(
    180deg,
    hsla(calc(180 + var(--i) * 40), 95%, 60%, 0.55),
    transparent 75%
  );
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  animation: isoBeam 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.35s);
}

@keyframes isoBeam {
  0%, 100% { opacity: 0.25; transform: rotate(-8deg) skewX(-4deg) scaleY(0.92); }
  50% { opacity: 0.85; transform: rotate(10deg) skewX(4deg) scaleY(1.05); }
}

.iso__orb {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px var(--L1);
  left: calc(12% + var(--i) * 13%);
  top: calc(20% + (var(--i) % 3) * 18%);
  animation: isoOrb 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.25s);
}

@keyframes isoOrb {
  0%, 100% { opacity: 0.2; transform: translateY(0) scale(0.7); }
  50% { opacity: 1; transform: translateY(-24px) scale(1.3); }
}

.iso__ball {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 12%, transparent 13%),
    repeating-conic-gradient(from 0deg, #ddd 0 12deg, #666 12deg 24deg);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(0, 229, 255, 0.4);
  animation: isoSpin 6s linear infinite, isoNeonBlink 2s ease-in-out infinite;
}

/* ---------- Nhân vật — luôn trước bục DJ ---------- */
.iso__actors {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* ---------- Spotlight: khách thường tặng quà ----------
   Veil phủ cả sàn, khoét một lỗ tròn quanh người vừa tặng: xung quanh chỉ
   hơi mờ + tối đi (vẫn nhìn xuyên được), người được focus giữ nguyên màu. */
.iso__spotveil {
  position: absolute;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 62%),
    transparent 0 var(--r0, 150px),
    rgba(6, 8, 20, 0.42) var(--r1, 420px),
    rgba(4, 6, 16, 0.56) 100%
  );
  -webkit-backdrop-filter: blur(3px) saturate(0.72) brightness(0.86);
  backdrop-filter: blur(3px) saturate(0.72) brightness(0.86);
  -webkit-mask-image: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 62%),
    transparent 0 var(--r0, 150px),
    #000 var(--r1, 420px)
  );
  mask-image: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 62%),
    transparent 0 var(--r0, 150px),
    #000 var(--r1, 420px)
  );
}
.iso__spotveil.is-on { opacity: 1; }

/* Người được focus nổi trên veil, màu giữ nguyên + viền sáng theo cỡ quà */
.iso-actor.is-spotlit {
  --spot-glow: rgba(255, 214, 120, 0.7);
  --glow: var(--spot-glow);
  z-index: 950 !important;
  animation: bodyGlow 1.5s ease-in-out infinite;
}
.iso-actor.is-spotlit.is-spot-green { --spot-glow: rgba(86, 255, 198, 0.75); }
.iso-actor.is-spotlit .iso-vtag,
.iso-actor.is-spotlit .iso-tag { z-index: 960; }

/* Đèn từ giàn truss rọi thẳng xuống người vừa tặng quà.
   Để rời khỏi .iso-actor vì lớp đó là preserve-3d, pseudo-element không xếp
   lớp được như ý — dựng hẳn phần tử riêng nằm giữa veil và nhân vật. */
.iso__spotbeam {
  --beam-hi: rgba(255, 248, 226, 0.78);
  --beam-mid: rgba(255, 226, 158, 0.42);
  --beam-lo: rgba(255, 214, 120, 0.14);
  --pool-hi: rgba(255, 240, 196, 0.78);
  --pool-lo: rgba(255, 214, 120, 0.34);
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 940px;
  margin-left: -160px;
  z-index: 940;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  mix-blend-mode: screen;
}
/* Quà nhỏ: đèn xanh lá lạnh kiểu laser club */
.iso__spotbeam--green {
  --beam-hi: rgba(222, 255, 242, 0.8);
  --beam-mid: rgba(88, 255, 198, 0.46);
  --beam-lo: rgba(40, 230, 170, 0.16);
  --pool-hi: rgba(180, 255, 226, 0.76);
  --pool-lo: rgba(60, 240, 180, 0.36);
}
.iso__spotbeam.is-on { opacity: 1; }
.iso__spotbeam::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--beam-hi),
    var(--beam-mid) 42%,
    var(--beam-lo) 78%,
    transparent
  );
  clip-path: polygon(46% 0, 54% 0, 92% 100%, 8% 100%);
  filter: blur(5px);
  animation: spotBeam 1.9s ease-in-out infinite;
}
/* Vũng sáng dưới chân cho chùm đèn có điểm chạm */
.iso__spotbeam::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 240px;
  height: 74px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    var(--pool-hi) 0 32%,
    var(--pool-lo) 62%,
    transparent 78%
  );
  filter: blur(5px);
  animation: spotBeam 1.9s ease-in-out infinite;
}
@keyframes spotBeam {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
/* Quà to: đèn ập vào kiểu zoom — loe rộng rồi siết lại đúng người */
.iso__spotbeam--gold.is-on { animation: spotBeamZoom 0.6s cubic-bezier(0.22, 0.9, 0.28, 1); }
@keyframes spotBeamZoom {
  0% { opacity: 0; transform: scaleX(2.1) scaleY(0.72); }
  55% { opacity: 1; transform: scaleX(0.86) scaleY(1.04); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Mặt trống đồng dưới chân ----------
   Vành đồng tâm vẽ bằng nền, răng lược và vòng tia chấm nằm ở hai pseudo và
   quay ngược chiều nhau. Bọc ngoài bóp dẹt để nằm đúng mặt sàn phối cảnh. */
.iso__drum {
  --ink: rgba(255, 226, 158, 0.95);
  --ink-soft: rgba(255, 214, 120, 0.4);
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0.36);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    var(--ink-soft) 0 6%,
    transparent 6% 26%,
    var(--ink-soft) 26% 28%,
    transparent 28% 40%,
    var(--ink) 40% 42%,
    transparent 42% 60%,
    var(--ink-soft) 60% 61.5%,
    transparent 61.5% 88%,
    var(--ink) 88% 90%,
    transparent 90%
  );
  filter: drop-shadow(0 0 12px var(--ink-soft));
}
.iso__drum.is-on { opacity: 1; }
/* Răng lược vành trong */
.iso__drum::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--ink) 0 1.8deg,
    transparent 1.8deg 9deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent 0 43%, #000 45% 58%, transparent 60%);
  mask: radial-gradient(closest-side, transparent 0 43%, #000 45% 58%, transparent 60%);
  animation: drumSpin 11s linear infinite;
}
/* Vành tia ngoài — 14 tia như mặt trời giữa trống đồng Đông Sơn */
.iso__drum::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 6deg,
    var(--ink) 0 3.2deg,
    transparent 3.2deg 25.71deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent 0 63%, #000 65% 86%, transparent 88%);
  mask: radial-gradient(closest-side, transparent 0 63%, #000 65% 86%, transparent 88%);
  animation: drumSpin 17s linear infinite reverse;
}
@keyframes drumSpin {
  to { transform: rotate(360deg); }
}

/* Quà nhỏ đèn xanh nên mặt trống cũng ngả xanh cho ăn màu */
.iso__spotring--green {
  --ink: rgba(190, 255, 232, 0.95);
  --ink-soft: rgba(86, 255, 198, 0.42);
}

/* Top 1 và top 2 trên runway lúc nào cũng đứng trên mặt trống của mình */
.iso__drumring {
  left: 50%;
  bottom: -16px;
  width: 196px;
  height: 196px;
  margin-left: -98px;
  z-index: 0;
}
/* Top 1: vàng, răng lược mảnh và vành 14 tia mặt trời */
.iso__drumring--top1 {
  --ink: rgba(255, 232, 168, 0.95);
  --ink-soft: rgba(255, 205, 90, 0.45);
}
/* Top 2: bạc, hoa văn khối to hơn ở vành trong và vòng chấm dày ở ngoài */
.iso__drumring--top2 {
  --ink: rgba(232, 244, 255, 0.95);
  --ink-soft: rgba(158, 196, 236, 0.45);
}
.iso__drumring--top2::before {
  background: repeating-conic-gradient(
    from 0deg,
    var(--ink) 0 5deg,
    transparent 5deg 18deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent 0 38%, #000 40% 54%, transparent 56%);
  mask: radial-gradient(closest-side, transparent 0 38%, #000 40% 54%, transparent 56%);
  animation-duration: 14s;
  animation-direction: reverse;
}
.iso__drumring--top2::after {
  background: repeating-conic-gradient(
    from 0deg,
    var(--ink) 0 1.4deg,
    transparent 1.4deg 10deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent 0 70%, #000 72% 83%, transparent 85%);
  mask: radial-gradient(closest-side, transparent 0 70%, #000 72% 83%, transparent 85%);
  animation-duration: 9s;
  animation-direction: normal;
}

/* Người nổi bật thì phát sáng nhè nhẹ theo nhịp */
@keyframes bodyGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px var(--glow))
      drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 28px var(--glow))
      drop-shadow(0 0 46px var(--glow))
      drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
  }
}
.iso__dj-guest .iso-actor--ondj.is-top1 {
  --glow: rgba(255, 205, 90, 0.85);
  animation: bodyGlow 1.9s ease-in-out infinite;
}
.iso__dj-guest .iso-actor--ondj.is-top2 {
  --glow: rgba(176, 214, 255, 0.85);
  animation: bodyGlow 1.9s ease-in-out infinite 0.6s;
}

/* Vòng xoáy dưới chân người đang được camera zoom — quà, lệnh hey hay camera
   tự đảo tới đều có. Bọc ngoài bóp dẹt cho nằm sát mặt sàn, vòng bên trong
   quay tròn nên không bị lắc như khi xoay thẳng hình bầu dục. */
.iso__focusring {
  --swirl: rgba(126, 236, 255, 0.92);
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  z-index: 934;
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0.34);
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
}
.iso__focusring.is-on { opacity: 1; }
.iso__focusring::before,
.iso__focusring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 14%,
    rgba(126, 236, 255, 0.22) 26%,
    rgba(176, 246, 255, 0.85) 44%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(126, 236, 255, 0.75) 58%,
    rgba(126, 236, 255, 0.18) 74%,
    transparent 88%
  );
  -webkit-mask: radial-gradient(closest-side, transparent 0 52%, #000 60% 90%, transparent);
  mask: radial-gradient(closest-side, transparent 0 52%, #000 60% 90%, transparent);
  filter: drop-shadow(0 0 10px var(--swirl));
  animation: spotHaloSpin 2.4s linear infinite;
}
/* Vòng trong nhỏ hơn quay ngược cho ra chất xoáy */
.iso__focusring::after {
  inset: 18%;
  animation-duration: 3.6s;
  animation-direction: reverse;
  opacity: 0.72;
}

/* Vòng vàng xoáy trên đầu — chỉ bật với quà to.
   Bọc ngoài bóp dẹt theo phối cảnh, vòng bên trong quay tròn nên không bị lắc. */
.iso__spothalo {
  position: absolute;
  left: 0;
  top: 0;
  width: 210px;
  height: 210px;
  margin: -105px 0 0 -105px;
  z-index: 946;
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0.34);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}
.iso__spothalo.is-on { opacity: 1; }
.iso__spothalo::before,
.iso__spothalo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 10%,
    rgba(255, 214, 120, 0.18) 20%,
    rgba(255, 233, 168, 0.9) 40%,
    rgba(255, 250, 224, 1) 50%,
    rgba(255, 209, 102, 0.9) 60%,
    rgba(255, 214, 120, 0.18) 80%,
    transparent 92%
  );
  -webkit-mask: radial-gradient(closest-side, transparent 0 63%, #000 69% 100%);
  mask: radial-gradient(closest-side, transparent 0 63%, #000 69% 100%);
  filter: drop-shadow(0 0 12px rgba(255, 205, 90, 0.8));
  animation: spotHaloSpin 1.2s linear infinite;
}
/* Vòng thứ hai nhỏ hơn, quay ngược cho ra chất "xoáy" */
.iso__spothalo::after {
  inset: 26px;
  animation-duration: 1.9s;
  animation-direction: reverse;
  opacity: 0.75;
}
@keyframes spotHaloSpin {
  to { transform: rotate(360deg); }
}

/* Được rọi đèn thì quẩy gấp đôi nhiệt: nhịp nhanh và biên độ lớn hơn */
/* makeEl gắn --beat thẳng vào style nên phải !important mới đè được */
.iso-actor.is-hype .mc,
.iso-actor.is-spotlit .mc {
  --beat: 0.26s !important;
}
.iso-actor.is-hype .mc__rig,
.iso-actor.is-spotlit .mc__rig {
  animation: mcHype 0.42s cubic-bezier(0.34, 0.02, 0.3, 1) infinite !important;
  transform-origin: 50% 100%;
}
@keyframes mcHype {
  0% { transform: translateY(0) rotate(0deg) scale(1, 1); }
  20% { transform: translateY(-26px) rotate(-5deg) scale(0.96, 1.07); }
  45% { transform: translateY(-4px) rotate(3deg) scale(1.06, 0.95); }
  70% { transform: translateY(-30px) rotate(6deg) scale(0.95, 1.08); }
  100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}

.iso-actor {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 212px;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Billboard 3D sprite — luôn hướng camera */
.iso-actor--billboard {
  backface-visibility: hidden;
}

.iso-actor.is-focus {
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.85));
}
.iso-actor.is-focus .iso-plate {
  border-color: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.55);
}

.iso-actor--vip .mc__face,
.iso-actor--vip .ph__head {
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.75);
}

.iso-actor--drop {
  animation: isoDropIn 0.45s ease-out;
}
.iso-actor.is-leaving {
  opacity: 0;
  transition: opacity 0.35s;
}

@keyframes isoDropIn {
  from { filter: brightness(2); transform: translate(-50%, -120%) scale(0.6); }
  to { filter: none; }
}

.iso-actor__shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58px;
  height: 18px;
  margin-left: -29px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
  filter: blur(1.5px);
  z-index: 0;
  transform: rotateX(70deg) scale(1.15, 0.7);
  animation: isoShadowPulse 0.9s ease-in-out infinite;
}
@keyframes isoShadowPulse {
  0%, 100% { opacity: 0.7; transform: rotateX(70deg) scale(1.05, 0.65); }
  50% { opacity: 1; transform: rotateX(70deg) scale(1.25, 0.75); }
}

/* Floating nameplate — tên + avatar (ưu tiên) + icon danh hiệu */
.iso-plate {
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 168px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  background: rgba(8, 6, 18, 0.88);
  border: 1px solid rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
  animation: isoPlateFloat 2.2s ease-in-out infinite;
  white-space: nowrap;
}

.iso-plate__avatar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(0, 229, 255, 0.65);
  background: #1a1430;
}
.iso-plate__avatar--letter {
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
}

@keyframes isoPlateFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.iso-plate__badge {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.iso-plate__badge.badge--crown { background: rgba(251, 191, 36, 0.25); border-color: #fbbf24; }
.iso-plate__badge.badge--vip { background: rgba(0, 229, 255, 0.2); border-color: #00e5ff; }
.iso-plate__badge.badge--dj { background: rgba(255, 46, 136, 0.2); border-color: #ff2e88; }
.iso-plate__badge.badge--chat { background: rgba(167, 139, 250, 0.25); border-color: #a78bfa; }
.iso-plate__badge.badge--gift { background: rgba(34, 224, 122, 0.2); border-color: #22e07a; }

.iso-plate__name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
}

.iso-plate__sub {
  font-size: 9px;
  font-weight: 700;
  color: #7df9ff;
}

/* ---------- Vignette + shot label ---------- */
.club__vignette {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: radial-gradient(70% 70% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

.club__shot {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(8, 4, 20, 0.75);
  border: 1px solid rgba(0, 229, 255, 0.45);
  color: #cdefff;
  font-size: 12px;
  font-weight: 700;
}

/* Nút bật tiếng YouTube — bắt buộc click (autoplay policy) */
.club__unmute {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 60;
  transform: translate(-50%, -50%);
  padding: 14px 22px;
  border-radius: 12px;
  border: 2px solid #00e5ff;
  background: rgba(8, 4, 24, 0.92);
  color: #e8fbff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.55);
  pointer-events: auto;
  animation: isoVipPulse 1.4s ease-in-out infinite;
}
.club__unmute:hover {
  background: rgba(0, 40, 60, 0.95);
  border-color: #fff;
}
.club.has-yt-sound .club__unmute { display: none !important; }

/* Widget SoundCloud chỉ lấy tiếng — giấu khỏi khung hình */
.sc-host {
  position: fixed;
  left: -9999px;
  bottom: 0;
  width: 320px;
  height: 90px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Light / room variants ---------- */
.club[data-lights="rainbow"] { --L1: #00e5ff; --L2: #ff2e88; --L3: #fbbf24; --L4: #22e07a; }
.club[data-lights="green"] { --L1: #22e07a; --L2: #00e5ff; --L3: #a3e635; }
.club[data-lights="pink"] { --L1: #ff2e88; --L2: #f472b6; --L3: #a78bfa; }
.club[data-lights="gold"] { --L1: #fbbf24; --L2: #f59e0b; --L3: #fde68a; }

.club[data-ball="off"] .iso__ball { display: none; }
.club[data-ball="neon"] .iso__ball {
  background: radial-gradient(circle at 30% 30%, #fff, #00e5ff 40%, #0369a1);
}
.club[data-ball="crystal"] .iso__ball {
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0.3) 40%, transparent);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.club[data-room="neon"] .iso__floor {
  background: linear-gradient(135deg, #0a1a2a, #061018 50%, #0c1220);
}
.club[data-room="purple"] .iso__floor {
  background: linear-gradient(135deg, #1a0a28, #100818 50%, #1c0f30);
}
.club[data-room="cyber"] .iso__floor {
  background: linear-gradient(135deg, #041510, #020a08 50%, #061a14);
  border-color: rgba(34, 224, 122, 0.45);
}

/* ---------- HUD club dọc 1080×1920 ---------- */
body[data-theme="club"] .brand {
  top: 8px;
  left: 50%;
  transform: translateX(-50%) scale(0.72);
  transform-origin: top center;
  opacity: 0.95;
  z-index: 50;
}
body[data-theme="club"] .leaderboard {
  top: 58px;
  right: 8px;
  width: 210px;
  max-height: none;
  font-size: 12px;
  z-index: 50;
  overflow: hidden;
}
body[data-theme="club"] .status-pill {
  top: auto;
  bottom: 18px;
  left: 12px;
  z-index: 50;
}
body[data-theme="club"] .brand__plaque {
  background: rgba(8, 4, 20, 0.72);
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
}
body[data-theme="club"] .brand__title {
  color: #eafcff;
  text-shadow: 0 0 16px #00e5ff;
}
body[data-theme="club"] .brand__sub { color: #ff7ab8; }
/* Bảng anh hùng để trần: bỏ khung, bỏ tiêu đề — chỉ còn danh sách nổi trên cảnh */
body[data-theme="club"] .leaderboard {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
body[data-theme="club"] .leaderboard__header { display: none; }
body[data-theme="club"] .leaderboard__list { padding: 0; max-height: none; }
/* Cắt theo số dòng thay vì theo chiều cao — không còn dòng bị hụt nửa */
body[data-theme="club"] .leaderboard__item:nth-child(n + 9) { display: none; }
body[data-theme="club"] .leaderboard__item {
  background: none;
  text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, 0.9);
}
body[data-theme="club"] .leaderboard__coins { color: #7df9ff; }
body[data-theme="club"] .status-pill {
  background: rgba(8, 4, 20, 0.75);
  border-color: rgba(0, 229, 255, 0.4);
}
body[data-theme="club"] .world,
body[data-theme="club"] .shot-label,
body[data-theme="club"] .rotate-hint { display: none; }
body[data-theme="club"] .stage { background: #06040f; }

/* ---------- Dọn rối: ít nhãn / glow / hiệu ứng ---------- */
.iso-actor--billboard .iso-plate { display: none !important; }
.iso__dj-guest .iso-actor--ondj .iso-plate,
.iso-actor--vipseat .iso-plate,
.iso-actor--incage .iso-plate { display: none !important; }

.iso__beam,
.iso__spot {
  opacity: 0.35 !important;
}
.iso__spot::after {
  opacity: 0.4;
  height: 45vh;
}

.iso-actor--vip .mc__face,
.iso-actor--vip .ph__head {
  box-shadow: none !important;
}
.iso-actor.is-focus {
  filter: none;
}

.mc--sticker .mc__wings,
.mc--sticker .mc__badge,
.mc--glow .mc__wings {
  display: none !important;
}

.iso__dj-op-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 2px 8px;
}

/* Chiều sâu bằng opacity (không blur từng người — giữ 60fps) */
.iso-actor--crowd {
  opacity: 0.94;
  will-change: transform;
}
/* Sprite đã có viền trắng sẵn khi cắt → bỏ drop-shadow động cho 50 khách */
.iso-actor--crowd .bq__sprite-wrap {
  filter: none;
}
.iso-actor--crowd.is-focus .bq__sprite-wrap {
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.7));
}
.iso-actor--crowd.is-depth-far { opacity: 0.66; }
.iso-actor--crowd.is-depth-mid { opacity: 0.82; }
.iso-actor--crowd.is-depth-near { opacity: 0.97; }
.iso-actor--crowd.is-focus,
.iso-actor--drop {
  opacity: 1 !important;
}

/* Bảng tên trên đầu khách: avatar nhỏ + rank + tên */
.iso-tag {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -2px);
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: rgba(8, 10, 22, 0.82);
  border: 1px solid rgba(160, 190, 230, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
  color: #eaf4ff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
  z-index: 30;
}
.iso-tag--real {
  background: rgba(8, 22, 44, 0.9);
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35), 0 3px 10px rgba(0, 0, 0, 0.55);
  color: #d9f5ff;
}
.iso-tag__avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #1b2030;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.iso-tag__avatar--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #0b1220;
  text-shadow: none;
  background: linear-gradient(
    160deg,
    hsl(var(--hue, 200) 70% 72%),
    hsl(var(--hue, 200) 65% 48%)
  );
}
.iso-tag__rank {
  flex: none;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #cfe6ff;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.iso-tag__rank--1 { background: linear-gradient(180deg, #ffe9a8, #f0b429); color: #3a2600; }
.iso-tag__rank--2 { background: linear-gradient(180deg, #f2f5fa, #b9c4d4); color: #232a36; }
.iso-tag__rank--3 { background: linear-gradient(180deg, #f0c49a, #c4844c); color: #35200c; }
.iso-tag__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.iso__haze { opacity: 0.55; }
.iso__sky-glow { opacity: 0.55; }

/* Bàn VIP lọt giữa đám đông chỉ thành vệt màu — khách VIP xuống sàn */
.iso__vip {
  display: none !important;
}

/* Cảnh tửu quán nằm dưới club — ẩn hẳn để không lòi ra mép sàn */
body.theme-club .crowd,
body.theme-club .vip-floor,
body.theme-club .floor {
  display: none !important;
}

/* Ẩn loa tower / bục phức tạp — gọn như video */
.iso__tower { opacity: 0.55; transform: scale(0.85); }
.iso__dj-pad {
  transform: scale(0.9);
  transform-origin: 50% 100%;
}