/* ============================================================
   ATHENA CHESS — FONTS (self-hosted Be Vietnam Pro)
   woff2, subsets: Vietnamese + Latin, font-display: swap.
   Latin-ext was dropped: its range (Eastern-European accents, U+1E00-1E9F …)
   has no glyph this site actually renders — Vietnamese tone marks all live in
   U+0102-01B0/U+1EA0-1EF9, which the Vietnamese subset covers. It cost 6 extra
   font requests (~40 KB) on first paint. The .woff2 files are still in
   public/fonts if a future page ever needs them.
   OFL licensed — self-hosting permitted. Source: Google Fonts v12.
   Weights: 400 600 700 900 (reduced from 400-900 to cut render-blocking).
   ============================================================ */

/* Weight 400 — body text (CRITICAL: preloaded in layout.jsx) */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-vietnamese-400.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Weight 600 — semibold (subheads, buttons) */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-vietnamese-600.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Weight 700 — bold (headings, nav) */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-vietnamese-700.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Weight 900 — black (hero display) */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-vietnamese-900.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-latin-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   FALLBACK KHỚP SỐ ĐO (metric-compatible fallback)
   Vấn đề: trước khi Be Vietnam Pro tải xong, chữ vẽ bằng system-ui —
   font hệ thống HẸP HƠN BVP 12–18%. Dòng "Lớp học cờ vua cho trẻ em tại
   Đà Nẵng" vì thế vừa 1 dòng lúc đầu rồi tràn thành 2 dòng khi BVP về,
   đẩy toàn bộ hero xuống 25px. 25px đó vừa là CLS còn lại, vừa làm slide
   ảnh thứ 2 của hero to hơn slide 1 → Chrome ghi nhận một LCP candidate
   MỚI ở giây thứ 3,6 (ảnh hero thật đã vẽ xong từ 0,16s).
   Cách chữa: khai báo font dự phòng dựng trên Arial/Roboto có sẵn trong
   máy, kéo giãn bằng `size-adjust` cho bằng bề ngang BVP → đổi font không
   đổi chỗ xuống dòng.
   Tỉ lệ đo bằng canvas measureText trên chuỗi tiếng Việt thật:
     BVP400/Arial Regular 1,088 · BVP600-900/Arial Bold ~1,045
     BVP400/Roboto Regular 1,189 · BVP700-900/Roboto Bold ~1,164
   line-height của hệ thiết kế là SỐ KHÔNG ĐƠN VỊ (1.08/1.22/1.7) nên chiều
   cao dòng không phụ thuộc số đo font — chỉ cần chỉnh bề ngang, không cần
   ascent/descent-override.
   ============================================================ */
@font-face {
  font-family: 'BVP Fallback';
  src: local('Roboto'), local('Roboto-Regular');
  font-weight: 100 500;
  size-adjust: 118.9%;
}
@font-face {
  font-family: 'BVP Fallback';
  src: local('Roboto Bold'), local('Roboto-Bold');
  font-weight: 600 900;
  size-adjust: 116.4%;
}
@font-face {
  font-family: 'BVP Fallback 2';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  font-weight: 100 500;
  size-adjust: 108.8%;
}
@font-face {
  font-family: 'BVP Fallback 2';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  font-weight: 600 900;
  size-adjust: 104.5%;
}

/* ============================================================
   ATHENA CHESS — global entry point (ported for Next.js)
   Token import order mirrors the design system's styles.css.
   Layout rules adapted from the UI kit's kit.css.
   ============================================================ */

/* ---- Shared layout CSS (from kit.css) ---- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); }

.kit-burger { display: none; }

.zalo-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 400;
  display: flex; align-items: center; gap: 10px;
  background: var(--grad-brand); color: #fff; border: none; cursor: pointer;
  padding: 14px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-brand);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  transition: transform .18s var(--ease-out);
}
.zalo-fab:hover { transform: translateY(-2px); }

/* Page hero band for inner pages */
.page-hero {
  background: radial-gradient(120% 130% at 80% 0%, #312A6E 0%, var(--navy-900) 60%, #14123A 100%);
  color: #fff; position: relative; overflow: hidden;
}
.page-hero .athena-container { position: relative; z-index: 2; }
/* (hoạ tiết bàn cờ dạng conic-gradient đã gỡ khỏi mọi hero — nó đè lên ảnh thật
   và trông như lưới nền trong suốt của Photoshop.) */

/* ---- Home hero: ảnh nền full-bleed + lớp phủ SÁNG ------------------------
   Bản gốc phủ navy ~90% lên ảnh để chữ trắng đọc được, kết quả là ảnh bị dìm
   tối và đục. Ở đây vẫn là ảnh nền full-bleed, nhưng lớp phủ đổi sang cream và
   chữ đổi sang navy: cùng đạt mục đích tách chữ khỏi ảnh, mà theo hướng làm
   sáng. Hero cũng về cùng hệ sáng với mọi section còn lại của trang. */
.hero-v2 {
  position: relative;
  /* kéo lên dưới header (header nền cream, không transparent) để mép trên của
     scrim hoà thẳng vào thanh nav, không thấy đường cắt ngang ảnh */
  margin-top: -76px; padding-top: 76px;
  overflow: hidden; background: var(--cream);
}
/* Ảnh nền chạy luân phiên: 5 ảnh chồng lên nhau, chỉ ảnh .is-on hiện. Đổi ảnh
   bằng opacity (transform/opacity chạy trên GPU, không gây reflow). Ảnh đầu đã
   có .is-on ngay trong HTML tĩnh nên không JS vẫn thấy ảnh. */
.hero-photos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-photo-wrap { display: contents; }   /* <picture> chỉ chọn nguồn, không tạo hộp layout */
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* --hero-pos-y do từng slide đặt inline; để ở custom property chứ không set
     object-position inline, nếu không media query ≤860 không ghi đè được. */
  object-position: 62% var(--hero-pos-y, 46%);
  opacity: 0; transition: opacity .9s var(--ease-out);
}
.hero-photo.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo { transition: none; }
}

/* Scrim sáng, 3 lớp:
   ::before  ngang  - cream đậm bên trái (chỗ đặt chữ), tan dần sang phải để lộ lớp học
   ::after   dọc    - hoà mép trên vào header cream, mép dưới vào dải ưu đãi vàng nhạt
   nền       gold   - một vệt vàng thương hiệu rất nhạt ở góc trên phải cho ấm */
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 52% at 92% 4%, rgba(254,195,58,.18), transparent 70%); }
.hero-scrim::before {
  content: ""; position: absolute; inset: 0;
  /* Chữ dài nhất (đoạn lead) kết thúc quanh 45% bề ngang, nên từ ~46% trở đi có
     thể nhả mạnh để ảnh ra hình. Hai nút CTA vươn tới ~53% nhưng chúng có nền
     riêng nên không phụ thuộc scrim. */
  background: linear-gradient(92deg,
    rgba(250,250,249,.96) 0%, rgba(250,250,249,.93) 28%,
    rgba(250,250,249,.82) 42%, rgba(250,250,249,.46) 58%,
    rgba(250,250,249,.14) 76%, rgba(250,250,249,0) 92%);
}
.hero-scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(250,250,249,.94) 0%, rgba(250,250,249,.34) 14%,
    rgba(250,250,249,0) 32%, rgba(250,250,249,0) 72%,
    rgba(255,248,230,.55) 100%);
}

.hero-v2-inner {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(4rem, 8vw, 7rem);
}
/* Khối chữ bó trong vùng scrim đậm nhất. 640px là mức rộng nhất còn nằm gọn
   trong vùng ≥.80 ở 1440 — rộng hơn nữa là chữ tràn sang chỗ ảnh lộ ra. */
.hero-v2-copy { max-width: 640px; }

.hero-line-1 {
  display: block; font-size: var(--fs-h4); font-weight: 700;
  color: var(--indigo-500); letter-spacing: -.01em; margin-bottom: 10px;
}
/* Thang chữ riêng: khối chữ chỉ còn 640px, dùng --fs-display (68px) sẽ vỡ
   tiêu đề thành 3 dòng và tràn khỏi vùng scrim sáng. */
.hero-v2-display {
  display: block; font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--navy-900);
}
.hero-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-mask > span { display: block; }
.hero-v2-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero-v2-lead {
  font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-700);
  margin-top: 20px; max-width: 30rem;
}
.hero-v2-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
/* Nút viền trong suốt nằm trên ảnh thì đọc yếu — cho nó nền cream đặc để thành
   một cái nút thật sự. (!important vì <Button> đặt style inline.) */
.hero-v2-cta .ath-btn-outline {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: saturate(140%) blur(2px);
}

/* ≤860px: ảnh đổi sang bản dọc, scrim xoay thành dọc — chữ nằm trên nền cream ở
   nửa trên, nửa dưới nhả ra cho thấy lớp học. padding-bottom lớn để chừa hẳn một
   khoảng ảnh rõ ràng bên dưới nút, không phải chỉ hở một vệt. */
@media (max-width: 860px) {
  .hero-photo { object-position: 50% 50%; }   /* bản dọc đã cắt sẵn, không lệch nữa */
  .hero-scrim::before {
    background: linear-gradient(180deg,
      rgba(250,250,249,.97) 0%, rgba(250,250,249,.95) 44%,
      rgba(250,250,249,.82) 60%, rgba(250,250,249,.36) 78%,
      rgba(250,250,249,.04) 93%, rgba(255,248,230,.40) 100%);
  }
  .hero-scrim::after { background: none; }
  .hero-v2-inner { padding-block: 2rem 11rem; }
  .hero-v2-lead { max-width: none; }
  .hero-v2-cta { margin-top: 26px; }
}

@media (max-width: 980px) {
  .kit-nav, .kit-actions { display: none !important; }
  .kit-burger { display: inline-flex !important; }
}
@media (max-width: 860px) {
  .cta-grid, .footer-grid, .two-col { grid-template-columns: minmax(0, 1fr) !important; }
  .cta-grid > *, .footer-grid > *, .two-col > * { min-width: 0; }
  /* Gallery: dense 4-col photo wall on mobile — more photos, less scroll */
  .gallery-grid { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 80px !important; gap: 7px !important; }
  .gallery-grid > div { grid-column: span 1 !important; grid-row: span 1 !important; }
  /* USP strip: 4 cols overflow on phones — collapse to 2, hairline gaps */
  .usp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1px !important; background: var(--line); }
  .usp-grid > div { border-left: none !important; background: var(--white); }
  /* Footer "Khám phá" links: 2 columns on mobile to cut footer height */
  .footer-nav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
}
@media (max-width: 460px) {
  .usp-grid { grid-template-columns: 1fr !important; }
}
/* Safety net: never allow horizontal scroll on the page */
html, body { overflow-x: clip; }

/* 5-level path — animated section (Claude Design handoff "animate-section-request") */
@keyframes athenaCardIn { from { transform: translateY(16px); } to { transform: none; } }
@keyframes athenaGlyphIn { from { transform: translateY(14px) rotate(-8deg); } to { transform: none; } }
@keyframes athenaShimmer { from { transform: translateX(-170%) skewX(-18deg); } to { transform: translateX(280%) skewX(-18deg); } }
@keyframes athenaProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes athenaPulse { 0% { box-shadow: 0 0 0 0 rgba(123,31,162,.45); } 70% { box-shadow: 0 0 0 18px rgba(123,31,162,0); } 100% { box-shadow: 0 0 0 0 rgba(123,31,162,0); } }
@keyframes athenaTravel { 0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: .9; } 50% { transform: translate(-50%,-50%) scale(1.25); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .lvl5-section *, .lvl5-section *::before, .lvl5-section *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   Motion flourishes — CSS-only, no assets. Per motion.md §2/§3:
   subtle CTA pulse + gold-badge shimmer. Gated by reduced-motion.
   ============================================================ */

/* CTA pulse: gentle "breathing" on the persistent primary CTA. */
@keyframes acds-cta-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.acds-cta-pulse { animation: acds-cta-pulse 2.4s var(--ease-in-out) infinite; }
/* On hover, drop the pulse so the button's own lift/press transform takes over. */
.acds-cta-pulse:hover { animation: none; }

/* Gold badge shimmer: a soft light sweep across gold accent badges. */
@keyframes acds-badge-shimmer {
  0%, 55%   { transform: translateX(-130%); }
  78%, 100% { transform: translateX(130%); }
}
.acds-badge-gold { position: relative; overflow: hidden; }
.acds-badge-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-130%);
  animation: acds-badge-shimmer 5s ease-in-out infinite;
}
/* De-sync neighbouring badges so they don't all gleam in lockstep. */
.acds-badge-gold:nth-of-type(2n)::after { animation-delay: 1.3s; }
.acds-badge-gold:nth-of-type(3n)::after { animation-delay: 2.6s; }

@media (prefers-reduced-motion: reduce) {
  .acds-cta-pulse { animation: none; }
  .acds-badge-gold::after { animation: none; display: none; }
}

/* ============================================================
   Trial form — stop the 2-col grids from forcing the card wider
   than a phone viewport. Inputs carry an intrinsic min-width;
   minmax(0,1fr) lets the tracks shrink, then they stack <480px.
   (This is what was clipping the CTA copy + the "Chọn cơ sở".)
   ============================================================ */
.trial-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.trial-row > * { min-width: 0; }
@media (max-width: 480px) { .trial-row { grid-template-columns: 1fr; } }

/* ============================================================
   Leaderboard (Top-20 ELO) — podium, ranked rows, badge motion
   ============================================================ */
.lb-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 18px; align-items: end; }
.lb-pod { animation: athenaCardIn .55s var(--ease-out) both; }
.lb-pod-2 { animation-delay: .05s; }
.lb-pod-1 { transform: translateY(-14px); animation: lbWin 3.2s var(--ease-in-out) infinite; }
.lb-crown { display: inline-block; animation: lbCrownBob 2.6s var(--ease-in-out) infinite; transform-origin: center bottom; }
.lb-row { transition: background var(--dur-fast); }
.lb-row:hover { background: var(--info-bg) !important; }
@keyframes lbCrownBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes lbWin {
  0%, 100% { box-shadow: var(--shadow-lg); }
  50%      { box-shadow: 0 16px 44px rgba(254, 195, 58, .32); }
}
@media (max-width: 640px) {
  .lb-podium { grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
  .lb-pod-1 { grid-column: 1 / -1; order: -1; transform: none; }
}
@media (max-width: 560px) {
  .lb-row { grid-template-columns: 30px 38px minmax(0, 1fr) auto !important; gap: 10px !important; padding: 11px 13px !important; }
  .lb-row-badges { display: none !important; }
  .lb-legend { gap: 8px 14px !important; }
}

/* ============================================================
   Header mega-menu — dropdown panels + items
   ============================================================ */
.mega-panel {
  background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px -16px rgba(20,18,58,.18);
  z-index: 210; animation: megaIn .22s var(--ease-out) both;
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: var(--radius-md); text-decoration: none; transition: background var(--dur-fast); }
.mega-item:hover { background: var(--info-bg); }
.mega-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--gold-100); color: var(--gold-700); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast), color var(--dur-fast); }
.mega-item:hover .mega-ico { background: var(--grad-brand); color: #fff; }
.mega-item b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--navy-900); }
.mega-item small { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 2px; line-height: 1.35; }
/* Featured promo rail inside the mega panel — brand-gradient card with CTA */
.mega-featured {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px;
  border-radius: var(--radius-lg); background: var(--grad-brand); color: #fff; text-decoration: none;
  overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.mega-featured::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image: conic-gradient(#fff 90deg, transparent 90deg 180deg, #fff 180deg 270deg, transparent 270deg);
  background-size: 44px 44px;
}
.mega-featured:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.mega-featured-ico { width: 42px; height: 42px; border-radius: var(--radius-md); background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.mega-featured-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.mega-featured-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.25; }
.mega-featured-desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }
.mega-featured-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
.mega-featured-cta svg { transition: transform var(--dur-fast) var(--ease-out); }
.mega-featured:hover .mega-featured-cta svg { transform: translateX(4px); }

/* Coach profile modal — quick-stat dividers */
.coach-stats > * + * { border-left: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .lb-pod, .lb-crown { animation: none !important; }
  .lb-pod-1 { animation: none !important; transform: translateY(-14px); }
  .mega-panel { animation: none !important; }
}

/* ---- Motion polish: CTA shine sweep + gallery hover ---- */
.ath-btn { position: relative; overflow: hidden; }
.ath-btn-primary::after, .ath-btn-gold::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform: translateX(-130%);
}
.ath-btn-primary:hover::after, .ath-btn-gold:hover::after { animation: athenaBtnShine .8s var(--ease-out); }
@keyframes athenaBtnShine { to { transform: translateX(130%); } }

.gallery-tile img { transition: transform .55s var(--ease-out); }
.gallery-tile:hover img { transform: scale(1.07); }
.gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 11px; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(30,27,75,.86), rgba(30,27,75,0));
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3;
  opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.gallery-tile:hover .gallery-cap { opacity: 1; transform: none; }
@media (hover: none) { .gallery-cap { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ath-btn-primary::after, .ath-btn-gold::after { display: none; }
  .gallery-tile img { transition: none; }
  .gallery-tile:hover img { transform: none; }
}

/* Footer "built by" credit — subtle muted→white hover. */
.footer-credit { transition: color .2s var(--ease-out, ease); }
.footer-credit:hover { color: #fff; }

/* ---- Coach cards (/team) ----------------------------------------------
   The portrait sits inset on its own cream panel — a mat board — so the card
   reads as a framed picture. The tile is locked to 4:5, the ratio the retouched
   portraits are baked at, which is what keeps every face on the same line at
   every viewport width instead of being re-cropped by a fixed pixel height. */
.coach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.coach-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  /* thẻ HLV render bằng <a> (link tới /team/<slug>) — bỏ màu/gạch chân mặc định */
  color: inherit; text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.coach-card-frame { padding: 10px 10px 0; }
.coach-card-photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-md); background: #FFF4DC;
  box-shadow: inset 0 0 0 1px rgba(254,195,58,.55);
}
.coach-card-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform .55s var(--ease-out);
}
.coach-card:hover .coach-card-photo img { transform: scale(1.035); }
/* Coaches whose portrait the club has not sent yet keep the same cream panel as
   the retouched ones — a navy placeholder next to a cream photo made the grid
   look checkered, not deliberate. */
.coach-card-photo[data-empty] { display: flex; align-items: center; justify-content: center; }
.coach-card-glyph { font-size: 84px; line-height: 1; color: var(--gold-500); opacity: .75; }
.coach-card-rating {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.94); color: var(--navy-900); padding: 4px 9px;
  border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
  box-shadow: var(--shadow-xs);
}
.coach-card-body { padding: 16px var(--space-5) var(--space-5); min-width: 0; }
/* Coach names and roles are long in Vietnamese and the card is narrow on a
   phone — let a word break rather than get clipped by the card's overflow. */
.coach-card-name, .coach-card-role { overflow-wrap: break-word; hyphens: auto; }
.coach-card-name { margin: 0 0 2px; font-size: 1.2rem; font-weight: 800; }
.coach-card-role { color: var(--purple-600); font-weight: 600; font-size: var(--fs-sm); }
.coach-card-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--ink-700); }
.coach-card-titles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.coach-card-titles span {
  font-size: var(--fs-caption); font-weight: 700; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--gold-100); color: var(--gold-700);
}
.coach-card-cta {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--purple-600); font-weight: 700; font-size: 13.5px;
}

/* Dải ngăn hai nhóm của /team: HLV đứng lớp nằm trên nền trang, ban điều hành
   nằm trên dải nền ấm có hairline trên/dưới — đọc ra ngay là hai nhóm khác
   nhau mà không cần thêm đường kẻ hay tiêu đề to hơn.
   auto-fill (không phải auto-fit) giữ nguyên bề rộng cột của lưới HLV phía
   trên, nên 3 thẻ điều hành không bị kéo giãn to hơn thẻ HLV. */
.team-ops {
  margin-top: var(--section-y);
  padding: var(--section-y) 0;
  background: var(--sand-100);
  border-top: 1px solid var(--sand-200);
  border-bottom: 1px solid var(--sand-200);
}
.team-ops .coach-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Phones: two portraits a row instead of one full-width card per coach, and
   drop the detail lines that have no room to breathe at ~150px wide. */
@media (max-width: 560px) {
  .coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .team-ops .coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-card-frame { padding: 6px 6px 0; }
  .coach-card-body { padding: 10px 11px 12px; }
  .coach-card-name { font-size: .98rem; line-height: 1.25; }
  .coach-card-role { font-size: 11.5px; line-height: 1.35; margin-top: 3px; }
  .coach-card-rating { top: 7px; right: 7px; padding: 3px 7px; font-size: 11px; }
  .coach-card-stats, .coach-card-titles { display: none; }
  .coach-card-cta { margin-top: 9px; padding-top: 8px; font-size: 12px; }
  .coach-card-cta span:first-child { font-size: 12px; }
  .coach-card-glyph { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .coach-card-photo img, .coach-card:hover .coach-card-photo img { transition: none; transform: none; }
}

/* ── Giáo trình: thanh điều hướng cạnh bài viết ───────────────────────────
   Desktop ≥980px: cột trái sticky. Dưới 980px: gập lại thành <details> ở đầu
   bài, bố cục trở về một cột như cũ. Không dùng JavaScript. */
.gt-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
  max-width: 1120px;
  margin-inline: auto;
}
.gt-aside { position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.gt-aside::-webkit-scrollbar { width: 6px; }
.gt-aside::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
/* Dải tiến độ 1 dòng — chỉ mobile. Trên desktop đã có sidebar nên ẩn đi. */
.gt-crumb { display: none; }

@media (max-width: 980px) {
  .gt-layout { grid-template-columns: minmax(0, 1fr); max-width: var(--container-text); }

  /* Mobile: KHÔNG nhân bản nav (trước đây render 2 lần trong DOM, xuất ra
     ~50 link trùng mỗi bài Chương IV). Chỉ đổi chỗ đúng một khối DOM:
     bài viết lên trước, mục lục giáo trình xuống dưới dạng "học tiếp". */
  .gt-layout > .article { order: 1; }
  .gt-aside {
    order: 2;
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 2px solid var(--line);
  }

  .gt-crumb {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 24px; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--white); text-decoration: none;
    font-size: 13px; font-weight: 700; color: var(--navy-900); line-height: 1.35;
  }
  .gt-crumb .gt-crumb-n { flex: 0 0 auto; font-weight: 500; color: var(--ink-400); }
}