/* =========================================================
   HERO
   Signature chính của trang: đường kẻ vàng "được khắc" chạy ra
   từ trái sang phải bên dưới tiêu đề khi trang tải xong,
   mô phỏng đúng khoảnh khắc đầu laser vừa hoàn tất một đường cắt.
   ========================================================= */

.dx-hero{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-block: 100px 56px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 85% 15%, rgba(201,162,74,.10), transparent 60%),
    var(--dx-black);
}

.dx-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}
@media (max-width: 960px){
  .dx-hero__grid{ grid-template-columns: 1fr; }
}

.dx-hero__title{
  margin-top: 18px;
  max-width: 620px;
}
.dx-hero__title em{
  font-style: normal;
  color: var(--dx-gold);
}

/* đường kẻ khắc — vẽ bằng stroke-dashoffset trên SVG */
.dx-hero__line{
  margin-block: 26px 30px;
  width: min(420px, 100%);
}
.dx-hero__line path{
  stroke: var(--dx-gold);
  stroke-width: 1.4;
  fill: none;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  animation: dx-draw 1.6s var(--dx-ease) .3s forwards;
}
@keyframes dx-draw{ to{ stroke-dashoffset: 0; } }

.dx-hero__desc{
  max-width: 480px;
  margin-bottom: 34px;
}

.dx-hero__actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Trust bar — dải icon tin cậy ngắn, dưới nút CTA ---------- */
.dx-hero__trust{
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--dx-ink);
}
.dx-hero__trust-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dx-font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dx-muted-2);
  white-space: nowrap;
}
.dx-hero__trust-item svg{
  width: 16px;
  height: 16px;
  color: var(--dx-gold);
  flex-shrink: 0;
}

.dx-hero__stats{
  display: flex;
  gap: 40px;
  margin-top: 40px;
}
.dx-hero__stat b{
  display: block;
  font-family: var(--dx-font-display);
  font-size: 32px;
  color: var(--dx-ivory);
}
.dx-hero__stat span{
  font-family: var(--dx-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dx-muted-2);
}

.dx-hero__visual{
  position: relative;
  aspect-ratio: 1/1.05;
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-md);
  overflow: hidden;
  background: var(--dx-charcoal);
}
.dx-hero__visual img{
  width: 100%; height: 100%; object-fit: cover;
}
.dx-hero__visual::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11,11,12,.85));
}
.dx-hero__visual-caption{
  position: absolute;
  bottom: 18px; left: 18px; right: 18px;
  z-index: 2;
  font-family: var(--dx-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--dx-ivory);
  display: flex;
  justify-content: space-between;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .dx-hero{ min-height: auto; padding-top: 110px; }
  .dx-hero__stats{ gap: 24px; flex-wrap: wrap; }

  /* Lưới 2×2 cố định thay vì flex-wrap tự do — tránh 4 nhãn độ dài
     khác nhau ("Free Design" vs "0.01mm Precision") tự ngắt dòng lệch
     nhau gây rối mắt. Grid ép mọi ô bằng nhau, luôn thẳng hàng. */
  .dx-hero__trust{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-top: 22px;
    padding-top: 18px;
  }
  .dx-hero__trust-item{
    white-space: normal;
    font-size: 10px;
  }
}

@media (max-width: 480px){
  /* Điện thoại nhỏ — 2 cột vẫn chật nếu chữ dài, hạ về 1 cột */
  .dx-hero__trust{
    grid-template-columns: 1fr;
  }
}