/* =====================================================================
   home.css — trang chủ (body.homepage). 11 block, mỗi block 1 layout family.
   ===================================================================== */

/* 1. Hero (15/09): ảnh tràn toàn khung (bg.png khách gửi, 1894×1079). Nửa trái ảnh là phông đen trơn nên chữ đặt thẳng lên ảnh,
   không cần lớp phủ. Tiêu đề 3 dòng: "Vững TƯ DUY" / "giỏi NGÔN NGỮ" (từ khoá in hoa trên vệt vàng) / dòng phụ nhỏ hơn. */
.hero { position: relative; background: var(--dark); color: var(--on-navy); overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
/* Full màn hình dưới header; chữ canh phía trên (không canh giữa dọc) như mẫu */
.hero--bleed { display: flex; align-items: flex-start; min-height: max(560px, calc(100svh - var(--nav-h, 72px))); padding-block: clamp(56px, 9vh, 120px) clamp(48px, 6vh, 80px); }

.hero--bleed > .wrap { width: 100%; }
.hero__bg { position: absolute; inset: 0; margin: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 68%; }   /* ảnh 18/09 rộng 1.95 nên cắt đều hai bên: giữ trọn vùng đen bên trái lẫn nhân vật ngoài cùng phải */
.hero__copy { max-width: min(600px, 44%); }
/* Khách 18/09: hạ cụm chữ xuống ~40px cho cân với cụm ba khung cửa bên phải (chỉ desktop) */
@media (min-width: 901px) { .hero--bleed .hero__copy { margin-top: 40px; } }
/* Ảnh banner mới (18/09) có cụm 3 cửa bắt đầu sớm hơn bản cũ (36% thay vì 44% bề ngang) nên cụm chữ
   chạm vào cửa trắng ở MỌI khổ desktop — lớp phủ tối vì thế áp cho toàn bộ ≥901px, không chỉ 901–1280. */
@media (min-width: 901px) { .hero--bleed .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 11, 12, .92) 0%, rgba(9, 11, 12, .78) 38%, rgba(9, 11, 12, 0) 62%); } .hero__copy { position: relative; } }
@media (min-width: 901px) and (max-width: 1280px) { .hero__copy { max-width: 48%; } }
.hero h1 { margin: 0; max-width: none; color: var(--white); font-size: clamp(2.3rem, 4.4vw, 4.2rem); font-weight: 800; line-height: 1.24; letter-spacing: -.03em; }
.hero__line { display: block; }
/* Từ khoá: chữ trắng in hoa, vệt vàng mảnh sát chân chữ — cùng kiểu vệt dưới các con số nổi bật */
/* Feedback R1 #32 (17/09): bỏ vệt vàng dưới từ khoá, phân biệt bằng MÀU CHỮ. Hai phương án để khách chọn:
   Op1 (mặc định): TƯ DUY trắng · NGÔN NGỮ vàng. Op2 (?hero=2 → .hero--op2): TƯ DUY vàng · NGÔN NGỮ đỏ, khớp màu khung cửa. */
.hero h1 em { display: inline-block; font-style: normal; text-transform: uppercase; color: var(--white); background: none; }
.hero__line:nth-child(2) em { color: var(--yellow); }
.hero--op2 .hero__line:first-child em { color: var(--yellow); }
.hero--op2 .hero__line:nth-child(2) em { color: var(--red); }
.hero__tag { display: block; margin-top: .45em; font-size: .46em; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--white); }
.hero__sub { max-width: 52ch; margin-top: clamp(18px, 2vw, 26px); font-size: clamp(.98rem, 1.1vw, 1.08rem); color: var(--on-navy); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* 2. Con số nổi bật — Big Number Typography (15/09)
   Số là trọng tâm: 4 cột chung baseline, ngăn bằng hairline xám, không đóng card. Cỡ số theo bề rộng CẢ DẢI (cqi của .bignum)
   nên 4 số luôn bằng nhau (cột đầu không lệch cỡ vì không có padding trái) và "2.000+" vừa gọn. Vệt vàng chỉ hiện khi hover. Cam kết (icon) xuống dưới, cỡ nhỏ. */
.trust { padding-block: clamp(56px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.trust__title { max-width: none; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; }
.bignum { margin-top: clamp(28px, 3.5vw, 44px); }   /* lưới, cỡ số, nhãn, vệt vàng: khối "Con số nổi bật" chung ở common.css */
.bignum__val { display: inline-block; text-align: right; }
.bignum__num i { font-style: normal; }
/* Chuyển động (site.js thêm .is-armed khi chạy được hiệu ứng, .is-run khi vào khung nhìn): cụm hiện + dịch 12px trong 400ms,
   (vệt vàng không chạy lúc vào khung nhìn nữa, chỉ hiện khi rê chuột). Không JS / giảm chuyển động: hiện ngay giá trị cuối. */
.bignum.is-armed .bignum__item { opacity: 0; translate: 0 12px; transition: opacity .4s var(--ease), translate .4s var(--ease); }
.bignum.is-run .bignum__item { opacity: 1; translate: 0 0; }
/* Cam kết: hàng icon nhỏ dưới dải số */
.promise { list-style: none; margin: clamp(40px, 5vw, 56px) 0 0; padding: clamp(24px, 3vw, 32px) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.promise__item { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--black); text-wrap: balance; }
.trust .promise__ic { width: 40px; height: 40px; }

.register__points b { display: block; color: var(--black); }
.register__points span { font-size: .92rem; color: var(--gray-soft); }

/* Responsive */
@media (max-width: 900px) {
  .promise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .promise__item:last-child { grid-column: 1 / -1; }
  /* Màn hẹp (khách 21/09): ảnh lên trên, chữ xuống dưới. Đáy ảnh phủ một lớp chuyển dần sang nền đen
     và khối chữ kéo lên đè vào vùng chuyển đó, để ảnh và chữ liền thành một khối thay vì hai mảng rời. */
  .hero--bleed { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 0 44px; }
  .hero__bg { position: relative; inset: auto; }
  /* Cụm 3 khung + 3 học viên nằm ở x 690→1600 của ảnh 1600×782 (sát mép phải). Khung 6:5 cắt đúng 938px bề ngang,
     neo phải → thấy 662→1600: cụm lọt trọn và cân giữa khung. Khung rộng hơn (4:3) sẽ lộ thêm nền đen bên trái
     và đẩy cụm lệch phải. */
  .hero__bg img { aspect-ratio: 6 / 5; object-position: 100% center; }
  .hero__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; pointer-events: none;
    background: linear-gradient(180deg, rgba(9, 11, 12, 0) 0%, rgba(9, 11, 12, .6) 55%, var(--dark) 100%); }
  .hero--bleed > .wrap { margin-top: -18px; }   /* chữ bắt đầu ngay dưới chân ảnh, chỉ chạm nhẹ vào lớp chuyển màu */
  .hero__copy { max-width: none; }
  .why { grid-template-columns: 1fr; }
  .why__visual { aspect-ratio: 4 / 3; }
  .why__quote { margin: -40px 16px 0; }
  .honors__stats { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .band { grid-template-columns: 1fr; }
  .band__cta { justify-content: flex-start; }
  .register { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .promise { gap: 14px 12px; }
  .promise__item { font-size: .88rem; gap: 10px; }
  .trust .promise__ic { width: 36px; height: 36px; }
  .bignum__label { font-size: 1rem; }
  .hero h1 { font-size: clamp(2rem, 9.4vw, 2.5rem); }
  .hero__tag { font-size: .52em; }
  .hero__sub { font-size: .95rem; }
  .hero__cta { gap: 8px; }
  .hero__cta .btn { flex: 1 1 auto; padding-inline: 16px; }
  .why__item { grid-template-columns: 44px 1fr; gap: 14px; }
  .why__ico { width: 48px; height: 48px; }
}

/* ===== 6. ĐỘI NGŨ GIÁO VIÊN =============================
   Dùng đúng .teacher-card của /giao-vien/ (sinh từ teachers.json qua marker teachers:home),
   để ảnh tách nền, nền màu và dải số nổi bật đồng bộ ở cả hai nơi. */
/* .roster (lưới 4 thẻ) đã thay bằng .slider dùng chung (17/09) */



/* 11. Form đăng ký: strong moment thứ 3, nối liền mạch xuống footer navy */
/* Nền đỏ đậm (không phải navy) để tách khỏi footer navy ngay bên dưới. Chữ trắng trên --red-700: 5.58:1 */
.register-section { background: var(--red-700); color: var(--on-red); overflow: hidden; }
.register-section h2 { color: var(--white); }
.register-section .lead { color: var(--on-red); }
.register-section .eyebrow { color: var(--white); border-color: var(--line-on-red); }
.register-section .register__points b { color: var(--white); }
.register-section .register__points span { color: var(--on-navy); }
.register-section .form-card { box-shadow: var(--sh); }
/* Ảnh tách nền nhóm học viên thay cho FAQ: cột trái dựng thành flex-column, ảnh đẩy xuống đáy và chạm mép dưới section */
.register > :first-child { display: flex; flex-direction: column; align-self: stretch; }
/* Ảnh hiện trọn, không cắt: chiều rộng tràn sang gap bên phải (nằm dưới form nhờ z-index) và lấn lề trái
   trong phạm vi ngoài .wrap, nên ảnh đủ cao để lấp phần dưới cột trái. margin-top:auto chỉ đẩy phần dư
   (thường vài chục px) — ảnh vẫn ngay dưới mô tả, chân ảnh chạm mép dưới section. */
.register__photo {
  --bleed-l: clamp(0px, calc((100vw - var(--maxw)) / 2), 80px);
  position: relative; z-index: 0;
  width: calc(100% + var(--bleed-l) + clamp(28px, 5vw, 72px));
  margin: auto 0 calc(-1 * var(--section)) calc(-1 * var(--bleed-l)); padding-top: 24px;
}
.register__photo img { display: block; width: 100%; height: auto; max-width: none; }
.register > [data-form-message] { position: relative; z-index: 1; }
@media (max-width: 900px) {
  /* Mobile: ảnh nhóm học viên đứng sát mép trên form, không để khoảng trống giữa */
  .register { row-gap: 0; }
  .register__photo { width: min(100%, 560px); margin: 20px auto 0; padding-top: 0; }
}

/* ===== 5b. Bảng vàng — bản thử layout vòng cung =====
   Vòng lớn tràn hết bề ngang, tâm nằm dưới đáy stage (--drop) nên chỉ lộ phần trên cung. 24 ảnh rải kín 360°,
   cả vòng tự xoay chậm (--auto, 120s/vòng), dừng khi rê chuột; kéo chuột / vuốt cộng thêm --drag (site.js). */
@property --auto { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.honors-arc { overflow: hidden; padding-block: clamp(40px, 5vw, 64px); }
.honors-arc__stage { --r: max(56vw, 760px); --photo: clamp(140px, 11.5vw, 196px); --drop: calc(var(--r) * .45); --drag: 0deg;
  position: relative; height: calc(var(--r) * .55 + var(--photo) * .8 + 20px); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none;
  animation: arcAuto 120s linear infinite; }
/* Rê chuột vẫn chạy (khách chốt 15/09); chỉ dừng khi đang kéo tay */
.honors-arc__stage.is-dragging { animation-play-state: paused; }
.honors-arc__stage.is-dragging { cursor: grabbing; }
@keyframes arcAuto { to { --auto: -360deg; } }
@media (prefers-reduced-motion: reduce) { .honors-arc__stage { animation: none; } }
/* Vòng tick kiểu thước: vạch nhỏ mờ, cứ 5 vạch một vạch đậm; đậm ở đỉnh, nhạt dần về hai bên */
.honors-arc__ring { --rr: calc(var(--r) - var(--photo) * 1.15); position: absolute; left: 50%; top: calc(100% + var(--drop)); width: calc(var(--rr) * 2); height: calc(var(--rr) * 2); margin: calc(var(--rr) * -1) 0 0 calc(var(--rr) * -1);
  -webkit-mask: linear-gradient(to bottom, #000 4%, rgba(0, 0, 0, .35) 16%, transparent 26%); mask: linear-gradient(to bottom, #000 4%, rgba(0, 0, 0, .35) 16%, transparent 26%); pointer-events: none; }
.honors-arc__ticks { position: absolute; inset: 0; border-radius: 50%; rotate: calc(var(--auto) + var(--drag));
  background: repeating-conic-gradient(rgba(9, 11, 12, .6) 0 .4deg, transparent .4deg 7.5deg), repeating-conic-gradient(rgba(9, 11, 12, .22) 0 .3deg, transparent .3deg 1.5deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 26px), #000 calc(100% - 26px) 99.6%, transparent 100%);
          mask: radial-gradient(circle closest-side, transparent calc(100% - 26px), #000 calc(100% - 26px) 99.6%, transparent 100%); }
.honors-arc__photos { list-style: none; margin: 0; padding: 0; }
.honors-arc__photos li { position: absolute; left: 50%; top: calc(100% + var(--drop)); width: var(--photo); margin-left: calc(var(--photo) / -2); translate: 0 -50%;
  transform: rotate(calc(var(--a) + var(--auto) + var(--drag))) translateY(calc(-1 * var(--r))); }
.honors-arc__photos figure { position: relative; margin: 0; }
.honors-arc__photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: 22px; pointer-events: none; }
/* Thành tích: ô vàng nằm trong ảnh, góc trên phải */
.honors-arc__score { position: absolute; top: 10px; right: 10px; max-width: calc(100% - 20px); display: flex; flex-direction: column; align-items: center; padding: 6px 10px 7px; border-radius: 12px; background: var(--yellow); color: var(--black); text-align: center; line-height: 1.05; }
.honors-arc__score small { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Số to (72, 9.4, FTU); phần phụ (/100, môn) nhỏ đứng cạnh */
.honors-arc__score strong { margin-top: 1px; font-family: var(--display); font-size: clamp(1.5rem, 1.9vw, 2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.honors-arc__score strong i { margin-left: 1px; font-style: normal; font-size: .42em; font-weight: 700; letter-spacing: 0; }
.honors-arc__score strong.is-text { font-size: 1rem; letter-spacing: -.01em; }
.honors-arc__score strong.is-abbr { font-size: 1.15rem; letter-spacing: 0; }
.honors-arc__score .honors-arc__sub { margin-top: 2px; text-transform: none; font-size: .66rem; }
/* Đỗ trường THCS/THPT: tên trường nhỏ, xuống tối đa 2 dòng */
.honors-arc__score .honors-arc__school { margin-top: 2px; max-width: 12ch; white-space: normal; text-transform: none; font-size: .66rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Tên: nhãn trắng ngay dưới ảnh */
.honors-arc__photos figcaption { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 8px; text-align: center; }
.honors-arc__photos figcaption b { display: block; max-width: 100%; padding: 4px 12px; border-radius: 10px; background: var(--white); color: var(--black); font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rê chuột vào ảnh: dòng thành tích đầy đủ trượt ra dưới tên (ô đen chữ trắng cho dễ đọc trên nền xám) */
/* Nằm tuyệt đối dưới tên: ẩn/hiện không làm cao thêm thẻ, nên ảnh trên đỉnh cung không bị đẩy lên và cắt mép */
.honors-arc__detail { position: absolute; top: 100%; left: 50%; width: max-content; max-width: calc(var(--photo) * 1.15); margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--dark); color: var(--white); font-size: .76rem; font-weight: 600; line-height: 1.35; opacity: 0; translate: -50% -6px; transition: opacity .35s, translate .35s var(--ease); pointer-events: none; }
.honors-arc__photos li:hover { z-index: 2; }
.honors-arc__photos li:hover .honors-arc__detail { opacity: 1; translate: -50% 0; }
/* Vòng tick chạy ngang qua vùng chữ: phủ một lớp nền cùng màu section sau khối chữ để chữ luôn sạch */
.honors-arc__body::before { content: ""; position: absolute; inset: -24px -32px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--smoke) 62%, rgba(244, 244, 245, 0) 100%); }
.honors-arc__body { position: absolute; left: 0; right: 0; bottom: 0; margin-inline: auto; width: min(640px, calc(100% - 2 * var(--gutter))); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; z-index: 3; cursor: auto; user-select: text; }
.honors-arc__body h2 { max-width: 18ch; }
.honors-arc__body .lead { max-width: 52ch; }
.honors-arc__body .btn { margin-top: 4px; }
.honors-arc__stats { margin-top: clamp(28px, 3vw, 40px); }   /* dải số dùng chung: xem common.css */
@media (max-width: 900px) {
  /* Mobile: bán kính lớn hơn khung (cung phẳng) và ảnh nhỏ lại → mỗi bước 15° dài ~35vw, ảnh 22vw, còn khoảng thở
     giữa hai ảnh (bản cũ r 88vw / ảnh 26vw thì cung chỉ 23vw nên ảnh chồng lên nhau). */
  .honors-arc__stage { --r: 135vw; --photo: 22vw; --drop: 0px; height: auto; padding-top: calc(var(--photo) * 1.25 + 96px); }
  /* +28px: tâm li tính cả nhãn tên dưới ảnh nên ảnh ở đỉnh cung bị đẩy lên sát mép, chừa thêm cho khỏi cắt */
  .honors-arc__photos li { top: calc(var(--r) + var(--photo) * .8 + 28px); }
  .honors-arc__ring { display: none; }
  .honors-arc__photos img { border-radius: 16px; }
  /* Điện thoại: ảnh 33vw cho đọc được huy hiệu và tên; bán kính 175vw giữ bước 15° (~46vw) lớn hơn ảnh */
  @media (max-width: 600px) { .honors-arc__stage { --r: 175vw; --photo: 33vw; } }
  .honors-arc__score { top: 6px; right: 6px; max-width: calc(100% - 12px); padding: 5px 8px 6px; border-radius: 10px; }
  .honors-arc__score small { font-size: .64rem; }
  .honors-arc__score strong { font-size: 1.3rem; }
  .honors-arc__score strong.is-abbr { font-size: 1.05rem; }
  .honors-arc__score .honors-arc__sub, .honors-arc__score .honors-arc__school { font-size: .66rem; }
  .honors-arc__photos figcaption b { font-size: .76rem; padding: 3px 8px; }
  .honors-arc__detail { display: none; }
  .honors-arc__body { position: relative; margin-top: 24px; }
}

/* ===== 4. Vì sao chọn GTL — ghim section, cuộn dọc đổi lý do =====
   Stage chia 3 vùng theo bề ngang khung: ảnh chính trái (38%), chữ giữa (36%), ảnh nhỏ phải (18.5%).
   Mỗi lần đổi lý do: dải chữ trượt ngang một nhịp; ảnh nhỏ bên phải di chuyển sang trái và lớn dần thành
   ảnh chính, ảnh chính cũ trượt ra lề trái và mờ đi, ảnh kế tiếp hiện vào vị trí ảnh nhỏ.
   Đổi lý do bằng: lăn chuột khi trỏ trong ô, nút mũi tên, phím ←/→, vuốt trên điện thoại. */
.why-x { position: relative; }
.why-x .carousel-nav .js-why-prev .ic { transform: scaleX(-1); }
.why-x__progress { position: relative; height: 3px; margin-top: clamp(24px, 3vw, 36px); background: var(--line); border-radius: 3px; overflow: hidden; }
.why-x__progress span { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--black); border-radius: 3px; transition: width .5s var(--ease); }
.why-x__stage { --big-w: 38%; --small-w: 18.5%; position: relative; overflow: hidden; aspect-ratio: 1000 / 304; margin-top: clamp(28px, 3vw, 44px); }
.why-x__pic { position: absolute; top: 0; margin: 0; overflow: hidden; border-radius: var(--r-sm); background: var(--smoke-2);
  left: 100%; width: var(--small-w); height: 45.6%; opacity: 0;
  transition: left .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .5s; }
.why-x__pic img { width: 100%; height: 100%; object-fit: cover; }
.why-x__pic.is-active { left: 0; width: var(--big-w); height: 100%; opacity: 1; z-index: 2; }
.why-x__pic.is-next { left: calc(100% - var(--small-w)); width: var(--small-w); height: 45.6%; opacity: 1; z-index: 1; cursor: pointer; }
.why-x__pic.is-prev { left: -20%; width: var(--big-w); height: 100%; opacity: 0; }
.why-x__texts { position: absolute; top: 0; bottom: 0; left: calc(var(--big-w) + 4%); width: 36%; overflow: hidden; }
.why-x__texttrack { --i: 0; display: flex; height: 100%; transform: translateX(calc(-100% * var(--i))); transition: transform .8s var(--ease); }
.why-x__body { flex: 0 0 100%; display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 4px 0; min-width: 0; transition: opacity .5s; }
.why-x__body:not(.is-active) { opacity: 0; }
.why-x__num { align-self: flex-start; display: grid; place-items: center; min-width: 48px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--yellow); font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--black); }
.why-x__body h3 { margin-top: 6px; font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.15; max-width: 18ch; color: var(--red-700); }
.why-x__body > p { max-width: 44ch; font-size: 1.02rem; color: var(--gray); }
.why-x__list { list-style: none; display: grid; gap: 12px; margin-top: auto; padding-top: 18px; }
.why-x__list li { display: flex; align-items: center; gap: 12px; font-size: .98rem; font-weight: 700; color: var(--black); }
.why-x__list .ic { flex: none; width: 26px; height: 26px; }
.why-x__list use[href] { --ic-1: var(--black); --ic-2: var(--black); --ic-3: var(--yellow); }
.why-x__steps { display: none; }
/* 16/09 (feedback khách): KHÔNG ghim section nữa. Section cao bình thường; chỉ khi con trỏ nằm TRONG ô
   (.why-x__stage) thì lăn chuột đổi lý do và trang đứng yên — ra ngoài ô hoặc hết lý do thì trang cuộn như thường
   (site.js bindWhyX). Bản cũ ghim 100vh + (n-1)·60vh, ai cũng phải cuộn hết section mới đi tiếp. */
.why-x { padding-block: var(--section); }
@media (min-width: 901px) and (max-width: 1280px) { .why-x__stage { aspect-ratio: auto; height: 420px; } .why-x__texts { width: 40%; } }
@media (max-width: 900px) {
  .why-x .section-head--row { flex-direction: column; align-items: flex-start; }
  .why-x .section-head--row > :first-child { max-width: 100%; }
  .why-x__stage { aspect-ratio: auto; }
  .why-x__pics { position: relative; aspect-ratio: 4 / 3; }
  .why-x__pic, .why-x__pic.is-active, .why-x__pic.is-next, .why-x__pic.is-prev { top: 0; left: 0; width: 100%; height: 100%; }
  .why-x__pic:not(.is-active) { opacity: 0; }
  .why-x__texts { position: relative; left: auto; width: 100%; margin-top: 20px; }
  .why-x__list { margin-top: 4px; padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .why-x__pic, .why-x__texttrack, .why-x__body { transition: none; } }

/* ===== 8. Cẩm nang (thư viện) — lưới 3 cột theo hệ thẻ chung (15/09) =====
   Hàng 1: bài mới nhất nằm ngang (2 cột) + thẻ vàng nền đặc dẫn tới /tai-lieu/.
   Hàng 2: 3 thẻ bài viết trắng viền đen, ảnh lọt lòng. Hover lấp màu lấy từ theme.css. */
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.lib-grid .card__media { aspect-ratio: 16 / 9; }
.lib-grid .article-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--gray-soft); }
.lib-grid .cat { color: var(--gray); font-weight: 700; }
.lib-card h3 { font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.35; text-wrap: pretty; }

.lib-feat { grid-column: span 2; flex-direction: row; }
/* Ảnh bìa có chữ in sẵn nên giữ đúng 16:9, không cắt theo chiều cao thẻ */
.lib-feat { align-items: center; }
.lib-feat .card__media { flex: 0 0 56%; aspect-ratio: 16 / 9; }
/* .lib-grid tăng specificity: theme.css (nạp sau) đặt padding 8px cho .article-card .card__body làm chữ dính sát ảnh */
.lib-grid .lib-feat .card__body { justify-content: center; gap: 12px; padding: 20px clamp(20px, 2.5vw, 36px) 20px clamp(32px, 3.5vw, 52px); }
.lib-feat h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.25; text-wrap: balance; }
.lib-feat p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-feat .link-arrow { margin-top: 6px; width: fit-content; }
.lib-feat__tag { width: fit-content; padding: 5px 12px; border-radius: 999px; background: var(--red-700); color: var(--white); font-size: .78rem; font-weight: 700; }

.lib-dl { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1.5px solid transparent; border-radius: var(--r); background: var(--yellow); color: var(--on-yellow); }
.lib-dl__ic { width: 52px; height: 52px; }
.lib-dl use[href] { --ic-1: var(--black); --ic-2: var(--red); --ic-3: rgba(9, 11, 12, .13); }
/* Icon trong nút theo màu chữ nút, không lấy cặp đen/đỏ của thẻ vàng */
.lib-dl .btn use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
.lib-dl__count { margin-top: 6px; font-size: .9rem; font-weight: 700; color: var(--black); }
.lib-dl h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.25; color: var(--black); }
.lib-dl p { font-size: .95rem; }
.lib-dl__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 2px 0 0; }
.lib-dl__tags li { padding: 4px 12px; border: 1.5px solid var(--black); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--black); }
.lib-dl__btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1024px) {
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .lib-grid { grid-template-columns: 1fr; gap: 18px; }
  .lib-feat { grid-column: auto; flex-direction: column; }
  .lib-feat { align-items: stretch; }
  .lib-feat .card__media { flex: none; }
  .lib-grid .lib-feat .card__body { padding: 18px 8px 8px; }
}

/* Feedback R1 #2 (17/09): "GTL Academy qua những con số" căn giữa toàn bộ (số/nhãn căn giữa ở common.css) */
.trust__title { text-align: center; margin-inline: auto; }
.promise__item { flex-direction: column; align-items: center; text-align: center; }
.honors-arc__link { display: block; color: inherit; -webkit-user-drag: none; }
.honors-arc__link:focus-visible figure img { outline: 3px solid var(--red); outline-offset: 3px; }