:root {
    /* Bang mau theo spec LifeBook */
    --color-navy: #142C55;
    --color-navy-2: #1B3672;
    --color-primary: #2563EB;
    --color-primary-light: #EAF2FF;
    --color-purple: #7655F7;
    --color-bg: #F5F7FC;
    --color-white: #FFFFFF;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-success: #22C55E;
    --color-text: #1B2540;
    --color-text-muted: #6B7590;
    --color-border: #E6EAF3;

    --gradient-primary: linear-gradient(135deg, #2563EB 0%, #7655F7 100%);
    --gradient-banner: linear-gradient(120deg, #2563EB 0%, #5B6EF5 55%, #7655F7 100%);

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --shadow-card: 0 2px 6px rgba(20, 44, 85, 0.04), 0 10px 28px rgba(20, 44, 85, 0.06);
    --shadow-card-hover: 0 4px 10px rgba(20, 44, 85, 0.06), 0 18px 40px rgba(20, 44, 85, 0.12);

    --font-main: 'Be Vietnam Pro', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --sidebar-width: 264px;
    --topbar-height: 78px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body { overflow-x: hidden; overflow-x: clip; }

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
code, kbd { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }

:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}