/* --- Nền và Hiệu ứng lá rơi --- */
.nature-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #eef3ed 0%, #dce7d9 100%);
  z-index: -1;
}

.floating-leaf {
  position: absolute;
  width: 40px;
  height: 40px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,0 C20,20 20,80 50,100 C80,80 80,20 50,0 Z" fill="%2382a08c" opacity="0.5"/></svg>');
  background-size: contain;
  animation: float 25s infinite ease-in-out;
}

.leaf-1 { top: 10%; left: 5%; animation-duration: 20s; }
.leaf-2 { top: 20%; left: 80%; animation-duration: 30s; animation-delay: -5s; }
.leaf-3 { top: 70%; left: 10%; animation-duration: 22s; animation-delay: -10s; }
.leaf-4 { top: 80%; left: 90%; animation-duration: 28s; animation-delay: -15s; }
.leaf-5 { top: 40%; left: 50%; animation-duration: 35s; animation-delay: -20s; }

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}