/* ============================================================
   system.css — LỚP THỐNG NHẤT toàn site (flat, 1 phong cách) — chép NAVSEnglish 20/10/2026.
   Nạp SAU ui-components.css. Chuẩn hoá:
     1) Chuyển trang mượt (View Transitions)
     2) Kích thước trang — 1 nguồn duy nhất
     3) Nhịp section + nền/bo góc phẳng nhất quán
   ============================================================ */

/* ── 1) CHUYỂN TRANG mượt ──────────────────────────────────────
   View Transitions API: crossfade khi điều hướng cùng origin
   (Chromium/Cốc Cốc/Edge). Trình duyệt cũ → bỏ qua, vẫn chạy bình thường. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: navsVtOut .16s var(--ease, ease) both; }
::view-transition-new(root) { animation: navsVtIn  .24s var(--ease, ease) both; }
@keyframes navsVtOut { to   { opacity: 0; } }
@keyframes navsVtIn  { from { opacity: 0; } to { opacity: 1; } }
/* Fallback cho trình duyệt không hỗ trợ → fade-in nhẹ lần tải đầu */
@supports not (view-transition-name: none) {
  body { animation: navsVtIn .28s var(--ease, ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), body { animation: none !important; }
}

/* ── 2) KÍCH THƯỚC TRANG — 1 chuẩn duy nhất ────────────────────── */
/* TTKK KHÁC NAVS có chủ đích: --page-w giữ 1200px khai ở design-tokens.css (NAVS 1140) — đổi ở đây là co hẹp mọi
   trang TTKK đang dùng var(--page-w) (hub HSK, pinyin, slide…). Cũng KHÔNG chép khối ép bề ngang các khung cũ
   (.learn-shell, .kh-wrap…): ở TTKK chúng tự đặt bề ngang trong trang (vd /kich-hoat 720px). */
:root {
  --page-w-wide:   1280px;  /* báo cáo dày: chấm bài, so sánh gói */
  --page-w-narrow: 820px;   /* đọc 1 cột: bài học, bài viết, FAQ */
  --page-pad:      var(--space-4);
}
.page         { width: 100%; max-width: var(--page-w, 1200px); margin-inline: auto; padding-inline: var(--page-pad); }
.page--wide   { max-width: var(--page-w-wide); }
.page--narrow { max-width: var(--page-w-narrow); }
@media (max-width: 768px) { :root { --page-pad: var(--space-3); } }

/* ── 3) NỀN / BO GÓC / ĐỔ BÓNG phẳng nhất quán ─────────────────── */
/* Utility cho trang mới + chuẩn hoá cảm giác phẳng (border > shadow). */
.flat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: border-color var(--dur-base, .2s) var(--ease, ease), box-shadow var(--dur-base, .2s) var(--ease, ease);
}
.flat-card:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); box-shadow: var(--shadow-sm); }

/* Section rhythm chuẩn (khoảng cách dọc giữa các khối) */
.sec-y    { padding-block: clamp(var(--space-8), 5vw, var(--space-12)); }
.stack-4  > * + * { margin-top: var(--space-4); }
.stack-6  > * + * { margin-top: var(--space-6); }