/* ==========================================================================
   KHẢO THÍ VIỆT - ĐỒ HỌA TRỰC QUAN BÀI HỌC LỚP 2 (GRADE 2 VISUALS)
   ========================================================================== */

.g2-visual-wrapper {
  margin: 14px 0 10px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  animation: visualPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes visualPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

[data-theme="dark"] .g2-visual-wrapper {
  background: #1E293B;
  border-color: #334155;
}

.g2-svg-illu {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

/* TIA SỐ */
.number-line-visual {
  background: #F0FDF4;
  border-color: #BBF7D0;
}
[data-theme="dark"] .number-line-visual {
  background: #064E3B;
  border-color: #047857;
}

/* KHUNG 10 Ô (TEN FRAME) */
.ten-frame-caption {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .ten-frame-caption {
  color: #E2E8F0;
}
.tf-dot-blue { color: #2563EB; font-size: 16px; }
.tf-dot-orange { color: #EA580C; font-size: 16px; }

/* THƯỚC ĐO RULER */
.ruler-visual {
  background: #FEFCE8;
  border-color: #FEF08A;
}
[data-theme="dark"] .ruler-visual {
  background: #713F12;
  border-color: #A16207;
}
.ruler-badge-tag {
  font-size: 13px;
  font-weight: 700;
  color: #854D0E;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .ruler-badge-tag {
  color: #FEF08A;
}

/* ĐƯỜNG GẤP KHÚC */
.broken-line-visual {
  background: #EFF6FF;
  border-color: #BFDBFE;
}
[data-theme="dark"] .broken-line-visual {
  background: #1E3A8A;
  border-color: #2563EB;
}
.line-caption {
  font-size: 13px;
  font-weight: 800;
  color: #1E40AF;
  margin-bottom: 4px;
}
[data-theme="dark"] .line-caption {
  color: #93C5FD;
}

/* BÌNH ĐONG LÍT */
.liquid-visual {
  background: #F0F9FF;
  border-color: #BAE6FD;
}
[data-theme="dark"] .liquid-visual {
  background: #0C4A6E;
  border-color: #0284C7;
}

/* ĐỒNG HỒ KIM */
.clock-visual {
  background: #FFFBEB;
  border-color: #FDE68A;
}
[data-theme="dark"] .clock-visual {
  background: #451A03;
  border-color: #78350F;
}
.clock-label {
  font-size: 14px;
  font-weight: 800;
  color: #B45309;
  margin-top: 6px;
}
[data-theme="dark"] .clock-label {
  color: #FDE68A;
}

/* HÌNH HỌC */
.shape-caption {
  font-size: 13px;
  font-weight: 800;
  color: #2563EB;
  margin-top: 6px;
}
[data-theme="dark"] .shape-caption {
  color: #60A5FA;
}

/* CÂN HAI ĐĨA */
.balance-scale-visual {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
[data-theme="dark"] .balance-scale-visual {
  background: #0F172A;
  border-color: #334155;
}

/* BÓ QUE TÍNH */
.sticks-visual {
  background: #FFFBEB;
  border-color: #FDE68A;
}
[data-theme="dark"] .sticks-visual {
  background: #451A03;
  border-color: #78350F;
}

/* FLASHCARD TIẾNG ANH CHIBI */
.english-card-visual {
  background: linear-gradient(135deg, #EFF6FF 0%, #FAF5FF 100%);
  border: 2px dashed #93C5FD;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 400px;
}
[data-theme="dark"] .english-card-visual {
  background: linear-gradient(135deg, #172554 0%, #3B0764 100%);
  border-color: #3B82F6;
}
.card-character-stage {
  font-size: 54px;
  line-height: 1;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .card-character-stage {
  background: #1E293B;
}
.card-content-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-english-word {
  font-size: 22px;
  font-weight: 900;
  color: #1D4ED8;
  letter-spacing: 0.5px;
}
[data-theme="dark"] .card-english-word {
  color: #60A5FA;
}
.card-phonetic {
  font-size: 13px;
  font-family: monospace;
  color: #64748B;
  font-weight: 600;
}
[data-theme="dark"] .card-phonetic {
  color: #94A3B8;
}
.card-vietnamese-meaning {
  font-size: 14px;
  font-weight: 800;
  color: #059669;
  margin-top: 4px;
}
[data-theme="dark"] .card-vietnamese-meaning {
  color: #34D399;
}

/* ==========================================================================
   BẢN ĐỒ PHIÊU LƯU HỌC TẬP KHỐI 2 (GRADE 2 ADVENTURE MAP)
   ========================================================================== */

.grade2-adventure-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  padding: 8px 12px 12px 12px;
  box-sizing: border-box;
}

.grade2-adventure-wrapper .mockup-adventure-canvas {
  position: relative;
  aspect-ratio: 3 / 4;
  height: calc(100dvh - 105px);
  max-height: calc(100dvh - 105px);
  width: auto;
  max-width: min(calc((100dvh - 105px) * (3 / 4)), 96vw, 680px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.16), 0 0 0 4px #FFFFFF, 0 0 0 7px #E2E8F0;
  background: #F1F5F9;
  margin: 6px auto 12px;
  container-type: inline-size;
  flex-shrink: 1;
}

[data-theme="dark"] .grade2-adventure-wrapper .mockup-adventure-canvas {
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.4), 0 0 0 4px #1E293B, 0 0 0 7px #334155;
  background: #0F172A;
}

.grade2-adventure-wrapper .mockup-canvas-bg-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* ==========================================================================
   BẢN ĐỒ PHIÊU LƯU HỌC TẬP KHỐI 2 (GRADE 2 ADVENTURE MAP - 3D ART RESTORATION)
   Tôn vinh 100% tác phẩm khối gỗ 3D nghệ thuật, không đè mảng xám che khuất ảnh
   ========================================================================== */

/* 1. TÔN VINH KHỐI GỖ 3D: CÁC NỐT BÀI HỌC CĂN TÂM TUYỆT ĐỐI CHUẨN XÁC TRÊN MẶT KHỐI GỖ */
.grade2-adventure-wrapper .mockup-hotspot[data-type="lesson"] {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  width: clamp(28px, 6.6cqw, 42px) !important;
  height: clamp(28px, 6.6cqw, 42px) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  border-radius: clamp(6px, 1.6cqw, 10px) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 30 !important;
}

.grade2-adventure-wrapper .mockup-hotspot[data-type="lesson"]:hover {
  transform: translate(-50%, -50%) scale(1.12) !important;
}

/* Rương báu cầu vồng giữa chặng */
.grade2-adventure-wrapper .mockup-hotspot.hotspot-chest {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 25 !important;
}

.grade2-adventure-wrapper .mockup-hotspot.hotspot-chest:hover {
  transform: translate(-50%, -50%) scale(1.08) !important;
  filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.9));
}

/* Lâu Đài Kẹo Ngọt ở đỉnh đồi */
.grade2-adventure-wrapper .mockup-hotspot.hotspot-castle {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  z-index: 20 !important;
}

.grade2-adventure-wrapper .mockup-hotspot.hotspot-castle:hover {
  transform: translate(-50%, -50%) scale(1.04) !important;
}

/* 2. KHỐI GỖ/RƯƠNG ĐANG MỞ: Bỏ vầng hào quang viền vàng quanh ô số 1 theo yêu cầu User */
.grade2-adventure-wrapper .hotspot-node-active::before {
  display: none !important;
  content: none !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}

@keyframes halo-pulse-gold {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6), inset 0 0 6px rgba(245, 158, 11, 0.2);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.95), inset 0 0 12px rgba(245, 158, 11, 0.4);
  }
}

/* 3. TỐI ƯU TRẢI NGHIỆM: BỎ HẲN NÚT 'BẮT ĐẦU' LƠ LỬNG TRÊN BẢN ĐỒ
   Không còn nút xanh đè lên chú ong hay che cảnh quan.
   Bé chạm trực tiếp vào Khối gỗ số (hoặc Chú Ong) để học ngay lập tức! */
.hotspot-start-btn,
.grade2-adventure-wrapper .hotspot-start-btn,
.g4-floating-start-pill,
#g4-btn-start-quest {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Tương tác trực tiếp lên khối gỗ số đang mở: Nảy nhẹ khi di chuột / chạm */
.grade2-adventure-wrapper .hotspot-node-active,
.g4-node-anchor.g4-node-active {
  cursor: pointer !important;
}

.grade2-adventure-wrapper .hotspot-node-active:hover,
.g4-node-anchor.g4-node-active:hover {
  transform: scale(1.08) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.grade2-adventure-wrapper .hotspot-node-active:active,
.g4-node-anchor.g4-node-active:active {
  transform: scale(0.95) !important;
}

@keyframes start-float-pill {
  0%, 100% { transform: translate(-50%, -100%); }
  50% { transform: translate(-50%, calc(-100% - 4px)); }
}

/* 4. CHỮ SỐ 3D ĐẬM NÉT NỔI TRÊN MẶT KHỐI GỖ (BEELIO / MARIO 3D STYLE) */
.grade2-adventure-wrapper .g2-cube-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.grade2-adventure-wrapper .g2-cube-number {
  font-family: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(17px, 4.2cqw, 26px);
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-top: -1px;
}

.grade2-adventure-wrapper .mockup-hotspot:hover .g2-cube-number {
  transform: scale(1.15);
}

/* Bảng màu BEElio 3D tươi sáng cho từng mốc bài học */
.grade2-adventure-wrapper .g2-cube-number.num-1 {
  color: #FF5A79;
  text-shadow: 0 3px 0 #D4264A, 0 4px 6px rgba(0, 0, 0, 0.3);
}

.grade2-adventure-wrapper .g2-cube-number.num-2 {
  color: #FFA114;
  text-shadow: 0 3px 0 #D97300, 0 4px 6px rgba(0, 0, 0, 0.3);
}

.grade2-adventure-wrapper .g2-cube-number.num-3 {
  color: #1CB0F6;
  text-shadow: 0 3px 0 #0C82C5, 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Số 4: Xanh lá cây tươi đậm 3D nổi bật trên nền cỏ */
.grade2-adventure-wrapper .g2-cube-number.num-4 {
  color: #16A34A;
  text-shadow: 0 3px 0 #15803D, 0 4px 6px rgba(0, 0, 0, 0.35);
}

.grade2-adventure-wrapper .g2-cube-number.num-5 {
  color: #CE82FF;
  text-shadow: 0 3px 0 #A855F7, 0 4px 6px rgba(0, 0, 0, 0.3);
}

.grade2-adventure-wrapper .g2-cube-number.num-6 {
  color: #FF6B4A;
  text-shadow: 0 3px 0 #D63E1B, 0 4px 6px rgba(0, 0, 0, 0.3);
}

.grade2-adventure-wrapper .g2-cube-number.num-7 {
  color: #00CD9C;
  text-shadow: 0 3px 0 #009975, 0 4px 6px rgba(0, 0, 0, 0.3);
}

.grade2-adventure-wrapper .g2-cube-number.num-8 {
  color: #FFB800;
  text-shadow: 0 3px 0 #CC9300, 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Vương miện Trùm Cuối */
.grade2-adventure-wrapper .g2-boss-crown-badge {
  position: absolute;
  top: -12px;
  right: -8px;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  animation: crown-float 2s ease-in-out infinite;
}

@keyframes crown-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(6deg); }
}

/* Ổ khóa mini ở góc khối gỗ đang khóa */
.grade2-adventure-wrapper .g2-lock-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: clamp(14px, 3.0cqw, 18px);
  height: clamp(14px, 3.0cqw, 18px);
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(9px, 2.0cqw, 12px);
  line-height: 1;
  z-index: 5;
  pointer-events: none;
}

/* Ngôi sao vàng khi đã hoàn thành */
.grade2-adventure-wrapper .g2-completed-star {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: #FEF08A;
  border: 1.5px solid #F59E0B;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* Cầu vồng thần kỳ & Rương Kho Báu 3D BEElio hiển thị rõ ràng cho bé nhận biết */
.grade2-adventure-wrapper .hotspot-chest {
  background: transparent !important;
  cursor: pointer;
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.grade2-adventure-wrapper .hotspot-chest:hover {
  filter: drop-shadow(0 6px 18px rgba(246, 185, 26, 0.85));
}

.beelio-bridge-chest-visual {
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 5px 10px rgba(36, 50, 74, 0.28));
  animation: beelioChestBob 2.8s infinite ease-in-out;
}

.beelio-bridge-chest-pill {
  margin-top: -4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid var(--beelio-gold, #F6B91A);
  color: #9A5B00;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(36, 50, 74, 0.16);
  pointer-events: none;
  white-space: nowrap;
}

@keyframes beelioChestBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.04); }
}

/* Lâu đài đỉnh đồi (Trùm số học) */
.grade2-adventure-wrapper .hotspot-castle {
  background: transparent !important;
  cursor: pointer;
  z-index: 20;
}
.grade2-adventure-wrapper .hotspot-castle:hover {
  filter: drop-shadow(0 0 20px rgba(234, 88, 12, 0.7));
}

/* 5. LINH VẬT CHÚ ONG VÀNG HOẠT HỌA CHUYỂN ĐỘNG THEO TỪNG MỐC BÀI HỌC */
.grade2-adventure-wrapper .beelio-mascot-entity {
  display: flex !important;
  z-index: 30 !important;
  pointer-events: none !important;
}

.grade2-adventure-wrapper .beelio-mascot-entity .mascot-bee-avatar-3d,
.grade2-adventure-wrapper .beelio-mascot-entity .mascot-speech-bubble {
  pointer-events: auto !important;
  cursor: pointer;
}

.grade2-adventure-wrapper .mockup-hotspot {
  z-index: 35 !important;
}

/* HEADER ĐIỀU HƯỚNG TÍCH HỢP TRÊN CÙNG LỚP 2 */
.g2-header-bar.g2-header-integrated {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 540px;
  height: 38px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(30, 58, 138, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
  z-index: 35;
  box-sizing: border-box;
  font-family: var(--beelio-game-font, 'Nunito', sans-serif);
}

.g2-header-ch-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.g2-header-ch-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.g2-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.g2-header-bar.g2-header-integrated .g2-btn-bikip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
  border: 1.5px solid #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.28);
  height: 28px;
  padding: 0 10px;
  color: #FFFFFF;
  font-family: var(--beelio-game-font, 'Nunito', sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.g2-header-bar.g2-header-integrated .g2-btn-bikip:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.g2-header-bar.g2-header-integrated .g2-btn-bikip:active {
  transform: translateY(1px);
}

/* Ẩn hoàn toàn card cũ */
.g2-chapter-nav-card {
  display: none !important;
}

.g2-chapter-hud-title {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.g2-chapter-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.g2-chapter-nav-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.g2-btn-bikip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
  border: 1.5px solid #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
  padding: 4px 10px;
  color: #FFFFFF;
  font-family: var(--beelio-game-font, 'Nunito', sans-serif);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}

.g2-btn-bikip:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.g2-btn-bikip:active {
  transform: translateY(1px);
}

.g2-btn-nav {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EFF6FF;
  border: 1.5px solid #3B82F6;
  color: #1D4ED8;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  outline: none;
}

.g2-btn-nav::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

.g2-btn-nav:hover:not(:disabled) {
  background: #3B82F6;
  color: #FFFFFF;
  transform: scale(1.1);
}

.g2-btn-nav:active:not(:disabled) {
  transform: scale(0.95);
}

.g2-btn-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #CBD5E1;
  color: #94A3B8;
  background: #F1F5F9;
}

.g2-chapter-tag {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  color: #FFFFFF;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  white-space: nowrap;
}

.g2-chapter-title {
  font-size: 14.5px;
  font-weight: 900;
  color: #1E3A8A;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g2-chapter-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin: 2px 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g2-chapter-progress-strip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.g2-prog-text {
  font-size: 10.5px;
  font-weight: 800;
  color: #2563EB;
  white-space: nowrap;
}

.g2-prog-bar {
  flex: 1;
  height: 6px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}

.g2-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #059669);
  border-radius: 999px;
  transition: width 0.35s ease;
}

@media (max-width: 520px) {
  .g2-chapter-nav-card {
    top: 8.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    padding: 3px 5px 3px 6px;
    height: 36px;
  }
  .g2-chapter-title {
    font-size: 13px;
  }
  .g2-chapter-subtitle {
    font-size: 10px;
  }
  .grade2-adventure-wrapper .beelio-mascot-entity {
    width: 80px;
  }
  .grade2-adventure-wrapper .beelio-mascot-entity .mascot-bee-avatar-3d {
    width: 62px;
    height: 62px;
  }
  .grade2-adventure-wrapper .beelio-mascot-entity .mascot-speech-bubble {
    max-width: 140px;
    font-size: 9.5px;
    padding: 3px 6px;
    margin-bottom: 2px;
  }
}

/* 6. NÚT QUAY LẠI, BÍ KÍP, CHUỖI VÀ KIM CƯƠNG TINH TẾ */
.grade2-adventure-wrapper #hotspot-btn_back {
  position: relative;
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 25;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}
.grade2-adventure-wrapper #hotspot-btn_back::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}
.grade2-adventure-wrapper #hotspot-btn_back::after {
  content: "←";
  font-size: 20px;
  font-weight: 900;
  color: #334155;
  line-height: 1;
}

.grade2-adventure-wrapper #hotspot-btn_bikip {
  background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%) !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 25;
}
.grade2-adventure-wrapper #hotspot-btn_bikip::after {
  content: "📖 BÍ KÍP";
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.grade2-adventure-wrapper #hotspot-streak {
  background: #FFF7ED !important;
  border: 2px solid #FED7AA !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 25;
}
.grade2-adventure-wrapper #hotspot-streak::after {
  content: "🔥 3 NGÀY";
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #C2410C;
}

.grade2-adventure-wrapper #hotspot-gems {
  background: #F0F9FF !important;
  border: 2px solid #BAE6FD !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 25;
}
.grade2-adventure-wrapper #hotspot-gems::after {
  content: "💎 120";
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #0369A1;
}

@media (max-width: 640px) {
  .grade2-adventure-wrapper {
    padding: 6px 8px 40px;
  }
  .grade2-adventure-wrapper .mockup-adventure-canvas {
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), 0 0 0 3px #FFFFFF, 0 0 0 5px #E2E8F0;
  }
}

/* ==========================================================================
   TINH CHỈNH MỸ THUẬT NGHỆ THUẬT TIẾNG VIỆT 2 & TIẾNG ANH 2 (ART-FIRST 3D)
   Tôn vinh tranh vẽ đầm sen cổ tích & đảo muông thú, không đè mảng xám
   ========================================================================== */

/* TIẾNG VIỆT 2: ĐẦM SEN & CHỒNG SÁCH CỔ TÍCH */
.grade2-adventure-wrapper #hotspot-node1_g2_vn {
  top: 76% !important;
  left: 38% !important;
  width: 16% !important;
  height: 9% !important;
}

.grade2-adventure-wrapper #hotspot-btn_start_quest_g2_vn {
  top: 69% !important;
  left: 46% !important;
  transform: translateX(-50%) !important;
}

.grade2-adventure-wrapper #hotspot-node2_g2_vn {
  top: 48% !important;
  left: 29% !important;
  width: 24% !important;
  height: 12% !important;
  cursor: pointer;
}

.grade2-adventure-wrapper #hotspot-chest_g2_vn {
  top: 35% !important;
  left: 30% !important;
  width: 24% !important;
  height: 11% !important;
  background: transparent !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
.grade2-adventure-wrapper #hotspot-chest_g2_vn:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.95));
}

.grade2-adventure-wrapper #hotspot-node3_g2_vn {
  top: 8% !important;
  left: 56% !important;
  width: 36% !important;
  height: 22% !important;
  background: transparent !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
.grade2-adventure-wrapper #hotspot-node3_g2_vn:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 0 24px rgba(234, 88, 12, 0.8));
}

/* TIẾNG ANH 2: ĐẢO HẢI TẶC & CÁC RƯƠNG BÁU 3D */
.grade2-adventure-wrapper #hotspot-node1_g2_en {
  top: 69% !important;
  left: 34% !important;
  width: 16% !important;
  height: 9% !important;
}

.grade2-adventure-wrapper #hotspot-btn_start_quest_g2_en {
  top: 61.5% !important;
  left: 42% !important;
  transform: translateX(-50%) !important;
}

.grade2-adventure-wrapper #hotspot-node2_g2_en {
  top: 56.5% !important;
  left: 44% !important;
  width: 15% !important;
  height: 9% !important;
}

.grade2-adventure-wrapper #hotspot-node3_g2_en {
  top: 47.5% !important;
  left: 24% !important;
  width: 15% !important;
  height: 9% !important;
}

.grade2-adventure-wrapper #hotspot-chest_g2_en {
  top: 47.5% !important;
  left: 68% !important;
  width: 15% !important;
  height: 9% !important;
  background: transparent !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
.grade2-adventure-wrapper #hotspot-chest_g2_en:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.95));
}

.grade2-adventure-wrapper #hotspot-node4_g2_en {
  top: 35% !important;
  left: 32% !important;
  width: 14% !important;
  height: 9% !important;
}

.grade2-adventure-wrapper #hotspot-node5_g2_en {
  top: 33.5% !important;
  left: 49.5% !important;
  width: 14% !important;
  height: 9% !important;
}

.grade2-adventure-wrapper #hotspot-node_boss_g2_en {
  top: 5% !important;
  left: 60% !important;
  width: 22% !important;
  height: 24% !important;
  background: transparent !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
.grade2-adventure-wrapper #hotspot-node_boss_g2_en:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 26px rgba(250, 204, 21, 0.95));
}

/* ==========================================================================
   ÁP DỤNG TRIẾT LÝ ART-FIRST CHO TOÀN BỘ LỚP 4 (KHỐI 4 TẤT CẢ CÁC MÔN)
   Loại bỏ hoàn toàn các khối xi măng xám xịt nhân tạo, thay bằng đĩa pha lê bán trong suốt
   ========================================================================== */

/* 1. NỐT ĐANG KHÓA LỚP 4: ĐĨA PHA LÊ MỜ BÁN TRONG SUỐT (FROSTED CRYSTAL DISC) */
.g4-node-anchor.g4-node-locked .g4-puck-body,
.g4-node-anchor .puck-stone-3d {
  background: rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 2.5px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), inset 0 2px 5px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.g4-node-anchor.g4-node-locked:hover .g4-puck-body {
  background: rgba(255, 255, 255, 0.55) !important;
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), inset 0 2px 6px rgba(255, 255, 255, 0.8) !important;
}

/* Biểu tượng số bài học và icon mờ tinh tế bên trong đĩa pha lê */
.g4-node-anchor.g4-node-locked .g4-puck-icon svg {
  opacity: 0.55;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.g4-node-anchor.g4-node-locked .g4-puck-badge {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #475569 !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

/* 2. HUY HIỆU Ổ KHÓA MINI 3D MẠ VÀNG Ở GÓC TRÊN NỐT KHÓA */
.g4-node-anchor.g4-node-locked .g4-puck-lock-badge {
  top: -4px !important;
  right: -4px !important;
  bottom: auto !important;
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(135deg, #FEF08A 0%, #F59E0B 100%) !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 8px rgba(180, 83, 9, 0.4) !important;
  color: #78350F !important;
  font-size: 11px !important;
  z-index: 5;
}

/* 3. NỐT ĐANG HỌC LỚP 4: NGỌC LỤC BẢO RỰC RỠ VỚI VẦNG HÀO QUANG HOÀNG KIM */
.g4-node-anchor.g4-node-active .g4-puck-body,
.g4-node-anchor .puck-green-3d {
  background: linear-gradient(135deg, #4ADE80 0%, #22C55E 50%, #16A34A 100%) !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 6px 0 #15803D, 0 12px 24px rgba(22, 163, 74, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}

.g4-node-anchor.g4-node-active .g4-puck-aura {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* 4. NỐT ĐÃ HOÀN THÀNH LỚP 4: ĐĨA HOÀNG KIM ÓNG ÁNH */
.g4-node-anchor.g4-node-completed .g4-puck-body,
.g4-node-anchor .puck-gold-3d {
  background: linear-gradient(135deg, #FEF08A 0%, #FACC15 50%, #EAB308 100%) !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 6px 0 #A16207, 0 12px 24px rgba(161, 98, 7, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
}

/* 5. NỐT BOSS LỚP 4: ĐÀI VƯƠNG MIỆN HOÀNG GIA */
.g4-node-anchor.g4-node-boss .g4-puck-body,
.g4-node-anchor .puck-boss-3d {
  background: linear-gradient(135deg, #FDE047 0%, #EAB308 50%, #CA8A04 100%) !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 8px 0 #854D0E, 0 16px 30px rgba(133, 77, 14, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.85) !important;
}

/* 6. RƯƠNG BÁU LỚP 4: HIỆU ỨNG TỎA SÁNG HOÀNG KIM */
.g4-chest-anchor {
  filter: drop-shadow(0 6px 14px rgba(245, 158, 11, 0.5));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
.g4-chest-anchor:hover {
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 10px 24px rgba(245, 158, 11, 0.9));
}

/* 7. QUEST CARD POPOVER & NÚT BẮT ĐẦU BEELIO 3D LỚP 4 */
.g4-active-quest-card {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.g4-btn-action-start {
  background: linear-gradient(180deg, #58CC02 0%, #46A302 100%) !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 0 #15803D, 0 6px 14px rgba(22, 163, 74, 0.35) !important;
  font-family: var(--beelio-game-font, 'Nunito', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.12s ease !important;
}

.g4-btn-action-start:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}

.g4-btn-action-start:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #15803D !important;
}

/* ==========================================================================
   TỐI ƯU HÓA PHÒNG HỌC & ĐÁP ÁN XÚC GIÁC (TACTILE LESSON CARDS) TOÀN APP
   ========================================================================== */
.beelio-choice-card {
  border: 2px solid #E2E8F0 !important;
  box-shadow: 0 4px 0 #CBD5E1 !important;
  border-radius: 18px !important;
  font-weight: 700 !important;
  transition: all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.beelio-choice-card:hover {
  border-color: #93C5FD !important;
  background: #F8FAFC !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #CBD5E1 !important;
}

.beelio-choice-card:active,
.beelio-choice-card.selected {
  border-color: #2563EB !important;
  background: #EFF6FF !important;
  box-shadow: 0 2px 0 #1D4ED8 !important;
  transform: translateY(2px) !important;
  color: #1E40AF !important;
}

.beelio-choice-card.selected .choice-key-badge {
  background: #2563EB !important;
  border-color: #1D4ED8 !important;
  color: #FFFFFF !important;
}

/* Thẻ câu hỏi nổi sắc sảo */
.beelio-prompt-card {
  border: 2px solid #E2E8F0 !important;
  box-shadow: 0 4px 0 #E2E8F0 !important;
  border-radius: 20px !important;
}

/* Nút quay lại tròn trịa 3D */
.g4-btn-back {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.12s ease !important;
}
.g4-btn-back:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.g4-btn-back:active {
  transform: scale(0.95) !important;
}

/* Nút Bí Kíp 3D hoàng gia */
.g4-btn-bikip {
  background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%) !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35) !important;
  font-family: var(--beelio-game-font, 'Nunito', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  transition: all 0.12s ease !important;
}
.g4-btn-bikip:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}
.g4-btn-bikip:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 4px rgba(29, 78, 216, 0.35) !important;
}