canvas {
  display: block;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Hiệu ứng cơ bản - Đổ bóng chéo */
.diagonal-shadow {
  box-shadow: 
    15px 15px 30px rgba(0, 0, 0, 0.3),
    10px 10px 20px rgba(0, 0, 0, 0.2);
}

/* Hiệu ứng nâng cao - Ánh sáng từ trên + đổ bóng */
.lighting-effect {
  position: relative;
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  box-shadow: 
    20px 20px 40px rgba(0, 0, 0, 0.4),
    -5px -5px 20px rgba(255, 255, 255, 0.3);
}

/* Hiệu ứng 3D với ánh sáng và bóng */
.card-3d-effect {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  
  /* Gradient ánh sáng từ trên xuống */
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(240, 240, 245, 1) 50%,
    rgba(220, 220, 230, 1) 100%
  );
  
  /* Đổ bóng nhiều lớp cho hiệu ứng chân thực */
  box-shadow: 
    25px 25px 50px rgba(0, 0, 0, 0.25),
    15px 15px 30px rgba(0, 0, 0, 0.15),
    5px 5px 15px rgba(0, 0, 0, 0.1),
    inset -2px -2px 5px rgba(255, 255, 255, 0.7),
    inset 2px 2px 5px rgba(0, 0, 0, 0.05);
}

/* Hiệu ứng với pseudo-element để tăng cường ánh sáng */
.enhanced-lighting {
  position: relative;
  background: #f5f5f5;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 
    20px 20px 60px rgba(0, 0, 0, 0.3),
    10px 10px 30px rgba(0, 0, 0, 0.2);
}

.enhanced-lighting::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.3) 30%,
    transparent 70%
  );
  pointer-events: none;
}

/* Hiệu ứng với animation (ánh sáng di chuyển) */
.animated-lighting {
  position: relative;
  background: #ffffff;
  padding: 25px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 
    18px 18px 45px rgba(0, 0, 0, 0.3),
    8px 8px 25px rgba(0, 0, 0, 0.15);
}

.animated-lighting::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: sweep 3s infinite;
  pointer-events: none;
}

@keyframes sweep {
  0% {
    transform: translate(-100%, -100%);
  }
  100% {
    transform: translate(100%, 100%);
  }
}

/* Hiệu ứng Neumorphism với ánh sáng */
.neumorphic-lighting {
  background: #e0e5ec;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 
    20px 20px 40px #bebebe,
    -10px -10px 40px #ffffff,
    inset -2px -2px 8px rgba(255, 255, 255, 0.5),
    inset 2px 2px 8px rgba(190, 190, 190, 0.2);
}

/* Hiệu ứng Glass morphism với ánh sáng */
.glass-lighting {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    15px 15px 40px rgba(0, 0, 0, 0.2),
    5px 5px 20px rgba(0, 0, 0, 0.1),
    inset -1px -1px 3px rgba(255, 255, 255, 0.4);
}