/* =====================================================================
   GTL Academy — theme.css (nạp CUỐI CÙNG, sau common/page/home)
   Lớp style chung 15/09/2026: clean outlined UI + card viền mảnh + mảng màu phẳng.
   - HAI kiểu card (khách chốt 15/09): (1) nền màu đặc (đen / navy / đỏ / vàng), KHÔNG viền;
     (2) nền trắng + viền đậm 1.5px ĐEN, không nền. Không có viền màu khác (không đỏ, không xám). Bo 12px, không bóng. Ảnh bên trong bo 8px.
   - Màu: trắng, đen, neutral (smoke) + nhấn navy · đỏ · vàng. Nền tối lớn dùng đen (--dark); navy chỉ là màu nhấn.
   - Hover: vòng tròn lấp màu (xem khối cuối file); không nhún, không phóng to, không bóng đổ, không họa tiết trang trí.
   - Focus bàn phím luôn thấy rõ.
   File này chỉ đè lên component có sẵn; token gốc ở đầu common.css.
   ===================================================================== */

/* ---------- Focus bàn phím ---------- */
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
:is(.m-drawer, .footer, .hero, .page-hero, .bg-navy, .bg-black, .bg-red, .honors, .register-section, .cta-band, .feature--dark) :focus-visible { outline-color: var(--yellow); }

/* ---------- Bỏ họa tiết trang trí ---------- */
.meridian { display: none !important; }
.hero__visual::after, .page-hero__visual::after { display: none; }
.header.is-compact { box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }

/* ---------- Nút: không nhún, chỉ đổi màu ---------- */
.btn { transition: background-color var(--dur), color var(--dur), border-color var(--dur); box-shadow: none; }
.btn:active, .btn--primary:hover, .btn--dark:hover, .btn--light:hover { transform: none; }
.btn:hover .ic--arrow, .link-arrow:hover .ic { transform: translateX(2px); }
.btn--ghost { border-width: 1.5px; border-color: var(--black); }
.btn--ghost:hover { border-color: var(--black); background: var(--black); color: var(--white); }
.header__cta:hover, .header__cta:focus-visible { box-shadow: none; }

/* ---------- Card: một kiểu viền cho mọi nhóm thẻ ---------- */
:is(.card, .feature, .testi-card, .acc-item, .contact-item, .tl__card, .diff-card, .sched-card, .board, .process__card,
    .school-tile, .dl-item, .dl-how, .lp-course, .lp-pain, .lp-facts, .campus__row, .enroll-panel, .brand-pos,
    .band, .bento__cell, .honor-card, .download-box, .outcomes > li, .form-card, .doc-card, .mv-card, .cd-campus) {
  border: 1.5px solid var(--line-card);
  border-radius: var(--r);
  box-shadow: none;
  transition: border-color var(--dur), background-color var(--dur);
}
/* Hover thẻ có ảnh / cấu trúc phức tạp: không dịch chuyển, không đổi viền sang đỏ */
:is(.card, .dl-item, .lp-course, .campus__row, .honor-card, .diff-card, .sched-card, .bento__cell):hover { transform: none; box-shadow: none; }
:is(.card, .bento__cell--image, .mega__card, .dl-item):hover img,
.card:hover .card__media img, .bento__cell--image:hover img, .mega__card:hover img { transform: none; }
.why-x__slide.is-next:hover .why-x__img { transform: none; }
.footer__social a:hover, .mona-sign a:hover, .group-contact > a:hover, .group-contact > button:hover, .campus__row:hover .ic { transform: none; }
/* Card đang chọn / nổi bật: viền đen 1.5px */
/* Chip lọc dạng tab (tài liệu, bộ lọc) dùng gạch chân / vạch trái, không đóng khung */
:is(.campus__row.is-active, .lp-course--featured, .filter-chip.is-active:not(:where(.dl-vtabs *, .dl-htabs *, .filter-bar--tabs *))) { border: 1.5px solid var(--line-ink); }
/* Thẻ nền đặc: KHÔNG viền. Thêm :not(svg) (+0,0,1) để bằng specificity danh sách thẻ viền đen ở trên và thắng vì đứng sau,
   vì danh sách đó có ".outcomes > li" (0,1,1) kéo specificity cả nhóm lên. Vẫn thua :hover (0,2,0) nên thẻ nền đặc hover vẫn hiện viền đen */
:is(.bento__cell--navy, .bento__cell--dark, .bento__cell--red, .bento__cell--gold, .mv-card--navy, .mv-card--red, .mv-card--yellow, .mv-card--black, .feature--dark, .pt-model--dark, .lib-dl):not(svg) { border-color: transparent; }
.honors .honor-card, .register-section .form-card, .bg-navy .card, .bg-navy .feature { border-color: transparent; }
/* Bóng cũ của thẻ học viên / ảnh nổi — bỏ */
.honor-grid .honor-card, .marquee--honors .honor-card, .gallery--coverflow > .gallery__item.is-center img,
.split.duo > .duo__media > img, .split.duo > figure.duo__media img, .hero__float, .lp-facts { box-shadow: none; }
.hero__float { border: 1.5px solid var(--line-card); }
.bg-smoke .split.duo::before { box-shadow: inset 0 0 0 1px var(--line-card); }

/* ---------- Ảnh bên trong card: đặt lọt lòng có lề, bo 8px (kiểu thẻ khoá học ref) ---------- */
.article-card, .teacher-card { padding: 12px; }
.article-card .card__media, .teacher-card .card__media { border-radius: var(--r-sm); }
.article-card .card__body, .teacher-card .card__body { padding: 18px 8px 8px; }
.honor-card { padding: 10px; background: var(--white); }
.honor-card__photo { border-radius: var(--r-sm); overflow: hidden; }
.honor-card__body { padding: 14px 6px 6px; }
.dl-item { padding: 12px; }
.dl-item__cover { border-radius: var(--r-sm); }
.dl-item__body { padding: 16px 8px 6px; gap: 8px; }
.why-x__img, .story__visual > img, .methods__img img, .page-hero__visual img, .hero__visual img, .tl__img, .card__media { border-radius: var(--r-sm); }

/* Thẻ giáo viên: nền ảnh 4 màu đen · navy · vàng · đỏ theo cardTint của từng thầy cô (khách chốt 15/09) */
.teacher-card__media--navy { background: var(--navy); }
.teacher-card__media--black { background: var(--dark); }
.teacher-card__media--yellow { background: var(--yellow); }
.teacher-card__media--red { background: var(--red-700); }
/* Đầu thẻ khoá học / bảng xếp hạng nhóm navy: dùng navy thật (đã sáng hơn đen) để 4 màu nền phân biệt được */
.card--navy .card__head { background: var(--navy); border-bottom-color: var(--navy); }
.board--navy .board__head { background: var(--navy); }
.card:hover .card__head .pill { border-color: var(--line); }

/* ---------- Mỗi section một màu nhấn ---------- */
/* Bento danh mục: 4 ô nền đặc đen · navy · vàng · đỏ. Hover: vòng tròn trắng lan ra từ tâm phủ kín ô,
   ô thành kiểu "trắng viền đen", chữ và icon đổi sang màu tối cùng lúc. */
.bento .bento__cell { --cell-bg: var(--dark); --cell-fg: var(--white); --cell-sub: var(--on-navy); isolation: isolate; background: var(--cell-bg); border: 1.5px solid var(--cell-bg); color: var(--cell-sub); transition: border-color .35s, color .35s; }
.bento .bento__cell:nth-child(2) { --cell-bg: var(--navy); }
.bento .bento__cell:nth-child(3) { --cell-bg: var(--yellow); --cell-fg: var(--black); --cell-sub: var(--on-yellow); }
.bento .bento__cell:nth-child(4) { --cell-bg: var(--red-700); --cell-sub: var(--on-red); }
.bento .bento__cell h3, .bento .bento__cell .link-arrow { color: var(--cell-fg); transition: color .35s; }
.bento .bento__cell::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--white); transform: translate(-50%, -50%) scale(0); transition: transform 1s var(--ease); z-index: -1; pointer-events: none; }
.bento .bento__cell:hover, .bento .bento__cell:focus-visible { border-color: var(--black); color: var(--gray); }
.bento .bento__cell:hover::after, .bento .bento__cell:focus-visible::after { transform: translate(-50%, -50%) scale(90); }
.bento .bento__cell:hover h3, .bento .bento__cell:hover .link-arrow, .bento .bento__cell:focus-visible h3, .bento .bento__cell:focus-visible .link-arrow { color: var(--black); }
.bento .bento__cell use[href] { --ic-1: var(--white); --ic-2: var(--yellow); --ic-3: rgba(255, 255, 255, .22); transition: none; }
.bento .bento__cell:nth-child(3) use[href] { --ic-1: var(--black); --ic-2: var(--red); --ic-3: rgba(9, 11, 12, .13); }
.bento .bento__cell:nth-child(4) use[href] { --ic-1: var(--white); --ic-2: var(--yellow); }
.bento .bento__cell:hover use[href], .bento .bento__cell:focus-visible use[href] { --ic-1: var(--black); --ic-2: var(--yellow); --ic-3: rgba(247, 202, 57, .28); }
@media (prefers-reduced-motion: reduce) { .bento .bento__cell::after { transition: none; } }
/* Thẻ Sứ mệnh · Tầm nhìn · Giá trị cốt lõi: đỏ · vàng · đen (khách chốt 15/09), nền đặc không viền */
.mv-card--navy { background: var(--navy); }
.mv-card--red { background: var(--red-700); color: var(--white); }
.mv-card--black { background: var(--dark); color: var(--white); }
:is(.mv-card--red, .mv-card--black) .mv-card__label { color: var(--yellow); }
:is(.mv-card--red, .mv-card--black) .mv-card__label::before { background: var(--yellow); }
:is(.mv-card--red, .mv-card--black) use[href] { --ic-1: var(--white); --ic-2: var(--yellow); --ic-3: rgba(255, 255, 255, .22); }
/* Nhãn giai đoạn lộ trình: một màu */
.tl__item--navy, .tl__item--yellow, .tl__item--red, .tl__item--black { --tl: var(--black); }
/* Mốc thời gian đỏ, nhãn giai đoạn trong thẻ vàng chữ đen (khách 15/09) */
.tl__when { color: var(--red-700); }
.tl__phase, .tl__item--yellow .tl__phase { background: var(--yellow); color: var(--black); }

/* ---------- Typography: bớt viết hoa tràn lan ---------- */
.eyebrow { text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 600; }
.lp-table thead th, .subject-matrix thead th { text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 600; }
.honor-card__school small, .mv-card__label, .dl-browser__label, .dl-item__inside b, .toc__title { letter-spacing: .04em; }

/* ---------- Trường nhập liệu ---------- */
.field input, .field select, .field textarea, .select__trigger { border-radius: var(--r-sm); }
.select__list, .nav__drop, .header-search__panel { border: 1.5px solid var(--line-card); box-shadow: 0 8px 24px rgba(9, 11, 12, .08); }


/* ===== Hover "lấp màu" — áp cho MỌI thẻ trên site (khách chốt 15/09) =====
   Quy tắc: nền đặc thì không viền, viền đen thì không nền. Rê chuột: vòng tròn lan chậm từ vị trí con trỏ
   (--hx, --hy do site.js đặt) phủ kín thẻ và đổi hẳn sang kiểu còn lại.
   Mỗi thẻ khai báo "chế độ lấp" bằng biến --h-*; các quy tắc đảo chữ/đường kẻ/icon bên dưới chỉ đọc biến,
   nên thêm một chế độ mới chỉ cần một khối biến, không phải nhân bản cả bộ selector.
   - Mặc định: trắng viền đen → lấp ĐEN.
   - Vàng: thẻ icon + chữ (diff-card, feature), thẻ cơ sở, thẻ giáo viên nền ảnh navy/đen → lấp VÀNG.
   - Thẻ nền đặc (navy/đen/đỏ/vàng) → lấp TRẮNG, hiện viền đen.
   Ảnh trong thẻ giữ nguyên; nhãn trên ảnh (môn, kỳ thi, trạng thái) không đổi màu. */
/* Khách 18/09: hiệu ứng lấp màu chậm và mượt hơn cho đỡ mỏi mắt. Không chỉ kéo dài thời gian: đường cong cũ
   --ease (cubic-bezier(.16,1,.3,1)) đi hết ~80% quãng đường trong 1/4 thời gian nên nhìn như chớp đèn rồi bò.
   --fill-ease trải đều hơn, vòng tròn nở từ tốn và chữ đổi màu theo cùng nhịp. */
:root { --fill-in: 2.2s; --fill-fade: 1.1s; --fill-ease: cubic-bezier(.33, .1, .25, 1); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus) {
  --hx: 50%; --hy: 50%;
  --h-bg: var(--dark); --h-border: var(--dark); --h-fg: var(--white); --h-sub: var(--on-navy); --h-accent: var(--yellow); --h-num: var(--yellow);
  --h-line: rgba(255, 255, 255, .18); --h-ic1: var(--white); --h-ic2: var(--yellow); --h-ic3: rgba(255, 255, 255, .22);
  --h-btn-bg: var(--white); --h-btn-fg: var(--black);
  position: relative; overflow: hidden; isolation: isolate; transition: border-color var(--fill-fade) var(--fill-ease), background-color var(--fill-fade) var(--fill-ease);
}
:is(.diff-card, .feature:not(.feature--dark), .campus__row, .cd-campus, .teacher-card:has(.teacher-card__media--navy, .teacher-card__media--black)) {
  --h-bg: var(--yellow); --h-border: var(--yellow); --h-fg: var(--black); --h-sub: var(--on-yellow); --h-accent: var(--black); --h-num: var(--black);
  --h-line: rgba(9, 11, 12, .2); --h-ic1: var(--black); --h-ic2: var(--red); --h-ic3: rgba(9, 11, 12, .13);
  --h-btn-bg: var(--black); --h-btn-fg: var(--white);
}
:is(.pt-model--dark, .feature--dark, .mv-card--navy, .mv-card--red, .mv-card--yellow, .mv-card--black, .lib-dl) {
  --h-bg: var(--white); --h-border: var(--black); --h-fg: var(--black); --h-sub: var(--gray); --h-accent: var(--red-700); --h-num: var(--black);
  --h-line: var(--line); --h-ic1: var(--black); --h-ic2: var(--yellow); --h-ic3: rgba(247, 202, 57, .28);
  --h-btn-bg: var(--black); --h-btn-fg: var(--white);
}
/* Cơ sở đang chọn đã là nền đen: rê chuột không đổi gì */
.campus__row.is-active { --h-bg: var(--dark); --h-border: var(--dark); --h-fg: var(--white); --h-sub: var(--on-navy); --h-accent: var(--yellow); --h-ic1: var(--yellow); --h-ic2: var(--white); --h-ic3: rgba(247, 202, 57, .28); }
/* Hover lấp màu cần overflow:hidden; trong danh sách flex có max-height, thẻ hidden bị co lại và cắt mất dòng số điện thoại → không cho co */
.campus__row { flex-shrink: 0; }
.campus__row:hover { background: var(--white); }
.campus__row.is-active:hover { background: var(--dark); }

:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus)::after {
  content: ""; position: absolute; left: var(--hx); top: var(--hy); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: var(--h-bg); transform: scale(0); transition: transform var(--fill-in) var(--fill-ease); z-index: -1; pointer-events: none;
}
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover::after { transform: scale(130); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover { border-color: var(--h-border); color: var(--h-sub); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus) :is(h3, h4, p, b, strong, dd, dt, li, small, span, a:not(.btn), .card__price, .card__head, .lp-course__meta, .board__head) { transition: color var(--fill-fade) var(--fill-ease), background-color var(--fill-fade) var(--fill-ease), border-color var(--fill-fade) var(--fill-ease); }
/* Chữ */
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover :is(h3, h4, b, strong, dd, li, a:not(:where(.btn, .pill)), .card__price, .testi-card__who b, .school-tile__count, .card__head h3, .card__head h3 a) { color: var(--h-fg); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover :is(p, small, dt, span:not(:where([class*="pill"], [class*="__tag"], [class*="__subject"], [class*="__type"], [class*="__status"], .status, .tl__phase, .why-x__num, .teacher-card__stats dd span))) { color: var(--h-sub); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover :is(p b, .honor-card__school small, .pt-model__who) { color: var(--h-accent); }
/* Icon */
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover use[href] { --ic-1: var(--h-ic1); --ic-2: var(--h-ic2); --ic-3: var(--h-ic3); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover .link-arrow use[href] { --ic-1: var(--h-accent); --ic-2: var(--h-accent); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover :is(.pill, .status, [class*="__tag"], [class*="__subject"]) use[href] { --ic-1: currentColor; --ic-2: currentColor; }
/* Mảng nền bên trong thẻ (đầu thẻ khoá học, bảng xếp hạng) trong suốt để thấy màu lấp */
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover :is(.card__head, .lp-course__meta, .board__head, .board__list li:first-child) { background: transparent; }
/* Đường kẻ bên trong thẻ */
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover :is(.card__foot, .card__head, .teacher-card__stats, .teacher-card__stats > div + div, .honor-card__name, .dl-item__foot, .lp-course__meta, .lp-course__meta > div, .board__list li, .cd-campus h3) { border-color: var(--h-line); }
/* Số có gạch vàng: bỏ gạch, đổi màu chữ để không trùng nền */
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover :is(.honor-card__score, .teacher-card__stats dd span, .lp-course__price b, .board__score) { background: none; color: var(--h-num); }
/* Nút trong thẻ */
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover .btn--dark { background: var(--h-btn-bg); color: var(--h-btn-fg); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover .btn--ghost { border-color: var(--h-fg); color: var(--h-fg); background: transparent; }
.contact-item:hover a.strong { border-bottom-color: var(--h-accent); }
/* Phần tử tự mang màu tối/nền tối sẽ chìm vào màu lấp — rà bằng tools/audit-hover.js */
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover .btn use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover .pill--outline { color: var(--h-fg); border-color: var(--h-sub); }
:is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus):hover .sched-card__status--open { background: var(--h-fg); color: var(--h-bg); }
.pt-model--dark:hover li use[href] { --ic-1: var(--red); --ic-2: var(--red); --ic-3: rgba(229, 64, 54, .16); }
.pt-model--dark:hover .btn--primary { background: var(--red); }
/* Bento dùng vòng trắng riêng — cùng tốc độ, lan từ con trỏ */
.bento .bento__cell { --hx: 50%; --hy: 50%; }
.bento .bento__cell::after { left: var(--hx); top: var(--hy); transition: transform var(--fill-in) var(--fill-ease); }
.bento .bento__cell, .bento .bento__cell h3, .bento .bento__cell .link-arrow { transition: border-color var(--fill-fade) var(--fill-ease), color var(--fill-fade) var(--fill-ease); }
@media (hover: none) { :is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus)::after { display: none; } }
@media (prefers-reduced-motion: reduce) { :is(.feature, .lp-pain, .diff-card, .process__card, .school-tile, .contact-item, .pt-model, .sched-card, .testi-card, .tl__card, .card, .honor-card, .dl-item, .lp-course, .campus__row, .lib-dl, .cd-campus)::after, .bento .bento__cell::after { transition: none; } }

/* Số lượng trong chip lọc (/khoa-hoc/): ô tròn nhỏ tách khỏi nhãn, không in nghiêng.
   Chip thường: nền xám nhạt chữ đen; chip đang chọn (nền đen): ô vàng chữ đen. Tab lớn có style riêng mạnh hơn. */
:is(.filter-chip, .tab-btn) { display: inline-flex; align-items: center; gap: 8px; }
:is(.filter-chip, .tab-btn) em { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--smoke-2); color: var(--black); font-style: normal; font-size: .74rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; transition: background-color var(--dur), color var(--dur); }
:is(.filter-chip, .tab-btn).is-active em { background: var(--yellow); color: var(--black); }
/* Tab lớn (môn dọc · cấp ngang, nhóm khoá…): cùng một ô số với chip lọc, cùng vạch đỏ cho mục đang chọn */
:is(.dl-vtabs, .dl-htabs, .filter-bar--tabs) .filter-chip em { margin-left: 8px; background: var(--smoke-2); color: var(--gray); font-size: .74rem; }
:is(.dl-vtabs, .dl-htabs, .filter-bar--tabs) .filter-chip.is-active em { background: var(--yellow); color: var(--black); }

/* Footer: 3 cụm liên hệ (Hotline · Email · Cơ sở) mỗi cụm một khung viền mảnh trên nền tối */
.footer__contact { display: grid; gap: 10px; }
.footer__contact li, .footer__contact li:first-child { margin: 0; padding: 14px 16px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--r); }
/* Link trong footer mặc định là khối có đệm trên/dưới → số hotline, email cách nhãn quá xa. Trong cụm liên hệ cho link nằm liền dòng */
.footer__contact b { margin-top: 2px; line-height: 1.4; }
.footer__contact b a { display: inline; padding: 0; }

/* Chương trình học (chi tiết khoá): mỗi giai đoạn một màu nền đặc theo thứ tự navy · vàng · đỏ · đen,
   trục và chấm cùng màu giai đoạn. Thẻ nền đặc nên không viền; hover lấp trắng viền đen như mọi thẻ nền đặc. */
.page-course-detail .tl__item--navy { --tl: var(--navy); --tl-fg: var(--white); --tl-sub: var(--on-navy); }
.page-course-detail .tl__item--yellow { --tl: var(--yellow); --tl-fg: var(--black); --tl-sub: var(--on-yellow); }
.page-course-detail .tl__item--red { --tl: var(--red-700); --tl-fg: var(--white); --tl-sub: var(--on-red); }
.page-course-detail .tl__item--black { --tl: var(--dark); --tl-fg: var(--white); --tl-sub: var(--on-navy); }
.page-course-detail .tl__item::before { background: var(--tl); }
.page-course-detail .tl__dot { border-color: var(--tl); }
.page-course-detail .tl__card { background: var(--tl); border-color: transparent; color: var(--tl-sub);
  --h-bg: var(--white); --h-border: var(--black); --h-fg: var(--black); --h-sub: var(--gray); --h-accent: var(--red-700); --h-num: var(--black);
  --h-line: var(--line); --h-ic1: var(--black); --h-ic2: var(--yellow); --h-ic3: rgba(247, 202, 57, .28); }
.page-course-detail .tl__card h3 { color: var(--tl-fg); }
.page-course-detail .tl__card p { color: var(--tl-sub); }

/* Thẻ khoá học ở landing danh mục (.lp-course): hover lấp HAI màu — nửa trái (nội dung) vàng lan từ con trỏ,
   nửa phải (thông số + nút) đỏ lan từ đường ghép giữa. Mỗi nửa tự khai báo bộ biến --h-* nên các rule đảo chữ,
   icon, đường kẻ chung ở trên đọc đúng màu theo nửa chứa nó. Nền đặc nên bỏ viền thẻ khi hover. */
.lp-course::after { display: none; }
.lp-course:hover { border-color: transparent; background: transparent; }
.lp-course__main, .lp-course__meta { position: relative; isolation: isolate; overflow: hidden; }
.lp-course__main::after, .lp-course__meta::after { content: ""; position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; transform: scale(0); transition: transform var(--fill-in) var(--fill-ease); z-index: -1; pointer-events: none; }
/* Khách 18/09: nửa PHẢI lấp vàng thương hiệu, nửa TRÁI lấp vàng nhạt — hai sắc cùng hệ, không còn đỏ */
.lp-course__main::after { left: var(--hx); top: var(--hy); background: var(--yellow-soft); }
.lp-course__meta::after { left: 0; top: 50%; background: var(--yellow); }
.lp-course:hover .lp-course__main::after, .lp-course:hover .lp-course__meta::after { transform: scale(130); }
.lp-course__main { --h-fg: var(--black); --h-sub: var(--on-yellow); --h-accent: var(--black); --h-num: var(--black); --h-line: rgba(9, 11, 12, .2); --h-ic1: var(--black); --h-ic2: var(--red); --h-ic3: rgba(9, 11, 12, .13); --h-btn-bg: var(--black); --h-btn-fg: var(--white); }
.lp-course__meta { --h-fg: var(--black); --h-sub: var(--on-yellow); --h-accent: var(--black); --h-num: var(--black); --h-line: rgba(9, 11, 12, .22); --h-ic1: var(--black); --h-ic2: var(--red); --h-ic3: rgba(9, 11, 12, .13); --h-btn-bg: var(--black); --h-btn-fg: var(--white); }
.lp-course:hover .lp-course__meta { border-color: transparent; }
.lp-course:hover .pill--outline { color: var(--black); border-color: rgba(9, 11, 12, .45); }
@media (hover: none), (prefers-reduced-motion: reduce) { .lp-course__main::after, .lp-course__meta::after { transition: none; } }
@media (hover: none) { .lp-course__main::after, .lp-course__meta::after { display: none; } }

/* ===== Thanh menu nền trắng (feedback khách 16/09, R1-1) =====
   Logo gốc có khung đen bao chữ GTL; đặt trên thanh menu đen thì khung tan vào nền, nhìn sai logo.
   Đổi thanh menu sang trắng + dùng bản logo đen, chữ menu đen, CTA đỏ giữ nguyên. Drawer mobile vẫn nền tối. */
.header, .header-mobile { background: var(--white); color: var(--black); border-bottom: 1px solid var(--line); }
.header.is-compact { box-shadow: 0 6px 20px rgba(9, 11, 12, .08); }
.nav > a, .nav__toggle { color: var(--gray); }
.nav > a:hover, .nav__toggle:hover { color: var(--black); background: var(--smoke); }
/* Mục menu cao đúng bằng nút CTA (39px): bỏ padding dọc, để min-height canh giữa — viền 1.5px của mục
   đang xem nằm trong nhờ border-box nên không làm khung cao hơn nút. */
.nav > a, .nav__toggle { min-height: 39px; padding-block: 0; }
/* Mục đang xem: viền đen + vệt vàng đổ RA NGOÀI mép dưới, không nền xám (khách 16/09) */
.nav > a.is-active, .nav__toggle.is-active { color: var(--black); font-weight: 700; background: none; border: 1.5px solid var(--black); box-shadow: 0 3px 0 var(--yellow); }
.nav > a.is-active:hover, .nav__toggle.is-active:hover { background: none; }
.header-search__toggle, .header-mobile .burger, .header-mobile .header-mobile__search { color: var(--black); }
.header-search__toggle:hover, .header-search.is-open .header-search__toggle, .header .burger:hover, .header-mobile .burger:hover { background: var(--smoke); }
:is(.header, .header-mobile) use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
.header__cta:hover, .header__cta:focus-visible { box-shadow: 0 0 0 3px rgba(229, 64, 54, .22); }

/* ===== Popup đăng ký cho mọi nút CTA (feedback khách 16/09, R1-3) =====
   Đặt ở theme.css vì trang chủ không nạp page.css, mà popup có mặt ở mọi trang.
   Form bên trong bỏ khung thẻ riêng — nền popup đã là thẻ trắng. */
.cta-modal { width: min(660px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: clamp(24px, 3vw, 40px); border: 0; border-radius: var(--r); background: var(--white); color: var(--black); overflow: auto; }
.cta-modal[open] { animation: ctaIn .3s var(--ease); }
.cta-modal::backdrop { background: rgba(9, 11, 12, .72); }
@keyframes ctaIn { from { opacity: 0; transform: translateY(14px); } }
/* Icon ✕ trong sprite đã có vòng tròn sẵn → không bọc thêm khung tròn (khách 16/09) */
.cta-modal__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--black); }
.cta-modal__close .ic { width: 30px; height: 30px; }
.cta-modal__close:hover { color: var(--red); }
.cta-modal__close use[href] { --ic-1: currentColor; --ic-2: currentColor; }
/* Tiêu đề popup canh TRÁI (khách 16/09), giữ cỡ chữ to; ghi chú "Cần gấp?" xuống dòng riêng, canh giữa */
.cta-modal__head { max-width: 42ch; margin: 0 0 22px; text-align: left; }
.cta-modal__head h2 { margin-top: 12px; font-size: clamp(1.75rem, 3vw, 2.3rem); line-height: 1.15; }
.cta-modal__head p { margin-top: 12px; font-size: .98rem; color: var(--gray); }
/* p toàn site bị khoá 65ch nên khối ghi chú lệch trái dù chữ đã canh giữa → bỏ khoá và canh giữa cả khối */
.cta-modal .form-note { max-width: none; margin-inline: auto; text-align: center; }
.cta-modal .form-note__call { display: block; margin-top: 4px; }
/* Form trong popup không cần khung thẻ riêng: nền popup đã là thẻ trắng */
.cta-modal .form-card, .cta-modal .form-card.form-card { padding: 0; box-shadow: none; border: 0; background: none; }
@media (max-width: 620px) {
  .cta-modal { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; padding: 56px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) { .cta-modal[open] { animation: none; } }

/* Feedback R1 #15 (17/09): vệt vàng dưới số (năm kinh nghiệm, thành tích, điểm) mảnh lại thành gạch 3px
   nằm dưới chân chữ, cách chữ một khoảng — không đè lên nửa dưới con số nữa. */
/* 18/09: vạch vàng nhích lên 2px cho sát chân chữ hơn */
:is(.honor-card__score, .teacher-card__stats dd span, .profile-stats dd, .tl__stat, .board__score, .school-tile__count, .lp-course__price b) { padding-bottom: 5px; }   /* các dải số lớn dùng vệt vàng ::after nên không cần đệm */
/* Feedback R1 #13, #17: thẻ Sứ mệnh / Tầm nhìn / Giá trị cốt lõi là khối màu lớn — đổi màu nhanh gây chói.
   Lấp chậm gấp đôi và chữ đổi màu êm hơn. */
/* Khách 18/09: bỏ hẳn hiệu ứng lấp màu khi rê chuột ở thẻ Sứ mệnh / Tầm nhìn / Giá trị cốt lõi */
.mv-card { transition: none; }
:is(.teacher-card__stats dd span, .profile-stats dd) { display: inline-block; line-height: 1.15; }