/* ========================================================================
   CRM 5A - APP UNIFIED UI v2
   Bản này là lớp chuẩn hoá nhẹ: không ép kiểu quá tay, không phóng chữ,
   không đổi layout đặc thù của từng trang như dashboard/sales cart.
   Nạp cuối trang để gom table, form, button, card và mobile cho đồng bộ.
   ======================================================================== */

:root{
  --crm-blue:var(--crm-theme-color,#0b4f89);
  --crm-blue-dark:var(--crm-theme-dark,#073657);
  --crm-blue-rgb:var(--crm-theme-rgb,11,79,137);
  --crm-red:#d92945;
  --crm-ink:#102033;
  --crm-text:#1f2937;
  --crm-muted:#64748b;
  --crm-bg:#f4f7fb;
  --crm-card:#fff;
  --crm-line:rgba(11,79,137,.14);
  --crm-line-strong:rgba(11,79,137,.28);
  --crm-shadow:0 8px 22px rgba(15,48,82,.06);
  --crm-radius:14px;
}

html{font-size:14px;}
body.app-bootstrap-shell{
  font-family:"Open Sans",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1.45 !important;
  color:var(--crm-text) !important;
  background:#f4f7fb !important;
  -webkit-font-smoothing:antialiased;
}
body.app-bootstrap-shell *,
body.login-body *{box-sizing:border-box;}
body.app-bootstrap-shell a{text-decoration:none;}
body.app-bootstrap-shell img{max-width:100%;height:auto;}

/* Layout chính: gọn lại, không phóng khoảng cách */
body.app-bootstrap-shell{--desktop-sidebar-width:226px;}
body.app-bootstrap-shell .app-shell-bootstrap{
  min-height:100vh !important;
  display:grid !important;
  grid-template-columns:var(--desktop-sidebar-width) minmax(0,1fr) !important;
  background:#f4f7fb !important;
}
body.app-bootstrap-shell .main.main-bootstrap{
  min-width:0 !important;
  width:100% !important;
  padding:14px 16px 22px !important;
}
body.app-bootstrap-shell .desktop-sidebar,
body.app-bootstrap-shell .desktop-sidebar.sidebar-no-brand{
  width:var(--desktop-sidebar-width) !important;
  min-width:var(--desktop-sidebar-width) !important;
  padding:12px 10px !important;
  background:linear-gradient(180deg,#073657 0%,#0b4f89 100%) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  box-shadow:8px 0 22px rgba(5,31,54,.10) !important;
}
body.app-bootstrap-shell .sidebar-brand-pro{
  min-height:56px !important;
  padding:8px 10px !important;
  margin-bottom:8px !important;
  border-radius:14px !important;
}
body.app-bootstrap-shell .sidebar-brand-logo{width:38px !important;height:38px !important;min-width:38px !important;border-radius:12px !important;}
body.app-bootstrap-shell .sidebar-brand-text strong{font-size:12.5px !important;line-height:1.2 !important;}
body.app-bootstrap-shell .sidebar-brand-text small{font-size:10.5px !important;}
body.app-bootstrap-shell .desktop-sidebar .sidebar-nav-compact{gap:4px !important;margin-bottom:12px !important;}
body.app-bootstrap-shell .desktop-sidebar .nav-link{
  min-height:36px !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  gap:8px !important;
  transform:none !important;
}
body.app-bootstrap-shell .desktop-sidebar .nav-link .nav-icon{width:22px !important;height:22px !important;min-width:22px !important;border-radius:9px !important;}
body.app-bootstrap-shell .desktop-sidebar .nav-link .nav-icon svg{width:15px !important;height:15px !important;}
body.app-bootstrap-shell .desktop-sidebar .nav-link.active,
body.app-bootstrap-shell .desktop-sidebar .nav-link.active:hover{background:#fff !important;color:var(--crm-blue) !important;box-shadow:0 6px 16px rgba(5,31,54,.14) !important;}
body.app-bootstrap-shell .desktop-sidebar .nav-caret{display:none !important;}

/* Topbar: giữ mảnh, không đẩy nội dung xuống */
body.app-bootstrap-shell .crm-slim-topbar,
body.app-bootstrap-shell .bootstrap-topbar.crm-slim-topbar{
  min-height:50px !important;
  padding:6px 10px !important;
  margin:0 0 12px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid rgba(11,79,137,.12) !important;
  box-shadow:0 6px 18px rgba(15,48,82,.06) !important;
}
body.app-bootstrap-shell .crm-topbar-brand,
body.app-bootstrap-shell .crm-topbar-page{font-size:12.5px !important;}
body.app-bootstrap-shell .crm-topbar-logo{width:30px !important;height:30px !important;}
body.app-bootstrap-shell .crm-global-search-form{min-height:38px !important;border-radius:999px !important;}
body.app-bootstrap-shell .crm-global-search-input{height:36px !important;font-size:13px !important;padding-top:6px !important;padding-bottom:6px !important;}
body.app-bootstrap-shell .crm-topbar-user,
body.app-bootstrap-shell .crm-topbar-logout{min-height:36px !important;padding:7px 12px !important;border-radius:999px !important;font-size:12.5px !important;}

/* Page hero/topbar thường: chỉ chuẩn nhẹ, không áp vào dashboard hero */
body.app-bootstrap-shell .topbar:not(.crm-slim-topbar):not(.dash-hero),
body.app-bootstrap-shell .page-hero:not(.dash-hero),
body.app-bootstrap-shell .activity-top-card,
body.app-bootstrap-shell .cr-hero{
  padding:14px 16px !important;
  margin-bottom:12px !important;
  border-radius:16px !important;
  border:1px solid rgba(11,79,137,.12) !important;
  border-top:3px solid var(--crm-blue) !important;
  background:linear-gradient(135deg,#fff 0%,#f5f9ff 100%) !important;
  box-shadow:var(--crm-shadow) !important;
}
body.app-bootstrap-shell .topbar:not(.crm-slim-topbar) h1,
body.app-bootstrap-shell .topbar:not(.crm-slim-topbar) h2,
body.app-bootstrap-shell .page-hero h1,
body.app-bootstrap-shell .page-hero h2,
body.app-bootstrap-shell .activity-title h1,
body.app-bootstrap-shell .cr-hero h2{
  font-size:20px !important;
  line-height:1.2 !important;
  margin:0 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  color:var(--crm-ink) !important;
}
body.app-bootstrap-shell .topbar:not(.crm-slim-topbar) p,
body.app-bootstrap-shell .page-hero p,
body.app-bootstrap-shell .activity-title p,
body.app-bootstrap-shell .cr-hero p{font-size:12.5px !important;margin:4px 0 0 !important;color:var(--crm-muted) !important;}

/* Card/section chung */
body.app-bootstrap-shell .card,
body.app-bootstrap-shell .panel,
body.app-bootstrap-shell .filter-card,
body.app-bootstrap-shell .rent-toolbar-card,
body.app-bootstrap-shell .users-shell-card,
body.app-bootstrap-shell .br-card,
body.app-bootstrap-shell .row-form-card,
body.app-bootstrap-shell .personnel-form-card,
body.app-bootstrap-shell .contract-form-card{
  border-radius:16px !important;
  border:1px solid rgba(11,79,137,.11) !important;
  background:#fff !important;
  box-shadow:var(--crm-shadow) !important;
  padding:14px !important;
}
body.app-bootstrap-shell .card-title,
body.app-bootstrap-shell .section-title,
body.app-bootstrap-shell .compact-title{margin-bottom:10px !important;gap:8px !important;}
body.app-bootstrap-shell .card-title h2,
body.app-bootstrap-shell .card-title h3,
body.app-bootstrap-shell .section-title h2,
body.app-bootstrap-shell .section-title h3,
body.app-bootstrap-shell .compact-title h2,
body.app-bootstrap-shell .compact-title h3{font-size:16px !important;line-height:1.25 !important;margin:0 !important;font-weight:800 !important;color:var(--crm-ink) !important;}

/* Form/filter chung */
body.app-bootstrap-shell label,
body.app-bootstrap-shell .form-label{font-size:12.5px !important;font-weight:700 !important;color:#344256 !important;margin-bottom:5px !important;}
body.app-bootstrap-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.app-bootstrap-shell select,
body.app-bootstrap-shell textarea,
body.login-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.login-body select,
body.login-body textarea{
  min-height:38px !important;
  border-radius:11px !important;
  border:1px solid rgba(11,79,137,.16) !important;
  background:#fff !important;
  color:var(--crm-text) !important;
  padding:8px 10px !important;
  font-size:13px !important;
  line-height:1.35 !important;
  box-shadow:none !important;
}
body.app-bootstrap-shell textarea{min-height:92px !important;}
body.app-bootstrap-shell input:focus,
body.app-bootstrap-shell select:focus,
body.app-bootstrap-shell textarea:focus,
body.login-body input:focus,
body.login-body select:focus,
body.login-body textarea:focus{
  border-color:rgba(11,79,137,.46) !important;
  box-shadow:0 0 0 3px rgba(11,79,137,.08) !important;
  outline:none !important;
}
body.app-bootstrap-shell .form-grid,
body.app-bootstrap-shell .form-grid-2,
body.app-bootstrap-shell .form-grid-3,
body.app-bootstrap-shell .form-grid-4,
body.app-bootstrap-shell .filter-grid{gap:10px !important;}

/* Button chung */
body.app-bootstrap-shell .btn,
body.login-body .btn{
  min-height:38px !important;
  padding:8px 12px !important;
  border-radius:11px !important;
  font-size:12.5px !important;
  font-weight:750 !important;
  line-height:1.2 !important;
  gap:6px !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transform:none !important;
}
body.app-bootstrap-shell .btn:hover,
body.login-body .btn:hover{transform:none !important;filter:brightness(.98);}
body.app-bootstrap-shell .btn-sm{min-height:32px !important;padding:6px 9px !important;font-size:12px !important;border-radius:10px !important;}
body.app-bootstrap-shell .btn-primary{background:linear-gradient(135deg,var(--crm-blue),#1d75ad) !important;color:#fff !important;border:1px solid var(--crm-blue) !important;}
body.app-bootstrap-shell .btn-light,
body.app-bootstrap-shell .btn-ghost{background:#fff !important;color:var(--crm-blue) !important;border:1px solid rgba(11,79,137,.16) !important;}

/* Badge/pill/tag đồng bộ */
body.app-bootstrap-shell .pill,
body.app-bootstrap-shell .badge,
body.app-bootstrap-shell .tag,
body.app-bootstrap-shell .status-badge{
  border-radius:999px !important;
  padding:4px 8px !important;
  font-size:11.5px !important;
  font-weight:750 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

/* Table chung: header xanh, chữ trắng; nội dung trắng, border xanh nhạt */
body.app-bootstrap-shell .table-wrap,
body.app-bootstrap-shell .table-responsive,
body.app-bootstrap-shell .data-table-wrap,
body.app-bootstrap-shell .um-table-wrap,
body.app-bootstrap-shell .personnel-table-wrap{
  width:100% !important;
  overflow:auto !important;
  border-radius:14px !important;
  border:1px solid rgba(11,79,137,.14) !important;
  background:#fff !important;
}
body.app-bootstrap-shell table.table,
body.app-bootstrap-shell table.data-table,
body.app-bootstrap-shell table.um-table,
body.app-bootstrap-shell table.personnel-table,
body.app-bootstrap-shell table.report-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  min-width:860px;
  background:#fff !important;
}
body.app-bootstrap-shell table.table thead th,
body.app-bootstrap-shell table.data-table thead th,
body.app-bootstrap-shell table.um-table thead th,
body.app-bootstrap-shell table.personnel-table thead th,
body.app-bootstrap-shell table.report-table thead th{
  background:var(--crm-blue) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  padding:9px 10px !important;
  border-right:1px solid rgba(255,255,255,.72) !important;
  border-bottom:1px solid rgba(255,255,255,.72) !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
body.app-bootstrap-shell table.table tbody td,
body.app-bootstrap-shell table.data-table tbody td,
body.app-bootstrap-shell table.um-table tbody td,
body.app-bootstrap-shell table.personnel-table tbody td,
body.app-bootstrap-shell table.report-table tbody td{
  background:#fff !important;
  color:#111827 !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  padding:9px 10px !important;
  border-right:1px solid rgba(11,79,137,.14) !important;
  border-bottom:1px solid rgba(11,79,137,.14) !important;
  vertical-align:top !important;
}
body.app-bootstrap-shell table.table tbody tr:hover td,
body.app-bootstrap-shell table.data-table tbody tr:hover td,
body.app-bootstrap-shell table.um-table tbody tr:hover td,
body.app-bootstrap-shell table.personnel-table tbody tr:hover td,
body.app-bootstrap-shell table.report-table tbody tr:hover td{background:#f7fbff !important;}
body.app-bootstrap-shell table td .text-truncate,
body.app-bootstrap-shell table td .truncate{max-width:260px !important;}

/* Modal/popup */
body.app-bootstrap-shell .modal-content{
  border-radius:16px !important;
  border:1px solid rgba(11,79,137,.16) !important;
  box-shadow:0 18px 50px rgba(15,48,82,.18) !important;
}
body.app-bootstrap-shell .modal-header,
body.app-bootstrap-shell .modal-footer{padding:12px 14px !important;}
body.app-bootstrap-shell .modal-body{padding:14px !important;}
body.app-bootstrap-shell .modal-title{font-size:17px !important;font-weight:800 !important;}

/* Dashboard fix: sửa đúng lỗi font phóng to và hero bị mất màu */
body.app-bootstrap-shell .crm-dashboard-v2{gap:12px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-hero{
  border-radius:18px !important;
  padding:16px 18px !important;
  margin-bottom:0 !important;
  background:linear-gradient(135deg,#0b4f89 0%,#155f9c 58%,#0b4f89 100%) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 10px 28px rgba(11,79,137,.16) !important;
  display:grid !important;
  grid-template-columns:1.5fr auto !important;
  gap:12px !important;
}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-hero h2{font-size:22px !important;line-height:1.2 !important;margin:2px 0 5px !important;color:#fff !important;font-weight:850 !important;letter-spacing:-.02em !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-hero p{font-size:12.5px !important;color:rgba(255,255,255,.86) !important;margin:0 !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-eyebrow{font-size:10.5px !important;color:rgba(255,255,255,.74) !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-period a,
body.app-bootstrap-shell .crm-dashboard-v2 .dash-period span,
body.app-bootstrap-shell .crm-dashboard-v2 .dash-meta span{font-size:11.5px !important;padding:5px 9px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-actions{gap:7px !important;margin-top:12px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-actions .btn{min-height:34px !important;padding:7px 10px !important;font-size:12px !important;border-radius:10px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-card{
  padding:12px !important;
  border-radius:16px !important;
  border:1px solid rgba(11,79,137,.10) !important;
  box-shadow:0 7px 18px rgba(15,48,82,.045) !important;
}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-section-title{margin-bottom:8px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-section-title h3{font-size:15px !important;line-height:1.25 !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-section-title small{font-size:11.5px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-quick-links{gap:8px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-quick-link{
  padding:9px 10px !important;
  border-radius:13px !important;
  gap:8px !important;
  min-height:56px !important;
  box-shadow:0 5px 14px rgba(15,48,82,.045) !important;
}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-quick-icon{width:30px !important;height:30px !important;min-width:30px !important;border-radius:10px !important;font-size:13px !important;box-shadow:none !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-quick-text strong{
  display:block !important;
  font-size:15px !important;
  line-height:1.12 !important;
  font-weight:800 !important;
  letter-spacing:-.015em !important;
  color:#102a43 !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-quick-text span{font-size:11px !important;line-height:1.2 !important;color:#64748b !important;margin-top:2px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-kpi-grid{gap:10px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-kpi{padding:12px !important;min-height:78px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-kpi-label{font-size:11px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-kpi-value{font-size:20px !important;line-height:1.1 !important;margin-top:4px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-kpi-sub{font-size:11.5px !important;margin-top:4px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-progress{height:5px !important;margin-top:8px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-table th{font-size:11px !important;}
body.app-bootstrap-shell .crm-dashboard-v2 .dash-table td{font-size:12px !important;padding:8px !important;}

/* Không cho các strong trong card thường bị phóng quá to */
body.app-bootstrap-shell .card strong,
body.app-bootstrap-shell .panel strong,
body.app-bootstrap-shell .dash-card strong,
body.app-bootstrap-shell .filter-card strong{font-size:inherit;letter-spacing:normal;}
body.app-bootstrap-shell .metric-value,
body.app-bootstrap-shell .stat-box .number,
body.app-bootstrap-shell .payment-stat .value,
body.app-bootstrap-shell .rent-stat strong,
body.app-bootstrap-shell .personnel-stat strong{font-size:22px !important;line-height:1.1 !important;font-weight:850 !important;}

/* Personnel/report cards */
body.app-bootstrap-shell .personnel-overview-card,
body.app-bootstrap-shell .personnel-stat,
body.app-bootstrap-shell .payment-stat,
body.app-bootstrap-shell .rent-stat,
body.app-bootstrap-shell .activity-mini-stat,
body.app-bootstrap-shell .users-overview>div,
body.app-bootstrap-shell .customer-summary-row>div{
  border-radius:14px !important;
  padding:12px !important;
  border:1px solid rgba(11,79,137,.10) !important;
  box-shadow:0 5px 15px rgba(15,48,82,.045) !important;
}
body.app-bootstrap-shell .personnel-stat span,
body.app-bootstrap-shell .payment-stat .label,
body.app-bootstrap-shell .rent-stat span{font-size:11.5px !important;color:#64748b !important;}

/* Mobile */
@media(max-width:991.98px){
  html{font-size:13.5px;}
  body.app-bootstrap-shell{font-size:13px !important;}
  body.app-bootstrap-shell .app-shell-bootstrap{display:block !important;min-height:100vh !important;}
  body.app-bootstrap-shell .main.main-bootstrap{padding:10px 10px 18px !important;}
  body.app-bootstrap-shell .mobile-header{
    position:sticky !important;
    top:0 !important;
    z-index:1030 !important;
    min-height:50px !important;
    padding:7px 10px !important;
    background:linear-gradient(135deg,#073657,#0b4f89) !important;
    color:#fff !important;
    box-shadow:0 8px 20px rgba(5,31,54,.14) !important;
  }
  body.app-bootstrap-shell .mobile-header-title{font-size:14px !important;line-height:1.2 !important;color:#fff !important;}
  body.app-bootstrap-shell .mobile-header-subtitle{font-size:10.5px !important;color:rgba(255,255,255,.75) !important;}
  body.app-bootstrap-shell .mobile-header-btn{width:34px !important;height:34px !important;min-width:34px !important;border-radius:11px !important;font-size:14px !important;}
  body.app-bootstrap-shell .mobile-global-searchbar{padding:8px 10px !important;background:#f4f7fb !important;}
  body.app-bootstrap-shell .mobile-global-searchbar .crm-global-search-form{min-height:38px !important;}
  body.app-bootstrap-shell .topbar:not(.crm-slim-topbar),
  body.app-bootstrap-shell .page-hero:not(.dash-hero){border-radius:13px !important;padding:12px !important;}
  body.app-bootstrap-shell .topbar:not(.crm-slim-topbar) h1,
  body.app-bootstrap-shell .topbar:not(.crm-slim-topbar) h2,
  body.app-bootstrap-shell .page-hero h1,
  body.app-bootstrap-shell .page-hero h2{font-size:18px !important;}
  body.app-bootstrap-shell .card,
  body.app-bootstrap-shell .panel,
  body.app-bootstrap-shell .filter-card{border-radius:13px !important;padding:12px !important;}
  body.app-bootstrap-shell .form-grid,
  body.app-bootstrap-shell .form-grid-2,
  body.app-bootstrap-shell .form-grid-3,
  body.app-bootstrap-shell .form-grid-4,
  body.app-bootstrap-shell .filter-grid{grid-template-columns:1fr !important;gap:8px !important;}
  body.app-bootstrap-shell .toolbar,
  body.app-bootstrap-shell .actions,
  body.app-bootstrap-shell .filters,
  body.app-bootstrap-shell .filter-actions{gap:7px !important;}
  body.app-bootstrap-shell .btn{min-height:36px !important;font-size:12px !important;padding:7px 10px !important;}
  body.app-bootstrap-shell .modal-dialog{margin:8px !important;max-width:calc(100% - 16px) !important;}
  body.app-bootstrap-shell .modal-body{max-height:calc(100vh - 150px) !important;overflow:auto !important;}
  body.app-bootstrap-shell table.table,
  body.app-bootstrap-shell table.data-table,
  body.app-bootstrap-shell table.um-table,
  body.app-bootstrap-shell table.personnel-table,
  body.app-bootstrap-shell table.report-table{min-width:760px !important;}
  body.app-bootstrap-shell table th,
  body.app-bootstrap-shell table td{font-size:12px !important;padding:8px !important;}
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-hero{grid-template-columns:1fr !important;border-radius:14px !important;padding:13px !important;}
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-hero h2{font-size:18px !important;}
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-quick-links{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:7px !important;}
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-quick-link{min-height:52px !important;padding:8px !important;}
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-quick-text strong{font-size:13.5px !important;}
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-main-grid,
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-two{grid-template-columns:1fr !important;}
}

@media(max-width:520px){
  body.app-bootstrap-shell .crm-dashboard-v2 .dash-kpi-grid{grid-template-columns:1fr !important;}
  body.app-bootstrap-shell .btn{width:auto;}
  body.app-bootstrap-shell .actions .btn,
  body.app-bootstrap-shell .filter-actions .btn{flex:1 1 calc(50% - 7px);}
}


/* ========================================================================
   CRM 5A - TOPBAR NO OVERLAP v3
   Sửa lỗi: thanh tìm kiếm/topbar desktop đang position:fixed nên che dash-hero.
   Đưa topbar về luồng layout bình thường trong main để luôn đẩy nội dung xuống dưới.
   ======================================================================== */
@media (min-width: 992px){
  body.app-bootstrap-shell .main.main-bootstrap{
    padding-top:14px !important;
  }

  body.app-bootstrap-shell .main.main-bootstrap > .topbar.bootstrap-topbar.crm-slim-topbar.crm-fullwidth-topbar,
  body.app-bootstrap-shell .main.main-bootstrap > .crm-slim-topbar.crm-fullwidth-topbar,
  body.app-bootstrap-shell .main.main-bootstrap > .crm-fullwidth-topbar{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:48px !important;
    margin:0 0 14px !important;
    padding:6px 10px !important;
    border-radius:18px !important;
    z-index:20 !important;
    display:grid !important;
    grid-template-columns:minmax(190px,260px) minmax(360px,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    background:#fff !important;
    border:1px solid rgba(11,79,137,.14) !important;
    box-shadow:0 8px 20px rgba(15,48,82,.055) !important;
    transform:none !important;
  }

  body.app-bootstrap-shell .main.main-bootstrap > .crm-slim-topbar .crm-slim-left,
  body.app-bootstrap-shell .main.main-bootstrap > .crm-slim-topbar .crm-topbar-right{
    height:auto !important;
    min-width:0 !important;
  }

  body.app-bootstrap-shell .main.main-bootstrap > .crm-slim-topbar .crm-global-search-wrap{
    min-width:0 !important;
    width:100% !important;
  }

  body.app-bootstrap-shell .desktop-sidebar,
  body.app-bootstrap-shell .desktop-sidebar.sidebar-no-brand{
    padding-top:12px !important;
  }
}

@media (min-width: 992px) and (max-width: 1180px){
  body.app-bootstrap-shell .main.main-bootstrap > .topbar.bootstrap-topbar.crm-slim-topbar.crm-fullwidth-topbar,
  body.app-bootstrap-shell .main.main-bootstrap > .crm-slim-topbar.crm-fullwidth-topbar,
  body.app-bootstrap-shell .main.main-bootstrap > .crm-fullwidth-topbar{
    grid-template-columns:minmax(150px,210px) minmax(260px,1fr) auto !important;
  }
}

/* =========================================================
   V5 - Fix bảng quản lý bán hàng / xây dựng
   Lý do: CSS chung V2/V3 ép .um-table min-width quá nhỏ nên
   sales_manage.php và construction_manage.php bị bó cột, tiêu đề
   và dữ liệu bị cắt xấu. Phần này chỉ khóa lại kích thước riêng
   cho 2 bảng quản lý căn, vẫn giữ cuộn ngang để dùng tốt mobile.
   ========================================================= */
body.app-bootstrap-shell .um-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  border:1px solid rgba(var(--app-primary-rgb),.20) !important;
  border-radius:16px !important;
  background:#fff !important;
}
body.app-bootstrap-shell .um-table{
  width:auto !important;
  max-width:none !important;
  table-layout:fixed !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
body.app-bootstrap-shell .um-table-sales{
  min-width:2268px !important;
}
body.app-bootstrap-shell .um-table-construction{
  min-width:2528px !important;
}
body.app-bootstrap-shell .um-table thead th{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  background:var(--app-primary) !important;
  color:#fff !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.25 !important;
  padding:9px 8px !important;
  border-right:1px solid rgba(255,255,255,.55) !important;
  border-bottom:1px solid rgba(255,255,255,.65) !important;
}
body.app-bootstrap-shell .um-table tbody td{
  height:46px !important;
  padding:8px 9px !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  border-right:1px solid rgba(var(--app-primary-rgb),.18) !important;
  border-bottom:1px solid rgba(var(--app-primary-rgb),.18) !important;
}
body.app-bootstrap-shell .um-table td .um-clip,
body.app-bootstrap-shell .um-table td strong{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Widths: sales_manage.php */
body.app-bootstrap-shell .um-table-sales th:nth-child(1),body.app-bootstrap-shell .um-table-sales td:nth-child(1){width:56px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(2),body.app-bootstrap-shell .um-table-sales td:nth-child(2){width:130px !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(3),body.app-bootstrap-shell .um-table-sales td:nth-child(3){width:140px !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(4),body.app-bootstrap-shell .um-table-sales td:nth-child(4){width:120px !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(5),body.app-bootstrap-shell .um-table-sales td:nth-child(5){width:140px !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(6),body.app-bootstrap-shell .um-table-sales td:nth-child(6),
body.app-bootstrap-shell .um-table-sales th:nth-child(7),body.app-bootstrap-shell .um-table-sales td:nth-child(7){width:125px !important;text-align:right !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(8),body.app-bootstrap-shell .um-table-sales td:nth-child(8){width:118px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(9),body.app-bootstrap-shell .um-table-sales td:nth-child(9){width:220px !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(10),body.app-bootstrap-shell .um-table-sales td:nth-child(10){width:120px !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(11),body.app-bootstrap-shell .um-table-sales td:nth-child(11){width:110px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(12),body.app-bootstrap-shell .um-table-sales td:nth-child(12){width:145px !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(13),body.app-bootstrap-shell .um-table-sales td:nth-child(13){width:110px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(14),body.app-bootstrap-shell .um-table-sales td:nth-child(14){width:150px !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(15),body.app-bootstrap-shell .um-table-sales td:nth-child(15),
body.app-bootstrap-shell .um-table-sales th:nth-child(16),body.app-bootstrap-shell .um-table-sales td:nth-child(16){width:110px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-sales th:nth-child(17),body.app-bootstrap-shell .um-table-sales td:nth-child(17){width:240px !important;}

/* Widths: construction_manage.php */
body.app-bootstrap-shell .um-table-construction th:nth-child(1),body.app-bootstrap-shell .um-table-construction td:nth-child(1){width:56px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(2),body.app-bootstrap-shell .um-table-construction td:nth-child(2){width:125px !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(3),body.app-bootstrap-shell .um-table-construction td:nth-child(3){width:135px !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(4),body.app-bootstrap-shell .um-table-construction td:nth-child(4){width:120px !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(5),body.app-bootstrap-shell .um-table-construction td:nth-child(5){width:135px !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(6),body.app-bootstrap-shell .um-table-construction td:nth-child(6){width:80px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(7),body.app-bootstrap-shell .um-table-construction td:nth-child(7),
body.app-bootstrap-shell .um-table-construction th:nth-child(8),body.app-bootstrap-shell .um-table-construction td:nth-child(8){width:90px !important;text-align:right !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(9),body.app-bootstrap-shell .um-table-construction td:nth-child(9){width:100px !important;text-align:right !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(10),body.app-bootstrap-shell .um-table-construction td:nth-child(10){width:140px !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(11),body.app-bootstrap-shell .um-table-construction td:nth-child(11),
body.app-bootstrap-shell .um-table-construction th:nth-child(12),body.app-bootstrap-shell .um-table-construction td:nth-child(12){width:110px !important;text-align:right !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(13),body.app-bootstrap-shell .um-table-construction td:nth-child(13){width:115px !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(14),body.app-bootstrap-shell .um-table-construction td:nth-child(14){width:70px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(15),body.app-bootstrap-shell .um-table-construction td:nth-child(15){width:135px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(16),body.app-bootstrap-shell .um-table-construction td:nth-child(16){width:145px !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(17),body.app-bootstrap-shell .um-table-construction td:nth-child(17){width:220px !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(18),body.app-bootstrap-shell .um-table-construction td:nth-child(18){width:80px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(19),body.app-bootstrap-shell .um-table-construction td:nth-child(19){width:120px !important;text-align:center !important;}
body.app-bootstrap-shell .um-table-construction th:nth-child(20),body.app-bootstrap-shell .um-table-construction td:nth-child(20){width:220px !important;}

/* Các cột tên/ghi chú nên đọc được hơn, không bó một chữ như trước. */
body.app-bootstrap-shell .um-table-sales td:nth-child(9),
body.app-bootstrap-shell .um-table-sales td:nth-child(17),
body.app-bootstrap-shell .um-table-construction td:nth-child(17),
body.app-bootstrap-shell .um-table-construction td:nth-child(20){
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
body.app-bootstrap-shell .um-table-sales td:nth-child(9) .um-clip,
body.app-bootstrap-shell .um-table-sales td:nth-child(17) .um-clip,
body.app-bootstrap-shell .um-table-construction td:nth-child(17) .um-clip,
body.app-bootstrap-shell .um-table-construction td:nth-child(20) .um-clip{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

@media (max-width:991.98px){
  body.app-bootstrap-shell .um-table-sales{min-width:2268px !important;}
  body.app-bootstrap-shell .um-table-construction{min-width:2528px !important;}
  body.app-bootstrap-shell .um-table thead th,
  body.app-bootstrap-shell .um-table tbody td{font-size:12px !important;padding:8px 7px !important;}
}

/* =========================================================
   V6 - Fix rentals.php filter bị nút Lọc đè lên ô tháng
   Lý do: rent-filter đang dùng grid + .actions/filter-actions từ CSS cũ
   có lúc bị kéo width/column sai. Đổi riêng form lọc thuê sang flex
   có giới hạn chiều rộng ô tìm kiếm, các nút không giãn đè input.
   ========================================================= */
body.app-bootstrap-shell .rent-toolbar-card .rent-filter{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:9px !important;
  width:100% !important;
  margin:0 !important;
}
body.app-bootstrap-shell .rent-toolbar-card .rent-filter .form-group{
  margin:0 !important;
  min-width:0 !important;
}
body.app-bootstrap-shell .rent-toolbar-card .rent-filter .form-group:nth-child(1){
  flex:1 1 520px !important;
  max-width:760px !important;
}
body.app-bootstrap-shell .rent-toolbar-card .rent-filter .form-group:nth-child(2){
  flex:0 0 170px !important;
  max-width:170px !important;
}
body.app-bootstrap-shell .rent-toolbar-card .rent-filter .form-group:nth-child(3){
  flex:0 0 200px !important;
  max-width:200px !important;
}
body.app-bootstrap-shell .rent-toolbar-card .rent-filter .filter-actions,
body.app-bootstrap-shell .rent-toolbar-card .rent-filter .actions.filter-actions{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:7px !important;
  margin:0 !important;
}
body.app-bootstrap-shell .rent-toolbar-card .rent-filter .filter-actions .btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:54px !important;
  white-space:nowrap !important;
}
body.app-bootstrap-shell .rent-toolbar-card .rent-filter input,
body.app-bootstrap-shell .rent-toolbar-card .rent-filter select{
  width:100% !important;
  max-width:100% !important;
}

@media(max-width:1180px){
  body.app-bootstrap-shell .rent-toolbar-card .rent-filter .form-group:nth-child(1){
    flex:1 1 420px !important;
    max-width:none !important;
  }
}
@media(max-width:760px){
  body.app-bootstrap-shell .rent-toolbar-card .rent-filter .form-group:nth-child(1),
  body.app-bootstrap-shell .rent-toolbar-card .rent-filter .form-group:nth-child(2),
  body.app-bootstrap-shell .rent-toolbar-card .rent-filter .form-group:nth-child(3),
  body.app-bootstrap-shell .rent-toolbar-card .rent-filter .filter-actions{
    flex:1 1 100% !important;
    max-width:none !important;
    width:100% !important;
  }
  body.app-bootstrap-shell .rent-toolbar-card .rent-filter .filter-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  body.app-bootstrap-shell .rent-toolbar-card .rent-filter .filter-actions .btn{
    width:100% !important;
    justify-content:center !important;
  }
}
@media(max-width:420px){
  body.app-bootstrap-shell .rent-toolbar-card .rent-filter .filter-actions{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   V7 - Personnel filter + search bar cleanup
   - Bỏ border ô search nằm bên trong topbar để không còn 2 lớp viền.
   - Tối ưu form lọc personnel.php, trả lại lọc Chính thức/Khoán ở tab danh sách.
   ========================================================= */
body.app-bootstrap-shell .crm-slim-topbar .crm-global-search-form,
body.app-bootstrap-shell .bootstrap-topbar.crm-slim-topbar .crm-global-search-form{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
body.app-bootstrap-shell .crm-slim-topbar .crm-global-search-form:focus-within,
body.app-bootstrap-shell .bootstrap-topbar.crm-slim-topbar .crm-global-search-form:focus-within{
  border:0 !important;
  box-shadow:none !important;
  background:rgba(248,250,252,.72) !important;
}
body.app-bootstrap-shell .crm-slim-topbar .crm-global-search-input,
body.app-bootstrap-shell .bootstrap-topbar.crm-slim-topbar .crm-global-search-input{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

body.app-bootstrap-shell .personnel-filter{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  gap:9px !important;
}
body.app-bootstrap-shell .personnel-filter .form-group{
  margin:0 !important;
  min-width:0 !important;
}
body.app-bootstrap-shell .personnel-filter .form-group:nth-child(2){flex:1 1 260px !important;max-width:420px !important;}
body.app-bootstrap-shell .personnel-filter .form-group:nth-child(3){flex:0 0 190px !important;max-width:190px !important;}
body.app-bootstrap-shell .personnel-filter .form-group:nth-child(4){flex:0 0 170px !important;max-width:170px !important;}
body.app-bootstrap-shell .personnel-filter .form-group:nth-child(5){flex:0 0 150px !important;max-width:150px !important;}
body.app-bootstrap-shell .personnel-filter .form-group:nth-child(6){flex:0 0 145px !important;max-width:145px !important;}
body.app-bootstrap-shell .personnel-filter .form-group:nth-child(7){flex:0 0 180px !important;max-width:180px !important;}
body.app-bootstrap-shell .personnel-filter .filter-actions{
  flex:0 0 auto !important;
  width:auto !important;
  display:flex !important;
  gap:7px !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
}
body.app-bootstrap-shell .personnel-filter input,
body.app-bootstrap-shell .personnel-filter select{
  width:100% !important;
  max-width:100% !important;
}
body.app-bootstrap-shell .personnel-report-filter .form-group:nth-child(2){flex:1 1 280px !important;max-width:420px !important;}
body.app-bootstrap-shell .personnel-report-filter .form-group:nth-child(3){flex:0 0 155px !important;max-width:155px !important;}
body.app-bootstrap-shell .personnel-report-filter .form-group:nth-child(4){flex:0 0 190px !important;max-width:190px !important;}
body.app-bootstrap-shell .personnel-report-filter .form-group:nth-child(5){flex:0 0 150px !important;max-width:150px !important;}
body.app-bootstrap-shell .personnel-report-filter .form-group:nth-child(6){flex:0 0 190px !important;max-width:190px !important;}

@media(max-width:1180px){
  body.app-bootstrap-shell .personnel-filter .form-group:nth-child(n+2),
  body.app-bootstrap-shell .personnel-report-filter .form-group:nth-child(n+2){
    flex:1 1 180px !important;
    max-width:none !important;
  }
}
@media(max-width:760px){
  body.app-bootstrap-shell .personnel-filter .form-group,
  body.app-bootstrap-shell .personnel-filter .filter-actions{
    flex:1 1 100% !important;
    width:100% !important;
    max-width:none !important;
  }
  body.app-bootstrap-shell .personnel-filter .filter-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  body.app-bootstrap-shell .personnel-filter .filter-actions .btn{
    width:100% !important;
    justify-content:center !important;
  }
}
@media(max-width:420px){
  body.app-bootstrap-shell .personnel-filter .filter-actions{grid-template-columns:1fr !important;}
}

/* =========================================================
   V9 - Login input icon spacing fix
   - CSS chung trước đó áp padding input login quá nhỏ nên chữ đè lên icon.
   - Khóa lại padding riêng cho form đăng nhập bằng selector mạnh hơn.
   ========================================================= */
body.login-body.crm-login-v3 .signin-card .control{
  position:relative !important;
}
body.login-body.crm-login-v3 .signin-card .control svg{
  left:18px !important;
  top:50% !important;
  width:19px !important;
  height:19px !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
  z-index:3 !important;
  color:#70819a !important;
}
body.login-body.crm-login-v3 .signin-card .control input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  width:100% !important;
  height:50px !important;
  min-height:50px !important;
  padding:0 58px 0 56px !important;
  border-radius:15px !important;
  font-size:14px !important;
  line-height:50px !important;
  background:rgba(255,255,255,.92) !important;
  color:#102033 !important;
}
body.login-body.crm-login-v3 .signin-card .control input#login_password{
  padding-right:82px !important;
}
body.login-body.crm-login-v3 .signin-card .toggle-password{
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:4 !important;
  min-height:0 !important;
  height:auto !important;
  padding:7px 9px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:1.1 !important;
}
body.login-body.crm-login-v3 .signin-card .control input:-webkit-autofill{
  -webkit-text-fill-color:#102033 !important;
  box-shadow:0 0 0 1000px rgba(255,255,255,.92) inset !important;
}
@media(max-width:480px){
  body.login-body.crm-login-v3 .signin-card .control input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
    padding-left:52px !important;
    padding-right:52px !important;
  }
  body.login-body.crm-login-v3 .signin-card .control input#login_password{
    padding-right:78px !important;
  }
}