/* =====================================================================
   page.css — component dùng chung cho mọi trang con (T1–T19)
   Load sau common.css. Trang chủ không dùng file này.
   ===================================================================== */

/* ---------- Page hero ---------- */
.page-hero { position: relative; background: var(--dark); color: var(--on-navy); overflow: hidden; padding: clamp(28px, 4vw, 44px) 0 clamp(44px, 6vw, 72px); }
.page-hero .wrap { position: relative; z-index: 1; }
/* Mọi banner trang con cùng một chiều cao trên desktop (trước chênh 264–644px): nội dung canh giữa dọc.
   Mobile để cao tự nhiên. */
@media (min-width: 901px) {
  .page-hero { --hero-h: 612px; display: flex; flex-direction: column; justify-content: center; min-height: var(--hero-h); }
  .page-hero > .wrap { width: 100%; }
}
/* Kiểu banner trang chủ: nhãn viên thuốc, H1 editorial, 2 cột mô tả | ảnh */
.page-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-navy); color: var(--white); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.page-hero h1 { color: var(--white); font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.06; max-width: 30ch; margin-top: 20px; }
.page-hero h1 em { font-style: normal; color: var(--yellow); }
.page-hero .lead { color: var(--on-navy); margin-top: 16px; max-width: 60ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
/* Khách 18/09: chỉ trang bài viết còn dòng này (ngày cập nhật, thời gian đọc) — icon phía trước, không khung viền */
.page-hero__meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.page-hero__metaitem { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--on-navy); }
/* Vạch mảnh ngăn ngày cập nhật với thời gian đọc (khách 18/09) */
.page-hero__metaitem + .page-hero__metaitem { padding-left: 22px; border-left: 1px solid var(--line-navy); }
.page-hero__metaitem use[href] { --ic-1: var(--yellow); --ic-2: var(--white); --ic-3: rgba(255, 255, 255, .18); }
.page-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.page-hero__price { color: var(--white); font-weight: 700; }
.page-hero__price em { font-style: normal; color: var(--yellow); font-size: 1.4rem; letter-spacing: -.02em; }
.page-hero--split .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(24px, 3vw, 36px); }
.page-hero--split .page-hero__text .lead { margin-top: 0; max-width: 48ch; font-size: clamp(.98rem, 1.1vw, 1.08rem); }
.page-hero__visual { position: relative; margin: 0; }
/* Một khung ảnh cho mọi banner: 16:9 (ảnh bìa bài viết có chữ in sẵn nên không được cắt) */
.page-hero__visual img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; border-radius: var(--r-lg); }
/* Hồ sơ giáo viên: ảnh tách nền (836×1254, chân chạm đáy) đứng sát mép dưới banner, không khung. H1 nằm trong cột chữ */
.page-hero--cutout { padding-bottom: 0; }
.page-hero--cutout .page-hero__grid { align-items: end; margin-top: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.page-hero--cutout .page-hero__text { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: clamp(44px, 6vw, 72px); }   /* banner cao thêm 25% → canh giữa cụm chữ cho khỏi hụt phía trên */
.page-hero--cutout .page-hero__text .lead { margin-top: 18px; }
.page-hero__cutout { display: flex; justify-content: center; align-items: flex-end; }
.page-hero--cutout .page-hero__cutout img { display: block; width: auto; height: 720px; max-width: 100%; object-fit: contain; aspect-ratio: 836 / 1254; border-radius: 0; }
/* Decor sau ảnh: vòm vàng phía trên-trái + khối đỏ bo góc phải ở chân ảnh (theo mẫu khách); khung ôm đúng bề ngang ảnh */
.cutout-frame { position: relative; display: inline-block; line-height: 0; }
.cutout-frame img { position: relative; z-index: 2; }
.cutout-frame__arch, .cutout-frame__block { position: absolute; z-index: 1; pointer-events: none; }
.cutout-frame__arch { left: -14%; right: 18%; bottom: 30%; height: 34%; background: var(--yellow); border-radius: 999px 0 0 0; }
.cutout-frame__block { left: -4%; right: -18%; bottom: 0; height: 40%; background: var(--red); border-radius: 0 999px 0 0; }
@media (min-width: 901px) { .page-hero--cutout { justify-content: flex-end; } }
@media (max-width: 820px) {
  .page-hero--cutout .page-hero__text { padding-bottom: 8px; }
  .page-hero--cutout .page-hero__cutout img { height: 520px; }
}

/* Dải số liệu hồ sơ trên nền navy: số vàng 10.19:1, nhãn --on-navy */
.profile-stats { display: flex; flex-wrap: wrap; gap: 14px 0; margin-top: 30px; }
.profile-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 5px; padding-right: 30px; margin-right: 30px; border-right: 1px solid var(--line-navy); max-width: 240px; }
.profile-stats > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.profile-stats dd { font-family: var(--display); font-size: clamp(1.85rem, 2.8vw, 2.45rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }   /* khách 18/09: to hơn ~17% cho nổi trong banner */
.profile-stats dt { font-size: .9rem; line-height: 1.4; color: var(--on-navy); }
/* Lưới card học viên ở hồ sơ giáo viên — cùng component với marquee trang chủ, nhưng co giãn
   theo cột và bóng nhẹ vì nằm trên nền sáng chứ không phải navy. */
/* Lưới rộng hết .wrap: số cột = số thẻ (tối đa 6, truyền qua --cols ở template) nên 4–6 thẻ luôn nằm gọn
   một hàng, không lẻ thẻ xuống hàng dưới. Thẻ bỏ width 232px cố định của marquee và giãn theo cột;
   ảnh hạ về 5:4 để thẻ rộng không cao quá. Kiểu chữ, tag, gạch vàng điểm giữ nguyên như trang chủ. */
.honor-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 20px; }
.honor-grid .honor-card { width: auto; box-shadow: 0 12px 30px rgba(9, 11, 12, .12); }
.honor-grid .honor-card__photo { aspect-ratio: 5 / 4; }
.honor-grid .honor-card__photo img { object-position: center 30%; }
@media (max-width: 1024px) { .honor-grid { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 640px) { .honor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }


.breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--on-navy); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split--sticky > :last-child { position: sticky; top: calc(var(--nav-h) + 24px); }
/* Form nhận tài liệu: cụm chữ bên trái rộng hơn form, tiêu đề/mô tả không bị khoá 65ch */
.gate-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.gate-split h2, .gate-split .lead { max-width: none; }
@media (max-width: 900px) { .gate-split { grid-template-columns: 1fr; } }

/* ---------- Cards ----------
   .card và .teacher-card nằm ở common.css (trang chủ dùng chung thẻ giáo viên). */
.card--head { padding: 22px 22px 0; }
/* Đầu thẻ khoá học: một bề mặt trung tính duy nhất, không mỗi thẻ một màu.
   Màu brand chỉ xuất hiện ở badge và ở viền khi hover. */
.card__head { padding: 20px 22px; color: var(--black); background: var(--smoke); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.card__head h3 { color: inherit; font-size: 1.25rem; }
.card__head .pill { align-self: flex-start; background: var(--white); border: 1px solid var(--line); color: var(--black); }
/* Cụm tiêu đề mang màu NHÓM GỐC của khoá — nhìn lưới là biết khoá thuộc nhóm nào mà không
   phải đọc badge. Đúng bốn màu của hero danh mục và ô bento trang chủ.
   Badge giữ nền trắng ở cả bốn nền: trắng/navy 15.89, trắng/đen 19.72, trắng/đỏ 5.58, trắng/vàng vẫn đọc vì chữ badge là đen. */
.card--navy .card__head   { background: var(--dark);    border-bottom-color: var(--dark);    color: var(--white); }
.card--black .card__head  { background: var(--black);   border-bottom-color: var(--black);   color: var(--white); }
.card--red .card__head    { background: var(--red-700); border-bottom-color: var(--red-700); color: var(--white); }
.card--yellow .card__head { background: var(--yellow);  border-bottom-color: var(--yellow);  color: var(--black); }
.card--navy .card__head h3 a:hover,
.card--black .card__head h3 a:hover,
.card--red .card__head h3 a:hover { color: var(--yellow); }
.card--yellow .card__head h3 a:hover { color: var(--red-700); }
.card:hover .card__head .pill { border-color: var(--red); }

.tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* Campus */
.campus-card .status { margin-top: 2px; }
.campus-card address { font-style: normal; font-size: .95rem; color: var(--gray-soft); }

/* Article */
.article-card .card__media { aspect-ratio: 16 / 9; }  /* khớp đúng tỉ lệ cover 1600×900, tránh crop mất tiêu đề */
/* Tiêu đề thẻ bài viết: to hơn và bỏ text-wrap: balance (kế thừa từ h3) — balance chia đều dòng nên
   tiêu đề 2 dòng chỉ chiếm ~60% bề rộng thẻ; pretty lấp đầy dòng đầu, chỉ tránh chữ mồ côi ở dòng cuối */
.article-card h3 { font-size: clamp(1.2rem, 1.5vw, 1.35rem); line-height: 1.3; text-wrap: pretty; }
.article-card__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .82rem; color: var(--gray-soft); }
.article-card__meta > span { white-space: nowrap; }
.article-card--feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.article-card--feature .card__media { aspect-ratio: 16 / 9; align-self: center; }
.article-card--feature .card__body { padding: 32px; justify-content: center; }
.article-card--feature h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
@media (max-width: 900px) { .article-card--feature { grid-template-columns: 1fr; } .article-card--feature .card__body { padding: 18px 8px 8px; } }
.article-card__meta .cat { color: var(--gray); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* Download */
.download-card .card__media { aspect-ratio: 16 / 9; }
.download-card__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--gray-soft); }

/* Honor */

/* ---------- Filter chips / tabs ---------- */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 8px; }
.filter-bar--center { justify-content: center; }
.filter-chip { padding: 9px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--white); font-weight: 600; font-size: .9rem; color: var(--black); transition: background .2s, border-color .2s, color .2s; }
.filter-chip:hover { border-color: var(--black); }
.filter-chip.is-active { background: var(--black); border-color: var(--black); color: var(--white); }
/* Khách 18/09: chỉ khi có HAI tầng tab mới dùng cặp "tab lớn gạch chân + chip"; nhóm tab một tầng
   (Lịch dạy ở hồ sơ giáo viên, kết quả tìm kiếm) dùng chip viên thuốc như bộ lọc. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.teach-tabs .tabs { justify-content: center; }   /* khách 18/09: tab khoá ở hồ sơ giáo viên canh giữa như tiêu đề mục */
.tab-btn { padding: 9px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--white); font-size: .9rem; font-weight: 600; color: var(--black); white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.tab-btn:hover { border-color: var(--black); }
.tab-btn.is-active { background: var(--black); border-color: var(--black); color: var(--white); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------- Accordion ---------- */
/* ---------- Sub-nav (course detail) ---------- */
.subnav { position: sticky; top: var(--nav-h); z-index: 60; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: 16px 14px; font-weight: 600; font-size: .92rem; color: var(--gray); white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav a.is-active { color: var(--black); border-color: var(--red); }
/* .subnav a có specificity cao hơn .btn--primary nên nuốt mất màu chữ của nút,
   khiến nhãn xám nằm trên nền đỏ (1.85:1). Trả lại màu cho nút. */
.subnav .btn { margin-left: auto; flex: none; }
.subnav .btn--primary { color: var(--white); }
.subnav .btn--ghost { color: var(--black); }
@media (max-width: 1100px) { .subnav { top: 62px; } }

/* ---------- Timeline (curriculum) ---------- */
/* Câu chuyện GTL: chữ trái, ảnh phải; thẻ "Định vị thương hiệu" trải hết khung bên dưới, 4 ý một hàng */
.story { align-items: center; }
.story__visual > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.brand-pos { margin-top: clamp(32px, 4vw, 48px); padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); }
.brand-pos { text-align: center; }
.brand-pos h3 { margin-top: 10px; font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
.brand-pos__list { text-align: left; }
.brand-pos__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; margin-top: clamp(28px, 3.4vw, 48px); }
.brand-pos__list li { display: flex; align-items: flex-start; gap: 12px; }
.brand-pos__list li + li { border-left: 1px solid var(--line); padding-left: 28px; }
.brand-pos__list .promise__ic { width: 48px; height: 48px; }
.brand-pos__list b { display: block; color: var(--black); font-size: 1rem; line-height: 1.3; }
.brand-pos__list small { display: block; margin-top: 2px; font-size: .85rem; color: var(--gray-soft); }
@media (max-width: 1100px) {
  .brand-pos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-pos__list li + li { border-left: 0; padding-left: 0; }
}

@media (max-width: 560px) {
  .brand-pos__list { grid-template-columns: 1fr; }
}

/* ---------- Slider tràn viền (timeline, gallery) ----------
   Track rộng hết màn hình; padding hai bên = lề của .wrap nên thẻ đầu thẳng hàng với tiêu đề
   nhưng các thẻ sau trượt ra tận mép màn hình, không bị cắt ở lề nội dung. */
.carousel--bleed {
  --bleed: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  margin-inline: 0; padding: 6px var(--bleed) 10px; scroll-padding-inline: var(--bleed);
}
/* .carousel (common.css) đặt margin shorthand SAU .mt-l nên nuốt mất khoảng cách trên — trả lại */
.carousel--bleed.mt-l { margin-top: 40px; }
.carousel-nav--below { justify-content: center; margin-top: 22px; }
.carousel-nav .js-prev .ic { transform: scaleX(-1); }

/* Timeline slider: trục ngang chạy qua mọi thẻ (mỗi mốc vẽ đoạn trục của mình, kéo dài qua gap). */
.tl { list-style: none; gap: 24px; }
.tl > .tl__item { flex: 0 0 min(400px, 82vw); position: relative; display: flex; flex-direction: column; }
/* --tl-when-h: chiều cao dòng mốc thời gian; trục (::before) và chấm canh theo nó.
   Trục, chấm, viền thẻ MỘT màu navy (khách thấy trục + viền mỗi mốc một màu bị rối); màu nhóm chỉ còn ở nhãn giai đoạn. */
.tl { --tl-when-h: 34px; }
.tl__item::before { content: ""; position: absolute; left: 0; right: -24px; top: calc(var(--tl-when-h) + 8px + 11px - 1.5px); height: 3px; background: var(--dark); transition: background .5s var(--ease); }
.tl__item:last-child::before { right: 0; }
.tl__item--navy { --tl: var(--dark); }
.tl__item--yellow { --tl: var(--yellow); }
.tl__item--red { --tl: var(--red-700); }
.tl__item--black { --tl: var(--black); }
.tl__when { display: flex; align-items: flex-end; height: var(--tl-when-h); font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1; letter-spacing: -.02em; color: var(--black); font-variant-numeric: tabular-nums; transition: color .5s var(--ease); }
.tl__dot { position: relative; z-index: 1; width: 22px; height: 22px; margin: 8px 0 22px; border-radius: 50%; background: var(--white); border: 5px solid var(--dark); }
.tl__card { flex: 1; display: flex; flex-direction: column; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); user-select: none; }
.tl__phase { align-self: flex-start; margin-bottom: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--tl); color: var(--white); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tl__item--yellow .tl__phase { color: var(--black); }
.tl__card h3 { font-size: 1.2rem; }
.tl__card p { margin-top: 8px; font-size: .95rem; color: var(--gray-soft); }
.tl__stat { display: inline-block; margin-top: 12px; font-family: var(--display); font-size: 1.1rem; color: var(--black); background: linear-gradient(transparent calc(100% - 3px), var(--yellow) calc(100% - 3px)); align-self: flex-start; }
/* Ảnh luôn nằm đáy thẻ: các thẻ cùng hàng dù chữ dài ngắn khác nhau vẫn thẳng mép ảnh */
.tl__img { display: block; margin-top: auto; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); }
.tl__card > p, .tl__stat { margin-bottom: 18px; }
/* Tiến trình: site.js bật .tl--progress; mốc chưa trượt ngang tới thì mờ, trượt tới đâu sáng tới đó
   (không JS hoặc giảm chuyển động thì không có lớp mờ). */
.tl__dot, .tl__card { transition: opacity .4s var(--ease), filter .4s var(--ease), border-color .4s var(--ease); }
.tl--progress .tl__item:not(.is-reached)::before { background: var(--line-strong); }
.tl--progress .tl__item:not(.is-reached) .tl__when { color: var(--gray-soft); opacity: .55; }
.tl--progress .tl__item:not(.is-reached) .tl__dot { border-color: var(--line-strong); }
.tl--progress .tl__item:not(.is-reached) .tl__card { opacity: .45; filter: grayscale(.85); }
@media (max-width: 560px) { .tl { --tl-when-h: 28px; } }
/* Timeline dạng lưới (ít mốc, không cuộn ngang): 3 cột trong .wrap, đường nối chạy liền giữa các cột */
.tl--grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tl--grid > .tl__item { flex: none; min-width: 0; }
@media (max-width: 900px) { .tl--grid { grid-auto-flow: row; } .tl--grid .tl__item::before { right: 0; } }

/* ---------- Trang Pasal ---------- */
.diff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.diff-card { padding: 28px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease); }
.diff-card:hover { border-color: var(--red); transform: translateY(-2px); }
.diff-card h3 { margin-top: 18px; font-size: 1.15rem; }
.diff-card p { margin-top: 8px; font-size: .95rem; color: var(--gray-soft); }
.methods { align-items: center; }
.methods__img { margin: 0; }
.methods__img img { width: 100%; border-radius: var(--r-lg); }
.methods__list { list-style: none; display: grid; gap: 14px; counter-reset: m; }
.methods__list li { position: relative; padding: 18px 20px 18px 64px; border: 1px solid var(--line-navy); border-radius: var(--r); }
.methods__list li::before { counter-increment: m; content: counter(m); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--black); font-weight: 700; font-size: .9rem; }
.methods__list b { display: block; color: var(--white); font-family: var(--display); font-size: 1.15rem; }
.methods__who { display: block; margin-top: 2px; color: var(--yellow); font-size: .85rem; font-weight: 600; }
.methods__list p { margin-top: 6px; color: var(--on-navy); font-size: .92rem; }
@media (max-width: 1024px) { .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .diff-grid { grid-template-columns: 1fr; } }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.timeline__item { position: relative; padding: 26px 24px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.timeline__item::before { counter-increment: step; content: counter(step); position: absolute; top: -14px; left: 22px; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--black); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.timeline__item small { display: block; color: var(--gray); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.timeline__item h3 { font-size: 1.1rem; margin-top: 6px; }
.timeline__item p { margin-top: 8px; font-size: .95rem; color: var(--gray-soft); }

/* Steps (hợp tác) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps li { position: relative; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-size: 2rem; font-weight: 700; color: var(--dark); letter-spacing: -.04em; display: block; }
.steps h3 { font-size: 1.05rem; margin-top: 6px; }
.steps p { font-size: .92rem; color: var(--gray-soft); margin-top: 6px; }

/* Outcome tiles */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.outcomes li { padding: 22px; background: var(--smoke); border-radius: var(--r); border-top: 3px solid var(--yellow); }
.outcomes b { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; color: var(--black); line-height: 1; }
.outcomes span { display: block; margin-top: 8px; font-size: .92rem; color: var(--gray); }

/* Checklist */
/* Khối đăng ký (enrollCta): 3 ý có ô icon 4 màu, cùng họ với dải cam kết trang chủ */
.enroll-points { list-style: none; display: grid; gap: 16px; }
.enroll-points li { display: flex; align-items: center; gap: 14px; }
.enroll-points .promise__ic { width: 48px; height: 48px; }
.enroll-points b { display: block; color: var(--black); font-size: 1.02rem; }
.enroll-points span:not(.promise__ic) { display: block; margin-top: 2px; font-size: .92rem; color: var(--gray-soft); }

/* Thẻ lịch học cơ sở */
.sched-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sched-card { display: flex; flex-direction: column; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .3s, transform .3s var(--ease); }
.sched-card:hover { border-color: var(--red); transform: translateY(-2px); }
.sched-card__top { display: flex; gap: 16px; align-items: flex-start; }
.sched-card__date { flex: none; width: 72px; text-align: center; border-radius: var(--r); overflow: hidden; background: var(--dark); color: var(--white); padding-bottom: 8px; }
.sched-card__date small { display: block; padding: 4px 0; background: var(--red-700); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sched-card__date b { display: block; margin-top: 4px; font-family: var(--display); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sched-card__date span { display: block; margin-top: 2px; font-size: .74rem; color: var(--on-navy); }
/* Rê chuột: thẻ lấp nền tối nên khối ngày chìm mất — đổi phần dưới của khối ngày sang vàng, chữ đen (khách 18/09) */
.sched-card:hover .sched-card__date { background: var(--yellow); color: var(--black); }
.sched-card:hover .sched-card__date span { color: var(--on-yellow); }
.sched-card__head { min-width: 0; }
.sched-card__head h3 { margin-top: 8px; font-size: 1.08rem; line-height: 1.3; }
.sched-card__head h3 a:hover { color: var(--red); }
.sched-card__class { margin-top: 4px; font-size: .88rem; color: var(--gray-soft); }
.sched-card__status { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; }
.sched-card__status--open { background: var(--dark); color: var(--white); }
.sched-card__status--few { background: var(--yellow); color: var(--black); }
.sched-card__status--full { background: var(--smoke-2); color: var(--black); }
.sched-card__meta { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sched-card__meta li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--black); min-width: 0; }
.sched-card__meta .ic { flex: none; }
.sched-card__seats { height: 6px; margin-top: 18px; border-radius: 6px; background: var(--smoke-2); overflow: hidden; }
.sched-card__seats i { display: block; height: 100%; border-radius: 6px; background: var(--red); }
.sched-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: .85rem; color: var(--gray-soft); }
@media (max-width: 1100px) { .sched-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sched-grid { grid-template-columns: 1fr; } }

/* 3 bước mô hình tín chỉ (/khoa-hoc/): thẻ ngang, ô icon 4 màu */
.credit-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.credit-steps li { padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.credit-steps small { display: block; margin-top: 18px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red-700); }
.credit-steps h3 { margin-top: 4px; font-size: 1.15rem; }
.credit-steps p { margin-top: 8px; font-size: .95rem; color: var(--gray-soft); }
@media (max-width: 820px) { .credit-steps { grid-template-columns: 1fr; } }

/* Hồ sơ giáo viên: 2 cột Học vấn | Kinh nghiệm */
.profile-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.profile-col { padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.profile-col h3 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; }
.profile-col__ic { width: 48px; height: 48px; flex: none; }
.profile-col h4 { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red-700); }
.profile-col__where { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 12px; border-radius: var(--r); background: var(--smoke); font-size: .92rem; font-weight: 600; color: var(--black); width: fit-content; max-width: 100%; }
.profile-list { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.profile-list li { position: relative; padding-left: 22px; color: var(--gray); line-height: 1.55; }
.profile-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(247, 202, 57, .25); }
.profile-list--award li::before { background: var(--red); box-shadow: 0 0 0 3px rgba(229, 64, 54, .18); }
/* Phương châm: khối navy full-width, chữ display lớn, dấu ngoặc kép vàng khổng lồ và gạch dạ quang vàng dưới chữ */
/* Phương châm giảng dạy: khối trích dẫn nhẹ — nền smoke, vạch đỏ trái, chữ display đen. Không nền navy, không dấu ngoặc lớn. */
.profile-motto { margin: 32px 0 0; padding: 26px 32px; border-left: 3px solid var(--red); border-radius: 0 var(--r) var(--r) 0; background: var(--smoke); font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.35; letter-spacing: -.015em; color: var(--black); }
.profile-motto__text { text-wrap: pretty; }
.profile-motto small { display: block; margin-top: 10px; font-family: var(--sans); font-size: .88rem; font-weight: 500; letter-spacing: 0; color: var(--gray); }
.student-wins { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.student-wins li { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--black); font-weight: 500; line-height: 1.5; }
.student-wins__ic { flex: none; width: 44px; height: 44px; }
@media (max-width: 820px) { .profile-cols { grid-template-columns: 1fr; } }

/* ---------- Trang Thành tích ---------- */
/* Dải số liệu: nền .bg-navy chung (eyebrow, tiêu đề, icon tự đúng màu); con số giống dải Bảng vàng trang chủ —
   số vàng lớn, vạch dọc trái, không đóng khung. Nhãn chọn đúng `> div > span` để không đè cỡ chữ của số. */
/* .big-stats: lưới + kiểu số nằm ở khối "Con số nổi bật" chung trong common.css */

.boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.board { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.board__head { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: var(--dark); color: var(--white); }
.board--red .board__head { background: var(--red-700); }
.board--yellow .board__head { background: var(--yellow); color: var(--black); }
.board__head h3 { color: inherit; font-size: 1.35rem; }
.board__head small { display: block; font-size: .8rem; opacity: .85; }
.board__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.board__icon .ic { width: 100%; height: 100%; }
.board__top { margin-left: auto; font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.board__list { list-style: none; }
.board__list li { display: grid; grid-template-columns: 24px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); }
.board__list li:first-child { border-top: 0; background: rgba(247, 202, 57, .12); }
.board__rank { font-family: var(--display); font-weight: 700; color: var(--gray-soft); text-align: center; }
.board__list li:first-child .board__rank { color: var(--red-700); }
.board__list img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.board__who { min-width: 0; }
.board__who b { display: block; color: var(--black); font-size: .95rem; }
.board__who span, .board__who small { display: block; font-size: .78rem; color: var(--gray-soft); line-height: 1.4; }
.board__score { font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--black); background: linear-gradient(transparent calc(100% - 3px), var(--yellow) calc(100% - 3px)); padding: 0 2px; white-space: nowrap; }

.school-walls { display: grid; gap: 40px; }
.school-wall__title { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.school-wall__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 1024px) { .school-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .school-wall__grid { grid-template-columns: 1fr; } }
.school-tile { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.school-tile__count { flex: none; min-width: 1.6em; font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--black); text-align: center; background: linear-gradient(transparent calc(100% - 3px), var(--yellow) calc(100% - 3px)); padding: 0 4px; font-variant-numeric: tabular-nums; }
.school-tile h4 { font-family: var(--display); font-size: 1.08rem; line-height: 1.3; color: var(--black); text-wrap: pretty; }
.school-tile span { display: block; margin-top: 2px; font-size: .84rem; color: var(--gray-soft); }
@media (max-width: 1024px) { .boards { grid-template-columns: 1fr; } }

/* ===== Trang Tài liệu tải về =====
   1) .dl-how: 3 bước nhận tài liệu + ô "Hoàn toàn miễn phí", một khối viền mảnh ngay dưới banner.
   2) .dl-browser: tab dọc (môn) + tab ngang (cấp học), thẻ ngang xếp một cột có "Bên trong tài liệu". */
.dl-how { display: block; align-items: center; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.dl-how__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.dl-how__steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.dl-how__num { position: absolute; left: 30px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: var(--white); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.dl-how__ic { width: 44px; height: 44px; }
.dl-how__steps b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--black); }
.dl-how__steps span:not(.dl-how__num) { display: block; margin-top: 2px; font-size: .88rem; line-height: 1.5; color: var(--gray-soft); }

/* Khung duyệt: cột trái tab dọc (môn), cột phải tab ngang (cấp) + danh sách thẻ một cột */
.dl-browser { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.dl-browser__side { position: sticky; top: calc(var(--nav-h) + 24px); }
.dl-browser__label { display: block; margin-bottom: 12px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.dl-vtabs { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.dl-vtabs .filter-chip { justify-content: space-between; width: 100%; margin-left: -1px; padding: 11px 14px 11px 18px; border: 0; border-left: 3px solid transparent; border-radius: 0 10px 10px 0; background: none; font-size: .95rem; font-weight: 600; color: var(--gray); text-align: left; }
.dl-vtabs .filter-chip:hover { background: var(--smoke); color: var(--black); }
.dl-vtabs .filter-chip.is-active { background: var(--smoke); border-left-color: var(--red); color: var(--black); font-weight: 700; }
.dl-browser__top { margin-bottom: 24px; }
/* .filter-bar gốc có margin-bottom 8px làm vạch đỏ lơ lửng trên đường kẻ — kéo sát và đè lên đường kẻ 1px */
:is(.dl-htabs, .filter-bar--tabs) { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 -1px; }
:is(.dl-htabs, .filter-bar--tabs)::-webkit-scrollbar { display: none; }
:is(.dl-htabs, .filter-bar--tabs) .filter-chip { flex: none; white-space: nowrap; }
/* Tabs lồng tabs (khách 18/09): tầng 1 dùng tab lớn gạch chân, tầng 2 giữ chip viên thuốc */
.filter-bar--tabs { width: 100%; border-bottom: 1px solid var(--line); }
.filter-stack:has(.filter-bar--tabs) { gap: 14px; }
/* .filter-bar gốc có margin 28px trên / 8px dưới — trong .filter-stack thì khoảng cách giữa hai hàng
   phải do gap của lưới quyết định, nếu không hai hàng tab hở gần 40px (khách 18/09). */
.filter-stack .filter-bar { margin: 0; }
/* Hàng tab lớn: tab bên trái, dòng "Đang hiện N …" bên phải, chung một đường kẻ chân */
.tabrow, .dl-browser__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabrow { min-width: 0; }
.tabrow .filter-bar--tabs { width: auto; min-width: 0; border-bottom: 0; }
.tabrow .filter-count, @media (max-width: 720px) { :is(.dl-htabs, .filter-bar--tabs) .filter-chip { padding-inline: 14px; } }
.dl-vtabs.filter-bar { margin: 0; }
:is(.dl-htabs, .filter-bar--tabs) .filter-chip { margin-bottom: 0; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; font-size: .98rem; font-weight: 600; color: var(--gray); }
:is(.dl-htabs, .filter-bar--tabs) .filter-chip:hover { color: var(--black); }
:is(.dl-htabs, .filter-bar--tabs) .filter-chip.is-active { border-bottom-color: var(--red); color: var(--black); font-weight: 700; background: none; }
.dl-vtabs .filter-chip em, :is(.dl-htabs, .filter-bar--tabs) .filter-chip em { margin-left: 8px; font-style: normal; font-size: .76rem; font-weight: 700; color: var(--gray-soft); }
.dl-browser__top .filter-count { margin: 0 0 12px; }

.dl-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dl-item { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.dl-item:hover { border-color: var(--line-strong); box-shadow: 0 16px 40px rgba(9, 11, 12, .08); }
.dl-item[hidden] { display: none; }
.dl-item__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--smoke-2); }
.dl-item__cover img { width: 100%; height: 100%; object-fit: cover; }
.dl-item__subject { position: absolute; top: 10px; left: auto; right: 58px; }
.dl-item__type { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 6px; background: var(--red); color: var(--white); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.dl-item__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 22px 24px; min-width: 0; }
.dl-item__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dl-item h3 { min-height: 2.6em; font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.3; text-wrap: pretty; }
.dl-item__body > p { max-width: none; font-size: .93rem; color: var(--gray-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dl-item__foot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.dl-item__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dl-item__meta li { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--gray); }
.dl-item__foot .btn { width: 100%; }
.dl-item__inside b { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 700; color: var(--black); }
.dl-item__inside .checklist { gap: 6px; }
.dl-item__inside .checklist li { font-size: .88rem; }
.dl-item__inside .checklist .ic { width: 20px; height: 20px; }
.dl-item .dl-sheet { max-width: 150px; }
@media (max-width: 1100px) { .dl-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .dl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .dl-browser { grid-template-columns: minmax(0, 1fr); }
  .dl-browser__side { position: static; }
  .dl-browser__label { display: none; }
  /* Tab dọc thành dải cuộn ngang trên màn hẹp */
  .dl-vtabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .dl-vtabs .filter-chip { width: auto; flex: none; margin: 0 0 -1px; padding: 10px 14px; border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; white-space: nowrap; }
  .dl-vtabs .filter-chip.is-active { border-bottom-color: var(--red); background: none; }
}
@media (max-width: 720px) {
  .dl-how__steps { grid-template-columns: 1fr; gap: 18px; }
  .dl-list { grid-template-columns: 1fr; }
}

/* Quy trình hợp tác: timeline ngang 4 mốc, số tròn nằm trên trục; mobile thành trục dọc */
.process { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.process__step { position: relative; display: flex; flex-direction: column; }
.process__step::before { content: ""; position: absolute; top: 27px; left: 56px; right: -24px; height: 3px; background: repeating-linear-gradient(90deg, var(--dark) 0 10px, transparent 10px 18px); }
/* Bước cuối: nét đứt kéo tới hết mép phải của thẻ, kết thúc bằng đầu mũi tên (tam giác navy) */
.process__step:last-child::before { right: 10px; }
.process__step:last-child::after { content: ""; position: absolute; top: 22.5px; right: 0; border-style: solid; border-width: 6px 0 6px 11px; border-color: transparent transparent transparent var(--dark); }
.process__node { position: relative; z-index: 1; }
.process__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--dark); color: var(--yellow); font-family: var(--display); font-size: 1.25rem; font-weight: 700; box-shadow: 0 0 0 6px var(--white); }
.process__step:last-child .process__num { background: var(--red); color: var(--white); }
.process__when { margin-top: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red-700); }
.process__card { flex: 1; margin-top: 10px; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.process__ic { width: 48px; height: 48px; }
.process__card h3 { margin-top: 14px; font-size: 1.12rem; }
.process__card p { margin-top: 6px; font-size: .93rem; color: var(--gray-soft); }
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: 20px; }
  .process__step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; }
  .process__step::before { top: 56px; bottom: -20px; left: 27px; right: auto; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--dark) 0 10px, transparent 10px 18px); }
  .process__step:last-child::before, .process__step:last-child::after { display: none; }
  .process__node { grid-row: 1 / span 2; }
  .process__when { margin-top: 4px; }
}

.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.checklist .ic { width: 24px; height: 24px; flex: none; margin-top: 0; }
.checklist__note { color: var(--gray); font-size: .92rem; }

/* Cơ sở chưa có ảnh: khối địa danh thay ảnh, giữ đúng khung 16/9 của .card__media
   nên lưới không lệch khi có cơ sở đã có ảnh và cơ sở chưa có đứng cạnh nhau. */
.card__media--place {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; text-align: center;
  background: var(--dark); color: var(--on-navy);
}
.card__media--place .ic { width: 34px; height: 34px; --ic-1: var(--white); --ic-2: var(--yellow); --ic-3: rgba(255,255,255,.22); }
.card__media--place b { font-family: var(--display); font-size: 1.35rem; color: var(--white); line-height: 1.2; }
.card__media--place span { font-size: .82rem; max-width: 34ch; line-height: 1.45; }

/* Bảng môn theo lớp (khoá Bồi dưỡng). Cột lớp hẹp cố định để các hàng thẳng nhau;
   chip môn xuống dòng trong ô thay vì kéo bảng rộng ra. */
.subject-matrix { width: 100%; border-collapse: collapse; }
.subject-matrix th, .subject-matrix td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.subject-matrix thead th { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); background: var(--smoke); }
.subject-matrix tbody th { font-family: var(--display); font-size: 1.05rem; color: var(--black); white-space: nowrap; width: 1%; }
.subject-matrix tbody tr:last-child th, .subject-matrix tbody tr:last-child td { border-bottom: 0; }
.subject-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.subject-tags a.pill, .subject-matrix th a { transition: background .2s, color .2s; }
.subject-tags a.pill:hover { background: var(--yellow); color: var(--black); }
.subject-matrix th a { border-bottom: 1.5px solid var(--red); }
/* Hai thanh lọc xếp chồng: tầng 1 tab lớn, tầng 2 chip — không còn nhãn chữ nhỏ ở đầu hàng (khách 18/09) */
.filter-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* minmax(0,…): thanh tab cuộn ngang không kéo giãn cột lưới trên màn hẹp */
.filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Lọc hai tầng ----------
   Tầng 1 là DẢI TAB (.filter-bar--tabs / .tab-btn): chọn nhánh của cây danh mục, vai trò gần điều hướng
   hơn là lọc. Tầng 2 là chip viên thuốc để trần ngay dưới: vạch chân của dải tab đã tách hai tầng đủ rõ,
   thêm một hộp viền nữa là hai đường kẻ chồng nhau. Bản .ftabs cũ (biến thể tab thứ ba) đã gỡ. */
/* Đếm kết quả: aria-live nên đọc màn hình cũng biết lọc vừa đổi */
.filter-count { margin-top: 14px; font-size: .88rem; color: var(--gray-soft); }
.filter-count b { font-family: var(--display); font-size: 1.05rem; color: var(--black); }
/* Phân trang thẻ (thư viện): nút số, trang đang xem tô đen. Đổi trang không cuộn trang. */
.is-page-off { display: none !important; }
.grid--left { justify-content: start; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: clamp(28px, 3vw, 40px); }
.pager:empty { display: none; }
.pager__btn {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong); background: var(--white);
  font-family: var(--display); font-weight: 700; font-size: .98rem; color: var(--black);
  font-variant-numeric: tabular-nums; transition: background-color var(--dur), border-color var(--dur), color var(--dur);
}
.pager__btn:hover { border-color: var(--black); }
.pager__btn.is-active { background: var(--black); border-color: var(--black); color: var(--white); }

/* Môn học theo lớp: mỗi khoá một thẻ, tên khoá chỉ nói một lần (thay bảng lặp dòng, khách 18/09) */
.sm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.sm-grid--solo { grid-template-columns: minmax(0, 720px); }
.sm-course { display: flex; flex-direction: column; border: 1.5px solid var(--black); border-radius: var(--r-lg); background: var(--white); padding: clamp(20px, 2.2vw, 28px); }
.bg-smoke .sm-course { background: var(--white); }
.sm-course__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--black); color: var(--black); }
.sm-course__name { font-family: var(--display); font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; }
.sm-course__more { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--red-700); white-space: nowrap; }
.sm-course__head:hover .sm-course__more { text-decoration: underline; text-underline-offset: 3px; }
/* Học phí gộp trong thẻ môn học: giá đậm, dòng hình thức + cơ sở nhạt bên dưới */
.sm-course__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 0 0; }
.sm-course__price b { font-family: var(--display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--black); }
.sm-course__price b small { margin-left: 2px; font-size: .58em; font-weight: 600; letter-spacing: 0; color: var(--gray); }
.sm-course__price > span { font-size: .88rem; color: var(--gray); }
.sm-course__price a { color: var(--black); border-bottom: 1.5px solid var(--red); }
.sm-rows { margin: 12px 0 0; }
.sm-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sm-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sm-row dt { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--black); }
.sm-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sm-row .pill { background: var(--smoke-2); border: 0; font-size: .82rem; font-weight: 600; padding: 5px 11px; }
@media (max-width: 900px) { .sm-grid, .sm-grid--solo { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .sm-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
table.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-soft); font-weight: 700; background: var(--smoke); }
.table tr:last-child td { border-bottom: 0; }
.table td b { color: var(--black); }
.table td .score { color: var(--black); font-weight: 700; background: var(--yellow); padding: 2px 8px; border-radius: 5px; }

/* ---------- Prose (article / legal) ---------- */
/* Khung chung rộng 1500px nhưng cột đọc bị .prose khoá ở 68ch, nên nếu để layout
   này giãn hết thì thừa gần 400px trống bên phải. Cắt đúng bề rộng cần rồi căn giữa. */
/* Bài viết + pháp lý: rộng bằng khung trang (.wrap), mục lục sát lề trái, khoảng cách hai cụm rộng */
.article-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); font-size: .9rem; }
.toc__title { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-soft); font-weight: 700; margin-bottom: 12px; }
.toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--line); color: var(--gray); }
.toc a.is-active { color: var(--black); border-color: var(--red); font-weight: 600; }
.toc a[data-level="3"] { padding-left: 26px; font-size: .85rem; }
.prose { max-width: 68ch; font-size: 1.05rem; line-height: 1.75; }
.article-layout .prose { max-width: none; }
/* p toàn site bị khoá 65ch — trong bài viết cho đoạn văn, danh sách, hộp CTA giãn hết cột nội dung */
.article-layout .prose p, .article-layout .prose li, .article-cta p { max-width: none; }
.prose h2, .prose h3 { text-wrap: pretty; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose .lead { font-size: 1.2rem; color: var(--black); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }

.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--smoke); }
@media (max-width: 720px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose tbody { display: grid; gap: 10px; }
  .prose tbody tr { border: 1.5px solid var(--black); border-radius: var(--r); padding: 2px 16px 6px; }
  .prose tbody td { display: flow-root; padding: 8px 0 8px 112px; border: 0; border-top: 1px solid var(--line); }
  .prose tbody td:first-child { padding: 10px 0 8px; border-top: 0; font-family: var(--display); font-weight: 700; color: var(--black); }
  .prose tbody td:not(:first-child)::before { content: attr(data-label); float: left; width: 100px; margin-left: -112px; font-size: .8rem; font-weight: 700; line-height: 1.5; color: var(--gray); }
}.prose img { border-radius: var(--r); }
/* Cover giờ là ảnh 16:9 dựng riêng theo brand nên crop được, không cần contain
   như hồi còn dùng bìa sách của khách. */
.article-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--smoke-2); border-radius: var(--r-lg); margin: 32px 0; }
.article-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; color: var(--on-navy); margin-top: 16px; }
.article-cta { margin: 2.2em 0; padding: 26px 28px; background: var(--dark); color: var(--on-navy); border-radius: var(--r-lg); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.article-cta > div { flex: 1 1 320px; min-width: 0; }
.article-cta b { color: var(--white); font-size: 1.15rem; display: block; }
.article-cta p { max-width: 42ch; font-size: .95rem; margin: 6px 0 0; }
.download-box { margin: 2em 0; padding: 22px 24px; border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: var(--r); background: var(--smoke); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.download-box b { color: var(--black); display: block; }
.download-box span { font-size: .85rem; color: var(--gray-soft); }
.download-box .btn { margin-left: auto; }

/* ---------- Contact ---------- */
.contact-list { display: flex; flex-direction: column; gap: 14px; }
.contact-item { display: flex; gap: 16px; padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.contact-item .ic { width: 48px; height: 48px; flex: none; }
.contact-item b { display: block; color: var(--black); }
.contact-item span { font-size: .9rem; color: var(--gray-soft); }
.contact-item a.strong { color: var(--black); font-weight: 700; border-bottom: 1.5px solid var(--red); }
.map-box { border-radius: var(--r-lg); overflow: hidden; background: var(--smoke-2); min-height: 360px; position: relative; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- CTA band ---------- */
/* Dải chuyển đổi xuất hiện ở chân gần như mọi trang — để nó đỏ đặc là chữ ký màu
   của site, và là chỗ duy nhất đỏ được dùng ở diện lớn. Nút đỏ trên nền đỏ sẽ biến mất
   nên nút chính ở đây là vàng: ranh giới vàng/đỏ 3.58:1, nhãn đen trên vàng 12.64:1. */
.cta-band { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: clamp(32px, 4vw, 56px); border-radius: var(--r-lg); background: var(--red-700); color: var(--on-red); }
.cta-band h2 { color: var(--white); font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.cta-band .btn--primary { background: var(--yellow); color: var(--black); }
.cta-band .btn--primary:hover { background: var(--white); }
.cta-band .btn--ghost-light { border-color: var(--line-on-red); }
.cta-band .btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }
.cta-band p { margin-top: 10px; }
.cta-band .btn { position: relative; z-index: 1; }
.cta-band__body { position: relative; z-index: 1; }

/* ---------- Values / feature list ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature { padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.feature .ic { width: 64px; height: 64px; }
.feature h3 { font-size: 1.1rem; margin-top: 16px; }
.feature p { margin-top: 8px; font-size: .95rem; color: var(--gray-soft); }
.feature--dark { background: var(--dark); border-color: var(--dark); color: var(--on-navy); }
.feature--dark h3 { color: var(--white); }
.feature--dark p { color: var(--on-navy); }

/* Pull quote */
.pullquote { position: relative; padding: 32px 32px 28px; background: var(--smoke); border-left: 3px solid var(--yellow); border-radius: var(--r-lg); font-size: 1.25rem; font-weight: 600; color: var(--black); line-height: 1.5; }
.pullquote::before { content: "\201C"; position: absolute; top: 6px; left: 22px; font-size: 4rem; line-height: 1; color: var(--yellow); font-weight: 700; }
.pullquote small { display: block; margin-top: 10px; font-weight: 400; color: var(--gray-soft); font-size: .9rem; }

/* Definition list (info) */
.info-list { display: grid; gap: 12px; }
.info-list div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.info-list dt { color: var(--gray-soft); }
.info-list dd { color: var(--black); font-weight: 600; }

/* ---------- Search ---------- */
.search-box { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; max-width: 640px; }
.search-box input { min-width: 0; }
@media (max-width: 480px) { .search-box > * { flex: 1 1 100%; } }
.search-box { margin-top: 0; }
.search-box input { flex: 1; font: inherit; font-size: 1.05rem; padding: 15px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--white); color: var(--black); }
.search-box input::placeholder { color: var(--gray-soft); }
.search-box input:focus { outline: none; border-color: var(--yellow); }
.empty { padding: 40px; text-align: center; color: var(--gray-soft); background: var(--smoke); border-radius: var(--r-lg); }

/* ---------- 404 / thanks ---------- */
.big-code { font-size: clamp(5rem, 16vw, 11rem); font-weight: 700; letter-spacing: -.06em; color: var(--white); line-height: .9; display: inline-block; }
.big-code::after { content: ""; display: block; width: 64%; height: 6px; margin-top: 10px; background: var(--yellow); border-radius: 3px; }
.thanks { text-align: center; padding: var(--section) 0; }
.thanks__icon { width: 88px; height: 88px; margin: 0 auto 22px; }
.thanks .lead { margin-inline: auto; }
.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: left; }

/* ---------- Sticky mobile CTA ---------- */
.cta-sticky { display: none; }

/* ---------- Responsive ---------- */
/* Lưới 4 dài (danh sách giáo viên): 3 cột ở laptop nhỏ; lưới đúng 4 thẻ về 2×2 để không lẻ thẻ */
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-4:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) {
  .feature-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; }
  .toc { position: static; display: none; }
}
@media (max-width: 820px) {
  .grid-4, .grid-4:has(> :nth-child(5)) { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; }
  .split--sticky > :last-child { position: static; }
  .page-hero--split .page-hero__grid { grid-template-columns: 1fr; }
  /* 3 ý trên màn hẹp bị xuống dòng, ô cuối hàng vẫn giữ vạch dọc thừa → chuyển sang lưới 2 cột */
  .profile-stats { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 16px 0; }
  .profile-stats > div { border-right: 0; margin-right: 0; padding-right: 0; }
  .profile-stats > div:nth-child(odd):not(:last-child) { border-right: 1px solid var(--line-navy); margin-right: 18px; }
  .timeline, .outcomes { grid-template-columns: 1fr; }
  .next-steps { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  .info-list div { grid-template-columns: 1fr; gap: 2px; }
  .cta-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border-top: 1px solid var(--line); gap: 10px; transform: translateY(100%); transition: transform .35s var(--ease); }
  .cta-sticky.is-visible { transform: none; }
  .cta-sticky .btn { flex: 1; }
  .group-contact { bottom: 84px; }
}
@media (max-width: 1024px) { .grid-3:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); } }
/* Lưới 3 cột với số thẻ lẻ: 1 thẻ canh giữa, 4 thẻ xếp 2×2 — không để một thẻ đứng trơ một hàng */
@media (min-width: 1025px) {
  .grid-3.grid--left:not(:has(> :nth-child(2))), .grid-3.grid--left:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: start; }
  .grid-3:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 480px); justify-content: center; }
  .grid-3:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-3, .grid-2, .grid-3:not(:has(> :nth-child(3))) { grid-template-columns: 1fr; }
  .grid-3 > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 560px) {
  .grid-4, .grid-4:has(> :nth-child(5)), .feature-grid, .steps { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); }
  .page-hero__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-body, .card, .card__media img, .cta-sticky { transition: none; }
}

/* Nút tài liệu bị khoá trước khi để lại email */
[data-gated].is-locked::after { content: ""; }

/* ===== Bổ sung sau audit brief ============================================ */

/* Panel lớn trong .split: padding co theo màn hình để nút bên trong không ép panel rộng ra */
.feature--panel { padding: clamp(22px, 5vw, 36px); }
.feature--panel > .mt-l .btn { white-space: normal; text-align: left; }

/* Thẻ khoá học: giá bên trái, cụm "Chi tiết" + nút "Tư vấn" bên phải (brief D52) */
.card__actions { display: flex; align-items: center; gap: 14px; }
@media (max-width: 560px) {
  .card__foot { flex-wrap: wrap; }
  .card__actions { width: 100%; justify-content: space-between; }
}

/* Trạng thái rỗng của bộ lọc: môn chưa có giáo viên, nhóm chưa có khoá */
.filter-empty {
  margin-top: 24px; padding: 28px; border: 1px dashed var(--line); border-radius: var(--r);
  text-align: center; color: var(--gray-soft); font-size: .95rem;
}

/* Gallery ảnh cơ sở: kéo ngang, dùng chung hạ tầng .carousel + .js-drag */
.gallery > .gallery__item { flex: 0 0 min(520px, 86vw); margin: 0; }
/* Coverflow: track đệm nửa màn hình hai bên để ẢNH ĐẦU nằm giữa ngay khi tải; ảnh ở giữa (.is-center,
   do site.js đánh dấu) to và sáng, ảnh hai bên thu nhỏ, chìm xuống. Transform không đổi layout nên
   bước cuộn của nút trái/phải vẫn đúng. */
.gallery--coverflow { --item: min(620px, 78vw); padding-inline: calc(50% - var(--item) / 2); scroll-padding-inline: calc(50% - var(--item) / 2); gap: 8px; padding-block: 24px; }
.gallery--coverflow > .gallery__item { flex-basis: var(--item); scroll-snap-align: center; transform: scale(.8); opacity: .45; filter: saturate(.6) brightness(.9); transition: transform .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease); }
.gallery--coverflow > .gallery__item.is-center { transform: scale(1); opacity: 1; filter: none; }
.gallery--coverflow > .gallery__item.is-center img { box-shadow: 0 24px 48px -20px rgba(9, 11, 12, .45); }
@media (prefers-reduced-motion: reduce) { .gallery--coverflow > .gallery__item { transition: none; } }
.gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }

/* CTA band có nút phụ (trang Về GTL: "Tìm hiểu về Pasal") */
.cta-band__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 820px) {
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Khoá cuối: pill trạng thái ----------
   .status là pill VÀNG ĐẶC nên chữ bắt buộc là đen (12.64:1). Vài rule ngữ cảnh
   như .contact-item span (0,1,1) có specificity cao hơn .status (0,1,0) và kéo chữ
   về --gray-soft — trên vàng chỉ còn 3.47:1. span.status đặt ở cuối file khoá lại. */
span.status { color: var(--black); }
/* "Sắp mở": nền navy, chấm vàng — khác hẳn vàng "Đang tuyển sinh" để phụ huynh không nhầm là đang nhận học viên */
span.status.status--soon { background: var(--dark); color: var(--white); }
.status--soon::before { background: var(--yellow); }

/* ---------- Về GTL: sứ mệnh & tầm nhìn ----------
   Hai tuyên bố đứng thành hai khối lớn đối xứng — navy và vàng, đúng hai màu chính —
   thay vì xếp chung hàng với giá trị cốt lõi như 4 thẻ ngang hàng: sứ mệnh/tầm nhìn là
   câu dài cần đọc, giá trị là 4 từ khoá cần quét. */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mv-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 320px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); }
.mv-card__ic { width: 68px; height: 68px; }
.mv-card__label { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mv-card__label::before { content: ""; width: 22px; height: 2px; border-radius: 2px; }
.mv-card p { margin-top: auto; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.32; letter-spacing: -.01em; text-wrap: balance; }
.mv-card--navy { background: var(--dark); color: var(--white); }
.mv-card--navy .mv-card__label { color: var(--yellow); }
.mv-card--navy .mv-card__label::before { background: var(--yellow); }
.mv-card--yellow { background: var(--yellow); color: var(--black); }
.mv-card--yellow .mv-card__label { color: var(--black); }
.mv-card--yellow .mv-card__label::before { background: var(--red-700); }
.value-card p { margin-top: 6px; }
@media (max-width: 820px) { .mv-grid { grid-template-columns: 1fr; } .mv-card { min-height: 0; } }

/* ===== Landing danh mục khoá học (Ads + SEO) ===== */
/* Dải thông tin nhanh ngay dưới banner: 5 dữ kiện phụ huynh cần trước khi bấm đăng ký */
.lp-facts-wrap { padding-block: clamp(20px, 3vw, 32px); }
.lp-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; padding: clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 40px -24px rgba(9, 11, 12, .25); }
.lp-facts__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.lp-facts__list > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; column-gap: 10px; align-items: start; }
.lp-facts__list .ic { grid-row: 1 / span 2; width: 34px; height: 34px; }
.lp-facts__list dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.lp-facts__list dd { margin: 2px 0 0; font-size: .92rem; font-weight: 700; line-height: 1.35; color: var(--black); }
.lp-facts__cta { display: flex; flex-direction: column; gap: 10px; }
/* Vấn đề → giải pháp: 2 cột, mỗi thẻ một nỗi lo của phụ huynh */
.lp-pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lp-pain { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; padding: clamp(22px, 2.5vw, 30px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lp-pain__ic { grid-row: 1 / span 2; width: 52px; height: 52px; }
.lp-pain h3 { font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.3; }
.lp-pain p { max-width: none; font-size: .95rem; color: var(--gray-soft); }
.lp-pain p b { color: var(--red-700); }
/* Thẻ khoá chi tiết: nội dung trái, bảng thông số + học phí + 2 nút phải */
.lp-courses { display: grid; gap: 20px; }
.lp-course { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.lp-course:hover { border-color: var(--line-strong); box-shadow: 0 16px 40px rgba(9, 11, 12, .08); }
.lp-course__main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 36px); }
.lp-course__main h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.2; }
.lp-course__main h3 a:hover { color: var(--red-700); }
.lp-course__main > p { max-width: 60ch; color: var(--gray-soft); }
.lp-course__hl { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.lp-course__hl li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .95rem; color: var(--black); }
.lp-course__hl .ic { flex: none; margin-top: 2px; }
.lp-course .subject-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lp-course__meta { display: flex; flex-direction: column; gap: 0; margin: 0; padding: clamp(22px, 2.5vw, 30px); background: var(--smoke); border-left: 1px solid var(--line); }
.lp-course__meta > div:not(.lp-course__actions) { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); }
.lp-course__meta dt { font-size: .86rem; color: var(--gray); white-space: nowrap; }
.lp-course__meta dd { margin: 0; font-size: .9rem; font-weight: 700; color: var(--black); text-align: right; }
.lp-course__price { border-bottom: 0 !important; padding-top: 14px !important; align-items: baseline; }
.lp-course__price b { font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(transparent calc(100% - 3px), var(--yellow) calc(100% - 3px)); padding: 0 3px; }
.lp-course__actions { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; }
.lp-course__hl use[href] { --ic-1: var(--red); --ic-2: var(--red); --ic-3: rgba(229, 64, 54, .16); }
/* Bảng kỳ thi / học phí */
.lp-table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.lp-table th, .lp-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .95rem; }
.lp-table thead th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: var(--dark); }
.lp-table tbody th { font-family: var(--display); font-size: 1.02rem; color: var(--black); }
.lp-table tbody th a { border-bottom: 1.5px solid var(--red); }
.lp-table tbody tr:last-child th, .lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table td { color: var(--gray); }
.lp-table td a:not(.link-arrow) { color: var(--black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lp-table small { color: var(--gray-soft); }
.lp-table__price b { color: var(--black); font-size: 1.1rem; }
.lp-table__price { white-space: nowrap; }
.bg-smoke .lp-table { border: 1px solid var(--line); }
.lp-table--price { border: 1px solid var(--line); }
.tw { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 721px) and (max-width: 1024px) { .lp-table--price { min-width: 0; } .lp-table--price td, .lp-table--price th { padding: 14px 12px; } .lp-table--price td > a, .lp-table--price b, .lp-table--price small { white-space: nowrap; } }
/* Mobile: bỏ dạng bảng, mỗi hàng là một thẻ viền — ô đầu (th) làm tiêu đề, các ô sau là cặp nhãn/giá trị. */
@media (max-width: 720px) {
  .tw { overflow: visible; }
  .lp-table, .lp-table tbody, .lp-table tr, .lp-table th, .lp-table td { display: block; min-width: 0; width: auto; }
  .lp-table { background: none; border: 0 !important; border-radius: 0; overflow: visible; }
  .lp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lp-table tbody { display: grid; gap: 12px; }
  .lp-table tr { padding: 4px 18px 8px; background: var(--white); border: 1.5px solid var(--black); border-radius: var(--r-lg); }
  .lp-table th, .lp-table td { padding: 10px 0; }
  .lp-table tbody th { padding: 14px 0 12px; font-size: 1.1rem; border-bottom: 1.5px solid var(--black); }
  .lp-table td { display: flow-root; padding-left: 132px; }
  .lp-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
  .lp-table tbody tr td:last-child { border-bottom: 0; }
  .lp-table td::before { content: attr(data-label); float: left; width: 118px; margin: 2px 0 0 -132px; line-height: 1.35; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray); }
}
.lp-note { max-width: none; font-size: .88rem; color: var(--gray); }
.lp-includes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }   /* khách 18/09: canh giữa cho khớp tiêu đề mục */
.lp-includes li { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--black); }
.lp-includes use[href] { --ic-1: var(--red); --ic-2: var(--red); --ic-3: rgba(229, 64, 54, .16); }
.lp-method .feature { height: 100%; }
.page-category .tl--grid .tl__img { aspect-ratio: 16 / 10; }
@media (max-width: 1100px) {
  .lp-facts { grid-template-columns: 1fr; }
  .lp-facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-facts__cta { flex-direction: row; flex-wrap: wrap; }
  .page-category .tl--grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lp-pains { grid-template-columns: 1fr; }
  .lp-course { grid-template-columns: 1fr; }
  .lp-course__meta { border-left: 0; border-top: 1px solid var(--line); }
  .page-category .tl--grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-facts__list { grid-template-columns: 1fr 1fr; }
  .lp-facts__cta .btn { flex: 1 1 100%; }
}

/* ===== Cụm "chữ trên khung màu, ảnh/thẻ đè lên" (.duo) =====
   Khung màu là ::before của .duo: bắt đầu thấp hơn mép trên một khoảng --duo-lift, phủ dưới cột chữ và
   lấn sang 30% dưới cột ảnh. Ảnh/thẻ nằm trên (z-index), cao hơn khung đúng --duo-lift, đáy chừa lại
   --duo-lift để khung lộ ra phía dưới. .duo--reverse: ảnh trái, chữ phải. Màu khung đổi theo nền section.
   Đang dùng ở: Về GTL (câu chuyện), Về Pasal (Pasal là ai). Đã gỡ khỏi phương pháp Pasal, chi tiết cơ sở, học phí khoá (khách không duyệt). */
.split.duo { --duo-lift: clamp(32px, 4.5vw, 64px); --duo-bg: var(--smoke); position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0; align-items: start !important; }
.bg-smoke .split.duo { --duo-bg: var(--white); }
.bg-navy .split.duo { --duo-bg: rgba(255, 255, 255, .06); }
.split.duo::before { content: ""; position: absolute; top: var(--duo-lift); bottom: 0; left: 0; right: 30%; border-radius: var(--r-lg); background: var(--duo-bg); z-index: 0; }
.bg-smoke .split.duo::before { box-shadow: inset 0 0 0 1px var(--line); }
.split.duo > .duo__text { position: relative; z-index: 1; align-self: stretch; padding: calc(var(--duo-lift) + clamp(32px, 4vw, 56px)) clamp(28px, 4vw, 64px) clamp(32px, 4vw, 56px); }
.split.duo > .duo__media { position: relative; z-index: 2; align-self: start; margin-bottom: var(--duo-lift); }
.split.duo > .duo__media > img, .split.duo > figure.duo__media img { box-shadow: 0 30px 60px -28px rgba(9, 11, 12, .4); }
.split.duo--reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.split.duo--reverse::before { left: 30%; right: 0; }
.split.duo--reverse > .duo__media { grid-column: 1; grid-row: 1; }
.split.duo--reverse > .duo__text { grid-column: 2; grid-row: 1; }
/* Dưới 1200px cột chữ dài hơn hẳn cột ảnh → xếp chồng: khung chữ trên, ảnh đè mép dưới khung */
@media (max-width: 1200px) {
  .split.duo, .split.duo--reverse { grid-template-columns: 1fr; }
  .split.duo::before { display: none; }
  .split.duo > .duo__text, .split.duo--reverse > .duo__text { grid-column: 1; grid-row: 1; padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 48px) clamp(60px, 8vw, 96px); border-radius: var(--r-lg); background: var(--duo-bg); }
  .bg-smoke .split.duo > .duo__text { box-shadow: inset 0 0 0 1px var(--line); }
  .split.duo > .duo__media, .split.duo--reverse > .duo__media { grid-column: 1; grid-row: 2; margin: calc(clamp(40px, 6vw, 72px) * -1) clamp(14px, 4vw, 48px) 0; }
}

/* ===== Trang Hợp tác: ba hình thức hợp tác =====
   Hai kiểu thẻ theo style chung: thẻ đầu nền đen đặc (hình thức phổ biến nhất), hai thẻ sau trắng viền đậm.
   Nút cuối thẻ canh đáy để ba thẻ thẳng hàng. */
.pt-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pt-model { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r); background: var(--white); border: 1.5px solid var(--black); }
.pt-model__ic { width: 56px; height: 56px; }
.pt-model h3 { margin-top: 8px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.pt-model__who { max-width: none; font-size: .92rem; font-weight: 600; color: var(--red-700); }
.pt-model ul { list-style: none; display: grid; gap: 10px; margin: 8px 0 20px; }
.pt-model li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--black); }
.pt-model li .ic { flex: none; margin-top: 3px; }
.pt-model .btn { margin-top: auto; }
.pt-model--dark { background: var(--dark); border-color: var(--dark); color: var(--on-navy); }
.pt-model--dark h3, .pt-model--dark li { color: var(--white); }
.pt-model--dark .pt-model__who { color: var(--yellow); }
.pt-model--dark use[href] { --ic-1: var(--white); --ic-2: var(--yellow); --ic-3: rgba(255, 255, 255, .22); }
.pt-model li use[href] { --ic-1: var(--red); --ic-2: var(--red); --ic-3: rgba(229, 64, 54, .16); }
.pt-model--dark li use[href] { --ic-1: var(--yellow); --ic-2: var(--yellow); --ic-3: rgba(247, 202, 57, .22); }
.bg-smoke .process__num { box-shadow: 0 0 0 6px var(--smoke); }
/* Thẻ nổi bật tổng quan khoá (chi tiết khoá học) */
.course-hl .feature h3 { margin-top: 14px; font-size: 1.12rem; line-height: 1.35; }
@media (max-width: 900px) { .pt-models { grid-template-columns: 1fr; } }

/* ---------- Chi tiết khoá học (15/09): mỗi nội dung một hàng ---------- */
.lp-facts--solo { grid-template-columns: minmax(0, 1fr); }
/* Đối tượng: 3 thẻ viền đen, icon + một câu */
.cd-audience { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; }
.cd-audience .feature { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.5vw, 32px); }
.cd-audience .feature .ic { width: 52px; height: 52px; }
.cd-audience .feature p { max-width: none; margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.4vw, 1.25rem); font-weight: 700; line-height: 1.35; color: var(--black); }
/* Đầu ra: dùng component số nổi bật chung (.statstrip .stat — số đen gạch vàng, vạch đỏ bên trái) */
.cd-outcomes .stat > span { max-width: 30ch; }
/* Lịch khai giảng: mỗi cơ sở một thẻ viền đen, ngày khai giảng là thông tin chính */
.cd-intake { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.cd-campus { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 2.5vw, 30px); background: var(--white); }
.cd-campus__label { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--gray); }
.cd-campus__label .ic { width: 24px; height: 24px; }
.cd-campus__date { font-family: var(--display); font-size: clamp(1.9rem, 2.8vw, 2.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--black); font-variant-numeric: tabular-nums; }
.cd-campus h3 { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1.12rem; }
.cd-campus p { max-width: none; font-size: .92rem; color: var(--gray-soft); }
.cd-campus__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: auto; padding-top: 12px; }
.cd-campus__tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--black); }
/* Học phí: một khối nền đen chứa giá, cam kết và CTA đăng ký */
.cd-price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; margin-top: 20px; padding: clamp(28px, 3.5vw, 44px); border-radius: var(--r); background: var(--dark); color: var(--on-navy); }
.cd-price__main > span { font-size: .92rem; font-weight: 600; }
.cd-price__main b { display: block; width: fit-content; margin-top: 6px; font-family: var(--display); font-size: clamp(2.6rem, 4.4vw, 3.8rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--white); }
.cd-price__main b span { background: linear-gradient(transparent 80%, var(--yellow) 80%); }
.cd-price__main small { margin-left: 4px; font-size: .36em; font-weight: 600; letter-spacing: 0; color: var(--on-navy); }
/* Khoá chưa có giá: câu thay cho con số, phải nhỏ hơn hẳn để không bị đọc nhầm là mức học phí (khách 18/09) */
.cd-sub--center { text-align: center; }
.cd-price__main b.cd-price__val--ask { max-width: 18ch; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.3; font-weight: 700; }   /* cần .cd-price__main đi kèm mới thắng quy tắc cỡ số lớn */
.cd-price__main p { max-width: 40ch; margin-top: 14px; font-size: .95rem; color: var(--on-navy); }
.cd-price__notes { list-style: none; display: grid; gap: 12px; padding: 0; }
.cd-price__notes li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; font-weight: 600; color: var(--white); }
.cd-price__notes .ic { flex: none; width: 22px; height: 22px; }
.cd-price__notes use[href] { --ic-1: var(--yellow); --ic-2: var(--yellow); --ic-3: rgba(247, 202, 57, .22); }
.cd-price__cta { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1100px) {
  .cd-price { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-price__cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .cd-audience { grid-template-columns: 1fr; }
  .cd-outcomes { grid-template-columns: 1fr; gap: 24px 0; }
  .cd-price { grid-template-columns: 1fr; }
  .cd-price__cta .btn { flex: 1 1 100%; }
}
/* Giáo viên phụ trách: thẻ luôn rộng bằng 1/4 khung; ít hơn 4 thầy cô thì cụm canh giữa, không để trống một bên */
.cd-teachers { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, calc((100% - 72px) / 4))); justify-content: center; gap: 24px; }
@media (max-width: 1024px) { .cd-teachers { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); } .cd-teachers:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 720px) { .cd-teachers:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cd-teachers:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cd-teachers { grid-template-columns: 1fr; } }

/* ---------- Cửa sổ xem tài liệu PDF (/tai-lieu/) ---------- */
.pdf-modal { width: min(1080px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: var(--r); background: var(--white); color: var(--black); overflow: hidden; }
.pdf-modal[open] { display: flex; flex-direction: column; animation: pdfIn .35s var(--ease); }
.pdf-modal::backdrop { background: rgba(9, 11, 12, .72); }
@keyframes pdfIn { from { opacity: 0; transform: translateY(16px); } }
.pdf-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 24px; border-bottom: 1.5px solid var(--black); }
.pdf-modal__info { min-width: 0; }
.pdf-modal__info b { display: block; font-family: var(--display); font-size: 1.1rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-modal__info span { font-size: .84rem; color: var(--gray); }
.pdf-modal__actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* Icon ✕ đã có vòng tròn trong sprite → bỏ khung tròn bọc ngoài */
.pdf-modal__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--black); }
.pdf-modal__close .ic { width: 30px; height: 30px; }
.pdf-modal__close:hover { color: var(--red); }
.pdf-modal__close use[href] { --ic-1: currentColor; --ic-2: currentColor; }
.pdf-modal__body { position: relative; flex: 1; min-height: 0; background: var(--smoke-2); }
.pdf-modal__frame { display: block; width: 100%; height: 100%; border: 0; }
.pdf-modal__fallback { display: none; }
.pdf-modal.is-narrow .pdf-modal__frame { display: none; }
.pdf-modal.is-narrow .pdf-modal__fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; height: 100%; padding: 24px; }
.pdf-modal__fallback img { width: 100%; max-width: 420px; height: auto; border-radius: var(--r-sm); }
/* Form nhận email / trạng thái đã gửi: nổi giữa khung, che bản xem trước */
.pdf-modal__gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(9, 11, 12, .6); }
.pdf-modal__gate[hidden] { display: none; }
.pdf-gate { width: min(440px, 100%); padding: clamp(24px, 3vw, 36px); border-radius: var(--r); background: var(--white); text-align: left; }
.pdf-gate[hidden] { display: none; }
.pdf-gate__ic { width: 52px; height: 52px; }
.pdf-gate h3 { margin-top: 14px; font-size: 1.4rem; }
.pdf-gate p { margin: 8px 0 20px; font-size: .95rem; color: var(--gray); }
.pdf-gate p b { color: var(--black); }
.pdf-gate__back { display: block; margin: 14px auto 0; font-size: .9rem; font-weight: 600; color: var(--gray); text-decoration: underline; text-underline-offset: 3px; }
.pdf-gate__back:hover { color: var(--black); }
@media (max-width: 760px) {
  .pdf-modal { width: 100vw; height: 100dvh; border-radius: 0; }
  .pdf-modal__bar { padding: 12px 12px 12px 16px; }
  .pdf-modal__actions .btn { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pdf-modal[open] { animation: none; } }


/* Banner trang con kiểu "vừa khít" (17/09): 2 cột, cột chữ gồm nhãn + H1 + mô tả, ảnh cao bằng cột chữ */
.page-hero--fit { padding: clamp(45px, 6.25vw, 80px) 0; }   /* +25% chiều cao banner (khách 18/09) */
@media (min-width: 901px) { .page-hero.page-hero--fit { min-height: 0; } }
.page-hero--fit .page-hero__grid { margin-top: 0; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.page-hero--fit .page-hero__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: clamp(8px, 2vw, 24px); }
.page-hero--fit h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.page-hero--fit .page-hero__text .lead { margin-top: 18px; }
.page-hero--fit .page-hero__visual { min-height: 425px; }
.page-hero--fit .page-hero__visual img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 820px) {
  .page-hero--fit .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero--fit .page-hero__visual { min-height: 0; aspect-ratio: 16 / 9; }
}
/* Về Pasal (17/09): ba thẻ Sứ mệnh · Tầm nhìn · Giá trị cốt lõi thành một hàng riêng, bỏ khối chữ "Pasal là ai" */
/* "Pasal là ai" (khách 18/09: phản hồi #17 chỉ bỏ BADGE, giữ khung trắng): khung chữ bên trái,
   ba thẻ Sứ mệnh / Tầm nhìn / Giá trị cốt lõi xếp dọc đè lên bên phải — đúng mockup. */
.pasal-mvv__cards { display: grid; gap: 16px; }
.pasal-mvv .duo__text h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.2; }
.pasal-intro__p { margin-top: 16px; color: var(--gray-soft); }
.pasal-mvv .mv-card { min-height: 0; padding: clamp(22px, 2.4vw, 30px); gap: 10px; }
.pasal-mvv .mv-card p { margin-top: 10px; font-size: clamp(1.05rem, 1.35vw, 1.2rem); }
.pasal-mvv .mv-card__ic { width: 40px; height: 40px; position: absolute; top: 20px; right: 20px; }
@media (max-width: 900px) { .pasal-mvv__cards { margin-top: 20px; } }

/* ===== Giá trị cốt lõi 3C (Về GTL, feedback R1 #7, 17/09) =====
   Nền đen, câu dẫn lớn. Ba bậc thang đi lên từ trái sang phải — Nhận thức → Năng lực → Kết nối, đúng thứ tự
   "từ nền tảng nhận thức và năng lực, con trở nên...". Mỗi bậc là một khối màu đặc (vàng · đỏ · trắng), chữ C khổng lồ
   là điểm nhấn chung, phần còn lại của từ tiếng Anh nhỏ bên cạnh. */
.core-c { background: var(--dark); color: var(--on-navy); overflow: hidden; }
.core-c__head { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 12px clamp(28px, 5vw, 80px); align-items: end; }
.core-c__head .eyebrow { grid-column: 1 / -1; justify-self: start; color: var(--white); border-color: var(--line-navy); }
.core-c__head h2 { color: var(--white); font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.core-c__quote { max-width: 46ch; margin: 0 0 0 auto; justify-self: end; text-align: right; font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 600; line-height: 1.4; color: var(--white); text-wrap: balance; }
.core-c__quote::before { content: "“"; color: var(--yellow); }
.core-c__quote::after { content: "”"; color: var(--yellow); }
.core-c .core-c__steps { margin-top: clamp(52px, 6vw, 96px); }
.core-c__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.core-c__step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-lg); }
.core-c__step--1 { background: var(--yellow); color: var(--on-yellow); margin-top: clamp(80px, 9vw, 140px); }
.core-c__step--2 { background: var(--red-700); color: var(--on-red); margin-top: clamp(40px, 4.5vw, 70px); }
.core-c__step--3 { background: var(--white); color: var(--gray); }
.core-c__word { display: flex; align-items: baseline; font-weight: 800; font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: -.01em; line-height: 1; }
.core-c__word b { font-size: clamp(5rem, 9vw, 8.5rem); line-height: .8; letter-spacing: -.06em; margin-right: 2px; }
.core-c__step--1 .core-c__word { color: var(--black); }
.core-c__step--2 .core-c__word { color: var(--white); }
.core-c__step--2 .core-c__word b { color: var(--yellow); }
.core-c__step--3 .core-c__word { color: var(--black); }
.core-c__step--3 .core-c__word b { color: var(--red); }
.core-c__step h3 { margin-top: 6px; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.core-c__step--1 h3, .core-c__step--3 h3 { color: var(--black); }
.core-c__step--2 h3 { color: var(--white); }
.core-c__step p { max-width: none; font-size: .98rem; line-height: 1.6; }
@media (max-width: 900px) {
  .core-c__head { grid-template-columns: 1fr; }
  .core-c__quote { max-width: none; justify-self: start; text-align: left; margin-left: 0; }
  .core-c__steps { grid-template-columns: 1fr; }
  .core-c__step--1, .core-c__step--2 { margin-top: 0; }
  .core-c__word b { font-size: 4.5rem; }
}
.brand-pos__list small { display: block; margin-top: 3px; font-size: .88rem; line-height: 1.4; color: var(--gray); }

/* ===== Chương trình học thống nhất (feedback R1 #21, 17/09) =====
   Bộ chọn Lớp (tab chữ) → Môn (chip) ở trên, bảng nội dung viền đen bên dưới: tiêu đề, mô tả, link, các chặng học, ảnh (tuỳ chọn). */
.program { display: grid; gap: 18px; }
.program__picker { display: grid; gap: 12px; }
.program__grades { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }   /* khách 18/09: canh giữa cho khớp tiêu đề mục */
.program__grade { padding: 12px 18px; margin-bottom: -1px; border-bottom: 3px solid transparent; font-weight: 700; color: var(--gray); white-space: nowrap; }
.program__grade:hover { color: var(--black); }
.program__grade.is-active { color: var(--black); border-bottom-color: var(--red); }
.program__subjects { display: none; justify-content: center; flex-wrap: wrap; gap: 8px; }
.program__subjects.is-active { display: flex; }
.program__subject { padding: 9px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--black); font-size: .92rem; font-weight: 600; color: var(--black); background: var(--white); transition: background .25s, color .25s; }
.program__subject:hover { background: var(--smoke); }
.program__subject.is-active { background: var(--black); color: var(--white); }
.program__panel { display: none; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3vw, 40px); border: 1.5px solid var(--black); border-radius: var(--r-lg); background: var(--white); }
.program__panel.is-active { display: grid; }
.program__panel:has(.program__media) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.program__body h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.program__intro { margin-top: 10px; max-width: 70ch; font-size: 1.02rem; color: var(--gray); }
.program__links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; }
.program__phases { list-style: none; margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: ph; }
.program__phases li { display: flex; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--smoke); }
.program__num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--yellow); font-weight: 800; color: var(--black); }
.program__phases small { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red-700); }
.program__phases b { display: block; margin-top: 2px; font-size: 1.02rem; color: var(--black); }
.program__phases p { margin-top: 6px; font-size: .92rem; color: var(--gray); }
.program__media { margin: 0; }
.program__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.bg-smoke .program__phases li { background: var(--smoke); }
@media (max-width: 820px) { .program__panel:has(.program__media) { grid-template-columns: 1fr; } .program__grades { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }

/* ===== Bộ tìm lớp (feedback R1 #22) ===== */
/* Bộ lọc lớp dùng .filter-stack/.filter-bar chung; chỉ còn hàng select lớp/môn là riêng */
.cf-selects { gap: 10px; }
.cf-selects select { min-width: 190px; padding: 10px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--white); color: var(--black); font: inherit; font-size: .9rem; font-weight: 600; }
.cf-selects select:hover { border-color: var(--black); }
.class-finder__count { margin-top: 18px; font-size: .92rem; color: var(--gray); }
.class-finder__count b { color: var(--black); }
.class-finder__empty { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border-radius: var(--r); background: var(--smoke); }
.class-finder__empty[hidden] { display: none; }
.class-finder__empty p { max-width: none; }
.bg-smoke .class-finder__empty { background: var(--white); }
.cd-price { margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 560px) { .cf-selects select { width: 100%; min-width: 0; } }
.cd-sub { font-size: clamp(1.25rem, 2vw, 1.6rem); }

/* Hồ sơ giáo viên: nơi giảng dạy + lịch lớp theo khoá (feedback R1 #26) */
.teach-places { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.teach-places__label { margin-right: 6px; font-weight: 700; color: var(--black); }
.teach-places a, .teach-places span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--black); background: var(--white); font-size: .9rem; font-weight: 600; color: var(--black); }
.teach-places a:hover { background: var(--black); color: var(--white); }
.teach-tabs .tabs { margin-bottom: 16px; }
.teach-course { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.teach-course h3 { margin-top: 8px; font-size: 1.3rem; }
.teach-course p { margin-top: 4px; max-width: 70ch; color: var(--gray); }

/* ===== Bảng vàng chứng chỉ: thẻ minh chứng (feedback R1 #27) ===== */
.evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.evidence { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--black); border-radius: var(--r-lg); background: var(--white); overflow: hidden; }
.evidence[hidden] { display: none; }
.evidence__link { position: absolute; inset: 0; z-index: 3; }
/* Khung ảnh giữ tỉ lệ ngang 4:3 như bản đầu (khách 18/09) — ảnh chân dung bị cắt bớt phần dưới,
   neo lên 25% để giữ khuôn mặt. */
.evidence__media { position: relative; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: var(--smoke-2); }
/* min-height:0 bắt buộc: .evidence là flex column nên khung ảnh là flex item, mặc định min-height:auto
   khiến ảnh dọc kéo khung cao bằng chính nó và aspect-ratio ở trên không có tác dụng. */
/* Thẻ có ảnh cầm chứng chỉ: khung dọc 4:5 — phải thấy cả mặt lẫn tờ chứng chỉ (khách 18/09),
   cụm này chiếm 72–81% chiều cao ảnh gốc nên khung thấp hơn là cắt mất đầu. File ảnh đã được cắt
   sẵn đúng 4:5 quanh cụm mặt+chứng chỉ của từng em, vì mỗi ảnh đóng khung một kiểu (đỉnh đầu ở
   2–9%, đáy chứng chỉ ở 74–90%) — một mốc object-position chung không thể vừa cho cả mười. */
.evidence__media:has(.evidence__cert) { aspect-ratio: 4 / 5; }
.evidence__media > img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.evidence__media > img.evidence__cert { object-position: center; }   /* ảnh đã đúng tỉ lệ khung nên không còn phần thừa để neo */
/* Khách 18/09: bỏ badge loại ở góc trên, gộp vào nhãn vàng — số to, tên kỳ thi nằm dưới số */
.evidence__score { position: absolute; right: 12px; bottom: 12px; display: grid; justify-items: center; gap: 4px; padding: 14px 16px 12px; border-radius: 12px; background: var(--yellow); color: var(--black); }
.evidence__score span { font-family: var(--display); font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.evidence__score small { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }   /* ≥12px: dưới 11.5px bộ quét responsive báo chữ quá nhỏ trên điện thoại */
/* Ba dòng trong thân thẻ phải khác bậc rõ (khách 18/09): TÊN đậm đen → dòng lớp/cơ sở nhỏ, nhạt,
   giãn chữ → CÂU THÀNH TÍCH mới là nội dung chính nên đen, đậm vừa, tách bằng một vạch mảnh. */
.evidence__body { display: grid; gap: 10px; padding: 16px 18px 18px; }
.evidence__who { display: flex; align-items: center; gap: 10px; }
.evidence__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.evidence__who b { display: block; font-size: 1.05rem; line-height: 1.25; color: var(--black); }
.evidence__who span { display: block; margin-top: 3px; font-size: .76rem; font-weight: 500; letter-spacing: .02em; line-height: 1.35; color: var(--gray-soft); }
.evidence__body p { max-width: none; padding-top: 10px; border-top: 1px solid var(--line); font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--black); }
[data-more] > .is-more { display: none !important; }
@media (max-width: 1100px) { .evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 480px) { .evidence-grid { grid-template-columns: 1fr; } }

/* ===== Danh sách học viên trúng tuyển (feedback R1 #28) ===== */
.adm-block__title { display: flex; align-items: center; gap: 10px; font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.adm-block__title .ic { width: 36px; height: 36px; }
.adm-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.adm-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--black); border-radius: var(--r); background: var(--white); }
.adm-card img { width: 72px; height: 72px; flex: none; border-radius: 12px; object-fit: cover; object-position: center 25%; }
.adm-card b { display: block; color: var(--black); }
.adm-card small { display: block; font-size: .8rem; color: var(--gray-soft); }
.adm-card p { margin-top: 4px; max-width: none; font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--black); }
@media (max-width: 1100px) { .adm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .adm-list { grid-template-columns: 1fr; } }


/* ===== EEAT cuối bài viết (feedback R1 #30) ===== */
.eeat { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border: 1.5px solid var(--black); border-radius: var(--r-lg); }
.eeat-person { display: flex; gap: 16px; align-items: flex-start; }
.eeat-person + .eeat-person { padding-top: 18px; border-top: 1px solid var(--line); }
.eeat-person__img img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 12%; background: var(--smoke); }
.eeat-person__img--org img { object-fit: contain; padding: 10px; }
.eeat-person small { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red-700); }
.eeat-person b { display: block; margin-top: 2px; font-size: 1.1rem; }
.eeat-person b a { color: var(--black); border-bottom: 1.5px solid var(--red); }
.eeat-person__cred { display: block; margin-top: 4px; font-size: .9rem; color: var(--gray); }
.eeat-person p { margin-top: 8px; max-width: 70ch; font-size: .92rem; color: var(--gray); }
/* Nguồn tham khảo (khách 18/09): ra khỏi khung tác giả, nằm ngay cuối nội dung bài */
.art-sources { margin-top: clamp(28px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--line); }
.art-sources b { font-size: .95rem; }
.art-sources ol { margin: 8px 0 0 18px; display: grid; gap: 6px; font-size: .92rem; }
.art-sources a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.eeat-policy { max-width: none; font-size: .86rem; color: var(--gray); }
.eeat-policy a { color: var(--black); font-weight: 600; }
/* Khoá chỉ có một hình thức học (vd. HSA·TSA trực tuyến): không cần thanh chọn, ghi rõ hình thức cạnh số lớp */
.class-finder__mode { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; padding: 5px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--black); font-weight: 700; color: var(--black); }
/* Icon góc phải mỗi bậc 3C — cùng cặp màu với nền thẻ (vàng: đen+đỏ · đỏ: trắng+vàng · trắng: đen+vàng) */
.core-c__ic { position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); width: clamp(40px, 3.4vw, 56px); height: clamp(40px, 3.4vw, 56px); }
.core-c__step--1 .core-c__ic use[href] { --ic-1: var(--black); --ic-2: var(--red); --ic-3: rgba(9, 11, 12, .13); }
.core-c__step--2 .core-c__ic use[href] { --ic-1: var(--white); --ic-2: var(--yellow); --ic-3: rgba(255, 255, 255, .24); }
.core-c__step--3 .core-c__ic use[href] { --ic-1: var(--black); --ic-2: var(--red); --ic-3: rgba(229, 64, 54, .16); }
.core-c__step h3, .core-c__step .core-c__word { padding-right: clamp(52px, 5vw, 76px); }
/* Mốc thời gian nằm trong thẻ (bản rút gọn của Hành trình GTL, 18/09) */
.tl__when--in { display: block; height: auto; margin-bottom: 22px; font-family: var(--display); font-size: clamp(1.4rem, 1.9vw, 1.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
/* height:auto huỷ chiều cao 0 của .tl__when (bản plain) — nếu để 0, chữ mốc tràn ra ngoài khung và
   khoảng cách 36px bị ăn mất, mỗi trang lại hở một kiểu tuỳ theo thẻ đứng sau (tiêu đề / pill / đoạn văn).
   Kết quả: mọi dòng thời gian đều hở ~25px từ chân chữ mốc xuống dòng nội dung đầu tiên (khách 18/09: kéo nội dung lên gần mốc). */
/* Bù phần đệm dòng của thẻ đứng ngay sau mốc để ba trang hành trình hở bằng nhau (~40px đo từ nét chữ) */
.tl__when--in + h3 { margin-top: 6px; }
.tl__when--in + .sr-only + p { margin-top: 0; }
/* Mốc trong thẻ: chữ đỏ thương hiệu, không gạch chân (khách chốt 18/09) */
.tl__item .tl__when--in { color: var(--red-700); background: none; padding-bottom: 0; }
/* Trục ngang canh theo hàng chấm: bản plain không còn dòng mốc phía trên nên chiều cao đó bằng 0.
   .tl--whenout (Lộ trình ở landing nhóm khoá, khách 18/09): mốc trở ra ngoài thẻ như bản đầu — trả lại
   chiều cao dòng mốc, chấm và trục về đúng chỗ cũ, chữ mốc lấy màu đỏ và cỡ của bản trong thẻ. */
.tl--plain:not(.tl--whenout) { --tl-when-h: 0px; }
.tl--plain:not(.tl--whenout) .tl__dot { margin-top: 0; }
.tl--plain:not(.tl--whenout) .tl__item::before { top: 9.5px; }
.tl--whenout .tl__when { height: auto; min-height: var(--tl-when-h); color: var(--red-700); font-size: clamp(1.4rem, 1.9vw, 1.8rem); font-weight: 800; }
/* Số liệu trong đoạn mô tả: in đậm, đổi màu đỏ thương hiệu */
.tl__num { color: var(--red-700); font-weight: 700; }