/* =========================================================
   BUTTONS
   ========================================================= */

.dx-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  font-family: var(--dx-font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--dx-radius-sm);
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--dx-ease), border-color .35s var(--dx-ease);
}

.dx-btn--primary{
  color: var(--dx-black);
  background: linear-gradient(120deg, var(--dx-gold), var(--dx-gold-light));
}
.dx-btn--primary:hover{
  background: linear-gradient(120deg, var(--dx-gold-light), var(--dx-gold));
  box-shadow: 0 10px 30px -10px rgba(201,162,74,.55);
}

.dx-btn--outline{
  color: var(--dx-ivory);
  border-color: var(--dx-ink);
  background: transparent;
}
.dx-btn--outline:hover{
  border-color: var(--dx-gold);
  color: var(--dx-gold);
}

/* Hiệu ứng "quét laser" khi hover — 1 vệt sáng chạy ngang qua nút,
   nhắc lại thao tác đầu laser di chuyển trên bề mặt vật liệu */
.dx-btn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s var(--dx-ease);
  z-index: 1;
}
.dx-btn:hover::before{ transform: translateX(120%); }
.dx-btn > *{ position: relative; z-index: 2; }