/* ============================================================
   THEME — Hệ thống giao diện dùng chung cho toàn bộ trang.
   Muốn đổi màu / phông / bo góc cho cả site: sửa ở đây.
   ============================================================ */
:root {
  /* ----- Bảng màu (cổ truyền nhưng tươi tắn) ----- */
  --paper:   #faf3e0;
  --paper-2: #f3e7c9;
  --paper-3: #fff8e8;
  /* Nền KHUNG NỘI DUNG (bài viết, giới thiệu, phả hệ): trắng ngà sạch sẽ,
     tách bạch với nền vàng chủ đạo phía sau cho dễ đọc */
  --surface:   #fffefb;
  --surface-2: #f7f2e7;
  --ink:     #3a2a1a;
  --ink-soft:#6b5840;
  --red:     #9c2b2b;
  --red-deep:#7a1f1f;
  --gold:    #c79a3a;
  --gold-soft:#e6c878;
  --jade:    #2f6e54;
  --jade-soft:#6fae8f;
  --rose:    #a8456a;
  --rose-soft:#d98aa0;
  --line:    #b89b6a;
  --shadow:  rgba(90, 60, 20, 0.22);
  --ok:      #2f6e54;
  --warn:    #b8862b;
  --danger:  #9c2b2b;

  /* ----- Kích thước khung cố định ----- */
  --topbar-h:  72px;
  --sidebar-w: 240px;
  --radius:    10px;
  --radius-lg: 14px;
  --gap:       20px;

  /* ----- Phông chữ ----- */
  --font-body:  'EB Garamond', 'Noto Serif', Georgia, serif;
  --font-head:  'Charm', cursive;
  --font-serif: 'Noto Serif', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(199,154,58,0.10), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(47,110,84,0.08), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23b89b6a' fill-opacity='0.06'%3E%3Cpath d='M40 0l6 14 14 6-14 6-6 14-6-14-14-6 14-6z'/%3E%3C/g%3E%3C/svg%3E");
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--red-deep); margin: 0 0 .4em; font-weight: 700; }
a { color: var(--red); }
img { max-width: 100%; display: block; }

.muted { color: var(--ink-soft); font-size: 15px; }
.prose { font-size: 19px; line-height: 1.9; white-space: normal; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}