:root{--color-bg: #f7f8fa;--color-surface: #ffffff;--color-border: #e4e7ec;--color-border-soft: #eef1f5;--color-text: #101828;--color-text-muted: #667085;--color-text-faint: #98a2b3;--color-accent: #4f46e5;--color-accent-hover: #4338ca;--color-accent-soft: color-mix(in srgb, #4f46e5 12%, white);--color-danger: #b91c1c;--color-danger-bg: #fef2f2;--color-danger-border: #fecaca;--color-success: #12b76a;--color-offline: #d0d5dd;--radius: 12px;--radius-sm: 8px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);--shadow-md: 0 1px 3px rgba(16, 24, 40, .08);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);font-size:15px;line-height:1.5}#root{min-height:100vh}.app-shell{display:flex;min-height:100vh}aside[aria-label="Điều hướng chính"]{width:248px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;padding:var(--space-5) var(--space-4);position:sticky;top:0;height:100vh}.app-logo{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2) 28px}.app-logo-mark{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.app-logo-word{font-weight:700;font-size:16px;letter-spacing:-.01em}aside[aria-label="Điều hướng chính"] nav{display:flex;flex-direction:column;gap:2px}aside[aria-label="Điều hướng chính"] nav button{display:flex;align-items:center;gap:var(--space-3);padding:10px 12px;border-radius:var(--radius-sm);border:none;background:transparent;color:#475467;font-weight:500;font-size:14px;text-align:left;cursor:pointer;font-family:inherit}aside[aria-label="Điều hướng chính"] nav button:hover{background:#f2f4f7}aside[aria-label="Điều hướng chính"] nav button[aria-pressed=true]{background:var(--color-accent-soft);color:var(--color-accent);font-weight:600}.app-sidebar-footer{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-2)}.app-org{padding:var(--space-2) 4px;display:flex;flex-direction:column;min-width:0}.app-org-label{font-size:12px;color:var(--color-text-faint)}.app-org-value{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-sidebar-footer button{display:flex;align-items:center;gap:var(--space-2);padding:8px 12px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--color-text-muted);font-size:13px;font-weight:500;cursor:pointer;width:100%;font-family:inherit}.app-sidebar-footer button:hover{background:#f2f4f7;color:var(--color-text)}.app-main{flex:1;min-width:0}main{max-width:960px;margin:0 auto;padding:var(--space-6) var(--space-6)}h1{font-size:22px;font-weight:700;margin:0 0 var(--space-1);letter-spacing:-.01em}h2{font-size:15px;font-weight:600;margin:0 0 var(--space-3)}main>p:first-of-type{color:var(--color-text-muted);font-size:14px;margin:0 0 var(--space-5)}section[aria-label]{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4)}form{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}label{display:flex;flex-direction:column;gap:var(--space-1);font-size:13px;font-weight:500;color:var(--color-text-muted);width:100%;max-width:420px}label:has(>input[type=checkbox]),label:has(>input[type=radio]){flex-direction:row;align-items:center;width:auto;max-width:none;font-weight:400;color:var(--color-text)}label:has(>input[type=checkbox]) input,label:has(>input[type=radio]) input{width:auto}input,select{font:inherit;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text)}input[type=file]{border-style:dashed;padding:var(--space-3);font-size:13px}input[type=checkbox],input[type=radio]{width:16px;height:16px}input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}button{font:inherit;padding:10px var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-weight:500;cursor:pointer}button:hover:not(:disabled){background:var(--color-bg)}button:disabled{opacity:.5;cursor:not-allowed}button[type=submit]{background:var(--color-accent);border-color:var(--color-accent);color:#fff}button[type=submit]:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover)}p[role=alert]{background:var(--color-danger-bg);color:var(--color-danger);border:1px solid var(--color-danger-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:13px;margin:0}section p:not([role=alert]){color:var(--color-text-muted);font-size:13px}ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}li{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm)}li img{border-radius:4px;object-fit:cover}fieldset{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.auth-shell{display:flex;min-height:100vh}.auth-hero{width:42%;min-width:360px;flex-shrink:0;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-accent) 0%,color-mix(in srgb,var(--color-accent) 55%,#0b0a2b) 100%);display:flex;flex-direction:column;justify-content:center;padding:var(--space-6) 56px;color:#fff}.auth-hero-blob{position:absolute;border-radius:999px;background:#ffffff1a}.auth-hero-blob.a{width:320px;height:320px;top:-120px;right:-100px}.auth-hero-blob.b{width:240px;height:240px;bottom:-80px;left:-60px;background:#ffffff14}.auth-hero-logo{position:relative;display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6)}.auth-hero-logo-mark{width:36px;height:36px;border-radius:9px;background:#ffffff29;display:flex;align-items:center;justify-content:center}.auth-hero-logo-word{font-weight:700;font-size:18px}.auth-hero h2{position:relative;margin:0 0 var(--space-4);font-size:30px;font-weight:800;line-height:1.25;letter-spacing:-.01em;max-width:420px;color:#fff}.auth-hero-tagline{position:relative;margin:0 0 var(--space-6);font-size:15px;color:#ffffffd1;max-width:380px;line-height:1.6}.auth-hero-features{position:relative;display:flex;flex-direction:column;gap:var(--space-4)}.auth-hero-feature{display:flex;align-items:center;gap:14px}.auth-hero-feature-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:#ffffff24;display:flex;align-items:center;justify-content:center;flex-shrink:0}.auth-hero-feature span{font-size:14px;font-weight:500;color:#ffffffeb}.auth-shell main{flex:1;max-width:none;margin:0;display:flex;align-items:center;justify-content:center;padding:var(--space-5)}.auth-shell main>div{width:100%;max-width:380px}.auth-shell [role=tablist]{display:inline-flex;padding:4px;background:#f2f4f7;border-radius:10px;gap:2px;margin-bottom:var(--space-5)}.auth-shell [role=tablist] button{padding:8px 20px;border-radius:var(--radius-sm);border:none;background:transparent;font-size:14px;font-weight:500;color:var(--color-text-muted)}.auth-shell [role=tablist] button[aria-pressed=true]{background:#fff;box-shadow:var(--shadow-md);color:var(--color-text);font-weight:600}.auth-shell h1{font-size:24px}.auth-shell form{width:100%;align-items:stretch}.auth-field-icon{position:relative;width:100%}.auth-field-icon svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-faint);pointer-events:none}.auth-field-icon input{width:100%;padding-left:38px}@media (max-width: 900px){.auth-hero{display:none}}@media (max-width: 640px){aside[aria-label="Điều hướng chính"]{width:72px;padding:var(--space-4) var(--space-2)}.app-logo-word,aside[aria-label="Điều hướng chính"] nav button span,.app-org,.app-sidebar-footer button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}aside[aria-label="Điều hướng chính"] nav button{justify-content:center}main{padding:var(--space-4)}section[aria-label]{padding:var(--space-3) var(--space-4)}}