/* ============================================================
   KHOÁ HỌC — hub /khoa-hoc + chi tiết /khoa-hoc/tieng-duc-{lv}
   Port từ designs/redesign/khoa-hoc.html + khoa-hoc-chi-tiet.html
   Token dùng từ home-pne.css (--red, --bg-soft, --ff…)
   ============================================================ */

body.kh-page { background: var(--bg); }

.kh-wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.kh-wrap-narrow { max-width: 1020px; margin: 0 auto; padding: 0 40px; }

.de-badge {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: #5F4800; background: #FFCC00;
  padding: 2px 9px; border-radius: 6px;
  margin-left: 6px; vertical-align: middle;
}

/* ── HUB · HEAD ─────────────────────────────────────────── */
.kh-head { text-align: center; padding: 46px 0 30px; }
.kh-head h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800; letter-spacing: -.03em;
}
.kh-head h1 em { font-style: normal; color: var(--red); }
.kh-head p {
  font-size: 15.5px; color: var(--text-2);
  margin: 12px auto 0; max-width: 580px; line-height: 1.6;
}
.kh-trust {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin-top: 20px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
}
.kh-trust span { display: inline-flex; align-items: center; gap: 7px; }
.kh-trust i { color: var(--red); font-size: 16px; }

/* ── HUB · JOURNEY (lộ trình A1→C1) ────────────────────── */
.jr {
  margin: 10px 0 14px;
  padding: 26px 28px 30px;
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
}
.jr-cap {
  text-align: center;
  font: 700 12px var(--ff);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 20px;
}
.jr-track { display: flex; align-items: flex-start; position: relative; }
.jr-track::before {
  content: '';
  position: absolute; top: 24px; left: 7%; right: 7%; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #FACFD1 0%, #EB6E72 45%, var(--red) 100%);
}
.jr-step {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  position: relative; z-index: 1;
  text-align: center; cursor: pointer;
  background: none; border: 0;
  font-family: var(--ff);
}
.jr-dot {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff;
  border: 2.5px solid #EB6E72;
  color: var(--red);
  font: 800 15px var(--ff);
  display: flex; align-items: center; justify-content: center;
  transition: .18s;
}
.jr-step:hover .jr-dot {
  transform: translateY(-3px);
  box-shadow: var(--sh-red);
  background: var(--red); border-color: var(--red); color: #fff;
}
.jr-lbl { font: 700 12.5px var(--ff); color: var(--text); }
.jr-sub { font-size: 11px; color: var(--text-2); line-height: 1.35; max-width: 130px; }

/* ── PROMO (Gold Wash) ─────────────────────────────────── */
.kh-promo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(100deg, #FFEB99, #FFFFFF 70%);
  border: 1px solid #FFDF55;
  border-radius: var(--r-m);
  padding: 14px 20px;
  margin-top: 14px;
}
.kh-promo i.lead { font-size: 24px; color: #7C6500; flex: none; }
.kh-promo .tx { flex: 1; min-width: 260px; font-size: 13.5px; line-height: 1.5; }
.kh-promo .tx b { color: #931518; }
.kh-promo .pills { display: flex; gap: 8px; flex-wrap: wrap; }
.kh-promo .pills span {
  font-size: 11.5px; font-weight: 800;
  color: #5F4800; background: #fff;
  border: 1px solid #FFDF55;
  border-radius: 99px;
  padding: 5px 11px; white-space: nowrap;
}

/* ── HUB · SHOWCASE 5 trình độ ─────────────────────────── */
.show-zone { display: flex; flex-direction: column; gap: 26px; padding: 26px 0 8px; }
.show {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-s);
  overflow: hidden;
  display: grid;
  grid-template-columns: 430px 1fr;
  /* Khoá height tối thiểu để layout giữ chỗ trước khi ảnh tải — chống CLS.
     Hạ 330→270: thẻ gọn theo mockup, ảnh cao bằng nội dung, hết hở giữa. */
  min-height: 270px;
  grid-auto-rows: minmax(270px, 1fr);
  transition: .2s;
}
.show:hover { box-shadow: var(--sh-m); }
.show.flip { grid-template-columns: 1fr 430px; }
.show.flip .show-photo { order: 2; }
.show.flip .show-body { order: 1; }
.show.hot { border-color: var(--red-border); box-shadow: var(--sh-m); }
.show.hot::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--red), #E04146);
  z-index: 2;
}

.show-photo {
  position: relative;
  /* Phủ ĐẦY chiều cao hàng grid: khi cột nội dung cao hơn, ảnh giãn theo → KHÔNG hở trắng dưới ảnh.
     Bỏ aspect-ratio cố định (430/330) vì nó khoá ảnh ở ~330px gây khoảng hở. */
  height: 100%; align-self: stretch;
  min-height: 270px;
  aspect-ratio: auto;
}
.show-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.show-photo::after {
  content: ''; position: absolute; inset: auto 0 0 0;
  height: 52%; background: linear-gradient(transparent, rgba(0,0,0,.62));
}
.ph-cap {
  position: absolute; left: 16px; bottom: 14px; right: 16px; z-index: 1;
  color: #fff; font-size: 12px; font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

.show-body {
  position: relative;
  padding: 30px 34px 28px;
  display: flex; flex-direction: column;
  /* Căn nội dung giữa theo chiều dọc → cân với ảnh, hết cảm giác trống khi thẻ cao hơn nội dung. */
  justify-content: center;
}
.wm {
  position: absolute; right: 14px; top: -16px;
  font-size: 148px; font-weight: 900; letter-spacing: -.05em;
  color: rgba(209,32,38,.05);
  line-height: 1;
  pointer-events: none; user-select: none;
}
.sb-top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.sb-lv {
  font-size: 15px; font-weight: 800;
  color: var(--red); background: var(--red-light);
  border-radius: 11px;
  padding: 8px 13px;
}
.sb-top h2 {
  font-size: clamp(21px, 2.5vw, 27px);
  font-weight: 800; letter-spacing: -.02em;
}
.sb-who {
  font-size: 13px; color: var(--text-2);
  margin-top: 8px;
  display: flex; align-items: center; gap: 7px;
}
.sb-who i { color: var(--text-3); }
.sb-desc {
  font-size: 14px; color: var(--text); line-height: 1.62;
  margin-top: 11px; max-width: 540px;
}
.sb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.sb-chips span {
  font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: 99px;
  padding: 5px 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.sb-chips i { color: var(--red); font-size: 13px; }
.sb-chips .gold { background: #FFEB99; border-color: #FFDF55; color: #5F4800; }
.sb-chips .gold i { color: #7C6500; }

.sb-foot {
  /* Bỏ margin-top:auto — foot nằm NGAY sau mô tả/chips (không bị đẩy xuống đáy tạo hở giữa).
     Nội dung tự căn giữa dọc nhờ .show-body { justify-content:center }. */
  padding-top: 18px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.sb-plans { display: flex; gap: 22px; }
.sb-plan .k {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3);
  display: flex; align-items: center; gap: 5px;
}
.sb-plan .k i { font-size: 13px; }
.sb-plan .v { font-size: 18px; font-weight: 800; letter-spacing: -.015em; margin-top: 3px; }
.sb-plan .u { font-size: 11px; color: var(--text-2); font-weight: 600; }
.sb-plan[title] { cursor: help; }
.sb-info { font-size: 12px; color: var(--text-3); margin-left: 2px; vertical-align: middle; }
.sb-acts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 9px; }

/* Hub thẻ cấp độ v2 (13/06): 1 CTA chính "Xem lịch & đăng ký" + 1 dòng nhỏ 2 lựa chọn */
.sb-acts-v2 { flex-direction: column; gap: 8px; align-items: flex-end; }
.sb-cta-main { font-size: 14px; padding: 13px 22px; }
.sb-mode-line {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-2);
}
.sb-mode-line .lbl { font-weight: 600; color: var(--text-3); }
.sb-mode-line a {
  color: var(--text); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  border-bottom: 1px dashed var(--border-s);
  transition: color .15s, border-color .15s;
}
.sb-mode-line a:hover { color: var(--red); border-color: var(--red); }
.sb-mode-line a i { font-size: 13px; color: var(--text-3); }
.sb-mode-line a:hover i { color: var(--red); }

/* 2 lối vào: Học tại trung tâm vs Học online — bên cạnh nút "Lịch [LV]" */
.sb-modes {
  display: flex; gap: 8px; flex: 1;
}
.sb-mode {
  flex: 1;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--red-border);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  transition: .15s;
  white-space: nowrap;
}
.sb-mode i { font-size: 22px; color: var(--red); flex: 0 0 auto; }
.sb-mode span { display: flex; flex-direction: column; line-height: 1.2; }
.sb-mode b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.sb-mode em { font-size: 11.5px; font-weight: 500; color: var(--text-3); font-style: normal; margin-top: 2px; }
.sb-mode.is-offline { background: var(--red); border-color: var(--red); box-shadow: var(--sh-red); }
.sb-mode.is-offline i { color: #fff; }
.sb-mode.is-offline b { color: #fff; }
.sb-mode.is-offline em { color: rgba(255,255,255,.85); }
.sb-mode.is-offline:hover { background: var(--red-deep); transform: translateY(-1px); }
.sb-mode.is-online:hover { background: var(--red-light); border-color: var(--red); transform: translateY(-1px); }

.btn-go {
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: var(--red);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: var(--sh-red);
  transition: .15s;
  white-space: nowrap;
}
.btn-go:hover { background: var(--red-deep); transform: translateY(-1px); }
.btn-lich {
  font-size: 13.5px; font-weight: 700; color: var(--red);
  background: #fff;
  border: 1px solid var(--red-border);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: .15s;
  white-space: nowrap;
}
.btn-lich:hover { background: var(--bg-soft); }

/* ── Section "Vì sao học [offline|online]" — chống cannibalization SEO ──
   Tô màu rất nhẹ theo mode để A1 offline vs A1 online phần thân nhìn khác nhau rõ,
   nhưng KHÔNG đè chữ. Gradient fade nhanh + opacity nhẹ, padding-top rộng để badge
   và heading có khoảng thở từ mép đỏ/xanh. */
.kh-fmt {
  border-radius: var(--r-xl);
  padding: 44px 28px 32px;
  margin-top: 32px;
}
.kh-fmt.is-offline {
  background: linear-gradient(180deg, rgba(209, 32, 38, 0.06), #fff 50%);
  border: 1px solid rgba(209, 32, 38, 0.18);
}
.kh-fmt.is-online {
  background: linear-gradient(180deg, rgba(44, 82, 130, 0.05), #fff 50%);
  border: 1px solid #D9E2EF;
}
.kh-fmt-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.kh-fmt-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 99px;
  width: fit-content;
}
.kh-fmt.is-offline .kh-fmt-tag { color: var(--red); background: #fff; border: 1px solid var(--red-border); }
.kh-fmt.is-online .kh-fmt-tag { color: #2C5282; background: #fff; border: 1px solid #B6CCE3; }
.kh-fmt-tag i { font-size: 14px; }
.kh-fmt h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.kh-fmt-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-bottom: 22px;
}
.kh-fmt-card {
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 18px;
}
.kh-fmt-card i { font-size: 24px; color: var(--red); }
.kh-fmt.is-online .kh-fmt-card i { color: #2C5282; }
.kh-fmt-card b { display: block; font-size: 15px; font-weight: 700; margin: 10px 0 6px; }
.kh-fmt-card span { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.kh-fmt-faq { display: flex; flex-direction: column; gap: 10px; }
.kh-fmt-faq details {
  background: #fff; border: 1px solid var(--border-s); border-radius: var(--r-m);
  padding: 14px 18px;
}
.kh-fmt-faq summary {
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.kh-fmt-faq summary::-webkit-details-marker { display: none; }
.kh-fmt-faq summary::after {
  content: '\eaa1'; font-family: 'tabler-icons';
  font-size: 18px; color: var(--text-3); transition: transform .2s;
}
.kh-fmt-faq details[open] summary::after { transform: rotate(180deg); }
.kh-fmt-faq .a { margin-top: 10px; font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* ── ÖSD BAND (Gold Wash full-bleed) ───────────────────── */
.osd-band {
  margin-top: 46px;
  background: linear-gradient(100deg, #FFEB99, #FFFFFF 65%);
  border-top: 1px solid #FFDF55;
  border-bottom: 1px solid #FFDF55;
}
.osd-band .osd-in {
  max-width: 1080px; margin: 0 auto;
  padding: 44px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px;
  align-items: center;
}
.osd-band h2 {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800; letter-spacing: -.02em;
  margin-top: 10px;
}
.osd-band p {
  font-size: 14px; color: var(--text); line-height: 1.65;
  margin-top: 10px; max-width: 520px;
}
.osd-band .osd-pts {
  display: flex; flex-direction: column; gap: 11px;
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  box-shadow: var(--sh-s);
  padding: 22px 24px;
}
.osd-band .osd-pts div {
  display: flex; gap: 10px;
  font-size: 13.5px;
  align-items: flex-start;
  font-weight: 600;
}
.osd-band .osd-pts i { color: var(--red); font-size: 16px; flex: none; margin-top: 1px; }

/* (3) Banner Online đã bỏ — CSS .kh-online-banner dọn theo. */

/* ── HUB · SPECIAL cards (1 kèm 1 + GV người Đức) ──────── */
.sp-zone {
  padding: 46px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}
.sp-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  padding: 22px 24px;
  display: flex; gap: 15px;
  align-items: flex-start;
  transition: .18s;
}
.sp-card:hover { border-color: var(--red-border); box-shadow: var(--sh-s); }
.sp-card .ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--red-light); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex: none;
}
.sp-card b { font-size: 15px; display: block; }
.sp-card span { font-size: 13px; color: var(--text-2); line-height: 1.55; display: block; margin-top: 5px; text-wrap: pretty; }
.sp-card a {
  font-size: 13px; font-weight: 700; color: var(--red);
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px;
}

/* ── HUB · ECO grid (3 công cụ số) ─────────────────────── */
.eco { margin-top: 46px; }
/* (4) Đầu khối eco: Pi trang trí cạnh tiêu đề (căn giữa cả cụm). */
.eco-head { display: flex; align-items: center; justify-content: center; gap: 16px; }
.eco-pi { width: 84px; height: 84px; flex: none; object-fit: contain; }
.eco-head-tx { min-width: 0; }
.eco-head h2 {
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: 800; letter-spacing: -.02em;
  text-align: center;
}
/* #170: tiêu đề eco bấm được → /he-sinh-thai. Chỉ thêm LIÊN KẾT, KHÔNG đổi màu/cỡ/độ đậm; không gạch chân. */
.eco-head h2 .eco-title-link {
  color: inherit; text-decoration: none;
  display: inline; /* để tiêu đề vẫn xuống dòng tự nhiên trên màn hẹp */
  transition: color .15s;
}
.eco-title-arr {
  font-size: .85em; color: var(--red);
  vertical-align: baseline; margin-left: 4px;
  transition: transform .15s;
}
.eco-head h2 .eco-title-link:hover { color: var(--red); }
.eco-head h2 .eco-title-link:hover .eco-title-arr { transform: translateX(3px); }
.eco-head h2 .eco-title-link:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px;
}
.eco-head .sub {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-2);
  margin-top: 7px;
}
.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.eco-card {
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  box-shadow: var(--sh-xs);
  padding: 20px;
  transition: .18s;
}
.eco-card:hover { box-shadow: var(--sh-s); transform: translateY(-2px); }
.eco-card .ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--red-light); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.eco-card b { display: block; font-size: 14px; margin: 11px 0 5px; }
/* span mô tả thành BLOCK để badge .free luôn rơi xuống dòng riêng (không dính cuối chữ).
   .free giữ inline-flex nhờ specificity cao hơn (.eco-card .free). text-wrap: pretty chống orphan. */
.eco-card span { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.eco-card .free {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: #5F4800;
  background: #FFEB99;
  border-radius: 99px;
  padding: 3px 9px;
}

.kh-end-cta {
  margin: 30px 0 70px;
  background: #F7F7F8;
  border: 1px solid var(--border-s);
  border-left: 4px solid var(--red);
  border-radius: var(--r-m);
  padding: 18px 22px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.kh-end-cta i.lead { font-size: 26px; color: var(--red); }
.kh-end-cta .tx { flex: 1; min-width: 220px; font-size: 13.5px; }
.kh-end-cta .tx b { color: var(--red); }

/* ============================================================
   CHI TIẾT — /khoa-hoc/tieng-duc-{lv}
   ============================================================ */
.crumb { font-size: 12.5px; color: var(--text-3); padding: 22px 0 0; }
.crumb a { color: var(--text-2); font-weight: 600; }
.crumb a:hover { color: var(--red); }

/* HERO */
.cth-c {
  position: relative;
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: 40px; align-items: stretch; /* ảnh phủ đều chiều cao cột info — không hở đáy (A1/A2 nội dung ngắn) */
  padding: 26px 0 44px;
}
/* Cột info canh giữa theo chiều dọc để cân với ảnh khi nội dung ngắn */
.cth-c > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.cth-c .wm {
  position: absolute; left: 46%; bottom: 6px;
  font-size: 150px; font-weight: 900; letter-spacing: -.05em;
  color: rgba(209,32,38,.05);
  line-height: 1;
  pointer-events: none; user-select: none;
}
/* Chip "thông tin" hero — nền nhạt/phẳng, đọc như điểm nổi bật, KHÔNG giống nút bấm */
.mode-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: 8px;
  padding: 6px 11px;
}
.mode-chip i { color: var(--red); font-size: 15px; }
.cth-c .lv {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.cth-c .lv b {
  font-size: 15px; font-weight: 800; color: var(--red);
  background: var(--red-light);
  border-radius: 11px;
  padding: 9px 14px;
  flex: none;
}
/* "Dành cho ai" nằm ngang badge trình độ (xuống dòng được trên mobile) */
.cth-c .lv-who { font-size: 14px; font-weight: 500; color: var(--text-2); }
.cth-c h1 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800; letter-spacing: -.025em;
}
.cth-c .who { font-size: 14px; color: var(--text-2); margin-top: 8px; }
.cth-c p.d {
  font-size: 14.5px; color: var(--text);
  line-height: 1.65; margin-top: 14px;
}
.miles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* Chip điểm nổi bật — làm NHẸ/PHẲNG (bỏ nền vàng đậm) để không giống nút, nhường CTA nổi */
.mile {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: 8px;
  padding: 6px 11px;
}
.mile i { color: #7C6500; font-size: 15px; } /* icon vàng nhỏ — giữ chất "tiếng Đức" mà không đổ mảng vàng */
/* Tách rõ nhóm CHIP (thông tin) với nhóm NÚT (hành động): khoảng cách lớn hơn */
.cth-acts { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.btn-sched {
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: var(--red);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: var(--sh-red);
  transition: .15s;
}
.btn-sched:hover { background: var(--red-deep); }
.btn-ask {
  font-size: 13.5px; font-weight: 700; color: var(--red);
  background: #fff;
  border: 1px solid var(--red-border);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 18px;
  border-radius: 10px;
  transition: .15s;
}
.btn-ask:hover { background: var(--bg-soft); }
/* Nút "Học thử lớp live miễn phí" (A1 Online) — nổi bật bằng vàng dịch vụ tiếng Đức, đồng cấp CTA chính */
.btn-hocthu {
  font-size: 14.5px; font-weight: 800; color: #5F4800;
  background: var(--gold);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 22px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(255, 204, 0, .45);
  transition: .15s;
}
.btn-hocthu:hover { background: #FFDF55; }
/* Link chữ phụ "hoặc Đăng ký tư vấn →" — nút thứ 3 hạ thành link, không loãng */
.cth-acts-alt { margin-top: 11px; font-size: 13px; }
.cth-acts-alt a {
  color: var(--red); font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
}
.cth-acts-alt a:hover { text-decoration: underline; }

.cth-img {
  position: relative;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-m);
}
.cth-img img {
  width: 100%; height: 100%; min-height: 340px;
  object-fit: cover; display: block;
}
.cth-img .cap {
  position: absolute; left: 16px; bottom: 13px; right: 16px;
  color: #fff; font-size: 12px; font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  z-index: 1;
}
.cth-img::after {
  content: ''; position: absolute; inset: auto 0 0 0;
  height: 42%; background: linear-gradient(transparent, rgba(0,0,0,.5));
}

/* PLANS row (2 hình thức lớp) */
.plans-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.plans-row.solo { grid-template-columns: 1fr; max-width: 480px; }
.plan {
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  box-shadow: var(--sh-xs);
  padding: 20px 22px;
}
.plan-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.plan-head .nm { font-size: 15.5px; font-weight: 800; }
.pace {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
}
.pace-fast { background: #FFEB99; color: #5F4800; }
.pace-normal { background: #F1F1F1; color: #5D5D5F; }
.plan-meta {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13.5px;
}
.plan-meta div { display: flex; align-items: center; gap: 9px; }
.plan-meta i { color: var(--text-3); font-size: 16px; width: 18px; text-align: center; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 13px; }
.plan-price b { font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.plan-price .unit { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.plan-note { font-size: 12px; color: var(--text-2); margin-top: 4px; }

/* Sections chung trên trang chi tiết */
.kh-sec { padding: 44px 0 0; }
.kh-sec.kh-fmt { padding: 44px 28px 32px; }
.kh-sec h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 18px;
}

/* OUTCOMES */
.out-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px;
}
.out-grid div {
  display: flex; gap: 10px;
  font-size: 13.5px; line-height: 1.55;
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 13px 16px;
}
.out-grid i { color: var(--red); font-size: 17px; flex: none; margin-top: 1px; }

/* CURRICULUM accordion (server-render đầy đủ; chỉ đóng/mở bằng CSS/JS) */
.cur {
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  overflow: hidden;
  background: #fff;
}
.cur-part { border-bottom: 1px solid var(--border-s); }
.cur-part:last-child { border-bottom: none; }
.cur-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  background: #fff;
  transition: .15s;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: var(--ff);
}
.cur-head:hover { background: var(--bg-soft); }
.cur-head .tag {
  font-size: 13px; font-weight: 800; color: var(--red);
  background: var(--red-light);
  border-radius: 8px;
  padding: 5px 11px;
}
.cur-head b { font-size: 14.5px; flex: 1; }
.cur-head .n { font-size: 12px; color: var(--text-3); }
.cur-head i.chev { color: var(--text-3); transition: transform .2s; }
.cur-part.open .cur-head i.chev { transform: rotate(180deg); }
.cur-body { display: none; padding: 4px 20px 18px; }
.cur-part.open .cur-body { display: block; }
.les {
  display: flex; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border-s);
  font-size: 13px;
}
.les:last-child { border-bottom: none; }
.les .no { font-weight: 800; color: var(--text-3); width: 22px; flex: none; }
.les b, .les h3 { display: block; font-size: 13px; font-weight: 700; }   /* #162-A: h3 tên bài giữ y hệt <b> cũ (13px/bold, margin:0 từ reset *) */
.les span { color: var(--text-2); display: block; margin-top: 2px; line-height: 1.5; }

/* ECO strip ngang */
/* Hệ sinh thái — 3 thẻ icon-box gọn trong khối nền nhạt (không trơ, không rớt chữ) */
.eco-strip {
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  background: var(--bg-soft);
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.eco-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border-s);
  border-radius: var(--r-m); padding: 14px 16px;
}
.eco-ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-light); color: var(--red); font-size: 20px;
}
.eco-tx { min-width: 0; }
.eco-tx b { font-size: 13px; display: block; }
.eco-tx span { font-size: 11.5px; color: var(--text-2); line-height: 1.5; display: block; margin-top: 3px; text-wrap: pretty; }

/* RELATED — prev/next + back to hub */
.rel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 6px;
}
.rel a {
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  transition: .15s;
}
.rel a:hover { border-color: var(--red-border); box-shadow: var(--sh-s); }
/* Thẻ cấp tiếp theo = hành động chính → nền/viền đỏ nhạt, nổi hơn */
.rel a.rel-next { border-color: var(--red-border); background: linear-gradient(120deg, var(--red-light), #fff 70%); }
.rel a.rel-next:hover { box-shadow: var(--sh-m); }
.rel a.rel-next .lv2 { background: var(--red); color: #fff; }
.rel a.rel-next > i.ti { color: var(--red); }
/* Thẻ "Tất cả khoá học" = phụ → để nhẹ */
.rel a.rel-back { background: var(--bg-soft); }
.rel .lv2 {
  font-weight: 800; color: var(--red);
  background: var(--red-light);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 14px;
  flex: none;
}
.rel .tt { flex: 1; min-width: 0; }
.rel .tt b { font-size: 14px; display: block; }
.rel .tt span { font-size: 12px; color: var(--text-2); }
.rel .rel-kick {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--red);
  margin-bottom: 2px;
}
.rel i { color: var(--text-3); }

/* ── Lịch khai giảng NHÚNG (bản gọn) — port khoa-hoc-lich-embed.html ──────
   Trình độ + hình thức đã cố định ở tiêu đề trang → bỏ filter + badge cấp độ.
   Prefix khlich- riêng (KHÔNG scope .lkg-page để ăn style trong .kh-page). */
.khlich-slots { display: flex; flex-direction: column; gap: 12px; }
.khlich-slot {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 14px 18px; align-items: center;
  background: #fff; border: 1px solid var(--border-s); border-radius: 14px;
  padding: 16px 18px;
}
.khlich-slot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.khlich-slot.fast::before { background: var(--gold); }
.khlich-slot.normal::before { background: #C7C7C8; }
.khlich-slot.weekend::before { background: var(--red); }
.khlich-main { min-width: 0; }
.khlich-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.khlich-pace {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px;
}
.khlich-pace i { font-size: 13px; }
.khlich-pace.fast { background: var(--gold); color: #3A2B00; }
.khlich-pace.normal { background: #EEF1F4; color: #475160; }
.khlich-pace.weekend { background: var(--red-light); color: var(--red-deep); }
.khlich-scope { font-size: 12.5px; color: var(--text-2); }

/* ĐIỂM NHẤN 1: KHUNG GIỜ */
.khlich-time {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFEB99; color: #5F4800;
  font-weight: 800; font-size: 15px; padding: 7px 13px; border-radius: 11px;
}
.khlich-time i { font-size: 17px; color: #B8860B; }
.khlich-time .sep { opacity: .5; font-weight: 600; }

.khlich-meta { color: var(--text-2); font-size: 12.5px; margin-top: 7px; display: flex; gap: 14px; flex-wrap: wrap; }
.khlich-meta span { display: inline-flex; align-items: center; gap: 5px; }
.khlich-meta i { color: var(--text-3); }

/* ĐIỂM NHẤN 2: NGÀY KHAI GIẢNG */
.khlich-dwrap { margin-top: 11px; }
.khlich-dwrap .k { font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.khlich-dwrap .k.khlich-empty { color: var(--text-3); }
.khlich-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.khlich-chip {
  font: 700 12.5px var(--ff); color: var(--text);
  border: 1.5px solid var(--border-s); background: #fff;
  border-radius: 9px; padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: .12s;
}
.khlich-chip:hover { border-color: var(--red); color: var(--red); }
.khlich-chip.sel { border-color: var(--red); background: var(--red-light); color: var(--red-deep); }
.khlich-more { font-size: 11.5px; color: var(--text-2); }

.khlich-cta { text-align: right; }
.khlich-reg {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--red); color: #fff;
  font-weight: 700; font-size: 13.5px; padding: 10px 16px; border-radius: 11px;
  text-decoration: none; white-space: nowrap; transition: .15s;
}
.khlich-reg:hover { background: var(--red-deep); }

.lich-embed-foot {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
}
.lich-embed-foot a { color: var(--red); font-weight: 700; }

/* Nút "Xem tất cả" bung hết đợt còn lại ngay trong trang khoá (Alpine) */
.lkg-embed-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  align-self: center; margin-top: 4px;
  font: 700 13.5px var(--ff); color: var(--red);
  background: #fff; border: 1px solid var(--red-border);
  border-radius: 10px; padding: 11px 20px; cursor: pointer; transition: .15s;
}
.lkg-embed-more:hover { background: var(--red-light); }

@media (max-width: 680px) {
  .khlich-slot { grid-template-columns: 1fr; gap: 12px; }
  .khlich-cta { text-align: left; }
}

/* ============================================================
   LUYEN THI ÖSD — /khoa-hoc/luyen-thi-osd (Giai đoạn 2)
   ============================================================ */

.lth-card {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--border-s);
  border-top: 8px solid #FFCC00;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-m);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  overflow: hidden;
}
.lth-bd { padding: 36px 38px; }
.lth-bd h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800; letter-spacing: -.028em;
  margin-top: 12px;
}
.lth-bd h1 em { font-style: normal; color: var(--red); }
.lth-bd p.d {
  font-size: 14.5px; color: var(--text);
  line-height: 1.65; margin-top: 14px;
}
.lv-chips { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.lv-chips span {
  font-size: 13px; font-weight: 800; color: var(--red);
  background: var(--red-light);
  border-radius: 9px;
  padding: 7px 13px;
}
.lth-acts { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.btn-line {
  font-size: 13.5px; font-weight: 700; color: var(--red);
  background: #fff;
  border: 1px solid var(--red-border);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: .15s;
}
.btn-line:hover { background: var(--bg-soft); }

.lth-ph { position: relative; }
.lth-ph img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lth-ph .cap {
  position: absolute; left: 16px; bottom: 13px; right: 16px;
  z-index: 1;
  color: #fff; font-size: 12px; font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.lth-ph::after {
  content: ''; position: absolute; inset: auto 0 0 0;
  height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.55));
}

.lth-sec { padding: 44px 0 0; }
.lth-sec > h2 {
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 6px;
}
.lth-sec > p.sub {
  font-size: 13.5px; color: var(--text-2);
  margin-bottom: 18px; max-width: 560px;
}

/* Lợi thế "sân nhà" */
.adv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.adv > div {
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 18px;
}
.adv i { font-size: 24px; color: var(--red); }
.adv b { display: block; font-size: 14px; margin: 10px 0 5px; }
.adv span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* chứng chỉ dùng làm gì */
.cert {
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  overflow: hidden;
  background: #fff;
}
.cert-row {
  display: grid;
  grid-template-columns: 70px 1fr 1.2fr;
  gap: 16px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-s);
}
.cert-row:last-child { border-bottom: none; }
.cert-row .lv {
  font-size: 14px; font-weight: 800; color: var(--red);
  background: var(--red-light);
  border-radius: 9px;
  padding: 8px 0;
  text-align: center;
}
.cert-row b { font-size: 13.5px; }
.cert-row .use {
  font-size: 12.5px; color: var(--text-2);
  display: flex; align-items: center; gap: 7px;
}
.cert-row .use i { color: #7C6500; font-size: 15px; }

/* 4 kỹ năng */
.skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.skills > div {
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 18px;
  box-shadow: var(--sh-xs);
}
.skills .ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #FFEB99; color: #5F4800;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.skills b { display: block; font-size: 14px; margin: 10px 0 5px; }
.skills span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* quy trình 4 bước (counter) */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  counter-reset: st;
  margin-top: 22px;
}
.steps > div {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 18px;
}
.steps > div::before {
  counter-increment: st;
  content: counter(st);
  position: absolute; top: -12px; left: 14px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--red); color: #fff;
  font: 800 13px var(--ff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-red);
}
.steps b { display: block; font-size: 13.5px; margin-top: 6px; }
.steps span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; display: block; margin-top: 4px; }

/* ============================================================
   GIAI ĐOẠN 3 — 3 trang chuyên đề
   Namespace prefix: .olh- (online), .kkh- (1 kèm 1), .gvh- (GV Đức)
   để tránh trùng class giữa 3 trang.
   ============================================================ */

/* ── ONLINE LANDING (.olh-*) ───────────────────────────── */
.olh {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 42px; align-items: center;
  padding: 28px 0 40px;
}
.olh h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800; letter-spacing: -.028em;
}
.olh h1 em { font-style: normal; color: var(--red); }
.olh p.d {
  font-size: 14.5px; color: var(--text);
  line-height: 1.65; margin-top: 14px; max-width: 520px;
}
.olh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.olh-chips span {
  font-size: 12.5px; font-weight: 600;
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: 99px;
  padding: 6px 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.olh-chips i { color: var(--red); font-size: 14px; }

.promo10 {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px;
  font-size: 13px; font-weight: 700; color: #5F4800;
  background: linear-gradient(100deg, #FFEB99, #FFF);
  border: 1px solid #FFDF55;
  border-radius: 10px;
  padding: 10px 15px;
}
.promo10 i { font-size: 18px; color: #7C6500; }

.olh-acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.olh-img {
  position: relative;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-m);
}
.olh-img img {
  width: 100%; height: 330px;
  object-fit: cover; display: block;
}
.olh-img .cap {
  position: absolute; left: 16px; bottom: 13px; right: 16px;
  z-index: 1;
  color: #fff; font-size: 12px; font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.olh-img::after {
  content: ''; position: absolute; inset: auto 0 0 0;
  height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.5));
}
.olh-img .tag {
  position: absolute; left: 16px; top: 16px;
  font-size: 11.5px; font-weight: 800; color: var(--text);
  background: rgba(255,255,255,.95);
  border-radius: 99px;
  padding: 7px 13px;
  display: inline-flex; gap: 6px; align-items: center;
  box-shadow: var(--sh-s);
}
.olh-img .tag i { color: var(--red); }

.olh-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.olh-why > div {
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 18px;
}
.olh-why i { font-size: 24px; color: var(--red); }
.olh-why b { display: block; font-size: 14px; margin: 10px 0 5px; }
.olh-why span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

.lv-table {
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  overflow: hidden;
  background: #fff;
}
.lv-row {
  display: grid;
  grid-template-columns: 64px 1.3fr 1fr auto;
  gap: 14px; align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-s);
  transition: .15s;
}
.lv-row:last-child { border-bottom: none; }
.lv-row:hover { background: var(--bg-soft); }
.lv-row .lv {
  font-size: 14px; font-weight: 800; color: var(--red);
  background: var(--red-light);
  border-radius: 9px;
  padding: 8px 0;
  text-align: center;
}
.lv-row .nm h3 { font-size: 14px; display: block; margin: 0; }
.lv-row .nm span { font-size: 11.5px; color: var(--text-2); }
.lv-row .gi {
  font-size: 12.5px; color: var(--text-2);
  display: flex; align-items: center; gap: 6px;
}
.lv-row .gi i { color: var(--text-3); }
.lv-row .pr { font-size: 14.5px; font-weight: 800; }
.lv-row .pr span { font-size: 11px; color: var(--text-2); font-weight: 600; }
.lv-row a.go {
  font-size: 12.5px; font-weight: 700; color: var(--red);
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vs > div {
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  padding: 20px 22px;
  background: #fff;
}
.vs .hd {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 800;
}
.vs .hd i { color: var(--red); font-size: 18px; }
.vs li {
  list-style: none;
  display: flex; gap: 8px;
  font-size: 13px; color: var(--text);
  padding: 5px 0; line-height: 1.5;
}
.vs li i { color: var(--red); font-size: 14px; flex: none; margin-top: 2px; }
.vs ul { margin-top: 10px; }

.faq {
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  overflow: hidden;
  background: #fff;
}
.faq details { border-bottom: 1px solid var(--border-s); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  padding: 15px 20px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--text-3); font-size: 18px; font-weight: 700; }
.faq details[open] summary::after { content: '–'; }
.faq .a {
  padding: 0 20px 16px;
  font-size: 13.5px; color: var(--text-2);
  line-height: 1.6;
}

/* ── 1 KÈM 1 (.kkh-*) ──────────────────────────────────── */
.kkh {
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 42px; align-items: center;
  padding: 28px 0 40px;
}
.kkh-wm {
  position: absolute; right: 38%; bottom: 0;
  font-size: 130px; font-weight: 900; letter-spacing: -.05em;
  color: rgba(209,32,38,.05);
  line-height: 1;
  pointer-events: none; user-select: none;
}
.kkh h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800; letter-spacing: -.028em;
}
.kkh h1 em { font-style: normal; color: var(--red); }
.kkh p.d {
  font-size: 14.5px; color: var(--text);
  line-height: 1.65; margin-top: 14px; max-width: 520px;
}
.kkh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kkh-chips span {
  font-size: 12.5px; font-weight: 600;
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: 99px;
  padding: 6px 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.kkh-chips i { color: var(--red); font-size: 14px; }
.kkh-acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.kkh-img {
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-m);
}
.kkh-img img {
  width: 100%; height: 320px;
  object-fit: cover; display: block;
}

.kkh-fit {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.kkh-fit > div {
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 20px;
}
.kkh-fit i { font-size: 24px; color: var(--red); }
.kkh-fit b { display: block; font-size: 14px; margin: 10px 0 5px; }
.kkh-fit span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

.kkh-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; counter-reset: kkst;
  margin-top: 22px;
}
.kkh-steps > div {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 20px 18px 16px;
  box-shadow: var(--sh-xs);
}
.kkh-steps > div::before {
  counter-increment: kkst;
  content: counter(kkst);
  position: absolute; top: -12px; left: 14px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--red); color: #fff;
  font: 800 13px var(--ff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-red);
}
.kkh-steps b { display: block; font-size: 13.5px; margin-top: 6px; }
.kkh-steps span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; display: block; margin-top: 4px; }

.inc {
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  padding: 20px 26px;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  align-items: center; justify-content: center;
  background: #fff;
}
.inc > div {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
}
.inc i { color: var(--red); font-size: 17px; }

/* ── 100% GV NGƯỜI ĐỨC (.gvh-*) ──────────────────────── */
.gvh {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 42px; align-items: center;
  padding: 28px 0 40px;
}
.gvh-img {
  position: relative;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-m);
}
.gvh-img img {
  width: 100%; height: 330px;
  object-fit: cover; display: block;
}
.gvh-img .cap {
  position: absolute; left: 16px; bottom: 13px; right: 16px;
  z-index: 1;
  color: #fff; font-size: 12px; font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.gvh-img::after {
  content: ''; position: absolute; inset: auto 0 0 0;
  height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.gvh h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800; letter-spacing: -.028em;
}
.gvh h1 em { font-style: normal; color: var(--red); }
.gvh p.d {
  font-size: 14.5px; color: var(--text);
  line-height: 1.65; margin-top: 14px; max-width: 520px;
}
.gvh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gvh-chips span {
  font-size: 12.5px; font-weight: 600;
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: 99px;
  padding: 6px 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.gvh-chips i { color: var(--red); font-size: 14px; }
.gvh-acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.gvh-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gvh-why > div {
  background: var(--bg-soft);
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 18px;
}
.gvh-why i { font-size: 24px; color: var(--red); }
.gvh-why b { display: block; font-size: 14px; margin: 10px 0 5px; }
.gvh-why span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

.gvh-fmt {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.gvh-fmt > div {
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-l);
  box-shadow: var(--sh-xs);
  padding: 22px 24px;
}
.gvh-fmt .hd {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800;
}
.gvh-fmt .hd i { color: var(--red); font-size: 19px; }
.gvh-fmt li {
  list-style: none;
  display: flex; gap: 9px;
  font-size: 13px;
  padding: 5px 0; line-height: 1.5;
}
.gvh-fmt li i { color: var(--red); font-size: 14px; flex: none; margin-top: 2px; }
.gvh-fmt ul { margin-top: 10px; }

.gvh-note {
  margin-top: 20px;
  background: linear-gradient(100deg, #FFEB99, #FFF 70%);
  border: 1px solid #FFDF55;
  border-radius: var(--r-m);
  padding: 14px 18px;
  font-size: 13px; line-height: 1.55;
  display: flex; gap: 10px; align-items: flex-start;
}
.gvh-note i { color: #7C6500; font-size: 19px; flex: none; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 920px) {
  .show, .show.flip { grid-template-columns: 1fr; grid-auto-rows: auto; min-height: 0; }
  .show-photo { height: 210px; min-height: 0; aspect-ratio: auto; align-self: auto; position: relative; }
  .show-photo img { position: relative; height: 210px; }
  .show.flip .show-photo { order: 1; }
  .show.flip .show-body { order: 2; }
  .wm { font-size: 110px; }
  .osd-band .osd-in { grid-template-columns: 1fr; }
  .sp-zone { grid-template-columns: 1fr; }
  .eco-grid { grid-template-columns: 1fr 1fr; }
  .jr-sub { display: none; }
}
@media (max-width: 900px) {
  .lth-card { grid-template-columns: 1fr; }
  .lth-ph { height: 200px; }
  .lth-ph img { position: relative; height: 200px; }
  .adv, .skills, .steps { grid-template-columns: repeat(2, 1fr); }
  .cert-row { grid-template-columns: 60px 1fr; }
  .cert-row .use { grid-column: 2; }
  /* Giai đoạn 3 */
  .olh, .kkh, .gvh { grid-template-columns: 1fr; }
  .gvh-img { order: 2; }
  .olh-why, .gvh-why { grid-template-columns: repeat(2, 1fr); }
  .vs, .gvh-fmt { grid-template-columns: 1fr; }
  .kkh-fit, .kkh-steps { grid-template-columns: 1fr; }
  .lv-row { grid-template-columns: 54px 1fr auto; }
  .lv-row .gi { display: none; }
}
@media (max-width: 880px) {
  .cth-c { grid-template-columns: 1fr; }
  .plans-row, .out-grid, .rel, .eco-strip { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Nút hero xếp dọc full-width — nhãn "Học thử lớp live miễn phí" dài không bị cắt */
  .cth-acts { flex-direction: column; align-items: stretch; }
  .cth-acts a { justify-content: center; }
  .kh-wrap, .kh-wrap-narrow { padding: 0 16px; }
  .jr { padding: 20px 12px; }
  .jr-dot { width: 38px; height: 38px; font-size: 13px; }
  .sb-foot { flex-direction: column; align-items: stretch; }
  .sb-acts { width: 100%; flex-direction: column; }
  .sb-acts-v2 { align-items: stretch; }
  .sb-cta-main { width: 100%; justify-content: center; }
  .sb-mode-line { justify-content: center; }
  .sb-modes { width: 100%; }
  .btn-go { flex: 1; justify-content: center; }
  .btn-lich { justify-content: center; }
  .eco-grid { grid-template-columns: 1fr; }
  /* (4) Pi eco: xuống dòng trên Pi + thu nhỏ khi chật, không phá lưới. */
  .eco-head { flex-direction: column; gap: 8px; }
  .eco-pi { width: 60px; height: 60px; }
  .adv, .skills, .steps { grid-template-columns: 1fr; }
  .olh-why, .gvh-why { grid-template-columns: 1fr; }
  .kh-fmt, .kh-sec.kh-fmt { padding: 22px 18px; }
  .kh-fmt-grid { grid-template-columns: 1fr; }

  /* #56 — danh sách khoá .lv-row: reflow DỌC ở ≤600 (grid 3–4 cột không vừa 390px → tên vỡ từng
     chữ, link "Chi tiết…" tràn mép). Xếp: HÀNG 1 = badge cấp + tên+mô tả (tên KHÔNG vỡ) ·
     HÀNG 2 = link "Chi tiết…" full-width dưới cùng (không tràn). .gi vẫn ẩn (rule ≤900). Desktop giữ bảng. */
  .lv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; padding: 14px 16px; }
  .lv-row .lv { flex: none; width: 46px; padding: 7px 0; }
  .lv-row .nm { flex: 1; min-width: 0; }               /* tên+mô tả chiếm trọn bề rộng hàng 1 → tên không vỡ chữ */
  .lv-row a.go {
    flex-basis: 100%; width: 100%; justify-content: center;
    border-top: 1px solid var(--border-s); padding-top: 11px; margin-top: 2px;
  }
}

/* ══════════════════════════════════════════════════════════
   FB Đợt 4B — Hub: 2 nút Chi tiết nổi bật · DN khối nổi bật · ÖSD thẻ nhỏ
   (port designs/redesign/khoahoc-4b.html)
   ══════════════════════════════════════════════════════════ */
/* (A) thẻ mỗi cấp: 2 nút Chi tiết cạnh nhau, nổi bật */
.sb-acts-2btn { flex-direction: row; align-items: stretch; gap: 11px; margin-top: 6px; }

/* (B) DN — khối nổi bật text + hình (thay dải ÖSD vàng), KHÔNG nền vàng */
.kh-dnfeat {
  display: flex;
  background: #fff; border: 1.5px solid var(--red-border); border-radius: 20px;
  overflow: hidden; box-shadow: 0 8px 26px rgba(209, 32, 38, .08);
  margin-bottom: 8px;
}
.kh-dnfeat-bd { flex: 1; padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.kh-dnfeat-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: var(--red-light); color: var(--red);
  font-weight: 800; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}
.kh-dnfeat h2 { font-size: 26px; font-weight: 800; margin-top: 14px; letter-spacing: -.4px; line-height: 1.2; }
.kh-dnfeat h2 em { color: var(--red); font-style: normal; }
.kh-dnfeat .desc { color: var(--text-2); font-size: 14.5px; margin-top: 10px; max-width: 520px; }
/* (5) Bỏ 3 gạch đầu dòng .kh-dnfeat-pts — CSS dọn theo. */
.kh-dnfeat-acts { display: flex; gap: 11px; margin-top: 22px; flex-wrap: wrap; }
.kh-dnfeat-media { flex: none; width: 340px; background: var(--bg-soft); }
.kh-dnfeat-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; }

/* (B) ÖSD thẻ nhỏ — viền hồng nhẹ để phân biệt trong sp-zone */
.sp-card.osd { border-color: var(--red-border); }

@media (max-width: 860px) {
  .kh-dnfeat { flex-direction: column-reverse; }
  .kh-dnfeat-bd { padding: 24px 22px; }
  .kh-dnfeat-media { width: 100%; }
  .kh-dnfeat-media img { min-height: 200px; }
  .kh-dnfeat h2 { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   #62 — MOBILE (≤600): gom ICON + TIÊU ĐỀ về 1 DÒNG cho thẻ feature/benefit
   đang xếp icon-TRÊN-tiêu-đề (tốn chiều cao). Cấu trúc phẳng (icon · <b> · <span>
   là anh em) → dùng GRID: icon (cột trái) + tiêu đề <b> (cột phải) NẰM 1 hàng;
   mô tả <span> xuống hàng dưới full-width. Áp: .adv/.skills (luyện thi ÖSD) ·
   .olh-why (online) · .gvh-why (GV nước ngoài) · .eco-card (hub). GIỮ nội dung,
   chỉ đổi bố cục. Desktop KHÔNG đổi (các thẻ này đã 1 cột full-width ở ≤600). */
@media (max-width: 600px) {
  .adv > div, .skills > div, .olh-why > div, .gvh-why > div, .eco-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
  }
  .adv > div > i, .olh-why > div > i, .gvh-why > div > i,
  .skills > div > .ic, .eco-card > .ic {
    grid-column: 1; grid-row: 1; margin: 0;
  }
  .adv > div > b, .skills > div > b, .olh-why > div > b,
  .gvh-why > div > b, .eco-card > b {
    grid-column: 2; grid-row: 1; margin: 0;
  }
  .adv > div > span, .skills > div > span, .olh-why > div > span,
  .gvh-why > div > span, .eco-card > span {
    grid-column: 1 / -1;
  }
  /* Badge "Tặng kèm" (.free là inline-flex → grid blockify sẽ kéo full-width) — giữ pill gọn, canh trái. */
  .eco-card > .free { justify-self: start; }
}

/* #126: chip lịch khai giảng nhúng + link khoá liên quan ("Chi tiết khoá") ≥44px vùng chạm trên mobile. */
@media (max-width: 900px) {
  .khlich-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .rel a { min-height: 44px; box-sizing: border-box; }
}