/* ══ Học toán cùng con — style dùng chung cho mọi trang của hoctoancungcon.vn ══

   Bố cục, kiểu chữ và nhịp khoảng cách theo trang "Đánh Vần" cùng nhà
   (danhvancungcon.firebaseapp.com). **Màu chủ đạo giữ theo app**: xanh
   `#0B57D0`, vàng sách `#FFE08B`, xanh lá `#1E8E3E` — lấy từ
   `StudyToGetherFlutter/lib/src/core/theme/app_design_tokens.dart`, để trang web
   và ứng dụng cùng một nhận diện.

   Font Be Vietnam Pro tự host trong `/fonts/` (giấy phép OFL đi kèm), đúng font
   của app. Không dùng font hay CSS từ CDN: các trang này phải hiển thị đúng cả
   khi mạng chặn tài nguyên ngoài, mà trang hỗ trợ thường được mở đúng lúc mạng
   người dùng đang có vấn đề.

   Tên biến cũ (`--bg`, `--surface`, `--text`, `--muted`, `--border`,
   `--primary`, `--primary-soft`, `--green*`, `--yellow*`) được giữ nguyên tên:
   phần CSS riêng của từng trang vẫn dùng chúng, nên đổi giá trị ở đây là cả
   trang đổi theo. */

:root {
  color-scheme: light;

  /* Nền "giấy" và chữ "mực" theo site tham khảo. */
  --bg: #faf9f6;
  --surface: #ffffff;
  --text: #252b45;
  --muted: #5e6675;
  --border: #e4e3df;

  /* Màu thương hiệu của app. */
  --primary: #0b57d0;
  --primary-strong: #0842a0;
  --primary-soft: #dae2ff;
  --primary-subtle: #eef3fe;
  --primary-ink: #001847;
  --green: #1e8e3e;
  --green-soft: #d7f7df;
  --green-ink: #002108;
  --yellow: #f9ab00;
  --yellow-soft: #ffe08b;
  --yellow-subtle: #fff4d6;
  --yellow-text: #3f2e00;

  /* Khối nền tối (mục hỗ trợ cuối trang chủ). */
  --ink: #252b45;
  --ink-accent: #b2c5ff;
  --ink-muted: #d5d8e5;

  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --width: 1240px;
  --gutter: 48px;
  --copy-width: 460px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 24px;
  --pill: 999px;
  --tracking: 0.08em;
  --heading-tracking: -0.035em;
  --section-gap: 88px;
  --shadow-card: 0 24px 64px rgba(37, 43, 69, 0.08);
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/fonts/BeVietnamPro-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/fonts/BeVietnamPro-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/fonts/BeVietnamPro-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; }

/* Mọi `display` của component phải nhường cho thuộc tính `hidden`. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.02em; }

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

/* Chữ chỉ dành cho trình đọc màn hình. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.site-wrap {
  max-width: var(--width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 12px;
  z-index: 2;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  line-height: 1.35;
}
.brand img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  flex: none;
}
.brand small {
  display: block;
  font-size: 11px;
  letter-spacing: var(--tracking);
  color: var(--muted);
  text-transform: uppercase;
}
.brand strong {
  display: block;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
}
.site-nav a {
  color: inherit;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--primary); }
.site-nav a[aria-current="page"] { font-weight: 600; }
.header-support {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface);
}
.header-support:hover { border-color: var(--primary); }

/* ── Nút ────────────────────────────────────────────────────────────────── */
.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--pill);
  background: var(--primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.site-button:hover { background: var(--primary-strong); }

.text-link {
  color: inherit;
  font-size: 14px;
  text-decoration: none;
}
.text-link:hover { color: var(--primary); }

.eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--primary);
}

.pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: normal;
  vertical-align: middle;
}

/* ── Trang nội dung (hỗ trợ, xóa tài khoản, pháp lý, tải ứng dụng) ───────── */
.page {
  max-width: 860px;
  margin-inline: auto;
  padding-block: 48px 8px;
}

/* `.legal-card` là tên cũ của hai trang pháp lý; giữ để không phải sửa nội
   dung đã khớp với bản trong app. */
.card,
.legal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 56px);
}

.page h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: var(--heading-tracking);
}
.page h2 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.35;
}
/* Chỉ link chữ trong đoạn văn. Link có class (nút cửa hàng, nút gửi yêu cầu)
   tự quy định màu; để rule này áp lên chúng là chữ xanh trên nền xanh. */
.page a:not([class]) { color: var(--primary); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 40px;
  padding-block: 32px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.site-footer p { margin: 0; }
.footer-brand {
  font-size: 15px;
  font-weight: 700;
}
.footer-meta { margin-top: 4px; color: var(--muted); }
.footer-meta a { color: inherit; }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--muted);
}
.site-footer nav a {
  color: inherit;
  text-decoration: none;
}
.site-footer nav a:hover,
.site-footer nav a[aria-current="page"] { color: var(--primary); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-nav { gap: 20px; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }

  .site-header {
    flex-wrap: wrap;
    gap: 16px;
    padding-block: 18px;
  }
  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
  }
  .header-support { padding: 4px 12px; }

  .page { padding-block: 28px 0; }
  .site-footer { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}