/* Sale Agent — trang công khai (chủ, chính sách, điều khoản, xoá dữ liệu, hỗ trợ).
   TĨNH, KHÔNG qua build Vite: nginx phục vụ thẳng thư mục fe/site (xem fe/Dockerfile).
   Vì sao không dùng @saleagent/ui: đây là trang cho NGƯỜI CHƯA ĐĂNG NHẬP và cho người
   duyệt app của Meta — phải mở được kể cả khi bundle admin hỏng, và không được đắt thêm
   một giây build nào mỗi lần deploy.

   ── NỀN TRẮNG, KHÔNG CÓ NỀN TỐI (chủ sản phẩm chốt 08/09/2026) ────────────────────────
   Trước đây tệp này có một khối `@media (prefers-color-scheme: dark)` đảo toàn bộ bảng màu.
   ĐÃ GỠ, và đừng thêm lại nếu không có yêu cầu: khách của trang này là chủ shop mở link từ
   Facebook/Zalo trên điện thoại, mà điện thoại Việt Nam phần lớn bật chế độ tối cả ngày —
   nghĩa là bản người ta thực sự nhìn thấy lại là bản KHÔNG ai duyệt bao giờ. Một bản trắng
   được chăm kỹ đáng tin hơn hai bản nửa vời. `color-scheme: light` ở :root là phần bắt buộc
   đi kèm: thiếu nó thì trình duyệt vẫn vẽ ô nhập, thanh cuộn và `<details>` theo màu tối.

   ── BẢNG MÀU LẤY TỪ CHÍNH LOGO ───────────────────────────────────────────────────────
   Đo bằng cách lấy mẫu điểm ảnh trên `assets/logo.png`: nền icon #021128→#081E58 (mực),
   xe đẩy #2728F6 (xanh thương hiệu), bong bóng chat #28D1FC (xanh ngọc). Ba màu đó thành
   --fg / --brand / --brand-2, nên logo đặt ở đâu trên trang cũng không lạc màu. */

/* ── Chữ: Be Vietnam Pro, TỰ HOST ─────────────────────────────────────────────────────
   Chọn font này vì nó được vẽ RIÊNG cho tiếng Việt (dấu đặt thấp và lệch khỏi thân chữ,
   nên "ượ" "ẫ" "ỹ" không chạm nhau và không đội lên dòng trên như ở phần lớn font Latin).
   So với `system-ui`: trên Windows đó là Segoe UI — dấu tiếng Việt của Segoe UI bị đẩy cao
   và mảnh, cỡ tiêu đề 48px nhìn ra ngay; mà quan trọng hơn, font mặc định của hệ điều hành
   làm trang trông như bản dựng thử, không như một sản phẩm có người thiết kế.

   TỰ HOST chứ không nhúng <link> tới fonts.googleapis.com, ba lý do đo được:
   1. Bớt hai vòng bắt tay DNS+TLS tới hai tên miền lạ trước khi có chữ đầu tiên.
   2. Trang phải mở được cho người duyệt app của Meta kể cả khi Google Fonts bị chặn.
   3. Không rò địa chỉ IP người xem sang bên thứ ba — trang này có cả chính sách riêng tư.
   Chỉ lấy 4 độ đậm (400/600/700/800) và 2 dải ký tự (vietnamese + latin): đủ dùng, ~33KB
   mỗi độ đậm. Thêm độ đậm mới thì tải thêm .woff2 vào assets/fonts/ và khai thêm ở đây;
   `unicode-range` là thứ giữ cho trình duyệt chỉ tải dải nó thật sự cần. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bevietnampro-vietnamese-400.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bevietnampro-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/bevietnampro-vietnamese-600.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/bevietnampro-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/bevietnampro-vietnamese-700.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/bevietnampro-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/bevietnampro-vietnamese-800.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/bevietnampro-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  color-scheme: light;

  --bg: hsl(0 0% 100%);            /* thân trang: TRẮNG, không pha */
  --subtle: hsl(220 33% 97.6%);    /* dải xen kẽ + nền "màn hình" trong ảnh minh hoạ */
  --card: hsl(0 0% 100%);
  --fg: hsl(222 45% 11%);
  --fg-soft: hsl(222 24% 26%);
  --muted-fg: hsl(218 14% 46%);
  --border: hsl(220 20% 91%);
  --border-soft: hsl(220 22% 94.5%);

  --brand: hsl(231 88% 56%);       /* #2C55F0 — xe đẩy trong logo */
  --brand-deep: hsl(231 82% 46%);
  --brand-2: hsl(196 97% 57%);     /* #28D1FC — bong bóng chat trong logo */
  --brand-fg: hsl(0 0% 100%);
  --brand-wash: hsl(226 100% 97.5%);
  --accent-bg: hsl(196 90% 96%);
  --accent-fg: hsl(202 88% 28%);
  --ok: hsl(158 74% 33%);
  --warn: hsl(28 84% 40%);
  --bad: hsl(356 68% 48%);

  /* Bóng đổ NHIỀU LỚP: một lớp 1px cho cạnh, một lớp toả rộng rất nhạt cho chiều sâu.
     Một lớp duy nhất thì hoặc bẩn cạnh, hoặc trông như hộp dán. */
  --shadow-sm: 0 1px 2px hsl(222 45% 11% / 0.05), 0 1px 3px hsl(222 45% 11% / 0.04);
  --shadow: 0 1px 2px hsl(222 45% 11% / 0.04), 0 10px 26px -12px hsl(222 45% 11% / 0.14);
  --shadow-lg: 0 1px 2px hsl(222 45% 11% / 0.04), 0 26px 56px -22px hsl(222 45% 11% / 0.26);
  --shadow-brand: 0 1px 2px hsl(231 88% 40% / 0.16), 0 10px 24px -10px hsl(231 88% 50% / 0.45);

  --radius: 0.875rem;
  --radius-lg: 1.25rem;

  /* Một đường cong duy nhất cho MỌI chuyển động trên trang (trừ nảy có chủ đích). Trang trông
     "mượt" là do các hiệu ứng đồng pha với nhau, không phải do hiệu ứng nào dài hay lạ. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16.5px;
  /* 1.72 chứ không phải 1.5 như mặc định của phần lớn trang: tiếng Việt có dấu NẰM TRÊN và
     dấu NẰM DƯỚI trên cùng một dòng ("Ượ", "ệ"), dòng sát nhau là hai tầng dấu chạm nhau. */
  line-height: 1.72;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -0.022em; font-weight: 800; }
h3, h4 { font-weight: 700; letter-spacing: -0.012em; }

img { max-width: 100%; height: auto; }

::selection { background: hsl(231 88% 56% / 0.16); }

/* ── Chuyển ngữ: mặc định TIẾNG VIỆT, kể cả khi không có JS (chủ sản phẩm chốt 07/09/2026 —
   khách là chủ shop Việt, trang phải ra tiếng Việt ngay, không phụ thuộc ngôn ngữ trình duyệt).
   KHÔNG dò `navigator.language` nữa: máy dev và nhiều máy khách chạy Windows bản tiếng Anh, dò
   theo trình duyệt là chính khách Việt lại thấy tiếng Anh.

   ĐÁNH ĐỔI ĐÃ BIẾT: người duyệt app của Meta đọc tiếng Anh, nên mỗi trang mang một dòng nhắc
   BẰNG TIẾNG ANH (`.en-hint`) trỏ sang `?lang=en`, và nút chuyển ngữ trong thanh trên luôn ghi
   chữ "English". Bỏ hai thứ đó là bỏ luôn đường sang bản tiếng Anh của vòng duyệt.

   `revert` chứ KHÔNG phải `block`: nhãn song ngữ nằm cả ở khối <main> lẫn <span> trong thanh
   điều hướng — ép `block` là chữ trong nút xuống dòng. `revert` trả về mặc định của trình
   duyệt cho đúng loại thẻ (main → block, span → inline). */
[data-l="en"] { display: none; }
html[data-lang="en"] [data-l="en"] { display: revert; }
html[data-lang="en"] [data-l="vi"] { display: none; }

/* Dòng nhắc bản tiếng Anh — chỉ hiện ở bản tiếng Việt (chính nó mang data-l="vi").
   Nhỏ, nhạt, nằm ngay dưới thanh trên: khách Việt lướt qua không vướng, người duyệt Meta
   nhìn thấy ngay dòng chữ tiếng Anh duy nhất trên màn hình.

   KHÔNG nền xám, KHÔNG viền dưới (sửa 08/09/2026): trước đây đây là một DẢI XÁM chạy hết
   chiều ngang ngay dưới thanh trên, và nó cắt đôi trang đúng chỗ đắt nhất — giữa thanh trên
   và hero. Một dòng chữ nhạt trên nền trong suốt vẫn đủ để người duyệt Meta nhìn thấy (nó là
   dòng tiếng Anh DUY NHẤT trên màn hình đầu tiên) mà không chặn mắt khách Việt. */
.en-hint { background: transparent; }
.en-hint .wrap { padding-top: 10px; padding-bottom: 2px; color: var(--muted-fg); font-size: 13px; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Vòng focus dùng chung: bàn phím thấy rõ, chuột không thấy gì. Thiếu nó thì trang trượt
   tiêu chí tiếp cận cơ bản, mà người duyệt app có kiểm. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }

/* ── Thanh trên cùng ─────────────────────────────────────────────────────────────────
   Ở đỉnh trang thanh này TRONG SUỐT và không viền — hero chạy thẳng lên mép màn hình,
   đó là thứ tách một trang bán hàng khỏi một trang quản trị. Chỉ khi người ta cuộn
   xuống (site.js gắn `.is-stuck`) nó mới hiện nền mờ + viền + bóng. */
.top {
  position: sticky; top: 0; z-index: 30;
  background: hsl(0 0% 100% / 0.72);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.top.is-stuck {
  background: hsl(0 0% 100% / 0.9);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 20px -6px hsl(222 45% 11% / 0.12);
}
.top .wrap { display: flex; align-items: center; gap: 16px; height: 70px; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 800; color: var(--fg); font-size: 17.5px; letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
/* `.mark` là ẢNH logo thật (assets/logo.png), không còn là ô chữ "S". Khai width/height
   trong HTML nữa để trình duyệt chừa chỗ trước khi ảnh về — không thì thanh trên giật một
   nhịp lúc tải. */
.logo .mark {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: block;
  transition: transform .4s var(--ease);
}
.logo:hover .mark { transform: scale(1.06) rotate(-3deg); }

.top nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* `:not(.btn)` là BẮT BUỘC, không phải cho gọn: `.top nav a` (0,1,2) thắng `.btn-brand` (0,1,0)
   nên nút "Đăng nhập" trong thanh điều hướng bị kéo về màu chữ mờ và nền xám lúc rê chuột —
   chữ trắng biến mất trên nền gradient. Đo bằng ảnh chụp trước khi sửa. */
.top nav a:not(.btn) {
  color: var(--muted-fg); padding: 8px 12px; border-radius: 9px;
  font-size: 15px; font-weight: 600;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.top nav a:not(.btn):hover { color: var(--fg); background: var(--subtle); text-decoration: none; }

/* ── Nút ─────────────────────────────────────────────────────────────────────────────
   Nút nhấc lên 1px khi rê chuột và LÚN XUỐNG khi bấm. Hai chuyển động đó là thứ khiến
   giao diện "có phản hồi" — người dùng tin vào cái bấm được. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 11px; font-weight: 700; font-size: 15.5px;
  font-family: inherit; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; line-height: 1.25;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(0) scale(0.985); }

.btn-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--brand-fg);
  box-shadow: var(--shadow-brand);
}
.btn-brand:hover {
  text-decoration: none; transform: translateY(-1.5px);
  box-shadow: 0 2px 4px hsl(231 88% 40% / 0.18), 0 16px 32px -10px hsl(231 88% 50% / 0.55);
}
.btn-ghost { background: var(--card); color: var(--fg); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { text-decoration: none; transform: translateY(-1.5px); border-color: hsl(231 60% 78%); box-shadow: var(--shadow); }
.btn-sm { padding: 8px 14px; font-size: 14.5px; border-radius: 9px; }

#lang-toggle { font-family: inherit; }

/* ── Hero (trang văn bản dùng, trang chủ có hero riêng ở landing.css) ─────────────── */
.hero { padding: 84px 0 60px; text-align: center; }
.hero h1 { font-size: clamp(31px, 5.2vw, 48px); margin: 0 0 20px; }
.hero p.lead { font-size: clamp(16.5px, 2.2vw, 19px); color: var(--muted-fg); margin: 0 auto 32px; max-width: 660px; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pill {
  display: inline-block; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-fg); font-size: 13.5px; font-weight: 700;
}

/* ── Khối nội dung ─────────────────────────────────────────────────────────────────
   68px chứ không phải 84px (siết 08/09/2026): với dải xen kẽ đổi nền, chỗ nối hai khối đã
   tự đọc ra là "hết phần này sang phần khác" — khoảng trắng chỉ cần đủ để thở, thêm nữa là
   bắt người ta cuộn qua chỗ không có gì. */
section { padding: 68px 0; }
section > .wrap > h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 12px; }
section > .wrap > p.sub { color: var(--muted-fg); margin: 0 0 32px; max-width: 660px; }

/* HAI khối LIỀN NHAU CÙNG NỀN thì gộp khoảng trắng làm một (sửa 08/09/2026). Trước đó
   68px đáy khối trên + 68px đỉnh khối dưới = 136px trắng liền mạch, không có gì phân định —
   thấy rõ nhất ở quãng giữa "Hỏi đáp" và dải kêu gọi cuối, người dùng chụp màn hình chỉ ra.
   Khối có `.alt` KHÔNG dính luật này: nền của nó khác, khoảng trắng nằm ở hai bên đường
   ranh nền nên vẫn cần đủ cả hai. */
section:not(.alt) + section:not(.alt) { padding-top: 0; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--muted-fg); font-size: 15px; }
.card .ico { font-size: 22px; display: block; margin-bottom: 12px; }

.steps { counter-reset: s; display: grid; gap: 10px; }
.steps li {
  list-style: none; display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px;
}
.steps li::before {
  counter-increment: s; content: counter(s);
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px;
  background: var(--brand); color: var(--brand-fg);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; margin-top: 3px;
}
.steps ul, .steps p { margin: 4px 0 0; }

/* Dải xen kẽ: nền xám RẤT nhạt, KHÔNG viền trên/dưới. Viền ngang chạy hết chiều rộng
   màn hình là dấu hiệu của trang quản trị; trang bán hàng chuyển khối bằng khoảng trắng
   và bằng một sắc nền khác đi vài phần trăm. */
.alt { background: var(--subtle); }

table.perm { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.perm th, table.perm td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.perm th { font-weight: 700; white-space: nowrap; }
table.perm code { font-size: 13.5px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }

code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--subtle); border: 1px solid var(--border-soft);
  padding: 1px 6px; border-radius: 6px; font-size: 0.88em;
}

/* ── Trang văn bản (chính sách / điều khoản) ─────────────────────────────────────── */
.doc { padding: 52px 0 84px; }
.doc h1 { font-size: clamp(27px, 4.2vw, 38px); margin: 0 0 8px; }
.doc .meta { color: var(--muted-fg); font-size: 14.5px; margin: 0 0 36px; }
.doc h2 { font-size: 21px; margin: 42px 0 12px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.doc h3 { font-size: 17px; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--fg-soft); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 7px 0; }
.doc .note {
  background: var(--brand-wash); border: 1px solid hsl(231 70% 90%);
  color: var(--fg-soft); border-radius: var(--radius);
  padding: 18px 20px; margin: 22px 0; font-size: 15px;
}
.doc .note p { color: inherit; margin: 0; }
.doc .note p + p { margin-top: 8px; }

/* ── Chân trang ──────────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); padding: 40px 0 34px; color: var(--muted-fg); font-size: 14.5px; background: var(--subtle); }
footer .wrap { display: flex; gap: 12px 26px; flex-wrap: wrap; align-items: center; }
footer nav { display: flex; gap: 12px 20px; flex-wrap: wrap; margin-left: auto; }
footer a { color: var(--muted-fg); }
footer a:hover { color: var(--fg); }

/* Dòng pháp nhân — CHỮ NHỎ NHẤT TRANG, và cố ý (08/09/2026). Chủ sản phẩm thấy thông tin công
   ty không cần thiết cho khách; khối in đậm ở cột giới thiệu đã gỡ. Nhưng DÒNG NÀY THÌ PHẢI
   CÒN: Meta business verification đối chiếu tên trên giấy phép với tên trên website và đã đánh
   trượt một lần đúng vì trang chỉ ghi tên sản phẩm "Sale Agent". Hạ xuống cỡ chú thích là cách
   vừa không chiếm chỗ vừa không mất căn cứ. Gỡ hẳn thì phải xong vòng verify trước. */
.legal-line { font-size: 12.5px; line-height: 1.55; color: color-mix(in srgb, var(--muted-fg) 72%, transparent); }

/* ── Hiện dần khi cuộn tới ───────────────────────────────────────────────────────────
   Khai ở đây (chứ không ở landing.css) vì mọi trang công khai đều nạp site.js.

   `.reveal` KHÔNG tự ẩn: chỉ ẩn khi site.js đã gắn `js-anim` lên <html>. Không có JS —
   hoặc JS lỗi — thì mọi thứ hiện bình thường, không bao giờ có trang trắng. Đây là điều
   kiện bắt buộc với trang mà người duyệt app của Meta phải mở được.

   `--d` là độ trễ so le, đặt thẳng trên thẻ (style="--d:.08s"). So le làm mắt đọc theo
   thứ tự thay vì thấy cả khối nhảy một lần — đó là khác biệt giữa "mượt" và "giật cục". */
.js-anim .reveal { opacity: 0; transform: translateY(18px); }
.js-anim .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s);
}

/* Người bật "giảm chuyển động" trong hệ điều hành: tắt sạch, không nhân nhượng.
   Trang vẫn phải đầy đủ nội dung — chỉ là không có gì trượt hay mờ dần. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ── Điện thoại ──────────────────────────────────────────────────────────────────────
   THANH TRÊN Ở ĐIỆN THOẠI: MỘT HÀNG, HAI THỨ (dựng lại 08/09/2026).

   Bản trước cho `.top .wrap` xuống dòng và `nav` chiếm cả chiều ngang, nên trên máy 390px
   thanh trên thành HAI TẦNG: tầng một là logo, tầng hai là "Hỗ trợ · English · Đăng nhập"
   dồn về mép trái. Ba thứ khác cỡ, khác kiểu, dính nhau, lại nằm dưới một hàng gần như
   trống — người dùng chụp màn hình và gọi thẳng là "gớm". Đúng: thanh trên chiếm ~150px
   đầu màn hình mà không nói được gì.

   Giờ: logo trái, `English` + `Đăng nhập` phải, một hàng 58px, không xuống dòng. MỌI liên
   kết chữ trong nav ẩn hết — cả neo trong trang (trên điện thoại người ta cuộn, không bấm
   mục lục) lẫn `Hỗ trợ`/`Bảo mật`/`Điều khoản`/`Xoá dữ liệu` của các trang pháp lý. KHÔNG
   MẤT ĐƯỜNG NÀO: chân trang của cả năm trang đều có đủ các liên kết đó.

   Giữ lại đúng hai thứ, và cả hai đều có lý do không được bỏ: nút chuyển ngữ là đường sang
   bản tiếng Anh cho vòng duyệt app của Meta, `Đăng nhập` là việc chính của người quay lại. */
@media (max-width: 720px) {
  .top .wrap { height: 58px; gap: 10px; flex-wrap: nowrap; padding-left: 16px; padding-right: 16px; }
  .logo { font-size: 16px; gap: 9px; }
  .logo .mark { width: 30px; height: 30px; flex-basis: 30px; }
  .top nav { margin-left: auto; width: auto; gap: 6px; flex-wrap: nowrap; }
  .top nav a:not(.btn) { display: none; }
  .top nav .btn { padding: 7px 12px; font-size: 13.5px; border-radius: 9px; }
  /* Nhãn nút đổi theo ngôn ngữ ("English" ↔ "Tiếng Việt") nên bề ngang không cố định —
     `white-space: nowrap` để bản dài hơn không gãy thành hai dòng trong nút. */
  #lang-toggle { white-space: nowrap; }
  .en-hint .wrap { font-size: 12px; line-height: 1.45; padding-top: 8px; padding-bottom: 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 48px 0 38px; }
  section { padding: 48px 0; }
  .wrap { padding: 0 18px; }
  footer nav { margin-left: 0; }
}