/* Biến giao diện — sinh tự động từ trang quản trị. Không sửa tay. */
:root{
  --primary: #213255;
  --primary-readable: #213255;
  --primary-contrast: #ffffff;
  --primary-soft: #e4e6eb;
  --accent: #f39508;
  --accent-readable: #cf7f07;
  --accent-hover: #d97e00;
  --accent-contrast: #111111;
  --heading: #213255;
  --text: #333333;
  --muted: #64717f;
  --border: #e3e8ef;
  --bg-page: #ffffff;
  --bg-soft: #f5f7fa;
  --bg-card: #ffffff;
  --bg-page-rgb: 255, 255, 255;
  --shadow: 0 2px 12px rgba(33, 50, 85, 0.08);
  --content-gap: 16px;
  --radius: 12px;
  --container: 1224px;
  --font: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Roboto Slab', Georgia, serif;
  --font-size: 15px;
  --overlay: rgba(0, 0, 0, 0);
  --footer-bg: #16233d;
  --footer-text: #c3ccda;
  --footer-heading: #f39508;
  --footer-border: #2a3854;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --primary: #213255;
  --primary-readable: #7a8499;
  --primary-contrast: #ffffff;
  --primary-soft: #192640;
  --accent: #f39508;
  --accent-readable: #f39508;
  --accent-hover: #d97e00;
  --accent-contrast: #111111;
  --heading: #e8edf5;
  --text: #e8edf5;
  --muted: #9aa8bd;
  --border: #25324b;
  --bg-page: #0e1626;
  --bg-soft: #131e33;
  --bg-card: #16223a;
  --bg-page-rgb: 14, 22, 38;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --content-gap: 16px;
  --radius: 12px;
  --container: 1224px;
  --font: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Roboto Slab', Georgia, serif;
  --font-size: 15px;
  --overlay: rgba(0, 0, 0, 0);
  --footer-bg: #16233d;
  --footer-text: #c3ccda;
  --footer-heading: #f39508;
  --footer-border: #2a3854;
}
}
:root[data-theme="dark"]{
  --primary: #213255;
  --primary-readable: #7a8499;
  --primary-contrast: #ffffff;
  --primary-soft: #192640;
  --accent: #f39508;
  --accent-readable: #f39508;
  --accent-hover: #d97e00;
  --accent-contrast: #111111;
  --heading: #e8edf5;
  --text: #e8edf5;
  --muted: #9aa8bd;
  --border: #25324b;
  --bg-page: #0e1626;
  --bg-soft: #131e33;
  --bg-card: #16223a;
  --bg-page-rgb: 14, 22, 38;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --content-gap: 16px;
  --radius: 12px;
  --container: 1224px;
  --font: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Roboto Slab', Georgia, serif;
  --font-size: 15px;
  --overlay: rgba(0, 0, 0, 0);
  --footer-bg: #16233d;
  --footer-text: #c3ccda;
  --footer-heading: #f39508;
  --footer-border: #2a3854;
}