/* ============================================================
   ⚔️ ĐẤU TRƯỜNG ONLINE (Arena Battle Mode) - Styles
   ============================================================ */

/* Thanh SubNav chuyển giữa Đấu Trường và Mini Game */
.gameSubNav {
  display: flex;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto 24px;
  padding: 6px;
  background: #f1f5f9;
  border-radius: 16px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}
.gameSubNavBtn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.gameSubNavBtn span {
  font-size: 28px;
}
.gameSubNavBtn b {
  display: block;
  font-size: 15px;
  color: #334155;
  font-weight: 800;
}
.gameSubNavBtn small {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.gameSubNavBtn.active {
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.gameSubNavBtn.active b {
  color: #0f172a;
}
#gameTabArenaBtn.active b {
  color: #e11d48;
}

/* ============================================================
   QUẢN LÝ HIỂN THỊ ĐỘC LẬP TỪNG TAB (Bấm phần nào chỉ hiện phần đó)
   ============================================================ */
.hidden {
  display: none !important;
}
#arenaView.hidden, .arenaView.hidden {
  display: none !important;
}
#miniGameView.hidden, .miniGameView.hidden {
  display: none !important;
}

/* Container Sảnh Đấu Trường */
.arenaLobbyContainer {
  max-width: 1040px;
  margin: 0 auto;
  animation: arenaFadeIn 0.3s ease;
}
@keyframes arenaFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HERO BANNER & PROFILE HỌC SINH */
.arenaHeroBanner {
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
  background: radial-gradient(120% 120% at 85% 15%, rgba(225, 29, 72, 0.18) 0%, transparent 60%),
              radial-gradient(100% 100% at 10% 85%, rgba(59, 130, 246, 0.16) 0%, transparent 60%),
              linear-gradient(135deg, #070c17 0%, #0f172a 55%, #141e33 100%);
  border-radius: 26px;
  padding: 34px 38px;
  color: #ffffff;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px -12px rgba(7, 12, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  margin-bottom: 32px;
}
.arenaHeroGlow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.3) 0%, rgba(244, 63, 94, 0) 70%);
  pointer-events: none;
  filter: blur(20px);
}
.arenaHeroContent {
  position: relative;
  z-index: 1;
}
.arenaHeroTitleBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.45);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fecdd3;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
}
.arenaLiveDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 12px #f43f5e;
  animation: arenaPulse 1.5s infinite;
}
@keyframes arenaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}
.arenaMainTitle {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.arenaSubtitle {
  font-size: 14.5px;
  line-height: 1.65;
  color: #cbd5e1;
  margin: 0 0 22px;
  max-width: 580px;
}
.arenaBankInfoStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: #94a3b8;
}
.arenaBankInfoStrip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 7px 13px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.arenaBankInfoStrip span:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.arenaBankInfoStrip b {
  color: #f8fafc;
  font-weight: 800;
}

/* THẺ PROFILE RANK CỦA HỌC SINH */
.arenaProfileCard {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  padding: 24px;
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.45);
  transition: all 0.3s ease;
}
.arenaProfileCard:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.arenaProfileHead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.arenaTierBadgeIcon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid var(--tier-color, #a2845e);
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 0 10px var(--tier-color, #a2845e));
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.arenaTierName {
  display: inline-block;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.arenaPlayerName {
  font-size: 19px;
  font-weight: 850;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.arenaRankStatsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.arenaStatBox {
  background: rgba(0, 0, 0, 0.32);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
}
.arenaStatBox:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
}
.arenaStatBox small {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 700;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.arenaStatBox b {
  font-size: 17px;
  font-weight: 850;
  color: #f1f5f9;
}
.arenaProfileActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arenaGhostBtn {
  width: 100%;
  padding: 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.arenaGhostBtn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.arenaAdminGearBtn {
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.35));
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  color: #fef3c7;
  border-radius: 12px;
  font-weight: 850;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}
.arenaAdminGearBtn:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.5));
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3);
}

/* 4 CHẾ ĐỘ THI ĐẤU CHO HỌC SINH */
.arenaModesHeading {
  text-align: center;
  margin-bottom: 26px;
}
.arenaModesHeading h2 {
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.arenaModesHeading p {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}
.arenaModesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-bottom: 38px;
}
.arenaModeCard {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 26px 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.arenaModeCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 22px 22px 0 0;
}
.mode-solo::before { background: linear-gradient(90deg, #f43f5e, #e11d48); }
.mode-room::before { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.mode-survival::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.mode-ranked::before { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }

.arenaModeCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px -10px rgba(15, 23, 42, 0.12);
  border-color: #cbd5e1;
}
.modeBadge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 850;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mode-solo .modeBadge { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.mode-room .modeBadge { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.mode-survival .modeBadge { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.mode-ranked .modeBadge { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }

.modeIconWrap {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  margin-bottom: 16px;
  transition: transform 0.25s ease;
}
.arenaModeCard:hover .modeIconWrap {
  transform: scale(1.08);
}
.mode-solo .modeIconWrap { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.mode-room .modeIconWrap { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.mode-survival .modeIconWrap { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.mode-ranked .modeIconWrap { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }

.arenaModeCard h3 {
  font-size: 18.5px;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.35;
}
.arenaModeCard p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #64748b;
  margin: 0 0 16px;
  flex-grow: 1;
}
.modeFeatureList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 20px;
  font-size: 12.5px;
  color: #334155;
  font-weight: 650;
}
.modeFeatureList span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.modeButtonWrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arenaPlayBtn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 850;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-solo { background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); box-shadow: 0 4px 15px rgba(225, 29, 72, 0.3); }
.btn-room { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); }
.btn-survival { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3); }
.btn-ranked { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3); }
.arenaPlayBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.arenaPinBtn {
  width: 100%;
  padding: 10px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 750;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.arenaPinBtn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* VẬT PHẨM TRỢ GIÚP CHO HỌC SINH */
.arenaPowerupsShowcase {
  background: #ffffff;
  border-radius: 22px;
  padding: 26px 28px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03);
}
.powerupHead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.powerupTitleIcon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  font-size: 26px;
}
.powerupHead h3 {
  font-size: 18px;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 3px;
}
.powerupHead p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
}
.powerupGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.powerupItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1.5px solid #e2e8f0;
  transition: all 0.2s ease;
}
.powerupItem:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transform: translateY(-2px);
}
.powerupItem .powerupIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.powerupItem b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}
.powerupItem small {
  display: block;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
}

/* ============================================================
   MÀN HÌNH CHỜ (WAITING ROOM)
   ============================================================ */
.arenaWaitingLobby {
  max-width: 680px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 28px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.arenaWaitingHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.arenaBackBtn {
  background: #f1f5f9;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}
.arenaModeTag {
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
}
.arenaPinCard {
  text-align: center;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 2px dashed #93c5fd;
  border-radius: 20px;
  padding: 24px 20px;
  margin-bottom: 28px;
}
.arenaPinCard small {
  font-size: 12px;
  font-weight: 800;
  color: #1e40af;
  letter-spacing: 1px;
}
.arenaPinDisplay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 10px;
}
.pinDigits {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #1e3a8a;
  font-family: monospace;
}
.pinCopyBtn {
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  font-weight: 700;
  color: #1d4ed8;
  cursor: pointer;
}
.arenaPinCard p {
  font-size: 13px;
  color: #475569;
  margin: 0;
}
.arenaParticipantsBox {
  margin-bottom: 28px;
}
.partHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.partHeader h3 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.arenaLivePulse {
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
}
.arenaRosterGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.arenaRosterItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.arenaRosterItem.isMe {
  background: #f0fdf4;
  border-color: #86efac;
}
.rosterAvatar {
  font-size: 22px;
}
.rosterName {
  font-size: 13px;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hostBadge {
  font-size: 9px;
  padding: 2px 4px;
  background: #fef08a;
  color: #854d0e;
  border-radius: 4px;
  font-weight: 800;
}
.arenaStartMatchBtn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 900;
  border-radius: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
  transition: all 0.2s;
}
.arenaStartMatchBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.4);
}
.hostControlsHint {
  text-align: center;
  margin-bottom: 14px;
}
.hostControlsHint .pulseBadge {
  display: inline-block;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 6px;
}
.hostControlsHint p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}
.waitingHostNotice {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 22px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.08);
}
.waitingPulseIcon {
  font-size: 34px;
  animation: waitingPulseAnim 1.6s infinite ease-in-out;
  flex-shrink: 0;
}
.waitingHostNotice b {
  display: block;
  font-size: 15px;
  color: #166534;
  margin-bottom: 4px;
  font-weight: 850;
}
.waitingHostNotice p {
  margin: 0;
  font-size: 13px;
  color: #15803d;
  line-height: 1.5;
}
@keyframes waitingPulseAnim {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* ============================================================
   MÀN HÌNH THI ĐẤU (BATTLE ARENA SCREEN)
   ============================================================ */
.arenaBattleScreen {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 24px 28px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}
.arenaBattleHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.battleModeBadge {
  font-size: 12px;
  font-weight: 900;
  padding: 6px 12px;
  background: #0f172a;
  color: #ffffff;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.battleProgressIndicator {
  font-size: 14px;
  font-weight: 800;
  color: #475569;
}
.arenaExitBtn {
  background: transparent;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
}
.arenaExitBtn:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
}

/* THANH ĐỐI ĐẦU VS BAR */
.arenaVsBar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 22px;
  padding: 16px 22px;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}
.vsFighter {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fighterMe {
  justify-content: flex-start;
}
.fighterRival {
  justify-content: flex-end;
}
.fighterAvatar {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.fighterMe .fighterAvatar {
  border-color: #93c5fd;
  background: #eff6ff;
}
.fighterRival .fighterAvatar {
  border-color: #fca5a5;
  background: #fff1f2;
}
.fighterInfo b {
  display: block;
  font-size: 15px;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
}
.fighterScore {
  font-size: 18px;
  font-weight: 900;
  color: #e11d48;
  letter-spacing: -0.01em;
}
.textRight {
  text-align: right;
}
.fighterBadges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.streakBadge {
  font-size: 11.5px;
  font-weight: 850;
  padding: 3px 9px;
  background: #f1f5f9;
  border-radius: 999px;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.streakBadge.active {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fdba74;
  animation: streakFlame 1s infinite alternate;
}
@keyframes streakFlame {
  from { transform: scale(1); }
  to { transform: scale(1.06); filter: drop-shadow(0 0 6px #fb923c); }
}
.heartsBar {
  font-size: 15px;
  letter-spacing: 3px;
  filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.25));
}

/* ĐỒNG HỒ ĐẾM NGƯỢC */
.vsTimerCenter {
  display: flex;
  justify-content: center;
}
.arenaTimerCircle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4.5px solid #10b981;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.arenaTimerCircle.warningUrgent {
  border-color: #f59e0b;
  color: #d97706;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}
.arenaTimerCircle.dangerUrgent {
  border-color: #ef4444;
  color: #dc2626;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5);
  animation: timerBeat 0.5s infinite alternate;
}
@keyframes timerBeat {
  from { transform: scale(1); }
  to { transform: scale(1.15); box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
}

/* THANH VẬT PHẨM POWER-UPS TRONG TRẬN */
.arenaPowerupActionBar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}
.powerupBarLabel {
  font-size: 13px;
  font-weight: 850;
  color: #475569;
  letter-spacing: 0.02em;
}
.powerupBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 750;
  color: #1e293b;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.powerupBtn:hover:not(.disabled) {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.powerupBtn.activeUsed {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #b45309;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}
.powerupBtn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* THẺ CÂU HỎI */
.arenaQuestionCard {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 22px;
  padding: 24px 28px;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.qMeta {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.qDifficulty {
  font-size: 11px;
  font-weight: 850;
  padding: 3px 9px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #334155;
  text-transform: uppercase;
}
.qTopic {
  font-size: 11px;
  font-weight: 750;
  padding: 3px 9px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1d4ed8;
}
.qPrompt {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
  color: #0f172a;
}

/* PHƯƠNG ÁN LỰA CHỌN A, B, C, D */
.arenaOptionsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
.arenaOptBtn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}
.arenaOptBtn:hover:not(:disabled) {
  border-color: #3b82f6;
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.14);
}
.optLetter {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 850;
  color: #334155;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.arenaOptBtn:hover:not(:disabled) .optLetter {
  border-color: #3b82f6;
  color: #1d4ed8;
  background: #ffffff;
}
.optText {
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.45;
  color: #1e293b;
}

/* Màu khi chọn đúng / sai */
.arenaOptBtn.correctOpt {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.25) !important;
}
.arenaOptBtn.correctOpt .optLetter {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}
.arenaOptBtn.wrongOpt {
  background: #fff1f2 !important;
  border-color: #f43f5e !important;
  box-shadow: 0 0 22px rgba(244, 63, 94, 0.25) !important;
}
.arenaOptBtn.wrongOpt .optLetter {
  background: #f43f5e;
  color: #ffffff;
  border-color: #f43f5e;
}

/* PHẢN HỒI LỜI GIẢI */
.arenaAnswerFeedback {
  border-radius: 18px;
  padding: 18px 22px;
  animation: arenaFeedbackPop 0.25s ease;
}
@keyframes arenaFeedbackPop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
.feedbackCorrect {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
}
.feedbackWrong {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
}
.fbHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.fbIcon {
  font-size: 16px;
  font-weight: 900;
}
.feedbackCorrect .fbIcon { color: #166534; }
.feedbackWrong .fbIcon { color: #991b1b; }
.fbScoreBadge {
  font-size: 14px;
  font-weight: 800;
  color: #15803d;
}
.fbExplanation {
  font-size: 13.5px;
  line-height: 1.5;
  color: #334155;
  margin-bottom: 12px;
}
.fbNextWrap {
  display: flex;
  justify-content: flex-end;
}
.arenaNextBtn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
}

/* ============================================================
   MÀN HÌNH TỔNG KẾT CHIẾN THẮNG (VICTORY SCREEN)
   ============================================================ */
.arenaResultCard {
  max-width: 620px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 28px;
  padding: 36px 32px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  text-align: center;
  animation: arenaFadeIn 0.3s ease;
}
.arenaResultTrophy {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 14px;
}
.arenaResultTitle {
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
}
.arenaResultTitle.winnerGlow {
  color: #16a34a;
  text-shadow: 0 0 24px rgba(22, 163, 74, 0.4);
}
.arenaResultTitle.drawGlow {
  color: #2563eb;
  text-shadow: 0 0 24px rgba(37, 99, 235, 0.35);
}
.arenaResultTitle.defeatGlow {
  color: #dc2626;
  text-shadow: 0 0 24px rgba(220, 38, 38, 0.35);
}
.arenaResultCard.isWinnerCard {
  border: 2px solid #86efac;
  box-shadow: 0 20px 50px rgba(22, 163, 74, 0.12);
}
.arenaResultCard.isDrawCard {
  border: 2px solid #bfdbfe;
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.10);
}
.arenaResultCard.isDefeatCard {
  border: 2px solid #fecaca;
  box-shadow: 0 20px 50px rgba(220, 38, 38, 0.10);
}
/* KHUNG ĐIỀU KHIỂN CẤP ĐỘ AI GỌN GÀNG, KHOA HỌC */
.studentAiControl {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.studentAiControl .aiCtrlHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.studentAiControl .aiLabelTitle {
  font-size: 11.5px;
  font-weight: 750;
  color: #475569;
}
.studentAiControl .aiActiveBadge {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.studentAiControl .aiSegmentedBar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  background: #e2e8f0;
  padding: 3px;
  border-radius: 9px;
}
.studentAiControl .aiLvlBtn {
  width: 100%;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 750;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.studentAiControl .aiLvlBtn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #0f172a;
}
.studentAiControl .aiLvlBtn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-weight: 850;
}
.aiLvlBtn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.18s ease;
}
.aiLvlBtn:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}
.aiLvlBtn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}
.arenaSavedSetCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.12) !important;
}
.arenaResultSub {
  font-size: 15px;
  color: #64748b;
  margin: 0 0 24px;
}
.arenaRewardStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.rewardPill {
  padding: 12px 10px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.rewardPill small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 2px;
}
.rewardPill b {
  font-size: 17px;
  color: #0f172a;
}
.rpPill b { color: #d97706; }
.expPill b { color: #2563eb; }
.streakPill b { color: #ea580c; }

.arenaMatchLeaderboard {
  background: #f8fafc;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 28px;
}
.arenaMatchLeaderboard h4 {
  font-size: 14px;
  font-weight: 800;
  color: #334155;
  margin: 0 0 12px;
}
.matchRankList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.matchRankItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.matchRankItem.isMe {
  background: #eff6ff;
  border-color: #93c5fd;
}
.mRankPos {
  font-size: 15px;
  font-weight: 800;
  width: 28px;
}
.mAvatar { font-size: 20px; }
.mName {
  flex-grow: 1;
  text-align: left;
  font-size: 14px;
  color: #0f172a;
}
.mScore {
  font-size: 14px;
  font-weight: 800;
  color: #e11d48;
}
.arenaResultActions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.arenaPlayAgainBtn {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px;
}

/* ============================================================
   MODALS (PIN / LEADERBOARD / ADMIN CONFIG)
   ============================================================ */
.arenaModalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: arenaFadeIn 0.25s ease;
}
.arenaModalBox {
  background: #ffffff;
  border-radius: 24px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  animation: arenaModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes arenaModalPop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.arenaModalBox .modalHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.arenaModalBox .modalHead h3 {
  font-size: 18px;
  font-weight: 850;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}
.arenaModalBox .modalHead .closeBtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #64748b;
  font-size: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.arenaModalBox .modalHead .closeBtn:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
}
.arenaModalBox .modalBody {
  padding: 24px 26px;
  overflow-y: auto;
}
.arenaModalBox .modalFoot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 26px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.arenaModalBox .modalFoot.center {
  justify-content: center;
}
.arenaField {
  display: block;
  margin-bottom: 16px;
}
.arenaField span {
  display: block;
  font-size: 13px;
  font-weight: 750;
  color: #334155;
  margin-bottom: 6px;
}
.arenaField input, .arenaField select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 14px;
  color: #0f172a;
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s;
  background: #ffffff;
}
.arenaField input:focus, .arenaField select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.arenaHelpText {
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
}

/* PIN Modal */
.arenaPinBox {
  max-width: 400px;
}
.arenaPinInput {
  font-size: 32px !important;
  text-align: center;
  letter-spacing: 6px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
  font-weight: 900 !important;
  padding: 14px !important;
  border: 2px solid #3b82f6 !important;
  border-radius: 16px !important;
  margin: 12px 0 6px;
  color: #1d4ed8 !important;
  background: #f0f7ff !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.arenaPinInput:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25) !important;
}

/* Leaderboard Modal */
.arenaLbBox {
  max-width: 640px;
}
.lbList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lbItem {
  display: grid;
  grid-template-columns: 40px auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}
.lbItem:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.lbItem.rank-1 { background: #fefce8; border-color: #fde047; box-shadow: 0 4px 14px rgba(250, 204, 21, 0.15); }
.lbItem.rank-2 { background: #f8fafc; border-color: #cbd5e1; }
.lbItem.rank-3 { background: #fff7ed; border-color: #fed7aa; }
.lbPos { font-size: 17px; font-weight: 900; }
.lbTierBadge { font-size: 13px; font-weight: 850; }
.lbName { font-size: 14.5px; font-weight: 750; color: #0f172a; }
.lbRp { font-size: 13.5px; font-weight: 850; color: #d97706; }
.lbWinRate { font-size: 12.5px; font-weight: 650; color: #64748b; }

/* Admin Modal */
.arenaAdminBox {
  max-width: 680px;
}
.adminConfigSection {
  background: #f8fafc;
  border-radius: 18px;
  padding: 20px 22px;
  border: 1.5px solid #e2e8f0;
  margin-bottom: 20px;
}
.adminConfigSection h4 {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}
.sectionSub {
  font-size: 12.5px;
  color: #64748b;
  margin: 0 0 14px;
}
.adminUploadRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.uploadStatusText {
  font-size: 12.5px;
  color: #64748b;
}
.adminOrDivider {
  text-align: center;
  position: relative;
  margin: 16px 0;
}
.adminOrDivider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e2e8f0;
}
.adminOrDivider span {
  position: relative;
  background: #f8fafc;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.adminExamPickRow {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.adminExamPickRow select {
  flex-grow: 1;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
}
.bankCountBanner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 13px;
}
.bankCountBanner b { color: #16a34a; }
.dangerLinkBtn {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.dangerLinkBtn:hover { text-decoration: underline; }
.adminFormGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   GIAO DIỆN BÀN ĐIỀU HÀNH DÀNH RIÊNG CHO GIÁO VIÊN / ADMIN
   ============================================================ */
.arenaTeacherHero {
  background: radial-gradient(100% 100% at 85% 15%, rgba(245, 158, 11, 0.2) 0%, transparent 60%),
              radial-gradient(100% 100% at 10% 85%, rgba(16, 185, 129, 0.16) 0%, transparent 60%),
              linear-gradient(135deg, #080c16 0%, #0f172a 50%, #171d33 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 24px 50px -12px rgba(8, 12, 22, 0.6), 0 0 40px -10px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.arenaTeacherPill {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  color: #fbbf24 !important;
  font-weight: 850;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}
.arenaTeacherProfileCard {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.arenaTeacherScopeBadge {
  margin: 10px 0 14px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.14);
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fde68a;
  line-height: 1.5;
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  border-right: 1px solid rgba(245, 158, 11, 0.2);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}
.arenaSectionHeading {
  margin: 36px 0 20px;
  text-align: left;
}
.eyebrowOrange {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.arenaSectionHeading h2 {
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.arenaSectionHeading p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* 3 TRỤ CỘT BÀN ĐIỀU HÀNH GIÁO VIÊN */
.arenaTeacherGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 34px;
}
.arenaTeacherActionCard {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 26px 22px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.arenaTeacherActionCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 22px 22px 0 0;
}
.card-host::before { background: linear-gradient(90deg, #ef4444, #f43f5e); }
.card-upload::before { background: linear-gradient(90deg, #0284c7, #2563eb); }
.card-stats::before { background: linear-gradient(90deg, #d97706, #f59e0b); }

.arenaTeacherActionCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12);
  border-color: #cbd5e1;
}
.teacherCardBadge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.card-host .teacherCardBadge {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.card-upload .teacherCardBadge {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.card-stats .teacherCardBadge {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.teacherCardIconWrap, .teacherCardIcon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  margin-bottom: 14px;
  transition: transform 0.25s ease;
}
.card-host .teacherCardIconWrap, .card-host .teacherCardIcon { background: #fef2f2; border: 1px solid #fecaca; color: #ef4444; }
.card-upload .teacherCardIconWrap, .card-upload .teacherCardIcon { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; }
.card-stats .teacherCardIconWrap, .card-stats .teacherCardIcon { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; }
.arenaTeacherActionCard:hover .teacherCardIcon,
.arenaTeacherActionCard:hover .teacherCardIconWrap {
  transform: scale(1.08);
}

.arenaTeacherActionCard h3 {
  font-size: 19px;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.35;
}
.arenaTeacherActionCard p {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.teacherCardFeatures {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 22px;
}
.teacherCardFeatures span {
  font-size: 12.5px;
  color: #334155;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 7px;
}
.teacherCardBtnRow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-host-start {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  font-size: 14px !important;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-host-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
  filter: brightness(1.06);
}
.btn-host-pin {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-host-pin:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
.btn-upload-now {
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  font-size: 14px !important;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-upload-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
  filter: brightness(1.06);
}
.btn-stats-view {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  font-size: 14px !important;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-stats-view:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
  filter: brightness(1.06);
}

/* CHẾ ĐỘ TRẢI NGHIỆM THỬ DÀNH CHO GIÁO VIÊN */
.arenaTestSection {
  background: #ffffff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 22px;
  padding: 24px 26px;
  margin-top: 14px;
  margin-bottom: 34px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03);
}
.arenaTestHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.arenaTestPill {
  display: inline-block;
  font-size: 11px;
  font-weight: 850;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.arenaTestHead h3 {
  font-size: 17px;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 4px;
}
.arenaTestHead p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  max-width: 540px;
}
.arenaTestGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.arenaTestBtn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s ease;
}
.arenaTestBtn:hover {
  border-color: #94a3b8;
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.arenaTestBtn span {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  font-size: 24px;
  flex-shrink: 0;
}
.arenaTestBtn b {
  display: block;
  font-size: 13.5px;
  color: #0f172a;
  font-weight: 800;
}
.arenaTestBtn small {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

/* ============================================================
   KHỐI THAM GIA PHÒNG ĐẤU CHO HỌC SINH (CỔNG VÀO PIN VẠN NĂNG)
   ============================================================ */
.arenaJoinClassCard {
  background: radial-gradient(100% 100% at 90% 10%, rgba(245, 158, 11, 0.2) 0%, transparent 60%),
              linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 22px;
  padding: 22px 28px;
  margin: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.35);
}
.joinClassHead {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.joinClassIcon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid #fde68a;
  display: grid;
  place-items: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}
.joinClassHead h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 900;
  color: #78350f;
  letter-spacing: -0.01em;
}
.joinClassHead p {
  margin: 0;
  font-size: 13.5px;
  color: #92400e;
  line-height: 1.5;
}
.joinClassInputRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.joinClassInputRow input {
  width: 180px;
  height: 48px;
  border-radius: 14px;
  border: 2px solid #f59e0b;
  padding: 0 14px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-align: center;
  color: #78350f;
  background: #ffffff;
  outline: none;
  transition: all 0.2s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.joinClassInputRow input:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
}
.btnJoinClassQuick {
  height: 48px;
  padding: 0 22px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  font-size: 14.5px !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(180, 83, 9, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btnJoinClassQuick:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(180, 83, 9, 0.45);
  filter: brightness(1.08);
}

/* ==========================================================================
   CHIPS VÀ NÚT TÁC VỤ GỌN GÀNG, KHOA HỌC CHO CÁC CHẾ ĐỘ ĐẤU TRƯỜNG
   ========================================================================== */
.modeChipsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.mChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}
.mChip.red { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.mChip.blue { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.mChip.amber { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.mChip.purple { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.mChip.green { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.joinClassTitleWrap {
  display: flex;
  flex-direction: column;
}
.joinClassTitleWrap h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #78350f;
  letter-spacing: -0.01em;
}
.joinClassSub {
  display: block;
  font-size: 12.5px;
  color: #92400e;
  font-weight: 600;
  margin-top: 2px;
}

.btnCreateSoloPin {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  border: none !important;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  font-size: 13.5px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.btnCreateSoloPin:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.4) !important;
  filter: brightness(1.08);
}
.modeButtonWrapSolo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modeButtonWrapSplit {
  display: flex;
  gap: 8px;
}

/* ==========================================================================
   DANH SÁCH BỘ ĐỀ & PHÒNG ĐẤU GIÁO VIÊN ĐÃ TẠO (BÀN ĐIỀU HÀNH)
   ========================================================================== */
.arenaTeacherRoomsSection,
.arenaTeacherSetsSection {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  padding: 26px 28px;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.roomsSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.roomsSectionHeader h3 {
  font-size: 19px;
  font-weight: 850;
  color: #0f172a;
  margin: 6px 0 4px;
  letter-spacing: -0.01em;
}
.roomsSectionHeader p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  max-width: 600px;
}
.arenaSectionPill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
  text-transform: uppercase;
}
.btnCreateLessonRoom {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  font-size: 13.5px !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btnCreateLessonRoom:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
  filter: brightness(1.06);
}
.btnUploadNewArenaSet {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
  font-size: 13.5px !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btnUploadNewArenaSet:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.4);
  filter: brightness(1.06);
}

.arenaRoomsGrid,
.arenaSavedSetsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.arenaRoomCard {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}
.arenaRoomCard:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.arenaRoomCard.status-waiting {
  border-left: 5px solid #10b981;
  background: #ffffff;
}
.arenaRoomCard.status-playing {
  border-left: 5px solid #f59e0b;
  background: #ffffff;
}
.arenaRoomCard.status-finished {
  border-left: 5px solid #94a3b8;
  background: #f8fafc;
  opacity: 0.92;
}

.roomCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.roomCardTitleWrap {
  flex: 1;
  min-width: 0;
}
.roomCardTitle {
  font-size: 16px;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.4;
  word-break: break-word;
}
.roomLessonBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 750;
  color: #0369a1;
  background: #e0f2fe;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid #bae6fd;
}
.roomModeBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 850;
  padding: 3px 9px;
  border-radius: 6px;
}
.roomModeBadge.mode-survival {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fecaca;
}
.roomModeBadge.mode-solo {
  color: #4338ca;
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
}
.roomModeBadge.mode-room {
  color: #047857;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
}
.btnCleanOldRooms {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 750;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btnCleanOldRooms:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
.roomStatusPill {
  font-size: 11px;
  font-weight: 850;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.roomStatusPill.status-waiting {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.roomStatusPill.status-playing {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.roomStatusPill.status-finished {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.roomCardPinRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
  border: 1.5px dashed #fca5a5;
  border-radius: 14px;
  padding: 10px 16px;
}
.roomPinWrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.roomPinLabel {
  font-size: 11px;
  font-weight: 850;
  color: #991b1b;
  letter-spacing: 0.08em;
}
.roomPinCode {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 22px;
  font-weight: 900;
  color: #dc2626;
  letter-spacing: 3px;
  text-shadow: 0 1px 2px rgba(220, 38, 38, 0.15);
}
.copyPinBtn {
  background: #ffffff;
  border: 1.5px solid #fecaca;
  color: #b91c1c;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.copyPinBtn:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #991b1b;
  transform: translateY(-1px);
}

.roomCardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: #64748b;
}
.roomCardMeta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}

.roomCardActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.btnEnterRoom {
  flex: 1;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.btnEnterRoom:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.btnViewRoom {
  flex: 1;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.btnViewRoom:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}
.btnRecreateRoom {
  flex: 1;
  background: #ffffff !important;
  color: #2563eb !important;
  border: 1.5px solid #bfdbfe !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btnRecreateRoom:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}
.btnDeleteRoom {
  background: #fee2e2;
  border: 1.5px solid #fecaca;
  color: #ef4444;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.btnDeleteRoom:hover {
  background: #fca5a5;
  color: #b91c1c;
  transform: translateY(-1px);
}

.arenaRoomsEmpty {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 18px;
  border: 1.5px dashed #cbd5e1;
}
.arenaRoomsEmpty .emptyIcon {
  font-size: 42px;
  margin-bottom: 10px;
}
.arenaRoomsEmpty h4 {
  font-size: 17px;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 6px;
}
.arenaRoomsEmpty p {
  font-size: 13.5px;
  margin: 0;
  max-width: 480px;
  margin: 0 auto;
}

/* Modal tạo phòng mở rộng (Source tabs & Quick pills) */
.sourceTabsRow {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.sourceTabBtn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.sourceTabBtn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
  font-weight: 850;
}
.quickPillGroup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.quickPillBtn {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s;
}
.quickPillBtn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* HIỆU ỨNG ĐỐI THỦ VÀ LIVE BATTLE HUD */
.fighterInfo {
  position: relative;
}
.arenaPopScoreAnim {
  position: absolute;
  top: -12px;
  right: 0;
  font-size: 14px;
  font-weight: 900;
  color: #10b981;
  pointer-events: none;
  animation: popScoreFloat 1s forwards ease-out;
}
@keyframes popScoreFloat {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  20% { transform: translateY(-8px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-24px) scale(1); opacity: 0; }
}

.rivalAnswerFlash {
  animation: rivalFlash 0.5s ease-out;
}
@keyframes rivalFlash {
  0% { filter: drop-shadow(0 0 12px #38bdf8); }
  100% { filter: none; }
}

/* LIVE BATTLE TOASTS */
.arenaBattleToasts {
  position: fixed;
  top: 85px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 320px;
}
.battleToast {
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  border-left: 4px solid #38bdf8;
  animation: slideInToast 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.3s ease;
}
.battleToast.toast-rival-correct {
  border-left-color: #10b981;
}
.battleToast.toast-rival-wrong {
  border-left-color: #f59e0b;
}
.battleToast.toast-rival-eliminated {
  border-left-color: #ef4444;
  background: rgba(185, 28, 28, 0.92);
}
.battleToast.fadeout {
  opacity: 0;
  transform: translateX(30px);
}
@keyframes slideInToast {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* BẢNG SINH TỒN THỜI GIAN THỰC (BATTLE ROYALE HUD) */
.arenaSurvivorHud {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.arenaSurvivorHud .hudTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}
.arenaSurvivorHud .hudTitle {
  font-weight: 850;
  color: #7c3aed;
  letter-spacing: 0.5px;
}
.arenaSurvivorHud .hudCount {
  font-weight: 750;
  color: #0f172a;
}
.arenaSurvivorHud .hudRoster {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.hudPlayer {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.hudPlayer.isMe {
  background: #ecfdf5;
  border-color: #6ee7b7;
  font-weight: 800;
  color: #047857;
}
.hudPlayer.eliminated {
  opacity: 0.45;
  filter: grayscale(1);
  text-decoration: line-through;
  background: #f1f5f9;
}
.hudPlayer .hudScore {
  font-weight: 800;
  color: #e11d48;
}

/* Saved Arena Sets Management & Badges */
.arenaSetItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  gap: 12px;
  transition: all 0.2s ease;
}
.arenaSetItem:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.arenaSetMain {
  flex-grow: 1;
}
.arenaSetTitle {
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.arenaSetBadges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.arenaSetPill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}
.arenaSetPill.pill-grade {
  background: #e0e7ff;
  color: #3730a3;
}
.arenaSetPill.pill-count {
  background: #dcfce7;
  color: #166534;
}
.arenaSetPill.pill-default {
  background: #fef3c7;
  color: #92400e;
}
.arenaSetActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btnLaunchSet {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btnLaunchSet:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.roomSetBadge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.roomExamBadge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fdf4ff;
  color: #86198f;
  border: 1px solid #f5d0fe;
}
.adminUploadSetForm {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}

/* ============================================================
   TEACHER PUBLISHING PERMISSIONS STYLES (FIX298)
   ============================================================ */
.permSummaryWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.permSummaryBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.2;
}
.permSummaryBadge.permAll {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.permSummaryBadge.permPartial {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.permSummaryBadge.permNone {
  background: #f8fafc;
  color: #64748b;
  border: 1px dashed #cbd5e1;
}
.permMatrixTable {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13px;
}
.permMatrixTable th,
.permMatrixTable td {
  padding: 10px 12px;
  text-align: center;
  border: 1px solid #e2e8f0;
}
.permMatrixTable th {
  background: #f8fafc;
  font-weight: 700;
  color: #334155;
}
.permMatrixTable td label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}
.permMatrixTable td label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #10b981;
  cursor: pointer;
}
.permQuickActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px 0;
}
.permQuickBtn {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}
.permQuickBtn:hover {
  background: #e2e8f0;
}
.permQuickBtn.primaryQuick {
  background: #10b981;
  color: #ffffff;
  border-color: #059669;
}
.permQuickBtn.primaryQuick:hover {
  background: #059669;
}
.teacherPermNoticeCard {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.teacherPermNoticeCard.hasPerm {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
.teacherPermNoticeCard.noPerm {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.teacherPermNoticeIcon {
  font-size: 20px;
  flex-shrink: 0;
}

/* ============================================================
   TỐI ƯU HIỂN THỊ TRÊN ĐIỆN THOẠI (MOBILE RESPONSIVE TỐI ĐA)
   NỘI DUNG CÂU HỎI VÀ PHƯƠNG ÁN GỌN GÀNG, KHOA HỌC NHƯ LUYỆN NGAY
   ============================================================ */
@media (max-width: 768px) {
  /* 0. THANH SUBNAV GAME TAB */
  .gameSubNav {
    padding: 4px !important;
    gap: 6px !important;
    margin: 0 auto 10px !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }
  .gameSubNavBtn {
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  .gameSubNavBtn span {
    font-size: 20px !important;
  }
  .gameSubNavBtn b {
    font-size: 13px !important;
  }
  .gameSubNavBtn small {
    display: none !important;
  }

  /* 1. LOBBY CONTAINER & HERO BANNER */
  .arenaLobbyContainer {
    padding: 4px 6px 30px !important;
  }
  .arenaHeroBanner {
    grid-template-columns: 1fr !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .arenaHeroTitleBadge {
    font-size: 9.5px !important;
    padding: 3px 8px !important;
    margin-bottom: 4px !important;
  }
  .arenaMainTitle {
    font-size: 17px !important;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
  }
  .arenaSubtitle {
    display: none !important; /* Loại bỏ đoạn văn dài gây chiếm diện tích */
  }
  .arenaBankInfoStrip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 4px !important;
    font-size: 10.5px !important;
  }
  .arenaBankInfoStrip span {
    padding: 3px 7px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* Thẻ Profile HS & GV trong Hero */
  .arenaProfileCard {
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }
  .arenaProfileHead {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .arenaTierBadgeIcon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }
  .arenaTierName {
    font-size: 9.5px !important;
  }
  .arenaPlayerName {
    font-size: 14.5px !important;
  }
  .arenaTeacherScopeBadge {
    margin: 4px 0 6px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .arenaRankStatsGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
  }
  .arenaStatBox {
    padding: 4px 2px !important;
    text-align: center !important;
    border-radius: 6px !important;
  }
  .arenaStatBox small {
    font-size: 8.5px !important;
    margin-bottom: 1px !important;
    letter-spacing: 0 !important;
  }
  .arenaStatBox b {
    font-size: 12.5px !important;
  }
  .arenaProfileActions {
    gap: 4px !important;
  }
  .arenaGhostBtn, .arenaAdminGearBtn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  /* 2. CỔNG VÀO MÃ PIN VẠN NĂNG (GỌN GÀNG, KHÔNG BAO GIỜ TRÀN) */
  .arenaJoinClassCard {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
    margin: 8px 0 10px !important;
    border-radius: 14px !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15) !important;
  }
  .joinClassHead {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
  }
  .joinClassIcon {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .joinClassTitleWrap h3 {
    font-size: 13px !important;
    font-weight: 850 !important;
    margin: 0 !important;
    color: #78350f !important;
  }
  .joinClassSub {
    font-size: 10px !important;
    color: #92400e !important;
    margin-top: 1px !important;
  }
  .joinClassInputRow {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .joinClassInputRow input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 38px !important;
    font-size: 15px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    letter-spacing: 2px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .btnJoinClassQuick {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* 3. 4 CHẾ ĐỘ THI ĐẤU (HỌC SINH) */
  .arenaModesHeading {
    margin-bottom: 8px !important;
  }
  .arenaModesHeading h2 {
    font-size: 15px !important;
    margin: 0 !important;
  }
  .arenaModesHeading p {
    display: none !important;
  }
  .arenaModesGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .arenaModeCard {
    padding: 12px 12px !important;
    border-radius: 14px !important;
  }
  .modeBadge {
    top: 8px !important;
    right: 8px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .modeIconWrap {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }
  .arenaModeCard h3 {
    font-size: 14.5px !important;
    margin: 0 0 4px !important;
  }
  .arenaModeCard p {
    display: none !important; /* Thay thế bằng chips ngắn gọn */
  }
  .modeChipsRow {
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  .mChip {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
  }
  .studentAiControl {
    padding: 5px 6px !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
  }
  .aiCtrlHead {
    margin-bottom: 3px !important;
  }
  .aiLabelTitle {
    font-size: 10px !important;
  }
  .aiActiveBadge {
    font-size: 10px !important;
  }
  .aiSegmentedBar {
    gap: 2px !important;
    padding: 2px !important;
  }
  .aiLvlBtn {
    font-size: 10px !important;
    padding: 3px 4px !important;
    border-radius: 5px !important;
  }
  .modeButtonWrap {
    gap: 5px !important;
  }
  .modeButtonWrapSolo {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 5px !important;
  }
  .modeButtonWrapSolo .btnJoinSoloPin {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .modeButtonWrapSplit {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 5px !important;
  }
  .arenaPlayBtn {
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  .btnCreateSoloPin {
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  .arenaPinBtn {
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* 4. TÚI VẬT PHẨM TRỢ GIÚP */
  .arenaPowerupsShowcase {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }
  .powerupHead {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .powerupTitleIcon {
    width: 26px !important;
    height: 26px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }
  .powerupHead h3 {
    font-size: 13px !important;
    margin: 0 !important;
  }
  .powerupHead p {
    display: none !important;
  }
  .powerupGrid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  .powerupItem {
    padding: 5px 4px !important;
    gap: 3px !important;
    border-radius: 8px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .powerupItem .powerupIcon {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }
  .powerupItem b {
    font-size: 10px !important;
  }
  .powerupItem small {
    font-size: 8px !important;
    line-height: 1.15 !important;
    display: block !important;
  }

  /* 5. BÀN ĐIỀU HÀNH 3 TRỤ CỘT CHO GIÁO VIÊN */
  .arenaSectionHeading {
    margin: 14px 0 8px !important;
  }
  .arenaSectionHeading h2 {
    font-size: 15px !important;
    margin: 0 !important;
  }
  .arenaSectionHeading p {
    display: none !important;
  }
  .arenaTeacherGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .arenaTeacherActionCard {
    padding: 12px !important;
    border-radius: 14px !important;
  }
  .teacherCardBadge {
    margin-bottom: 6px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .teacherCardIconWrap, .teacherCardIcon {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }
  .arenaTeacherActionCard h3 {
    font-size: 14.5px !important;
    margin: 0 0 4px !important;
  }
  .teacherCardBtnRow {
    display: flex !important;
    gap: 5px !important;
  }
  .card-host .teacherCardBtnRow {
    display: grid !important;
    grid-template-columns: 1.25fr 0.75fr !important;
    gap: 5px !important;
  }
  .btn-host-start, .btn-upload-now, .btn-stats-view {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  .btn-host-pin {
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* 6. DANH SÁCH BỘ ĐỀ & PHÒNG THI (GV) */
  .arenaTeacherRoomsSection, .arenaTeacherSetsSection {
    padding: 14px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  .roomsSectionHeader {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .roomsSectionHeader h3 {
    font-size: 16px !important;
    margin: 4px 0 2px !important;
  }
  .roomsSectionHeader p {
    font-size: 12px !important;
  }
  .roomsHeaderActions {
    width: 100% !important;
  }
  .roomsHeaderActions button {
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
  }
  .arenaRoomsGrid, .arenaSavedSetsGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .arenaRoomCard, .arenaSavedSetCard {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }
  .roomCardTitle {
    font-size: 14.5px !important;
  }
  .roomCardPinRow {
    padding: 7px 12px !important;
    border-radius: 10px !important;
  }
  .roomPinCode {
    font-size: 18px !important;
    letter-spacing: 2px !important;
  }
  .copyPinBtn {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }
  .roomCardMeta {
    gap: 6px !important;
    font-size: 11px !important;
  }
  .roomCardMeta span {
    padding: 3px 6px !important;
  }
  .roomCardActions button {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  /* 7. TRẢI NGHIỆM THỬ DÀNH CHO GIÁO VIÊN */
  .arenaTestSection {
    padding: 14px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
  }
  .arenaTestHead {
    margin-bottom: 12px !important;
  }
  .arenaTestHead h3 {
    font-size: 15px !important;
    margin: 0 0 2px !important;
  }
  .aiLevelSelectorStrip {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 4px 8px !important;
    gap: 3px !important;
  }
  .arenaTestGrid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .arenaTestBtn {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  .arenaTestBtn span {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }
  .arenaTestBtn b {
    font-size: 13px !important;
  }

  /* ============================================================
     8. TRONG TRẬN ĐẤU (LIVE BATTLE) - HIỂN THỊ GỌN NHƯ LUYỆN NGAY!
     ============================================================ */
  .arenaBattleScreen {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .arenaBattleHeader {
    padding: 4px 6px !important;
    margin-bottom: 6px !important;
  }
  .battleModeBadge {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
  }
  .battleProgressIndicator {
    font-size: 12px !important;
    font-weight: 850 !important;
  }
  .arenaExitBtn {
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* THANH VS BAR - GIỮ NẰM NGANG 1 DÒNG GỌN GÀNG, KHÔNG XẾP DỌC! */
  .arenaVsBar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  }
  .vsFighter {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .fighterAvatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .fighterInfo b {
    font-size: 11.5px !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .fighterScore {
    font-size: 12.5px !important;
    font-weight: 850 !important;
  }
  .streakBadge {
    font-size: 9.5px !important;
    padding: 2px 5px !important;
  }
  .heartsBar {
    font-size: 11.5px !important;
    letter-spacing: 1px !important;
  }
  .arenaTimerCircle {
    width: 38px !important;
    height: 38px !important;
    border-width: 3px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2) !important;
  }

  /* THANH TRỢ GIÚP POWER-UPS TRONG TRẬN */
  .arenaPowerupActionBar {
    padding: 5px 8px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .powerupBarLabel {
    display: none !important;
  }
  .powerupBtn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    gap: 4px !important;
  }

  /* BẢNG SINH TỒN ROYALE HUD TRONG TRẬN */
  .arenaSurvivorHud {
    padding: 6px 8px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
  .arenaSurvivorHud .hudTop {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  .hudPlayer {
    padding: 2px 6px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
  }

  /* THẺ CÂU HỎI TRONG ĐẤU TRƯỜNG - GỌN GÀNG, SẮC NÉT NHƯ LUYỆN NGAY! */
  .arenaQuestionCard {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  }
  .qMeta {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  .qDifficulty, .qTopic {
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }
  .qPrompt {
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
  }
  .qPrompt p {
    margin: 0 0 6px !important;
  }
  .qPrompt img, .arenaQuestionCard img {
    max-width: 100% !important;
    max-height: 160px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 4px auto !important;
    border-radius: 6px !important;
  }
  .qPrompt table {
    font-size: 12px !important;
    margin: 6px 0 !important;
  }
  .qPrompt th, .qPrompt td {
    padding: 4px 6px !important;
  }

  /* 4 PHƯƠNG ÁN LỰA CHỌN A, B, C, D - GỌN GÀNG NHƯ EXAM OPTION CỦA LUYỆN NGAY */
  .arenaOptionsGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-bottom: 10px !important;
  }
  .arenaOptBtn {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    min-height: 40px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.02) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  .optLetter {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    margin-top: 1px !important;
    display: grid !important;
    place-items: center !important;
  }
  .optText {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1e293b !important;
  }
  .optText img {
    max-height: 85px !important;
    max-width: 160px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 2px 0 !important;
  }

  /* KHUNG PHẢN HỒI KẾT QUẢ VÀ LỜI GIẢI */
  .arenaAnswerFeedback {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 8px !important;
  }

  /* MODALS TRÊN MOBILE */
  .arenaModalBox {
    max-width: calc(100vw - 20px) !important;
    border-radius: 20px !important;
  }
  .arenaModalBox .modalHead {
    padding: 14px 16px !important;
  }
  .arenaModalBox .modalBody {
    padding: 16px !important;
  }
  .arenaModalBox .modalFoot {
    padding: 12px 16px !important;
  }
}

/* ==========================================================================
   FIX310: TEACHER LIVE ARENA DASHBOARD & REAL-TIME LEADERBOARD
   ========================================================================== */

.teacherArenaLiveContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 16px 36px;
  box-sizing: border-box;
}

/* Header điều hành */
.teacherLiveHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 22px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  border: 1px solid #e2e8f0;
  gap: 16px;
  flex-wrap: wrap;
}

.tlhLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tlhPinBadge {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.5px;
}
.tlhPinBadge b {
  color: #0284c7;
  font-size: 16px;
  font-family: monospace;
  margin-left: 4px;
}

.tlhTitle {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.tlhLiveBadge {
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  animation: liveBadgePulse 1.8s infinite;
}

@keyframes liveBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(0.97); }
}

.tlhCenter {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tlhQuestionProgress {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.tqpLabel {
  font-size: 10.5px;
  font-weight: 750;
  color: #64748b;
  letter-spacing: 0.5px;
}
.tqpNumber {
  font-size: 17px;
  font-weight: 700;
  color: #334155;
}
.tqpNumber b {
  font-size: 24px;
  font-weight: 900;
  color: #0284c7;
}

.tlhTimerCircle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3.5px solid #10b981;
  background: #f0fdf4;
  color: #047857;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
  transition: all 0.3s ease;
}
.tlhTimerCircle span {
  font-size: 20px;
}
.tlhTimerCircle small {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}
.tlhTimerCircle.urgent {
  border-color: #ef4444;
  background: #fef2f2;
  color: #dc2626;
  animation: timerShake 0.4s infinite alternate;
}

.tlhRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.autoAdvToggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: #475569;
  cursor: pointer;
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.autoAdvToggle input {
  cursor: pointer;
}

.tlhNextBtn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tlhNextBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

.tlhFinishBtn {
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
  background: #fff !important;
  font-size: 12.5px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  cursor: pointer;
}
.tlhFinishBtn:hover {
  background: #fef2f2 !important;
}

/* Sân khấu chính: 2 cột (Câu hỏi bên trái - Bảng xếp hạng bên phải) */
.teacherLiveStage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 980px) {
  .teacherLiveStage {
    grid-template-columns: 1fr;
  }
}

/* Thẻ tiến độ nộp bài */
.teacherProgressCard {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  border: 1px solid #e2e8f0;
  margin-bottom: 14px;
}
.tpcHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: #475569;
  margin-bottom: 8px;
}
.tpcHeader b {
  color: #0284c7;
  font-size: 14.5px;
}
.tpcProgressBar {
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.tpcProgressFill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9 0%, #10b981 100%);
  border-radius: 6px;
  transition: width 0.4s ease-out;
}

/* Thẻ câu hỏi trình chiếu */
.teacherQuestionDisplayCard {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  border: 1px solid #e2e8f0;
}
.tqMeta {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.tqDiff, .tqTopic {
  font-size: 11.5px;
  font-weight: 750;
  padding: 3px 9px;
  border-radius: 6px;
}
.tqDiff {
  background: #e0f2fe;
  color: #0369a1;
}
.tqTopic {
  background: #f1f5f9;
  color: #475569;
}
.tqPrompt {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.55;
  margin-bottom: 20px;
}
.tqPrompt p {
  margin: 0 0 10px;
}
.tqPrompt img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
  margin: 8px auto;
  border-radius: 8px;
}

/* 4 phương án trình chiếu nhiều màu sắc */
.teacherOptionsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .teacherOptionsGrid {
    grid-template-columns: 1fr;
  }
}
.teacherOptCard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  color: #ffffff;
  font-weight: 650;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s;
}
.teacherOptCard:hover {
  transform: translateY(-2px);
}
.tOptLetter {
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
}
.tOptText {
  font-size: 15.5px;
  line-height: 1.4;
  word-break: break-word;
}
.opt-red { background: linear-gradient(135deg, #e11d48 0%, #be123c 100%); }
.opt-blue { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
.opt-yellow { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
.opt-green { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }

/* BẢNG XẾP HẠNG THỜI GIAN THỰC CHO GIÁO VIÊN */
.teacherLiveLeaderboardCard {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  border: 1px solid #e2e8f0;
}
.tllbHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #f1f5f9;
  margin-bottom: 12px;
}
.tllbTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #0f172a;
}
.tllbIcon {
  font-size: 20px;
}
.tllbBadge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 12px;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 8px;
}

.teacherRosterTableWrapper {
  max-height: 520px;
  overflow-y: auto;
}
.teacherRosterTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.teacherRosterTable th {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1.5px solid #e2e8f0;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 2;
}
.teacherRosterTable td {
  padding: 10px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.tRowItem {
  transition: background 0.2s;
}
.tRowItem:hover {
  background: #f8fafc;
}
.tTopRankRow {
  background: #fefce8;
}

.tRankGold {
  background: #fef08a;
  color: #854d0e;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.tRankSilver {
  background: #f1f5f9;
  color: #334155;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.tRankBronze {
  background: #ffedd5;
  color: #9a3412;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.tRankNormal {
  color: #64748b;
  font-weight: 750;
  font-size: 12.5px;
}

.tStudentCell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tStudentAvatar {
  font-size: 18px;
}
.tStudentName {
  font-size: 13.5px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.tScoreVal {
  color: #0284c7;
  font-size: 14px;
}
.tStreakBadge {
  background: #fff7ed;
  color: #c2410c;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #fed7aa;
}

.tStatusAnswered {
  background: #f0fdf4;
  color: #15803d;
  font-size: 11.5px;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
  display: inline-block;
  white-space: nowrap;
}
.tStatusThinking {
  background: #f8fafc;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  display: inline-block;
  white-space: nowrap;
}

/* THÔNG BÁO CHỜ CHO HỌC SINH SAU KHI NỘP BÀI TRONG PHÒNG LỚP */
.studentWaitingNextNotice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 12px;
  color: #166534;
}
.studentWaitingNextNotice .swnPulse {
  font-size: 24px;
  animation: swnPulseAnim 1.4s infinite;
}
@keyframes swnPulseAnim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.studentWaitingNextNotice b {
  font-size: 13.5px;
  display: block;
  margin-bottom: 2px;
}
.studentWaitingNextNotice p {
  font-size: 12px;
  margin: 0;
  color: #15803d;
}

/* =========================================================================
   TAG PHÂN LOẠI PHẦN I, II, III VÀ HIỂN THỊ Ý ĐÚNG / SAI TRONG ĐẤU TRƯỜNG
   ========================================================================= */
.arenaQTag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.arenaQTag.mcqTag {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.arenaQTag.tfTag {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.arenaQTag.shortTag {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}
.arenaStem {
  margin-bottom: 12px;
  line-height: 1.6;
}
.arenaTfSubStatement {
  background: #f8fafc;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  border-radius: 0 12px 12px 0;
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.arenaSubBadge {
  background: #fef3c7;
  color: #92400e;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  margin-right: 8px;
  border: 1px solid #fde68a;
  display: inline-block;
}