/* Homepage only: "Bảng đua 30 ngày" — Cuộc đua Luyện AI.
   Loaded after home-refinement.css. Scoped by #main-content / #site-header so the
   shared learning-console layer (Default.aspx, Login.aspx) stays untouched.
   Colour grammar used across the page: grey cell = chưa luyện, teal = đã luyện
   (cả tổ chức), amber = hạt nhân. Nothing is hidden by entrance animation. */

body[data-design-surface='homepage'] {
    --race-ink: #17352f;
    --race-text: #4f675f;
    --race-teal: #006b5f;
    --race-teal-deep: #005449;
    --race-teal-soft: #e1f3ed;
    --race-teal-bright: #6fd6c1;
    --race-empty: #d6e3dc;
    --race-future: #eef3f0;
    --race-amber: #efa537;
    --race-amber-ink: #8a5a00;
    --race-amber-soft: #fcefd6;
    --race-carbon: #17352f;
    --race-on-carbon: #c9d8d3;
    --race-paper: #f6f9f7;
    --race-mist: #edf4f0;
    --race-line: #d6e3dc;
    --race-line-strong: #b9cec2;
    --race-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --race-mono: 'JetBrains Mono', Consolas, 'Liberation Mono', monospace;
}

.race-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.race-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#main-content .anchor-alias::before { content: none; }

/* Header: ink CTA for organisations, teal stays with learners (Đăng nhập / Điểm danh). */
#site-header .race-nav-cta { border-color: var(--race-ink); color: #fff; background: var(--race-ink); }
#site-header .race-nav-cta:hover,
#site-header .race-nav-cta:focus-visible { color: var(--race-ink); background: var(--race-teal-soft); }
body.learner-visible .mobile-pilot { display: none !important; }

/* ---------- Shared section frame ---------- */
#main-content .race-section { position: relative; padding-block: clamp(72px, 8vw, 112px); border-top: 1px solid var(--race-line); }
#main-content .race-h2 { max-width: 21ch; margin: 0 0 20px; color: var(--race-ink); font-family: var(--race-sans); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.14; letter-spacing: -.04em; text-wrap: balance; }
#main-content .race-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
#main-content .race-head > p:last-child { max-width: 60ch; margin: 0; color: var(--race-text); font-size: 1.0625rem; line-height: 1.7; }
#main-content .race-head--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 20px 56px; max-width: none; align-items: end; }
#main-content .race-head--split .race-h2 { margin-bottom: 0; }
#main-content .race-note { margin: 0; color: var(--race-text); font-size: .8125rem; line-height: 1.6; }
#main-content .race-badge { flex: none; padding: 4px 8px; border-radius: 4px; color: var(--race-teal-deep); background: var(--race-mist); font-family: var(--race-mono); font-size: .6875rem; line-height: 1.4; white-space: nowrap; }
#main-content .race-avatar { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--race-teal-deep); background: var(--race-teal-soft); font-family: var(--race-sans); font-size: .6875rem; font-weight: 700; letter-spacing: 0; }
#main-content .is-core .race-avatar { color: var(--race-ink); background: var(--race-amber); }

/* ---------- 1. Hero ---------- */
#main-content .race-hero { position: relative; padding-top: clamp(40px, 5vw, 72px); background: radial-gradient(58% 64% at 80% 40%, rgba(0, 107, 95, .11), transparent 72%), var(--race-paper); }
#main-content .race-hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-bottom: clamp(80px, 7vw, 104px); }
#main-content .race-hero .eyebrow { margin-bottom: 18px; }
#main-content .race-hero h1 { max-width: 15ch; margin: 0 0 22px; color: var(--race-ink); font-family: var(--race-sans); font-size: clamp(2.5rem, 4.3vw, 3.85rem); font-weight: 700; line-height: 1.12; letter-spacing: -.05em; text-wrap: balance; }
#main-content .race-hero__days { color: var(--race-teal); white-space: nowrap; }
#main-content .race-hero__lead { max-width: 34em; margin: 0 0 18px; color: var(--race-text); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.7; }
#main-content .race-beat { display: flex; flex-wrap: wrap; gap: 6px 18px; max-width: none; margin: 0 0 28px; color: var(--race-ink); font-size: .9375rem; font-weight: 600; }
#main-content .race-beat span { display: inline-flex; align-items: center; gap: 8px; }
#main-content .race-beat span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--race-teal); }
#main-content .race-beat .is-race::before { background: var(--race-amber); }
#main-content .race-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
#main-content .race-hero__actions .button { min-height: 52px; padding: 12px 22px; font-size: .9375rem; }

#main-content .race-dock { max-width: 600px; padding: 16px 18px 18px; border: 1px solid var(--race-line-strong); border-radius: 14px; background: #fff; }
#main-content .race-dock__title { max-width: none; margin: 0 0 12px; color: var(--race-text); font-size: .875rem; line-height: 1.5; }
#main-content .race-dock__title strong { color: var(--race-ink); }
#main-content .race-dock__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
#main-content .race-dock__links a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; color: var(--race-teal-deep); font-size: .875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#main-content .race-dock__links a:hover { color: var(--race-ink); }
#main-content .race-dock__links .race-dock__primary { margin-right: 2px; padding: 8px 16px; border: 1px solid var(--race-teal); border-radius: 999px; color: #fff; background: var(--race-teal); text-decoration: none; }
#main-content .race-dock__links .race-dock__primary:hover { border-color: var(--race-teal-deep); color: #fff; background: var(--race-teal-deep); }
#main-content .race-dock__links svg { width: 16px; height: 16px; }

/* Signature: bảng đua — người × 30 ngày */
#main-content .race-board { position: relative; margin: 0; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--race-line-strong); border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgba(23, 53, 47, .04), 0 34px 64px -36px rgba(0, 84, 73, .5); }
#main-content .race-board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
#main-content .race-board__event { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: none; margin: 0; color: var(--race-ink); font-size: .875rem; line-height: 1.35; }
#main-content .race-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--race-teal); box-shadow: 0 0 0 4px rgba(0, 107, 95, .15); }
#main-content .race-board__day { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: end; padding-bottom: 16px; border-bottom: 1px solid var(--race-line); }
#main-content .race-board__count { display: flex; align-items: baseline; gap: 6px; margin: 0; }
#main-content .race-board__count b { color: var(--race-ink); font-size: clamp(2.6rem, 4vw, 3.3rem); font-weight: 700; line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
#main-content .race-board__count span { color: var(--race-text); font-family: var(--race-mono); font-size: .75rem; white-space: nowrap; }
#main-content .race-board__track { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
#main-content .race-board__track li { height: 10px; border-radius: 2px; background: var(--race-future); }
#main-content .race-board__track .is-past,
#main-content .race-board__track .is-today { background: var(--race-teal); }
#main-content .race-board__track .is-today { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--race-teal); }
#main-content .race-board__track-legend { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); max-width: none; margin: 7px 0 0; color: var(--race-text); font-family: var(--race-mono); font-size: .625rem; line-height: 1.2; white-space: nowrap; }
#main-content .race-board__track-legend span:nth-child(1) { grid-column: 1 / span 8; }
#main-content .race-board__track-legend span:nth-child(2) { grid-column: 14 / span 9; color: var(--race-teal-deep); font-weight: 600; text-align: center; }
#main-content .race-board__track-legend span:nth-child(3) { grid-column: 23 / -1; text-align: right; }
#main-content .race-board__table { padding-top: 14px; }
#main-content .race-board__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; max-width: none; margin: 0 0 10px; color: var(--race-text); font-family: var(--race-mono); font-size: .6875rem; line-height: 1.4; }
#main-content .race-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#main-content .race-legend i { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 2px; background: var(--race-empty); }
#main-content .race-legend i.y { background: var(--race-teal); }
#main-content .race-legend i.c { background: var(--race-amber); }
#main-content .race-board__rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
#main-content .race-board__mobile-hint { display: none; }
#main-content .race-board__row { display: grid; grid-template-columns: 14px minmax(0, 148px) minmax(0, 1fr) 36px; gap: 10px; align-items: center; max-width: none; padding: 5px 8px 5px 4px; border-radius: 8px; }
#main-content .race-board__row.is-core { background: var(--race-amber-soft); }
#main-content .race-board__rank { color: var(--race-text); font-family: var(--race-mono); font-size: .75rem; text-align: right; }
#main-content .race-board__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
#main-content .race-board__name { display: grid; min-width: 0; color: var(--race-ink); font-size: .8125rem; font-weight: 600; line-height: 1.25; white-space: nowrap; }
#main-content .race-board__name small { overflow: hidden; color: var(--race-text); font-size: .6875rem; font-weight: 400; text-overflow: ellipsis; }
#main-content .race-board__cells { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
#main-content .race-board__cells i { aspect-ratio: 1; border-radius: 2px; background: var(--race-empty); }
#main-content .race-board__cells i.y { background: var(--race-teal); }
#main-content .race-board__row.is-core .race-board__cells i.y { background: var(--race-amber); }
#main-content .race-board__cells i.f { background: var(--race-future); }
#main-content .race-board__cells i.t { outline: 1.5px solid var(--race-ink); outline-offset: 1px; }
#main-content .race-board__streak { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--race-ink); font-family: var(--race-mono); font-size: .75rem; font-weight: 600; }
#main-content .race-board__streak svg { width: 12px; height: 12px; color: var(--race-teal); }
#main-content .race-board__row.is-core .race-board__streak svg { color: var(--race-amber-ink); }
#main-content .race-board__more { max-width: none; margin: 8px 0 0; padding-left: 28px; color: var(--race-text); font-family: var(--race-mono); font-size: .6875rem; }
#main-content .race-board__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--race-line); }
#main-content .race-board__stats dt { color: var(--race-text); font-family: var(--race-mono); font-size: .625rem; line-height: 1.35; }
#main-content .race-board__stats dd { margin: 3px 0 0; color: var(--race-ink); font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#main-content .race-board__stats small { color: var(--race-text); font-size: .75rem; font-weight: 500; }
#main-content .race-chat { position: relative; width: min(320px, 100%); margin: 18px 0 -52px -44px; padding: 14px 16px 13px; border: 1px solid var(--race-line-strong); border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 24px 48px -26px rgba(23, 53, 47, .55); }
#main-content .race-chat__label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--race-teal-deep); font-family: var(--race-mono); font-size: .6875rem; }
#main-content .race-chat__label svg { width: 14px; height: 14px; color: var(--race-teal); }
#main-content .race-chat__q { margin: 0 0 10px; color: var(--race-ink); font-size: .875rem; font-weight: 500; line-height: 1.5; }
#main-content .race-chat__score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; color: var(--race-text); font-size: .75rem; }
#main-content .race-chat__score b { padding: 2px 8px; border-radius: 999px; color: var(--race-teal-deep); background: var(--race-teal-soft); font-family: var(--race-mono); }

#main-content .race-proof { border-top: 1px solid var(--race-line); background: #fff; }
#main-content .race-proof__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px, 2.4vw, 32px); padding-block: 20px; }
#main-content .race-proof__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--race-teal-deep); font-family: var(--race-mono); font-size: .75rem; font-weight: 600; }
#main-content .race-proof__tag::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--race-teal); }
#main-content .race-proof__fig { display: flex; align-items: baseline; gap: 10px; margin: 0; }
#main-content .race-proof__fig b { color: var(--race-ink); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
#main-content .race-proof__fig span { color: var(--race-text); font-size: .875rem; line-height: 1.4; }
#main-content .race-proof .text-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; }

/* ---------- 1b. Ba ích lợi ---------- */
#main-content .race-gains { background: var(--race-mist); }
#main-content .race-gains__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
#main-content .race-gain { display: flex; flex-direction: column; max-width: none; padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--race-line); border-radius: 18px; background: #fff; }
#main-content .race-gain.is-core { border-color: rgba(239, 165, 55, .7); background: linear-gradient(180deg, var(--race-amber-soft), #fff 58%); }
#main-content .race-gain__viz { display: flex; align-items: center; height: 44px; margin-bottom: 22px; }
#main-content .race-gain__viz--habit { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; align-content: center; }
#main-content .race-gain__viz--habit i { aspect-ratio: 1; border-radius: 2px; background: var(--race-teal); }
#main-content .race-gain__viz--learn { gap: 10px; }
#main-content .race-gain__bubble { display: grid; flex: none; place-items: center; width: 40px; height: 34px; border-radius: 12px 12px 12px 3px; color: #fff; background: var(--race-teal); font-weight: 700; }
#main-content .race-gain__lines { display: grid; flex: 1; gap: 6px; }
#main-content .race-gain__lines i { height: 6px; border-radius: 3px; background: var(--race-empty); }
#main-content .race-gain__lines i:nth-child(2) { width: 82%; }
#main-content .race-gain__lines i:nth-child(3) { width: 58%; }
#main-content .race-gain__viz--core { gap: 7px; }
#main-content .race-gain__viz--core i { flex: 1; max-width: 22px; aspect-ratio: 1; border-radius: 50%; background: var(--race-teal); }
#main-content .race-gain__viz--core i.c { background: var(--race-amber); box-shadow: 0 0 0 3px rgba(239, 165, 55, .3); }
#main-content .race-gain__who { margin: 0 0 8px; color: var(--race-teal-deep); font-family: var(--race-mono); font-size: .75rem; font-weight: 600; }
#main-content .race-gain.is-core .race-gain__who { color: var(--race-amber-ink); }
#main-content .race-gain h3 { margin: 0 0 12px; color: var(--race-ink); font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.3; letter-spacing: -.025em; }
#main-content .race-gain p:not(.race-gain__who) { margin: 0; color: var(--race-text); font-size: .9375rem; line-height: 1.65; }
#main-content .race-gain .text-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: auto; padding-top: 12px; }

/* ---------- 2. Cách hoạt động ---------- */
#main-content .race-how { background: #fff; }
#main-content .race-span { position: relative; height: 0; max-width: none; margin: 14px 0 30px; border-top: 2px solid var(--race-teal); }
#main-content .race-span::before,
#main-content .race-span::after { content: ""; position: absolute; top: -8px; width: 2px; height: 14px; background: var(--race-teal); }
#main-content .race-span::before { left: 0; }
#main-content .race-span::after { right: 0; }
#main-content .race-span span { position: absolute; top: -11px; left: 50%; padding: 0 12px; color: var(--race-teal-deep); background: #fff; font-family: var(--race-mono); font-size: .75rem; line-height: 20px; white-space: nowrap; transform: translateX(-50%); }
#main-content .race-day { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--race-line); border-radius: 16px; background: var(--race-line); list-style: none; }
#main-content .race-day__step { position: relative; max-width: none; padding: 26px 24px 28px; background: #fff; }
#main-content .race-day__n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 18px; border-radius: 6px; color: #fff; background: var(--race-teal); font-family: var(--race-mono); font-size: .8125rem; font-weight: 700; }
#main-content .race-day__step h3 { margin: 0 0 8px; color: var(--race-ink); font-size: 1.125rem; line-height: 1.3; letter-spacing: -.02em; }
#main-content .race-day__step p { margin: 0; color: var(--race-text); font-size: .9375rem; line-height: 1.65; }
#main-content .race-day__fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px !important; }
#main-content .race-day__fields span { padding: 3px 9px; border-radius: 999px; color: var(--race-teal-deep); background: var(--race-mist); font-size: .75rem; font-weight: 500; line-height: 1.5; }
#main-content .race-day__fields span:last-child { border: 1px dashed var(--race-line-strong); background: #fff; }
#main-content .race-rail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 12px; padding: 16px 20px; border: 1px dashed rgba(0, 107, 95, .45); border-radius: 14px; background: linear-gradient(90deg, rgba(0, 107, 95, .08), rgba(0, 107, 95, .02)); }
#main-content .race-rail .race-rail__n { margin: 0; background: var(--race-ink); }
#main-content .race-rail p { max-width: none; margin: 0; color: var(--race-text); font-size: .9375rem; line-height: 1.6; }
#main-content .race-rail strong { color: var(--race-ink); }
#main-content .race-rail__tag { color: var(--race-teal-deep); font-family: var(--race-mono); font-size: .75rem; white-space: nowrap; }
#main-content .race-why { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--race-line); }
#main-content .race-why__big { margin: 0; color: var(--race-ink); font-size: clamp(5rem, 11vw, 8.5rem); font-weight: 700; line-height: .95; letter-spacing: -.05em; }
#main-content .race-why__big span { color: var(--race-teal); font-size: .5em; letter-spacing: 0; }
#main-content .race-why__bar { position: relative; height: 12px; max-width: 420px; margin: 20px 0 10px; overflow: hidden; border-radius: 999px; background: var(--race-mist); box-shadow: inset 0 0 0 1px var(--race-line); }
#main-content .race-why__bar span { position: absolute; inset: 0 auto 0 0; width: 1.04%; min-width: 5px; background: var(--race-teal); }
#main-content .race-why__cap { margin: 0; color: var(--race-text); font-family: var(--race-mono); font-size: .75rem; }
#main-content .race-why__copy h3 { margin: 0 0 12px; color: var(--race-ink); font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.3; }
#main-content .race-why__copy p:not(.race-note) { margin: 0 0 12px; color: var(--race-text); font-size: 1rem; line-height: 1.7; }

/* ---------- 3. Dữ liệu (carbon) ---------- */
#main-content .race-data,
#main-content .race-lab { border-top-color: var(--race-carbon); color: var(--race-on-carbon); background: var(--race-carbon); }
#main-content .race-data .kicker,
#main-content .race-lab .kicker { color: var(--race-teal-bright); }
#main-content .race-data .race-h2,
#main-content .race-lab .race-h2 { color: #fff; }
#main-content .race-data__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
#main-content .race-data__copy > p { margin: 0; color: var(--race-on-carbon); font-size: 1.0625rem; line-height: 1.7; }
#main-content .race-metrics { display: grid; margin: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
#main-content .race-metrics div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
#main-content .race-metrics dt { padding-top: 3px; color: var(--race-teal-bright); font-family: var(--race-mono); font-size: .75rem; }
#main-content .race-metrics dd { margin: 0; color: #fff; font-size: .9375rem; line-height: 1.55; }
#main-content .race-data__copy > .race-data__punch { padding-left: 16px; border-left: 3px solid var(--race-teal-bright); color: #fff; font-size: 1.0625rem; font-weight: 600; line-height: 1.6; }

#main-content .race-ranking { padding: clamp(16px, 2vw, 24px); border-radius: 20px; color: var(--race-ink); background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
#main-content .race-ranking__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#main-content .race-ranking__head p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
#main-content .race-ranking__head strong { color: var(--race-ink); font-size: 1.0625rem; }
#main-content .race-ranking__head span { color: var(--race-text); font-family: var(--race-mono); font-size: .75rem; }
#main-content .race-ranking__switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 12px; background: var(--race-mist); }
#main-content .race-ranking__switch button { min-height: 44px; padding: 8px 6px; border: 0; border-radius: 9px; color: var(--race-text); background: transparent; font-family: var(--race-sans); font-size: .8125rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
#main-content .race-ranking__switch button:hover { color: var(--race-ink); background: rgba(255, 255, 255, .65); }
#main-content .race-ranking__switch button[aria-pressed='true'] { color: var(--race-ink); background: #fff; box-shadow: 0 1px 2px rgba(23, 53, 47, .14), 0 0 0 1px var(--race-line); }
#main-content .race-ranking__switch button:focus-visible { outline: 2px solid var(--race-teal); outline-offset: 2px; }
#main-content .race-ranking__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#main-content .race-ranking__row { position: relative; z-index: 0; display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; max-width: none; padding: 10px 14px 10px 8px; overflow: hidden; border: 1px solid var(--race-line); border-radius: 12px; background: #fff; }
#main-content .race-ranking__row::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--share, 0%); background: var(--race-teal-soft); transition: width .42s cubic-bezier(.2, .7, .2, 1); }
#main-content .race-ranking__row.is-core { border-color: rgba(239, 165, 55, .65); }
#main-content .race-ranking__row.is-core::before { background: var(--race-amber-soft); }
#main-content .race-ranking__rank { color: var(--race-ink); font-family: var(--race-mono); font-size: 1rem; font-weight: 700; text-align: center; }
#main-content .race-ranking .race-avatar { width: 36px; height: 36px; font-size: .75rem; }
#main-content .race-ranking__name { display: grid; min-width: 0; color: var(--race-ink); font-size: .9375rem; font-weight: 600; line-height: 1.3; }
#main-content .race-ranking__name small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--race-text); font-size: .75rem; font-weight: 400; }
#main-content .race-ranking__name em { padding: 1px 7px; border-radius: 999px; color: var(--race-ink); background: var(--race-amber); font-size: .6875rem; font-style: normal; font-weight: 700; }
#main-content .race-ranking__value { color: var(--race-ink); font-family: var(--race-mono); font-size: .875rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#main-content .race-ranking__note { display: flex; align-items: flex-start; gap: 10px; max-width: none; margin: 14px 0 0; color: var(--race-text); font-size: .8125rem; line-height: 1.55; }
#main-content .race-ranking__note i { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 2px; background: var(--race-amber); }

/* ---------- 3b. Cho lãnh đạo ---------- */
#main-content .race-report { background: var(--race-mist); }
#main-content .race-report__grid { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
#main-content .race-report__lead { margin: 0 0 18px; color: var(--race-ink); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; }
#main-content .race-report__lead strong { color: var(--race-teal-deep); }
#main-content .race-sheet { position: relative; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--race-line-strong); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -36px rgba(0, 84, 73, .45); }
#main-content .race-sheet::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; z-index: -1; border: 1px solid var(--race-line-strong); border-radius: 16px; background: #f9fbfa; }
#main-content .race-sheet__head { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px solid var(--race-ink); }
#main-content .race-sheet__head p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; max-width: none; margin: 0; }
#main-content .race-sheet__head strong { color: var(--race-ink); font-size: 1.125rem; }
#main-content .race-sheet__head span { color: var(--race-text); font-family: var(--race-mono); font-size: .75rem; }
#main-content .race-sheet__list { margin: 0; padding: 0; list-style: none; }
#main-content .race-sheet__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; max-width: none; padding: 12px 0; border-bottom: 1px solid var(--race-line); }
#main-content .race-sheet__list li:last-child { border-bottom: 0; }
#main-content .race-sheet__list svg { width: 22px; height: 22px; margin-top: 1px; padding: 3px; border-radius: 50%; color: var(--race-teal-deep); background: var(--race-teal-soft); }
#main-content .race-sheet__list span { display: grid; gap: 2px; }
#main-content .race-sheet__list strong { color: var(--race-ink); font-size: .9375rem; line-height: 1.4; }
#main-content .race-sheet__list small { color: var(--race-text); font-size: .8125rem; line-height: 1.5; }
#main-content .race-sheet__list li.is-core { margin-inline: -12px; padding-inline: 12px; border-bottom-color: transparent; border-radius: 10px; background: var(--race-amber-soft); }
#main-content .race-sheet__list li.is-core + li.is-core { margin-top: 4px; }
#main-content .race-sheet__list li.is-core svg { color: var(--race-ink); background: var(--race-amber); }

/* ---------- 4. 100% / 10% ---------- */
#main-content .race-core { background: #fff; }
#main-content .race-core__head { margin-bottom: clamp(36px, 5vw, 64px); }
#main-content .race-core__title { max-width: none; margin: 0; color: var(--race-ink); font-family: var(--race-sans); font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -.05em; }
#main-content .race-core__title span { display: block; }
#main-content .race-core__title .is-all { color: var(--race-teal); }
#main-content .race-core__title .is-core { display: inline; background: linear-gradient(transparent 64%, rgba(239, 165, 55, .5) 64%, rgba(239, 165, 55, .5) 92%, transparent 92%); }
#main-content .race-core__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
#main-content .race-core__intro { max-width: 46ch; margin: 0 0 24px; color: var(--race-text); font-size: 1.0625rem; line-height: 1.7; }
#main-content .race-split { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
#main-content .race-split li { display: grid; gap: 4px; max-width: none; padding: 16px 18px 16px 20px; border-left: 4px solid var(--race-teal); border-radius: 4px 12px 12px 4px; background: var(--race-teal-soft); }
#main-content .race-split li.is-core { border-left-color: var(--race-amber); background: var(--race-amber-soft); }
#main-content .race-split strong { color: var(--race-ink); font-size: 1.125rem; }
#main-content .race-split span { color: var(--race-text); font-size: .9375rem; line-height: 1.6; }
#main-content .race-quote { margin: 0; padding: 18px 24px 22px; border-radius: 14px; color: var(--race-ink); background: var(--race-teal-soft); font-size: 1.0625rem; font-weight: 600; line-height: 1.55; }
#main-content .race-quote::before { content: "“"; display: block; height: 30px; color: var(--race-teal); font-size: 3rem; line-height: 1; }
#main-content .race-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(7px, 1vw, 10px); max-width: 360px; margin: 6px 0 24px; }
#main-content .race-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--race-teal); }
#main-content .race-dots i.c { background: var(--race-amber); box-shadow: 0 0 0 3px rgba(239, 165, 55, .28); }
#main-content .race-core__example { margin: 0 0 20px; color: var(--race-ink); font-size: 1rem; line-height: 1.65; }
#main-content .race-core__signals-title { margin: 0 0 10px; color: var(--race-text); font-size: .875rem; font-weight: 600; }
#main-content .race-core__signals { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
#main-content .race-core__signals li { padding: 6px 12px; border: 1px solid rgba(239, 165, 55, .6); border-radius: 999px; color: var(--race-ink); background: var(--race-amber-soft); font-size: .8125rem; line-height: 1.4; }

/* ---------- 5. AI Lab (carbon) ---------- */
#main-content .race-lab__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
#main-content .race-lab__copy > p { margin: 0 0 16px; color: var(--race-on-carbon); font-size: 1.0625rem; line-height: 1.7; }
#main-content .race-lab__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 0 0 28px; padding: 0; list-style: none; }
#main-content .race-lab__list li { position: relative; padding-left: 18px; color: #fff; font-size: .9375rem; line-height: 1.5; }
#main-content .race-lab__list li::before { content: ""; position: absolute; top: .5em; left: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--race-amber); }
#main-content .race-lab__copy > .race-lab__punch { margin: 0; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; color: var(--race-on-carbon); background: rgba(255, 255, 255, .06); font-size: 1rem; line-height: 1.65; }
#main-content .race-lab__punch strong { display: block; color: #fff; }
#main-content .race-funnel { display: grid; justify-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
#main-content .race-funnel__step { position: relative; display: grid; justify-items: center; gap: 2px; width: var(--w, 100%); min-width: min(100%, 15.5rem); max-width: none; padding: 14px 18px; border-radius: 12px; text-align: center; }
#main-content .race-funnel__step + .race-funnel__step::before { content: ""; position: absolute; top: -20px; left: 50%; width: 2px; height: 16px; background: rgba(255, 255, 255, .35); transform: translateX(-50%); }
#main-content .race-funnel__step strong { color: inherit; font-size: .9375rem; line-height: 1.35; }
#main-content .race-funnel__step span { font-family: var(--race-mono); font-size: .6875rem; line-height: 1.4; opacity: .85; }
#main-content .race-funnel .is-all { --w: 100%; border: 1px dashed rgba(255, 255, 255, .45); color: #fff; }
#main-content .race-funnel .is-race { --w: 100%; color: #fff; background: var(--race-teal); }
#main-content .race-funnel .is-data { --w: 74%; border: 1px solid var(--race-teal-bright); color: #fff; background: rgba(111, 214, 193, .12); }
#main-content .race-funnel .is-core { --w: 44%; color: var(--race-ink); background: var(--race-amber); }
#main-content .race-funnel .is-lab { --w: 44%; color: var(--race-ink); background: var(--race-amber-soft); }
#main-content .race-funnel .is-apply { --w: 90%; color: var(--race-ink); background: #fff; }

/* ---------- 6. Lĩnh vực + Đan Phượng ---------- */
#main-content .race-fields { background: var(--race-paper); }
#main-content .race-fields__constant { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; margin: 0 0 20px; }
#main-content .race-fields__constant span { padding: 7px 12px; border-radius: 8px; color: #fff; background: var(--race-ink); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
#main-content .race-fields__constant .race-fields__constant-label { padding: 0 6px 0 0; color: var(--race-text); background: none; font-family: var(--race-mono); font-size: .75rem; font-weight: 500; }
#main-content .race-fields__list { margin: 0; padding: 0; border-top: 1px solid var(--race-line-strong); list-style: none; }
#main-content .race-fields__list li { display: grid; grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; max-width: none; padding: 16px 10px; border-bottom: 1px solid var(--race-line); transition: background-color .18s ease; }
#main-content .race-fields__list li:hover { background: #fff; }
#main-content .race-fields__sector { color: var(--race-teal-deep); font-family: var(--race-mono); font-size: .75rem; font-weight: 600; }
#main-content .race-fields__name { color: var(--race-ink); font-size: clamp(1.0625rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }
#main-content .race-fields__cta { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 15px; border: 1px solid var(--race-line-strong); border-radius: 999px; color: var(--race-ink); background: #fff; font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
#main-content .race-fields__cta:hover { border-color: var(--race-teal); color: #fff; background: var(--race-teal); }

#main-content .race-case { background: #fff; }
#main-content .race-case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
#main-content .race-case__copy > p { max-width: 52ch; margin: 0 0 14px; color: var(--race-text); font-size: 1.0625rem; line-height: 1.7; }
#main-content .race-case__copy .button { min-height: 48px; margin-top: 10px; }
#main-content .race-case__figures { display: grid; gap: 16px; margin: 0; }
#main-content .race-case__figures div { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--race-line); border-radius: 18px; background: var(--race-mist); }
#main-content .race-case__figures div + div { border-color: var(--race-carbon); background: var(--race-carbon); }
#main-content .race-case__figures dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; color: var(--race-ink); font-size: 1.125rem; font-weight: 600; }
#main-content .race-case__figures b { color: var(--race-teal-deep); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
#main-content .race-case__figures dd { margin: 0; color: var(--race-text); font-size: .9375rem; line-height: 1.6; }
#main-content .race-case__figures div + div dt { color: #fff; }
#main-content .race-case__figures div + div b { color: var(--race-teal-bright); }
#main-content .race-case__figures div + div dd { color: var(--race-on-carbon); }

#main-content .faq-intro .text-link { display: inline; font-size: inherit; }

/* ---------- 7. Liên hệ (reused) + dải học viên ---------- */
#main-content .contact-section h2 { max-width: 16ch; color: #fff; }
#main-content .contact-section .kicker { color: var(--race-teal-bright); }
#main-content .contact-copy .race-contact__sub { margin: 0 0 28px; color: #fff; font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
#main-content .contact-copy .race-contact__gains-title { margin: 0 0 12px; color: var(--race-teal-bright); font-family: var(--race-mono); font-size: .75rem; }
#main-content .race-contact__gains { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
#main-content .race-contact__gains li { position: relative; max-width: none; padding-left: 22px; color: #fff; font-size: 1rem; font-weight: 500; line-height: 1.5; }
#main-content .race-contact__gains li::before { content: ""; position: absolute; top: .45em; left: 0; width: 10px; height: 10px; border-radius: 2px; background: var(--race-teal-bright); }
#main-content .race-contact__gains li.is-core::before { background: var(--race-amber); }
#main-content .race-contact__card { padding: clamp(24px, 3.4vw, 40px); border-radius: 18px; color: var(--race-ink); background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
#main-content .race-contact__channel { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--race-teal-deep); font-family: var(--race-mono); font-size: .75rem; font-weight: 600; }
#main-content .race-contact__channel svg { width: 22px; height: 22px; color: var(--race-teal); }
#main-content .race-contact__card h3 { margin: 0 0 10px; color: var(--race-ink); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.25; letter-spacing: -.03em; }
#main-content .race-contact__card > p:not(.race-contact__channel):not(.race-note) { margin: 0 0 12px; color: var(--race-text); font-size: .9375rem; }
#main-content .race-contact__brief { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
#main-content .race-contact__brief li { position: relative; max-width: none; padding: 10px 14px 10px 36px; border-radius: 10px; color: var(--race-ink); background: var(--race-mist); font-size: .9375rem; line-height: 1.4; }
#main-content .race-contact__brief li::before { content: ""; position: absolute; top: 50%; left: 14px; width: 10px; height: 10px; border-radius: 2px; background: var(--race-teal); transform: translateY(-50%); }
#main-content .race-contact__actions { display: grid; gap: 10px; margin-bottom: 12px; }
#main-content .race-contact__actions .button { width: 100%; min-height: 52px; font-size: .9375rem; }

#main-content .race-learner { position: relative; padding-block: clamp(40px, 5vw, 56px); border-top: 1px solid rgba(0, 107, 95, .2); background: var(--race-teal-soft); }
#main-content .race-learner__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px 48px; align-items: center; }
#main-content .race-learner .kicker { margin-bottom: 10px; }
#main-content .race-learner h2 { margin: 0 0 4px; color: var(--race-ink); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
#main-content .race-learner__copy p:last-child { margin: 0; color: var(--race-text); }
#main-content .race-learner__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#main-content .race-learner__links a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 10px 12px; border: 1px solid rgba(0, 107, 95, .35); border-radius: 12px; color: var(--race-ink); background: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; }
#main-content .race-learner__links a:hover { border-color: var(--race-teal); }
#main-content .race-learner__links a.is-primary { border-color: var(--race-teal); color: #fff; background: var(--race-teal); }
#main-content .race-learner__links a.is-primary:hover { border-color: var(--race-teal-deep); background: var(--race-teal-deep); }
#main-content .race-learner__links svg { width: 16px; height: 16px; }
#main-content .race-learner__more { display: flex; flex-wrap: wrap; gap: 4px 22px; grid-column: 2; max-width: none; margin: 0; font-size: .875rem; }
#main-content .race-learner__more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--race-teal-deep); font-weight: 600; text-underline-offset: 3px; }

/* Footer kept from the previous page; lift the low-contrast text it inherited. */
body[data-design-system='learning-console'][data-design-surface='homepage'] .site-footer { padding-top: clamp(40px, 5vw, 56px); }
body[data-design-surface='homepage'] .site-footer .footer-brand p,
body[data-design-surface='homepage'] .site-footer .individual-utility p { color: var(--race-text); }
body[data-design-surface='homepage'] .site-footer .individual-utility strong { color: var(--race-ink); }
body[data-design-surface='homepage'] .site-footer .individual-utility a { color: var(--race-teal-deep); }

/* ---------- Focus ---------- */
#main-content :is(.race-dock__links a, .race-fields__cta, .race-learner__links a, .race-learner__more a, .race-proof .text-link):focus-visible { outline: 3px solid var(--race-teal); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
    #main-content .race-chat { margin-left: -24px; }
}

@media (max-width: 980px) {
    #main-content .race-hero__grid,
    #main-content .race-data__grid,
    #main-content .race-report__grid,
    #main-content .race-core__grid,
    #main-content .race-lab__grid,
    #main-content .race-case__grid,
    #main-content .race-why,
    #main-content .race-head--split,
    #main-content .race-learner__inner { grid-template-columns: minmax(0, 1fr); }
    #main-content .race-hero__grid { padding-bottom: 56px; }
    #main-content .race-board { width: 100%; max-width: 680px; }
    #main-content .race-chat { width: min(360px, 100%); margin: 16px 0 0; }
    #main-content .race-day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #main-content .race-gains__list { grid-template-columns: minmax(0, 1fr); }
    #main-content .race-gain__viz--habit { max-width: 420px; }
    #main-content .race-sheet { margin-right: 12px; }
    #main-content .race-learner__more { grid-column: auto; }
    #main-content .race-proof .text-link { margin-left: 0; }
}

@media (max-width: 720px) {
    #main-content .race-section { padding-block: 52px; }
    #main-content .race-hero { padding-top: 32px; }
    #main-content .race-hero h1 { font-size: clamp(2.15rem, 9.4vw, 2.75rem); }
    #main-content .race-hero__lead { font-size: 1rem; }
    #main-content .race-beat { gap: 6px 14px; margin-bottom: 24px; font-size: .875rem; }
    #main-content .race-hero__actions { display: grid; }
    #main-content .race-hero__actions .button { width: 100%; }
    #main-content .race-dock { padding: 12px 14px 8px; }
    #main-content .race-dock__title { margin-bottom: 10px; font-size: .8125rem; }
    #main-content .race-dock__title span { display: block; margin-top: 3px; color: var(--race-text); font-size: .75rem; font-weight: 400; line-height: 1.4; }
    #main-content .race-dock__links { gap: 0 16px; }
    #main-content .race-dock__links .race-dock__primary { flex: 1 1 100%; margin: 0 0 2px; }
    #main-content .race-dock__links a:not(.race-dock__primary) { font-size: .8125rem; }
    #main-content .race-board { padding: 14px; border-radius: 16px; }
    #main-content .race-board__head { align-items: flex-start; }
    #main-content .race-board__day { gap: 14px; }
    #main-content .race-board__row { grid-template-columns: 12px minmax(96px, 112px) minmax(230px, 1fr) 34px; gap: 7px; padding-inline: 2px 4px; }
    #main-content .race-board__who { gap: 6px; }
    #main-content .race-board .race-avatar { width: 22px; height: 22px; font-size: .5625rem; }
    #main-content .race-board__name { font-size: .75rem; }
    #main-content .race-board__cells { gap: 1.5px; }
    #main-content .race-board__cells i { border-radius: 1px; }
    #main-content .race-board__cells i.t { outline-width: 1px; }
    #main-content .race-board__scroller:focus-visible { outline: 2px solid var(--race-teal-deep); outline-offset: 2px; }
    #main-content .race-board__more { padding-left: 20px; }
    #main-content .race-board__stats { gap: 8px; }
    #main-content .race-board__stats dd { font-size: 1.0625rem; }
    #main-content .race-proof__inner { display: grid; gap: 8px; padding-block: 18px; }
    #main-content .race-proof__fig b { font-size: 1.25rem; }
    #main-content .race-span span { font-size: .6875rem; }
    #main-content .race-day { grid-template-columns: minmax(0, 1fr); }
    #main-content .race-day__step { padding: 22px 20px; }
    #main-content .race-rail { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
    #main-content .race-rail__tag { grid-column: 2; }
    #main-content .race-metrics div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    #main-content .race-ranking__switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #main-content .race-ranking__row { grid-template-columns: 20px 32px minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px 9px 6px; }
    #main-content .race-ranking .race-avatar { width: 32px; height: 32px; }
    #main-content .race-ranking__value { font-size: .8125rem; }
    #main-content .race-lab__list { grid-template-columns: minmax(0, 1fr); }
    #main-content .race-fields__list li { grid-template-columns: minmax(0, 1fr); padding: 16px 4px; }
    #main-content .race-fields__cta { justify-self: start; }
    #main-content .race-learner__links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    #main-content .race-board__mobile-hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 7px; color: var(--race-text); font-family: var(--race-mono); font-size: .625rem; line-height: 1.4; }
    #main-content .race-board__mobile-hint span { color: var(--race-teal-deep); font-size: .875rem; }
    #main-content .race-board__scroller { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--race-teal) var(--race-empty); border-radius: 9px; }
    #main-content .race-board__rows { min-width: 420px; }
    #main-content .race-board__rank { position: sticky; left: 0; z-index: 2; background: #fff; }
    #main-content .race-board__who { position: sticky; left: 19px; z-index: 1; background: #fff; box-shadow: 8px 0 10px -12px var(--race-ink); }
    #main-content .race-board__row.is-core :is(.race-board__rank, .race-board__who) { background: var(--race-amber-soft); }
    #main-content .race-board__cells { grid-template-columns: repeat(30, minmax(6px, 1fr)); }
}

@media (max-width: 380px) {
    #main-content .race-board__row { grid-template-columns: 12px minmax(96px, 112px) minmax(230px, 1fr) 34px; gap: 6px; }
    #main-content .race-board__who { left: 18px; }
    #main-content .race-board__stats dt { font-size: .5625rem; }
}

@media (prefers-reduced-motion: reduce) {
    #main-content .race-ranking__row::before,
    #main-content .race-fields__list li { transition: none; }
}