/* =========================================================
   PROCESS STEPS — quy trình 4 bước, đánh số vì đây thực sự
   là một chuỗi thao tác tuần tự (không dùng số trang trí suông)
   ========================================================= */

.dx-process{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-md);
  overflow: hidden;
}

.dx-process__step{
  padding: 36px 28px;
  border-right: 1px solid var(--dx-ink);
  position: relative;
}
.dx-process__step:last-child{ border-right: none; }

/* Đường nối ngang giữa các khung tròn số — chỉ áp dụng ở layout
   4-cột desktop. Toạ độ tính theo padding/kích thước khai báo dưới:
   top = padding-top (36px) + nửa chiều cao khung tròn (20px) = 56px
   left = padding-left (28px) + chiều rộng khung tròn (40px) = 68px
   right = -(padding-left bước kế 28px + border-right 1px) = -29px */
.dx-process__step:not(:last-child)::after{
  content: '';
  position: absolute;
  top: 56px;
  left: 68px;
  right: -29px;
  width: auto;
  height: 1px;
  background: var(--dx-ink);
  z-index: 1;
}

.dx-process__num{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--dx-gold-dim);
  border-radius: 50%;
  font-family: var(--dx-font-mono);
  font-size: 13px;
  color: var(--dx-gold);
  letter-spacing: .02em;
  flex-shrink: 0;
}

.dx-process__title{
  font-family: var(--dx-font-display);
  font-size: 22px;
  color: var(--dx-ivory);
  margin: 14px 0 10px;
}

.dx-process__desc{
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--dx-muted);
}

/* =========================================================
   RESPONSIVE — dưới 860px: bỏ hẳn bordered-grid, chuyển thành
   timeline dọc (số bên trái, nội dung bên phải, đường kẻ dọc nối
   liên tục). Đây là bố cục rõ ràng nhất cho quy trình nhiều bước
   trên màn hẹp — chỉ 1 đường mắt cần theo dõi từ trên xuống dưới,
   không còn cảm giác "bảng biểu nửa vời" như grid 2 cột có border.
   ========================================================= */
@media (max-width: 860px){
  .dx-process{
    display: block;
    border: none;
    border-radius: 0;
  }

  .dx-process__step{
    display: flex;
    gap: 20px;
    padding: 0 0 32px;
    border-right: none;
    position: relative;
  }
  .dx-process__step:last-child{
    padding-bottom: 0;
  }

  /* Đường kẻ dọc nối tâm khung tròn bước này xuống tâm khung tròn
     bước kế tiếp. Override lại 4 thuộc tính vị trí của rule desktop
     ở trên (cùng selector ::after) — bắt buộc phải đặt SAU rule
     desktop trong file để thắng đúng theo thứ tự CSS. */
  .dx-process__step:not(:last-child)::after{
    top: 40px;
    left: 20px;
    right: auto;
    width: 1px;
    height: calc(100% - 40px + 32px);
  }

  .dx-process__title{
    margin: 2px 0 8px;
  }
}