:root {
  --font-base: "Roboto", Arial, sans-serif;
  --font-display: var(--font-base);
  --font-code: var(--font-base);
  --font-sans: var(--font-base);

  /* Root font = HỆ SỐ SCALE CHUNG cho toàn UI (mọi thứ dùng rem). Lấy min(theo-cao, theo-rộng)
     để cỡ chữ KHÔNG vượt mặt bề rộng cột (cột dùng vw) → fullscreen/đổi tỉ lệ màn vẫn cân, KHÔNG
     méo. 1.6svh = nhịp theo chiều cao (giữ y chuẩn 80% windowed); 0.93vw = trần theo chiều rộng
     (ở 16:9/16:10 ≈ bằng 1.6svh nên không đổi cảm giác; khi màn cao hơn rộng thì vw ghìm lại để
     không phình lệch). Floor 13px, cap 30px. */
  --root-font: clamp(11px, min(1.6svh, 0.93vw), 30px);

  --text-3xs: 0.5625rem;
  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-kpi: 1.875rem;
  --text-kpi-hero: 2.125rem;
  --text-title: 1.625rem;
  --text-header-title: 1.75rem;
  --text-header-title-md: 1.5rem;
  --text-header-title-sm: 1.25rem;
  --text-header-agency: 1.42rem;
  --text-header-agency-prefix: 0.875rem;
  --text-header-agency-sm: 1.12rem;
  --text-header-meta-label: 0.625rem;
  --text-header-meta-value: 0.9375rem;
  --text-header-meta-clock: 1.0625rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;

  --color-bg: #020b1c;
  --color-bg-deep: #001227;
  --color-panel: rgba(3, 23, 52, 0.95);
  --color-panel-strong: rgba(5, 31, 69, 0.98);
  --color-panel-top: rgba(8, 48, 96, 0.86);
  --color-border: #0b83d9;
  --color-border-soft: rgba(42, 165, 255, 0.38);
  --color-grid: rgba(24, 117, 210, 0.18);
  --color-line: #13bbff;
  --color-line-soft: rgba(19, 187, 255, 0.72);
  --color-text: #f4f9ff;
  --color-text-soft: #c9dcff;
  --color-text-dim: #93bdf1;
  --color-cyan: #16c8ff;
  --color-blue: #3f8cff;
  --color-mint: #4fe28d;
  --color-green: #36d977;
  --color-yellow: #ffe04a;
  --color-orange: #ff8b1f;
  --color-danger: #ff4c3e;
  --color-violet: #915dff;
  /* Chữ định danh khối Đầu tư công — kéo SÁNG gần bằng khối Đảng (giữ tint, KHÔNG cyan) */
  --color-bright-green: #c2f5e0;
  --color-bright-blue: #cfe2ff;
  --color-bright-amber: #ffe0b3;
  --color-bright-red: #ffc4bb;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-party-bg-deep: #031633;
  --color-party-bg-mid: #07285c;
  --color-party-bg-high: #0a3475;
  --color-party-cyan: #19d8ff;
  --color-party-success: #2af598;
  --color-party-warning: #ffc857;
  --color-party-risk: #ff5a5a;
  --color-bg-top: #031936;
  --color-bg-bottom: #000815;
  --color-panel-deep-solid: #061b3c;
  --color-text-panel-bright: #edf7ff;
  --color-dashboard-blue-text: #8fc2ff;
  --color-header-deep-edge: #001856;
  --color-header-blue-line-solid: #064f8c;
  --color-header-warning-bg: #351602;
  --color-header-warning-text: #fff4cf;
  --color-header-electric-blue: #50c8ff;
  --color-header-ice-line: #d8ffff;
  --alpha-black-25: rgba(0, 0, 0, 0.25);
  --alpha-black-46: rgba(0, 0, 0, 0.46);
  --alpha-black-50: rgba(0, 0, 0, 0.5);
  --alpha-deep-00724-80: rgba(0, 7, 24, 0.8);
  --alpha-deep-00724-90: rgba(0, 7, 24, 0.9);
  --alpha-deep-00724-95: rgba(0, 7, 24, 0.95);
  --alpha-deep-00724-96: rgba(0, 7, 24, 0.96);
  --alpha-deep-00724-98: rgba(0, 7, 24, 0.98);
  --alpha-deep-00724-100: rgba(0, 7, 24, 1);
  --alpha-deep-001227-42: rgba(0, 9, 24, 0.42);
  --alpha-deep-011028-99: rgba(1, 10, 28, 0.99);
  --alpha-deep-011234-18: rgba(1, 12, 34, 0.18);
  --alpha-deep-011435-97: rgba(1, 14, 35, 0.97);
  --alpha-deep-011541-78: rgba(1, 15, 41, 0.78);
  --alpha-deep-010828-95: rgba(1, 8, 28, 0.95);
  --alpha-deep-010828-96: rgba(1, 8, 28, 0.96);
  --alpha-deep-010828-98: rgba(1, 8, 28, 0.98);
  --alpha-deep-021128-90: rgba(2, 11, 28, 0.9);
  --alpha-deep-011442-38: rgba(1, 14, 42, 0.38);
  --alpha-deep-023078-18: rgba(2, 30, 78, 0.18);
  --alpha-blue-00107212-28: rgba(0, 107, 212, 0.28);
  --alpha-blue-00119255-12: rgba(0, 119, 255, 0.12);
  --alpha-blue-20140255-09: rgba(20, 140, 255, 0.09);
  --alpha-blue-21176139-64: rgba(21, 76, 139, 0.64);
  --alpha-blue-24160255-34: rgba(24, 160, 255, 0.34);
  --alpha-blue-43125255-18: rgba(43, 125, 255, 0.18);
  --alpha-blue-42165255-16: rgba(42, 165, 255, 0.16);
  --alpha-blue-46123210-12: rgba(46, 123, 210, 0.12);
  --alpha-blue-52144235-22: rgba(52, 144, 235, 0.22);
  --alpha-blue-69157255-18: rgba(69, 157, 255, 0.18);
  --alpha-blue-70160255-12: rgba(70, 160, 255, 0.12);
  --alpha-blue-73160255-50: rgba(73, 160, 255, 0.5);
  --alpha-blue-91164255-80: rgba(91, 164, 255, 0.8);
  --alpha-cyan-19187255-045: rgba(19, 187, 255, 0.045);
  --alpha-cyan-19187255-055: rgba(19, 187, 255, 0.055);
  --alpha-cyan-19187255-07: rgba(19, 187, 255, 0.07);
  --alpha-cyan-19187255-08: rgba(19, 187, 255, 0.08);
  --alpha-cyan-19187255-10: rgba(19, 187, 255, 0.1);
  --alpha-cyan-19187255-12: rgba(19, 187, 255, 0.12);
  --alpha-cyan-19187255-18: rgba(19, 187, 255, 0.18);
  --alpha-cyan-19187255-26: rgba(19, 187, 255, 0.26);
  --alpha-cyan-19187255-30: rgba(19, 187, 255, 0.3);
  --alpha-cyan-19187255-34: rgba(19, 187, 255, 0.34);
  --alpha-cyan-19187255-42: rgba(19, 187, 255, 0.42);
  --alpha-cyan-19187255-50: rgba(19, 187, 255, 0.5);
  --alpha-cyan-19187255-58: rgba(19, 187, 255, 0.58);
  --alpha-cyan-19187255-68: rgba(19, 187, 255, 0.68);
  --alpha-cyan-22200255-035: rgba(22, 200, 255, 0.035);
  --alpha-cyan-22200255-05: rgba(22, 200, 255, 0.05);
  --alpha-cyan-22200255-10: rgba(22, 200, 255, 0.1);
  --alpha-cyan-22200255-11: rgba(22, 200, 255, 0.11);
  --alpha-cyan-22200255-22: rgba(22, 200, 255, 0.22);
  --alpha-cyan-22200255-24: rgba(22, 200, 255, 0.24);
  --alpha-cyan-22200255-42: rgba(22, 200, 255, 0.42);
  --alpha-cyan-22200255-70: rgba(22, 200, 255, 0.7);
  --alpha-cyan-22200255-72: rgba(22, 200, 255, 0.72);
  --alpha-cyan-22200255-80: rgba(22, 200, 255, 0.8);
  --alpha-ice-94231255-15: rgba(94, 231, 255, 0.15);
  --alpha-ice-94231255-16: rgba(94, 231, 255, 0.16);
  --alpha-ice-94231255-20: rgba(94, 231, 255, 0.2);
  --alpha-ice-103215255-22: rgba(103, 215, 255, 0.22);
  --alpha-blue-11131217-12: rgba(11, 131, 217, 0.12);
  --alpha-white-025: rgba(255, 255, 255, 0.025);
  --alpha-white-035: rgba(255, 255, 255, 0.035);
  --alpha-white-055: rgba(255, 255, 255, 0.055);
  --alpha-white-08: rgba(255, 255, 255, 0.08);
  --alpha-white-16: rgba(255, 255, 255, 0.16);
  --alpha-white-18: rgba(255, 255, 255, 0.18);
  --alpha-white-55: rgba(255, 255, 255, 0.55);
  --alpha-navy-031846-42: rgba(3, 18, 46, 0.42);
  --alpha-navy-031848-28: rgba(3, 18, 48, 0.28);
  --alpha-navy-033178-98: rgba(3, 31, 78, 0.98);
  --alpha-navy-052153-30: rgba(5, 21, 53, 0.3);
  --alpha-navy-052861-0: rgba(5, 28, 61, 0);
  --alpha-navy-064497-92: rgba(6, 44, 97, 0.92);
  --alpha-navy-074494-86: rgba(7, 44, 94, 0.86);
  --alpha-navy-073373-68: rgba(7, 33, 73, 0.68);
  --alpha-navy-074583-72: rgba(7, 45, 83, 0.72);
  --alpha-navy-0965132-70: rgba(9, 65, 132, 0.7);
  --alpha-mint-79226141-13: rgba(79, 226, 141, 0.13);
  --alpha-mint-79226141-45: rgba(79, 226, 141, 0.45);
  --text-hero-value: 3.25rem;
  --color-map-land: rgba(8, 48, 96, 0.2);
  --color-map-land-core: rgba(7, 68, 132, 0.16);
  --color-map-boundary: rgba(168, 236, 255, 0.78);
  --color-map-surface: #0b4f8c;
  --color-map-surface-soft: #0d6fb3;
  --color-map-surface-mid: #082f63;
  --color-map-surface-deep: #071b3d;
  --color-map-ocean-core: rgba(17, 198, 255, 0.2);
  --color-map-ocean-mid: rgba(4, 72, 126, 0.62);
  --color-map-ocean-deep: rgba(0, 16, 48, 0.88);
  --color-map-ocean-abyss: rgba(0, 7, 24, 0.74);
  --color-map-grid: rgba(28, 190, 255, 0.035);
  --color-map-route: rgba(29, 205, 255, 0.72);
  --color-map-route-mint: rgba(79, 226, 141, 0.7);
  --image-map-ioc: url("/assets/images/background-ioc.png");
  --color-map-ioc-veil: rgba(2, 30, 78, 0.5);
  --color-map-ioc-veil-strong: rgba(1, 13, 42, 0.7);
  --color-map-stage-base: #061d45;
  --color-map-stage-depth: #031638;
  --color-map-stage-veil: rgba(3, 22, 56, 0.74);
  --color-map-stage-veil-soft: rgba(6, 45, 88, 0.36);
  --color-map-stage-border: rgba(78, 139, 190, 0.3);
  --color-map-stage-corner-line: rgba(83, 153, 208, 0.42);
  --color-map-stage-corner-line-soft: rgba(83, 153, 208, 0.3);
  --color-map-stage-edge-veil: rgba(0, 8, 28, 0.42);
  --color-map-stage-scanline: rgba(22, 200, 255, 0.04);
  --shadow-map-stage: inset 0 0 0 1px rgba(96, 156, 205, 0.08), inset 0 0 72px rgba(4, 52, 105, 0.26), 0 0 24px rgba(11, 83, 150, 0.16);
  --shadow-map-shell: drop-shadow(0 0 12px rgba(19, 187, 255, 0.16));
  --color-map-ward-readability: #000000;
  --color-map-region-line: rgba(184, 230, 244, 0.26);
  --color-map-region-line-active: rgba(222, 253, 255, 0.72);
  --color-map-region-processing: #ffe24a;
  --color-map-region-completed: #4fe28d;
  --color-map-region-rejected: #ff4c3e;
  --color-map-region-processing-core: #ffe95c;
  --color-map-region-processing-ion: #fff7b0;
  --color-map-region-processing-bloom: #f2c900;
  --color-map-region-completed-core: #47f28a;
  --color-map-region-completed-ion: #c8ffd9;
  --color-map-region-completed-bloom: #20d66b;
  --color-map-region-rejected-core: #ff4f45;
  --color-map-region-rejected-ion: #ffd1cc;
  --color-map-region-rejected-bloom: #ff2f25;
  --color-map-region-unmapped: #8db7d8;
  --color-map-land-veil: rgba(2, 37, 82, 0.44);
  --color-map-land-veil-soft: rgba(22, 188, 255, 0.11);
  --color-map-land-texture: #0a4f84;
  --color-map-land-texture-soft: #1b83b6;
  --color-map-land-infra: #58a9cc;
  --color-map-land-canal: #0b6fa3;
  --color-map-coast-inner: #f2fdff;
  --color-map-coast-main: #c5f0fe;
  --color-map-coast-soft: #7fe8ff;
  --color-map-coast-glow: #38cfff;
  --color-map-coast-deep: #0e7bff;
  --color-map-coast-fog-stroke: rgba(22, 62, 221, 1);
  --color-map-land-lumen: #00a6e6;
  --color-map-land-ocean: #0a3768;
  --color-map-land-abyss: #061d45;
  --color-map-digital-road: #4f8fbc;
  --color-map-digital-river: #076fa8;
  --color-map-digital-highway: #5f9ac2;
  --color-map-digital-bridge: #79b1cf;
  --color-map-outer-line: color-mix(in srgb, var(--color-map-coast-main) 50%, transparent);
  --color-map-coast-fog: color-mix(in srgb, var(--color-map-coast-deep) 18%, transparent);
  --color-map-coast-bloom: color-mix(in srgb, var(--color-map-coast-glow) 28%, transparent);
  --color-map-coast-rim: var(--color-map-coast-soft);
  --color-map-coast-core: var(--color-map-coast-inner);
  --color-map-coast-shadow: color-mix(in srgb, var(--color-map-coast-deep) 16%, transparent);
  --color-map-inner-line: #c5f0fe;
  --color-map-region-label: rgba(237, 250, 255, 0.82);
  --color-header-base: rgba(3, 33, 78, 0.96);
  --color-header-base-strong: rgba(5, 55, 111, 0.9);
  --color-header-depth: rgba(1, 18, 47, 0.98);
  --color-header-line: rgba(51, 207, 255, 0.58);
  --color-header-line-soft: rgba(22, 200, 255, 0.2);
  --color-header-fill: rgba(22, 200, 255, 0.08);
  --color-header-fill-strong: rgba(22, 200, 255, 0.16);
  --color-header-violet: rgba(145, 93, 255, 0.14);
  --color-header-veil: rgba(1, 16, 42, 0.52);
  --color-header-veil-soft: rgba(1, 16, 42, 0.1);
  --color-header-title-backdrop: rgba(1, 18, 47, 0.54);
  --color-header-title-backdrop-soft: rgba(1, 18, 47, 0.12);
  --color-header-meta-surface: rgba(2, 27, 67, 0.58);
  --color-header-meta-surface-strong: rgba(7, 61, 120, 0.32);
  --color-header-meta-line: rgba(60, 214, 255, 0.42);
  --color-header-meta-light: rgba(60, 214, 255, 0.18);
  --color-header-text-ice: #ffffff;
  --color-header-text-main: #edf9ff;
  --color-header-text-cyan: #8fe8ff;
  --color-header-text-deep: #bcecff;
  --color-header-text-muted: #d1e8f7;
  --color-header-text-mint: #9dffd8;
  --color-header-meta-accent-time: #23d6c8;
  --color-header-meta-accent-date: #4aa7ff;
  --color-header-meta-accent-weather: #8fe8ff;
  --color-header-meta-edge: #5f82e8;
  --color-header-meta-time-start: #08726f;
  --color-header-meta-time-end: #052d58;
  --color-header-meta-date-start: #0871d5;
  --color-header-meta-date-end: #05265e;
  --color-header-meta-weather-start: #0a4e8d;
  --color-header-meta-weather-end: #041f4d;
  --color-header-copy-primary: #ffffff;
  --color-header-copy-secondary: #f2f8ff;
  --color-header-copy-label: #d6e8f8;
  --color-header-copy-detail: #f8fbff;

  --shadow-panel: 0 0 28px rgba(0, 148, 255, 0.16), inset 0 0 24px rgba(10, 106, 202, 0.08);
  --shadow-glow: 0 0 18px rgba(19, 187, 255, 0.58);
  --shadow-header: 0 0 28px rgba(22, 200, 255, 0.12), inset 0 -1px 0 rgba(22, 200, 255, 0.36);
  --shadow-header-text: 0 1px 1px rgba(0, 7, 24, 0.98), 0 0 4px rgba(0, 7, 24, 0.86), 0 0 5px rgba(51, 207, 255, 0.12);
  --shadow-header-title-text: 0 1px 1px rgba(0, 7, 24, 1), 0 0 5px rgba(0, 7, 24, 0.9), 0 0 6px rgba(51, 207, 255, 0.14);
  --shadow-danger: 0 0 18px rgba(255, 76, 62, 0.48);
  --border-panel: 1px solid var(--color-border-soft);
}