:root {
    --app-font-family: "Be Vietnam Pro", "SF Pro Text", "Segoe UI", "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --app-bg: #f8fafc;
    --app-surface: #ffffff;
    --app-surface-muted: #f8fafc;
    --app-text: #334155;
    --app-text-title: #0f172a;
    --app-text-soft: #64748b;
    --app-line: #e2e8f0;
    --app-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
    --app-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.1);
    --app-shadow-lift: 0 22px 42px rgba(15, 23, 42, 0.12);
    --app-radius-lg: 28px;
    --app-radius-md: 20px;
    --app-radius-sm: 14px;
    --app-accent: #16a34a;
    --app-accent-strong: #15803d;
    --app-accent-ink: #14532d;
    --app-danger: #ff2d78;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-bottom-nav-height: calc(80px + var(--app-safe-bottom));
    --app-max-width: 440px;
    --app-motion-fast: 140ms;
    --app-motion-normal: 180ms;
    --space-50: #f0fdf4;
    --space-100: #dcfce7;
    --space-300: #86efac;
    --space-500: #22c55e;
    --space-600: #16a34a;
    --space-700: #15803d;
    --space-900: #14532d;
    --app-page-glow: rgba(134, 239, 172, 0.34);
    --app-page-gradient-start: rgba(240, 253, 244, 0.96);
    --app-page-gradient-mid: rgba(248, 250, 252, 0.98);
    --app-shell-soft: rgba(220, 252, 231, 0.5);
    --app-topbar-start: rgba(220, 252, 231, 0.98);
    --app-topbar-mid: rgba(240, 253, 244, 0.95);
    --app-soft-surface: #dcfce7;
    --app-soft-border: rgba(134, 239, 172, 0.32);
    --app-soft-shadow: rgba(22, 163, 74, 0.14);
    --app-hero-start: #14532d;
    --app-hero-mid: #16a34a;
    --app-hero-end: #22c55e;
    --app-hero-text: #f0fdf4;
    --app-pill-surface: rgba(255, 255, 255, 0.18);
    --app-emphasis-surface: #dcfce7;
    --app-emphasis-text: #15803d;
}

body.app-ui-home,
body.app-ui-home-search,
body.app-ui-home-detail {
    --space-50: #f0fdf4;
    --space-100: #dcfce7;
    --space-300: #86efac;
    --space-500: #22c55e;
    --space-600: #16a34a;
    --space-700: #15803d;
    --space-900: #14532d;
    --app-accent: #16a34a;
    --app-accent-strong: #15803d;
    --app-accent-ink: #14532d;
    --app-page-glow: rgba(134, 239, 172, 0.34);
    --app-page-gradient-start: rgba(240, 253, 244, 0.98);
    --app-page-gradient-mid: rgba(248, 250, 252, 0.98);
    --app-shell-soft: rgba(220, 252, 231, 0.5);
    --app-topbar-start: rgba(220, 252, 231, 0.98);
    --app-topbar-mid: rgba(240, 253, 244, 0.95);
    --app-soft-surface: #dcfce7;
    --app-soft-border: rgba(134, 239, 172, 0.32);
    --app-soft-shadow: rgba(22, 163, 74, 0.14);
    --app-hero-start: #14532d;
    --app-hero-mid: #16a34a;
    --app-hero-end: #22c55e;
    --app-hero-text: #f0fdf4;
    --app-emphasis-surface: #dcfce7;
    --app-emphasis-text: #15803d;
}

body.app-ui-bds,
body.app-ui-bds-search,
body.app-ui-bds-detail,
body.app-ui-bds-hub,
body.app-ui-batdongsan {
    --space-50: #f1f5f9;
    --space-100: #e6eef8;
    --space-300: #4a6fa5;
    --space-500: #1e3a5f;
    --space-600: #1b3f63;
    --space-700: #16324f;
    --space-900: #0b1f33;
    --app-accent: #1b3f63;
    --app-accent-strong: #16324f;
    --app-accent-ink: #0b1f33;
    --app-page-glow: rgba(74, 111, 165, 0.22);
    --app-page-gradient-start: rgba(241, 245, 249, 0.98);
    --app-page-gradient-mid: rgba(248, 250, 252, 0.98);
    --app-shell-soft: rgba(230, 238, 248, 0.68);
    --app-topbar-start: rgba(230, 238, 248, 0.98);
    --app-topbar-mid: rgba(241, 245, 249, 0.95);
    --app-soft-surface: #e6eef8;
    --app-soft-border: rgba(74, 111, 165, 0.28);
    --app-soft-shadow: rgba(30, 58, 95, 0.14);
    --app-hero-start: #0b1f33;
    --app-hero-mid: #1e3a5f;
    --app-hero-end: #4a6fa5;
    --app-hero-text: #f1f5f9;
    --app-emphasis-surface: #e6eef8;
    --app-emphasis-text: #16324f;
}

body.app-ui-choxe,
body.app-ui-choxe-search,
body.app-ui-choxe-detail,
body.app-ui-choxe-hub {
    --space-50: #f8fafc;
    --space-100: #e2e8f0;
    --space-300: #475569;
    --space-500: #1c2b3a;
    --space-600: #1e293b;
    --space-700: #0f172a;
    --space-900: #020617;
    --app-accent: #1e293b;
    --app-accent-strong: #0f172a;
    --app-accent-ink: #020617;
    --app-page-glow: rgba(71, 85, 105, 0.18);
    --app-page-gradient-start: rgba(248, 250, 252, 0.98);
    --app-page-gradient-mid: rgba(248, 250, 252, 0.98);
    --app-shell-soft: rgba(226, 232, 240, 0.76);
    --app-topbar-start: rgba(226, 232, 240, 0.98);
    --app-topbar-mid: rgba(248, 250, 252, 0.95);
    --app-soft-surface: #e2e8f0;
    --app-soft-border: rgba(71, 85, 105, 0.26);
    --app-soft-shadow: rgba(28, 43, 58, 0.16);
    --app-hero-start: #020617;
    --app-hero-mid: #1c2b3a;
    --app-hero-end: #475569;
    --app-hero-text: #f8fafc;
    --app-emphasis-surface: #e2e8f0;
    --app-emphasis-text: #0f172a;
}

body.app-ui-tech,
body.app-ui-tech-search,
body.app-ui-tech-detail,
body.app-ui-tech-hub,
body.app-ui-dienthoai-maytinh {
    --space-50: #eff6ff;
    --space-100: #dbeafe;
    --space-300: #93c5fd;
    --space-500: #3b82f6;
    --space-600: #2563eb;
    --space-700: #1d4ed8;
    --space-900: #1e3a8a;
    --app-accent: #2563eb;
    --app-accent-strong: #1d4ed8;
    --app-accent-ink: #1e3a8a;
    --app-page-glow: rgba(147, 197, 253, 0.28);
    --app-page-gradient-start: rgba(239, 246, 255, 0.98);
    --app-page-gradient-mid: rgba(248, 250, 252, 0.98);
    --app-shell-soft: rgba(219, 234, 254, 0.68);
    --app-topbar-start: rgba(219, 234, 254, 0.98);
    --app-topbar-mid: rgba(239, 246, 255, 0.95);
    --app-soft-surface: #dbeafe;
    --app-soft-border: rgba(147, 197, 253, 0.34);
    --app-soft-shadow: rgba(37, 99, 235, 0.16);
    --app-hero-start: #1e3a8a;
    --app-hero-mid: #2563eb;
    --app-hero-end: #3b82f6;
    --app-hero-text: #eff6ff;
    --app-emphasis-surface: #dbeafe;
    --app-emphasis-text: #1d4ed8;
}

body.app-ui-gianhang,
body.app-ui-gianhang-detail,
body.app-ui-gianhang-listing,
body.app-ui-gianhang-conversations,
body.app-ui-gianhang-status,
body.app-ui-gianhang-actions {
    --space-50: #f5f3ff;
    --space-100: #ede9fe;
    --space-300: #c4b5fd;
    --space-500: #7c3aed;
    --space-600: #6d28d9;
    --space-700: #5b21b6;
    --space-900: #4c1d95;
    --app-accent: #6d28d9;
    --app-accent-strong: #5b21b6;
    --app-accent-ink: #4c1d95;
    --app-page-glow: rgba(196, 181, 253, 0.28);
    --app-page-gradient-start: rgba(245, 243, 255, 0.98);
    --app-page-gradient-mid: rgba(248, 250, 252, 0.98);
    --app-shell-soft: rgba(237, 233, 254, 0.7);
    --app-topbar-start: rgba(237, 233, 254, 0.98);
    --app-topbar-mid: rgba(245, 243, 255, 0.95);
    --app-soft-surface: #ede9fe;
    --app-soft-border: rgba(196, 181, 253, 0.34);
    --app-soft-shadow: rgba(124, 58, 237, 0.16);
    --app-hero-start: #4c1d95;
    --app-hero-mid: #6d28d9;
    --app-hero-end: #7c3aed;
    --app-hero-text: #f5f3ff;
    --app-emphasis-surface: #ede9fe;
    --app-emphasis-text: #5b21b6;
}