:root {
  /* Màu thương hiệu */
  --mau-chinh: #025b48;
  --mau-phu: #04604e;
  --mau-sang: #00e0e5;
  --mau-chinh-nhat: #e6f4f1;
  --mau-chinh-nhe: #b3d9d0;

  /* Màu nền */
  --nen-trang: #ffffff;
  --nen-sang: #f3f4f6;
  --nen-sidebar: #f8fffe;
  --nen-header: #e8fff3;

  /* Màu văn bản */
  --chu-chinh: #1a1a2e;
  --chu-phu: #4a5568;
  --chu-nhe: #718096;
  --chu-trang: #ffffff;

  /* Kích thước layout */
  --do-rong-sidebar: 280px;
  --cao-header: 64px;
  --cao-bottom-nav: 60px;

  /* Đổ bóng */
  --bong-nhe: 0 1px 4px rgba(0,0,0,0.08);
  --bong-vua: 0 2px 12px rgba(0,0,0,0.12);
  --bong-manh: 0 4px 24px rgba(0,0,0,0.16);
  --bong-chinh: 0 2px 10px rgba(2, 91, 72, 0.15);

  /* Bo góc */
  --goc-nho: 4px;
  --goc-vua: 8px;
  --goc-lon: 12px;
  --goc-tron: 50%;

  /* Khoảng cách */
  --khoang-xs: 4px;
  --khoang-sm: 8px;
  --khoang-md: 16px;
  --khoang-lg: 24px;
  --khoang-xl: 32px;

  /* Chữ */
  --font-chinh: 'Manulife JH Sans', 'ManulifeJHSans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-co-nho: 12px;
  --font-co-vua: 14px;
  --font-co-lon: 16px;
  --font-co-xl: 18px;
  --font-co-xxl: 22px;

  /* Hiệu ứng */
  --chuyen-tiep: all 0.2s ease;

  /* Z-index */
  --z-modal: 10000;
  --z-header: 1000;
  --z-sidebar: 900;
  --z-overlay: 9999;
  --z-loading: 99999;

  /* Safe area cho mobile */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ─── ALIASES cho shared CSS (header.css, ...) ─── */
  --brand: #025b48;
  --brand-2: #04604e;
  --brand-soft: #e6f4f1;
  --brand-border: #b3d9d0;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-soft: #f8fffe;
  --text: #1a1a2e;
  --muted: #4a5568;
  --line: #e2e8f0;
  --danger: #dc2626;
  --warning: #f59e0b;
  --sidebar-width: 280px;
  --header-h: 64px;
  --footer-h: 42px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-soft: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-brand: 0 2px 10px rgba(2, 91, 72, 0.15);
  --transition: all 0.2s ease;
  --z-banner: 990;
  --z-footer: 950;
  --z-content: 1;
}
