/* desktop-khoi2.css — Khối 4, 5, 7, 8 & Chân trang
   Tất cả màu dùng var() từ tokens.css. Cấm mã màu thô. */

/* Khối 4 — Điều kiện triển khai (năm ý một dòng, không bảng) */
.dieu-kien-luoi {
  list-style: none; display: flex; flex-direction: column;
  gap: 16px; margin-top: 32px;
}
.dieu-kien__muc {
  display: flex; align-items: center; gap: 24px; padding: 20px 24px;
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
}
.dieu-kien__so {
  font-family: var(--phong-tieu-de); font-size: 24px; font-weight: 700;
  color: var(--vang-sang); flex-shrink: 0;
}
.dieu-kien__chu { font-size: var(--co-van); color: var(--chu); line-height: 1.5; }
#dieu-kien {
  border-top: 1px solid var(--vien);
  padding: 180px 0;
}

/* Khối 5 — Mang về gì (năm nhãn ngắn) */
.mang-ve-luoi {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; margin-top: 24px;
}
.mang-ve__the {
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 18px 12px; text-align: center;
}
.mang-ve__nhan { font-size: 15px; font-weight: 600; color: var(--chu); }
.mang-ve__nhan--chinh { color: var(--vang-sang); }

/* Khối 7 — Người đứng lớp */
.chan-dung-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }
.chan-dung { text-align: center; }
.chan-dung__anh {
  width: 280px; height: 350px; aspect-ratio: 4/5; object-fit: cover; margin: 0 auto 24px;
  border-radius: var(--bo-goc); border: 1px solid var(--vien); display: block;
}
.chan-dung__ten { font-size: var(--co-the); font-weight: 600; margin-bottom: 8px; }
.chan-dung__vai { font-size: 14px; line-height: 1.5; color: var(--chu-phu); margin: 0 auto; max-width: 36ch; }
.chan-dung__xem-them { text-align: center; margin-top: 32px; }
.chan-dung__xem-them a {
  color: var(--vang); font-weight: 600; min-height: 44px;
  display: inline-flex; align-items: center;
}
.chan-dung__xem-them a:hover { color: var(--vang-sang); text-decoration: underline; }
/* Khối 8 — Biểu mẫu tư vấn */
.bieu-mau { display: flex; flex-direction: column; gap: 24px; }
.truong { display: flex; flex-direction: column; gap: 8px; }
.truong__nhan { font-size: 14px; font-weight: 600; color: var(--chu-phu); }
.truong__nhap {
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 14px 16px; color: var(--chu);
  font: inherit; font-size: var(--co-van); min-height: 52px;
  transition: border-color var(--nhanh);
}
.truong__nhap::placeholder { color: var(--vo-hieu); }
.truong__nhap:focus { border-color: var(--vang); outline: 2px solid var(--vang); outline-offset: 2px; }
.bieu-mau__ghi-chu { font-size: var(--co-chu-thich); color: var(--chu-phu); margin-top: 8px; max-width: 480px; }
.lien-ket-chinh-sach { color: var(--vang); min-height: 44px; display: inline-flex; align-items: center; }

/* Chân trang */
.chan-trang {
  background: var(--nen-phu); border-top: 1px solid var(--vien);
  padding: 48px 0; text-align: center;
}
.chan-trang .container { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chan-trang__mien { font-size: var(--co-the); font-weight: 600; color: var(--vang); }
.chan-trang__slogan { color: var(--chu-phu); font-size: var(--co-chu-thich); }
.chan-trang__nav { display: flex; gap: 32px; }
.chan-trang__nav a {
  color: var(--chu-phu); font-size: 14px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.chan-trang__nav a:hover { color: var(--vang); }