/**
 * game/farm.css - Giao diện "Vườn Treo Tri Thức"
 * Web học ngoại ngữ đa ngôn ngữ cho người Việt.
 * Phong cách: Game di động thương mại, tươi sáng, dễ thương, nút nổi khối 3D (border 3px + shadow 0 5px 0),
 * font "Baloo 2", bảng màu: trời #BDE7FF->#FFE3EC, gỗ #D9925B/#A8653A, lá #6CC56A/#3E9E46, nắng #FFD24A, chữ nâu #5B3A1E.
 * Hỗ trợ chế độ tối (data-theme="dark"), prefers-reduced-motion, ẩn header khi data-lang="farm".
 */

/* ==========================================================================
   1. Ẩn Header Website Khi Đang Chơi Game & Khung Toàn Màn Hình
   ========================================================================== */

html[data-lang="farm"] header:not(.vt-top-hud) {
  display: none !important;
}

html[data-lang="farm"],
html[data-lang="farm"] body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

html[data-lang="farm"] .app-body {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html[data-lang="farm"] main.app-main,
html[data-lang="farm"] body > .app-body > main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

html[data-lang="farm"] #tab-farm.active {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================================
   2. Khung Chứa Toàn Bộ Game (Game Wrapper & Palette)
   ========================================================================== */

:root {
  /* Bảng màu pastel kẹo ngọt & viền sticker nâu ấm */
  --vt-sky-top: #D8F3FF;
  --vt-sky-mid: #FFF4E0;
  --vt-sky-bottom: #FFE4F0;
  --vt-wood-main: #F5C99B;
  --vt-wood-dark: #E2B282;
  --vt-wood-deep: #7A4B2A;
  --vt-leaf-light: #8EDC7A;
  --vt-leaf-dark: #5DBB63;
  --vt-sun-yellow: #FFD966;
  --vt-pink-accent: #FF8FB1;
  --vt-butter-yellow: #FFD966;
  --vt-lavender: #C9B6FF;
  --vt-cream-bg: #FFF8EC;
  --vt-border-dark: #7A4B2A;
  --vt-shadow-3d: 0 4px 0 #7A4B2A;
  --vt-font-heading: 'Baloo 2', cursive, sans-serif;
  --vt-font-body: 'Baloo 2', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Chế độ Tối (Dark Mode) - Vườn Đêm Kỳ Ảo Dễ Thương */
[data-theme="dark"] {
  --vt-sky-top: #1A1A3A;
  --vt-sky-mid: #2C2250;
  --vt-sky-bottom: #4A356A;
  --vt-wood-main: #9E7455;
  --vt-wood-dark: #7D573B;
  --vt-wood-deep: #4A2B14;
  --vt-cream-bg: #2B2347;
  --vt-border-dark: #4A2B14;
  --vt-shadow-3d: 0 4px 0 #321B0B;
}

.vt-game-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  font-family: var(--vt-font-body);
  color: var(--vt-wood-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  background: linear-gradient(180deg, var(--vt-sky-top) 0%, var(--vt-sky-mid) 50%, var(--vt-sky-bottom) 100%);
  transition: background 0.5s ease;
}

[data-theme="dark"] .vt-game-wrapper {
  color: #F1F5F9;
}

/* ==========================================================================
   3. SÂN KHẤU CỐ ĐỊNH CHUẨN KIỂU GAME (Fixed Virtual Stage)
   Ngang: 1280x720, Dọc: 720x1280. Scale bằng CSS transform để vừa khít khung nhìn.
   ========================================================================== */

.vt-game-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
  pointer-events: auto;
}

.vt-game-stage.is-landscape {
  width: 1280px;
  height: 720px;
}

.vt-game-stage.is-portrait {
  width: 720px;
  height: 1280px;
}

/* Bầu Trời, Mặt Trời/Mặt Trăng, Mây Parallax, Sao Trời & Đom Đóm */
.vt-sky-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Mặt trời có quầng sáng tỏa tròn & mặt cười dễ thương Kawaii */
.vt-celestial-body {
  position: absolute;
  top: 14px;
  left: 320px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFBEB 0%, #FFD966 65%, #FFA534 100%);
  border: 3px solid #7A4B2A;
  box-shadow: 0 0 25px #FFD966, 0 0 50px rgba(255, 217, 102, 0.45);
  animation: sunCoronaPulse 4s ease-in-out infinite alternate;
  pointer-events: auto;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-portrait .vt-celestial-body {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
}

@keyframes sunCoronaPulse {
  0% { transform: scale(0.96); box-shadow: 0 0 25px #FFD966, 0 0 50px rgba(255, 217, 102, 0.4); }
  100% { transform: scale(1.04); box-shadow: 0 0 40px #FFD966, 0 0 75px rgba(255, 217, 102, 0.6); }
}

/* Mặt trời cười Kawaii ban ngày */
.vt-sun-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .vt-sun-content {
  display: none;
}

.vt-sun-eye {
  position: absolute;
  top: 29px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7A4B2A;
}
.vt-sun-eye::after {
  content: '';
  position: absolute;
  top: 1.2px;
  left: 1.2px;
  width: 2.6px;
  height: 2.6px;
  border-radius: 50%;
  background: #FFFFFF;
}
.vt-sun-eye.eye-l { left: 20px; }
.vt-sun-eye.eye-r { right: 20px; }

.vt-sun-blush {
  position: absolute;
  top: 38px;
  width: 12px;
  height: 7px;
  border-radius: 50%;
  background: #FF8FB1;
  opacity: 0.9;
}
.vt-sun-blush.blush-l { left: 12px; }
.vt-sun-blush.blush-r { right: 12px; }

.vt-sun-mouth {
  position: absolute;
  top: 37px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  border-bottom: 2.6px solid #7A4B2A;
  border-radius: 0 0 12px 12px;
}

/* Mặt trăng ngủ dễ thương ban đêm */
.vt-moon-content {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}
[data-theme="dark"] .vt-moon-content {
  display: block;
}
[data-theme="dark"] .vt-celestial-body {
  background: transparent;
  border: none;
  box-shadow: none;
}

.vt-moon-crescent {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  box-shadow: 18px 10px 0 0 #FFD966;
  filter: drop-shadow(0 0 16px #FFD966);
  transform: rotate(-15deg);
  position: relative;
}
.vt-moon-eye {
  position: absolute;
  top: 36px;
  right: 28px;
  width: 11px;
  height: 6px;
  border-bottom: 2.6px solid #7A4B2A;
  border-radius: 0 0 8px 8px;
}
.vt-moon-blush {
  position: absolute;
  top: 46px;
  right: 22px;
  width: 11px;
  height: 7px;
  border-radius: 50%;
  background: #FF8FB1;
  opacity: 0.9;
}

/* Các ngôi sao & trái tim nhỏ lấp lánh trôi trong không trung */
.vt-floating-charms {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.vt-charm {
  position: absolute;
  font-size: 17px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  animation: charmFloat 4.5s ease-in-out infinite alternate;
}
.vt-charm.c1 { animation-delay: 0s; }
.vt-charm.c2 { animation-delay: 1.2s; }
.vt-charm.c3 { animation-delay: 2.4s; }
.vt-charm.c4 { animation-delay: 0.7s; }
.vt-charm.c5 { animation-delay: 1.8s; }
.vt-charm.c6 { animation-delay: 3s; }

@keyframes charmFloat {
  0% { transform: translateY(0) scale(0.9) rotate(0deg); opacity: 0.65; }
  50% { transform: translateY(-14px) scale(1.15) rotate(10deg); opacity: 1; }
  100% { transform: translateY(-24px) scale(0.95) rotate(-6deg); opacity: 0.75; }
}

/* Sao trời ban đêm */
.vt-night-stars {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .vt-night-stars {
  display: block;
}
.vt-night-star {
  position: absolute;
  color: #FFFDEB;
  font-size: 14px;
  text-shadow: 0 0 8px #FDE047, 0 0 16px #F59E0B;
  animation: starTwinkle 3s infinite ease-in-out alternate;
}
.vt-night-star.s1 { animation-delay: 0s; font-size: 16px; }
.vt-night-star.s2 { animation-delay: 0.8s; font-size: 11px; }
.vt-night-star.s3 { animation-delay: 1.6s; font-size: 14px; }
.vt-night-star.s4 { animation-delay: 2.2s; font-size: 12px; }

@keyframes starTwinkle {
  0% { opacity: 0.3; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.15); }
}

/* Đom đóm phát sáng ban đêm */
.vt-fireflies-layer {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}
[data-theme="dark"] .vt-fireflies-layer {
  display: block;
}
.vt-firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A3E635;
  box-shadow: 0 0 8px #A3E635, 0 0 16px #FACC15;
  animation: fireflyFloat 4.5s infinite ease-in-out alternate;
}
.vt-firefly.f1 { animation-delay: 0s; }
.vt-firefly.f2 { animation-delay: 1s; }
.vt-firefly.f3 { animation-delay: 2s; }
.vt-firefly.f4 { animation-delay: 0.5s; }
.vt-firefly.f5 { animation-delay: 1.5s; }
.vt-firefly.f6 { animation-delay: 2.5s; }

@keyframes fireflyFloat {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0.4; }
  50% { transform: translate(12px, -15px) scale(1.2); opacity: 1; }
  100% { transform: translate(-10px, -28px) scale(0.9); opacity: 0.5; }
}

/* 3 lớp mây SVG dày bồng bềnh có bóng xanh nhạt phía dưới trôi parallax */
.vt-clouds-layer {
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: repeat-x;
  background-size: 800px 140px;
  pointer-events: none;
}

.vt-clouds-back {
  top: 8%;
  height: 140px;
  opacity: 0.75;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 800 140" xmlns="http://www.w3.org/2000/svg"><path d="M0,100 C40,65 90,65 130,88 C170,52 240,52 280,84 C330,45 410,45 460,80 C510,50 580,50 630,85 C680,55 750,55 800,100 L800,140 L0,140 Z" fill="%23D8F3FF" opacity="0.75"/><path d="M0,92 C40,58 90,58 130,80 C170,44 240,44 280,76 C330,38 410,38 460,72 C510,42 580,42 630,77 C680,47 750,47 800,92 L800,140 L0,140 Z" fill="%23FFFFFF"/></svg>');
  animation: cloudDriftSlow 130s linear infinite;
}

.vt-clouds-mid {
  top: 24%;
  height: 155px;
  opacity: 0.85;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 800 155" xmlns="http://www.w3.org/2000/svg"><path d="M0,110 C50,68 120,68 170,95 C220,55 310,55 370,92 C430,50 520,50 590,90 C650,56 730,56 800,110 L800,155 L0,155 Z" fill="%23FFE4F0" opacity="0.6"/><path d="M0,100 C50,58 120,58 170,85 C220,46 310,46 370,82 C430,40 520,40 590,80 C650,46 730,46 800,100 L800,155 L0,155 Z" fill="%23FFFFFF"/><g transform="translate(370,68)"><path d="M-12,0 Q-8,-5 -4,0" stroke="%237A4B2A" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M4,0 Q8,-5 12,0" stroke="%237A4B2A" stroke-width="2" fill="none" stroke-linecap="round"/><ellipse cx="-16" cy="3" rx="3.5" ry="2" fill="%23FF8FB1" opacity="0.85"/><ellipse cx="16" cy="3" rx="3.5" ry="2" fill="%23FF8FB1" opacity="0.85"/><path d="M-3,3 Q0,6 3,3" stroke="%237A4B2A" stroke-width="1.4" fill="none" stroke-linecap="round"/></g></svg>');
  animation: cloudDriftMid 80s linear infinite reverse;
}

.vt-clouds-front {
  bottom: 0;
  height: 170px;
  opacity: 0.98;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 800 170" xmlns="http://www.w3.org/2000/svg"><path d="M0,115 C60,65 140,65 200,98 C260,55 360,55 430,94 C500,50 600,50 670,92 C720,62 770,62 800,115 L800,170 L0,170 Z" fill="%23D8F3FF" opacity="0.85"/><path d="M0,105 C60,55 140,55 200,88 C260,45 360,45 430,84 C500,40 600,40 670,82 C720,52 770,52 800,105 L800,170 L0,170 Z" fill="%23FFFFFF"/><g transform="translate(600,74)"><path d="M-12,0 Q-8,-5 -4,0" stroke="%237A4B2A" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M4,0 Q8,-5 12,0" stroke="%237A4B2A" stroke-width="2" fill="none" stroke-linecap="round"/><ellipse cx="-16" cy="3" rx="3.5" ry="2" fill="%23FF8FB1" opacity="0.85"/><ellipse cx="16" cy="3" rx="3.5" ry="2" fill="%23FF8FB1" opacity="0.85"/></g></svg>');
  animation: cloudDriftSlow 52s linear infinite;
}

@keyframes cloudDriftSlow {
  from { transform: translateX(0); }
  to { transform: translateX(-800px); }
}

@keyframes cloudDriftMid {
  from { transform: translateX(-400px); }
  to { transform: translateX(400px); }
}

/* Đàn chim bay lượn */
.vt-birds-flock {
  position: absolute;
  top: 75px;
  left: 8%;
  pointer-events: none;
}
.vt-bird {
  position: absolute;
  width: 15px;
  height: 9px;
  border-top: 2.4px solid rgba(74, 43, 17, 0.45);
  border-left: 2.4px solid rgba(74, 43, 17, 0.45);
  transform: rotate(45deg);
  animation: birdFly 22s linear infinite;
}
.vt-bird.b1 { top: 0; left: 0; }
.vt-bird.b2 { top: 12px; left: 24px; animation-delay: 1.8s; }
.vt-bird.b3 { top: 22px; left: 8px; animation-delay: 3.6s; }

@keyframes birdFly {
  0% { transform: translate(-60px, 0) rotate(45deg); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translate(650px, -70px) rotate(45deg); opacity: 0; }
}

/* Khinh khí cầu bảng đơn hàng trôi lững lờ */
.vt-hot-air-balloon {
  position: absolute;
  top: 90px;
  left: 45px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: balloonFloat 4.8s ease-in-out infinite alternate;
}
.is-portrait .vt-hot-air-balloon {
  top: 130px;
  left: 30px;
}
.vt-hot-air-balloon:hover {
  transform: scale(1.1) translateY(-6px);
}
.vt-balloon-badge {
  margin-top: -6px;
  background: #DC2626;
  color: #FFFFFF;
  font-family: var(--vt-font-heading);
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

@keyframes balloonFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-14px); }
}

/* ==========================================================================
   4. HUD TRÊN (Các Viên Nổi Khối 3D: Nền kem, Viền nâu 3px, Bóng đặc)
   ========================================================================== */

.vt-top-hud {
  position: absolute;
  top: 20px;
  left: 28px;
  right: 28px;
  height: 56px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.is-portrait .vt-top-hud {
  top: 20px;
  left: 18px;
  right: 18px;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  pointer-events: none;
}

.vt-hud-left, .vt-hud-right {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.vt-hud-left > *, .vt-hud-right > * {
  pointer-events: auto;
}
  gap: 8px;
}
.is-portrait .vt-hud-left {
  justify-content: space-between;
}
.is-portrait .vt-hud-right {
  justify-content: space-between;
}

.vt-btn-back {
  background: #FFFDF8;
  color: #5B3A1E;
  border: 3px solid #4A2B11;
  border-radius: 9999px;
  box-shadow: 0 4px 0 #381E0D;
  height: 48px;
  padding: 0 16px;
  font-family: var(--vt-font-heading);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  white-space: nowrap;
}
.vt-btn-back:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #381E0D;
}
[data-theme="dark"] .vt-btn-back {
  background: #1E293B;
  color: #F8FAFC;
  border-color: #64748B;
  box-shadow: 0 4px 0 #0F172A;
}

.vt-profile-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFDF8;
  border: 3px solid #4A2B11;
  border-radius: 9999px;
  box-shadow: 0 4px 0 #381E0D;
  height: 48px;
  padding: 0 14px 0 6px;
  white-space: nowrap;
}
[data-theme="dark"] .vt-profile-pill {
  background: #1E293B;
  color: #F8FAFC;
  border-color: #64748B;
  box-shadow: 0 4px 0 #0F172A;
}

.vt-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vt-level-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vt-level-name {
  font-family: var(--vt-font-heading);
  font-size: 12px;
  font-weight: 800;
  color: #B45309;
  line-height: 1;
}
[data-theme="dark"] .vt-level-name {
  color: #FDE047;
}

.vt-xp-track {
  width: 52px;
  height: 6px;
  background: #E2E8F0;
  border-radius: 9999px;
  overflow: hidden;
}

.vt-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #10B981);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.vt-res-chip {
  background: var(--vt-cream-bg);
  border: 3px solid var(--vt-border-dark);
  border-radius: 9999px;
  box-shadow: var(--vt-shadow-3d);
  height: 48px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vt-font-heading);
  font-size: 15px;
  font-weight: 800;
  color: #7A4B2A;
  white-space: nowrap;
  cursor: default;
}

[data-theme="dark"] .vt-res-chip {
  background: #2B2347;
  color: #FFFDF8;
  border-color: #4A2B14;
  box-shadow: 0 4px 0 #1A1024;
}

.vt-chip-coins { color: #B45309; }
.vt-chip-water { color: #0284C7; }
.vt-chip-fertilizer { color: #047857; }
[data-theme="dark"] .vt-chip-coins { color: #FBBF24; }
[data-theme="dark"] .vt-chip-water { color: #38BDF8; }
[data-theme="dark"] .vt-chip-fertilizer { color: #34D399; }
.vt-chip-materials {
  cursor: pointer;
  transition: transform 0.1s ease;
}
.vt-chip-materials:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #7A4B2A;
}

/* ==========================================================================
   5. VÙNG TÒA VƯỜN TREO TRUNG TÂM SÂN KHẤU (XẾP CHỒNG TẤT CẢ CÁC TẦNG)
   ========================================================================== */

/* Trục cây đại thụ cổ thụ vươn từ biển mây */
.vt-world-tree-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  display: flex;
  justify-content: center;
}

.vt-world-tree-svg {
  display: block;
  width: 100%;
  pointer-events: none;
}

.vt-balcony-stage-wrap {
  position: absolute;
  left: 50%;
  top: 50px;
  bottom: 114px;
  transform: translateX(-50%);
  width: 960px;
  max-width: 960px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 10px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #D9925B rgba(255, 255, 255, 0.35);
}

.is-portrait .vt-balcony-stage-wrap {
  width: 640px;
  max-width: 640px;
  top: 215px;
  bottom: 125px;
  padding: 4px 6px;
}

/* Nút mở tầng trên đỉnh tháp */
.vt-tower-unlock-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
  z-index: 10;
}

.vt-sign-unlock {
  background: #FFFDF8;
  border: 2px solid #7A4B2A;
  border-radius: 9999px;
  padding: 4px 16px;
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #7A4B2A;
  box-shadow: 0 3px 0 #7A4B2A;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.vt-sign-unlock:hover {
  transform: translateY(-2px);
}
.vt-sign-unlock:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #7A4B2A;
}

.vt-sprout-unlock-btn {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 50%, #FEF9C3 100%) !important;
  border: 2px solid #059669 !important;
  color: #065F46 !important;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.6), 0 3px 0 #047857 !important;
  animation: sproutGlowPulse 2.4s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vt-sprout-unlock-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.85), 0 4px 0 #047857 !important;
}
.vt-sprout-unlock-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #047857 !important;
}
@keyframes sproutGlowPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.4), 0 3px 0 #047857;
  }
  50% {
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.8), 0 3px 0 #047857;
  }
}
.vt-sprout-sparkle {
  animation: sproutSparkleRotate 3s linear infinite;
  display: inline-block;
}
@keyframes sproutSparkleRotate {
  0% { transform: scale(0.9) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
  100% { transform: scale(0.9) rotate(360deg); }
}

/* Khoảng đệm giữa 2 tầng liên tiếp (cây đại thụ ở giữa là trục chính) */
.vt-tier-pillars {
  display: flex;
  justify-content: space-between;
  width: 820px;
  height: 8px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  pointer-events: none;
  flex-shrink: 0;
  visibility: hidden;
}
.is-portrait .vt-tier-pillars {
  width: 580px;
  height: 8px;
}

/* Khối từng tầng cành cây */
.vt-balcony-tier {
  position: relative;
  width: 100%;
  height: 146px;
  flex-shrink: 0;
  border-radius: 16px;
  border: none;
  box-shadow: none;
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 5;
}

.is-portrait .vt-balcony-tier {
  height: 236px;
  min-height: 236px;
  max-height: 236px;
  padding: 0;
}

/* Tầng trong suốt để cành cây và thân cây phía sau hiện trọn vẹn */
.vt-balcony-tier.theme-chinese,
.vt-balcony-tier.theme-japanese,
.vt-balcony-tier.theme-english,
.vt-balcony-tier.theme-russian,
[data-theme="dark"] .vt-balcony-tier {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Phần bên trong mỗi ban công */
.vt-balcony-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 118px;
  position: relative;
  z-index: 10;
  padding: 2px 10px 0 10px;
  box-sizing: border-box;
}

.is-portrait .vt-balcony-inner {
  height: 100%;
  position: relative;
  display: block;
  padding: 0;
}

/* Nhãn "Tầng N" nhỏ gọn ở mép trái: Tầng N + biểu tượng phong cách */
.vt-tier-badge-compact {
  width: 76px;
  height: 52px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFDF8;
  border: 2.5px solid #7A4B2A;
  border-radius: 14px;
  box-shadow: 0 3px 0 #7A4B2A;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 4px;
  box-sizing: border-box;
  transition: transform 0.1s ease;
  z-index: 15;
}
.vt-tier-badge-compact:hover {
  transform: scale(1.05);
}
.vt-tier-badge-compact:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #7A4B2A;
}

/* Biển gỗ đóng đinh trên cành sát thân cây */
.vt-tier-badge-compact.vt-branch-sign {
  position: relative;
  background: linear-gradient(180deg, #FFFDF8 0%, #F6E7CF 100%);
  border: 2px solid #6F431B;
  border-radius: 8px;
  box-shadow: 0 3px 0 #4A2B11, 0 3px 6px rgba(0, 0, 0, 0.18);
}
.vt-tier-badge-compact.vt-branch-sign:hover {
  transform: scale(1.06) rotate(-1deg);
}
.vt-tier-badge-compact.vt-branch-sign:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 1px 0 #4A2B11;
}

.vt-branch-nail {
  position: absolute;
  top: 3px;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle at 35% 35%, #94A3B8 0%, #334155 100%);
  border-radius: 50%;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.5);
}
.vt-branch-nail.nail-l { left: 4px; }
.vt-branch-nail.nail-r { right: 4px; }

.vt-tier-badge-compact .vt-tier-num {
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 800;
  color: #B45309;
  line-height: 1.15;
}
.vt-tier-badge-compact .vt-tier-theme-icon {
  font-size: 16px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vt-tier-badge-compact .vt-tier-theme-icon svg {
  display: block;
}
.vt-cust-avatar svg {
  display: block;
  border-radius: 50%;
}

[data-theme="dark"] .vt-tier-badge-compact {
  background: #1E293B;
  border-color: #64748B;
  box-shadow: 0 3px 0 #0F172A;
}
[data-theme="dark"] .vt-tier-badge-compact .vt-tier-num { color: #FDE047; }
[data-theme="dark"] .vt-tier-badge-compact .vt-tier-theme-name { color: #E2E8F0; }

.is-portrait .vt-tier-badge-compact {
  position: absolute;
  left: 12px;
  top: 10px;
  width: auto;
  height: 32px;
  min-height: 32px;
  padding: 2px 10px;
  border-radius: 9999px;
  flex-direction: row;
  gap: 6px;
  z-index: 15;
}
.is-portrait .vt-tier-badge-compact .vt-tier-num {
  font-size: 13px;
}
.is-portrait .vt-tier-badge-compact .vt-tier-theme-icon {
  font-size: 15px;
}

/* Hàng 6 ô chậu giữa tầng: to, rõ, cách đều */
.vt-tier-pots-row {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  height: 100%;
  margin: 0 8px;
  position: relative;
  z-index: 10;
}

/* Chậu số 3–4 mỗi tầng chừa khoảng cách ≥ 16px stage với thân cây */
.vt-tier-pots-row .vt-pot-slot:nth-child(3) {
  margin-right: 156px;
}

.is-portrait .vt-tier-pots-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  height: 124px;
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 8px;
  box-sizing: border-box;
  z-index: 10;
}

.is-portrait .vt-tier-pots-row .vt-pot-slot:nth-child(3) {
  margin-right: 110px;
}

.vt-pot-slot {
  position: relative;
  width: 98px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  flex-shrink: 0;
  pointer-events: auto;
  z-index: 10;
}

.is-portrait .vt-pot-slot {
  width: 96px;
  height: 120px;
  flex-shrink: 0;
}

.vt-pot-slot:hover {
  transform: translateY(-4px);
}

.vt-pot-slot.is-empty {
  height: 100px;
}

/* Ô Tiên Vườn ở mép phải ban công (rộng hơn để chứa tiên to hơn ~20%) */
.vt-fairy-spot {
  width: 104px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.is-portrait .vt-fairy-spot {
  position: absolute;
  right: 12px;
  top: 8px;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 15;
}

.vt-fairy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.is-portrait .vt-fairy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
}

.vt-fairy-svg-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  flex-shrink: 0;
}

.is-portrait .vt-fairy-svg-wrap {
  width: 56px;
  height: 56px;
}
.is-portrait .vt-fairy-svg-wrap svg {
  width: 56px;
  height: 56px;
}

.vt-fairy-flying {
  animation: fairyFlyHover 2.4s ease-in-out infinite;
}

@keyframes fairyFlyHover {
  0% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
  100% { transform: translateY(0) rotate(-1deg); }
}

@keyframes fairySparkleFloat {
  0%, 100% { transform: scale(0.85); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 1; }
}
.farm-fairy-svg.is-unhired-pastel .vt-sparkle {
  animation: fairySparkleFloat 2.2s ease-in-out infinite;
  transform-origin: center;
}
.farm-fairy-svg.is-unhired-pastel .sp-2 {
  animation-delay: 0.55s;
}
.farm-fairy-svg.is-unhired-pastel .sp-3 {
  animation-delay: 1.1s;
}
.farm-fairy-svg.is-unhired-pastel .sp-4 {
  animation-delay: 1.65s;
}

.vt-btn-hire-fairy {
  background: #10B981;
  color: #FFFFFF;
  border: 2px solid #065F46;
  border-radius: 9999px;
  padding: 3px 8px;
  font-family: var(--vt-font-heading);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 0 #065F46;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  margin-top: 10px; /* Cách tiên ≥ 8px */
  white-space: nowrap;
  transition: transform 0.1s ease;
}

.is-portrait .vt-btn-hire-fairy {
  margin-top: 8px; /* Cách tiên ≥ 8px */
  padding: 2px 7px;
  font-size: 9.5px;
  box-shadow: 0 1.5px 0 #065F46;
}

.vt-btn-hire-fairy:hover {
  transform: scale(1.05);
}
.vt-btn-hire-fairy:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #065F46;
}

.vt-hire-txt {
  font-size: 10.5px;
  font-weight: 800;
  color: #FFFFFF;
}
.vt-hire-cost { font-size: 11px; font-weight: 800; color: #FEF08A; }

.vt-fairy-speech-bubble {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFDF8;
  border: 2px solid #7A4B2A;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: #15803D;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 30;
  animation: fairyPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vt-fairy-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: #7A4B2A transparent;
  display: block;
  width: 0;
}

@keyframes fairyPop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.vt-fairy-nameplate {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid #7A4B2A;
  border-radius: 9999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #7A4B2A;
  margin-top: 3px;
  white-space: nowrap;
}

.is-portrait .vt-fairy-nameplate {
  margin-top: 2px;
  padding: 1px 5px;
  font-size: 9px;
}
.vt-fairy-level-badge {
  color: #D97706;
  font-weight: 800;
}

/* Sàn gỗ & Lan can: nằm dưới/sau chậu và không cản trở click */
.vt-balcony-deck-wrap {
  display: none;
}
.vt-balcony-deck-wrap .tier-deck-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Mây đỡ mềm mại dưới đáy tòa vườn */
.vt-tower-cloud-base {
  width: 860px;
  height: 12px;
  margin: -2px auto 2px auto;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.92) 0%, rgba(216,243,255,0.7) 65%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  flex-shrink: 0;
}
.is-portrait .vt-tower-cloud-base {
  width: 620px;
}

/* Popover menu vật liệu & phân bón trên HUD */
.vt-hud-popover {
  position: absolute;
  top: 56px;
  right: 28px;
  background: #FFFDF8;
  border: 2.5px solid #7A4B2A;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="dark"] .vt-hud-popover {
  background: #1E293B;
  border-color: #64748B;
}

/* Popover menu Thêm ⋯ ở thanh dưới */
.vt-bottom-more-menu {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(120px);
  background: #FFFDF8;
  border: 2.5px solid #7A4B2A;
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
[data-theme="dark"] .vt-bottom-more-menu {
  background: #1E293B;
  border-color: #64748B;
}

.vt-more-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #4A2B11;
  transition: transform 0.1s ease, background 0.1s ease;
}
.vt-more-menu-item:hover {
  background: #FEF3C7;
  transform: translateX(3px);
}
[data-theme="dark"] .vt-more-menu-item {
  background: #334155;
  border-color: #475569;
  color: #F8FAFC;
}

/* Hướng dẫn tân thủ thanh trên gọn gàng */
.vt-tut-compact-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 253, 248, 0.96);
  border: 2px solid #F59E0B;
  border-radius: 9999px;
  padding: 6px 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 150;
  pointer-events: auto;
}

.vt-pot-slot:hover {
  transform: translateY(-5px);
}

.vt-pot-slot.is-empty {
  height: 110px;
}

.farm-empty-slot-svg {
  width: 105px !important;
  height: auto !important;
  display: block;
}

/* Hiệu ứng nhịp phát sáng dấu + của ô trống */
.vt-empty-plus-pulse {
  animation: emptyPulseSoft 2s ease-in-out infinite alternate;
  transform-origin: 55px 48px;
}

@keyframes emptyPulseSoft {
  0% { transform: translate(55px, 48px) scale(0.92); opacity: 0.85; }
  100% { transform: translate(55px, 48px) scale(1.1); opacity: 1; }
}

.vt-pot-stack {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vt-plant-layer {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: -32px;
}

.vt-pot-layer {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}

.farm-pot-svg {
  width: 105px !important;
  height: auto !important;
  display: block;
}

.farm-plant-svg {
  width: 105px !important;
  height: auto !important;
  display: block;
}

.stage-4.is-ripe {
  animation: plantBounce 2.2s ease-in-out infinite alternate;
  transform-origin: 55px 108px;
}

@keyframes plantBounce {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1.02) rotate(-2deg); }
}

/* Nhãn tên tiếng Trung chỉ hiện khi chạm / hover */
.vt-crop-hanzi-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #FFFDF8;
  border: 2px solid #4A2B11;
  border-radius: 12px;
  padding: 2px 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
  white-space: nowrap;
  font-family: var(--vt-font-heading);
  font-size: 11.5px;
  font-weight: 800;
  color: #B45309;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 25;
}
.vt-pot-slot:hover .vt-crop-hanzi-tag,
.vt-pot-slot:active .vt-crop-hanzi-tag {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.vt-status-pill {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  white-space: nowrap;
  font-family: var(--vt-font-heading);
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 2.5px solid #7A4B2A;
  box-shadow: 0 3px 0 #7A4B2A;
}

.vt-status-pill.is-ripe {
  background: #FFD966;
  color: #7A4B2A;
  animation: bouncePill 1.2s infinite ease-in-out;
}

.vt-status-pill.is-thirsty {
  background: #D8F3FF;
  color: #0284C7;
}

.vt-status-pill.is-pest {
  background: #FFE4F0;
  color: #9D174D;
  animation: pulsePill 1s infinite ease-in-out;
}

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

@keyframes pulsePill {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.08); }
}

.vt-growth-mini-bar {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 9999px;
  overflow: hidden;
  z-index: 10;
}

.vt-mini-bar-fill {
  height: 100%;
  background: #22C55E;
  border-radius: 9999px;
}

/* Sàn Gỗ Tầng & Mây Cuộn Dày Nâng Đỡ */
.vt-tier-deck-container {
  width: 100%;
  position: relative;
  z-index: 1;
}

.tier-deck-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Linh Thú Ngồi Ở Góc Ban Công */
.vt-pet-on-deck {
  position: absolute;
  bottom: 35px;
  right: 18px;
  z-index: 15;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: petIdleBreath 3s ease-in-out infinite alternate;
}
.vt-pet-on-deck:hover {
  transform: scale(1.1);
}
.vt-pet-speech-bubble {
  position: absolute;
  bottom: 56px;
  right: -8px;
  white-space: nowrap;
  background: #FFFDF8;
  color: var(--vt-wood-deep);
  font-family: var(--vt-font-heading);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  border: 2px solid #4A2B11;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  pointer-events: none;
}

@keyframes petIdleBreath {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* Biển Gỗ Nhỏ Treo Trên Ban Công: Đổi phong cách & Mở tầng */
.vt-balcony-hanging-signs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  z-index: 25;
}

.vt-hanging-wood-sign {
  background: linear-gradient(180deg, #D9925B, #B86B35);
  border: 2.5px solid #4A2B11;
  border-radius: 8px;
  box-shadow: 0 4px 0 #381E0D, 0 8px 12px rgba(0,0,0,0.15);
  padding: 6px 14px;
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 800;
  color: #FFFDF8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.12s ease;
}
.vt-hanging-wood-sign:hover {
  transform: translateY(-2px);
}
.vt-hanging-wood-sign:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #381E0D;
}

/* ==========================================================================
   6. THANG MÁY CỐ ĐỊNH CẠNH PHẢI (Elevator Panel)
   ========================================================================== */

.vt-elevator-panel {
  position: absolute;
  right: 18px;
  top: 240px;
  z-index: 45;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 253, 248, 0.94);
  border: 2.5px solid #7A4B2A;
  border-radius: 20px;
  padding: 6px 4px;
  box-shadow: 0 3px 0 #7A4B2A;
}

.is-portrait .vt-elevator-panel {
  right: 8px;
  top: 240px;
  gap: 3px;
  padding: 5px 3px;
  border-radius: 16px;
}

[data-theme="dark"] .vt-elevator-panel {
  background: #1E293B;
  border-color: #64748B;
  box-shadow: 0 4px 0 #0F172A;
}

.vt-elevator-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FDE68A, #F59E0B);
  border: 2px solid #7A4B2A;
  box-shadow: 0 2.5px 0 #7A4B2A;
  color: #7A4B2A;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.is-portrait .vt-elevator-btn {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.vt-elevator-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #381E0D;
}

.vt-elevator-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.vt-elevator-floor-badge {
  font-family: var(--vt-font-heading);
  font-size: 10.5px;
  font-weight: 800;
  color: #7A4B2A;
  padding: 2px 3px;
  text-align: center;
  white-space: nowrap;
}

.is-portrait .vt-elevator-floor-badge {
  font-size: 10px;
  padding: 1px;
}
[data-theme="dark"] .vt-elevator-floor-badge {
  color: #FDE047;
}

/* ==========================================================================
   7. THANH CÔNG CỤ DƯỚI (Các Nút Tròn 64px Nổi Khối, Biểu Tượng SVG Minh Họa)
   ========================================================================== */

.vt-bottom-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 50;
  padding: 8px 16px;
  background: rgba(255, 253, 248, 0.95);
  border: 3.5px solid #4A2B11;
  border-radius: 9999px;
  box-shadow: 0 6px 0 #381E0D, 0 12px 24px rgba(0,0,0,0.15);
}

.is-portrait .vt-bottom-bar {
  bottom: 28px;
  gap: 12px;
  padding: 6px 12px;
}

[data-theme="dark"] .vt-bottom-bar {
  background: rgba(30, 41, 59, 0.95);
  border-color: #64748B;
  box-shadow: 0 6px 0 #0F172A;
}

.vt-bar-btn {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  border-radius: 50%;
  border: 3.5px solid #4A2B11;
  box-shadow: 0 5px 0 #381E0D;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EDE4 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, border-color 0.15s ease;
}

.vt-bar-btn:hover {
  transform: translateY(-3px);
}

.vt-bar-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #381E0D;
}

/* Nút đang chọn nhô lên và có viền vàng */
.vt-bar-btn.is-active {
  transform: translateY(-8px);
  border-color: #FBBF24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.75), 0 6px 0 #854D0E;
  background: linear-gradient(180deg, #FFFDF0 0%, #FEF08A 100%);
}

[data-theme="dark"] .vt-bar-btn {
  background: linear-gradient(180deg, #334155 0%, #1E293B 100%);
  border-color: #64748B;
  box-shadow: 0 5px 0 #0F172A;
}

[data-theme="dark"] .vt-bar-btn.is-active {
  border-color: #FBBF24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.8), 0 6px 0 #0F172A;
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
}

.vt-btn-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vt-btn-text {
  font-family: var(--vt-font-heading);
  font-size: 8.5px;
  font-weight: 800;
  color: var(--vt-wood-deep);
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
}

[data-theme="dark"] .vt-btn-text {
  color: #F8FAFC;
}

/* ==========================================================================
   8. HƯỚNG DẪN TÂN THỦ (Bàn Tay Chỉ + Vòng Sáng Đặt Đúng Nút Được Nhắc)
   ========================================================================== */

.vt-tutorial-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}

/* Vòng sáng đặt đúng vào vị trí nút */
.vt-tut-target-ring {
  position: absolute;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3.5px solid #FBBF24;
  box-shadow: 0 0 20px #FDE047, inset 0 0 14px rgba(253, 224, 71, 0.6);
  animation: tutRingPulse 1.4s infinite ease-out;
  pointer-events: none;
  z-index: 205;
}

@keyframes tutRingPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.9; }
  70% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

/* Bàn tay chỉ thẳng vào vị trí nút */
.vt-tut-pointer-hand {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 38px;
  pointer-events: none;
  z-index: 210;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  animation: tutHandBounce 1s infinite alternate ease-in-out;
}

@keyframes tutHandBounce {
  0% { transform: translate(-50%, -50%) translateY(0); }
  100% { transform: translate(-50%, -50%) translateY(-10px); }
}

/* Hộp thoại hướng dẫn đặt ở vùng trống giữa màn hình dưới HUD, không che chậu */
.vt-tut-dialog-box {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: #FFFDF8;
  border: 3px solid #4A2B11;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 5px 0 #381E0D, 0 10px 20px rgba(0,0,0,0.2);
  pointer-events: auto;
  z-index: 220;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.is-portrait .vt-tut-dialog-box {
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: 330px;
}

[data-theme="dark"] .vt-tut-dialog-box {
  background: #1E293B;
  border-color: #64748B;
  box-shadow: 0 6px 0 #0F172A;
  color: #F8FAFC;
}

.vt-tut-dialog-text {
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #5B3A1E;
  line-height: 1.35;
}
[data-theme="dark"] .vt-tut-dialog-text {
  color: #F8FAFC;
}

.vt-tut-skip-btn {
  align-self: flex-end;
  background: #F1F5F9;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
}

.vt-tut-highlight {
  z-index: 202 !important;
  position: relative;
  pointer-events: auto !important;
}


/* ==========================================================================
   9. HỘP THOẠI MODAL (Dialogs)
   ========================================================================== */

.vt-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  animation: fadeIn 0.2s ease;
}

.vt-modal-dialog {
  background: #FFFBF5;
  border: 3px solid var(--vt-border-dark);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .vt-modal-dialog {
  background: #1E293B;
  color: #F8FAFC;
  border-color: #0F172A;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.vt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #FED7AA;
  border-bottom: 2px solid var(--vt-border-dark);
}

[data-theme="dark"] .vt-modal-header {
  background: #334155;
  border-bottom-color: #0F172A;
}

.vt-modal-title {
  font-family: var(--vt-font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--vt-wood-deep);
  margin: 0;
}

[data-theme="dark"] .vt-modal-title {
  color: #F8FAFC;
}

.vt-modal-close-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--vt-wood-deep);
  cursor: pointer;
}

.vt-modal-body {
  padding: 14px;
  overflow-y: auto;
  font-size: 13px;
}

.vt-modal-subtext {
  margin: 0 0 10px 0;
  font-size: 12px;
  opacity: 0.85;
}

.vt-btn-primary {
  background: linear-gradient(180deg, #F59E0B, #D97706);
  color: #FFFFFF;
  border: 2px solid var(--vt-border-dark);
  box-shadow: 0 2.5px 0 var(--vt-border-dark);
  border-radius: 12px;
  padding: 7px 15px;
  font-family: var(--vt-font-heading);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.vt-btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 0.5px 0 var(--vt-border-dark);
}

.vt-btn-primary.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

.vt-btn-secondary {
  background: linear-gradient(180deg, #10B981, #059669);
  color: #FFFFFF;
  border: 2px solid #064E3B;
  box-shadow: 0 2.5px 0 #064E3B;
  border-radius: 12px;
  padding: 7px 15px;
  font-family: var(--vt-font-heading);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.vt-btn-outline {
  background: transparent;
  border: 2px solid var(--vt-border-dark);
  border-radius: 12px;
  padding: 6px 12px;
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.vt-seed-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.vt-seed-card {
  background: #FFFFFF;
  border: 1.8px solid var(--vt-border-dark);
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

[data-theme="dark"] .vt-seed-card {
  background: #0F172A;
}

.vt-seed-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  background: #FEF3C7;
  border-radius: 10px;
  padding: 2px;
  border: 1.5px solid #F59E0B;
}

.vt-seed-hanzi {
  font-size: 17px;
  font-weight: 800;
  color: #B45309;
}

.vt-seed-pinyin {
  font-size: 10px;
  font-weight: 600;
  color: #92400E;
}

.vt-seed-info {
  flex: 1;
}

.vt-seed-name {
  font-family: var(--vt-font-heading);
  font-size: 13.5px;
  font-weight: 800;
}

.vt-seed-meta {
  font-size: 11px;
  opacity: 0.8;
}

.vt-seed-price {
  font-size: 11.5px;
  font-weight: 700;
  color: #D97706;
}

.vt-btn-sow {
  background: #22C55E;
  color: #FFFFFF;
  border: 1.8px solid #14532D;
  box-shadow: 0 2px 0 #14532D;
  border-radius: 10px;
  padding: 5px 10px;
  font-family: var(--vt-font-heading);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.vt-btn-sow:active {
  transform: translateY(1.5px);
  box-shadow: none;
}

.vt-badge-locked {
  background: #E2E8F0;
  color: #64748B;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
}

.vt-shop-pots-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vt-shop-pot-card {
  background: #FFFFFF;
  border: 1.8px solid var(--vt-border-dark);
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-theme="dark"] .vt-shop-pot-card {
  background: #0F172A;
}

.vt-pot-card-preview {
  min-width: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vt-pot-card-info {
  flex: 1;
}

.vt-pot-card-title {
  font-family: var(--vt-font-heading);
  font-size: 14px;
  font-weight: 800;
}

.vt-pot-card-desc {
  font-size: 11px;
  opacity: 0.85;
}

.vt-pot-card-price {
  font-size: 12px;
  font-weight: 700;
  color: #D97706;
  margin-top: 2px;
}

.vt-btn-buy-pot {
  background: #3B82F6;
  color: #FFFFFF;
  border: 1.8px solid #1D4ED8;
  box-shadow: 0 2px 0 #1D4ED8;
  border-radius: 10px;
  padding: 5px 10px;
  font-family: var(--vt-font-heading);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

/* Card Nâng Cấp Chậu */
.vt-upgrade-modal-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vt-upgrade-compare-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #FFF7ED;
  border: 1.8px solid var(--vt-border-dark);
  border-radius: 14px;
  padding: 10px;
}

[data-theme="dark"] .vt-upgrade-compare-row {
  background: #0F172A;
}

.vt-upgrade-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.vt-upgrade-arrow {
  font-size: 20px;
  font-weight: 800;
  color: #F59E0B;
}

.vt-upgrade-side-title {
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 800;
}

.vt-upgrade-stats-table {
  background: #FFFFFF;
  border: 1.5px solid var(--vt-border-dark);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-theme="dark"] .vt-upgrade-stats-table {
  background: #0F172A;
}

.vt-up-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.vt-upgrade-cost-box {
  background: #FEF3C7;
  border: 1.5px solid #F59E0B;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-theme="dark"] .vt-upgrade-cost-box {
  background: #332B14;
}

.vt-materials-req-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.vt-req-mat-chip {
  background: #FFFFFF;
  border: 1.2px solid var(--vt-border-dark);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
}

.vt-req-mat-chip.is-lacking {
  border-color: #EF4444;
  color: #EF4444;
}

/* Đố Vui Bắt Sâu */
.vt-pest-quiz-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.vt-pest-mascot {
  font-size: 38px;
  animation: pestWiggle 1s ease-in-out infinite alternate;
}

@keyframes pestWiggle {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

.vt-quiz-word-card {
  background: #EFF6FF;
  border: 2px solid #3B82F6;
  border-radius: 16px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.vt-quiz-hanzi {
  font-size: 38px;
  font-weight: 800;
  color: #1E40AF;
  line-height: 1;
}

.vt-quiz-pinyin {
  font-size: 15px;
  font-weight: 700;
  color: #2563EB;
}

.vt-btn-listen-small {
  margin-top: 4px;
  background: #DBEAFE;
  color: #1E40AF;
  border: 1.5px solid #3B82F6;
  border-radius: 9999px;
  padding: 2.5px 8px;
  font-family: var(--vt-font-heading);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.vt-quiz-options-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.vt-quiz-opt-btn {
  background: #FFFFFF;
  border: 1.8px solid var(--vt-border-dark);
  box-shadow: 0 2px 0 var(--vt-border-dark);
  border-radius: 10px;
  padding: 8px 6px;
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.vt-quiz-opt-btn:hover {
  background: #FFF7ED;
}
.vt-quiz-opt-btn:active {
  transform: translateY(1.5px);
  box-shadow: none;
}
.vt-quiz-opt-btn.is-wrong {
  border-color: #EF4444;
  background: #FEE2E2;
  color: #B91C1C;
}

/* Kho Nông Sản */
.vt-wh-capacity-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FEF3C7;
  border: 1.8px solid #F59E0B;
  border-radius: 12px;
  padding: 7px 10px;
  font-family: var(--vt-font-heading);
  font-weight: 800;
  margin-bottom: 10px;
}

.vt-btn-upgrade-wh {
  background: #F59E0B;
  color: #FFFFFF;
  border: 1.5px solid #78350F;
  border-radius: 8px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.vt-warehouse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #FFFFFF;
  border: 1.5px solid var(--vt-border-dark);
  border-radius: 10px;
  margin-bottom: 5px;
}

[data-theme="dark"] .vt-warehouse-row {
  background: #0F172A;
}

.vt-wh-name {
  font-family: var(--vt-font-heading);
  font-weight: 800;
  font-size: 13px;
}

.vt-wh-count {
  font-weight: 700;
  color: #15803D;
  margin-left: 4px;
}

.vt-btn-sm-sell {
  background: #FBBF24;
  color: #78350F;
  border: 1.5px solid #78350F;
  border-radius: 8px;
  padding: 3px 7px;
  font-family: var(--vt-font-heading);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.vt-btn-sell-all {
  background: #F59E0B;
  color: #FFFFFF;
}

/* Bảng Đơn Hàng */
.vt-orders-list-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vt-order-card {
  background: #FFFFFF;
  border: 1.8px solid var(--vt-border-dark);
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-theme="dark"] .vt-order-card {
  background: #0F172A;
}

.vt-order-customer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--vt-font-heading);
  font-weight: 800;
  font-size: 13.5px;
  color: #B45309;
}

.vt-order-rewards {
  font-size: 11.5px;
  color: #047857;
  font-weight: 700;
}

.vt-btn-deliver {
  background: #10B981;
  color: #FFFFFF;
  border: 1.8px solid #064E3B;
  box-shadow: 0 2px 0 #064E3B;
  border-radius: 8px;
  padding: 4px 10px;
  font-family: var(--vt-font-heading);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  align-self: flex-end;
}

/* Chi Tiết Cây & Phát Âm */
.vt-plant-detail-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vt-detail-vocab-banner {
  background: #FEF3C7;
  border: 1.8px solid #F59E0B;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

[data-theme="dark"] .vt-detail-vocab-banner {
  background: #332B14;
}

.vt-vocab-hanzi-large {
  font-size: 34px;
  font-weight: 800;
  color: #B45309;
  line-height: 1;
}

.vt-vocab-pinyin-large {
  font-size: 14px;
  font-weight: 700;
  color: #D97706;
}

.vt-vocab-meaning-large {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.9;
}

.vt-btn-listen-audio {
  margin-top: 4px;
  background: #F59E0B;
  color: #FFFFFF;
  border: 1.8px solid #78350F;
  border-radius: 9999px;
  padding: 3px 10px;
  font-family: var(--vt-font-heading);
  font-weight: 800;
  cursor: pointer;
}

.vt-detail-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  background: #FFFFFF;
  border: 1.5px solid var(--vt-border-dark);
  border-radius: 12px;
  padding: 8px;
}

[data-theme="dark"] .vt-detail-stats-grid {
  background: #0F172A;
}

.vt-stat-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vt-stat-label {
  font-size: 10px;
  opacity: 0.75;
}

.vt-stat-val {
  font-family: var(--vt-font-heading);
  font-weight: 700;
  font-size: 12px;
}

.vt-val-highlight {
  color: #10B981;
}

.vt-detail-actions-row {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Quản Lý Chủ Đề Ban Công */
.vt-themes-list-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vt-theme-card {
  background: #FFFFFF;
  border: 1.8px solid var(--vt-border-dark);
  border-radius: 12px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .vt-theme-card {
  background: #0F172A;
}

.vt-theme-title {
  font-family: var(--vt-font-heading);
  font-size: 13px;
  font-weight: 800;
}

.vt-theme-desc {
  font-size: 10.5px;
  opacity: 0.85;
}

.vt-btn-apply-theme {
  background: #3B82F6;
  color: #FFFFFF;
  border: 1.5px solid #1D4ED8;
  border-radius: 8px;
  padding: 3px 8px;
  font-family: var(--vt-font-heading);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* Quản Lý Linh Thú (Bảng Linh Thú Đẹp) */
.vt-modal-dialog.vt-pets-modal-dialog {
  max-width: 680px;
  width: 95%;
}
.vt-pets-modal {
  width: 100%;
}
.vt-pets-grid-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}
.is-portrait .vt-pets-grid-list {
  grid-template-columns: 1fr;
}

.vt-pet-manage-card {
  position: relative;
  background: #FFFFFF;
  border: 2.5px solid #CBD5E1;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.vt-pet-manage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.vt-pet-manage-card.is-active-pet {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 3px #F59E0B, 0 8px 20px rgba(245, 158, 11, 0.35) !important;
}
.vt-pet-manage-card.is-locked-pet {
  opacity: 0.72;
  filter: grayscale(0.25);
}

/* Màu nền một tông pastel ấm theo loài */
.vt-pet-manage-card.theme-pet-panda {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-color: #059669;
}
.vt-pet-manage-card.theme-pet-dragon {
  background: linear-gradient(135deg, #F0FDF4 0%, #BBF7D0 50%, #FEF9C3 100%);
  border-color: #16A34A;
}
.vt-pet-manage-card.theme-pet-maneki_neko {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
  border-color: #E11D48;
}
.vt-pet-manage-card.theme-pet-kitsune {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border-color: #EA580C;
}
.vt-pet-manage-card.theme-pet-lion {
  background: linear-gradient(135deg, #FEFCE8 0%, #FEF08A 100%);
  border-color: #CA8A04;
}
.vt-pet-manage-card.theme-pet-owl {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border-color: #4F46E5;
}
.vt-pet-manage-card.theme-pet-misha {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #D97706;
}
.vt-pet-manage-card.theme-pet-firebird {
  background: linear-gradient(135deg, #FFF1F2 0%, #FED7AA 100%);
  border-color: #DC2626;
}

[data-theme="dark"] .vt-pet-manage-card {
  background: #1E293B !important;
  border-color: #475569 !important;
  color: #F1F5F9;
}

.vt-pet-card-avatar {
  width: 96px;
  height: 96px;
  min-width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vt-pet-card-avatar svg {
  width: 96px;
  height: 96px;
  display: block;
}

.vt-pet-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vt-pet-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vt-pet-card-name {
  font-family: var(--vt-font-heading);
  font-size: 14.5px;
  font-weight: 800;
  color: #1E293B;
  margin: 0;
}
[data-theme="dark"] .vt-pet-card-name {
  color: #F8FAFC;
}
.vt-pet-card-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.08);
  color: #334155;
}
.vt-pet-rare-badge {
  font-size: 10px;
  font-weight: 800;
  color: #D97706;
  background: #FEF3C7;
  padding: 1px 6px;
  border-radius: 9999px;
  border: 1px solid #F59E0B;
}
.vt-pet-card-desc {
  font-size: 11px;
  line-height: 1.3;
  color: #475569;
}
[data-theme="dark"] .vt-pet-card-desc {
  color: #CBD5E1;
}

.vt-pet-level-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}
.vt-pet-level-badge {
  font-family: var(--vt-font-heading);
  font-size: 11.5px;
  font-weight: 800;
  color: #B45309;
}
.vt-pet-meter-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 1px;
}
.vt-pet-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #64748B;
}
[data-theme="dark"] .vt-pet-meter-label {
  color: #94A3B8;
}
.vt-pet-meter-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
  overflow: hidden;
}
.vt-pet-meter-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
}
.vt-pet-meter-fill.fill-hunger {
  background: linear-gradient(90deg, #10B981, #059669);
}
.vt-pet-meter-fill.fill-xp {
  background: linear-gradient(90deg, #3B82F6, #6366F1);
}
.vt-pet-meter-fill.fill-egg {
  background: linear-gradient(90deg, #F59E0B, #EA580C);
}

.vt-pet-status-badge.is-egg {
  font-size: 11px;
  font-weight: 800;
  color: #EA580C;
}
.vt-pet-locked-notice {
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
}
.vt-pet-locked-hint {
  font-size: 10px;
  color: #94A3B8;
}

.vt-pet-card-action {
  margin-top: 4px;
}
.vt-btn-pet-equip {
  background: #3B82F6;
  color: #FFFFFF;
  border: 1.5px solid #1D4ED8;
  border-radius: 8px;
  padding: 4px 10px;
  font-family: var(--vt-font-heading);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #1D4ED8;
  transition: transform 0.1s ease;
}
.vt-btn-pet-equip:hover:not([disabled]) {
  transform: translateY(-1px);
}
.vt-btn-pet-equip:active:not([disabled]) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #1D4ED8;
}
.vt-btn-pet-equip.is-equipped {
  background: #10B981;
  border-color: #064E3B;
  box-shadow: 0 2px 0 #064E3B;
}
.vt-btn-pet-equip[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Linh thú đang đi theo (state.activePet) trong vườn */
.vt-active-pet-garden-wrap {
  position: absolute;
  bottom: 8px;
  left: 175px;
  z-index: 25;
  cursor: pointer;
  animation: petGardenBob 6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: filter 0.2s ease;
}
.vt-active-pet-garden-wrap:hover {
  filter: brightness(1.1) drop-shadow(0 6px 14px rgba(245, 158, 11, 0.5));
}
.is-portrait .vt-active-pet-garden-wrap {
  left: 60px;
  bottom: 12px;
}
@keyframes petGardenBob {
  0%, 80%, 100% { transform: translateY(0) scale(1); }
  85% { transform: translateY(-8px) scale(1.05); }
  90% { transform: translateY(0) scale(0.96, 1.04); }
  95% { transform: translateY(-3px) scale(1.02); }
}

.vt-pet-buff-bubble {
  position: absolute;
  bottom: 82px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFDF8;
  border: 2px solid #7A4B2A;
  border-radius: 12px;
  padding: 6px 12px;
  font-family: var(--vt-font-body);
  font-size: 12px;
  line-height: 1.35;
  color: #332014;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  z-index: 40;
  pointer-events: none;
  animation: petBubbleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vt-pet-buff-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #7A4B2A transparent;
  display: block;
  width: 0;
}
@keyframes petBubbleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.85); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.vt-mat-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.vt-mat-box {
  background: #FFFFFF;
  border: 1.5px solid var(--vt-border-dark);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

[data-theme="dark"] .vt-mat-box {
  background: #0F172A;
}

.vt-mat-icon { font-size: 20px; }
.vt-mat-title { font-size: 11px; font-weight: 700; }
.vt-mat-amount { font-family: var(--vt-font-heading); font-size: 15px; font-weight: 800; color: #B45309; }
.vt-mat-hint { font-size: 11px; color: #15803D; margin: 0; }

/* ==========================================================================
   10. Hướng Dẫn Tân Thủ 5 Bước (Tutorial Floating Box)
   ========================================================================== */

/* (Phần hướng dẫn tân thủ đã được chuẩn hóa ở mục 8 phía trên) */

.vt-water-drop-fx {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: dropFall 0.75s ease-in forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes dropFall {
  0% { transform: translateX(-50%) translateY(-20px) scale(0.5); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(40px) scale(1.2); opacity: 0; }
}

/* ==========================================================================
   11. Tôn Trọng Cài Đặt Giảm Chuyển Động (prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}


/* ==========================================================================
   QUY TẮC CUTE & KAWAII CHO TOÀN BỘ VƯỜN TREO
   ========================================================================== */

/* Boing nhún khi bấm nút */
@keyframes vtBoing {
  0% { transform: scale(1); }
  30% { transform: scale(0.92); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

button:active,
.vt-bar-btn:active,
.vt-btn-primary:active,
.vt-elevator-btn:active,
.vt-hanging-wood-sign:active {
  transform: translateY(3px) scale(0.96) !important;
  box-shadow: 0 1px 0 #7A4B2A !important;
}

/* Chậu có mặt chớp mắt tự nhiên */
@keyframes potEyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

.pot-eye {
  transform-origin: 50% 56%;
  animation: potEyeBlink 4.2s infinite;
}

.vt-pot-slot:nth-child(1) .pot-eye { animation-delay: 0.2s; }
.vt-pot-slot:nth-child(2) .pot-eye { animation-delay: 1.4s; }
.vt-pot-slot:nth-child(3) .pot-eye { animation-delay: 2.8s; }
.vt-pot-slot:nth-child(4) .pot-eye { animation-delay: 0.9s; }
.vt-pot-slot:nth-child(5) .pot-eye { animation-delay: 3.5s; }
.vt-pot-slot:nth-child(6) .pot-eye { animation-delay: 2.1s; }

/* Bong bóng nước khát nảy nhẹ */
@keyframes bubbleFloat {
  0%, 100% { transform: translate(55px, 10px) translateY(0); }
  50% { transform: translate(55px, 10px) translateY(-4.5px); }
}
.pot-thirsty-bubble {
  animation: bubbleFloat 2s ease-in-out infinite;
}

/* Cây đung đưa nhẹ nhàng */
@keyframes cutePlantSway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1.4deg) translateY(-0.6px); }
  75% { transform: rotate(-1.4deg) translateY(0.6px); }
}
.vt-plant-layer {
  transform-origin: bottom center;
  animation: cutePlantSway 3.4s ease-in-out infinite;
}

/* Nút công cụ tròn pastel, mỗi nút một màu kẹo ngọt */
.vt-bottom-bar {
  background: #FFF8EC !important;
  border: 3.5px solid #7A4B2A !important;
  border-radius: 32px !important;
  box-shadow: 0 6px 0 #7A4B2A !important;
}

[data-theme="dark"] .vt-bottom-bar {
  background: #2C2250 !important;
  border-color: #7A4B2A !important;
  box-shadow: 0 6px 0 #1A120B !important;
}

.vt-bar-btn {
  width: 66px !important;
  height: 66px !important;
  border-radius: 50% !important;
  border: 3px solid #7A4B2A !important;
  box-shadow: 0 4px 0 #7A4B2A !important;
  position: relative;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vt-bar-btn[data-tool="hand"] { background: #FFF3B0 !important; }
.vt-bar-btn[data-tool="seed"] { background: #D4F8D3 !important; }
.vt-bar-btn[data-tool="water"] { background: #D6F2FE !important; }
.vt-bar-btn[data-tool="fertilizer"] { background: #FFE8D6 !important; }
.vt-bar-btn#vt-btn-open-shop { background: #FFDCE5 !important; }
.vt-bar-btn#vt-btn-open-warehouse { background: #FCEFD7 !important; }
.vt-bar-btn#vt-btn-open-orders { background: #FFF8D6 !important; }
.vt-bar-btn#vt-btn-open-pets { background: #EEDBFF !important; }

/* Nút đang chọn nhô lên, viền vàng bơ, có trái tim nhỏ nhảy */
.vt-bar-btn.is-active {
  transform: translateY(-10px) scale(1.08) !important;
  border: 3.5px solid #FFD966 !important;
  box-shadow: 0 6px 0 #7A4B2A, 0 0 16px rgba(255, 217, 102, 0.7) !important;
}

.vt-bar-btn.is-active::after {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ec4899' stroke='%23db2777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: activeHeartHop 0.8s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes activeHeartHop {
  0% { transform: translateX(-50%) translateY(0) scale(0.9); }
  100% { transform: translateX(-50%) translateY(-6px) scale(1.2); }
}

/* Viên HUD nền kem #FFF8EC viền nâu */
.vt-res-chip,
.vt-profile-pill,
.vt-btn-back {
  background: var(--vt-cream-bg) !important;
  border: 3px solid #7A4B2A !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 0 #7A4B2A !important;
  font-family: var(--vt-font-heading) !important;
  font-weight: 800;
  color: #7A4B2A !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vt-res-chip .vt-res-val {
  font-family: var(--vt-font-heading);
  font-weight: 800;
  color: #7A4B2A;
}

[data-theme="dark"] .vt-res-chip,
[data-theme="dark"] .vt-profile-pill,
[data-theme="dark"] .vt-btn-back {
  background: #2B2347 !important;
  border-color: #5A351C !important;
  box-shadow: 0 4px 0 #1A1024 !important;
  color: #FFFDF8 !important;
}

[data-theme="dark"] .vt-res-chip .vt-res-val,
[data-theme="dark"] .vt-btn-back {
  color: #FFFDF8 !important;
}

.vt-res-chip:hover,
.vt-btn-back:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #7A4B2A !important;
}

/* Thang máy bo tròn 26px */
.vt-elevator-panel {
  background: #FFF8EC !important;
  border: 3px solid #7A4B2A !important;
  border-radius: 26px !important;
  box-shadow: 0 4px 0 #7A4B2A !important;
}
[data-theme="dark"] .vt-elevator-panel {
  background: #2B2347 !important;
  border-color: #5A351C !important;
  box-shadow: 0 4px 0 #1A1024 !important;
  color: #FFFDF8 !important;
}
.vt-elevator-btn {
  border-radius: 50% !important;
  background: #FDE7CF !important;
  border: 2.6px solid #7A4B2A !important;
  box-shadow: 0 3px 0 #7A4B2A !important;
  color: #7A4B2A !important;
}
.vt-elevator-floor-badge {
  font-family: var(--vt-font-heading) !important;
  font-weight: 800;
  color: #7A4B2A !important;
}

.is-portrait .vt-bottom-bar {
  bottom: 24px !important;
  gap: 8px !important;
  padding: 6px 10px !important;
}

.is-portrait .vt-bar-btn {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}

.is-portrait .vt-elevator-panel {
  right: 8px !important;
  top: 240px !important;
  padding: 4px 2px !important;
  border-radius: 18px !important;
}

.is-portrait .vt-elevator-btn {
  width: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
}

/* Thông báo toast dạng bong bóng thoại bo tròn có đuôi */
.vt-toast-container .vt-toast {
  background: #FFF8EC !important;
  color: #7A4B2A !important;
  border: 3px solid #7A4B2A !important;
  border-radius: 24px !important;
  box-shadow: 0 5px 0 #7A4B2A, 0 8px 20px rgba(122, 75, 42, 0.2) !important;
  font-family: var(--vt-font-heading) !important;
  font-weight: 700;
  position: relative;
  padding: 12px 20px !important;
}
.vt-toast-container .vt-toast::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 32px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #7A4B2A;
}

/* Modal bo tròn 28px viền nâu sticker */
.vt-modal-card {
  background: #FFFDF8 !important;
  border: 4px solid #7A4B2A !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 0 #7A4B2A, 0 16px 36px rgba(122, 75, 42, 0.25) !important;
}
.vt-modal-header {
  border-bottom: 3px solid #F5C99B !important;
  font-family: var(--vt-font-heading) !important;
  font-size: 20px;
  color: #7A4B2A !important;
}
.vt-btn-modal-close {
  border-radius: 50% !important;
  background: #FFDCE5 !important;
  border: 2.5px solid #7A4B2A !important;
  box-shadow: 0 3px 0 #7A4B2A !important;
  color: #7A4B2A !important;
}

/* Hiệu ứng thu hoạch bung hạt & +xu bay lên nhún nhảy */
.vt-harvest-particle {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 19px;
  pointer-events: none;
  z-index: 50;
  animation: harvestPop 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
@keyframes harvestPop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  60% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -30px))) scale(1.3); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -50px))) scale(0.8); opacity: 0; }
}

.vt-fly-xp-label {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  background: #FFD966;
  color: #7A4B2A;
  border: 2.4px solid #7A4B2A;
  border-radius: 14px;
  box-shadow: 0 3px 0 #7A4B2A;
  padding: 3px 9px;
  font-family: var(--vt-font-heading);
  font-weight: 800;
  font-size: 13px;
  pointer-events: none;
  z-index: 55;
  animation: xpFlyUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes xpFlyUp {
  0% { transform: translateX(-50%) translateY(0) scale(0.8); opacity: 0; }
  25% { transform: translateX(-50%) translateY(-12px) scale(1.15); opacity: 1; }
  75% { transform: translateX(-50%) translateY(-32px) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-50px) scale(0.9); opacity: 0; }
}

/* Nâng cấp chậu có vòng sao xoay */
.vt-upgrade-star-ring {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: starRingRotate 1.2s ease-out forwards;
}
.vt-upgrade-star-ring span {
  position: absolute;
  font-size: 16px;
}
.vt-upgrade-star-ring span:nth-child(1) { transform: rotate(0deg) translateY(-45px); }
.vt-upgrade-star-ring span:nth-child(2) { transform: rotate(60deg) translateY(-45px); }
.vt-upgrade-star-ring span:nth-child(3) { transform: rotate(120deg) translateY(-45px); }
.vt-upgrade-star-ring span:nth-child(4) { transform: rotate(180deg) translateY(-45px); }
.vt-upgrade-star-ring span:nth-child(5) { transform: rotate(240deg) translateY(-45px); }
.vt-upgrade-star-ring span:nth-child(6) { transform: rotate(300deg) translateY(-45px); }

@keyframes starRingRotate {
  0% { transform: scale(0.5) rotate(0deg); opacity: 0; }
  40% { transform: scale(1.2) rotate(90deg); opacity: 1; }
  80% { transform: scale(1.4) rotate(180deg); opacity: 0.9; }
  100% { transform: scale(1.6) rotate(240deg); opacity: 0; }
}

/* Tôn trọng prefers-reduced-motion: tắt chuyển động lặp */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Animation chỉ chạy khi game đang hiển thị */
html:not([data-lang="farm"]) .vt-game-wrapper,
html:not([data-lang="farm"]) .vt-game-wrapper *,
.vt-game-stage.is-paused *,
.vt-game-stage.is-paused *::before,
.vt-game-stage.is-paused *::after {
  animation-play-state: paused !important;
}

/* Khung game phải nằm trên lớp mây nền (mây trước z=1 từng đè lên ban công + thanh công cụ) */
.vt-game-stage { z-index: 2; }

/* ==========================================================================
   NHIỆM VỤ NGÀY, NẮNG HỌC TẬP, CÂY TRI THỨC & ĐƠN HÀNG CHỮ HÁN
   ========================================================================== */

/* Chấm đỏ trên nút Nhiệm vụ */
.vt-quest-red-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 13px;
  height: 13px;
  background: #EF4444;
  border: 2.5px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.9);
  pointer-events: none;
  z-index: 5;
  animation: vt-pulse-dot 1.4s infinite ease-in-out;
}
@keyframes vt-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.85; }
}

/* Chip Nắng học tập trong HUD */
.vt-hud-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vt-sunshine-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  user-select: none;
}
.vt-sunshine-chip.is-active {
  background: linear-gradient(135deg, #FEF08A 0%, #FDE047 100%);
  color: #854D0E;
  border: 2px solid #CA8A04;
  box-shadow: 0 3px 0 #A16207, 0 0 12px rgba(250, 204, 21, 0.4);
}
.vt-sunshine-chip.is-inactive {
  background: rgba(255, 255, 255, 0.9);
  color: #475569;
  border: 2px dashed #CBD5E1;
  box-shadow: 0 2px 0 #94A3B8;
}
.vt-sunshine-chip:hover {
  transform: translateY(-1px);
}

/* Cầu vồng nắng học tập trên bầu trời */
.vt-sunshine-rainbow {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 220px;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

/* Đồ trang trí theo chuỗi ngày học trên cây đại thụ */
.vt-decor-item {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}
.vt-decor-ribbon {
  top: 180px;
  left: 360px;
  transform-origin: top center;
  animation: vt-sway 3.2s ease-in-out infinite alternate;
}
.vt-decor-chime {
  top: 240px;
  right: 360px;
  transform-origin: top center;
  animation: vt-sway 2.8s ease-in-out infinite alternate-reverse;
}
.vt-decor-lantern {
  top: 120px;
  left: 490px;
  transform-origin: top center;
  animation: vt-sway 4s ease-in-out infinite alternate;
}
@keyframes vt-sway {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/* Modal Nhiệm vụ ngày */
.vt-quests-modal-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
}
.vt-quests-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vt-quest-card {
  background: #FFFFFF;
  border: 2.5px solid #7A4B2A;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 0 #7A4B2A;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vt-quest-card.is-completed {
  border-color: #059669;
  box-shadow: 0 4px 0 #047857;
  background: #F0FDF4;
}
.vt-quest-card.is-claimed {
  opacity: 0.75;
  background: #F8FAFC;
  border-color: #94A3B8;
  box-shadow: 0 3px 0 #64748B;
}
.vt-quest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vt-quest-idx {
  font-weight: 800;
  font-size: 14px;
  color: #7A4B2A;
}
.vt-quest-reward-tag {
  font-size: 13px;
  font-weight: 700;
  color: #B45309;
}
.vt-quest-part {
  background: #FFFDF8;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vt-quest-part-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.vt-part-tag {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.vt-tag-study { background: #EEF2FF; color: #4F46E5; }
.vt-tag-garden { background: #ECFDF5; color: #059669; }
.vt-part-title { flex: 1; font-weight: 700; color: #1E293B; }
.vt-part-count { font-weight: 800; color: #64748B; font-variant-numeric: tabular-nums; }
.vt-quest-progress-bar {
  width: 100%;
  height: 8px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}
.vt-progress-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.vt-fill-study { background: #6366F1; }
.vt-fill-garden { background: #10B981; }
.vt-btn-quest-go {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: #4F46E5;
  text-decoration: none;
  background: #EEF2FF;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #C7D2FE;
}
.vt-btn-quest-go:hover { background: #E0E7FF; }
.vt-part-done { font-size: 12px; font-weight: 700; color: #059669; }
.vt-part-pending { font-size: 12px; color: #94A3B8; }
.vt-quest-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.vt-btn-claim-quest {
  padding: 7px 18px;
  background: #22C55E;
  color: #FFFFFF;
  border: 2px solid #15803D;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 #15803D;
}
.vt-btn-claim-quest:hover { background: #16A34A; }
.vt-badge-claimed { font-size: 13px; font-weight: 700; color: #059669; }
.vt-badge-inprogress { font-size: 12px; color: #94A3B8; }

/* Hộp Rương Tri Thức */
.vt-daily-chest-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FEF3C7;
  border: 3px solid #D97706;
  border-radius: 16px;
  box-shadow: 0 4px 0 #B45309;
}
.vt-daily-chest-box.is-locked { opacity: 0.85; filter: grayscale(0.2); }
.vt-chest-icon { font-size: 32px; }
.vt-chest-info { flex: 1; }
.vt-chest-title { font-weight: 800; font-size: 15px; color: #92400E; }
.vt-chest-desc { font-size: 12px; color: #78350F; line-height: 1.4; }
.vt-btn-open-chest {
  padding: 8px 16px;
  background: #F59E0B;
  color: #FFFFFF;
  border: 2px solid #B45309;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 #B45309;
  animation: vt-pulse-dot 1.2s infinite ease-in-out;
}
.vt-chest-locked-pill {
  font-size: 12px;
  font-weight: 700;
  color: #92400E;
  background: rgba(217, 119, 6, 0.15);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Modal Chuỗi nhiệm vụ Cây Tri Thức */
.vt-tree-awakening-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
}
.vt-fairy-story-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFDF8;
  border: 2px solid #7A4B2A;
  border-radius: 16px;
  padding: 12px;
}
.vt-story-fairy-avatar { width: 72px; height: 72px; flex-shrink: 0; }
.vt-story-speech-bubble { flex: 1; }
.vt-story-speaker { font-size: 12px; font-weight: 800; color: #B45309; text-transform: uppercase; }
.vt-story-text { font-size: 14px; font-style: italic; color: #4A2B11; line-height: 1.45; margin-top: 2px; }
.vt-tree-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}
.vt-tree-step-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 14px;
}
.vt-tree-step-card.is-completed { border-color: #10B981; background: #F0FDF4; }
.vt-tree-step-card.is-locked { opacity: 0.6; background: #F8FAFC; }
.vt-tree-step-num {
  font-weight: 800;
  font-size: 12px;
  color: #7A4B2A;
  background: #FFF8EC;
  border: 1px solid #7A4B2A;
  border-radius: 6px;
  padding: 3px 6px;
}
.vt-tree-step-content { flex: 1; }
.vt-tree-step-title { font-weight: 700; font-size: 14px; color: #1E293B; }
.vt-tree-step-req { font-size: 12px; color: #64748B; margin-top: 2px; }
.vt-btn-claim-tree {
  padding: 5px 14px;
  background: #F59E0B;
  color: #FFFFFF;
  border: 2px solid #B45309;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 0 #B45309;
}
.vt-btn-go-learn {
  padding: 5px 12px;
  background: #10B981;
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.vt-badge-locked { font-size: 12px; color: #94A3B8; font-weight: 600; }

/* ==========================================================================
   HẠT GIỐNG TỪ VỰNG, SỔ TỪ VƯỜN & ÔN TẬP SRS (Phần B/2)
   Phong cách Pastel Kawaii, Chấm '!' tới hạn, Không pointer-events:none
   ========================================================================== */

/* 1. Tabs Trong Túi Hạt Giống */
.vt-seed-bag-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 2px solid #E2E8F0;
  padding-bottom: 8px;
}
.vt-seed-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  color: #475569;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
}
.vt-seed-tab:hover {
  background: #F1F5F9;
  color: #1E293B;
}
.vt-seed-tab.is-active {
  background: #10B981;
  color: #FFFFFF;
  border-color: #059669;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.vt-word-seed-card {
  border-color: #A7F3D0 !important;
  background: #F0FDF4 !important;
}
.vt-btn-sow-word {
  padding: 6px 14px;
  background: #10B981;
  color: #FFFFFF;
  border: 1px solid #059669;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 0 #059669;
  pointer-events: auto;
  transition: transform 0.15s ease, background 0.15s ease;
}
.vt-btn-sow-word:hover {
  background: #059669;
  transform: translateY(-1px);
}
.vt-badge-planted {
  font-size: 12px;
  color: #047857;
  background: #D1FAE5;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.vt-empty-wordseeds-notice {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 15px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px dashed #CBD5E1;
}

/* 2. Dấu '!' trên chậu Cây Từ tới hạn ôn & Chấm đỏ thanh công cụ */
.vt-pot-word-due-badge {
  position: absolute;
  top: -12px;
  right: 18px;
  width: 26px;
  height: 26px;
  background: #F59E0B;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.5);
  animation: vt-pulse-badge 1.4s infinite;
  z-index: 10;
  pointer-events: none;
}
@keyframes vt-pulse-badge {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

.vt-word-due-dot {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: #EF4444;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  animation: vt-pulse-badge 1.4s infinite;
  pointer-events: none;
}

.vt-status-pill.is-word-due {
  background: #FEF3C7;
  color: #92400E;
  border-color: #F59E0B;
}
.vt-word-bar-fill {
  background: linear-gradient(90deg, #34D399, #10B981) !important;
}

/* 3. Sổ Từ Vườn (Garden Wordbook Modal) */
.vt-wordbook-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 72vh;
  overflow: hidden;
}
.vt-wb-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid #E2E8F0;
}
.vt-wb-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vt-wb-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  color: #475569;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
}
.vt-wb-tab:hover {
  background: #F1F5F9;
  color: #0F172A;
}
.vt-wb-tab.is-active {
  background: #10B981;
  color: #FFFFFF;
  border-color: #059669;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.25);
}
.vt-btn-review-due {
  padding: 7px 16px;
  background: #F59E0B;
  color: #FFFFFF;
  border: 2px solid #D97706;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 0 #D97706;
  pointer-events: auto;
  transition: transform 0.15s ease, background 0.15s ease;
}
.vt-btn-review-due:hover:not(.is-disabled) {
  background: #D97706;
  transform: translateY(-1px);
}
.vt-btn-review-due.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #CBD5E1;
  border-color: #94A3B8;
  box-shadow: none;
}
.vt-wb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 56vh;
}
.vt-wb-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, border-color 0.15s ease;
  pointer-events: auto;
}
.vt-wb-card:hover {
  border-color: #10B981;
  transform: translateY(-1px);
}
.vt-wb-card.has-glow {
  border-color: #F59E0B;
  background: #FFFBEB;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
}
.vt-wb-preview {
  width: 55px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vt-wb-body {
  flex: 1;
  min-width: 0;
}
.vt-wb-header-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.vt-wb-hanzi {
  font-size: 22px;
  font-weight: 900;
  color: #0F172A;
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
}
.vt-wb-pinyin {
  font-size: 14px;
  font-weight: 700;
  color: #059669;
}
.vt-wb-hv {
  font-size: 12px;
  color: #64748B;
}
.vt-btn-wb-audio {
  background: none;
  border: 1px solid #E2E8F0;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease;
}
.vt-btn-wb-audio:hover {
  background: #F1F5F9;
}
.vt-wb-meaning {
  font-size: 13px;
  color: #334155;
  margin-top: 2px;
  line-height: 1.4;
}
.vt-wb-example {
  margin-top: 4px;
  font-size: 12px;
  color: #64748B;
  background: #F8FAFC;
  padding: 4px 8px;
  border-radius: 6px;
  border-left: 3px solid #10B981;
}
.vt-ex-zh {
  font-weight: 600;
  color: #1E293B;
  margin-right: 6px;
}
.vt-ex-vi {
  color: #475569;
}
.vt-wb-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.vt-wb-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.vt-wb-badge.is-growing {
  background: #E0F2FE;
  color: #0369A1;
}
.vt-wb-badge.is-due {
  background: #FEF3C7;
  color: #92400E;
}
.vt-wb-badge.is-ripe {
  background: #FEE2E2;
  color: #991B1B;
}
.vt-wb-badge.is-mastered {
  background: #D1FAE5;
  color: #047857;
}
.vt-btn-wb-quiz {
  padding: 4px 12px;
  background: #059669;
  color: #FFFFFF;
  border: 1px solid #047857;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  pointer-events: auto;
}
.vt-btn-wb-quiz:hover {
  background: #047857;
}
.vt-btn-wb-harvest {
  padding: 4px 12px;
  background: #F59E0B;
  color: #FFFFFF;
  border: 1px solid #B45309;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  pointer-events: auto;
}
.vt-btn-wb-harvest:hover {
  background: #B45309;
}

/* 4. Modal Ôn Tập SRS (Recall Quiz) & Gọi Tên Cây */
.vt-word-recall-modal, .vt-name-plant-modal {
  pointer-events: auto;
}
.vt-quiz-opt-btn.vt-word-opt-btn {
  pointer-events: auto;
  cursor: pointer;
}
.vt-quiz-opt-btn.is-correct {
  background: #ECFDF5 !important;
  border-color: #10B981 !important;
  color: #047857 !important;
  font-weight: 700;
}
.vt-quiz-opt-btn.is-wrong {
  background: #FEF2F2 !important;
  border-color: #EF4444 !important;
  color: #991B1B !important;
}
.vt-input-pinyin {
  pointer-events: auto;
}

/* ==========================================================================
   Icon Styling for Economy & Farm
   ========================================================================== */
.eco-icon-coins, .eco-icon-coin, .vt-icon-coin { color: #E0A800; }
.eco-icon-water, .vt-icon-water { color: #0284C7; }
.eco-icon-streak, .eco-icon-fire, .vt-icon-fire { color: #EA580C; }
.eco-icon-level, .eco-icon-star, .vt-icon-star { color: #F59E0B; }
.eco-icon-chest, .eco-icon-gift, .vt-icon-chest { color: #D97706; }
.vt-icon-sprout { color: #16A34A; }
.vt-icon-sparkle { color: #F59E0B; }
.vt-icon-warn { color: #EAB308; }

.eco-icon-toast {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 4px;
}
.eco-icon-toast svg, .eco-icon-toast.ds-icon {
  width: 18px;
  height: 18px;
}

.vt-btn-icon-svg .ds-icon {
  width: 24px;
  height: 24px;
}

.vt-menu-icon .ds-icon {
  width: 18px;
  height: 18px;
}

.vt-pop-icon .ds-icon {
  width: 18px;
  height: 18px;
}

.vt-modal-title .ds-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.15em;
  margin-right: 6px;
}

.vt-status-pill .ds-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 3px;
}

.vt-chest-icon .ds-icon {
  width: 40px;
  height: 40px;
}