/* ============================================================
   AAU — Học viên & Doanh nghiệp (/pages/khach-hang)
   Palette: navy #1b2a4a | gold #c5a880 | cream #faf7f2
   ============================================================ */

.aau-kh {
  --kh-navy: #1b2a4a;
  --kh-navy-2: #142039;
  --kh-gold: #c5a880;
  --kh-gold-2: #b69468;
  --kh-cream: #faf7f2;
  --kh-line: #e5e0d6;
  --kh-text: #2a3147;
  --kh-mute: #6c7080;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--kh-text);
  font-size: 16px;
  line-height: 1.7;
}

.aau-kh img { max-width: 100%; height: auto; display: block; }
.aau-kh__wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.aau-kh-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kh-gold);
  margin: 0 0 14px;
}

.aau-kh-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  color: var(--kh-navy);
  margin: 0 0 18px;
}
.aau-kh-heading--light { color: #fff; }

.aau-kh-sub {
  font-size: 16px;
  color: var(--kh-mute);
  max-width: 760px;
  margin: 0 0 36px;
}
.aau-kh-sub--light { color: rgba(255,255,255,0.78); }

.aau-kh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.aau-kh-btn--primary { background: var(--kh-navy); color: #fff; }
.aau-kh-btn--primary:hover { background: var(--kh-navy-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,42,74,.25); color: #fff; }
.aau-kh-btn--gold { background: var(--kh-gold); color: var(--kh-navy); }
.aau-kh-btn--gold:hover { background: var(--kh-gold-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(197,168,128,.35); color: var(--kh-navy); }
.aau-kh-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.aau-kh-btn--ghost:hover { background: #fff; color: var(--kh-navy); }

/* ---------- 1. Hero ---------- */
.aau-kh-hero { background: var(--kh-navy); color: #fff; padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px); }
.aau-kh-hero__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.14;
  margin: 0 0 20px;
  color: #fff;
}
.aau-kh-hero__intro { font-size: clamp(16px, 1.7vw, 18px); color: rgba(255,255,255,.82); max-width: 780px; margin: 0 0 40px; }
.aau-kh-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  overflow: hidden;
}
.aau-kh-stat { background: var(--kh-navy); padding: 22px 18px; }
.aau-kh-stat__num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--kh-gold);
  line-height: 1.1;
}
.aau-kh-stat__lbl { font-size: 13px; color: rgba(255,255,255,.72); margin-top: 6px; line-height: 1.45; }

/* ---------- 2. Thương hiệu tiêu biểu ---------- */
.aau-kh-brands { background: var(--kh-cream); padding: clamp(48px, 6vw, 80px) 0; }
.aau-kh-brands__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
.aau-kh-brand {
  background: #fff;
  border: 1px solid var(--kh-line);
  border-radius: 12px;
  padding: 18px 14px;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  color: var(--kh-navy);
}
.aau-kh-brands__note { font-size: 14px; color: var(--kh-mute); margin: 0; }

/* ---------- 3. Danh sách theo nhóm ngành ---------- */
.aau-kh-groups { padding: clamp(48px, 6vw, 80px) 0; }
.aau-kh-group { border-top: 1px solid var(--kh-line); padding: 26px 0; }
.aau-kh-group:last-child { border-bottom: 1px solid var(--kh-line); }
.aau-kh-group__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.aau-kh-group__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--kh-navy);
  margin: 0;
}
.aau-kh-group__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kh-gold);
}
.aau-kh-group__list { display: flex; flex-wrap: wrap; gap: 8px; }
.aau-kh-chip {
  background: var(--kh-cream);
  border: 1px solid var(--kh-line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--kh-text);
  line-height: 1.4;
}

.aau-kh-groups__note {
  margin: 26px 0 0;
  font-size: 14.5px;
  color: var(--kh-mute);
  max-width: 820px;
}

/* ---------- 4. Mạng lưới học viên ---------- */
.aau-kh-net { background: var(--kh-navy); color: #fff; padding: clamp(48px, 6vw, 80px) 0; }
.aau-kh-net__top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
}
.aau-kh-net__cols { display: grid; grid-template-columns: 1fr; gap: 34px; }
.aau-kh-net__h {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kh-gold);
  margin: 0 0 14px;
}
.aau-kh-net__p { color: rgba(255,255,255,.8); font-size: 15px; margin: 0 0 18px; }
.aau-kh-net__list { display: flex; flex-wrap: wrap; gap: 8px; }
.aau-kh-net__chip {
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: rgba(255,255,255,.9);
}
.aau-kh-net__countries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.aau-kh-country {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
}
.aau-kh-country span { display: block; font-size: 20px; margin-bottom: 6px; }
.aau-kh-net__foot { margin: 30px 0 0; font-size: 14px; color: rgba(255,255,255,.62); }

/* ---------- 5. Nhận xét ---------- */
.aau-kh-quotes { background: var(--kh-cream); padding: clamp(48px, 6vw, 80px) 0; }
.aau-kh-quotes__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.aau-kh-quote {
  background: #fff;
  border: 1px solid var(--kh-line);
  border-radius: 16px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.aau-kh-quote__mark {
  font-family: 'Montserrat', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--kh-gold);
  margin-bottom: 12px;
}
.aau-kh-quote__text { font-size: 15.5px; color: var(--kh-text); margin: 0 0 20px; flex: 1; }
.aau-kh-quote__who { border-top: 1px solid var(--kh-line); padding-top: 16px; }
.aau-kh-quote__name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--kh-navy); }
.aau-kh-quote__role { font-size: 13px; color: var(--kh-mute); margin-top: 3px; }
.aau-kh-quote__course {
  display: inline-block;
  margin-top: 10px;
  background: var(--kh-cream);
  border: 1px solid var(--kh-line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kh-navy);
}

/* ---------- 6. Hình ảnh lớp học ---------- */
.aau-kh-photos { padding: clamp(48px, 6vw, 80px) 0; }
.aau-kh-photos__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.aau-kh-photo { border-radius: 14px; overflow: hidden; background: var(--kh-cream); aspect-ratio: 4 / 3; }
.aau-kh-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.aau-kh-photo:hover img { transform: scale(1.04); }

/* ---------- 7. CTA ---------- */
.aau-kh-cta { background: var(--kh-navy); color: #fff; padding: clamp(48px, 6vw, 80px) 0; }
.aau-kh-cta__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.aau-kh-cta__card {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.aau-kh-cta__h { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; margin: 0 0 10px; color: #fff; }
.aau-kh-cta__p { color: rgba(255,255,255,.78); font-size: 15px; margin: 0 0 22px; flex: 1; }

/* ---------- Responsive ---------- */
@media (min-width: 700px) {
  .aau-kh-hero__stats { grid-template-columns: repeat(4, 1fr); }
  .aau-kh-brands__grid { grid-template-columns: repeat(4, 1fr); }
  .aau-kh-quotes__grid { grid-template-columns: repeat(2, 1fr); }
  .aau-kh-photos__grid { grid-template-columns: repeat(4, 1fr); }
  .aau-kh-net__countries { grid-template-columns: repeat(5, 1fr); }
  .aau-kh-cta__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .aau-kh-brands__grid { grid-template-columns: repeat(8, 1fr); gap: 10px; }
  .aau-kh-brand { min-height: 92px; font-size: 12.5px; padding: 14px 10px; }
  .aau-kh-net__cols { grid-template-columns: 1fr 1fr; gap: 48px; }
}