/* hinh-quytrinh.css — hình sơ đồ quy trình trong các khối trang chủ.

   Vì sao có tệp này: thầy Sam xem trang live và nói **"chưa đẹp, quá thuần chữ"**.
   Số đo lúc đó: 5 ảnh cho 8 khối — khối 2, 4, 6, 7, 8 không có hình nào.
   Người mua là lãnh đạo, họ đọc bằng cách QUÉT. Khối chỉ có chữ thì họ cuộn qua. */

.hinh-qt {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--vien); border-radius: var(--bo-goc);
  background: var(--nen-phu);
  margin: 28px 0 8px;
}

/* Chú thích dưới hình: nói hình ĐANG NÓI GÌ, không phải tên tệp.
   Người dùng trình đọc màn hình và người tải ảnh lỗi đều đọc được câu này. */
.hinh-qt__chu-thich {
  font-size: var(--co-chu-thich); color: var(--chu-phu);
  margin: 0 0 24px; line-height: 1.6; max-width: 60ch;
}

/* Hình cạnh chữ: hai cột ở máy tính, xếp dọc ở màn hẹp */
.khoi-hinh-chu {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.khoi-hinh-chu .hinh-qt { margin-top: 0; }

/* Hình rộng hết khối — dùng cho sơ đồ một ngày và ba nhánh,
   vì hai hình đó cần chiều ngang mới đọc được thứ tự */
.hinh-qt--rong { max-width: 100%; }

@media (max-width: 900px) {
  .khoi-hinh-chu { grid-template-columns: 1fr; gap: 24px; }
}