/*
  AVI — CSS dùng chung cho các TRANG NỘI DUNG TĨNH (public/*.html).
  Đây là các trang HTML thật (không phải React) để máy tìm kiếm và trợ lý AI đọc được nội dung
  mà không cần chạy JavaScript. Bảng màu lấy đúng bộ màu tối + lime của Trang chủ AVI.

  Lưu ý phạm vi: tệp này CHỈ áp cho các trang tĩnh này, không đụng tới `src/styles/index.css`
  (CSS của ứng dụng) và `src/features/landing/landing.css` (CSS của Trang chủ React).
*/

:root {
  --bg: #0b1118;
  --bg-soft: #132029;
  --line: #ffffff14;
  --line-strong: #ffffff24;
  --ink: #e6f0f5;
  --muted: #93a5b0;
  --lime: #bdff75;
  --lime-soft: #bdff7520;
  --ink-on-lime: #16220d;
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 12% -8%, #1c3a2a80, transparent 62%),
    radial-gradient(900px 460px at 96% 4%, #17304a7a, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.72;
}

.wrap {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 22px;
}

/* ---------- Thanh đầu trang ---------- */
.top {
  border-bottom: 1px solid var(--line);
  background: #0b111899;
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
  text-decoration: none;
}

.brand svg {
  display: block;
}

.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-left: auto;
  font-size: 13.5px;
}

.top nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.top nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

.top .cta {
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink-on-lime);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
}

.top .cta:hover {
  background: #d2ff9e;
}

/* ---------- Nội dung ---------- */
main {
  padding: 40px 0 8px;
}

.crumbs {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 14px;
}

.crumbs a {
  color: var(--muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff08;
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0.02em;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(29px, 4.2vw, 42px);
  line-height: 1.16;
  letter-spacing: -1px;
}

h2 {
  margin: 44px 0 14px;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.28;
  letter-spacing: -0.4px;
}

h3 {
  margin: 26px 0 8px;
  font-size: 17.5px;
}

p {
  margin: 0 0 15px;
}

a {
  color: var(--lime);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lead {
  font-size: 19px;
  color: #cddde6;
}

strong {
  color: #fff;
}

ul,
ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

li {
  margin: 0 0 9px;
}

/* ---------- Khối/card ---------- */
.card {
  margin: 22px 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #ffffff0a, #ffffff03);
}

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

.grid .card {
  margin: 0;
}

.grid h3 {
  margin-top: 0;
}

.note {
  margin: 22px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--lime);
  border-radius: 0 12px 12px 0;
  background: var(--lime-soft);
  font-size: 15.5px;
}

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.flow li {
  margin: 0;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff08;
  color: #d3e2ea;
}

.flow li + li::before {
  content: '→';
  margin-right: 10px;
  color: var(--lime);
}

/* ---------- Bảng ---------- */
table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
  font-size: 14.5px;
}

caption {
  text-align: left;
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 12.5px;
}

th,
td {
  padding: 11px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: #ffffff0a;
  color: #fff;
  font-weight: 600;
}

/* ---------- Hỏi–đáp ---------- */
.faq article {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.faq article:first-of-type {
  border-top: 0;
}

.faq h3 {
  margin: 0 0 6px;
}

.faq p {
  margin: 0;
  color: #d3e2ea;
}

/* ---------- Kêu gọi ---------- */
.action {
  margin: 40px 0 8px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(140deg, #1b2f26, #132029);
}

.action h2 {
  margin-top: 0;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.btn.main {
  border-color: transparent;
  background: var(--lime);
  color: var(--ink-on-lime);
}

.btn.main:hover {
  background: #d2ff9e;
}

.btn:hover {
  border-color: var(--lime);
}

/* ---------- Chân trang ---------- */
footer {
  margin-top: 46px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

footer .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

footer a {
  color: var(--muted);
}

footer a:hover {
  color: var(--lime);
}

footer .legal {
  color: #7f909c;
}

@media (max-width: 640px) {
  .top nav {
    display: none;
  }

  .top .wrap {
    min-height: 60px;
  }

  body {
    font-size: 16px;
  }
}