:root{--bg:#f5f7fb;--panel:#fff;--text:#1f2937;--muted:#6b7280;--primary:#0f766e;--primary2:#14b8a6;--danger:#dc2626;--line:#e5e7eb;--yellow:#f59e0b;--blue:#2563eb;--green:#16a34a;--shadow:0 10px 30px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Arial,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}.sidebar{width:285px;background:linear-gradient(180deg,#0f3f3c,#0f766e);color:#fff;padding:22px;position:fixed;height:100vh;overflow:auto}.brand{display:flex;gap:12px;align-items:center;margin-bottom:25px}.brand-logo{width:52px;height:52px;border-radius:16px;background:#fff;color:#0f766e;display:grid;place-items:center;font-weight:800}.brand h1{font-size:18px;margin:0}.brand p{font-size:12px;margin:4px 0 0;color:#ccfbf1}.nav{width:100%;border:0;background:transparent;color:#ecfeff;text-align:left;padding:13px 14px;margin:4px 0;border-radius:12px;cursor:pointer;font-size:15px}.nav:hover,.nav.active{background:rgba(255,255,255,.16)}.main{margin-left:285px;flex:1;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.topbar h2{margin:0;font-size:28px}.topbar p{margin:6px 0 0;color:var(--muted)}.actions,.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{border:0;background:var(--primary);color:#fff;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.btn:hover{background:#115e59}.btn.secondary{background:#e6fffb;color:#0f766e}.btn.secondary:hover{background:#ccfbf1}.btn.danger{background:#fee2e2;color:#b91c1c}.btn.small{padding:7px 9px;border-radius:8px;font-size:12px}.btn.blue{background:var(--blue)}.btn.green{background:var(--green)}.btn.yellow{background:var(--yellow);color:#111827}.file-label input{display:none}.page{display:none}.page.active{display:block}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.kpi{background:var(--panel);border-radius:18px;padding:20px;box-shadow:var(--shadow);border:1px solid var(--line)}.kpi span{display:block;color:var(--muted);font-size:13px}.kpi strong{display:block;font-size:34px;margin-top:8px;color:#0f766e}.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}.card-head h3,.guide h3{margin:0 0 12px}.toolbar{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);margin-bottom:16px}input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:14px;background:#fff}textarea{min-height:90px;resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid #99f6e4;border-color:#14b8a6}.toolbar input{min-width:320px;flex:1}.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:auto}table{width:100%;border-collapse:collapse;min-width:980px}th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:top}th{background:#f0fdfa;color:#115e59;font-weight:800;position:sticky;top:0}tr:hover td{background:#f8fafc}.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#f3f4f6;font-size:12px;font-weight:700}.badge.hot{background:#fee2e2;color:#b91c1c}.badge.good{background:#dcfce7;color:#166534}.badge.wait{background:#fef3c7;color:#92400e}.list .item{padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff}.list .item b{display:block;margin-bottom:4px}.list .item span{color:var(--muted);font-size:13px}.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;padding:20px;z-index:20}.modal.hidden{display:none}.modal-box{background:#fff;width:min(820px,96vw);max-height:92vh;overflow:auto;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0}.modal-head button{border:0;background:#f3f4f6;width:36px;height:36px;border-radius:50%;font-size:22px;cursor:pointer}#modalForm{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-weight:700;font-size:13px;color:#374151}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:8px}.guide p{line-height:1.65;color:#374151}@media(max-width:900px){body{display:block}.sidebar{position:static;width:100%;height:auto}.main{margin-left:0;padding:14px}.topbar{display:block}.actions{margin-top:12px}.kpi-grid,.grid.two{grid-template-columns:1fr}.toolbar input{min-width:100%}#modalForm{grid-template-columns:1fr}}
.mt{margin-top:16px}.hint{color:var(--muted);font-size:13px}.progress{width:120px;height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-bottom:5px}.progress span{display:block;height:100%;background:linear-gradient(90deg,#14b8a6,#0f766e);border-radius:999px}.rank-1{border-color:#f59e0b!important;background:#fffbeb!important}.rank-2{border-color:#94a3b8!important;background:#f8fafc!important}.rank-3{border-color:#d97706!important;background:#fff7ed!important}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}


/* Dashboard trực quan & bảng Top doanh số */
.muted{color:var(--muted);font-size:13px;margin:4px 0 0}.between{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.visual-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin-bottom:16px}.hero-card{background:linear-gradient(135deg,#ffffff 0%,#ecfeff 100%)}.mini-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;background:#ccfbf1;color:#0f766e;font-weight:900;font-size:11px;letter-spacing:.5px}.mini-badge.gold{background:#fef3c7;color:#92400e}.sales-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 18px}.summary-box{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff}.summary-box span{display:block;color:var(--muted);font-size:12px}.summary-box strong{display:block;font-size:22px;margin-top:7px;color:#0f766e}.summary-box.gold strong{color:#b45309}.summary-box.blue strong{color:#2563eb}.bar-chart{display:flex;flex-direction:column;gap:12px}.bar-row{display:grid;grid-template-columns:145px 1fr 110px;gap:10px;align-items:center}.bar-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{height:16px;border-radius:999px;background:#e5e7eb;overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#14b8a6,#0f766e)}.bar-value{text-align:right;font-weight:800;color:#0f766e}.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}.podium.compact{grid-template-columns:1fr;gap:10px}.podium-card{position:relative;border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px;box-shadow:var(--shadow);overflow:hidden}.podium-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:#94a3b8}.podium-card.rank1{min-height:190px;border-color:#f59e0b;background:linear-gradient(180deg,#fffbeb,#fff)}.podium-card.rank1::before{background:linear-gradient(90deg,#f59e0b,#facc15)}.podium-card.rank2{min-height:160px}.podium-card.rank2::before{background:#94a3b8}.podium-card.rank3{min-height:145px}.podium-card.rank3::before{background:#d97706}.rank-medal{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#f3f4f6;margin-bottom:10px}.rank1 .rank-medal{background:#fef3c7}.rank2 .rank-medal{background:#e2e8f0}.rank3 .rank-medal{background:#ffedd5}.podium-card h4{font-size:18px;margin:0 0 4px}.podium-card .team{color:var(--muted);font-size:12px;margin-bottom:12px}.podium-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.podium-stat{background:#f8fafc;border-radius:12px;padding:10px}.podium-stat span{display:block;color:var(--muted);font-size:11px}.podium-stat b{display:block;font-size:14px;margin-top:4px}.leader-mini-list{display:flex;flex-direction:column;gap:10px}.leader-row{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}.leader-row .rank{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f3f4f6;font-weight:900}.leader-row.rank-1 .rank{background:#fef3c7;color:#92400e}.leader-row.rank-2 .rank{background:#e2e8f0;color:#334155}.leader-row.rank-3 .rank{background:#ffedd5;color:#9a3412}.leader-name b{display:block}.leader-name span{font-size:12px;color:var(--muted)}.leader-money{text-align:right;font-weight:900;color:#0f766e}.kpi-progress-list{display:flex;flex-direction:column;gap:12px}.kpi-person{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px}.kpi-line{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.kpi-line b{font-size:14px}.kpi-line span{font-weight:900;color:#0f766e}.progress.wide{width:100%;height:13px}.progress.over span{background:linear-gradient(90deg,#f59e0b,#facc15)}.progress.low span{background:linear-gradient(90deg,#ef4444,#f97316)}.leader-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.leader-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px}.leader-card span{display:block;color:var(--muted);font-size:12px}.leader-card strong{display:block;margin-top:6px;font-size:24px;color:#0f766e}.leader-card.gold strong{color:#b45309}.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#14b8a6,#0f766e);color:#fff;display:grid;place-items:center;font-weight:900}.rank-cell{display:flex;align-items:center;gap:10px}.rank-cell .medal{font-size:22px}.table-wrap.mt{margin-top:16px}@media(max-width:1100px){.visual-grid,.leader-summary{grid-template-columns:1fr}.podium{grid-template-columns:1fr}.sales-summary{grid-template-columns:1fr}.bar-row{grid-template-columns:1fr}.bar-value{text-align:left}}

/* Kho tài liệu: upload ảnh, bài đăng dự án, chia sẻ linh động */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.post-card{display:grid;grid-template-columns:190px 1fr;gap:14px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.06)}.post-image{height:100%;min-height:190px;background:#f1f5f9;display:grid;place-items:center;overflow:hidden}.post-image img{width:100%;height:100%;object-fit:cover}.no-image{color:#64748b;font-weight:800}.post-body{padding:14px}.post-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;margin-bottom:8px}.post-card h4{margin:0 0 8px;font-size:17px}.post-card p{margin:0;color:#374151;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}.post-tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.post-tags em{font-style:normal;background:#ecfeff;color:#0f766e;border:1px solid #ccfbf1;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800}.post-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.post-list.compact{display:flex;flex-direction:column;gap:10px}.post-mini{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}.mini-thumb{width:48px;height:48px;border-radius:12px;background:#f1f5f9;display:grid;place-items:center;overflow:hidden}.mini-thumb img{width:100%;height:100%;object-fit:cover}.post-mini b{display:block}.post-mini span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.image-uploader{border:1px dashed #99f6e4;background:#f0fdfa;border-radius:14px;padding:14px}.image-uploader input[type=file]{width:100%;background:#fff;margin-bottom:10px}.upload-preview{min-height:150px;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}.upload-preview img{max-width:100%;max-height:260px;object-fit:contain}.image-uploader small{display:block;color:var(--muted);margin-top:8px;line-height:1.45}td small{color:var(--muted)}@media(max-width:1100px){.post-grid{grid-template-columns:1fr}.post-card{grid-template-columns:1fr}.post-image{min-height:220px}}

/* AI tạo mẫu tin nhắn */
.ai-message-card{margin-bottom:16px;background:linear-gradient(135deg,#fff,#f0fdfa)}
.ai-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}.ai-form-grid .field{display:flex;flex-direction:column;gap:6px}.ai-form-grid .field.full{grid-column:1/-1}.ai-output{min-height:180px;white-space:pre-line;background:#fffdf7;border-color:#fcd34d}.ai-suggestions{min-height:120px;white-space:pre-line;background:#f8fafc;border-color:#cbd5e1;color:#334155}.ai-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.btn.green{background:#16a34a}.btn.green:hover{background:#15803d}@media(max-width:1000px){.ai-form-grid{grid-template-columns:1fr}}

.ai-api-field input{font-size:14px}
.hint.warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:10px 12px}
#aiGenerateBtn:disabled{opacity:.65;cursor:wait}

/* Public share password + sale permission mode */
.login-overlay{
  position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(8,22,48,.96), rgba(15,82,110,.92)); padding:24px;
}
.auth-locked .login-overlay{display:flex;}
.auth-locked .sidebar,.auth-locked .main,.auth-locked .modal{filter:blur(2px); pointer-events:none; user-select:none;}
.login-card{width:min(440px,100%); background:#fff; border-radius:22px; padding:30px; box-shadow:0 24px 80px rgba(0,0,0,.28); text-align:center;}
.login-logo{width:72px;height:72px;border-radius:22px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;background:linear-gradient(135deg,#0d9488,#0f172a);font-size:22px;}
.login-card h2{margin:0 0 8px;font-size:26px;color:#0f172a;}
.login-card p{margin:0 0 18px;color:#64748b;line-height:1.55;}
.login-card input{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:14px;padding:14px 16px;font-size:16px;margin-bottom:12px;outline:none;}
.login-card input:focus{border-color:#0d9488;box-shadow:0 0 0 4px rgba(13,148,136,.12);}
.login-btn{width:100%;justify-content:center;padding:13px 16px;font-size:16px;}
.login-error{min-height:22px;margin-top:10px;color:#dc2626;font-weight:700;}
.login-note{margin-top:12px;color:#64748b;font-size:13px;line-height:1.45;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;}
.auth-badge{display:inline-flex;align-items:center;border-radius:999px;padding:8px 12px;background:#ecfeff;color:#0f766e;font-weight:800;border:1px solid #99f6e4;font-size:13px;}
.sale-view .admin-only{display:none!important;}
.sale-view table td:last-child .muted{font-size:12px;color:#94a3b8;}

.admin-view .sale-only{display:none!important;}
.sale-view .admin-only{display:none!important;}


/* FIX giao diện đăng nhập & hiển thị CRM */
html, body { width:100%; min-height:100%; }
body.auth-locked { overflow:hidden; }
body.auth-locked .login-overlay { display:flex !important; opacity:1 !important; visibility:visible !important; }
body:not(.auth-locked) .login-overlay { display:none !important; }
body.auth-locked .sidebar, body.auth-locked .main { visibility:hidden; pointer-events:none; }
body:not(.auth-locked) .sidebar, body:not(.auth-locked) .main { visibility:visible; }
.login-overlay { backdrop-filter: blur(4px); }
.login-card { position:relative; z-index:10000; }
.login-status-line { background:#ecfeff; color:#0f766e; border:1px solid #99f6e4; padding:9px 12px; border-radius:12px; font-size:13px; font-weight:800; margin:0 0 14px; }
.login-card input { display:block; }
.login-error:empty { display:none; }
.login-error:not(:empty) { display:block; background:#fef2f2; border:1px solid #fecaca; border-radius:12px; padding:10px 12px; }
.auth-badge { white-space:nowrap; }
@media(max-width:900px){
  .login-overlay { align-items:flex-start; overflow:auto; }
  .login-card { margin-top:28px; padding:22px; }
  .topbar .actions { width:100%; }
  .auth-badge { width:100%; justify-content:center; }
  .sidebar { border-radius:0 0 18px 18px; }
  .nav { font-size:14px; padding:11px 12px; }
}


.login-card{max-height:92vh;overflow:auto;}
@media(max-width:520px){.login-card{padding:18px}.login-card h2{font-size:22px}}

/* Phân quyền tài khoản sale */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;min-width:520px}
.perm-check{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:13px;line-height:1.35}
.perm-check input{width:16px;height:16px;accent-color:#2563eb;flex:0 0 auto}
.sale-view .admin-only{display:none!important}
.auth-badge{white-space:nowrap}
@media(max-width:900px){.perm-grid{min-width:0;grid-template-columns:1fr}.perm-check{font-size:12px}}


/* Bulk khách hàng + thông báo sale */
.customer-filterbar select{min-width:170px}.bulk-toolbar{background:#fff7ed;border-color:#fed7aa}.bulk-toolbar .check-label{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#7c2d12}.customer-check{width:18px;height:18px}.mini-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:#ecfeff;color:#0f766e;font-weight:800;font-size:12px;border:1px solid #99f6e4}.notify-wrap{position:relative}.notify-btn{position:relative}.notify-count{min-width:20px;height:20px;border-radius:999px;background:#ef4444;color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}.notify-panel{position:absolute;right:0;top:48px;width:min(390px,92vw);max-height:480px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(15,23,42,.22);z-index:35;padding:10px}.notify-panel.hidden{display:none}.notify-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 10px;border-bottom:1px solid var(--line)}.notify-item{padding:12px;border-bottom:1px solid #f1f5f9}.notify-item:last-child{border-bottom:0}.notify-item.unread{background:#f0fdfa;border-radius:12px}.notify-item b{display:block;color:#0f766e;margin-bottom:4px}.notify-item span{display:block;color:#334155;font-size:13px;line-height:1.45}.notify-item small{display:block;color:#64748b;margin-top:6px}.notify-empty{padding:16px;color:#64748b;text-align:center}.sale-view .bulk-toolbar{display:none!important}@media(max-width:900px){.notify-panel{left:auto;right:0}.customer-filterbar select{min-width:100%;width:100%}.bulk-toolbar select{width:100%}}

.sync-status{margin:0 0 14px;padding:12px 14px;border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a;border-radius:14px;font-weight:700;line-height:1.45;}

/* Phân quyền cấp quản lý: ẩn chức năng admin tổng, chỉ mở các trang báo cáo nhánh được phép */
.manager-view .admin-only{display:none!important;}
.manager-view .admin-only.manager-access{display:block!important;}
.manager-view .bulk-toolbar.admin-only{display:none!important;}
.manager-view [data-permission="importExportJson"],
.manager-view [data-permission="resetData"],
.manager-view [data-permission="saveAISettings"]{display:none!important;}

/* Fix phân quyền quản lý/chi nhánh */
.manager-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;margin-top:12px}
.manager-tool-grid .action-field{justify-content:end}
.manager-scope-wrap table{min-width:780px}
.branch-pill{display:inline-flex;align-items:center;gap:6px;background:#ecfeff;color:#0f766e;border:1px solid #99f6e4;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800;margin:2px}
.role-admin{background:#fef3c7!important;color:#92400e!important}.role-manager{background:#dbeafe!important;color:#1d4ed8!important}.role-sale{background:#dcfce7!important;color:#166534!important}
@media(max-width:1000px){.manager-tool-grid{grid-template-columns:1fr}}

/* Manager branch permission panel */
.manager-scope-box{margin-top:14px;padding:14px;border:1px solid rgba(15,23,42,.10);border-radius:16px;background:#fff}
.manager-scope-box h4{margin:0 0 8px;font-size:15px;color:#0f172a}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:8px}
.staff-check-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.staff-line span{display:flex;flex-direction:column;gap:2px}.staff-line small{color:#64748b;font-weight:400}.branch-pill.light{background:#eef6ff;color:#0369a1;border-color:#bae6fd}

/* Staff manager-scope form helper */
.staff-role-help .hint-box{
  background:#f7fbff;
  border:1px solid #dbeafe;
  border-radius:12px;
  padding:10px 12px;
  color:#234;
  line-height:1.5;
}
#modalForm select:required{
  border-color:#2563eb;
  background:#fff;
}

/* Quick staff role/manager assignment panel */
#staffRoleManagerPanel{margin-bottom:16px;background:linear-gradient(135deg,#fff,#f8fbff)}
#quickStaffRoleHelp.hint-box{background:#f0f9ff;border:1px solid #bae6fd;border-radius:14px;padding:12px;color:#0f172a;line-height:1.55}
#quickDirectManager:required,#quickBranchSelect:required{border-color:#2563eb;background:#fff}


/* =========================================================
   RESPONSIVE + GOOGLE FONT FIX 2026-06-10
   Chỉ bổ sung giao diện, không thay đổi app.js/chức năng gốc.
   ========================================================= */
:root{
  --font-google:"Roboto", Arial, "Helvetica Neue", sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
html{
  width:100%;
  min-height:100%;
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body,
button,
input,
select,
textarea,
table{
  font-family:var(--font-google)!important;
}
body{
  overflow-x:hidden;
}
img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}
button,
.btn,
.nav,
.file-label{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
input,
select,
textarea{
  max-width:100%;
  min-width:0;
}
textarea{
  line-height:1.5;
}
.sidebar{
  scrollbar-width:thin;
}
.main{
  min-width:0;
}
.card,
.kpi,
.toolbar,
.table-wrap,
.modal-box,
.login-card{
  max-width:100%;
}
.table-wrap{
  width:100%;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
table{
  white-space:normal;
}
th,
td{
  line-height:1.45;
}
.actions .btn,
.actions .file-label,
.toolbar .btn,
.toolbar .file-label{
  white-space:nowrap;
}
.notify-panel{
  max-width:calc(100vw - 24px);
}

@media (min-width:901px) and (max-width:1280px){
  .sidebar{
    width:250px;
    padding:18px 14px;
  }
  .main{
    margin-left:250px;
    padding:20px;
  }
  .brand h1{
    font-size:17px;
  }
  .brand p{
    font-size:11px;
  }
  .nav{
    padding:11px 12px;
    font-size:14px;
  }
  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .topbar .actions{
    width:100%;
  }
  .toolbar input{
    min-width:240px;
  }
  .visual-grid{
    grid-template-columns:1fr;
  }
  .leader-summary{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:900px){
  body{
    display:block!important;
    min-height:100dvh;
  }
  body.auth-locked{
    min-height:100dvh;
  }
  .sidebar{
    position:sticky!important;
    top:0;
    z-index:40;
    width:100%!important;
    height:auto!important;
    max-height:none;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:0 0 18px 18px;
    box-shadow:0 10px 24px rgba(15,23,42,.18);
  }
  .brand{
    flex:0 0 auto;
    min-width:220px;
    margin:0 8px 0 0;
  }
  .brand-logo{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:14px;
  }
  .brand h1{
    font-size:15px;
    line-height:1.25;
  }
  .brand p{
    display:none;
  }
  .nav{
    flex:0 0 auto;
    width:auto!important;
    min-width:max-content;
    margin:0!important;
    padding:10px 12px!important;
    font-size:14px!important;
    border-radius:999px;
  }
  .main{
    width:100%;
    margin-left:0!important;
    padding:16px!important;
  }
  .topbar{
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-bottom:16px;
  }
  .topbar h2{
    font-size:24px;
    line-height:1.25;
  }
  .topbar p{
    font-size:13px;
    line-height:1.45;
  }
  .topbar .actions,
  .actions,
  .toolbar{
    width:100%;
    align-items:stretch;
  }
  .actions .btn,
  .actions .file-label{
    justify-content:center;
  }
  .toolbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:12px;
  }
  .toolbar input,
  .toolbar select,
  .toolbar .btn,
  .toolbar .file-label,
  .bulk-toolbar .check-label{
    width:100%!important;
    min-width:0!important;
  }
  .toolbar .btn,
  .toolbar .file-label{
    justify-content:center;
  }
  .kpi-grid,
  .grid.two,
  .visual-grid,
  .sales-summary,
  .leader-summary,
  .podium,
  .post-grid,
  .ai-form-grid,
  .manager-tool-grid{
    grid-template-columns:1fr!important;
  }
  .kpi{
    padding:16px;
  }
  .kpi strong{
    font-size:28px;
  }
  .card{
    padding:16px;
    border-radius:16px;
  }
  .between{
    flex-direction:column;
    align-items:flex-start;
  }
  .bar-row,
  .leader-row,
  .post-mini{
    grid-template-columns:1fr!important;
  }
  .bar-value,
  .leader-money{
    text-align:left;
  }
  .table-wrap{
    border-radius:14px;
  }
  table{
    min-width:760px;
  }
  th,
  td{
    padding:10px 12px;
    font-size:13px;
  }
  .modal{
    align-items:flex-start;
    place-items:start center;
    padding:12px;
    overflow:auto;
  }
  .modal-box{
    width:100%;
    max-height:calc(100dvh - 24px);
    border-radius:18px;
  }
  .modal-head{
    padding:14px 16px;
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
  }
  #modalForm{
    grid-template-columns:1fr!important;
    padding:16px;
  }
  .form-actions{
    justify-content:stretch;
    flex-wrap:wrap;
  }
  .form-actions .btn{
    flex:1 1 160px;
    justify-content:center;
  }
  .notify-wrap{
    width:100%;
  }
  .notify-btn{
    width:100%;
    justify-content:center;
  }
  .notify-panel{
    position:fixed;
    left:12px!important;
    right:12px!important;
    top:calc(72px + var(--safe-top));
    width:auto!important;
    max-height:calc(100dvh - 100px);
  }
  .auth-badge{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:640px){
  .main{
    padding:12px!important;
  }
  .sidebar{
    padding:9px 10px;
  }
  .brand{
    min-width:170px;
  }
  .brand-logo{
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .brand h1{
    font-size:13px;
  }
  .nav{
    padding:9px 11px!important;
    font-size:13px!important;
  }
  .topbar h2{
    font-size:22px;
  }
  .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }
  .actions .btn,
  .actions .file-label,
  .actions .auth-badge{
    width:100%;
    min-height:42px;
    justify-content:center;
  }
  .toolbar,
  .bulk-toolbar,
  .customer-filterbar{
    grid-template-columns:1fr!important;
  }
  input,
  select,
  textarea{
    width:100%;
    font-size:16px!important;
  }
  .btn{
    min-height:42px;
    justify-content:center;
  }
  .card,
  .toolbar,
  .kpi,
  .table-wrap{
    border-radius:14px;
  }
  .card{
    padding:14px;
  }
  .kpi-grid{
    gap:12px;
  }
  .kpi strong{
    font-size:26px;
  }
  .summary-box strong,
  .leader-card strong{
    font-size:21px;
  }
  .post-card{
    grid-template-columns:1fr!important;
  }
  .post-image{
    min-height:170px!important;
  }
  table{
    min-width:680px;
  }
  th,
  td{
    font-size:12.5px;
    padding:9px 10px;
  }
  .login-overlay{
    padding:12px!important;
    align-items:flex-start!important;
  }
  .login-card{
    width:100%;
    margin-top:18px!important;
    padding:18px!important;
    border-radius:18px;
  }
  .login-logo{
    width:58px;
    height:58px;
    border-radius:18px;
  }
  .login-card h2{
    font-size:22px!important;
  }
  .login-card p{
    font-size:14px;
  }
  .modal{
    padding:8px;
  }
  .modal-box{
    border-radius:16px;
    max-height:calc(100dvh - 16px);
  }
  .modal-head h3{
    font-size:17px;
  }
  .form-actions .btn{
    flex:1 1 100%;
  }
}

@media (max-width:420px){
  .main{
    padding:10px!important;
  }
  .brand{
    min-width:150px;
  }
  .brand h1{
    font-size:12.5px;
  }
  .nav{
    font-size:12.5px!important;
    padding:8px 10px!important;
  }
  .topbar h2{
    font-size:20px;
  }
  .card,
  .toolbar,
  .kpi{
    padding:12px;
  }
  table{
    min-width:620px;
  }
}

@media (hover:none) and (pointer:coarse){
  .btn,
  .nav,
  input,
  select,
  textarea{
    min-height:42px;
  }
}

/* =========================================================
   FIX BẢNG KPI + FORM MODAL VỪA KHUNG 2026-06-10
   Chỉ bổ sung CSS, giữ nguyên HTML/app.js/chức năng gốc.
   ========================================================= */
#kpi .table-wrap{
  width:100%;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}
#kpiTable{
  font-family:var(--font-google)!important;
  min-width:1180px!important;
  table-layout:auto;
}
#kpiTable th,
#kpiTable td{
  font-family:var(--font-google)!important;
  font-size:13px!important;
  line-height:1.35!important;
  padding:10px 10px!important;
  vertical-align:middle!important;
}
#kpiTable th{
  white-space:nowrap!important;
  font-weight:800!important;
}
#kpiTable td{
  overflow-wrap:anywhere;
  word-break:normal;
}
#kpiTable th:nth-child(1),
#kpiTable td:nth-child(1),
#kpiTable th:nth-child(2),
#kpiTable td:nth-child(2),
#kpiTable th:nth-child(3),
#kpiTable td:nth-child(3),
#kpiTable th:nth-child(6),
#kpiTable td:nth-child(6),
#kpiTable th:nth-child(7),
#kpiTable td:nth-child(7),
#kpiTable th:nth-child(8),
#kpiTable td:nth-child(8),
#kpiTable th:nth-child(9),
#kpiTable td:nth-child(9),
#kpiTable th:nth-child(10),
#kpiTable td:nth-child(10),
#kpiTable th:nth-child(11),
#kpiTable td:nth-child(11),
#kpiTable th:nth-child(12),
#kpiTable td:nth-child(12),
#kpiTable th:nth-child(13),
#kpiTable td:nth-child(13),
#kpiTable th:nth-child(15),
#kpiTable td:nth-child(15){
  white-space:nowrap!important;
}
#kpiTable td:nth-child(14){
  min-width:150px;
  max-width:240px;
}
#kpiTable .progress{
  width:96px!important;
  max-width:100%;
}

/* Fix input/select trong form modal không bị tràn, chữ và ô nhập vừa khung như các bảng/form khác */
#modalForm,
#modalForm .field{
  min-width:0!important;
}
#modalForm input,
#modalForm select,
#modalForm textarea{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  font-family:var(--font-google)!important;
}
#modalForm select{
  text-overflow:ellipsis;
}
#modalForm .field label{
  line-height:1.35;
}

@media (min-width:901px) and (max-width:1280px){
  #kpiTable{
    min-width:1120px!important;
  }
  #kpiTable th,
  #kpiTable td{
    font-size:12.5px!important;
    padding:9px 9px!important;
  }
}
@media (max-width:900px){
  #kpiTable{
    min-width:1040px!important;
  }
  #kpiTable th,
  #kpiTable td{
    font-size:12px!important;
    padding:8px 8px!important;
  }
}
@media (max-width:640px){
  #kpiTable{
    min-width:980px!important;
  }
}

/* =========================================================
   EXCEL KHÁCH HÀNG IMPORT/EXPORT FIX 2026-06-10
   ========================================================= */
.customer-excel-btn{white-space:nowrap}
.excel-hint{
  margin:-8px 0 14px;
  padding:10px 14px;
  border:1px solid #bfdbfe;
  border-radius:14px;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:13px;
  line-height:1.5;
}
.customer-filterbar .file-label input{display:none!important}
@media(max-width:900px){
  .customer-excel-btn{width:100%;justify-content:center}
  .excel-hint{margin-top:0;font-size:12px}
}

/* =========================================================
   NÚT GỌI/ZALO KHÁCH HÀNG + CÔNG CỤ TÍNH LÃI VAY 2026-06-12
   ========================================================= */
.customer-quick-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.customer-quick-actions .btn.small{font-size:12px;padding:7px 9px;line-height:1.1}
.customer-call-btn{background:#16a34a!important;color:#fff!important}
.customer-zalo-btn{background:#2563eb!important;color:#fff!important}

.loan-tool{display:grid;grid-template-columns:minmax(320px,0.95fr) minmax(360px,1.05fr);gap:18px;align-items:start}
.loan-form-card,.loan-result-card{overflow:hidden}
.loan-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.loan-form-grid.two-cols{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.loan-form-grid input,.loan-form-grid select{width:100%;font-weight:700;font-size:15px}
.loan-switch-box{border:1px solid #e5e7eb;background:#f8fafc;border-radius:16px;padding:14px;margin-top:14px}
.loan-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.loan-switch-row span{display:flex;flex-direction:column;gap:4px;color:#334155}
.loan-switch-row b{font-size:16px;color:#111827}
.loan-switch-row small{font-size:13px;color:#64748b;line-height:1.35}
.loan-switch-row input[type="checkbox"]{width:46px;height:25px;accent-color:#2563eb;flex:0 0 auto}
.loan-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.loan-primary,.loan-detail-btn{background:#ef1428!important;color:#fff!important;justify-content:center}
.loan-detail-btn{width:100%;border-radius:6px;padding:14px 16px;font-size:15px;margin:10px 0 16px}
.loan-result-card{padding:0;background:#fff}
.loan-result-title,.loan-info-title{background:#e5e7eb;color:#4b5563;padding:16px 20px;font-size:18px;font-weight:500}
.loan-info-title{margin-top:4px}
.loan-summary-rows{background:#fff}
.loan-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid #eef2f7;color:#4b5563;font-size:16px}
.loan-row span{font-weight:600;line-height:1.4}
.loan-row b{font-size:18px;color:#111827;text-align:right;white-space:nowrap}
.loan-row.strong span,.loan-row.strong b{font-weight:900}
.loan-detail-wrap{margin:0 14px 16px;border-radius:12px;box-shadow:none;max-height:520px;overflow:auto}
.loan-detail-wrap.hidden{display:none!important}
#loanDetailTable{min-width:980px}
#loanDetailTable th{background:#ef1428;color:#fff;position:sticky;top:0;z-index:1}
#loanDetailTable td,#loanDetailTable th{font-size:12px;padding:9px 10px;white-space:nowrap}
.loan-pdf-report{width:794px;background:#fff;color:#111827;font-family:Roboto,Arial,sans-serif;padding:24px;line-height:1.35}
.loan-pdf-report h1{margin:0 0 8px;color:#ef1428;font-size:24px;font-weight:900;letter-spacing:.2px}
.loan-pdf-report h2{font-size:16px;margin:18px 0 8px;background:#eef2f7;color:#334155;padding:8px 10px;border-radius:6px}
.loan-pdf-report .pdf-muted,.loan-pdf-report .pdf-note{font-size:12px;color:#475569;line-height:1.45}
.loan-pdf-report table{width:100%;border-collapse:collapse;min-width:0!important;margin-bottom:10px}
.loan-pdf-report th,.loan-pdf-report td{border:1px solid #e5e7eb;padding:6px 7px;font-size:10px;text-align:left;vertical-align:top}
.loan-pdf-report th{background:#ef1428!important;color:#fff!important;font-weight:900}
.loan-pdf-report .detail th,.loan-pdf-report .detail td{font-size:8.5px;padding:4px 5px}

@media(max-width:1100px){
  .loan-tool{grid-template-columns:1fr}
}
@media(max-width:760px){
  .loan-form-grid,.loan-form-grid.two-cols{grid-template-columns:1fr}
  .loan-row{grid-template-columns:1fr;gap:4px;padding:14px 16px;font-size:15px}
  .loan-row b{text-align:left;font-size:18px}
  .loan-result-title,.loan-info-title{padding:14px 16px;font-size:17px}
  .loan-actions .btn{width:100%;justify-content:center}
  .loan-switch-row{align-items:flex-start}
  .loan-detail-btn{font-size:13px;white-space:normal}
}

/* FIX ZALO KHÁCH HÀNG + PDF LÃI VAY 2026-06-12 */
.customer-quick-actions{display:flex!important;gap:6px!important;flex-wrap:wrap!important;align-items:center!important}
.customer-quick-actions .btn{min-height:30px!important;line-height:1.2!important;white-space:nowrap!important}
.loan-pdf-render-host{font-family:Roboto,Arial,sans-serif!important}
.loan-pdf-report,.loan-pdf-report *{box-sizing:border-box!important}
.loan-pdf-report .pdf-page-break{page-break-before:always!important;break-before:page!important}
.loan-pdf-report tr{page-break-inside:avoid!important;break-inside:avoid!important}
.loan-pdf-report .pdf-section{page-break-inside:auto!important;break-inside:auto!important}
@media print{.loan-pdf-report .pdf-page-break{page-break-before:always!important}}

/* =========================================================
   DASHBOARD DỰ ÁN + KPI + AVATAR NHÂN VIÊN TOP DOANH SỐ 2026-06-12
   Giữ nguyên chức năng gốc, chỉ bổ sung giao diện responsive.
   ========================================================= */
.dashboard-project-overview,
.dashboard-staff-overview{margin-bottom:16px!important}
.dashboard-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
.project-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0 0 16px}
.project-card-grid.compact{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:12px;margin-bottom:0}
.project-info-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:16px;box-shadow:0 8px 22px rgba(15,23,42,.07);min-width:0;display:flex;flex-direction:column;gap:12px}
.project-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.project-card-top h4{margin:0;color:#0f172a;font-size:17px;line-height:1.25;word-break:break-word}
.project-card-top p{margin:4px 0 0;color:#64748b;font-size:13px;line-height:1.35}
.project-card-meta{display:grid;grid-template-columns:1fr;gap:8px}
.project-card-meta span{display:block;background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:9px 10px;color:#334155;font-size:13px;line-height:1.35;min-width:0;word-break:break-word}
.project-card-meta b{display:block;color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.35px;margin-bottom:3px}
.project-card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.project-card-stats div{background:#ecfeff;border:1px solid #ccfbf1;border-radius:12px;padding:10px;min-width:0}
.project-card-stats span{display:block;color:#0f766e;font-size:11px;font-weight:800;line-height:1.2}
.project-card-stats b{display:block;color:#0f172a;font-size:16px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-policy{margin:0;color:#475569;font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:54px}
.project-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.project-card-actions a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 10px;background:#e6fffb;color:#0f766e;font-size:12px;font-weight:900;text-decoration:none;border:1px solid #99f6e4}
.project-card-actions a:hover{background:#ccfbf1}
.empty-card{grid-column:1/-1;border:1px dashed #cbd5e1;border-radius:16px;background:#f8fafc;color:#64748b;padding:18px;text-align:center;font-weight:700}

.staff-avatar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:10px}
.staff-avatar-card{position:relative;display:flex;align-items:center;gap:10px;min-width:0;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:10px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
.staff-avatar-card.compact{padding:9px;border-radius:15px}
.staff-avatar-card.top-rank{border-color:#f59e0b;background:linear-gradient(180deg,#fffbeb,#fff)}
.staff-avatar-card.top-1{box-shadow:0 8px 24px rgba(245,158,11,.22)}
.staff-avatar-card.top-2{border-color:#94a3b8;background:linear-gradient(180deg,#f8fafc,#fff)}
.staff-avatar-card.top-3{border-color:#d97706;background:linear-gradient(180deg,#fff7ed,#fff)}
.staff-avatar-circle{position:relative;width:54px;height:54px;flex:0 0 54px;border-radius:50%;background:linear-gradient(135deg,#14b8a6,#0f766e);color:#fff;display:grid;place-items:center;font-weight:900;font-size:16px;overflow:visible;border:3px solid #fff;box-shadow:0 4px 14px rgba(15,118,110,.25)}
.staff-avatar-circle img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.staff-avatar-circle span{line-height:1}
.avatar-top-badge{position:absolute;right:-8px;bottom:-6px;border-radius:999px;background:#f59e0b;color:#fff;border:2px solid #fff;padding:2px 6px;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.2px;white-space:nowrap;box-shadow:0 3px 8px rgba(180,83,9,.25)}
.staff-avatar-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.staff-avatar-info b{font-size:13px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.staff-avatar-info span{font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.staff-avatar-info small{font-size:11px;color:#0f766e;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#staffTable .staff-avatar-card{box-shadow:none;border:0;background:transparent;padding:0;min-width:170px}
#staffTable .staff-avatar-circle{width:46px;height:46px;flex-basis:46px;font-size:14px}
#staffTable .staff-avatar-info small{color:#64748b}

.kpi-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:16px 0}
.kpi-info-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:16px;box-shadow:0 8px 22px rgba(15,23,42,.07);display:flex;flex-direction:column;gap:11px;min-width:0}
.kpi-info-card.over{border-color:#f59e0b;background:linear-gradient(180deg,#fffbeb,#fff)}
.kpi-info-card.low{border-color:#fed7aa;background:linear-gradient(180deg,#fff7ed,#fff)}
.kpi-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kpi-card-head .staff-avatar-card{box-shadow:none;border:0;background:transparent;padding:0;flex:1;min-width:0}
.kpi-card-head .staff-avatar-circle{width:48px;height:48px;flex-basis:48px}
.kpi-card-period{font-size:13px;color:#64748b;font-weight:700;line-height:1.35}
.kpi-card-money{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;padding:11px 12px}
.kpi-card-money span{color:#64748b;font-size:12px;font-weight:800}
.kpi-card-money b{color:#0f766e;font-size:16px;text-align:right;line-height:1.25}
.kpi-card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi-card-stats div{background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:9px 10px;min-width:0}
.kpi-card-stats span{display:block;color:#64748b;font-size:11px;font-weight:800}
.kpi-card-stats b{display:block;color:#111827;font-size:15px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-card-note{margin:0;color:#475569;font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#projectCards.project-page-grid{margin-bottom:16px}
#projectsTable,#kpiTable,#staffTable{font-family:var(--font-google)!important}

@media(min-width:1281px){
  .staff-avatar-grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
  .project-card-grid{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
  .kpi-card-grid{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
}
@media(min-width:701px) and (max-width:1100px){
  .project-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .staff-avatar-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
  .project-card-stats,.kpi-card-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .dashboard-project-overview,.dashboard-staff-overview{margin-top:12px!important}
  .project-card-grid,.project-card-grid.compact,.kpi-card-grid{grid-template-columns:1fr!important;gap:12px}
  .project-info-card,.kpi-info-card{border-radius:16px;padding:14px}
  .project-card-top{flex-direction:column;align-items:flex-start}
  .project-card-stats,.kpi-card-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .project-card-stats div,.kpi-card-stats div{padding:8px}
  .project-card-stats b,.kpi-card-stats b{font-size:13px}
  .project-policy{min-height:auto;-webkit-line-clamp:4}
  .staff-avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .staff-avatar-card{flex-direction:column;text-align:center;align-items:center;padding:10px 7px}
  .staff-avatar-circle{width:50px;height:50px;flex-basis:50px}
  .staff-avatar-info b,.staff-avatar-info span,.staff-avatar-info small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .kpi-card-head{flex-direction:column;align-items:stretch}
  .kpi-card-head .staff-avatar-card{flex-direction:row;text-align:left;align-items:center}
  .kpi-card-money{flex-direction:column;align-items:flex-start}
  .kpi-card-money b{text-align:left}
}
@media(max-width:420px){
  .staff-avatar-grid{grid-template-columns:1fr 1fr}
  .project-card-stats,.kpi-card-stats{grid-template-columns:1fr}
  .project-card-actions a{width:100%}
  .staff-avatar-card{border-radius:14px}
  #staffTable .staff-avatar-card{min-width:140px;flex-direction:row;text-align:left}
}

/* =========================================================
   NÂNG CẤP GIAO DIỆN DỰ ÁN / KPI / TOP DOANH SỐ 2026-06-12
   Theo mẫu dashboard gọn gàng: card rõ ràng, avatar tròn trong mục Top doanh số.
   ========================================================= */
.dashboard-kpi-grid{gap:14px!important;margin-bottom:18px!important}
.dashboard-kpi-grid .kpi{position:relative!important;display:flex!important;align-items:center!important;gap:14px!important;min-height:92px!important;padding:18px!important;border:1px solid #eef2f7!important;border-radius:22px!important;background:#fff!important;box-shadow:0 10px 26px rgba(15,23,42,.07)!important;overflow:hidden!important}
.dashboard-kpi-grid .kpi:before{content:"";width:50px;height:50px;flex:0 0 50px;border-radius:18px;background:linear-gradient(135deg,#ecfeff,#ccfbf1);box-shadow:inset 0 0 0 1px rgba(20,184,166,.16)}
.dashboard-kpi-grid .kpi:nth-child(2):before{background:linear-gradient(135deg,#fff7ed,#fed7aa)}
.dashboard-kpi-grid .kpi:nth-child(3):before{background:linear-gradient(135deg,#eff6ff,#bfdbfe)}
.dashboard-kpi-grid .kpi:nth-child(4):before{background:linear-gradient(135deg,#f5f3ff,#ddd6fe)}
.dashboard-kpi-grid .kpi:nth-child(5):before{background:linear-gradient(135deg,#fef2f2,#fecaca)}
.dashboard-kpi-grid .kpi:nth-child(6):before{background:linear-gradient(135deg,#f0fdf4,#bbf7d0)}
.dashboard-kpi-grid .kpi span{display:block!important;color:#64748b!important;font-size:13px!important;font-weight:800!important;line-height:1.25!important;margin:0!important}
.dashboard-kpi-grid .kpi strong{display:block!important;color:#0f172a!important;font-size:25px!important;font-weight:900!important;line-height:1.12!important;margin-top:5px!important;word-break:break-word!important}

.dashboard-project-overview,.dashboard-staff-overview,.top-sales-board-card,.top-sales-avatar-section{border-radius:24px!important;border:1px solid #e5e7eb!important;box-shadow:0 12px 30px rgba(15,23,42,.07)!important;background:#fff!important}
.card-head.between{align-items:center!important}
.card-head h3{line-height:1.25!important}
.card-head .muted{max-width:760px!important}

.project-card-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))!important;gap:14px!important}
.project-card-grid.compact{grid-template-columns:repeat(auto-fit,minmax(245px,1fr))!important}
.project-info-card{position:relative!important;border-radius:20px!important;border:1px solid #e8eef6!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important;background:linear-gradient(180deg,#ffffff,#f8fafc)!important;padding:15px!important;gap:10px!important;transition:transform .18s ease,box-shadow .18s ease!important}
.project-info-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,23,42,.10)!important}
.project-card-top{align-items:center!important}
.project-card-top h4{font-size:16px!important;font-weight:900!important;letter-spacing:-.1px!important}
.project-card-top p{font-size:12px!important;color:#64748b!important}
.project-card-top .badge{white-space:nowrap!important}
.project-card-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
.project-card-meta span{padding:8px 9px!important;border-radius:12px!important;background:#fff!important;font-size:12px!important;line-height:1.35!important;min-height:54px!important}
.project-card-meta b{font-size:10px!important;color:#64748b!important;margin-bottom:4px!important}
.project-card-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
.project-card-stats div{border-radius:12px!important;padding:9px!important;background:#ecfeff!important;border-color:#c7f5ee!important;text-align:left!important}
.project-card-stats span{font-size:10px!important;letter-spacing:.2px!important;text-transform:uppercase!important}
.project-card-stats b{font-size:15px!important;color:#0f172a!important}
.project-policy{font-size:12px!important;line-height:1.45!important;color:#475569!important;min-height:auto!important;-webkit-line-clamp:2!important}
.project-card-actions{gap:7px!important}
.project-card-actions a{font-size:11px!important;padding:7px 10px!important;border-radius:999px!important}

.leader-summary{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;gap:12px!important;margin:12px 0 16px!important}
.leader-summary .summary-box{border-radius:18px!important;padding:14px!important;box-shadow:0 6px 18px rgba(15,23,42,.05)!important}
.leader-summary .summary-box strong{font-size:20px!important;line-height:1.2!important;word-break:break-word!important}
.kpi-card-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important;gap:14px!important;margin:14px 0!important}
.kpi-info-card{border-radius:20px!important;border:1px solid #e8eef6!important;background:linear-gradient(180deg,#fff,#f8fafc)!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important;padding:14px!important;gap:10px!important;min-width:0!important}
.kpi-info-card.over{border-color:#f6c453!important;background:linear-gradient(180deg,#fffbeb,#fff)!important}
.kpi-info-card.low{border-color:#fdba74!important;background:linear-gradient(180deg,#fff7ed,#fff)!important}
.kpi-card-head{align-items:center!important;gap:8px!important}
.kpi-card-period{font-size:12px!important;color:#64748b!important}
.kpi-card-money{border-radius:14px!important;padding:10px!important;background:#fff!important}
.kpi-card-money span{font-size:11px!important;text-transform:uppercase!important;letter-spacing:.25px!important}
.kpi-card-money b{font-size:15px!important;word-break:break-word!important}
.kpi-card-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
.kpi-card-stats div{border-radius:12px!important;padding:8px!important;background:#fff!important}
.kpi-card-stats span{font-size:10px!important;text-transform:uppercase!important;letter-spacing:.2px!important}
.kpi-card-stats b{font-size:14px!important}
.kpi-card-note{font-size:12px!important;color:#64748b!important}
.kpi-progress-list .kpi-person{border-radius:16px!important;background:#fff!important;box-shadow:0 6px 18px rgba(15,23,42,.05)!important}

.top-sales-avatar-section{overflow:hidden!important}
.top-sales-avatar-grid{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important;gap:14px!important;margin-top:12px!important}
.top-sales-avatar-grid .staff-avatar-card{min-height:112px!important;flex-direction:column!important;justify-content:center!important;text-align:center!important;border-radius:20px!important;background:#fff!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important;padding:14px 10px!important}
.top-sales-avatar-grid .staff-avatar-card.top-rank{background:linear-gradient(180deg,#fffbeb,#fff)!important;border-color:#f59e0b!important}
.top-sales-avatar-grid .staff-avatar-circle{width:62px!important;height:62px!important;flex-basis:62px!important;font-size:18px!important;margin-bottom:4px!important}
.top-sales-avatar-grid .staff-avatar-info b{font-size:13px!important;line-height:1.2!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.top-sales-avatar-grid .staff-avatar-info span{font-size:11px!important;line-height:1.25!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.top-sales-avatar-grid .staff-avatar-info small{font-size:11px!important;white-space:normal!important;color:#0f766e!important}
.top-sales-avatar-grid .avatar-top-badge{right:-10px!important;bottom:-7px!important;background:#ef4444!important}

@media(min-width:1180px){
  .project-card-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .kpi-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .top-sales-avatar-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
}
@media(max-width:1100px){
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .project-card-meta{grid-template-columns:1fr!important}
  .project-card-meta span{min-height:auto!important}
  .kpi-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .top-sales-avatar-grid{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))!important}
}
@media(max-width:700px){
  .dashboard-kpi-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .dashboard-kpi-grid .kpi{min-height:84px!important;flex-direction:column!important;align-items:flex-start!important;gap:9px!important;padding:13px!important;border-radius:18px!important}
  .dashboard-kpi-grid .kpi:before{width:38px!important;height:38px!important;border-radius:14px!important}
  .dashboard-kpi-grid .kpi span{font-size:11px!important}
  .dashboard-kpi-grid .kpi strong{font-size:19px!important}
  .card-head.between{flex-direction:column!important;align-items:flex-start!important}
  .project-card-grid,.project-card-grid.compact,.kpi-card-grid{grid-template-columns:1fr!important}
  .project-info-card,.kpi-info-card{border-radius:18px!important;padding:13px!important}
  .project-card-top{align-items:flex-start!important;gap:8px!important}
  .project-card-stats,.kpi-card-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .project-card-stats div,.kpi-card-stats div{padding:7px!important}
  .project-card-stats b,.kpi-card-stats b{font-size:13px!important}
  .project-policy{-webkit-line-clamp:3!important}
  .leader-summary{grid-template-columns:1fr!important}
  .top-sales-avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .top-sales-avatar-grid .staff-avatar-card{min-height:106px!important;border-radius:16px!important;padding:12px 7px!important}
  .top-sales-avatar-grid .staff-avatar-circle{width:54px!important;height:54px!important;flex-basis:54px!important}
}
@media(max-width:390px){
  .dashboard-kpi-grid{grid-template-columns:1fr!important}
  .project-card-stats,.kpi-card-stats{grid-template-columns:1fr!important}
  .top-sales-avatar-grid{grid-template-columns:1fr 1fr!important}
  .top-sales-avatar-grid .staff-avatar-info small{font-size:10px!important}
}


/* --- Update: top doanh số avatar inline + banner dự án --- */
.leader-staff-inline{display:flex;align-items:center;gap:12px;min-width:180px}
.leader-staff-avatar{position:relative;width:46px;height:46px;min-width:46px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ccfbf1,#bfdbfe);color:#0f766e;font-weight:900;font-size:14px;border:2px solid #ffffff;box-shadow:0 4px 14px rgba(15,23,42,.08)}
.leader-staff-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.leader-staff-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.leader-staff-meta b{font-size:14px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leader-staff-meta span{font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leader-inline-rank{position:absolute;right:-6px;bottom:-5px;min-width:26px;height:22px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#0f766e;color:#fff;border:2px solid #fff;font-style:normal;font-size:10px;font-weight:900;box-shadow:0 4px 10px rgba(15,118,110,.28)}
.leader-inline-rank.rank-1{background:#f59e0b}
.leader-inline-rank.rank-2{background:#94a3b8}
.leader-inline-rank.rank-3{background:#f97316}

.project-info-card.with-banner{overflow:hidden;padding:0!important}
.project-info-card.with-banner .project-banner{position:relative;min-height:126px;padding:14px 16px 16px;border-radius:20px 20px 0 0;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.project-info-card.with-banner .project-banner.theme-1{background:linear-gradient(135deg,#0f766e,#115e59 52%,#14b8a6)}
.project-info-card.with-banner .project-banner.theme-2{background:linear-gradient(135deg,#1d4ed8,#2563eb 52%,#38bdf8)}
.project-info-card.with-banner .project-banner.theme-3{background:linear-gradient(135deg,#7c3aed,#8b5cf6 52%,#a78bfa)}
.project-info-card.with-banner .project-banner.theme-4{background:linear-gradient(135deg,#ea580c,#f97316 52%,#fdba74)}
.project-info-card.with-banner .project-banner.theme-5{background:linear-gradient(135deg,#be123c,#e11d48 52%,#fb7185)}
.project-info-card.with-banner .project-banner.theme-6{background:linear-gradient(135deg,#0f766e,#0f766e 25%,#0ea5e9 100%)}
.project-info-card.with-banner .project-banner-backdrop{position:absolute;inset:auto -22px -42px auto;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:-70px -16px 0 0 rgba(255,255,255,.08)}
.project-info-card.with-banner .project-banner-topline,.project-info-card.with-banner .project-banner-title{position:relative;z-index:1}
.project-info-card.with-banner .project-banner-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.project-info-card.with-banner .project-banner-type{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.project-info-card.with-banner .project-banner-title h4{margin:0;font-size:22px!important;font-weight:900!important;line-height:1.15;color:#fff!important}
.project-info-card.with-banner .project-banner-title p{margin:6px 0 0;font-size:12px!important;color:rgba(255,255,255,.9)!important;max-width:90%}
.project-info-card.with-banner .project-card-meta-soft,.project-info-card.with-banner .project-card-stats,.project-info-card.with-banner .project-policy,.project-info-card.with-banner .project-card-actions{padding-left:15px;padding-right:15px}
.project-info-card.with-banner .project-card-meta-soft{padding-top:14px}
.project-info-card.with-banner .project-card-actions{padding-bottom:15px}
.project-info-card.with-banner .project-card-meta span{background:#f8fafc!important;border:1px solid #e5edf6!important;min-height:60px!important}

@media (max-width: 900px){
  .leader-staff-inline{min-width:150px;gap:10px}
  .leader-staff-avatar{width:40px;height:40px;min-width:40px}
  .leader-staff-meta b{font-size:13px}
  .leader-staff-meta span{font-size:11px}
  .project-info-card.with-banner .project-banner{min-height:116px;padding:13px 14px 14px}
  .project-info-card.with-banner .project-banner-title h4{font-size:18px!important}
}
@media (max-width: 640px){
  .leader-staff-inline{min-width:132px;gap:8px}
  .leader-staff-avatar{width:36px;height:36px;min-width:36px}
  .leader-inline-rank{right:-7px;bottom:-6px;min-width:23px;height:20px;font-size:9px}
  .leader-staff-meta b{font-size:12px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .leader-staff-meta span{font-size:10px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .project-info-card.with-banner .project-banner{min-height:108px;padding:12px 12px 13px}
  .project-info-card.with-banner .project-banner-title h4{font-size:17px!important}
  .project-info-card.with-banner .project-banner-title p{max-width:100%;font-size:11px!important}
  .project-info-card.with-banner .project-card-meta,.project-info-card.with-banner .project-card-stats{grid-template-columns:1fr!important}
}


/* --- Compact table for Mục Dự án --- */
#projects .table-wrap{border-radius:16px!important;overflow:auto!important}
#projectsTable{min-width:920px!important;table-layout:fixed}
#projectsTable th,#projectsTable td{padding:10px 12px!important;font-size:13px!important;line-height:1.4!important;vertical-align:top}
#projectsTable th{font-size:12px!important;letter-spacing:.1px}
#projectsTable td:nth-child(1){width:78px}
#projectsTable td:nth-child(2){width:150px}
#projectsTable td:nth-child(3){width:120px}
#projectsTable td:nth-child(4){width:170px}
#projectsTable td:nth-child(5){width:120px}
#projectsTable td:nth-child(6){width:95px}
#projectsTable td:nth-child(7){width:260px}
#projectsTable td:nth-child(8){width:160px}
#projectsTable td:nth-child(9){width:112px}
#projectsTable .badge{font-size:11px!important;padding:5px 8px!important;display:inline-flex;line-height:1.25}
.project-table-code{display:inline-block;font-weight:800;color:#334155}
.project-table-main{display:flex;flex-direction:column;gap:3px}
.project-table-main b{font-size:14px;line-height:1.3;color:#0f172a}
.project-table-main small{font-size:12px;color:#64748b}
.project-table-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;color:#334155}
.project-table-policy{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;color:#334155;max-width:100%}
.project-table-links{display:flex;flex-direction:column;gap:6px}
.project-table-links a{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:999px;background:#ecfeff;color:#0f766e;text-decoration:none;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid #c7f5ee}
.project-table-links a:hover{background:#ccfbf1}
.project-table-actions{display:flex;flex-direction:column;gap:6px}
.project-table-actions .btn{width:100%;justify-content:center;font-size:11px;padding:7px 8px;border-radius:8px}

@media (max-width: 1024px){
  #projectsTable{min-width:860px!important}
  #projectsTable th,#projectsTable td{padding:9px 10px!important;font-size:12px!important}
  .project-table-main b{font-size:13px}
  .project-table-main small,.project-table-links a,.project-table-actions .btn{font-size:11px}
  #projectsTable td:nth-child(7){width:220px}
}
@media (max-width: 768px){
  #projects .table-wrap{margin-top:12px!important}
  #projectsTable{min-width:780px!important}
  #projectsTable th,#projectsTable td{padding:8px 9px!important;font-size:12px!important}
  .project-table-links{gap:5px}
  .project-table-links a{padding:5px 8px}
}

/* =========================================================
   FIX 2026-06-12: Avatar tròn tự crop + chọn khách theo dự án
   Giữ nguyên giao diện gốc, chỉ bổ sung lớp vá lỗi.
   ========================================================= */
.staff-avatar-circle .avatar-photo-crop,
.leader-staff-avatar .avatar-photo-crop{
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  overflow:hidden!important;
  display:block!important;
  line-height:0!important;
}
.staff-avatar-circle .avatar-photo-crop img,
.leader-staff-avatar .avatar-photo-crop img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:50%!important;
  display:block!important;
}
.avatar-uploader{
  display:grid!important;
  justify-items:center!important;
  gap:10px!important;
}
.avatar-uploader input[type=file]{
  width:100%!important;
  margin-bottom:0!important;
}
.avatar-uploader .upload-preview{
  width:148px!important;
  height:148px!important;
  min-height:148px!important;
  border-radius:50%!important;
  overflow:hidden!important;
  border:4px solid #fff!important;
  outline:2px solid #99f6e4!important;
  box-shadow:0 10px 26px rgba(15,118,110,.18)!important;
  background:linear-gradient(135deg,#ecfeff,#f8fafc)!important;
}
.avatar-uploader .upload-preview img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:50%!important;
  display:block!important;
}
.avatar-uploader .upload-preview span{
  padding:16px!important;
  text-align:center!important;
  color:#0f766e!important;
  font-weight:800!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.clear-image-btn{
  margin-top:2px!important;
}
.customer-filterbar #customerProjectFilter,
.bulk-toolbar #bulkProjectFilter{
  min-width:190px!important;
}
@media(max-width:900px){
  .customer-filterbar #customerProjectFilter,
  .bulk-toolbar #bulkProjectFilter{
    width:100%!important;
    min-width:0!important;
  }
  .avatar-uploader .upload-preview{
    width:128px!important;
    height:128px!important;
    min-height:128px!important;
  }
}

/* =========================================================
   FIX 2026-06-13: Lọc khách theo dự án khi phân bổ sale
   ========================================================= */
.project-assign-summary{
  margin:10px 0 14px!important;
}
.project-assign-card{
  background:linear-gradient(135deg,#fff7ed,#ffffff)!important;
  border:1px solid #fed7aa!important;
  border-radius:16px!important;
  padding:12px 14px!important;
  box-shadow:0 8px 20px rgba(124,45,18,.06)!important;
  color:#334155!important;
}
.project-assign-card.muted-card{
  background:linear-gradient(135deg,#f8fafc,#ffffff)!important;
  border-color:#e5e7eb!important;
}
.project-assign-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin-bottom:9px!important;
}
.project-assign-head b{
  color:#0f172a!important;
  font-size:14px!important;
}
.project-assign-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:6px 0!important;
}
.project-assign-chips span{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  border-radius:999px!important;
  padding:7px 10px!important;
  background:#ecfeff!important;
  color:#0f766e!important;
  border:1px solid #99f6e4!important;
  font-size:12px!important;
  font-weight:800!important;
}
.project-assign-chips span.unassigned{
  background:#fff1f2!important;
  color:#be123c!important;
  border-color:#fecdd3!important;
}
.project-assign-card p{
  margin:8px 0 0!important;
  font-size:12px!important;
  line-height:1.45!important;
  color:#475569!important;
}
.project-assign-note{
  color:#7c2d12!important;
}
@media(max-width:900px){
  .project-assign-card{padding:11px 12px!important;border-radius:14px!important;}
  .project-assign-head{align-items:flex-start!important;}
  .project-assign-chips span{width:100%!important;justify-content:space-between!important;}
}


/* Màu badge tình trạng dự án dễ nhìn hơn */
.badge.project-implement{background:#dbeafe!important;color:#1d4ed8!important;border:1px solid #93c5fd!important;}
.badge.project-launch{background:#dcfce7!important;color:#166534!important;border:1px solid #86efac!important;}
.badge.project-selling{background:#fef3c7!important;color:#92400e!important;border:1px solid #fcd34d!important;}
.badge.project-upcoming{background:#ede9fe!important;color:#6d28d9!important;border:1px solid #c4b5fd!important;}
.badge.project-delivered{background:#e0f2fe!important;color:#0369a1!important;border:1px solid #7dd3fc!important;}
.badge.project-paused{background:#fee2e2!important;color:#b91c1c!important;border:1px solid #fca5a5!important;}
.badge.project-soldout{background:#e5e7eb!important;color:#374151!important;border:1px solid #cbd5e1!important;}
.badge.project-media{background:#fce7f3!important;color:#be185d!important;border:1px solid #f9a8d4!important;}
.project-card-top .badge,
.project-banner-topline .badge{font-weight:800;box-shadow:0 1px 2px rgba(15,23,42,.06);}

/* Upload nhiều hình ảnh cho tài liệu/bài đăng */
.multi-image-uploader input[type=file]{margin-bottom:10px;}
.multi-image-preview{min-height:150px;border-radius:12px;background:#fff;border:1px solid var(--line);padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:10px;align-items:start;}
.multi-image-empty{grid-column:1/-1;min-height:120px;display:grid;place-items:center;color:#64748b;font-weight:800;text-align:center;padding:12px;}
.multi-image-thumb{position:relative;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#f8fafc;min-height:118px;}
.multi-image-thumb img{width:100%;height:92px;object-fit:cover;display:block;}
.multi-image-thumb span{display:block;padding:6px 8px;color:#334155;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.multi-image-remove{position:absolute;top:6px;right:6px;width:25px;height:25px;border:0;border-radius:999px;background:#fee2e2;color:#b91c1c;font-weight:900;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.16);}
.clear-multi-image-btn{margin-top:10px;}
.post-image-stack{width:100%;height:100%;position:relative;display:block;}
.post-image-stack img{width:100%;height:100%;object-fit:cover;display:block;}
.post-image-stack span{position:absolute;right:10px;bottom:10px;background:rgba(15,23,42,.86);color:#fff;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:900;box-shadow:0 4px 12px rgba(15,23,42,.24);}
@media(max-width:520px){.multi-image-preview{grid-template-columns:repeat(2,minmax(0,1fr));}.multi-image-thumb img{height:84px;}}

/* Nút quản trị bài đăng trong Kho tài liệu */
.post-admin-actions:empty{display:none!important;}
.post-admin-actions{margin-top:6px;padding-top:8px;border-top:1px dashed #e5e7eb;}


/* Chat cộng đồng dạng popup */
.community-chat-widget{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  font-family:var(--font-google, Arial, sans-serif);
}
.auth-locked .community-chat-widget{display:none!important;}
.community-chat-btn{
  position:relative;
  border:0;
  background:linear-gradient(135deg,#0f766e,#2563eb);
  color:#fff;
  border-radius:999px;
  padding:13px 18px;
  box-shadow:0 16px 40px rgba(15,23,42,.24);
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}
.community-chat-btn:hover{filter:brightness(.97);transform:translateY(-1px);}
.community-chat-icon{font-size:18px;line-height:1;}
.community-chat-label{white-space:nowrap;}
.community-chat-count{
  position:absolute;
  top:-7px;
  right:-6px;
  min-width:22px;
  height:22px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  border:2px solid #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  padding:0 6px;
}
.community-chat-count.hidden{display:none!important;}
.community-chat-popup{
  position:absolute;
  right:0;
  bottom:62px;
  width:min(390px,calc(100vw - 24px));
  max-height:min(580px,calc(100vh - 110px));
  background:#fff;
  border:1px solid #dbe5ef;
  border-radius:20px;
  box-shadow:0 24px 70px rgba(15,23,42,.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.community-chat-popup.hidden{display:none!important;}
.community-chat-head{
  padding:15px 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  background:linear-gradient(135deg,#ecfeff,#eff6ff);
  border-bottom:1px solid #dbeafe;
}
.community-chat-head h3{margin:0;color:#0f172a;font-size:16px;}
.community-chat-head p{margin:4px 0 0;color:#64748b;font-size:12px;line-height:1.35;}
.community-chat-head button{
  border:0;
  background:#fff;
  color:#334155;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(15,23,42,.12);
}
.community-chat-list{
  flex:1;
  overflow:auto;
  padding:14px;
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:260px;
}
.community-chat-empty{
  text-align:center;
  color:#64748b;
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  padding:22px 14px;
  line-height:1.5;
}
.community-chat-msg{
  max-width:88%;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px 16px 16px 6px;
  padding:10px 12px;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}
.community-chat-msg.mine{
  align-self:flex-end;
  background:#ecfeff;
  border-color:#99f6e4;
  border-radius:16px 16px 6px 16px;
}
.community-chat-msg-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:5px;
}
.community-chat-author{
  font-weight:900;
  color:#0f766e;
  font-size:12px;
}
.community-chat-time{
  color:#94a3b8;
  font-size:11px;
  white-space:nowrap;
}
.community-chat-text{
  color:#0f172a;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}
.community-chat-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}
.community-chat-delete{
  border:0;
  background:transparent;
  color:#dc2626;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  padding:2px 0;
}
.community-chat-compose{
  padding:12px;
  border-top:1px solid #e2e8f0;
  background:#fff;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:end;
}
.community-chat-compose textarea{
  min-height:48px;
  max-height:110px;
  resize:vertical;
  border-radius:14px;
  font-size:13px;
  line-height:1.4;
}
@media(max-width:640px){
  .community-chat-widget{right:12px;bottom:12px;}
  .community-chat-btn{padding:12px 14px;}
  .community-chat-label{display:none;}
  .community-chat-popup{right:-2px;bottom:58px;width:calc(100vw - 20px);max-height:calc(100vh - 92px);}
  .community-chat-list{min-height:230px;}
}

/* KPI: bảng tiến độ và danh sách riêng theo tháng/quý/năm */
.kpi-period-panels{align-items:stretch!important;}
.kpi-progress-panel,.kpi-breakdown-panel{min-width:0;}
.kpi-progress-table-wrap table{min-width:860px;}
.kpi-progress-table-wrap .progress.wide{min-width:140px;margin-bottom:4px;}
.kpi-period-list{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow:auto;padding-right:2px;}
.kpi-period-item{border:1px solid #e2e8f0;background:#fff;border-radius:16px;padding:12px;box-shadow:0 6px 18px rgba(15,23,42,.05);}
.kpi-period-item.over{border-color:#fcd34d;background:#fffbeb;}
.kpi-period-item.low{border-color:#fecaca;background:#fff7f7;}
.kpi-period-main{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px;}
.kpi-period-main b{color:#0f172a;font-size:14px;line-height:1.3;}
.kpi-period-main span{color:#64748b;font-size:12px;text-align:right;line-height:1.35;}
.kpi-period-money{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:7px;}
.kpi-period-money b{color:#0f766e;font-size:17px;}
.kpi-period-money span{color:#64748b;font-size:12px;font-weight:800;}
.kpi-period-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px;}
.kpi-period-meta span:not(.badge){font-size:12px;color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:4px 8px;font-weight:800;}
.kpi-quarter-breakdown{margin-top:14px;border-top:1px dashed #cbd5e1;padding-top:13px;}
.kpi-quarter-breakdown h4{margin:0 0 10px;color:#0f172a;font-size:14px;}
.kpi-month-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.kpi-month-mini{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:10px;min-width:0;}
.kpi-month-mini.over{background:#fffbeb;border-color:#fcd34d;}
.kpi-month-mini.low{background:#fff7f7;border-color:#fecaca;}
.kpi-month-mini div:first-child{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;}
.kpi-month-mini b{font-size:13px;color:#0f172a;}
.kpi-month-mini span,.kpi-month-mini small{font-size:11px;color:#64748b;font-weight:800;}
.kpi-month-mini strong{display:block;color:#0f766e;font-size:13px;margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:900px){
  .kpi-month-mini-grid{grid-template-columns:1fr;}
  .kpi-period-main{flex-direction:column;gap:4px;}
  .kpi-period-main span{text-align:left;}
  .kpi-period-list{max-height:none;}
}


/* =========================================================
   FIX 2026-06-13: Dashboard KPI cards hiển thị đẹp hơn
   - Tách label và số thành 1 cụm, tránh vỡ số
   - Màu sắc rõ hơn, dễ nhìn hơn
   ========================================================= */
.dashboard-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:16px!important;margin-bottom:18px!important}
.dashboard-kpi-grid .kpi{
  position:relative!important;
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  min-height:112px!important;
  padding:18px 20px!important;
  border-radius:24px!important;
  border:1px solid #e6edf5!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
  box-shadow:0 12px 30px rgba(15,23,42,.08)!important;
  overflow:hidden!important;
}
.dashboard-kpi-grid .kpi:after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  border-radius:24px 0 0 24px;
  background:#99f6e4;
  opacity:.9;
}
.dashboard-kpi-grid .kpi:before{
  content:"";
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:18px;
  background:linear-gradient(135deg,#ecfeff,#ccfbf1);
  box-shadow:inset 0 0 0 1px rgba(20,184,166,.16),0 8px 18px rgba(15,23,42,.06);
}
.dashboard-kpi-grid .kpi .kpi-body{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:7px!important}
.dashboard-kpi-grid .kpi span{
  display:block!important;
  margin:0!important;
  color:#64748b!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.3!important;
  letter-spacing:.01em!important;
}
.dashboard-kpi-grid .kpi strong{
  display:block!important;
  margin:0!important;
  color:#0f172a!important;
  font-size:clamp(30px,2vw,42px)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
}
.dashboard-kpi-grid .kpi-revenue strong{
  color:#0f766e!important;
  font-size:clamp(20px,1.45vw,28px)!important;
  letter-spacing:-.02em!important;
}
.dashboard-kpi-grid .kpi-customers:after{background:#99f6e4!important}
.dashboard-kpi-grid .kpi-projects:after{background:#fdba74!important}
.dashboard-kpi-grid .kpi-docs:after{background:#93c5fd!important}
.dashboard-kpi-grid .kpi-deals:after{background:#c4b5fd!important}
.dashboard-kpi-grid .kpi-revenue:after{background:#fca5a5!important}
.dashboard-kpi-grid .kpi-staff:after{background:#86efac!important}
.dashboard-kpi-grid .kpi-customers:before{background:linear-gradient(135deg,#ecfeff,#ccfbf1)!important}
.dashboard-kpi-grid .kpi-projects:before{background:linear-gradient(135deg,#fff7ed,#fed7aa)!important}
.dashboard-kpi-grid .kpi-docs:before{background:linear-gradient(135deg,#eff6ff,#bfdbfe)!important}
.dashboard-kpi-grid .kpi-deals:before{background:linear-gradient(135deg,#f5f3ff,#ddd6fe)!important}
.dashboard-kpi-grid .kpi-revenue:before{background:linear-gradient(135deg,#fef2f2,#fecaca)!important}
.dashboard-kpi-grid .kpi-staff:before{background:linear-gradient(135deg,#f0fdf4,#bbf7d0)!important}
.dashboard-kpi-grid .kpi-customers strong{color:#0f766e!important}
.dashboard-kpi-grid .kpi-projects strong{color:#b45309!important}
.dashboard-kpi-grid .kpi-docs strong{color:#2563eb!important}
.dashboard-kpi-grid .kpi-deals strong{color:#7c3aed!important}
.dashboard-kpi-grid .kpi-staff strong{color:#15803d!important}
@media (max-width:1500px){
  .dashboard-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:900px){
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .dashboard-kpi-grid .kpi{min-height:100px!important;padding:16px!important;border-radius:20px!important;grid-template-columns:48px minmax(0,1fr)!important;gap:12px!important}
  .dashboard-kpi-grid .kpi:before{width:48px!important;height:48px!important;border-radius:16px!important}
  .dashboard-kpi-grid .kpi strong{font-size:clamp(24px,5vw,34px)!important}
  .dashboard-kpi-grid .kpi-revenue strong{font-size:clamp(18px,3.6vw,24px)!important}
}
@media (max-width:560px){
  .dashboard-kpi-grid{grid-template-columns:1fr!important}
}


/* FIX hiển thị dropdown GPT/Gemini trong Mẫu tin nhắn */
.ai-provider-field select,.ai-model-field select{border:1px solid #93c5fd!important;background:#f8fbff!important;font-weight:800!important;color:#0f172a!important;}
.ai-model-field small{display:block;margin-top:6px;color:#2563eb;font-size:12px;font-weight:700;}
.ai-model-field optgroup{font-weight:900;color:#0f766e;}

/* FIX 2026-06-15: Ẩn HH dự kiến của nhân viên khác */
.commission-private{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  background:#f1f5f9!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}

/* =========================================================
   FIX 2026-06-15: Xem mặt bằng tổng thể + xem 360 từng dự án
   ========================================================= */
.project-card-media-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-top:12px!important;
  padding-top:12px!important;
  border-top:1px dashed #e2e8f0!important;
}
.project-table-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
.btn[disabled]{
  opacity:.55!important;
  cursor:not-allowed!important;
  filter:grayscale(.25)!important;
}
.project-plan-uploader .multi-image-empty{
  background:#f8fafc!important;
  border:1px dashed #94a3b8!important;
  border-radius:14px!important;
  padding:14px!important;
  color:#64748b!important;
  font-weight:700!important;
}
.any-file-uploader .upload-preview span{
  display:flex!important;
  min-height:88px!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px dashed #94a3b8!important;
  border-radius:14px!important;
  background:#f8fafc!important;
  color:#64748b!important;
  padding:14px!important;
  text-align:center!important;
  font-weight:700!important;
}
.any-file-uploader .upload-preview img{
  width:100%!important;
  max-height:220px!important;
  object-fit:cover!important;
  border-radius:14px!important;
  border:1px solid #e2e8f0!important;
}
.project-media-modal{
  z-index:60!important;
  padding:14px!important;
}
.project-media-box{
  width:min(1420px,98vw)!important;
  height:min(920px,94vh)!important;
  background:#ffffff!important;
  border-radius:24px!important;
  box-shadow:0 30px 90px rgba(15,23,42,.35)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid rgba(226,232,240,.95)!important;
}
.project-media-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:18px 22px!important;
  border-bottom:1px solid #e2e8f0!important;
  background:linear-gradient(135deg,#0f766e,#115e59)!important;
  color:#fff!important;
}
.project-media-head h3{
  margin:0!important;
  font-size:22px!important;
  font-weight:900!important;
}
.project-media-head p{
  margin:5px 0 0!important;
  color:#ccfbf1!important;
  font-size:13px!important;
}
.project-media-head button{
  width:40px!important;
  height:40px!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
  font-size:26px!important;
  cursor:pointer!important;
}
.project-media-toolbar{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  padding:12px 16px!important;
  background:#f8fafc!important;
  border-bottom:1px solid #e2e8f0!important;
}
.project-media-count{
  display:inline-flex!important;
  min-width:64px!important;
  justify-content:center!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:#e6fffb!important;
  color:#0f766e!important;
  font-weight:900!important;
  font-size:13px!important;
}
.project-media-stage{
  flex:1!important;
  min-height:0!important;
  background:radial-gradient(circle at top,#1e293b,#020617)!important;
  overflow:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
}
.project-media-canvas{
  min-width:100%!important;
  min-height:100%!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:auto!important;
  padding:24px!important;
}
.project-media-canvas img{
  max-width:100%!important;
  height:auto!important;
  transform-origin:top center!important;
  transition:transform .18s ease!important;
  border-radius:12px!important;
  box-shadow:0 20px 60px rgba(0,0,0,.38)!important;
  background:#fff!important;
}
.project-media-canvas.panorama-mode{
  align-items:center!important;
  justify-content:flex-start!important;
  cursor:grab!important;
}
.project-media-canvas.panorama-mode img{
  max-width:none!important;
  width:auto!important;
  max-height:76vh!important;
  transform-origin:center center!important;
}
.project-media-frame{
  width:100%!important;
  height:100%!important;
  min-height:650px!important;
  border:0!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 20px 60px rgba(0,0,0,.32)!important;
}
.project-media-video{
  width:100%!important;
  height:100%!important;
  max-height:76vh!important;
  border-radius:14px!important;
  background:#000!important;
}
.project-media-empty{
  color:#fff!important;
  font-weight:900!important;
  text-align:center!important;
}
.project-media-thumbs{
  display:flex!important;
  gap:10px!important;
  overflow-x:auto!important;
  padding:12px 16px!important;
  background:#fff!important;
  border-top:1px solid #e2e8f0!important;
}
.project-media-thumb{
  width:132px!important;
  flex:0 0 132px!important;
  border:2px solid #e2e8f0!important;
  border-radius:16px!important;
  background:#f8fafc!important;
  padding:6px!important;
  cursor:pointer!important;
}
.project-media-thumb.active{
  border-color:#14b8a6!important;
  box-shadow:0 0 0 3px rgba(20,184,166,.16)!important;
}
.project-media-thumb img,
.project-media-thumb span{
  width:100%!important;
  height:72px!important;
  object-fit:cover!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:#e2e8f0!important;
  color:#0f172a!important;
  font-weight:900!important;
}
.project-media-thumb small{
  display:block!important;
  margin-top:5px!important;
  color:#334155!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:900px){
  .project-media-box{width:98vw!important;height:92vh!important;border-radius:18px!important}
  .project-media-head{padding:14px 16px!important}
  .project-media-head h3{font-size:18px!important}
  .project-media-stage{padding:10px!important}
  .project-media-frame{min-height:540px!important}
  .project-media-thumb{width:108px!important;flex-basis:108px!important}
  .project-media-thumb img,.project-media-thumb span{height:62px!important}
}

/* FIX 2026-06-15: Mặt bằng high-res, kéo ảnh, xoay ảnh, tải nhiều ảnh */
.project-plan-uploader input[type="file"]{
  border:2px dashed #14b8a6!important;
  background:#f0fdfa!important;
  font-weight:800!important;
}
.project-plan-uploader small{
  display:block!important;
  color:#0f766e!important;
  font-weight:800!important;
  line-height:1.45!important;
}
.project-media-toolbar{
  gap:8px!important;
}
.project-media-toolbar .btn{
  white-space:nowrap!important;
}
.project-media-canvas.project-plan-canvas,
.project-media-canvas.panorama-mode{
  cursor:grab!important;
  align-items:center!important;
  justify-content:center!important;
  touch-action:none!important;
  user-select:none!important;
}
.project-media-canvas.dragging{
  cursor:grabbing!important;
}
.project-media-canvas img#projectMediaImage{
  max-width:none!important;
  max-height:none!important;
  width:auto!important;
  height:auto!important;
  transform-origin:center center!important;
  will-change:transform!important;
  image-rendering:auto!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.project-plan-canvas img#projectMediaImage{
  max-width:95%!important;
}
.project-media-stage{
  overscroll-behavior:contain!important;
}
.project-media-count#projectMediaZoomText{
  background:#fff7ed!important;
  color:#9a3412!important;
}
.project-media-thumb small{
  line-height:1.25!important;
}
@media(max-width:900px){
  .project-media-toolbar{
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
  }
  .project-media-toolbar .btn,
  .project-media-toolbar .project-media-count{
    flex:0 0 auto!important;
  }
  .project-plan-canvas img#projectMediaImage{
    max-width:120%!important;
  }
}

/* FIX 2026-06-15: lưu ảnh mặt bằng lớn bằng IndexedDB */
.multi-image-db-preview{
  width:100%!important;
  height:86px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#ecfeff,#ccfbf1)!important;
  color:#0f766e!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:900!important;
  text-align:center!important;
}
.multi-image-db-preview small{
  color:#115e59!important;
  font-size:11px!important;
  margin-top:3px!important;
}

/* FIX 2026-06-15: tự động nén ảnh mặt bằng dung lượng lớn */
.project-plan-uploader .multi-image-empty{
  color:#0f766e!important;
  font-weight:900!important;
}
.multi-image-db-preview small{
  max-width:92%!important;
  line-height:1.25!important;
}

/* FIX 2026-06-16: ảnh mặt bằng lưu DataURL sau nén, không còn lỗi vỡ ảnh lớn */
.project-media-empty{
  padding:22px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.08)!important;
}

/* FIX 2026-06-16: lưu ảnh mặt bằng nặng riêng, popup dùng blob URL/thumbnail */
.multi-image-thumb img{
  object-fit:cover!important;
}

/* FIX 2026-06-16: chống bấm lưu dự án khi ảnh mặt bằng đang xử lý */
.form-actions button:disabled{
  opacity:.65!important;
  cursor:not-allowed!important;
}

/* FIX 2026-06-16: upload file 360 nặng lưu riêng */
.any-file-uploader .upload-preview img{
  max-height:220px!important;
  object-fit:cover!important;
}

/* FIX 2026-06-16: xem ảnh panorama 360 dạng tương tác WebGL */
.project-360-viewer{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:650px!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:#020617!important;
  box-shadow:0 20px 60px rgba(0,0,0,.32)!important;
}
.project-360-viewer canvas{
  width:100%!important;
  height:100%!important;
  display:block!important;
  cursor:grab!important;
  touch-action:none!important;
}
.project-360-viewer canvas.dragging{
  cursor:grabbing!important;
}
.project-360-hint{
  position:absolute!important;
  left:14px!important;
  bottom:14px!important;
  padding:9px 12px!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.68)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:800!important;
  pointer-events:none!important;
}
@media(max-width:900px){
  .project-360-viewer{min-height:540px!important}
}

/* FIX 2026-06-16: sửa chiều ảnh và góc xem 360 */
.project-360-hint{
  max-width:calc(100% - 28px)!important;
  white-space:normal!important;
  line-height:1.35!important;
}

/* FIX 2026-06-16: gửi hình ảnh/video trong chat cộng đồng + chống tách chữ cuối khi gõ tiếng Việt */
.community-chat-compose{
  gap:8px!important;
}
.community-chat-compose textarea{
  min-height:52px!important;
}
.community-chat-media-preview{
  display:flex!important;
  gap:8px!important;
  padding:8px 10px!important;
  overflow-x:auto!important;
  border-top:1px solid rgba(226,232,240,.9)!important;
  background:#f8fafc!important;
}
.community-chat-media-preview.hidden{
  display:none!important;
}
.community-chat-media-preview-item{
  position:relative!important;
  flex:0 0 96px!important;
  width:96px!important;
  border:1px solid #e2e8f0!important;
  border-radius:12px!important;
  background:#fff!important;
  overflow:hidden!important;
}
.community-chat-media-preview-item img,
.community-chat-media-preview-item video{
  width:100%!important;
  height:76px!important;
  object-fit:cover!important;
  display:block!important;
  background:#0f172a!important;
}
.community-chat-media-preview-item button{
  position:absolute!important;
  top:4px!important;
  right:4px!important;
  width:22px!important;
  height:22px!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.72)!important;
  color:#fff!important;
  cursor:pointer!important;
  font-weight:900!important;
}
.community-chat-media-preview-item span{
  display:block!important;
  padding:4px 6px!important;
  font-size:10px!important;
  color:#475569!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.community-chat-media-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:8px!important;
}
.community-chat-media-item{
  display:block!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#0f172a!important;
  border:1px solid rgba(226,232,240,.8)!important;
  text-decoration:none!important;
}
.community-chat-media-item img,
.community-chat-media-item video{
  width:100%!important;
  max-height:220px!important;
  object-fit:cover!important;
  display:block!important;
  background:#0f172a!important;
}
.community-chat-media-item span{
  display:block!important;
  padding:6px 8px!important;
  font-size:11px!important;
  color:#e2e8f0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.community-chat-msg.mine .community-chat-media-item{
  border-color:rgba(20,184,166,.25)!important;
}
@media(max-width:560px){
  .community-chat-media-list{grid-template-columns:1fr!important}
  .community-chat-compose{flex-wrap:wrap!important}
  .community-chat-compose textarea{flex-basis:100%!important}
}

/* FIX 2026-06-16: chỉnh giao diện ô chat + nút icon ảnh/video */
#communityChatFileInput{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
  position:absolute!important;
  pointer-events:none!important;
}
.community-chat-popup{
  width:min(680px,calc(100vw - 24px))!important;
  max-height:min(760px,calc(100vh - 28px))!important;
}
.community-chat-compose{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)76px!important;
  align-items:end!important;
  gap:10px!important;
  padding:10px 12px 14px!important;
  background:#fff!important;
  border-top:1px solid #e2e8f0!important;
}
.community-chat-compose textarea#communityChatInput{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  max-height:120px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  border:1px solid #cbd5e1!important;
  background:#fff!important;
  font-size:15px!important;
  line-height:1.35!important;
  resize:vertical!important;
  box-sizing:border-box!important;
}
.community-chat-compose textarea#communityChatInput:focus{
  outline:0!important;
  border-color:#14b8a6!important;
  box-shadow:0 0 0 3px rgba(20,184,166,.16)!important;
}
.community-chat-attach-btn,
.community-chat-send-btn{
  height:48px!important;
  min-height:48px!important;
  border:0!important;
  border-radius:16px!important;
  font-weight:900!important;
  cursor:pointer!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
.community-chat-attach-btn{
  width:48px!important;
  padding:0!important;
  background:#e6fffb!important;
  color:#0f766e!important;
  box-shadow:inset 0 0 0 1px rgba(20,184,166,.22)!important;
}
.community-chat-attach-btn span{
  font-size:21px!important;
  line-height:1!important;
}
.community-chat-send-btn{
  width:76px!important;
  padding:0 16px!important;
  background:#16a34a!important;
  color:#fff!important;
}
.community-chat-send-btn:disabled,
.community-chat-attach-btn:disabled{
  opacity:.62!important;
  cursor:not-allowed!important;
}
.community-chat-media-preview{
  border-top:1px solid #e2e8f0!important;
}
@media(max-width:560px){
  .community-chat-popup{
    width:calc(100vw - 12px)!important;
    right:6px!important;
    left:6px!important;
    bottom:82px!important;
  }
  .community-chat-compose{
    grid-template-columns:44px minmax(0,1fr)70px!important;
    gap:8px!important;
    padding:9px 10px 12px!important;
  }
  .community-chat-attach-btn{
    width:44px!important;
    height:46px!important;
    min-height:46px!important;
    border-radius:14px!important;
  }
  .community-chat-send-btn{
    width:70px!important;
    height:46px!important;
    min-height:46px!important;
    border-radius:14px!important;
  }
  .community-chat-compose textarea#communityChatInput{
    height:46px!important;
    min-height:46px!important;
    font-size:14px!important;
    border-radius:14px!important;
  }
}

/* FIX 2026-06-16: chống mất hình chat + tối ưu popup chat điện thoại */
.community-chat-popup{
  display:flex!important;
  flex-direction:column!important;
  width:min(680px,calc(100vw - 24px))!important;
  max-height:min(760px,calc(100vh - 28px))!important;
  overflow:hidden!important;
}
.community-chat-popup.hidden{
  display:none!important;
}
.community-chat-list{
  flex:1 1 auto!important;
  min-height:220px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:14px!important;
  overscroll-behavior:contain!important;
}
.community-chat-msg{
  max-width:86%!important;
  overflow:visible!important;
}
.community-chat-msg.mine{
  margin-left:auto!important;
}
.community-chat-media-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  margin-top:8px!important;
  overflow:visible!important;
}
.community-chat-media-item{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#0f172a!important;
  text-decoration:none!important;
}
.community-chat-media-item img,
.community-chat-media-item video{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:120px!important;
  max-height:240px!important;
  object-fit:cover!important;
  background:#0f172a!important;
}
.community-chat-media-item span{
  display:block!important;
  color:#e2e8f0!important;
  font-size:11px!important;
  padding:6px 8px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.community-chat-media-error{
  min-height:120px!important;
  display:grid!important;
  place-items:center!important;
  background:#fee2e2!important;
  color:#991b1b!important;
  font-size:12px!important;
  font-weight:800!important;
  padding:10px!important;
  text-align:center!important;
}
#communityChatFileInput{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
  position:absolute!important;
  pointer-events:none!important;
}
.community-chat-compose{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)76px!important;
  gap:10px!important;
  align-items:end!important;
  padding:10px 12px 14px!important;
  background:#fff!important;
  border-top:1px solid #e2e8f0!important;
}
.community-chat-compose textarea#communityChatInput{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  max-height:116px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  box-sizing:border-box!important;
  resize:vertical!important;
  line-height:1.35!important;
  overflow:auto!important;
}
.community-chat-attach-btn,
.community-chat-send-btn{
  height:48px!important;
  min-height:48px!important;
  border-radius:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:900!important;
  box-sizing:border-box!important;
}
.community-chat-attach-btn{
  width:48px!important;
  border:0!important;
  background:#e6fffb!important;
  color:#0f766e!important;
}
.community-chat-send-btn{
  width:76px!important;
  border:0!important;
  background:#16a34a!important;
  color:#fff!important;
}
.community-chat-media-preview{
  flex:0 0 auto!important;
  max-height:126px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
@media(max-width:560px){
  .community-chat-widget{
    right:6px!important;
    left:6px!important;
    bottom:8px!important;
  }
  .community-chat-popup{
    position:fixed!important;
    left:6px!important;
    right:6px!important;
    bottom:76px!important;
    width:auto!important;
    max-width:none!important;
    height:min(78vh,680px)!important;
    max-height:min(78vh,680px)!important;
    border-radius:22px!important;
  }
  .community-chat-head{
    flex:0 0 auto!important;
    padding:12px 14px!important;
  }
  .community-chat-head h3{
    font-size:16px!important;
  }
  .community-chat-head p{
    font-size:11px!important;
  }
  .community-chat-list{
    min-height:0!important;
    padding:10px!important;
  }
  .community-chat-msg{
    max-width:92%!important;
    font-size:14px!important;
  }
  .community-chat-media-list{
    grid-template-columns:1fr!important;
  }
  .community-chat-media-item img,
  .community-chat-media-item video{
    min-height:150px!important;
    max-height:260px!important;
  }
  .community-chat-compose{
    grid-template-columns:44px minmax(0,1fr)68px!important;
    gap:8px!important;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom))!important;
  }
  .community-chat-attach-btn{
    width:44px!important;
    height:46px!important;
    min-height:46px!important;
    border-radius:14px!important;
  }
  .community-chat-send-btn{
    width:68px!important;
    height:46px!important;
    min-height:46px!important;
    border-radius:14px!important;
    font-size:14px!important;
  }
  .community-chat-compose textarea#communityChatInput{
    height:46px!important;
    min-height:46px!important;
    max-height:96px!important;
    font-size:14px!important;
    border-radius:14px!important;
    padding:11px 12px!important;
  }
}

/* =========================================================
   HARD FIX 2026-06-16: Khung chat mobile không lệch/tràn màn hình
   ========================================================= */
#communityChatFileInput,
.community-chat-file-hidden{
  display:none!important;
  visibility:hidden!important;
  position:absolute!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
  pointer-events:none!important;
  left:-9999px!important;
}

/* desktop/tablet base */
.community-chat-widget{
  position:fixed!important;
  right:22px!important;
  bottom:22px!important;
  z-index:99999!important;
  left:auto!important;
  top:auto!important;
  width:auto!important;
  max-width:calc(100vw - 24px)!important;
}
.community-chat-btn{
  position:relative!important;
  z-index:2!important;
}
.community-chat-popup{
  position:absolute!important;
  right:0!important;
  bottom:70px!important;
  left:auto!important;
  top:auto!important;
  width:min(420px,calc(100vw - 28px))!important;
  height:min(640px,calc(100vh - 120px))!important;
  max-height:min(640px,calc(100vh - 120px))!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 22px 70px rgba(15,23,42,.28)!important;
  border:1px solid rgba(226,232,240,.95)!important;
}
.community-chat-popup.hidden{
  display:none!important;
}
.community-chat-head{
  flex:0 0 auto!important;
}
.community-chat-list{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px!important;
  background:#f8fafc!important;
}
.community-chat-media-preview{
  flex:0 0 auto!important;
  max-height:118px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
.community-chat-compose{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)68px!important;
  gap:8px!important;
  align-items:end!important;
  padding:10px 10px 12px!important;
  background:#fff!important;
  border-top:1px solid #e2e8f0!important;
}
.community-chat-compose textarea#communityChatInput{
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  max-height:96px!important;
  padding:11px 12px!important;
  border-radius:14px!important;
  border:1px solid #cbd5e1!important;
  box-sizing:border-box!important;
  resize:none!important;
  overflow-y:auto!important;
  font-size:14px!important;
  line-height:1.35!important;
}
.community-chat-attach-btn,
.community-chat-send-btn{
  width:auto!important;
  height:46px!important;
  min-height:46px!important;
  border-radius:14px!important;
  border:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.community-chat-attach-btn{
  width:46px!important;
  min-width:46px!important;
  padding:0!important;
  background:#e6fffb!important;
  color:#0f766e!important;
}
.community-chat-send-btn{
  width:68px!important;
  min-width:68px!important;
  padding:0!important;
  background:#16a34a!important;
  color:#fff!important;
}
.community-chat-msg{
  max-width:88%!important;
  word-break:break-word!important;
}
.community-chat-msg.mine{
  margin-left:auto!important;
}
.community-chat-media-list{
  width:100%!important;
  grid-template-columns:1fr!important;
}
.community-chat-media-item img,
.community-chat-media-item video{
  width:100%!important;
  max-width:100%!important;
  max-height:240px!important;
  object-fit:cover!important;
}

/* phone: popup center full screen area, not narrow side bar */
@media (max-width: 640px){
  html,body{
    overflow-x:hidden!important;
  }
  .community-chat-widget{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    pointer-events:none!important;
    z-index:999999!important;
  }
  .community-chat-btn{
    pointer-events:auto!important;
    position:fixed!important;
    right:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    width:62px!important;
    height:62px!important;
    border-radius:50%!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-shadow:0 14px 34px rgba(15,23,42,.28)!important;
  }
  .community-chat-btn .community-chat-label{
    display:none!important;
  }
  .community-chat-btn .community-chat-icon{
    font-size:26px!important;
    line-height:1!important;
  }
  .community-chat-count{
    position:absolute!important;
    top:-5px!important;
    right:-5px!important;
  }
  .community-chat-popup{
    pointer-events:auto!important;
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:min(72vh,620px)!important;
    max-height:min(72vh,620px)!important;
    border-radius:20px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    transform:none!important;
  }
  .community-chat-popup.hidden{
    display:none!important;
  }
  .community-chat-head{
    padding:12px 14px!important;
    gap:10px!important;
  }
  .community-chat-head h3{
    font-size:16px!important;
    line-height:1.2!important;
  }
  .community-chat-head p{
    font-size:11px!important;
    line-height:1.25!important;
    margin-top:2px!important;
  }
  .community-chat-head button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
  .community-chat-list{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    padding:10px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .community-chat-msg{
    max-width:94%!important;
    padding:10px 12px!important;
    border-radius:16px!important;
    font-size:14px!important;
  }
  .community-chat-msg-head{
    gap:6px!important;
    flex-wrap:wrap!important;
  }
  .community-chat-author{
    font-size:12px!important;
  }
  .community-chat-time{
    font-size:11px!important;
  }
  .community-chat-text{
    font-size:14px!important;
    line-height:1.42!important;
  }
  .community-chat-media-preview{
    padding:7px 8px!important;
    max-height:106px!important;
  }
  .community-chat-media-preview-item{
    flex-basis:82px!important;
    width:82px!important;
  }
  .community-chat-media-preview-item img,
  .community-chat-media-preview-item video{
    height:62px!important;
  }
  .community-chat-compose{
    grid-template-columns:42px minmax(0,1fr)62px!important;
    gap:7px!important;
    padding:8px 9px calc(10px + env(safe-area-inset-bottom))!important;
  }
  .community-chat-attach-btn{
    width:42px!important;
    min-width:42px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:13px!important;
  }
  .community-chat-attach-btn span{
    font-size:20px!important;
  }
  .community-chat-send-btn{
    width:62px!important;
    min-width:62px!important;
    height:44px!important;
    min-height:44px!important;
    font-size:14px!important;
    border-radius:13px!important;
  }
  .community-chat-compose textarea#communityChatInput{
    height:44px!important;
    min-height:44px!important;
    max-height:86px!important;
    padding:10px 11px!important;
    font-size:14px!important;
    border-radius:13px!important;
  }
  .community-chat-media-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .community-chat-media-item img,
  .community-chat-media-item video{
    min-height:130px!important;
    max-height:210px!important;
  }
}

/* very small phones */
@media (max-width: 380px){
  .community-chat-popup{
    left:5px!important;
    right:5px!important;
    height:min(70vh,590px)!important;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  .community-chat-compose{
    grid-template-columns:40px minmax(0,1fr)58px!important;
    gap:6px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
  .community-chat-attach-btn{
    width:40px!important;
    min-width:40px!important;
  }
  .community-chat-send-btn{
    width:58px!important;
    min-width:58px!important;
  }
}

/* =========================================================
   2026-06-16: Kanban phân loại khách hàng theo trạng thái
   ========================================================= */
.customer-kanban-card{
  margin:16px 0!important;
  overflow:hidden!important;
}
.customer-kanban-board{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(260px, 1fr)!important;
  gap:14px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:4px 2px 14px!important;
  scroll-snap-type:x proximity!important;
}
.customer-kanban-column{
  min-height:280px!important;
  max-height:640px!important;
  display:flex!important;
  flex-direction:column!important;
  background:#f8fafc!important;
  border:1px solid #e2e8f0!important;
  border-radius:20px!important;
  overflow:hidden!important;
  scroll-snap-align:start!important;
  box-shadow:0 10px 24px rgba(15,23,42,.05)!important;
}
.customer-kanban-column.drag-over{
  border-color:#14b8a6!important;
  box-shadow:0 0 0 4px rgba(20,184,166,.14),0 14px 30px rgba(15,23,42,.08)!important;
}
.customer-kanban-col-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:13px 14px!important;
  border-bottom:1px solid #e2e8f0!important;
  background:linear-gradient(135deg,#ffffff,#f1f5f9)!important;
}
.customer-kanban-col-head h4{
  margin:0!important;
  color:#0f172a!important;
  font-size:15px!important;
  font-weight:900!important;
}
.customer-kanban-col-head p{
  margin:3px 0 0!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:700!important;
}
.customer-kanban-col-head > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  background:#e6fffb!important;
  color:#0f766e!important;
  font-weight:900!important;
}
.customer-kanban-list{
  flex:1!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding:12px!important;
}
.customer-kanban-item{
  background:#fff!important;
  border:1px solid #e2e8f0!important;
  border-left:5px solid #14b8a6!important;
  border-radius:16px!important;
  padding:12px!important;
  margin-bottom:10px!important;
  box-shadow:0 10px 20px rgba(15,23,42,.06)!important;
  cursor:grab!important;
  transition:.15s ease!important;
}
.customer-kanban-item.can-move:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 16px 28px rgba(15,23,42,.10)!important;
}
.customer-kanban-item.locked{
  cursor:default!important;
  opacity:.86!important;
}
.customer-kanban-item.dragging{
  opacity:.55!important;
}
.customer-kanban-item-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-bottom:8px!important;
}
.customer-kanban-item-head b{
  color:#0f172a!important;
  font-size:14px!important;
  line-height:1.25!important;
}
.customer-kanban-item-head span{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.customer-kanban-meta{
  display:grid!important;
  gap:4px!important;
  color:#334155!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.customer-kanban-meta span{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.customer-kanban-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-top:10px!important;
}
.customer-kanban-actions .customer-quick-actions{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
.customer-kanban-move-select{
  max-width:142px!important;
  height:34px!important;
  border-radius:999px!important;
  border:1px solid #cbd5e1!important;
  background:#fff!important;
  color:#0f766e!important;
  font-size:12px!important;
  font-weight:800!important;
  padding:0 8px!important;
}
.customer-kanban-empty{
  padding:22px 10px!important;
  border-radius:14px!important;
  text-align:center!important;
  color:#94a3b8!important;
  border:1px dashed #cbd5e1!important;
  background:#fff!important;
  font-weight:800!important;
}
.customer-kanban-column.status-1 .customer-kanban-item{border-left-color:#38bdf8!important}
.customer-kanban-column.status-2 .customer-kanban-item{border-left-color:#22c55e!important}
.customer-kanban-column.status-3 .customer-kanban-item{border-left-color:#f59e0b!important}
.customer-kanban-column.status-4 .customer-kanban-item{border-left-color:#8b5cf6!important}
.customer-kanban-column.status-5 .customer-kanban-item{border-left-color:#06b6d4!important}
.customer-kanban-column.status-6 .customer-kanban-item{border-left-color:#ef4444!important}
.customer-kanban-column.status-7 .customer-kanban-item{border-left-color:#16a34a!important}
.customer-kanban-column.status-8 .customer-kanban-item{border-left-color:#64748b!important}
@media(max-width:900px){
  .customer-kanban-board{
    grid-auto-columns:minmax(82vw, 82vw)!important;
    gap:12px!important;
    padding-bottom:12px!important;
  }
  .customer-kanban-column{
    max-height:560px!important;
  }
  .customer-kanban-card .card-head{
    align-items:flex-start!important;
  }
  .customer-kanban-card .card-head p{
    font-size:12px!important;
    line-height:1.35!important;
  }
}

/* =========================================================
   2026-06-16: Tin chúc mừng / tin tức / thông báo mới đầu Tổng quan
   ========================================================= */
.dashboard-news-card{
  margin:14px 0 18px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#ffffff,#f8fafc)!important;
}
.dashboard-news-feed{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(320px,420px)!important;
  gap:14px!important;
  overflow-x:auto!important;
  padding:2px 2px 12px!important;
  scroll-snap-type:x proximity!important;
}
.dashboard-news-item{
  display:grid!important;
  grid-template-columns:132px minmax(0,1fr)!important;
  gap:12px!important;
  min-height:168px!important;
  padding:12px!important;
  border-radius:20px!important;
  background:#fff!important;
  border:1px solid #e2e8f0!important;
  box-shadow:0 12px 26px rgba(15,23,42,.07)!important;
  scroll-snap-align:start!important;
}
.dashboard-news-item.congrats{
  border-color:#fde68a!important;
  background:linear-gradient(135deg,#fff7ed,#ffffff)!important;
}
.dashboard-news-item.notice{
  border-color:#bfdbfe!important;
  background:linear-gradient(135deg,#eff6ff,#ffffff)!important;
}
.dashboard-news-item.video,
.dashboard-news-item.media{
  border-color:#99f6e4!important;
}
.dashboard-news-media{
  min-width:0!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#0f172a!important;
  display:grid!important;
  place-items:center!important;
}
.dashboard-news-media img,
.dashboard-news-media video,
.dashboard-news-media iframe{
  width:100%!important;
  height:100%!important;
  min-height:140px!important;
  object-fit:cover!important;
  border:0!important;
  display:block!important;
}
.dashboard-news-no-media{
  width:100%!important;
  height:100%!important;
  min-height:140px!important;
  display:grid!important;
  place-items:center!important;
  font-size:42px!important;
  background:linear-gradient(135deg,#e6fffb,#dbeafe)!important;
}
.dashboard-news-link-media{
  color:#fff!important;
  font-weight:900!important;
  text-decoration:none!important;
  padding:14px!important;
  text-align:center!important;
}
.dashboard-news-body{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
.dashboard-news-meta{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}
.dashboard-news-meta span{
  display:inline-flex!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#0f766e!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.dashboard-news-meta time{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.dashboard-news-body h4{
  margin:0!important;
  color:#0f172a!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:900!important;
}
.dashboard-news-body p{
  margin:0!important;
  color:#475569!important;
  font-size:13px!important;
  line-height:1.42!important;
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.dashboard-news-actions{
  margin-top:auto!important;
}
.dashboard-news-empty{
  padding:18px!important;
  border-radius:18px!important;
  background:#f8fafc!important;
  border:1px dashed #cbd5e1!important;
  color:#64748b!important;
}
.dashboard-news-empty b{
  display:block!important;
  color:#0f172a!important;
  margin-bottom:4px!important;
}
@media(max-width:900px){
  .dashboard-news-feed{
    grid-auto-columns:minmax(86vw,86vw)!important;
  }
  .dashboard-news-item{
    grid-template-columns:112px minmax(0,1fr)!important;
    min-height:154px!important;
  }
  .dashboard-news-media img,
  .dashboard-news-media video,
  .dashboard-news-media iframe,
  .dashboard-news-no-media{
    min-height:124px!important;
  }
}
@media(max-width:560px){
  .dashboard-news-card .card-head{
    align-items:flex-start!important;
  }
  .dashboard-news-feed{
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    grid-template-columns:1fr!important;
    max-height:560px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:4px!important;
  }
  .dashboard-news-item{
    grid-template-columns:1fr!important;
  }
  .dashboard-news-media img,
  .dashboard-news-media video,
  .dashboard-news-media iframe,
  .dashboard-news-no-media{
    min-height:190px!important;
    height:190px!important;
  }
}

/* =========================================================
   2026-06-16: Admin chủ động đăng New Feed trên Tổng quan
   ========================================================= */
.dashboard-news-card{
  border:1px solid rgba(20,184,166,.22)!important;
}
.dashboard-news-composer{
  padding:14px!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#ecfeff,#f8fafc)!important;
  border:1px solid #ccfbf1!important;
  margin-bottom:14px!important;
}
.news-composer-grid{
  display:grid!important;
  grid-template-columns:180px minmax(0,1fr) minmax(220px,.8fr)!important;
  gap:10px!important;
  margin-bottom:10px!important;
}
.news-composer-grid input,
.news-composer-grid select,
.dashboard-news-composer textarea{
  width:100%!important;
  border:1px solid #cbd5e1!important;
  border-radius:14px!important;
  padding:11px 12px!important;
  background:#fff!important;
  color:#0f172a!important;
  box-sizing:border-box!important;
  font-weight:700!important;
}
.dashboard-news-composer textarea{
  min-height:86px!important;
  resize:vertical!important;
  line-height:1.45!important;
}
.news-composer-actions{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  margin-top:10px!important;
}
.news-feed-file-hidden{
  display:none!important;
}
.news-feed-media-preview.hidden{
  display:none!important;
}
.news-feed-media-preview{
  margin-top:10px!important;
}
.news-feed-preview-box{
  display:grid!important;
  grid-template-columns:120px minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
  padding:10px!important;
  background:#fff!important;
  border:1px solid #e2e8f0!important;
  border-radius:16px!important;
}
.news-feed-preview-box img,
.news-feed-preview-box video{
  width:120px!important;
  height:78px!important;
  object-fit:cover!important;
  border-radius:12px!important;
  background:#0f172a!important;
}
.news-feed-preview-box b{
  display:block!important;
  color:#0f172a!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.news-feed-preview-box span{
  display:block!important;
  color:#64748b!important;
  font-size:12px!important;
  margin-top:3px!important;
}
.news-feed-processing{
  padding:12px!important;
  background:#fff!important;
  border-radius:14px!important;
  border:1px dashed #14b8a6!important;
  color:#0f766e!important;
  font-weight:900!important;
}
.dashboard-news-item.pinned{
  border-color:#facc15!important;
  box-shadow:0 0 0 3px rgba(250,204,21,.18), 0 14px 30px rgba(15,23,42,.08)!important;
}
.dashboard-news-author{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:700!important;
}
.dashboard-news-author b{
  color:#0f766e!important;
}
.dashboard-news-actions{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
@media(max-width:900px){
  .news-composer-grid{
    grid-template-columns:1fr!important;
  }
  .news-feed-preview-box{
    grid-template-columns:92px minmax(0,1fr)!important;
  }
  .news-feed-preview-box .btn{
    grid-column:1/-1!important;
  }
  .news-feed-preview-box img,
  .news-feed-preview-box video{
    width:92px!important;
    height:68px!important;
  }
}

/* 2026-06-16: New Feed upload file dung lượng cao */
.dashboard-news-file-card,
.news-feed-file-preview-icon{
  width:100%!important;
  height:100%!important;
  min-height:140px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  background:linear-gradient(135deg,#e0f2fe,#ecfeff)!important;
  color:#0f766e!important;
  text-align:center!important;
  padding:14px!important;
  box-sizing:border-box!important;
}
.dashboard-news-file-card .file-icon,
.news-feed-file-preview-icon{
  font-size:38px!important;
  font-weight:900!important;
}
.dashboard-news-file-card b{
  max-width:100%!important;
  font-size:13px!important;
  color:#0f172a!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.dashboard-news-file-card span{
  font-size:12px!important;
  color:#64748b!important;
  font-weight:800!important;
}
.news-feed-preview-box small{
  display:block!important;
  margin-top:3px!important;
  color:#0f766e!important;
  font-size:11px!important;
  font-weight:800!important;
}
.news-feed-file-preview-icon{
  width:120px!important;
  height:78px!important;
  min-height:78px!important;
  border-radius:12px!important;
}

/* FIX 2026-06-18: New Feed chống lỗi quota khi đăng ảnh */
.news-feed-preview-box small{
  color:#0f766e!important;
  font-weight:900!important;
}

/* FIX 2026-06-18: nút dọn dữ liệu nặng */
button[onclick="cleanupHeavyCrmData()"]{
  background:#f0fdfa!important;
  color:#0f766e!important;
  border-color:#99f6e4!important;
}

/* =========================================================
   2026-06-18: Căn chỉnh vị trí avatar nhân viên
   ========================================================= */
.avatar-uploader{
  display:grid!important;
  gap:10px!important;
}
.avatar-upload-preview{
  width:160px!important;
  height:160px!important;
  border-radius:50%!important;
  overflow:hidden!important;
  margin:4px auto 8px!important;
  border:4px solid #ccfbf1!important;
  background:#f8fafc!important;
  display:grid!important;
  place-items:center!important;
  box-shadow:0 10px 28px rgba(15,23,42,.12)!important;
}
.avatar-upload-preview span{
  text-align:center!important;
  padding:18px!important;
  color:#0f766e!important;
  font-weight:800!important;
  font-size:13px!important;
}
.avatar-upload-preview img.avatar-crop-result,
.avatar-upload-preview img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.avatar-adjust-panel{
  padding:12px!important;
  border:1px solid #ccfbf1!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#ecfeff,#f8fafc)!important;
}
.avatar-adjust-panel.hidden{
  display:none!important;
}
.avatar-adjust-title{
  font-weight:900!important;
  color:#0f766e!important;
  margin-bottom:8px!important;
}
.avatar-adjust-controls{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  margin-bottom:10px!important;
}
.avatar-adjust-controls .btn{
  min-width:42px!important;
  justify-content:center!important;
}
.avatar-zoom-row{
  display:grid!important;
  gap:6px!important;
  color:#334155!important;
  font-size:13px!important;
  font-weight:800!important;
}
.avatar-zoom-row input[type="range"]{
  width:100%!important;
  accent-color:#0f766e!important;
}
.avatar-adjust-panel small{
  display:block!important;
  color:#64748b!important;
  margin-top:8px!important;
  line-height:1.35!important;
}
.avatar-photo-crop img{
  object-fit:cover!important;
}

/* =========================================================
   2026-06-18: New Feed reactions/comments + workflow data + Ads connector
   ========================================================= */
.news-social-box{
  display:grid!important;
  gap:8px!important;
  margin-top:4px!important;
  padding-top:8px!important;
  border-top:1px dashed #e2e8f0!important;
}
.news-reactions{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
.news-react-btn{
  border:1px solid #e2e8f0!important;
  background:#fff!important;
  border-radius:999px!important;
  padding:5px 8px!important;
  display:inline-flex!important;
  gap:4px!important;
  align-items:center!important;
  cursor:pointer!important;
  font-weight:900!important;
}
.news-react-btn.active{
  background:#e6fffb!important;
  border-color:#14b8a6!important;
  color:#0f766e!important;
}
.news-comment-list{
  display:grid!important;
  gap:5px!important;
}
.news-comment{
  position:relative!important;
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  gap:6px!important;
  align-items:start!important;
  padding:6px 8px!important;
  background:#f8fafc!important;
  border-radius:10px!important;
  font-size:12px!important;
}
.news-comment b{color:#0f766e!important;white-space:nowrap!important}
.news-comment span{color:#334155!important}
.news-comment button{
  border:0!important;background:transparent!important;color:#ef4444!important;font-weight:900!important;cursor:pointer!important;
}
.news-comment-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px!important;
}
.news-comment-form input{
  border:1px solid #cbd5e1!important;
  border-radius:999px!important;
  padding:8px 10px!important;
  font-size:12px!important;
}
.customer-workflow-card,.ads-connector-card{
  margin:14px 0!important;
  border:1px solid #ccfbf1!important;
  background:linear-gradient(180deg,#ffffff,#f0fdfa)!important;
}
.workflow-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.workflow-grid label{
  display:grid!important;
  gap:6px!important;
  color:#334155!important;
  font-weight:900!important;
  font-size:12px!important;
}
.workflow-grid input,.workflow-grid select{
  width:100%!important;
  border:1px solid #cbd5e1!important;
  border-radius:14px!important;
  padding:10px 11px!important;
  background:#fff!important;
  color:#0f172a!important;
  box-sizing:border-box!important;
}
.workflow-actions{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-top:12px!important;
}
.workflow-summary{
  margin-top:10px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  background:#fff!important;
  border:1px dashed #99f6e4!important;
  color:#0f766e!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.ads-webhook-box{
  display:grid!important;
  gap:7px!important;
  margin-top:10px!important;
  padding:10px!important;
  border-radius:14px!important;
  background:#fff!important;
  border:1px solid #e2e8f0!important;
}
.ads-webhook-box code{
  display:block!important;
  margin-top:3px!important;
  padding:7px 9px!important;
  border-radius:10px!important;
  background:#0f172a!important;
  color:#e6fffb!important;
  overflow:auto!important;
  font-size:12px!important;
}
@media(max-width:900px){
  .workflow-grid{grid-template-columns:1fr!important}
  .news-comment{grid-template-columns:1fr auto!important}
  .news-comment span{grid-column:1/-1!important}
}

/* =========================================================
   2026-06-18: Tách riêng Automation và Kết nối API Ads thành menu Admin
   ========================================================= */
.admin-page .admin-page-hero{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:18px 20px!important;
  margin-bottom:16px!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,#0f766e,#14b8a6)!important;
  color:#fff!important;
  box-shadow:0 18px 42px rgba(15,118,110,.24)!important;
}
.admin-page .admin-page-hero h2{
  margin:0 0 6px!important;
  color:#fff!important;
  font-size:26px!important;
  font-weight:900!important;
}
.admin-page .admin-page-hero p{
  margin:0!important;
  color:rgba(255,255,255,.88)!important;
  line-height:1.45!important;
}
.admin-page .admin-page-hero .mini-badge{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  white-space:nowrap!important;
}
.workflow-guide-card{
  margin-top:14px!important;
}
.workflow-guide-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.workflow-guide-grid>div{
  padding:14px!important;
  border-radius:16px!important;
  background:#f8fafc!important;
  border:1px solid #e2e8f0!important;
}
.workflow-guide-grid b{
  display:block!important;
  color:#0f766e!important;
  margin-bottom:6px!important;
}
.workflow-guide-grid span{
  color:#475569!important;
  font-size:13px!important;
  line-height:1.4!important;
}
.ads-setup-steps{
  display:grid!important;
  gap:10px!important;
  color:#334155!important;
  line-height:1.5!important;
}
.ads-setup-steps p{
  margin:0!important;
  padding:12px!important;
  border-radius:14px!important;
  background:#f8fafc!important;
  border:1px solid #e2e8f0!important;
}
.ads-setup-steps code{
  padding:3px 6px!important;
  border-radius:7px!important;
  background:#0f172a!important;
  color:#e6fffb!important;
}
@media(max-width:900px){
  .admin-page .admin-page-hero{
    flex-direction:column!important;
    padding:16px!important;
  }
  .admin-page .admin-page-hero h2{
    font-size:22px!important;
  }
  .workflow-guide-grid{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   2026-06-18: Bảng cấu hình Automation theo trạng thái + chọn sale phân bổ
   ========================================================= */
.workflow-main-settings{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  margin-bottom:14px!important;
}
.workflow-config-title{
  margin:16px 0 10px!important;
}
.workflow-config-title h4{
  margin:0 0 4px!important;
  color:#0f766e!important;
  font-size:16px!important;
  font-weight:900!important;
}
.workflow-config-title p{
  margin:0!important;
  color:#64748b!important;
  font-size:13px!important;
  line-height:1.4!important;
}
.workflow-table-wrap{
  overflow:auto!important;
  border:1px solid #e2e8f0!important;
  border-radius:18px!important;
  background:#fff!important;
}
.workflow-status-table{
  width:100%!important;
  min-width:980px!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.workflow-status-table th{
  position:sticky!important;
  top:0!important;
  z-index:1!important;
  background:#0f766e!important;
  color:#fff!important;
  padding:10px!important;
  font-size:12px!important;
  text-align:left!important;
}
.workflow-status-table td{
  padding:10px!important;
  border-bottom:1px solid #e2e8f0!important;
  vertical-align:top!important;
  font-size:13px!important;
}
.workflow-status-table tr:nth-child(even) td{
  background:#f8fafc!important;
}
.workflow-status-table input[type="number"]{
  width:82px!important;
  border:1px solid #cbd5e1!important;
  border-radius:10px!important;
  padding:8px!important;
}
.workflow-status-table textarea{
  width:100%!important;
  min-height:58px!important;
  border:1px solid #cbd5e1!important;
  border-radius:12px!important;
  padding:8px!important;
  resize:vertical!important;
  line-height:1.35!important;
  box-sizing:border-box!important;
}
.workflow-order{
  display:inline-flex!important;
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  align-items:center!important;
  justify-content:center!important;
  background:#e6fffb!important;
  color:#0f766e!important;
  font-weight:900!important;
}
.workflow-terminal-check{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  font-weight:800!important;
  color:#334155!important;
  white-space:nowrap!important;
}
.workflow-sale-actions{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-bottom:10px!important;
}
.workflow-sale-select-board{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;
  gap:10px!important;
}
.workflow-sale-card{
  display:grid!important;
  grid-template-columns:auto 46px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  padding:10px!important;
  border:1px solid #e2e8f0!important;
  border-radius:16px!important;
  background:#fff!important;
  cursor:pointer!important;
  transition:.15s ease!important;
}
.workflow-sale-card.selected{
  border-color:#14b8a6!important;
  background:#f0fdfa!important;
  box-shadow:0 0 0 3px rgba(20,184,166,.12)!important;
}
.workflow-sale-avatar{
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  background:#ccfbf1!important;
  color:#0f766e!important;
  font-weight:900!important;
}
.workflow-sale-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.workflow-sale-card b{
  display:block!important;
  color:#0f172a!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.workflow-sale-card small{
  color:#64748b!important;
  display:block!important;
  margin-top:2px!important;
}
.workflow-empty{
  padding:14px!important;
  border:1px dashed #cbd5e1!important;
  border-radius:14px!important;
  color:#64748b!important;
  background:#fff!important;
}
@media(max-width:900px){
  .workflow-main-settings{
    grid-template-columns:1fr!important;
  }
  .workflow-sale-select-board{
    grid-template-columns:1fr!important;
  }
}

/* FIX 2026-06-18: giữ avatar không bị mất sau upload */
.avatar-uploader[data-avatar-editor] .upload-preview.avatar-upload-preview{
  position:relative!important;
}
.avatar-uploader[data-avatar-editor] .upload-preview.avatar-upload-preview::after{
  content:'Avatar preview'!important;
  position:absolute!important;
  left:50%!important;
  bottom:6px!important;
  transform:translateX(-50%)!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  background:rgba(15,118,110,.86)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
  pointer-events:none!important;
}

/* FIX 2026-06-19: AI fallback không báo lỗi OpenAI liên tục */
#aiStatus{
  line-height:1.45!important;
}

/* FIX 2026-06-19: OpenAI strict mode - không tự fallback Gemini */

/* FIX 2026-06-19: Gemini test thành công thì tạo nội dung tự động chạy bằng Gemini */

/* FIX 2026-06-19: Gemini chỉ trả nội dung tiếng Việt hoàn chỉnh, không trả checklist/prompt */

/* FIX 2026-06-19: Gemini 401 auth - dùng x-goog-api-key header và trim key */

/* FIX 2026-06-19: AI content final clean - không placeholder, không markdown, không cụt câu */

/* FIX 2026-06-19: AI output clean final - chặn bài cụt, placeholder, markdown */

/* FIX FINAL 2026-06-19: Tạo tin nhắn AI không dùng raw API output */

/* FIX FINAL 2026-06-19 V2: Tạo tin nhắn AI dùng bộ soạn CRM, không dùng raw API */

/* =========================================================
   2026-06-19: Thay 4 ô tổng quan cũ bằng dashboard thao tác nhanh
   ========================================================= */
.dashboard-action-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}
.dashboard-action-card{
  min-height:260px!important;
}
.dashboard-action-list{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
.dash-action-item{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:12px 14px!important;
  border:1px solid #e5e7eb!important;
  border-radius:16px!important;
  background:#fff!important;
}
.dash-action-main{
  min-width:0!important;
}
.dash-action-main b{
  display:block!important;
  color:#1f2937!important;
  font-weight:900!important;
  line-height:1.25!important;
}
.dash-action-main span{
  display:block!important;
  margin-top:5px!important;
  color:#6b7280!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.dash-action-btns{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
.dash-action-empty{
  min-height:116px!important;
  border:1px dashed #cbd5e1!important;
  background:#f8fafc!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:10px!important;
  padding:16px!important;
  color:#64748b!important;
  font-weight:700!important;
}
@media(max-width:900px){
  .dashboard-action-grid{grid-template-columns:1fr!important;}
  .dash-action-item{align-items:flex-start!important;flex-direction:column!important;}
  .dash-action-btns{justify-content:flex-start!important;}
}

/* =========================================================
   2026-06-19: Báo cáo gặp khách + Check-in + Chấm công In/Out
   ========================================================= */
.meeting-form-grid textarea,
#meetingNote{
  min-height:100px!important;
}
.inline-field{
  display:flex!important;
  gap:8px!important;
  align-items:center!important;
}
.inline-field input{
  flex:1!important;
}
.attendance-actions{
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin-top:14px!important;
}
.attendance-status,
.attendance-summary{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  gap:10px!important;
}
.compact-toolbar{
  gap:8px!important;
  flex-wrap:wrap!important;
}
#meetingReportsTable table,
#attendanceTable table{
  min-width:1080px!important;
}
@media(max-width:900px){
  .inline-field{flex-direction:column!important;align-items:stretch!important;}
}

/* =========================================================
   2026-06-19: Tối ưu giao diện Báo cáo gặp khách / Check-in
   ========================================================= */
.meeting-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr)!important;
  gap:18px!important;
  align-items:start!important;
}
.meeting-entry-card,
.meeting-filter-card,
.meeting-table-card{
  border-radius:24px!important;
  box-shadow:0 10px 30px rgba(15,23,42,.04)!important;
}
.meeting-hero{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:14px!important;
}
.meeting-hero h3{
  margin:0 0 6px!important;
}
.meeting-hero-actions{
  display:flex!important;
  gap:8px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}
.soft-tag{
  display:inline-flex!important;
  align-items:center!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:rgba(14,116,144,.08)!important;
  color:#0f766e!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}
.meeting-section{
  border:1px solid #e8eef2!important;
  background:linear-gradient(180deg,#fbfefe 0%, #ffffff 100%)!important;
  border-radius:18px!important;
  padding:16px!important;
  margin-top:12px!important;
}
.meeting-section-title{
  font-size:15px!important;
  font-weight:900!important;
  color:#1f2937!important;
  margin-bottom:12px!important;
}
.meeting-form-grid.improved{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px 14px!important;
}
.meeting-form-grid.improved label,
.meeting-filter-grid label{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  font-weight:800!important;
  color:#243041!important;
}
.meeting-form-grid.improved label input,
.meeting-form-grid.improved label select,
.meeting-filter-grid label input,
.meeting-filter-grid label select,
.meeting-location-block input,
.meeting-note-block textarea{
  width:100%!important;
}
.meeting-location-block,
.meeting-note-block{
  display:block!important;
  margin-top:12px!important;
  font-weight:800!important;
  color:#243041!important;
}
.meeting-location-block > .inline-field,
.meeting-note-block > textarea{
  margin-top:8px!important;
}
.meeting-location-field{
  background:#fff!important;
  padding:8px!important;
  border:1px solid #dbe3ea!important;
  border-radius:16px!important;
}
.meeting-location-field input{
  border:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
.meeting-location-field .btn{
  white-space:nowrap!important;
}
.meeting-note-block textarea{
  min-height:130px!important;
  border-radius:18px!important;
}
.meeting-toolbar{
  margin-top:16px!important;
  padding-top:10px!important;
  border-top:1px dashed #dbe3ea!important;
  gap:10px!important;
}
.meeting-filter-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px 14px!important;
  margin-top:8px!important;
}
.meeting-filter-grid .full{
  grid-column:1 / -1!important;
}
.meeting-summary-grid{
  margin-top:14px!important;
}
.meeting-summary-grid .summary-box{
  min-height:100px!important;
  border-radius:18px!important;
  padding:16px!important;
  background:#fff!important;
  border:1px solid #e6edf3!important;
}
.meeting-summary-grid .summary-box span{
  color:#64748b!important;
  font-weight:700!important;
}
.meeting-summary-grid .summary-box strong{
  margin-top:8px!important;
  display:block!important;
  font-size:34px!important;
  line-height:1!important;
}
#meetingReportsTable table{
  min-width:1180px!important;
}
#meetingReportsTable td,
#meetingReportsTable th{
  vertical-align:top!important;
}
#meetingReportsTable tbody tr:hover{
  background:#f8fbfc!important;
}
@media (max-width: 1180px){
  .meeting-layout{
    grid-template-columns:1fr!important;
  }
}
@media (max-width: 900px){
  .meeting-form-grid.improved,
  .meeting-filter-grid{
    grid-template-columns:1fr!important;
  }
  .meeting-hero{
    flex-direction:column!important;
  }
  .meeting-toolbar{
    flex-direction:column!important;
    align-items:stretch!important;
  }
}

/* 2026-06-19: Nút xem Google Maps nhanh sau khi check-in */
.meeting-location-field #meetingMapBtn{
  white-space:nowrap!important;
}
.meeting-location-field #meetingMapBtn.hidden{
  display:none!important;
}
@media(max-width:700px){
  .meeting-location-field{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .meeting-location-field .btn{
    width:100%!important;
  }
}

/* 2026-06-19: Lưu mật khẩu trình duyệt + đổi mật khẩu cá nhân */
.login-save-hint{
  margin-top:10px!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.35!important;
}
#changePasswordBtn{
  white-space:nowrap!important;
}
.password-change-box{
  display:grid!important;
  gap:12px!important;
}
.password-change-box .hint-box{
  margin-bottom:2px!important;
}


/* 2026-06-19: Tùy biến thương hiệu CRM */
body.crm-themed{
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--crm-panel-tint, #ecfeff) 60%, white 40%) 0%, transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--crm-page-bg, #f5f7fb) 88%, white 12%) 0%, var(--crm-page-bg, #f5f7fb) 100%)!important;
}
.sidebar{
  background:
    linear-gradient(180deg, var(--crm-sidebar-from, #0f766e) 0%, var(--crm-sidebar-to, #164e63) 100%)!important;
}
.brand{
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(10px)!important;
}
.brand h1,.brand p{
  color:#fff!important;
}
.brand-logo{
  background:rgba(255,255,255,.96)!important;
  color:var(--crm-sidebar-from, #0f766e)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.12)!important;
}
.topbar,.card,.modal-box,.login-card{
  box-shadow:0 14px 36px rgba(15,23,42,.07)!important;
}
.topbar{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--crm-panel-tint, #ecfeff) 54%, white 46%) 0%, #ffffff 100%)!important;
}
.branding-config-box{display:grid;gap:12px!important}
.branding-preview-row{margin-top:4px!important}
.branding-preview{
  display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;color:#fff;
  box-shadow:0 12px 24px rgba(15,23,42,.12);
}
.branding-preview-logo{
  min-width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.95);display:grid;place-items:center;
  color:#0f766e;font-weight:900;font-size:18px;
}
.login-card{
  background:linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--crm-panel-tint, #ecfeff) 35%, white 65%) 100%)!important;
}


/* =========================================================
   2026-06-20: Danh mục Công việc + Quản lý bán hàng
   ========================================================= */
.crm-work-hero{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:16px!important;
  padding:20px!important;
  margin-bottom:18px!important;
  border:1px solid #dbeafe!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,#ecfeff 0%,#ffffff 55%,#eff6ff 100%)!important;
  box-shadow:var(--shadow)!important;
}
.crm-work-hero h2{margin:0 0 6px!important;font-size:26px!important}
.crm-work-hero p{margin:0!important;color:#64748b!important;line-height:1.45!important}
.crm-work-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important}
.task-grid{align-items:start!important}
.task-form-card textarea,#taskDescription{min-height:120px!important}
.inline-check{display:flex!important;align-items:center!important;gap:10px!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:12px!important;padding:10px!important}
.inline-check input{width:auto!important}
.task-stats,.sales-summary-grid{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;gap:10px!important;
}
.task-tabs,.sales-tabs{
  display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:14px!important;
}
.task-tab,.sales-tab{
  border:1px solid #dbeafe!important;background:#fff!important;color:#0f766e!important;border-radius:999px!important;padding:10px 14px!important;font-weight:800!important;cursor:pointer!important;
}
.task-tab.active,.sales-tab.active{
  background:#0f766e!important;color:#fff!important;border-color:#0f766e!important;
}
.tasks-list{display:flex!important;flex-direction:column!important;gap:12px!important}
.task-card{
  display:grid!important;grid-template-columns:minmax(0,1fr) 330px!important;gap:14px!important;
  padding:16px!important;border:1px solid #e5e7eb!important;border-radius:18px!important;background:#fff!important;
}
.task-card.overdue{border-left:6px solid #dc2626!important}
.task-card.today{border-left:6px solid #f59e0b!important}
.task-card.upcoming{border-left:6px solid #2563eb!important}
.task-title-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.task-title-row b{font-size:16px!important;color:#111827!important}
.task-main p{margin:8px 0!important;color:#475569!important;line-height:1.45!important}
.task-meta{font-size:13px!important;color:#64748b!important}
.task-update{display:grid!important;grid-template-columns:1fr 80px!important;gap:8px!important;align-content:start!important}
.task-update .btn{justify-content:center!important}
.task-priority{font-size:12px!important;padding:5px 8px!important;border-radius:999px!important;background:#ecfeff!important;color:#0f766e!important;font-weight:900!important}
.task-priority.cao,.task-priority.khẩn.cấp{background:#fff7ed!important;color:#c2410c!important}
.sales-panel.hidden{display:none!important}
.sales-panel{margin-top:16px!important}
.sales-summary-grid .summary-box em{display:block!important;color:#64748b!important;font-style:normal!important;margin-top:6px!important}
.task-mini{border:1px solid #e5e7eb!important;border-radius:14px!important;padding:12px!important;background:#fff!important}
.task-mini b{display:block!important}.task-mini span{color:#64748b!important;font-size:13px!important}
.quote-payment-preview pre{
  white-space:pre-wrap!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:14px!important;padding:12px!important;max-height:280px!important;overflow:auto!important;
}
#salesInventoryTable table,#salesContractsTable table,#salesQuotesTable table{min-width:980px!important}
@media(max-width:1000px){
  .crm-work-hero{flex-direction:column!important}
  .task-card{grid-template-columns:1fr!important}
  .task-update{grid-template-columns:1fr 90px!important}
}


/* === 2026-06-26: nâng cấp Công việc + Quản lý bán hàng === */
.task-form-card .form-grid,.quote-form-card .form-grid,.task-filter-card .form-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px 16px!important;
}
.task-form-card label,.quote-form-card label,.task-filter-card label{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  align-items:stretch!important;
  font-weight:800!important;
  color:#1f2937!important;
}
.task-form-card label.full,.quote-form-card label.full,.task-filter-card label.full,.payment-builder.full{grid-column:1 / -1!important}
.task-form-card input,.task-form-card select,.task-form-card textarea,
.quote-form-card input,.quote-form-card select,.quote-form-card textarea,
.task-filter-card input,.task-filter-card select{
  width:100%!important;
  min-width:0!important;
  border-radius:14px!important;
  border:1px solid #d9e4ea!important;
  background:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.task-form-card textarea,.quote-form-card textarea{min-height:120px!important}
.task-action-bar{
  display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:16px!important;
  padding:14px 16px!important;border:1px solid #e2e8f0!important;border-radius:18px!important;background:#fbfdff!important;
}
.inline-check.split{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
.check-row{display:flex!important;align-items:center!important;gap:8px!important;font-weight:700!important;color:#334155!important}
.check-row input{width:auto!important}
.task-filter-card .task-calendar-box{margin-top:14px!important;padding:14px!important;border:1px solid #e2e8f0!important;border-radius:16px!important;background:#fbfdff!important}
.no-margin h4{margin:0!important}
.task-calendar-list{display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:10px!important}
.task-calendar-item{padding:12px 14px!important;border:1px solid #e5e7eb!important;border-radius:14px!important;background:#fff!important}
.task-calendar-item b{display:block!important;margin-bottom:5px!important;color:#111827!important}
.task-calendar-item span,.task-calendar-item small{display:block!important;line-height:1.5!important;color:#64748b!important}
.task-calendar-item em{display:inline-block!important;margin-top:8px!important;padding:5px 9px!important;border-radius:999px!important;font-style:normal!important;font-weight:800!important;font-size:12px!important}
.rate.good,.task-rate.good{background:#dcfce7!important;color:#166534!important}
.rate.warn,.task-rate.warn{background:#fef3c7!important;color:#92400e!important}
.rate.late,.task-rate.late{background:#fee2e2!important;color:#b91c1c!important}
.rate.done,.task-rate.done{background:#dbeafe!important;color:#1d4ed8!important}
.task-main{display:flex!important;flex-direction:column!important;gap:10px!important}
.task-note-line{padding:10px 12px!important;border-radius:12px!important;background:#f8fafc!important;border:1px dashed #cbd5e1!important;color:#475569!important;line-height:1.5!important}
.task-progress-wrap{display:flex!important;flex-direction:column!important;gap:8px!important}
.task-progress-bar{position:relative!important;height:12px!important;background:#e5e7eb!important;border-radius:999px!important;overflow:hidden!important}
.task-progress-bar span{display:block!important;height:100%!important;background:linear-gradient(90deg,#14b8a6,#2563eb)!important;border-radius:999px!important}
.task-progress-meta{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;font-size:13px!important}
.task-rate{display:inline-flex!important;align-items:center!important;padding:5px 9px!important;border-radius:999px!important;font-weight:800!important}
.task-update{display:flex!important;flex-direction:column!important;gap:8px!important}
.task-priority.khẩn-cấp,.task-priority.khẩn,.task-priority.khan-cap{background:#fee2e2!important;color:#b91c1c!important}
.pulse-highlight{animation:pulseTask 1.6s ease}
@keyframes pulseTask{0%{box-shadow:0 0 0 0 rgba(20,184,166,.45)}100%{box-shadow:0 0 0 18px rgba(20,184,166,0)}}
.sales-tabs{margin-bottom:14px!important}
.quote-form-card .soft-tag{white-space:nowrap!important}
.quote-form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 16px!important}
.quote-form-grid .full{grid-column:1 / -1!important}
.upload-row{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;padding:12px!important;border-radius:14px!important;background:#f8fafc!important;border:1px dashed #cbd5e1!important}
.upload-row input[type=file]{display:none!important}
.tiny{font-size:12px!important}
.payment-builder{padding:14px!important;border-radius:18px!important;background:#f8fafc!important;border:1px solid #d9e4ea!important}
.payment-builder h4{margin:0!important}
.payment-builder-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 14px!important;margin-top:12px!important}
.payment-builder-grid .full{grid-column:1 / -1!important}
.preset-buttons{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.toolbar.slim{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;margin-top:12px!important}
.quote-payment-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
.quote-payment-preview pre{max-height:220px!important}
#quotePaymentRowsTable{overflow:auto!important}
#quotePaymentRowsTable table{min-width:720px!important}
.quote-preview-card .hint-box{margin-bottom:12px!important}
.task-grid{align-items:start!important}
@media(max-width:1100px){
  .task-form-card .form-grid,.quote-form-card .form-grid,.task-filter-card .form-grid,.payment-builder-grid,.quote-payment-summary{grid-template-columns:1fr!important}
  .inline-check.split{grid-template-columns:1fr!important}
}


/* === Calendar tasks view === */
.section-sub{margin:6px 0 0!important;color:#64748b!important;font-size:14px!important;font-weight:600!important}
.calendar-toolbar-top,.calendar-toolbar-line{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important}
.calendar-toolbar-line{margin:10px 0 14px!important}
.calendar-period-label{font-size:18px!important;font-weight:900!important;color:#0f172a!important}
.calendar-mode-switch{display:flex!important;align-items:center!important;gap:8px!important}
.task-cal-mode{border:1px solid #cbd5e1!important;background:#fff!important;color:#0f766e!important;padding:10px 16px!important;border-radius:999px!important;font-weight:800!important;cursor:pointer!important}
.task-cal-mode.active{background:linear-gradient(135deg,#0f766e,#14b8a6)!important;color:#fff!important;border-color:#0f766e!important;box-shadow:0 12px 26px rgba(15,118,110,.18)!important}
.task-calendar-board{display:flex!important;flex-direction:column!important;gap:14px!important}
.task-cal-week-header,.task-cal-month-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:10px!important}
.task-cal-week-header div{padding:10px 12px!important;border-radius:12px!important;background:#f0fdfa!important;color:#0f766e!important;font-weight:900!important;text-align:center!important}
.task-cal-day{min-height:180px!important;border:1px solid #dbe4ea!important;border-radius:18px!important;background:#fff!important;padding:12px!important;display:flex!important;flex-direction:column!important;gap:8px!important;box-shadow:0 8px 18px rgba(15,23,42,.04)!important}
.task-cal-day.outside{opacity:.58!important;background:#f8fafc!important}
.task-cal-day.today{border:2px solid #14b8a6!important;box-shadow:0 0 0 4px rgba(20,184,166,.12)!important}
.task-cal-day-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding-bottom:6px!important;border-bottom:1px dashed #d9e4ea!important}
.task-cal-date-num{font-size:20px!important;font-weight:900!important;color:#0f172a!important}
.task-cal-date-full{font-size:12px!important;color:#64748b!important;font-weight:700!important}
.task-cal-count{font-size:12px!important;padding:4px 8px!important;border-radius:999px!important;background:#ecfeff!important;color:#0f766e!important;font-weight:800!important}
.task-cal-items{display:flex!important;flex-direction:column!important;gap:8px!important;overflow:auto!important;max-height:360px!important;padding-right:2px!important}
.task-chip{display:flex!important;flex-direction:column!important;gap:5px!important;padding:9px 10px!important;border-radius:12px!important;border-left:4px solid #94a3b8!important;background:#f8fafc!important;cursor:pointer!important;transition:transform .12s ease, box-shadow .12s ease!important}
.task-chip:hover{transform:translateY(-1px)!important;box-shadow:0 8px 16px rgba(15,23,42,.08)!important}
.task-chip b{font-size:13px!important;line-height:1.4!important;color:#0f172a!important}
.task-chip span,.task-chip small{font-size:12px!important;color:#64748b!important;line-height:1.4!important}
.task-chip.overdue{border-left-color:#ef4444!important;background:#fff1f2!important}
.task-chip.today{border-left-color:#14b8a6!important;background:#f0fdfa!important}
.task-chip.upcoming{border-left-color:#3b82f6!important;background:#eff6ff!important}
.task-chip.done{border-left-color:#22c55e!important;background:#f0fdf4!important}
.task-chip .chip-meta{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.task-chip .progress-badge{font-weight:800!important;color:#0f766e!important}
.task-cal-more{font-size:12px!important;color:#0f766e!important;font-weight:800!important;padding:6px 8px!important;border-radius:10px!important;background:#ecfeff!important;text-align:center!important}
.task-cal-empty{padding:20px!important;border:1px dashed #cbd5e1!important;border-radius:16px!important;text-align:center!important;color:#64748b!important;background:#fbfdff!important}
.task-cal-week-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:10px!important}
.task-cal-week-col{border:1px solid #dbe4ea!important;border-radius:16px!important;background:#fff!important;min-height:280px!important;padding:12px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
.task-cal-week-col.today{border:2px solid #14b8a6!important;box-shadow:0 0 0 4px rgba(20,184,166,.12)!important}
.task-cal-week-col h4{margin:0!important;font-size:15px!important;color:#0f172a!important}
.task-cal-week-col .weekday-note{font-size:12px!important;color:#64748b!important;font-weight:700!important}
.task-cal-week-col .task-cal-items{max-height:none!important;flex:1!important}
.task-calendar-panel-card .card-head h3{margin-bottom:0!important}
@media(max-width:1200px){
  .task-cal-week-header,.task-cal-month-grid,.task-cal-week-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px){
  .calendar-toolbar-top,.calendar-toolbar-line{align-items:stretch!important}
  .calendar-toolbar-top > *,.calendar-toolbar-line > *{width:100%!important}
  .calendar-mode-switch{justify-content:flex-start!important}
  .task-cal-week-header,.task-cal-month-grid,.task-cal-week-grid{grid-template-columns:1fr!important}
  .task-cal-day,.task-cal-week-col{min-height:auto!important}
}


/* 2026-06-26: nâng cấp tiến độ thanh toán - sửa tỷ lệ/ngày, chia đều 100%, chiết khấu thanh toán nhanh */
.fast-payment-box{
  padding:14px!important;
  border:1px solid #dbeafe!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#eff6ff 0%,#ecfeff 100%)!important;
}
.fast-payment-title{
  font-weight:900!important;
  color:#0f766e!important;
  margin-bottom:12px!important;
}
.fast-payment-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.payment-toolbar{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.payment-edit-table input{
  width:100%!important;
  min-width:90px!important;
  border:1px solid #d9e4ea!important;
  border-radius:10px!important;
  padding:9px 10px!important;
  background:#fff!important;
}
.payment-edit-table td,.payment-edit-table th{
  vertical-align:middle!important;
}
.payment-edit-table th{
  background:#ecfeff!important;
  color:#0f766e!important;
}
.quote-payment-summary{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.quote-payment-summary .summary-box.ok{border-color:#bbf7d0!important;background:#f0fdf4!important;}
.quote-payment-summary .summary-box.warn{border-color:#fde68a!important;background:#fffbeb!important;}
.quote-payment-summary .summary-box.over{border-color:#fecaca!important;background:#fef2f2!important;}
.quote-payment-summary .summary-box em{
  display:block!important;
  margin-top:6px!important;
  font-style:normal!important;
  color:#64748b!important;
  font-weight:700!important;
}
@media(max-width:900px){
  .fast-payment-grid,.quote-payment-summary{grid-template-columns:1fr!important;}
}


/* 2026-06-26: công thức ưu đãi + VAT + total cuối cùng cho tiến độ thanh toán */
.quote-price-calc-box{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  padding:14px!important;
  border:1px solid #dbeafe!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f8fafc 0%,#ecfeff 100%)!important;
}
.calc-mini{
  padding:12px!important;
  border:1px solid #e2e8f0!important;
  border-radius:14px!important;
  background:#fff!important;
}
.calc-mini span{
  display:block!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  margin-bottom:6px!important;
}
.calc-mini strong{
  color:#0f766e!important;
  font-size:16px!important;
  font-weight:900!important;
}
.calc-mini.total{
  background:#0f766e!important;
  border-color:#0f766e!important;
}
.calc-mini.total span,.calc-mini.total strong{
  color:#fff!important;
}
.calc-mini.vat{
  background:#eff6ff!important;
}
.payment-total-cell{
  color:#0f766e!important;
  font-size:15px!important;
}
.payment-edit-table small{
  display:block!important;
  color:#64748b!important;
  font-weight:700!important;
  font-size:11px!important;
}
@media(max-width:1200px){
  .quote-price-calc-box{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:700px){
  .quote-price-calc-box{grid-template-columns:1fr!important;}
}


/* 2026-06-26: mở rộng ưu đãi 1-5 */
.quote-price-calc-box{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(min-width:1280px){
  .quote-price-calc-box{
    grid-template-columns:repeat(9,minmax(0,1fr))!important;
  }
}


/* 2026-06-26: mỗi ưu đãi chọn theo % hoặc số tiền */
.discount-choice{
  display:grid!important;
  grid-template-columns:120px minmax(0,1fr)!important;
  gap:8px!important;
}
.discount-choice select,
.discount-choice input{
  width:100%!important;
  min-width:0!important;
}
.discount-choice select{
  padding-left:10px!important;
  padding-right:10px!important;
}
@media(max-width:700px){
  .discount-choice{grid-template-columns:1fr!important;}
}


/* 2026-06-26: fix 0,5% + chỉnh ô số tiền ưu đãi vừa vặn */
.quote-price-calc-box{
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important;
  align-items:stretch!important;
  gap:12px!important;
  overflow:hidden!important;
}
@media(min-width:1280px){
  .quote-price-calc-box{
    grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important;
  }
}
.calc-mini{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:6px!important;
  min-height:96px!important;
}
.calc-mini span{
  line-height:1.25!important;
}
.calc-mini strong{
  display:block!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.15!important;
  font-size:clamp(15px,1.45vw,21px)!important;
}
.calc-mini.total strong{
  font-size:clamp(16px,1.6vw,22px)!important;
}
.discount-choice{
  grid-template-columns:minmax(110px,130px) minmax(0,1fr)!important;
}


/* 2026-06-26: Booking không VAT, cộng vào Đợt 1; VAT chỉ tính 1 lần */
.payment-edit-table .booking-row{
  background:#fffdf5!important;
}
.booking-note{
  display:block!important;
  margin-top:4px!important;
  color:#b45309!important;
  font-weight:800!important;
  font-size:11px!important;
  line-height:1.3!important;
}
.payment-total-cell{
  color:#0f766e!important;
}


/* 2026-06-26: Đợt 1 có ký booking vẫn tính VAT, chỉ dòng Booking không VAT */
.payment-edit-table tr:not(.booking-row) .booking-note{
  color:#0f766e!important;
  background:#ecfeff!important;
  display:inline-block!important;
  padding:3px 7px!important;
  border-radius:999px!important;
}


/* 2026-06-26: Đợt 1 trừ booking nhưng VAT tính trên đủ mốc gồm booking */
.dot1-deduct-booking-row{
  background:#f7fffb!important;
}
.dot1-deduct-booking-row .payment-total-cell{
  color:#0f766e!important;
  font-size:15px!important;
}
.dot1-deduct-booking-row .booking-note{
  color:#0f766e!important;
  background:#ecfeff!important;
  display:inline-block!important;
  padding:3px 7px!important;
  border-radius:999px!important;
}


/* 2026-06-26: Mã căn, diện tích, chính sách ưu đãi động, mẫu tiến độ theo dự án */
.discount-policy-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  padding:10px 12px!important;
  border:1px dashed #cbd5e1!important;
  border-radius:14px!important;
  background:#f8fafc!important;
}
.discount-policy-row.optional-discount.hidden{
  display:none!important;
}
.discount-choice.with-remove{
  grid-template-columns:120px minmax(0,1fr) auto!important;
}
.discount-choice.with-remove .btn{
  height:44px!important;
  padding:0 14px!important;
}
.payment-toolbar .admin-only.manager-access{
  border-color:#99f6e4!important;
}
@media(max-width:760px){
  .discount-choice.with-remove{
    grid-template-columns:1fr!important;
  }
  .discount-policy-actions{
    align-items:stretch!important;
  }
  .discount-policy-actions .btn{
    width:100%!important;
  }
}


/* 2026-06-26: Fix thanh toán nhanh, ẩn CS ưu đãi 3-5, bảng tiến độ đẹp và chính xác */
.optional-calc-discount.hidden,
.fast-calc-discount.hidden{
  display:none!important;
}
.fast-payment-box{
  border-color:#99f6e4!important;
  background:linear-gradient(135deg,#ecfeff 0%,#f0f9ff 100%)!important;
  box-shadow:0 12px 26px rgba(15,118,110,.08)!important;
}
.fast-payment-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.fast-payment-grid input{
  font-weight:800!important;
}
#quoteFastNetAmount{
  color:#0f766e!important;
  background:#ffffff!important;
}
.quote-payment-summary{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
}
#quotePaymentRowsTable{
  overflow-x:auto!important;
  border-radius:18px!important;
  border:1px solid #dbeafe!important;
  background:#fff!important;
}
.refined-payment-table{
  width:100%!important;
  min-width:1060px!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.refined-payment-table th{
  background:linear-gradient(135deg,#e6fffb,#eefbff)!important;
  color:#0f766e!important;
  font-size:14px!important;
  line-height:1.3!important;
  padding:14px 10px!important;
  border-bottom:1px solid #ccefe9!important;
}
.refined-payment-table td{
  padding:12px 10px!important;
  vertical-align:top!important;
  border-bottom:1px solid #eef2f7!important;
}
.refined-payment-table .col-stage{width:140px!important;}
.refined-payment-table .col-percent{width:100px!important;}
.refined-payment-table .col-money{width:155px!important;}
.refined-payment-table .col-due{width:150px!important;}
.refined-payment-table .col-note{width:160px!important;}
.refined-payment-table .col-action{width:92px!important;}
.refined-payment-table input{
  width:100%!important;
  min-width:0!important;
  padding:10px 10px!important;
  border-radius:12px!important;
  font-size:14px!important;
}
.refined-payment-table .money-input{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  font-variant-numeric:tabular-nums!important;
}
.refined-payment-table .money-exact{
  display:block!important;
  white-space:nowrap!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  font-variant-numeric:tabular-nums!important;
  font-size:13.5px!important;
  line-height:1.25!important;
  color:#0f766e!important;
}
.refined-payment-table .booking-note{
  white-space:normal!important;
  max-width:100%!important;
  margin-top:6px!important;
}
.refined-payment-table tbody tr:nth-child(even){
  background:#fbfdff!important;
}
.refined-payment-table tbody tr:hover{
  background:#f0fdfa!important;
}
.calc-mini{
  border-color:#dbeafe!important;
}
.calc-mini:not(.total):not(.vat){
  background:linear-gradient(135deg,#ffffff,#fbfdff)!important;
}
@media(max-width:900px){
  .fast-payment-grid{grid-template-columns:1fr!important;}
  .refined-payment-table{min-width:980px!important;}
}


/* 2026-06-26: Calendar công việc, giỏ hàng dự án, hợp đồng mẫu */
.task-chip .task-room{
  color:#0f766e!important;
  font-weight:800!important;
}
.task-update .btn.success{
  background:#16a34a!important;
  color:#fff!important;
  border-color:#16a34a!important;
}
.task-calendar-board .task-chip{
  min-height:70px!important;
}
.task-cal-day{
  min-height:210px!important;
}
.sales-product-toolbar,
.contract-filter-toolbar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin:12px 0 14px!important;
}
.sales-product-toolbar label{
  min-width:260px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  font-weight:800!important;
}
.project-cart-link-box{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:1!important;
  flex-wrap:wrap!important;
}
.project-cart-link-box input{
  min-width:260px!important;
  flex:1!important;
}
.project-cart-link-box .disabled{
  pointer-events:none!important;
  opacity:.55!important;
}
.project-inventory-box{
  cursor:pointer!important;
  transition:all .15s ease!important;
}
.project-inventory-box:hover,
.project-inventory-box.active{
  border-color:#14b8a6!important;
  box-shadow:0 12px 28px rgba(20,184,166,.14)!important;
  transform:translateY(-1px)!important;
}
.mini-link{
  display:inline-flex!important;
  margin-top:8px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#ecfeff!important;
  color:#0f766e!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:12px!important;
}
.contract-filter-toolbar select{
  min-width:180px!important;
}
.contract-template-check span{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  background:#f0fdfa!important;
  color:#0f766e!important;
  font-weight:900!important;
}
.contract-template-check input{
  width:auto!important;
}
.contracts-table .actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
@media(max-width:760px){
  .sales-product-toolbar label,
  .project-cart-link-box input,
  .contract-filter-toolbar select{
    width:100%!important;
    min-width:0!important;
  }
  .project-cart-link-box{
    align-items:stretch!important;
  }
  .project-cart-link-box .btn{
    width:100%!important;
  }
}


/* 2026-06-26: fix Calendar full tháng/tuần, Bảng hàng link giỏ hàng, Báo giá không bóp cột */
.task-calendar-panel-card{
  overflow:hidden!important;
}
.task-cal-week-header,
.task-cal-month-grid{
  width:100%!important;
}
.task-cal-month-grid{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
.task-cal-week-grid{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:12px!important;
}
.task-cal-day{
  min-width:0!important;
  min-height:220px!important;
  overflow:hidden!important;
}
.task-cal-date-full{
  white-space:normal!important;
  line-height:1.35!important;
}
.task-cal-empty{
  min-height:74px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.inventory-main-toolbar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.inventory-main-toolbar input{
  flex:1 1 420px!important;
}
.inventory-main-toolbar select{
  flex:0 0 260px!important;
}
.inventory-main-toolbar .disabled{
  pointer-events:none!important;
  opacity:.55!important;
}
.inventory-cart-admin{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:10px 0 16px!important;
  padding:12px!important;
  border:1px dashed #99f6e4!important;
  border-radius:16px!important;
  background:#f0fdfa!important;
}
.inventory-cart-admin input{
  flex:1!important;
}
.inventory-project-cards{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:12px!important;
  margin:0 0 16px!important;
}
.inventory-project-card{
  border:1px solid #d9e4ea!important;
  background:linear-gradient(135deg,#ffffff,#f0fdfa)!important;
  border-radius:18px!important;
  padding:14px 16px!important;
  cursor:pointer!important;
  box-shadow:0 10px 22px rgba(15,23,42,.05)!important;
}
.inventory-project-card.active,
.inventory-project-card:hover{
  border-color:#14b8a6!important;
  box-shadow:0 12px 28px rgba(20,184,166,.16)!important;
  transform:translateY(-1px)!important;
}
.inventory-project-card b,
.inventory-project-card span,
.inventory-project-card small{
  display:block!important;
  line-height:1.45!important;
}
.inventory-project-card a{
  display:inline-flex!important;
  margin-top:8px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#ccfbf1!important;
  color:#0f766e!important;
  text-decoration:none!important;
  font-weight:900!important;
}
#salesQuotesPanel > .grid.two{
  grid-template-columns:1fr!important;
  align-items:start!important;
}
#salesQuotesPanel .quote-form-card{
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
}
#salesQuotesPanel .quote-form-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:16px!important;
}
#salesQuotesPanel .quote-form-grid .full,
#salesQuotesPanel .payment-builder.full,
#salesQuotesPanel .upload-row{
  grid-column:1 / -1!important;
}
.payment-builder{
  width:100%!important;
  overflow:visible!important;
}
.payment-builder-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  flex-wrap:wrap!important;
}
.payment-builder-head h4{
  min-width:180px!important;
}
.preset-buttons{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.payment-builder-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:14px!important;
}
.payment-builder-grid label{
  min-width:0!important;
}
.payment-builder-grid input{
  width:100%!important;
  min-width:0!important;
}
.payment-toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  align-items:center!important;
}
#quotePolicy{
  min-height:110px!important;
  width:100%!important;
}
@media(max-width:1200px){
  .task-cal-month-grid,
  .task-cal-week-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .task-cal-month-grid,
  .task-cal-week-grid{
    grid-template-columns:1fr!important;
  }
  .inventory-main-toolbar input,
  .inventory-main-toolbar select,
  .inventory-main-toolbar .btn,
  .inventory-cart-admin input,
  .inventory-cart-admin .btn{
    flex:1 1 100%!important;
    width:100%!important;
  }
  #salesQuotesPanel .quote-form-grid{
    grid-template-columns:1fr!important;
  }
}


/* 2026-06-26: Calendar gọn + popup ngày, giỏ hàng gọn, hợp đồng mẫu đẹp */
.task-cal-month-grid{
  gap:8px!important;
}
.task-cal-day{
  min-height:126px!important;
  padding:9px!important;
  border-radius:14px!important;
  cursor:pointer!important;
}
.task-cal-day-head{
  padding-bottom:4px!important;
  gap:6px!important;
}
.task-cal-date-num{
  font-size:20px!important;
  line-height:1!important;
}
.task-cal-date-full{
  font-size:11px!important;
  line-height:1.15!important;
}
.task-cal-count{
  font-size:10px!important;
  padding:4px 7px!important;
}
.task-cal-items{
  gap:5px!important;
  max-height:82px!important;
}
.task-chip{
  padding:6px 7px!important;
  border-radius:9px!important;
  gap:3px!important;
}
.task-chip b{
  font-size:11px!important;
  line-height:1.25!important;
}
.task-chip span,
.task-chip small{
  font-size:10.5px!important;
  line-height:1.25!important;
}
.task-chip .chip-meta{
  gap:5px!important;
}
.task-cal-empty.compact-empty{
  min-height:44px!important;
  font-size:12px!important;
  padding:8px!important;
}
.task-cal-week-col{
  cursor:pointer!important;
}
#taskDayPopup.hidden{
  display:none!important;
}
.day-task-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  background:rgba(15,23,42,.42)!important;
  z-index:9998!important;
}
.day-task-modal{
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(760px,92vw)!important;
  max-height:82vh!important;
  overflow:auto!important;
  z-index:9999!important;
  background:#fff!important;
  border-radius:22px!important;
  box-shadow:0 30px 90px rgba(15,23,42,.28)!important;
  padding:18px!important;
}
.day-task-modal-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid #e5edf3!important;
}
.day-task-modal-head h3{
  margin:0!important;
  color:#0f172a!important;
}
.day-task-modal-head p{
  margin:4px 0 0!important;
  color:#64748b!important;
  font-weight:700!important;
}
.day-task-modal-list{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  margin-top:14px!important;
}
.day-task-item{
  border:1px solid #dbe4ea!important;
  border-left:5px solid #14b8a6!important;
  border-radius:16px!important;
  padding:14px!important;
  background:#fbfdff!important;
}
.day-task-item.done{
  border-left-color:#22c55e!important;
  background:#f0fdf4!important;
}
.day-task-top,.day-task-meta,.day-task-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.day-task-top b{
  font-size:17px!important;
  color:#0f172a!important;
}
.day-task-meta span{
  background:#ecfeff!important;
  color:#0f766e!important;
  border-radius:999px!important;
  padding:5px 9px!important;
  font-weight:800!important;
  font-size:12px!important;
}
.day-task-item p{
  margin:10px 0!important;
  color:#334155!important;
}
.task-progress-line{
  height:8px!important;
  background:#e5edf3!important;
  border-radius:999px!important;
  overflow:hidden!important;
  margin:10px 0!important;
}
.task-progress-line span{
  display:block!important;
  height:100%!important;
  background:linear-gradient(90deg,#0f766e,#14b8a6)!important;
}
#inventoryProjectCards,.inventory-project-cards{
  display:none!important;
}
.inventory-main-toolbar{
  margin-bottom:12px!important;
}
.inventory-main-toolbar select{
  height:48px!important;
}
.inventory-main-toolbar #inventoryCartLinkBtn{
  white-space:nowrap!important;
}
.inventory-cart-admin{
  margin:0 0 12px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
}
#salesContractsPanel > .grid.two{
  grid-template-columns:1fr!important;
}
#salesContractsPanel .card{
  overflow:visible!important;
}
#salesContractsPanel .form-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;
  gap:14px!important;
}
#salesContractsPanel .form-grid .full{
  grid-column:1 / -1!important;
}
#salesContractsPanel textarea{
  min-height:96px!important;
}
#salesContractsPanel .hint-box{
  padding:14px!important;
  border-radius:16px!important;
  background:#f8fafc!important;
}
.contract-filter-toolbar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.contract-filter-toolbar select{
  min-width:220px!important;
  height:44px!important;
}
.contract-template-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:14px!important;
}
.contract-template-card{
  border:1px solid #dbe4ea!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fff,#f8fffd)!important;
  padding:16px!important;
  box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
}
.contract-template-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:10px!important;
}
.contract-template-card h4{
  margin:6px 0 10px!important;
  color:#0f172a!important;
}
.contract-template-card p{
  margin:6px 0!important;
  color:#475569!important;
}
.contract-template-actions{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-top:12px!important;
}
@media(max-width:1200px){
  .task-cal-day{
    min-height:118px!important;
  }
}
@media(max-width:760px){
  .day-task-modal{
    width:94vw!important;
    padding:14px!important;
  }
  .task-cal-day{
    min-height:112px!important;
  }
  .contract-filter-toolbar select{
    width:100%!important;
    min-width:0!important;
  }
}


/* 2026-06-26: Fix click lịch không nhảy trang, popup có sửa, danh sách công việc luôn hiện */
.task-chip{
  cursor:pointer!important;
}
.day-task-modal{
  scroll-behavior:auto!important;
}
.day-task-actions .btn.success,
.task-update .btn.success{
  background:#16a34a!important;
  color:#fff!important;
  border-color:#16a34a!important;
}
.task-filter-note{
  margin-bottom:12px!important;
  background:#fffbeb!important;
  border-color:#fde68a!important;
  color:#92400e!important;
}
.tasks-list{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
.task-card{
  scroll-margin-top:110px!important;
}


/* 2026-06-26: Fix danh sách công việc, màu ưu tiên và form hợp đồng đồng đều */
.task-priority-legend{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0 0 12px!important;
}
.legend-chip{
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  padding:7px 11px!important;
  font-size:12px!important;
  font-weight:900!important;
}
.legend-chip.urgent,.task-priority.urgent,.mini-priority.urgent{
  background:#fee2e2!important;
  color:#b91c1c!important;
}
.legend-chip.high,.task-priority.high,.mini-priority.high{
  background:#fef3c7!important;
  color:#b45309!important;
}
.legend-chip.normal,.task-priority.normal,.mini-priority.normal{
  background:#ccfbf1!important;
  color:#0f766e!important;
}
.legend-chip.low,.task-priority.low,.mini-priority.low{
  background:#e5e7eb!important;
  color:#475569!important;
}
.task-card{
  display:grid!important;
  grid-template-columns:8px minmax(0,1fr) minmax(250px,330px)!important;
  gap:14px!important;
  align-items:stretch!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #dbe4ea!important;
  border-radius:18px!important;
  background:#fff!important;
}
.task-priority-strip{
  width:8px!important;
  height:100%!important;
  background:#14b8a6!important;
}
.task-card.priority-urgent .task-priority-strip{background:#ef4444!important;}
.task-card.priority-high .task-priority-strip{background:#f59e0b!important;}
.task-card.priority-normal .task-priority-strip{background:#14b8a6!important;}
.task-card.priority-low .task-priority-strip{background:#94a3b8!important;}
.task-main{
  padding:16px 0!important;
  min-width:0!important;
}
.task-title-row{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.task-title-row b{
  font-size:18px!important;
  color:#0f172a!important;
}
.task-priority{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  padding:7px 11px!important;
  font-size:12px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.task-meta-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:8px!important;
  margin:10px 0!important;
}
.task-meta-grid span{
  padding:8px 10px!important;
  border-radius:12px!important;
  background:#f8fafc!important;
  color:#475569!important;
  font-weight:700!important;
}
.task-note-line{
  border:1px dashed #cbd5e1!important;
  background:#fbfdff!important;
  border-radius:14px!important;
  padding:11px 12px!important;
  color:#334155!important;
  line-height:1.5!important;
}
.task-update{
  padding:16px!important;
  background:#f8fafc!important;
  border-left:1px solid #edf2f7!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
.task-update label{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  font-size:13px!important;
  font-weight:900!important;
  color:#334155!important;
}
.task-update select,
.task-update input{
  width:100%!important;
  height:42px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
}
.task-action-buttons{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.task-action-buttons .btn{
  flex:1 1 auto!important;
}
.mini-priority{
  display:inline-flex!important;
  border-radius:999px!important;
  padding:3px 6px!important;
  font-weight:900!important;
  font-size:10px!important;
}
#salesContractsPanel > .grid.two{
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;
  align-items:start!important;
}
#salesContractsPanel .form-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:end!important;
}
#salesContractsPanel .form-grid label{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  font-size:15px!important;
  font-weight:900!important;
  color:#0f172a!important;
  min-width:0!important;
}
#salesContractsPanel .form-grid label.full{
  grid-column:1 / -1!important;
}
#salesContractsPanel input,
#salesContractsPanel select,
#salesContractsPanel textarea{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  border-radius:14px!important;
  border:1px solid #d9e4ea!important;
  font-size:15px!important;
  line-height:1.35!important;
}
#salesContractsPanel input,
#salesContractsPanel select{
  height:48px!important;
  padding:0 14px!important;
}
#salesContractsPanel input[type="file"]{
  height:auto!important;
  padding:12px 14px!important;
  background:#fff!important;
}
#salesContractsPanel textarea{
  min-height:104px!important;
  padding:14px!important;
  resize:vertical!important;
}
.contract-template-check span{
  width:100%!important;
  box-sizing:border-box!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:12px 14px!important;
  border-radius:14px!important;
  background:#ecfdf5!important;
  color:#0f766e!important;
  font-weight:900!important;
}
.contract-template-check input{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
}
#salesContractsPanel .toolbar{
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin-top:14px!important;
  padding:12px!important;
  border-radius:16px!important;
  background:#f8fafc!important;
}
#salesContractsPanel .toolbar .btn{
  min-height:46px!important;
}
@media(max-width:1200px){
  .task-card{
    grid-template-columns:8px minmax(0,1fr)!important;
  }
  .task-update{
    grid-column:2!important;
    border-left:0!important;
    border-top:1px solid #edf2f7!important;
  }
  #salesContractsPanel > .grid.two{
    grid-template-columns:1fr!important;
  }
  #salesContractsPanel .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .task-card{
    grid-template-columns:6px minmax(0,1fr)!important;
  }
  .task-main{
    padding:14px 10px 14px 0!important;
  }
  .task-update{
    grid-column:1 / -1!important;
  }
  #salesContractsPanel .form-grid{
    grid-template-columns:1fr!important;
  }
}


/* 2026-06-26: Fix lịch công việc lặp nhiều ngày/cách tuần + hợp đồng compact */
.task-custom-dates-wrap input{
  height:44px!important;
}
.task-custom-dates-wrap small{
  display:block!important;
  margin-top:6px!important;
  font-size:12px!important;
}
.task-calendar-item{
  cursor:pointer!important;
}
#salesContractsPanel > .grid.two{
  grid-template-columns:minmax(0,1.6fr) minmax(280px,.65fr)!important;
  gap:16px!important;
  align-items:start!important;
}
#salesContractsPanel .form-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:end!important;
}
#salesContractsPanel .form-grid label{
  font-size:13px!important;
  line-height:1.25!important;
  gap:6px!important;
}
#salesContractsPanel input,
#salesContractsPanel select{
  height:42px!important;
  min-height:42px!important;
  padding:0 12px!important;
  font-size:14px!important;
  border-radius:12px!important;
}
#salesContractsPanel input[type="file"]{
  height:42px!important;
  padding:9px 12px!important;
}
#salesContractsPanel textarea{
  min-height:78px!important;
  padding:12px!important;
  font-size:14px!important;
  border-radius:12px!important;
}
.contract-template-check{
  grid-column:1 / -1!important;
}
.contract-template-check span{
  min-height:42px!important;
  padding:8px 12px!important;
  justify-content:flex-start!important;
  gap:9px!important;
  font-size:14px!important;
  line-height:1.25!important;
  border-radius:12px!important;
}
.contract-template-check input[type="checkbox"],
#contractIsTemplate{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  accent-color:#0f766e!important;
}
#salesContractsPanel .hint-box{
  padding:12px 14px!important;
  border-radius:14px!important;
  font-size:14px!important;
  line-height:1.45!important;
}
#salesContractsPanel .muted.mt{
  font-size:13px!important;
  line-height:1.35!important;
}
#salesContractsPanel .toolbar{
  padding:10px!important;
  margin-top:12px!important;
}
#salesContractsPanel .toolbar .btn{
  min-height:42px!important;
  padding:0 16px!important;
}
@media(max-width:1200px){
  #salesContractsPanel > .grid.two{
    grid-template-columns:1fr!important;
  }
  #salesContractsPanel .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  #salesContractsPanel .form-grid{
    grid-template-columns:1fr!important;
  }
}


/* 2026-06-26: Bảng hàng hiển thị link giỏ hàng theo từng dự án */
.inventory-specs{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin-top:7px!important;
}
.inventory-specs span{
  display:inline-flex!important;
  align-items:center!important;
  padding:4px 7px!important;
  border-radius:999px!important;
  background:#f0fdfa!important;
  color:#0f766e!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
.cart-link-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 11px!important;
  border-radius:999px!important;
  background:#0f766e!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:12px!important;
  white-space:nowrap!important;
}
.cart-link-btn.compact{
  padding:7px 10px!important;
}
.cart-link-btn:hover{
  filter:brightness(.96)!important;
}
.cart-link-missing{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:#f1f5f9!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.inventory-cart-admin input:disabled,
.project-cart-link-box input:disabled{
  background:#f8fafc!important;
  color:#94a3b8!important;
  cursor:not-allowed!important;
}
.inventory-main-toolbar,
.sales-product-toolbar{
  align-items:end!important;
}
.sales-product-mini-summary{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-bottom:10px!important;
}
.sales-product-mini-summary span{
  display:inline-flex!important;
  border-radius:999px!important;
  background:#ecfeff!important;
  color:#0f766e!important;
  font-weight:900!important;
  padding:7px 11px!important;
  font-size:12px!important;
}
.sales-inventory-table td:nth-child(2),
#inventoryTable td:nth-child(3){
  min-width:180px!important;
}
.sales-inventory-table th,
.sales-inventory-table td{
  vertical-align:top!important;
}
@media(max-width:760px){
  .cart-link-btn,.cart-link-missing{
    width:100%!important;
  }
}


/* 2026-06-26: Công việc dạng danh sách + popup chi tiết/sửa + xác nhận nhận việc */
.task-list-item{
  display:grid!important;
  grid-template-columns:8px minmax(0,1fr) minmax(210px,260px)!important;
  gap:14px!important;
  border:1px solid #dbe4ea!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#fff!important;
  cursor:pointer!important;
  box-shadow:0 10px 24px rgba(15,23,42,.04)!important;
}
.task-list-item:hover{
  border-color:#14b8a6!important;
  box-shadow:0 14px 34px rgba(20,184,166,.12)!important;
}
.task-list-main{
  padding:15px 0!important;
  min-width:0!important;
}
.task-list-main p{
  margin:8px 0 10px!important;
  color:#475569!important;
  line-height:1.45!important;
}
.task-list-actions{
  padding:14px!important;
  background:#f8fafc!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  border-left:1px solid #edf2f7!important;
}
.task-list-actions .btn{
  width:100%!important;
}
.task-meta-grid.compact{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important;
}
.accepted-avatar-row{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  flex-wrap:wrap!important;
}
.accepted-avatar{
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#ccfbf1!important;
  color:#0f766e!important;
  font-size:11px!important;
  font-weight:900!important;
  border:2px solid #fff!important;
  margin-left:-6px!important;
  box-shadow:0 3px 8px rgba(15,23,42,.12)!important;
}
.accepted-avatar:first-child{margin-left:0!important;}
.accepted-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.accepted-avatar-row small{
  margin-left:8px!important;
  color:#0f766e!important;
  font-weight:800!important;
}
.accepted-empty{
  display:inline-flex!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#f1f5f9!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
}
.mini-accepted{
  margin-top:8px!important;
}
.task-detail-backdrop{
  position:fixed!important;
  inset:0!important;
  background:rgba(15,23,42,.44)!important;
  z-index:9998!important;
}
.task-detail-modal{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(860px,94vw)!important;
  max-height:86vh!important;
  overflow:auto!important;
  background:#fff!important;
  border-radius:24px!important;
  box-shadow:0 30px 90px rgba(15,23,42,.30)!important;
  padding:18px!important;
  z-index:9999!important;
}
.task-detail-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  border-bottom:1px solid #e5edf3!important;
  padding-bottom:14px!important;
}
.task-detail-head h3{
  margin:8px 0 4px!important;
  color:#0f172a!important;
  font-size:24px!important;
}
.task-detail-head p{
  margin:0!important;
  color:#64748b!important;
  font-weight:800!important;
}
.task-detail-body{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  margin-top:14px!important;
}
.task-detail-section{
  border:1px solid #e5edf3!important;
  background:#fbfdff!important;
  border-radius:16px!important;
  padding:14px!important;
}
.task-detail-section h4{
  margin:0 0 8px!important;
  color:#0f766e!important;
}
.task-detail-section p{
  margin:0!important;
  color:#334155!important;
  line-height:1.5!important;
}
.task-detail-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:10px!important;
}
.task-detail-grid div{
  border:1px solid #e5edf3!important;
  background:#f8fafc!important;
  border-radius:14px!important;
  padding:11px!important;
}
.task-detail-grid b,
.task-detail-grid span{
  display:block!important;
}
.task-detail-grid b{
  color:#64748b!important;
  font-size:12px!important;
}
.task-detail-grid span{
  color:#0f172a!important;
  font-weight:900!important;
  margin-top:4px!important;
}
.task-recipient-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
.task-recipient-chips span,
.task-recipient-chips em{
  display:inline-flex!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#ecfeff!important;
  color:#0f766e!important;
  font-weight:900!important;
  font-style:normal!important;
}
.task-detail-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:16px!important;
  padding-top:14px!important;
  border-top:1px solid #e5edf3!important;
}
.task-edit-form{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:14px!important;
}
.task-edit-form label{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  font-weight:900!important;
  color:#334155!important;
}
.task-edit-form label.full{
  grid-column:1 / -1!important;
}
.task-edit-form input,
.task-edit-form select,
.task-edit-form textarea{
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #d9e4ea!important;
  border-radius:13px!important;
  padding:11px 12px!important;
  font-size:14px!important;
}
.task-edit-form textarea{
  min-height:90px!important;
}
#taskDetailPopup.hidden,
#taskEditPopup.hidden{
  display:none!important;
}
@media(max-width:900px){
  .task-list-item{
    grid-template-columns:8px minmax(0,1fr)!important;
  }
  .task-list-actions{
    grid-column:2!important;
    border-left:0!important;
    border-top:1px solid #edf2f7!important;
  }
  .task-edit-form{
    grid-template-columns:1fr!important;
  }
}


/* 2026-06-26: Tách riêng nút nhận việc và nút hoàn thành */
.task-detail-actions{
  align-items:stretch!important;
}
.task-action-group{
  flex:1 1 220px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding:12px!important;
  border-radius:16px!important;
  border:1px solid #e5edf3!important;
  background:#f8fafc!important;
}
.task-action-group b{
  color:#0f172a!important;
  font-size:13px!important;
}
.task-action-group.accept-group{
  background:#ecfeff!important;
  border-color:#99f6e4!important;
}
.task-action-group.complete-group{
  background:#f0fdf4!important;
  border-color:#bbf7d0!important;
}
.task-action-group.manage-group{
  background:#fff!important;
}
.btn.accept-work{
  background:#2563eb!important;
  border-color:#2563eb!important;
  color:#fff!important;
}
.btn.accept-work:hover{
  filter:brightness(.96)!important;
}
.task-accept-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:900!important;
}
.task-accept-status.accepted{
  background:#dcfce7!important;
  color:#15803d!important;
}
.task-accept-status.waiting{
  background:#dbeafe!important;
  color:#1d4ed8!important;
}
.task-complete-locked{
  display:block!important;
  border-radius:12px!important;
  background:#fff7ed!important;
  color:#c2410c!important;
  padding:9px 10px!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.35!important;
}
.task-list-actions .task-accept-status{
  width:100%!important;
  box-sizing:border-box!important;
}


/* 2026-06-26: Link giỏ hàng trong modal sửa, thông báo click đúng danh mục, bỏ ô Quản lý trống */
.task-manage-inline{
  flex:1 1 100%!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  justify-content:flex-end!important;
  padding-top:4px!important;
}
.notify-item{
  cursor:pointer!important;
  transition:background .15s ease, transform .15s ease!important;
}
.notify-item:hover{
  background:#f0fdfa!important;
  transform:translateX(2px)!important;
}
.notify-item.read{
  opacity:.78!important;
}
#modalForm input[name="cartLink"]{
  color:#0f766e!important;
  font-weight:700!important;
}


/* =========================================================
   REALTA / TECH CRM THEME 2026-06-26
   Giao diện đăng nhập công nghệ + dashboard dark-glass
   ========================================================= */
body.crm-tech{
  --bg:#07162f;
  --panel:rgba(13,35,76,.82);
  --text:#eaf2ff;
  --muted:#9bb2d1;
  --primary:#0b7cff;
  --primary2:#16d6ff;
  --line:rgba(148,186,255,.18);
  --shadow:0 18px 55px rgba(0,10,35,.28);
  background:
    radial-gradient(circle at 70% 15%, rgba(14,116,255,.22), transparent 34%),
    radial-gradient(circle at 15% 80%, rgba(20,184,166,.18), transparent 30%),
    linear-gradient(135deg,#071021 0%,#09265c 48%,#06152f 100%);
  color:var(--text);
}
body.crm-tech::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.12));
}
body.crm-tech::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at bottom, rgba(255,173,92,.22) 0%, transparent 34%),
    linear-gradient(to top, rgba(9,18,36,.35), rgba(7,16,33,.05));
}

/* LOGIN SCREEN */
body.crm-tech.auth-locked{
  display:block;
  overflow:hidden;
}
body.crm-tech.auth-locked .sidebar,
body.crm-tech.auth-locked .main{
  filter:blur(4px);
}
.realta-login{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,191,120,.25), transparent 22%),
    radial-gradient(circle at 70% 32%, rgba(0,132,255,.22), transparent 25%),
    linear-gradient(180deg,#061b48 0%,#0b2f6c 46%,#07142d 100%);
}
.realta-login::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(3,9,28,.74), rgba(4,16,43,.05) 42%, rgba(4,13,35,.55)),
    radial-gradient(ellipse at bottom, rgba(255,255,255,.10), transparent 45%);
}
.realta-login::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-4%;
  height:54%;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(255,255,255,.12) 18.4% 18.8%, transparent 19.2% 100%),
    linear-gradient(72deg, transparent 0 32%, rgba(255,72,72,.34) 32.2% 32.65%, transparent 33% 100%),
    linear-gradient(160deg, transparent 0 48%, rgba(92,195,255,.28) 48.1% 48.45%, transparent 49% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 130px),
    linear-gradient(to top, rgba(6,13,31,.8), transparent);
  clip-path:polygon(0 42%,14% 28%,26% 36%,40% 18%,54% 30%,66% 12%,81% 27%,100% 18%,100% 100%,0 100%);
  opacity:.7;
}
.login-bg-grid{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 19% 42%, rgba(80,180,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 36%, rgba(80,180,255,.12) 0 2px, transparent 3px);
  background-size:54px 54px;
  opacity:.55;
}
.login-orbit{
  position:absolute;
  border:1px dashed rgba(143,201,255,.35);
  border-radius:50%;
  transform:rotate(-18deg);
}
.login-orbit-1{width:760px;height:360px;left:8%;top:23%}
.login-orbit-2{width:680px;height:320px;right:6%;top:28%}

.login-browser-brand{
  position:absolute;
  top:18px;
  left:26px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(228,245,255,.12);
  border:1px solid rgba(204,231,255,.18);
  color:#eaf5ff;
  font-weight:900;
  backdrop-filter:blur(14px);
}
.login-tab-logo{
  width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#2dd4ff,#0b5cff);
  box-shadow:0 8px 20px rgba(11,92,255,.38);
  color:#fff;font-weight:900;font-size:11px;overflow:hidden;
}
.login-tab-logo img,.tab-logo-img{width:100%;height:100%;object-fit:contain}

.login-card{
  position:relative;
  width:min(430px,92vw);
  padding:38px 38px 30px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  border:1px solid rgba(215,235,255,.28);
  box-shadow:0 30px 100px rgba(0,24,92,.42), inset 0 1px 0 rgba(255,255,255,.20);
  color:#fff;
  backdrop-filter:blur(22px);
  z-index:2;
}
.login-logo{
  width:92px;height:92px;border-radius:28px;
  margin:0 auto 16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#ffffff,#bce8ff);
  color:#0b5cff;
  font-size:23px;
  font-weight:1000;
  box-shadow:0 18px 40px rgba(31,148,255,.35);
  overflow:hidden;
}
.login-logo img,.login-logo-img{width:100%;height:100%;object-fit:contain;padding:10px}
.login-card h2{
  margin:0;
  text-align:center;
  font-size:30px;
  font-weight:1000;
  color:#fff;
  letter-spacing:-.5px;
}
.login-card p{
  text-align:center;
  margin:9px 0 24px;
  color:#dbeafe;
  font-weight:700;
}
.login-field-label{
  display:block;
  margin:14px 0 7px;
  text-transform:uppercase;
  color:#ecf6ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.35px;
}
.login-input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  height:54px;
  border-radius:15px;
  padding:0 14px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.22);
}
.login-input-wrap input{
  flex:1;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  outline:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.login-input-wrap input::placeholder{color:rgba(237,246,255,.62)}
.login-remember{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 18px;
  color:#dbeafe;
  font-weight:700;
  font-size:13px;
}
.login-remember input{width:16px;height:16px;padding:0}
.login-btn{
  width:100%;
  height:56px;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg,#40b6ff,#0b5cff 58%,#063ad7);
  box-shadow:0 14px 34px rgba(11,92,255,.42);
  font-size:16px;
}
.login-links{
  display:flex;
  justify-content:center;
  gap:22px;
  margin-top:17px;
  color:#93c5fd;
  font-weight:800;
  font-size:13px;
}
.login-save-hint{
  margin-top:18px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,23,42,.18);
  color:#bfdbfe;
  text-align:center;
  font-size:12px;
  line-height:1.45;
}
.login-error{color:#fecaca;text-align:center;font-weight:900;margin-top:10px}

.login-floating-panel{
  position:absolute;
  width:220px;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(16,57,119,.64),rgba(7,23,58,.36));
  border:1px solid rgba(177,215,255,.24);
  color:#eaf5ff;
  backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.24);
  z-index:1;
}
.login-floating-panel span{display:block;color:#bcd6f5;font-size:12px;font-weight:800}
.login-floating-panel b{display:block;margin:8px 0 4px;font-size:24px}
.login-floating-panel em{display:block;color:#5eead4;font-style:normal;font-size:12px;font-weight:800}
.panel-revenue{left:5%;top:24%}
.panel-source{left:5%;top:45%}
.panel-team{right:5%;top:26%}
.panel-project{right:5%;top:52%}
.spark{height:34px;margin-top:12px;border-radius:10px;background:linear-gradient(135deg,transparent 15%,rgba(0,188,255,.35),transparent 70%)}
.donut-mini{width:46px;height:46px;border-radius:50%;margin-top:12px;background:conic-gradient(#38bdf8 0 35%,#8b5cf6 35% 63%,#22c55e 63% 83%,#f59e0b 83%);box-shadow:inset 0 0 0 13px rgba(8,21,48,.95)}
.mini-bars{display:flex;align-items:end;gap:5px;height:46px;margin-top:12px}
.mini-bars i{display:block;width:18px;border-radius:6px 6px 0 0;background:linear-gradient(#7dd3fc,#2563eb)}
.mini-bars i:nth-child(1){height:18px}.mini-bars i:nth-child(2){height:28px}.mini-bars i:nth-child(3){height:23px}.mini-bars i:nth-child(4){height:36px}.mini-bars i:nth-child(5){height:43px}
.login-feature-strip{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:18px;
  z-index:2;
  color:#eaf5ff;
}
.login-feature-strip div{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  font-weight:800;
  font-size:13px;
}

/* APP LAYOUT DARK TECH */
body.crm-tech:not(.auth-locked){
  display:flex;
  min-height:100vh;
  overflow-x:hidden;
}
body.crm-tech .sidebar{
  background:linear-gradient(180deg,var(--crm-sidebar-from,#061b3a),#071d49 48%,var(--crm-sidebar-to,#0b5cff));
  border-right:1px solid rgba(147,197,253,.18);
  box-shadow:18px 0 44px rgba(0,0,0,.25);
}
body.crm-tech .brand{
  padding:12px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
body.crm-tech .brand-logo{
  background:linear-gradient(135deg,#e0f2fe,#60a5fa);
  color:#083b9a;
  box-shadow:0 12px 28px rgba(37,99,235,.38);
  overflow:hidden;
}
body.crm-tech .brand-logo img,.brand-logo-img{width:100%;height:100%;object-fit:contain;padding:6px}
body.crm-tech .brand h1{font-size:18px;font-weight:1000;letter-spacing:-.2px}
body.crm-tech .brand p{color:#bfdbfe}
body.crm-tech .nav{
  color:#dceaff;
  border:1px solid transparent;
  font-weight:800;
  position:relative;
}
body.crm-tech .nav:hover,
body.crm-tech .nav.active{
  background:linear-gradient(135deg,rgba(11,92,255,.72),rgba(34,211,238,.18));
  border-color:rgba(147,197,253,.32);
  box-shadow:0 12px 26px rgba(11,92,255,.18);
}
body.crm-tech .main{
  background:
    radial-gradient(circle at 75px 85px, rgba(34,211,238,.15), transparent 26%),
    radial-gradient(circle at 80% 12%, rgba(59,130,246,.18), transparent 28%),
    linear-gradient(135deg,var(--crm-page-bg,#08172f),#071327 62%,#061226);
}
body.crm-tech .topbar{
  position:sticky;
  top:0;
  z-index:10;
  padding:16px 18px;
  margin:-24px -24px 22px;
  background:rgba(5,15,35,.78);
  border-bottom:1px solid rgba(148,186,255,.16);
  backdrop-filter:blur(18px);
}
body.crm-tech .topbar h2{font-weight:1000;color:#f8fbff}
body.crm-tech .topbar p{color:#9db6da}
body.crm-tech .actions{
  gap:9px;
}
body.crm-tech .btn{
  border-radius:13px;
  background:linear-gradient(135deg,#0b7cff,#0750d8);
  box-shadow:0 10px 24px rgba(11,92,255,.18);
}
body.crm-tech .btn.secondary{
  background:rgba(16,42,92,.76);
  border:1px solid rgba(125,187,255,.22);
  color:#dbeafe;
}
body.crm-tech .btn.secondary:hover{background:rgba(30,64,175,.58)}
body.crm-tech .btn.danger{background:rgba(239,68,68,.18);color:#fecaca;border:1px solid rgba(248,113,113,.28)}
body.crm-tech .auth-badge{
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(59,130,246,.18));
  color:#a7f3d0;
  border:1px solid rgba(45,212,191,.35);
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
}
body.crm-tech .sync-status{
  background:linear-gradient(135deg,rgba(6,182,212,.14),rgba(59,130,246,.10));
  color:#c7e7ff;
  border:1px solid rgba(125,211,252,.20);
  box-shadow:0 16px 38px rgba(0,0,0,.18);
}
body.crm-tech .card,
body.crm-tech .kpi,
body.crm-tech .toolbar,
body.crm-tech .table-wrap,
body.crm-tech .project-info-card,
body.crm-tech .modal-box{
  background:linear-gradient(180deg,rgba(14,34,76,.82),rgba(9,24,55,.74));
  border:1px solid rgba(148,186,255,.18);
  box-shadow:0 20px 60px rgba(0,0,0,.24);
  color:#eaf2ff;
  backdrop-filter:blur(12px);
}
body.crm-tech .card h3,
body.crm-tech .guide h3,
body.crm-tech .card-head h3{color:#f8fbff}
body.crm-tech .muted,
body.crm-tech .hint,
body.crm-tech .topbar p{color:#9bb2d1!important}
body.crm-tech input,
body.crm-tech select,
body.crm-tech textarea{
  background:rgba(255,255,255,.95);
  color:#0f172a;
  border:1px solid rgba(125,187,255,.32);
}
body.crm-tech input:focus,
body.crm-tech select:focus,
body.crm-tech textarea:focus{outline:2px solid rgba(34,211,238,.35);border-color:#38bdf8}
body.crm-tech th{
  background:linear-gradient(135deg,rgba(14,116,144,.85),rgba(29,78,216,.65));
  color:#eaffff;
}
body.crm-tech td{border-bottom-color:rgba(148,186,255,.14);color:#dbeafe}
body.crm-tech tr:hover td{background:rgba(59,130,246,.08)}
body.crm-tech .list .item,
body.crm-tech .empty-card{
  background:rgba(255,255,255,.06);
  border-color:rgba(148,186,255,.16);
  color:#eaf2ff;
}
body.crm-tech .mini-badge{
  background:rgba(34,211,238,.16);
  color:#7dd3fc;
  border:1px solid rgba(125,211,252,.28);
}
body.crm-tech .mini-badge.gold{background:rgba(245,158,11,.16);color:#fde68a;border-color:rgba(251,191,36,.28)}

/* TECH DASHBOARD HERO AND COLORFUL WIDGETS */
.tech-dashboard-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin:0 0 18px;
  padding:24px;
  border-radius:26px;
  color:#fff;
  background:
    radial-gradient(circle at 78% 26%, rgba(34,211,238,.32), transparent 24%),
    linear-gradient(135deg,rgba(11,92,255,.70),rgba(7,19,50,.84) 58%,rgba(18,117,255,.28));
  border:1px solid rgba(147,197,253,.24);
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.tech-dashboard-hero::after{
  content:"";
  position:absolute;
  inset:auto -6% -35% -6%;
  height:80%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 92px),
    linear-gradient(100deg, transparent 0 22%, rgba(96,165,250,.20) 22.3% 22.7%, transparent 23%),
    linear-gradient(75deg, transparent 0 48%, rgba(45,212,191,.22) 48.2% 48.6%, transparent 49%);
  clip-path:polygon(0 50%,18% 35%,30% 44%,45% 20%,60% 34%,74% 18%,91% 36%,100% 26%,100% 100%,0 100%);
  opacity:.55;
}
.tech-dashboard-hero > *{position:relative;z-index:1}
.tech-chip{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(125,211,252,.14);
  border:1px solid rgba(125,211,252,.30);
  color:#a5f3fc;
  font-weight:1000;
  font-size:11px;
  letter-spacing:.55px;
}
.tech-dashboard-hero h2{
  margin:12px 0 8px;
  font-size:30px;
  line-height:1.12;
}
.tech-dashboard-hero p{
  max-width:720px;
  margin:0;
  color:#cfe7ff;
  font-weight:700;
}
.tech-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* KPI tiles like premium SaaS */
body.crm-tech .kpi{
  position:relative;
  overflow:hidden;
  min-height:124px;
}
body.crm-tech .kpi::before{
  content:"";
  position:absolute;
  inset:auto 12px 10px 12px;
  height:36px;
  opacity:.75;
  background:linear-gradient(135deg,transparent 0 18%,rgba(125,211,252,.55) 19% 22%,transparent 23% 38%,rgba(59,130,246,.55) 39% 42%,transparent 43% 100%);
}
body.crm-tech .kpi::after{
  content:"";
  position:absolute;
  width:80px;height:80px;right:-20px;top:-20px;
  border-radius:28px;
  background:rgba(255,255,255,.10);
  transform:rotate(24deg);
}
body.crm-tech .kpi span{color:#c9dcf7;font-weight:800}
body.crm-tech .kpi strong{color:#fff;text-shadow:0 0 24px rgba(125,211,252,.28)}
body.crm-tech .kpi-customers{background:linear-gradient(135deg,rgba(11,92,255,.62),rgba(20,60,120,.82))}
body.crm-tech .kpi-projects{background:linear-gradient(135deg,rgba(13,148,136,.62),rgba(20,60,120,.82))}
body.crm-tech .kpi-docs{background:linear-gradient(135deg,rgba(124,58,237,.58),rgba(20,60,120,.82))}
body.crm-tech .kpi-deals{background:linear-gradient(135deg,rgba(249,115,22,.55),rgba(20,60,120,.82))}
body.crm-tech .kpi-revenue{background:linear-gradient(135deg,rgba(37,99,235,.62),rgba(20,60,120,.82))}
body.crm-tech .kpi-staff{background:linear-gradient(135deg,rgba(16,185,129,.58),rgba(20,60,120,.82))}

body.crm-tech .hero-card{
  background:linear-gradient(135deg,rgba(15,42,94,.90),rgba(5,22,55,.82));
}
body.crm-tech .bar-chart div,
body.crm-tech .progress span,
body.crm-tech .task-progress-bar span{
  background:linear-gradient(90deg,#2dd4ff,#0b5cff,#22c55e)!important;
}

/* Branding preview */
.tech-branding-modal .hint-box{
  background:linear-gradient(135deg,rgba(14,116,144,.10),rgba(37,99,235,.10));
  border-color:rgba(59,130,246,.16);
}
.tech-preview{
  border:1px solid rgba(147,197,253,.25);
  color:#fff;
}
.preview-logo-img{width:42px;height:42px;object-fit:contain}

/* Responsive */
@media(max-width:1100px){
  .login-floating-panel{display:none}
  .login-feature-strip{display:none}
  .tech-dashboard-hero{display:block}
  .tech-hero-actions{justify-content:flex-start;margin-top:14px}
}
@media(max-width:900px){
  body.crm-tech .topbar{margin:-14px -14px 16px}
  .realta-login{padding:16px}
  .login-card{padding:30px 24px}
}


/* =========================================================
   FIX REALTA THEME 2026-06-26
   - Login card không còn trắng chói
   - Bỏ 4 ô chữ, thay bằng visual CRM công nghệ
   - Giao diện trong CRM chuyển tone sáng, đồng nhất, dễ đọc
   ========================================================= */

/* LOGIN FIX: rõ chữ, rõ ô nhập */
.realta-login{
  background:
    radial-gradient(circle at 50% 60%, rgba(62,169,255,.22), transparent 28%),
    radial-gradient(circle at 76% 24%, rgba(45,212,191,.16), transparent 22%),
    linear-gradient(180deg,#06142f 0%,#08336f 48%,#07162d 100%)!important;
}
.login-card{
  width:min(450px,92vw)!important;
  background:linear-gradient(180deg,rgba(7,29,68,.88),rgba(6,23,55,.78))!important;
  border:1px solid rgba(168,218,255,.34)!important;
  box-shadow:0 30px 100px rgba(0,13,49,.58), inset 0 1px 0 rgba(255,255,255,.14)!important;
  color:#f8fbff!important;
}
.login-card h2{
  color:#ffffff!important;
  text-shadow:0 3px 18px rgba(45,212,255,.32)!important;
}
.login-card p,
.login-field-label,
.login-remember,
.login-links,
.login-save-hint{
  color:#d8ebff!important;
}
.login-field-label{
  opacity:.98!important;
}
.login-input-wrap{
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(125,211,252,.55)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
}
.login-input-wrap span{
  filter:none!important;
  color:#0b4bb3!important;
}
.login-input-wrap input{
  color:#0f172a!important;
  font-weight:800!important;
}
.login-input-wrap input::placeholder{
  color:#64748b!important;
}
.login-remember input{
  background:#fff!important;
  accent-color:#0b5cff!important;
}
.login-save-hint{
  background:rgba(15,42,92,.78)!important;
  border:1px solid rgba(125,211,252,.22)!important;
}
.login-logo{
  background:linear-gradient(135deg,#ffffff,#dff5ff)!important;
  box-shadow:0 18px 46px rgba(56,189,248,.42)!important;
}
.login-browser-brand{
  background:rgba(8,29,72,.72)!important;
  color:#fff!important;
  border-color:rgba(147,197,253,.30)!important;
}

/* Xóa/hide 4 ô chữ cũ nếu còn */
.login-floating-panel{
  display:none!important;
}

/* Visual CRM thay cho các ô chữ */
.login-tech-visual{
  position:absolute;
  z-index:1;
  pointer-events:none;
}
.visual-left{
  left:4.8%;
  top:22%;
  width:310px;
  height:430px;
}
.visual-right{
  right:4.8%;
  top:24%;
  width:320px;
  height:420px;
}
.visual-window{
  position:absolute;
  inset:0;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(31,83,161,.38),rgba(8,27,66,.28));
  border:1px solid rgba(170,219,255,.26);
  box-shadow:0 28px 70px rgba(0,10,40,.32), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  transform:perspective(900px) rotateY(9deg) rotateX(4deg);
}
.visual-right .visual-window{
  transform:perspective(900px) rotateY(-9deg) rotateX(4deg);
}
.visual-titlebar{
  display:flex;
  gap:8px;
  padding:18px 20px;
}
.visual-titlebar i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#60a5fa;
  box-shadow:20px 0 #22d3ee, 40px 0 #34d399;
}
.visual-chart{
  position:absolute;
  left:28px;
  right:28px;
  top:72px;
  height:116px;
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.visual-chart span{
  flex:1;
  border-radius:8px 8px 2px 2px;
  background:linear-gradient(180deg,#7dd3fc,#0b5cff);
  box-shadow:0 0 24px rgba(34,211,238,.24);
}
.visual-chart-a span:nth-child(1){height:42%}
.visual-chart-a span:nth-child(2){height:72%}
.visual-chart-a span:nth-child(3){height:54%}
.visual-chart-a span:nth-child(4){height:90%}
.visual-chart-b span:nth-child(1){height:34%}
.visual-chart-b span:nth-child(2){height:48%}
.visual-chart-b span:nth-child(3){height:74%}
.visual-chart-b span:nth-child(4){height:58%}
.visual-chart-b span:nth-child(5){height:92%}
.visual-line{
  position:absolute;
  left:30px;
  right:30px;
  top:220px;
  height:72px;
  border-radius:18px;
  background:
    linear-gradient(130deg,transparent 0 20%,rgba(34,211,238,.8) 21% 23%,transparent 24% 46%,rgba(59,130,246,.8) 47% 50%,transparent 51%),
    rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
}
.visual-grid-cards{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.visual-grid-cards i{
  height:56px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(125,211,252,.20),rgba(59,130,246,.12));
  border:1px solid rgba(255,255,255,.12);
}
.visual-donut{
  position:absolute;
  left:44px;
  top:222px;
  width:90px;
  height:90px;
  border-radius:50%;
  background:conic-gradient(#22d3ee 0 34%,#0b5cff 34% 62%,#34d399 62% 82%,#f59e0b 82%);
  box-shadow:inset 0 0 0 22px rgba(7,22,52,.96),0 0 40px rgba(34,211,238,.22);
}
.visual-icon-card{
  position:absolute;
  width:82px;
  height:82px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(219,234,254,.88));
  color:#0b5cff;
  font-size:40px;
  font-weight:900;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.55);
}
.visual-home{left:-28px;bottom:96px}
.visual-growth{left:52px;bottom:-8px}
.visual-team{right:-24px;bottom:118px}
.visual-deal{right:66px;bottom:2px}
.login-feature-strip div{
  background:rgba(10,30,70,.76)!important;
  border-color:rgba(147,197,253,.28)!important;
  color:#eff6ff!important;
}

/* INTERIOR: chuyển sang light-tech theme */
body.crm-tech:not(.auth-locked){
  --bg:#eef6ff!important;
  --panel:#ffffff!important;
  --text:#0f172a!important;
  --muted:#64748b!important;
  --primary:#0b6bcb!important;
  --primary2:#0ea5e9!important;
  --line:#dbe7f5!important;
  background:
    radial-gradient(circle at 18% 12%, rgba(14,165,233,.15), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(45,212,191,.13), transparent 25%),
    linear-gradient(135deg,#f4faff,#eaf3ff 55%,#f8fbff)!important;
  color:#0f172a!important;
}
body.crm-tech:not(.auth-locked)::before{
  background:
    linear-gradient(rgba(14,165,233,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,.06) 1px, transparent 1px)!important;
  background-size:44px 44px!important;
  opacity:.45!important;
  mask-image:none!important;
}
body.crm-tech:not(.auth-locked)::after{
  display:none!important;
}
body.crm-tech:not(.auth-locked) .main{
  background:
    radial-gradient(circle at 80px 110px, rgba(14,165,233,.16), transparent 24%),
    radial-gradient(circle at 90% 7%, rgba(45,212,191,.14), transparent 27%),
    linear-gradient(135deg,#f4faff,#edf6ff 60%,#ffffff)!important;
}
body.crm-tech:not(.auth-locked) .topbar{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid #dbe7f5!important;
  box-shadow:0 12px 34px rgba(15,23,42,.07)!important;
  backdrop-filter:blur(18px)!important;
}
body.crm-tech:not(.auth-locked) .topbar h2,
body.crm-tech:not(.auth-locked) .card h3,
body.crm-tech:not(.auth-locked) .guide h3,
body.crm-tech:not(.auth-locked) .card-head h3{
  color:#0f172a!important;
}
body.crm-tech:not(.auth-locked) .topbar p,
body.crm-tech:not(.auth-locked) .muted,
body.crm-tech:not(.auth-locked) .hint{
  color:#64748b!important;
}
body.crm-tech:not(.auth-locked) .sidebar{
  background:linear-gradient(180deg,var(--crm-sidebar-from,#0b3b72),#0f6bb6 48%,var(--crm-sidebar-to,#0ea5e9))!important;
  border-right:1px solid rgba(255,255,255,.35)!important;
  box-shadow:18px 0 44px rgba(15,64,120,.18)!important;
}
body.crm-tech:not(.auth-locked) .brand{
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.26)!important;
}
body.crm-tech:not(.auth-locked) .brand h1{color:#fff!important}
body.crm-tech:not(.auth-locked) .brand p{color:#e0f2fe!important}
body.crm-tech:not(.auth-locked) .nav{
  color:#eff6ff!important;
  font-weight:900!important;
}
body.crm-tech:not(.auth-locked) .nav:hover,
body.crm-tech:not(.auth-locked) .nav.active{
  background:rgba(255,255,255,.20)!important;
  border-color:rgba(255,255,255,.26)!important;
  box-shadow:0 10px 22px rgba(5,46,100,.16)!important;
}
body.crm-tech:not(.auth-locked) .card,
body.crm-tech:not(.auth-locked) .kpi,
body.crm-tech:not(.auth-locked) .toolbar,
body.crm-tech:not(.auth-locked) .table-wrap,
body.crm-tech:not(.auth-locked) .project-info-card,
body.crm-tech:not(.auth-locked) .modal-box{
  background:#ffffff!important;
  color:#0f172a!important;
  border:1px solid #dbe7f5!important;
  box-shadow:0 16px 45px rgba(15,23,42,.08)!important;
  backdrop-filter:none!important;
}
body.crm-tech:not(.auth-locked) .card{
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
}
body.crm-tech:not(.auth-locked) .sync-status{
  background:linear-gradient(135deg,#eff6ff,#ecfeff)!important;
  color:#075985!important;
  border:1px solid #bae6fd!important;
  box-shadow:0 12px 30px rgba(14,116,144,.10)!important;
}
body.crm-tech:not(.auth-locked) .tech-dashboard-hero{
  background:
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.28), transparent 23%),
    linear-gradient(135deg,#0b6bcb,#0ea5e9 48%,#14b8a6)!important;
  color:#fff!important;
  box-shadow:0 20px 54px rgba(14,116,144,.23)!important;
}
body.crm-tech:not(.auth-locked) .tech-dashboard-hero h2,
body.crm-tech:not(.auth-locked) .tech-dashboard-hero p{
  color:#fff!important;
}
body.crm-tech:not(.auth-locked) .kpi{
  color:#fff!important;
  border:0!important;
}
body.crm-tech:not(.auth-locked) .kpi span,
body.crm-tech:not(.auth-locked) .kpi strong{
  color:#fff!important;
}
body.crm-tech:not(.auth-locked) .kpi-customers{background:linear-gradient(135deg,#2563eb,#38bdf8)!important}
body.crm-tech:not(.auth-locked) .kpi-projects{background:linear-gradient(135deg,#0f766e,#2dd4bf)!important}
body.crm-tech:not(.auth-locked) .kpi-docs{background:linear-gradient(135deg,#7c3aed,#a78bfa)!important}
body.crm-tech:not(.auth-locked) .kpi-deals{background:linear-gradient(135deg,#f97316,#fbbf24)!important}
body.crm-tech:not(.auth-locked) .kpi-revenue{background:linear-gradient(135deg,#0ea5e9,#2563eb)!important}
body.crm-tech:not(.auth-locked) .kpi-staff{background:linear-gradient(135deg,#16a34a,#22c55e)!important}
body.crm-tech:not(.auth-locked) .hero-card{
  background:linear-gradient(135deg,#ffffff,#f0f9ff)!important;
}
body.crm-tech:not(.auth-locked) th{
  background:linear-gradient(135deg,#e0f2fe,#ccfbf1)!important;
  color:#075985!important;
}
body.crm-tech:not(.auth-locked) td{
  color:#1e293b!important;
  border-bottom-color:#e5edf5!important;
}
body.crm-tech:not(.auth-locked) tr:hover td{
  background:#f8fafc!important;
}
body.crm-tech:not(.auth-locked) input,
body.crm-tech:not(.auth-locked) select,
body.crm-tech:not(.auth-locked) textarea{
  background:#ffffff!important;
  color:#0f172a!important;
  border:1px solid #cbddeb!important;
}
body.crm-tech:not(.auth-locked) input::placeholder,
body.crm-tech:not(.auth-locked) textarea::placeholder{
  color:#94a3b8!important;
}
body.crm-tech:not(.auth-locked) .btn.secondary{
  background:#e0f7ff!important;
  color:#075985!important;
  border:1px solid #bae6fd!important;
}
body.crm-tech:not(.auth-locked) .btn.secondary:hover{
  background:#cffafe!important;
}
body.crm-tech:not(.auth-locked) .auth-badge{
  background:#ecfeff!important;
  color:#0f766e!important;
  border:1px solid #99f6e4!important;
}
body.crm-tech:not(.auth-locked) .mini-badge{
  background:#ecfeff!important;
  color:#0f766e!important;
  border:1px solid #99f6e4!important;
}
body.crm-tech:not(.auth-locked) .empty-card,
body.crm-tech:not(.auth-locked) .list .item{
  background:#f8fafc!important;
  border-color:#dbe7f5!important;
  color:#334155!important;
}
body.crm-tech:not(.auth-locked) .modal{
  background:rgba(15,23,42,.52)!important;
}

@media(max-width:1100px){
  .login-tech-visual{display:none!important}
}


/* =========================================================
   THEME CUSTOMIZER FIX 2026-06-26
   - Chữ không chìm
   - Upload logo
   - Tùy biến màu nút / bảng / progress
   ========================================================= */
body.crm-tech:not(.auth-locked){
  color:var(--crm-text-color,#0f172a)!important;
}
body.crm-tech:not(.auth-locked) .main{
  background:
    radial-gradient(circle at 80px 110px, color-mix(in srgb, var(--crm-progress-from,#0ea5e9) 15%, transparent), transparent 24%),
    radial-gradient(circle at 90% 7%, color-mix(in srgb, var(--crm-progress-to,#22c55e) 14%, transparent), transparent 27%),
    linear-gradient(135deg,var(--crm-page-bg,#eef6ff),#f8fbff 62%,#ffffff)!important;
}
body.crm-tech:not(.auth-locked) .card,
body.crm-tech:not(.auth-locked) .toolbar,
body.crm-tech:not(.auth-locked) .table-wrap,
body.crm-tech:not(.auth-locked) .project-info-card,
body.crm-tech:not(.auth-locked) .modal-box,
body.crm-tech:not(.auth-locked) .hero-card{
  background:linear-gradient(180deg,var(--crm-card-bg,#ffffff),#fbfdff)!important;
  color:var(--crm-text-color,#0f172a)!important;
}
body.crm-tech:not(.auth-locked) .card *,
body.crm-tech:not(.auth-locked) .toolbar *,
body.crm-tech:not(.auth-locked) .table-wrap *,
body.crm-tech:not(.auth-locked) .project-info-card *,
body.crm-tech:not(.auth-locked) .modal-box *{
  text-shadow:none!important;
}
body.crm-tech:not(.auth-locked) .card h1,
body.crm-tech:not(.auth-locked) .card h2,
body.crm-tech:not(.auth-locked) .card h3,
body.crm-tech:not(.auth-locked) .card h4,
body.crm-tech:not(.auth-locked) .topbar h2,
body.crm-tech:not(.auth-locked) .page h2,
body.crm-tech:not(.auth-locked) .list b,
body.crm-tech:not(.auth-locked) .doc-card b,
body.crm-tech:not(.auth-locked) .news-feed-title,
body.crm-tech:not(.auth-locked) strong{
  color:var(--crm-text-color,#0f172a)!important;
}
body.crm-tech:not(.auth-locked) .muted,
body.crm-tech:not(.auth-locked) .hint,
body.crm-tech:not(.auth-locked) small,
body.crm-tech:not(.auth-locked) .card p,
body.crm-tech:not(.auth-locked) .doc-card p{
  color:var(--crm-muted-text,#475569)!important;
}
body.crm-tech:not(.auth-locked) .kpi,
body.crm-tech:not(.auth-locked) .kpi *,
body.crm-tech:not(.auth-locked) .tech-dashboard-hero,
body.crm-tech:not(.auth-locked) .tech-dashboard-hero *{
  color:var(--crm-kpi-text,#ffffff)!important;
}
body.crm-tech:not(.auth-locked) .kpi::before{
  opacity:.35!important;
}
body.crm-tech:not(.auth-locked) .kpi strong{
  color:var(--crm-kpi-text,#ffffff)!important;
  text-shadow:none!important;
}
body.crm-tech:not(.auth-locked) th,
body.crm-tech:not(.auth-locked) .table-wrap th,
body.crm-tech:not(.auth-locked) .sales-inventory-table th{
  background:linear-gradient(135deg,var(--crm-table-header-from,#e0f2fe),var(--crm-table-header-to,#ccfbf1))!important;
  color:var(--crm-table-header-text,#075985)!important;
  text-shadow:none!important;
}
body.crm-tech:not(.auth-locked) td,
body.crm-tech:not(.auth-locked) .table-wrap td,
body.crm-tech:not(.auth-locked) .sales-inventory-table td{
  color:var(--crm-text-color,#0f172a)!important;
}
body.crm-tech:not(.auth-locked) .btn,
body.crm-tech:not(.auth-locked) button.btn:not(.secondary):not(.danger):not(.success):not(.green):not(.small){
  background:var(--crm-primary-btn,#0b6bcb)!important;
  border-color:var(--crm-primary-btn,#0b6bcb)!important;
  color:#ffffff!important;
  text-shadow:none!important;
}
body.crm-tech:not(.auth-locked) .btn.secondary{
  background:var(--crm-secondary-btn,#e0f7ff)!important;
  border-color:color-mix(in srgb,var(--crm-secondary-btn,#e0f7ff) 70%,#0284c7)!important;
  color:var(--crm-secondary-btn-text,#075985)!important;
}
body.crm-tech:not(.auth-locked) .btn.green,
body.crm-tech:not(.auth-locked) .btn.success,
body.crm-tech:not(.auth-locked) .btn.accept-work{
  background:var(--crm-success-btn,#16a34a)!important;
  border-color:var(--crm-success-btn,#16a34a)!important;
  color:#fff!important;
}
body.crm-tech:not(.auth-locked) .btn.danger{
  background:color-mix(in srgb,var(--crm-danger-btn,#ef4444) 18%,#fff)!important;
  border-color:color-mix(in srgb,var(--crm-danger-btn,#ef4444) 40%,#fff)!important;
  color:var(--crm-danger-btn,#ef4444)!important;
}
body.crm-tech:not(.auth-locked) .progress span,
body.crm-tech:not(.auth-locked) .task-progress-bar span,
body.crm-tech:not(.auth-locked) .task-progress-line span,
body.crm-tech:not(.auth-locked) .bar-chart div,
body.crm-tech:not(.auth-locked) .progress-bar span,
body.crm-tech:not(.auth-locked) .kpi-progress span,
body.crm-tech:not(.auth-locked) [class*="progress"] span{
  background:linear-gradient(90deg,var(--crm-progress-from,#0ea5e9),var(--crm-progress-to,#22c55e))!important;
}
body.crm-tech:not(.auth-locked) .leader-bar,
body.crm-tech:not(.auth-locked) .sales-bar,
body.crm-tech:not(.auth-locked) .kpi-bar-fill{
  background:linear-gradient(90deg,var(--crm-progress-from,#0ea5e9),var(--crm-progress-to,#22c55e))!important;
}
body.crm-tech:not(.auth-locked) .badge,
body.crm-tech:not(.auth-locked) .mini-badge,
body.crm-tech:not(.auth-locked) .soft-tag{
  color:#075985!important;
  text-shadow:none!important;
}
body.crm-tech:not(.auth-locked) .news-feed-card,
body.crm-tech:not(.auth-locked) .doc-card,
body.crm-tech:not(.auth-locked) .task-list-item,
body.crm-tech:not(.auth-locked) .contract-template-card{
  background:#ffffff!important;
  color:var(--crm-text-color,#0f172a)!important;
  border-color:#dbe7f5!important;
}
body.crm-tech:not(.auth-locked) .news-feed-card p,
body.crm-tech:not(.auth-locked) .task-list-main p,
body.crm-tech:not(.auth-locked) .contract-template-card p{
  color:var(--crm-muted-text,#475569)!important;
}

/* Modal tùy biến giao diện */
.advanced-theme-modal{
  max-width:920px!important;
}
.advanced-theme-modal .hint-box{
  color:#0f172a!important;
  background:#eff6ff!important;
  border:1px solid #bfdbfe!important;
  line-height:1.45!important;
}
.theme-section-title{
  margin:18px 0 10px!important;
  color:#0f172a!important;
  font-size:16px!important;
  font-weight:1000!important;
  border-left:5px solid var(--crm-primary-btn,#0b6bcb)!important;
  padding-left:10px!important;
}
.theme-color-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.theme-color-grid label{
  display:grid!important;
  grid-template-columns:1fr 58px!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 12px!important;
  border:1px solid #dbe7f5!important;
  border-radius:14px!important;
  background:#ffffff!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
}
.theme-color-grid label span{
  color:#0f172a!important;
  font-weight:900!important;
  font-size:13px!important;
}
.theme-color-grid input[type="color"]{
  width:58px!important;
  height:38px!important;
  min-height:38px!important;
  padding:3px!important;
  border-radius:10px!important;
  cursor:pointer!important;
  background:#fff!important;
}
.advanced-theme-modal input[type="file"]{
  padding:11px!important;
  background:#ffffff!important;
  color:#0f172a!important;
}
.compact-actions{
  justify-content:flex-start!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  margin:6px 0 0!important;
}
.theme-save-actions{
  justify-content:flex-end!important;
}
#brandingLivePreview{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:92px!important;
  padding:16px!important;
  border-radius:18px!important;
}
#brandingLivePreview .preview-text{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}
#brandingLivePreview .preview-text b,
#brandingLivePreview .preview-text span{
  color:#ffffff!important;
}
#brandingLivePreview .preview-text em{
  display:inline-flex!important;
  width:max-content!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  color:#fff!important;
  font-style:normal!important;
  font-size:12px!important;
  font-weight:900!important;
}
#brandingLivePreview .preview-text i{
  display:block!important;
  width:220px!important;
  height:9px!important;
  border-radius:999px!important;
  margin-top:4px!important;
}
@media(max-width:900px){
  .theme-color-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .theme-color-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   FIX WIDGET / PROJECT / KPI / CLEAN CUSTOMIZER 2026-06-26
   ========================================================= */

/* #1 KPI/widget: lớp trang trí không đè chữ */
body.crm-tech:not(.auth-locked) .kpi{
  overflow:hidden!important;
  isolation:isolate!important;
}
body.crm-tech:not(.auth-locked) .kpi::before,
body.crm-tech:not(.auth-locked) .kpi::after{
  opacity:.12!important;
  z-index:0!important;
  pointer-events:none!important;
}
body.crm-tech:not(.auth-locked) .kpi::after{
  background:rgba(255,255,255,.13)!important;
}
body.crm-tech:not(.auth-locked) .kpi .kpi-body,
body.crm-tech:not(.auth-locked) .kpi span,
body.crm-tech:not(.auth-locked) .kpi strong{
  position:relative!important;
  z-index:3!important;
  opacity:1!important;
  color:var(--crm-kpi-text,#ffffff)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.18)!important;
}
body.crm-tech:not(.auth-locked) .kpi span{
  font-size:13px!important;
  line-height:1.2!important;
  max-width:118px!important;
}
body.crm-tech:not(.auth-locked) .kpi strong{
  font-size:28px!important;
  line-height:1!important;
}

/* #2 Project cards: chữ phụ trên header dự án giữ màu trắng */
body.crm-tech:not(.auth-locked) .project-card .project-banner,
body.crm-tech:not(.auth-locked) .project-card .project-card-header,
body.crm-tech:not(.auth-locked) .project-card .project-cover,
body.crm-tech:not(.auth-locked) .project-card .project-head,
body.crm-tech:not(.auth-locked) .project-card > .gradient,
body.crm-tech:not(.auth-locked) .compact-project-card .project-banner,
body.crm-tech:not(.auth-locked) .compact-project-card .project-card-header,
body.crm-tech:not(.auth-locked) .dashboard-project-card .project-banner,
body.crm-tech:not(.auth-locked) .dashboard-project-card .project-card-header{
  color:#ffffff!important;
}
body.crm-tech:not(.auth-locked) .project-card .project-banner *,
body.crm-tech:not(.auth-locked) .project-card .project-card-header *,
body.crm-tech:not(.auth-locked) .project-card .project-cover *,
body.crm-tech:not(.auth-locked) .project-card .project-head *,
body.crm-tech:not(.auth-locked) .compact-project-card .project-banner *,
body.crm-tech:not(.auth-locked) .compact-project-card .project-card-header *,
body.crm-tech:not(.auth-locked) .dashboard-project-card .project-banner *,
body.crm-tech:not(.auth-locked) .dashboard-project-card .project-card-header *{
  color:#ffffff!important;
  opacity:1!important;
  text-shadow:0 2px 10px rgba(0,0,0,.22)!important;
}
body.crm-tech:not(.auth-locked) .project-card h3,
body.crm-tech:not(.auth-locked) .project-card h4,
body.crm-tech:not(.auth-locked) .project-card .project-title{
  color:#ffffff!important;
}
body.crm-tech:not(.auth-locked) .project-card .muted,
body.crm-tech:not(.auth-locked) .project-card small,
body.crm-tech:not(.auth-locked) .project-card .project-location,
body.crm-tech:not(.auth-locked) .project-card .project-subtitle{
  color:#ffffff!important;
  opacity:.96!important;
}

/* #3 Danh sách KPI theo tháng: khung full cao, nền trắng như bảng trái */
body.crm-tech:not(.auth-locked) .kpi-period-panels{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
}
body.crm-tech:not(.auth-locked) .kpi-breakdown-panel,
body.crm-tech:not(.auth-locked) .kpi-progress-panel{
  min-height:720px!important;
  display:flex!important;
  flex-direction:column!important;
}
body.crm-tech:not(.auth-locked) .kpi-breakdown-panel{
  background:#ffffff!important;
}
body.crm-tech:not(.auth-locked) #kpiPeriodList{
  flex:1 1 auto!important;
  max-height:650px!important;
  overflow:auto!important;
  padding-right:8px!important;
  background:#ffffff!important;
  border-radius:16px!important;
}
body.crm-tech:not(.auth-locked) .kpi-period-list .kpi-period-item,
body.crm-tech:not(.auth-locked) #kpiPeriodList .kpi-period-item,
body.crm-tech:not(.auth-locked) #kpiPeriodList > div{
  background:#ffffff!important;
  color:var(--crm-text-color,#0f172a)!important;
  border:1px solid #dbe7f5!important;
  box-shadow:0 8px 22px rgba(15,23,42,.04)!important;
}
body.crm-tech:not(.auth-locked) #kpiPeriodList b,
body.crm-tech:not(.auth-locked) #kpiPeriodList strong,
body.crm-tech:not(.auth-locked) #kpiPeriodList span,
body.crm-tech:not(.auth-locked) #kpiPeriodList small{
  color:var(--crm-text-color,#0f172a)!important;
}
body.crm-tech:not(.auth-locked) #kpiPeriodList .muted,
body.crm-tech:not(.auth-locked) #kpiPeriodList small{
  color:var(--crm-muted-text,#475569)!important;
}
body.crm-tech:not(.auth-locked) .kpi-progress-table-wrap{
  flex:1 1 auto!important;
  max-height:650px!important;
  overflow:auto!important;
}

/* #4 Tùy biến giao diện gọn hơn, không rối mắt */
.clean-theme-modal{
  max-width:960px!important;
  padding:16px!important;
}
.clean-theme-modal .hint-box{
  padding:10px 12px!important;
  margin-bottom:12px!important;
  font-size:13px!important;
}
.clean-theme-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:14px!important;
}
.clean-theme-left,
.clean-theme-right{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
.clean-theme-modal .theme-section-title{
  margin:8px 0 2px!important;
  font-size:14px!important;
  padding-left:9px!important;
  border-left-width:4px!important;
}
.clean-theme-modal .field{
  gap:4px!important;
}
.clean-theme-modal .field label{
  font-size:12px!important;
  font-weight:900!important;
  color:#334155!important;
}
.clean-theme-modal input:not([type="color"]),
.clean-theme-modal select,
.clean-theme-modal textarea{
  min-height:38px!important;
  height:38px!important;
  padding:8px 10px!important;
  font-size:13px!important;
  border-radius:11px!important;
}
.clean-theme-modal input[type="file"]{
  min-height:42px!important;
  height:auto!important;
  padding:8px 10px!important;
}
.compact-brand-grid{
  gap:10px!important;
}
.clean-color-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.clean-color-grid label{
  min-height:42px!important;
  padding:7px 9px!important;
  border-radius:12px!important;
  grid-template-columns:1fr 44px!important;
}
.clean-color-grid label span{
  font-size:12px!important;
  color:#1f2937!important;
  line-height:1.15!important;
}
.clean-color-grid input[type="color"]{
  width:44px!important;
  height:30px!important;
  min-height:30px!important;
  border-radius:8px!important;
}
.advanced-color-details{
  margin-top:4px!important;
  border:1px solid #dbe7f5!important;
  border-radius:12px!important;
  background:#f8fafc!important;
  padding:8px 10px!important;
}
.advanced-color-details summary{
  cursor:pointer!important;
  color:#075985!important;
  font-weight:900!important;
  font-size:13px!important;
}
.compact-inside{
  margin-top:8px!important;
}
.clean-preview-row{
  margin-top:12px!important;
}
.clean-theme-modal #brandingLivePreview{
  min-height:74px!important;
  padding:12px!important;
  border-radius:16px!important;
}
.clean-theme-modal #brandingLivePreview .branding-preview-logo{
  width:48px!important;
  height:48px!important;
}
.clean-theme-modal #brandingLivePreview .preview-text b{
  font-size:15px!important;
}
.clean-theme-modal #brandingLivePreview .preview-text span{
  font-size:12px!important;
}
.clean-theme-modal #brandingLivePreview .preview-text em{
  padding:4px 8px!important;
  font-size:11px!important;
}
.clean-theme-modal #brandingLivePreview .preview-text i{
  width:160px!important;
  height:7px!important;
}
.clean-theme-modal .theme-save-actions{
  margin-top:10px!important;
  padding:10px 0 0!important;
  border-top:1px solid #e5edf5!important;
}
.clean-theme-modal .theme-save-actions .btn{
  min-height:38px!important;
  padding:8px 12px!important;
}
@media(max-width:980px){
  .clean-theme-layout{
    grid-template-columns:1fr!important;
  }
  body.crm-tech:not(.auth-locked) .kpi-period-panels{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:640px){
  .clean-color-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   FIX PROJECT TITLE / CLEAN CUSTOMIZER V2 / LOGIN FOOTER 2026-06-26
   ========================================================= */

/* #1 Tên dự án/vị trí trên header gradient luôn trắng sáng, in đậm */
body.crm-tech:not(.auth-locked) .project-card [class*="head"],
body.crm-tech:not(.auth-locked) .project-card [class*="banner"],
body.crm-tech:not(.auth-locked) .project-card [class*="cover"],
body.crm-tech:not(.auth-locked) .project-card [class*="hero"],
body.crm-tech:not(.auth-locked) .compact-project-card [class*="head"],
body.crm-tech:not(.auth-locked) .compact-project-card [class*="banner"],
body.crm-tech:not(.auth-locked) .dashboard-project-card [class*="head"],
body.crm-tech:not(.auth-locked) .dashboard-project-card [class*="banner"]{
  color:#ffffff!important;
}
body.crm-tech:not(.auth-locked) .project-card [class*="head"] *,
body.crm-tech:not(.auth-locked) .project-card [class*="banner"] *,
body.crm-tech:not(.auth-locked) .project-card [class*="cover"] *,
body.crm-tech:not(.auth-locked) .project-card [class*="hero"] *,
body.crm-tech:not(.auth-locked) .compact-project-card [class*="head"] *,
body.crm-tech:not(.auth-locked) .compact-project-card [class*="banner"] *,
body.crm-tech:not(.auth-locked) .dashboard-project-card [class*="head"] *,
body.crm-tech:not(.auth-locked) .dashboard-project-card [class*="banner"] *{
  color:#ffffff!important;
  opacity:1!important;
  text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
}
body.crm-tech:not(.auth-locked) .project-card h1,
body.crm-tech:not(.auth-locked) .project-card h2,
body.crm-tech:not(.auth-locked) .project-card h3,
body.crm-tech:not(.auth-locked) .project-card h4,
body.crm-tech:not(.auth-locked) .project-title,
body.crm-tech:not(.auth-locked) .project-name,
body.crm-tech:not(.auth-locked) .dashboard-project-title{
  color:#ffffff!important;
  font-weight:1000!important;
  opacity:1!important;
}
body.crm-tech:not(.auth-locked) .project-card .project-location,
body.crm-tech:not(.auth-locked) .project-card .project-subtitle,
body.crm-tech:not(.auth-locked) .project-card .project-address,
body.crm-tech:not(.auth-locked) .project-card .muted,
body.crm-tech:not(.auth-locked) .project-card small{
  color:#ffffff!important;
  font-weight:800!important;
  opacity:.98!important;
}

/* #2 Bố cục tùy biến màu gọn lại, bỏ ô link logo */
.clean-theme-modal-v2{
  max-width:920px!important;
  padding:16px!important;
  margin:0 auto!important;
}
.clean-theme-modal-v2 .theme-top-note{
  width:100%!important;
  box-sizing:border-box!important;
  padding:10px 12px!important;
  border-radius:12px!important;
  background:#eff6ff!important;
  border:1px solid #bfdbfe!important;
  color:#0f172a!important;
  font-size:13px!important;
  line-height:1.4!important;
  margin-bottom:12px!important;
}
.theme-v2-grid{
  display:grid!important;
  grid-template-columns:1fr 1.15fr!important;
  gap:14px!important;
  align-items:start!important;
}
.theme-v2-panel{
  border:1px solid #dbe7f5!important;
  background:#ffffff!important;
  border-radius:16px!important;
  padding:12px!important;
  box-shadow:0 8px 24px rgba(15,23,42,.04)!important;
}
.theme-v2-panel h4{
  margin:0 0 10px!important;
  color:#0f172a!important;
  font-size:15px!important;
  font-weight:1000!important;
  border-left:4px solid var(--crm-primary-btn,#0b6bcb)!important;
  padding-left:9px!important;
}
.brand-logo-preview-box{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#eff6ff,#ecfeff)!important;
  border:1px solid #dbeafe!important;
  margin-bottom:10px!important;
}
.brand-logo-preview-icon{
  width:48px!important;
  height:48px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 6px 18px rgba(15,23,42,.08)!important;
}
.brand-logo-preview-icon img{width:100%!important;height:100%!important;object-fit:contain!important;padding:5px!important}
.brand-logo-preview-box b{
  display:block!important;
  color:#0f172a!important;
  font-size:15px!important;
  line-height:1.2!important;
}
.brand-logo-preview-box span{
  display:block!important;
  color:#64748b!important;
  font-size:12px!important;
  margin-top:3px!important;
}
.theme-field-row{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:center!important;
  margin-bottom:9px!important;
}
.theme-field-row.full{
  grid-template-columns:112px minmax(0,1fr)!important;
}
.theme-field-row label{
  color:#334155!important;
  font-weight:900!important;
  font-size:12px!important;
}
.theme-field-row input:not([type="color"]){
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  padding:8px 10px!important;
  border-radius:11px!important;
  border:1px solid #cbddeb!important;
  background:#fff!important;
  color:#0f172a!important;
  box-sizing:border-box!important;
}
.theme-field-row input[type="file"]{
  height:auto!important;
  min-height:40px!important;
  padding:7px!important;
  border-radius:11px!important;
  border:1px solid #cbddeb!important;
  background:#fff!important;
  color:#0f172a!important;
  box-sizing:border-box!important;
}
.theme-palette-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:12px!important;
}
.theme-palette-grid label{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  gap:7px!important;
  align-items:center!important;
  min-height:40px!important;
  padding:7px 8px!important;
  background:#f8fafc!important;
  border:1px solid #dbe7f5!important;
  border-radius:12px!important;
}
.theme-palette-grid label span{
  color:#1e293b!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.15!important;
}
.theme-palette-grid input[type="color"]{
  width:42px!important;
  height:28px!important;
  min-height:28px!important;
  padding:2px!important;
  border-radius:8px!important;
  cursor:pointer!important;
}
.theme-preview-panel{
  margin-top:12px!important;
}
.clean-theme-modal-v2 #brandingLivePreview{
  min-height:72px!important;
  border-radius:16px!important;
  padding:12px!important;
}
.clean-theme-modal-v2 #brandingLivePreview .branding-preview-logo{
  width:48px!important;
  height:48px!important;
}
.clean-theme-modal-v2 #brandingLivePreview .preview-text b{font-size:15px!important}
.clean-theme-modal-v2 #brandingLivePreview .preview-text span{font-size:12px!important}
.clean-theme-modal-v2 #brandingLivePreview .preview-text em{padding:4px 8px!important;font-size:11px!important}
.clean-theme-modal-v2 #brandingLivePreview .preview-text i{width:160px!important;height:7px!important}
.v2-actions{
  margin-top:10px!important;
  padding-top:10px!important;
  border-top:1px solid #e5edf5!important;
  justify-content:flex-end!important;
}
.v2-actions .btn{
  min-height:38px!important;
  padding:8px 13px!important;
}
.advanced-color-details{
  margin-top:0!important;
  background:#f8fafc!important;
}

/* #3 Bỏ dòng quên mật khẩu/đăng ký và hint dưới login */
.login-links,
.login-save-hint{
  display:none!important;
}
.login-card{
  padding-bottom:28px!important;
}

@media(max-width:880px){
  .theme-v2-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:560px){
  .theme-field-row{
    grid-template-columns:1fr!important;
  }
  .theme-palette-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   FINAL FIX 2026-06-26: Project title white / Customizer width / Login username
   ========================================================= */

/* #1: Ép đúng class project-info-card/project-banner đang dùng */
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner *,
body.crm-tech:not(.auth-locked) .project-info-card .project-banner,
body.crm-tech:not(.auth-locked) .project-info-card .project-banner *,
body.crm-tech:not(.auth-locked) #projectCards .project-banner,
body.crm-tech:not(.auth-locked) #projectCards .project-banner *,
body.crm-tech:not(.auth-locked) .project-grid .project-banner,
body.crm-tech:not(.auth-locked) .project-grid .project-banner *{
  color:#ffffff!important;
  opacity:1!important;
  text-shadow:0 2px 14px rgba(0,0,0,.38)!important;
}
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner h1,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner h2,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner h3,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner h4,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner .project-banner-title,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner .project-banner-title h4{
  color:#ffffff!important;
  font-weight:1000!important;
  opacity:1!important;
  text-shadow:0 3px 16px rgba(0,0,0,.42)!important;
}
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner p,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner small,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner .project-banner-title p,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner .project-banner-type{
  color:#ffffff!important;
  font-weight:900!important;
  opacity:.98!important;
}
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner-topline .badge,
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner-topline span{
  color:#ffffff!important;
}

/* #2: Popup tùy biến giao diện không bị bóp/chèn ô */
.modal:has(.clean-theme-modal-v2) .modal-box{
  width:min(1120px,96vw)!important;
  max-width:1120px!important;
}
#modalForm > .clean-theme-modal-v2{
  grid-column:1 / -1!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.clean-theme-modal-v2{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
.clean-theme-modal-v2 *{
  box-sizing:border-box!important;
}
.clean-theme-modal-v2 .theme-v2-grid{
  grid-template-columns:minmax(360px,.95fr) minmax(460px,1.15fr)!important;
  gap:18px!important;
  width:100%!important;
}
.clean-theme-modal-v2 .theme-v2-panel{
  min-width:0!important;
  overflow:visible!important;
}
.clean-theme-modal-v2 .theme-field-row{
  grid-template-columns:120px minmax(0,1fr)!important;
  gap:10px!important;
}
.clean-theme-modal-v2 .theme-field-row label{
  white-space:normal!important;
  line-height:1.2!important;
}
.clean-theme-modal-v2 .theme-field-row input:not([type="color"]){
  min-width:0!important;
  width:100%!important;
}
.clean-theme-modal-v2 .theme-palette-grid{
  grid-template-columns:repeat(2,minmax(190px,1fr))!important;
  gap:10px!important;
}
.clean-theme-modal-v2 .theme-palette-grid label{
  min-width:0!important;
  grid-template-columns:minmax(0,1fr) 48px!important;
  padding:8px 10px!important;
}
.clean-theme-modal-v2 .theme-palette-grid label span{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.clean-theme-modal-v2 .theme-palette-grid input[type="color"]{
  width:48px!important;
  height:32px!important;
  min-width:48px!important;
}
.clean-theme-modal-v2 .brand-logo-preview-box{
  min-height:84px!important;
}
.clean-theme-modal-v2 .theme-preview-panel{
  width:100%!important;
}
.clean-theme-modal-v2 #brandingLivePreview{
  width:100%!important;
}
@media(max-width:1050px){
  .clean-theme-modal-v2 .theme-v2-grid{
    grid-template-columns:1fr!important;
  }
  .modal:has(.clean-theme-modal-v2) .modal-box{
    width:min(760px,96vw)!important;
  }
}
@media(max-width:620px){
  .clean-theme-modal-v2 .theme-field-row{
    grid-template-columns:1fr!important;
  }
  .clean-theme-modal-v2 .theme-palette-grid{
    grid-template-columns:1fr!important;
  }
}

/* #3: Login đổi sang Tên đăng nhập, bỏ các dòng phụ đã xóa/hide */
.login-links,
.login-save-hint{
  display:none!important;
}


/* =========================================================
   FIX TOP SALES & TOPBAR MENU 2026-06-26
   ========================================================= */

/* #1 Bỏ nền màu chèn dưới chữ tên và số trong Top doanh số/KPI */
#leaderBarChart .bar-row,
.bar-chart .bar-row{
  display:grid!important;
  grid-template-columns:minmax(150px,210px) minmax(180px,1fr) minmax(80px,120px)!important;
  gap:12px!important;
  align-items:center!important;
  position:relative!important;
}
#leaderBarChart .bar-name,
.bar-chart .bar-name,
#leaderBarChart .bar-value,
.bar-chart .bar-value,
.kpi-progress-list .kpi-line b,
.kpi-progress-list .kpi-line span,
#leaderKpiList .kpi-line b,
#leaderKpiList .kpi-line span{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  padding:0!important;
  color:#0f172a!important;
  text-shadow:none!important;
  position:relative!important;
  z-index:3!important;
}
#leaderBarChart .bar-value,
.bar-chart .bar-value,
.kpi-progress-list .kpi-line span,
#leaderKpiList .kpi-line span{
  color:#0f766e!important;
  font-weight:1000!important;
  text-align:right!important;
}
#leaderBarChart .bar-track,
.bar-chart .bar-track{
  grid-column:2!important;
  position:relative!important;
  z-index:1!important;
  height:12px!important;
  background:#e5e7eb!important;
  border-radius:999px!important;
  overflow:hidden!important;
}
#leaderBarChart .bar-fill,
.bar-chart .bar-fill{
  position:relative!important;
  z-index:1!important;
  height:100%!important;
  background:linear-gradient(90deg,var(--crm-progress-from,#0ea5e9),var(--crm-progress-to,#22c55e))!important;
  border-radius:999px!important;
}
#leaderKpiList .progress.wide,
.kpi-progress-list .progress.wide{
  height:12px!important;
  background:#e5e7eb!important;
  border-radius:999px!important;
  overflow:hidden!important;
}
#leaderKpiList .progress.wide span,
.kpi-progress-list .progress.wide span{
  background:linear-gradient(90deg,var(--crm-progress-from,#0ea5e9),var(--crm-progress-to,#22c55e))!important;
}
@media(max-width:900px){
  #leaderBarChart .bar-row,
  .bar-chart .bar-row{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  #leaderBarChart .bar-value,
  .bar-chart .bar-value{
    text-align:left!important;
  }
}

/* #2 Thanh menu đầu chia 2 hàng gọn hơn */
.topbar{
  align-items:flex-start!important;
  gap:16px!important;
}
.topbar-actions-v2{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:auto!important;
  max-width:100%!important;
}
.topbar-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  flex-wrap:wrap!important;
  width:100%!important;
}
.topbar-main-row{
  order:1!important;
}
.topbar-tools-row{
  order:2!important;
}
.topbar-main-row .notify-btn,
.topbar-main-row .auth-badge,
.topbar-main-row .topbar-logout{
  min-height:42px!important;
  font-size:14px!important;
  font-weight:1000!important;
  border-radius:15px!important;
}
.topbar-main-row .auth-badge{
  max-width:360px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.topbar-tools-row .btn,
.topbar-tools-row .file-label{
  min-height:34px!important;
  padding:7px 11px!important;
  font-size:12px!important;
  border-radius:12px!important;
  box-shadow:0 6px 16px rgba(14,116,144,.08)!important;
}
.topbar-tools-row .btn.danger{
  padding:7px 12px!important;
}
.topbar-main-row .notify-wrap{
  position:relative!important;
}
.topbar-main-row .notify-panel{
  right:0!important;
  left:auto!important;
}
@media(max-width:1180px){
  .topbar{
    display:block!important;
  }
  .topbar-actions-v2{
    align-items:flex-start!important;
    margin-top:12px!important;
  }
  .topbar-row{
    justify-content:flex-start!important;
  }
}
@media(max-width:720px){
  .topbar-main-row .notify-btn,
  .topbar-main-row .auth-badge,
  .topbar-main-row .topbar-logout,
  .topbar-tools-row .btn,
  .topbar-tools-row .file-label{
    width:auto!important;
    max-width:100%!important;
  }
}


/* FIX 2026-06-26: hero title white only */
body.crm-tech:not(.auth-locked) .tech-dashboard-hero h2,
body .tech-dashboard-hero h2{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:0 2px 10px rgba(15,23,42,.14);
}


/* =========================================================
   FIX 2026-06-26: KPI numbers full + equal widgets + news detail popup
   ========================================================= */
body.crm-tech:not(.auth-locked) .dashboard-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}
body.crm-tech:not(.auth-locked) .dashboard-kpi-grid .kpi{
  min-height:118px!important;
  height:100%!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  padding:18px 18px!important;
  border-radius:22px!important;
}
body.crm-tech:not(.auth-locked) .dashboard-kpi-grid .kpi .kpi-body{
  width:100%!important;
  min-width:0!important;
  gap:8px!important;
}
body.crm-tech:not(.auth-locked) .dashboard-kpi-grid .kpi span{
  color:#ffffff!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  max-width:none!important;
}
body.crm-tech:not(.auth-locked) .dashboard-kpi-grid .kpi strong{
  display:block!important;
  width:100%!important;
  color:#ffffff!important;
  font-size:clamp(18px,1.8vw,26px)!important;
  line-height:1.08!important;
  letter-spacing:-.01em!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:break-word!important;
}
body.crm-tech:not(.auth-locked) .dashboard-kpi-grid .kpi-revenue strong{
  font-size:clamp(17px,1.55vw,23px)!important;
}
@media (max-width:1500px){
  body.crm-tech:not(.auth-locked) .dashboard-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (max-width:900px){
  body.crm-tech:not(.auth-locked) .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  body.crm-tech:not(.auth-locked) .dashboard-kpi-grid .kpi{min-height:106px!important;}
}
@media (max-width:560px){
  body.crm-tech:not(.auth-locked) .dashboard-kpi-grid{grid-template-columns:1fr!important;}
}

.dashboard-news-clickable{cursor:pointer!important;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;}
.dashboard-news-clickable:hover{transform:translateY(-2px)!important;box-shadow:0 18px 36px rgba(15,23,42,.12)!important;border-color:#93c5fd!important;}
.dashboard-news-social-wrap,.dashboard-news-actions{position:relative!important;z-index:3!important;}

#dashboardNewsDetailModal .dashboard-news-detail-modal-box{
  width:min(1100px,96vw)!important;
  max-height:92vh!important;
  overflow:auto!important;
}
#dashboardNewsDetailModal .dashboard-news-detail-content{padding:20px!important;}
#dashboardNewsDetailModal .dashboard-news-detail-grid{
  display:grid!important;
  grid-template-columns:minmax(340px,440px) minmax(0,1fr)!important;
  gap:20px!important;
  align-items:start!important;
}
#dashboardNewsDetailModal .dashboard-news-detail-media{
  border-radius:22px!important;
  overflow:hidden!important;
  background:#0f172a!important;
  min-height:420px!important;
}
#dashboardNewsDetailModal .dashboard-news-detail-media img,
#dashboardNewsDetailModal .dashboard-news-detail-media video,
#dashboardNewsDetailModal .dashboard-news-detail-media iframe,
#dashboardNewsDetailModal .dashboard-news-detail-media .dashboard-news-no-media{
  width:100%!important;
  height:100%!important;
  min-height:420px!important;
  object-fit:cover!important;
  display:block!important;
  border:0!important;
}
#dashboardNewsDetailModal .dashboard-news-detail-body{display:flex!important;flex-direction:column!important;gap:14px!important;min-width:0!important;}
#dashboardNewsDetailModal .dashboard-news-detail-meta{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;}
#dashboardNewsDetailModal .dashboard-news-detail-meta span{display:inline-flex!important;align-items:center!important;padding:7px 12px!important;border-radius:999px!important;background:#0f766e!important;color:#fff!important;font-size:12px!important;font-weight:900!important;}
#dashboardNewsDetailModal .dashboard-news-detail-meta time{color:#64748b!important;font-size:13px!important;font-weight:800!important;}
#dashboardNewsDetailModal .dashboard-news-detail-body h2{margin:0!important;color:#0f172a!important;font-size:32px!important;line-height:1.2!important;font-weight:900!important;}
#dashboardNewsDetailModal .dashboard-news-detail-author{color:#0f766e!important;font-size:15px!important;font-weight:700!important;}
#dashboardNewsDetailModal .dashboard-news-detail-text{color:#334155!important;font-size:16px!important;line-height:1.7!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:18px!important;padding:16px!important;}
#dashboardNewsDetailModal .dashboard-news-detail-social .news-social-box{border:1px solid #e2e8f0!important;border-radius:18px!important;padding:14px!important;background:#fff!important;}
#dashboardNewsDetailModal .dashboard-news-detail-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;}
@media(max-width:900px){
  #dashboardNewsDetailModal .dashboard-news-detail-grid{grid-template-columns:1fr!important;}
  #dashboardNewsDetailModal .dashboard-news-detail-media,
  #dashboardNewsDetailModal .dashboard-news-detail-media img,
  #dashboardNewsDetailModal .dashboard-news-detail-media video,
  #dashboardNewsDetailModal .dashboard-news-detail-media iframe,
  #dashboardNewsDetailModal .dashboard-news-detail-media .dashboard-news-no-media{min-height:280px!important;}
  #dashboardNewsDetailModal .dashboard-news-detail-body h2{font-size:24px!important;}
  #dashboardNewsDetailModal .dashboard-news-detail-text{font-size:15px!important;}
}


/* =========================================================
   FIX 2026-06-26: badge dự án đẹp hơn + chat online/offline + chat riêng
   ========================================================= */
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner-topline .badge{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  color:#0f172a!important;
  backdrop-filter:blur(10px)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
  text-shadow:none!important;
}
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner-topline .badge.project-selling{
  background:linear-gradient(135deg,#fff7db,#ffe7a6)!important;
  color:#9a5a00!important;
  border-color:#f3cd69!important;
}
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner-topline .badge.project-launch{
  background:linear-gradient(135deg,#effef4,#dcfce7)!important;
  color:#166534!important;
  border-color:#86efac!important;
}
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner-topline .badge.project-implement{
  background:linear-gradient(135deg,#eef6ff,#dbeafe)!important;
  color:#1d4ed8!important;
  border-color:#93c5fd!important;
}
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner-topline .badge.project-upcoming{
  background:linear-gradient(135deg,#f5f3ff,#ede9fe)!important;
  color:#6d28d9!important;
  border-color:#c4b5fd!important;
}
body.crm-tech:not(.auth-locked) .project-info-card.with-banner .project-banner-topline .badge.project-media{
  background:linear-gradient(135deg,#fff1f8,#fce7f3)!important;
  color:#be185d!important;
  border-color:#f9a8d4!important;
}

.community-chat-tabs{
  display:flex!important;gap:8px!important;padding:12px 16px 0!important;flex-wrap:wrap!important;
}
.community-chat-tab{
  border:1px solid #cbd5e1!important;background:#f8fafc!important;color:#334155!important;border-radius:999px!important;
  padding:8px 14px!important;font-size:13px!important;font-weight:800!important;cursor:pointer!important;
}
.community-chat-tab.active{background:linear-gradient(135deg,#0ea5e9,#2563eb)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 22px rgba(37,99,235,.22)!important;}
.community-chat-panel{display:block!important;}
.community-chat-panel.hidden{display:none!important;}
.community-chat-staff-note{margin:12px 16px 8px!important;padding:10px 12px!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:14px!important;color:#475569!important;font-size:13px!important;line-height:1.5!important;}
.community-chat-staff-list{display:flex!important;flex-direction:column!important;gap:10px!important;padding:0 16px 12px!important;max-height:360px!important;overflow:auto!important;}
.community-chat-staff-item{display:grid!important;grid-template-columns:52px minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;padding:12px!important;border:1px solid #dbeafe!important;border-radius:16px!important;background:#fff!important;box-shadow:0 6px 18px rgba(15,23,42,.05)!important;}
.community-chat-staff-avatar{width:52px!important;height:52px!important;border-radius:16px!important;background:linear-gradient(135deg,#e0f2fe,#d1fae5)!important;display:grid!important;place-items:center!important;overflow:hidden!important;font-weight:900!important;color:#0f766e!important;}
.community-chat-staff-avatar .avatar-photo-crop,.community-chat-staff-avatar .avatar-photo-crop img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;}
.community-chat-staff-body{min-width:0!important;display:flex!important;flex-direction:column!important;gap:4px!important;}
.community-chat-staff-name-row{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;}
.community-chat-staff-name-row b{font-size:14px!important;color:#0f172a!important;}
.community-chat-staff-meta{font-size:12px!important;color:#64748b!important;line-height:1.45!important;}
.community-chat-staff-status{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:5px 10px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;}
.community-chat-staff-status.online{background:#dcfce7!important;color:#166534!important;}
.community-chat-staff-status.offline{background:#f1f5f9!important;color:#475569!important;}
.community-chat-staff-actions{display:flex!important;align-items:center!important;gap:8px!important;}
.community-chat-self-pill{display:inline-flex!important;padding:7px 11px!important;border-radius:999px!important;background:#e0f2fe!important;color:#0369a1!important;font-size:12px!important;font-weight:800!important;}
.community-chat-dm-target{padding:12px 16px 0!important;}
.community-chat-dm-target-card{display:grid!important;grid-template-columns:52px minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;background:linear-gradient(135deg,#eff6ff,#ecfeff)!important;border:1px solid #bfdbfe!important;border-radius:18px!important;padding:12px!important;}
.community-chat-dm-target-body{min-width:0!important;display:flex!important;flex-direction:column!important;gap:4px!important;}
.community-chat-dm-target-body b{color:#0f172a!important;font-size:15px!important;}
.community-chat-dm-target-body span{color:#475569!important;font-size:12px!important;line-height:1.45!important;}
.community-chat-dm-target-status{display:inline-flex!important;align-items:center!important;padding:6px 10px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;white-space:nowrap!important;}
.community-chat-dm-target-status.online{background:#dcfce7!important;color:#166534!important;}
.community-chat-dm-target-status.offline{background:#f1f5f9!important;color:#475569!important;}
.community-chat-private-list{margin-top:12px!important;}
@media (max-width:768px){
  .community-chat-staff-item,.community-chat-dm-target-card{grid-template-columns:46px minmax(0,1fr)!important;}
  .community-chat-staff-actions,.community-chat-dm-target-status{grid-column:1 / -1!important;justify-self:flex-start!important;}
}


/* =========================================================
   FIX 2026-06-26: chấm online, âm báo chat riêng, lọc team/phòng ban
   ========================================================= */
.community-chat-staff-filter{
  padding:0 16px 10px!important;
}
.community-chat-staff-filter select{
  width:100%!important;
  min-height:40px!important;
  border-radius:13px!important;
  border:1px solid #cbd5e1!important;
  background:#ffffff!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:800!important;
  padding:8px 12px!important;
}
.community-chat-staff-avatar{
  position:relative!important;
}
.presence-dot{
  position:absolute!important;
  right:-1px!important;
  bottom:-1px!important;
  width:14px!important;
  height:14px!important;
  border-radius:999px!important;
  border:3px solid #ffffff!important;
  box-shadow:0 4px 10px rgba(15,23,42,.2)!important;
}
.presence-dot.online{
  background:#22c55e!important;
}
.presence-dot.offline{
  background:#94a3b8!important;
}
.community-chat-staff-item.online{
  border-color:#bbf7d0!important;
  background:linear-gradient(135deg,#ffffff,#f0fdf4)!important;
}
.community-chat-staff-item.offline{
  border-color:#e2e8f0!important;
  background:#ffffff!important;
}
.community-chat-dm-unread{
  min-width:24px!important;
  height:24px!important;
  padding:0 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#ef4444!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:1000!important;
  box-shadow:0 8px 18px rgba(239,68,68,.24)!important;
}
.community-chat-tab#communityChatTabPrivate::after{
  content:''; 
}
.community-chat-private-list .community-chat-msg{
  max-width:88%!important;
}
.community-chat-private-list .community-chat-msg.mine{
  margin-left:auto!important;
}
@media(max-width:640px){
  .community-chat-staff-filter{
    padding:0 12px 8px!important;
  }
  .presence-dot{
    width:12px!important;
    height:12px!important;
    border-width:2px!important;
  }
}


/* =========================================================
   FIX 2026-06-26: sửa lỗi khung Chat cộng đồng / ô nhập bị méo
   ========================================================= */
.community-chat-popup{
  position:fixed!important;
  right:24px!important;
  bottom:88px!important;
  width:min(480px, calc(100vw - 32px))!important;
  height:auto!important;
  max-height:min(78vh, 760px)!important;
  min-height:420px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:#ffffff!important;
  border:1px solid #b7e6e4!important;
  box-shadow:0 24px 70px rgba(15,23,42,.24)!important;
  z-index:9999!important;
}
.community-chat-popup.hidden{
  display:none!important;
}
.community-chat-head{
  flex:0 0 auto!important;
  min-height:68px!important;
  padding:14px 16px!important;
  border-bottom:1px solid #e2e8f0!important;
  background:linear-gradient(135deg,#ecfeff,#f8fafc)!important;
}
.community-chat-head h3{
  margin:0!important;
  color:#0f172a!important;
  font-size:18px!important;
  line-height:1.2!important;
}
.community-chat-head p{
  margin:3px 0 0!important;
  color:#64748b!important;
  font-size:12px!important;
}
.community-chat-tabs{
  flex:0 0 auto!important;
  padding:10px 12px 6px!important;
  background:#ffffff!important;
}
.community-chat-panel{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
.community-chat-panel.hidden{
  display:none!important;
}
#communityChatCommunityPanel.active,
#communityChatPrivatePanel.active,
#communityChatStaffPanel.active{
  display:flex!important;
}
.community-chat-list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px 14px!important;
  scroll-behavior:smooth!important;
  background:#ffffff!important;
}
.community-chat-staff-list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 14px 12px!important;
}
.community-chat-media-preview{
  flex:0 0 auto!important;
  max-height:96px!important;
  overflow:auto!important;
  padding:8px 12px!important;
  border-top:1px solid #e2e8f0!important;
  background:#f8fafc!important;
}
.community-chat-compose{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)64px!important;
  align-items:end!important;
  gap:8px!important;
  padding:10px 12px!important;
  background:#ffffff!important;
  border-top:1px solid #dbe7f5!important;
  box-shadow:0 -8px 22px rgba(15,23,42,.05)!important;
}
.community-chat-attach-btn,
.community-chat-send-btn{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  border-radius:13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  padding:0!important;
  margin:0!important;
  white-space:nowrap!important;
}
.community-chat-send-btn{
  background:#16a34a!important;
  color:#ffffff!important;
  font-weight:900!important;
  border:0!important;
}
.community-chat-attach-btn{
  background:#ecfeff!important;
  color:#0f766e!important;
  border:1px solid #99f6e4!important;
}
.community-chat-attach-btn span{
  font-size:20px!important;
  line-height:1!important;
}
#communityChatInput{
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  max-height:94px!important;
  resize:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-radius:13px!important;
  border:1px solid #99f6e4!important;
  background:#ffffff!important;
  color:#0f172a!important;
  font-size:14px!important;
  line-height:1.35!important;
  padding:12px 12px!important;
  box-sizing:border-box!important;
  outline:none!important;
}
#communityChatInput:focus{
  border-color:#14b8a6!important;
  box-shadow:0 0 0 3px rgba(20,184,166,.14)!important;
}
#communityChatInput::placeholder{
  color:#94a3b8!important;
  font-size:13px!important;
}
.community-chat-msg{
  max-width:88%!important;
  margin-bottom:10px!important;
  border-radius:16px!important;
  padding:11px 12px!important;
  box-sizing:border-box!important;
  word-break:break-word!important;
}
.community-chat-msg.mine{
  margin-left:auto!important;
}
.community-chat-msg-head{
  gap:8px!important;
  align-items:flex-start!important;
}
.community-chat-author{
  max-width:230px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.community-chat-time{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
.community-chat-text{
  color:#0f172a!important;
  line-height:1.45!important;
  font-size:14px!important;
}
.community-chat-widget{
  z-index:9998!important;
}
@media(max-width:640px){
  .community-chat-popup{
    right:10px!important;
    left:10px!important;
    bottom:78px!important;
    width:auto!important;
    min-height:380px!important;
    max-height:78vh!important;
    border-radius:18px!important;
  }
  .community-chat-compose{
    grid-template-columns:42px minmax(0,1fr)56px!important;
    gap:6px!important;
    padding:8px!important;
  }
  .community-chat-attach-btn,
  .community-chat-send-btn,
  #communityChatInput{
    height:42px!important;
    min-height:42px!important;
  }
  .community-chat-msg{
    max-width:94%!important;
  }
}


/* =========================================================
   FIX 2026-06-26: upload logo không mất hình + phóng lớn logo chính
   ========================================================= */
.login-brand-logo,
#loginBrandLogoText{
  width:112px!important;
  height:112px!important;
  min-width:112px!important;
  min-height:112px!important;
  border-radius:28px!important;
  padding:10px!important;
  margin-bottom:18px!important;
  box-shadow:0 22px 52px rgba(59,130,246,.38), inset 0 0 0 2px rgba(255,255,255,.62)!important;
}
.login-brand-logo img,
#loginBrandLogoText img,
.login-logo-img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
.brand-logo,
#brandLogoText{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  border-radius:18px!important;
  padding:6px!important;
  overflow:hidden!important;
}
.brand-logo img,
#brandLogoText img,
.brand-logo-img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
.brand-logo-preview-icon{
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  min-height:72px!important;
  padding:7px!important;
}
.brand-logo-preview-icon img,
.preview-logo-img,
.branding-preview-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
.brand-logo-preview-box{
  grid-template-columns:72px minmax(0,1fr)!important;
  align-items:center!important;
}
#brandingLivePreview .branding-preview-logo{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  border-radius:18px!important;
  background:#ffffff!important;
  display:grid!important;
  place-items:center!important;
  padding:7px!important;
  overflow:hidden!important;
}
#brandingLivePreview .branding-preview-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
@media(max-width:640px){
  .login-brand-logo,
  #loginBrandLogoText{
    width:92px!important;
    height:92px!important;
    min-width:92px!important;
    min-height:92px!important;
  }
}


/* =========================================================
   FIX MOBILE LOGIN / MENU / BRAND / LOGO 2026-06-27
   ========================================================= */

/* #1 Đăng nhập mobile: ẩn hẳn nền app phía sau để không bị đè lớp */
body.crm-tech.auth-locked .sidebar,
body.crm-tech.auth-locked .main{
  display:none!important;
}
body.crm-tech.auth-locked .realta-login{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:900px){
  .realta-login{
    padding:16px 14px 24px!important;
    align-items:flex-start!important;
  }
  .login-browser-brand,
  .login-tech-visual,
  .login-feature-strip{
    display:none!important;
  }
  .login-card{
    width:min(430px,100%)!important;
    margin:18px auto 24px!important;
    padding:26px 18px 22px!important;
    border-radius:24px!important;
  }
  .login-card h2{
    font-size:22px!important;
    line-height:1.15!important;
  }
  .login-card p{
    margin:8px 0 18px!important;
    font-size:14px!important;
  }
  .login-input-wrap{
    height:52px!important;
    border-radius:14px!important;
  }
}

/* #2 Logo lớn hơn, rõ hơn ở login và đầu trang */
.login-brand-logo,
#loginBrandLogoText,
.login-logo{
  width:132px!important;
  height:132px!important;
  min-width:132px!important;
  min-height:132px!important;
  border-radius:30px!important;
  padding:10px!important;
}
.login-brand-logo img,
#loginBrandLogoText img,
.login-logo img,
.login-logo-img,
.login-logo .login-logo-img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
#brandLogoText,
.brand-logo{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  border-radius:18px!important;
  padding:6px!important;
}
.brand-logo img,
#brandLogoText img,
.brand-logo-img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.brand-logo span,
#brandLogoText span,
.login-logo span,
#loginBrandLogoText span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  font-weight:1000!important;
}
@media(max-width:640px){
  .login-brand-logo,
  #loginBrandLogoText,
  .login-logo{
    width:116px!important;
    height:116px!important;
    min-width:116px!important;
    min-height:116px!important;
  }
}

/* #3 Menu ngang mobile: nhỏ gọn, kéo ngang được, tự ẩn khi cuộn */
@media(max-width:900px){
  body.crm-tech:not(.auth-locked){
    display:block!important;
  }
  body.crm-tech:not(.auth-locked) .sidebar{
    position:sticky!important;
    top:0!important;
    z-index:60!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    padding:10px 10px 8px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    border-radius:0 0 18px 18px!important;
    transition:transform .24s ease, opacity .24s ease!important;
    scrollbar-width:none!important;
  }
  body.crm-tech:not(.auth-locked) .sidebar::-webkit-scrollbar{
    display:none!important;
  }
  body.crm-tech.mobile-sidebar-hidden:not(.auth-locked) .sidebar{
    transform:translateY(-110%)!important;
    opacity:.0!important;
    pointer-events:none!important;
  }
  body.crm-tech:not(.auth-locked) .main{
    margin-left:0!important;
    padding:14px 12px 18px!important;
  }
  body.crm-tech:not(.auth-locked) .brand{
    flex:0 0 auto!important;
    min-width:230px!important;
    max-width:250px!important;
    padding:8px 10px!important;
    gap:10px!important;
    margin:0!important;
    border-radius:18px!important;
  }
  body.crm-tech:not(.auth-locked) .brand > div:last-child{
    min-width:0!important;
    max-width:160px!important;
  }
  body.crm-tech:not(.auth-locked) .brand h1,
  #brandTitleText{
    font-size:13px!important;
    line-height:1.15!important;
    margin:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.crm-tech:not(.auth-locked) .brand p,
  #brandSubtitleText{
    font-size:10px!important;
    line-height:1.2!important;
    margin-top:3px!important;
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.crm-tech:not(.auth-locked) .nav{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:38px!important;
    padding:9px 12px!important;
    margin:0!important;
    border-radius:999px!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
}

/* #4 Topbar hàng nút thứ 2 nhỏ hơn trên mobile */
@media(max-width:900px){
  .topbar{
    padding:12px 12px 10px!important;
    margin:-14px -12px 14px!important;
  }
  .topbar h2{
    font-size:18px!important;
    line-height:1.15!important;
  }
  .topbar p{
    font-size:12px!important;
    line-height:1.35!important;
  }
  .topbar-main-row,
  .topbar-tools-row{
    gap:8px!important;
  }
  .topbar-main-row .notify-btn,
  .topbar-main-row .auth-badge,
  .topbar-main-row .topbar-logout{
    min-height:36px!important;
    padding:8px 10px!important;
    font-size:12px!important;
    border-radius:12px!important;
  }
  .topbar-main-row .auth-badge{
    max-width:220px!important;
  }
  .topbar-tools-row .btn,
  .topbar-tools-row .file-label{
    min-height:32px!important;
    padding:6px 9px!important;
    font-size:11px!important;
    border-radius:10px!important;
  }
}