/* ===== Biến CSS animation cho hiệu ứng "beam" (viền sáng chạy quanh nút) ===== */
  @property --beam-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
  }
  @property --beam-opacity {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }

  [data-beam] {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Khi bật (active): quay liên tục + fade in */
  [data-beam][data-active] {
    animation:
      beam-spin 1.96s linear infinite,
      beam-fade-in 0.6s ease forwards;
  }

  /* Khi tắt dần (fading): vẫn quay nhưng fade out */
  [data-beam][data-fading] {
    animation:
      beam-spin 1.96s linear infinite,
      beam-fade-out 0.5s ease forwards;
  }

  /* Lớp viền sáng mảnh (::after) */
  [data-beam][data-active]::after,
  [data-beam][data-fading]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 19px;
    padding: 1px;
    clip-path: inset(0 round 20px);
    background: conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 54%,
      rgba(255, 255, 255, 0.1) 57%,
      rgba(255, 255, 255, 0.3) 60%,
      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.75) 66%,
      rgba(255, 255, 255, 0.6) 69%,
      rgba(255, 255, 255, 0.3) 72%,
      rgba(255, 255, 255, 0.1) 75%,
      transparent 78%, transparent 100%
    ),
    /*radial-gradient(ellipse 9px 18px at 2% 68%, rgb(50, 200, 80), transparent),
    radial-gradient(ellipse 4px 8px at 2% 68%, rgb(30, 185, 170), transparent),
    radial-gradient(ellipse 59px 9px at 72% -3%, rgb(255, 120, 40), transparent),
    radial-gradient(ellipse 42px 7px at 74% 100%, rgb(100, 70, 255), transparent),
    radial-gradient(ellipse 10px 17px at 100% 27%, rgb(240, 50, 180), transparent),
    radial-gradient(ellipse 10px 18px at 100% 27%, rgb(180, 40, 240), transparent),
    radial-gradient(ellipse 5px 10px at 100% 27%, rgb(40, 140, 255), transparent),
    radial-gradient(ellipse 11px 12px at 100% 27%, rgb(255, 50, 100), transparent);*/

    radial-gradient(ellipse 9px 18px at 2% 68%, rgb(241, 241, 241), transparent),
    radial-gradient(ellipse 4px 8px at 2% 68%, rgb(241, 241, 241), transparent),
    radial-gradient(ellipse 59px 9px at 72% -3%, rgb(241, 241, 241), transparent),
    radial-gradient(ellipse 42px 7px at 74% 100%, rgb(241, 241, 241), transparent),
    radial-gradient(ellipse 10px 17px at 100% 27%, rgb(241, 241, 241), transparent),
    radial-gradient(ellipse 10px 18px at 100% 27%, rgb(241, 241, 241), transparent),
    radial-gradient(ellipse 5px 10px at 100% 27%, rgb(241, 241, 241), transparent),
    radial-gradient(ellipse 11px 12px at 100% 27%, rgb(241, 241, 241), transparent);

    -webkit-mask:
      conic-gradient(
        from var(--beam-angle),
        transparent 0%, transparent 30%,
        rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
        white 52%, white 80%,
        rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
        transparent 95%, transparent 100%
      ),
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: source-in, xor;
    mask:
      conic-gradient(
        from var(--beam-angle),
        transparent 0%, transparent 30%,
        rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
        white 52%, white 80%,
        rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
        transparent 95%, transparent 100%
      ),
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: intersect, exclude;
    pointer-events: none;
    z-index: 2;
    opacity: calc(var(--beam-opacity) * 0.46 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
    animation: beam-hue-shift 12s ease-in-out infinite;
  }

  /* Lớp glow bên trong (::before) */
  [data-beam][data-active]::before,
  [data-beam][data-fading]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    clip-path: inset(0 round 20px);
    background:
      /*radial-gradient(ellipse 9px 18px at 2% 68%, rgba(50, 200, 80, 0.5), transparent),
      radial-gradient(ellipse 4px 8px at 2% 68%, rgba(30, 185, 170, 0.45), transparent),
      radial-gradient(ellipse 59px 9px at 72% -3%, rgba(255, 120, 40, 0.35), transparent),
      radial-gradient(ellipse 42px 7px at 74% 100%, rgba(100, 70, 255, 0.35), transparent),
      radial-gradient(ellipse 10px 17px at 100% 27%, rgba(240, 50, 180, 0.3), transparent),
      radial-gradient(ellipse 10px 18px at 100% 27%, rgba(180, 40, 240, 0.4), transparent),
      radial-gradient(ellipse 5px 10px at 100% 27%, rgba(40, 140, 255, 0.3), transparent),
      radial-gradient(ellipse 11px 12px at 100% 27%, rgba(255, 50, 100, 0.3), transparent);*/

      radial-gradient(ellipse 9px 18px at 2% 68%, rgba(241, 241, 241, 0.5), transparent),
      radial-gradient(ellipse 4px 8px at 2% 68%, rgba(241, 241, 241, 0.45), transparent),
      radial-gradient(ellipse 59px 9px at 72% -3%, rgba(241, 241, 241, 0.35), transparent),
      radial-gradient(ellipse 42px 7px at 74% 100%, rgba(241, 241, 241, 0.35), transparent),
      radial-gradient(ellipse 10px 17px at 100% 27%, rgba(241, 241, 241, 0.3), transparent),
      radial-gradient(ellipse 10px 18px at 100% 27%, rgba(241, 241, 241, 0.4), transparent),
      radial-gradient(ellipse 5px 10px at 100% 27%, rgba(241, 241, 241, 0.3), transparent),
      radial-gradient(ellipse 11px 12px at 100% 27%, rgba(241, 241, 241, 0.3), transparent);

    box-shadow: inset 0 0 5px 1px rgba(255, 255, 255, 0.3);
    -webkit-mask-image: conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 22%,
      rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
      white 46%, white 82%,
      rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
      transparent 97%, transparent 100%
    );
    mask-image: conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 22%,
      rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
      white 46%, white 82%,
      rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
      transparent 97%, transparent 100%
    );
    pointer-events: none;
    z-index: 1;
    opacity: calc(var(--beam-opacity) * 0.24 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
    animation: beam-hue-shift 12s ease-in-out infinite;
  }

  /* Lớp bloom (làm mờ, phát sáng) */
  [data-beam] [data-beam-bloom] {
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 19px;
    clip-path: inset(0 round 20px);
    background: conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 58%,
      rgba(255, 255, 255, 0.03) 62%,
      rgba(255, 255, 255, 0.08) 65%,
      rgba(255, 255, 255, 0.2) 67%,
      rgba(255, 255, 255, 0.45) 69%,
      rgba(255, 255, 255, 0.85) 70%,
      rgba(255, 255, 255, 0.85) 70.5%,
      rgba(255, 255, 255, 0.45) 71.5%,
      rgba(255, 255, 255, 0.2) 73%,
      rgba(255, 255, 255, 0.08) 75%,
      rgba(255, 255, 255, 0.03) 78%,
      transparent 82%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    padding: 1px;
    filter: blur(8px) brightness(1.30) saturate(1.20);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
  }

  [data-beam][data-active] [data-beam-bloom],
  [data-beam][data-fading] [data-beam-bloom] {
    display: block;
    opacity: calc(var(--beam-opacity) * 0.38 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
  }

  @keyframes beam-spin {
    to { --beam-angle: 360deg; }
  }
  @keyframes beam-fade-in {
    to { --beam-opacity: 1; }
  }
  @keyframes beam-fade-out {
    from { --beam-opacity: 1; }
    to { --beam-opacity: 0; }
  }
  @keyframes beam-hue-shift {
    0%   { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
    50%  { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.20); }
    100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
  }

  [data-beam][data-paused],
  [data-beam][data-paused]::after,
  [data-beam][data-paused]::before,
  [data-beam][data-paused] [data-beam-bloom] {
    animation-play-state: paused !important;
  }