/* =========================================================
   CONTAINER & LAYOUT CHUNG
   ========================================================= */

.dx-section{
  padding-block: var(--dx-section-y);
  position: relative;
}

.dx-section--alt{
  background: var(--dx-charcoal);
}

.dx-section__head{
  max-width: 640px;
  margin-bottom: 56px;
}
.dx-section__head.is-center{
  margin-inline: auto;
  text-align: center;
}

.dx-section__head h2{ margin-top: 14px; }

.dx-grid{
  display: grid;
  gap: 28px;
}
.dx-grid--3{ grid-template-columns: repeat(3, 1fr); }
.dx-grid--4{ grid-template-columns: repeat(4, 1fr); }
.dx-grid--5{ grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1024px){
  .dx-grid--4, .dx-grid--5{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .dx-grid--3, .dx-grid--4, .dx-grid--5{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .dx-grid--3, .dx-grid--4, .dx-grid--5{ grid-template-columns: 1fr; }
}

/* Đường phân cách vàng mảnh — chi tiết lặp lại xuyên suốt trang,
   gợi hình ảnh vệt cắt của tia laser */
.dx-divider{
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dx-ink) 20%, var(--dx-ink) 80%, transparent);
}