/* AI Translator — website marketing. Không dùng thư viện: CSS thuần, font tự host (Be Vietnam Pro, OFL).
   Màu thương hiệu lấy từ biểu tượng app (#4b9bf5 → #1a5cc0, thanh sóng #1d63c9). Sáng/tối theo hệ thống, có nút đổi. */

@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/be-vietnam-pro-400-vietnamese.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/be-vietnam-pro-400-latin.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/be-vietnam-pro-600-vietnamese.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/be-vietnam-pro-600-latin.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/be-vietnam-pro-700-vietnamese.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/be-vietnam-pro-700-latin.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; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #fbfcfe;
  --bg-alt: #f1f5fb;
  --surface: #ffffff;
  --surface-2: #f6f9fe;
  --ink: #0b1322;
  --ink-2: #33405a;
  --ink-3: #566178;
  --line: #dfe7f2;
  --line-strong: #c6d3e6;
  --brand: #1d63c9;
  --brand-hover: #174fa3;
  --brand-ink: #0f4aa3;
  --brand-soft: #e7f0ff;
  --brand-glow: rgba(46, 125, 235, 0.16);
  --accent: #0a8f83;
  --accent-soft: #dcf5f1;
  --warn: #8a5a00;
  --warn-soft: #fff4d9;
  --ok: #0c7a4b;
  --danger: #c4312b;
  --on-brand: #ffffff;
  --shadow-sm: 0 1px 2px rgba(11, 19, 34, .06), 0 1px 1px rgba(11, 19, 34, .04);
  --shadow-md: 0 8px 24px -8px rgba(11, 19, 34, .14), 0 2px 6px rgba(11, 19, 34, .05);
  --shadow-lg: 0 30px 70px -24px rgba(16, 52, 120, .35), 0 8px 24px -12px rgba(11, 19, 34, .18);

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;
  --maxw: 1180px; --prose: 740px;
  --gutter: clamp(18px, 4vw, 40px);
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
:root[data-theme="dark"] {
  --bg: #080d18; --bg-alt: #0c1322; --surface: #111a2d; --surface-2: #152036;
  --ink: #eef3fb; --ink-2: #c3cde0; --ink-3: #98a5bf; --line: #1f2c47; --line-strong: #2b3b5c;
  --brand: #4d9bff; --brand-hover: #74b0ff; --brand-ink: #8fc0ff; --brand-soft: #12274a; --brand-glow: rgba(77, 155, 255, .20);
  --accent: #2fd0c0; --accent-soft: #0e2b2b; --warn: #f2c15a; --warn-soft: #2a2110; --ok: #4fd69b; --on-brand: #04122b; --danger: #ff7b72;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080d18; --bg-alt: #0c1322; --surface: #111a2d; --surface-2: #152036;
    --ink: #eef3fb; --ink-2: #c3cde0; --ink-3: #98a5bf; --line: #1f2c47; --line-strong: #2b3b5c;
    --brand: #4d9bff; --brand-hover: #74b0ff; --brand-ink: #8fc0ff; --brand-soft: #12274a; --brand-glow: rgba(77, 155, 255, .20);
    --accent: #2fd0c0; --accent-soft: #0e2b2b; --warn: #f2c15a; --warn-soft: #2a2110; --ok: #4fd69b; --on-brand: #04122b; --danger: #ff7b72;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .6);
    --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04);
  }
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
/* Trang tiếng Nhật, Trung, Hàn (spec 2026-10-22-website-ja-zh-ko §3): Be Vietnam Pro không có chữ Hán, kana, Hangul nên chữ CJK
   dùng phông có sẵn của máy (không tải phông ngoài: CSP default-src 'self'); chữ Latin trong trang vẫn là Be Vietnam Pro. */
html:lang(ja) { --font: "Be Vietnam Pro", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif; line-break: strict; }
html:lang(zh-Hans) { --font: "Be Vietnam Pro", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif; line-break: strict; }
html:lang(ko) { --font: "Be Vietnam Pro", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; word-break: keep-all; overflow-wrap: break-word; }
html:is(:lang(ja), :lang(zh-Hans), :lang(ko)) :is(h1, h2, h3, h4) { letter-spacing: 0; }
/* Tiêu đề tiếng Nhật ngắt theo cụm từ (Chrome 119 trở lên; trình duyệt khác bỏ qua, vẫn ngắt theo line-break: strict). */
html:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 1.1rem + 3.4vw, 3.45rem); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.55rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand); color: var(--on-brand); }
strong { color: var(--ink); font-weight: 600; }
code, kbd { font-family: var(--mono); font-size: .88em; }
code { background: var(--surface-2); border: 1px solid var(--line); padding: .1em .4em; border-radius: 6px; color: var(--ink); }
pre { margin: 1.2em 0; padding: 14px 18px; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: .92rem; line-height: 1.55; }
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* Khối lệnh dạng cửa sổ terminal: luôn nền tối (cả khi trang sáng) để lệnh nổi bật; nút Sao chép nằm trên thanh tiêu đề */
.cmd { --term-bg: #0b1220; --term-bar: #131c30; --term-line: #243050; --term-ink: #e8eefb; --term-dim: #7f8db0; margin: 1.1em 0; border-radius: var(--r-md); overflow: hidden; background: var(--term-bg); border: 1px solid var(--term-line); box-shadow: var(--shadow-md); text-align: left; }
.cmd-bar { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 14px; background: var(--term-bar); border-bottom: 1px solid var(--term-line); }
.cmd-dots { display: inline-flex; gap: 6px; }
.cmd-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.cmd-dots i:nth-child(2) { background: #febc2e; }
.cmd-dots i:nth-child(3) { background: #28c840; }
.cmd-title { flex: 1 1 0; width: 0; min-width: 0; color: var(--term-dim); font-size: .8rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-copy { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 13px; border-radius: 999px; border: 1px solid #34456f; background: #1a2644; color: var(--term-ink); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s var(--ease); }
.cmd-copy:hover { background: #24345c; border-color: #4b9bf5; }
.cmd-copy:active { transform: translateY(1px); }
.cmd-copy .icon { width: 1.05em; height: 1.05em; }
.cmd-copy.is-copied { background: #12382c; border-color: #2fd0a0; color: #7df0c8; }
.cmd-copy[hidden] { display: none; }
.cmd pre { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .8em; margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: transparent; color: var(--term-ink); font-size: clamp(.9rem, .82rem + .3vw, 1.02rem); line-height: 1.6; overflow-x: auto; }
.cmd pre::before { content: attr(data-prompt); color: #4b9bf5; font-family: var(--mono); font-weight: 700; user-select: none; }
.cmd pre code { background: none; border: 0; padding: 0; color: inherit; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; user-select: all; font-size: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(var(--prose) + var(--gutter) * 2); }
.section { padding-block: clamp(56px, 8vw, 112px); }
.section-tight { padding-block: clamp(36px, 5vw, 64px); }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.15rem; color: var(--ink-3); margin-bottom: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; opacity: .7; }
.center .eyebrow { justify-content: center; }
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem); line-height: 1.6; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.75rem; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row.center { justify-content: center; }
.grid { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse > :first-child { order: 2; }
  /* wide-left: phần tử ĐẦU rộng hơn; wide-right: phần tử THỨ HAI rộng hơn (kể cả khi reverse đổi chỗ hiển thị). */
  .split.wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .split.wide-right { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .split.wide-left.reverse { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .split.wide-right.reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); border-bottom: 1px solid var(--line); }
/* Nền mờ đặt ở ::before: backdrop-filter trên chính header sẽ biến nó thành "khối chứa" của menu di động (position: fixed). */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.12rem; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand:hover { color: var(--ink); }
.nav { display: none; align-items: center; gap: 4px; }
.nav a, .nav summary { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .96rem; cursor: pointer; list-style: none; }
.nav a:hover, .nav summary:hover, .nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); }
.nav summary::-webkit-details-marker { display: none; }
.nav details { position: relative; }
.nav details[open] summary { background: var(--brand-soft); color: var(--brand-ink); }
.menu-pop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); display: grid; gap: 2px; }
.menu-pop a { display: block; border-radius: var(--r-sm); padding: 10px 12px; }
.menu-pop a span { display: block; font-size: .85rem; color: var(--ink-3); font-weight: 400; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.lang-switch { display: flex; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .88rem; font-weight: 600; cursor: pointer; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: var(--brand-soft); color: var(--brand-ink); }
.lang-menu summary .icon { width: 18px; height: 18px; }
.lang-menu summary .icon:last-child { width: 14px; height: 14px; }
.lang-short { display: none; }
@media (max-width: 639px) { .lang-cur { display: none; } .lang-short { display: inline; } }
.lang-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 180px; margin: 0; padding: 6px; list-style: none; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.lang-pop a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 500; }
.lang-pop a:hover { background: var(--brand-soft); color: var(--brand-ink); }
.lang-pop a[aria-current="true"] { color: var(--brand-ink); font-weight: 700; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--brand-soft); color: var(--brand-ink); }
.mnav summary { list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.nav-toggle { display: inline-grid; cursor: pointer; }
.mobile-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--bg); overflow-y: auto; padding: 16px var(--gutter) 40px; }
.mobile-nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.08rem; }
.mobile-nav .sub a { padding-left: 18px; font-weight: 500; color: var(--ink-2); font-size: 1rem; }
.mobile-nav .btn { margin-top: 20px; width: 100%; }
@media (min-width: 980px) { .nav { display: flex; } .mnav { display: none !important; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-footer .about p { max-width: 34em; margin-top: 14px; }
.site-footer .about p + p { margin-top: 0; }
.site-header .header-cta { display: none; }
@media (min-width: 640px) { .site-header .header-cta { display: inline-flex; } }

/* ---------- Buttons & chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform .15s var(--ease), background .15s, box-shadow .2s, border-color .15s; line-height: 1.2; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 6px 18px -6px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); box-shadow: 0 10px 26px -8px var(--brand-glow); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.btn-ghost { color: var(--brand-ink); padding-inline: 8px; }
.btn-ghost:hover { background: var(--brand-soft); }
.btn-lg { min-height: 54px; padding: 14px 28px; font-size: 1.06rem; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .94rem; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: .86rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.pill-plain { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); }
.badge-pro { background: var(--brand-soft); color: var(--brand-ink); }
.badge-soon { background: var(--warn-soft); color: var(--warn); }
kbd { display: inline-block; min-width: 1.9em; padding: .18em .5em; text-align: center; border-radius: 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm); }
.keys { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 100px); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: -1;
  background: radial-gradient(600px 360px at 18% 18%, var(--brand-glow), transparent 70%), radial-gradient(520px 320px at 86% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(700px 400px at 60% 60%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%); }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
.hero h1 { margin-bottom: .45em; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--brand) 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { max-width: 34em; margin-bottom: 1.6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.4rem; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0; list-style: none; font-size: .93rem; color: var(--ink-3); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust .icon { color: var(--ok); width: 1.1em; height: 1.1em; }
.page-hero { padding-block: clamp(40px, 6vw, 84px) clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
.page-hero h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); max-width: 18em; }
.page-hero .lead { max-width: 42em; margin-bottom: 0; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: .9rem; color: var(--ink-3); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-ink); text-decoration: underline; }

/* ---------- Demo (minh họa cuộc họp có phụ đề dịch) ---------- */
.demo { position: relative; border-radius: var(--r-xl); background: linear-gradient(160deg, #14213d 0%, #0b1426 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-lg); overflow: hidden; color: #e8eefb; }
.demo-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); font-size: .8rem; color: #9fb0cf; }
.demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6159; box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #28c940; margin-right: 38px; }
.demo-bar .rec { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.demo-bar .rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; animation: pulse 1.6s ease-in-out infinite; }
.demo-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 14px 128px; min-height: 380px; }
.tile { position: relative; border-radius: 14px; background: linear-gradient(160deg, var(--t1, #1c2b4d), var(--t2, #121c35)); overflow: hidden; min-height: 126px; }
.tile::after { content: attr(data-name); position: absolute; left: 10px; bottom: 8px; z-index: 2; font-size: .74rem; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.5); color: #dbe5fa; }
.tile .avatar { position: absolute; left: 50%; bottom: 0; width: 56%; height: 82%; transform: translateX(-50%); }
.tile .avatar::before { content: ""; position: absolute; left: 50%; top: 4%; width: 40%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2)); box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); }
.tile .avatar::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; height: 46%; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 80% 80% 0 0; background: linear-gradient(180deg, var(--c2), color-mix(in srgb, var(--c2) 55%, #000)); }
.av1 { --t1: #1d3566; --t2: #0e1b3b; --c1: #8dbcff; --c2: #3f78e6; }
.av2 { --t1: #124b4a; --t2: #0a2a2c; --c1: #7ff0dd; --c2: #14a396; }
.av3 { --t1: #4a1d43; --t2: #260f27; --c1: #fbb6dc; --c2: #d03a8a; }
.av4 { --t1: #4d3510; --t2: #2a1c08; --c1: #fde08a; --c2: #d98a14; }
.tile.speaking { box-shadow: inset 0 0 0 2px #4ade80; }
.subtitle-bar { position: absolute; left: 4%; right: 4%; bottom: 16px; padding: 14px 18px 15px; border-radius: 16px; background: rgba(8, 13, 26, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); min-height: 92px; }
.subtitle-bar .lang { position: absolute; top: -13px; left: 16px; display: inline-flex; gap: 6px; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; background: var(--brand); color: #fff; }
.subtitle-bar .pair { position: absolute; inset: 14px 18px 15px; opacity: 0; animation: line 12s infinite; }
.subtitle-bar .pair:nth-of-type(2) { animation-delay: 4s; }
.subtitle-bar .pair:nth-of-type(3) { animation-delay: 8s; }
.subtitle-bar .src { display: block; font-size: .8rem; color: #8ea2c7; margin-bottom: 4px; line-height: 1.4; }
.subtitle-bar .dst { display: block; font-size: clamp(1rem, .9rem + .5vw, 1.2rem); font-weight: 600; color: #fff; line-height: 1.35; letter-spacing: -.01em; }
.demo-note { position: absolute; right: 14px; top: 52px; font-size: .7rem; color: #7f93b8; }
@keyframes line { 0% { opacity: 0; transform: translateY(8px); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes pulse { 50% { opacity: .35; } }
.floaty { position: absolute; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-md); font-size: .85rem; font-weight: 600; }
.floaty .icon { color: var(--brand); }
.demo-wrap { position: relative; }
.demo-wrap { padding-top: 30px; }
.demo-wrap .floaty.a { left: 26px; top: 0; } .demo-wrap .floaty.b { right: 26px; bottom: -18px; }
@media (max-width: 700px) { .demo-wrap .floaty { display: none; } .demo-stage { grid-template-columns: 1fr 1fr; padding-bottom: 130px; } }

.more-link { margin-top: 18px; }

/* ---------- Cards & features ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card-link { display: block; text-decoration: none; color: inherit; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); color: inherit; }
.card-link .more { display: inline-flex; gap: 6px; align-items: center; color: var(--brand-ink); font-weight: 600; margin-top: .5rem; }
.card-link:hover .more .icon { transform: translateX(3px); }
.card-link .more .icon { transition: transform .2s var(--ease); }
.card-title { display: block; font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em; line-height: 1.25; margin-bottom: .35em; }
.feature .ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand); margin-bottom: 1rem; }
.feature .ico .icon { width: 24px; height: 24px; }
.feature p { color: var(--ink-3); }
.feature.accent .ico { background: var(--accent-soft); color: var(--accent); }
.bento { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(6, 1fr); } .bento > .span-2 { grid-column: span 2; } .bento > .span-3 { grid-column: span 3; } .bento > .span-4 { grid-column: span 4; } }
.center-text { text-align: center; margin-top: 28px; }

/* ---------- Steps ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.steps > li { counter-increment: step; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 70px 24px 24px; box-shadow: var(--shadow-sm); }
.steps > li::before { content: counter(step); position: absolute; left: 24px; top: 20px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 1.05rem; }
.steps h3 { margin-bottom: .35em; font-size: 1.15rem; }
.steps p { margin: 0; color: var(--ink-3); }
.steps.vertical { grid-template-columns: 1fr; gap: 14px; }
.steps.vertical > li { padding: 22px 22px 22px 84px; }
.steps.vertical > li::before { top: 22px; left: 22px; }

/* ---------- Lists ---------- */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a8f83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.check-list.no li::before { background-color: var(--warn-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a00' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }

/* ---------- Pricing ---------- */
/* Free và ba gói trả phí là bốn thẻ: một cột trên điện thoại, 2×2 từ 700px, không bao giờ để một thẻ lẻ ở hàng cuối (lưới 3 cột sẽ để lại một thẻ). */
.plans { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 2.6vw, 34px); box-shadow: var(--shadow-sm); }
.plan.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); background: linear-gradient(180deg, var(--brand-soft), var(--surface) 38%); }
.plan .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--brand); color: var(--on-brand); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.plan h3 { font-size: 1.3rem; margin-bottom: .2em; }
.plan .for { color: var(--ink-3); font-size: .95rem; min-height: 3em; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: .6rem 0 .3rem; }
.price b { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.price span { color: var(--ink-3); }
.plan .usd { font-size: .95rem; font-weight: 600; color: var(--ink-2); margin: 0 0 .35rem; }
.plan .per { font-size: .9rem; color: var(--ink-3); margin-bottom: 1.2rem; }
.plan .check-list { margin-bottom: 1.6rem; flex: 1; }
.plan .btn { width: 100%; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin: 1.2rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
th, td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { background: var(--surface-2); color: var(--ink); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--ink); background: transparent; }
td .yes { color: var(--ok); font-weight: 700; } td .no { color: var(--ink-3); }
.compare th:first-child, .compare td:first-child { position: sticky; left: 0; background: var(--surface); }
.compare td small { display: block; color: var(--ink-3); font-weight: 400; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; color: var(--ink); font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d63c9' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 22px 20px; color: var(--ink-2); }
.faq .answer > :last-child { margin-bottom: 0; }

/* ---------- Callouts ---------- */
.callout { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-md); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); color: var(--ink-2); margin: 1.4rem 0; }
.callout > .icon { color: var(--brand); margin-top: .2em; width: 1.4em; height: 1.4em; }
.callout > div > :last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }
.callout.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.callout.warn > .icon { color: var(--warn); }
.callout.ok { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.callout.ok > .icon { color: var(--accent); }

/* ---------- Dải tối: nhấn mạnh dữ liệu ở lại trên máy ---------- */
.band-dark { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, #0c1a38 0%, #0a1226 60%, #08101f 100%); color: #c9d6ee; border-block: 1px solid rgba(255,255,255,.06); }
.band-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 280px at 88% 0%, rgba(77,155,255,.24), transparent 70%), radial-gradient(480px 260px at 4% 100%, rgba(47,208,192,.15), transparent 70%); }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .eyebrow { color: #8fc0ff; }
.band-dark .section-head p { color: #adbcd9; }
.band-dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
.band-dark .feature p { color: #adbcd9; }
.band-dark .feature .ico { background: rgba(77,155,255,.16); color: #8fc0ff; }
.band-dark .feature.accent .ico { background: rgba(47,208,192,.18); color: #7ff0dd; }
.band-dark a:not(.btn) { color: #8fc0ff; }
.band-dark .btn-secondary { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }
.band-dark .btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.dataflow { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 920px) { .dataflow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.lane { border-radius: var(--r-lg); padding: 22px 24px 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.lane .tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; }
.lane-cloud .tag { background: rgba(245,158,11,.16); color: #fbbf6b; }
.lane-local { border-color: rgba(47,208,192,.55); background: linear-gradient(160deg, rgba(47,208,192,.16), rgba(77,155,255,.08)); box-shadow: 0 0 0 1px rgba(47,208,192,.14), 0 24px 56px -24px rgba(47,208,192,.4); }
.lane-local .tag { background: rgba(47,208,192,.22); color: #7ff0dd; }
.nodes { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; }
.nodes li { padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: .9rem; line-height: 1.3; color: #e6eefc; font-weight: 600; }
.nodes li small { display: block; font-weight: 400; color: #9db0d3; font-size: .78rem; }
.nodes li.net { background: none; border: 1px dashed rgba(251,191,107,.55); color: #fbbf6b; }
.nodes li.ai { background: rgba(47,208,192,.2); border-color: rgba(47,208,192,.6); }
.nodes li.sep { background: none; border: 0; padding: 0 1px; color: #7d90b5; font-weight: 700; }
@media (max-width: 919px) { .nodes { flex-direction: column; align-items: flex-start; gap: 4px; } .nodes li.sep { transform: rotate(90deg); width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0; margin-left: 18px; } }
@media (min-width: 920px) { .nodes { flex-wrap: nowrap; gap: 4px; } .nodes li { font-size: .84rem; } .nodes li small { font-size: .72rem; } }
.lane > p { margin: 0; font-size: .94rem; color: #b8c6e0; }
.lane-local > p { color: #d3f6f0; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(32px, 5vw, 64px); background: linear-gradient(135deg, #123b86 0%, #1d63c9 55%, #2a86e8 100%); color: #eaf2ff; text-align: center; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 260px at 85% 0%, rgba(255,255,255,.2), transparent 70%), radial-gradient(420px 240px at 10% 100%, rgba(10,200,190,.25), transparent 70%); }
.cta-band h2 { color: #fff; max-width: 18em; margin-inline: auto; }
.cta-band p { color: #d3e3ff; max-width: 36em; margin-inline: auto; font-size: 1.12rem; }
.cta-band .row { justify-content: center; margin-top: 1.4rem; }
.cta-band .btn-primary { background: #fff; color: #0f3d8f; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.cta-band .btn-primary:hover { background: #eaf2ff; color: #0b2f72; }
.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

/* ---------- Prose (bài hướng dẫn, pháp lý) ---------- */
.prose { font-size: 1.08rem; }
.prose > * + * { margin-top: 1.1em; }
.prose > h2:first-child { margin-top: 0; }
.prose h2 { margin-top: 2.4em; padding-top: .2em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.prose h3 { margin-top: 1.9em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--brand); }
.prose img { border-radius: var(--r-md); border: 1px solid var(--line); }
.prose blockquote { margin: 1.4em 0; padding: .2em 1.2em; border-left: 3px solid var(--brand); color: var(--ink-2); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose .table-wrap { margin: 1.4em 0; }
.legal h2 { font-size: 1.4rem; }
.doc-layout { display: grid; gap: 40px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.doc-layout > * { min-width: 0; }
@media (min-width: 1060px) { .doc-layout { grid-template-columns: 250px minmax(0, 1fr); } .doc-layout.no-toc { grid-template-columns: minmax(0, 1fr); } }
.toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: .93rem; border-left: 2px solid var(--line); padding-left: 16px; max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; }
.toc b { display: block; color: var(--ink); margin-bottom: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.toc a { display: block; padding: 5px 0; color: var(--ink-3); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--brand-ink); }
.toc .l3 { padding-left: 12px; font-size: .88rem; }
@media (max-width: 1059px) { .toc { position: static; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; background: var(--surface); max-height: none; } }
.doc-nav { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 3rem; }
.doc-nav a { display: block; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 600; }
.doc-nav a span { display: block; font-size: .8rem; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.doc-nav a:hover { border-color: var(--brand); }
.meta-line { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-3); font-size: .9rem; margin-top: 1.2rem; }

/* ---------- Device frame (ảnh chụp giao diện app) ---------- */
.shot { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); background: var(--surface); }
.shot img { width: 100%; }
.shot figcaption { padding: 12px 18px; font-size: .88rem; color: var(--ink-3); border-top: 1px solid var(--line); background: var(--surface); }
.shot.plain { box-shadow: var(--shadow-md); }
.shot.window .bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); }
.shot.window .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6159; box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #28c940; margin-right: 38px; }
.shot.window .bar span { margin-inline: auto; padding-right: 66px; font-weight: 600; letter-spacing: .01em; }
.shot.stage { background: transparent; border: 0; box-shadow: none; }
.shot.stage .backdrop { border-radius: var(--r-lg); padding: clamp(24px, 5vw, 52px) clamp(12px, 2.4vw, 28px); background: radial-gradient(600px 240px at 20% 0%, rgba(77,155,255,.28), transparent 70%), linear-gradient(160deg, #16264a, #0a1428); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md); }
.shot.stage .backdrop img { width: 100%; margin-inline: auto; }
.shot.stage figcaption { background: transparent; border: 0; padding-inline: 4px; }
/* Video demo của trang chủ: khung 16:10 nền tối (giữ chỗ trước khi tải ảnh bìa, không giật trang). */
.shot.video { max-width: 1100px; margin-inline: auto; background: #0b0d14; }
.shot.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #0b0d14; }
/* Nút phát lớn giữa khung (spec 2026-10-22-website-ja-zh-ko §4): phủ cả khung (bấm đâu cũng phát), site.js mới bật. Máy tính
   (`.can-invite`): nhãn ẩn, khi cuộn tới (`.is-inviting`) thì nhãn trượt lên và nút đập nhịp, vòng sáng lan ra ba lần. Màn hình
   khác và người bật giảm chuyển động: nút và nhãn hiện sẵn, đứng yên. */
.video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; padding: 0; border: 0; background: linear-gradient(to bottom, transparent 45%, rgba(5, 8, 16, .38)); color: #fff; font: inherit; cursor: pointer; }
.video-play[hidden] { display: none; }
.video-play-btn { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .6), 0 0 0 8px rgba(255, 255, 255, .16); transition: transform .2s var(--ease), background .2s; }
.video-play-btn .icon { width: 40px; height: 40px; margin-left: 6px; fill: currentColor; stroke: none; }
.video-play-btn::before, .video-play-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.video-play:hover .video-play-btn { transform: scale(1.08); background: var(--brand-hover); }
.video-play:focus-visible { outline: none; }
.video-play:focus-visible .video-play-btn { outline: 3px solid #fff; outline-offset: 5px; }
.video-play-label { padding: 8px 16px; border-radius: 999px; background: rgba(8, 13, 24, .74); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.can-invite .video-play-label { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.can-invite.is-inviting .video-play-label { opacity: 1; transform: none; }
.is-inviting .video-play-btn { animation: video-beat 1.6s var(--ease) 3; }
.is-inviting .video-play-btn::before { animation: video-ring 1.6s var(--ease) 3; }
.is-inviting .video-play-btn::after { animation: video-ring 1.6s var(--ease) .5s 3; }
@keyframes video-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(1); } }
@keyframes video-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
@media (max-width: 640px) {
  .video-play { gap: 12px; }
  .video-play-btn { width: 72px; height: 72px; }
  .video-play-btn .icon { width: 30px; height: 30px; margin-left: 4px; }
  .video-play-label { font-size: .85rem; padding: 6px 12px; }
}
/* Cột video trong tab hẹp lại ở 900–1099 px (khoảng 475–560 px): nút phát và nhãn nhỏ lại cho vừa khung. */
@media (min-width: 900px) and (max-width: 1099px) {
  .video-play { gap: 12px; }
  .video-play-btn { width: 72px; height: 72px; }
  .video-play-btn .icon { width: 30px; height: 30px; margin-left: 4px; }
  .video-play-label { font-size: .85rem; padding: 6px 12px; }
}
.facts { display: grid; gap: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.split + .facts, .table-wrap + .facts, .grid + .facts { margin-top: clamp(28px, 4vw, 48px); }
/* Hai khối hai cột liền nhau trong cùng một mục (Trang chủ: Một màn hình, rồi Gõ dịch). */
.split + .split { margin-top: clamp(48px, 7vw, 96px); }
.facts > div { padding: 16px 20px; box-shadow: inset 0 0 0 .5px var(--line); }
.facts dt { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 4px; }
.facts dd { margin: 0; color: var(--ink); font-weight: 500; line-height: 1.5; }
.facts dd small { display: block; color: var(--ink-3); font-weight: 400; }

/* ---------- Disclaimer ---------- */
.disclaimer { font-size: .82rem; color: var(--ink-3); text-align: center; margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(56px, 8vw, 110px); background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 72px) 28px; font-size: .96rem; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer-grid .about { grid-column: span 2; min-width: min(100%, 280px); }
@media (max-width: 560px) { .footer-grid .about { grid-column: 1 / -1; } }
.footer-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin: 0 0 .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--brand-ink); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .86rem; }

/* ---------- Thanh đồng ý cookie (Google Analytics, chỉ khi có JS) ---------- */
.footer-link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.footer-link-btn:hover { color: var(--brand-ink); }
.consent-bar { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; width: min(640px, calc(100vw - 104px)); padding: 14px 18px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: .92rem; line-height: 1.5; }
.consent-bar p { flex: 1 1 260px; margin: 0; }
.consent-bar a { color: var(--brand-ink); text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consent-actions .btn { min-height: 40px; padding: 0 18px; }
/* Chừa chỗ bên phải cho bong bóng chat (56 px + lề 16 px) để thanh không che nó. */
@media (max-width: 480px) { .consent-bar { left: 8px; bottom: 8px; width: calc(100vw - 88px); padding: 12px 14px; } .consent-actions { width: 100%; } .consent-actions .btn { flex: 1; } }

/* ---------- Scroll reveal (chỉ khi có JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
/* Khối trên màn hình đầu hiện ngay, không chờ JS (tốt cho LCP). */
.js .hero .reveal, .js .page-hero .reveal { opacity: 1; transform: none; transition: none; }

/* ---------- Trang Tải xuống: tab hệ điều hành ---------- */
.os-detect { display: inline-flex; align-items: center; gap: 8px; margin: 1.1rem 0 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size: .92rem; font-weight: 600; }
.os-detect::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.os-detect[hidden] { display: none; }
.container.dl { max-width: calc(1000px + var(--gutter) * 2); }
.nowrap { white-space: nowrap; }
.ostabs, #cai-dat, #install { scroll-margin-top: calc(var(--header-h) + 16px); }
.ostabs { margin-block: 0; }
.ostabs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: calc(var(--r-lg) + 6px); }
.ostabs-list[hidden] { display: none; }
/* Có JS nhưng script chưa chạy: giữ chỗ cho thanh tab (không hiện) để lúc hiện không đẩy nội dung xuống (CLS). */
.js .ostabs:not(.is-enhanced) .ostabs-list[hidden] { display: grid; visibility: hidden; }
.js .ostabs.is-flat .ostabs-list[hidden], .ostabs.is-flat .ostabs-list { display: none; }
.ostab { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid transparent; border-radius: var(--r-lg); background: transparent; color: var(--ink-3); font: inherit; text-align: left; cursor: pointer; transition: background .2s var(--ease), color .2s, box-shadow .2s, border-color .2s; }
.ostab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.ostab[aria-selected="true"] { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.ostab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ostab-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); transition: background .2s, color .2s, border-color .2s; }
.ostab[aria-selected="true"] .ostab-ico { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ostab-ico .icon { width: 24px; height: 24px; }
.ostab-txt { display: grid; gap: 1px; min-width: 0; }
.ostab-txt strong { font-size: 1.15rem; letter-spacing: -.015em; color: inherit; }
.ostab-txt small { font-size: .84rem; color: var(--ink-3); font-weight: 500; }
.ostab-badge { position: absolute; top: -9px; right: 14px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.ostab-badge[hidden] { display: none; }
.ostabs-note { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin-top: 14px; padding: 14px 18px; border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.ostabs-note[hidden] { display: none; }
.ostabs-note .note-ico { color: var(--warn); display: flex; }
.ostabs-note p { margin: 0; flex: 1 1 260px; color: var(--ink); }
.ostabs-panel { margin-top: 18px; padding: clamp(20px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.ostabs-panel:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ostabs-panel[hidden] { display: none; }
.ostabs-panel + .ostabs-panel { margin-top: 28px; }
.ostabs.is-enhanced .ostabs-panel { animation: panel-in .28s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel-title { display: flex; align-items: center; gap: 12px; margin: 0 0 1rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.panel-title .icon { width: 1.2em; height: 1.2em; color: var(--brand); }
.ostabs.is-enhanced .panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: .88rem; font-weight: 500; }
.chips .icon { width: 1.05em; height: 1.05em; color: var(--brand); }
.flow { list-style: none; counter-reset: flow; margin: 0; padding: 0; }
.flow > li { counter-increment: flow; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 clamp(12px, 2vw, 20px); padding-bottom: 26px; }
.flow > li:last-child { padding-bottom: 0; }
.flow > li::before { content: counter(flow); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 1.1rem; box-shadow: 0 6px 16px -6px var(--brand-glow); }
.flow > li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(var(--line-strong), var(--line)); }
.flow-body { min-width: 0; padding-top: 7px; }
.flow-body h3 { margin: 0 0 .3em; font-size: 1.12rem; }
.flow-body p { margin: 0 0 .5em; color: var(--ink-3); }
.flow-body .cmd { margin-top: .7em; }
.flow-body .cmd + p { margin-top: .8em; }
.panel-more { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.panel-more > h3 { margin: 0 0 .9rem; font-size: 1.02rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.panel-more .faq details { background: var(--surface-2); }
.panel-more .faq summary { padding: 15px 18px; font-size: 1rem; }
.panel-more .faq .answer { padding: 0 18px 16px; }
.panel-more .faq .answer .cmd { margin: .8em 0; }
.panel-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: 1.6rem; color: var(--ink-3); font-size: .92rem; }
.panel-foot p { margin: 0; }
@media (max-width: 560px) {
  .ostab { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; }
  .ostab-ico { width: 40px; height: 40px; }
  .ostab-txt strong { font-size: 1.05rem; }
  .ostab-txt small { font-size: .78rem; }
  .flow > li { grid-template-columns: 36px minmax(0, 1fr); }
  .flow > li::before { width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; }
  .flow > li:not(:last-child)::after { left: 17px; top: 40px; }
  .cmd pre { padding: 14px 14px; font-size: .8rem; }
  .cmd pre code { overflow-wrap: anywhere; }
  .cmd-copy span { display: none; }
  .cmd-copy { padding: 5px 10px; }
  .cmd-copy.is-copied span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .subtitle-bar .pair:first-of-type { opacity: 1; }
}
@media print { .site-header, .site-footer, .cta-band, .nav-toggle, .skip { display: none !important; } body { background: #fff; color: #000; } a { color: #000; } }

/* ---------- Trang chủ: khối tab "Tính năng chính" (spec 2026-10-27-trang-chu-ba-viec-tab) ----------
   Không JS: thanh tab ẩn, ba panel xếp dọc. Có JS (site.js, initFeatureTabs): thanh tab hiện, panel không chọn có `hidden`. */
.ftabs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 860px; margin: 0 auto 10px; padding: 0; background: transparent; border: 0; }
.ftabs-list[hidden] { display: none; }
/* Có JS nhưng script chưa chạy: giữ chỗ cho thanh tab (không hiện) và chỉ hiện panel đầu, để lúc nâng cấp không đẩy trang (CLS). */
.js .ftabs:not(.is-enhanced) .ftabs-list[hidden] { display: grid; visibility: hidden; }
.js .ftabs:not(.is-enhanced) .ftabs-panel + .ftabs-panel { display: none; }
/* Mỗi tab một màu theo thứ tự (xanh dương, xanh ngọc, hổ phách): --tab là màu nhấn (viền, icon, tiêu điểm), --tab-from/--tab-to là
   hai đầu gradient của tab đang chọn, --tab-on là chữ trên nền đó (đạt 4.5:1 với cả hai đầu; test/feature-tabs.test.mjs kiểm),
   --tab-glow là quầng sáng. Nền tab chưa chọn pha --tab vào --tab-base (mặc định --surface); ở chế độ tối tab hổ phách có nền gốc
   nâu ấm riêng, vì vàng pha vào nền navy triệt tiêu sắc thành xám. Bộ màu khai báo một lần thành token --tab-<n>-* trên .ftabs (sáng và
   hai khối tối), rồi .ftab:nth-child(n) và chỉ báo tab đang mở (thanh trên nội dung, cần màu ở mức .ftabs) cùng đọc từ đó.
   Thêm tab thứ tư phải thêm token --tab-4-* ở cả ba chỗ, một dòng :nth-child(4) và một dòng :has(… :nth-child(4) …) bên dưới. */
.ftabs {
  --tab-1: #1d63c9; --tab-1-from: #2b6fdb; --tab-1-to: #174fa3; --tab-1-on: #ffffff; --tab-1-glow: rgba(29, 99, 201, .45);
  --tab-2: #0a8579; --tab-2-from: #0a8276; --tab-2-to: #08665e; --tab-2-on: #ffffff; --tab-2-glow: rgba(10, 133, 121, .45);
  --tab-3: #ad6700; --tab-3-from: #f7b84b; --tab-3-to: #e8921a; --tab-3-on: #2b1a00; --tab-3-glow: rgba(232, 146, 26, .5);
}
:root[data-theme="dark"] .ftabs {
  --tab-tint: 14%;
  --tab-1: #4d9bff; --tab-1-from: #5aa8ff; --tab-1-to: #3b84f0; --tab-1-on: #04122b; --tab-1-glow: rgba(77, 155, 255, .45);
  --tab-2: #2fd0c0; --tab-2-from: #3ddccb; --tab-2-to: #1fb5a6; --tab-2-on: #03201d; --tab-2-glow: rgba(47, 208, 192, .4);
  --tab-3: #f2c15a; --tab-3-from: #f7cd6c; --tab-3-to: #ecae35; --tab-3-on: #2a1a00; --tab-3-glow: rgba(242, 193, 90, .4); --tab-3-base: #1f180b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ftabs {
    --tab-tint: 14%;
    --tab-1: #4d9bff; --tab-1-from: #5aa8ff; --tab-1-to: #3b84f0; --tab-1-on: #04122b; --tab-1-glow: rgba(77, 155, 255, .45);
    --tab-2: #2fd0c0; --tab-2-from: #3ddccb; --tab-2-to: #1fb5a6; --tab-2-on: #03201d; --tab-2-glow: rgba(47, 208, 192, .4);
    --tab-3: #f2c15a; --tab-3-from: #f7cd6c; --tab-3-to: #ecae35; --tab-3-on: #2a1a00; --tab-3-glow: rgba(242, 193, 90, .4); --tab-3-base: #1f180b;
  }
}
.ftab:nth-child(1) { --tab: var(--tab-1); --tab-from: var(--tab-1-from); --tab-to: var(--tab-1-to); --tab-on: var(--tab-1-on); --tab-glow: var(--tab-1-glow); }
.ftab:nth-child(2) { --tab: var(--tab-2); --tab-from: var(--tab-2-from); --tab-to: var(--tab-2-to); --tab-on: var(--tab-2-on); --tab-glow: var(--tab-2-glow); }
.ftab:nth-child(3) { --tab: var(--tab-3); --tab-from: var(--tab-3-from); --tab-to: var(--tab-3-to); --tab-on: var(--tab-3-on); --tab-glow: var(--tab-3-glow); --tab-base: var(--tab-3-base); }
.ftab { display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; min-width: 0; min-height: 64px; padding: 12px 18px; border: 1.5px solid color-mix(in srgb, var(--tab) 30%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--tab) var(--tab-tint, 10%), var(--tab-base, var(--surface))); color: var(--ink); font: inherit; font-weight: 700; font-size: 1.08rem; line-height: 1.25; text-align: center; text-wrap: balance; cursor: pointer; transition: background .2s var(--ease), color .2s, box-shadow .25s var(--ease), transform .2s var(--ease), border-color .2s; }
.ftab .icon { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: color-mix(in srgb, var(--tab) 16%, transparent); color: var(--tab); transition: background .2s, color .2s; }
.ftab:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--tab) calc(var(--tab-tint, 10%) + 8%), var(--tab-base, var(--surface))); border-color: color-mix(in srgb, var(--tab) 55%, transparent); transform: translateY(-1px); }
.ftab[aria-selected="true"] { background: linear-gradient(135deg, var(--tab-from), var(--tab-to)); background-origin: border-box; color: var(--tab-on); border-color: transparent; box-shadow: 0 14px 30px -10px var(--tab-glow), 0 2px 6px rgba(11, 19, 34, .12); transform: translateY(-2px); }
.ftab[aria-selected="true"] .icon { background: rgba(255, 255, 255, .22); color: var(--tab-on); }
.ftab:focus-visible { outline: 3px solid var(--tab); outline-offset: 3px; }
/* Chỉ báo tab đang mở: mũi nhọn dưới tab chọn chỉ xuống thanh màu trên đỉnh panel, cả hai cùng màu tab đó. Mũi nhọn là hình vuông
   --arrow xoay 45° chỉ giữ nửa dưới (clip-path), tâm nằm 1 px trong mép dưới tab cho liền mạch, đi theo tab khi tab nhô lên; màu là
   màu của gradient 135deg ở giữa mép dưới tab (--arrow-mix là phần --tab-from: ô tab rộng và thấp thì điểm đó gần giữa gradient, ô tab
   hẹp và cao ở điện thoại thì lệch về --tab-to). Thanh là ::before của panel, màu lấy từ --tone-from/--tone-to mà .ftabs:has(tab thứ n đang chọn) gán bằng
   token --tab-n-*: chỉ CSS, nên đổi tab hay đổi giao diện sáng/tối lúc đang chạy thì màu cập nhật ngay. Khoảng từ đáy thanh tab tới nội
   dung = margin dưới .ftabs-list + thanh + margin dưới thanh (≈ clamp(28px, 4vw, 44px) cũ). Thanh giữ chỗ ngay khi có JS (.js) để lúc
   nâng cấp không đẩy trang, chỉ tô màu khi .is-enhanced; không JS thì không có. */
.ftab { --arrow: 13px; --arrow-mix: 41%; }
.ftab[aria-selected="true"]::after { content: ""; position: absolute; z-index: 1; left: calc(50% - var(--arrow) / 2); top: calc(100% + .5px - var(--arrow) / 2); width: var(--arrow); height: var(--arrow); border-bottom-right-radius: 3px; background: color-mix(in srgb, var(--tab-from) var(--arrow-mix), var(--tab-to)); clip-path: polygon(100% 0, 100% 100%, 0 100%); transform: rotate(45deg); pointer-events: none; }
.ftabs { --tone-from: var(--tab-1-from); --tone-to: var(--tab-1-to); }
.ftabs:has(> .ftabs-list > .ftab:nth-child(2)[aria-selected="true"]) { --tone-from: var(--tab-2-from); --tone-to: var(--tab-2-to); }
.ftabs:has(> .ftabs-list > .ftab:nth-child(3)[aria-selected="true"]) { --tone-from: var(--tab-3-from); --tone-to: var(--tab-3-to); }
.js .ftabs .ftabs-panel::before { content: ""; display: block; height: 4px; margin-bottom: clamp(20px, 2.2vw, 28px); border-radius: 999px; }
.ftabs.is-enhanced .ftabs-panel::before { background: linear-gradient(90deg, var(--tone-from), var(--tone-to)); }
.ftabs-panel[hidden] { display: none; }
.ftabs-panel + .ftabs-panel { margin-top: clamp(40px, 6vw, 72px); }
/* Neo #id trỏ vào panel còn thanh tab nằm trên nó: site.js đặt --ftabs-lift = khoảng từ đỉnh thanh tab tới đỉnh panel, để chỗ trình duyệt tự cuộn tới
   (html có scroll-padding-top chừa header) dừng với thanh tab dưới header chứ không phải panel. Hiệu ứng chỉ chạy khi người dùng đổi tab. */
.ftabs.is-enhanced .ftabs-panel { margin-top: 0; scroll-margin-top: var(--ftabs-lift, 0px); }
.ftabs.is-switched .ftabs-panel { animation: panel-in .28s var(--ease); }
/* Ảnh và video trong panel mang lớp .reveal: panel ẩn không bao giờ vào IntersectionObserver, nên ép chúng luôn hiện. */
.js .ftabs-panel .reveal { opacity: 1; transform: none; transition: none; }
.ftabs-panel .split { gap: clamp(24px, 4vw, 56px); }
.ftabs-panel h3 { margin: 0; font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem); }
/* Máy tính bảng (≤ 900 px): ô tab hẹp, thu padding, icon và chữ để nhãn dài ("Type & Translate") nằm một dòng. Khối ≤ 700 px ngay
   dưới ghi đè mọi thuộc tính ở đây; đừng viết thành (min-width: 701px) vì để hở dải 700–701 px khi trình duyệt phóng to. */
@media (max-width: 900px) {
  .ftab { gap: 10px; padding: 10px 12px; font-size: 1rem; }
  .ftab .icon { width: 34px; height: 34px; padding: 8px; }
}
@media (max-width: 700px) {
  .ftabs-list { margin-bottom: 8px; }
  .js .ftabs .ftabs-panel::before { height: 3px; }
  .ftab { --arrow: 9.5px; --arrow-mix: 29%; flex-direction: column; gap: 6px; min-height: 0; padding: 10px 6px; font-size: .92rem; }
  .ftab .icon { width: 32px; height: 32px; padding: 7px; }
}
/* Chế độ tương phản cao (Windows High Contrast, forced-colors): trình duyệt bỏ gradient và bóng, mọi tab thành ButtonText trên Canvas,
   icon tab chọn (--tab-on, trắng ở chế độ sáng) thành trắng trên nền trắng. Tab đang chọn tô Highlight/HighlightText để vẫn thấy rõ;
   mũi nhọn và thanh trên panel (gradient bị bỏ) cũng tô Highlight. */
@media (forced-colors: active) {
  .ftab .icon { background: none; color: ButtonText; }
  .ftab[aria-selected="true"] { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; box-shadow: none; }
  .ftab[aria-selected="true"] .icon { background: none; color: HighlightText; }
  .ftab[aria-selected="true"]::after, .ftabs.is-enhanced .ftabs-panel::before { background: Highlight; forced-color-adjust: none; }
}

/* Mục "Máy chủ lưu những gì?" gập sẵn trong khối tối của phần Dữ liệu (trang chủ). */
.more-details { max-width: 820px; margin: clamp(24px, 3vw, 36px) auto 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-md); background: rgba(255, 255, 255, .04); }
.more-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; cursor: pointer; list-style: none; font-weight: 600; color: #fff; }
.more-details summary::-webkit-details-marker { display: none; }
.more-details summary::after { content: ""; flex: none; width: .55em; height: .55em; margin-top: -.2em; border-right: 2px solid #8fc0ff; border-bottom: 2px solid #8fc0ff; transform: rotate(45deg); transition: transform .2s var(--ease); }
.more-details[open] summary::after { margin-top: .2em; transform: rotate(-135deg); }
.more-details summary:focus-visible { outline: 3px solid #8fc0ff; outline-offset: 2px; border-radius: var(--r-md); }
.more-details p { margin: 0; padding: 0 20px 18px; color: #adbcd9; }

/* Mục tiêu chạm đủ lớn trên điện thoại (WCAG 2.2 AA, khuyến nghị 44px) */
.footer-grid a { display: inline-block; padding-block: .5rem; }

/* ---------- Chat hỗ trợ: bong bóng (spec chat hỗ trợ 2026-10-22, mục 3) ----------
   site.js chèn `.chat-root` vào cuối <body> (tắt JS thì không có). Khung chat ở chat.css, chỉ tải khi bấm bong bóng. */
.chat-root { position: fixed; right: 16px; bottom: 16px; z-index: 70; }
/* Bong bóng thoại 3D (spec 2026-10-23-bong-bong-chat-3d, icon đổi 2026-10-31): gradient xanh sang ngọc, điểm sáng kính
   (::before), đuôi ở góc dưới phải (::after), icon bong bóng thoại trắng nét (#i-chat). Viền ngọc nhấp nháy rõ 15 giây đầu
   (9 chu kỳ 1,6 giây) rồi dịu lại (chu kỳ 4 giây) mãi; có trả lời mới (chấm đỏ hiện) thì rõ lại; khung chat mở thì dừng; giảm
   chuyển động thì đứng yên với viền tĩnh. */
.chat-bubble {
  --chat-depth: 0 12px 24px -8px color-mix(in srgb, var(--brand) 60%, transparent), inset 0 -5px 10px rgba(0, 30, 60, .35), inset 0 2px 2px rgba(255, 255, 255, .5);
  --chat-glow: color-mix(in srgb, var(--accent) 50%, transparent);
  --chat-glow-soft: color-mix(in srgb, var(--accent) 28%, transparent);
  position: relative; display: grid; place-items: center; width: 54px; height: 48px; padding: 0; border: 0; border-radius: 18px 18px 8px 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 70%, #fff) 0%, var(--brand) 45%, var(--accent) 100%);
  color: #fff; box-shadow: var(--chat-depth); cursor: pointer; transition: transform .15s var(--ease), filter .15s;
  animation: chat-glow 1.6s ease-in-out 9, chat-glow-soft 4s ease-in-out 14.4s infinite;
}
.chat-bubble::before { content: ""; position: absolute; left: 8px; top: 4px; width: 28px; height: 11px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); pointer-events: none; }
.chat-bubble::after { content: ""; position: absolute; right: 5px; bottom: -6px; width: 13px; height: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 75%, var(--brand)), var(--accent)); clip-path: polygon(0 0, 100% 100%, 45% 0); pointer-events: none; }
.chat-bubble:hover { transform: translateY(-1px); filter: brightness(1.06); }
.chat-bubble[aria-expanded="true"] { animation: none; }
.chat-bubble:has(.chat-dot:not([hidden])):not([aria-expanded="true"]) { animation: chat-glow 1.6s ease-in-out infinite; }
.chat-bubble-icon { position: relative; width: 26px; height: 26px; stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.chat-dot { position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg), 0 2px 4px rgba(0, 0, 0, .3); }
@keyframes chat-glow { 0%, 100% { box-shadow: var(--chat-depth), 0 0 0 0 transparent; } 50% { box-shadow: var(--chat-depth), 0 0 0 6px var(--chat-glow); } }
@keyframes chat-glow-soft { 0%, 100% { box-shadow: var(--chat-depth), 0 0 0 0 transparent; } 50% { box-shadow: var(--chat-depth), 0 0 0 4px var(--chat-glow-soft); } }
@media (prefers-reduced-motion: reduce) {
  .chat-bubble, .chat-bubble:has(.chat-dot:not([hidden])):not([aria-expanded="true"]) { animation: none; box-shadow: var(--chat-depth), 0 0 0 3px var(--chat-glow); }
  .chat-bubble[aria-expanded="true"] { box-shadow: var(--chat-depth); }
}
body:has(.mnav[open]) .chat-root { display: none; }
/* Bong bóng cố định ở góc dưới phải: chân trang chừa chỗ để cuộn dòng cuối ra khỏi bong bóng. */
.site-footer { padding-bottom: 88px; }
@media print { .chat-root { display: none; } }