/* ============================================================
   Phong cách lấy cảm hứng từ trang sản phẩm của Type-Moon:
   nền đen tuyền · chữ serif (Mincho) mảnh · dải xanh navy ·
   khoảng thở dọc rộng. Không dùng font/ảnh tải từ mạng ngoài.
   ============================================================ */

:root {
  --black: #000;
  --navy: #1f3976;
  --navy-deep: #16264d;
  --fg: #fff;
  --fg-dim: #b9bfd0;
  --fg-faint: #7c839a;
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.08);
  --gold: #c9a86a;
  --wrap: 1140px;
  --serif: "Noto Serif", Cambria, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.95;
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fg); text-decoration: none; transition: opacity 0.2s, color 0.2s; }
a:hover { opacity: 0.7; }

code {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.85em;
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  padding: 2px 7px;
  word-break: break-all;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---------- thanh điều hướng ---------- */

.nav {
  height: 76px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(5, 8, 14, 0.78), rgba(5, 8, 14, 0.54));
  -webkit-backdrop-filter: blur(16px) saturate(1.16);
  backdrop-filter: blur(16px) saturate(1.16);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  transform: translateY(0);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}
.nav.nav--hidden { transform: translateY(calc(-100% - 2px)); }
/* Nếu đang dùng bàn phím trong thanh đầu trang thì không được giấu nó. */
.nav:focus-within { transform: translateY(0); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-brand {
  font-size: 1.02rem;
  letter-spacing: 2.4px;
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-brand .mark { color: var(--gold); }
.nav-brand a { display: flex; align-items: center; gap: 12px; }
/* Logo là chữ ký nằm ngang -> khoá theo CHIỀU CAO, bề ngang tự co. */
.nav-brand img.mark { height: 27px; width: auto; display: block; }

/* Ẩn khỏi mắt nhưng vẫn để trình đọc màn hình đọc được */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nav-note { font-size: 0.74rem; letter-spacing: 1.6px; color: var(--fg-faint); }

/* ---------- chuyển cảnh giữa các trang ---------- */

/* Router thay nội dung trong #app, nhưng giữ chính phần tử này để có thể làm
   mờ trang cũ trước rồi mới đưa trang mới vào. */
#app {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.24s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
#app.page-leave {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
#app.page-enter {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 28px 100px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(31, 57, 118, 0.85) 0%, rgba(31, 57, 118, 0) 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--line), transparent);
}
/* Hero có ảnh key visual — kiểu các trang việt hóa hay dùng.
   Ảnh phủ kín, tối dần xuống đáy để chữ luôn đọc được và nối liền vào nền đen. */
.hero--img {
  min-height: 82vh;
  background-size: cover;
  /* Key visual của FSN là ảnh khổ DỌC. Trên màn ngang, "cover" sẽ phóng rất to
     nên phải kéo khung nhìn lên vùng có mặt nhân vật, không để rơi xuống tà áo. */
  background-position: center 20%;
  background-repeat: no-repeat;
  align-items: flex-end;
  padding-bottom: 92px;
}
/* Màn càng ngang thì ảnh dọc càng bị phóng to — lấy cao hơn nữa cho thấy mặt. */
@media (min-aspect-ratio: 16/10) {
  .hero--img { background-position: center 14%; }
}
/* Key visual của FSN sáng và nhiều màu pastel, lớp phủ nhạt là chữ chìm hẳn vào ảnh.
   Phải phủ đậm tay, nhất là nửa dưới nơi đặt chữ. */
.hero--img::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.42) 26%,
    rgba(0, 0, 0, 0.66) 56%,
    rgba(0, 0, 0, 0.86) 78%,
    #000 100%
  );
}
.hero--img::after { display: none; }
.hero--img .hero-inner { max-width: 900px; }
.hero--img h1 { text-shadow: 0 3px 26px rgba(0, 0, 0, 0.92), 0 1px 3px rgba(0, 0, 0, 0.8); }
.hero--img .lead,
.hero--img .sub,
.hero--img .facts { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95); }
.hero--img .lead { color: #e7ebf5; }
.hero--img .sub { color: #c3cade; }

/* ---------- sân khấu trang chủ ---------- */

.showcase { min-height: 88vh; padding-bottom: 168px; }
.showcase .hero-inner { max-width: 900px; }

/* Các ảnh nền chồng lên nhau, đổi bằng cách mờ dần chứ không nháy */
.sc-slides { position: absolute; inset: 0; }
.sc-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 16%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.sc-slide.is-active { opacity: 1; }
.showcase::before { z-index: 1; } /* lớp phủ tối phải nằm trên ảnh */
.showcase .hero-inner, .sc-strip { z-index: 2; }

.sc-panel { display: none; }
/* ⚠ KHÔNG dùng animation-fill-mode "both" ở đây. Với "both", trạng thái đầu
   (opacity 0) được giữ cho tới khi animation chạy — mà animation bị hoãn khi
   tab đang ẩn hoặc trình duyệt tiết kiệm tài nguyên, thế là chữ kẹt vô hình
   vĩnh viễn. Đã dính thật. Không có fill-mode thì lúc nghỉ nó dùng style
   thường (hiện rõ), animation chỉ là phần thêm nếm. */
.sc-panel.is-active { display: block; animation: scIn 0.7s ease; }
@keyframes scIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-panel.is-active { animation: none; }
  .sc-slide { transition: none; }
  .nav, #app { transition: none; }
}
.sc-panel .lead { margin-top: 22px; }

/* Nút sang trang bản dịch */
.sc-cta {
  display: inline-block;
  margin-top: 30px;
  padding: 17px 46px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(31, 57, 118, 0.62);
  color: #fff;
  font-size: 1.02rem;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  backdrop-filter: blur(3px);
}
.sc-cta:hover { background: var(--gold); border-color: var(--gold); color: #16264d; opacity: 1; }

/* Dải chọn game ở đáy hero — có 1 bản dịch thì ẩn hẳn */
.sc-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 1px;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid var(--line-soft);
  overflow-x: auto;
}
.sc-strip[data-count="1"] { display: none; }
.sc-item {
  flex: 1 0 auto;
  min-width: 232px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.34);
  border: 0;
  border-top: 2px solid transparent;
  color: var(--fg-dim);
  font-family: var(--serif);
  text-align: left;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.sc-item:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.sc-item.is-active { background: rgba(255, 255, 255, 0.13); border-top-color: var(--gold); color: #fff; }
.sc-item img { width: 62px; height: 38px; object-fit: cover; flex: none; }
.sc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-name {
  font-size: 0.84rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-date { font-size: 0.74rem; color: var(--fg-faint); letter-spacing: 1px; }

.hero-logo { height: 86px; width: auto; margin: 0 auto 26px; display: block; }

/* Logo tựa game thay cho chữ ở hero */
.title-logo { margin: 0; line-height: 0; }
/* Chữ ký "hiyu" nằm ngang nên phải nhỏ hơn logo tựa game, không thì to lố */
.title-logo.wordmark img { width: min(248px, 58vw); }
.title-logo img {
  width: min(540px, 82vw);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.85));
}

.hero-inner { position: relative; max-width: 780px; }

.hero h1 {
  font-size: clamp(2.15rem, 5.6vw, 3.9rem);
  font-weight: 400;
  letter-spacing: 5px;
  line-height: 1.5;
  margin: 0;
}
.hero .lead {
  color: var(--fg-dim);
  margin: 30px 0 0;
  font-size: 1.22rem;
  letter-spacing: 1.8px;
}
.hero .sub {
  color: var(--fg-faint);
  margin: 20px auto 0;
  font-size: 1.04rem;
  max-width: 58ch;
  line-height: 2;
}
.rule {
  width: 46px;
  height: 1px;
  background: var(--gold);
  margin: 30px auto 0;
  opacity: 0.75;
}

/* ---------- dải nội dung ---------- */

/* Các dải màu KHÔNG cắt cạnh cứng: mỗi dải là một khối màu tự tan dần về hai đầu,
   nên chỗ giáp ranh hoà vào nền đen thay vì có đường kẻ ngang chia đôi trang.
   (Trước đây dùng màu đặc + viền trên, nhìn ra từng mảng rời rạc.) */
.band { padding: 112px 0; position: relative; }

.band--navy,
.band--deep {
  background-color: transparent;
  background-repeat: no-repeat;
}
.band--navy {
  background-image: linear-gradient(
    180deg,
    rgba(31, 57, 118, 0) 0%,
    rgba(31, 57, 118, 0.5) 16%,
    rgba(31, 57, 118, 0.82) 38%,
    rgba(31, 57, 118, 0.82) 62%,
    rgba(31, 57, 118, 0.5) 84%,
    rgba(31, 57, 118, 0) 100%
  );
}
.band--deep {
  background-image: linear-gradient(
    180deg,
    rgba(22, 38, 77, 0) 0%,
    rgba(22, 38, 77, 0.62) 18%,
    rgba(22, 38, 77, 0.92) 40%,
    rgba(22, 38, 77, 0.92) 60%,
    rgba(22, 38, 77, 0.62) 82%,
    rgba(22, 38, 77, 0) 100%
  );
}

/* Hai dải màu nằm cạnh nhau thì cho chồng mép để chỗ nối không bị thắt lại thành
   một vệt đen mảnh giữa hai vùng sáng. */
.band--navy + .band--deep,
.band--deep + .band--navy { margin-top: -104px; padding-top: 104px; }

/* Đầu mục kiểu trang gốc: chữ Anh lớn mờ, chữ Việt đè lên, hoa văn hai bên, gạch mảnh dưới */
.band-head {
  position: relative;
  text-align: center;
  margin: 0 0 52px;
  padding-bottom: 26px;
}
.band-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 800px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 106, 0.42), transparent);
}
.band-head .en {
  display: block;
  font-size: clamp(2.5rem, 6.2vw, 4.1rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 168, 106, 0.19);
  line-height: 1;
  user-select: none;
}
.band--navy .band-head .en { color: rgba(255, 255, 255, 0.17); }
.band-head h2 {
  font-size: 1.58rem;
  font-weight: 400;
  letter-spacing: 6px;
  margin: -0.62em 0 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
/* hoa văn hình thoi nhỏ hai bên tiêu đề */
.band-head .orn {
  width: 46px;
  height: 7px;
  flex: none;
  background:
    linear-gradient(90deg, transparent, rgba(201, 168, 106, 0.75)) center/100% 1px no-repeat;
  position: relative;
}
.band-head .orn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 6px;
  height: 6px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--gold);
}
.band-head h2 .orn:first-child { transform: scaleX(-1); }
.band--navy .band-head .orn::after { background: rgba(255, 255, 255, 0.8); }

/* Khung thông tin / cấu hình — hai cột nhãn·giá trị như trang gốc */
.spec-box {
  border: 1px solid var(--line);
  padding: 40px 44px;
  background: rgba(255, 255, 255, 0.018);
}
.spec-group {
  margin: 0 0 22px;
  font-size: 1.24rem;
  letter-spacing: 3px;
  color: var(--gold);
}
.spec-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 10px 26px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row .k { color: var(--gold); font-size: 0.98rem; letter-spacing: 1.4px; opacity: 0.92; }
.spec-row .v { color: var(--fg); font-size: 1.02rem; }
.spec-row .v small { color: var(--fg-faint); font-size: 0.8em; letter-spacing: 0; }
.spec-row .v .ln { display: block; }
.spec-note {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  color: var(--fg-faint);
  text-align: center;
}
.band-body { max-width: 800px; margin: 0 auto; }

h3 { font-size: 1.14rem; font-weight: 400; letter-spacing: 2px; margin: 34px 0 12px; }

ul, ol { padding-left: 22px; }
li { margin: 10px 0; color: var(--fg-dim); }
li::marker { color: var(--fg-faint); }
.band--navy li { color: rgba(255, 255, 255, 0.86); }
p { color: var(--fg-dim); }

/* ---------- thẻ bản dịch ---------- */

.cards { display: grid; gap: 22px; max-width: 880px; margin: 0 auto; }

.card {
  display: block;
  border: 1px solid var(--line);
  padding: 34px 38px;
  color: inherit;
  background: linear-gradient(180deg, rgba(31, 57, 118, 0.18), rgba(0, 0, 0, 0));
  transition: border-color 0.25s, background 0.25s;
}
a.card:hover { border-color: var(--gold); opacity: 1; background: linear-gradient(180deg, rgba(31, 57, 118, 0.38), rgba(0, 0, 0, 0)); }
.card--img { position: relative; padding: 0; overflow: hidden; background: none; border-color: var(--line); }
.card--img .card-thumb {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  opacity: 0.62;
  transition: opacity 0.3s, transform 0.5s;
}
a.card--img:hover .card-thumb { opacity: 0.9; transform: scale(1.03); }
.card--img .card-inner {
  position: relative;
  margin-top: -92px;
  padding: 0 38px 32px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 42%, #000 100%);
}

.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.card h3 { margin: 0; font-size: 1.42rem; letter-spacing: 2.6px; }
.card .sub { color: var(--fg-faint); font-size: 0.84rem; letter-spacing: 1.6px; margin: 6px 0 0; }
.card p.desc { color: var(--fg-dim); margin: 18px 0 0; font-size: 1.02rem; }
.card .meta { color: var(--fg-faint); font-size: 0.8rem; letter-spacing: 1.4px; margin-top: 18px; }
.card.muted { opacity: 0.45; }

.badge {
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid;
  white-space: nowrap;
}
.badge.released { color: var(--gold); border-color: rgba(201, 168, 106, 0.5); }
.badge.wip { color: #9fb3e0; border-color: rgba(159, 179, 224, 0.45); }
.badge.planned { color: var(--fg-faint); border-color: var(--line); }

/* ---------- trang chi tiết ---------- */

.back {
  display: inline-block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}
.back:hover { color: var(--gold); opacity: 1; }
.hero .facts {
  color: var(--fg-faint);
  font-size: 0.92rem;
  letter-spacing: 2px;
  margin: 24px 0 0;
  display: flex;
  gap: 10px 22px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- tải về ---------- */

.dl-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 0 0 14px; }
.dl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 232px;
  border: 1px solid var(--fg);
  padding: 20px 38px;
  font-size: 1.08rem;
  letter-spacing: 2.6px;
  background: transparent;
}
.dl:hover { background: var(--fg); color: var(--navy); opacity: 1; }
.dl .small { font-size: 0.7rem; letter-spacing: 1.4px; opacity: 0.6; margin-top: 4px; }
.dl-label { display: block; }

/* Icon dịch vụ */
.ico { width: 30px; height: 30px; display: block; margin: 0 auto 10px; flex: none; }
.dl:hover .ico { filter: none; }

/* ---------- nút liên hệ nổi, góc dưới bên phải, mọi trang ---------- */

.float-contact {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Không khung, không viền — chỉ còn icon. */
.fc-btn {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  line-height: 0;
  transition: transform 0.22s;
}
/* Lúc chưa rê chuột: chỉ là bóng xám mờ, không tranh chỗ với nội dung.
   Rê vào mới lên đúng màu thương hiệu.
   Bỏ khung rồi nên phải có bóng đổ, không thì icon xám chìm mất trên ảnh sáng. */
.fc-btn .ico {
  width: 34px;
  height: 34px;
  margin: 0;
  filter: grayscale(1) brightness(1.75) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.75));
  opacity: 0.62;
  transition: filter 0.22s, opacity 0.22s;
}
.fc-btn:hover { opacity: 1; transform: translateY(-2px); }
.fc-btn:hover .ico,
.fc-btn:focus-visible .ico {
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.7));
  opacity: 1;
}
/* Bàn phím cũng phải thấy được, không chỉ chuột */
.fc-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }

@media (max-width: 700px) {
  .float-contact { right: 12px; bottom: 12px; gap: 14px; }
  .fc-btn .ico { width: 30px; height: 30px; }
}
.dl.disabled {
  border-color: rgba(255, 255, 255, 0.24);
  border-style: dashed;
  color: rgba(255, 255, 255, 0.42);
  cursor: default;
}
.dl.disabled:hover { background: transparent; color: rgba(255, 255, 255, 0.42); }

/* ---------- bảng ---------- */

.table-scroll { overflow-x: auto; margin: 6px 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; min-width: 460px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { color: var(--fg-faint); font-weight: 400; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; }
.band--navy th { color: rgba(255, 255, 255, 0.55); }
td { color: var(--fg-dim); }
td.hash { font-family: Consolas, monospace; font-size: 0.76rem; letter-spacing: 0; word-break: break-all; }

/* ---------- khối lưu ý ---------- */

.note { border-left: 1px solid var(--gold); padding: 4px 0 4px 24px; margin: 26px 0; }
.note .nt { margin: 0 0 6px; font-size: 1.08rem; color: var(--fg); letter-spacing: 1.2px; }
.note p { margin: 0; font-size: 1rem; }

.panel { border: 1px solid var(--line); padding: 30px 34px; margin: 18px 0; }
.panel p { margin: 0; font-size: 1.02rem; }
.panel .donate-num { font-size: 1.24rem; color: var(--gold); letter-spacing: 3px; }

/* Ủng hộ: mã QR bên trái, số tài khoản bên phải */
.donate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.donate-qr { margin: 0; text-align: center; flex: none; }
.donate-qr img {
  width: 208px;
  height: auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 9px;
  background: #fff;
}
.donate-qr figcaption {
  margin-top: 12px;
  font-size: 0.76rem;
  letter-spacing: 1.6px;
  color: rgba(255, 255, 255, 0.62);
}
.donate-info { display: flex; flex-direction: column; gap: 8px; }
.donate-info .donate-num { font-size: 1.32rem; color: #f0dcae; letter-spacing: 3px; }
.donate-info .donate-owner { color: rgba(255, 255, 255, 0.82); }
.donate-info .donate-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 34ch;
  line-height: 1.8;
  margin-top: 6px;
}

.center { text-align: center; }

/* ---------- chân trang ---------- */

/* Chân trang: dải navy kết lại, giống trang gốc */
footer {
  /* Cũng tan dần từ trên xuống, không kẻ viền, để nối liền với dải cuối cùng */
  background-image: linear-gradient(180deg, rgba(22, 38, 77, 0) 0%, rgba(22, 38, 77, 0.85) 38%, rgba(22, 38, 77, 0.95) 100%);
  padding: 74px 0 62px;
  color: var(--fg-faint);
  font-size: 0.82rem;
  text-align: center;
}
footer p { margin: 8px auto; color: rgba(255, 255, 255, 0.56); line-height: 1.95; max-width: 78ch; }
footer b { color: rgba(255, 255, 255, 0.8); font-weight: 400; }

footer .legal {
  margin: 30px auto 0;
  padding: 26px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 82ch;
}
footer .legal p { font-size: 0.78rem; color: rgba(255, 255, 255, 0.44); line-height: 1.85; }
footer .legal p:first-child {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 1.6px;
  margin-bottom: 14px;
}
footer .sig { margin-top: 26px; font-size: 0.76rem; letter-spacing: 2.4px; color: rgba(255, 255, 255, 0.32); }

/* ---------- màn hẹp ---------- */

@media (max-width: 700px) {
  body { line-height: 1.9; }
  .band { padding: 62px 0; }
  .hero { min-height: 46vh; padding: 60px 22px 70px; }
  .hero h1 { letter-spacing: 3px; }
  .band h2 { letter-spacing: 2.6px; font-size: 1.28rem; }
  .card { padding: 26px 24px; }
  .dl { width: 100%; min-width: 0; }
  .panel { padding: 24px 22px; }
  .nav { height: 64px; }
  .nav .wrap { gap: 16px; }
  .nav-brand img.mark { height: 23px; }
  .nav-note {
    display: block;
    font-size: 0.61rem;
    letter-spacing: 0.8px;
    white-space: nowrap;
  }
  .wrap { padding: 0 20px; }

  /* Bảng hai cột không đủ chỗ ở màn hẹp — xếp chồng nhãn trên, giá trị dưới */
  .spec-box { padding: 24px 22px; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .spec-row .k { font-size: 0.82rem; }
  .band-head { margin-bottom: 38px; }
  .band-head h2 { letter-spacing: 3px; font-size: 1.12rem; gap: 10px; }
  .band-head .orn { width: 26px; }
  .title-logo img { width: min(320px, 84vw); }
  .hero-logo { height: 62px; }
  .donate { gap: 26px; }
  .donate-qr img { width: 176px; }
  .donate-info { align-items: center; text-align: center; }
  .band--navy + .band--deep, .band--deep + .band--navy { margin-top: -70px; padding-top: 70px; }

  .showcase { min-height: 76vh; padding-bottom: 132px; }
  .sc-cta { padding: 14px 30px; font-size: 0.92rem; letter-spacing: 2.4px; }
  .sc-item { min-width: 186px; padding: 12px 14px; gap: 10px; }
  .sc-item img { width: 48px; height: 30px; }
  .sc-name { font-size: 0.76rem; }
}