/* Cryo — trang chủ. Màu là bảng màu Material 3 tối sinh từ cùng màu gốc với app (SchemeTonalSpot),
   chuyển động dùng đúng hằng số lò xo trong ui/theme/Motion.kt của app. */

/* Năm ký hiệu trong chữ của mô phỏng (→ ✓ ❄ ⚡ ⏳, chép nguyên văn từ app) vẽ bằng phông ký hiệu của máy. Google Sans Flex
   chỉ có chúng trong phần "math" (225 KB) và "symbols" (158 KB): phần math tải GIỮA LÚC CUỘN khi nhật ký lệnh hiện "→",
   tải xong là trình duyệt đo lại toàn bộ chữ của trang (đo #305: khựng 270–550 ms ở chương Báo cáo). Máy không có phông nào
   dưới đây thì tự rơi về Google Sans Flex như cũ. */
@font-face {
  font-family: 'Cryo Sym';
  src: local('Segoe UI Symbol'), local('SegoeUISymbol'), local('Apple Symbols'), local('Noto Sans Symbols 2'),
    local('NotoSansSymbols2-Regular'), local('Noto Sans Symbols'), local('NotoSansSymbols-Regular-Subsetted'),
    local('NotoSansSymbols-Regular-Subsetted2'), local('Noto Sans Math'), local('DejaVu Sans');
  unicode-range: U+2192, U+23F3, U+26A1, U+2713, U+2744;
}

:root {
  --primary: #b7c4ff; --on-primary: #1e2d61; --inv-primary: #4d5c92; --primary-c: #354479; --on-primary-c: #dce1ff;
  --secondary: #c2c5dd; --secondary-c: #424659; --on-secondary-c: #dee1f9;
  --tertiary: #e3bada; --tertiary-c: #5b3d57;
  --surface: #121318; --surface-lowest: #0d0e13; --surface-low: #1a1b21; --surface-c: #1e1f25;
  --surface-high: #292a2f; --surface-highest: #34343a; --surface-bright: #38393f;
  --on-surface: #e3e1e9; --on-surface-v: #c6c5d0; --outline: #90909a; --outline-v: #45464f; --inverse-surface: #e3e1e9; --inverse-on-surface: #2f3036;

  /* Lò xo của app chuyển sang CSS linear(): spatial 0.6/420, quick 0.45/1400, effects 1.0/1600, sheet 0.72/300. */
  --ease-spatial: linear(0, 0.041, 0.14, 0.273, 0.42, 0.566, 0.7, 0.815, 0.91, 0.98, 1.033, 1.068, 1.087, 1.094, 1.091, 1.083, 1.071, 1.058, 1.044, 1.031, 1.02, 1.011, 1.003, 0.998, 0.994, 0.992, 0.991, 0.991, 0.992, 0.993, 0.994, 0.996, 0.997, 0.998, 0.999, 1, 1);
  --ease-quick: linear(0, 0.049, 0.169, 0.321, 0.502, 0.681, 0.834, 0.971, 1.076, 1.145, 1.188, 1.203, 1.198, 1.177, 1.145, 1.111, 1.074, 1.04, 1.013, 0.989, 0.973, 0.963, 0.959, 0.959, 0.963, 0.969, 0.976, 0.983, 0.99, 0.996, 1.001, 1.005, 1.007, 1.008, 1.008, 1.008, 1);
  --ease-effects: linear(0, 0.031, 0.095, 0.175, 0.263, 0.358, 0.441, 0.518, 0.588, 0.649, 0.707, 0.754, 0.793, 0.827, 0.858, 0.882, 0.902, 0.919, 0.933, 0.946, 0.955, 0.963, 0.97, 0.976, 0.98, 0.984, 0.987, 0.989, 0.991, 0.993, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 1);
  --ease-sheet: linear(0, 0.041, 0.135, 0.261, 0.394, 0.527, 0.644, 0.749, 0.832, 0.899, 0.951, 0.987, 1.012, 1.027, 1.035, 1.038, 1.037, 1.033, 1.029, 1.024, 1.019, 1.014, 1.01, 1.007, 1.004, 1.002, 1.001, 1, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 1);
  --t-spatial: 520ms; --t-quick: 300ms; --t-effects: 220ms; --t-sheet: 620ms;

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --font: 'Cryo Sym', 'Google Sans Flex', 'Google Sans', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Màu cố định của app (không đổi theo hình nền): mức đóng băng L1–L4. */
  --l1-bg: #1f4a3c; --l1-fg: #4fd09f; --l2-bg: #3b3f52; --l2-fg: #c2c5dd;
  --l3-bg: #134553; --l3-fg: #3cc6e0; --l4-bg: #5a1f2b; --l4-fg: #ff6b86;
}
:root[data-scheme="moss"] {
  --primary: #8cd5b4; --on-primary: #003827; --inv-primary: #1d6b4f; --primary-c: #005139; --on-primary-c: #a7f2cf;
  --secondary: #b3ccbe; --secondary-c: #354b41; --on-secondary-c: #cfe9da; --tertiary: #a6ccdf; --tertiary-c: #254b5b;
  --surface: #0f1512; --surface-lowest: #0a0f0c; --surface-low: #171d1a; --surface-c: #1b211e; --surface-high: #252b28;
  --surface-highest: #303633; --surface-bright: #353b37; --on-surface: #dee4de; --on-surface-v: #bfc9c2;
  --outline: #8a938d; --outline-v: #404944; --inverse-surface: #dee4de; --inverse-on-surface: #2c322e;
}
:root[data-scheme="lagoon"] {
  --primary: #84d2e6; --on-primary: #003640; --inv-primary: #006879; --primary-c: #004e5c; --on-primary-c: #aaedff;
  --secondary: #b2cbd2; --secondary-c: #334a51; --on-secondary-c: #cee7ee; --tertiary: #bec5eb; --tertiary-c: #3e4565;
  --surface: #0f1416; --surface-lowest: #090f11; --surface-low: #171c1e; --surface-c: #1b2122; --surface-high: #252b2d;
  --surface-highest: #303637; --surface-bright: #343a3c; --on-surface: #dee3e5; --on-surface-v: #bfc8cb;
  --outline: #899295; --outline-v: #3f484b; --inverse-surface: #dee3e5; --inverse-on-surface: #2c3133;
}
:root[data-scheme="amber"] {
  --primary: #faba73; --on-primary: #482900; --inv-primary: #845415; --primary-c: #673d00; --on-primary-c: #ffddbb;
  --secondary: #e0c1a3; --secondary-c: #58432c; --on-secondary-c: #feddbd; --tertiary: #bdcc9c; --tertiary-c: #3f4b26;
  --surface: #18120c; --surface-lowest: #130d07; --surface-low: #211a14; --surface-c: #251e17; --surface-high: #302921;
  --surface-highest: #3b332c; --surface-bright: #403830; --on-surface: #eee0d5; --on-surface-v: #d4c4b5;
  --outline: #9d8e81; --outline-v: #50453a; --inverse-surface: #eee0d5; --inverse-on-surface: #372f27;
}
:root[data-scheme="rose"] {
  --primary: #ffb1c3; --on-primary: #551d2e; --inv-primary: #8d4a5c; --primary-c: #713344; --on-primary-c: #ffd9e0;
  --secondary: #e4bdc4; --secondary-c: #5b3f45; --on-secondary-c: #ffd9e0; --tertiary: #edbe92; --tertiary-c: #60401e;
  --surface: #191113; --surface-lowest: #140c0e; --surface-low: #22191b; --surface-c: #261d1f; --surface-high: #312829;
  --surface-highest: #3c3234; --surface-bright: #413738; --on-surface: #efdee1; --on-surface-v: #d6c2c5;
  --outline: #9e8c8f; --outline-v: #514346; --inverse-surface: #efdee1; --inverse-on-surface: #382e30;
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--surface); color: var(--on-surface);
  font-family: var(--font); font-size: 17px; line-height: 1.6; font-optical-sizing: auto;
  font-variation-settings: 'ROND' 30;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
/* clip (không phải hidden) để không tạo khung cuộn: sân khấu dính bên trong vẫn dính được. */
main { overflow-x: clip; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .9em; padding: .1em .35em; border-radius: 6px; background: var(--surface-high); }
::selection { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 12px; }

/* Hai ngôn ngữ nằm sẵn trong trang; chỉ hiện đúng thứ tiếng đang chọn. */
html[lang="vi"] :not(html)[lang="en"], html[lang="en"] :not(html)[lang="vi"] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ms {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased;
  font-size: 1.5em; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--primary); color: var(--on-primary); text-decoration: none; }
.skip:focus { top: 12px; }

/* Phông tải KHÔNG có trục opsz (#302): trục đó chiếm hơn nửa dung lượng (Latin 562 → 291 KB, tiếng Việt 113 → 62 KB khi bỏ,
   dù đã thêm trục nghiêng slnt và mở wdth 25–151, wght 100–1000). Thiếu bản quang học cỡ lớn thì chữ to hơi thưa → khoảng
   chữ của tiêu đề siết thêm để bù. */
.h2 { font-size: clamp(2rem, 1.25rem + 2.8vw, 3.5rem); line-height: 1.06; letter-spacing: -.034em; font-weight: 580; font-variation-settings: 'ROND' 100; text-wrap: balance; }
.h3 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.026em; font-weight: 580; font-variation-settings: 'ROND' 100; }
/* Chữ nhấn (data-x): trộn trục cực đoan trong cùng một tiêu đề, kiểu "Oh, hi! I'm Google Sans Flex!" của Google. Giá trị
   phải khớp đúng bảng STY trong fx.js (b = dáng đứng yên). Không có fx.js thì vẫn hiện đúng dáng này. */
.x-c { font-variation-settings: 'wght' 860, 'wdth' 32, 'slnt' 0, 'ROND' 60; color: var(--tertiary); letter-spacing: -.01em; }
.x-t { font-variation-settings: 'wght' 160, 'wdth' 60, 'slnt' -10, 'ROND' 100; letter-spacing: -.02em; }
.x-w { font-variation-settings: 'wght' 1000, 'wdth' 151, 'slnt' 0, 'ROND' 100; color: var(--primary); letter-spacing: -.03em; }
/* Tên chương: chữ nhấn đứng như chữ thường khi chương chưa tới, "biến hình" sang dáng nhấn khi chương sáng lên (máy tính:
   sân khấu; điện thoại: phần chữ tới giữa màn). Hai dòng dưới chỉ là đường DỰ PHÒNG khi không có JS (12 nấc CSS) —
   bản chạy thật là site.js chapMorph (bảng nấc + lò xo, lớp .xm). */
.js .chap .h3 [data-x] { transition: font-variation-settings 900ms steps(12, end), color 600ms ease, letter-spacing 900ms steps(12, end); }
.js .chap:not(.chap-on) .h3 [data-x] { font-variation-settings: 'wght' 580, 'wdth' 100, 'slnt' 0, 'ROND' 100; color: inherit; letter-spacing: inherit; }
/* site.js chapMorph lái trục + khoảng chữ theo bảng nấc cố định (inline style) — CSS chỉ còn chuyển màu. Các dòng trên là
   đường dự phòng khi không có JS mới. */
.js .chap .h3 [data-x].xm { transition: color 600ms ease; }
/* Chữ ẩn dựng sẵn các bản phông của bảng nấc lúc rảnh (giữ trong DOM để Chrome không bỏ chúng khỏi bộ nhớ đệm). */
.xm-warm { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; contain: strict; pointer-events: none; }
.xm-warm span::before { content: attr(data-w); }
.no-motion .chap .h3 [data-x] { transition: none; }
.lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.55; color: var(--on-surface-v); max-width: 40em; text-wrap: pretty; }

/* ---------- Nút ---------- */
.btn {
  --r: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--r); font-size: 15px; font-weight: 560; line-height: 1; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: border-radius var(--t-spatial) var(--ease-spatial), transform var(--t-spatial) var(--ease-spatial), background-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn .ms { font-size: 20px; transition: font-variation-settings var(--t-quick) var(--ease-quick), transform var(--t-spatial) var(--ease-spatial); }
/* Icon M3: rê vào thì tô đầy và đậm lên (trục FILL/wght của Material Symbols), nghiêng nhẹ theo lò xo. */
@media (hover: hover) { .btn:hover .ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; transform: rotate(-8deg) scale(1.08); } }
/* M3 Expressive: bấm vào thì góc vuông lại một chút, thả ra thì nảy về. */
.btn:active { --r: 14px; transform: scale(.97); transition-duration: 120ms; transition-timing-function: ease-out; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-filled { background: var(--primary); color: var(--on-primary); }
@media (hover: hover) { .btn-filled:hover { background: color-mix(in oklab, var(--primary) 88%, white); } }
.btn-tonal { background: var(--secondary-c); color: var(--on-secondary-c); }
@media (hover: hover) { .btn-tonal:hover { background: color-mix(in oklab, var(--secondary-c) 86%, white); } }
.btn-outline { background: transparent; color: var(--on-surface); box-shadow: inset 0 0 0 1px var(--outline-v); }
@media (hover: hover) { .btn-outline:hover { background: color-mix(in oklab, var(--on-surface) 7%, transparent); } }
.btn-text { background: transparent; color: var(--primary); padding: 0 14px; }
@media (hover: hover) { .btn-text:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); } }

/* Nhóm nút nối của M3 Expressive: góc ngoài tròn hẳn, góc trong bo nhỏ; nút đang chọn tròn hẳn và hiện dấu tích,
   nút đang bấm phình ra (lò xo), góc trong vuông lại. */
.seg { display: inline-flex; gap: 2px; }
.seg button {
  display: inline-flex; align-items: center; justify-content: center; border: 0; min-height: 40px; padding: 0 16px;
  border-radius: 8px; background: var(--secondary-c); color: var(--on-secondary-c); font-size: 14px; font-weight: 560;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: border-radius var(--t-quick) var(--ease-spatial), padding var(--t-quick) var(--ease-quick), background-color 200ms ease, color 200ms ease;
}
.seg button:first-child { border-radius: 999px 8px 8px 999px; }
.seg button:last-child { border-radius: 8px 999px 999px 8px; }
.seg button[aria-pressed="true"] { border-radius: 999px; background: var(--primary); color: var(--on-primary); }
.seg button::before {
  content: "check"; font-family: 'Material Symbols Rounded'; font-size: 18px; line-height: 1; display: inline-block; overflow: hidden;
  width: 0; margin-right: 0; opacity: 0; transform: scale(.3) rotate(-30deg);
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
  transition: width var(--t-spatial) var(--ease-spatial), margin var(--t-spatial) var(--ease-spatial), opacity 160ms ease, transform var(--t-spatial) var(--ease-spatial);
}
.seg button[aria-pressed="true"]::before { width: 18px; margin-right: 6px; opacity: 1; transform: none; }
.seg button:active { padding-inline: 24px; border-radius: 6px; transition-duration: 160ms; }
.seg:has(button:active) button:not(:active) { padding-inline: 12px; }
.seg-lang button { min-height: 34px; padding: 0 12px; font-size: 13px; letter-spacing: .02em; }
.seg-lang button::before { display: none; }
.seg-lang button:active { padding-inline: 16px; }
.seg-lang:has(button:active) button:not(:active) { padding-inline: 9px; }

/* ---------- Đầu trang ---------- */
.top { position: fixed; z-index: 50; inset: 0 0 auto 0; padding: 10px var(--gutter); pointer-events: none; }
.top-bar {
  position: relative; z-index: 0;
  pointer-events: auto; max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: 16px;
  height: 60px; padding: 0 10px 0 14px; border-radius: 999px;
  transition: max-width var(--t-sheet) var(--ease-sheet);
}
/* Kính mờ của thanh nằm ở lớp riêng, bán kính làm mờ CỐ ĐỊNH, chỉ hiện dần bằng opacity (#305). Bản cũ chuyển tiếp chính
   backdrop-filter (none → blur 20px) 300 ms: Chrome không chạy được chuyển tiếp đó trên compositor — mỗi khung tính lại
   bán kính + vẽ lại trên luồng chính, đúng lúc vừa bắt đầu cuộn khỏi đầu trang (đo: 40 khung bị bỏ trong 0,4 s đầu tiên
   của cú cuộn; cách này 15, như không có kính). Nhìn y hệt: nền, kính mờ và bóng cùng hiện trong 300 ms. */
.top-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: color-mix(in oklab, var(--surface-c) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--on-surface) 6%, transparent) inset, 0 12px 32px -18px rgba(0,0,0,.6);
  opacity: 0; transition: opacity 300ms ease;
}
/* Cuộn xuống thì thanh trên co lại thành viên thuốc gọn hơn (lò xo bảng). */
@media (min-width: 1100px) { .top.scrolled .top-bar { max-width: 1060px; } }
.top.scrolled .top-bar::before { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: 19px; letter-spacing: -.01em; font-variation-settings: 'ROND' 100; }
.brand img { border-radius: 10px; }
.top-nav { display: flex; gap: 4px; margin-left: 12px; }
/* Rê vào thì chữ giãn rộng + đậm lên + đổi màu (trục wdth/wght/ROND); fx.js giữ sẵn bề rộng lúc giãn để hàng không xô. */
.top-nav a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 15px; color: var(--on-surface-v); text-align: center;
  font-variation-settings: 'wght' 460, 'wdth' 100, 'ROND' 30;
  transition: background-color 200ms ease, color 200ms ease, font-variation-settings var(--t-spatial) var(--ease-spatial);
}
.top-nav a.wide { color: var(--primary); font-variation-settings: 'wght' 680, 'wdth' 116, 'ROND' 100; }
@media (hover: hover) { .top-nav a:hover { color: var(--primary); font-variation-settings: 'wght' 680, 'wdth' 116, 'ROND' 100; } }
.top-nav a.wide { transition: none; }
@media (hover: hover) { html:not(.cur-on) .top-nav a:hover { background: color-mix(in oklab, var(--on-surface) 8%, transparent); } }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lbl-short { display: none; }
@media (max-width: 920px) { .top-nav { display: none; } }
@media (max-width: 345px) { .brand span { display: none; } }
@media (max-width: 520px) {
  .top-bar { padding: 0 6px 0 10px; height: 56px; gap: 8px; }
  .lbl-long { display: none; } .lbl-short { display: inline; }
  .top-actions .btn-sm { padding: 0 14px 0 10px; }
}

/* ---------- Mở đầu ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center;
  gap: clamp(32px, 5vw, 80px); min-height: min(100svh, 980px); padding-top: 112px; padding-bottom: 72px;
}
.hero::before {
  /* Ánh sáng sau điện thoại: cùng kiểu với thẻ "Không gian chơi game" trong app, màu primaryContainer. */
  content: ""; position: absolute; z-index: -1; right: 4%; top: 18%; width: min(760px, 70vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--primary-c) 75%, transparent), transparent 72%);
  filter: blur(20px); opacity: .9; pointer-events: none;
}
.hero-h {
  font-size: clamp(2.6rem, .6rem + 5vw, 5rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 380;
  font-variation-settings: 'wght' 380, 'wdth' 90, 'slnt' 0, 'ROND' 100; margin-bottom: 28px; text-wrap: balance;
}
.hero-h .hl { display: block; }
.hero-copy .lead { margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 28px; }
.play-badge { display: inline-block; border-radius: 12px; transition: transform var(--t-spatial) var(--ease-spatial); }
.play-badge img { height: 62px; width: auto; margin: -9px; }
.play-badge:active { transform: scale(.96); transition-duration: 120ms; }
.facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { padding: 6px 14px; border-radius: 10px; background: var(--surface-c); color: var(--on-surface-v); font-size: 14px; box-shadow: inset 0 0 0 1px var(--outline-v); }

.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 28px; perspective: 1600px; }
/* Nghiêng theo chuột chỉ có khi có chuột → chỉ khi đó mới giữ lớp riêng. */
@media (hover: hover) and (pointer: fine) { .hero-tilt { will-change: transform; } }
.hero-phone { width: min(330px, 78vw); }
@media (min-width: 961px) { .hero-phone { width: clamp(270px, calc((100svh - 240px) * .46), 330px); } }
.palette { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 340px; }
.palette p { font-size: 14px; color: var(--on-surface-v); line-height: 1.45; }
.swatches { display: flex; gap: 12px; }
/* Ô màu kiểu bảng "Hình nền & phong cách" của Android: nửa trên primary, hai góc dưới container + tertiary. */
.swatches button {
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative;
  background: conic-gradient(from -90deg, var(--a) 0 50%, var(--c) 50% 75%, var(--b) 75% 100%);
  box-shadow: 0 0 0 0 var(--on-surface); transition: box-shadow var(--t-spatial) var(--ease-spatial), border-radius var(--t-spatial) var(--ease-spatial), transform var(--t-spatial) var(--ease-spatial);
}
@media (hover: hover) { .swatches button:hover { transform: scale(1.06); } }
.swatches button[aria-checked="true"] { border-radius: 14px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--on-surface); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 104px; gap: 48px; }
  .hero::before { right: -20%; top: 46%; width: 120vw; }
}

/* ---------- Khung máy ---------- */
.dev {
  --bz: 7px; --r: 34px;
  position: relative; container-type: inline-size; padding: var(--bz); border-radius: var(--r);
  background: linear-gradient(160deg, #2a2c33, #0b0c10 40%, #0b0c10 70%, #23252b);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 40px 80px -30px rgba(0,0,0,.7), 0 18px 36px -24px rgba(0,0,0,.6);
}
.dev-land { --r: 28px; --bz: 6px; }
.scr { position: relative; overflow: hidden; border-radius: calc(var(--r) - var(--bz)); background: var(--surface); isolation: isolate; }
.dev-port .scr { aspect-ratio: 9 / 19.5; font-size: calc(100cqw / 24.5); }
.dev-land .scr { aspect-ratio: 20 / 9; font-size: calc(100cqw / 52); }

/* Thanh trạng thái */
.sb { display: flex; justify-content: space-between; align-items: center; height: 2.4em; padding: .5em 1.6em 0; font-size: .82em; font-weight: 560; color: var(--on-surface); }
.sb-ic { display: inline-flex; gap: .25em; }
.sb .ms { font-size: 1.25em; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }

/* ---------- Màn Tổng quan dựng lại (hero) ---------- */
.hub { display: flex; flex-direction: column; gap: .9em; padding-bottom: 0; color: var(--on-surface); }
.hub-top { display: flex; align-items: center; gap: .7em; padding: .2em 1.1em 0; }
.hub-logo { width: 2.9em; height: 2.9em; border-radius: .8em; }
.hub-name { font-size: 1.55em; font-weight: 600; letter-spacing: -.01em; }
.hub-quota { margin-left: auto; display: inline-flex; align-items: center; gap: .3em; padding: .55em .9em; border-radius: 999px; background: var(--surface-high); font-weight: 600; font-size: .9em; }
.hub-quota .ms { font-size: 1.3em; color: var(--primary); }
.hub-theme { font-size: 1.5em; color: var(--on-surface-v); margin-left: .2em; }
/* Thẻ Không gian chơi game như app (#311, bộ "chốt luôn" #276): SÂN KHẤU TRUNG TÍNH — thẻ gần đen, không ngả màu chủ đề —
   để hào quang của biểu tượng game (canvas .hs-aura, site.js hubAura) là nguồn màu duy nhất; nút Chơi trung tính sáng, hắt
   màu hào quang ở phía gần biểu tượng ("kính màu" .8). */
.hub-space {
  position: relative; margin: 0 1em; padding: 1.2em 1.2em 1em; border-radius: 1.8em; overflow: hidden; isolation: isolate;
  background: #0c0d11; --on-primary-c: #e6e6ec;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
/* Hào quang vẽ ở 1/4 độ phân giải (như AuraKnob.DOWNSAMPLE 4 của app) rồi trình duyệt phóng lên lọc song tuyến: ánh sáng
   rất mềm nên không mất nét, mà mỗi khung chỉ tô 1/16 số điểm ảnh. Kim tuyến (.hs-spark) vẽ đủ nét ở lớp riêng. */
.hs-aura, .hs-spark { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hs-aura { opacity: 0; transition: opacity 600ms ease; }
.hs-aura.on { opacity: 1; }
.hs-head, .hs-game, .hs-play, .hs-add, .hs-shz { position: relative; }
.hs-head { display: flex; justify-content: space-between; align-items: center; font-size: .78em; }
.hs-eyebrow { display: inline-flex; align-items: center; gap: .6em; letter-spacing: .16em; font-weight: 650; color: color-mix(in oklab, var(--on-primary-c) 80%, transparent); }
.hs-eyebrow i { width: .55em; height: .55em; border-radius: 50%; background: color-mix(in oklab, var(--on-primary-c) 70%, transparent); }
.hs-manage { display: inline-flex; align-items: center; font-weight: 650; font-size: 1.15em; color: var(--on-primary-c); }
.hs-manage .ms { font-size: 1.3em; }
.hs-game { display: flex; align-items: center; gap: .9em; margin: 1.1em 0 1em; }
.hs-game img { width: 4.4em; height: 4.4em; border-radius: 50%; box-shadow: 0 .4em 1.2em -.4em rgba(0,0,0,.5); }
.hs-game b { display: block; font-size: 1.45em; font-weight: 600; line-height: 1.15; }
.hs-game small { display: block; font-size: .86em; color: color-mix(in oklab, var(--on-primary-c) 78%, transparent); margin-top: .2em; }
.hs-play { display: flex; align-items: center; gap: .7em; padding: .85em 1.1em; border-radius: 999px; color: #1b1c22; font-weight: 600; font-size: 1.1em;
  background: linear-gradient(100deg, color-mix(in oklab, #6fa6f5 42%, #e9eaef) 0%, color-mix(in oklab, #6fa6f5 14%, #e9eaef) 45%, #e9eaef 75%);
  box-shadow: 0 .6em 1.6em -.6em rgba(80,140,240,.45), inset 0 0 0 1px rgba(255,255,255,.35); }
.hs-play .ms:last-child { margin-left: auto; }
.hs-add { display: inline-flex; flex-direction: column; align-items: center; gap: .3em; margin: 1em 0 0 .3em; font-size: .85em; font-weight: 600; color: var(--on-primary-c); }
.hs-addtile { display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 1em; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--on-primary-c) 35%, transparent); }
.hs-shz { display: flex; align-items: center; gap: .45em; margin-top: .8em; font-size: .8em; color: color-mix(in oklab, var(--on-primary-c) 85%, transparent); }
.hs-shz .ms { font-size: 1.4em; }
.hub-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin: 0 1em; }
.hub-card { display: flex; flex-direction: column; gap: .15em; padding: 1em; border-radius: 1.4em; background: var(--surface-c); box-shadow: inset 0 0 0 1px var(--outline-v); }
.hub-card .ms { color: var(--primary); margin-bottom: .45em; }
.hub-card b { font-size: 1em; font-weight: 600; }
.hub-card small { font-size: .78em; color: var(--on-surface-v); line-height: 1.3; }
.hub-rep { margin: 0 1em; padding: 1em 1.1em; border-radius: 1.4em; background: var(--surface-c); box-shadow: inset 0 0 0 1px var(--outline-v); }
.hub-rep b { display: flex; align-items: center; gap: .5em; font-weight: 600; font-size: 1.05em; margin-bottom: .4em; }
.hub-rep b .ms { color: var(--primary); }
.hub-rep p { font-size: .82em; line-height: 1.45; color: var(--on-surface-v); }
.hub-nav { margin: auto .7em .7em; display: grid; grid-template-columns: repeat(3, 1fr); padding: .55em .4em; border-radius: 1.6em; background: color-mix(in oklab, var(--surface-c) 92%, transparent); box-shadow: inset 0 0 0 1px var(--outline-v); }
.hub-nav > span { display: flex; flex-direction: column; align-items: center; gap: .2em; font-size: .78em; font-weight: 600; color: var(--on-surface-v); }
.hub-nav i { display: grid; place-items: center; width: 3.4em; height: 2em; border-radius: 999px; font-style: normal; }
.hub-nav .on { color: var(--on-surface); }
.hub-nav .on i { background: var(--secondary-c); }
.hub-nav .on .ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ---------- Câu chuyện ---------- */
.story { padding-top: clamp(64px, 10vw, 140px); }
.story-intro { margin-bottom: clamp(24px, 4vw, 48px); }
.story-intro .h2 { margin-bottom: 18px; }
/* Sân khấu dính chỉ bật khi JS chạy; không có JS thì mỗi chương xếp màn của mình ngay dưới chữ. */
.js .story-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 72px); }
.js .chap { min-height: 100vh; display: flex; align-items: center; }
.chap { position: relative; isolation: isolate; }
.chap-in { max-width: 30em; padding: 48px 0; }
/* Chương bớt trống (#302, user: "tên icon gì đó chuyển động", "thêm gì đó ở nền"): số chương cỡ lớn mờ ở nền — siêu hẹp
   mảnh lúc chương chưa tới, phình thành đậm nghiêng khi chương sáng lên (trục chữ của chính phông, như quảng cáo Google) —
   và huy hiệu hình khối M3 đổi dáng + biểu tượng nảy phía trên tên chương. */
/* User #302 nhắc lại (ảnh chương "Trong lúc chơi"): "nhạt nhẽo và trống trải" — số mờ 6–8% gần như không thấy. Số tô dải
   màu chủ đề, to hơn, nằm trên-trái cột chữ; chương đang xem rõ hẳn. */
/* Lề trong rộng: chữ tô bằng background-clip:text chỉ hiện phần nét nằm TRONG hộp — số nghiêng đậm tràn sang phải và lên
   trên hộp dòng (line-height .8) thì mất nét (user #302: "số 4 bị cắt"). Lề trái trừ vào left nên chỗ số không đổi. */
.chap-bg { position: absolute; z-index: -1; left: -.16em; top: 50%; transform: translateY(-96%); font-size: clamp(12rem, 25vw, 24rem); line-height: .8;
  padding: .22em .34em .12em .1em;
  letter-spacing: -.05em; pointer-events: none; user-select: none; color: transparent; opacity: .38;
  background: linear-gradient(165deg, color-mix(in oklab, var(--primary) 26%, transparent) 15%, color-mix(in oklab, var(--tertiary) 16%, transparent) 60%, transparent 92%);
  -webkit-background-clip: text; background-clip: text;
  font-variation-settings: 'wght' 100, 'wdth' 25, 'slnt' 0, 'ROND' 100; contain: layout style;
  /* 14 nấc thay vì mỗi khung: đổi trục chuỗi chữ cỡ 24rem mỗi khung là dựng phông + bố cục lại mỗi khung (đo #302: cuộn
     cả trang +150 ms/giây bố cục). Chữ nền nhạt nên nấc không thấy giật. */
  transition: font-variation-settings 1100ms steps(14, end), opacity 700ms ease; }
.chap.chap-on .chap-bg { font-variation-settings: 'wght' 900, 'wdth' 64, 'slnt' -10, 'ROND' 100; opacity: 1; }
/* Số chương vẽ bằng SVG (#302 vòng 5, user: "lag và chậm"): nét thật của phông ở 9 mốc trục (assets/numerals.js), site.js
   nội suy nét theo lò xo → mượt ở mọi tần số quét mà không dựng bản phông nào. Toạ độ neo đúng chỗ số chữ cũ: gốc chữ
   cách mép trái chương -.06em, chân chữ cao hơn giữa chương .1355em (máy tính); điện thoại: đuôi số cách mép phải .32em,
   chân chữ thấp hơn đỉnh chương .82em. --w/--h/--x0/--y0/--xr (em) do site.js đặt từ khung vẽ của dữ liệu nét. */
.chap.cn .chap-bg { display: none; }
.chap-num { position: absolute; z-index: -1; width: var(--w); height: var(--h); overflow: visible; pointer-events: none;
  font-size: clamp(12rem, 25vw, 24rem); left: calc(-.06em + var(--x0)); top: 50%; margin-top: calc(-.1355em + var(--y0));
  opacity: .38; transition: opacity 700ms ease; }
.chap.chap-on .chap-num { opacity: 1; }
.chap-num .cn-a { stop-color: var(--primary); stop-opacity: .26; }
.chap-num .cn-b { stop-color: var(--tertiary); stop-opacity: .16; }
.chap-num .cn-c { stop-color: var(--tertiary); stop-opacity: 0; }
/* Quầng màu theo tông của chương sau cột chữ (cùng tông với quầng sau sân khấu bên phải), trôi chậm khi chương đang xem.
   Chỉ transform/opacity → chạy trên bộ dựng hình, không đụng bố cục. Lúc hiện ra phóng bằng thuộc tính `scale` RIÊNG,
   trôi bằng `transform`: transition và animation cùng trên transform thì Chrome không đưa animation lên compositor, để nó
   chạy ở luồng chính mãi (đo #302 vòng 5: 166 lần tính kiểu/giây khi đứng yên — điện thoại giữ mọi chương sáng nên cả mục
   tính năng tốn liên tục; tách ra → 0). */
.chap::before { content: ""; position: absolute; z-index: -2; left: -12%; top: 50%; width: min(78%, 760px); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--tone, var(--primary-c)) 46%, transparent), transparent 72%);
  opacity: 0; translate: 0 -50%; scale: .8; transition: opacity 900ms ease, scale 1200ms cubic-bezier(.2,0,0,1); }
.chap[data-screen="freeze"], .chap[data-screen="rep"] { --tone: var(--tertiary-c); }
.chap[data-screen="mon"] { --tone: var(--secondary-c); }
.chap.chap-on::before { opacity: 1; scale: 1; animation: chapGlow 14s steps(18) 1.2s infinite alternate; }
/* `translate` (-50%) áp SAU transform nên tổng dịch vẫn là (6%, -46%) như cũ. Nhịp bậc: xem hsGlow. */
@keyframes chapGlow { 0% { transform: translate(0%, 0%) scale(1) rotate(0deg); } 12.5% { transform: translate(0.187%, 0.124%) scale(1.002) rotate(0.249deg); } 25% { transform: translate(0.775%, 0.517%) scale(1.01) rotate(1.033deg); } 37.5% { transform: translate(1.757%, 1.171%) scale(1.023) rotate(2.342deg); } 50% { transform: translate(3%, 2%) scale(1.04) rotate(4deg); } 62.5% { transform: translate(4.243%, 2.829%) scale(1.057) rotate(5.658deg); } 75% { transform: translate(5.225%, 3.483%) scale(1.07) rotate(6.967deg); } 87.5% { transform: translate(5.813%, 3.876%) scale(1.078) rotate(7.751deg); } 100% { transform: translate(6%, 4%) scale(1.08) rotate(8deg); } }
/* Câu chuyện đã cuộn khuất (máy tính: chương cuối vẫn "đang sáng") → quầng thôi trôi. */
.story.off-view .chap::before, .chap.off-view::before { animation-play-state: paused; }
.cmk { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cm-shape { width: 52px; height: 52px; }
.cm-shape path { transition: fill 420ms ease; }
/* Trục biểu tượng đổi theo 4 nấc cố định (không mỗi khung): mỗi giá trị trục mới là một bản phông dựng mới; nấc cố định thì
   dựng một lần rồi dùng lại. Nấc lẫn trong cú nảy cmPop nên không thấy. */
.cm-shape .ms { position: relative; font-size: 24px; color: var(--on-primary-c); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; transition: color 420ms ease, font-variation-settings 420ms steps(4, end); }
.chap.chap-on .cm-shape path { fill: var(--primary); }
.chap.chap-on .cm-shape .ms { color: var(--on-primary); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; animation: cmPop 760ms var(--ease-spatial); }
@keyframes cmPop { 0% { transform: scale(.6) rotate(-24deg); } 55% { transform: scale(1.14) rotate(6deg); } 100% { transform: none; } }
.cm-n { font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--on-surface-v); font-variant-numeric: tabular-nums; }
.cm-n i { font-style: normal; opacity: .55; }
@media (max-width: 1023px) {
  .chap-bg { font-size: 9.5rem; top: 0; left: auto; right: -.02em; transform: translateY(-12%); }
  .chap-num { font-size: 9.5rem; top: 0; left: auto; right: calc(.32em - var(--xr)); margin-top: calc(.82em + var(--y0)); }
  .chap::before { left: -30%; top: 12em; width: 130%; }
  .cm-shape { width: 44px; height: 44px; } .cm-shape .ms { font-size: 21px; }
}
.no-motion .chap-bg, .no-motion .chap-num, .no-motion .cm-shape .ms, .no-motion .chap::before { transition: none; animation: none; }
.chap-in .h3 { margin-bottom: 16px; }
.chap-in > p { color: var(--on-surface-v); margin-bottom: 14px; text-wrap: pretty; }
.try { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 16px; background: var(--surface-c); font-size: 15px; line-height: 1.5; color: var(--on-surface) !important; }
.try .ms { font-size: 20px; color: var(--primary); margin-top: 1px; }
.js .chap .slot { display: none; }
.story-stage { display: none; }
.js .story-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
html:not(.js) .chap { padding: 28px 0 56px; }
html:not(.js) .slot { display: block; margin-top: 28px; }
html:not(.js) .slot .screen { display: flex; flex-direction: column; align-items: center; }
.stage { position: relative; width: 100%; height: min(760px, calc(100vh - 120px)); margin-top: 40px; }
.stage .screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; visibility: hidden; }
.stage .screen.on { visibility: visible; }
.fit { width: 100%; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 50%; }

/* Chi tiết mở ra */
.more { margin-top: 6px; }
.more summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px 8px 14px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 560; color: var(--primary); transition: background-color 200ms ease; }
.more summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .more summary:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); } }
.more summary .ms { font-size: 22px; transition: transform var(--t-spatial) var(--ease-spatial); }
.more[open] summary .ms { transform: rotate(180deg); }
.more-body ul { margin: 10px 0 0; padding-left: 1.1em; color: var(--on-surface-v); font-size: 15.5px; line-height: 1.6; }
.more-body li + li { margin-top: 8px; }
.more-body b { color: var(--on-surface); font-weight: 600; }
@supports (interpolate-size: allow-keywords) {
  .more, .qa details { interpolate-size: allow-keywords; }
  .more::details-content, .qa details::details-content { height: 0; overflow: clip; transition: height var(--t-sheet) var(--ease-sheet), content-visibility var(--t-sheet) allow-discrete; }
  .more[open]::details-content, .qa details[open]::details-content { height: auto; }
}

/* Mobile: không có sân khấu dính; mỗi chương mang màn của mình ngay dưới chữ. */
@media (max-width: 1023px) {
  .js .story-grid { display: block; }
  .js .story-stage { display: none; }
  .js .chap { min-height: 0; display: block; padding: 28px 0 56px; }
  .chap-in { padding: 0; max-width: none; }
  .js .chap .slot { display: block; margin-top: 28px; }
  .slot .screen { display: flex; flex-direction: column; align-items: center; }
}

/* ---------- Bố cục từng màn ---------- */
.comp { position: relative; width: 100%; }
.comp-land { max-width: 640px; }
.comp-land .dev-land { width: 100%; }
.a-wrap { position: relative; container-type: inline-size; }
.comp-land .a-wrap { margin-top: -19%; width: 57%; margin-left: auto; }
.comp-mon .a-wrap { width: 60%; margin-top: -14%; }
.comp-play .a-wrap { width: 64%; margin-top: -15%; }
.comp-rep .a-wrap { width: 60%; margin-top: -21%; }
.comp-port { max-width: 640px; display: flex; align-items: center; }
.fz-phone { width: 41%; flex: none; }
.a-wrap-fz { width: 62%; margin-left: -3%; flex: none; }
/* Ba dòng "Dành cho · Cách dùng · Cần" dưới đoạn mở của mỗi chương (#302): đủ ý mà vẫn đọc lướt được. */
/* Danh sách Dành cho / Cách dùng / Cần của từng chương. Tên lớp riêng: ".facts" là hàng ô ở đầu trang — dùng chung tên
   thì luật lưới này đè lên ô đầu trang, mỗi chữ một dòng (user #302). */
.cfacts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cfacts li { display: grid; grid-template-columns: 22px 6.6em 1fr; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; color: var(--on-surface-v); }
.cfacts .ms { font-size: 19px; color: var(--primary); align-self: start; transform: translateY(1px); }
.cfacts b { font-weight: 600; color: var(--on-surface); }
@media (max-width: 520px) { .cfacts li { grid-template-columns: 22px 1fr; } .cfacts li > span:last-child { grid-column: 2; } }
.shz-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 0 -14px; }
.demo-ctl { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; min-height: 44px; }
.demo-lbl { font-size: 14px; color: var(--on-surface-v); }
.demo-note { font-size: 14px; color: var(--on-surface-v); min-width: 12em; }
.seg-demo { font-size: 14px; }
/* Khổ hẹp: nhãn luôn ở dòng riêng. Để chung một hàng tự xuống dòng thì hàng nằm sát ngưỡng: nút phình lúc nhấn + dấu
   tích bung ra là hàng nhảy 1 ↔ 2 dòng, đẩy cả phần dưới lên xuống (#302, đo ở khổ 400 px: 44 ↔ 72 px). */
@media (max-width: 600px) { .demo-ctl { flex-direction: column; gap: 8px; } }
@media (max-width: 1023px) {
  .comp-land .a-wrap { width: 88%; margin-top: -9%; }
  /* Không đè lên đáy màn game: cửa sổ nổi mở rộng cao gần hết màn, đè vào là che mất hai nút cuối. */
  .comp-mon .a-wrap { width: 92%; margin-top: 4%; }
  .comp-play .a-wrap { width: 90%; margin-top: -8%; }
  /* Điện thoại: thẻ ở trên, máy ở dưới, để lưới biểu tượng (nằm sát đáy màn hình chính) không bị che. */
  .comp-port { flex-direction: column-reverse; }
  .fz-phone { width: 66%; max-width: 290px; margin-top: -26%; }
  .a-wrap-fz { width: 96%; margin: 0; z-index: 1; }
  .comp-rep .a-wrap { width: 92%; margin-top: -8%; }
}

/* ---------- Thành phần app dựng lại (đơn vị em = 16dp) ---------- */
.a-card { font-size: calc(100cqw / 22.5); background: var(--surface-c); border-radius: 1.75em; padding: 1.25em; color: var(--on-surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 6%, transparent) inset, 0 30px 60px -28px rgba(0,0,0,.75); }
.a-row { display: grid; grid-template-columns: 3em 1fr auto; align-items: center; gap: 1em; min-height: 3.5em; }
.a-ic {
  display: grid; place-items: center; width: 3em; height: 3em; border-radius: 1em; background: var(--surface-high); color: var(--on-surface-v);
  transition: border-radius var(--t-spatial) var(--ease-spatial), background-color 240ms ease, color 240ms ease;
}
/* Trong app, công tắc bật thì ô biểu tượng tròn lại và lên màu primaryContainer. */
.a-ic.on { border-radius: 50%; background: var(--primary-c); color: var(--primary); }
.a-ic .ms { font-size: 1.5em; }
.a-tx { min-width: 0; }
.a-tx b { display: block; font-size: 1.06em; font-weight: 560; line-height: 1.3; }
.a-tx small { display: block; font-size: .88em; line-height: 1.35; color: var(--on-surface-v); }
.a-div { border: 0; border-top: 1px solid var(--outline-v); margin: .8em 0; opacity: .7; }
.a-link { display: flex; align-items: center; gap: .9em; padding: .55em .3em; font-size: 1em; font-weight: 560; color: var(--primary); }
.a-link .ms { font-size: 1.45em; }

/* Công tắc M3 */
.a-sw { position: relative; flex: none; width: 3.25em; height: 2em; border: 0; padding: 0; border-radius: 999px; cursor: pointer; background: var(--surface-highest); box-shadow: inset 0 0 0 .125em var(--outline); transition: background-color 200ms ease, box-shadow 200ms ease; -webkit-tap-highlight-color: transparent; }
.a-sw i { position: absolute; top: 50%; left: 1em; width: 1em; height: 1em; border-radius: 50%; background: var(--outline); transform: translate(-50%, -50%); transition: left var(--t-spatial) var(--ease-spatial), width var(--t-quick) var(--ease-spatial), height var(--t-quick) var(--ease-spatial), background-color 200ms ease; }
.a-sw[aria-checked="true"] { background: var(--primary); box-shadow: none; }
.a-sw[aria-checked="true"] i { left: 2.25em; width: 1.5em; height: 1.5em; background: var(--on-primary); }
.a-sw:active i { width: 1.75em; height: 1.75em; }
/* Bật thì tay cầm hiện dấu tích (M3), xoay vào theo lò xo. */
.a-sw i::after {
  content: "check"; position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Material Symbols Rounded';
  font-size: 1em; line-height: 1; color: var(--on-primary-c); opacity: 0; transform: scale(.2) rotate(-60deg);
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
  transition: transform var(--t-spatial) var(--ease-spatial), opacity 120ms ease;
}
.a-sw[aria-checked="true"] i::after { opacity: 1; transform: none; }

/* Thẻ độ phân giải */
.res-box { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 1.1em 1.25em; border-radius: 1.5em; background: var(--primary-c); color: var(--on-primary-c); transition: opacity 240ms ease; }
/* Mảng pixel của app (#311, site.js pixelField ⇐ ScalePixelPreview.kt): dưới chữ, trên nền thẻ. Chữ co theo nội dung
   (align-items: flex-start) để đo được khối chữ chiếm tới đâu — ô nằm sau chữ mờ đi như app. */
.res-pix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.res-lbl { font-size: .9em; font-weight: 560; }
.res-val { font-size: 3.4em; line-height: 1.05; font-weight: 400; letter-spacing: -.02em; margin: .08em 0; font-variant-numeric: tabular-nums; }
.res-px { font-size: .9em; opacity: .9; font-variant-numeric: tabular-nums; }
.res-card.off .res-box, .res-card.off .a-slider, .res-card.off .res-presets { opacity: .38; }
/* Thanh trượt M3 Expressive: rãnh 16dp, tay cầm thanh dọc 4×44dp cách rãnh 6dp mỗi bên, chấm dừng cuối rãnh;
   kéo thì tay cầm mảnh lại còn 2dp và bong bóng giá trị bật lên (lò xo). --p do lò xo trong site.js đẩy. */
.a-slider {
  --p: .571; --hw: .25em; --gap: .375em; --x: calc(var(--p) * (100% - var(--hw)) + var(--hw) / 2);
  position: relative; height: 2.75em; margin: 1em .1em 0; touch-action: none;
}
.sl-act, .sl-ina { position: absolute; top: 50%; height: 1em; margin-top: -.5em; }
.sl-act { left: 0; width: max(0px, calc(var(--x) - var(--hw) / 2 - var(--gap))); border-radius: .5em .125em .125em .5em; background: var(--primary); }
.sl-ina { right: 0; left: calc(var(--x) + var(--hw) / 2 + var(--gap)); border-radius: .125em .5em .5em .125em; background: var(--secondary-c); }
.sl-stop { position: absolute; top: 50%; right: .375em; width: .25em; height: .25em; margin-top: -.125em; border-radius: 50%; background: var(--primary); transition: opacity 150ms ease; }
.a-slider.at-end .sl-stop { opacity: 0; }
.sl-hdl { position: absolute; top: 50%; left: var(--x); width: var(--hw); height: 2.75em; margin-top: -1.375em; border-radius: 999px; background: var(--primary); transform: translateX(-50%); transition: width var(--t-quick) var(--ease-quick); }
.a-slider.drag .sl-hdl { width: .125em; }
/* Rãnh đã chọn "con giun" (site.js vẽ, #302): có nó thì ẩn dải phẳng .sl-act (giữ cho trang chạy không có JS). */
.sl-wave { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sl-wave path { fill: none; stroke: var(--primary); stroke-linejoin: round; }
.sl-wave circle { fill: var(--primary); }
.a-slider.wv .sl-act { visibility: hidden; }
.sl-val {
  position: absolute; left: var(--x); bottom: calc(100% + .1em); padding: .55em .85em; border-radius: 999px; pointer-events: none;
  background: var(--inverse-surface); color: var(--inverse-on-surface); font-size: .9em; font-weight: 560; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(-50%) translateY(.4em) scale(.4); transform-origin: 50% 100%;
  transition: transform var(--t-quick) var(--ease-spatial), opacity 120ms ease;
}
.sl-val b { font-weight: 600; }
.a-slider.drag .sl-val, .a-slider:has(input:focus-visible) .sl-val { opacity: 1; transform: translateX(-50%); }
.a-slider input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.a-slider:has(input:focus-visible) .sl-hdl { outline: 3px solid var(--on-surface); outline-offset: 3px; }
.res-ends { display: flex; justify-content: space-between; font-size: .88em; color: var(--on-surface-v); margin: .2em 0 .8em; }
.a-seg { display: flex; gap: .125em; }
.a-seg button {
  flex: 1 1 0; min-width: 0; border: 0; padding: .9em 0; border-radius: .5em; background: var(--surface-high); color: var(--on-surface-v);
  font-size: .95em; cursor: pointer; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
  transition: flex-grow var(--t-quick) var(--ease-quick), border-radius var(--t-quick) var(--ease-spatial), background-color 200ms ease, color 200ms ease;
}
.a-seg button:first-child { border-radius: 999px .5em .5em 999px; }
.a-seg button:last-child { border-radius: .5em 999px 999px .5em; }
.a-seg button.sel { border-radius: 999px; background: var(--primary-c); color: var(--on-primary-c); font-weight: 560; }
.a-seg button:active { flex-grow: 1.45; border-radius: .3em; transition-duration: 160ms; }
.a-hint { font-size: .86em; line-height: 1.45; color: var(--on-surface-v); margin-top: .9em; }

/* Màn game (độ phân giải) */
.game { background: #9cc3fb; }
.game-cv, .game-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-pill { position: absolute; right: 9%; top: 4%; display: inline-flex; align-items: center; gap: .55em; padding: .5em 1em; border-radius: 999px; background: rgba(18,19,24,.86); color: #e3e1e9; font-size: 1.05em; font-weight: 560; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 .3em 1em rgba(0,0,0,.25); }
.g-pill i { width: .6em; height: .6em; border-radius: 50%; background: #3fd08f; }
.game.full .g-pill { visibility: hidden; }
/* Kính lúp kiểu chú thích (#311): JS đặt chỗ bằng `translate` (vòng soi vẽ trên canvas game, kính đứng ở khoảng trống bên
   cạnh). Ẩn tới lần đặt đầu tiên — không thì nó hiện ở góc trên trái trước khi mô phỏng dựng xong. */
.loupe { position: absolute; left: 0; top: 0; width: 22%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .25em rgba(255,255,255,.95), 0 .8em 1.8em -.4em rgba(0,0,0,.45);
  opacity: 0; transition: opacity 240ms ease; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.lp-on .loupe { opacity: 1; }
.loupe canvas { width: 100%; height: 100%; display: block; }
/* Chỗ nắm vòng soi cho ngón tay (vòng chỉ ~30 px trên điện thoại). Có chuột thì bấm ở đâu trên màn game cũng kéo được. */
.lp-hit { position: absolute; left: 0; top: 0; border-radius: 50%; touch-action: none; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .lp-hit { display: none; } }
.lp-zone { cursor: crosshair; }
.lp-zone.lp-drag, .lp-zone.lp-drag .loupe { cursor: grabbing; }

/* Màn đóng băng */
.home { background: radial-gradient(120% 70% at 20% 0%, color-mix(in oklab, var(--primary-c) 85%, #000) 0%, transparent 70%), radial-gradient(90% 60% at 100% 100%, color-mix(in oklab, var(--tertiary-c) 80%, #000), transparent 70%), var(--surface-lowest); display: flex; flex-direction: column; }
.home-clock { padding: 1.4em 1.4em 0; font-size: 3.1em; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.home-clock small { display: block; font-size: .27em; font-weight: 500; letter-spacing: 0; margin-top: .55em; color: var(--on-surface-v); }
.home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em .5em; padding: 0 1.2em; margin-top: auto; align-content: end; }
.home-dock { display: flex; justify-content: center; gap: 1.8em; padding: .9em 1em; margin: 1.6em 1em 1.3em; border-radius: 2em; background: rgba(255,255,255,.08); }
.app[hidden] { display: none; }
.app { position: relative; justify-self: center; width: 3.6em; height: 3.6em; border-radius: 1.05em; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, color-mix(in oklab, var(--h, #888) 88%, white), var(--h, #888)); box-shadow: 0 .25em .6em -.2em rgba(0,0,0,.4); transition: filter 500ms ease; }
.app .ms { font-size: 1.7em; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.app img { width: 100%; height: 100%; border-radius: inherit; }
.app::after { /* lớp băng */ content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 600ms ease;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), transparent 45%), linear-gradient(160deg, rgba(220,240,255,.55), rgba(160,200,240,.25));
  box-shadow: inset 0 0 0 .12em rgba(235,248,255,.7); }
.app .badge { position: absolute; right: -.35em; top: -.35em; width: 1.45em; height: 1.45em; border-radius: 50%; display: grid; place-items: center; font-size: .9em; background: var(--surface-c); color: var(--l3-fg); box-shadow: 0 0 0 .15em var(--surface-lowest); transform: scale(0); transition: transform var(--t-spatial) var(--ease-spatial); z-index: 2; }
.app .badge .ms { font-size: 1em; font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.app.pin .badge { transform: scale(1); color: #f5b13d; }
.app.f1 .badge, .app.f2 .badge, .app.f3 .badge { transform: scale(1); }
.app.f2 { filter: saturate(.45) brightness(.8); }
.app.f2::after { opacity: .55; }
.app.f3 { filter: grayscale(1) brightness(.62); }
.app.f3::after { opacity: .75; }
.app.game.live { box-shadow: 0 0 0 .2em var(--primary), 0 .25em .8em -.2em rgba(0,0,0,.5); }
.fz-card { padding: 1.5em 1.25em 1.25em; }
.fz-title { display: block; font-size: 1.5em; font-weight: 560; line-height: 1.2; }
.fz-mode { display: block; color: var(--primary); margin-top: .4em; }
.fz-sub { display: block; color: var(--on-surface-v); font-size: .88em; margin: .5em 0 1em; }
.fz-levels { display: flex; flex-direction: column; gap: .65em; }
.fz-lv { display: grid; grid-template-columns: 2.4em 1fr; grid-template-rows: auto auto; column-gap: .75em; row-gap: .2em; text-align: left; padding: .85em 1em; border-radius: 1.25em; border: 0; cursor: pointer; background: var(--surface-high); box-shadow: inset 0 0 0 .125em var(--surface-highest); transition: box-shadow 240ms ease, background-color 240ms ease, transform var(--t-quick) var(--ease-spatial); }
.fz-lv:active { transform: scale(.98); }
.fz-lv[aria-checked="true"] { background: color-mix(in oklab, var(--primary-c) 30%, var(--surface-high)); box-shadow: inset 0 0 0 .15em var(--primary); }
.fz-lv .lvb { grid-row: span 2; align-self: start; display: grid; place-items: center; height: 2em; border-radius: .55em; font-size: .9em; font-weight: 560; }
.lvb.l1 { background: var(--l1-bg); color: var(--l1-fg); } .lvb.l2 { background: var(--l2-bg); color: var(--l2-fg); }
.lvb.l3 { background: var(--l3-bg); color: var(--l3-fg); } .lvb.l4 { background: var(--l4-bg); color: var(--l4-fg); }
.fz-lv b { font-size: 1.02em; font-weight: 560; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1em .5em; }
.fz-lv em { font-style: normal; font-weight: 500; font-size: .78em; color: var(--primary); display: none; }
.fz-lv[aria-checked="true"] em { display: inline; }
.fz-lv small { font-size: .84em; line-height: 1.38; color: var(--on-surface-v); }
.fz-go .st-on, .fz-go[aria-pressed="true"] .st-off { display: none; }
/* Nút bật/tắt M3 Expressive: đang bật thì đổi màu và vuông góc lại. */
.fz-go[aria-pressed="true"] { --r: 16px; background: var(--primary); color: var(--on-primary); }
.fz-status { position: relative; display: inline-flex; align-items: center; min-height: 28px; padding-left: 0; transition: padding var(--t-quick) var(--ease-spatial); }
.fz-status:has(.m3-load.on) { padding-left: 34px; }
.m3-load { position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; transform: scale(0); }
.m3-load svg { width: 100%; height: 100%; display: block; overflow: visible; }
.m3-load path { fill: var(--primary); }
.fz-go[aria-pressed="true"] .st-on { display: inline; }

/* Cửa sổ theo dõi */
/* Cửa sổ nổi — dựng lại theo ui/widget/FloatingWidgetOverlay.kt của app (#302). --dp = 1 dp của màn ngang 933 × 420 dp
   (Vivo 2800 × 1260, mật độ 3) nhân 1,25 cho đọc được trên trang; mọi cỡ dưới đây là đúng số dp/sp trong mã Compose. */
.ov {
  --dp: calc(100cqw / 933 * 1.25);
  position: absolute; left: 3%; top: 26%; z-index: 3; display: flex; flex-direction: column; width: max-content;
  padding: calc(10 * var(--dp)) calc(14 * var(--dp)); border-radius: calc(18 * var(--dp));
  background: color-mix(in oklab, var(--surface) 92%, transparent); color: var(--on-surface);
  box-shadow: inset 0 0 0 calc(1 * var(--dp)) color-mix(in oklab, var(--outline) 60%, transparent);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; line-height: 1.2;
}
.ov:not(.open) { cursor: pointer; }
.ov.drag { cursor: grabbing; }
.ov-head { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.ov.open .ov-head { justify-content: flex-start; cursor: pointer; }
.ov-dot, .ov-sdot { flex: none; width: calc(6 * var(--dp)); height: calc(6 * var(--dp)); border-radius: 50%; background: var(--primary); margin-right: calc(6 * var(--dp)); }
.ov-m { display: inline-flex; align-items: flex-end; }
.ov-v { font-size: calc(16 * var(--dp)); font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-u { font-size: calc(10 * var(--dp)); font-weight: 700; color: var(--primary); padding-bottom: calc(1 * var(--dp)); white-space: pre; }
.ov-sep { font-size: calc(12 * var(--dp)); color: var(--outline); padding: 0 calc(8 * var(--dp)); }
.ov-name { font-size: calc(13 * var(--dp)); font-weight: 700; }
.ov-hint { display: inline-flex; align-items: center; }
.ov-hint .ov-u { padding: 0; }
.ov-hint span:last-child { font-size: calc(12 * var(--dp)); font-weight: 500; color: var(--on-surface-v); white-space: pre; }
.ov-end { flex: none; width: calc(8 * var(--dp)); }
.ov-col {
  display: inline-flex; align-items: center; height: calc(24 * var(--dp)); padding: 0 calc(9 * var(--dp)) 0 calc(6 * var(--dp));
  flex: none; border-radius: 999px; background: color-mix(in oklab, var(--outline-v) 90%, transparent);
  box-shadow: inset 0 0 0 calc(1 * var(--dp)) color-mix(in oklab, var(--outline) 35%, transparent);
  font-size: calc(10 * var(--dp)); font-weight: 700; color: var(--on-surface-v);
}
.ov-fill { flex: 1 0 calc(10 * var(--dp)); }
.ov-col svg { width: calc(13 * var(--dp)); height: calc(13 * var(--dp)); margin-right: calc(3 * var(--dp)); }
.ov svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* Dòng Focus: theo bề rộng thẻ, không quyết định nó (FollowCardWidth) → contain: inline-size. */
.ov-chip {
  contain: inline-size; margin-top: calc(4 * var(--dp)); padding: calc(2 * var(--dp)) calc(6 * var(--dp)); border-radius: calc(6 * var(--dp));
  background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--primary);
  font-size: calc(9 * var(--dp)); font-weight: 700; line-height: calc(11 * var(--dp)); white-space: normal;
}
.ov-chip:empty { display: none; }
.ov-x { display: none; padding-top: calc(8 * var(--dp)); }
.ov.open .ov-x { display: block; animation: ovIn 160ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes ovIn { from { opacity: 0; } }
.ov-hr { height: calc(1 * var(--dp)); background: color-mix(in oklab, var(--outline) 40%, transparent); margin: 0 0 calc(8 * var(--dp)); }
.ov-ds { display: flex; align-items: center; font-size: calc(11 * var(--dp)); font-weight: 700; white-space: nowrap; }
.ov-game { display: block; padding: calc(1 * var(--dp)) 0 0 calc(12 * var(--dp)); font-size: calc(9 * var(--dp)); font-weight: 500; color: var(--on-surface-v); white-space: nowrap; }
.ov-ch { padding-top: calc(8 * var(--dp)); }
.ov-cht {
  contain: inline-size; display: flex; align-items: center; gap: calc(4 * var(--dp)); width: 100%; border: 0; padding: 0; background: none; color: var(--on-surface-v);
  font: inherit; font-size: calc(9 * var(--dp)); font-weight: 700; text-align: left; cursor: pointer; white-space: nowrap;
}
.ov-cht svg { width: calc(10 * var(--dp)); height: calc(10 * var(--dp)); }
.ov-cht b { margin-left: auto; color: var(--on-surface); font-variant-numeric: tabular-nums; }
.ov-cht b.warn { color: #f59e0b; }
.ov-plot { display: block; width: 100%; height: calc(54 * var(--dp)); margin-top: calc(4 * var(--dp)); }
.ov-tb { display: grid; column-gap: calc(10 * var(--dp)); margin-top: calc(8 * var(--dp)); }
.ov-tb > span { height: calc(21 * var(--dp)); display: flex; align-items: center; justify-content: flex-end; font-size: calc(12 * var(--dp)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; border-top: calc(1 * var(--dp)) solid transparent; }
.ov-tb > span.l { justify-content: flex-start; font-size: calc(9 * var(--dp)); color: var(--on-surface-v); }
.ov-tb > span.r { border-top-color: color-mix(in oklab, var(--outline) 22%, transparent); }
.ov-tb > span.hot { color: #f43f5e; }
.ov-btns { display: flex; align-items: center; gap: calc(6 * var(--dp)); }
.ov-btns button {
  display: inline-flex; align-items: center; height: calc(28 * var(--dp)); border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ov-afk { padding: 0 calc(8 * var(--dp)); background: var(--surface-high); color: var(--primary); font-size: calc(9 * var(--dp)) !important;
  box-shadow: inset 0 0 0 calc(1 * var(--dp)) color-mix(in oklab, var(--outline-v) 60%, transparent); }
.ov-afk svg { width: calc(12 * var(--dp)); height: calc(12 * var(--dp)); margin-right: calc(4 * var(--dp)); }
.ov-opt { padding: 0 calc(10 * var(--dp)); background: var(--primary); color: var(--on-primary); font-size: calc(10 * var(--dp)) !important; }
.ov-opt:disabled { background: color-mix(in oklab, var(--on-surface) 12%, transparent); color: color-mix(in oklab, var(--on-surface) 38%, transparent); cursor: default; }
.ov-grip { position: absolute; right: calc(7 * var(--dp)); bottom: calc(7 * var(--dp)); width: calc(11 * var(--dp)); height: calc(11 * var(--dp)); color: color-mix(in oklab, var(--primary) 45%, transparent); pointer-events: none; }
/* Thông báo ngắn của Android (Toast) ở đáy màn hình. */
.toast {
  position: absolute; left: 50%; bottom: 9%; z-index: 6; max-width: 80%; padding: .5em 1.1em; border-radius: 999px; background: rgba(40,41,46,.94); color: #e3e1e9;
  font-size: .95em; white-space: nowrap; transform: translateX(-50%) translateY(.6em); opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 260ms var(--ease-spatial);
}
.toast.on { opacity: 1; transform: translateX(-50%); }
/* Màn theo dõi: thẻ số đo đè lên nửa phải đáy màn game → thông báo đứng ở phần đáy còn trống. */
.comp-mon .toast { left: 23%; bottom: 13%; }
@media (max-width: 1023px) { .comp-mon .toast { left: 50%; bottom: 18%; } }
.mon-card { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: .75em; padding: .75em; }
.mon-ram { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9em; padding: 1em .6em; border-radius: 1.4em; background: var(--surface-high); position: relative; }
.ring-box { position: relative; width: 86%; }
.ring { display: block; width: 100%; overflow: visible; }
.ring path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.ring-bg { stroke: var(--secondary-c); }
.ring-fg { stroke: var(--primary); }
.ring-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; }
.rv { display: flex; align-items: baseline; gap: .2em; }
.ring-t b { font-size: 1.85em; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.ring-t small { font-size: .78em; color: var(--on-surface-v); }
.ring-t em { font-style: normal; font-size: .74em; font-weight: 560; }
.mon-used { text-align: center; font-size: .82em; line-height: 1.3; font-weight: 560; color: var(--on-surface-v); }
.mon-tile { position: relative; display: flex; flex-direction: column; gap: .15em; padding: .85em .9em .7em; border-radius: 1.4em; background: var(--surface-high); min-height: 9.4em; }
.mt-h { display: flex; align-items: center; gap: .45em; font-size: .9em; font-weight: 560; }
.mt-h .ms { font-size: 1.35em; color: var(--on-surface-v); }
.mt-v { font-variant-numeric: tabular-nums; }
.mt-v b { font-size: 1.7em; font-weight: 400; letter-spacing: -.02em; }
.mt-v small { font-size: .8em; margin-left: .15em; color: var(--on-surface-v); }
.chart { position: relative; height: 3em; margin: .2em 0 0 1.8em; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch-line { fill: none; stroke: var(--primary); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ch-area { fill: color-mix(in oklab, var(--primary) 16%, transparent); stroke: none; }
.ch-dot { position: absolute; right: -.3em; width: .6em; height: .6em; margin-top: -.3em; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 .2em color-mix(in oklab, var(--primary) 35%, transparent); }
.ch-y { position: absolute; left: -1.9em; top: -.4em; bottom: -.4em; display: flex; flex-direction: column; justify-content: space-between; font-size: .66em; color: var(--on-surface-v); font-variant-numeric: tabular-nums; }
.chart::before { content: ""; position: absolute; inset: 0; border-top: 1px dashed var(--outline-v); border-bottom: 1px solid var(--outline-v); }
.mt-x { display: flex; justify-content: space-between; font-size: .66em; color: var(--on-surface-v); margin-left: 2.7em; }
.mt-need { position: absolute; inset: 2.6em .9em .9em; display: grid; place-items: center; border-radius: 1em; background: var(--surface-high); color: var(--on-surface-v); font-size: .9em; font-weight: 560; opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.mon-card.noshz [data-shz] .mt-need { opacity: 1; }
.mon-card.noshz [data-shz] .mt-v, .mon-card.noshz [data-shz] .chart, .mon-card.noshz [data-shz] .mt-x { visibility: hidden; }
/* Tiêu đề "Thiết bị của bạn" + nút Chi tiết / Thu gọn như app (DashboardSectionTitle + TextButton). */
.mon-hd { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .1em .2em 0 .45em; }
.mon-hd b { font-size: 1.02em; font-weight: 560; }
.mon-tog { border: 0; background: none; color: var(--primary); font: inherit; font-size: .86em; font-weight: 560; padding: .55em .9em; border-radius: 99px; cursor: pointer; }
@media (hover: hover) { .mon-tog:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); } }
/* Phần xổ ra: chiều cao do lò xo của site.js (mở nảy như app: expandVertically(sizeBouncy); đóng không nảy). Phần vọt
   quá lộ ra nền của chính tấm thẻ. Khe lưới .75em thu về cùng lúc để thẻ đóng không dư một khoảng. */
.mon-x { grid-column: 1 / -1; height: 0; overflow: hidden; opacity: 0; margin-top: -.75em; transition: opacity var(--t-effects) ease, margin-top 300ms ease; }
.mon-card.more .mon-x { opacity: 1; margin-top: 0; }
.mon-xi { display: grid; grid-template-columns: 1fr 1fr; gap: .75em; }
.mon-xi .mt-wide { grid-column: 1 / -1; }
/* Sân khấu máy tính co cả màn cho vừa khi thẻ dài ra — co mượt, không nhảy. */
.fit.fit-anim { transition: transform var(--t-spatial) cubic-bezier(.2,0,0,1); }
.mon-note { grid-column: 1 / -1; margin: 0; padding: 0 .5em .2em; font-size: .74em; line-height: 1.4; color: var(--on-surface-v); }

/* Trong lúc chơi: màn hình AFK */
.afk { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: #000; color: rgba(255,255,255,.28); font-size: 1em; letter-spacing: .18em; font-weight: 560; opacity: 0; pointer-events: none; transition: opacity 700ms ease; }
.scr.afk-on .afk { opacity: 1; pointer-events: auto; cursor: pointer; }
/* Màn AFK phủ lên cả dòng báo / thông báo mô phỏng của trang. */
.scr .afk { z-index: 6; }
/* Dòng nhắc của màn AFK (chữ của app); chạm một lần ẩn/hiện phần gạch đầu dòng. */
.afk-hud { display: grid; gap: .7em; justify-items: center; text-align: center; padding: 0 6%; }
.afk-hud span { letter-spacing: 0; font-weight: 400; font-size: .82em; line-height: 1.55; color: rgba(255,255,255,.4); text-align: left; transition: opacity 240ms ease; }
.afk.bare .afk-hud span { opacity: 0; }
/* Game chạy thật (polar.js) phủ lên ảnh tĩnh, hiện ra từ khung vẽ đầu tiên. */
.game-live { opacity: 0; }
.game-live.on { opacity: 1; }
/* Phản hồi của công tắc trên màn game (#302). Dòng báo: viên thuốc tối như thông báo hệ thống, nảy xuống từ trên. */
.pl-note {
  position: absolute; left: 50%; top: 25%; z-index: 5; display: inline-flex; align-items: center; gap: .55em; max-width: 86%;
  padding: .5em 1.1em .5em .8em; border-radius: 999px; background: rgba(24,25,30,.9); color: #e3e1e9; font-size: 1em; font-weight: 500;
  white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -.8em) scale(.9);
  transition: opacity 200ms ease, transform var(--t-spatial) var(--ease-spatial);
}
.pl-note.on { opacity: 1; transform: translate(-50%, 0); }
.pl-ic { font-size: 1.3em; color: var(--primary); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.pl-note.on .ic-hz { animation: plSpin 700ms var(--ease-spatial); }
.pl-note.on .ic-focus { animation: plSpin 900ms var(--ease-spatial); }
.pl-note.on .ic-wifi { animation: plWave 900ms ease-out; }
.pl-note.on .ic-dnd { animation: plShake 520ms ease-out; }
@keyframes plSpin { from { transform: rotate(-180deg) scale(.4); } }
@keyframes plWave { 0% { transform: scale(.4); opacity: .3; } 40% { transform: scale(1.25); opacity: 1; } 100% { transform: none; } }
@keyframes plShake { 0%, 100% { transform: none; } 20% { transform: rotate(-18deg); } 45% { transform: rotate(14deg); } 70% { transform: rotate(-8deg); } }
/* Nhật ký lệnh của bảng công tắc: máy tính nằm ở khoảng trống dưới-trái (cạnh thẻ công tắc), điện thoại nằm dưới thẻ. */
.pl-log { position: absolute; left: 0; bottom: 0; width: 34%; height: 58%; display: flex; flex-direction: column; border-radius: 1.3em;
  background: color-mix(in oklab, var(--surface-lowest) 88%, #000); box-shadow: inset 0 0 0 1px var(--outline-v), 0 1.2em 2.4em -1.2em rgba(0,0,0,.6); overflow: hidden; }
.pl-log-h { display: flex; align-items: center; gap: .5em; padding: .75em .95em .55em; font-size: .8em; border-bottom: 1px solid color-mix(in oklab, var(--outline-v) 60%, transparent); }
.pl-log-h b { font-weight: 600; }
.pl-log-h small { margin-left: auto; color: var(--on-surface-v); font-size: .92em; }
.pl-dot { width: .55em; height: .55em; border-radius: 50%; background: #3fd08f; box-shadow: 0 0 0 .22em rgba(63,208,143,.18); }
.pl-log.busy .pl-dot { animation: plBlink 700ms ease-in-out infinite alternate; }
@keyframes plBlink { to { opacity: .35; } }
.pl-log-b { list-style: none; margin: 0; padding: .55em .95em .9em; flex: 1; overflow-y: auto; scrollbar-width: none; font-size: .7em; line-height: 1.5;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.6em); mask-image: linear-gradient(to bottom, transparent, #000 1.6em); }
.pl-log-b::-webkit-scrollbar { display: none; }
.pl-log-b li { margin: 0 0 .3em; overflow-wrap: anywhere; }
.pl-log-b .c, .pl-log-b .a, .pl-log-b .o { font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Roboto Mono", monospace; font-size: .96em; }
.pl-log-b .c { color: var(--on-surface); padding-left: 1.1em; text-indent: -1.1em; }
.pl-log-b .c::before { content: "$ "; color: #3fd08f; }
.pl-log-b .a { color: var(--tertiary); padding-left: 1.1em; text-indent: -1.1em; }
.pl-log-b .a::before { content: "› "; color: var(--tertiary); }
.pl-log-b .o { color: var(--on-surface-v); padding-left: 1.1em; }
.pl-log-b .n { color: var(--on-surface-v); padding-left: 1.1em; font-style: italic; }
.pl-log-b .h { color: var(--on-surface-v); font-weight: 600; margin-top: .7em; }
.pl-log-b .h:first-child { margin-top: 0; }
.pl-log-b .k { color: #3fd08f; font-weight: 600; }
/* Dòng mới gõ ra từ trái sang phải. */
.pl-log-b li.in { animation: plType 360ms steps(18, end) both; }
@keyframes plType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 1023px) {
  /* Điện thoại: máy → thẻ công tắc → nhật ký (thẻ đè lên đáy máy như cũ, nhật ký nằm hẳn bên dưới). */
  .comp-play { display: flex; flex-direction: column; }
  .pl-log { order: 2; position: relative; width: 100%; height: 15.5em; margin-top: 1em; }
}
/* Băng giá lướt vào từ mép màn khi bật Focus Mode. */
.frost { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(farthest-side at 50% 50%, transparent 50%, rgba(205,232,255,.55) 82%, rgba(240,248,255,.92) 100%); }
.frost.go { animation: frost 1400ms ease-out; }
@keyframes frost { 0% { opacity: 0; transform: scale(1.12); } 28% { opacity: 1; } 100% { opacity: 0; transform: none; } }
/* Thông báo nổi (heads-up) của Android khi Không làm phiền đang tắt: rơi xuống từ đỉnh màn, đè lên game. */
.hu {
  position: absolute; left: 50%; top: 3%; z-index: 5; display: flex; align-items: center; gap: .8em; width: min(56%, 26em);
  padding: .75em 1em; border-radius: 1.4em; background: rgba(46,47,53,.96); color: #e3e1e9; box-shadow: 0 .6em 1.6em -.4em rgba(0,0,0,.5);
  pointer-events: none; transform: translate(-50%, -140%); transition: transform var(--t-spatial) var(--ease-spatial);
}
.hu.on { transform: translate(-50%, 0); }
.hu-ic { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #3fa66b; color: #fff; font-size: 1.05em; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.hu-tx { display: grid; min-width: 0; line-height: 1.3; }
.hu-tx small { font-size: .78em; color: #c6c5d0; }
.hu-tx b { font-weight: 500; font-size: .95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ô biểu tượng của hàng nảy một nhịp khi bật/tắt; bật thì biểu tượng tô đặc. */
.a-ic.pop { animation: icPop 560ms var(--ease-spatial); }
@keyframes icPop { from { transform: scale(.78); } }
.a-ic .ms { transition: font-variation-settings 240ms ease; }
.play-card .a-ic.on .ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.play-card { padding: 1em 1.25em; }
.play-card .a-row { min-height: 3.4em; }
.play-card .a-div { margin: .55em 0; }
.play-card .a-link { padding: .35em .3em .35em 4em; font-size: .95em; }

/* Báo cáo: bảng dưới trồi lên sau khi rời game, game phía sau tối đi. */
.scrim { position: absolute; inset: 0; background: rgba(6,7,10,.62); opacity: 0; transition: opacity 500ms ease; }
.comp-rep.open .scrim { opacity: 1; }
.sheet { padding: .8em 1.15em 1.3em; background: var(--surface-low); transition: transform var(--t-sheet) var(--ease-sheet), opacity 260ms ease; }
.js .sheet { transform: translateY(3.5em); opacity: 0; }
.js .comp-rep.open .sheet { transform: none; opacity: 1; }
.sheet-handle { display: block; width: 2.2em; height: .26em; border-radius: 9px; background: var(--outline-v); margin: 0 auto 1.1em; }
.rp-head { display: grid; grid-template-columns: 3.4em 1fr auto; gap: .8em; align-items: center; margin-bottom: 1em; }
.rp-head img { width: 3.4em; height: 3.4em; border-radius: .85em; }
.rp-head b { display: block; font-size: 1.25em; font-weight: 560; }
.rp-head small { display: block; font-size: .78em; color: var(--on-surface-v); }
.rp-close { border: 0; background: none; padding: .2em; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.rp-close .ms { font-size: 1.6em; }
.rp-box { padding: 1em 1.15em; border-radius: 1.5em; background: var(--primary-c); color: var(--on-primary-c); }
.rp-box small { font-size: .85em; }
.rp-box b { display: block; font-size: 2.05em; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; margin: .1em 0 .25em; }
.rp-box p { font-size: .78em; line-height: 1.4; opacity: .9; }
.rp-sec { display: block; color: var(--primary); font-weight: 560; margin: 1.1em 0 .3em; }
.rp-trk { display: block; font-size: .82em; color: var(--on-surface-v); margin-bottom: .8em; }
.rp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.rp-tiles > div { padding: .85em .9em; border-radius: 1.3em; background: var(--surface-high); display: flex; flex-direction: column; gap: .2em; }
.rp-tiles .mt-h { font-size: .82em; }
.rp-tiles .mt-h .ms { color: var(--primary); }
.rp-tiles b { font-size: 1.55em; font-weight: 500; font-variant-numeric: tabular-nums; }
.rp-tiles small { font-size: .72em; line-height: 1.35; color: var(--on-surface-v); }
/* Bảng báo cáo đủ các phần của GameSessionSheet (#302): cuộn trong bảng như app, không kéo dài cả chương. */
.sheet-body { max-height: 31em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -.2em; padding: 0 .2em; }
.sheet-body::-webkit-scrollbar { display: none; }
/* Mờ mép trên/dưới bằng hai dải màu nền DÍNH trong khung cuộn, không bằng mask-image: mặt nạ trên vùng đang cuộn buộc vẽ lại
   cả thân bảng mỗi khung lúc tự cuộn (đo #302). site.js bật fade-t / fade-b theo vị trí cuộn. */
.sheet-body::before, .sheet-body::after { content: ""; position: sticky; z-index: 1; display: block; height: 2.2em; pointer-events: none; opacity: 0; transition: opacity 200ms ease; }
.sheet-body::before { top: 0; margin-bottom: -2.2em; background: linear-gradient(var(--surface-low), transparent); }
.sheet-body::after { bottom: 0; margin-top: -2.2em; background: linear-gradient(transparent, var(--surface-low)); }
.sheet-body.fade-t::before, .sheet-body.fade-b::after { opacity: 1; }
html:not(.js) .sheet-body::after { opacity: 1; }
/* Thanh cuộn mảnh tự vẽ, bám mép phải phần thân bảng (site.js đặt cỡ + vị trí). */
.sheet { position: relative; }
.sheet-bar { position: absolute; right: .38em; top: 2.3em; bottom: 1.3em; width: .22em; border-radius: 9px; background: color-mix(in oklab, var(--outline-v) 40%, transparent); pointer-events: none; }
.sheet-bar i { display: block; width: 100%; border-radius: inherit; background: var(--primary); opacity: .7; will-change: transform; }
.rp-none { color: var(--on-surface-v); }
.rp-cryo { display: flex; align-items: center; gap: .75em; font-size: .9em; margin-bottom: .6em; }
.rp-cryo .ms { flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .7em; background: var(--secondary-c); color: var(--on-secondary-c); font-size: 1.12em; }
.rp-cmp { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .5em; padding: .8em .9em; border-radius: 1.3em; background: var(--surface-high); font-size: .88em; }
.rp-cmp span { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-cmp .h { font-weight: 500; color: var(--on-surface-v); font-size: .92em; }
.rp-cmp .l { text-align: left; font-weight: 400; color: var(--on-surface-v); }
.rp-cmp i { grid-column: 1 / -1; height: 1px; background: color-mix(in oklab, var(--outline-v) 60%, transparent); }
.rp-cmp small { grid-column: 1 / -1; font-size: .86em; color: var(--on-surface-v); }
.rp-rec { font-size: .9em; margin: 0 0 .4em; }
.rp-play { display: flex; align-items: center; justify-content: center; gap: .6em; width: 100%; min-height: 3.25em; margin: 1em 0 1.6em; border: 0;
  border-radius: 1.06em; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer; }
.rp-play .ms { font-size: 1.25em; }

/* ---------- Hoàn tác ---------- */
.undo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(80px, 10vw, 140px); }
.undo .h2 { margin-bottom: 20px; }
.undo-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; color: var(--on-surface-v); }
.undo-list li { padding-left: 22px; position: relative; text-wrap: pretty; }
.undo-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 3px; background: var(--primary); transform: rotate(45deg); }
.ledger { padding: 22px; border-radius: 32px; background: var(--surface-c); box-shadow: inset 0 0 0 1px var(--outline-v); }
.lg-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 6px; }
.lg-head img { width: 44px; height: 44px; border-radius: 12px; }
.lg-game { display: flex; flex-direction: column; line-height: 1.3; }
.lg-game b { font-weight: 600; }
.lg-st { font-size: 14px; color: var(--on-surface-v); display: inline-flex; align-items: center; gap: 6px; }
.lg-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fd08f; }
.lg-st.st-out::before { background: var(--primary); }
.lg-btn { margin-left: auto; }
.ledger .st-out { display: none; }
.ledger[data-state="out"] .st-in { display: none; }
.ledger[data-state="out"] .st-out { display: inline-flex; }
.lg-cols, .lg-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.lg-cols { font-size: 13px; color: var(--on-surface-v); padding: 4px 14px 10px; }
.lg-row { padding: 14px; border-radius: 18px; font-size: 15px; }
.lg-row:nth-child(odd) { background: color-mix(in oklab, var(--surface-high) 70%, transparent); }
.lg-o { color: var(--on-surface-v); font-variant-numeric: tabular-nums; }
.lg-n { display: flex; align-items: center; gap: 8px; font-weight: 560; font-variant-numeric: tabular-nums; }
.lg-v { display: inline-block; color: var(--primary); transition: color 300ms ease; }
.ledger[data-state="out"] .lg-v { color: var(--on-surface); }
.v-out, .ledger[data-state="out"] .v-in { display: none; }
.ledger[data-state="out"] .v-out { display: inline; }
.lg-ok { font-size: 18px; color: #3fd08f; transform: scale(0); transition: transform var(--t-spatial) var(--ease-spatial); }
.ledger[data-state="out"] .lg-ok { transform: scale(1); }
.lg-foot { margin-top: 14px; font-size: 13px; color: var(--on-surface-v); padding: 0 14px; }
@media (max-width: 960px) { .undo { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .ledger { padding: 14px; border-radius: 26px; }
  .lg-row, .lg-cols { grid-template-columns: minmax(0, 1fr) auto auto; padding-inline: 10px; gap: 10px; font-size: 13.5px; }
  .lg-o, .lg-v { white-space: nowrap; }
  .lg-head { flex-wrap: wrap; }
}

/* ---------- Shizuku ---------- */
.shz { padding: clamp(72px, 10vw, 140px) 0; background: var(--surface-low); }
.shz-copy { max-width: 46em; margin-bottom: clamp(40px, 6vw, 72px); }
.shz-copy .h2 { margin-bottom: 20px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.step h3 { font-size: 21px; line-height: 1.25; font-weight: 600; margin: 22px 0 10px; letter-spacing: -.01em; }
.step p { color: var(--on-surface-v); font-size: 16px; text-wrap: pretty; }
.shape { position: relative; display: grid; place-items: center; width: 72px; height: 72px; color: var(--on-primary-c); }
.shape svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shape path { fill: var(--primary-c); }
.shape b { position: relative; font-size: 26px; font-weight: 600; font-variation-settings: 'ROND' 100; }
.shz-notes { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 10px; max-width: 46em; color: var(--on-surface-v); }
.shz-notes .btn { justify-self: start; margin: 6px 0 0 -14px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step { display: grid; grid-template-columns: 72px 1fr; column-gap: 20px; } .step .shape { grid-row: span 2; } .step h3 { margin-top: 4px; } }

/* ---------- Giá & quyền riêng tư ---------- */
.price { padding-top: clamp(80px, 11vw, 150px); padding-bottom: clamp(40px, 6vw, 80px); }
.price .h2 { margin-bottom: clamp(28px, 4vw, 48px); max-width: 16em; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: 32px; background: var(--surface-c); }
.plan h3 { font-size: 26px; font-weight: 600; margin-bottom: 12px; letter-spacing: -.01em; }
.plan p { color: var(--on-surface-v); max-width: 32em; }
.plan-pro { background: var(--primary-c); }
.plan-pro h3, .plan-pro p { color: var(--on-primary-c); }
.pro-badge { position: absolute; right: 24px; top: -22px; width: 78px; height: 78px; color: var(--on-primary); }
.pro-badge path { fill: var(--primary); }
.pro-badge b { font-size: 16px; letter-spacing: .04em; }
.privacy { margin-top: 16px; padding: clamp(24px, 3vw, 36px); border-radius: 32px; box-shadow: inset 0 0 0 1px var(--outline-v); }
.privacy h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.privacy p { color: var(--on-surface-v); max-width: 52em; }
.privacy .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan-pro { margin-top: 18px; } }

/* ---------- Câu hỏi ---------- */
.faq { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(48px, 6vw, 80px); }
.faq .h2 { margin-bottom: 28px; }
.qa { display: grid; gap: 8px; max-width: 52em; }
.qa details { border-radius: 24px; background: var(--surface-c); transition: background-color 200ms ease, border-radius var(--t-spatial) var(--ease-spatial); }
.qa details[open] { background: var(--surface-high); border-radius: 28px; }
.qa summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 18px 20px 18px 24px; cursor: pointer; font-size: 17.5px; font-weight: 560; line-height: 1.35; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary > span:not(.qa-ic) { flex: 1; }
.qa-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-highest); transition: border-radius var(--t-spatial) var(--ease-spatial), background-color 200ms ease, transform var(--t-spatial) var(--ease-spatial); }
.qa-ic .ms { font-size: 22px; transition: transform var(--t-spatial) var(--ease-spatial); }
.qa details[open] .qa-ic { border-radius: 12px; background: var(--primary-c); color: var(--on-primary-c); }
.qa details[open] .qa-ic .ms { transform: rotate(45deg); }
.qa-a { padding: 0 24px 22px; color: var(--on-surface-v); max-width: 46em; }

.end { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(72px, 10vw, 140px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.end .play-badge img { height: 74px; margin: -11px; }

.foot { background: var(--surface-lowest); padding: 40px 0 48px; font-size: 14px; color: var(--on-surface-v); }
.foot-in { display: grid; grid-template-columns: auto 1fr; gap: 20px 32px; align-items: center; }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand img { border-radius: 8px; }
.foot-brand b { display: block; color: var(--on-surface); font-size: 15px; line-height: 1.2; }
.foot-brand small { display: block; font-size: 12.5px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; }
.foot-links a { padding: 6px 10px; border-radius: 999px; text-decoration: none; }
@media (hover: hover) { .foot-links a:hover { background: var(--surface-high); color: var(--on-surface); } }
.foot-note { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.55; max-width: 60em; opacity: .85; }
@media (max-width: 720px) { .foot-in { grid-template-columns: 1fr; } .foot-links { justify-content: flex-start; margin-left: -10px; } }

/* =====================================================================================================================
   Lớp hiệu ứng (fx.js): nền sống, khối 3D, chữ biến thiên, con trỏ âm bản. Tắt JS thì các phần này chỉ là trang trí tĩnh.
   ===================================================================================================================== */

/* ---------- Ánh nền đổi tông theo mục + hạt phim ---------- */
@property --amb1 { syntax: '<color>'; inherits: true; initial-value: #354479; }
@property --amb2 { syntax: '<color>'; inherits: true; initial-value: #5b3d57; }
/* Biến màu đặt ở chính .amb (không ở :root): đổi tông chỉ tính lại kiểu cho vài phần tử nền, không cho cả trang. */
.amb { --amb1: var(--primary-c); --amb2: var(--tertiary-c); transition: --amb1 1.4s ease, --amb2 1.4s ease; }
.amb[data-amb="t"] { --amb1: var(--tertiary-c); --amb2: var(--primary-c); }
.amb[data-amb="s"] { --amb1: var(--secondary-c); --amb2: var(--tertiary-c); }
.amb { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.amb i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform; }
.amb i:nth-child(1) { left: -42vmax; top: -48vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--amb1) 62%, transparent), transparent); animation: ambA 34s steps(34) infinite alternate; }
.amb i:nth-child(2) { right: -48vmax; top: 4vh; background: radial-gradient(closest-side, color-mix(in oklab, var(--amb2) 48%, transparent), transparent); animation: ambB 42s steps(42) infinite alternate; }
.amb i:nth-child(3) { left: 4vw; bottom: -62vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--amb1) 34%, transparent), transparent); animation: ambC 50s steps(50) infinite alternate; }
/* fx.js vẽ ba quầng vào canvas nhỏ (.amb.cv): tắt nền CSS + chuyển tiếp màu CSS (JS tự chuyển màu, đọc đích ngay). */
.amb.cv { transition: none; }
.amb.cv i { background: none; }
.amb-cv { display: block; width: 100%; height: 100%; }
/* Nhịp bậc: xem hsGlow. Ba quầng bước ĐÚNG 100 ms (10 đoạn × thời lượng/10 s bậc) và cùng bắt đầu → cùng đổi trong một
   khung: GPU thức 10 lần/giây chứ không 30 (lệch pha nhau). Đổi thời lượng thì giữ số bậc = thời lượng ÷ 0,1 s ÷ 10. */
@keyframes ambA { 0% { transform: translate(0vw, 0vh) scale(1); } 10% { transform: translate(0.355vw, 0.276vh) scale(1.002); } 20% { transform: translate(1.47vw, 1.143vh) scale(1.01); } 30% { transform: translate(3.373vw, 2.624vh) scale(1.022); } 40% { transform: translate(5.974vw, 4.646vh) scale(1.04); } 50% { transform: translate(9vw, 7vh) scale(1.06); } 60% { transform: translate(12.026vw, 9.354vh) scale(1.08); } 70% { transform: translate(14.627vw, 11.376vh) scale(1.098); } 80% { transform: translate(16.53vw, 12.857vh) scale(1.11); } 90% { transform: translate(17.645vw, 13.724vh) scale(1.118); } 100% { transform: translate(18vw, 14vh) scale(1.12); } }
@keyframes ambB { 0% { transform: translate(0vw, 0vh) scale(1); } 10% { transform: translate(-0.316vw, 0.394vh) scale(0.998); } 20% { transform: translate(-1.307vw, 1.633vh) scale(0.992); } 30% { transform: translate(-2.998vw, 3.748vh) scale(0.981); } 40% { transform: translate(-5.31vw, 6.638vh) scale(0.967); } 50% { transform: translate(-8vw, 10vh) scale(0.95); } 60% { transform: translate(-10.69vw, 13.362vh) scale(0.933); } 70% { transform: translate(-13.002vw, 16.252vh) scale(0.919); } 80% { transform: translate(-14.693vw, 18.367vh) scale(0.908); } 90% { transform: translate(-15.684vw, 19.606vh) scale(0.902); } 100% { transform: translate(-16vw, 20vh) scale(0.9); } }
@keyframes ambC { 0% { transform: translate(0vw, 0vh) scale(1); } 10% { transform: translate(0.434vw, -0.237vh) scale(1.002); } 20% { transform: translate(1.797vw, -0.98vh) scale(1.007); } 30% { transform: translate(4.123vw, -2.249vh) scale(1.015); } 40% { transform: translate(7.301vw, -3.983vh) scale(1.027); } 50% { transform: translate(11vw, -6vh) scale(1.04); } 60% { transform: translate(14.699vw, -8.017vh) scale(1.053); } 70% { transform: translate(17.877vw, -9.751vh) scale(1.065); } 80% { transform: translate(20.203vw, -11.02vh) scale(1.073); } 90% { transform: translate(21.566vw, -11.763vh) scale(1.078); } 100% { transform: translate(22vw, -12vh) scale(1.08); } }
.amb::after {
  content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Lưới dựng chữ mờ sau tiêu đề mở đầu (như bản vẽ dựng font), tan dần ra mép. */
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: 40px calc(-1 * var(--gutter)) 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(color-mix(in oklab, var(--outline-v) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--outline-v) 55%, transparent) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(60% 55% at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 55% at 30% 40%, #000, transparent 75%);
}

/* ---------- Khối 3D (vẽ bằng canvas theo màu chủ đề) ---------- */
.orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orb { position: absolute; width: var(--s, 240px); aspect-ratio: 1; will-change: transform; }
.orb canvas { display: block; width: 100%; height: 100%; animation: orbFloat 10s steps(25) infinite alternate; }
.orb.far canvas { filter: blur(5px); opacity: .7; }
.orb:nth-child(2n) canvas { animation-duration: 13s; animation-direction: alternate-reverse; }
/* Nhịp bậc ~20 lần/giây (13 s: ~15): xem hsGlow. */
@keyframes orbFloat { 0% { transform: translateY(-3%) rotate(-3deg); } 12.5% { transform: translateY(-2.813%) rotate(-2.813deg); } 25% { transform: translateY(-2.225%) rotate(-2.225deg); } 37.5% { transform: translateY(-1.243%) rotate(-1.243deg); } 50% { transform: translateY(0%) rotate(0deg); } 62.5% { transform: translateY(1.243%) rotate(1.243deg); } 75% { transform: translateY(2.225%) rotate(2.225deg); } 87.5% { transform: translateY(2.813%) rotate(2.813deg); } 100% { transform: translateY(3%) rotate(3deg); } }
.o1 { --s: min(460px, 36vw); right: -7%; top: 3%; }
.o2 { --s: min(380px, 30vw); left: -12%; bottom: -16%; }
.o3 { --s: 140px; left: 43%; top: 11%; }
.o4 { --s: 230px; right: 26%; bottom: -10%; }
@media (max-width: 960px) {
  .o1 { --s: 78vw; right: -30%; top: auto; bottom: 18%; }
  .o2 { display: none; }
  .o3 { --s: 104px; left: auto; right: -7%; top: 40%; }
  .o4 { --s: 170px; right: auto; left: -16%; bottom: 2%; }
}

/* ---------- Dải chữ chạy ---------- */
.kin { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 100px) 0 clamp(8px, 2vw, 24px); user-select: none; }
.kin-row {
  white-space: nowrap; font-size: clamp(54px, 11vw, 170px); line-height: 1.04; letter-spacing: -.035em; font-weight: 560;
  font-variation-settings: 'wght' 560, 'wdth' 100, 'ROND' 100;
}
/* fx.js chỉ ghi transform của hai dải (trượt + nghiêng) mỗi khung; hình khối xoay bằng hoạt ảnh CSS chạy trên compositor. */
.kin-track { display: inline-block; will-change: transform; transform-origin: 50% 100%; }
.kin-loop { display: inline-flex; align-items: center; gap: .3em; padding-right: .3em; animation: kinLoop 120s linear infinite; }
.kin-row[data-dir="-1"] .kin-loop { animation-direction: reverse; }
@keyframes kinLoop { to { transform: translate3d(-50%, 0, 0); } }
.kin-row:nth-child(2) .ki { background: linear-gradient(100deg, var(--primary), var(--tertiary) 60%, var(--primary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kin-row:nth-child(1) .ki { color: var(--on-surface); }
.ks { flex: none; display: inline-block; width: .56em; height: .56em; }
.ks svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ks.k0 svg { transform: rotate(18deg); }
.ks.k2 svg { transform: rotate(-24deg); }
/* Hoạt ảnh CSS chỉ chạy khi phần tử trong màn hình (fx.js gắn .live): mỗi hoạt ảnh đang chạy đều tốn nhịp tính kiểu. */
.kin .kin-loop, .orb canvas { animation-play-state: paused; }
.kin.live .kin-loop, .orb.live canvas { animation-play-state: running; }
.ks path { fill: var(--primary-c); }
.kin-row:nth-child(2) .ks path { fill: var(--tertiary-c); }
.ks.k1 path { fill: var(--primary); }
/* Thị sai khối 3D + dải chữ theo cuộn bằng hoạt ảnh GẮN THANH CUỘN (#302 vòng 5): chạy trên compositor, khớp từng khung
   cuộn kể cả 120 Hz. Bản JS theo sự kiện cuộn trễ một nhịp và thưa hơn nhịp cuộn của điện thoại → khối/dải chữ giật
   ("web như 30 Hz"). fx.js đặt --pd (biên độ thị sai) và --kh/--kn (nửa dải, số vòng); trình duyệt chưa có
   animation-timeline thì fx.js tự dời như cũ. scroll(root): .kin có overflow:hidden nên tự nó cũng là "vùng cuộn".
   view-timeline-inset 0: mặc định dải view() trừ scroll-padding-top 88px của html → lệch công thức (đo: ~4%). */
@supports (animation-timeline: view()) {
  .orbs { view-timeline-name: --orbs; view-timeline-inset: 0; }
  .js:not(.no-motion) .orb { animation: orbPar linear both; animation-timeline: --orbs; }
  @keyframes orbPar { from { translate: 0 calc(-1 * var(--pd, 0px)); } to { translate: 0 var(--pd, 0px); } }
  .js:not(.no-motion) .kin-track { animation: kinPar linear both; animation-timeline: scroll(root); animation-iteration-count: var(--kn, 1); }
  .js:not(.no-motion) .kin-row[data-dir="-1"] .kin-track { animation-direction: reverse; }
  @keyframes kinPar { from { translate: 0 0; } to { translate: calc(-1 * var(--kh, 0px)) 0; } }
}

/* ---------- Chữ tách (fx.js) ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kw { display: inline-block; white-space: nowrap; }
.kl { display: block; white-space: nowrap; }
.kl-c { contain: size layout style; }
/* Chữ cái ở "ô" cố định khi phình theo con trỏ (fx.js pin): rộng đúng như lúc đứng yên, vị trí đổi bằng transform. */
.kc-pin { display: inline-block; }
/* Khối chữ có nở: kerning đo sẵn và cộng vào khoảng chữ của từng chữ cái (fx.js kern) — tắt kerning/ghép chữ của trình
   duyệt để lúc nở (mỗi chữ một phông) và lúc đứng yên dựng giống hệt nhau, không giật. */
.kt.nk { font-kerning: none; font-variant-ligatures: none; }
/* Chữ đang đổi dáng có lớp riêng (fx.js liveLayer, site.js chapMorph): không kéo theo vẽ lại quầng mờ / lưới / số chương
   nằm chung mảng ảnh. Tiêu đề đầu trang "thở" gần như liên tục nên giữ lớp luôn (chỉ khi có hiệu ứng). Số chương KHÔNG
   tách lớp: nó nằm dưới chữ (z-index -1) nên tách ra là kéo cả phần chữ phía trên thành lớp chồng — đo #303 (điện thoại,
   3 chương sáng): chỉ tách tên chương 113–137 khung, tách cả số 78–102, không tách gì 62–75. */
.kx-live, .js:not(.no-motion) .hero-h, .chap.morphing .h3 { will-change: transform; }
/* Màn chạm: tiêu đề giữ cử chỉ NGANG cho hiệu ứng chữ phình bám ngón (fx.js tapFx gắn html.tfx khi chạy — không có ở
   giảm chuyển động / không JS), vuốt dọc vẫn cuộn trang, chụm vẫn phóng to. Trang không cuộn ngang nên không mất gì.
   Danh sách tiêu đề vừa phải khớp SWELL_H trong fx.js (tách ở lần chạm đầu, nên luật phải có sẵn từ trước). */
.tfx .hero-h, .tfx .h2, .tfx .fx-h, .tfx .chap .h3, .tfx .step h3, .tfx .plan:not(.plan-pro) h3, .tfx .privacy h3, .tfx .cm-h { touch-action: pan-y pinch-zoom; }

/* ---------- Câu chuyện: chương đang xem sáng lên, ánh sau sân khấu đổi tông ---------- */
/* Biến tông nằm trên chính ::before (không kế thừa): sân khấu chứa cả năm màn, đổi biến ở .stage sẽ tính lại cả cây. */
@property --tone { syntax: '<color>'; inherits: false; initial-value: #354479; }
.stage::before {
  content: ""; position: absolute; inset: -14% -20%; z-index: -1; pointer-events: none;
  --tone: var(--primary-c); transition: --tone 900ms ease;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--tone) 70%, transparent), transparent 78%);
}
.stage[data-tone="freeze"]::before, .stage[data-tone="rep"]::before { --tone: var(--tertiary-c); }
.stage[data-tone="mon"]::before { --tone: var(--secondary-c); }
@media (min-width: 1024px) {
  .js .chap-in { opacity: .42; transition: opacity 600ms ease, transform var(--t-spatial) var(--ease-spatial); }
  .js .chap.chap-on .chap-in { opacity: 1; }
}

/* ---------- Khu nền sáng (hoàn tác): bảng màu SÁNG cùng màu gốc, như trang giấy trong ảnh minh hoạ của Google ---------- */
.zone-light {
  --primary: #4d5c92; --on-primary: #ffffff; --primary-c: #dce1ff; --on-primary-c: #354479; --secondary: #595d72; --secondary-c: #dee1f9; --on-secondary-c: #424659;
  --tertiary: #75546f; --tertiary-c: #ffd7f5; --surface: #faf8ff; --surface-lowest: #ffffff; --surface-low: #f4f2fa; --surface-c: #efedf4; --surface-high: #e9e7ef;
  --surface-highest: #e3e1e9; --surface-bright: #faf8ff; --on-surface: #1a1b21; --on-surface-v: #45464f; --outline: #767680; --outline-v: #c6c5d0;
  --inverse-surface: #2f3036; --inverse-on-surface: #f1f0f7; --ok: #1b8a5a;
}
:root[data-scheme="moss"] .zone-light {
  --primary: #1d6b4f; --primary-c: #a7f2cf; --on-primary-c: #00513a; --secondary: #4c6358; --secondary-c: #cfe9da; --on-secondary-c: #354b41; --tertiary: #3e6374; --tertiary-c: #c1e8fc;
  --surface: #f5fbf5; --surface-low: #eff5ef; --surface-c: #eaefea; --surface-high: #e4eae4; --surface-highest: #dee4de; --surface-bright: #f5fbf5;
  --on-surface: #171d1a; --on-surface-v: #404944; --outline: #707973; --outline-v: #bfc9c2; --inverse-surface: #2c322e; --inverse-on-surface: #ecf2ed;
}
:root[data-scheme="lagoon"] .zone-light {
  --primary: #006879; --primary-c: #aaedff; --on-primary-c: #004e5c; --secondary: #4b6269; --secondary-c: #cee7ee; --on-secondary-c: #334a51; --tertiary: #565d7e; --tertiary-c: #dde1ff;
  --surface: #f5fafc; --surface-low: #eff4f6; --surface-c: #e9eff1; --surface-high: #e4e9eb; --surface-highest: #dee3e5; --surface-bright: #f5fafc;
  --on-surface: #171c1e; --on-surface-v: #3f484b; --outline: #70797b; --outline-v: #bfc8cb; --inverse-surface: #2c3133; --inverse-on-surface: #ecf2f4;
}
:root[data-scheme="amber"] .zone-light {
  --primary: #845415; --primary-c: #ffddbb; --on-primary-c: #673d00; --secondary: #725a41; --secondary-c: #fdddbd; --on-secondary-c: #58432c; --tertiary: #56633b; --tertiary-c: #d9e9b6;
  --surface: #fff8f4; --surface-low: #fff1e6; --surface-c: #faebe0; --surface-high: #f4e6da; --surface-highest: #eee0d5; --surface-bright: #fff8f4;
  --on-surface: #211a14; --on-surface-v: #50453a; --outline: #827568; --outline-v: #d4c4b5; --inverse-surface: #372f27; --inverse-on-surface: #fdeee3;
}
:root[data-scheme="rose"] .zone-light {
  --primary: #8d4a5c; --primary-c: #ffd9e0; --on-primary-c: #713344; --secondary: #75565d; --secondary-c: #ffd9e0; --on-secondary-c: #5b3f45; --tertiary: #7b5733; --tertiary-c: #ffdcbe;
  --surface: #fff8f7; --surface-low: #fff0f2; --surface-c: #fbeaec; --surface-high: #f5e4e6; --surface-highest: #efdee1; --surface-bright: #fff8f7;
  --on-surface: #22191b; --on-surface-v: #514346; --outline: #847376; --outline-v: #d6c2c5; --inverse-surface: #382e30; --inverse-on-surface: #feedef;
}
.undo-zone {
  position: relative; isolation: isolate; overflow: hidden; width: calc(100% - 2 * clamp(8px, 1.6vw, 24px)); max-width: 1500px;
  margin: clamp(48px, 8vw, 120px) auto 0; border-radius: clamp(32px, 4.5vw, 64px); background: var(--surface); color: var(--on-surface);
}
.undo-zone .undo { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.undo-zone .lg-ok { color: var(--ok); }
.undo-zone .lg-st.st-in::before { background: var(--ok); }
.undo-zone .ledger { background: var(--surface-lowest); box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--primary) 45%, transparent), inset 0 0 0 1px var(--outline-v); }
@media (max-width: 520px) {
  .undo-zone { width: calc(100% - 12px); }
  .undo-zone .undo { padding-inline: 12px; }
}
.o5 { --s: min(420px, 42vw); right: -9%; top: -14%; }
@media (max-width: 960px) { .o5 { --s: 62vw; right: -24%; top: -10%; opacity: .55; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .undo-zone { animation: zoneIn linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    /* Chỉ transform: hoạt ảnh theo cuộn chạy trên compositor, không tính lại kiểu/vẽ lại mỗi khung. */
    @keyframes zoneIn { from { transform: scale(.92) translateY(40px); } }
  }
}

/* ---------- Đường tiến độ sóng nối các bước Shizuku ---------- */
.steps { position: relative; }
.steps .wv { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.step { position: relative; z-index: 1; }
.wv-act, .wv-ina { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.wv-act { stroke: var(--primary); }
.wv-ina { stroke: var(--secondary-c); }
.wv-stop { fill: var(--primary); transition: opacity 200ms ease; }
.step .shape path { transition: fill 420ms ease; }
.step .shape b { transition: color 420ms ease; }
.step.on .shape path { fill: var(--primary); }
.step.on .shape b { color: var(--on-primary); }

/* ---------- Chữ "Cryo" cỡ lớn cuối trang ---------- */
.fin { position: relative; isolation: isolate; text-align: center; padding: clamp(16px, 4vw, 40px) 0 clamp(24px, 5vw, 64px); overflow: hidden; user-select: none; }
.fin-word {
  display: block; font-size: clamp(120px, 31vw, 480px); line-height: .86; letter-spacing: -.045em; white-space: nowrap;
  font-variation-settings: 'wght' 330, 'wdth' 92, 'ROND' 100;
}
/* Tô chữ bằng dải màu phải đặt ở chính phần tử có transform (từ do fx.js tách ra): background-clip:text của cha
   không vẽ chữ nằm trong con tạo ngữ cảnh xếp lớp riêng. */
.fin-word, .fin-word .kw {
  background: linear-gradient(110deg, var(--primary) 10%, var(--tertiary) 55%, var(--primary) 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Nới vùng tô ra ngoài nét chữ (khoảng chữ âm + đuôi chữ y) mà không đổi bố cục. */
.fin-word .kw { padding: .06em .12em .24em; margin: -.06em -.12em -.24em; }
/* fx.js tách chữ: chỉ chữ cái tô dải màu (kích thước + vị trí dải do fx.js đặt theo chỗ của từng chữ, nên vẫn liền một
   dải); khối cha và từ thôi tô — cả hai cùng tô thì Chrome vẽ thêm một bản chữ lệch chỗ lúc từ đang bay lên ("CryoCryo",
   user #302). Chữ cái có transform riêng khi phình, nên tô ở chính nó mới vẽ được. */
.fin-word.split, .fin-word.split .kw { background: none; }
.fin-word.split .kc {
  /* Lặp ngang: chữ phình tràn ra ngoài bề rộng từ lúc đứng yên vẫn có màu (đầu = cuối dải = primary nên nối liền). */
  background-image: linear-gradient(110deg, var(--primary) 10%, var(--tertiary) 55%, var(--primary) 95%); background-repeat: repeat-x;
  -webkit-background-clip: text; background-clip: text; color: transparent; padding: .06em .12em .24em; margin: -.06em -.12em -.24em;
}
.o6 { --s: min(260px, 26vw); left: 8%; top: 4%; }
.o7 { --s: min(220px, 22vw); right: 7%; bottom: -6%; }

/* :hover chỉ cho thiết bị rê được (chuột): trên màn chạm, :hover "dính" lại sau cú chạm cho tới khi chạm chỗ khác — nút
   trông như đang bị chọn (#302). Mọi luật :hover trong tệp này bọc @media (hover: hover). */
/* ---------- Con trỏ âm bản ---------- */
html.cur-on, html.cur-on * { cursor: none !important; }
.m3-cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; mix-blend-mode: difference; opacity: 0; will-change: transform; }
.m3-cursor i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 6px; background: #fff; }
/* Vòng sáng quanh nút tô màu / nút có ảnh (đảo màu lên chúng ra tông xỉn, và huy hiệu Google Play không được đổi màu). */
.m3-halo i { background: none; box-shadow: inset 0 0 0 2px #fff; }
/* Phản hồi chạm (fx.js tapFx, kiểu Material ripple): lớp phủ đúng hình nút, gợn sóng lan từ chỗ ngón; thả tay thì tan. */
.tap-host { position: fixed; z-index: 999; pointer-events: none; overflow: hidden; contain: strict; transition: opacity 340ms ease; }
.tap-host.out { opacity: 0; }
.tap-rip { position: absolute; border-radius: 50%; transform: scale(.12); opacity: 0; transition: transform 560ms cubic-bezier(.2,0,0,1), opacity 120ms linear; }
.tap-host.on .tap-rip { transform: none; opacity: 1; }
/* Chạm vào chỗ không phải nút: vòng mảnh màu chủ đề nở ra rồi tan. */
.tap-ring { position: fixed; z-index: 999; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--primary) 80%, transparent), 0 0 18px -4px color-mix(in oklab, var(--primary) 60%, transparent);
  animation: tapRing 560ms cubic-bezier(.2,0,0,1) forwards; }
@keyframes tapRing { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }

/* ---------- Miễn phí & PRO: danh sách quyền lợi, thẻ PRO là điểm nhấn ---------- */
.plan p:empty { display: none; }
.perks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.perks li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; color: var(--on-surface-v); line-height: 1.5; }
.perks .ms {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 18px;
  background: var(--surface-high); color: var(--primary); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
/* Quyền lợi bật lên lần lượt khi thẻ vào màn hình (fx.js gắn .in; không có fx.js thì hiện sẵn). */
.fx .plan:not(.in) .perks li { opacity: 0; transform: translateY(12px) scale(.98); }
.fx .plan .perks li { transition: opacity 360ms ease, transform var(--t-spatial) var(--ease-spatial); }
.plan .perks li:nth-child(2) { transition-delay: 90ms; } .plan .perks li:nth-child(3) { transition-delay: 180ms; }
.plan-pro {
  isolation: isolate; overflow: hidden; transform-origin: 50% 60%;
  background: linear-gradient(155deg, color-mix(in oklab, var(--primary-c) 82%, #000), color-mix(in oklab, var(--tertiary-c) 70%, #000));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 32%, transparent), 0 40px 80px -42px color-mix(in oklab, var(--primary) 60%, transparent);
}
.plan-pro h3 { font-size: clamp(28px, 1.4rem + 1vw, 36px); background: linear-gradient(100deg, var(--on-primary-c), var(--primary) 60%, var(--tertiary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-pro .perks li { color: var(--on-primary-c); }
.plan-pro .perks .ms { border-radius: 50%; background: color-mix(in oklab, var(--primary) 24%, transparent); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 35%, transparent); }
/* Cực quang xoay chậm phía sau (chỉ transform → compositor; dừng khi thẻ khuất) + đốm sáng theo con trỏ + khối 3D. */
.pro-aura {
  position: absolute; z-index: -2; inset: -70%; pointer-events: none; opacity: .5;
  animation: proSpin 20s linear infinite; animation-play-state: paused;
}
/* Làm mờ ở lớp con đứng yên (#303, như quầng thẻ hub cũ trước #311): xoay cả khối không đổi kết quả làm mờ, nên mờ 46px được vẽ một
   lần thay vì GPU làm lại trên cả vùng cực quang mỗi khung trong lúc nó xoay. */
.pro-aura::before {
  content: ""; position: absolute; inset: 0; filter: blur(46px);
  background: conic-gradient(from 0deg, var(--primary), transparent 22%, var(--tertiary) 40%, transparent 58%, var(--primary-c) 75%, var(--primary));
}
.plan-pro.live .pro-aura { animation-play-state: running; }
@keyframes proSpin { to { transform: rotate(1turn); } }
.pro-shine { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity 400ms ease; background: radial-gradient(360px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,.16), transparent 62%); }
@media (hover: hover) { .plan-pro:hover .pro-shine { opacity: 1; } }
.plan-pro .pro-badge { top: 20px; right: 20px; }
/* Khối 3D chỉ ló ở góc dưới phải; danh sách chừa lề phải để chữ không nằm đè lên khối. */
.o8 { --s: 170px; right: -64px; bottom: -84px; opacity: .8; }
.plan-pro .perks { padding-right: 64px; }
@media (max-width: 760px) { .o8 { --s: 140px; right: -60px; bottom: -76px; } .plan-pro .perks { padding-right: 36px; } }

/* ---------- Cộng đồng Discord ---------- */
.community { padding-top: clamp(40px, 6vw, 80px); }
.cm-card {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 20px 28px; padding: clamp(24px, 3.5vw, 40px); border-radius: 32px; box-shadow: inset 0 0 0 1px var(--outline-v);
  background: linear-gradient(115deg, var(--surface-c) 30%, color-mix(in oklab, var(--secondary-c) 70%, var(--surface-c)));
}
.cm-h { font-size: clamp(22px, 1.2rem + .8vw, 30px); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 8px; font-variation-settings: 'ROND' 100; }
.cm-tx p { color: var(--on-surface-v); max-width: 40em; text-wrap: pretty; }
.cm-ic .ms { position: relative; font-size: 30px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.o9 { --s: 230px; right: -70px; top: -96px; opacity: .45; }
@media (max-width: 760px) { .cm-card { grid-template-columns: 1fr; } .cm-card .btn { justify-self: start; } .o9 { --s: 170px; right: -60px; top: -70px; } }

/* ---------- Trạng thái ban đầu của chuyển động (chỉ khi JS chạy) ---------- */
/* Nền hiện dần và LẦN LƯỢT (#305, user: "khi mới vô, thành phần ở nền hiện lên đầu tiên một cách tức thì → khựng"). Chữ đầu
   trang chờ phông (≤ 0,9 s) nên trước đây nền sáng bừng ngay khung đầu, khối 3D bật ra lúc fx.js vẽ xong, rồi mới tới chữ.
   Nay: ánh nền sáng dần từ khung đầu (đèn bật lên trong lúc chờ phông); khi trang mở (.booted) quầng sau điện thoại và lưới
   dựng chữ hiện dần, khối 3D nảy vào lần lượt SAU khi chữ đã bắt đầu nở. Chỉ opacity/scale → chạy trên compositor;
   animation chỉ giữ `backwards` nên xong là gỡ hẳn, không để lại lớp hoạt ảnh. */
.js:not(.no-motion) .amb { animation: ambIn 1.8s cubic-bezier(.2, 0, 0, 1) backwards; }
@keyframes ambIn { from { opacity: 0; } }
.js:not(.no-motion):not(.booted) .hero::before, .js:not(.no-motion):not(.booted) .hero::after { opacity: 0; }
.booted .hero::before { transition: opacity 1.4s cubic-bezier(.2, 0, 0, 1) .2s; }
.booted .hero::after { transition: opacity 1.8s ease .55s; }
.js:not(.no-motion):not(.booted) .hero .orb { opacity: 0; }
.js:not(.no-motion):not(.booted) .hero .orb canvas { scale: .55; }
.booted .hero .orb { transition: opacity .7s ease var(--od, .5s); }
.booted .hero .orb canvas { transition: scale 1.1s var(--ease-spatial) var(--od, .5s); }
.hero .o1 { --od: .5s; } .hero .o3 { --od: .66s; } .hero .o2 { --od: .82s; } .hero .o4 { --od: .98s; }
/* Khung điện thoại rỗng cũng chờ (trước đây nằm đen sẵn ~1,3 s trước khi nội dung bay vào): nảy lên ngay trước các khối. */
.js:not(.no-motion):not(.booted) .hero-phone { opacity: 0; scale: .94; }
.booted .hero-phone { transition: opacity .5s ease .1s, scale .9s var(--ease-spatial) .1s; }
.js:not(.no-motion) .hero-h .hl, .js:not(.no-motion) .hero-in { opacity: 0; }
.js:not(.no-motion) .hero-phone [data-b] { opacity: 0; }
.js:not(.no-motion) .slot [data-b] { opacity: 0; }

/* Đổi màu kiểu đổi hình nền: lộ dần theo hình tròn từ ô màu vừa bấm. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vtReveal 760ms cubic-bezier(.2, 0, 0, 1); }
@keyframes vtReveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .amb i, .orb canvas, .kin-loop { animation: none; }
}