/* CabinSentinel — trang gom đầu vào demo cho BTC.
 *
 * Ba quyết định nền tảng, ghi lại để lần sau không ai sửa nhầm:
 *
 * 1. **Bảng màu lấy từ bộ nhận diện chính thức**, ô 06 COLOR SYSTEM: teal `#00E5D4`,
 *    xanh sâu `#0A3D4A`, hổ phách `#FFC107`, trắng ngà `#F7F8F6`. Nền tối của trang là
 *    dải quanh `#0A3D4A` — cùng màu với phần tối trong dấu hiệu.
 * 2. **Thứ tự màu của thang leo thang không phải trang trí.** Vàng → cam → đỏ → đỏ nhấp
 *    nháy là bốn bậc L1–L4 do `docs/contracts/02-state-machines.md` §4.1 quy định. Hợp
 *    đồng chỉ gọi tên màu chứ không chốt mã hex, nên L1 dùng đúng hổ phách thương hiệu;
 *    nhưng **thứ tự và ý nghĩa thì không được đổi** — đổi là làm trang nói khác sản phẩm.
 * 3. **Hình học cắt chéo** là thứ mượn từ trang tham chiếu (vinbus.vn) — chỉ mượn cách
 *    dựng khối, không mượn màu, chữ hay bất cứ dấu hiệu nhận diện nào của họ.
 *
 * Trang cố ý chỉ có một chế độ tối: nó là một trang độc lập, không nhúng vào đâu, và
 * cabin xe ban đêm là đúng thế giới của sản phẩm.
 */

:root {
  /* ---- nền và nhận diện ---- */
  --brand: #00e5d4;
  --brand-bright: #6ff5e8;
  --brand-deep: #046b6a;
  --ground-0: #072a33;
  --ground-1: #0a3d4a;
  --ground-2: #05202a;

  --on-dark: #eaf8f7;
  --on-dark-soft: #b2d7d8;
  --on-dark-muted: #86b2b6;
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.22);

  /* ---- thẻ sáng trên nền tối ---- */
  --surface: #f7f8f6;
  --surface-line: rgba(10, 61, 74, 0.15);
  --ink: #0a3d4a;
  --ink-muted: #55757e;

  /* ---- thang leo thang · 02-state-machines.md §4.1 ---- */
  --lv1: #ffc107; /* Vàng — "Cảnh báo" · đúng hổ phách thương hiệu */
  --lv2: #ff8a3d; /* Cam — "Cảnh báo cấp 2" */
  --lv3: #ff4d4f; /* Đỏ — "Khẩn cấp" */
  --lv4: #ff2d55; /* Đỏ nhấp nháy — "Đã báo trung tâm" */

  --shadow: 0 2px 6px rgba(2, 20, 26, 0.18), 0 16px 36px rgba(2, 20, 26, 0.24);
  --shadow-hover: 0 4px 10px rgba(2, 20, 26, 0.22), 0 26px 54px rgba(2, 20, 26, 0.34);

  --display: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page: 1120px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Neo cho các link nhảy mục, để tiêu đề không chui xuống dưới thanh nav dính. */
  scroll-padding-top: 88px;
}

body {
  font-family: var(--display);
  color: var(--on-dark);
  background-color: var(--ground-0);
  background-image:
    radial-gradient(52rem 34rem at 8% -8%, rgba(0, 229, 212, 0.2), transparent 66%),
    radial-gradient(44rem 30rem at 98% 4%, rgba(0, 150, 190, 0.2), transparent 64%),
    linear-gradient(170deg, var(--ground-1) 0%, #094150 34%, var(--ground-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Lưới mảnh — cảm giác "bảng điều khiển trong xe". Mờ dần để không đè lên nội dung. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 62%);
  mask-image: linear-gradient(to bottom, #000, transparent 62%);
}

a {
  color: inherit;
}

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

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 22px;
  position: relative;
  z-index: 1;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 99;
  background: var(--brand);
  color: #06262e;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
}
.skip:focus {
  left: 12px;
}

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================ thanh điều hướng ============================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(7, 42, 51, 0.74);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  letter-spacing: -0.3px;
  font-size: 1.02rem;
  text-decoration: none;
  flex: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  /* Dấu hiệu vốn đã có nét dày; bỏ mọi lớp phủ để nó giữ đúng ba màu gốc. */
}

/* Ở chân trang, dấu hiệu đứng cạnh câu tagline chứ không cạnh tên thương hiệu. */
.foot-brand {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--on-dark-soft);
  gap: 10px;
}
.foot-brand .brand-mark {
  width: 26px;
  height: 26px;
}
.foot-brand:hover {
  color: var(--on-dark);
}

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-dark-soft);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

.nav-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

/* ============================ nút bấm cắt chéo ============================ */
/* Hình bình hành là dấu hiệu hình học của trang; chữ nghiêng ngược lại cho thẳng. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transform: skewX(-11deg);
  transition: transform 0.28s var(--ease), box-shadow 0.28s ease, background 0.2s;
}
.btn > * {
  transform: skewX(11deg);
}

.btn-primary {
  background: linear-gradient(100deg, var(--brand), var(--brand-bright));
  color: #06262e;
  box-shadow: 0 10px 26px rgba(0, 229, 212, 0.26);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  transform: skewX(-11deg) translateY(-3px);
  box-shadow: 0 16px 38px rgba(0, 229, 212, 0.38);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.07);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  transform: skewX(-11deg) translateY(-3px);
}

.btn .ico {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ============================ nhãn nhỏ ============================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 212, 0.4);
  background: rgba(0, 229, 212, 0.11);
  color: #7ef2e6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 2.4s ease-out infinite;
  flex: none;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 229, 212, 0.7); }
  70% { box-shadow: 0 0 0 9px rgba(0, 229, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 212, 0); }
}

/* ============================ hero ============================ */
.hero {
  padding: 62px 0 78px;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.05rem, 4.5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.1px;
  margin: 20px 0 0;
  text-wrap: balance;
}

.hero h1 .hl {
  background: linear-gradient(96deg, var(--brand-bright), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 1.06rem;
  color: var(--on-dark-soft);
}

/* Ba thứ sản phẩm trông chừng. Đặt ngay dưới câu mở đầu vì người lần đầu vào trang
   cần biết "nó nhìn cái gì" trước khi đọc bất cứ con số nào. */
.watch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 24px;
}

.watch-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 26px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.fact b {
  display: block;
  font-family: var(--mono);
  font-size: 1.42rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.fact span {
  font-size: 0.78rem;
  color: var(--on-dark-muted);
  letter-spacing: 0.2px;
}

/* Khung hình bên phải: ảnh chủ đề của sản phẩm, cắt chéo theo motif của trang.
   Không phải thẻ video — mục video nằm riêng bên dưới. */
.hero-visual {
  display: block;
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 94% 100%, 0 100%);
  background: #05232c;
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(200deg, rgba(5, 40, 50, 0) 58%, rgba(4, 32, 40, 0.5) 100%);
}

/* Trên màn rộng, tấm ảnh chạy tràn tới mép phải màn hình: chữ bên trái giữ nguyên
   bề ngang dễ đọc, ảnh vẫn đủ lớn để nhìn rõ. body đã ẩn tràn ngang. */
@media (min-width: 901px) {
  .hero-visual {
    width: calc(100% + (100vw - min(100vw, var(--page))) / 2 + 22px);
  }
}


/* ============================ dải phân cách chéo ============================ */
.slant {
  height: 76px;
  background: linear-gradient(180deg, rgba(3, 24, 30, 0.55), rgba(3, 24, 30, 0.9));
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 100%);
  margin-bottom: -1px;
}

/* ============================ câu chuyện ============================ */
.story {
  background: linear-gradient(180deg, rgba(3, 24, 30, 0.9), rgba(3, 22, 28, 0.94));
  padding: 18px 0 96px;
  position: relative;
}

.story-head {
  max-width: 62ch;
  margin-bottom: 54px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 16px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--brand);
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.9px;
  text-wrap: balance;
}

.story-head p {
  margin-top: 16px;
  color: var(--on-dark-soft);
  font-size: 1.02rem;
}

.src {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 11px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  color: var(--on-dark-muted);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow-wrap: anywhere;
}

/* --- trục thời gian --- */
.timeline {
  position: relative;
  padding-left: 46px;
}

/* Sống trục: một vạch mờ, và một vạch màu dâng lên theo tiến độ cuộn. */
.timeline::before,
.timeline > .spine {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
}

.timeline::before {
  background: rgba(255, 255, 255, 0.13);
}

.timeline > .spine {
  /* Mỗi đoạn sống trục mang đúng màu của bậc đang có hiệu lực tại chỗ đó — không phải
     một dải màu trang trí. Bốn mốc `--s1..--s4` do JS đo từ vị trí thật của các nút,
     nên tỉ lệ vẫn đúng khi chữ xuống dòng khác đi ở màn hẹp. Giá trị mặc định là số đo
     ở khổ 1280px, để trục không sai màu trong lúc chưa kịp đo. */
  background: linear-gradient(
    180deg,
    var(--brand) 0,
    var(--brand) var(--s1, 34%),
    var(--lv1) var(--s1, 34%),
    var(--lv1) var(--s2, 51%),
    var(--lv2) var(--s2, 51%),
    var(--lv2) var(--s3, 70%),
    var(--lv3) var(--s3, 70%),
    var(--lv3) var(--s4, 88%),
    var(--lv4) var(--s4, 88%)
  );
  clip-path: inset(0 0 calc((1 - var(--fill, 0)) * 100%) 0);
  transition: clip-path 0.18s linear;
}

.step {
  position: relative;
  padding-bottom: 34px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.step.on {
  opacity: 1;
  transform: none;
}

.step:last-child {
  padding-bottom: 0;
}

.step .node {
  position: absolute;
  left: -38px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ground-0);
  box-shadow: 0 0 0 2px var(--dotc, var(--brand));
  z-index: 2;
}

.step.on .node {
  background: var(--dotc, var(--brand));
  box-shadow: 0 0 0 2px var(--dotc, var(--brand)), 0 0 18px -2px var(--dotc, var(--brand));
}

.step .time {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  color: var(--on-dark-muted);
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: -0.2px;
}

.step p {
  margin-top: 7px;
  max-width: 58ch;
  color: var(--on-dark-soft);
  font-size: 0.95rem;
}

/* Bậc leo thang: thẻ có gờ màu của chính bậc đó. */
.step.level .card-lv {
  margin-top: 12px;
  padding: 16px 20px 16px 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 3px 0 0 var(--dotc), inset 0 0 0 1px var(--hairline);
  position: relative;
  overflow: hidden;
}

.lv-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.lv-tag {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--dotc);
}

.lv-delay {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--on-dark-muted);
  letter-spacing: 0.4px;
}

.lv-chans {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.chan {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.7px;
  padding: 4px 9px;
  border-radius: 3px;
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* Bậc cuối nhấp nháy — đúng như contract mô tả "Đỏ nhấp nháy". */
.step.final.on .node {
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { box-shadow: 0 0 0 2px var(--lv4), 0 0 22px 0 var(--lv4); }
  50% { box-shadow: 0 0 0 2px var(--lv4), 0 0 4px 0 rgba(255, 45, 85, 0.2); }
}

/* Câu đọng lại sau khi trục thời gian chạy hết. Cố ý to và đứng một mình. */
.pull {
  margin: 52px 0 0;
  padding-left: 22px;
  max-width: 30ch;
  border-left: 3px solid var(--brand);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.6px;
  color: #fff;
  text-wrap: balance;
}

/* --- kết luận của câu chuyện --- */
.story-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
}

.out b {
  display: block;
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}

.out span {
  display: block;
  margin-top: 5px;
  font-size: 0.86rem;
  color: var(--on-dark-muted);
  max-width: 30ch;
}

/* ============================ các mục link ============================ */
.links {
  padding: 84px 0 34px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 30px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.section-head h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}

.section-head p {
  color: var(--on-dark-muted);
  font-size: 0.9rem;
  max-width: 44ch;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 188px;
  padding: 26px 28px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}

/* Gờ trái nở ra khi hover. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
  transform: scaleY(0.3);
  transition: transform 0.36s var(--ease);
}

/* Góc vát trên-phải — cùng ngôn ngữ hình học với hero. */
.card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background: linear-gradient(225deg, rgba(0, 229, 212, 0.24) 50%, transparent 50%);
  transition: width 0.36s var(--ease), height 0.36s var(--ease);
}

.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.card:hover::before,
.card:focus-visible::before {
  transform: scaleY(1);
}
.card:hover::after,
.card:focus-visible::after {
  width: 52px;
  height: 52px;
}

.card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: rgba(0, 229, 212, 0.14);
  color: var(--brand-deep);
  flex: none;
}

.card-icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-title {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.arrow {
  color: var(--brand-deep);
  transition: transform 0.3s var(--ease);
  display: inline-block;
}
.card:hover .arrow {
  transform: translate(3px, -3px);
}

.card-url {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--brand-deep);
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.card-note {
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* --- thẻ video --- */
.card-video {
  padding: 0;
  min-height: 0;
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #05232c;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.card-video:hover .thumb img {
  transform: scale(1.045);
}

.play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.play-badge svg {
  width: 62px;
  height: 62px;
  fill: #fff;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
  transition: transform 0.3s var(--ease);
}
.card-video:hover .play-badge svg {
  transform: scale(1.1);
}

.card-video .body {
  padding: 22px 26px 26px;
}

/* ============================ trang video ============================ */
.player-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #05232c;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}

.player-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
}

/* ============================ chân trang ============================ */
footer {
  border-top: 1px solid var(--hairline);
  margin-top: 60px;
  padding: 26px 0 40px;
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--on-dark-muted);
}

/* ============================ xuất hiện dần ============================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--d, 0s);
}

.reveal.on {
  opacity: 1;
  transform: none;
}

/* ======================= nút cuộn lên đầu trang =======================
 * Nằm ở góc dưới **trái**, chừa hẳn góc phải cho các thanh cuộn, nút "back"
 * cử chỉ của trình duyệt di động và bất cứ thứ gì hệ điều hành hay chèn ở đó.
 * Chỉ hiện sau khi người đọc đã đi qua chừng một màn hình — trước đó nó chỉ
 * che mất nội dung. */
.len-dau {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 45; /* trên thanh nav dính (40), vì nó phải bấm được ở mọi lúc */
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: var(--on-dark);
  background: rgba(7, 42, 51, 0.74);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--hairline-strong), var(--shadow);
  transform: skewX(-11deg) translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, transform 0.28s var(--ease), visibility 0.28s,
    background 0.2s, box-shadow 0.28s ease;
}

/* `visibility` chứ không phải `display`: giữ được hiệu ứng mờ dần, mà khi ẩn thì
 * chuột không bấm trúng và bàn phím không tab vào được. */
.len-dau.hien {
  opacity: 1;
  visibility: visible;
  transform: skewX(-11deg) translateY(0);
}

.len-dau:hover,
.len-dau:focus-visible {
  background: rgba(0, 229, 212, 0.16);
  box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-hover);
}
.len-dau.hien:hover,
.len-dau.hien:focus-visible {
  transform: skewX(-11deg) translateY(-3px);
}

.len-dau svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: skewX(11deg); /* trả mũi tên về thẳng, chỉ khối nền cắt chéo */
}

/* ============================ màn hẹp ============================ */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero-visual {
    max-width: 480px;
  }
  .nav-links {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero {
    padding: 40px 0 56px;
  }
  .timeline {
    padding-left: 34px;
  }
  .step .node {
    left: -30px;
  }
  .timeline::before,
  .timeline > .spine {
    left: 11px;
  }
  .btn {
    padding: 13px 22px;
    font-size: 0.85rem;
  }
  .hero-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .fact {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .fact b {
    min-width: 4.4ch;
  }
  .pull {
    margin-top: 40px;
  }
  .len-dau {
    left: 14px;
    bottom: 14px;
    width: 44px; /* không nhỏ hơn nữa: 44px là ngưỡng vùng chạm dễ bấm */
    height: 44px;
  }
}

/* ================= tôn trọng thiết lập giảm chuyển động ================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal,
  .step {
    opacity: 1;
    transform: none;
  }
  /* Vạch màu vẫn phải đầy, nếu không trục thời gian trông như đang hỏng. */
  .timeline > .spine {
    clip-path: inset(0);
  }
}