/* Bước 1: Khởi tạo Lớp phủ Ánh sáng Toàn cục (Ambient Background Glow) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle 600px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(0, 168, 107, 0.15), rgba(0, 122, 94, 0.05), transparent 80%);
  mix-blend-mode: screen;
  will-change: transform;
  transform: translateZ(0);
}

/* Bước 2: Hiệu ứng Tương tác Con trỏ Phát quang (Interactive Glow Effects) */
/* Cấu hình cho leanai.vn và cms.leanai.vn (các thẻ tính năng, nút bấm) */
.service-card, .expert-card, .price-card, .stat-card, .nav-item, .la-btn, .btn, .btn-cta, .action-btn {
  position: relative;
}

.service-card::before, .expert-card::before, .price-card::before, .stat-card::before, .nav-item::before, .la-btn::before, .btn::before, .btn-cta::before, .action-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle 400px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(0, 168, 107, 0.5), transparent 70%);
  background-attachment: fixed;
  pointer-events: none;
  opacity: 0;
  
  /* Mask image để chỉ hiện ánh sáng tại viền (border glow) */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  
  /* Bước 3: Ép kết xuất phần cứng */
  transition: opacity 0.3s ease;
  will-change: opacity, transform;
  transform: translateZ(0);
}

.service-card:hover::before, .expert-card:hover::before, .price-card:hover::before, .stat-card:hover::before, .nav-item:hover::before, .la-btn:hover::before, .btn:hover::before, .btn-cta:hover::before, .action-btn:hover::before {
  opacity: 1;
}