:root {
  --navy-950: #0a0e27;
  --navy-900: #0d1230;
  --navy-800: #141a3d;
  --navy-border: rgba(255, 255, 255, 0.1);
  --gold-100: #f9e8b8;
  --gold-300: #f0c96b;
  --gold-500: #e0b04a;
  --gold-700: #c9992f;
  --text-white: #ffffff;
  --text-muted: #b9bdd6;
  --cream-bg: #fbf7ee;
  --cream-border: #efe4cd;
  --text-gray: #6b7280;
  --pink-500: #e86a88;
  --purple-500: #8e6fd9;
  --blue-500: #4a90d9;
  --font-display: "Montserrat", sans-serif;
  --font-body: "Be Vietnam Pro", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--navy-950);
  color: var(--text-white);
  overflow-x: hidden;
  max-width: 100vw;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-gold {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
  color: #241a05;
  box-shadow: 0 8px 20px rgba(201, 153, 47, 0.35);
}

.btn-gold:hover {
  box-shadow: 0 12px 26px rgba(201, 153, 47, 0.45);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--text-white);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

.btn-lg {
  padding: 15px 32px;
  font-size: 1rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 39, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--navy-border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 76px;
}

/* Cao hơn (0,3,0) so với .header-inner { height } ở mọi breakpoint nên
   luôn thắng — mở menu mobile thì bỏ chiều cao cố định để nav/CTA xuống
   dòng không bị cắt. */
.site-header.is-menu-open .header-inner {
  height: auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon {
  height: 64px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--gold-300);
  display: flex;
  flex-direction: column;
}

.logo-year {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
}

.main-nav a {
  color: var(--text-white);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.main-nav a:hover {
  color: var(--gold-300);
}

.btn-nav-cta {
  flex-shrink: 0;
  padding: 10px 22px;
  font-size: 0.875rem;
}

/* Đăng nhập cho người ĐÃ CÓ tài khoản forfuture.vn (khác "Đăng ký ngay" —
   đó là đăng ký dự thi mới) — trỏ sang trang login thật của forfuture.vn
   kèm ?redirect= để vào thẳng dashboard riêng của Mic Vàng 2026 sau khi
   đăng nhập, không qua dashboard chung. */
.btn-login-link {
  display: none;
}

.btn-login-link:hover {
  color: var(--gold-300);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 768px; /* = chiều cao gốc của images/hero-banner.png, hiện đủ 100% ảnh không bị cắt */
  display: flex;
  align-items: center;
  padding: 56px 0;
}

/* Ảnh nền (images/hero-banner.png — 2 bé MC + sân khấu khán giả, đã có sẵn
   chữ "Young Voices / Brighten Vietnam") giữ ĐÚNG kích thước gốc
   (background-size: auto, không cover/không zoom), neo mép trên ngay dưới
   header (background-position: top) — không dùng cover vì sẽ phóng to/crop
   khác tỉ lệ gốc. .hero có min-height bằng đúng chiều cao gốc của ảnh
   (768px) để hiển thị đủ 100% chiều cao, không bị cắt ở đáy. Lớp gradient
   tối dần vẫn để riêng background-size: cover để luôn phủ kín toàn bộ
   section. Đã bỏ lớp gradient tối bên trái theo yêu cầu — ảnh hiển thị
   nguyên vẹn không bị che mờ. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/hero-banner.png?v=2");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto;
}

/* .hero-inner dùng chung class .container (max-width 1280px, canh giữa)
   với header — nhưng ở hero thì bỏ canh giữa đó đi, cho khối chữ nằm sát
   về bên trái thật của màn hình (chỉ còn padding 24px) thay vì bị kẹp
   giữa 2 khoảng trắng đối xứng như trước — đây chính là hiệu ứng "dịch
   chữ sang trái" nhìn thấy rõ nhất ở màn hình rộng. */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 3%;
}

.hero-content {
  max-width: 620px;
}

.hero-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--gold-100), var(--gold-500) 55%, var(--gold-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title-year {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-subtitle {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.3;
  color: var(--text-white);
}

.hero-desc {
  margin: 0 0 28px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 22px 6px 6px;
  border-radius: 999px;
  border: 1.5px solid rgba(240, 201, 107, 0.65);
  background: rgba(10, 14, 39, 0.35);
}

.stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
  border: 2px solid rgba(240, 201, 107, 0.65);
  box-shadow: 0 4px 12px rgba(201, 153, 47, 0.3);
}

.stat-icon svg {
  width: 22px;
  height: 22px;
}

.stat-text {
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.stat-text strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* Header dùng flex-wrap thay vì absolute+offset đoán số px: logo/toggle
     giữ nguyên hàng 1 (order 1/2), nav và nút CTA tự xuống hàng riêng theo
     flow bình thường (order 3/4, width:100%) — không lệ thuộc chiều cao
     thật của menu nên không bao giờ chồng lên nhau dù số mục nav đổi. */
  .header-inner {
    flex-wrap: wrap;
  }

  .logo {
    order: 1;
  }

  .menu-toggle {
    order: 2;
    display: flex;
    margin-left: auto;
  }

  .main-nav {
    order: 3;
    display: none;
    width: 100%;
  }

  .btn-login-link {
    order: 4;
    display: none;
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }

  .btn-nav-cta {
    order: 5;
    display: none;
    width: 100%;
  }

  .site-header.is-menu-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--navy-border);
  }

  .site-header.is-menu-open .main-nav a {
    width: 100%;
    padding: 10px 0;
  }

  /* order:4 (đặt sẵn ở .btn-login-link phía trên) luôn nằm TRƯỚC order:5
     (.btn-nav-cta) trong flex nên tự động xếp trên nút vàng "Đăng ký ngay"
     bên dưới, không cần chỉnh lại thứ tự HTML. */
  .site-header.is-menu-open .btn-login-link {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 10px;
  }

  .site-header.is-menu-open .btn-nav-cta {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 20px;
  }

}

/* Dưới 1024px, chữ và ảnh không còn đủ chỗ để đứng cạnh nhau kiểu full-bleed
   — chữ bắt đầu đè lên mặt 2 bé, mất chữ lẫn ảnh. Chuyển hẳn sang bố cục
   xếp chồng: ảnh nguyên trạng làm banner trên cùng (ngay dưới header,
   background-size: cover chỉ trong khung banner này — không phải cắt/zoom
   cả section như bên desktop), chữ xuống hẳn bên dưới trên nền đặc, không
   cần gradient che chữ nữa vì chữ không còn nằm trên ảnh. */
@media (max-width: 1024px) {
  .hero {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .hero-bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 280px;
    background-image: url("../images/hero-banner.png?v=2");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
  }

  .hero-inner {
    display: block;
  }

  .hero-content {
    max-width: none;
    background: var(--navy-950);
    margin: 0 -24px;
    padding: 32px 24px 40px;
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: 64px;
  }

  .logo-icon {
    height: 48px;
  }

  .hero-bg {
    height: 220px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-stats {
    gap: 16px 20px;
  }
}

/* ---------- Tiêu đề section dùng chung (nhiều section) ---------- */
.section-eyebrow {
  margin: 0 0 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-gray);
}

.section-title {
  margin: 0 0 48px;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.25;
  color: var(--navy-950);
}

.section-subtitle {
  margin: -32px 0 40px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-gray);
}

@media (max-width: 640px) {
  .section-title {
    margin-bottom: 32px;
  }

  .section-subtitle {
    margin-top: -24px;
  }
}

/* ---------- Section 2: Giới thiệu + Đối tượng tham gia ---------- */
/* Khôi phục 2026-09-22 (từng bị xoá nhầm — xem comment ở #gioi-thieu
   trong index.html). */
.features {
  background: var(--cream-bg);
  padding: 72px 0;
}

.age-groups-title {
  margin-top: 8px;
}

/* ---- 4 thẻ lợi ích ---- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 72px;
}

.feature-card {
  background: #fff;
  border: 1px solid var(--cream-border);
  border-radius: 20px;
  padding: 32px 22px;
  text-align: center;
}

.feature-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy-950);
}

.feature-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-gray);
}

/* ---- 3 thẻ nhóm tuổi ---- */
/* To hơn 20% so với bề ngang .container (1280px, xem .container phía
   trên), tràn đối xứng ra 2 bên. min(120%, ...) chặn không cho vỡ layout
   trên các màn hình hẹp hơn 1280px. Dùng left:50% + translateX(-50%) để
   căn giữa — đây là cách căn giữa 1 khối RỘNG HƠN khối cha chuẩn/ổn định
   (margin:auto từng bị lệch hẳn sang phải khi thử, không rõ do trình
   duyệt tính lại margin âm thế nào, nên đổi hẳn sang cách này). gap tăng
   theo cùng tỉ lệ 20% (20px → 24px) để khoảng cách giữa 3 thẻ vẫn cân đối
   với kích thước ảnh mới. */
.age-groups-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: min(120%, calc(100vw - 32px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.age-card {
  position: relative;
  /* Đúng tỉ lệ thật của 3 ảnh nền (1817 × 866px) — khớp hệt tỉ lệ khung thì
     background-size: cover mới hiển thị TRỌN ảnh, không cắt xén 2 bên.
     Đổi ảnh khác tỉ lệ thì phải sửa lại số này theo. */
  aspect-ratio: 1817 / 866;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Ảnh nền tạm bằng gradient (chưa có ảnh thật) — xoá 2 dòng
   background/background-image này khi AGE_GROUPS trong js/script.js có
   imageUrl thật, lúc đó JS tự thêm inline style ghi đè. */
.age-card-placeholder-1 { background: linear-gradient(160deg, #2a3563, var(--navy-950)); }
.age-card-placeholder-2 { background: linear-gradient(160deg, #3a2f63, var(--navy-950)); }
.age-card-placeholder-3 { background: linear-gradient(160deg, #1f3a52, var(--navy-950)); }

.age-card-overlay {
  position: absolute;
  inset: 0;
  padding: 20px;
}

/* top:25% tính theo CHIỀU CAO thẻ (giống cách làm với .age-card-badges ở
   dưới) — hạ cụm tên + độ tuổi xuống thấp hơn mép trên thẻ, thay vì dính
   sát theo padding 20px cũ. */
.age-card-header {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 25%;
  display: flex;
  flex-direction: column;
}

.age-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--gold-300);
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.age-card-range {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

/* bottom:20% (tính theo CHIỀU CAO thẻ vì đang position:absolute — margin/
   padding % lại luôn tính theo chiều RỘNG, dùng nhầm sẽ ra số sai) — đẩy
   2 ô lên cao hơn 20% so với mép dưới thẻ, thay vì dính sát đáy như cũ. */
.age-card-badges {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20%;
  display: flex;
  gap: 10px;
}

.age-badge {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  background: rgba(10, 14, 39, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  backdrop-filter: blur(3px);
}

.age-badge strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--text-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.age-badge span {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-white);
  opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .age-groups-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 420px;
    gap: 20px;
    position: static;
    transform: none;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .features {
    padding: 48px 0;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 48px;
  }
}

/* ---------- Section 3: Lộ trình cuộc thi ---------- */
.roadmap {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

/* Nền sân khấu đèn vàng — ảnh thật (images/roadmap-bg.png). Chiều cao
   section này co theo NỘI DUNG (không cố định theo aspect-ratio như các
   banner khác), nên dùng cover + center để ảnh luôn phủ kín, chấp nhận
   crop nhẹ 2 bên tuỳ độ rộng màn hình. */
.roadmap-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/roadmap-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.roadmap-inner {
  position: relative;
  z-index: 1;
}

.section-eyebrow-gold {
  color: var(--gold-300);
}

.section-title-gold {
  color: var(--text-white);
}

/* ---- Track 3 mốc thời gian (3 vòng, cập nhật 2026-09-24) ---- */
.roadmap-track {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
  margin-top: 56px;
}

.roadmap-track::before {
  content: "";
  position: absolute;
  top: 8px;
  /* left/right = 100%/(2×N) để canh đúng tâm chấm ĐẦU/CUỐI trong N mục
     flex:1 bằng nhau (N=3 mốc, xem ROADMAP trong js/script.js) — phải đổi
     theo khi đổi số mốc. */
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 201, 107, 0.5) 15%, rgba(240, 201, 107, 0.5) 85%, transparent);
  z-index: 0;
}

.roadmap-item {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.roadmap-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-bottom: 28px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
  box-shadow: 0 0 0 5px rgba(240, 201, 107, 0.18);
}

.roadmap-card {
  display: flex;
  align-items: flex-start;
  flex: 1;
  gap: 16px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(240, 201, 107, 0.35);
  border-radius: 16px;
  padding: 20px 22px;
  backdrop-filter: blur(2px);
}

.roadmap-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--text-white);
  line-height: 1;
}

.roadmap-divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  min-height: 38px;
  background: rgba(255, 255, 255, 0.25);
}

.roadmap-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.roadmap-text strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-white);
}

.roadmap-text span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold-300);
}

/* Mô tả + địa điểm tổ chức của từng vòng — chữ trắng dịu, được xuống dòng. */
.roadmap-desc {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.roadmap-places {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.roadmap-places li + li {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .roadmap-track {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .roadmap-track::before {
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(240, 201, 107, 0.5) 10%, rgba(240, 201, 107, 0.5) 90%, transparent);
  }

  .roadmap-item {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
  }

  .roadmap-item:last-child {
    padding-bottom: 0;
  }

  .roadmap-dot {
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  .roadmap {
    padding: 56px 0;
  }

  .roadmap-track {
    margin-top: 40px;
  }

  .roadmap-card {
    padding: 16px;
    gap: 12px;
  }

  .roadmap-num {
    font-size: 1.5rem;
  }
}

/* ---------- Section 4a: Chinh phục chiếc Mic Vàng (ảnh thật, không chữ) ---------- */
/* aspect-ratio cao hơn tỉ lệ gốc ảnh (2172:724 -> 2172:832, ~15% cao hơn)
   để chủ động tăng chiều cao hiển thị — background-size: cover sẽ crop
   nhẹ 2 mép trái/phải (nơi có chữ "Vietnamese Voices..."/"CHINH PHỤC..."),
   đã xác nhận đánh đổi này với người dùng. */
.conquer {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2172 / 832;
  /* Nền mặc định kế thừa từ body là navy đậm (--navy-950) — ảnh cover phủ
     kín gần hết khung nhưng đổi hẳn sang màu kem #FBF7EE (khớp .finals-
     frame/.criteria phía dưới) để mọi khoảng hở dưới ảnh không bị lộ màu
     navy lệch tông. */
  background: #fbf7ee;
}

.conquer-bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/conquer-banner.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ---- Phần thi chung kết ---- */
/* margin-top (-12% chiều rộng, kéo .finals lên) TRỪ ĐI padding-top (đẩy
   .finals-frame xuống lại trong lòng .finals) = phần khung card THẬT SỰ lộ
   ra chồng lên ảnh .conquer. Chỉnh padding-top=20px để phần lộ ra đó bằng
   đúng 1/2 chiều cao khung .finals-frame — khung nằm cân giữa ranh giới
   section 4 (.conquer) và section 5 (.criteria), không lệch hẳn về 1 bên. */
.finals {
  position: relative;
  z-index: 2;
  margin-top: -12%;
  /* .finals đè lên .conquer nhờ margin-top âm nhưng chính nó không có
     nền — phần padding-top 20px phía trên .finals-frame (transparent) để
     lộ khoảng hở ra ngoài rìa dưới ảnh .conquer, giờ tô luôn màu kem này
     để khớp .conquer/.finals-frame/.criteria xung quanh. */
  background: #fbf7ee;
  padding: 20px 0 0;
}

.finals-title {
  margin: 0 0 23px;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  color: var(--navy-950);
}

/* To hơn 30% so với bề ngang .container — cùng kỹ thuật "tràn" đối xứng
   ra 2 bên đã dùng cho .age-groups-grid (min() chặn vỡ layout trên màn
   hẹp, left:50%+translateX(-50%) để căn giữa vì margin:auto từng bị lệch
   phải khi thử ở khối tương tự). CHỈ tăng chiều rộng khung ở đây — chiều
   cao ảnh 2 thẻ tăng riêng ở .final-card (aspect-ratio), không tăng theo
   width này. */
.finals-frame {
  background: var(--cream-bg);
  border: 1px solid var(--cream-border);
  border-radius: 24px;
  padding: 37px 32px;
  width: min(130%, calc(100vw - 32px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.finals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Chiều cao tăng 30% (4.6 → 5.98) so với tỉ lệ gốc, giữ nguyên chiều
   rộng — thẻ ảnh cao hơn, không rộng hơn. */
.final-card {
  position: relative;
  aspect-ratio: 16 / 5.98;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.final-card-placeholder-1 { background: linear-gradient(135deg, #1a2550, var(--navy-950)); }
.final-card-placeholder-2 { background: linear-gradient(135deg, #4a1f3a, var(--navy-950)); }

.final-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px;
}

.final-card-overlay h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--gold-300);
}

.final-card-overlay p {
  margin: 0;
  max-width: 260px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-white);
}

@media (max-width: 900px) {
  .finals-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Ảnh .conquer co lại rất thấp ở mobile (theo chiều rộng màn hình) trong
     khi khung .finals-frame gần như giữ nguyên chiều cao (chủ yếu do
     padding/cỡ chữ cố định px) — muốn khung vẫn nằm cân giữa 2 section như
     desktop thì margin-top phải là số px cố định riêng (không dùng chung
     -12% kế thừa từ desktop, ở bề rộng hẹp -12% không đủ kéo lên). */
  .finals {
    margin-top: -165px;
    padding: 20px 0 0;
  }

  .finals-frame {
    padding: 23px 16px;
    border-radius: 18px;
  }

  .finals-title {
    margin-bottom: 16px;
  }

  .final-card-overlay p {
    max-width: none;
  }
}

/* ---------- Section 5: Tiêu chí chấm điểm ---------- */
/* Khối "Phần thi chung kết" (.finals, z-index:2) nằm GIỮA 2 section — đã
   chồng lên ảnh .conquer phía trên (margin-top âm ở .finals), giờ cho
   .criteria phía dưới cũng chồng ngược lên đáy khối đó, để khối card nằm
   lọt hẳn giữa 2 section thay vì chỉ tiếp giáp phẳng. .criteria không cần
   z-index riêng vì .finals đã có z-index:2, luôn nổi lên trên.
   margin-top đã giảm dần độ âm qua vài lần chỉnh (-303px → -182px → -90px
   → -20px) để hạ cụm tiêu chí xuống thấp hơn theo yêu cầu — .finals-frame
   vừa được nới rộng 30% nên cao hơn trước, số âm cũ kéo lưới tiêu chí lên
   cao hơn khung mới. */
.criteria {
  position: relative;
  margin-top: -20px;
  background: var(--cream-bg);
  padding: 80px 0 88px;
  text-align: center;
}

.criteria-title {
  margin: 0;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  color: var(--navy-950);
}

.criteria-subtitle {
  margin: 6px 0 48px;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  color: var(--navy-950);
}

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.criteria-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.criteria-ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(from -100deg, var(--gold-300), var(--gold-700) 300deg, var(--cream-border) 300deg 360deg);
  margin-bottom: 16px;
}

.criteria-ring-inner {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--cream-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.criteria-ring-inner strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--navy-950);
}

.criteria-ring-inner span {
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--text-gray);
}

.criteria-label {
  margin: 0;
  max-width: 180px;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--navy-950);
}

@media (max-width: 900px) {
  .criteria-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}

@media (max-width: 640px) {
  /* Chủ đích cho tiêu đề ".criteria-title" + subtitle khuất hẳn sau khung
     ".finals-frame" để .criteria sát dính lên ảnh .conquer phía trên —
     không phải lỗi. NHƯNG: -287px (giá trị cũ) bị "mồ côi" từ lần
     .finals-frame còn nhỏ hơn — sau khi khung được nới rộng 30% + card cao
     thêm 30% (không đồng bộ lại số này), -287px kéo dư ra ngoài khối tiêu
     đề+subtitle (chỉ cao ~117px cố định, vì font đã ở mức clamp() tối
     thiểu suốt dải mobile) nên nuốt luôn cả hàng đầu (2/4 ô) của
     .criteria-grid vào vùng bị khung đè lên trên — user báo thiếu ô là do
     đây. -90px vẫn đủ che trọn title+subtitle (~85px nội dung thật) và
     luôn chừa ~27px an toàn trước khi .criteria-grid bắt đầu, không phụ
     thuộc bề rộng màn hình trong dải 320–640px (finals-frame luôn cao hơn
     90px thực tế). */
  .criteria {
    margin-top: -90px;
    padding: 32px 0 56px;
  }

  .criteria-subtitle {
    margin-bottom: 32px;
  }
}

/* ---------- Section: Thể lệ cuộc thi (nội dung thật, văn bản dài) ---------- */
.rules {
  padding: 88px 0;
  background: var(--cream-bg);
}

.rules-doc {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.rules-block h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy-950);
}

.rules-block p {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--navy-900);
}

.rules-block ul {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--navy-900);
}

.rules-block ul ul {
  margin-top: 6px;
  margin-bottom: 0;
}

.rules-block li {
  margin-bottom: 4px;
}

.rules-note {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-gray);
}

/* 4 vòng thi — accordion gốc trình duyệt (<details>/<summary>), không cần
   JS riêng vì mỗi vòng khá dài, gộp thành khối văn bản liên tục sẽ khó
   lướt/đọc hơn nhiều so với thu gọn từng vòng. */
.rules-round {
  border: 1px solid var(--cream-border);
  border-radius: 16px;
  background: #ffffff;
  margin-bottom: 14px;
  overflow: hidden;
}

.rules-round summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}

.rules-round summary::-webkit-details-marker {
  display: none;
}

.rules-round summary::after {
  content: "+";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream-bg);
  color: var(--navy-950);
  font-size: 1.125rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.rules-round[open] summary::after {
  content: "−";
}

.rules-round-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy-950);
}

.rules-round-time {
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
  color: #241a05;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.rules-round-body {
  padding: 0 22px 22px;
  border-top: 1px solid var(--cream-border);
  padding-top: 16px;
}

.rules-round-body p,
.rules-round-body ul {
  font-size: 0.875rem;
}

.rules-part-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-950);
}

@media (max-width: 640px) {
  .rules {
    padding: 56px 0;
  }

  .rules-round summary {
    padding: 14px 16px;
  }

  .rules-round-body {
    padding: 0 16px 18px;
  }

  .rules-round-time {
    font-size: 0.6875rem;
    padding: 3px 10px;
  }
}

/* ---------- Section 6: Vinh danh / Giải thưởng (ảnh thật, không chữ) ---------- */
/* Cùng kỹ thuật với .conquer: ép đúng tỉ lệ khung hình gốc của ảnh
   (2172:474) bằng aspect-ratio để background-size: cover luôn vừa khít
   100% ảnh (bục giải + khối "Giải chuyên đề" bên phải), không crop, không
   méo, ở MỌI độ rộng màn hình. */
.awards {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2172 / 474;
}

.awards-bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/awards-banner.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ---------- Section 7: Ban giám khảo + Đăng ký dự thi (section cuối) ---------- */
/* Nền ảnh sân khấu (images/stage-wave-bg.png): background-size 100% auto —
   ảnh luôn khớp đúng 100% CHIỀU RỘNG section (thấy đủ 2 mép trái/phải,
   không bị cắt), chiều cao tự co theo đúng tỉ lệ gốc (không méo). Ở màn
   hình rộng hơn ảnh gốc thì đây vẫn là co nhỏ lại (không phóng to). Neo
   dưới + giữa để phần sóng/sân khấu luôn nằm sát đáy section. */
.judges-register {
  background-color: #fff;
  background-image: url("../images/stage-wave-bg.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  padding: 72px 0 40px;
}

/* Section này cần rộng hơn khung .container mặc định (1280px) để 4 ô giám
   khảo có đủ chỗ to lên 30% mà không ép hẹp lại cột form bên phải. */
.judges-register .container {
  max-width: 1440px;
}

.jr-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}

.jr-left {
  margin-top: 6%;
}

.jr-right {
  margin-top: 18%;
}

/* ---- Ban giám khảo ---- */
.judges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* aspect-ratio 1/1.2 thay vì 1/1 vuông: phần ảnh (.judge-photo, flex:1, co
   giãn theo phần còn lại sau khối tên/vai trò cố định chiều cao ở dưới)
   nhờ vậy cao thêm đúng ~30% so với lúc thẻ còn vuông (2 lần tăng 15% cộng
   dồn). */
.judge-card {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1.2;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-950);
}

.judge-photo {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.judge-photo-placeholder-1 { background: linear-gradient(160deg, #2b3a6b, var(--navy-950)); }
.judge-photo-placeholder-2 { background: linear-gradient(160deg, #4a1f3a, var(--navy-950)); }
.judge-photo-placeholder-3 { background: linear-gradient(160deg, #1f4a3a, var(--navy-950)); }
.judge-photo-placeholder-4 { background: linear-gradient(160deg, #4a3a1f, var(--navy-950)); }

.judge-photo-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
}

.judge-info {
  padding: 14px 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.judge-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.judge-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--text-white);
}

/* ---- Form đăng ký dự thi ---- */
.register-card {
  background: #fff;
  border: 1px solid var(--cream-border);
  border-radius: 20px;
  padding: 32px;
}

.register-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--navy-950);
}

.register-subtitle {
  margin: 0 0 24px;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-gray);
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* .form-row { display: grid } (author stylesheet) thắng luôn rule mặc định
   [hidden] { display: none } của trình duyệt (user-agent stylesheet) —
   không có rule này thì #duo-partner-row hidden vẫn hiện ra bình thường. */
.form-row[hidden] {
  display: none;
}

/* Hàng chỉ 1 ô (Bảng đôi: "Bảng thi" và "Họ và tên phụ huynh" mỗi ô 1 hàng). */
.form-row.form-row-single {
  grid-template-columns: 1fr;
}

/* Ô chọn "Xã/phường" có danh sách xổ xuống (initWardCombobox trong js/script.js). */
.combo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  max-height: 260px;
  margin: 4px 0 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--cream-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(13, 18, 48, 0.18);
  overscroll-behavior: contain;
}

.combo-list[hidden] {
  display: none;
}

.combo-group {
  position: sticky;
  top: -4px;
  padding: 6px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-gray);
  background: #fff;
}

.combo-option {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--navy-950);
  cursor: pointer;
}

.combo-option:hover {
  background: var(--cream-bg);
}

.combo-option.is-active {
  background: #f6ecd2;
}

.combo-empty {
  padding: 10px;
  font-size: 0.8125rem;
  color: var(--text-gray);
}

.register-form label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-900);
}

.register-form label span {
  color: #dc2626;
}

.register-form label span.form-hint {
  color: var(--text-gray);
  font-weight: 400;
}

.register-form input,
.register-form select {
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--cream-border);
  background: var(--cream-bg);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--navy-950);
}

.register-form input:focus,
.register-form select:focus {
  outline: 2px solid var(--gold-500);
  outline-offset: 1px;
}

.register-form input::placeholder {
  color: var(--text-gray);
  opacity: 0.75;
}

.register-note {
  margin: 2px 0 4px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-gray);
}

.btn-block {
  width: 100%;
  margin-top: 4px;
}

.register-msg {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-gray);
}

.register-msg.is-success {
  color: #15803d;
}

.register-msg.is-error {
  color: #dc2626;
}

.register-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.register-warning-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #b45309;
}

.register-warning span {
  font-size: 0.75rem;
  line-height: 1.6;
  color: #92400e;
}

.register-warning a {
  color: #92400e;
  font-weight: 700;
  text-decoration: underline;
}

/* Cảnh báo "email đã tồn tại" — cùng tông màu hổ phách với .register-warning
   ở trên cho nhất quán trong form (đều là ghi chú phụ trợ, không phải lỗi
   chặn submit). display:flex khai riêng ở đây rồi ghi đè lại bằng
   [hidden] compound selector (KHÔNG dùng :not([hidden])) — class selector
   luôn thắng specificity của rule [hidden]{display:none} mặc định trình
   duyệt nếu không làm vậy, cùng lỗi/cùng cách sửa đã gặp ở .form-row[hidden]
   phía trên. */
.email-exists-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.email-exists-warning[hidden] {
  display: none;
}

.email-exists-warning-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #b45309;
}

.email-exists-warning-body p {
  margin: 0 0 10px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #92400e;
}

.email-exists-warning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.email-exists-warning-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #b45309;
  font-size: 0.75rem;
  font-weight: 700;
  color: #92400e;
  text-decoration: none;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.email-exists-warning-actions a:hover {
  background: #b45309;
  color: #ffffff;
}

/* ---------- Popup "Đăng ký thành công" ---------- */
.reg-success-overlay[hidden] {
  display: none;
}

.reg-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 14, 39, 0.65);
}

.reg-success-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 36px 32px 32px;
  border-radius: 20px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.reg-success-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--cream-bg);
  color: var(--text-gray);
  cursor: pointer;
}

.reg-success-close svg {
  width: 16px;
  height: 16px;
}

.reg-success-close:hover {
  background: #fee2e2;
  color: #dc2626;
}

.reg-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #ecfdf3;
  color: #15803d;
}

.reg-success-icon svg {
  width: 34px;
  height: 34px;
}

.reg-success-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy-950);
}

.reg-success-text {
  margin: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-gray);
}

.reg-success-text strong {
  color: var(--navy-950);
}

.reg-success-warning {
  margin: 0 0 20px;
  text-align: left;
}

@media (max-width: 1024px) {
  .jr-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .judges-register {
    padding: 48px 0 32px;
  }

  .judges-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .register-card {
    padding: 24px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  border-top: 1px solid var(--navy-border);
  padding: 24px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-white);
}

.footer-social a:hover {
  background: var(--gold-500);
  color: var(--navy-950);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  .footer-inner {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Thanh CTA ghim đáy màn hình (mobile) ---------- */
/* Ẩn hẳn desktop/tablet — nút "Đăng ký ngay" gốc trên header vẫn đủ dùng ở
   đó. CHỈ bật ở mobile (≤640px, cùng breakpoint với lúc .btn-nav-cta bị ẩn
   khỏi header — xem @media 1024px ở trên, nhưng thu hẹp lại 640px cho đúng
   nghĩa "mobile" theo quy ước chung của file này). z-index thấp hơn
   .site-header (100) để không đè lên khi cuộn tới đỉnh trang. */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 640px) {
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 14, 39, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--navy-border);
    transition: transform 0.25s ease;
  }

  /* Tự ẩn (trượt xuống dưới màn hình) khi form #dang-ky thật đã vào khung
     nhìn — gắn/gỡ bằng IntersectionObserver, xem initMobileStickyCta()
     trong js/script.js — tránh nút nổi che khuất chính form cần điền. */
  .mobile-sticky-cta.is-hidden {
    transform: translateY(120%);
  }

  /* Chừa khoảng trống bằng chiều cao thanh CTA ở cuối trang để nút không
     che mất footer khi cuộn hết trang (thanh vẫn "is-hidden" lúc này vì
     #dang-ky đã qua khung nhìn từ lâu, nhưng vẫn phòng trường hợp JS lỗi
     không tải được/trình duyệt tắt JS). */
  body {
    padding-bottom: 76px;
  }
}