body { font-family: Inter, 'Segoe UI', Roboto, Arial, sans-serif; background-color: #f8fafc; }
        .map-3d-wrapper { overflow: hidden; border-radius: 0.75rem; position: relative; background: #f8fafc; border: 1px solid #e2e8f0; }
        .map-3d-viewport { transition: transform 0.5s ease-in-out; width: 100%; height: 100%; }
        .map-3d-active .map-3d-viewport { transform: scale(1.02); }
        .leaflet-container { width: 100%; height: 100%; border-radius: 0.75rem; z-index: 10; background: #f8fafc; }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .toast-enter { transform: translateY(100%); opacity: 0; }
        .toast-show { transform: translateY(0); opacity: 1; transition: all 0.3s ease-out; }
        @keyframes floatPillar { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } }
        .region-3d-card { animation: floatPillar 3s ease-in-out infinite; }
        .step-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: 2px solid transparent; position: relative; }
        .step-card.active { border-color: #e11d48; background-color: #fff1f2; transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.2); }
        .step-card.active .step-number { background-color: #e11d48; color: white; box-shadow: 0 0 0 4px #ffe4e6; }
        .step-card.active .step-icon { color: #e11d48; }
        .connector-line { position: absolute; top: 50%; right: -1rem; width: 1rem; height: 2px; background-color: #cbd5e1; z-index: 0; }
        @media (max-width: 1024px) { .connector-line { display: none; } }
        .fade-in { animation: fadeIn 0.4s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .org-chart-panel { overflow: hidden; }
        .org-chart-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
        .org-chart-toolbar-title { margin:0; font-size:12px; font-weight:800; color:#0f172a; display:flex; align-items:center; gap:8px; }
        .org-chart-toolbar-title i { color:#2563eb; }
        .org-chart-toolbar-note { margin:4px 0 0; font-size:10.5px; line-height:1.45; color:#64748b; }
        .org-chart-count { flex:none; display:inline-flex; align-items:center; min-height:26px; padding:4px 9px; border-radius:999px; border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; font-size:10px; font-weight:800; }
        .org-chart-scroll { overflow:auto; padding:24px 18px 30px; min-height:300px; }
        .org-tree { min-width:max-content; padding:0 12px; }
        .org-tree > ul { padding-top:0; }
        .org-tree ul { padding-top:28px; position:relative; display:flex; justify-content:center; padding-left:0; margin:0; }
        .org-tree li { text-align:center; list-style-type:none; position:relative; padding:28px 12px 0 12px; }
        .org-tree > ul > li { padding-top:0; }
        .org-tree li::before, .org-tree li::after { content:''; position:absolute; top:0; right:50%; border-top:2px solid #cbd5e1; width:50%; height:28px; }
        .org-tree li::after { right:auto; left:50%; border-left:2px solid #cbd5e1; }
        .org-tree > ul > li::before, .org-tree > ul > li::after { display:none; }
        .org-tree li:only-child::after, .org-tree li:only-child::before { display:none; }
        .org-tree li:only-child { padding-top:0; }
        .org-tree ul ul > li:only-child { padding-top:28px; }
        .org-tree li:first-child::before, .org-tree li:last-child::after { border:0 none; }
        .org-tree li:last-child::before { border-right:2px solid #cbd5e1; border-radius:0 6px 0 0; }
        .org-tree li:first-child::after { border-radius:6px 0 0 0; }
        .org-tree ul ul::before { content:''; position:absolute; top:0; left:50%; border-left:2px solid #cbd5e1; width:0; height:28px; margin-left:-1px; }
        .org-node { display:inline-flex; flex-direction:column; align-items:center; padding:13px 12px 11px; border-radius:14px; background:#fff; border:1px solid #dbe3ee; border-top:4px solid #2563eb; box-shadow:0 4px 12px rgba(15,23,42,.07); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; width:176px; min-height:150px; position:relative; z-index:10; }
        .org-node:hover { transform:translateY(-2px); border-color:#93c5fd; box-shadow:0 8px 20px rgba(15,23,42,.10); z-index:20; }
        .org-node.is-root { border-top-color:#e11d48; }
        .org-avatar-button { position:relative; width:58px; height:58px; border-radius:999px; overflow:hidden; border:2px solid #e2e8f0; background:#f1f5f9; box-shadow:0 2px 6px rgba(15,23,42,.08); margin-bottom:8px; }
        .org-avatar-button img { width:100%; height:100%; object-fit:cover; display:block; }
        .org-avatar-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.66); color:#fff; opacity:0; transition:opacity .16s ease; font-size:12px; }
        body.is-editing .org-avatar-button { cursor:pointer; }
        body.is-editing .org-avatar-button:hover .org-avatar-overlay { opacity:1; }
        .org-node-name { width:100%; margin:0; font-size:11px; line-height:1.35; font-weight:900; color:#0f172a; text-transform:uppercase; overflow-wrap:anywhere; }
        .org-node-title { width:100%; margin:3px 0 0; font-size:9px; line-height:1.35; font-weight:800; color:#2563eb; text-transform:uppercase; overflow-wrap:anywhere; }
        .org-node.is-root .org-node-title { color:#e11d48; }
        .org-node-phone { width:100%; margin:5px 0 0; font-size:8.5px; line-height:1.3; color:#64748b; font-weight:650; display:flex; align-items:center; justify-content:center; gap:4px; overflow-wrap:anywhere; }
        .org-node-phone i { color:#94a3b8; font-size:8px; }
        .org-node-actions { display:none; width:100%; margin-top:10px; padding-top:8px; border-top:1px solid #eef2f7; gap:5px; justify-content:center; flex-wrap:wrap; }
        body.is-editing .org-node-actions { display:flex; }
        .org-node-action { border:1px solid #dbe3ee; background:#f8fafc; color:#475569; border-radius:8px; padding:4px 6px; font-size:9px; font-weight:800; line-height:1; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
        .org-node-action:hover { border-color:#93c5fd; background:#eff6ff; color:#1d4ed8; }
        .org-node-action.danger:hover { border-color:#fecaca; background:#fff1f2; color:#be123c; }
        .org-chart-empty { padding:44px 20px; text-align:center; color:#94a3b8; }
        .org-chart-empty i { font-size:28px; margin-bottom:10px; }
        .org-chart-empty p { margin:0; font-size:12px; font-weight:700; }
        .editable-text { outline:none; }
        @media (max-width: 760px) {
          .org-chart-toolbar { flex-direction:column; }
          .org-chart-scroll { padding:20px 10px 26px; }
          .org-node { width:160px; }
        }
.dropdown-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
        .dropdown-closed { opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); pointer-events: none; }
        .dropdown-menu { transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: top right; }

        @media print {
            body { font-size: 12px; }
            #sidebar, .no-print { display: none !important; }
            main { padding: 0 !important; }
            .bg-slate-100 { background: white !important; }
            .shadow-sm, .shadow-lg { box-shadow: none !important; border: 1px solid #ddd; }
            canvas { max-height: 250px !important; }
        }
    
:root{--wcm-red:#e11d48;--wcm-navy:#0f172a;--wcm-border:#e2e8f0;--wcm-muted:#64748b}
*{box-sizing:border-box}html,body{margin:0}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(59,130,246,.28);outline-offset:2px}
.auth-gate{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 20% 10%,rgba(225,29,72,.18),transparent 32%),linear-gradient(145deg,#0f172a,#111827 55%,#1e293b)}
.auth-gate[hidden]{display:none!important}.auth-card{width:min(430px,100%);background:#fff;border:1px solid rgba(255,255,255,.28);border-radius:24px;padding:28px;box-shadow:0 28px 80px rgba(2,6,23,.38)}.auth-brand-row{display:flex;gap:14px;align-items:center}.auth-logo{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#e3182d;color:#fff;font-size:26px;font-weight:900}.auth-eyebrow{font-size:10px;letter-spacing:.14em;font-weight:800;color:#94a3b8}.auth-card h1{font-size:20px;line-height:1.25;margin:3px 0 0;color:#0f172a;font-weight:850}.auth-description{font-size:13px;line-height:1.6;color:#64748b;margin:18px 0}.auth-card label{display:block;font-size:11px;font-weight:800;color:#334155;margin:0 0 7px}.auth-input-wrap{display:flex;align-items:center;gap:8px;border:1px solid #cbd5e1;border-radius:12px;padding:0 11px;background:#f8fafc}.auth-input-wrap:focus-within{border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.1);background:#fff}.auth-input-wrap input{border:0;outline:0;flex:1;min-width:0;padding:12px 0;background:transparent;font-size:14px}.auth-input-wrap button{border:0;background:transparent;color:#64748b;padding:6px;cursor:pointer}.auth-error{margin:9px 0 0;padding:8px 10px;border-radius:9px;background:#fff1f2;color:#be123c;font-size:11px;font-weight:700}.auth-submit{margin-top:14px;width:100%;border:0;border-radius:12px;padding:12px 14px;background:#0f172a;color:#fff;display:flex;justify-content:center;align-items:center;gap:8px;font-weight:800;cursor:pointer}.auth-submit:hover{background:#1e293b}.auth-submit:disabled{opacity:.65;cursor:wait}.auth-note{display:flex;gap:8px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid #f1f5f9;color:#64748b;font-size:10.5px;line-height:1.45}
.app-topbar{height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;background:rgba(255,255,255,.96);border-bottom:1px solid #e2e8f0;box-shadow:0 1px 2px rgba(15,23,42,.04);z-index:35}.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px;min-width:0}.topbar-title-wrap{display:flex;flex-direction:column;min-width:0}.topbar-kicker{font-size:8px;font-weight:900;letter-spacing:.14em;color:#94a3b8;line-height:1}.topbar-title-wrap strong{font-size:13px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.data-status-pill,.role-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e8f0;border-radius:999px;background:#f8fafc;padding:5px 9px;font-size:10px;font-weight:800;color:#475569;white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;background:#10b981}.data-status-pill[data-kind="loading"] .status-dot{background:#f59e0b;animation:pulse 1s infinite}.data-status-pill[data-kind="error"] .status-dot{background:#e11d48}.role-badge[data-role="admin"]{background:#fff1f2;border-color:#fecdd3;color:#be123c}.role-badge[data-role="staff"]{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.logout-btn,.topbar-icon-btn{border:1px solid #e2e8f0;background:#fff;color:#334155;border-radius:10px;padding:7px 10px;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;cursor:pointer}.logout-btn:hover,.topbar-icon-btn:hover{background:#f8fafc;border-color:#cbd5e1}.staff-hidden{display:none!important}.mobile-only{display:none}
.sidebar-overlay{position:fixed;inset:0;z-index:25;background:rgba(15,23,42,.46);backdrop-filter:blur(2px);border:0}.sidebar-overlay[hidden]{display:none}
.import-mode-control{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:#475569}.import-mode-control select{border:1px solid #cbd5e1;border-radius:9px;padding:6px 8px;background:#fff;color:#334155}.table-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-size:10px;font-weight:700}.table-pager>div{display:flex;gap:6px}.table-pager button{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:8px;padding:5px 9px;font-weight:800;cursor:pointer}.table-pager button:disabled{opacity:.4;cursor:not-allowed}.status-chip{display:inline-flex;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:999px;padding:3px 7px;background:#f1f5f9;color:#475569;font-size:9px;font-weight:800}.analysis-mini-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;min-width:0}.analysis-mini-card>span{font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:850;color:#64748b}.analysis-mini-card strong{font-size:14px;color:#0f172a}.analysis-mini-card small{font-size:10px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.analysis-mini-card select{margin-top:2px;border:1px solid #dbeafe;background:#fff;border-radius:8px;padding:5px;font-size:10px}.region-manager-card{background:#fff;border:1px solid #e2e8f0;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:0 2px 7px rgba(15,23,42,.05)}.manager-head{display:flex;align-items:center;gap:9px}.manager-avatar{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;font-weight:900}.manager-head>div:nth-child(2){min-width:0;flex:1}.manager-head h3{margin:0;color:#0f172a;font-size:12px;font-weight:900}.manager-head span{font-size:9px;color:#64748b}.manager-head>strong{font-size:20px;color:#0f172a}.manager-head>strong small{font-size:9px;color:#94a3b8}.manager-section{margin-top:10px;padding:9px;background:#f8fafc;border-radius:10px}.manager-section b{font-size:10px;color:#475569}.manager-section>div{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.manager-section>div span{font-size:9px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:3px 5px}.manager-section p{font-size:9px;color:#64748b;margin:5px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:35px;text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:14px;color:#64748b}
.wcm-toast{pointer-events:auto;min-width:250px;max-width:390px;display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 14px 36px rgba(15,23,42,.16);font-size:11px;font-weight:700;line-height:1.45;opacity:0;transform:translateY(12px);transition:.2s}.wcm-toast.show{opacity:1;transform:none}.wcm-toast-success{border-left:4px solid #10b981}.wcm-toast-error{border-left:4px solid #e11d48}.wcm-toast-info{border-left:4px solid #3b82f6}
.region-3d-card{animation:none!important}.step-card.active{transform:none}.tab-content{animation:none!important}
@keyframes pulse{50%{opacity:.35}}
@media (max-width:900px){.mobile-only{display:inline-flex}#sidebar{position:fixed!important;left:0;top:0;bottom:0;height:100vh!important;z-index:40;transform:translateX(-105%);transition:transform .22s ease;width:240px!important}#sidebar.mobile-open{transform:translateX(0)}.app-topbar{padding:0 11px}.topbar-kicker,.data-status-pill{display:none}.topbar-title-wrap strong{max-width:42vw}.logout-btn span{display:none}.logout-btn{padding:8px}.role-badge{font-size:9px}.main{padding:12px}}
@media (max-width:560px){.auth-card{padding:22px;border-radius:20px}.topbar-title-wrap strong{max-width:38vw}.role-badge{max-width:105px;overflow:hidden;text-overflow:ellipsis}.app-topbar{height:54px}.topbar-right{gap:5px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media screen { body [class~="text-[9px]"]{font-size:10px!important;line-height:1.35} body [class~="text-[10px]"]{font-size:11px!important;line-height:1.4} }
@media print{body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}


/* 2026-08-12 UI regression fixes: desktop navigation + analytics readability */
@media (min-width: 901px) {
  #sidebar:not(.w-20) { width: 276px !important; }
  #sidebar.w-20 { width: 80px !important; }
  #sidebar:not(.w-20) .nav-item { min-width: 0; }
  #sidebar:not(.w-20) .nav-item .sidebar-text { overflow: hidden; text-overflow: ellipsis; }
}
#sidebar nav { overflow-x: hidden; }
#sidebar .nav-item { min-height: 40px; overflow: hidden; }
#sidebar .nav-item .sidebar-text { min-width: 0; }
#sidebar .nav-item[data-tab="tab-solar-finance"] { margin-left: 0 !important; }
#sidebar:not(.w-20) .nav-item { padding-left: 12px; padding-right: 12px; font-size: 12px; }
#sidebar:not(.w-20) .sidebar-section-label { font-size: 9px; letter-spacing: .08em; }
.analytics-chart-frame { height: 320px; min-height: 320px; position: relative; }
@media (max-width: 1100px) { .analytics-chart-frame { height: 300px; min-height: 300px; } }
@media (max-width: 640px) { .analytics-chart-frame { height: 280px; min-height: 280px; } }

/* Store CRUD */
.store-form-field{display:flex;flex-direction:column;gap:.4rem;font-weight:700;color:#475569}
.store-form-field input,.store-form-field select,.store-form-field textarea{width:100%;border:1px solid #cbd5e1;border-radius:.75rem;padding:.65rem .75rem;background:#fff;color:#0f172a;outline:none;font-weight:600}
.store-form-field input:focus,.store-form-field select:focus,.store-form-field textarea:focus{border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.10)}
.store-row-actions{display:flex;justify-content:center;gap:.35rem;white-space:nowrap}
.store-row-actions button{width:30px;height:30px;border-radius:.55rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;background:#fff;transition:.15s ease}
.store-row-actions .edit:hover{background:#eef2ff;border-color:#c7d2fe;color:#4338ca}
.store-row-actions .delete:hover{background:#fff1f2;border-color:#fecdd3;color:#be123c}

/* Store CRUD */
.store-form-field{display:flex;flex-direction:column;gap:.4rem;font-weight:700;color:#475569}
.store-form-field input,.store-form-field select,.store-form-field textarea{width:100%;border:1px solid #cbd5e1;border-radius:.75rem;padding:.65rem .75rem;background:#fff;color:#0f172a;outline:none;font-weight:600}
.store-form-field input:focus,.store-form-field select:focus,.store-form-field textarea:focus{border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.10)}
.store-row-actions{display:flex;justify-content:center;gap:.35rem;white-space:nowrap}
.store-row-actions button{width:30px;height:30px;border-radius:.55rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;background:#fff;transition:.15s ease}
.store-row-actions .edit:hover{background:#eef2ff;border-color:#c7d2fe;color:#4338ca}
.store-row-actions .delete:hover{background:#fff1f2;border-color:#fecdd3;color:#be123c}

/* Store CRUD */
.store-form-field{display:flex;flex-direction:column;gap:.4rem;font-weight:700;color:#475569}
.store-form-field input,.store-form-field select,.store-form-field textarea{width:100%;border:1px solid #cbd5e1;border-radius:.75rem;padding:.65rem .75rem;background:#fff;color:#0f172a;outline:none;font-weight:600}
.store-form-field input:focus,.store-form-field select:focus,.store-form-field textarea:focus{border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.10)}
.store-row-actions{display:flex;justify-content:center;gap:.35rem;white-space:nowrap}
.store-row-actions button{width:30px;height:30px;border-radius:.55rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;background:#fff;transition:.15s ease}
.store-row-actions .edit:hover{background:#eef2ff;border-color:#c7d2fe;color:#4338ca}
.store-row-actions .delete:hover{background:#fff1f2;border-color:#fecdd3;color:#be123c}

.project-status{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .55rem;border-radius:999px;font-size:.68rem;font-weight:800;white-space:nowrap}.project-status.done{background:#dcfce7;color:#166534}.project-status.doing{background:#fef3c7;color:#92400e}.project-status.cancelled{background:#ffe4e6;color:#9f1239}.project-status.pending{background:#f1f5f9;color:#64748b}

/* ==========================================================================
   2026-09-23 · Lớp giao diện mềm (cùng hướng với portal WCM đã duyệt)
   --------------------------------------------------------------------------
   HTML của app viết bằng utility Tailwind dựng sẵn (tailwind.css không build
   lại lúc deploy), nên phần lớn thay đổi nằm ở đây: một màu đỏ thương hiệu,
   còn lại là trung tính; chữ đậm tối đa 700; bỏ gradient, bóng nặng, viền
   màu trên đầu thẻ và icon trang trí mờ. Mọi quy tắc gắn với #app-shell hoặc
   .auth-gate để thắng utility (một class) mà không cần !important.
   ========================================================================== */
:root {
  --st-red: #a11d2b;
  --st-red-deep: #8a1824;
  --st-red-soft: #fbeeef;
  /* Bề mặt, chữ và màu trạng thái lấy từ app Bảo trì (WCM-Technical-Maintenance-Dashboard),
     app chuẩn của hệ WCM, để hai app nhìn như một hệ. */
  --st-paper: #F3F6FB;
  --st-surface: #FFFFFF;
  --st-ink: #26364A;
  --st-ink-2: #5D6B7E;
  --st-muted: #5D6B7E;
  --st-faint: #8593A5;
  --st-line: #E7EDF6;
  --st-line-strong: #D3DEEC;
  --st-tile: #F1F5FA;
  --st-sky: #4A84F4;
  --st-sky-ink: #2D5FC4;
  --st-sky-wash: #EAF1FE;
  --st-mint: #16B884;
  --st-amber: #F6AA2A;
  --st-rose: #F24B64;
  /* 4 miền dùng đúng 4 màu trạng thái tươi của app Bảo trì */
  --st-bac: #F24B64;
  --st-trung: #F6AA2A;
  --st-tay: #16B884;
  --st-nam: #4A84F4;
  --st-shadow: 0 2px 6px rgba(38, 54, 74, .05), 0 16px 32px -20px rgba(38, 54, 74, .28);
}

body { font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; background-color: var(--st-paper); color: var(--st-ink); }
#app-shell main { background: var(--st-paper); }

/* ---- Chữ: bớt đậm, bớt giãn ---- */
#app-shell .font-black { font-weight: 700; }
#app-shell .font-extrabold { font-weight: 600; }
#app-shell .tracking-wider, #app-shell .tracking-widest { letter-spacing: .03em; }
#app-shell .tracking-tight, #app-shell .tracking-tighter { letter-spacing: -.01em; }
#app-shell .text-slate-900, #app-shell .text-slate-800 { color: var(--st-ink); }
#app-shell .text-slate-500 { color: var(--st-muted); }
#app-shell .text-slate-400 { color: var(--st-faint); }
#app-shell [style*="Georgia"] { font-family: inherit !important; }

/* ---- Bề mặt: thẻ trắng viền mảnh, không bóng khi đứng yên ---- */
#app-shell .rounded-2xl { border-radius: 14px; }
#app-shell .rounded-xl { border-radius: 10px; }
#app-shell main .shadow-sm { box-shadow: none; }
#app-shell main .shadow-md, #app-shell main .shadow-lg, #app-shell main .shadow-xl { box-shadow: var(--st-shadow); }
#app-shell main .border-slate-200 { border-color: var(--st-line); }
#app-shell [class~="border-t-4"] { border-top-width: 1px; border-top-color: var(--st-line); }
#app-shell [class~="border-b-4"] { border-bottom-width: 1px; border-bottom-color: var(--st-line); }
#app-shell [class~="border-l-4"] { border-left-width: 1px; }
#app-shell .absolute.opacity-5, #app-shell .absolute.opacity-10 { display: none; }
#app-shell .animate-pulse { animation: none; }
#app-shell .shadow-inner { box-shadow: none; }

/* ---- Thẻ số liệu (trước là nền gradient nhạt + vạch màu 4px) ---- */
#app-shell .wcm-card { background: var(--st-surface); border: 1px solid var(--st-line); color: var(--st-ink); }
#app-shell .wcm-card .text-white { color: var(--st-ink); }
#app-shell .wcm-card .text-slate-300, #app-shell .wcm-card .text-slate-400 { color: var(--st-muted); }
/* Số liệu trong thẻ về một màu mực; màu chỉ còn ở biểu đồ, nơi nó mang nghĩa (miền, trạng thái). */
#app-shell .wcm-card h3, #app-shell .wcm-card h4 { color: var(--st-ink); font-weight: 600; }
#app-shell .wcm-card .uppercase { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--st-muted); }
#app-shell .wcm-card :is(i, svg)[class*="text-"] { color: var(--st-faint); }
/* Nhãn nhỏ in hoa kiểu "TỔNG SỐ", "ĐANG THI CÔNG": giữ chữ gốc nhưng dịu lại. */
#app-shell main .uppercase { letter-spacing: .02em; }
/* Huy hiệu "Tất cả năm" cạnh tiêu đề biểu đồ: một kiểu trung tính cho mọi thẻ. */
#app-shell main h2 + span[class*="rounded"], #app-shell main h2 ~ span[class*="bg-"][class*="-50"] { background: var(--st-tile); color: var(--st-ink-2); border-color: transparent; font-weight: 500; }
#app-shell main h2 > :is(i, svg)[class*="text-"] { color: var(--st-faint); }

/* ---- Dải tiêu đề của từng mục (trước là nền tối gradient) ---- */
#app-shell .wcm-banner {
  background: var(--st-surface);
  color: var(--st-ink);
  border: 1px solid var(--st-line);
  border-radius: 14px;
  box-shadow: none;
}
#app-shell .wcm-banner h1 { color: var(--st-ink); font-weight: 600; }
#app-shell .wcm-banner .text-white { color: var(--st-ink); }
#app-shell .wcm-banner .text-slate-100, #app-shell .wcm-banner .text-slate-200, #app-shell .wcm-banner .text-slate-300 { color: var(--st-ink-2); }
#app-shell .wcm-banner .text-slate-400 { color: var(--st-faint); }
#app-shell .wcm-banner .text-slate-600 { color: var(--st-line-strong); }
#app-shell .wcm-banner :is(i, svg)[class*="text-amber"], #app-shell .wcm-banner :is(i, svg)[class*="text-emerald"],
#app-shell .wcm-banner :is(i, svg)[class*="text-winred"], #app-shell .wcm-banner :is(i, svg)[class*="text-benkon"] { color: var(--st-muted); }
#app-shell .wcm-banner .rounded-full[class*="bg-amber-500"], #app-shell .wcm-banner .rounded-full[class*="bg-benkon-500"] {
  background: var(--st-tile); border-color: transparent; color: var(--st-ink-2); font-weight: 500;
}
#app-shell .wcm-banner input, #app-shell .wcm-banner select {
  background: var(--st-surface); color: var(--st-ink); border-color: var(--st-line-strong); font-weight: 500;
}
#app-shell .wcm-banner input::placeholder { color: var(--st-faint); }
#app-shell .wcm-banner [class~="bg-white/10"] { background: var(--st-surface); color: var(--st-ink); border-color: var(--st-line-strong); }
/* Bộ lọc nằm sát mép trên của khung danh sách: bo góc để lại cho khung ngoài. */
#app-shell .wcm-banner.wcm-banner--flush { border-radius: 0; border-width: 0 0 1px; }

/* ---- Nút: một kiểu chính (đỏ phẳng) và một kiểu phụ (viền) ---- */
#app-shell .wcm-btn {
  background: var(--st-surface); background-image: none; color: var(--st-ink); border: 1px solid var(--st-line-strong);
  box-shadow: none; font-weight: 600; transform: none;
}
#app-shell .wcm-btn:hover { background: var(--st-tile); }
#app-shell .wcm-btn :is(i, svg) { color: currentColor; }
#app-shell .wcm-btn-primary, .wcm-btn-primary {
  background: var(--st-red); background-image: none; color: #fff; border: 1px solid var(--st-red);
  box-shadow: none; font-weight: 600; transform: none;
}
#app-shell .wcm-btn-primary:hover, .wcm-btn-primary:hover { background: var(--st-red-deep); }
#app-shell .wcm-btn-primary :is(i, svg), .wcm-btn-primary :is(i, svg) { color: currentColor; }

/* Nút tô màu đặc rải rác (đỏ, xanh lá, xanh dương, vàng): quy về một nút chính màu đỏ thương hiệu.
   Dùng [class~=] để thắng cả utility hover:bg-… của Tailwind. Modal nằm ngoài #app-shell nên gắn vào body. */
body button:is([class~="bg-winred-600"], [class~="bg-emerald-600"], [class~="bg-blue-600"], [class~="bg-amber-500"]) {
  background: var(--st-red); color: #fff; font-weight: 600; box-shadow: none;
}
body button:is([class~="bg-winred-600"], [class~="bg-emerald-600"], [class~="bg-blue-600"], [class~="bg-amber-500"]):hover { background: var(--st-red-deep); }

/* ---- 4 ô miền ở trang tổng quan ---- */
.wcm-region { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 12px; }
.wcm-region-name { display: flex; white-space: nowrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--st-ink-2); }
.wcm-region-name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.wcm-region-count { margin: 0; white-space: nowrap; font-size: 18px; font-weight: 600; color: var(--st-ink); font-variant-numeric: tabular-nums; }
/* 4 miền: 2×2 khi vùng nội dung hẹp, một hàng 4 ô khi đủ rộng. Thanh bên chiếm 276px nên
   ngưỡng lg của Tailwind (1024px màn hình) là quá sớm: 4 ô sẽ chật và chữ bị gãy dòng. */
.wcm-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) { .wcm-region-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .wcm-region-grid { grid-template-columns: 1fr; } }
#kpi-peak-year { margin-right: 8px; }
#kpi-peak-year-sub { white-space: nowrap; }
.wcm-region--bac { --dot: var(--st-bac); }
.wcm-region--trung { --dot: var(--st-trung); }
.wcm-region--tay { --dot: var(--st-tay); }
.wcm-region--nam { --dot: var(--st-nam); }
.wcm-kpi-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--st-muted); }
.wcm-kpi-label[class*="wcm-dot--"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; }
.wcm-dot--sky { --dot: var(--st-sky); } .wcm-dot--mint { --dot: var(--st-mint); } .wcm-dot--amber { --dot: var(--st-amber); } .wcm-dot--rose { --dot: var(--st-rose); }
#app-shell .wcm-kpi-value { white-space: nowrap; font-size: 24px; font-weight: 600; color: var(--st-ink); font-variant-numeric: tabular-nums; }

/* ---- Thanh bên: nền trắng, logo chuẩn, mục menu một màu ---- */
#sidebar.wcm-rail { background: var(--st-surface); color: var(--st-ink-2); border-right: 1px solid var(--st-line); box-shadow: none; }
.wcm-rail-head { height: 64px; padding: 0 12px 0 16px; transition: padding .3s ease; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--st-line); flex-shrink: 0; overflow: hidden; }
.wcm-rail-logo { display: block; height: 34px; width: auto; max-width: none; margin-left: -6px; }
/* Thu gọn: không đổi kiểu căn lề (đổi là nút nhảy ngang tức thì). Nút luôn bám mép phải và
   trượt theo bề rộng đang co; padding 25px để khi co xong nó nằm giữa rãnh 80px. */
#sidebar.w-20 .wcm-rail-head { padding: 0 25px; }
.wcm-rail-toggle { margin-left: auto; }
/* Nhãn nhóm menu giữ nguyên chiều cao khi thu gọn (thành một vạch mảnh) — nếu ẩn hẳn,
   mọi mục bên dưới nhảy lên 26px ngay lúc bấm. */
#sidebar .wcm-nav-group.hidden { display: block; }
#sidebar.w-20 .wcm-nav-group .sidebar-section-label { position: relative; color: transparent; white-space: nowrap; overflow: hidden; }
#sidebar.w-20 .wcm-nav-group .sidebar-section-label::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 1px solid var(--st-line); }
#sidebar.w-20 .wcm-rail-logo, .wcm-rail-logo.hidden { display: none; }
.wcm-rail-toggle { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--st-faint); cursor: pointer; }
.wcm-rail-toggle:hover { background: var(--st-tile); color: var(--st-ink); }
#sidebar .sidebar-section-label { margin: 0; padding: 0 12px; font-size: 12px !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none; color: var(--st-faint); }
#sidebar .nav-item { color: var(--st-ink-2); font-size: 13.5px !important; font-weight: 500; border-radius: 9px; border: 0; background: transparent; transition: background-color .15s ease, color .15s ease; }
#sidebar .nav-item :is(i, svg) { color: var(--st-faint); transition: color .15s ease; }
#sidebar .nav-item .sidebar-text { color: inherit; font-weight: inherit; }
#sidebar .nav-item:hover { background: var(--st-tile); color: var(--st-ink); }
#sidebar .nav-item:hover :is(i, svg) { color: var(--st-ink-2); }
#sidebar .nav-item.is-active { background: var(--st-sky-wash); color: var(--st-sky-ink); font-weight: 600; }
#sidebar .nav-item.is-active :is(i, svg) { color: var(--st-sky-ink); }
#sidebar .nav-item:focus-visible { outline: 2px solid var(--st-sky); outline-offset: 1px; }

/* ---- Thanh trên cùng ---- */
.app-topbar { background: var(--st-surface); border-bottom-color: var(--st-line); box-shadow: none; }
.topbar-title-wrap strong { font-size: 16px; font-weight: 600; color: var(--st-ink); letter-spacing: -.01em; }
.data-status-pill, .role-badge { border-color: var(--st-line); background: var(--st-surface); color: var(--st-ink-2); font-size: 12px; font-weight: 500; padding: 5px 10px; }
.role-badge[data-role="admin"] { background: var(--st-red-soft); border-color: transparent; color: var(--st-red); }
.role-badge[data-role="staff"] { background: var(--st-tile); border-color: transparent; color: var(--st-ink-2); }
.logout-btn, .topbar-icon-btn { border-color: var(--st-line-strong); color: var(--st-ink-2); font-size: 12.5px; font-weight: 500; border-radius: 9px; }
.logout-btn:hover, .topbar-icon-btn:hover { background: var(--st-tile); border-color: var(--st-line-strong); }

/* ---- Màn đăng nhập ---- */
.auth-gate { background: var(--st-paper); }
.auth-card { border: 1px solid var(--st-line); border-radius: 16px; box-shadow: 0 24px 60px -32px rgba(31, 36, 48, .35); }
.auth-brand-row { flex-direction: column; align-items: flex-start; gap: 18px; }
.auth-brand-logo { display: block; height: 40px; width: auto; margin-left: -6px; }
.auth-card h1 { font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--st-ink); margin: 0; }
.auth-description { margin: 6px 0 20px; color: var(--st-muted); font-size: 14px; line-height: 1.55; }
.auth-card label { font-size: 13px; font-weight: 500; color: var(--st-ink-2); }
.auth-input-wrap { border-color: var(--st-line-strong); border-radius: 10px; background: var(--st-surface); }
.auth-input-wrap:focus-within { border-color: var(--st-red); box-shadow: 0 0 0 3px rgba(232, 28, 36, .12); background: var(--st-surface); }
.auth-input-wrap > svg { flex: none; color: var(--st-faint); }
/* Nút hiện/ẩn mật khẩu — cùng thông số .wcm-auth-toggle của app kho/khảo sát/hiệu suất. */
.auth-input-wrap button { flex: none; width: 32px; height: 32px; margin-right: -5px; padding: 0; display: grid; place-items: center; border-radius: 8px; color: var(--st-faint); }
.auth-input-wrap button:hover { background: #F1F5FA; color: var(--st-ink); }
.auth-submit { background: var(--st-red); border-radius: 10px; font-weight: 600; }
/* Cao đúng 44px, chữ 14px như ô nhập/nút của app kho (DESIGN_SYSTEM.md §4.9). */
.auth-card .auth-input-wrap { box-sizing: border-box; height: 44px; }
.auth-card .auth-input-wrap input { height: 100%; padding: 0; font-size: 14px; }
.auth-card .auth-submit { box-sizing: border-box; height: 44px; padding: 0 14px; font-size: 14px; }
.auth-submit:hover { background: var(--st-red-deep); }
.auth-error { font-weight: 500; font-size: 12.5px; }

/* ---- Chi tiết nhỏ khác ---- */
.status-chip, .project-status { font-weight: 600; }
.analysis-mini-card > span { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.region-manager-card { border-left-width: 1px; border-color: var(--st-line); box-shadow: none; }
.manager-avatar { background: var(--st-tile); color: var(--st-ink-2); font-weight: 600; }
.manager-head h3 { font-weight: 600; font-size: 13px; }
.org-node { border-top-width: 1px; border-color: var(--st-line); box-shadow: none; }
.org-node-name { font-weight: 600; text-transform: none; font-size: 12px; }
.org-node-title { font-weight: 500; text-transform: none; color: var(--st-muted); font-size: 11px; }
.org-node.is-root .org-node-title { color: var(--st-red); }
.step-card.active { border-color: var(--st-red); background-color: var(--st-red-soft); box-shadow: none; }
.step-card.active .step-number { background-color: var(--st-red); box-shadow: none; }
.step-card.active .step-icon { color: var(--st-red); }
.wcm-toast { font-weight: 500; font-size: 13px; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--st-sky); outline-offset: 2px; }

/* ---- Đợt 2: các mẫu lặp lại trong các tab Solar, Temperature, Lợi nhuận ---- */
/* Icon lớn mờ đặt chìm góc thẻ: chỉ để trang trí. */
#app-shell main .absolute:is(.opacity-5, .opacity-10, .opacity-40, .opacity-50):not(button):not(input) { display: none; }
#app-shell .drop-shadow-md { filter: none; }
/* Ô nền màu nhạt (ô nhập thông số, thẻ số liệu) → thẻ trắng viền mảnh. Chip bo tròn giữ nguyên màu vì nó mang trạng thái. */
#app-shell main div:is([class~="bg-amber-50"], [class~="bg-amber-50/50"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-emerald-50"], [class~="bg-emerald-50/50"], [class~="bg-rose-50"], [class~="bg-rose-50/50"]):not(.rounded-full):not([class~="rounded-md"]) { background: var(--st-surface); }
#app-shell main :is([class~="border-amber-100"], [class~="border-amber-200"], [class~="border-benkon-200"], [class~="border-blue-100"], [class~="border-blue-200"], [class~="border-emerald-100"], [class~="border-emerald-200"], [class~="border-rose-100"], [class~="border-rose-200"]) { border-color: var(--st-line); }
/* Số liệu và nhãn tô màu trong thẻ → mực/xám; màu chỉ còn ở biểu đồ và chip trạng thái. */
#app-shell main :is(h2, h3):is([class~="text-amber-500"], [class~="text-amber-600"], [class~="text-amber-700"], [class~="text-benkon-500"], [class~="text-benkon-600"], [class~="text-benkon-700"], [class~="text-blue-500"], [class~="text-blue-600"], [class~="text-blue-700"], [class~="text-emerald-500"], [class~="text-emerald-600"], [class~="text-emerald-700"], [class~="text-indigo-500"], [class~="text-indigo-600"], [class~="text-indigo-700"], [class~="text-purple-500"], [class~="text-purple-600"], [class~="text-purple-700"], [class~="text-red-500"], [class~="text-red-600"], [class~="text-red-700"], [class~="text-rose-500"], [class~="text-rose-600"], [class~="text-rose-700"]) { color: var(--st-ink); }
#app-shell main span.uppercase:is([class~="text-amber-500"], [class~="text-amber-600"], [class~="text-amber-700"], [class~="text-benkon-500"], [class~="text-benkon-600"], [class~="text-benkon-700"], [class~="text-blue-500"], [class~="text-blue-600"], [class~="text-blue-700"], [class~="text-emerald-500"], [class~="text-emerald-600"], [class~="text-emerald-700"], [class~="text-indigo-500"], [class~="text-indigo-600"], [class~="text-indigo-700"], [class~="text-purple-500"], [class~="text-purple-600"], [class~="text-purple-700"], [class~="text-red-500"], [class~="text-red-600"], [class~="text-red-700"], [class~="text-rose-500"], [class~="text-rose-600"], [class~="text-rose-700"]), #app-shell main p.uppercase:is([class~="text-amber-500"], [class~="text-amber-600"], [class~="text-amber-700"], [class~="text-benkon-500"], [class~="text-benkon-600"], [class~="text-benkon-700"], [class~="text-blue-500"], [class~="text-blue-600"], [class~="text-blue-700"], [class~="text-emerald-500"], [class~="text-emerald-600"], [class~="text-emerald-700"], [class~="text-indigo-500"], [class~="text-indigo-600"], [class~="text-indigo-700"], [class~="text-purple-500"], [class~="text-purple-600"], [class~="text-purple-700"], [class~="text-red-500"], [class~="text-red-600"], [class~="text-red-700"], [class~="text-rose-500"], [class~="text-rose-600"], [class~="text-rose-700"]) { color: var(--st-muted); }
#app-shell .wcm-banner :is(p, span)[class*="text-amber"] { color: var(--st-muted); }
/* Nút phụ tô màu nhạt (Xuất PDF, Tải Excel, Reset…) → một kiểu nút viền trung tính. */
body button:is([class~="bg-amber-50"], [class~="bg-blue-50"], [class~="bg-emerald-50"], [class~="bg-rose-50"], [class~="bg-slate-100"]) { background: var(--st-surface); color: var(--st-ink-2); border: 1px solid var(--st-line-strong); font-weight: 500; }
body button:is([class~="bg-amber-50"], [class~="bg-blue-50"], [class~="bg-emerald-50"], [class~="bg-rose-50"], [class~="bg-slate-100"]):hover { background: var(--st-tile); color: var(--st-ink); }

/* ---- Đợt 3 (2026-09-23): tươi sáng hơn ----
   App này là khuôn giao diện cho mọi app WCM. Màu chỉ đặt vào chỗ mang nghĩa: 4 thẻ số và
   4 ô miền có nền nhạt theo đúng màu của nó (miền nào màu nấy như biểu đồ), chữ số dùng tông
   đậm cùng họ màu để đủ tương phản. Bề mặt còn lại vẫn trắng. */
:root {
  --st-paper: #F2F6FC;
  --st-sky-wash: #E8F0FE;   --st-sky-edge: #D3E2FD;   --st-sky-ink: #2D5FC4;
  --st-mint-wash: #E0F5EC;  --st-mint-edge: #C5ECDC;  --st-mint-ink: #0F7C5A;
  --st-amber-wash: #FEF1DA; --st-amber-edge: #FBE0AE; --st-amber-ink: #8A6008;
  --st-rose-wash: #FDE8EC;  --st-rose-edge: #F9CDD5;  --st-rose-ink: #C42A3E;
}
.wcm-kpi { background: var(--wash); border: 1px solid var(--edge); }
.wcm-kpi .wcm-kpi-label { color: var(--ink); }
#app-shell .wcm-kpi .wcm-kpi-value { color: var(--st-ink); }
.wcm-kpi #kpi-peak-year-sub { color: var(--ink); opacity: .8; }
.wcm-kpi--sky   { --wash: var(--st-sky-wash);   --edge: var(--st-sky-edge);   --ink: var(--st-sky-ink); }
.wcm-kpi--mint  { --wash: var(--st-mint-wash);  --edge: var(--st-mint-edge);  --ink: var(--st-mint-ink); }
.wcm-kpi--amber { --wash: var(--st-amber-wash); --edge: var(--st-amber-edge); --ink: var(--st-amber-ink); }
.wcm-kpi--rose  { --wash: var(--st-rose-wash);  --edge: var(--st-rose-edge);  --ink: var(--st-rose-ink); }
.wcm-region { background: var(--wash); border-color: var(--edge); }
.wcm-region .wcm-region-name { color: var(--ink); }
.wcm-region--bac   { --wash: var(--st-rose-wash);  --edge: var(--st-rose-edge);  --ink: var(--st-rose-ink); }
.wcm-region--trung { --wash: var(--st-amber-wash); --edge: var(--st-amber-edge); --ink: var(--st-amber-ink); }
.wcm-region--tay   { --wash: var(--st-mint-wash);  --edge: var(--st-mint-edge);  --ink: var(--st-mint-ink); }
.wcm-region--nam   { --wash: var(--st-sky-wash);   --edge: var(--st-sky-edge);   --ink: var(--st-sky-ink); }
/* Icon cạnh tiêu đề thẻ: xanh da trời thay vì xám. */
#app-shell main :is(h2, h3) > :is(i, svg)[class*="text-"], #app-shell main h2 > :is(i, svg) { color: var(--st-sky); }
#app-shell .wcm-banner h1 > :is(i, svg) { color: var(--st-sky); }
/* Chip vai trò Nhân viên: xanh nhạt thay vì xám. */
.role-badge[data-role="staff"] { background: var(--st-sky-wash); color: var(--st-sky-ink); }

/* Reset chữ cho control: đặt TRONG @layer base. Để ngoài layer nó thắng mọi class cỡ chữ của
   Tailwind v4 (text-xs…, vốn nằm trong @layer utilities) và kéo nút/ô chọn về 16px. */
@layer base { button, input, select { font: inherit; } }

/* ---- Đợt 5 (2026-09-23) ---- */
:root {
  /* Đỏ của chữ "Win" trong logo chuẩn — màu cho nút chính. */
  --st-red: #E81C24;
  --st-red-deep: #C4161D;
  --st-red-soft: #FDECEC;
}

/* Bộ lọc: ô trắng viền xám, icon xám — không tô màu từng ô. */
.wcm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--st-line); }
.wcm-filters--inline { width: auto; flex: 1 1 0; min-width: 0; padding-top: 0; margin-top: 0; border-top: 0; }
.wcm-filters.is-collapsed { display: none; }
.wcm-field { background: var(--st-surface); border: 1px solid var(--st-line-strong); border-radius: 8px; transition: border-color .15s ease; }
.wcm-field:hover { border-color: #BCCBDD; }
.wcm-field:focus-within { border-color: var(--st-sky); box-shadow: 0 0 0 3px var(--st-sky-wash); }
.wcm-field__icon { color: var(--st-faint); display: flex; }
#app-shell .wcm-select, #app-shell .wcm-input { height: 34px; font-size: 13px; font-weight: 500; color: var(--st-ink); outline: none; }
#app-shell .wcm-field .wcm-select { background: transparent; border: 0; box-shadow: none; }
#app-shell .wcm-input, #app-shell .wcm-select--solo { background: var(--st-surface); border: 1px solid var(--st-line-strong); border-radius: 8px; }
#app-shell .wcm-input:focus, #app-shell .wcm-select--solo:focus { border-color: var(--st-sky); box-shadow: 0 0 0 3px var(--st-sky-wash); }
#app-shell .wcm-input::placeholder { color: var(--st-faint); }

/* Nút thu gọn / mở bộ lọc */
.wcm-filter-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--st-line-strong); border-radius: 8px; background: var(--st-surface); color: var(--st-ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .15s ease; }
.wcm-filter-toggle:hover { background: var(--st-tile); color: var(--st-ink); }
.wcm-filter-toggle__chev { transition: transform .2s ease; }
.wcm-filter-toggle[aria-expanded="false"] .wcm-filter-toggle__chev { transform: rotate(-90deg); }
.wcm-filter-toggle__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--st-sky); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }

/* Nút trong dải tiêu đề (Thao tác dữ liệu…): cùng cỡ với nút Bộ lọc */
#app-shell .wcm-banner .wcm-btn { height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--st-ink-2); }

/* Menu thao tác: danh sách gọn, icon xám, mục xoá tách riêng bằng vạch */
.wcm-menu { width: 264px; padding: 4px; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 10px; box-shadow: 0 16px 40px -16px rgba(38, 54, 74, .28), 0 2px 6px rgba(38, 54, 74, .06); }
.wcm-menu__item { white-space: nowrap; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--st-ink); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.wcm-menu__item :is(i, svg) { color: var(--st-faint); flex: none; }
.wcm-menu__item:hover, .wcm-menu__item:focus-visible { background: var(--st-tile); outline: none; }
.wcm-menu__item--danger { color: var(--st-rose-ink); }
.wcm-menu__item--danger :is(i, svg) { color: var(--st-rose-ink); }
.wcm-menu__item--danger:hover, .wcm-menu__item--danger:focus-visible { background: var(--st-rose-wash); }
.wcm-menu__sep { height: 1px; margin: 4px 6px; background: var(--st-line); }

/* Số tiền đầu trang Lợi nhuận Solar: nhãn nhỏ + số vừa phải, canh phải */
.wcm-headline-stat { text-align: right; padding: 2px 0 2px 16px; border-left: 1px solid var(--st-line); }
.wcm-headline-stat__label { margin: 0; font-size: 12px; font-weight: 500; color: var(--st-muted); }
.wcm-headline-stat__value { margin: 2px 0 0; font-size: 18px; font-weight: 600; color: var(--st-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Nút chính: đỏ chữ "Win" */
#app-shell .wcm-btn-primary, .wcm-btn-primary { font-size: 13px; }
body button:is([class~="bg-winred-600"], [class~="bg-emerald-600"], [class~="bg-blue-600"], [class~="bg-amber-500"]) { font-size: 13px; }
body button:is([class~="bg-blue-50"], [class~="bg-emerald-50"], [class~="bg-amber-50"], [class~="bg-rose-50"], [class~="bg-slate-100"]) { font-size: 13px; }
/* Nút "Thêm cửa hàng" luôn ở mép phải dải lọc, kể cả khi bộ lọc thu gọn. */
#app-shell .wcm-banner [data-click="store-add"] { margin-left: auto; }

/* Nhãn 4 miền trên bản đồ: chấm đúng vị trí + thẻ trắng (tên miền, số cửa hàng màu miền). */
.wcm-map-anchor { position: relative; }
.wcm-map-anchor__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.wcm-map-pin { position: absolute; display: flex; flex-direction: column; gap: 2px; min-width: 112px; padding: 8px 12px; background: #fff; border: 1px solid var(--st-line); border-radius: 8px; box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .45); white-space: nowrap; }
.wcm-map-pin__name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--st-ink-2); }
.wcm-map-pin__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wcm-map-pin__count { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Đợt 6 (2026-09-23): rà soát giao diện ---- */
/* Thẻ số tab Solar/Temperature: đúng kiểu thẻ số Tổng quan. Icon trong nhãn theo màu thẻ. */
.wcm-kpi--plain { --wash: var(--st-surface); --edge: var(--st-line); --ink: var(--st-muted); }
.wcm-kpi .wcm-kpi-label :is(i, svg) { color: var(--ink); width: 14px; height: 14px; }
.wcm-kpi [id$="-percent"], .wcm-kpi [id$="-kpi-coverage"] { font-size: 11px; font-weight: 600; box-shadow: none; }
/* Nhãn chữ in hoa bằng CSS: bỏ hết, giữ nguyên chữ gốc. */
#app-shell main .uppercase { text-transform: none; letter-spacing: 0; }
/* Hàng tiêu đề bảng: nền sáng, chữ xám đậm 12px — thay dải đen chữ trắng in hoa. */
#app-shell thead[class~="bg-slate-800"] { background: #F6F8FC; color: var(--st-ink-2); }
#app-shell thead[class~="bg-slate-800"] th { font-size: 12px; font-weight: 600; color: var(--st-ink-2); border-bottom: 1px solid var(--st-line); background: #F6F8FC; }
#app-shell tbody td { border-color: var(--st-line); }
/* Phân trang và các control chữ quá nhỏ */
.table-pager { font-size: 12px; font-weight: 500; background: #F9FAFD; }
.table-pager button { font-size: 12px; font-weight: 500; border-color: var(--st-line-strong); color: var(--st-ink-2); border-radius: 7px; padding: 5px 10px; }
.table-pager button:hover:not(:disabled) { background: var(--st-tile); }
#app-shell main :is(select, input, button):is([class~="text-[9px]"], [class~="text-[10px]"], [class~="text-[11px]"]) { font-size: 12px !important; }
/* Chữ đậm 800 còn sót trong CSS cũ */
.org-chart-count, .import-mode-control, .org-chart-toolbar-title, .status-chip, .project-status { font-weight: 600; }
#leader-analysis-content select, .import-mode-control select, .analysis-mini-card select { font-size: 12px; font-weight: 500; }

/* ---- Đợt 7 (2026-09-23): màu chỉ ở biểu đồ ----
   Người dùng chốt: "tươi sáng" là nói về biểu đồ. Thẻ số, ô miền, nhãn, icon tiêu đề thẻ
   để trắng/xám, không tô nền màu. Chấm màu cạnh tên miền giữ lại vì nó là chú thích màu
   của miền trên biểu đồ và bản đồ. */
.wcm-kpi { background: var(--st-surface); border-color: var(--st-line); }
.wcm-kpi .wcm-kpi-label { color: var(--st-muted); }
.wcm-kpi .wcm-kpi-label :is(i, svg) { color: var(--st-faint); }
.wcm-kpi #kpi-peak-year-sub { color: var(--st-faint); opacity: 1; }
.wcm-kpi-note { font-size: 12px; font-weight: 500; color: var(--st-muted); white-space: nowrap; }
.wcm-region { background: var(--st-surface); border-color: var(--st-line); }
.wcm-region .wcm-region-name { color: var(--st-ink-2); }
#app-shell main :is(h2, h3) > :is(i, svg)[class*="text-"], #app-shell main h2 > :is(i, svg), #app-shell .wcm-banner h1 > :is(i, svg) { color: var(--st-faint); }
.role-badge[data-role="staff"] { background: var(--st-tile); color: var(--st-ink-2); }

/* Lớp "Đang cập nhật số liệu…" (DESIGN_SYSTEM.md §4.10) — cùng thông số app bảo trì:
   nền trang mờ nhẹ phía sau, thẻ trắng nhỏ ở giữa, vòng quay xanh 18px. */
.wcm-loading { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(244, 247, 251, .7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wcm-loading.hidden { display: none !important; }
.wcm-loading__card { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: #FFFFFF; border-radius: 14px; font-size: 13px; font-weight: 600; color: #26364A; }
.wcm-loading__spinner { flex: none; width: 18px; height: 18px; border: 2.5px solid #E7EDF6; border-top-color: #4A84F4; border-radius: 50%; animation: wcm-loading-spin .7s linear infinite; }
@keyframes wcm-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wcm-loading__spinner { animation-duration: 2s; } }
@media print { .wcm-loading { display: none !important; } }