/* ===== Design tokens =====
   Màu lấy từ CSS đang chạy trên momo.vn (design system "mobase" + biến --pinkmomo), đối chiếu 2026-11-02.
   Nếu brandbook nội bộ có giá trị khác, chỉ cần sửa trong khối này. */
:root {
  /* MoMo pink */
  --momo-pink: #a50064; /* màu logo / thương hiệu */
  --pink-50: #fef1f9;
  --pink-100: #fee5f6;
  --pink-200: #fecced;
  --pink-300: #ffa2df;
  --pink-400: #fe68c6;
  --pink-500: #eb2f96;
  --pink-600: #d42a87;
  --pink-700: #cb0b6f;
  --pink-800: #a70d5b;
  --pink-900: #8b104e;

  /* Neutral (xám ánh hồng) */
  --ink-900: #1c171a;
  --ink-800: #292427;
  --ink-700: #443b41;
  --ink-500: #796b73;
  --ink-400: #a69ba2;
  --ink-200: #e7e4e6;
  --ink-100: #f5f4f5;
  --ink-50: #faf9fa;

  /* Vai trò */
  --color-brand: var(--momo-pink);
  --color-primary: var(--pink-600);
  --color-primary-hover: var(--pink-700);
  --color-link: var(--momo-pink);
  --color-bg: #ffffff;
  --color-bg-alt: var(--ink-50);
  --color-bg-pink: var(--pink-50);
  --color-tint: var(--pink-100);
  --color-surface: #ffffff;
  --color-text: var(--ink-900);
  --color-muted: #6b5d66; /* tối hơn ink-500 một nấc để có biên AA trên nền hồng nhạt */
  --color-border: var(--ink-200);
  --color-header-bg: rgba(255, 255, 255, .86);
  --color-focus: var(--momo-pink);
  --rule-pink: rgba(165, 0, 100, .2);
  --footer-bg: var(--ink-900);
  --gradient-brand: linear-gradient(135deg, var(--pink-900) 0%, var(--momo-pink) 45%, var(--pink-600) 100%);

  /* Hero: nền hồng nhạt kiểu banner momo.vn (class bg-pink = #fee5f6) */
  --hero-bg: var(--pink-100);
  --hero-text: var(--ink-900);
  --hero-muted: var(--ink-700);
  --hero-rule: rgba(165, 0, 100, .22);


  /* Font MoMo tự host, khai báo trong css/fonts.css */
  --font-body: "Momo Trust Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Momo Trust Display", var(--font-body);
  --radius: 16px;
  --container: 1360px;
  --gut: clamp(32px, 4vw, 64px);   /* tổng lề trái + phải */
  --header-h: 64px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-link: var(--pink-400);
    --color-bg: var(--ink-900);
    --color-bg-alt: #2b2328;
    --color-bg-pink: #241821;
    --color-tint: #2d1b27;
    --color-surface: var(--ink-800);
    --color-text: var(--ink-100);
    --color-muted: var(--ink-400);
    --color-border: #54474e;
    --color-header-bg: rgba(28, 23, 26, .86);
    --color-focus: var(--pink-300);
    --rule-pink: rgba(255, 255, 255, .16);
    --footer-bg: #120e11;
    /* Hero tối giữ trường màu hồng MoMo, không chuyển sang đen */
    --hero-bg: linear-gradient(135deg, #3d0f2a 0%, var(--pink-900) 55%, #7a0a4a 100%);
    --hero-text: #ffffff;
    --hero-muted: rgba(255, 255, 255, .9);
    --hero-rule: rgba(255, 255, 255, .35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  accent-color: var(--color-primary);
  scrollbar-color: var(--pink-300) transparent;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  caret-color: var(--color-primary);
}
::selection { background: var(--pink-200); color: var(--ink-900); }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
/* Display chỉ có weight 400; tắt in đậm giả để giữ đúng nét chữ */
h1, h2 { font-family: var(--font-display); font-weight: 400; font-synthesis: none; }
h3, h4 { font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--color-link); text-underline-offset: .18em; }
[hidden] { display: none !important; }

.container { width: min(var(--container), 100% - var(--gut)); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--color-surface); color: var(--color-text); padding: 10px 14px; z-index: 100; border-radius: 8px; }
.skip-link:focus { left: 8px; }
.skip-link-2:focus { top: 56px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  font: inherit; font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid var(--color-primary);
  background: transparent; color: var(--color-link);
  cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28, 23, 26, .22); }
.btn-lg { min-height: 52px; padding: 12px 32px; font-size: 1.1rem; }
.btn-sm { padding: 8px 18px; font-size: .95rem; }
.btn-link { border-color: transparent; padding-inline: 12px; }
.btn-link:hover { background: transparent; border-color: transparent; color: var(--color-link); text-decoration: underline; }

/* ===== Thanh tiến trình cuộn ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--pink-400), var(--momo-pink));
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* ===== Header: trong suốt trên hero, đổi nền khi cuộn ===== */
.site-header {
  --nav-fg: var(--color-text);
  --nav-accent: var(--color-link);
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.site-header.scrolled {
  background: var(--color-header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 24px rgba(28, 23, 26, .06);
}
/* Menu mở: nền đặc để chữ phía sau không lọt qua */
.site-header.menu-open {
  background: var(--color-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--color-border);
}
.header-inner { display: flex; align-items: center; gap: 8px; height: 100%; }
.brand {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-size: 1.35rem;
  text-decoration: none; color: var(--nav-accent); transition: color .3s;
}
.brand-by { display: none; margin-left: 12px; font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--nav-fg); }
@media (max-width: 859px), (min-width: 1240px) { .brand-by { display: inline; } }
.site-nav { display: flex; gap: 22px; margin-right: 8px; }
.site-nav a { position: relative; color: var(--nav-fg); text-decoration: none; font-weight: 500; padding: 4px 0; transition: color .2s; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.site-nav a:hover, .site-nav a.active { color: var(--nav-accent); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }
.header-login { color: var(--nav-fg); }
.header-login:hover { color: var(--nav-accent); }
.nav-login, .nav-register { display: none; }
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--nav-fg); transition: background .3s, transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .header-login, #header-register { display: none; }
  .brand { font-size: 1.25rem; }
  .site-nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    box-shadow: 0 16px 32px rgba(28, 23, 26, .12);
  }
  .site-nav.open { display: flex; padding-bottom: 16px; }
  .site-nav a, .nav-login {
    display: flex; align-items: center; min-height: 52px; padding: 0 16px;
    border-top: 1px solid var(--color-border); color: var(--color-text);
  }
  .site-nav a::after { display: none; }
  .site-nav a:focus-visible, .nav-login:focus-visible { outline-offset: -4px; }
  .nav-login {
    width: 100%; background: none; border-width: 1px 0 0; font: inherit; font-weight: 500;
    color: var(--color-text); cursor: pointer; text-align: left;
  }
  .site-nav .nav-register {
    display: flex; width: calc(100% - 32px); margin: 16px 16px 0; min-height: 52px;
    border: 2px solid var(--color-primary); color: #fff; justify-content: center;
  }
}

/* Dark: trên hero hồng đậm, header dùng chữ trắng cho tới khi cuộn */
@media (prefers-color-scheme: dark) {
  .site-header:not(.scrolled):not(.menu-open) { --nav-fg: #fff; --nav-accent: #fff; --color-focus: #fff; }
  .site-header:not(.scrolled):not(.menu-open) .btn-primary { background: #fff; border-color: #fff; color: var(--momo-pink); }
  .site-header:not(.scrolled):not(.menu-open) .btn-primary:hover { background: var(--pink-50); border-color: var(--pink-50); }
  .registration-pending .site-header:not(.scrolled):not(.menu-open) #header-register { background: transparent; border-color: #fff; color: #fff; }
  .registration-pending .site-header:not(.scrolled):not(.menu-open) #header-register:hover { background: #fff; color: var(--momo-pink); }
  .site-header:not(.scrolled):not(.menu-open) .nav-toggle span { background: #fff; }
}

/* ===== Hero: chữ lớn bên trái, logo / đếm ngược bên phải (nếu có) ===== */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-text);
  --color-focus: var(--momo-pink);
  padding: calc(var(--header-h) + 56px) 0 64px;
}
@media (prefers-color-scheme: dark) {
  .hero { --color-focus: #fff; }
}
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.hero-inner.has-aside { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.hero-text { max-width: 820px; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  letter-spacing: -.02em; line-height: 1.1; margin-bottom: .35em;
}
.hero h1.long { font-size: clamp(2.2rem, 5vw, 4rem); }
.hero h1.words .wi {
  display: inline-block; opacity: 0; transform: translateY(.45em);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.hero h1.words.in .wi { opacity: 1; transform: none; }
.hero .lead { color: var(--hero-muted); font-size: 1.3rem; max-width: 48ch; margin-bottom: 1.6em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 20px 0 0; font-weight: 600; max-width: 48ch; }
.btn-text {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 8px;
  font-weight: 600; font-size: 1.05rem; color: var(--hero-text);
  text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 2px;
}
.btn-text::after {
  content: ""; width: 8px; height: 8px; margin-left: 10px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg);
}
.btn-text:hover { text-decoration-thickness: 3px; }
.hero .btn-outline { border-color: var(--hero-text); color: var(--hero-text); }
.hero .btn-outline:hover { background: var(--hero-text); border-color: var(--hero-text); color: var(--momo-pink); }
@media (prefers-color-scheme: dark) {
  .hero .btn-primary { background: #fff; border-color: #fff; color: var(--momo-pink); }
  .hero .btn-primary:hover { background: var(--pink-50); border-color: var(--pink-50); }
  .hero .btn-outline:hover { background: #fff; border-color: #fff; }
}
.hero-aside { display: grid; gap: 28px; justify-items: center; align-self: center; }
.hero-image { width: 100%; max-width: 460px; max-height: 420px; object-fit: contain; }

.countdown { width: 100%; max-width: 460px; padding-top: 20px; border-top: 1px solid var(--hero-rule); }
.countdown-label { margin: 0 0 .25em; color: var(--hero-muted); font-weight: 600; }
.countdown-time {
  margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}

/* Dữ kiện chính: sinh viên cần biết ngay khi đọc xong tiêu đề */
.hero-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; margin: 56px 0 0; padding: 0; }
.fact { padding: 18px 0; margin: 0; border-top: 1px solid var(--hero-rule); }
.fact dt { color: var(--hero-muted); font-size: .92rem; font-weight: 600; margin-bottom: 2px; }
.fact dd { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; }
.hero-facts.in-aside { grid-template-columns: 1fr; margin: 0; width: 100%; }
.hero-facts.in-aside .fact { padding: 22px 0; }
.hero-facts.in-aside .fact:last-child { border-bottom: 1px solid var(--hero-rule); }
.hero-facts.in-aside .fact dd { font-size: clamp(1.25rem, 2vw, 1.6rem); }

@media (max-width: 860px) {
  .hero { padding: calc(var(--header-h) + 36px) 0 48px; }
  .hero-inner.has-aside { grid-template-columns: 1fr; gap: 36px; }
  .hero-aside { justify-items: start; width: 100%; }
  .hero-facts { margin-top: 40px; gap: 0; }
  .hero-facts.in-aside { margin-top: 8px; }
}

/* ===== Sections ===== */
.section { padding: 88px 0 80px; }
.section-alt { background: var(--color-bg-alt); }
.section-ink {
  --color-text: var(--ink-100); --color-muted: var(--ink-400); --color-border: var(--ink-700);
  --color-surface: var(--ink-800); --color-link: var(--pink-400); --color-focus: var(--pink-300);
  background: #2a1020; color: var(--color-text);
}
@media (prefers-color-scheme: dark) {
  /* Đỉnh nhấn của trang (giải thưởng) giữ trường hồng MoMo ở dark mode, không tan vào nền đen */
  .section.section-pink {
    --color-text: #fff; --color-muted: rgba(255, 255, 255, .9); --color-link: #fff; --color-focus: #fff;
    --rule-pink: rgba(255, 255, 255, .35);
    background: var(--hero-bg); color: #fff;
  }
}
.section-pink { background: var(--color-bg-pink); padding: 104px 0 96px; }
.section-pink .section-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.section-head { max-width: 640px; margin: 0 0 40px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.01em; }
.lead { color: var(--color-muted); font-size: 1.05rem; max-width: 65ch; }
.section-head.center .lead { margin-inline: auto; }
.col-title { font-size: 1.15rem; margin-bottom: .75em; }

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: start; }
.split-single { grid-template-columns: minmax(0, 760px); }
.split-sticky { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.split-sticky > .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
@media (max-width: 860px) {
  .section { padding: 64px 0 56px; }
  .split, .split-sticky { grid-template-columns: 1fr; gap: 32px; }
  .split-sticky > .section-head { position: static; margin-bottom: 8px; }
}

/* Placeholder khi chưa có ảnh */
.ph {
  background: var(--color-tint);
  border-radius: var(--radius);
}

/* ===== Vòng thi (thứ tự có ý nghĩa nên đánh số) ===== */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 76px 1fr; gap: 16px;
  padding: 26px 0; border-top: 1px solid var(--color-border);
  counter-increment: step;
}
.step:last-child { border-bottom: 1px solid var(--color-border); }
.step::before {
  content: counter(step); font-family: var(--font-display); font-size: 3.6rem; line-height: .9; color: var(--color-link);
}
.step h3 { margin-bottom: .2em; }
.step p { margin: 0; color: var(--color-muted); }

.requirements {
  padding: 28px; border-radius: var(--radius);
  background: var(--color-tint);
}
.requirements h3 { font-size: 1.15rem; }
.requirements ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.requirements li { position: relative; padding-left: 32px; }
.requirements li::before {
  content: ""; position: absolute; left: 6px; top: .28em; width: 7px; height: 13px;
  border: solid var(--color-link); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ===== Thử thách: flex để số lượng bất kỳ vẫn cân ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.cards > :only-child { max-width: 720px; }
.cards.stacked { grid-template-columns: 1fr; gap: 20px; }
.cards.stacked > :only-child { max-width: none; }
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}
.card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 18px; }
.card h3 { display: flex; flex-direction: column; gap: 2px; margin-bottom: .6em; }
.card-title { font-size: 1.4rem; line-height: 1.2; }
.card-sub { font-size: .95rem; font-weight: 500; color: var(--color-muted); }
.card p { color: var(--color-muted); }

/* ===== Giải thưởng & quyền lợi: danh sách theo hạng, không phải thẻ số liệu ===== */
.prizes, .perks { list-style: none; margin: 0; padding: 0; }
.prize {
  display: grid; grid-template-columns: minmax(11ch, .42fr) minmax(0, 1fr); gap: 2px 20px; align-items: baseline;
  padding: 28px 0; border-top: 1px solid var(--rule-pink);
}
.prize:last-child, .perk:last-child { border-bottom: 1px solid var(--rule-pink); }
.prize-name { font-weight: 700; font-size: 1.15rem; }
.prize-value { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; color: var(--color-link); text-align: right; overflow-wrap: anywhere; text-wrap: balance; }
.prize-note { grid-column: 1 / -1; color: var(--color-muted); font-size: .95rem; }
.perk { padding: 20px 0; border-top: 1px solid var(--rule-pink); }
.perk h4 { margin: 0 0 .2em; font-size: 1.05rem; }
.perk p { margin: 0; color: var(--color-muted); }

/* ===== Cố vấn ===== */
.people { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 36px 40px; }
.person { flex: 0 1 200px; text-align: left; }
.avatar {
  width: 144px; height: 144px; border-radius: 50%; object-fit: cover; margin: 0 0 12px;
  box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--pink-200);
}
.avatar-sm { width: 64px; height: 64px; margin: 0; }
.person-name { font-weight: 700; margin-bottom: .2em; }
.person-role { color: var(--color-muted); font-size: .95rem; }
.person:not(:has(.avatar)) { flex-basis: 220px; padding-top: 14px; border-top: 1px solid var(--color-border); }

@media (max-width: 560px) {
  .person { flex: 0 1 calc(50% - 20px); }
  .avatar { width: 96px; height: 96px; }
  .prize { grid-template-columns: 1fr; }
  .prize-value { text-align: left; }
}

/* ===== Carousel (scroll-snap, không cần thư viện) ===== */
.carousel-track {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  padding-bottom: 8px;
}
.carousel-track > * { flex: 0 0 min(85%, 420px); scroll-snap-align: start; }
.carousel-nav { display: flex; justify-content: flex-start; gap: 12px; margin-top: 16px; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--color-primary); background: transparent; color: var(--color-link);
  font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s;
}
.carousel-btn:hover { background: var(--color-primary); color: #fff; }
.slide { margin: 0; overflow: hidden; border-radius: var(--radius); }
.slide-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

.quote {
  margin: 0; padding: 24px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 14px;
}
.quote blockquote { margin: 0; flex: 1; }
.quote figcaption { display: flex; flex-direction: column; }
.quote figcaption span { color: var(--color-muted); font-size: .9rem; }

/* ===== Timeline dọc: đường kẻ tự "vẽ" theo vị trí cuộn (--progress do effects.js đặt) ===== */
.timeline { --progress: 1; position: relative; list-style: none; margin: 0; padding: 0; }
.timeline::before, .timeline::after {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px;
}
.timeline::before { background: var(--color-border); }
.section-ink .timeline::before { background: var(--ink-500); }
.timeline::after {
  background: linear-gradient(var(--momo-pink), var(--pink-400));
  transform: scaleY(var(--progress)); transform-origin: top;
}
.tl-item { position: relative; padding: 0 0 36px 32px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -8px; top: 4px; z-index: 1;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--color-surface); border: 3px solid var(--color-border);
  transition: background .3s, border-color .3s, transform .3s;
}
.tl-item.reached::before {
  background: var(--color-primary); border-color: var(--color-primary);
  transform: scale(1.2);
}
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.tl-date { font-weight: 700; color: var(--color-link); }
.tl-badge {
  padding: 2px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700;
  background: var(--momo-pink); color: #fff;
}
.tl-body h3 { margin-bottom: .2em; }
.tl-body p { color: var(--color-muted); margin: 0; }

/* ===== FAQ (native <details>) ===== */
.faq-list { max-width: 820px; margin: 0; display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); padding: 4px 20px; transition: border-color .2s;
}
.faq-item[open], .faq-item:hover { border-color: var(--pink-300); }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 14px 0; min-height: 44px; }
.faq-item summary::marker { color: var(--color-primary); }
.faq-item p { color: var(--color-muted); }

/* ===== Kêu gọi cuối trang ===== */
.cta-band {
  --color-focus: #fff; position: relative; overflow: hidden; isolation: isolate;
  padding: 88px 0; background: var(--gradient-brand); color: #fff;
}
.cta-band::before {
  content: attr(data-mark); position: absolute; z-index: -1; right: -1%; bottom: -12%;
  font-family: var(--font-display); font-size: clamp(4.5rem, 13vw, 11.5rem); line-height: .8; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .32); pointer-events: none; user-select: none;
}
.cta-inner { max-width: 640px; }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.01em; }
.cta-lead { font-size: 1.15rem; color: #fff; }
.cta-band .btn-primary { background: #fff; border-color: #fff; color: var(--momo-pink); }
.cta-band .btn-primary:hover { background: var(--pink-50); border-color: var(--pink-50); box-shadow: 0 12px 28px rgba(28, 23, 26, .25); }
.cta-deadline { margin: 16px 0 0; font-weight: 600; color: #fff; }
/* Chưa mở đăng ký: chỉ nút ở banner giữ vai nút chính; các bản lặp lại dịu xuống, thanh dính ẩn đi */
.registration-pending #header-register, .registration-pending .site-nav .nav-register {
  background: transparent; color: var(--color-link);
}
.registration-pending #header-register:hover, .registration-pending .site-nav .nav-register:hover { background: var(--color-primary); color: #fff; }
.registration-pending .sticky-register { display: none !important; }
.registration-pending .cta-band .btn-primary { background: transparent; border-color: #fff; color: #fff; }
.registration-pending .cta-band .btn-primary:hover { background: #fff; color: var(--momo-pink); }

/* ===== Partners ===== */
.partners { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 40px 64px; }
.partner-group { text-align: left; }
.partner-group h3 { font-size: 1rem; color: var(--color-muted); }
.logos { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px; }
.logo { height: 56px; width: auto; min-width: 120px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.logos a:hover .logo, .logo:hover { filter: none; opacity: 1; }

/* ===== Footer ===== */
.site-footer { padding: 48px 0; text-align: left; background: var(--footer-bg); color: var(--ink-100); border-top: 1px solid rgba(255, 255, 255, .08); --color-focus: var(--pink-300); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--pink-300); }
.footer-org { margin: 0 0 20px; font-size: 1.05rem; }
.footer-title { font-weight: 700; }
.socials { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 20px; margin-bottom: 12px; }
.footer-legal-block { margin: 0 0 32px; }
.footer-company { margin: 0 0 4px; font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.footer-company-line { margin: 0 0 2px; font-size: .9rem; color: var(--ink-300, #cfc6cc); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px 40px; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-col-title { margin: 0 0 12px; font-size: .95rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; line-height: 1.5; color: var(--ink-300, #cfc6cc); }
.footer-col .footer-link { text-decoration: none; }
.footer-col .footer-sub { margin-top: 12px; font-weight: 700; color: #fff; font-size: .95rem; }
.footer-col .footer-link:hover { text-decoration: underline; }
.footer-connect { margin-top: 24px; }
.footer-legal { margin: 20px 0 0; font-size: .82rem; line-height: 1.55; color: var(--ink-400); max-width: 80ch; }
.copyright { margin-top: 24px; font-size: .85rem; color: var(--ink-400); }

/* ===== Thanh đăng ký dính (chỉ mobile) ===== */
.sticky-register { display: none; }
@media (max-width: 860px) {
  .sticky-register:not([hidden]) {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--color-header-bg);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--color-border);
  }
  .sticky-register .btn { flex: 1; }
  .site-footer { padding-bottom: 96px; }
}

/* ===== Toast + noscript ===== */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--ink-900); color: #fff; --color-focus: #fff;
  padding: 12px 8px 12px 20px; border-radius: 16px; z-index: 200; width: max-content; max-width: calc(100% - 32px);
  box-shadow: 0 10px 30px rgba(28, 23, 26, .25);
}
.toast-body { padding-top: 8px; }
.toast p { margin: 0 0 .4em; }
.toast a, .toast-link { color: var(--pink-300); font-weight: 600; }
.toast-link { display: block; margin: 0 0 .4em; padding: 0; background: none; border: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; text-align: left; }
.toast-close { position: relative; flex: none; width: 44px; height: 44px; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.toast-close::before, .toast-close::after { content: ""; position: absolute; left: 14px; right: 14px; top: 21px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.toast-close::after { transform: rotate(-45deg); }
.toast-close:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 860px) { .toast { bottom: 84px; } }
.noscript { text-align: center; padding: calc(var(--header-h) + 24px) 24px 24px; color: var(--color-muted); }
/* Chưa render xong thì các section rỗng không chiếm chỗ (tránh vệt nền chớp lên trước khi nội dung tới) */
.hero:empty, .section:empty, .cta-band:empty, .site-footer:empty { display: none; }
.load-failed .site-nav, .load-failed .nav-toggle, .load-failed .header-login, .load-failed #header-register,
.load-failed .sticky-register, .load-failed .site-footer { display: none; }
.load-error {
  display: grid; place-content: center; justify-items: center; gap: 4px; min-height: 100svh;
  padding: calc(var(--header-h) + 48px) 24px 72px; text-align: center;
  background: var(--hero-bg); color: var(--hero-text); --color-focus: var(--hero-text);
}
.load-error h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); }
.load-error p { color: var(--hero-muted); font-size: 1.15rem; margin-bottom: 1.2em; }
.load-error .btn-primary { background: var(--hero-text); border-color: var(--hero-text); color: #fff; }
@media (prefers-color-scheme: dark) {
  .load-error .btn-primary { background: #fff; border-color: #fff; color: var(--momo-pink); }
}

/* ===== Ánh sáng sân khấu khi cuộn (js/effects.js, chọn ở config.js: lightEffect) =====
   Lớp này nằm trên nền các section nhưng dưới mọi chữ và nút, nên không làm giảm độ tương phản.
   Dải kêu gọi cuối trang và footer nằm trên lớp này nên không có ánh sáng. */
.fx { --fx-rgb: 254, 104, 198; --fx-a: .13; position: fixed; inset: -4%; z-index: 1; pointer-events: none; overflow: hidden; }
@media (prefers-color-scheme: dark) { .fx { --fx-rgb: 255, 162, 223; --fx-a: .22; } }
main .container, .site-footer, .cta-band { position: relative; z-index: 2; }
.fx > span { position: absolute; display: block; will-change: transform; }
/* Chùm sáng dùng dải màu theo góc (conic): rìa tan dần, không có đường viền cứng. --r là góc lệch, --x là điểm xuất phát */
.fx-beam, .fx-cone {
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 38%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 38%, transparent 82%);
}
/* Chùm đèn: ba chùm hẹp từ mép trên, đung đưa ngược pha */
.fx-beam {
  background: conic-gradient(from calc(var(--r, 0deg) + 170deg) at var(--x, 50%) -6%,
    rgba(var(--fx-rgb), 0) 0deg, rgba(var(--fx-rgb), calc(var(--fx-a) * .35)) 5deg, rgba(var(--fx-rgb), var(--fx-a)) 10deg,
    rgba(var(--fx-rgb), calc(var(--fx-a) * .35)) 15deg, rgba(var(--fx-rgb), 0) 20deg, rgba(var(--fx-rgb), 0) 360deg);
}
/* Đèn rọi: một chùm rộng quét ngang, kèm vệt sáng trên sàn */
.fx-cone {
  background: conic-gradient(from calc(var(--r, 0deg) + 158deg) at var(--x, 50%) -6%,
    rgba(var(--fx-rgb), 0) 0deg, rgba(var(--fx-rgb), calc(var(--fx-a) * .3)) 8deg, rgba(var(--fx-rgb), calc(var(--fx-a) * .85)) 17deg,
    rgba(var(--fx-rgb), calc(var(--fx-a) * .3)) 26deg, rgba(var(--fx-rgb), 0) 34deg, rgba(var(--fx-rgb), 0) 360deg);
}
/* Lưới chấm chỉ hiện trong vùng chùm sáng: như ánh đèn quét lên một mặt lưới công nghệ */
.fx-beam::after, .fx-cone::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(var(--fx-rgb), calc(var(--fx-a) * 3.2)) 1px, transparent 1.7px) 0 0 / 24px 24px;
}
.fx-beam::after {
  -webkit-mask-image: conic-gradient(from calc(var(--r, 0deg) + 170deg) at var(--x, 50%) -6%, transparent 0deg, rgba(0, 0, 0, .55) 5deg, #000 10deg, rgba(0, 0, 0, .55) 15deg, transparent 20deg, transparent 360deg);
  mask-image: conic-gradient(from calc(var(--r, 0deg) + 170deg) at var(--x, 50%) -6%, transparent 0deg, rgba(0, 0, 0, .55) 5deg, #000 10deg, rgba(0, 0, 0, .55) 15deg, transparent 20deg, transparent 360deg);
}
.fx-cone::after {
  -webkit-mask-image: conic-gradient(from calc(var(--r, 0deg) + 158deg) at var(--x, 50%) -6%, transparent 0deg, rgba(0, 0, 0, .5) 8deg, #000 17deg, rgba(0, 0, 0, .5) 26deg, transparent 34deg, transparent 360deg);
  mask-image: conic-gradient(from calc(var(--r, 0deg) + 158deg) at var(--x, 50%) -6%, transparent 0deg, rgba(0, 0, 0, .5) 8deg, #000 17deg, rgba(0, 0, 0, .5) 26deg, transparent 34deg, transparent 360deg);
}
.fx-pool {
  bottom: -20vh; left: var(--x, 50%); width: 74vw; height: 48vh; margin-left: -37vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--fx-rgb), calc(var(--fx-a) * .8)), rgba(var(--fx-rgb), 0));
}
/* Dải sáng: hai dải chéo mềm lượn lờ theo vị trí cuộn */
.fx-ribbon {
  top: -30vh; width: 30vw; height: 160vh;
  background: linear-gradient(90deg, rgba(var(--fx-rgb), 0), rgba(var(--fx-rgb), calc(var(--fx-a) * .7)) 50%, rgba(var(--fx-rgb), 0));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.fx-ribbon:nth-child(1) { left: calc(8vw + var(--x, 0vw)); transform: translateY(var(--y, 0vh)) rotate(24deg); }
.fx-ribbon:nth-child(2) { left: calc(58vw - var(--x, 0vw)); transform: translateY(calc(var(--y, 0vh) * -1)) rotate(-20deg); }
@media (prefers-reduced-motion: no-preference) {
  .fx { animation: fx-sway 18s ease-in-out infinite alternate; }
}
@keyframes fx-sway { from { transform: rotate(-1deg) scale(1.02); } to { transform: rotate(1.2deg) scale(1.04); } }
/* Thanh chọn xem thử (chỉ hiện khi địa chỉ có ?fx=) */
.fx-panel {
  position: fixed; left: 12px; bottom: 12px; z-index: 90; display: flex; gap: 4px; padding: 6px;
  background: var(--ink-900); border-radius: 999px; box-shadow: 0 8px 24px rgba(28, 23, 26, .3);
  --color-focus: #fff;
}
.fx-panel button {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  color: #fff; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.fx-panel button[aria-pressed="true"] { background: var(--color-primary); }
@media (max-width: 560px) { .fx-panel { left: 8px; right: 8px; justify-content: space-between; } .fx-panel button { padding: 0 8px; flex: 1; } }

/* ===== Hiện nhẹ khi cuộn tới (class do js/effects.js gắn, tự gỡ sau khi chạy xong) ===== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.97);
  filter: blur(6px);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), filter .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ===== Key visual nền cho hero (KV final: nền đen→magenta với ô vuông đồng tâm, 2 phím :) bên phải) ===== */
:root {
  --kv-ink: #0a0a0a; --kv-plum: #1b0c13; --kv-wine: #471027; --kv-magenta: #881a47;
  --kv-rose: #d1588e; --kv-pink: #fa74a9; --kv-blush: #ffe4f0;
  --kv-gradient: radial-gradient(120% 140% at 100% 30%, #b81a5e 0%, var(--kv-magenta) 22%, var(--kv-wine) 45%, var(--kv-plum) 68%, var(--kv-ink) 92%);
}
.has-kv {
  --kv-bg: var(--kv-ink);
  --kv-venue: var(--kv-blush);
}
.has-kv .hero {
  --hero-bg: var(--kv-bg);
  --hero-text: #fff;
  --hero-muted: var(--kv-blush);
  --hero-rule: rgba(255, 255, 255, .24);
  --color-focus: #fff;
  display: flex; align-items: center;
  min-height: max(100svh, 620px);
  padding-top: calc(var(--header-h) + 20px); padding-bottom: calc(20px + var(--lift, 36px) * 2);
  background: var(--kv-bg);
}
.has-kv .hero > .container { position: relative; z-index: 2; }
.hero-bg { position: absolute; inset: 0; display: block; z-index: 0; }
/* Sân khấu 16:9 cao bằng hero: tâm ô vuông (69% ảnh) đặt ở 70% bề ngang màn hình, phần trái ảnh là nền đen trùng màu hero */
/* Cụm phím canh mép phải theo khung nội dung (thẳng hàng nút EN|VI trên header) để bố cục cân hai bên.
   Sân khấu 16:9 lấy tâm ô vuông (69% ảnh) làm tâm cụm phím; cao đủ để mép phải ảnh luôn phủ tới mép màn hình. */
/* Banner: cùng khung nội dung với cả trang; dịch lên trên một chút (--lift) */
.has-kv .hero { --lift: 36px; --kw: clamp(300px, 29vw, 640px); --kx: calc(50vw + min(var(--container) / 2, 50vw - var(--gut) / 2) - var(--kw) / 2); }
/* Cụm phím canh mép phải theo khung nội dung (thẳng hàng nút EN|VI trên header) để bố cục cân hai bên.
   Sân khấu 16:9 lấy tâm ô vuông (69% ảnh) làm tâm cụm phím; cao đủ để mép phải ảnh luôn phủ tới mép màn hình. */
.hero-stage {
  position: absolute; z-index: 0; top: calc(50% - var(--lift)); left: var(--kx);
  height: max(100%, calc((100vw - var(--kx)) * 1.82)); aspect-ratio: 16 / 9;
  transform: translate(-69%, -50%); pointer-events: none;
}
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%); mask-image: linear-gradient(90deg, transparent 0, #000 6%); }
/* Lớp tối nhẹ phía chữ (KV vốn tối bên trái), không phủ lên vùng phím */
.has-kv .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(55vw 70vh at 8% 85%, rgba(136, 26, 71, .5), rgba(136, 26, 71, 0) 70%),
    linear-gradient(270deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, .15) 18%, rgba(10, 10, 10, 0) 32%),
    linear-gradient(0deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, 0) 22%);
}
/* 2 phím: vị trí và cỡ theo tỉ lệ sân khấu, như KV 1920×1080 */
.hero-object { position: absolute; z-index: 1; left: 69%; top: 51%; width: var(--kw); transform: translate(-50%, -50%); }
.hero-object img { display: block; width: 100%; height: auto; will-change: transform; }

.has-kv .hero-text { max-width: 640px; }
.has-kv .hero h1 {
  font-size: clamp(3rem, 6.2vw, 6.2rem); line-height: 1.02; letter-spacing: -.025em; margin-bottom: 0;
}
.hero h1 .hl { display: block; }
/* Chữ nhấn chuyển màu như KV: "Ima→gine" trắng sang hồng, "Fu→ture" hồng nhạt sang trắng */
.has-kv .hero h1 .wi.accent {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .1em; margin-bottom: -.1em;
}
.has-kv .hero h1 .wi.accent-0 { background-image: linear-gradient(90deg, #fff 0%, #fff 36%, #ff8ec0 62%, var(--kv-pink) 100%); }
.has-kv .hero h1 .wi.accent-1 { background-image: linear-gradient(90deg, #ffb3d4 0%, #ffd6e8 45%, #fff 100%); }
.has-kv .hero-tagline { margin-top: 28px; color: rgba(255, 255, 255, .86); max-width: 46ch; text-align: left; text-align-last: auto; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55; }
/* Ngày + địa điểm: dòng cuối KV */
.hero-event { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin: clamp(28px, 5vh, 52px) 0 0; color: #fff; }
.hero-event-date { font-family: var(--font-body); font-weight: 300; font-size: clamp(2.4rem, 4.2vw, 4.2rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-event-venue { display: flex; flex-direction: column; font-size: clamp(.95rem, 1.25vw, 1.3rem); line-height: 1.25; }
.has-kv .hero .btn-primary { background: #fff; border-color: #fff; color: var(--momo-pink); }
.has-kv .hero .btn-primary:hover { background: var(--pink-50); border-color: var(--pink-50); }

/* Header trong suốt phía trên KV tối: chữ trắng cho tới khi cuộn (cả chế độ sáng) */
.has-kv .site-header:not(.scrolled):not(.menu-open) { --nav-fg: #fff; --nav-accent: #fff; --color-focus: #fff; }
.has-kv .site-header:not(.scrolled):not(.menu-open) .btn-primary { background: #fff; border-color: #fff; color: var(--momo-pink); }
.has-kv .site-header:not(.scrolled):not(.menu-open) .btn-primary:hover { background: var(--pink-50); border-color: var(--pink-50); }
.has-kv.registration-pending .site-header:not(.scrolled):not(.menu-open) #header-register { background: transparent; border-color: #fff; color: #fff; }
.has-kv.registration-pending .site-header:not(.scrolled):not(.menu-open) #header-register:hover { background: #fff; color: var(--momo-pink); }
.has-kv .site-header:not(.scrolled):not(.menu-open) .nav-toggle span { background: #fff; }

/* Chuyển động hero (js/effects.js thêm class hero-motion): nền và phím trôi lệch nhau; quầng sáng bám con trỏ */
.hero-motion { overflow: clip; }
.hero-motion .hero-bg img { transform: scale(1.04); transform-origin: 69% 50%; will-change: transform; }


/* Màn dọc / mobile: giống KV 1080×1920, chữ trên, phím giữa-dưới, ngày + địa điểm cuối */
@media (max-aspect-ratio: 1/1), (max-width: 860px) {
  .has-kv .hero { align-items: stretch; min-height: 100svh; padding-bottom: 40px; }
  .has-kv .hero > .container { display: flex; flex-direction: column; }
  .has-kv .hero-inner, .has-kv .hero-text { display: flex; flex-direction: column; flex: 1; }
  .hero-stage { top: 0; bottom: 0; left: 0; right: 0; height: auto; aspect-ratio: auto; transform: none; }
  .hero-bg img { -webkit-mask-image: none; mask-image: none; }
  .has-kv .hero::before { background: linear-gradient(180deg, rgba(10, 10, 10, .45) 0%, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0) 70%, rgba(10, 10, 10, .5) 100%); }
  .hero-object { left: 50%; top: auto; bottom: 16%; width: min(96vw, 62vh); transform: translateX(-50%); }
  .has-kv .hero h1 { font-size: clamp(2.8rem, 13vw, 5rem); }
  .has-kv .hero-tagline { font-size: 1rem; }
  .hero-event { margin-top: auto; padding-top: min(62vh, 96vw); gap: 14px; }
  .hero-event-date { font-size: clamp(1.8rem, 8.4vw, 2.6rem); }
  .hero-event-venue { font-size: .85rem; white-space: nowrap; }
}

/* ===== Dải kêu gọi cuối trang: nền + phím của KV ===== */
.cta-band.has-kv-bg { background: var(--kv-ink); min-height: 460px; display: flex; align-items: center; padding: 112px 0; }
.cta-band.has-kv-bg::before { display: none; }
.cta-bg { position: absolute; inset: 0; display: block; z-index: -1; }
.cta-bg img { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: auto; height: 100%; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
.cta-object {
  position: absolute; z-index: -1; pointer-events: none;
  right: max(4vw, 24px); top: 50%; width: min(36vw, 560px); height: auto; transform: translateY(-50%) rotate(-4deg);
}
@media (max-width: 860px) {
  .cta-band.has-kv-bg { align-items: flex-start; padding: 72px 0 calc(min(60vw, 320px) + 48px); }
  .cta-object { top: auto; bottom: 24px; right: 50%; width: min(70vw, 360px); transform: translateX(50%) rotate(-4deg); }
  .cta-bg img { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%); mask-image: linear-gradient(180deg, transparent 0, #000 32%); }
}

/* ===== Trang con: đăng ký, nộp bài, thể lệ chi tiết ===== */
.doc { padding-top: calc(var(--header-h) + 56px); min-height: 70svh; }
.doc-head { max-width: 760px; margin-bottom: 40px; }
.doc-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.01em; }
.doc-head .btn { margin-top: 8px; }
.doc-pending { margin: 8px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--color-tint); border: 1px solid var(--rule-pink); max-width: 60ch; }
.doc-layout { display: grid; gap: 40px; align-items: start; }
.doc-layout.has-toc { grid-template-columns: 240px minmax(0, 1fr); }
.doc-toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: .95rem; }
.doc-toc-title { font-weight: 700; margin-bottom: .5em; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; border-left: 2px solid var(--color-border); }
.doc-toc a { display: block; padding: 6px 0 6px 14px; text-decoration: none; color: var(--color-muted); min-height: 32px; }
.doc-toc a:hover { color: var(--color-link); }
.doc-body { max-width: 780px; }
.doc-block { padding: 0 0 40px; margin-bottom: 40px; border-bottom: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-h) + 16px); }
.doc-block:last-of-type { border-bottom: 0; }
.doc-block h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .6em; }
.doc-block p { max-width: 68ch; }
.doc-list { margin: 0 0 1em; padding-left: 1.2em; display: grid; gap: 10px; max-width: 68ch; }
.doc-list li::marker { color: var(--color-primary); }
.doc-table-wrap { overflow-x: auto; margin: 0 0 1.2em; border: 1px solid var(--color-border); border-radius: 12px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.doc-table tbody tr:last-child > * { border-bottom: 0; }
.doc-table thead th { background: var(--color-bg-alt); font-size: .85rem; text-transform: none; color: var(--color-muted); }
.doc-table tbody th { font-weight: 700; white-space: nowrap; }
.doc-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 860px) {
  .doc-layout.has-toc { grid-template-columns: 1fr; }
  .doc-toc { position: static; }
  .doc-table tbody th { white-space: normal; }
}
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 28px; }
.cta-band .btn-text { color: #fff; font-weight: 700; }
.hero-tagline { margin: 20px 0 0; hyphens: manual; -webkit-hyphens: manual; max-width: min(100%, calc(clamp(2.2rem, 5vw, 4rem) * 7.6)); text-wrap: balance; text-align: justify; text-align-last: justify; font-size: clamp(1.05rem, 1.75vw, 1.4rem); font-weight: 500; color: var(--hero-text); }
.hero-tags { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: var(--hero-muted); }
.step .step-date { margin: 0 0 .35em; font-size: .95rem; font-weight: 700; color: var(--color-link); }
.step .step-cta { margin-top: 0; }
.step-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Tiêu chí: ba thẻ ngang bằng nhau */
.criteria-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.criterion { display: flex; flex-direction: column; padding: 32px 28px; }
.criterion-no { font-family: var(--font-display); font-size: 3.6rem; line-height: .9; color: var(--color-link); margin-bottom: 20px; }
.criterion h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: .5em; }
.criterion p { margin: 0; }
@media (max-width: 860px) { .criteria-grid { grid-template-columns: 1fr; gap: 16px; } .criterion { padding: 24px; } }

/* ===== Đếm ngược ở trang Đề thi; CTA cuối trang ===== */
.doc-countdown {
  margin: 8px 0 0; padding: 40px 24px; text-align: center; border: 1px solid var(--color-border);
  border-radius: 16px; background: var(--color-bg-alt);
}
.doc-countdown-label { margin: 0 0 .4em; font-weight: 600; color: var(--color-muted); }
.doc-countdown .countdown-time { font-size: clamp(2.2rem, 7vw, 4.2rem); color: var(--color-primary); }
.doc-countdown-date { margin: .5em 0 0; font-weight: 600; }
.doc-cta { margin-top: 40px; }
.doc-empty { color: var(--color-muted); }
.cd-grid { display: flex; justify-content: center; gap: clamp(10px, 2.5vw, 24px); margin: .4em 0 0; }
.cd-box {
  display: grid; justify-items: center; gap: 4px; min-width: clamp(64px, 16vw, 128px);
  padding: clamp(12px, 2.4vw, 22px) 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px;
}
.cd-num { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 4rem); line-height: 1; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.cd-unit { font-size: .85rem; font-weight: 600; color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .cd-box:last-child { display: none; } }
.doc-embed-wrap { margin: 0 0 24px; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-bg-alt); }
.doc-embed { display: block; width: 100%; height: min(85vh, 1100px); min-height: 520px; border: 0; }
/* Trình duyệt di động thường không hiển thị PDF trong khung: ẩn khung, người dùng dùng nút mở tab mới */
@media (max-width: 860px), (hover: none) { .doc-embed-wrap { display: none; } }
/* Trang có PDF nhúng: nút mở tab mới chỉ hiện ở màn nhỏ (nơi khung PDF bị ẩn) */
.doc:has(.doc-embed-wrap) .doc-head .btn { display: none; }
@media (max-width: 860px), (hover: none) { .doc:has(.doc-embed-wrap) .doc-head .btn { display: inline-flex; } }
/* Trang có PDF nhúng: thân trang rộng hết khung nội dung */
.doc-body:has(.doc-embed-wrap) { max-width: none; }
/* Slogan hero: cỡ chữ tỉ lệ với bề rộng (= bề rộng chữ "Workspace") để luôn đủ 3 dòng trên desktop */
@media (min-width: 861px) {
  .hero-tagline { font-size: calc(clamp(2.2rem, 5vw, 4rem) * 7.6 * .04); }
}

/* Ban giám khảo: băng chuyền ngang, mỗi người một ô cố định; nút ‹ › để chuyển */
.carousel-people .carousel-track > .person { flex: 0 0 200px; }
.carousel-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--color-primary); }
.carousel-btn:disabled:hover { background: transparent; color: var(--color-primary); }
.carousel-nav[hidden] { display: none; }
@media (max-width: 560px) { .carousel-people .carousel-track > .person { flex-basis: 150px; } }
.carousel-people .carousel-track { gap: 32px; }
.carousel-people .carousel-track { overflow-y: hidden; scrollbar-width: none; padding-bottom: 0; }
.carousel-people .carousel-track::-webkit-scrollbar { display: none; }

/* Ban giám khảo: mũi tên ‹ › ở hai bên, chỉ là dấu mũi tên (không nền, không viền) */
.carousel-people .carousel { position: relative; padding: 0 34px; }
.carousel-people .carousel-nav {
  position: absolute; left: 0; right: 0; top: 76px; height: 0; margin: 0;
  justify-content: space-between; pointer-events: none;
}
.carousel-people .carousel-btn {
  pointer-events: auto; width: 32px; height: 48px; border: 0; border-radius: 0; background: none;
  transform: translateY(-50%); font-size: 2.4rem; line-height: 1; color: var(--color-muted); padding: 0;
}
.carousel-people .carousel-btn:hover:not(:disabled) { background: none; color: var(--color-primary); }
.carousel-people .carousel-btn:disabled { opacity: .25; background: none; }
@media (min-width: 1240px) {
  .carousel-people .carousel { padding: 0; }
  .carousel-people .carousel-nav { left: -44px; right: -44px; }
}

/* Ban giám khảo: ảnh nhỏ gọn; chừa lề để viền ngoài (box-shadow) không bị cắt bởi vùng cuộn */
.carousel-people .carousel-track { padding: 8px; margin: -8px; scroll-padding-inline: 8px; gap: 24px; }
.carousel-people .avatar { width: 96px; height: 96px; }
.carousel-people .carousel-track > .person { flex: 0 0 150px; }
.carousel-people .carousel-nav { top: 56px; }
@media (max-width: 560px) {
  .carousel-people .avatar { width: 80px; height: 80px; }
  .carousel-people .carousel-track > .person { flex-basis: 124px; }
  .carousel-people .carousel-nav { top: 48px; }
}
.load-error .load-error-code { margin: 1.4em 0 0; font-size: .85rem; opacity: .7; }
.doc-countdown-msg { margin: 1.1em 0 0; font-size: clamp(1.15rem, 3.2vw, 1.6rem); font-weight: 700; color: var(--color-primary); }
.doc-countdown-emoji { display: inline-block; animation: cd-bounce 1.1s ease-in-out infinite; }
@keyframes cd-bounce { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-6px) rotate(8deg); } }
.is-waiting .cd-num { opacity: .85; }

/* Ban giám khảo: ảnh tách nền đứng thẳng trên nền trắng của section, không khung; chân ảnh cắt thẳng, không mờ */
.carousel-people .carousel-track > .person.has-cutout { flex: 0 0 220px; padding-top: 0; border-top: 0; }
.person-stage { position: relative; height: 240px; margin: 0 0 12px; }
.person-cutout {
  position: absolute; left: 10%; bottom: 0; width: 80%; height: auto; max-width: none; /* ảnh nhỏ lại, khung (ô) giữ nguyên */
}
.person.has-cutout { text-align: center; } /* ảnh nằm giữa thẻ nên chữ cũng căn giữa */
.person.has-cutout .person-name { font-size: 1.05rem; }
.person.has-cutout .person-role { font-size: .92rem; }
.carousel-people:has(.has-cutout) .carousel-nav { top: 120px; }
@media (max-width: 560px) {
  .carousel-people .carousel-track > .person.has-cutout { flex-basis: 170px; }
  .person-stage { height: 185px; }
  .carousel-people:has(.has-cutout) .carousel-nav { top: 92px; }
}

/* ===== Giải thưởng: nền tối thương hiệu, giải Nhất là con số khổng lồ, hai giải còn lại xếp bên cạnh ===== */
.section-prize {
  --color-text: #fff; --color-muted: rgba(255, 255, 255, .62); --color-focus: #fff;
  position: relative; overflow: hidden; color: #fff; padding: 104px 0 96px;
  background: var(--kv-gradient);
}
.section-prize .section-head h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.prize-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 24px; }
.prize-stage-1 { grid-template-columns: minmax(0, 1fr); }
.prize-main, .prize-side { list-style: none; margin: 0; padding: 0; }
.prize-item { display: grid; gap: 14px; }
.prize-side .prize-item { padding: clamp(20px, 3vw, 34px) 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.prize-side .prize-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.prize-head { margin: 0; display: flex; align-items: baseline; gap: 14px; font-weight: 700; }
.prize-title { font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.prize-money { margin: 0; display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; font-family: var(--font-display); font-variant-numeric: tabular-nums; line-height: .95; }
.prize-num { font-weight: 800; letter-spacing: -.03em; color: #fff; }
.prize-zeros { font-weight: 600; color: rgba(255, 255, 255, .55); }
.prize-unit { margin-left: 10px; font-size: .95rem; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .6); }
.is-main .prize-num { font-size: clamp(6rem, 17vw, 14rem); color: #ff6aae; }
.is-main .prize-zeros { font-size: clamp(1.8rem, 4.2vw, 3.4rem); }
.is-side .prize-num { font-size: clamp(3.2rem, 7vw, 6rem); }
.is-side .prize-zeros { font-size: clamp(1.2rem, 2.4vw, 2rem); }
.prize-note { margin: 0; color: var(--color-muted); font-size: .9rem; }
@media (max-width: 860px) { .prize-stage { grid-template-columns: 1fr; } .is-main .prize-num { font-size: clamp(5rem, 26vw, 9rem); } }

/* Challenge: nền tối, hai phím kính tràn ra mép phải */
.section-challenge { position: relative; overflow: hidden;
  /* quầng sáng hồng-trắng nhẹ dưới 2 phím để viền sáng của phím hoà vào nền */
  background:
    radial-gradient(ellipse 200px 120px at calc(100% - max(7vw, 24px) - 140px) 62%, rgba(255, 214, 232, .16), rgba(255, 214, 232, 0) 70%),
    radial-gradient(ellipse 300px 200px at calc(100% - max(7vw, 24px) - 140px) 55%, rgba(209, 88, 142, .2), rgba(209, 88, 142, 0) 70%),
    linear-gradient(90deg, var(--kv-ink) 45%, var(--kv-plum) 100%); color: #fff; padding-block: clamp(56px, 8vw, 96px); }
.section-challenge .section-head h2 { color: #fff; }
.section-challenge .lead { color: #fff; max-width: none; text-align: justify; text-justify: inter-word; }
.section-challenge .container, .section-challenge .wrap { position: relative; z-index: 1; }
.challenge-art { position: absolute; top: 50%; right: max(7vw, 24px); translate: 0 -50%; height: min(100%, 220px); width: auto; max-width: none; pointer-events: none;
  animation: challenge-float 6s ease-in-out infinite; }
/* 2 phím lơ lửng: trôi lên xuống + nghiêng nhẹ */
@keyframes challenge-float {
  0%, 100% { transform: translateY(-6px) rotate(-1.5deg); }
  50% { transform: translateY(8px) rotate(1.5deg); }
}
@media (max-width: 860px) { .challenge-art { opacity: .45; } }
/* Khung chữ rộng tối đa 1000px nhưng dừng trước hình (hình: 367px + lề phải 7vw + khoảng thở 24px) */
.section-challenge .section-head { max-width: min(1000px, 100%); }
@media (min-width: 861px) { .section-challenge .section-head { max-width: min(1000px, calc(93vw - 287px - max(16px, (100vw - var(--container)) / 2))); } }

/* Ban giám khảo: 5 thẻ vừa khít một hàng trong khung (nút trái/phải tự ẩn khi không tràn) */
@media (min-width: 861px) {
  .carousel-people .carousel { padding: 0; }
  .carousel-people .carousel-track { gap: 20px; }
  .carousel-people .carousel-track > .person.has-cutout { flex: 1 1 0; min-width: 0; }
}
/* Chức danh không xuống dòng: giữ size thẻ, JS (fitRoles) thu cỡ chữ cho vừa */
.carousel-people .person.has-cutout .person-role { white-space: nowrap; overflow: visible; }

/* ===== Trang Đề thi: khu vực Thể lệ & vòng thi (cùng nội dung với trang chủ, theo style thẻ của trang này) ===== */
.doc-overview { margin: 0 0 64px; }
.doc-overview h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 20px; }
.doc-overview .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.doc-overview .step {
  display: block; padding: 24px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-bg-alt);
}
.doc-overview .step:last-child { border-bottom: 1px solid var(--color-border); }
.doc-overview .step::before { display: block; margin-bottom: 14px; font-size: 2.4rem; }
.doc-overview .step h3 { font-size: 1.15rem; }
.doc-req { margin-top: 16px; padding: 20px 24px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-bg-alt); }
.doc-req h3 { font-size: 1.05rem; margin-bottom: .6em; }
.doc-req ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-req li { position: relative; padding-left: 28px; }
.doc-req li::before {
  content: ""; position: absolute; left: 6px; top: .28em; width: 7px; height: 13px;
  border: solid var(--color-link); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@media (max-width: 860px) { .doc-overview .steps { grid-template-columns: 1fr; } }

/* ===== Chuyển ngôn ngữ EN | VI (góc phải trên cùng) ===== */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 0 10px; min-height: 44px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700;
  letter-spacing: .04em; color: var(--nav-fg);
}
.lang-switch .lang-opt { opacity: .55; transition: opacity .2s; }
.lang-switch .lang-opt.is-active { opacity: 1; border-bottom: 2px solid currentColor; }
.lang-switch:hover .lang-opt { opacity: 1; }
.lang-switch .lang-sep { opacity: .35; }
.lang-switch:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }

/* ===== Chia sẻ: carousel 1 slide, người đã tách nền đứng trước khối màu và "bật" ra ngoài khung ===== */
.voices .carousel-track { gap: 0; scrollbar-width: none; }
.voices .carousel-track::-webkit-scrollbar { display: none; }
.voices .carousel-track > * { flex: 0 0 100%; }
.voice {
  margin: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center;
  padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--color-surface); border: 1px solid var(--color-border);
}
.voice:not(.has-stage) { grid-template-columns: 1fr; }
.voice-text blockquote {
  margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -.01em;
}
/* Lời trích dẫn: chữ MoMo thường (Momo Trust), một cỡ, không đậm, không nhấn */
.voice-text blockquote, .voice-text blockquote.has-em {
  font-family: var(--font-body); font-weight: 400; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.6; letter-spacing: 0;
}
.voice-text blockquote::before { content: "\201C"; display: block; font-size: 3.2em; line-height: .6; color: var(--color-link); margin-bottom: .1em; }
.voice figcaption { display: flex; flex-direction: column; gap: 2px; }
.voice figcaption strong { font-size: 1.1rem; }
.voice figcaption span { color: var(--color-muted); white-space: pre-line; }

.voice-stage { position: relative; aspect-ratio: 1 / 1; max-width: 420px; width: 100%; justify-self: center; }
/* Khung nền KV (ô vuông đồng tâm đen→magenta) phía sau người; đầu người vượt lên trên mép khung */
.voice-shape { position: absolute; border-radius: 24px; }
.voice-shape-back, .voice-dots { display: none; }
.voice-shape-front {
  inset: 24% 4% 0 4%; overflow: hidden;
  background: radial-gradient(120% 110% at 88% 8%, #b81a5e 0%, var(--kv-magenta) 28%, var(--kv-wine) 58%, var(--kv-plum) 100%);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45);
}
/* các vòng ô vuông của KV, mờ và trọn vẹn quanh đầu người, không cắt ngang */
.voice-shape-front::before {
  content: ""; position: absolute; inset: -40% -20% -20%;
  background: url("../assets/challenge/kv-squares.webp") center / contain no-repeat;
  opacity: .35; mix-blend-mode: screen;
}
.voice-person {
  position: absolute; left: 50%; bottom: 0; width: 92%; height: auto; transform: translateX(-50%);
  border-radius: 0 0 24px 24px;
}
@media (max-width: 860px) {
  .voice { grid-template-columns: 1fr; gap: 28px; }
  .voice-stage { order: -1; max-width: 320px; }
}

/* ===== Voices v3: cả thẻ là một KV thu nhỏ. Nền KV phủ thẻ, các vòng ô vuông nằm sau người,
   người đứng trên mép dưới thẻ, không còn khung màu riêng. ===== */
.voice.has-stage {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0 0 0 clamp(28px, 4.5vw, 64px); gap: 24px; align-items: stretch;
  min-height: clamp(360px, 34vw, 460px);
  border: 0; color: #fff;
  background: var(--kv-ink);
}
/* Ảnh nền KV gắn vào khung người: tâm các vòng ô vuông (69% ảnh) trùng tâm người, phần thừa bị thẻ cắt đi */
.voice.has-stage .voice-stage::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  left: 50%; top: 42%; width: 330%; aspect-ratio: 16 / 9; transform: translate(-69%, -50%);
  background: url("../assets/key-visual/kv-bg-landscape.jpg") center / 100% 100% no-repeat;
}
.voice.has-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .55) 40%, rgba(10, 10, 10, 0) 70%);
}
.voice.has-stage .voice-text { align-self: center; padding: clamp(28px, 4vw, 48px) 0; }
.voice.has-stage .voice-text blockquote { color: #fff; }
.voice.has-stage .voice-text blockquote::before { color: var(--kv-pink); }
.voice.has-stage figcaption strong { color: #fff; }
.voice.has-stage figcaption span { color: var(--kv-blush); opacity: .85; }
.voice.has-stage .voice-stage { align-self: end; max-width: 440px; margin-top: 32px; }
.voice.has-stage .voice-shape-front { display: none; }
.voice.has-stage .voice-person { width: 100%; border-radius: 0; filter: drop-shadow(0 0 40px rgba(0, 0, 0, .35)); }
@media (max-width: 860px) {
  .voice.has-stage { padding: 0 24px; }
  .voice.has-stage::before { background: linear-gradient(0deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .6) 45%, rgba(10, 10, 10, 0) 75%); }
  .voice.has-stage .voice-stage { order: -1; margin: 32px auto 0; max-width: 300px; }
  .voice.has-stage .voice-text { order: 1; padding-top: 0; }
}

/* Voices: ảnh chữ nhật đứng 3:4, bo 2 góc trên, chạm thẳng xuống mép dưới thẻ; không viền */
.voice.has-stage .voice-stage-photo { align-self: end; aspect-ratio: auto; width: min(100%, 320px); max-width: none; margin: clamp(36px, 5vw, 56px) auto 0; }
.voice-photo {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px -20px rgba(0, 0, 0, .6);
}
@media (max-width: 860px) {
  .voice.has-stage .voice-stage-photo { width: min(70%, 260px); margin: 32px auto 8px; }
  .voice.has-stage .voice-stage-photo .voice-photo { border-radius: 20px; }
}

/* Voices: nút trước/sau nằm hai bên thẻ, giữa chiều cao */
.voices .carousel { position: relative; }
.voices .carousel-nav { position: absolute; inset: 50% 0 auto; margin: 0; height: 0; display: flex; justify-content: space-between; pointer-events: none; }
.voices .carousel-btn {
  pointer-events: auto; transform: translateY(-50%); margin-inline: -24px;
  background: #fff; border-color: #fff; color: var(--momo-pink); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45);
}
.voices .carousel-btn:hover { background: var(--pink-50); border-color: var(--pink-50); color: var(--momo-pink); }
.voices .carousel-btn:disabled { opacity: 0; pointer-events: none; }
@media (min-width: 1280px) { .voices .carousel-btn { margin-inline: -28px; } }
@media (max-width: 860px) { .voices .carousel-btn { margin-inline: 8px; } }

/* Giám khảo: một ô vuông bo góc nhạt lệch về góc phải-dưới sau mỗi người (motif ô vuông của KV), kèm một vòng viền mảnh */
.person.has-cutout .person-stage::before,
.person.has-cutout .person-stage::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 22%;
  aspect-ratio: 1 / 1; height: auto;
}
.person.has-cutout .person-stage::before {
  width: 54%; right: 0; bottom: 0; border-radius: 26.1%; /* cùng độ cong góc với viền (22% của ô 64%) để hai góc phải-dưới khít nhau */
  background: linear-gradient(150deg, var(--kv-rose) 0%, var(--kv-magenta) 55%, var(--kv-wine) 100%); /* dải màu hồng-magenta của KV */
}
.person.has-cutout .person-stage::after {
  width: 64%; right: 0; bottom: 0;
  box-sizing: border-box; border: 1.5px solid rgba(209, 88, 142, .35);
}
.person.has-cutout .person-cutout { z-index: 1; }

/* Banner: mô tả căn đều hai bên, rộng đúng bằng dòng tiêu đề dài nhất ("Workspace") */
.has-kv .hero-headline { display: grid; width: max-content; max-width: 100%; }
.has-kv .hero-headline .hero-tagline {
  width: 0; min-width: 100%; max-width: none; margin-top: 28px;
  text-align: justify; text-align-last: left; text-justify: inter-word;
  font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.5; text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual;
}
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .has-kv .hero-headline .hero-tagline { text-align-last: left; }
}

/* Điện thoại: căn trái cho đoạn chữ (cột hẹp căn đều sẽ giãn chữ); Challenge để 2 phím phía dưới chữ, không đè lên chữ */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .has-kv .hero-headline .hero-tagline { text-align: left; text-align-last: left; hyphens: manual; -webkit-hyphens: manual; }
  .section-challenge .lead { text-align: left; text-justify: auto; }
  .section-challenge { padding-bottom: calc(clamp(56px, 8vw, 96px) + 150px); }
  .challenge-art {
    top: auto; bottom: 8px; right: 50%; translate: 50% 0; height: 150px; opacity: 1; animation: none;
  }
  .section-challenge::before { display: none; }
}
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .section-challenge {
    background:
      radial-gradient(ellipse 160px 90px at 50% calc(100% - 66px), rgba(255, 214, 232, .16), rgba(255, 214, 232, 0) 70%),
      radial-gradient(ellipse 240px 150px at 50% calc(100% - 78px), rgba(209, 88, 142, .2), rgba(209, 88, 142, 0) 70%),
      linear-gradient(90deg, var(--kv-ink) 45%, var(--kv-plum) 100%);
  }
}

/* Logo TechDay '26 (SVG, mặt nạ: trắng trên banner tối, hồng khi header nền sáng) */
.brand-mark {
  display: inline-block; height: 54px; aspect-ratio: 1241 / 1343; background: var(--nav-accent);
  -webkit-mask: url("../assets/logo-techday.svg") center / contain no-repeat;
  mask: url("../assets/logo-techday.svg") center / contain no-repeat;
}
@media (max-width: 860px) { .brand-mark { height: 48px; } }
.person-role { white-space: pre-line; }

/* Tiếng Việt: cỡ chữ mô tả = 0,181 lần cỡ tiêu đề, đo thực tế cho vừa đúng 3 dòng ở mọi cỡ màn hình;
   mỗi dòng gần đầy sẵn nên căn đều hai bên chỉ giãn từ chưa tới 5px. Rộng bằng dòng "Workspace" như bản tiếng Anh. */
html.has-kv[lang="vi"] .hero-headline { --h1fs: clamp(3rem, 6.2vw, 6.2rem); }
html.has-kv[lang="vi"] .hero h1 { font-size: var(--h1fs, clamp(3rem, 6.2vw, 6.2rem)); }
html.has-kv[lang="vi"] .hero-headline .hero-tagline {
  font-size: calc(var(--h1fs) * 0.181); line-height: 1.55;
  text-align: justify; text-align-last: left; text-wrap: wrap; hyphens: manual; -webkit-hyphens: manual;
}
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  html.has-kv[lang="vi"] .hero-headline .hero-tagline { font-size: 1rem; text-align: left; text-align-last: left; }
}

/* Chữ nhấn trong tiêu đề: Momo Signature, màu hồng */
h2 .sig, h2.wow-split .sig { font-family: "Momo Signature", var(--font-display), cursive; font-weight: 400; color: var(--momo-pink); font-size: 1.2em; letter-spacing: 0; }

/* ===== Ngày sự kiện TechDay (11.12) ===== */
.event-when { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 36px; }
.event-date { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.02em; color: var(--momo-pink); }
.event-venue { display: flex; flex-direction: column; font-size: 1.05rem; line-height: 1.4; color: var(--color-muted); padding-left: 28px; border-left: 2px solid var(--kv-rose); }
.event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.event-card { display: flex; flex-direction: column; padding: 28px; }
.event-card h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: .5em; }
.event-card p { margin: 0; }
.event-time { font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-link); margin-bottom: 12px; }
@media (max-width: 860px) { .event-venue { padding-left: 0; border-left: 0; } .event-grid { grid-template-columns: 1fr; gap: 16px; } }
.event-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; margin: 0 0 36px; }
.event-top .event-when { margin: 0; }
.event-cta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.event-cta .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.event-cta-note { margin: 0; color: var(--color-muted); font-size: .98rem; }


/* Giám khảo: tên không rớt chữ cuối xuống dòng riêng; chức danh ngắt dòng cân đối */
@media (min-width: 1360px) {
  .carousel-people .carousel-track { gap: 14px; }
  .carousel-people .carousel-track > .person { flex: 0 0 172px; }
  .carousel-people .person.has-cutout .person-name { white-space: nowrap; font-size: .9rem; }
}
.carousel-people .person-role { font-size: .9rem; text-wrap: balance; }

/* Đối tác trên header: logo giữ nguyên màu gốc, không khung nền; nhãn vai trò nhỏ phía trên từng logo */
.brand-by.brand-plate { align-items: stretch; gap: 14px; margin-left: 18px; padding: 2px 0; }
@media (max-width: 859px), (min-width: 1240px) { .brand-by.brand-plate { display: inline-flex; } }
.brand-partner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; }
.brand-cap { font-size: .56rem; font-weight: 600; line-height: 1; letter-spacing: .09em; text-transform: uppercase; color: var(--nav-fg); opacity: .75; white-space: nowrap; }
.p-img { display: block; width: auto; max-width: none; }
.p-momo { height: 1.55rem; }
.p-aws { height: 1.25rem; }
.brand-sep { width: 1px; background: var(--nav-fg); opacity: .3; align-self: stretch; margin: 2px 0; }
@media (max-width: 860px) { .brand-by.brand-plate { margin-left: 10px; gap: 10px; padding: 2px 0; } .p-momo { height: 1.15rem; } .p-aws { height: .9rem; } .brand-cap { font-size: .5rem; } }