:root {
  /* Colors — tông hồng phấn lấy cảm hứng từ images/splash1.jpg + logo */
  --color-bg: #fdf3f8;
  --color-bg-alt: #fff9fc;
  --color-bg-deep: #fbe7f1;
  --color-primary: #e5147a;
  --color-primary-dark: #b80f60;
  --color-primary-light: #ff5fa8;
  --color-secondary: #1b2a6b;
  --color-secondary-light: #2e3f8f;
  --color-accent: #f5a623;
  --color-accent-light: #ffcf6e;
  --color-silver: #8b95a8;
  --color-gold: #d4a012;
  --color-platinum: #6f6fb0;
  --color-text: #2b1d30;
  --color-text-muted: #6f5d6f;
  --color-white: #ffffff;
  --color-border: #f3d6e6;

  /* Typography */
  --font-heading: "Segoe UI", "Quicksand", system-ui, -apple-system, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing scale — nới rộng để bố cục thoáng hơn */
  --space-1: 12px;
  --space-2: 20px;
  --space-3: 32px;
  --space-4: 56px;
  --space-5: 80px;
  --space-6: 112px;
  --space-7: 150px;

  /* Radius & shadow */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;
  --shadow-soft: 0 10px 30px -8px rgba(229, 20, 122, 0.18);
  --shadow-card: 0 6px 20px -6px rgba(229, 20, 122, 0.14);
  --shadow-lift: 0 18px 40px -12px rgba(229, 20, 122, 0.28);

  /* Layout */
  --site-max-w: 1820px;       /* khung tổng thể website trên màn hình lớn */
  --container-w: 1280px;      /* khung nội dung đọc (text/feature) */
  --container-wide-w: 1700px; /* khung mở rộng cho banner/hero */
  --header-h: 108px;
  --transition-base: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}