/* giang-vien-khoi.css — Khối 2-8 trang người đứng lớp AI@Work.
   Mọi màu qua biến tokens.css. Bội số khoảng cách là 4. Viền 1px. */
.khoi { padding: 80px 0; border-bottom: 1px solid var(--vien); }
.khoi--phu { background: var(--nen-phu); }

/* Khối 2: Khách hàng tiêu biểu */
.ds-khach-hang {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 780px; margin: 32px auto 0;
}
.dong-khach-hang {
  background: var(--nen); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 16px 20px;
  font-size: 16px; line-height: 1.5;
}
.dong-khach-hang__ten { color: var(--chu); font-weight: 600; }
.dong-khach-hang__mo-ta { color: var(--chu-phu); }

/* Khối 3: Bốn số đánh giá */
.bang-bon-so {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px;
}
.the-so {
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 24px 16px; text-align: center;
}
.the-so__so {
  font-family: var(--phong-tieu-de); font-size: 48px; line-height: 1.15;
  font-weight: 700; color: var(--vang-sang); display: block; margin-bottom: 8px;
}
.the-so__mau {
  font-family: var(--phong); font-size: 14px; line-height: 1.5;
  color: var(--chu-phu); display: block;
}
.khoi__nguon {
  font-size: 14px; line-height: 1.5; color: var(--chu-phu);
  font-style: italic; margin-top: 24px; text-align: center;
}
/* Dòng nguồn đặt TRÊN bảng số: phải đọc trước khi đọc số, nên bỏ lề trên và
   thêm lề dưới. Khối khách hàng nằm liền trên, không nói nguồn trước thì người đọc
   tự nối bốn số này với các tên công ty vừa đọc. */
.khoi__nguon--tren { margin-top: 8px; margin-bottom: 8px; }

/* Khối 4: Ba điều học viên nhắc */
.ds-dong-nhac {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 680px; margin: 32px auto 0;
}
.dong-nhac {
  display: flex; align-items: center; gap: 20px; background: var(--nen);
  border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 16px 24px;
}
.dong-nhac__icon-hop {
  width: 44px; height: 44px; border-radius: 8px; background: var(--nen-phu);
  border: 1px solid var(--vien); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: var(--vang);
}
.dong-nhac__nd { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.dong-nhac__so {
  font-family: var(--phong-tieu-de); font-size: 28px; font-weight: 700;
  color: var(--vang-sang); min-width: 80px; flex-shrink: 0;
}
.dong-nhac__chu { font-size: 16px; line-height: 1.5; color: var(--chu); }
.dong-nhac__chu strong { color: var(--chu); font-weight: 600; }

/* Khối 5: Chủ đề giảng 2 cột */
.chu-de-luoi {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
  max-width: 960px; margin: 32px auto 0;
}
.the-chu-de {
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 32px 28px;
}
.the-chu-de__ten {
  font-family: var(--phong-tieu-de); font-size: 24px; line-height: 1.3;
  font-weight: 700; color: var(--vang-sang); margin: 0 0 20px;
}
.chu-de-ds {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.chu-de-muc {
  position: relative; padding-left: 20px;
  font-size: 16px; line-height: 1.5; color: var(--chu);
}
.chu-de-muc::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--vang);
}

/* Khối 6: Ảnh đứng lớp */
.anh-thuc-te-luoi {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px;
}
.the-anh-sk {
  background: var(--nen); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); overflow: hidden; margin: 0; padding: 0;
}
.the-anh-sk__img {
  width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block;
}
.the-anh-sk__chu-thich {
  font-size: 14px; line-height: 1.5; color: var(--chu-phu);
  padding: 12px 16px; text-align: center; font-style: italic; margin: 0;
}

/* Khối 7: Cam kết */
.cam-ket-ds {
  list-style: none; display: flex; flex-direction: column; gap: 16px;
  max-width: 680px; margin: 32px auto 0; padding: 0;
}
.cam-ket-muc {
  display: flex; align-items: center; gap: 16px; background: var(--nen-phu);
  border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 16px 20px;
}
.cam-ket-icon { color: var(--vang); flex-shrink: 0; }
.cam-ket-chu { font-size: 16px; line-height: 1.5; color: var(--chu); }

/* Khối 8: Đặt tư vấn & Chân trang */
.cta-gv {
  display: flex; justify-content: center; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.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: 24px; flex-wrap: wrap; justify-content: center; }
.chan-trang__nav a {
  color: var(--chu-phu); font-size: 14px; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 8px;
}
.chan-trang__nav a:hover { color: var(--vang); }

@media (max-width: 768px) {
  .khoi { padding: 64px 0; }
  .bang-bon-so { grid-template-columns: 1fr; gap: 16px; }
  .anh-thuc-te-luoi { grid-template-columns: 1fr; gap: 20px; }
  .chu-de-luoi { grid-template-columns: 1fr; gap: 20px; }
  .dong-nhac { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dong-nhac__nd { flex-direction: column; gap: 4px; }
  .dong-nhac__so { min-width: unset; }
  .cta-gv { flex-direction: column; width: 100%; gap: 12px; }
  .cta-gv .nut { width: 100%; white-space: nowrap; }
}