/* ============================================================
   system.css — LỚP THỐNG NHẤT toàn site (flat, 1 phong cách)
   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 ────────────────────── */
:root {
  --page-w:        1140px;  /* nội dung chuẩn (lưới thẻ, landing) */
  --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 */
  --page-pad:      var(--space-4);
}
.page         { width: 100%; max-width: var(--page-w); margin-inline: auto; padding-inline: var(--page-pad); }
.page--wide   { max-width: var(--page-w-wide); }
.page--narrow { max-width: var(--page-w-narrow); }

/* Đồng bộ các shell rời rạc hiện có về cùng bề ngang */
.pp__wrap, .learn-shell, .rs, .fd-wrap, .kh-wrap, .pc-wrap { max-width: var(--page-w); margin-inline: auto; }
.cr-shell { max-width: var(--page-w-wide); margin-inline: auto; }
.learn-shell, .rs, .pp__wrap, .fd-wrap, .cr-shell { padding-inline: var(--page-pad); }
@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); }