/* ═══════════════════════════════════════════════════
   COMPONENTS — AI Workforce by ALOBASE
   Bố cục: panel + header-row + card nén, theo aiwf-preview.html
   Màu & chữ: ALOBASE Brand Guideline v1.1
   ═══════════════════════════════════════════════════ */

/* ─────────── 1. Nền tảng ─────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-head);
  letter-spacing: -.018em;
}
h1 { font-size: var(--h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.028em; }
h2 { font-size: var(--h2); font-weight: 800; letter-spacing: -.024em; color: var(--primary); }
h3 { font-size: var(--h3); font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--primary); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 700; color: var(--ink); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--primary); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-xs) 0; font-weight: 700; font-size: var(--small);
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ─────────── 2. Điều hướng ─────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--primary-12); box-shadow: 0 10px 30px rgba(24,48,111,.08); }

.nav-wrap {
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-5);
}
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { height: 38px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  position: relative;
  padding: 8px 13px; border-radius: var(--r-xs);
  font-size: var(--small); font-weight: 600; color: var(--text);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-nav a:hover { color: var(--primary); background: var(--primary-04); }
.site-nav a[aria-current="page"] { color: var(--primary); font-weight: 700; }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--primary); border-radius: 2px;
  transform-origin: left; animation: line-in .5s var(--ease-out) both;
}

.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--primary), var(--blue)); color: #fff;
  font-size: var(--small); font-weight: 700; text-decoration: none;
  white-space: nowrap;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.nav-cta:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(43,57,144,.28); }

.menu-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: #fff; color: var(--primary); cursor: pointer;
}

/* ─────────── 3. Nút ─────────── */
.button {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-size: var(--small); font-weight: 700; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.button.primary { background: var(--primary); color: #fff; }
.button.primary:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(43,57,144,.3); }

.button.light { background: #fff; color: var(--primary); }
.button.light:hover { background: var(--sky); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(24,48,111,.24); }

.button.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button.ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-04); }

.on-dark .button.ghost { color: #fff; border-color: rgba(255,255,255,.34); }
.on-dark .button.ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.button.sm { padding: 9px 17px; font-size: var(--tiny); }

.arrow { display: inline-block; transition: transform var(--t) var(--ease); }
.button:hover .arrow, .text-link:hover .arrow { transform: translateX(4px); }
.button:hover .arrow.down, .text-link:hover .arrow.down { transform: translateY(3px); }

.text-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--small); font-weight: 700; color: var(--primary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.text-link:hover { color: var(--blue); }

/* ─────────── 4. Nhãn & chữ nhỏ ─────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--micro); font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--primary);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--primary); border-radius: 2px;
}
.on-dark .eyebrow { color: var(--sky); }
.on-dark .eyebrow::before { background: var(--sky); }

.pill {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: var(--micro); font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--mist); color: var(--primary);
  border: 1px solid var(--primary-12);
}
.pill.solid { background: var(--primary); color: #fff; border-color: transparent; }
.pill.sky   { background: var(--sky); color: var(--deep); border-color: rgba(24,48,111,.12); }

.num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--mist); color: var(--primary);
  font-size: var(--tiny); font-weight: 800; letter-spacing: .02em;
  border: 1px solid var(--primary-12);
}
.num.solid { background: var(--primary); color: #fff; border-color: transparent; }

/* ─────────── 5. Section & panel ─────────── */
.section { padding: 96px 0; background: var(--white); }
.section.canvas { background: linear-gradient(180deg, var(--canvas), #F9FAFE); }
.section.tight { padding: var(--sp-7) 0; }

/* Đầu mục canh trái, eyebrow phía trên  */
.section-head { max-width: 790px; margin-bottom: 38px; }
.section-head .eyebrow { margin-bottom: var(--sp-3); }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head .lead { font-size: 1.02rem; color: var(--muted); max-width: 66ch; }

/* Panel: khối viền bao một section, có hàng header riêng */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.section.canvas .panel { box-shadow: var(--sh-xs); }

.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--primary-04), transparent);
}
.panel-head h3 { font-size: 1.02rem; letter-spacing: -.01em; }
.panel-body { padding: 24px; }
.panel-body.flush { padding: 0; }

/* ─────────── 6. Hero ─────────── */
.hero {
  position: relative; overflow: hidden;
  background: var(--deep);
  color: var(--on-dark-soft);
  padding: var(--sp-9) 0 var(--sp-8);
}
/* Ảnh nền đặt bằng thẻ img thật, không đặt qua biến CSS.
   Đường dẫn trong biến CSS được tính tương đối theo vị trí tệp stylesheet,
   nên ảnh khai báo từ trang HTML sẽ trỏ sai và không bao giờ nạp được. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: .25; filter: saturate(.82) contrast(1.04);
  transform: scale(1.08);
  animation: hero-drift 24s var(--ease) infinite alternate;
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(1000px 520px at 8% 0%, rgba(43,57,144,.64), transparent 62%),
    linear-gradient(105deg, rgba(24,48,111,.97) 0%, rgba(24,48,111,.92) 48%, rgba(24,48,111,.76) 100%);
}
.hero > .container { position: relative; z-index: 2; }

.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-8); align-items: center;
}
.hero-copy h1 { color: #fff; margin: var(--sp-4) 0 var(--sp-4); }
.hero-copy h1 em { font-style: normal; color: var(--sky); }
.hero-lead { font-size: 1.04rem; color: var(--on-dark-soft); max-width: 56ch; margin-bottom: var(--sp-5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Ảnh người thật đặt ở lớp tiền cảnh để phần mở đầu có cảm giác lớp học thực tế. */
.hero-human {
  position: relative;
  width: min(470px, 100%);
  margin: 28px 0 0;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: var(--r-lg);
  background: var(--on-dark-card);
  box-shadow: 0 22px 58px rgba(7,18,59,.38), 0 0 0 6px rgba(255,255,255,.055);
  transform: rotate(-1deg);
}
.hero-human::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(24,48,111,.18));
  pointer-events: none;
}
.hero-human img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(1.02);
}
.hero-human-main img { object-position: center 68%; }
.hero-human-foundation,
.hero-human-inhouse { aspect-ratio: 4 / 3; }
.hero-human-foundation img { object-position: center 18%; }
.hero-human-bootcamp img { object-position: center 51%; }
.hero-human-bootcamp { width: min(390px, 100%); aspect-ratio: 2 / 3; }
.hero-human-bootcamp .bootcamp-poster { object-fit: cover; object-position: center; }
.hero-human-inhouse img { object-position: center 18%; }

/* Bootcamp mở đầu bằng chân dung ba giảng viên thật, giữ tỉ lệ gọn ở desktop và mobile. */
.hero-human-lecturers::after { opacity: .04; }
.hero-lecturer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  height: 100%;
}
.hero-human-lecturers .hero-lecturer-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(.96) contrast(1.02);
}
.hero-human-lecturers .hero-lecturer-grid img:first-child { object-position: center 34%; }
.hero-human-lecturers .hero-lecturer-grid img:nth-child(2) { object-position: center 28%; }
.hero-human-lecturers .hero-lecturer-grid img:nth-child(3) { object-position: center 32%; }

/* Cột phải: chồng hộp chương trình (mô-típ cohort-box của aiwf-preview) */
.hero-stack { display: grid; gap: 12px; }
.hero-box {
  display: grid; grid-template-columns: 1fr auto; gap: 6px var(--sp-4);
  align-items: center;
  padding: 16px 18px;
  background: rgba(255,255,255,.075);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r);
  backdrop-filter: blur(8px);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.hero-box:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.34); transform: translateX(4px); }
.hero-box-label { grid-column: 1 / -1; font-size: var(--micro); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.hero-box-name  { font-size: .97rem; font-weight: 700; color: #fff; line-height: 1.35; }
.hero-box-meta  { grid-column: 1; font-size: var(--tiny); color: var(--on-dark-muted); line-height: 1.5; }
.hero-box .button { grid-column: 2; grid-row: 2 / span 2; align-self: center; }

/* Dải chỉ số dưới hero */
.meta-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--on-dark-line);
}
.meta-item strong {
  display: block; font-size: 1.55rem; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.2;
}
.meta-item span { display: block; margin-top: 3px; font-size: var(--tiny); color: var(--on-dark-muted); line-height: 1.45; }

/* ─────────── 6b. Khối thông báo khai giảng ───────────
   Khung dùng chung cho 3 trang sub, nội dung mỗi trang mỗi khác:
   .course-note.detailed  → Foundation: lịch cố định, ghi chi tiết
   .course-note.cohort    → Bootcamp: mỗi đợt một chuyên đề, nêu rõ chuyên đề đợt này
   .course-note.ondemand  → In-house: không có khai giảng, chuyển thành mời khảo sát
   ------------------------------------------------------------------ */
.course-note {
  position: relative;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  overflow: hidden;
  /* Nổi hẳn lên khỏi nền hero, như một tấm thẻ đặt phía trên */
  box-shadow: 0 30px 70px rgba(0,0,0,.4), 0 0 0 6px rgba(255,255,255,.05);
  animation: card-pop .72s var(--ease-out) .18s both;
}
@keyframes card-pop {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.course-note-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px;
  background: rgba(255,255,255,.07);
  border-bottom: 1px solid var(--on-dark-line);
}
.course-note-kicker {
  font-size: var(--micro); font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sky);
}
.course-note-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--micro); font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); color: #fff;
}
.course-note-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sky); box-shadow: 0 0 0 0 rgba(217,238,247,.65);
  animation: ping 2.1s var(--ease) infinite;
}
.course-note-body { padding: 18px; display: grid; gap: 14px; }

/* Băng nổi bật: thông tin quan trọng nhất của khóa, đọc lướt là thấy ngay */
.course-headline {
  display: grid; gap: 4px;
  margin: 0 -18px; padding: 16px 18px;
  background: linear-gradient(120deg, rgba(217,238,247,.22), rgba(255,255,255,.06));
  border-top: 1px solid var(--on-dark-line);
  border-bottom: 1px solid var(--on-dark-line);
}
.course-headline .lbl {
  font-size: var(--micro); font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sky);
}
.course-headline .big {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800;
  color: #fff; line-height: 1.2; letter-spacing: -.02em;
}
.course-headline .sub { font-size: var(--tiny); color: var(--on-dark-muted); }

/* Thẻ giá nổi hẳn lên khỏi nền */
.price-tag {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-top: 6px; padding: 9px 15px;
  background: #fff; border-radius: var(--r-sm);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.price-tag b { font-size: 1.16rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; }
.price-tag s { font-size: var(--tiny); color: var(--subtle); }
.price-tag em { font-style: normal; font-size: var(--micro); font-weight: 700; color: var(--blue); }

/* Tên khóa = tên môn học, mã khóa đứng trước */
.course-code {
  font-size: var(--micro); font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-dark-muted);
}
.course-title { font-size: 1.22rem; font-weight: 800; color: #fff; line-height: 1.32; letter-spacing: -.018em; }
.course-topic {
  font-size: var(--small); color: var(--sky); font-weight: 600; line-height: 1.55;
}

/* Hàng thông tin khai giảng: nhãn trái, giá trị phải */
.course-facts { display: grid; gap: 0; border-top: 1px solid var(--on-dark-line); }
.course-fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.13);
}
.course-fact:last-child { border-bottom: none; }
.course-fact dt { font-size: var(--tiny); color: var(--on-dark-muted); }
.course-fact dd { margin: 0; font-size: var(--small); font-weight: 700; color: #fff; text-align: right; }
.course-fact dd .hi { color: var(--sky); }

.course-note-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: rgba(255,255,255,.05);
  border-top: 1px solid var(--on-dark-line);
}
.course-note-foot .button { flex: 1; justify-content: center; }
.course-note-note { width: 100%; font-size: var(--micro); color: var(--on-dark-muted); line-height: 1.55; }

/* Biến thể In-house: không có lịch khai giảng nên bỏ chấm nhấp nháy */
.course-note.ondemand .course-note-status::before { animation: none; box-shadow: none; background: var(--on-dark-muted); }

@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(217,238,247,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(217,238,247,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,238,247,0); }
}

/* Dải tiêu chí đào tạo, đặt ngay dưới khối thông báo */
.criteria {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--on-dark-line);
}
.criteria-item strong {
  display: block; font-size: 1.3rem; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.25;
}
.criteria-item span { display: block; margin-top: 4px; font-size: var(--tiny); color: var(--on-dark-muted); line-height: 1.5; }

/* ─────────── 7. Dải tin cậy (logo đối tác) ─────────── */
.trust {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 10px 34px rgba(24,48,111,.045);
}
.trust-label { font-size: var(--micro); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--subtle); max-width: 15ch; line-height: 1.6; }
.trust-logos { display: grid; gap: var(--sp-4); min-width: 0; }
.trust-group { display: grid; gap: 8px; }
.trust-group-label { font-size: var(--micro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
.trust-group-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.trust-logos img {
  height: 42px; width: auto; max-width: 180px; object-fit: contain;
  filter: none; opacity: 1;
  transition: transform var(--t) var(--ease);
}
.trust-logos img:hover { transform: translateY(-2px); }

/* ─────────── 8. Lưới & card nén ─────────── */
.grid { display: grid; gap: var(--sp-4); }
/* Lưới có khối mở rộng thì để thẻ cao theo nội dung, mở một thẻ không kéo giãn thẻ bên cạnh */
.grid:has(details.more) { align-items: start; }

/* Mỗi cột đều có bề ngang tối thiểu, hẹp hơn mức đó thì tự rớt xuống hàng dưới.
   Chữ không bao giờ bị ép thành cột quá mảnh.
   c2 và c3 dành cho thẻ có đoạn văn, c4 và c5 chỉ dùng cho thẻ một hai dòng. */
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.c5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Card cơ sở: pill → tên → 2 dòng mô tả → dòng thông số → link */
.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 8px 28px rgba(24,48,111,.035);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--sh-sm); }
.card h3 { letter-spacing: -.012em; }
.card p { font-size: var(--small); color: var(--muted); line-height: 1.66; }
/* Thẻ là flex dọc nên nhãn pill và link phải tự co lại, không kéo hết bề ngang */
.card > .pill, .card > .text-link { align-self: flex-start; }
.card .card-meta {
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: var(--tiny); color: var(--muted);
}
.card .card-meta strong { color: var(--primary); }
.card .text-link { margin-top: 2px; }

/* Card có số thứ tự nằm cùng hàng với tiêu đề */
.card-num { display: flex; align-items: center; gap: 12px; }
.card-num h3 { flex: 1; }

/* Card hàng ngang, dùng cho danh sách bàn giao */
.row-card {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  align-items: start;
  padding: 15px 18px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.row-card:hover { border-color: var(--primary-12); background: var(--primary-04); }
.row-card h4 { margin-bottom: 2px; }
.row-card p { font-size: var(--small); color: var(--muted); line-height: 1.6; }

/* Khối đối chiếu cũ / chuẩn */
.contrast { margin-top: 12px; display: grid; gap: 8px; }
.contrast-box {
  padding: 12px 14px; border-radius: var(--r-xs);
  font-size: var(--small); line-height: 1.62;
  border-left: 3px solid;
}
.contrast-box.was { background: var(--canvas); border-left-color: var(--line-strong); color: var(--muted); }
.contrast-box.now { background: var(--sky); border-left-color: var(--primary); color: var(--deep); }
.contrast-box strong { display: block; margin-bottom: 2px; font-size: var(--micro); letter-spacing: .09em; text-transform: uppercase; }
.contrast-box.now strong { color: var(--primary); }

/* ─────────── 8b. LỚP THÔNG TIN THỨ HAI ───────────
   Lớp hiển thị viết ngắn, dễ hiểu. Lớp chi tiết kỹ thuật giấu trong <details>,
   người đọc bấm mới mở. Dùng thẻ gốc của trình duyệt nên không cần JS,
   đọc được bằng bàn phím và trình đọc màn hình.
   ------------------------------------------------------------------ */
.more { margin-top: auto; padding-top: 10px; }
.more > summary {
  display: inline-flex; align-items: center; gap: 7px;
  list-style: none; cursor: pointer;
  font-size: var(--tiny); font-weight: 700; color: var(--primary);
  transition: color var(--t-fast) var(--ease);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--t) var(--ease);
}
.more[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.more > summary:hover { color: var(--blue); }
.more > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.more-body {
  margin-top: 11px; padding: 13px 15px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--tiny); line-height: 1.72; color: var(--muted);
}
.more[open] .more-body { animation: fade-up .34s var(--ease-out) both; }
.more-body p + p { margin-top: 9px; }
.more-body strong { color: var(--ink); }
.more-body ul { display: grid; gap: 6px; margin-top: 7px; }
.more-body li { position: relative; padding-left: 14px; }
.more-body li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 2px; background: var(--line-strong);
}
.on-dark .more > summary { color: var(--sky); }
.on-dark .more-body {
  background: rgba(255,255,255,.07); border-color: var(--on-dark-line);
  border-left-color: var(--sky); color: var(--on-dark-soft);
}
.on-dark .more-body strong { color: #fff; }

/* ─────────── 8c. Dòng giá trị (thay cho cặp nhãn và giá trị) ─────────── */
.facts { display: grid; gap: 9px; }
.facts li {
  position: relative; padding-left: 20px;
  font-size: var(--small); line-height: 1.6; color: var(--text);
}
.facts li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--sky); border: 1px solid var(--primary-12);
}
.facts li strong { font-weight: 700; }
.on-dark .facts li { color: var(--on-dark-soft); }
.on-dark .facts li::before { background: var(--sky); border-color: transparent; }

/* ─────────── 8d. Khối gợi ý chọn chương trình ─────────── */
.advice { display: grid; gap: 12px; }
.advice-row {
  display: grid; grid-template-columns: 1fr auto minmax(180px, .5fr);
  gap: var(--sp-4); align-items: center;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.advice-row:hover { border-color: var(--primary-12); transform: translateX(4px); box-shadow: var(--sh-sm); }
.advice-if { font-size: var(--small); color: var(--text); line-height: 1.6; }
.advice-arrow { color: var(--subtle); font-size: 1.15rem; }
.advice-then { display: flex; flex-direction: column; gap: 3px; }
.advice-then b { font-size: .98rem; font-weight: 800; color: var(--primary); letter-spacing: -.01em; }
.advice-then span { font-size: var(--micro); color: var(--muted); }

/* ─────────── 8e. Danh sách chuyên đề dạng thẻ chip ─────────── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips a, .chips span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line-strong);
  font-size: var(--small); font-weight: 600; color: var(--text);
  text-decoration: none;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease),
              background var(--t) var(--ease), transform var(--t) var(--ease);
}
.chips a:hover {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-04); transform: translateY(-2px);
}
.chips .soon { color: var(--subtle); border-style: dashed; }

/* ─────────── 9. Bảng so sánh ─────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%; min-width: 760px; border-collapse: collapse;
  font-size: var(--small);
}
.cmp th, .cmp td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th {
  background: var(--canvas); color: var(--ink);
  font-size: var(--tiny); font-weight: 800; letter-spacing: .04em;
  border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0;
}
.cmp tbody th, .cmp td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.cmp td { color: var(--muted); line-height: 1.62; }
.cmp tbody tr { transition: background var(--t-fast) var(--ease); }
.cmp tbody tr:hover { background: var(--primary-04); }
.cmp tbody tr:last-child td { border-bottom: none; }

/* ─────────── 9b. SƠ ĐỒ LUỒNG DỰNG BẰNG HTML ───────────
   Trước đây vẽ bằng SVG với toạ độ chữ tính tay nên nhãn bị tràn khỏi khung.
   Dựng bằng HTML thì chữ tự co theo nội dung và tự xuống hàng trên màn hẹp.
   ------------------------------------------------------------------ */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.35fr;
  gap: var(--sp-4);
  align-items: stretch;
}
.flow-node {
  display: flex; flex-direction: column; gap: 8px;
  /* Ô ít chữ thì dồn nội dung vào giữa, khoảng trống chia đều trên dưới
     thay vì dồn hết xuống đáy khi các ô cao bằng nhau */
  justify-content: center;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
}
.flow-node.last { justify-content: flex-start; }
.flow-node.accent { background: var(--sky); border-color: rgba(43,57,144,.28); }
.flow-tag {
  align-self: flex-start;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--primary); color: #fff;
  font-size: var(--micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.flow-node.accent .flow-tag { background: var(--blue); }
.flow-node.last .flow-tag { background: var(--deep); }
.flow-node h4 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.015em; }
.flow-node p { font-size: var(--small); color: var(--muted); line-height: 1.62; }
.flow-node.accent p { color: #3C4A73; }
.flow-arrow {
  align-self: center;
  color: var(--subtle); font-size: 1.4rem; line-height: 1;
}
.flow-sub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; }
.flow-sub span {
  padding: 9px 12px; border-radius: var(--r-xs);
  background: var(--white); border: 1px solid var(--line);
  font-size: var(--tiny); font-weight: 600; color: var(--text); text-align: center;
}

/* Bốn trụ cột: chữ ngắn nên xếp bốn cột vẫn thoáng */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.pillar {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  padding: 18px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
}
.pillar.accent { background: var(--sky); border-color: rgba(43,57,144,.28); }
.pillar-letter {
  grid-row: span 2; align-self: start;
  font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1;
}
.pillar.accent .pillar-letter { color: var(--deep); }
.pillar h4 { font-size: 1.02rem; }
.pillar p { font-size: var(--tiny); color: var(--muted); line-height: 1.62; }
.pillar-cap {
  margin-top: var(--sp-4); padding: 14px 18px;
  background: var(--primary); color: #fff; border-radius: var(--r);
  font-size: var(--small); font-weight: 700; text-align: center; letter-spacing: .01em;
}

/* ─────────── 9c. CHẶNG DỌC ───────────
   Dùng cho lộ trình nhiều bước. Mỗi bước chiếm trọn bề ngang nên chữ
   không bị ép thành cột mảnh, và khối chi tiết mở ra cũng rộng rãi.
   ------------------------------------------------------------------ */
.steps { position: relative; display: grid; gap: 12px; }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--sp-5);
  padding: 20px var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.step:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.step-num {
  grid-row: span 3; align-self: start;
  display: flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--primary); color: #fff;
  font-size: .95rem; font-weight: 800; letter-spacing: .01em;
}
.step.soft .step-num { background: var(--sky); color: var(--deep); }
.step-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.step-title h3 { font-size: 1.14rem; letter-spacing: -.015em; }
.step-title .pill { flex: none; }
.step-desc { font-size: var(--small); color: var(--muted); line-height: 1.68; max-width: 78ch; }
.step .more { margin-top: 4px; padding-top: 6px; }
.step .more-body { max-width: none; }

/* ─────────── 10. Sơ đồ (thay ảnh khi chưa có ảnh thật) ─────────── */
.figure {
  padding: var(--sp-6);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--tiny); color: var(--muted); line-height: 1.6;
}

/* Đường nối trong sơ đồ: vẽ dần khi cuộn tới */
.draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.is-visible .draw, .draw.is-visible { animation: draw 1.15s var(--ease-out) forwards; }
.draw.d1 { animation-delay: .12s; }
.draw.d2 { animation-delay: .34s; }
.draw.d3 { animation-delay: .56s; }

.pop { opacity: 0; transform: scale(.94); transform-origin: center; }
.is-visible .pop { animation: pop .5s var(--ease-out) forwards; }
.pop.p1 { animation-delay: .05s; }
.pop.p2 { animation-delay: .3s; }
.pop.p3 { animation-delay: .55s; }
.pop.p4 { animation-delay: .8s; }

/* ─────────── 11. Thanh tỷ lệ ─────────── */
.ratio { display: flex; height: 40px; border-radius: var(--r-xs); overflow: hidden; border: 1px solid var(--line); }
.ratio span {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--micro); font-weight: 800; letter-spacing: .06em; color: #fff;
  width: 0; overflow: hidden; white-space: nowrap;
  transition: width 1.1s var(--ease-out);
}
.ratio span.s1 { background: var(--sky); color: var(--deep); }
.ratio span.s2 { background: var(--blue); }
.ratio span.s3 { background: var(--primary); }
.is-visible .ratio span { width: var(--w); }
.ratio-legend { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: 12px; font-size: var(--tiny); color: var(--muted); }
.ratio-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* ─────────── 12. Đội ngũ ─────────── */
.faculty {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faculty:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--sh); }
/* Khung ảnh dạng đứng, lấy điểm neo gần mép trên để chừa khoảng thở phía trên đầu */
.faculty-photo { position: relative; aspect-ratio: 5 / 6; overflow: hidden; background: var(--mist); }
.faculty-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 6%; transition: transform .7s var(--ease-out); }
.faculty:hover .faculty-photo img { transform: scale(1.055); }
.faculty-photo .pill { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); }
.faculty-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.faculty-name { font-size: 1rem; font-weight: 700; }
.faculty-role { font-size: var(--tiny); font-weight: 700; color: var(--primary); }
.faculty-creds { display: grid; gap: 6px; margin-top: 2px; }
.faculty-creds li { position: relative; padding-left: 15px; font-size: var(--tiny); color: var(--muted); line-height: 1.6; }
.faculty-creds li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 2px; background: var(--sky); }

/* ─────────── 13. Thư viện ảnh (tự nhận diện) ─────────── */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 16px; }
.gallery figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--mist); aspect-ratio: 4 / 3;
  box-shadow: 0 12px 34px rgba(24,48,111,.08);
}
.gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(24,35,79,.9));
  color: #fff; font-size: var(--tiny); line-height: 1.5;
  transform: translateY(6px); opacity: 0;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.gallery figure:hover figcaption { transform: none; opacity: 1; }
.gallery.is-empty { grid-template-columns: 1fr; }
.gallery-empty {
  padding: var(--sp-7) var(--sp-6); text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--canvas); color: var(--muted); font-size: var(--small);
}
.gallery-empty code { font-size: var(--tiny); background: var(--white); padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); }

/* ─────────── 14. Trích dẫn ─────────── */
.quote {
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--primary);
  background: var(--canvas); border-radius: 0 var(--r) var(--r) 0;
  font-size: 1.04rem; font-weight: 600; color: var(--ink); line-height: 1.68;
}

/* ─────────── 15. Khối đăng ký ─────────── */
.reg {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: 0 24px 64px rgba(24,48,111,.13);
}
.reg h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin: 12px 0 10px; letter-spacing: -.02em; }
.reg p { font-size: var(--small); color: var(--muted); }
.reg-points { display: grid; gap: 9px; margin: var(--sp-4) 0 var(--sp-5); }
.reg-points li { position: relative; padding-left: 24px; font-size: var(--small); color: var(--text); }
.reg-points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 13px; height: 7px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}
.reg-side {
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--primary), var(--blue) 52%, var(--deep));
  color: #fff;
}
.reg-side h4 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.reg-side p { color: var(--on-dark-soft); font-size: var(--small); }
.reg-side .button { width: 100%; justify-content: center; margin-top: var(--sp-4); }
.reg-contact { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.2); font-size: var(--tiny); color: var(--on-dark-soft); }
.reg-contact a { color: #fff; font-weight: 700; }

/* ─────────── 16. Footer ─────────── */
.site-footer { background: var(--footer-bg); color: var(--on-dark-muted); padding: var(--sp-8) 0 var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--sp-6); }
.footer-brand img { height: 32px; margin-bottom: 14px; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand p { font-size: var(--tiny); line-height: 1.7; max-width: 34ch; }
.footer-col h3 { font-size: var(--micro); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer-links { display: grid; gap: 9px; }
.footer-links a { font-size: var(--small); color: var(--on-dark-muted); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer-links a:hover { color: #fff; }
.footer-contact { display: grid; gap: 9px; font-size: var(--small); }
.footer-contact a { color: var(--on-dark-muted); text-decoration: none; }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--tiny); color: rgba(255,255,255,.55);
}

/* ─────────── 17. Chuyển động ─────────── */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.reveal.from-left  { transform: translateX(-26px); }
.reveal.from-right { transform: translateX(26px); }
.reveal.zoom       { transform: scale(.965); }

@keyframes hero-drift {
  from { transform: scale(1.08) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.6%, -1.4%, 0); }
}
@keyframes line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes pop     { to { opacity: 1; transform: scale(1); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Hero vào trang: hiện dần theo thứ tự, không chờ cuộn */
.hero-copy > *, .hero-stack > *, .meta-item { animation: fade-up .78s var(--ease-out) both; }
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .14s; }
.hero-copy > *:nth-child(3) { animation-delay: .23s; }
.hero-copy > *:nth-child(4) { animation-delay: .32s; }
.hero-stack > *:nth-child(1) { animation-delay: .3s; }
.hero-stack > *:nth-child(2) { animation-delay: .4s; }
.hero-stack > *:nth-child(3) { animation-delay: .5s; }
.meta-item:nth-child(1) { animation-delay: .55s; }
.meta-item:nth-child(2) { animation-delay: .63s; }
.meta-item:nth-child(3) { animation-delay: .71s; }
.meta-item:nth-child(4) { animation-delay: .79s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .draw { stroke-dashoffset: 0 !important; }
  .pop { opacity: 1 !important; transform: none !important; }
  .ratio span { width: var(--w) !important; }
}

/* ─────────── 18. Responsive ─────────── */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* Sơ đồ luồng chuyển thành xếp dọc, mũi tên quay xuống */
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { justify-self: center; transform: rotate(90deg); }
  .grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .grid.c5 { grid-template-columns: repeat(2, 1fr); }
  .reg { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}

@media (max-width: 820px) {
  :root { --nav-h: 64px; }
  /* Trên màn hẹp, hiệu ứng trượt ngang làm tràn viewport nên đổi thành trượt dọc */
  .reveal.from-left, .reveal.from-right { transform: translateY(22px); }
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 20px 18px;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-sm);
    display: none;
  }
  .site-nav.open { display: flex; animation: fade-up .3s var(--ease-out) both; }
  .site-nav a { padding: 12px 14px; font-size: .95rem; }
  .nav-cta { margin-left: auto; padding: 9px 15px; font-size: var(--tiny); }
  .section { padding: var(--sp-8) 0; }
  .grid.c3, .grid.c2, .gallery { grid-template-columns: 1fr; }
  .gallery figure:first-child { grid-column: auto; grid-row: auto; }
  .meta-strip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .trust { grid-template-columns: 1fr; gap: var(--sp-4); }
  .trust-label { max-width: none; }
  .trust-logos { gap: var(--sp-4); }
  .trust-group-logos { gap: var(--sp-4); }
  .hero-box { grid-template-columns: 1fr; }
  .hero-human {
    width: 100%;
    margin-top: 22px;
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    transform: none;
  }
  .hero-human-lecturers { aspect-ratio: 16 / 9; }
  .hero-human-bootcamp { aspect-ratio: 2 / 3; width: min(360px, 100%); }
  .hero-human-foundation,
  .hero-human-inhouse { aspect-ratio: 4 / 3; }
  .hero-box .button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .advice-row { grid-template-columns: 1fr; gap: 10px; }
  .advice-arrow { display: none; }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .step-num { grid-row: auto; justify-self: start; }
  .course-headline { margin: 0 -18px; }
}

@media (max-width: 520px) {
  .container { padding: 0 18px; }
  .grid.c4, .grid.c5 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; justify-content: center; }
  .panel-body { padding: 18px; }
  .figure { padding: var(--sp-4); }
}

@media print {
  .site-header, .hero::before, .hero::after { display: none; }
  .reveal { opacity: 1; transform: none; }
}