/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES (ĐƯỜNG HÀNH TRÌNH — XANH MEN SỨ)
   ========================================================================== */
:root {
  /* Bảng màu: xanh men sứ, vàng nghệ, nền trắng xanh.
     --vn-red là màu chủ đạo (ở mẫu này là xanh), --vn-gold là màu nhấn
     (tên token giữ theo theme-core.css) */
  --vn-red: #2A4C9A;
  --vn-red-deep: #1F3A7A;
  --vn-red-ink: #1D2A44;
  --vn-red-tint: rgba(42, 76, 154, .08);
  --vn-lotus: #2A4C9A;
  --vn-gold: #D9A441;
  --vn-gold-light: #F1D9A6;
  --vn-gold-text: #B07F1F;
  --vn-gold-tint: rgba(217, 164, 65, .35);
  --vn-paper: #F3F6FB;
  --vn-paper-light: #FFFFFF;
  --vn-paper-mat: #DCE4F2;
  --vn-blue-soft: #EEF2FA;
  --vn-gold-soft: #FBF2E0;
  --vn-gold-mat: #F1E4C8;
  --vn-ink: #1D2A44;
  --vn-ink-muted: #55627C;
  --vn-line: #C9D5EC;
  --vn-line-dashed: #DCE4F2;
  --vn-input-border: #C9D5EC;
  --vn-outside: #E3E9F4;
  --vn-overlay: rgba(29, 42, 68, .72);
  --vn-overlay-strong: rgba(16, 24, 40, .95);
  --vn-shadow: rgba(29, 42, 68, .18);
  --vn-card-shadow: 0 6px 20px rgba(42, 76, 154, .1);

  /* Theme mappings for existing components */
  --red-primary: #2A4C9A;
  --red-dark: #1F3A7A;
  --red-light: #4A6CB8;
  --red-card: #2A4C9A;
  --red-card-inner: #1F3A7A;
  --gold: #D9A441;
  --gold-light: #F1D9A6;
  --gold-dark: #B07F1F;
  --paper-bg: #F3F6FB;
  --paper-card: #FFFFFF;
  --cream-text: #FFFFFF;
  --cream-sub: rgba(255, 255, 255, 0.85);
  --ink: #1D2A44;
  --muted: #55627C;
  --border-red: rgba(42, 76, 154, 0.25);
  --border-gold: #D9A441;
  --shadow-card: none;

  /* Typography */
  --font-display: "Lora", Georgia, "PingFang SC", "Microsoft YaHei", serif;
  --font-serif: "Lora", Georgia, serif;
  --font-title: "Lora", Georgia, serif;
  --font-quote: "Lora", Georgia, serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-sans: "Be Vietnam Pro", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}