/* ============================================================
   School Enterprise Challenge Việt Nam — Landing Page
   Bảng màu: navy (chủ đạo) · gold (lúa mì) · teal (mầm/người)
   ============================================================ */

:root {
  --brand-50:#eef3fb; --brand-100:#d8e3f4; --brand-200:#b4c8e8; --brand-300:#87a5d7;
  --brand-400:#567fc1; --brand-500:#345fa3; --brand-600:#294c86; --brand-700:#213d6c;
  --brand-800:#162a49; --brand-900:#0e1c33;

  --ink:#111a26; --ink-soft:#3a4553; --ink-muted:#6a7583;

  --gold-50:#fdf6e3; --gold-100:#fbecc4; --gold-300:#f7d27e;
  --gold-400:#f2be4f; --gold-500:#e6a626; --gold-600:#c4851a;

  --teal-50:#e6f7f3; --teal-100:#c5ece4; --teal-400:#33c0ab;
  --teal-500:#14a08a; --teal-600:#0d7d6c;

  --cream:#f7f9fc;
  --line:rgba(17,26,38,.08);

  --shadow-soft:0 10px 40px -12px rgba(18,16,15,.18);
  --shadow-card:0 4px 24px -8px rgba(18,16,15,.12);

  --font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --r-sm:.75rem; --r-md:1rem; --r-lg:1.5rem; --r-xl:2rem;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; padding:0; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea { font:inherit; }
.sprite { display:none; }
/* Thuộc tính hidden phải luôn thắng các rule display bên dưới */
[hidden] { display:none !important; }

/* ---------- Icon ---------- */
.ic { width:1rem; height:1rem; flex:none; fill:none; stroke:currentColor; stroke-width:2;
      stroke-linecap:round; stroke-linejoin:round; }
.ic-md { width:1.5rem; height:1.5rem; }
.ic-lg { width:1.5rem; height:1.5rem; }
.ic-xl { width:3rem; height:3rem; stroke-width:1.75; }

.c-brand { color:var(--brand-500); }
.c-gold { color:var(--gold-500); }
.c-gold-dark { color:var(--gold-600); }
.c-teal { color:var(--teal-500); }

/* ---------- Layout ---------- */
.container { width:100%; max-width:72rem; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:640px){ .container { padding-inline:1.5rem; } }
@media (min-width:1024px){ .container { padding-inline:2rem; } }

.section { padding-block:4rem; }
@media (min-width:640px){ .section { padding-block:5rem; } }
@media (min-width:1024px){ .section { padding-block:6rem; } }

.sec-white { background:#fff; }
.sec-teal { background:linear-gradient(to bottom,#fff,rgba(230,247,243,.5),#fff); }
.sec-gold { background:linear-gradient(to bottom,#fff,rgba(253,246,227,.6)); }
.sec-brand-soft { background:linear-gradient(to bottom,#fff,rgba(238,243,251,.4)); }

.center { text-align:center; }
.center-block { margin-inline:auto; text-align:center; }
.narrow { max-width:42rem; }
.mt-sm { margin-top:1rem; } .mt-lg { margin-top:3rem; } .mt-xl { margin-top:4rem; }

/* ---------- Typography ---------- */
.section-title { font-size:1.875rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin-top:1rem; }
@media (min-width:640px){ .section-title { font-size:2.25rem; } }
.section-sub { margin-top:.75rem; max-width:42rem; font-size:1rem; color:var(--ink-soft); line-height:1.7; }
@media (min-width:640px){ .section-sub { font-size:1.125rem; } }
.section-sub.lead { color:var(--ink); font-weight:500; }
.h-lg { font-size:1.5rem; font-weight:800; margin-top:1rem; line-height:1.3; }
.h-md { font-size:1.25rem; font-weight:700; }
.h-sm { font-size:1.125rem; font-weight:700; }
.p-soft { margin-top:1rem; color:var(--ink-soft); line-height:1.75; }
.muted { color:var(--ink-muted); }
.sm { font-size:.875rem; } .xs { font-size:.75rem; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; border-radius:999px;
  background:var(--brand-100); color:var(--brand-700);
  padding:.25rem .75rem; font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.eyebrow-gold { background:var(--gold-100); color:var(--gold-600); }
.eyebrow-teal { background:var(--teal-50); color:var(--teal-600); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; padding:.75rem 1.5rem;
  font-size:.875rem; font-weight:600; white-space:nowrap;
  transition:background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:focus-visible { outline:2px solid var(--brand-400); outline-offset:2px; }
.btn-primary { background:var(--brand-500); color:#fff; box-shadow:var(--shadow-soft); }
.btn-primary:hover { background:var(--brand-600); transform:translateY(-2px); }
.btn-secondary { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-secondary:hover { border-color:var(--brand-300); color:var(--brand-600); }
.btn-teal { background:var(--teal-500); color:#fff; box-shadow:var(--shadow-soft); }
.btn-teal:hover { background:var(--teal-600); transform:translateY(-2px); }
.btn-ghost { color:var(--ink-soft); }
.btn-ghost:hover { background:var(--brand-50); color:var(--brand-600); }
.btn-white { background:#fff; color:var(--brand-600); }
.btn-white:hover { background:var(--cream); }
.btn-outline { border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn-outline:hover { background:rgba(255,255,255,.1); }
.btn-block { width:100%; }

/* ---------- Header ---------- */
.site-header {
  position:fixed; inset-inline:0; top:0; z-index:50;
  background:transparent; transition:background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled {
  background:rgba(247,249,252,.85);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:4rem; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.625rem; flex:none; }
.brand img { height:2.25rem; width:auto; }
.brand-sep { width:1px; height:1.75rem; background:var(--line); display:none; }
.brand-vn { font-size:.875rem; font-weight:800; color:var(--brand-700); display:none; }
@media (min-width:640px){ .brand-sep,.brand-vn { display:block; } }

.nav-links { display:none; align-items:center; gap:.25rem; }
.nav-links a {
  border-radius:999px; padding:.5rem .75rem;
  font-size:.875rem; font-weight:500; color:var(--ink-soft);
  transition:background-color .2s, color .2s;
}
.nav-links a:hover { background:var(--brand-50); color:var(--brand-600); }
.nav-cta { display:none; }
@media (min-width:1024px){ .nav-links,.nav-cta { display:inline-flex; } }

.nav-toggle { padding:.5rem; border-radius:999px; color:var(--ink); display:inline-flex; }
@media (min-width:1024px){ .nav-toggle { display:none; } }

.nav-mobile { background:var(--cream); border-top:1px solid var(--line); }
.nav-mobile .container { display:flex; flex-direction:column; gap:.25rem; padding-block:1rem; }
.nav-mobile a {
  border-radius:var(--r-sm); padding:.625rem .75rem;
  font-size:.875rem; font-weight:500; color:var(--ink-soft);
}
.nav-mobile a:hover { background:var(--brand-50); color:var(--brand-600); }
.nav-mobile .btn { margin-top:.5rem; }

/* ---------- Hero ---------- */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(to bottom,var(--cream),rgba(238,243,251,.4),var(--cream));
  padding-top:7rem; padding-bottom:5rem;
}
@media (min-width:1024px){ .hero { padding-top:9rem; } }
.blob { position:absolute; border-radius:999px; filter:blur(64px); pointer-events:none; }
.blob-a { left:-6rem; top:2.5rem; width:18rem; height:18rem; background:rgba(180,200,232,.4); }
.blob-b { right:-5rem; top:10rem; width:20rem; height:20rem; background:rgba(242,190,79,.25); }

.hero-grid { position:relative; display:grid; gap:3rem; align-items:center; }
@media (min-width:1024px){ .hero-grid { grid-template-columns:1.05fr .95fr; } }

.hero-eyebrow { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); }
.hero-title {
  margin-top:1.25rem; font-size:2.25rem; font-weight:800;
  line-height:1.08; letter-spacing:-.025em;
}
@media (min-width:640px){ .hero-title { font-size:3rem; } }
@media (min-width:1024px){ .hero-title { font-size:3.75rem; } }
.hero-sub { margin-top:1.25rem; max-width:36rem; font-size:1.125rem; line-height:1.7; color:var(--ink-soft); }
.hero-cta { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-chips { margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.chip {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(17,26,38,.1); background:rgba(255,255,255,.8);
  backdrop-filter:blur(4px); border-radius:999px;
  padding:.5rem 1rem; font-size:.875rem; font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

.hero-visual { position:relative; }
.hero-frame {
  border-radius:2rem; padding:.25rem; box-shadow:var(--shadow-soft);
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
}
.hero-photo { position:relative; aspect-ratio:4/3; border-radius:1.8rem; overflow:hidden;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); }
.hero-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-stat {
  position:absolute; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1rem; box-shadow:var(--shadow-card);
}
.hero-stat-bl { bottom:-1.25rem; left:-1rem; }
.hero-stat-tr { top:1.5rem; right:-.75rem; }
.hero-stat-n { font-size:1.5rem; font-weight:800; line-height:1.1; }
.hero-stat-l { font-size:.75rem; color:var(--ink-muted); }

/* ---------- Giới thiệu ---------- */
.about-grid { display:grid; gap:3rem; }
@media (min-width:1024px){ .about-grid { grid-template-columns:1fr 1fr; align-items:start; } }
.about-spirit { padding-top:.25rem; }
.spirit-list { margin-top:1.5rem; display:flex; flex-direction:column; gap:1.5rem; }
.spirit-list li { display:flex; align-items:flex-start; gap:1rem; }
.spirit-ring {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:3.5rem; height:3.5rem; border-radius:var(--r-lg);
}
.spirit-tile {
  display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:var(--r-md);
  color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.r-brand { background:var(--brand-50); } .t-brand { background:var(--brand-500); }
.r-gold  { background:var(--gold-50); }  .t-gold  { background:var(--gold-500); }
.r-teal  { background:var(--teal-50); }  .t-teal  { background:var(--teal-500); }
.spirit-list h4 { font-size:1.125rem; font-weight:700; padding-top:.25rem; }
.spirit-list p { margin-top:.25rem; font-size:.875rem; color:var(--ink-soft); line-height:1.7; }

.note { display:flex; align-items:flex-start; gap:.75rem; margin-top:1.5rem;
        border-radius:var(--r-lg); padding:1rem; }
.note p { font-size:.875rem; line-height:1.7; color:var(--ink-soft); }
.note .ic { margin-top:.2rem; width:1.25rem; height:1.25rem; }
.note-gold { background:rgba(253,246,227,.7); border-left:4px solid var(--gold-500); }
.note-brand { background:var(--brand-50); max-width:56rem; margin-inline:auto; }

.stats { margin-top:3.5rem; display:grid; gap:1px; background:var(--brand-100);
         border-radius:var(--r-xl); overflow:hidden; }
@media (min-width:640px){ .stats { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .stats { grid-template-columns:repeat(4,1fr); } }
.stat { background:linear-gradient(135deg,var(--brand-800),var(--brand-900));
        padding:1.5rem; text-align:center; color:var(--cream); }
.stat-v { font-size:1.25rem; font-weight:800; line-height:1.25; color:var(--gold-400); }
@media (min-width:640px){ .stat-v { font-size:1.5rem; } }
.stat-l { margin-top:.375rem; font-size:.875rem; color:rgba(247,249,252,.75); }

/* ---------- Đối tác: đơn vị đại diện ---------- */
.operator {
  margin:1.25rem auto 0; max-width:56rem;
  background:#fff; border:1px solid var(--teal-100);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card);
  display:grid;
}
@media (min-width:768px){ .operator { grid-template-columns:minmax(0,280px) 1fr; } }
.operator-photo { position:relative; min-height:200px; }
.operator-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:767px){ .operator-photo { min-height:220px; } }
.operator-body { display:flex; flex-direction:column; justify-content:center; gap:.75rem; padding:1.5rem; }
@media (min-width:640px){ .operator-body { padding:2rem; } }
.operator-body h4 { font-size:1.5rem; font-weight:800; }
.operator-body p { color:var(--ink-soft); line-height:1.75; }

.tag-gold {
  display:inline-flex; align-items:center; gap:.375rem; width:fit-content;
  background:var(--gold-50); color:var(--gold-600);
  border-radius:999px; padding:.375rem .75rem; font-size:.75rem; font-weight:600;
}
.tag-solid-gold {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold-500); color:var(--brand-900);
  border-radius:999px; padding:.25rem .75rem;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}

/* ---------- Ban cố vấn ---------- */
.advisors { margin-top:2.5rem; }
.advisors-track {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
  transition:opacity .35s ease, transform .35s ease;
}
@media (min-width:640px){ .advisors-track { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .advisors-track { grid-template-columns:repeat(5,1fr); } }
.advisors-track.is-swapping { opacity:0; transform:translateY(10px); }
.advisor {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border-radius:var(--r-lg); padding:1.25rem; box-shadow:var(--shadow-card);
}
.advisor .avatar {
  display:flex; align-items:center; justify-content:center;
  width:6rem; height:6rem; border-radius:999px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-900));
  color:var(--gold-400); font-size:1.5rem; font-weight:800;
  box-shadow:0 0 0 4px #fff, var(--shadow-card);
}
@media (min-width:640px){ .advisor .avatar { width:7rem; height:7rem; } }
.advisor figcaption { display:block; margin-top:1rem; }
.advisor b { display:block; font-size:.875rem; font-weight:700; line-height:1.3; }
.advisor i { display:block; margin-top:.25rem; font-size:.75rem; font-style:normal;
             font-weight:500; color:var(--teal-600); }

/* ---------- Điều hướng carousel dùng chung ---------- */
.carousel-nav { margin-top:1.5rem; display:flex; align-items:center; justify-content:center; gap:.75rem; }
.cbtn { display:inline-flex; padding:.5rem; border-radius:999px;
        border:1px solid rgba(17,26,38,.1); color:var(--ink-soft); transition:.2s; }
.cbtn:hover { border-color:var(--brand-300); color:var(--brand-600); }
.dots { display:flex; align-items:center; gap:.5rem; }
.dots button { height:.625rem; width:.625rem; border-radius:999px;
               background:rgba(17,26,38,.15); transition:all .25s; }
.dots button:hover { background:rgba(17,26,38,.3); }
.dots button.is-active { width:2rem; background:var(--brand-500); }
.only-mobile { display:inline-flex; }
@media (min-width:768px){ .only-mobile { display:none; } }

/* ---------- Dải logo trường ---------- */
.marquee-box { background:var(--brand-50); border-radius:var(--r-xl); padding:1.5rem; }
@media (min-width:640px){ .marquee-box { padding:2rem; } }
.marquee { position:relative; margin-top:1.5rem; overflow:hidden; }
.marquee-track { display:flex; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.marquee-fade { position:absolute; inset-block:0; width:4rem; z-index:1; pointer-events:none; }
.marquee-fade.left  { left:0;  background:linear-gradient(to right,var(--brand-50),transparent); }
.marquee-fade.right { right:0; background:linear-gradient(to left,var(--brand-50),transparent); }

.logo-card {
  margin-right:1rem; width:10rem; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1rem; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.logo-mark {
  display:flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand-600),var(--brand-800));
  color:var(--gold-400); font-size:1.125rem; font-weight:700;
}
.logo-mark.sm { width:2.25rem; height:2.25rem; font-size:.875rem; border-radius:.625rem; }
.logo-name { font-size:.75rem; font-weight:500; line-height:1.3; text-align:center; color:var(--ink-soft); }

/* ---------- Hành trình: timeline ---------- */
.timeline { position:relative; max-width:56rem; margin:3.5rem auto 0; }
.timeline-line {
  position:absolute; left:19px; top:.25rem; bottom:2.5rem; width:3px;
  transform:translateX(-50%); border-radius:999px;
  background:linear-gradient(to bottom,var(--brand-300),var(--brand-400),var(--teal-400));
}
.tl-item { position:relative; margin-bottom:2rem; }
.tl-node {
  position:absolute; left:19px; top:.25rem; z-index:2; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:999px;
  background:var(--brand-600); color:#fff; font-size:1rem; font-weight:800;
  box-shadow:0 0 0 4px #fff, 0 2px 6px rgba(0,0,0,.12);
}
.tl-node-gold { background:var(--gold-500); color:var(--brand-900); }
.tl-node-flag { background:var(--teal-500); color:#fff; }
.tl-card {
  margin-left:3.5rem; background:var(--cream);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.25rem; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:box-shadow .2s;
}
.tl-card:hover { box-shadow:var(--shadow-card); }
.tl-card-gold { border-color:rgba(242,190,79,.6); }
.tl-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tl-head h3 { font-size:1rem; font-weight:700; }
.tl-card p { margin-top:.375rem; font-size:.875rem; line-height:1.7; color:var(--ink-soft); }
.badge-muted, .badge-gold {
  border-radius:999px; padding:.125rem .5rem; font-size:.6875rem; white-space:nowrap;
}
.badge-muted { background:rgba(17,26,38,.05); color:var(--ink-muted); font-weight:500; }
.badge-gold { background:rgba(230,166,38,.15); color:var(--gold-600); font-weight:700; }
.tl-end { position:relative; height:2.5rem; }
.tl-end .tl-node { top:0; }

@media (min-width:768px){
  .timeline-line { left:50%; }
  .tl-item { display:grid; grid-template-columns:1fr 1fr; align-items:center;
             gap:3rem; margin-bottom:.75rem; }
  .tl-node { left:50%; }
  .tl-card { margin-left:0; }
  .tl-left  .tl-card { grid-column:1; text-align:right; margin-right:2.5rem; }
  .tl-left  .tl-head { justify-content:flex-end; }
  .tl-right .tl-card { grid-column:2; grid-row:1; margin-left:2.5rem; }
  .tl-end .tl-node { left:50%; }
}

/* ---------- Lịch trình ---------- */
.table-wrap { margin-top:1.5rem; overflow-x:auto; border:1px solid rgba(17,26,38,.1);
              border-radius:var(--r-lg); }
.schedule { width:100%; min-width:520px; border-collapse:collapse; text-align:left; font-size:.875rem; }
.schedule thead tr { background:var(--brand-800); color:#fff; }
.schedule th { padding:.875rem 1.25rem; font-weight:600; }
.schedule th span { display:inline-flex; align-items:center; gap:.5rem; }
.schedule td { padding:.875rem 1.25rem; color:var(--ink-soft); vertical-align:middle; }
.schedule td:first-child { font-weight:500; color:var(--ink); }
.schedule td:first-child .ic { vertical-align:-.2em; margin-right:.5rem; }
.schedule tbody tr:nth-child(even) { background:rgba(247,249,252,.6); }
.schedule tbody tr:nth-child(odd) { background:#fff; }
.dot { display:inline-block; width:.5rem; height:.5rem; border-radius:999px; }
.dot-brand { background:var(--brand-300); } .dot-gold { background:var(--gold-400); }

/* ---------- Cách tham gia ---------- */
.paths { margin-top:3rem; display:grid; gap:1.5rem; }
@media (min-width:1024px){ .paths { grid-template-columns:repeat(2,1fr); } }
.path {
  display:flex; flex-direction:column; height:100%;
  border-radius:var(--r-xl); border:1px solid var(--line);
  padding:1.5rem; box-shadow:var(--shadow-card);
}
.path-brand { border-color:var(--brand-200); background:linear-gradient(135deg,var(--brand-50),#fff); }
.path-teal  { border-color:var(--teal-100);  background:linear-gradient(135deg,var(--teal-50),#fff); }
.path-tag {
  width:fit-content; border-radius:999px; padding:.25rem .75rem; color:#fff;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.tag-brand { background:var(--brand-500); } .tag-teal { background:var(--teal-500); }
.path-head { margin-top:1.25rem; display:flex; align-items:center; gap:.75rem; }
.path-head h3 { font-size:1.25rem; font-weight:700; }
.path-icon { display:flex; align-items:center; justify-content:center; flex:none;
             width:3rem; height:3rem; border-radius:var(--r-lg); color:#fff; }
.i-brand { background:var(--brand-500); } .i-teal { background:var(--teal-500); }
.path > p { margin-top:1rem; flex:1; color:var(--ink-soft); line-height:1.75; }
.path .btn { margin-top:1.5rem; width:fit-content; }

/* ---------- Form tư vấn ---------- */
.lead-box {
  margin-top:2rem; display:grid; gap:2rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:1.5rem; box-shadow:var(--shadow-card); scroll-margin-top:6rem;
}
@media (min-width:640px){ .lead-box { padding:2.5rem; } }
@media (min-width:1024px){ .lead-box { grid-template-columns:.9fr 1.1fr; align-items:center; } }
.lead-form { display:flex; flex-direction:column; gap:1rem; }
.lead-form .row { display:grid; gap:1rem; }
@media (min-width:640px){ .lead-form .row { grid-template-columns:repeat(2,1fr); } }
.label { display:block; margin-bottom:.375rem; font-size:.875rem; font-weight:500; color:var(--ink-soft); }
.req { color:var(--brand-500); }
.input {
  width:100%; border:1px solid var(--line); background:#fff;
  border-radius:var(--r-sm); padding:.625rem 1rem;
  font-size:.875rem; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.input::placeholder { color:var(--ink-muted); }
.input:focus { outline:none; border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100); }
textarea.input { resize:none; }
.field-error { border-color:#dc2626; }
.form-error { border-radius:var(--r-sm); background:#fef2f2; color:#dc2626;
              padding:.625rem 1rem; font-size:.875rem; }
.lead-done {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:rgba(20,160,138,.1);
  border-radius:var(--r-lg); padding:2rem;
}
.lead-done h3 { margin-top:.75rem; font-size:1.125rem; font-weight:700; }
.lead-done p { margin-top:.25rem; font-size:.875rem; color:var(--ink-soft); }
.lead-done .btn { margin-top:1rem; }

/* ---------- Dự án ---------- */
.projects { margin-top:3.5rem; display:flex; flex-direction:column; gap:3rem; }
@media (min-width:1024px){ .projects { gap:4rem; } }
.project { display:grid; gap:1.5rem; align-items:center; }
@media (min-width:768px){ .project { grid-template-columns:repeat(2,1fr); gap:2.5rem; } }
.project-photo { border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card); }
.project-photo img { aspect-ratio:4/3; width:100%; object-fit:cover; }
@media (min-width:768px){
  .project-flip .project-photo { order:2; }
  .project-flip .project-body { order:1; }
}
.project-meta { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.project-n {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:2.25rem; height:2.25rem; border-radius:999px;
  background:var(--brand-500); color:#fff; font-size:.875rem; font-weight:700;
}
.project-body h3 { margin-top:1rem; font-size:1.5rem; font-weight:800; line-height:1.25; }
.project-school { margin-top:.375rem; display:flex; align-items:center; gap:.375rem;
                  font-size:.875rem; font-weight:500; color:var(--teal-600); }

/* ---------- Giải thưởng ---------- */
.prizes {
  margin-top:4rem; border-radius:var(--r-xl); padding:2rem;
  background:linear-gradient(135deg,var(--brand-900),var(--brand-700));
  color:var(--cream);
}
@media (min-width:640px){ .prizes { padding:3rem; } }
.prizes-title { margin-top:1rem; font-size:1.5rem; font-weight:800; }
@media (min-width:640px){ .prizes-title { font-size:1.875rem; } }
.prizes-sub { margin:.75rem auto 0; max-width:42rem; color:rgba(247,249,252,.7); }
.ranks { margin-top:2rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
.rank {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  border-radius:999px; padding:.5rem 1rem; font-size:.875rem; font-weight:600;
}
.rank i { width:.75rem; height:.75rem; border-radius:999px; }
.prize-grid { margin-top:2.5rem; display:grid; gap:1.25rem; }
@media (min-width:768px){ .prize-grid { grid-template-columns:repeat(3,1fr); } }
.prize { background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
         border-radius:var(--r-lg); padding:1.5rem; }
.prize-icon { display:flex; align-items:center; justify-content:center;
              width:2.75rem; height:2.75rem; border-radius:var(--r-sm);
              background:rgba(230,166,38,.2); color:var(--gold-400); }
.prize h4 { margin-top:1rem; font-size:1.125rem; font-weight:700; }
.prize ul { margin-top:.75rem; display:flex; flex-direction:column; gap:.5rem; }
.prize li { display:flex; gap:.5rem; font-size:.875rem; line-height:1.7; color:rgba(247,249,252,.75); }
.prize li::before { content:""; margin-top:.55rem; width:.375rem; height:.375rem; flex:none;
                    border-radius:999px; background:var(--gold-400); }

/* ---------- Sự kiện ---------- */
.events { margin-top:3rem; }
.event-stage {
  position:relative; border:1px solid var(--line); background:#fff;
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-soft);
}
.event { display:none; }
.event.is-active { display:grid; animation:eventIn .45s ease both; }
@media (min-width:768px){ .event.is-active { grid-template-columns:repeat(2,1fr); } }
@keyframes eventIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.event-photo { position:relative; min-height:240px; }
@media (min-width:768px){ .event-photo { min-height:440px; } }
.event-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.event-shade { position:absolute; inset:0;
  background:linear-gradient(to top,rgba(14,28,51,.7),rgba(14,28,51,.1),transparent); }
.event-badges { position:absolute; left:1.25rem; top:1.25rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.badge-white {
  display:inline-flex; align-items:center; gap:.375rem;
  background:rgba(255,255,255,.95); color:var(--brand-700);
  border-radius:999px; padding:.25rem .75rem; font-size:.75rem; font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.badge-solid-gold {
  display:inline-flex; align-items:center;
  background:var(--gold-500); color:var(--brand-900);
  border-radius:999px; padding:.25rem .75rem; font-size:.75rem; font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.event-body { display:flex; flex-direction:column; justify-content:center; gap:1rem; padding:1.75rem; }
@media (min-width:640px){ .event-body { padding:2.5rem; } }
.event-date { display:flex; align-items:center; gap:.5rem; font-size:.875rem;
              font-weight:600; color:var(--brand-500); }
.event-body h3 { font-size:1.5rem; font-weight:800; line-height:1.25; }
@media (min-width:640px){ .event-body h3 { font-size:1.875rem; } }
.event-loc { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--ink-muted); }
.event-body .p-soft { margin-top:0; font-size:.9375rem; }
.event-body .btn { width:fit-content; margin-top:.25rem; }
.event-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  display:none; padding:.625rem; border-radius:999px;
  background:rgba(255,255,255,.9); color:var(--ink); box-shadow:var(--shadow-card);
}
.event-arrow:hover { background:#fff; }
.event-arrow.left { left:.75rem; } .event-arrow.right { right:.75rem; }
@media (min-width:768px){ .event-arrow { display:block; } }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink); color:rgba(247,249,252,.9); }
.site-footer .container { padding-block:4rem; }
.cta-band {
  border-radius:var(--r-xl); padding:2rem; text-align:center; color:#fff;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
}
@media (min-width:640px){ .cta-band { padding:3rem; } }
.cta-band h3 { font-size:1.5rem; font-weight:800; line-height:1.3; }
@media (min-width:640px){ .cta-band h3 { font-size:1.875rem; } }
.cta-band p { margin:.75rem auto 0; max-width:42rem; color:rgba(255,255,255,.9); }
.cta-band-btns { margin-top:1.5rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }

.foot-grid { margin-top:3.5rem; display:grid; gap:2.5rem; }
@media (min-width:768px){ .foot-grid { grid-template-columns:1.4fr 1fr 1fr; } }
.foot-logo { display:inline-flex; background:#fff; border-radius:.625rem; padding:.375rem .625rem; }
.foot-logo img { height:2.5rem; width:auto; }
.foot-about { margin-top:1rem; max-width:24rem; font-size:.875rem; line-height:1.75; color:rgba(247,249,252,.7); }
.foot-grid h4 { font-size:.875rem; font-weight:600; text-transform:uppercase;
                letter-spacing:.04em; color:var(--cream); }
.foot-contact { margin-top:1rem; display:flex; flex-direction:column; gap:.75rem;
                font-size:.875rem; color:rgba(247,249,252,.75); }
.foot-contact li { display:flex; align-items:center; gap:.625rem; }
.foot-contact .ic { color:var(--brand-300); }
.foot-partners { margin-top:1rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.foot-partner {
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  border-radius:var(--r-md); padding:.625rem;
  font-size:.75rem; line-height:1.3; color:rgba(247,249,252,.7);
}
.foot-bottom {
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  font-size:.75rem; color:rgba(247,249,252,.5);
}
@media (min-width:640px){ .foot-bottom { flex-direction:row; justify-content:space-between; } }
.foot-links { display:flex; gap:1rem; }
.foot-links a:hover { color:var(--cream); }

/* ---------- Hiệu ứng xuất hiện khi cuộn ---------- */
/* Chỉ ẩn khi có JS — tắt JS thì nội dung vẫn đọc được bình thường */
.js .reveal { opacity:0; transform:translateY(20px);
              transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
  .marquee-track { animation:none; }
  html { scroll-behavior:auto; }
}