/* =========================================================
   SVIB — trang chủ: Tiềm năng đầu tư công nghệ Việt Nam
   ========================================================= */

.mono { font-family: var(--font-mono); letter-spacing: 0; }
.muted { color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
/* Nền mờ đặt trên lớp giả: nếu đặt backdrop-filter lên chính header,
   menu di động (position: fixed) sẽ bị neo vào header thay vì màn hình */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background-color .3s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-open { border-bottom-color: var(--line); }
.site-header.is-scrolled::before { background: rgb(5 6 7 / .94); }
.site-header.is-open::before { background: var(--bg); }
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled:not(.is-open)::before { background: rgb(5 6 7 / .8); backdrop-filter: blur(10px); }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.brand__mark { width: 28px; height: 28px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .34em;
  margin-right: -.34em;
  line-height: 1;
}

.nav { margin-left: auto; display: none; }
.nav__list { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: .2em; bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover,
.nav__link.is-active { color: var(--text); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.header-cta { margin-left: auto; display: none; }

.menu-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--text);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 22px; height: 10px; }
.menu-toggle__icon i {
  position: absolute; left: 0; right: 0;
  height: 1px; background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle__icon i:first-child { top: 0; }
.menu-toggle__icon i:last-child { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { top: 4.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { top: 4.5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--bg);
  overflow-y: auto;
  padding-block: 24px 40px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { border-top: 1px solid var(--line); }
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-menu__list a span {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .12em;
  color: var(--muted);
}
.mobile-menu__foot { margin-top: 32px; }

@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
  .menu-toggle { margin-left: 8px; }
}
@media (min-width: 1080px) {
  .nav { display: block; }
  .header-cta { margin-left: 12px; }
  .menu-toggle,
  .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 112px;
  overflow: hidden;
  isolation: isolate;
}
.hero::after { /* ánh sáng tán xạ phía trên đường chân trời */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 45% at 50% 100%, rgb(var(--glow) / .16), transparent 70%),
    radial-gradient(40% 30% at 82% 8%, rgb(var(--glow) / .05), transparent 70%);
  pointer-events: none;
}

.hero__sky {
  position: absolute;
  inset: -40px -80px 0 -80px;
  z-index: -3;
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgb(255 255 255 / .9) 50%, transparent 55%),
    radial-gradient(1px 1px at 131px 97px, rgb(255 255 255 / .55) 50%, transparent 55%),
    radial-gradient(1.4px 1.4px at 71px 163px, rgb(255 255 255 / .95) 50%, transparent 55%),
    radial-gradient(1px 1px at 197px 13px, rgb(255 255 255 / .5) 50%, transparent 55%),
    radial-gradient(1px 1px at 251px 211px, rgb(255 255 255 / .7) 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 307px 71px, rgb(255 255 255 / .85) 50%, transparent 55%),
    radial-gradient(1px 1px at 88px 280px, rgb(205 220 255 / .6) 50%, transparent 55%),
    radial-gradient(1.6px 1.6px at 360px 330px, rgb(255 255 255 / .9) 50%, transparent 55%),
    radial-gradient(1px 1px at 410px 150px, rgb(255 255 255 / .45) 50%, transparent 55%);
  background-size:
    337px 293px, 419px 367px, 251px 239px, 503px 457px,
    389px 311px, 613px 523px, 293px 401px, 727px 641px, 467px 433px;
  opacity: .85;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__sky { animation: sky-drift 140s linear infinite alternate; }
}
@keyframes sky-drift {
  to { transform: translate3d(-60px, 24px, 0); }
}

/* Đường chân trời hành tinh: neo theo thanh số liệu để vòng cung luôn nằm phía trên nó */
.hero__planet {
  position: absolute;
  left: 50%;
  top: -100px;
  z-index: -2;
  width: 180vw;
  height: max(90vh, 640px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse closest-side,
    #030405 0 96.4%,
    rgb(var(--glow) / .85) 96.75%,
    rgb(var(--glow) / .3) 97.5%,
    rgb(var(--glow) / .09) 98.7%,
    transparent 100%);
  pointer-events: none;
}

.hero__content {
  align-self: center;
  padding-block: 40px 116px;
}
.hero__eyebrow { margin-bottom: 28px; }
.hero__title {
  max-width: 11.5em;
  font-size: clamp(2.6rem, 7.6vw, 7.25rem);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.1;
  text-wrap: balance;
}
.hero__lead {
  max-width: 50ch;
  margin-top: 32px;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}

.hero__telemetry { position: relative; }
.telemetry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.telemetry__item {
  padding: 18px 16px 24px 0;
  min-width: 0;
}
.telemetry__value {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}
@media (min-width: 900px) {
  .telemetry { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .telemetry__item + .telemetry__item { padding-left: 24px; border-left: 1px solid var(--line); }
}
@media (max-width: 899px) {
  .telemetry__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .telemetry__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
}

/* ---------- Khung section chung ---------- */
.section {
  position: relative;
  padding-block: clamp(96px, 13vw, 176px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 72px;
}
.section__head {
  display: grid;
  gap: 22px;
  max-width: 900px;
  margin-bottom: clamp(48px, 7vw, 88px);
}
.section__index { color: var(--muted); }
.section__lead {
  max-width: 60ch;
  color: var(--muted);
  font-size: 18px;
}
@media (min-width: 980px) {
  .section__head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: 64px;
  }
  .section__head--split > div { display: grid; gap: 22px; }
}
@media (max-width: 979px) {
  .section__head--split > div { display: grid; gap: 22px; }
}

.h2 {
  font-size: clamp(2.1rem, 5.2vw, 4.4rem);
  letter-spacing: .06em;
  line-height: 1.1;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.2;
}

/* ---------- 01 · Số liệu (KPI row) ---------- */
.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 40px;
}
@media (min-width: 620px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.stat__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 4.6vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__unit {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat__label {
  margin-top: 20px;
  max-width: 32ch;
  font-size: 16px;
  line-height: 1.55;
}
.stat__src {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
}
.stat__src a,
.driver a,
.sector__data a,
.chart__note a { color: var(--muted); text-decoration: none; font-family: var(--font-mono); font-size: .8em; }
.stat__src a:hover,
.driver a:hover,
.sector__data a:hover,
.chart__note a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Biểu đồ quỹ đạo kinh tế số ---------- */
.chart {
  margin-top: clamp(64px, 8vw, 104px);
  padding: clamp(20px, 3.4vw, 44px);
  border: 1px solid var(--line);
}
.chart__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 28px;
}
.chart__multiple {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.chart__multiple span { color: var(--text); font-size: 15px; }

.chart__plot {
  --year-col: 92px;
  position: relative;
}
.chart__grid {
  position: absolute;
  top: 0; bottom: 30px;
  left: var(--year-col); right: 0;
  pointer-events: none;
}
.chart__grid span {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--x) * 100% / 200);
  width: 1px;
  background: var(--line);
}
.chart__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--year-col) minmax(0, 1fr);
  align-items: center;
  height: 84px;
}
.chart__year {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.3;
}
.chart__year small {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chart__track { position: relative; height: 100%; }
.chart__bar {
  position: absolute;
  top: 50%;
  height: 14px;
  margin-top: 2px;
  left: calc(var(--from) * 100% / 200);
  width: calc((var(--to) - var(--from)) * 100% / 200);
  background: var(--text);
  transform-origin: left center;
}
.chart__bar::before { /* vùng rê chuột lớn hơn thanh */
  content: "";
  position: absolute;
  inset: -16px 0;
}
.chart__bar--range {
  margin-left: 2px; /* khe 2px giữa hai phần thanh */
  width: calc((var(--to) - var(--from)) * 100% / 200 - 2px);
  background: repeating-linear-gradient(135deg, rgb(238 240 242 / .55) 0 1px, transparent 1px 6px);
  outline: 1px solid rgb(238 240 242 / .55);
  outline-offset: -1px;
}
.chart__value {
  position: absolute;
  bottom: calc(50% + 2px);
  left: calc(var(--at) * 100% / 200);
  transform: translateX(-100%);
  padding-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.chart__axis {
  position: relative;
  height: 30px;
  margin-left: var(--year-col);
  border-top: 1px solid var(--line-strong);
}
.chart__axis span {
  position: absolute;
  top: 8px;
  left: calc(var(--x) * 100% / 200);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.chart__axis span:first-child { transform: none; }
.chart__axis span:last-child { transform: translateX(-100%); }
.chart__tip {
  position: absolute;
  z-index: 2;
  padding: 7px 10px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
}
.chart__tip[hidden] { display: none; }
.chart__note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.chart__key { display: inline-flex; align-items: center; gap: 10px; }
.chart__swatch { display: inline-block; width: 18px; height: 8px; background: var(--text); }
.chart__swatch--range {
  background: repeating-linear-gradient(135deg, rgb(238 240 242 / .6) 0 1px, transparent 1px 4px);
  outline: 1px solid rgb(238 240 242 / .55);
  outline-offset: -1px;
}
@media (max-width: 599px) {
  .chart__plot { --year-col: 78px; }
  .chart__year { font-size: 14px; }
}

/* ---------- 02 · Động lực ---------- */
.drivers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px 72px;
}
@media (min-width: 900px) { .drivers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.driver {
  display: grid;
  gap: 14px;
  align-content: start;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.driver__no,
.step__no,
.sector__code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--muted);
}
.driver p:last-child { color: var(--muted); max-width: 58ch; }

/* ---------- 03 · Lĩnh vực ---------- */
.sectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 720px) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sector {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg);
  transition: background-color .3s var(--ease);
}
.sector:hover { background: var(--bg-raise); }
.sector__text { flex: 1; color: var(--muted); }
.sector__data {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.sector__data strong {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.01em;
}
.sector__data span {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 04 · Lộ trình ---------- */
.timeline { border-bottom: 1px solid var(--line); }
.tl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 20px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.tl__date {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 15px;
  white-space: nowrap;
}
.tl__date::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--muted);
  background: var(--muted);
  flex-shrink: 0;
}
.tl.is-target .tl__date::before { background: transparent; border-color: var(--text); }
.tl--svib .tl__date::before { background: var(--text); border-color: var(--text); }
.tl__tag {
  justify-self: start;
  align-self: center;
  padding: 3px 8px 3px calc(8px + .14em);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}
.tl.is-target .tl__tag { border-color: var(--text); color: var(--text); }
.tl--svib .tl__tag { background: var(--text); border-color: var(--text); color: var(--bg); }
.tl__body { grid-column: 1 / -1; display: grid; gap: 8px; }
.tl__body p { color: var(--muted); max-width: 64ch; }
.tl.is-done .h3 { color: var(--text); }
@media (min-width: 820px) {
  .tl {
    grid-template-columns: 150px 150px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 30px 0;
  }
  .tl__tag { align-self: start; margin-top: 2px; }
  .tl__body { grid-column: auto; }
}

/* ---------- 05 · Sứ mệnh ---------- */
.section--mission {
  background:
    radial-gradient(60% 50% at 100% 0%, rgb(var(--glow) / .05), transparent 70%),
    var(--bg);
}
.mission__statement {
  max-width: 17em;
  font-size: clamp(2rem, 4.8vw, 4.1rem);
  letter-spacing: .04em;
  line-height: 1.14;
  text-wrap: balance;
}
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px 40px;
}
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.step p:last-child { color: var(--muted); }

/* ---------- 06 · Về SVIB ---------- */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (min-width: 1000px) {
  .profile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
}
.plate {
  position: relative;
  display: grid;
  gap: 22px;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(1px 1px at 37px 29px, rgb(255 255 255 / .6) 50%, transparent 55%),
    radial-gradient(1px 1px at 113px 83px, rgb(255 255 255 / .35) 50%, transparent 55%),
    radial-gradient(1px 1px at 181px 47px, rgb(255 255 255 / .5) 50%, transparent 55%),
    linear-gradient(180deg, #0b0d10, #050607 70%);
  background-size: 211px 137px, 263px 151px, 307px 173px, 100% 100%;
  overflow: hidden;
}
.plate__name {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 11vw, 8.5rem);
  font-weight: 600;
  letter-spacing: .2em;
  margin-right: -.2em;
  line-height: .95;
}
.plate__legal {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--muted);
}
.plate__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.plate__meta > div { padding-top: 14px; min-width: 0; }
.plate__meta > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.plate__meta dd {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 3.3vw, 14px);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .plate__meta > div + div { padding-left: 10px; }
}

.spec { border-top: 1px solid var(--line-strong); }
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.spec__row dt {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--muted);
}
.spec__row dd { font-size: 17px; overflow-wrap: anywhere; }
.spec__row a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.spec__row a:hover { border-bottom-color: var(--text); }
@media (min-width: 640px) {
  .spec__row { grid-template-columns: 230px minmax(0, 1fr); align-items: baseline; }
}

/* ---------- 07 · Liên hệ ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}
@media (min-width: 1000px) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; }
}
.contact__info { display: grid; gap: 36px; align-content: start; justify-items: start; }
.contact__list { display: grid; gap: 28px; }
.contact__list dd { margin-top: 6px; font-size: 18px; overflow-wrap: anywhere; }
.contact__list a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact__list a:hover { border-bottom-color: var(--text); }

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px 36px;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: 44px;
}
.contact__note { max-width: 44ch; font-size: 14px; color: var(--muted); }
.contact__status {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.contact__status:empty { display: none; }

/* ---------- Footer ---------- */
.site-footer {
  padding-block: clamp(64px, 9vw, 104px) 32px;
  border-top: 1px solid var(--line);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 640px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__top { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 48px; } }
.footer__brand { display: grid; gap: 18px; align-content: start; }
.footer__tagline { color: var(--muted); max-width: 28ch; }
.footer__col { display: grid; gap: 16px; align-content: start; }
.footer__col ul { display: grid; gap: 10px; }
.footer__col a,
.footer__col address {
  color: var(--muted);
  font-style: normal;
  font-size: 15px;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer__col a:hover { color: var(--text); }

.footer__sources {
  display: grid;
  gap: 16px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.footer__sources ol {
  display: grid;
  gap: 8px 48px;
  margin: 0;
  padding-left: 1.6em;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
@media (min-width: 1000px) { .footer__sources ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer__sources li { overflow-wrap: anywhere; scroll-margin-top: 96px; }
.footer__sources li:target { color: var(--text); }
.footer__sources a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.footer__sources a:hover { border-bottom-color: var(--text); }

.footer__disclaimer {
  margin-top: 36px;
  max-width: 82ch;
  font-size: 14px;
  color: var(--muted);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
}
.footer__bottom a { color: var(--muted); text-decoration: none; }
.footer__bottom a:hover { color: var(--text); }

/* ---------- Hiện dần khi cuộn (chỉ khi JS sẵn sàng và cho phép chuyển động) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
  .reveal-ready .chart .chart__bar { transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
  .reveal-ready .chart.is-in .chart__bar { transform: scaleX(1); }
  .reveal-ready .chart .chart__bar--range { transition-delay: .7s; }
}

@media (max-width: 479px) {
  body { font-size: 16px; }
  .section__lead { font-size: 17px; }
}