:root{--gray-0:#ffffff;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--gray-950:#020617;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--info:#0284c7;--tertiary:#7c3aed;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--text-xs:12px;--text-sm:13px;--text-base:14px;--text-lg:16px;--text-xl:20px;--text-2xl:24px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-sans:"Be Vietnam Pro",Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--z-sticky-header:20;--z-sidebar:30;--z-dropdown:40;--z-overlay-scrim:50;--z-slide-panel:51;--z-dialog:52;--z-toast:60;--ease-standard:cubic-bezier(.2,0,0,1);--duration-fast:120ms;--duration-base:200ms;--duration-slow:280ms}:root,[data-theme=light]{--bg-canvas:var(--gray-50);--bg-surface:var(--gray-0);--bg-surface-raised:var(--gray-0);--bg-hover:var(--gray-100);--bg-active:var(--gray-200);--border-default:var(--gray-200);--border-strong:var(--gray-300);--text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-muted:var(--gray-400);--text-on-accent:#ffffff;--overlay-scrim:rgb(15 23 42/.4);--shadow-color:220 3% 15%;--success-soft:color-mix(in srgb,var(--success) 12%,transparent);--warning-soft:color-mix(in srgb,var(--warning) 12%,transparent);--danger-soft:color-mix(in srgb,var(--danger) 12%,transparent);--info-soft:color-mix(in srgb,var(--info) 12%,transparent);--tertiary-soft:color-mix(in srgb,var(--tertiary) 12%,transparent);--shadow-sm:0 1px 2px hsl(var(--shadow-color)/.06);--shadow-md:0 4px 12px hsl(var(--shadow-color)/.1);--shadow-lg:0 12px 32px hsl(var(--shadow-color)/.16)}[data-theme=dark]{--bg-canvas:var(--gray-950);--bg-surface:var(--gray-900);--bg-surface-raised:var(--gray-800);--bg-hover:var(--gray-800);--bg-active:var(--gray-700);--border-default:var(--gray-700);--border-strong:var(--gray-600);--text-primary:var(--gray-50);--text-secondary:var(--gray-300);--text-muted:var(--gray-500);--text-on-accent:#ffffff;--overlay-scrim:rgb(2 6 23/.6);--shadow-color:220 40% 2%;--success-soft:color-mix(in srgb,var(--success) 22%,transparent);--warning-soft:color-mix(in srgb,var(--warning) 22%,transparent);--danger-soft:color-mix(in srgb,var(--danger) 22%,transparent);--info-soft:color-mix(in srgb,var(--info) 22%,transparent);--tertiary-soft:color-mix(in srgb,var(--tertiary) 22%,transparent)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-canvas:var(--gray-950);--bg-surface:var(--gray-900);--bg-surface-raised:var(--gray-800);--bg-hover:var(--gray-800);--bg-active:var(--gray-700);--border-default:var(--gray-700);--border-strong:var(--gray-600);--text-primary:var(--gray-50);--text-secondary:var(--gray-300);--text-muted:var(--gray-500);--accent-soft:color-mix(in srgb,var(--accent-500) 20%,transparent)}}:root{--font-sans:"Be Vietnam Pro",Inter,ui-sans-serif,system-ui,sans-serif;--accent-500:#2563eb;--accent-600:#1d4ed8;--login-visual-scrim:linear-gradient(180deg,transparent 42%,rgb(2 6 23/0.76));--login-glass-bg:rgb(15 23 42/0.42);--login-glass-bg-subtle:rgb(15 23 42/0.3);--login-glass-border:rgb(255 255 255/0.24);--login-glass-border-strong:rgb(255 255 255/0.34)}:root,[data-theme=light]{--accent-soft:color-mix(in srgb,var(--accent-500) 10%,transparent)}[data-theme=dark]{--accent-soft:color-mix(in srgb,var(--accent-500) 20%,transparent)}*{box-sizing:border-box}body,html{margin:0;min-height:100%}html{font-family:var(--font-sans);color-scheme:light dark}body{background:var(--bg-canvas);color:var(--text-primary);font-size:var(--text-base)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{color:inherit}:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tabular{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.muted{color:var(--text-secondary)}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;z-index:var(--z-sidebar);width:248px;display:none;flex-direction:column;background:var(--bg-surface);border-right:1px solid var(--border-default)}.brand{height:64px;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);border-bottom:1px solid var(--border-default);font-weight:var(--font-weight-bold)}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--accent-500);color:var(--text-on-accent)}.sidebar-nav{flex:1 1;overflow:auto;padding:var(--space-4) var(--space-3)}.nav-label{margin:var(--space-3) var(--space-3) var(--space-2);font-size:11px;font-weight:600;letter-spacing:.04em}.nav-label,.nav-link{color:var(--text-secondary)}.nav-link{position:relative;display:flex;min-height:44px;align-items:center;gap:var(--space-3);margin-bottom:var(--space-1);padding:0 var(--space-3);border-radius:var(--radius-sm)}.nav-link:hover{background:var(--bg-hover)}.nav-link.active{background:var(--accent-soft);color:var(--accent-500)}.nav-link.active:before{content:"";position:absolute;left:0;width:3px;height:24px;border-radius:0 var(--radius-full) var(--radius-full) 0;background:var(--accent-500)}.sidebar-user{padding:var(--space-4);border-top:1px solid var(--border-default)}.user-row{display:flex;align-items:center;gap:var(--space-3)}.avatar{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-full);background:var(--accent-soft);color:var(--accent-500);font-weight:700}.user-copy{min-width:0;flex:1 1}.user-copy span,.user-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-copy span{margin-top:2px;color:var(--text-secondary);font-size:var(--text-xs);text-transform:capitalize}.main-column{min-height:100vh;display:flex;flex-direction:column}.header{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-sticky-header);height:56px;justify-content:space-between;gap:var(--space-3);padding:0 var(--space-3);background:var(--bg-surface);border-bottom:1px solid var(--border-default)}.header,.header-title{display:flex;align-items:center}.header-title{gap:var(--space-2);min-width:0;font-weight:600}.header-actions{display:flex;gap:var(--space-2)}.icon-button{width:44px;height:44px;display:inline-grid;place-items:center;border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer}.icon-button:hover{background:var(--bg-hover)}.content{flex:1 1;width:100%;padding:var(--space-4) var(--space-3) 88px}.footer{display:none;padding:var(--space-4) var(--space-6);color:var(--text-muted);font-size:var(--text-xs)}.bottom-nav,.footer{border-top:1px solid var(--border-default)}.bottom-nav{position:fixed;inset:auto 0 0;z-index:var(--z-sidebar);height:64px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg-surface)}.bottom-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:var(--text-secondary);font-size:10px;cursor:pointer}.bottom-link.active{color:var(--accent-500)}.scrim{position:fixed;inset:0;z-index:var(--z-overlay-scrim);background:var(--overlay-scrim)}.bottom-sheet{position:fixed;inset:auto 0 0;z-index:var(--z-slide-panel);max-height:85vh;overflow:auto;padding:var(--space-3) var(--space-4) var(--space-8);border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--bg-surface-raised)}.grabber{width:36px;height:4px;margin:0 auto var(--space-4);border-radius:var(--radius-full);background:var(--border-strong)}.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--space-3);gap:var(--space-3)}.sheet-link{min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);text-align:center;font-size:var(--text-xs)}.page-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}.page-title{margin:0;font-size:var(--text-xl);line-height:1.35}.page-description{margin:var(--space-1) 0 0;color:var(--text-secondary);font-size:var(--text-sm)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.filter-row,.toolbar-actions,.toolbar-left{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.search{position:relative;min-width:min(100%,280px);flex:1 1}.search svg{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--text-muted)}.search input{width:100%;padding-left:38px}.field,.search input,select,textarea{min-height:40px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-canvas);color:var(--text-primary);padding:0 var(--space-3)}textarea.field{min-height:88px;padding-top:var(--space-3);resize:vertical}.field:hover,.search input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}.field:focus,.search input:focus,select:focus,textarea:focus{border-color:var(--accent-500);outline:3px solid var(--accent-soft)}.button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:0 var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary);font-weight:500;cursor:pointer}.button:hover{background:var(--bg-hover)}.button:disabled{opacity:.55;cursor:not-allowed}.button.primary{border-color:var(--accent-500);background:var(--accent-500);color:var(--text-on-accent)}.button.primary:hover{background:var(--accent-600)}.button.danger{border-color:var(--danger);color:var(--danger)}.button.tertiary{border-color:transparent;background:transparent;color:var(--accent-500)}.card{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface)}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--space-3);gap:var(--space-3);margin-bottom:var(--space-5)}.stat-card{padding:var(--space-4)}.stat-label{color:var(--text-secondary);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.stat-value{margin-top:var(--space-2);font-size:var(--text-2xl);font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.dashboard-grid{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.widget{padding:var(--space-4)}.widget h2{margin:0 0 var(--space-4);font-size:var(--text-lg)}.progress-list{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.progress-row-header{display:flex;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2)}.progress-track{height:7px;overflow:hidden;border-radius:var(--radius-full);background:var(--bg-hover)}.progress-fill{height:100%;border-radius:inherit;background:var(--accent-500)}.table-wrap{overflow:auto;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface)}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.data-table th{position:-webkit-sticky;position:sticky;top:0;z-index:1;padding:var(--space-3);background:var(--bg-hover);color:var(--text-secondary);text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.data-table td{padding:var(--space-3);border-top:1px solid var(--border-default);vertical-align:middle}.data-table tr:hover td{background:var(--bg-hover)}.data-table .numeric{text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.data-table .actions{width:1%;white-space:nowrap;text-align:right}.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;white-space:nowrap}.badge.info{background:var(--info-soft);color:var(--info)}.badge.success{background:var(--success-soft);color:var(--success)}.badge.warning{background:var(--warning-soft);color:var(--warning)}.badge.neutral{background:var(--bg-hover);color:var(--text-secondary)}.mobile-list{display:grid;grid-gap:var(--space-3);gap:var(--space-3)}.mobile-card{padding:var(--space-4)}.mobile-card-header{display:flex;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.mobile-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--space-3);gap:var(--space-3);margin:0}.mobile-card dt{color:var(--text-secondary);font-size:var(--text-xs)}.mobile-card dd{margin:var(--space-1) 0 0}.empty{padding:var(--space-12) var(--space-6);text-align:center}.empty svg{color:var(--text-muted)}.empty h2{margin:var(--space-3) 0 var(--space-2);font-size:var(--text-lg)}.empty p{margin:0 0 var(--space-4)}.empty p,.pagination{color:var(--text-secondary)}.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-default);font-size:var(--text-sm)}.form-grid{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.form-group{display:grid;grid-gap:var(--space-2);gap:var(--space-2)}.form-group label{color:var(--text-secondary);font-size:var(--text-sm);font-weight:500}.form-error,.required{color:var(--danger)}.form-error{font-size:var(--text-xs)}.panel-layout{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.detail-panel{position:fixed;inset:0;z-index:var(--z-slide-panel);display:flex;flex-direction:column;background:var(--bg-surface)}.panel-footer,.panel-header{flex:0 0 auto;padding:var(--space-4);border-bottom:1px solid var(--border-default)}.panel-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.panel-kicker{color:var(--accent-500);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.panel-title{margin:var(--space-1) 0 0;font-size:var(--text-xl)}.panel-body{flex:1 1;overflow:auto;padding:var(--space-4)}.panel-footer{display:flex;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--border-default);border-bottom:0}.section-title{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-6) 0 var(--space-3);color:var(--accent-500);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.section-title:after{content:"";height:1px;flex:1 1;background:var(--border-default)}.file-list{display:grid;grid-gap:var(--space-2);gap:var(--space-2)}.file-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-sm)}.file-copy{min-width:0;flex:1 1}.file-copy span,.file-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-copy span{margin-top:2px;color:var(--text-secondary);font-size:var(--text-xs)}.dialog-scrim{position:fixed;inset:0;z-index:var(--z-overlay-scrim);display:grid;place-items:center;padding:var(--space-3);background:var(--overlay-scrim)}.dialog{z-index:var(--z-dialog);width:min(560px,100%);max-height:90vh;overflow:auto;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface-raised);box-shadow:var(--shadow-lg)}.dialog-body,.dialog-footer,.dialog-header{padding:var(--space-4)}.dialog-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--border-default)}.dialog-header h2{margin:0;font-size:var(--text-lg)}.dialog-footer{display:flex;justify-content:flex-end;gap:var(--space-3);border-top:1px solid var(--border-default)}.alert{padding:var(--space-3);border-left:3px solid var(--danger);background:var(--danger-soft);color:var(--danger)}.alert,.success-box{border-radius:var(--radius-sm)}.success-box{padding:var(--space-4);border-left:3px solid var(--success);background:var(--success-soft)}.code-value{overflow-wrap:anywhere;font-family:var(--font-mono);font-size:var(--text-sm)}.login-page{min-height:100vh;min-height:100svh;display:grid;background:var(--bg-canvas)}.login-visual{display:none}.login-panel{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:var(--space-6) var(--space-4);background:var(--bg-surface)}.login-card{width:min(400px,100%)}.login-brand{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-10)}.login-logo{width:56px;height:56px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface-raised);box-shadow:var(--shadow-sm)}.login-logo img{width:48px;height:40px;object-fit:contain;image-rendering:auto}.login-brand-copy{display:grid;grid-gap:2px;gap:2px}.login-brand-copy strong{font-size:var(--text-xl);line-height:1.2}.login-brand-copy span{color:var(--text-secondary);font-size:var(--text-sm)}.login-heading{margin-bottom:var(--space-6);text-align:center}.login-eyebrow{display:block;margin-bottom:var(--space-2);color:var(--accent-500);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.login-heading h1{margin:0;font-size:var(--text-2xl);line-height:1.35}.login-heading p{margin:var(--space-3) 0 0;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.65}.login-submit{width:100%;min-height:44px}.login-spinner{animation:login-spin .8s linear infinite}.login-access-note{display:flex;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-5);padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-hover);color:var(--text-secondary)}.login-access-note svg{flex:0 0 auto;margin-top:2px;color:var(--success)}.login-access-note p{margin:0;font-size:var(--text-xs);line-height:1.6}.login-access-note strong{color:var(--text-primary)}.login-footnote{margin:var(--space-6) 0 0;color:var(--text-muted);font-size:var(--text-xs);line-height:1.5;text-align:center}@keyframes login-spin{to{transform:rotate(1turn)}}@media (min-width:768px){.content{padding:var(--space-5) var(--space-4) 88px}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.login-page{grid-template-columns:minmax(0,2fr) minmax(360px,1fr)}.login-visual{position:relative;display:flex;min-height:100vh;min-height:100svh;flex-direction:column;justify-content:space-between;overflow:hidden;padding:var(--space-8);background-color:var(--accent-500);background-image:var(--login-visual-scrim),url(https://dtsoft.vn/upload/product/phan-mem-quan-ly-co-so-du-lieu-ve-gia1734573923.png);background-position:50%;background-repeat:no-repeat;background-size:cover;color:var(--text-on-accent)}.login-visual-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-3);border:1px solid var(--login-glass-border-strong);border-radius:var(--radius-full);background:var(--login-glass-bg-subtle);color:var(--text-on-accent);font-size:var(--text-sm);font-weight:var(--font-weight-medium);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-visual-note{width:min(520px,86%);padding:var(--space-5);border:1px solid var(--login-glass-border);border-radius:var(--radius-lg);background:var(--login-glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.login-visual-note .login-eyebrow{color:var(--text-on-accent);opacity:.8}.login-visual-note strong{display:block;font-size:var(--text-xl);line-height:1.35}.login-visual-note p{margin:var(--space-2) 0 0;color:var(--text-on-accent);font-size:var(--text-sm);line-height:1.65;opacity:.82}.login-panel{padding:var(--space-8)}.login-brand{justify-content:flex-start}.login-heading{text-align:left}.sidebar{display:flex}.main-column{margin-left:248px}.header{height:64px;padding:0 var(--space-6)}.content{padding:var(--space-6)}.footer{display:flex;justify-content:space-between}.bottom-nav{display:none}.desktop-only{display:block}.mobile-only{display:none!important}.panel-layout.has-panel{grid-template-columns:minmax(480px,1fr) minmax(360px,38vw)}.detail-panel{position:-webkit-sticky;position:sticky;top:88px;z-index:auto;height:calc(100vh - 112px);border-left:1px solid var(--border-default);border-radius:var(--radius-md)}}@media (max-width:1023px){.desktop-only{display:none!important}.mobile-only{display:grid}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition-duration:.01ms!important}}