/* VSES 2027 v5 — bổ sung cho v4.css: trang chủ bản Sắp diễn ra + các trang đợt 1.
   Giữ nguyên token, chữ, nút của v4. Thêm: nút ngôn ngữ, menu điện thoại, khối mở đầu theo chủ đề,
   ba câu hỏi, sáu mảng nội dung, danh sách đại biểu, dải số liệu, thẻ kỳ, ấn phẩm, mẫu, bảng, trang kỳ. */

/* ---- chỗ chờ chốt: [ ... ] trong nội dung ---- */
.tbd { text-decoration: underline dashed 1px; text-underline-offset: .22em; text-decoration-color: currentColor; opacity: .8; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 80; background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: 6px; font-size: 14px; }
.skip:focus { top: 12px; }

/* ---- Header: nút ngôn ngữ, menu điện thoại ---- */
.hdr__acts { align-items: center; }
.lang { display: inline-flex; border: 1px solid var(--rule-d); border-radius: 6px; overflow: hidden; height: 36px; }
.lang a { display: grid; place-items: center; min-width: 40px; padding: 0 10px; font: 600 12px/1 var(--sans); letter-spacing: .06em; color: var(--stone); }
.lang a[aria-current] { background: rgba(242, 235, 221, .1); color: var(--cream); pointer-events: none; }
.lang a:not([aria-current]):hover { color: var(--cream); }
.hdr__nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--rule-d); border-radius: 6px; background: transparent; color: var(--cream); cursor: pointer; position: relative; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); }
.menu-btn i:first-of-type { top: 17px; } .menu-btn i:last-of-type { top: 25px; }
.menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 25; background: var(--ink); padding: 96px var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between; }
.mnav[hidden] { display: none; }
.mnav nav { display: grid; }
.mnav nav a { font: 300 clamp(34px, 9vw, 48px)/1.1 var(--serif); letter-spacing: -.03em; padding: 12px 0; border-bottom: 1px solid var(--rule-d); color: var(--cream); }
.mnav__foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.menu-open { overflow: hidden; }
.menu-open .hdr { background: var(--ink); }

/* ---- Khối mở đầu bản Sắp diễn ra ---- */
.hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.badge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(242, 235, 221, .3);
  font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); background: rgba(5, 14, 44, .35); }
.hero__h { display: grid; gap: clamp(14px, 1.6vw, 22px); margin: 0; font-weight: inherit; }
.hero__name { font: 600 clamp(12px, 1vw, 14px)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.hero .hero__title { font-size: clamp(44px, 6.6vw, 118px); line-height: .98; letter-spacing: -.04em; max-width: 14.5em; }
.hero__when { margin-top: 12px; font: 400 clamp(20px, 1.8vw, 26px)/1.25 var(--serif); letter-spacing: -.01em; color: #FAF6EC; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.intro .hero .badge, .intro .hero .hero__name { opacity: 0; transform: translateY(16px); }
.intro.intro-go .hero .badge, .intro.intro-go .hero .hero__name { opacity: 1; transform: none; transition: opacity .8s var(--ease) .5s, transform 1s var(--ease) .5s; }
.intro-skip .hero .badge, .intro-skip .hero .hero__name { transition: none !important; }

/* ---- Section phụ trợ ---- */
.head--sub { margin-top: clamp(56px, 6vw, 88px); }
.label--sub { margin-top: 56px; color: var(--stone); }
.light .label--sub { color: var(--slate); }

/* hai cột: chữ + ảnh */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); margin-top: 28px; align-items: start; }
.split--top { margin-top: 0; }
.split__txt { display: grid; gap: 20px; max-width: 40em; }
.split__txt > p { font-size: 17px; line-height: 1.6; color: var(--stone); }
.split__txt .h2 { margin-bottom: 8px; }
.split__txt .btn { justify-self: start; margin-top: 8px; }
.split__close { color: var(--cream) !important; font: 400 clamp(22px, 2vw, 28px)/1.3 var(--serif) !important; letter-spacing: -.015em; }
.split__txt > .lead-lg, .lead-lg { margin-top: 16px; font: 300 clamp(22px, 2.1vw, 30px)/1.38 var(--serif); letter-spacing: -.015em; color: var(--cream); }

/* chỗ chờ ảnh: dùng hào quang làm nền, ghi rõ ảnh nào cần thay */
.ph { position: relative; margin: 0; }
.ph .aura { aspect-ratio: 4 / 3; }
.ph--tall .aura { aspect-ratio: 4 / 5; }
.ph figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 13.5px; color: var(--stone); }
.light .ph figcaption { color: var(--slate); }
.ph__tag { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 4px; border: 1px dashed currentColor; font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ph--video { margin-top: 20px; }
.ph--video .aura { position: relative; inset: auto; aspect-ratio: 16 / 7; border-radius: 4px; }
.play { position: absolute; left: 50%; top: calc(50% - 20px); width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); }
.play::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }

/* ---- Ba câu hỏi ---- */
.qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.qs li { padding: 4px clamp(20px, 2.4vw, 36px) 8px; border-left: 1px solid var(--rule-d); display: grid; gap: 48px; align-content: space-between; min-height: 240px; }
.qs li:first-child { border-left: 0; padding-left: 0; }
.qs__n { font: 500 13px/1 var(--sans); color: var(--sky); letter-spacing: .04em; }
.qs__q { font: 300 clamp(28px, 2.7vw, 42px)/1.12 var(--serif); letter-spacing: -.03em; color: #FAF6EC; text-wrap: balance; }

/* ---- Sáu mảng nội dung ---- */
.th { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--rule-l); }
.th li { padding: 24px clamp(18px, 2vw, 28px) 36px 0; border-bottom: 1px solid var(--rule-l); display: grid; grid-template-rows: auto auto 1fr; gap: 14px; }
.th li:not(:nth-child(3n + 1)) { padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid var(--rule-l); }
.th__n { font: 500 13px/1 var(--sans); color: var(--blue); }
.th__t { font: 400 clamp(24px, 2vw, 30px)/1.15 var(--serif); letter-spacing: -.02em; margin-top: 28px; }
.th__d { font-size: 15.5px; line-height: 1.55; color: var(--slate); max-width: 26em; }

/* ---- Ai nên tham dự ---- */
.who { columns: 2; column-gap: clamp(32px, 5vw, 96px); margin-top: 48px; }
.who li { break-inside: avoid; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--rule-l);
  font: 300 clamp(22px, 2vw, 30px)/1.2 var(--serif); letter-spacing: -.02em; }
.who__n { font: 500 13px/1 var(--sans); color: var(--blue); letter-spacing: 0; }

/* ---- Dải số liệu + thẻ kỳ ---- */
.strip { margin-top: 48px; }
.strip__k { font: 500 13px/1 var(--sans); color: var(--stone); }
.strip__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.strip__row b { display: block; font: 300 clamp(44px, 5.6vw, 92px)/.95 var(--serif); letter-spacing: -.045em; color: #FAF6EC; white-space: nowrap; }
.strip__row span { display: block; margin-top: 10px; font-size: 14px; color: var(--stone); }
.strip__row--3 { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: clamp(32px, 6vw, 96px); margin-top: 40px; }

.eds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(56px, 6vw, 88px); }
.ed { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; }
.aura--ed { aspect-ratio: 16 / 10; display: flex; align-items: flex-end; padding: 18px; margin-bottom: 8px; }
.aura--ed > i:nth-child(1) { width: 80%; height: 90%; left: 30%; top: 30%; background: var(--blue); }
.aura--ed > i:nth-child(2) { width: 60%; height: 70%; left: -20%; top: -20%; background: var(--sky); opacity: .45; --d: 52s; }
.aura--y2024 { --c0: #102457; } .aura--y2024 > i:nth-child(2) { background: var(--sand); opacity: .4; }
.aura--y2023 { --c0: #0B1F4A; } .aura--y2023 > i:nth-child(1) { left: -20%; background: var(--navy); }
.ed__y { position: relative; z-index: 1; font: 300 clamp(48px, 5vw, 80px)/1 var(--serif); letter-spacing: -.045em; color: #FAF6EC; }
.ed__t { font: 400 clamp(22px, 1.9vw, 28px)/1.2 var(--serif); letter-spacing: -.02em; color: #FAF6EC; text-wrap: balance; }
.ed__w { font-size: 14px; color: var(--stone); }
.ed__s { font-size: 14.5px; color: var(--cream); }
.ed .btn { justify-self: start; margin-top: 8px; }
.ed__soon { margin-top: 8px; font-size: 13.5px; color: var(--stone); height: 44px; display: flex; align-items: center; }

/* ---- Ấn phẩm: bìa minh hoạ bằng chữ cho tới khi có ảnh bìa thật ---- */
.pubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); margin-top: 56px; }
.pub { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; }
.cover { aspect-ratio: 3 / 4; width: 100%; max-width: 300px; border-radius: 4px; padding: 22px; display: grid; grid-template-rows: auto 1fr auto; margin-bottom: 14px; position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(18, 21, 28, .06), 0 24px 48px -24px rgba(18, 21, 28, .35); }
.cover::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, .2) 1px, transparent 1.4px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(160deg, transparent 40%, #000 100%); mask-image: linear-gradient(160deg, transparent 40%, #000 100%); }
.cover__k { font: 600 11px/1 var(--sans); letter-spacing: .14em; }
.cover__t { align-self: end; font: 300 clamp(34px, 3.4vw, 54px)/1 var(--serif); letter-spacing: -.035em; }
.cover__y { margin-top: 10px; font: 300 clamp(34px, 3.4vw, 54px)/1 var(--serif); letter-spacing: -.035em; opacity: .55; }
.cover--blue { background: linear-gradient(160deg, #0B3FB0, var(--blue)); color: #fff; }
.cover--paper { background: linear-gradient(160deg, #FFFFFF, #ECE7DA); color: var(--ink); }
.cover--paper::after { background-image: radial-gradient(circle, rgba(0, 101, 242, .3) 1px, transparent 1.4px); }
.cover--navy { background: linear-gradient(160deg, #0A1B45, var(--navy)); color: #fff; }
.pub__kind { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.pub__t { font: 400 clamp(22px, 1.9vw, 28px)/1.18 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.pub__d { font-size: 15px; line-height: 1.5; color: var(--slate); }
.pub .btn { justify-self: start; margin-top: 8px; }
.pub__soon { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-top: 8px; font-size: 14px; color: var(--slate); }

/* ---- Mẫu ---- */
.form { display: grid; gap: 22px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.fld { display: grid; gap: 8px; }
.fld--wide { grid-column: 1 / -1; }
.fld > span { font: 500 13px/1 var(--sans); color: rgba(250, 246, 236, .78); }
.fld input, .fld textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(242, 235, 221, .22); background: rgba(5, 14, 44, .45);
  color: #FAF6EC; font: 400 16px/1.3 var(--sans); transition: border-color .2s; }
.fld textarea { height: auto; padding: 12px 14px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--sky); }
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: #FF9A7A; }
.fld__err { font: normal 400 12.5px/1.2 var(--sans); color: #FFB59E; min-height: 0; }
.fld__err:empty { display: none; }
.ints { border: 0; margin: 0; padding: 0; }
.ints legend { font: 500 13px/1 var(--sans); color: rgba(250, 246, 236, .78); margin-bottom: 12px; padding: 0; }
.ints > div { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(242, 235, 221, .26); font-size: 14.5px; transition: background-color .2s, border-color .2s, color .2s; }
.pill span::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1px solid currentColor; opacity: .6; flex: none; }
.pill input:checked + span { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.pill input:checked + span::before { opacity: 1; background: var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%238DB7FF' stroke-width='1.8'/></svg>") center / 12px no-repeat; border-color: var(--ink); }
.pill input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.form__ok { padding: 16px 18px; border-radius: 6px; background: rgba(141, 183, 255, .14); border: 1px solid rgba(141, 183, 255, .35); color: #FAF6EC; font-size: 15px; }
.form.is-sent .form__grid, .form.is-sent .ints, .form.is-sent .form__act { display: none; }

.cta__in--form { justify-content: center; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: 0;
  padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 80px); }
.cta__title--sm { font-size: clamp(44px, 5.4vw, 92px); margin-top: 20px; }
.cta__lead { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--cream); max-width: 28em; }
.cta__in--form .form { background: rgba(5, 14, 44, .5); border: 1px solid rgba(242, 235, 221, .14); border-radius: 10px; padding: clamp(20px, 2.4vw, 32px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---- Hộp thoại tải ấn phẩm ---- */
.gate { width: min(560px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 1px solid rgba(242, 235, 221, .16); border-radius: 12px; background: var(--ink); color: var(--cream); }
.gate::backdrop { background: rgba(5, 10, 24, .72); backdrop-filter: blur(4px); }
.gate__in { padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; position: relative; }
.gate__t { font: 300 clamp(28px, 3vw, 40px)/1.1 var(--serif); letter-spacing: -.03em; padding-right: 32px; }
.gate__lead { font-size: 15px; color: var(--stone); margin-bottom: 6px; }
.gate__x { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--rule-d); background: transparent; color: var(--cream); font-size: 22px; cursor: pointer; }
.form--gate .form__grid { grid-template-columns: 1fr; }

/* ---- Liên hệ ---- */
.pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule-d); max-width: 760px; }
.pt { display: grid; gap: 6px; font-size: 15px; color: var(--cream); }
.pt__k { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin-bottom: 6px; }
.pts--col { grid-template-columns: 1fr; margin-top: 0; padding-top: 0; border-top: 0; gap: 32px; }
.pts--col .pt { padding-top: 0; }
.split--form { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); margin-top: 0; }
.split--form .form { background: var(--ink-2); border: 1px solid var(--rule-d); border-radius: 10px; padding: clamp(20px, 2.4vw, 32px); }

/* ---- Chân trang ---- */
.ftr__meta { display: grid; gap: 6px; }
.ftr__meta p:first-child { color: var(--cream); }
.ftr .pts { max-width: none; grid-template-columns: repeat(2, minmax(0, 320px)); }
.ftr__line { margin-top: 40px; font-size: 13px; color: var(--stone); position: relative; z-index: 1; }
.ftr__giant { margin-top: 24px; }

/* ---- Trang con: đầu trang ---- */
.phead { position: relative; overflow: hidden; padding: clamp(140px, 16vw, 200px) var(--gutter) clamp(48px, 6vw, 88px);
  background: radial-gradient(120% 80% at 70% 120%, rgba(0, 101, 242, .35) 0%, rgba(0, 101, 242, 0) 60%), linear-gradient(180deg, #050E2C 0%, #0A2560 100%); }
.phead::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .22) 1px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
.phead__in { position: relative; display: grid; gap: 24px; }
.phead__t { font: 300 clamp(52px, 8vw, 136px)/.96 var(--serif); letter-spacing: -.045em; color: #FAF6EC; max-width: 12em; text-wrap: balance; }
.phead__lead { max-width: 36em; font-size: 18px; line-height: 1.55; color: var(--cream); }
.phead__name { font: 600 13px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); order: -1; }
.phead__in .label { order: -2; }
.phead__when { font: 400 clamp(20px, 1.8vw, 26px)/1.25 var(--serif); color: #FAF6EC; }

.prose { display: grid; gap: 22px; max-width: 46em; }
.prose--lg p { font: 300 clamp(22px, 2.1vw, 30px)/1.38 var(--serif); letter-spacing: -.015em; color: var(--cream); }
.orgline { margin-top: clamp(48px, 5vw, 72px); padding-top: 16px; border-top: 1px solid var(--rule-d); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; font-size: 16px; color: var(--stone); }
.orgline__k { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }

/* bảng số liệu ba kỳ */
.tbl-wrap { margin-top: 48px; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { text-align: left; padding: 18px 16px 18px 0; border-top: 1px solid var(--rule-l); vertical-align: top; }
.tbl thead th { font: 300 clamp(36px, 3.6vw, 56px)/1 var(--serif); letter-spacing: -.04em; padding-bottom: 20px; border-top: 0; }
.tbl thead th:last-child { color: var(--blue); }
.tbl tbody th { font: 600 11.5px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); width: 26%; }
.tbl td { font: 400 clamp(17px, 1.4vw, 21px)/1.3 var(--serif); }

/* trang kỳ: chương trình */
.ag { margin-top: 48px; border-top: 1px solid var(--rule-d); }
.ag li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule-d); }
.ag time { font: 300 clamp(24px, 2.2vw, 32px)/1 var(--serif); letter-spacing: -.02em; color: var(--sky); font-variant-numeric: tabular-nums; }
.ag__t { font: 400 clamp(20px, 1.8vw, 26px)/1.25 var(--serif); letter-spacing: -.015em; color: #FAF6EC; }
.ag__s { margin-top: 6px; font-size: 15.5px; color: var(--stone); }
.ag--break .ag__t { font: 500 14px/1.6 var(--sans); color: var(--stone); letter-spacing: 0; }
.ag--break time { color: var(--stone); }

/* trang kỳ: 10 câu hỏi */
.tq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); margin-top: 48px; }
.tq li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--rule-l);
  font: 300 clamp(20px, 1.7vw, 25px)/1.28 var(--serif); letter-spacing: -.015em; }
.tq__n { font: 500 13px/1 var(--sans); color: var(--blue); }

.facts2__k { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.lst { display: grid; gap: 14px; }
.lst li { font-size: 15.5px; line-height: 1.55; color: var(--cream); padding-top: 14px; border-top: 1px solid var(--rule-d); }
.facts2 .note { margin-top: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.tags li { height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid var(--rule-l); border-radius: 999px; font-size: 15px; }
.logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--rule-l); border-left: 1px solid var(--rule-l); }
.logo { height: 120px; display: grid; place-items: center; border-right: 1px solid var(--rule-l); border-bottom: 1px solid var(--rule-l); font: 600 18px/1 var(--sans); letter-spacing: .02em; color: var(--slate); }
.qts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: 48px; }
.qt { margin: 0; padding-top: 20px; border-top: 1px solid var(--rule-d); }
.qt p { font: 300 clamp(28px, 2.8vw, 44px)/1.12 var(--serif); letter-spacing: -.03em; color: #FAF6EC; text-wrap: balance; }
.press { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px; font: 400 clamp(18px, 1.5vw, 22px)/1.4 var(--serif); color: var(--cream); }
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.dl { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.dl .cover { margin: 0; }
.dl > div:last-child { display: grid; gap: 18px; justify-items: start; }
.dl__d { font-size: 16px; color: var(--slate); }
.dl__back a { font-size: 14.5px; color: var(--slate); text-decoration: underline; text-underline-offset: 4px; }

/* ---- Trang chủ: ba con số kỳ 2027 ---- */
.strip--27 { margin-top: clamp(64px, 7vw, 112px); }
.strip--27 .strip__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
.strip--27 .strip__row b { font-size: clamp(64px, 8.4vw, 136px); }

/* ---- Trang chủ: nội dung dự kiến chia buổi sáng / buổi chiều ---- */
.day { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); margin-top: 56px; }
.day__h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.day__k { font: 400 clamp(26px, 2.4vw, 36px)/1 var(--serif); letter-spacing: -.02em; }
.day__who { font-size: 14px; color: var(--slate); text-align: right; }
.day .th { margin-top: 0; border-top: 0; }
.day .th--am { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.day .th--am li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
.day .th--am li:nth-child(even) { padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid var(--rule-l); }
.day .th--pm { grid-template-columns: 1fr; }
.day__half--pm { background: var(--paper-2); padding: 0 clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px); border-radius: 4px; }
.day__half--pm .day__h { padding-top: 18px; }
.day__sk { margin-top: 22px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.sectors { margin-top: 10px; counter-reset: s; }
.sectors li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; padding: 12px 0; border-top: 1px solid var(--rule-l); font: 400 clamp(18px, 1.5vw, 21px)/1.3 var(--serif); }
.sectors li::before { content: counter(s, decimal-leading-zero); font: 500 12px/1.9 var(--sans); color: var(--blue); }
.day__net { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 14.5px; color: var(--slate); }

/* ---- Trang chủ: bánh xe chữ «Ai nên tham dự» (8 nhóm) ---- */
.wheel { height: 320vh; margin-top: 0; }
.wheel__list li { font-size: clamp(30px, 3.7vw, 60px); line-height: 1.06; white-space: normal; width: max-content; max-width: min(88%, 22em); text-align: center; text-wrap: balance; padding: 4px 24px; }
.wheel__rule { opacity: .6; }

/* ---- Bỏ eyebrow: khuôn đầu mục chỉ còn đường kẻ + tiêu đề ---- */
.head__row:first-child { margin-top: 0; padding-top: 12px; }

/* ---- Khối 3. Ba con số ---- */
.nums { padding-top: clamp(64px, 7vw, 112px); }
.nums__k { font: 500 13px/1 var(--sans); color: var(--stone); }
.nums__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.nums__row > div { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--rule-d); }
.nums__row > div:first-child { padding-left: 0; border-left: 0; }
.nums__row b { display: block; font: 300 clamp(72px, 10vw, 168px)/.9 var(--serif); letter-spacing: -.05em; color: #FAF6EC; white-space: nowrap; }
.nums__row span { display: block; margin-top: 14px; font-size: 15px; color: var(--stone); max-width: 16em; }


/* ---- Khối 7. Diễn giả ---- */
.head__text--hi { color: var(--cream) !important; font: 400 clamp(19px, 1.6vw, 23px)/1.35 var(--serif); letter-spacing: -.01em; }
.spks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.spk { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; align-content: start; }
.spk__ph { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 8px; }
.spk__ph span { position: relative; z-index: 1; font: 300 clamp(40px, 4vw, 64px)/1 var(--serif); letter-spacing: -.03em; color: rgba(250, 246, 236, .85); }
.spk__at { font: 600 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--sky); }
.spk__n { font: 400 clamp(22px, 1.8vw, 27px)/1.15 var(--serif); letter-spacing: -.02em; color: #FAF6EC; }
.spk__r { font-size: 14px; line-height: 1.45; color: var(--stone); }
.spk__more { justify-self: start; margin-top: 6px; height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--rule-d); background: transparent; color: var(--cream); font: 500 13.5px/1 var(--sans); cursor: pointer; }
.spk__more[aria-expanded="true"] span { display: inline-block; transform: rotate(45deg); }
.spk__bio { font-size: 14px; line-height: 1.5; color: var(--cream); padding-top: 10px; border-top: 1px solid var(--rule-d); }

/* ---- Khối 10. Nhà tài trợ và đối tác ---- */
.sp { margin-top: 40px; display: grid; gap: 0; }
.sp__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding: 12px 0; align-items: center; }
.sp__k { font: 600 11.5px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.sp__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sp__logos .logo { height: 88px; border: 1px solid var(--rule-l); border-radius: 4px; font-size: 15px; text-align: center; padding: 0 12px; line-height: 1.3; color: var(--ink); }
.logo--slot { border-style: dashed !important; color: var(--stone) !important; font: 500 12px/1 var(--sans) !important; letter-spacing: .06em; text-transform: uppercase; }
.sp__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding: 28px clamp(20px, 2.4vw, 32px); background: var(--paper-2); border-radius: 6px; }
.sp__cta p { font: 300 clamp(22px, 2vw, 28px)/1.3 var(--serif); letter-spacing: -.015em; max-width: 26em; }

/* ---- Khối 12. Địa điểm ---- */
.venue { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 20px; margin-top: 40px; align-items: start; }
.venue__t { font: 300 clamp(28px, 2.8vw, 44px)/1.15 var(--serif); letter-spacing: -.03em; color: #FAF6EC; }
.map { aspect-ratio: 4 / 3; border-radius: 4px; background-color: #0E1424;
  background-image: linear-gradient(rgba(141, 183, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 183, 255, .08) 1px, transparent 1px);
  background-size: 28px 28px; position: relative; }
.map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--track); box-shadow: 0 0 0 8px rgba(212, 81, 43, .2); }

/* ---- Màn hình hẹp ---- */
@media (max-width: 1100px) {
  .hdr__acts .btn { display: none; }
  .menu-btn { display: block; }
  .qs { grid-template-columns: 1fr; }
  .qs li { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-d); min-height: 0; gap: 24px; padding: 24px 0 28px; }
  .qs li:first-child { border-top: 0; }
  .th { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .th li:nth-child(even) { padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid var(--rule-l); }
  .strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .eds, .pubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__in--form { grid-template-columns: 1fr; }
  .split, .split--form, .day, .ag2 { grid-template-columns: 1fr; }
  .spks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue { grid-template-columns: 1fr 1fr; }
  .venue__t { grid-column: 1 / -1; }
  .sp__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph--tall .aura { aspect-ratio: 16 / 10; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .hdr { padding-top: 12px; padding-bottom: 12px; }
  .lang { height: 40px; }
  .hero__in { padding-top: 112px; }
  .hero .hero__title { font-size: clamp(38px, 10.4vw, 56px); }
  .hero__acts { justify-content: flex-start; }
  .hero__acts .btn { flex: 1 1 auto; justify-content: center; }
  .th { grid-template-columns: 1fr; }
  .th li:nth-child(even) { padding-left: 0; border-left: 0; }
  .th__t { margin-top: 12px; }
  .who { columns: 1; }
  .eds, .pubs { grid-template-columns: 1fr; }
  .pub .cover { max-width: 260px; }
  .form__grid { grid-template-columns: 1fr; }
  .pts, .ftr .pts { grid-template-columns: 1fr; }
  .orgline { grid-template-columns: 1fr; gap: 10px; }
  .ag li { grid-template-columns: 1fr; gap: 8px; }
  .tq, .qts { grid-template-columns: 1fr; }
  .gal { grid-template-columns: 1fr 1fr; gap: 10px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo { height: 88px; }
  .dl { grid-template-columns: 1fr; }
  .dl .cover { max-width: 240px; }
  .strip__row--3 { grid-template-columns: repeat(3, minmax(0, auto)); gap: 24px; }
  .strip__row--3 b { font-size: 40px; }
  .strip--27 .strip__row--3 { grid-template-columns: 1fr; gap: 28px; }
  .strip--27 .strip__row b { font-size: 72px; }
  .day .th--am { grid-template-columns: 1fr; }
  .day .th--am li:nth-child(even) { padding-left: 0; border-left: 0; }
  .day__h { flex-direction: column; gap: 6px; }
  .day__who { text-align: left; }
  .wheel__list li { font-size: clamp(28px, 8vw, 36px); padding: 4px 12px; }
  .wheel__label { top: 92px; bottom: auto; }
  .nums__row { grid-template-columns: 1fr; gap: 28px; }
  .nums__row > div { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--rule-d); }
  .nums__row > div:first-child { padding-top: 0; border-top: 0; }
  .nums__row b { font-size: 80px; }
  .spks { gap: 14px; }
  .spk__r { font-size: 13px; }
  .venue { grid-template-columns: 1fr; }
  .sp__row { grid-template-columns: 1fr; gap: 12px; }
  .sp__logos .logo { height: 72px; }
  .wheel__btn { bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) { .menu-btn i { transition: none; } }

/* =====================================================================
   NHỊP KHOẢNG CÁCH VÀ ĐƯỜNG KẺ (một quy tắc cho mọi trang)
   - Mỗi section có khoảng đệm trên = dưới = --sec.
   - Hai section cùng nền đứng liền nhau: section sau bỏ khoảng đệm trên, ngăn cách bằng MỘT đường kẻ ở đầu mục.
   - Đổi nền (tối ↔ sáng) thì không kẻ: màu nền đã là ranh giới.
   ===================================================================== */
.sec { padding: var(--sec) var(--gutter); }
.sec.dark + .sec.dark, .sec.light + .sec.light { padding-top: 0; }
.head { border-top: 0; padding-top: 0; }
.head:empty { display: none; }
.sec.dark + .sec.dark .head, .sec.light + .sec.light .head { display: block; border-top: 1px solid var(--rule-d); padding-top: clamp(40px, 4.4vw, 64px); }
.sec.light + .sec.light .head { border-top-color: var(--rule-l); }
.head__row:first-child { padding-top: 0; }
.phead + .sec { padding-top: clamp(56px, 6vw, 96px); }
.hero + .nums { padding-top: clamp(64px, 7vw, 112px); }
.cta { padding-bottom: var(--sec); }
.cta + .sec { padding-top: 0; }
.wheel + .sec, .sec + .wheel { margin-top: 0; }
.ftr { border-top: 1px solid var(--rule-d); }
.cta + .ftr, .sec.light + .ftr { border-top: 0; }

/* =====================================================================
   CHƯƠNG TRÌNH: dòng gọn = giờ | Phần n + tên. Giải lao là vạch mảnh, 5 ngành gộp một dòng (trang chủ).
   Điện thoại: chọn Buổi sáng / Buổi chiều bằng tab thay vì xếp hai cột dài nối nhau.
   ===================================================================== */
.ag2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); margin-top: 40px; }
.ag2__tabs { display: none; }
.ag2__k { display: flex; justify-content: space-between; align-items: baseline; font: 400 clamp(24px, 2.2vw, 32px)/1 var(--serif); letter-spacing: -.02em; padding-bottom: 12px; }
.ag2__k span, .ag2__tabs span { font: 500 13px/1 var(--sans); letter-spacing: 0; color: var(--slate); }
.ag3 { border-top: 1px solid var(--ink); }
.ag-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-l); }
.ag-row time { font: 500 14px/1.45 var(--sans); color: var(--blue); font-variant-numeric: tabular-nums; }
.ag-row time span { color: var(--slate); }
.ag__t { font: 400 clamp(17px, 1.3vw, 19px)/1.32 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.ag__p { display: block; font: 600 11px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: 3px; }
.ag-row--sub .ag__t { padding-left: 14px; border-left: 2px solid var(--rule-l); }
.ag__who { margin-top: 4px; font-size: 13px; color: var(--slate); }
.ag__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ag__chips li { height: 30px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; background: var(--paper-2); font-size: 13.5px; }
.ag-br { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule-l); font: 500 12.5px/1.4 var(--sans); color: var(--slate); }
.ag-br span { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.note--l { margin-top: 24px; color: var(--slate); }
.ag__cta { margin-top: 40px; }
.ag2--full .ag__t { font-size: clamp(18px, 1.45vw, 21px); }

@media (max-width: 1100px) {
  .ag2 { grid-template-columns: 1fr; gap: 0; }
  .ag2__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 8px; background: var(--paper-2); margin-bottom: 16px; }
  .ag2__tabs button { height: 52px; border: 0; border-radius: 6px; background: transparent; font: 500 15px/1.15 var(--sans); color: var(--slate); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
  .ag2__tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(18, 21, 28, .08); }
  .ag2__tabs span { font-size: 11.5px; }
  .ag2__k { display: none; }
  .ag2[data-tab="am"] [data-col="pm"], .ag2[data-tab="pm"] [data-col="am"] { display: none; }
}
@media (max-width: 680px) {
  .ag-row, .ag-br { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
  .ag-row { padding: 12px 0; }
  .ag-row time { font-size: 13px; }
  .ag-row--grp time span { display: block; }
  .ag__t { font-size: 16.5px; }
  .qs li { padding: 20px 0; gap: 16px; }
  .sp__cta { padding: 20px; }
}
.head + .split--form { margin-top: 40px; }
/* chương trình trên nền tối (trang kỳ 2026) */
.ag3--one { margin-top: 40px; max-width: 920px; }
.dark .ag3 { border-top-color: var(--rule-d); }
.dark .ag-row, .dark .ag-br { border-bottom-color: var(--rule-d); }
.dark .ag__t { color: #FAF6EC; }
.dark .ag-row time { color: var(--sky); }
.dark .ag__p, .dark .ag__who, .dark .ag-br { color: var(--stone); }
.ag3--one .ag-row { grid-template-columns: 80px minmax(0, 1fr); padding: 18px 0; }
.ag3--one .ag-br { grid-template-columns: 80px minmax(0, 1fr); }
.ag3--one .ag__t { font-size: clamp(19px, 1.6vw, 23px); }
.ag3--one .ag__who { font-size: 14.5px; margin-top: 6px; }
@media (max-width: 680px) { .ag3--one .ag-row, .ag3--one .ag-br { grid-template-columns: 50px minmax(0, 1fr); } }
/* bản Sắp diễn ra: câu kết in đậm của khối Giới thiệu kỳ 2027 */
.split__strong { font: 600 clamp(18px, 1.5vw, 21px)/1.45 var(--sans) !important; color: #FAF6EC !important; letter-spacing: -.01em; padding-left: 16px; border-left: 2px solid var(--blue); }
.th { margin-top: 48px; }

/* ---- Khối mở đầu: «Hà Nội – 2027» đứng cạnh cụm nút ---- */
.hero__right { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.hero__right .hero__when { margin-top: 0; white-space: nowrap; }
@media (max-width: 680px) {
  .hero__right { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero__right .hero__when { order: -1; }
}

/* ---- Lớp phủ: section nền sáng trượt lên phủ dần bánh xe chữ (v5.js đặt --c từ 0 → 1) ---- */
.wheel--covered { height: 420vh; }
.wheel__stick { transform-origin: 50% 40%; will-change: transform, opacity; }
.slideup { position: relative; z-index: 2; margin-top: -100vh;
  clip-path: inset(0 calc(var(--edge) * (1 - var(--c, 0))) 0 calc(var(--edge) * (1 - var(--c, 0))) round calc(28px * (1 - var(--c, 0))));
  box-shadow: 0 -40px 80px rgba(5, 10, 24, .35); }
@media (prefers-reduced-motion: reduce) { .slideup { clip-path: none; } }

/* ---- Diễn đàn qua các kỳ trên nền sáng ---- */
.light .strip__k, .light .strip__row span { color: var(--slate); }
.light .strip__row b { color: var(--ink); }
.light .ed__t { color: var(--ink); }
.light .ed__w, .light .ed__soon { color: var(--slate); }
.light .ed__s { color: var(--ink); }
.wheel + .slideup { margin-top: -100vh; }

/* ---- CSS đi kèm Lenis 1.3 (MIT), chép vào đây vì trình xem chỉ cho nạp CSS của chính trang ---- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ---- Khối 6 trang chủ: hai box tóm tắt buổi sáng / chiều ---- */
.agb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.agb__box { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; padding: clamp(24px, 2.6vw, 40px); border-radius: 10px; }
.agb__box--am { background: #FFFFFF; border: 1px solid var(--rule-l); color: var(--ink); }
.agb__box--pm { background: linear-gradient(160deg, #0A1B45, #0B3FB0); color: #FAF6EC; }
.agb__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.agb__k { font: 300 clamp(36px, 3.6vw, 56px)/1 var(--serif); letter-spacing: -.035em; }
.agb__time { font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--blue); white-space: nowrap; }
.agb__box--pm .agb__time { color: var(--sky); }
.agb__who { font: 600 11.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.agb__box--pm .agb__who { color: rgba(250, 246, 236, .7); }
.agb__sum { font: 400 clamp(19px, 1.6vw, 23px)/1.35 var(--serif); letter-spacing: -.01em; max-width: 24em; }
.agb__tags { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; margin-top: 4px; }
.agb__tags li { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 13.5px; background: var(--paper-2); }
.agb__box--pm .agb__tags li { background: rgba(255, 255, 255, .1); }
.agb__count { padding-top: 14px; border-top: 1px solid var(--rule-l); font-size: 13.5px; color: var(--slate); }
.agb__box--pm .agb__count { border-top-color: rgba(255, 255, 255, .16); color: rgba(250, 246, 236, .7); }
.agb__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.agb__foot .note--l { margin-top: 0; }
@media (max-width: 900px) {
  .agb { grid-template-columns: 1fr; gap: 12px; }
  .agb__box { gap: 10px; }
  .agb__foot { flex-direction: column-reverse; align-items: stretch; }
  .agb__foot .btn { justify-content: center; }
}

/* ảnh thật trong khung ảnh */
.ph--img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 30%; border-radius: 4px; background: #0B2A6B; }
@media (max-width: 1100px) { .ph--img img { aspect-ratio: 1; object-position: 42% 55%; } }

/* ---- Ba con số kỳ 2027 đặt trong mục «Kỳ thứ tư…», dưới hai đoạn chữ ---- */
.kpi { margin-top: 12px; padding: 18px 0 4px; border-top: 1px solid var(--rule-d); border-bottom: 1px solid var(--rule-d); }
.kpi__k { font: 500 12.5px/1 var(--sans); color: var(--stone); }
.kpi__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; }
.kpi__row > div { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 0 16px 16px; border-left: 1px solid var(--rule-d); }
.kpi__row > div:first-child { padding-left: 0; border-left: 0; }
.kpi__row dd { margin: 0; font: 300 clamp(44px, 4.6vw, 72px)/.9 var(--serif); letter-spacing: -.045em; color: #FAF6EC; white-space: nowrap; }
.kpi__row dt { font-size: 13.5px; line-height: 1.35; color: var(--stone); }
.split__txt .kpi + .btn { margin-top: 16px; }
.hero + .sec { padding-top: var(--sec); }
@media (max-width: 680px) { .kpi__row > div { padding: 0 10px 14px; } .kpi__row dd { font-size: 40px; } .kpi__row dt { font-size: 12.5px; } }
.kpi__row dd { order: -1; }

/* ---- Parallax ảnh: khung cắt cố định, ảnh bên trong phóng 1.14 và trôi ±6% theo cuộn (v5.js) ---- */
.ph__media { position: relative; overflow: hidden; border-radius: 4px; isolation: isolate; }
.ph__media { contain: paint; }
.ph__media > img, .ph__media > .aura { transform: scale(1.14); border-radius: 0; backface-visibility: hidden; }
/* khung chờ ảnh: hào quang đứng yên (khối nhoè chuyển động liên tục + parallax = vẽ lại mỗi khung hình) */
.ph .aura > i { animation: none; }
/* các hào quang khác chỉ chuyển động khi đang trong màn hình (v5.js gắn .is-live) */
.js .aura > i { animation-play-state: paused; }
.js .aura.is-live > i { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .ph__media > img, .ph__media > .aura { transform: none; } }

/* ---- Infographic «Diễn đàn qua các kỳ»: cột đại biểu mọc lên, chấm = số phiên ---- */
.gr { margin-top: 48px; }
.gr__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; }
.gr__k { font: 400 clamp(20px, 1.7vw, 24px)/1.2 var(--serif); letter-spacing: -.015em; }
.gr__legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate); }
.gr__legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
.gr__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.gr__col { display: grid; grid-template-rows: auto auto 1fr; padding: 0 clamp(12px, 1.6vw, 24px); border-left: 1px solid var(--rule-l); }
.gr__col:first-child { border-left: 0; padding-left: 0; }
.gr__plot { height: clamp(220px, 23vw, 300px); display: flex; align-items: flex-end; padding-top: 60px; }
.gr__bar { position: relative; width: min(100%, 120px); height: var(--h); background: var(--ink); border-radius: 3px 3px 0 0;
  transform-origin: bottom; transform: scaleY(var(--g, 1)); transition: transform 1.1s var(--ease); }
.gr__bar b { position: absolute; left: 0; bottom: calc(100% + 8px); font: 300 clamp(30px, 3vw, 46px)/1 var(--serif); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
.gr__col:nth-child(3) .gr__bar { background: var(--blue); }
.gr__col:nth-child(3) .gr__bar b { color: var(--blue); }
.gr__bar--plan { background: repeating-linear-gradient(-45deg, rgba(0, 101, 242, .16) 0 6px, rgba(0, 101, 242, .04) 6px 12px) !important; border: 1px dashed var(--blue); border-bottom: 0; }
.gr__bar--plan b { color: var(--blue) !important; }
.gr__bar--na { background: transparent; border: 1px dashed var(--stone); border-bottom: 0; }
.gr__bar--na b { color: var(--stone); }
.gr__bar--na span { position: absolute; left: 10px; bottom: 10px; right: 6px; font-size: 12px; line-height: 1.25; color: var(--slate); }
.gr__y { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink);
  font: 400 clamp(26px, 2.6vw, 38px)/1 var(--serif); letter-spacing: -.03em; }
.gr__col--plan .gr__y { border-top-color: var(--blue); color: var(--blue); }
.gr__y span { font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.gr__meta { display: grid; gap: 10px; margin: 16px 0 0; }
.gr__meta div { display: grid; gap: 3px; }
.gr__meta dt { font: 600 10.5px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--slate); }
.gr__meta dd { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 16px/1.3 var(--serif); }
.gr__dots { display: inline-flex; gap: 3px; }
.gr__dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.gr__col--plan .gr__dots i { background: transparent; border: 1px solid var(--blue); }
.gr__dash { color: var(--stone); }
/* mọc lên khi vào màn hình */
.js .gr:not(.is-in) .gr__bar { --g: .02; }
.gr.is-in .gr__col:nth-child(2) .gr__bar { transition-delay: .08s; }
.gr.is-in .gr__col:nth-child(3) .gr__bar { transition-delay: .16s; }
.gr.is-in .gr__col:nth-child(4) .gr__bar { transition-delay: .24s; }
.gr__bar b { transition: opacity .6s ease .5s; }
.js .gr:not(.is-in) .gr__bar b { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gr__bar, .gr__bar b { transition: none; } .js .gr:not(.is-in) .gr__bar { --g: 1; } .js .gr:not(.is-in) .gr__bar b { opacity: 1; } }
@media (max-width: 680px) {
  .gr__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gr__col { padding: 0 6px; }
  .gr__plot { height: 180px; padding-top: 40px; }
  .gr__bar b { font-size: 22px; }
  .gr__bar--na span { display: none; }
  .gr__y { font-size: 20px; flex-direction: column; gap: 4px; }
  .gr__meta dd { font-size: 13px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .gr__meta dt { font-size: 9px; }
  .gr__head { flex-direction: column; gap: 6px; }
}

/* ---- Sách 3D (ấn phẩm): mặt bìa + gáy; rê chuột thì xoay ngang để lộ gáy ---- */
.book { --sp: 12%; width: 100%; max-width: 300px; aspect-ratio: 1594 / 2266; margin-bottom: 18px; perspective: 1400px; }
.book--lg { max-width: 320px; margin: 0; }
.book__3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s var(--ease); transform: rotateY(0deg); }
.book__front { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1px 3px 3px 1px; backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(18, 21, 28, .06), 0 24px 48px -24px rgba(18, 21, 28, .45); margin: 0; aspect-ratio: auto; max-width: none; }
.book__front::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4%; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .08) 60%, transparent); z-index: 1; pointer-events: none; }
img.book__front { display: block; }
.book__spine { position: absolute; top: 0; left: 0; width: var(--sp); height: 100%; object-fit: cover; transform-origin: left center; transform: rotateY(-90deg) translateX(-100%); backface-visibility: hidden; filter: brightness(.92); }
.book__spine--blue { background: linear-gradient(90deg, #0A3592, #0B3FB0); }
.book__spine--paper { background: linear-gradient(90deg, #D9D3C4, #ECE7DA); }
.book__spine--navy { background: linear-gradient(90deg, #07142F, #0A1B45); }
.book__back { position: absolute; inset: 0; background: #E8E3D6; transform: translateZ(calc(var(--bw, 36px) * -1)); border-radius: 3px; box-shadow: 0 30px 50px -30px rgba(18, 21, 28, .5); }
/* độ dày sách = bề rộng gáy (12% bề ngang bìa) */
.book { container-type: inline-size; }
.book__back { transform: translateZ(-12cqw); }
@media (hover: hover) {
  .pub:hover .book__3d, .book:hover .book__3d, .dl:hover .book__3d { transform: rotateY(34deg) translateX(6%); }
}
.book__3d:focus-within { transform: rotateY(34deg) translateX(6%); }
@media (prefers-reduced-motion: reduce) { .book__3d { transition: none; } }
.dl .book { margin: 0; }
.book__back { display: none; }

/* ---- Đầu mục: đoạn mô tả dạt hẳn về mép phải ---- */
.head__row { align-items: end; }
.head__row .h2 { grid-column: 1 / span 7; }
.head__text { grid-column: 9 / -1; justify-self: end; width: 100%; max-width: 30em; padding-top: 0; padding-bottom: .35em; }
.head__row:has(.head__btn) .head__text { grid-column: 8 / span 3; justify-self: start; }
.head__btn { align-self: end; }

/* ---- Ấn phẩm: sách rộng bằng cụm tên sách ---- */
.book { max-width: none; }
.book--lg { max-width: 360px; }
.dl { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }

/* ---- Nhà tài trợ: toàn khổ, căn giữa, nhiều logo vẫn vừa ---- */
.head__row--c { display: block; text-align: center; }
.sec--sp .sp { margin-top: clamp(32px, 4vw, 56px); gap: clamp(36px, 4vw, 56px); }
.sec--sp .sp__row { display: block; padding: 0; text-align: center; }
.sec--sp .sp__k { display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 20px; }
.sec--sp .sp__k::before, .sec--sp .sp__k::after { content: ""; flex: 0 1 64px; height: 1px; background: var(--rule-l); }
.sec--sp .sp__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sec--sp .sp__logos .logo { flex: 0 0 auto; width: 176px; height: 80px; }
.sec--sp .sp__row--lead .logo { width: 240px; height: 104px; font-size: 16px; }
.sec--sp .sp__cta { flex-direction: column; justify-content: center; text-align: center; max-width: 760px; margin: clamp(48px, 5vw, 72px) auto 0; }
.sec--sp .sp__cta p { max-width: 24em; }
@media (max-width: 1100px) {
  .head__row .h2 { grid-column: 1 / -1; }
  .head__text, .head__row:has(.head__btn) .head__text { grid-column: 1 / span 8; justify-self: start; max-width: 34em; padding-bottom: 0; }
  .head__btn { grid-column: 9 / -1; justify-self: end; }
  .dl { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .head__text, .head__row:has(.head__btn) .head__text, .head__btn { grid-column: 1 / -1; justify-self: start; }
  .dl { grid-template-columns: 1fr; }
  .sec--sp .sp__logos { gap: 8px; }
  .sec--sp .sp__logos .logo, .sec--sp .sp__row--lead .logo { width: calc(50% - 4px); height: 72px; font-size: 14px; }
  .sec--sp .sp__row--lead .logo:only-child { width: 100%; max-width: 280px; }
}
.sec--sp .sp { display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(32px, 5vw, 80px); }
.sec--sp .sp__row--many { flex: 0 0 100%; }
.book__front.cover { max-width: none; margin: 0; }

/* ---- Mobile: ấn phẩm & các kỳ thành dải vuốt ngang, đỡ dài trang ---- */
@media (max-width: 680px) {
  .pubs, .eds { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .pubs::-webkit-scrollbar, .eds::-webkit-scrollbar { display: none; }
  .pub, .ed { flex: 0 0 76%; scroll-snap-align: start; }
  .pubs { margin-top: 32px; }
  .sec--sp .sp__row { flex: 0 0 100%; }
  .sec--sp .sp__logos .logo { width: calc((100% - 16px) / 3); height: 60px; font-size: 11px; }
  .sec--sp .sp__row--lead .logo, .sec--sp .sp__row--lead .logo:only-child { width: 100%; max-width: 280px; height: 72px; font-size: 14px; }
  .sec--sp .sp { gap: 32px; }
  .cta__in--form { padding: 28px 18px; }
  .cta__in--form .form, .split--form .form { padding: 18px 16px; }
  .wheel--covered { height: 330vh; }
}
@media (max-width: 1100px) {
  .hero__foot { grid-template-columns: 1fr; }
  .hero__right { justify-content: flex-start; }
  .sec--sp .sp__k { white-space: nowrap; }
}

/* ---- Diễn giả: chia 3 nhóm, nhãn nhóm bên trái ---- */
.spgs { margin-top: clamp(32px, 4vw, 56px); }
.spg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 28px 0 40px; border-top: 1px solid var(--rule-d); }
.spg__k { grid-column: 1 / span 3; font: 400 clamp(19px, 1.5vw, 22px)/1.3 var(--serif); letter-spacing: -.01em; color: #FAF6EC; max-width: 11em; }
.spks--g { grid-column: 4 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.spks--g .spk { display: flex; flex-direction: column; gap: 6px; }
.spks--g .spk__ph { margin-bottom: 10px; }
.spks--g .spk__n { font-size: clamp(20px, 1.6vw, 24px); }
.spks--g .spk__at { order: 0; font: 400 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--sky); }
.spks--g .spk__more { align-self: flex-start; margin-top: 10px; }
.spk__ph--img { overflow: hidden; border-radius: 2px; background: var(--ink-2); }
.spk__ph--img img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; transform: scale(1.35); transform-origin: 38% 30%; }
@media (max-width: 1100px) {
  .spg { grid-template-columns: 1fr; gap: 18px; padding: 24px 0 32px; }
  .spg__k, .spks--g { grid-column: 1 / -1; }
  .spg__k { max-width: none; }
  .spks--g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .spks--g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .spks--g .spk__n { font-size: 19px; }
  .spks--g .spk__at { font-size: 12.5px; }
}
.spks--g { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.spg__k::after { content: ""; display: block; }
@media (max-width: 1100px) { .spks--g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .spks--g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .spks--g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spgs__k { margin-top: clamp(40px, 4vw, 56px); }
.spgs__k + .spgs { margin-top: 16px; }
.spk__ph--img img { object-position: 36% 72%; transform: scale(1.7); transform-origin: 36% 72%; }

/* ---- Vùng chạm: tối thiểu ~40px trên thiết bị cảm ứng ---- */
.hdr__nav a { padding: 13px 0; }
@media (pointer: coarse) {
  .ftr__cols div { gap: 0; }
  .ftr__cols a { display: block; padding: 9px 0; }
}

/* ---- Tablet: tránh hàng mồ côi, hero bớt khoảng trống dọc ---- */
@media (orientation: portrait) and (min-width: 681px) and (max-width: 1100px) {
  .hero { min-height: min(100svh, calc(80vw + 200px)); }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .pubs, .eds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .pub__t { font-size: 20px; }
  .ed__s, .pub__d { font-size: 14px; }
}
.sec--sp .sp__row--many .sp__logos { max-width: 1120px; margin: 0 auto; }
.sec--sp .sp__row--many .logo { width: calc((100% - 60px) / 6); }
@media (max-width: 1100px) { .sec--sp .sp__row--many .logo { width: calc((100% - 24px) / 3); } }
@media (max-width: 680px) { .sec--sp .sp__row--many .logo { width: calc((100% - 16px) / 3); } }
.spks--g .spk__n { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.2; text-wrap: balance; }
.spks--g .spk__n { text-wrap: wrap; }
.spk__n .nw { white-space: nowrap; }

/* ---- Diễn giả: ghim section, cuộn dọc -> thẻ chạy ngang (máy tính, tablet) ---- */
.hs__bar { display: flex; align-items: center; gap: 20px; margin-top: clamp(28px, 3.4vw, 48px); }
.hs__bar .spgs__k { margin: 0; }
.hs__prog { display: none; flex: 1; height: 1px; background: var(--rule-d); position: relative; overflow: hidden; }
.hs__prog i { position: absolute; inset: 0; background: var(--sky); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (min-width: 681px) {
  .hs { padding-bottom: 0; }
  .hs__pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 88px 0 clamp(24px, 4vh, 48px); }
  .sec.hs { padding-top: 0; }
  .hs .head { padding-top: 0 !important; border-top: 0 !important; }
  .hs__prog { display: block; }
  .hs__vp { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow: hidden; }
  .hs__track { display: flex; gap: clamp(40px, 4vw, 72px); width: max-content; margin-top: 20px; will-change: transform; }
  .hs__track .spg { display: flex; flex-direction: column; gap: 16px; padding: 18px 0 0; border-top: 1px solid var(--rule-d); }
  .hs__track .spg__k { max-width: none; font-size: clamp(17px, 1.3vw, 20px); white-space: nowrap; }
  .hs__track .spks--g { display: flex; gap: 20px; }
  .hs__track .spk { width: clamp(190px, min(17vw, calc(100vh - 470px)), 270px); }
  .hs .note { margin-top: clamp(20px, 3vh, 32px); }
  .js .hs__track .spk { }
}
@media (max-width: 680px) { .hs__track { transform: none !important; } }
@media (min-width: 681px) and (max-width: 1100px) {
  .hs__track .spk { width: clamp(190px, min(30vw, calc(100vh - 520px)), 300px); }
  .hs__track .spks--g { gap: 16px; }
}

/* ---- Diễn giả: bỏ đường kẻ, chỉ giữ thanh tiến độ ---- */
.hs .head { border-top: 0 !important; }
.hs .spg, .hs__track .spg { border-top: 0; }
.hs__track .spg { padding-top: 0; }
.hs__track .spg__k { color: var(--stone); font: 500 13px/1.3 var(--sans); letter-spacing: .02em; }
.hs__track { margin-top: clamp(24px, 3vh, 36px); }
@media (max-width: 680px) {
  .hs .spg { padding: 0; margin-top: 40px; }
  .hs .spg:first-child { margin-top: 24px; }
  .hs .spg__k { color: var(--stone); font: 500 13px/1.3 var(--sans); }
}

/* ---- Diễn giả toàn màn hình: thẻ co theo khoảng trống còn lại ---- */
@media (min-width: 681px) {
  .hs__pin { height: 100vh; height: 100svh; min-height: 0; justify-content: flex-start; padding: clamp(84px, 11vh, 120px) 0 clamp(28px, 5vh, 56px); }
  .hs__vp { flex: 1 1 auto; min-height: 0; container-type: size; display: flex; align-items: center; }
  .hs__track { margin-top: 0; }
  .hs__track .spk { width: clamp(170px, min(100cqh - 210px, 24vw), 380px); }
  .hs__track .spk__ph { margin-bottom: 6px; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .hs__track .spk { width: clamp(170px, min(100cqh - 230px, 40vw), 380px); }
}
@media (min-width: 681px) and (max-width: 1100px) and (orientation: portrait) {
  .hs__track .spk { width: clamp(200px, min(100cqh - 240px, 52vw), 520px); }
  .hs__track .spk__n { font-size: clamp(20px, 2.6vw, 26px); }
  .hs__track .spk__r, .hs__track .spk__at { font-size: 15px; }
}

/* ---- Khung nội dung tối đa cho màn lớn: nền vẫn tràn, nội dung gói trong 1440px ---- */
:root { --max: 1440px; --edge: clamp(16px, 3.7vw, 56px); --gutter: max(var(--edge), calc((100vw - var(--max)) / 2)); }

/* ---- Cỡ tiêu đề hạ một bậc cho hợp khung 1440 (chỉ desktop/tablet, mobile giữ nguyên) ---- */
@media (min-width: 681px) {
  .h2 { font-size: clamp(34px, 3.8vw, 56px); }
  .h2--sm { font-size: clamp(30px, 3vw, 44px); }
  .hero .hero__title { font-size: clamp(44px, 5.6vw, 92px); }
  .cta__title { font-size: clamp(44px, 6.4vw, 104px); }
  .cta__title--sm { font-size: clamp(40px, 4.6vw, 76px); }
  .phead__t { font-size: clamp(48px, 6.4vw, 104px); }
  .wheel__list li { font-size: clamp(30px, 3.4vw, 52px); }
  .nums__row b { font-size: clamp(64px, 8.4vw, 132px); }
  .kpi__row dd { font-size: clamp(44px, 4vw, 60px); }
  .ed__y { font-size: clamp(44px, 4.2vw, 64px); }
  .strip__row b { font-size: clamp(44px, 4.8vw, 76px); }
  .pub__t, .ed__t { font-size: clamp(20px, 1.7vw, 24px); }
}

/* ---- Ấn phẩm (trang chủ): thẻ nhỏ lại ~20%, cụm căn giữa, tiêu đề căn giữa ---- */
.sec--pubs .pubs { max-width: 80%; margin-left: auto; margin-right: auto; margin-top: clamp(32px, 4vw, 56px); }
.pubs__more { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 1100px) { .sec--pubs .pubs { max-width: 88%; } }
@media (max-width: 680px) {
  .sec--pubs .pubs { max-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .pubs__more { justify-content: flex-start; margin-top: 24px; }
}

/* ---- Ấn phẩm: nhãn Coming soon trên bìa Báo cáo 2027 ---- */
.book { position: relative; }
.book__tag { position: absolute; z-index: 3; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px;
  background: var(--sky, #7FB2FF); color: #06132F; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45); pointer-events: none; }
.book__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: tagp 1.6s ease-in-out infinite; }
@keyframes tagp { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .book__tag::before { animation: none; } }

/* ---- Logo header (SVG) ---- */
.wordmark--logo { display: inline-flex; align-items: center; line-height: 0; }
.wordmark--logo .brand { display: block; height: 34px; width: auto; }
@media (max-width: 1100px) { .wordmark--logo .brand { height: 30px; } }
@media (max-width: 680px) { .wordmark--logo .brand { height: 24px; } }
@media (max-width: 370px) { .wordmark--logo .brand { height: 21px; } }

/* ---- Footer: logo VSES27 khổ lớn (SVG) thay chữ ---- */
.ftr__giant--svg { font: inherit; transform: none; margin: clamp(48px, 6vw, 88px) 0 0; line-height: 0; }
.ftr__giant--svg svg { display: block; width: 100%; height: auto; }

/* ---- Ảnh hội nghị 2026 làm nền (có lớp phủ tối) ---- */
.bgph { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bgph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgph::after { content: ""; position: absolute; inset: 0; }
.sec.sec--photo { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--sec); padding-bottom: var(--sec); }
.sec--photo .head { border-top: 0 !important; padding-top: 0 !important; }
.sec--photo + .sec { padding-top: var(--sec); }
.sec--photo + .sec .head { border-top: 0 !important; padding-top: 0 !important; }
.bgph--q img { object-position: 50% 62%; filter: saturate(.85); }
.bgph--q::after { background: linear-gradient(180deg, rgba(18,21,28,.96) 0%, rgba(18,21,28,.78) 45%, rgba(18,21,28,.9) 100%), linear-gradient(90deg, rgba(18,21,28,.55), rgba(18,21,28,0) 60%); }
.sec--photo .qs li { border-left-color: rgba(242, 235, 221, .18); }
.sec--photo .qs__q { text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.bgph--wheel { z-index: 0; }
.bgph--wheel img { object-position: 50% 60%; filter: saturate(.8); }
.bgph--wheel::after { background: radial-gradient(70% 60% at 50% 50%, rgba(18,21,28,.72) 0%, rgba(18,21,28,.9) 70%, rgba(18,21,28,.97) 100%); }
.wheel__stick > :not(.bgph) { z-index: 1; }
.aura--ph .aura__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .5; mix-blend-mode: luminosity; }
.aura--cta.aura--ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,20,70,.55) 0%, rgba(5,20,70,.25) 55%, rgba(5,20,70,.6) 100%); }
.aura--ed.aura--ph { background: #0B2A6B; }
.aura--ed.aura--ph .aura__img { opacity: 1; mix-blend-mode: normal; object-position: 50% 45%; }
.aura--ed.aura--ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,14,44,0) 35%, rgba(5,14,44,.75) 100%); }
.spk__ph--crop img { transform: none !important; object-position: 50% 40% !important; }
.bgph--q img { filter: saturate(.7) blur(2px); transform: scale(1.04); }
.bgph--q::after { background: linear-gradient(180deg, rgba(18,21,28,.95) 0%, rgba(18,21,28,.84) 40%, rgba(18,21,28,.93) 100%); }
.wheel__stick:has(.bgph) .wheel__list li { background: transparent; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.wheel__stick:has(.bgph) .wheel__rule { display: none; }

/* ---- Ba câu hỏi: dải ảnh hội trường 2026 toàn khổ, ảnh rõ nét, chỉ mờ dần ở hai mép trên/dưới ---- */
.sec.sec--q { padding-top: 0; }
.qband { margin: 0 calc(var(--gutter) * -1) clamp(48px, 6vw, 88px); position: relative; }
.qband .ph__media, .qband > img { border-radius: 0; height: clamp(280px, 44vw, 620px); }
.qband img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; display: block; }
.qband::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(18,21,28,0) 22%, rgba(18,21,28,0) 70%, var(--ink) 100%); }
.sec--q .head { border-top: 0 !important; padding-top: 0 !important; }
@media (max-width: 680px) { .qband .ph__media, .qband > img { height: 260px; } }
.sec--sp .sp__k { white-space: nowrap; }
.qband img { object-position: center 70%; }

/* ---- Hiện dần khi cuộn tới: ảnh mờ dần, thẻ/box trượt nhẹ lên (phần tử sau trễ 90ms) ---- */
.js img.fi { opacity: 0; transition: opacity .6s var(--ease); }
.js img.fi.is-vis { opacity: 1; }
.js .fu { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .5s var(--ease), transform .65s var(--ease); transition-delay: calc(var(--fi, 0) * 60ms); }
.js .fu.is-in { opacity: 1; transform: none; }
.js .pub.fu.is-in, .js .spk.fu.is-in { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .js img.fi, .js .fu { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---- Màn chuyển từ loading sang trang chủ: chậm hơn ~0,7s, hero đi theo nhịp logo bay ---- */
.intro.intro-go .hdr { transition: opacity 1s var(--ease) 1.25s, transform 1.2s var(--ease) 1.25s; }
.intro.intro-go .hero .badge, .intro.intro-go .hero .hero__name { transition: opacity 1s var(--ease) .95s, transform 1.2s var(--ease) .95s; }
.intro.intro-go .hero .chip { transition-delay: .95s; }
.intro.intro-go .hero__foot { transition: opacity 1s var(--ease) 1.75s, transform 1.2s var(--ease) 1.75s; }
/* nhịp hiện dần chậm hơn: kích hoạt muộn hơn (JS), trễ nền 150ms, mỗi phần tử sau +140ms */
.js img.fi { transition: opacity .75s var(--ease); }
.js .fu { transform: translate3d(0, 28px, 0); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(40ms + var(--fi, 0) * 80ms); }
html { scrollbar-gutter: stable; }

/* ---- Nét sân thể thao (thay đường kẻ): bóng rổ / bóng đá / pickleball / đường chạy 400 m ---- */
.sport { display: block; pointer-events: none; overflow: visible; }
.sport * { vector-effect: non-scaling-stroke; stroke-width: 1; }
.sport [stroke-width="2"] { stroke-width: 1.8; }
.js .sport :not([stroke-dasharray]):not([fill="currentColor"]) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.6, 0, .2, 1) .25s; }
.js .sport [stroke-dasharray], .js .sport [fill="currentColor"] { opacity: 0; transition: opacity 1s ease 1.6s; }
.js .is-in > .sport :not([stroke-dasharray]):not([fill="currentColor"]), .js .sport.is-in :not([stroke-dasharray]):not([fill="currentColor"]) { stroke-dashoffset: 0; }
.js .is-in > .sport [stroke-dasharray], .js .is-in > .sport [fill="currentColor"], .js .sport.is-in [stroke-dasharray], .js .sport.is-in [fill="currentColor"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .sport * { stroke-dashoffset: 0 !important; opacity: 1 !important; transition: none !important; } }

/* Ba câu hỏi: mỗi câu một sân, bỏ đường kẻ dọc */
.qs li { position: relative; isolation: isolate; border-left: 0 !important; border-top: 0 !important; padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 32px) clamp(22px, 2.2vw, 30px); min-height: clamp(260px, 22vw, 320px); }
.qs li:first-child { padding-left: clamp(20px, 2.2vw, 32px); }
.qs { gap: clamp(12px, 1.4vw, 20px); }
.qs li > .sport { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: rgba(242, 235, 221, .16); }
.qs li > .sport--pb { inset: 14% 0; height: 72%; }
.qs__q { position: relative; }
@media (max-width: 1100px) { .qs { gap: 14px; } .qs li { min-height: 220px; } }
@media (max-width: 680px) { .qs li { min-height: 200px; padding: 20px 18px 22px; } }

/* Ai nên tham dự: đường chạy 400 m mờ quanh chữ */
.sport--wheel { position: absolute; left: 50%; top: 50%; width: min(1180px, 94vw); transform: translate(-50%, -50%); color: rgba(242, 235, 221, .09); z-index: 0; }
@media (max-width: 680px) { .sport--wheel { width: 150vw; transform: translate(-50%, -50%) rotate(90deg); } }

/* Nhà tài trợ: đường chạy rất mờ làm nền khoảng trắng */
.sec--sp { position: relative; isolation: isolate; overflow: hidden; }
.sport--sp { position: absolute; left: 50%; top: 52%; width: min(1500px, 120vw); transform: translate(-50%, -50%); color: rgba(18, 21, 28, .075); z-index: -1; }
@media (max-width: 680px) { .sport--sp { width: 210vw; transform: translate(-50%, -50%) rotate(90deg); } }
/* nét đo theo đơn vị của từng sân (để pathLength vẽ dần đúng) ≈ 1px trên màn hình */
.sport * { vector-effect: none; }
.sport--bb * { stroke-width: .42; }
.sport--fb * { stroke-width: .3; }
.sport--pb * { stroke-width: .14; }
.sport--pb [stroke-width="2"] { stroke-width: .3; }
.sport--track * { stroke-width: .16; }
.sport--sp * { stroke-width: .13; }
@media (max-width: 680px) { .sport--bb * { stroke-width: .5; } .sport--fb * { stroke-width: .36; } .sport--pb * { stroke-width: .16; } .sport--track * { stroke-width: .3; } .sport--sp * { stroke-width: .2; } }
.wheel__stick:has(.sport) .wheel__list li { background: transparent; }
/* Ba câu hỏi: thẻ theo tỉ lệ sân (ngang ~1,8), sân nằm gọn làm khung thay đường viền */
.sport--bb * { stroke-width: .62; }
@media (min-width: 1101px) {
  .qs li { min-height: 0; aspect-ratio: 1.82; }
  .qs li > .sport, .qs li > .sport--pb { inset: 0; height: 100%; }
}
@media (max-width: 1100px) {
  .qs li > .sport, .qs li > .sport--pb { inset: 10px 0 10px auto; width: auto; height: calc(100% - 20px); aspect-ratio: 1.85; right: 0; left: auto; }
  .qs li > .sport { color: rgba(242, 235, 221, .12); }
}
@media (max-width: 680px) {
  .qs li > .sport, .qs li > .sport--pb { inset: auto 0 0 0; width: 100%; height: auto; aspect-ratio: auto; }
  .qs li { padding-bottom: calc(46vw + 18px); min-height: 0; }
  .sport--bb * { stroke-width: .8; }
}
@media (min-width: 681px) and (max-width: 1100px) { .qs li .qs__q { max-width: 52%; } .qs li { min-height: 190px; } }

/* ===== Nét thể thao v2: không bao giờ chồng lên chữ ===== */
.js .is-in .sport :not([stroke-dasharray]):not([fill="currentColor"]) { stroke-dashoffset: 0; }
.js .is-in .sport [stroke-dasharray], .js .is-in .sport [fill="currentColor"] { opacity: 1; }

/* Ba câu hỏi: nửa sân dọc trong khung bằng nhau, chữ nằm DƯỚI sân */
.qs > li { aspect-ratio: auto !important; min-height: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 22px; isolation: auto; }
.qs > li > .qs__court { position: relative; aspect-ratio: 1 / .94; width: 100%; padding: 6% 9%; border: 1px solid rgba(242, 235, 221, .08); border-radius: 4px; background: rgba(242, 235, 221, .015); }
.qs > li > .qs__court > .sport { position: static; width: 100%; height: 100%; inset: auto; color: rgba(242, 235, 221, .3); }
.qs__court .sport { preserve-aspect-ratio: none; }
.qs > li > .qs__txt { display: grid; gap: 14px; padding-right: 8%; }
.qs > li .qs__q { max-width: none !important; }
.sport--bb * { stroke-width: .55; } .sport--fb * { stroke-width: .25; } .sport--pb * { stroke-width: .08; } .sport--pb [stroke-width="2"] { stroke-width: .22; }
@media (max-width: 1100px) {
  .qs > li { flex-direction: row; align-items: center; gap: clamp(18px, 3vw, 32px); padding: 18px 0 !important; border-top: 1px solid rgba(242, 235, 221, .08) !important; }
  .qs > li:first-child { border-top: 0 !important; }
  .qs > li > .qs__court { flex: 0 0 clamp(120px, 30vw, 240px); }
  .qs > li > .qs__txt { padding-right: 0; }
}
@media (max-width: 680px) {
  .qs > li > .qs__court { flex-basis: 34vw; padding: 5% 7%; }
  .sport--bb * { stroke-width: .9; } .sport--fb * { stroke-width: .42; } .sport--pb * { stroke-width: .13; } .sport--pb [stroke-width="2"] { stroke-width: .34; }
}

/* Đường chạy thẳng 8 làn: dải trên (vạch xuất phát) + dải dưới (vạch đích) — chữ được che khỏi hai dải này */
.sport--lanes { position: absolute; left: 0; width: 100%; height: clamp(64px, 10vh, 104px); color: rgba(242, 235, 221, .16); z-index: 0; }
.sport--lanes * { stroke-width: 1; vector-effect: non-scaling-stroke; }
.js .sport--lanes :not([fill="currentColor"]):not(text) { stroke-dasharray: none; stroke-dashoffset: 0; }
.sport--lanes { clip-path: inset(0 100% 0 0); transition: clip-path 2.4s cubic-bezier(.6, 0, .2, 1); }
.sport--lanes.sport--finish { clip-path: inset(0 0 0 100%); }
.sport--lanes.is-in, .is-in .sport--lanes { clip-path: inset(0 0 0 0); }
.sport--lanes .ln { font: 600 9px/1 var(--sans); opacity: 1; }
.wheel__stick > .sport--start { top: 88px; }
.wheel__stick > .sport--finish { bottom: 18px; }
.wheel__stick > .sport--oval { display: none; }
.wheel__stick .wheel__list { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(88px + clamp(64px, 10vh, 104px) + 10px), #000 calc(88px + clamp(64px, 10vh, 104px) + 7vh), #000 calc(100% - clamp(64px, 10vh, 104px) - 7vh - 18px), transparent calc(100% - clamp(64px, 10vh, 104px) - 28px));
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(88px + clamp(64px, 10vh, 104px) + 10px), #000 calc(88px + clamp(64px, 10vh, 104px) + 7vh), #000 calc(100% - clamp(64px, 10vh, 104px) - 7vh - 18px), transparent calc(100% - clamp(64px, 10vh, 104px) - 28px)); }
@media (prefers-reduced-motion: reduce) { .sport--lanes { clip-path: none !important; transition: none !important; } }

/* Nhà tài trợ: dải đường chạy nằm riêng ở đáy section, dưới cụm CTA */
.sec--sp > .sport--track { display: none; }
.sec.sec--sp { padding-bottom: calc(var(--sec) + clamp(80px, 9vw, 120px)); }
.sp__lanes { position: absolute; left: 0; right: 0; bottom: clamp(28px, 3vw, 48px); height: clamp(56px, 7vw, 96px); }
.sp__lanes .sport--lanes { top: 0; height: 100%; color: rgba(18, 21, 28, .16); }
.qs > li > .qs__court > .sport { position: absolute; inset: 6% 9%; width: auto; height: auto; }
.sport--lanes { left: calc(50% - 50vw); width: 100vw; }
.sp__lanes { overflow: hidden; }
@media (max-width: 680px) { .qs > li > .qs__court > .sport { inset: 5% 7%; } }
.sport--lanes { left: 0; width: 100%; color: rgba(242, 235, 221, .2); }
.sp__lanes .sport--lanes { color: rgba(18, 21, 28, .2); }
@media (min-width: 681px) and (max-width: 1100px) { .qs > li .qs__q { font-size: clamp(22px, 2.8vw, 28px); max-width: 30em !important; } }
@media (max-width: 680px) {
  .wheel__stick > .sport--start { top: 112px; height: 56px; }
  .wheel__stick > .sport--finish { display: none; }
  .wheel__stick .wheel__list { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 178px, #000 230px, #000 calc(100% - 120px), transparent calc(100% - 90px)); mask-image: linear-gradient(180deg, transparent 0, transparent 178px, #000 230px, #000 calc(100% - 120px), transparent calc(100% - 90px)); }
  .sport--lanes .ln { font-size: 10px; }
}

/* ===== Ba câu hỏi v3: minh hoạ theo ý câu hỏi (nhảy cao = mức vốn, bảng chiến thuật = đường đi của vốn, bia = chỗ đặt tiền) ===== */
.qs > li > .qs__court > .sport--ill { inset: 4% 6%; color: rgba(242, 235, 221, .34); }
.sport--ill * { stroke-width: .9; }
.sport--ill .ac { color: var(--sky); stroke: var(--sky); }
.sport--ill .acf { fill: var(--sky); }
.sport--ill .o3 { opacity: .35; } .sport--ill .o5 { opacity: .55; } .sport--ill .o7 { opacity: .8; }
.sport--ill text { stroke: none; fill: currentColor; font: 500 8px/1 var(--sans); letter-spacing: .02em; }
.sport--ill text.ac { fill: var(--sky); }
.sport--ill text.q { font: 300 30px/1 var(--serif); fill: var(--sky); }
.js .sport--ill text { opacity: 0; transition: opacity 1s ease 1.5s; }
.js .is-in .sport--ill text { opacity: 1; }
.qs > li > .qs__court { background: rgba(242, 235, 221, .02); border-color: rgba(242, 235, 221, .07); }
@media (max-width: 680px) { .sport--ill * { stroke-width: 1.3; } .sport--ill text { font-size: 11px; } }

/* ===== Ai nên tham dự: đường chạy vòng sân vận động 8 làn, chữ luôn nằm trong sân cỏ ===== */
.wheel__stick > .sport--lanes { display: none; }
.stad { --lane: clamp(7px, .9vw, 12px); position: absolute; left: 0; right: 0; top: 92px; bottom: 22px; z-index: 0; pointer-events: none; color: rgba(242, 235, 221, .17); }
.stad__rings { position: absolute; inset: 0; }
.stad__rings i { position: absolute; inset: calc(var(--k) * var(--lane)); border: 1px solid currentColor; border-radius: 9999px; }
.stad__rings i:first-child { color: rgba(242, 235, 221, .26); }
.stad__start { position: absolute; right: 30%; bottom: 0; height: calc(var(--lane) * 8); width: 1px; background: rgba(242, 235, 221, .45); }
.stad__nums { position: absolute; right: calc(30% + 8px); bottom: 0; height: calc(var(--lane) * 8); width: 14px; }
.stad__nums b { position: absolute; right: 0; bottom: calc(var(--k) * var(--lane)); height: var(--lane); display: flex; align-items: center; font: 600 clamp(7px, .62vw, 9px)/1 var(--sans); color: rgba(242, 235, 221, .5); }
@property --sa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.js .stad { -webkit-mask-image: conic-gradient(from 180deg, #000 var(--sa), transparent 0); mask-image: conic-gradient(from 180deg, #000 var(--sa), transparent 0); transition: --sa 2.6s cubic-bezier(.6, 0, .2, 1); }
.js .stad.is-in { --sa: 360deg; }
@media (prefers-reduced-motion: reduce) { .js .stad { -webkit-mask-image: none; mask-image: none; } }
/* chữ chạy chỉ hiện trong sân cỏ (bên trong làn trong cùng) */
.wheel__stick .wheel__list { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(92px + var(--lane, 12px) * 8 + 14px), #000 calc(92px + var(--lane, 12px) * 8 + 9vh), #000 calc(100% - 22px - var(--lane, 12px) * 8 - 9vh), transparent calc(100% - 22px - var(--lane, 12px) * 8 - 14px));
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(92px + var(--lane, 12px) * 8 + 14px), #000 calc(92px + var(--lane, 12px) * 8 + 9vh), #000 calc(100% - 22px - var(--lane, 12px) * 8 - 9vh), transparent calc(100% - 22px - var(--lane, 12px) * 8 - 14px)); }
.wheel__stick { --lane: clamp(7px, .9vw, 12px); }
/* nhãn và nút nằm đè lên làn chạy: có nền khoét để nét không chạy qua chữ */
.wheel__label, .wheel__btn { z-index: 2; background: var(--ink); }
.wheel__label { padding: 8px 14px 8px 0; box-shadow: 14px 0 0 var(--ink); }
.wheel__btn { box-shadow: 0 0 0 10px var(--ink); }
@media (max-width: 680px) {
  .stad, .wheel__stick { --lane: 5px; }
  .stad { top: 118px; bottom: 96px; left: 4px; right: 4px; }
  .stad__start { right: auto; left: 0; top: 46%; bottom: auto; width: calc(var(--lane) * 8); height: 1px; }
  .stad__nums { display: none; }
  .wheel__stick .wheel__list { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 175px, #000 230px, #000 calc(100% - 175px), transparent calc(100% - 140px)); mask-image: linear-gradient(180deg, transparent 0, transparent 175px, #000 230px, #000 calc(100% - 175px), transparent calc(100% - 140px)); }
}
/* chữ chạy bị cắt đúng theo hình sân cỏ bên trong làn chạy → không bao giờ chạm vạch */
.wheel__stick { --st: 92px; --sb: 22px; --sx: 0px; }
.wheel__stick .wheel__list { clip-path: inset(calc(var(--st) + var(--lane) * 8 + 8px) calc(var(--sx) + var(--lane) * 8 + 8px) calc(var(--sb) + var(--lane) * 8 + 8px) calc(var(--sx) + var(--lane) * 8 + 8px) round 9999px); }
@media (max-width: 680px) { .wheel__stick { --st: 118px; --sb: 96px; --sx: 4px; } }

/* ===== Minh hoạ 3 câu hỏi v4: tinh hơn — nét mảnh, mảng gradient nhẹ, điểm nhấn xanh ===== */
.qs > li > .qs__court { background: radial-gradient(120% 90% at 50% 0%, rgba(141, 183, 255, .07), rgba(141, 183, 255, 0) 60%), rgba(242, 235, 221, .015); border-color: rgba(242, 235, 221, .08); }
.qs > li > .qs__court > .sport--ill { inset: 5% 7%; color: rgba(242, 235, 221, .42); }
.sport--ill * { stroke-width: .7; }
.sport--ill .dim { stroke: rgba(242, 235, 221, .2); }
.sport--ill .mid { stroke: rgba(242, 235, 221, .3); }
.sport--ill .thin { stroke-width: .9; }
.sport--ill .thick { stroke-width: 1.6; }
.sport--ill .ring { stroke-width: .7; }
.sport--ill .node { stroke: var(--sky); fill: #12151C; }
.sport--ill .stripe { fill: rgba(242, 235, 221, .025); }
.sport--ill .band { fill: rgba(242, 235, 221, .03); }
.sport--ill .band2 { fill: rgba(18, 21, 28, .6); }
.sport--ill .hit { fill: rgba(242, 235, 221, .55); }
.sport--ill .yr { font: 500 7px/1 var(--sans); letter-spacing: .04em; }
.sport--ill text.q { font: 300 22px/1 var(--serif); }
.js .sport--ill .fill, .js .sport--ill .stripe, .js .sport--ill .band, .js .sport--ill .band2, .js .sport--ill .hit, .js .sport--ill circle[fill^="url"] { opacity: 0; transition: opacity 1.2s ease .9s; }
.js .is-in .sport--ill .fill, .js .is-in .sport--ill .stripe, .js .is-in .sport--ill .band, .js .is-in .sport--ill .band2, .js .is-in .sport--ill .hit, .js .is-in .sport--ill circle[fill^="url"] { opacity: 1; }
.sport--ill .stroke-none { stroke: none; }
@media (max-width: 680px) { .sport--ill * { stroke-width: 1.1; } .sport--ill .thick { stroke-width: 2.2; } .sport--ill .yr { font-size: 10px; } }
@media (max-width: 680px) {
  .qs > li { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 0 !important; }
  .qs > li > .qs__court { flex: none; width: 100%; aspect-ratio: 16 / 10; padding: 0; }
  .qs > li > .qs__court > .sport--ill { inset: 6% 0; }
  .sport--ill * { stroke-width: .8; } .sport--ill .thick { stroke-width: 1.7; } .sport--ill .yr { font-size: 8px; }
}
.qs > li > .qs__court > .sport--ill { width: 86%; height: 90%; left: 7%; top: 5%; right: auto; bottom: auto; }
@media (max-width: 680px) { .qs > li > .qs__court > .sport--ill { width: 100%; height: 88%; left: 0; top: 6%; } }

/* ── Cụm 3 câu hỏi: timeline vẽ — xám trước, xanh sau, xanh đi từ điểm đầu → điểm cuối ── */
.js .sport--ill :not([stroke-dasharray]):not([fill="currentColor"]) { transition: stroke-dashoffset 1.3s cubic-bezier(.6, 0, .2, 1) .1s; }
.js .sport--ill [stroke-dasharray] { transition: opacity .8s ease .5s; }
.js .sport--ill text { transition: opacity .8s ease .9s; }
.js .sport--ill .fill, .js .sport--ill .stripe, .js .sport--ill .band, .js .sport--ill .band2, .js .sport--ill .hit { transition: opacity 1s ease .2s; }
.js .sport--ill .sq { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1;
  transition: stroke-dashoffset var(--t, 1s) var(--e, cubic-bezier(.45, 0, .25, 1)) var(--d, 1.7s) !important; }
.js .is-in .sport--ill .sq { stroke-dashoffset: 0; }
.sport--ill .mk { stroke: #fff; stroke-width: 9 !important; fill: none; }
.js .sport--ill .msk { opacity: 1 !important; transition: none !important; }
.js .sport--ill .pop { opacity: 0; transform: scale(.35); transform-box: fill-box; transform-origin: center;
  transition: opacity .35s ease var(--d, 2s), transform .55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 2s) !important; }
.js .is-in .sport--ill .pop { opacity: 1; transform: none; }
.js .sport--ill text.pop { transform: translateY(4px); }
.js .is-in .sport--ill text.pop { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .sport--ill .sq { stroke-dashoffset: 0 !important; } .js .sport--ill .pop { opacity: 1 !important; transform: none !important; } }

/* ---- Ba câu hỏi: ảnh diễn đàn lệch xuống chút; cụm câu hỏi trượt lên đè dần lên dải ảnh ---- */
.qband img { object-position: center 55%; }
.qover { position: relative; z-index: 2; margin-bottom: calc(var(--qd, 0px) * -1); will-change: transform; }
.qs > li > .qs__court { background: radial-gradient(120% 90% at 50% 0%, rgba(141, 183, 255, .07), rgba(141, 183, 255, 0) 60%), linear-gradient(rgba(242, 235, 221, .015), rgba(242, 235, 221, .015)), var(--ink);
  box-shadow: 0 -18px 48px -12px rgba(8, 10, 14, .55); }
@media (prefers-reduced-motion: reduce) { .qover { margin-bottom: 0; } }
.qover .h2 { text-shadow: 0 2px 28px rgba(8, 10, 14, .55); }

/* ---- Diễn đàn qua các kỳ: ba kỳ, ba tầng thông tin — năm → tiêu đề → ba con số; cuối cột chữ nhỏ ---- */
.ms { margin-top: clamp(8px, 1.5vw, 20px); }
.ms__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms__col { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 36px) clamp(18px, 2.4vw, 40px) 0; border-left: 1px solid var(--rule-l); }
.ms__col:first-child { padding-left: 0; border-left: 0; }
.ms__col:last-child { padding-right: 0; }
.ms__cols { border-top: 1px solid var(--rule-l); }
.ms__bar { position: absolute; top: -1px; left: 0; height: 3px; width: calc(38% + var(--i) * 31%); background: var(--blue); opacity: calc(.45 + var(--i) * .275);
  transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(var(--i) * .18s); }
.ms__col:not(:first-child) .ms__bar { left: clamp(18px, 2.4vw, 40px); width: calc((100% - clamp(18px, 2.4vw, 40px)) * (.38 + var(--i) * .31)); }
.js .gr:not(.is-in) .ms__bar { transform: scaleX(0); }
.ms__k { font: 600 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.ms__y { margin-top: 10px; font: 300 clamp(64px, 6.6vw, 104px)/.9 var(--serif); letter-spacing: -.05em; color: var(--ink); }
.ms__col:last-child .ms__y { color: var(--blue); }
.ms__h { margin-top: clamp(18px, 1.8vw, 26px); font: 400 clamp(20px, 1.75vw, 26px)/1.22 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; min-height: 2.44em; max-width: 18ch; }
.ms__st { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(22px, 2.6vw, 44px); margin: clamp(24px, 2.4vw, 34px) 0 0; }
.ms__st div { display: flex; flex-direction: column-reverse; gap: 4px; }
.ms__st dd { margin: 0; font: 300 clamp(30px, 2.8vw, 42px)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.ms__st dt { font: 500 12px/1.2 var(--sans); color: var(--slate); }
.ms__na { color: var(--stone); }
.ms__lead { margin-top: clamp(24px, 2.4vw, 32px); padding-top: 14px; border-top: 1px solid var(--rule-l); font-size: 13px; color: var(--slate); }
.ms__lead b { font-weight: 500; color: var(--ink); }
.ms__act { margin-top: 10px; font-size: 13px; }
.ms__link { color: var(--blue); font-weight: 500; text-decoration: none; }
.ms__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ms__soon { color: var(--stone); }
.ms__y, .ms__h, .ms__st, .ms__k { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.05s + var(--i) * .09s); }
.js .gr:not(.is-in) .ms__y, .js .gr:not(.is-in) .ms__h, .js .gr:not(.is-in) .ms__st, .js .gr:not(.is-in) .ms__k { opacity: 0; transform: translateY(18px); }
@media (max-width: 680px) {
  .ms__cols { grid-template-columns: 1fr; border-top: 0; }
  .ms__col, .ms__col:first-child, .ms__col:last-child { padding: 26px 0 30px; border-left: 0; border-top: 1px solid var(--rule-l); }
  .ms__col:not(:first-child) .ms__bar, .ms__bar { left: 0; width: calc(38% + var(--i) * 31%); }
  .ms__h { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .ms__bar, .ms__y, .ms__h, .ms__st, .ms__k { transition: none; } .js .gr:not(.is-in) .ms__bar { transform: none; } .js .gr:not(.is-in) .ms__y, .js .gr:not(.is-in) .ms__h, .js .gr:not(.is-in) .ms__st, .js .gr:not(.is-in) .ms__k { opacity: 1; transform: none; } }
.ms__st div { flex-direction: column; gap: 6px; }
.ms__h { max-width: 22ch; }

/* ===================== MOBILE PASS (≤680px) — gọn chiều dài, dễ đọc bằng một tay ===================== */
.ct__open { display: none; }
@media (max-width: 680px) {
  /* header: có nền ngay khi bắt đầu cuộn, không để chữ trang chạy lẫn dưới logo */
  .hdr { transition: background-color .25s ease; }

  /* 3 câu hỏi: hình nhỏ bên trái, câu hỏi bên phải — mỗi câu một hàng thay vì một khung cao */
  .qs > li { flex-direction: row !important; align-items: center; gap: 16px !important; padding: 16px 0 !important; border-top: 1px solid rgba(242, 235, 221, .08) !important; }
  .qs > li:first-child { border-top: 0 !important; padding-top: 4px !important; }
  .qs > li > .qs__court { flex: 0 0 34vw; width: 34vw; aspect-ratio: 1 / .94; padding: 0; }
  .qs > li > .qs__txt { gap: 8px; padding-right: 0; }
  .qs > li .qs__q { font-size: clamp(20px, 5.6vw, 24px); line-height: 1.2; }

  /* Ai nên tham dự: chữ vừa trong lòng sân, không bị mép làn chạy cắt */
  .wheel__list li { font-size: clamp(22px, 6.4vw, 27px) !important; max-width: calc(100% - 96px) !important; padding: 2px 6px !important; }

  /* Liên hệ trên trang chủ: chỉ hiện đầu mối + nút mở mẫu */
  #lien-he .ct__open { display: inline-flex; justify-self: start; margin-top: 4px; }
  #lien-he .ct__open span { transition: transform .3s ease; }
  #lien-he.ct-open .ct__open span { transform: rotate(180deg); }
  #lien-he .ct__form { display: none; }
  #lien-he.ct-open .ct__form { display: block; }
}
@media (max-width: 680px) {
  /* dải làn đích cuối phần tài trợ: ở màn hẹp chỉ còn một vệt lẻ → bỏ, trả lại khoảng trống */
  .sp__lanes { display: none; }
  .sec.sec--sp { padding-bottom: var(--sec); }
  /* chữ chạy hẹp hơn để không chạm phần cong của sân ở trên và dưới */
  .wheel__list li { max-width: min(240px, calc(100% - 130px)) !important; }
}

/* ===================== MOBILE PASS 2 (≤680px) ===================== */
@media (max-width: 680px) {
  /* Hero: tiêu đề lên đầu màn hình; cụm "Hà Nội – 2027" + hai nút nằm ngay dưới màn hình đầu tiên */
  .hero { min-height: 0; }
  .hero__in { justify-content: flex-start; gap: 0; min-height: calc(100svh + 196px); padding-top: 96px; padding-bottom: 44px; }
  .hero__h { margin-top: 22px; }
  .hero__foot { display: contents; }
  .hero__lead { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(242, 235, 221, .22); }
  .hero__right { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(242, 235, 221, .22); }
  .intro .hero__lead, .intro .hero__right { opacity: 0; transform: translateY(16px); }
  .intro.intro-go .hero__lead, .intro.intro-go .hero__right { opacity: 1; transform: none; transition: opacity 1s var(--ease) 1.75s, transform 1.2s var(--ease) 1.75s; }

  /* Diễn giả: mỗi người một thẻ dọc lớn như desktop, xếp xuống dòng */
  .hs .spks--g { display: grid !important; grid-template-columns: 1fr !important; gap: 36px !important; margin-top: 14px; }
  .hs .spks--g .spk { width: auto; }
  .hs .spks--g .spk__ph { width: 100%; margin-bottom: 12px; }
  .hs .spks--g .spk__ph span { font-size: 72px; }
  .hs .spks--g .spk__n { font-size: 24px; }
  .hs .spks--g .spk__r { font-size: 14.5px; }
  .hs .spks--g .spk__at { font-size: 14px; }

  /* Ấn phẩm: một thẻ một hàng, xếp dọc thay vì vuốt ngang */
  .sec--pubs .pubs, .pubs { display: grid; grid-template-columns: 1fr; gap: 44px; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .pubs .pub { flex: none; width: auto; }

  /* Đối tác: 2 logo một hàng */
  .sec--sp .sp__logos .logo, .sec--sp .sp__row--many .logo { width: calc((100% - 8px) / 2); height: 72px; font-size: 12px; }

  /* Diễn đàn qua các kỳ: một trục thời gian liền mạch — mỗi kỳ một thẻ, nối bằng đường dọc và chấm mốc */
  .ms__cols { position: relative; padding-left: 26px; border-top: 0; }
  .ms__cols::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: 26px; width: 1px; background: rgba(18, 21, 28, .18); }
  .ms__col, .ms__col:first-child, .ms__col:last-child { padding: 18px 18px 16px; margin-bottom: 14px; border: 1px solid var(--rule-l); border-radius: 6px; background: rgba(255, 255, 255, .6); }
  .ms__col:last-child { margin-bottom: 0; border-color: rgba(0, 87, 255, .35); background: #fff; }
  .ms__col::before { content: ""; position: absolute; left: -26px; top: 24px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper, #F5F2EA); border: 2px solid rgba(18, 21, 28, .35); box-sizing: border-box; }
  .ms__col:last-child::before { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 87, 255, .14); }
  .ms__bar { display: none; }
  .ms__k { font-size: 10.5px; }
  .ms__y { margin-top: 6px; font-size: 46px; }
  .ms__h { margin-top: 10px; font-size: 19px; max-width: none; min-height: 0; }
  .ms__st { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 16px; border-top: 1px solid var(--rule-l); border-bottom: 1px solid var(--rule-l); }
  .ms__st div { padding: 10px 0 10px 12px; border-left: 1px solid var(--rule-l); }
  .ms__st div:first-child { padding-left: 0; border-left: 0; }
  .ms__st dd { font-size: 28px; }
  .ms__st dt { font-size: 11.5px; }
  .ms__lead { margin-top: 12px; padding-top: 0; border-top: 0; font-size: 12.5px; }
  .ms__act { margin-top: 6px; font-size: 12.5px; }
}
@media (max-width: 680px) {
  /* Hero: tiêu đề trên cùng, đoạn giới thiệu nằm sát đáy màn hình đầu tiên, cụm nút ngay dưới màn hình */
  .hero__in { min-height: calc(100svh + 206px); }
  .hero__lead { margin-top: auto; margin-bottom: 28px; }
  .hero__right { margin-top: 0; }
}
@media (max-width: 680px) {
  /* Hero: chữ nhỏ lại một chút; "Hà Nội – 2027" lên ngay dưới tiêu đề, cụm nút vẫn nằm dưới màn hình đầu */
  .hero__name { font-size: 11px; letter-spacing: .09em; }
  .hero .hero__title { font-size: clamp(33px, 9.1vw, 48px); }
  .hero__right { display: contents; }
  .hero__top, .hero__h { order: -2; }
  .hero__right .hero__when { order: -1; margin-top: 20px; font-size: 19px; color: var(--cream); }
  .hero__acts { margin-top: 0; padding-top: 22px; border-top: 1px solid rgba(242, 235, 221, .22); }
  .intro .hero__when, .intro .hero__acts { opacity: 0; transform: translateY(16px); }
  .intro.intro-go .hero__when, .intro.intro-go .hero__acts { opacity: 1; transform: none; transition: opacity 1s var(--ease) 1.75s, transform 1.2s var(--ease) 1.75s; }
}
@media (max-width: 680px) { .hero__in { min-height: calc(100svh + 171px); } }

/* ===== Ba câu hỏi v2: cụm câu hỏi ở trên, dải ảnh hội trường ở dưới trượt lên đè dần lên đáy cụm ===== */
.qover { margin-bottom: 0; transform: none !important; will-change: auto; z-index: 1; padding-bottom: calc(var(--qd, 0px) + clamp(40px, 5vw, 72px)); }
.qover .h2 { text-shadow: none; }
.qband { position: relative; z-index: 2; margin: 0 calc(var(--gutter) * -1) calc(var(--qd, 0px) * -1); will-change: transform;
  box-shadow: 0 -28px 60px -20px rgba(4, 6, 10, .7); }
.qband::after { background: linear-gradient(180deg, rgba(18, 21, 28, .25) 0%, rgba(18, 21, 28, 0) 18%, rgba(18, 21, 28, 0) 72%, var(--ink) 100%); }
.sec.sec--q { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .qover { padding-bottom: clamp(40px, 5vw, 72px); } .qband { margin-bottom: 0; } }

/* ===== Diễn đàn qua các kỳ: ảnh thumb mỗi kỳ, lớp gradient tối ở đáy để chữ năm nổi rõ trên ảnh nhiều chi tiết ===== */
.ms__th { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; margin: 0 0 clamp(16px, 1.6vw, 22px); border-radius: 4px; background: #0B1F4A; }
.ms__th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; }
.ms__th::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 10, 22, .1) 0%, rgba(6, 10, 22, 0) 28%, rgba(6, 10, 22, .55) 58%, rgba(6, 10, 22, .9) 100%); }
.ms__th--ph { background: radial-gradient(110% 90% at 85% 0%, #2457d6 0%, #0E2C78 42%, #071433 100%); }
.ms__th--ph::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.2px); background-size: 14px 14px; }
.ms__wait { position: absolute; top: 12px; right: 12px; padding: 4px 8px; border: 1px dashed rgba(255, 255, 255, .45); border-radius: 3px; font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.ms__cap { position: absolute; left: clamp(14px, 1.4vw, 20px); right: clamp(14px, 1.4vw, 20px); bottom: clamp(10px, 1.1vw, 16px); display: grid; gap: 4px; }
.ms__th .ms__k { color: rgba(255, 255, 255, .78); }
.ms__th .ms__y { margin: 0; color: #fff; font-size: clamp(52px, 5vw, 80px); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.ms__col:last-child .ms__th .ms__y { color: #fff; }
.ms__h { margin-top: 0; }
@media (max-width: 680px) {
  .ms__th { margin: -18px -18px 16px; border-radius: 5px 5px 0 0; }
  .ms__th .ms__y { font-size: 46px; }
  .ms__col::before { top: 40px; }
}
@media (min-width: 681px) { .ms__th { aspect-ratio: auto; height: clamp(190px, 17vw, 270px); } }
.ms__lead { font-size: 14px; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 680px) { .ms__lead { font-size: 13.5px; } }

/* ===== Ai nên tham dự: nhãn to, dễ đọc; sân chạy vẽ từ vạch xuất phát, ngược chiều kim đồng hồ, nhanh hơn 10% ===== */
.wheel__label { font-size: 17px; letter-spacing: .06em; gap: 12px; }
.wheel__label .chip__mark { width: 26px; height: 26px; font-size: 15px; border-radius: 4px; }
@media (max-width: 680px) { .wheel__label { font-size: 15px; } .wheel__label .chip__mark { width: 22px; height: 22px; font-size: 13px; } }
.js .stad { -webkit-mask-image: conic-gradient(from var(--s0, 180deg), transparent calc(360deg - var(--sa)), #000 0); mask-image: conic-gradient(from var(--s0, 180deg), transparent calc(360deg - var(--sa)), #000 0); transition: --sa 2.36s cubic-bezier(.6, 0, .2, 1); }
.js .stad.is-in { --sa: 360deg; }
/* vạch xuất phát rõ hơn và luôn hiện từ đầu */
.stad__start { width: 2px; background: rgba(242, 235, 221, .7); }
.stad__nums b { color: rgba(242, 235, 221, .62); }
@media (max-width: 680px) { .stad__start { width: calc(var(--lane) * 8); height: 2px; } }
@media (prefers-reduced-motion: reduce) { .js .stad { -webkit-mask-image: none; mask-image: none; } }

/* ===== Ai nên tham dự: tiêu đề phần (h2) như các phần khác, đặt góc trên trái; sân chạy lùi xuống nhường chỗ ===== */
.wheel__stick { --st: clamp(176px, 21vh, 210px); }
.stad { top: var(--st); }
.wheel__title { position: absolute; left: 0; top: clamp(92px, 11vh, 112px); z-index: 2; margin: 0; color: #FAF6EC; }
@media (max-width: 680px) {
  .wheel__stick { --st: 150px; }
  .stad { top: var(--st); }
  .wheel__title { top: 84px; font-size: 34px; }
}
/* tâm danh sách, vạch ngang và nút đặt đúng tâm sân chạy (sân đã lùi xuống) */
.wheel__stick { --wc: calc(50% + (var(--st) - var(--sb)) / 2); }
.wheel__list li { top: var(--wc); }
.wheel__rule { top: var(--wc); }
@media (min-width: 681px) { .wheel__btn { top: calc(var(--wc) + 12px); } }

/* ===== Sân chạy 400 m vẽ theo tỉ lệ thật (SVG): 8 làn, vạch đích, vạch xuất phát so le, số làn ===== */
.js .stad { -webkit-mask-image: none !important; mask-image: none !important; }
.stad__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stad__svg--v { display: none; }
@media (max-width: 680px) { .stad__svg--h { display: none; } .stad__svg--v { display: block; } }
.stad__ln { fill: none; stroke: rgba(242, 235, 221, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stad__ln--k { stroke: rgba(242, 235, 221, .34); }
.stad__fin { stroke: rgba(242, 235, 221, .8); stroke-width: 2; vector-effect: non-scaling-stroke; }
.stad__tk { stroke: rgba(242, 235, 221, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.stad__num text { fill: rgba(242, 235, 221, .62); font: 600 1.05px/1 var(--sans); text-anchor: middle; dominant-baseline: central; }
.js .stad__ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.36s cubic-bezier(.6, 0, .2, 1); }
.js .stad.is-in .stad__ln { stroke-dashoffset: 0; }
.js .stad__tk { opacity: 0; transition: opacity .4s ease calc(.35s + var(--n) * .06s); }
.js .stad.is-in .stad__tk { opacity: 1; }
.wheel__stick .wheel__list { -webkit-mask-image: none !important; mask-image: none !important; }
@media (prefers-reduced-motion: reduce) { .js .stad__ln { stroke-dashoffset: 0; transition: none; } .js .stad__tk { opacity: 1; transition: none; } }
/* nét theo đơn vị mét (không dùng non-scaling-stroke vì làm sai độ dài nét đứt khi vẽ dần) — ~1px trên màn hình */
.stad__ln, .stad__fin, .stad__tk { vector-effect: none; }
.stad__svg--h .stad__ln { stroke-width: .15; } .stad__svg--h .stad__fin { stroke-width: .3; } .stad__svg--h .stad__tk { stroke-width: .22; }
.stad__svg--v .stad__ln { stroke-width: .3; } .stad__svg--v .stad__fin { stroke-width: .6; } .stad__svg--v .stad__tk { stroke-width: .42; }

/* ===== Trang VSES23 / VSES24: ba phiên thảo luận + điều hướng giữa các kỳ ===== */
.eses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-l); }
.eses__i { padding: 26px clamp(18px, 2.4vw, 36px) 8px; border-left: 1px solid var(--rule-l); }
.eses__i:first-child { padding-left: 0; border-left: 0; }
.eses__n { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.eses__t { margin-top: 14px; font: 400 clamp(21px, 1.9vw, 28px)/1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.eses__who { margin-top: 18px; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--slate); }
.eses__who li { padding-top: 10px; border-top: 1px solid var(--rule-l); }
.ednav { margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--rule-d); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; }
.ednav__a { display: grid; gap: 6px; text-decoration: none; color: var(--cream); }
.ednav__a span { font-size: 13px; color: var(--stone); }
.ednav__a b { font: 300 clamp(32px, 3.4vw, 52px)/1 var(--serif); letter-spacing: -.03em; }
.ednav__a:hover b { color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ednav__a--r { text-align: right; justify-self: end; }
.ednav__all { font-size: 14px; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 680px) {
  .eses { grid-template-columns: 1fr; }
  .eses__i, .eses__i:first-child { padding: 22px 0 18px; border-left: 0; border-top: 1px solid var(--rule-l); }
  .eses__i:first-child { border-top: 0; }
  .ednav { grid-template-columns: 1fr 1fr; }
  .ednav__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 8px; }
}
/* thumb/năm bấm được → trang từng kỳ */
.ms__go, .ed__go { display: block; color: inherit; text-decoration: none; }
.ms__go .ms__th img, .ed__go .aura__img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ms__go:hover .ms__th img, .ed__go:hover .aura__img { transform: scale(1.04); }
.ms__go:hover .ms__y, .ed__go:hover .ed__y { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.ms__go:focus-visible, .ed__go:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.tbl__y { color: inherit; text-decoration: none; }
.tbl__y:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ===== Ảnh trong trang từng kỳ: ảnh bìa toàn khổ, cặp ảnh, ảnh từng phiên; khung chờ ảnh khi chưa có ===== */
.pf { margin: 0; }
.pf__m { position: relative; overflow: hidden; border-radius: 4px; background: #0B1F4A; aspect-ratio: 3 / 2; }
.pf__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf figcaption { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--stone); }
.light .pf figcaption { color: var(--slate); }
.pf--ph .pf__m { background: radial-gradient(110% 90% at 85% 0%, #2457d6 0%, #0E2C78 42%, #071433 100%); }
.pf--ph .pf__m::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.2px); background-size: 14px 14px; }
.pf__tag { position: absolute; top: 12px; left: 12px; padding: 4px 8px; border: 1px dashed rgba(255, 255, 255, .45); border-radius: 3px; font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.pcover { padding: 0 var(--gutter); }
.pcover .pf--cover .pf__m { aspect-ratio: auto; height: clamp(260px, 44vw, 640px); border-radius: 0; margin: 0 calc(var(--gutter) * -1); }
.pcover .pf--cover figcaption { padding-top: 2px; }
.pf2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(40px, 5vw, 72px); }
.pf2 + .ag3 { margin-top: clamp(32px, 4vw, 56px); }
.pf2--port .pf__m { aspect-ratio: 4 / 3; }
.pf2--port .pf:first-child img { object-position: 50% 22%; }
.pf--ses { margin-bottom: 18px; }
.pf--ses .pf__m { aspect-ratio: 4 / 3; }
.pf--ses figcaption { display: none; }
@media (max-width: 680px) {
  .pf2 { grid-template-columns: 1fr; }
  .pcover .pf--cover .pf__m { height: 240px; }
}
@media (min-width: 681px) { .pf--ses .pf__m { aspect-ratio: auto; height: clamp(180px, 15vw, 240px); } }

/* ===== Báo chí viết về VSES: thẻ ngang, cuộn ngang có nút ←/→, bấm mở bài gốc ở tab mới ===== */
.nw { margin-top: clamp(40px, 5vw, 64px); }
.nw__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nw__bar .label--sub { margin: 0; }
.nw__ctl { display: flex; gap: 8px; }
.nw__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-d); background: transparent; color: var(--cream); font: 400 18px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.nw__btn:hover { background: var(--cream); color: var(--ink); }
.nw__btn[disabled] { opacity: .3; cursor: default; background: transparent; color: var(--cream); }
.nw__rail { display: flex; gap: 16px; margin: 20px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.nw__rail::-webkit-scrollbar { display: none; }
.nw__i { flex: 0 0 clamp(270px, 28vw, 380px); scroll-snap-align: start; }
.nw__c { height: 100%; min-height: 230px; display: flex; flex-direction: column; gap: 18px; padding: 22px 22px 20px; border: 1px solid var(--rule-d); border-radius: 6px; background: rgba(242, 235, 221, .03); color: var(--cream); text-decoration: none; transition: border-color .25s, background .25s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.nw__c:hover { border-color: rgba(242, 235, 221, .45); background: rgba(242, 235, 221, .06); transform: translateY(-3px); }
.nw__m { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--stone); }
.nw__m b { font-weight: 600; color: var(--sky); letter-spacing: .02em; }
.nw__t { flex: 1; font: 400 clamp(19px, 1.55vw, 23px)/1.28 var(--serif); letter-spacing: -.015em; color: #FAF6EC; text-wrap: pretty; }
.nw__go { font: 500 13.5px/1 var(--sans); color: var(--cream); }
.nw__c:hover .nw__go { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 680px) { .nw__i { flex-basis: 82%; } .nw__ctl { display: none; } }

/* ===== VSES 2026: báo cáo, thông điệp Bộ trưởng, kinh nghiệm Hàn Quốc, đề xuất ===== */
.x26__ctx { margin-top: 20px; font-size: 14.5px; line-height: 1.55; color: var(--stone); max-width: 40em; }
.x26__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-l); }
.x26__nums div { padding: 24px clamp(16px, 2.4vw, 36px) 0; border-left: 1px solid var(--rule-l); }
.x26__nums div:first-child { padding-left: 0; border-left: 0; }
.x26__nums b { display: block; font: 300 clamp(48px, 5.6vw, 88px)/.95 var(--serif); letter-spacing: -.045em; color: var(--ink); }
.x26__nums div:first-child b { color: var(--blue); }
.x26__nums span { display: block; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--slate); max-width: 22em; }
.x26__note { margin-top: clamp(28px, 3vw, 44px); font-size: 15px; line-height: 1.55; color: var(--slate); max-width: 46em; }
.qts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qts--3 .qt p { font-size: clamp(24px, 2.2vw, 34px); }
.x26__who { margin-top: 24px; font-size: 14px; color: var(--stone); }
.x26__kr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); }
.lst--l li { color: var(--ink); border-color: var(--rule-l); }
.light .facts2__k { color: var(--slate); }
.x26__krn { display: grid; gap: 0; }
.x26__krn div { padding: 16px 0; border-top: 1px solid var(--rule-l); }
.x26__krn b { display: block; font: 300 clamp(30px, 2.8vw, 42px)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.x26__krn span { display: block; margin-top: 6px; font-size: 14px; color: var(--slate); }
.x26__prop { counter-reset: pp; display: grid; gap: 0; border-top: 1px solid var(--rule-l); }
.x26__prop li { counter-increment: pp; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 18px 0; border-bottom: 1px solid var(--rule-l); font: 400 clamp(18px, 1.5vw, 22px)/1.4 var(--serif); color: var(--ink); }
.x26__prop li::before { content: counter(pp, decimal-leading-zero); font: 600 12px/2 var(--sans); color: var(--blue); }
.x26__bq { margin: clamp(32px, 4vw, 56px) 0 0; padding-left: 20px; border-left: 3px solid var(--blue); }
.x26__bq p { font: 300 clamp(24px, 2.4vw, 36px)/1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); max-width: 28em; }
.x26__bq cite { display: block; margin-top: 12px; font: 400 14px/1.4 var(--sans); font-style: normal; color: var(--slate); }
@media (max-width: 680px) {
  .x26__nums, .qts--3, .x26__kr { grid-template-columns: 1fr; }
  .x26__nums div, .x26__nums div:first-child { padding: 20px 0; border-left: 0; border-top: 1px solid var(--rule-l); }
  .x26__nums div:first-child { border-top: 0; }
  .x26__prop li { grid-template-columns: 40px minmax(0, 1fr); }
}
.x26__nums, .x26__kr, .x26__prop { margin-top: clamp(28px, 3.4vw, 52px); }

/* tiêu đề hiện từng chữ: nhanh hơn (trước .9s) */
.js .reveal.is-split .w > span { transition-duration: .6s; }

/* ---- Câu hỏi thường gặp (trang Giới thiệu) ---- */
.faq { display: grid; margin-top: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--rule-d); }
.faq__i { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 72px); padding: clamp(22px, 2.4vw, 32px) 0; border-top: 1px solid var(--rule-d); }
.faq__q { font: 400 clamp(21px, 1.9vw, 27px)/1.25 var(--serif); letter-spacing: -.012em; color: var(--cream); }
.faq__a { margin: 0; font: 400 16.5px/1.6 var(--sans); color: rgba(242, 235, 221, .74); max-width: 40em; }
@media (max-width: 680px) { .faq__i { grid-template-columns: 1fr; gap: 10px; } .faq__a { font-size: 15.5px; } }

/* ---- Tài trợ: bóng đá $ lăn về đích — vẽ nét như các hình minh hoạ (xám trước, xanh sau) ---- */
.sprun { --bs: clamp(56px, 5.4vw, 80px); --gy: 14px; --ink: rgba(18, 21, 28, .5); --ink2: rgba(18, 21, 28, .2);
  height: calc(var(--bs) * 1.35 + var(--gy) + 10px); overflow: visible; pointer-events: none; }
.sp__lanes.sprun { overflow: visible; }
.sprun__track { position: absolute; inset: 0; }
.sprun__ground { position: absolute; left: 0; right: 0; bottom: var(--gy); height: 7px; transform: translateY(1px);
  background:
    repeating-linear-gradient(90deg, var(--ink2) 0 1px, transparent 1px 120px) left bottom / 100% 6px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) left bottom / 100% 1px no-repeat;
  transform-origin: 0 100%; transition: transform 1.2s cubic-bezier(.6, 0, .2, 1); }
/* quãng đường bóng đã lăn: nét đứt xanh như các nét xanh trong hình minh hoạ */
.sprun__lit { position: absolute; left: 0; bottom: var(--gy); width: 100%; height: 1.5px; transform-origin: 0 50%; transform: scaleX(0);
  background: repeating-linear-gradient(90deg, #0065F2 0 5px, transparent 5px 9px); }
.sprun__fin { position: absolute; right: var(--gutter); bottom: var(--gy); height: calc(var(--bs) * 1.3); width: calc(var(--bs) * .39); overflow: visible; }
.sprun__g { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sprun__sq { fill: var(--ink2); transition: fill .45s ease; }
.sprun.is-fin .sprun__sq { fill: #0065F2; }
.sprun__ball { position: absolute; left: 0; bottom: var(--gy); width: var(--bs); height: var(--bs); will-change: transform; transform: translate3d(calc(var(--bs) * -1.4), 0, 0); }
.sprun__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateY(5.8%); }   /* đáy bóng chạm mặt đất */
.sprun__face { fill: #F7F5EE; }
.sprun__pent { fill: #0065F2; }
.sprun__seam { fill: none; stroke: var(--ink2); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sprun__d { font: 400 15px/1 var(--serif); fill: #F7F5EE; }
.sprun__rim { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sprun__shadow { position: absolute; left: 22%; right: 22%; bottom: -2px; height: 3px; border-radius: 50%; background: rgba(18, 21, 28, .1); }
/* vệt chuyển động: hai nét mảnh xanh nét đứt phía sau bóng */
.sprun__trail { position: absolute; right: 62%; top: 0; bottom: 0; width: calc(var(--bs) * 1.6); transform-origin: 100% 50%; opacity: 0; }
.sprun__trail i { position: absolute; right: 0; height: 1px; background: repeating-linear-gradient(90deg, #0065F2 0 4px, transparent 4px 8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.sprun__trail i:nth-child(1) { top: 34%; width: 70%; }
.sprun__trail i:nth-child(2) { top: 62%; width: 100%; }
/* vẽ dần khi vào màn hình: nét xám trước (đất → vành bóng → cột đích), rồi múi xanh và chữ $ */
.js .sprun:not(.is-on) .sprun__ground { transform: translateY(1px) scaleX(0); }
.js .sprun__g, .js .sprun__rim { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .2, 1) .5s; vector-effect: none; stroke-width: 1.1; }
.js .sprun__rim { transition-delay: .2s; }
.js .sprun__seam, .js .sprun__face { opacity: 0; transition: opacity .6s ease .6s; }
.js .sprun__pent, .js .sprun__d, .js .sprun__sq, .js .sprun__shadow { opacity: 0; transition: opacity .6s ease 1s, fill .45s ease; }
.js .sprun.is-on .sprun__g, .js .sprun.is-on .sprun__rim { stroke-dashoffset: 0; }
.js .sprun.is-on .sprun__seam, .js .sprun.is-on .sprun__face, .js .sprun.is-on .sprun__pent, .js .sprun.is-on .sprun__d,
.js .sprun.is-on .sprun__sq, .js .sprun.is-on .sprun__shadow { opacity: 1; }
@media (max-width: 680px) {
  .sp__lanes.sprun { display: block; bottom: 16px; }
  .sprun { --bs: 54px; --gy: 10px; }
  .sprun__ground { background:
    repeating-linear-gradient(90deg, var(--ink2) 0 1px, transparent 1px 64px) left bottom / 100% 6px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) left bottom / 100% 1px no-repeat; }
  .js .sprun__rim, .sprun__rim { stroke-width: 1.6; }
  .sec.sec--sp { padding-bottom: calc(var(--sec) + 100px); }
}
@media (prefers-reduced-motion: reduce) { .sprun * { transition: none !important; } }

/* vỏ bọc island React: không tạo hộp riêng, giữ nguyên bố cục */
.island { display: contents; }

/* ---- Video nhìn lại VSES 2026 ---- */
.vid { margin: clamp(32px, 4vw, 56px) 0 0; }
.vid__m { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #050E2C; }
.vid__v { display: block; width: 100%; height: 100%; object-fit: cover; background: #050E2C; }
.vid__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; border: 0; padding: 0; cursor: pointer; color: #F7F5EE;
  background: linear-gradient(180deg, rgba(5, 14, 44, .05) 30%, rgba(5, 14, 44, .55)); transition: background .3s ease; }
html:not(.js) .vid__play { display: none; }
.vid__btn { display: grid; place-items: center; width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px); border-radius: 50%; background: #0065F2; color: #fff;
  box-shadow: 0 0 0 0 rgba(0, 101, 242, .5); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.vid__btn svg { width: 38%; height: 38%; margin-left: 6%; }
.vid__lab { font: 500 16px/1 var(--sans); letter-spacing: .01em; }
.vid__d { margin-left: 8px; padding: 4px 8px; border-radius: 4px; background: rgba(247, 245, 238, .16); font-size: 13px; font-variant-numeric: tabular-nums; }
.vid__play:hover .vid__btn, .vid__play:focus-visible .vid__btn { transform: scale(1.07); box-shadow: 0 0 0 12px rgba(0, 101, 242, .18); }
.vid.is-playing .vid__play { display: none; }
.vid figcaption { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--stone); }
.vid__k { font: 600 11px/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: currentColor; }
.dark .vid figcaption .vid__k { color: var(--cream); }
.light .vid figcaption { color: var(--slate); }
.light .vid figcaption .vid__k { color: var(--ink); }
.vid--compact { max-width: 1120px; margin: clamp(56px, 6vw, 88px) auto 0; }
@media (max-width: 680px) {
  .vid figcaption { grid-template-columns: 1fr; gap: 6px; font-size: 14px; }
  .vid__play { flex-direction: column; gap: 12px; }
  .vid__lab { font-size: 14px; }
}

/* menu: trang đang mở (kể cả trang con, vd. VSES 2026 thuộc «Sự kiện») */
.mnav nav a[aria-current="page"] { color: #fff; }
.mnav nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 14px 0 2px; border-radius: 50%; background: #0065F2; vertical-align: .18em; }
/* 6 mục menu: không xuống dòng, thu khoảng cách ở màn vừa */
.hdr__nav a { white-space: nowrap; }
@media (max-width: 1360px) { .hdr__nav { gap: 20px; font-size: 13.5px; } }
@media (max-width: 1240px) { .hdr__nav { gap: 16px; font-size: 13px; } .hdr__acts .btn { padding-left: 16px; padding-right: 16px; } }

/* ngắt dòng đẹp: trình duyệt mới tự tránh dòng cuối chỉ có một chữ (kết hợp dấu cách không ngắt trong src/site.jsx) */
main p, main li, main dd, main dt, main figcaption, main blockquote, footer p, .phead__lead, .hero__lead { text-wrap: pretty; }
main h1, main h2, main h3 { text-wrap: balance; }

/* ---- Gạch chân động: mọi trạng thái hover / đang mở có gạch dưới chữ → một vạch xanh lam sáng chạy từ trái sang phải.
   Vẽ bằng nền gradient (không dùng text-decoration) nên chạy được cả khi chữ xuống dòng. ---- */
:root { --uline: #2F8BFF; }
.hdr__nav a, .ednav__a b, .ms__go .ms__y, .ed__go .ed__y, .tbl__y, .nw__go, .ms__link {
  --uh: 2px; --uo: 5px;
  text-decoration: none !important;
  background-image: linear-gradient(var(--uline), var(--uline));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% var(--uh);
  padding-bottom: var(--uo);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .55s cubic-bezier(.65, 0, .35, 1), color .25s ease;
}
.ednav__a b, .ms__go .ms__y, .ed__go .ed__y { width: fit-content; }
.ednav__a--r b { justify-self: end; margin-left: auto; }
.ms__go .ms__y, .ed__go .ed__y { --uh: 2px; --uo: 6px; }
.hdr__nav a { --uo: 6px; padding-top: 6px; }
.hdr__nav a:hover, .hdr__nav a:focus-visible, .hdr__nav a[aria-current="page"],
.ednav__a:hover b, .ednav__a:focus-visible b,
.ms__go:hover .ms__y, .ed__go:hover .ed__y, .ms__go:focus-visible .ms__y, .ed__go:focus-visible .ed__y,
.tbl__y:hover, .tbl__y:focus-visible, .nw__c:hover .nw__go, .nw__c:focus-visible .nw__go, .ms__link:hover, .ms__link:focus-visible { background-size: 100% var(--uh); }
/* mục đang mở: vạch tự chạy ra khi vào trang */
.hdr__nav a[aria-current="page"] { animation: uline-in .7s var(--ease) .35s both; }
@keyframes uline-in { from { background-size: 0% var(--uh); } to { background-size: 100% var(--uh); } }
/* rời chuột: vạch rút về bên phải cho liền mạch (vào từ trái, ra về phải) */
.hdr__nav a:not([aria-current="page"]):not(:hover):not(:focus-visible),
.ednav__a:not(:hover):not(:focus-visible) b, .tbl__y:not(:hover):not(:focus-visible), .ms__link:not(:hover):not(:focus-visible),
.nw__c:not(:hover):not(:focus-visible) .nw__go, .ms__go:not(:hover):not(:focus-visible) .ms__y, .ed__go:not(:hover):not(:focus-visible) .ed__y { background-position: 100% 100%; }

/* ---- Menu điện thoại: mở ra trượt xuống + các mục hiện lần lượt; đóng lại thu lên ---- */
.mnav { clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .42s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .42s; }
.mnav.is-open { clip-path: inset(0 0 0 0); visibility: visible;
  transition: clip-path .6s cubic-bezier(.65, 0, .35, 1), visibility 0s; }
.mnav nav a, .mnav__foot { opacity: 0; transform: translateY(18px); transition: opacity .2s ease, transform .3s ease; }
.mnav.is-open nav a, .mnav.is-open .mnav__foot { opacity: 1; transform: none;
  transition: opacity .5s ease, transform .7s var(--ease); transition-delay: calc(.22s + var(--i, 0) * .06s); }
.mnav.is-open .mnav__foot { --i: 6; }
.hdr { transition: background-color .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav.is-open, .mnav nav a, .mnav__foot { transition: none !important; }
  .hdr__nav a[aria-current="page"] { animation: none; }
}

/* ---- Chuyển trang (#pgt, nằm đầu Header): 5 cột so le ----
   rời trang (html.pgt-out): các cột tối rơi từ trên xuống lần lượt trái → phải (trễ 45ms/cột), che kín;
     logo VSES27 nhỏ hiện mờ ở giữa → sang trang mới.
   trang mới (html.pgt-in, đặt từ <head>): che sẵn; .pgt-go: logo mờ đi, các cột rút lên lần lượt trái → phải,
     nội dung lộ ra từ dưới lên theo từng cột. */
.pgt { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; --e: cubic-bezier(.76, 0, .24, 1); }
html.pgt-out .pgt, html.pgt-in .pgt { visibility: visible; }
html.pgt-out .pgt { pointer-events: auto; }
.pgt__c { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 20%); width: calc(20% + 1px); background: #02061A;
  transform: translate3d(0, -101%, 0); will-change: transform; }
/* đường chia cột rất mảnh, chỉ thấy khi các cột đứng cạnh nhau */
.pgt__c + .pgt__c { box-shadow: inset 1px 0 0 rgba(242, 235, 221, .05); }
.pgt__logo { position: absolute; left: 50%; top: 50%; width: min(26vw, 220px); transform: translate(-50%, -50%); opacity: 0; }
.pgt__logo svg { display: block; width: 100%; height: auto; }
.pgt__logo path { fill: #2A3760; }
/* rời trang */
html.pgt-out .pgt__c { transform: none; transition: transform .44s var(--e) calc(var(--i) * 45ms); }
html.pgt-out .pgt__logo { opacity: 1; transition: opacity .25s ease .4s; }
/* trang mới: che sẵn */
html.pgt-in .pgt__c { transform: none; transition: none; }
html.pgt-in .pgt__logo { opacity: 1; transition: none; }
/* trang mới: mở ra */
html.pgt-in.pgt-go .pgt__logo { opacity: 0; transition: opacity .18s ease; }
html.pgt-in.pgt-go .pgt__c { transform: translate3d(0, -101%, 0); transition: transform .5s var(--e) calc(80ms + var(--i) * 45ms); }
@media (prefers-reduced-motion: reduce) { .pgt { display: none; } }