/* ==========================================================================
   Gnurt LED — LED border effect (shared by all homepage variants)
   .led        : always on (primary CTA: "Nhận báo giá", "Gửi yêu cầu báo giá")
   .led-hover  : appears on hover / keyboard focus / touch press
   Requirement: the nearest stacking context (section/header) must use
   `isolation: isolate` so the glow (z-index:-1) stays visible.
   ========================================================================== */

@property --led-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* đỏ – cam – vàng – lục – lam – chàm – tím */
  --led-spectrum: #ff3b3b, #ff8a1f, #ffd21f, #2fd66b, #2e9bff, #4b4dff, #a33bff, #ff3b3b;
  --led-w: 1.5px;          /* ring width */
  --led-speed: 4.5s;       /* one full colour loop */
  --led-glow: .42;         /* glow strength */
  --led-blur: 10px;
}

.led,
.led-hover {
  position: relative;
}

.led::before,
.led::after,
.led-hover::before,
.led-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--led-a), var(--led-spectrum));
  animation: led-spin var(--led-speed) linear infinite;
}

/* glow — sits behind the element */
.led::before,
.led-hover::before {
  z-index: -1;
  inset: 1px;
  filter: blur(var(--led-blur));
  opacity: var(--led-glow);
}

/* crisp ring — masked to the border only */
.led::after,
.led-hover::after {
  z-index: 2;
  padding: var(--led-w);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* hover variant: hidden + paused until interacted with */
.led-hover::before,
.led-hover::after {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity .35s ease;
}

@media (hover: hover) {
  .led-hover:hover::before { opacity: var(--led-glow); animation-play-state: running; }
  .led-hover:hover::after  { opacity: 1; animation-play-state: running; }
  .led:hover { --led-glow: .65; }
}

.led-hover:focus-visible::before,
.led-hover:active::before,
.led-hover.is-active::before { opacity: var(--led-glow); animation-play-state: running; }
.led-hover:focus-visible::after,
.led-hover:active::after,
.led-hover.is-active::after { opacity: 1; animation-play-state: running; }
.led:active { --led-glow: .7; }

@keyframes led-spin {
  to { --led-a: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .led::before, .led::after,
  .led-hover::before, .led-hover::after { animation: none; }
}