/* Mục "Quy trình triển khai hệ thống" ở cuối trang; dùng token màu/chữ khai báo trong styles.css. */
.quy-trinh { padding-block: 48px 64px; border-top: 1px solid var(--ke); scroll-margin-top: 24px; }
.quy-trinh h2 { margin: 8px 0 12px; font: 700 clamp(24px, 3.4vw, 32px)/1.2 var(--font-tieu-de); text-wrap: balance; }
.quy-trinh__loi { margin: 0 0 28px; color: var(--muc-2); max-width: 70ch; }
/* Đếm ở lưới ngoài để số bước chạy liên tục 1→12 qua cả 4 giai đoạn. */
.giai-doan-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: buoc; }
.giai-doan { display: flex; flex-direction: column; padding: 22px 22px 18px; background: var(--giay-2); border: 1px solid var(--ke); border-radius: var(--bo-goc); min-width: 0; }
.giai-doan--goi { border: 1.5px solid var(--tim); box-shadow: 0 0 0 4px var(--tim-nhat); }
.giai-doan__mo-ta { margin: -6px 0 16px; font-size: 14px; color: var(--muc-2); }
.ho-so { margin: 4px 0 14px; padding: 14px 16px; background: var(--tim-nhat); border-radius: 8px; }
.ho-so__tieu-de { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tim); }
.ho-so ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; }
.moc { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--ke); font-size: 13px; color: var(--muc-2); }
.moc b { color: var(--muc); font-weight: 600; }
.giai-doan h3 { margin: 0 0 16px; font: 700 18px/1.3 var(--font-tieu-de); }
.giai-doan h3 span { display: block; margin-bottom: 2px; font: 600 12px var(--font-than); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tim); }
.giai-doan ol { list-style: none; margin: 0; padding: 0; }
.buoc { position: relative; padding: 0 0 18px 38px; counter-increment: buoc; }
.buoc::before {
  content: counter(buoc);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 12px var(--font-than); font-variant-numeric: tabular-nums;
  color: var(--muc); background: var(--giay-3); border: 1px solid var(--ke);
}
.buoc:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: var(--ke); }
.buoc--hien-tai::before { color: var(--tren-tim); background: var(--tim); border-color: var(--tim); }
.buoc h4 { margin: 2px 0 4px; font-size: 15px; line-height: 1.35; }
.buoc p { margin: 0 0 4px; font-size: 14px; color: var(--muc-2); }
.buoc b { color: var(--muc); font-weight: 600; }
.dang-o {
  display: inline-block; margin-left: 6px; padding: 1px 8px; vertical-align: 1px;
  font: 600 11px var(--font-than); font-style: normal;
  color: var(--tim); background: var(--tim-nhat); border-radius: 999px;
}

@media (max-width: 600px) {
  .giai-doan-luoi { grid-template-columns: minmax(0, 1fr); }
}