:root {
  --sidebar-width: 260px;

  /* 1. MÀU NHẬN DIỆN THƯƠNG HIỆU DTC (XANH VIỄN THÔNG - dtcdongthap.vn) */
  --dtc-brand: #004ea2;
  /* Xanh Đậm VNPT đồng bộ dải Footer Sidebar */
  --dtc-brand-hover: #00428d;
  /* Xanh VNPT Hover */
  --dtc-brand-active: #003775;
  /* Xanh VNPT Active */
  --dtc-brand-light: #eff6ff;
  /* Nền xanh nhạt thương hiệu */
  --dtc-brand-subtle: rgba(0, 78, 162, 0.1);
  /* Nền mờ thương hiệu */
  --dtc-brand-border: #bfdbfe;
  /* Viền xanh thương hiệu */
  --dtc-brand-text: #004ea2;
  /* Chữ xanh thương hiệu */
  --dtc-primary: #004ea2;
  /* Primary đồng bộ Footer Sidebar */
  --dtc-primary-hover: #00428d;

  /* Điểm nhấn vàng cam viễn thông (tương tự nút CTA trên dtcdongthap.vn) */
  --dtc-accent-gold: #f59e0b;
  --dtc-accent-gold-hover: #d97706;

  /* Bổ trợ hạ tầng viễn thông MobiFone / BTS */
  --dtc-telecom: #005baa;
  --dtc-telecom-bg: #eff6ff;
  --dtc-telecom-border: #bfdbfe;

  /* 2. BẢNG MÀU NỀN SLATE XÁM HIỆN ĐẠI & CHỮ SẮC NÉT (CHUẨN VINAPHONE SÁNG SỦA) */
  --dtc-bg: #f8fafc;
  /* Nền ứng dụng Slate 50 sáng sủa */
  --dtc-card: #ffffff;
  /* Nền thẻ / Bảng trắng tinh */
  --dtc-surface: #f1f5f9;
  /* Nền mặt phẳng phụ Slate 100 */
  --dtc-surface-hover: #e2e8f0;
  /* Hover mặt phẳng Slate 200 */
  --dtc-border: #e2e8f0;
  /* Đường viền Slate 200 */
  --dtc-border-strong: #cbd5e1;
  /* Viền đậm Slate 300 */

  --dtc-text-title: #0f172a;
  /* Tiêu đề Slate 900 sắc nét */
  --dtc-text-main: #1e293b;
  /* Nội dung chính Slate 800 */
  --dtc-text-body: #334155;
  /* Chữ nội dung Slate 700 */
  --dtc-text-muted: #64748b;
  /* Chữ phụ Slate 500 */
  --dtc-text-subtle: #94a3b8;
  /* Chữ mờ Slate 400 */

  /* 3. SIDEBAR THEME (XANH DƯƠNG ĐẬM SANG TRỌNG CHUẨN VINAPHONE DEEP NAVY) */
  --vnpt-navy: #0c2e59;
  /* Xanh đậm VNPT thanh menu vnpt.vn */
  --dtc-sidebar-head-foot: linear-gradient(135deg, #09254a 0%, #0d3261 100%);
  /* Đầu & Chân Sidebar Xanh Đậm VNPT đồng bộ 100% */
  --dtc-sidebar-bg: #0c2e59;
  /* Nền tổng thể Sidebar */
  --dtc-sidebar-nav-hover: rgba(255, 255, 255, 0.12);
  --dtc-sidebar-active: linear-gradient(90deg, #1d6fe5 0%, #1558bf 100%);

  /* 4. HỆ THỐNG MÀU TRẠNG THÁI CHUẨN HÓA */
  /* ĐỎ: Khẩn cấp / Hết hiệu lực / Quá hạn (Tông Rose dịu mắt, tương phản cao đạt chuẩn WCAG) */
  --status-red: #e11d48;
  --status-red-bg: #fff1f2;
  --status-red-border: #fda4af;
  --status-red-text: #9f1239;

  /* CAM: Cận hạn gấp (1 - 9 ngày) */
  --status-orange: #f97316;
  --status-orange-bg: #ffedd5;
  --status-orange-border: #f97316;
  --status-orange-text: #c2410c;

  /* VÀNG: Cảnh báo đến hạn (Mức 2 - Vàng nhạt êm dịu, không chói mắt) */
  --status-yellow: #d97706;
  --status-yellow-bg: #fefce8;
  --status-yellow-border: #fde047;
  --status-yellow-text: #854d0e;

  /* XANH LÁ: An toàn / Còn hạn (> 20 ngày) / Hoàn thành */
  --status-green: #10b981;
  --status-green-bg: #ecfdf5;
  --status-green-border: #10b981;
  --status-green-text: #047857;

  /* GHI XÁM: Đã hoàn thành / Đã thanh lý */
  --status-gray: #94a3b8;
  --status-gray-bg: #f1f5f9;
  --status-gray-border: #94a3b8;
  --status-gray-text: #475569;

  /* TRẦM: Chưa đặt hạn / Chưa có dữ liệu */
  --status-muted: #cbd5e1;
  --status-muted-bg: #f8fafc;
  --status-muted-border: #cbd5e1;
  --status-muted-text: #64748b;

  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--dtc-bg);
  color: var(--dtc-text-main);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
     SIDEBAR 3 KHUNG DỌC ĐỒNG BỘ THEO TỶ LỆ 2 TẦNG MÀU VNPT - VINAPHONE
     - Khung 1 (Đầu sidebar): Xanh đậm VNPT (#004ea2 / #005baa chuẩn menu vnpt.vn)
     - Khung 2 (Thân sidebar): Xanh tươi VinaPhone (#006bbd -> #0085ff sáng sủa, thoáng mắt)
     - Khung 3 (Chân sidebar): Xanh đậm VNPT - ĐỒNG BỘ 100% VỚI ĐẦU SIDEBAR
     ========================================================================= */
#sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  max-height: 100vh;
  flex-shrink: 0;
  background: #0c2e59 !important; /* Xanh dương đậm sang trọng chuẩn VinaPhone Deep Navy */
  color: #ffffff;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(6, 26, 52, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* KHUNG 1 - TRÊN CÙNG: SIDEBAR HEADER */
#sidebar .sidebar-header,
#sidebar .brand {
  background: linear-gradient(135deg, #09254a 0%, #0d3261 100%) !important;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 62px;
  position: relative;
  z-index: 2;
}

#sidebar .brand-icon {
  width: 68px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
  flex-shrink: 0;
  overflow: visible;
}

#sidebar .brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Khối chứa tên công ty: chữ trắng tinh khôi, căn giữa đối xứng lấy dòng dưới làm trục trung tâm */
#sidebar .brand-info,
#sidebar .brand-badge-card {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
  border: none;
  gap: 3px;
}

#sidebar .brand-company-line1 {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: visible;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  display: block;
  width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#sidebar .brand-company-line2 {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: visible;
  letter-spacing: 0.1px;
  text-align: center;
  display: block;
  width: 100%;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* KHUNG 2 - Ở GIỮA: SIDEBAR BODY (XANH DƯƠNG ĐẬM SANG TRỌNG CHUẨN VINAPHONE DEEP NAVY) */
#sidebar .sidebar-body,
#sidebar .sidebar-nav-container {
  background: linear-gradient(180deg, #0c2e59 0%, #0f396e 50%, #134685 100%) !important;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 8px 8px 12px;
}

#sidebar .sidebar-nav-container > ul.nav.mb-2 {
  margin-bottom: 2px !important;
}

#sidebar #sec-rbac-items {
  margin-top: 2px !important;
}

#sidebar #navItem-phan_quyen {
  display: block !important;
}

#sidebar .sidebar-nav-container::-webkit-scrollbar {
  width: 4px;
}

#sidebar .sidebar-nav-container::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar .sidebar-nav-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

#sidebar .sidebar-nav-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Menu Item Links */
#sidebar .nav-link {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  padding: 7px 10px;
  border-radius: 8px;
  margin-bottom: 3px;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  border-left: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar .nav-link span {
  color: rgba(255, 255, 255, 0.95) !important;
  transition: color 0.2s ease;
}

#sidebar .nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#sidebar .nav-link:hover:not(.active) span {
  color: #ffffff !important;
}

/* Chuẩn hóa container huy hiệu icon (Sidebar Icon Badge) - Phong cách WebApp hiện đại */
#sidebar .nav-icon-badge {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  color: #ffffff !important;
}

#sidebar .nav-icon-badge i {
  font-size: 0.9rem;
  color: #ffffff !important;
  transition: all 0.22s ease;
}

#sidebar .nav-icon-badge .nav-custom-cycle-logo {
  width: 17px;
  height: 17px;
  color: #ffffff !important;
  display: block;
  transition: all 0.22s ease;
}

/* Các tone màu hiện đại, nổi bật chuẩn WebApp - Giảm 50% màu nền theo yêu cầu, màu icon trắng bên trong giữ y nguyên */
#sidebar .nav-icon-badge.badge-dashboard {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(79, 70, 229, 0.5) 100%) !important;
  border: 1px solid rgba(165, 180, 252, 0.35) !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-bts {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.5) 0%, rgba(2, 132, 199, 0.5) 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.35) !important;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-gps {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.5) 0%, rgba(5, 150, 105, 0.5) 100%) !important;
  border: 1px solid rgba(110, 231, 183, 0.35) !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-contract-land {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.5) 0%, rgba(217, 119, 6, 0.5) 100%) !important;
  border: 1px solid rgba(253, 230, 138, 0.35) !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-contract-tower {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.5) 0%, rgba(124, 58, 237, 0.5) 100%) !important;
  border: 1px solid rgba(216, 180, 254, 0.35) !important;
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-sec-maintenance {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.5) 0%, rgba(225, 29, 72, 0.5) 100%) !important;
  border: 1px solid rgba(254, 205, 211, 0.35) !important;
  box-shadow: 0 2px 6px rgba(244, 63, 94, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-maintenance-plan {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.5) 0%, rgba(234, 88, 12, 0.5) 100%) !important;
  border: 1px solid rgba(254, 215, 170, 0.35) !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-maintenance-log {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.5) 0%, rgba(8, 145, 178, 0.5) 100%) !important;
  border: 1px solid rgba(165, 243, 252, 0.35) !important;
  box-shadow: 0 2px 6px rgba(6, 182, 212, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-sec-finance {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.5) 0%, rgba(202, 138, 4, 0.5) 100%) !important;
  border: 1px solid rgba(254, 240, 138, 0.35) !important;
  box-shadow: 0 2px 6px rgba(234, 179, 8, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-rental-cost {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(29, 78, 216, 0.5) 100%) !important;
  border: 1px solid rgba(191, 219, 254, 0.35) !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-rental-revenue {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(21, 128, 61, 0.5) 100%) !important;
  border: 1px solid rgba(187, 247, 208, 0.35) !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-om-expense {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.5) 0%, rgba(162, 28, 175, 0.5) 100%) !important;
  border: 1px solid rgba(245, 208, 254, 0.35) !important;
  box-shadow: 0 2px 6px rgba(217, 70, 239, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-rbac {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.5) 0%, rgba(55, 48, 163, 0.5) 100%) !important;
  border: 1px solid rgba(199, 210, 254, 0.35) !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.22) !important;
}

/* Backward compatibility fallback badges */
#sidebar .nav-icon-badge.badge-payment {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.5) 0%, rgba(217, 119, 6, 0.5) 100%) !important;
  border: 1px solid rgba(253, 230, 138, 0.35) !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-maintenance {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.5) 0%, rgba(234, 88, 12, 0.5) 100%) !important;
  border: 1px solid rgba(254, 215, 170, 0.35) !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.22) !important;
}
#sidebar .nav-icon-badge.badge-finance {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(21, 128, 61, 0.5) 100%) !important;
  border: 1px solid rgba(187, 247, 208, 0.35) !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.22) !important;
}

#sidebar .nav-link span {
  color: rgba(255, 255, 255, 0.95);
  transition: color 0.2s ease;
}

/* Hiệu ứng rê chuột (Hover Effect) sáng sủa, tinh tế */
#sidebar .nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#sidebar .nav-link:hover:not(.active) .nav-icon-badge,
#sidebar .nav-section-header:hover .nav-icon-badge {
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

#sidebar .nav-link:hover:not(.active) span {
  color: #ffffff !important;
}

/* Mục đang kích hoạt (Active tab): Nổi bật trên nền xanh đậm */
#sidebar .nav-link.active {
  background: linear-gradient(90deg, #1d6fe5 0%, #1558bf 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-left: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

#sidebar .nav-link.active .nav-icon-badge {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #00559b !important;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), 0 0 10px rgba(255, 255, 255, 0.35) !important;
}

#sidebar .nav-link.active .nav-icon-badge i {
  color: inherit !important;
}

#sidebar .nav-link.active .nav-icon-badge.badge-dashboard { color: #4f46e5 !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-bts { color: #0284c7 !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-gps { color: #059669 !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-contract-land { color: #d97706 !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-contract-tower { color: #7c3aed !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-maintenance-plan { color: #ea580c !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-maintenance-log { color: #0891b2 !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-rental-cost { color: #1d4ed8 !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-rental-revenue { color: #15803d !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-om-expense { color: #a21caf !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-rbac { color: #4338ca !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-payment { color: #d97706 !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-maintenance { color: #ea580c !important; }
#sidebar .nav-link.active .nav-icon-badge.badge-finance { color: #15803d !important; }

#sidebar .nav-link.active span {
  color: #ffffff !important;
}

#sidebar .nav-link.active:hover {
  background: linear-gradient(90deg, #0063a8 0%, #004c8a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 40, 90, 0.45) !important;
}

/* Logo chu kỳ thanh toán & bảo dưỡng trong bảng dữ liệu, nút trigger và modal */
.table .logo-chu-ky-tra-tien,
.term-calendar-trigger .logo-chu-ky-tra-tien,
.badge .logo-chu-ky-tra-tien,
.modal .logo-chu-ky-tra-tien {
  color: #0284c7 !important;
  filter: drop-shadow(0 1px 2px rgba(2, 132, 199, 0.35));
}
.table .logo-chu-ky-bao-duong,
.term-calendar-trigger .logo-chu-ky-bao-duong,
.badge .logo-chu-ky-bao-duong,
.modal .logo-chu-ky-bao-duong {
  color: #ea580c !important;
  filter: drop-shadow(0 1px 2px rgba(234, 88, 12, 0.35));
}

/* ẨN HOÀN TOÀN CÁC BADGE SỐ TRÊN SIDEBAR THEO YÊU CẦU */
#sidebar .badge-sidebar-total,
#sidebar .badge-alert-count,
#sidebar .badge-count,
#sidebar .badge {
  display: none !important;
}

#sidebar .badge-count {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
}

/* BADGE CẢNH BÁO MENU SIDEBAR: NỀN ĐỎ ROSE DỊU MẮT SỐ TRẮNG ĐÓNG KHUNG */
#sidebar .badge-alert-count {
  margin-left: auto !important;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  background-color: #e11d48 !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 999px !important;
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 0 7px !important;
  min-width: 24px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 2px 5px rgba(190, 18, 60, 0.35) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#sidebar .badge-alert-count:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 3px 8px rgba(225, 29, 72, 0.5) !important;
}

/* BADGE TỔNG TRẠM BTS MENU SIDEBAR: NỀN XANH DƯƠNG MOBIFONE SỐ TRẮNG ĐÓNG KHUNG */
#sidebar .badge-sidebar-total {
  margin-left: auto !important;
  background-color: #005baa !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 999px !important;
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 0 7px !important;
  min-width: 28px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#sidebar .badge-sidebar-total:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 2px 6px rgba(0, 91, 170, 0.5) !important;
}

/* Tiêu đề nhóm Menu hỗ trợ Collapse / Expand */
.nav-section-header {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.78rem !important;
  color: #ffffff;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 8px;
  margin-top: 4px;
  margin-bottom: 2px;
  user-select: none;
  border-left: 4px solid transparent;
  transition: all 0.25s ease;
}

.nav-section-header:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-left: 4px solid #ffffff !important;
}

/* Khi có menu con đang active, menu cha được highlight đồng bộ */
.nav-section-header.active {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border-left: 4px solid #ffffff !important;
}

.nav-section-header.active .nav-section-icon {
  color: #ffffff !important;
}

.nav-section-header.active .nav-icon-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25) !important;
}

.nav-section-icon {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.70) !important;
  /* Icon nhóm màu Trắng Bạc dịu 70% */
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-section-header:hover .nav-section-icon,
.nav-section-header.active .nav-section-icon {
  color: #ffffff !important;
  transform: scale(1.1);
}

.nav-section-arrow {
  font-size: 0.72rem;
  color: #ffffff !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.85;
}

.nav-section-header.collapsed .nav-section-arrow {
  transform: rotate(-90deg);
}

/* Danh sách menu con với animation đóng/mở mượt mà */
.nav-section-list {
  padding-left: 0;
  margin-bottom: 2px;
  list-style: none;
  overflow: hidden;
  max-height: 400px;
  opacity: 1;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

.nav-section-list.collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none;
}

/* Thụt lề nhẹ cho các menu con để tạo phân cấp trực quan đẹp mắt */
.nav-section-list .nav-link {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  padding-left: 20px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

/* KHUNG 3 - DƯỚI CÙNG: SIDEBAR FOOTER (XANH DƯƠNG ĐẬM ĐỒNG BỘ) */
#sidebar .sidebar-footer {
  background: linear-gradient(135deg, #09254a 0%, #0b2c56 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px 10px;
  flex-shrink: 0;
}

/* Ô TRỰC TUYẾN - NỀN MÀU XANH ĐẬM TRONG SUỐT TINH TẾ */
#sidebar .sidebar-system-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  transition: all 0.2s ease !important;
}

#sidebar .sidebar-system-card:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.network-pulse-dot {
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Vòng tròn nhấp nháy màu xanh lá cây chuẩn như hình 2 (connected) */
.network-pulse-dot.online {
  background-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 0 8px #10b981 !important;
  animation: pulseGreenOnline 1.8s infinite ease-in-out !important;
}

.network-pulse-dot.offline {
  background-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25), 0 0 8px rgba(239, 68, 68, 0.8);
  animation: pulseRed 1.5s infinite ease-in-out;
}

@keyframes pulseGreenOnline {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.75), 0 0 6px #10b981;
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0), 0 0 10px rgba(16, 185, 129, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 6px #10b981;
  }
}

@keyframes pulseBlue {
  0% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7), 0 0 4px rgba(56, 189, 248, 0.8);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(56, 189, 248, 0), 0 0 8px rgba(56, 189, 248, 0.3);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0), 0 0 4px rgba(56, 189, 248, 0.8);
  }
}

@keyframes pulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7), 0 0 4px rgba(239, 68, 68, 0.8);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0), 0 0 8px rgba(239, 68, 68, 0.3);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 0 4px rgba(239, 68, 68, 0.8);
  }
}

.network-status-text {
  font-size: 0.78rem;
  letter-spacing: 0.2px;
}

/* Chữ Trực tuyến màu xanh lá cây chuẩn như hình 2 (connected) */
.network-status-text.text-online {
  color: #34d399 !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.65), 0 0 14px rgba(16, 185, 129, 0.35) !important;
}

.network-status-text.text-offline {
  color: #ef4444 !important;
}

/* Giãn rộng chiều ngang khung chứa chữ v2.3.0 cho cân đối, để sau này version lên 4 chữ số nằm lọt trong khung */
.sidebar-version-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.sidebar-version-badge .version-pill,
.sidebar-version-badge .version-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 68px !important; /* Giãn rộng chiều ngang chuẩn cân đối cho version 4 chữ số */
  padding: 2px 10px !important;
  text-align: center !important;
  background: transparent !important; /* Xóa màu nền hình chữ nhật nhỏ nằm trong khung v2.3.0 */
  border: 1px solid rgba(52, 211, 153, 0.5) !important; /* Giữ lại khung ngoài */
  box-shadow: none !important;
  color: #ffffff !important; /* Đổi màu nét chữ v2.3.0 thành màu trắng tinh */
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  letter-spacing: 0.4px !important;
  transition: all 0.2s ease !important;
}

.sidebar-version-badge:hover .version-pill,
.sidebar-version-badge:hover .version-tag,
.sidebar-version-badge .version-pill:hover,
.sidebar-version-badge .version-tag:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(52, 211, 153, 0.85) !important;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.3) !important;
  color: #ffffff !important;
}

/* =========================================================================
     THU GỌN / MỞ RỘNG SIDEBAR (DESKTOP & MOBILE)
     ========================================================================= */
/* Desktop Collapse */
body.sidebar-collapsed #sidebar {
  margin-left: calc(-1 * var(--sidebar-width)) !important;
  transform: translateX(-100%);
}

body.sidebar-collapsed #main-content {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Backdrop mờ khi mở Sidebar trên Mobile */
#sidebarBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  backdrop-filter: blur(2px);
}

/* =========================================================================
     CẤU TRÚC LAYOUT CHỐNG CO CHIỀU CAO VỀ 0 (.app-layout, .main-wrapper, #main-content)
     ========================================================================= */
body.app-layout,
.app-layout {
  display: flex !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
  min-width: 0 !important;
  background-color: #f8fafc;
}

#main-content,
.main-content,
.content-area {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding: 14px 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  background-color: #f8fafc !important;
}

/* TOP HEADER (THANH HEADER TRÊN CÙNG: TONE TRẮNG HIỆN ĐẠI, NHẸ NHÀNG) */
#top-header,
.top-bar,
.top-navbar {
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  margin: 10px 16px 0 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  /* QUAN TRỌNG: Cho phép Dropdown menu xổ xuống dưới header mà không bị che khuất */
  position: relative !important;
  z-index: 1030 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  background: #ffffff !important;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin-bottom: 12px;
  flex-shrink: 0 !important;
  min-height: 48px;
}

/* =========================================================================
     CƠ CHẾ QUẢN LÝ TAB VIEW (.app-view.hidden & .app-view:not(.hidden))
     ========================================================================= */
.app-view.hidden,
.tab-pane.hidden,
#view-dashboard.hidden,
#view-table-module.hidden,
#view-find-nearest.hidden {
  display: none !important;
}

.app-view:not(.hidden),
.tab-pane.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.top-nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  max-width: none;
}

#btnToggleSidebar {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  flex-shrink: 0;
}

#btnToggleSidebar:hover {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* TIÊU ĐỀ TRANG */
.page-title,
.top-title {
  flex-shrink: 0;
  min-width: max-content;
  white-space: nowrap;
  overflow: visible;
}

.top-title h5,
#currentModuleTitle {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1f2937 !important;
  margin: 0;
  white-space: nowrap;
  overflow: visible;
  display: flex;
  align-items: center;
  cursor: default;
  flex-shrink: 0;
}

#currentModuleTitle i {
  color: #1f2937 !important;
}

.module-title-text {
  color: #1f2937 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* 1. MỞ RỘNG KHUNG TÌM KIẾM CO GIÃN THÔNG MINH */
#header-search,
.search-box,
.header-search-wrap {
  flex: 0 1 320px !important;
  min-width: 160px !important;
  max-width: 320px !important;
}

.header-search-group {
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid #d1d5db !important;
  background: #f9fafb !important;
  transition: all 0.2s ease;
}

.header-search-group:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  background: #ffffff !important;
}

.header-search-group .input-group-text {
  background: transparent !important;
  border: none !important;
  font-size: 0.8rem;
  color: #6b7280 !important;
}

.header-search-group .form-control {
  border: none !important;
  font-size: 0.82rem;
  padding: 5px 6px;
  background: transparent !important;
  color: #111827 !important;
}

.header-search-group .form-control:focus {
  box-shadow: none;
  outline: none;
}

.header-search-group .form-control::placeholder {
  color: #9ca3af !important;
  font-size: 0.8rem;
}

.header-search-group .btn-clear-search {
  border: none !important;
  background: transparent !important;
  padding: 0 8px;
  font-size: 0.78rem;
  color: #9ca3af !important;
  transition: color 0.15s ease;
}

.header-search-group .btn-clear-search:hover {
  color: #ef4444 !important;
}

/* 3. CỤM NÚT CÔNG CỤ BÊN PHẢI */
.header-actions,
.top-nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
}

.btn-top-action {
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: normal;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  transition: all 0.2s ease;
}

.btn-top-action i {
  font-size: 13px;
}

/* Nút Cài App */
#btnInstallAppHeader {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}

#btnInstallAppHeader i {
  color: #2563eb !important;
}

#btnInstallAppHeader:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}


/* Nút Đồng bộ - Dạng Pill trạng thái nhẹ nhàng (Phương án 2) */
#btnSyncHeader,
#BTN_SYNC_HEADER {
  background: #f0f7ff !important;
  background-color: #f0f7ff !important;
  border: 1px solid #bfdbfe !important;
  color: #004ea2 !important;
  box-shadow: 0 1px 3px rgba(0, 78, 162, 0.08) !important;
}

#btnSyncHeader i,
#BTN_SYNC_HEADER i {
  color: #0085ff !important;
}

#btnSyncHeader span,
#BTN_SYNC_HEADER span {
  color: #004ea2 !important;
}

#btnSyncHeader:hover,
#BTN_SYNC_HEADER:hover {
  background: #e0f2fe !important;
  background-color: #e0f2fe !important;
  border-color: #93c5fd !important;
  color: #00428d !important;
  box-shadow: 0 2px 6px rgba(0, 78, 162, 0.15) !important;
}

#btnSyncHeader:hover i,
#BTN_SYNC_HEADER:hover i {
  color: #0085ff !important;
}

#btnSyncHeader:hover span,
#BTN_SYNC_HEADER:hover span {
  color: #00428d !important;
}

/* Nút Xuất Excel - Dạng Soft Tint thanh lịch (Phương án 2) */
#btnExport,
button#BTN_EXPORT_EXCEL,
.nearest-btn-export {
  background: #f0f7ff !important;
  background-color: #f0f7ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #004ea2 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 78, 162, 0.08) !important;
}

#btnExport:hover,
button#BTN_EXPORT_EXCEL:hover,
.nearest-btn-export:hover {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  background-color: #004ea2 !important;
  border-color: #00428d !important;
  box-shadow: 0 4px 12px rgba(0, 66, 141, 0.35) !important;
}

#btnExport *,
#btnExport i,
#btnExport span,
.nearest-btn-export * {
  color: #004ea2 !important;
}

#btnExport:hover *,
#btnExport:hover i,
#btnExport:hover span,
.nearest-btn-export:hover * {
  color: #ffffff !important;
}

/* Nút Thêm mới - Chuẩn dải Footer Sidebar Xanh Đậm VNPT (#00428d -> #005baa) */
.btn-top-action.btn-add-record,
#btnAddRecord,
button#BTN_ADD_NEW {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  background-color: #004ea2 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  padding: 4px 10px !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 66, 141, 0.35) !important;
}

#btnAddRecord:hover,
button#BTN_ADD_NEW:hover {
  background: linear-gradient(135deg, #003775 0%, #004ea2 100%) !important;
  background-color: #00428d !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 66, 141, 0.45) !important;
}

/* =========================================================================
     AVATAR NGƯỜI DÙNG TRÊN HEADER (CHUẨN NGUYÊN TRẠNG BAN ĐẦU: XANH ĐẬM VNPT GRADIENT, CHỮ TRẮNG)
     ========================================================================= */
#headerUserDropdown,
.header-user-avatar-btn,
#top-header .user-avatar,
#USER_AVATAR_BTN,
.user-avatar-vinaphone {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 0 0 8px !important;
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  background-color: #004ea2 !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 0 0 1.5px #004ea2, 0 2px 6px rgba(0, 66, 141, 0.35) !important;
  cursor: pointer !important;
  position: relative !important;
  outline: none !important;
  overflow: visible !important;
  transform-origin: center center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  vertical-align: middle !important;
}

/* Ẩn hoàn toàn pseudo-element ::before (không dùng vòng tròn bên trong) */
#headerUserDropdown::before,
.header-user-avatar-btn::before,
#top-header .user-avatar::before,
#USER_AVATAR_BTN::before,
.user-avatar-vinaphone::before {
  display: none !important;
  content: none !important;
}

/* Ẩn mũi tên caret dropdown mặc định */
#headerUserDropdown::after,
.header-user-avatar-btn::after,
#top-header .user-avatar::after,
#USER_AVATAR_BTN::after,
.user-avatar-vinaphone::after {
  display: none !important;
}

#headerUserDropdown:hover,
.header-user-avatar-btn:hover,
#top-header .user-avatar:hover,
#USER_AVATAR_BTN:hover,
.user-avatar-vinaphone:hover {
  transform: scale(1.05) !important;
  background: linear-gradient(135deg, #003775 0%, #004ea2 100%) !important;
  background-color: #00428d !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1.5px #00428d, 0 4px 12px rgba(0, 66, 141, 0.45) !important;
}

#headerUserDropdown:active,
.header-user-avatar-btn:active,
#top-header .user-avatar:active,
#USER_AVATAR_BTN:active,
.user-avatar-vinaphone:active {
  transform: scale(0.98) !important;
}

#headerUserAvatar,
.header-user-avatar-text {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: transparent !important;
  line-height: 1 !important;
  user-select: none;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  text-shadow: none !important;
}

/* =========================================================================
     MENU DROPDOWN TÀI KHOẢN NGƯỜI DÙNG (Z-INDEX CAO NHẤT, NẰM NGAY DƯỚI AVATAR)
     ========================================================================= */
#headerUserDropdownWrapper {
  position: relative !important;
  z-index: 1050 !important;
}

#headerUserDropdownWrapper .dropdown-menu,
#headerUserDropdownMenu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  z-index: 999999 !important;
  /* Z-INDEX cao nhất để không bị bất kỳ thành phần nào che khuất */
  min-width: 230px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  display: none;
  /* Mặc định ẩn */
  pointer-events: auto !important;
}

/* Khi class .show được thêm vào dropdown menu hoặc wrapper */
#headerUserDropdownWrapper .dropdown-menu.show,
#headerUserDropdownWrapper.show .dropdown-menu,
#headerUserDropdownMenu.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#headerUserDropdownWrapper .dropdown-item {
  font-size: 0.84rem !important;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#headerUserDropdownWrapper .dropdown-item:hover {
  background-color: #f1f5f9 !important;
}

#headerUserDropdownWrapper .dropdown-item.text-danger:hover {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
}

/* KPI CARDS TRÊN DASHBOARD */
.card-kpi {
  border: 1px solid var(--dtc-border);
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.card-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.kpi-blue::before,
.kpi-brand::before {
  background: var(--dtc-brand, #0c4a9e);
}

.kpi-amber::before {
  background: #f59e0b;
}

.kpi-emerald::before {
  background: #10b981;
}

.kpi-cyan::before,
.kpi-telecom::before {
  background: #005baa;
}

.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.kpi-blue .kpi-icon,
.kpi-brand .kpi-icon {
  background: #eff6ff;
  color: #0c4a9e;
}

.kpi-amber .kpi-icon {
  background: #fffbeb;
  color: #f59e0b;
}

.kpi-emerald .kpi-icon {
  background: #ecfdf5;
  color: #10b981;
}

.kpi-cyan .kpi-icon,
.kpi-telecom .kpi-icon {
  background: #eff6ff;
  color: #005baa;
}

.kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-top: 4px;
  color: #0f172a;
}

/* =========================================================================
     BẢNG "THỜI HẠN THU TIỀN CẦN ƯU TIÊN XỬ LÝ" TRÊN DASHBOARD
     TỰ ĐỘNG GIÃN CHIỀU CAO, LẤP ĐẦY KHOẢNG TRẮNG VÀ CÂN ĐỐI BỐ CỤC
     ========================================================================= */
.dashboard-reminders-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--dtc-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* =========================================================================
     HEADER TIÊU ĐỀ "QUẢN TRỊ HỆ THỐNG" & BRAND BADGE
     ========================================================================= */
#currentModuleTitle,
.module-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  /* flex items-center gap-3 */
  margin-bottom: 0 !important;
  font-size: 1.35rem !important;
  /* text-xl / text-2xl */
  font-weight: 700 !important;
  /* font-bold */
  color: #1e293b !important;
  /* text-slate-800 */
  letter-spacing: -0.015em !important;
}

#currentModuleTitle .module-title-text,
.module-header-title .module-title-text {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em;
}

.brand-badge-wrapper,
.brand-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #f1f5f9 100%) !important;
  border: 1.5px solid #bfdbfe !important;
  color: #0c4a9e !important;
  box-shadow: 0 1px 3px rgba(12, 74, 158, 0.08) !important;
  transition: all 0.2s ease-in-out !important;
}

.brand-badge-wrapper:hover,
.brand-icon-badge:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 2px 8px rgba(12, 74, 158, 0.15) !important;
  transform: translateY(-1px) !important;
}

.brand-badge-wrapper i,
.brand-icon-badge i {
  font-size: 1.05rem !important;
  color: #0c4a9e !important;
}

/* =========================================================================
     BANNER CẢNH BÁO "CÔNG VIỆC CẦN XỬ LÝ" (URGENT ALERT THEME)
     - Nền cảnh báo đỏ - cam - hổ phách
     - Chữ "Công việc cần xử lý" viết hoa đầu dòng kèm hiệu ứng chớp nháy (chóp nhá)
     - Logo tam giác cảnh báo có hiệu ứng beacon rung/phát sáng khẩn cấp
     - Badge số lượng có hiệu ứng radar ripple/ping khẩn cấp
     ========================================================================= */
.dashboard-reminders-card .card-header,
.dashboard-warning-banner {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 50%, #fff1f2 100%) !important;
  border: 1px solid #fecdd3 !important;
  border-left: 4.5px solid #e11d48 !important;
  border-bottom: 1px solid #fecdd3 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  padding: 11px 18px !important;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  position: relative;
  overflow: hidden;
  animation: alertBannerPulse 3.5s ease-in-out infinite;
}

@keyframes alertBannerPulse {

  0%,
  100% {
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: #fecdd3;
  }

  50% {
    box-shadow: 0 3px 14px rgba(225, 29, 72, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: #fda4af;
  }
}

/* Icon cảnh báo tam giác nguy hiểm (Alert/Warning Triangle) - Hiệu ứng lan tỏa nhẹ dịu mắt, không gây chói */
.warning-triangle-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

/* Vòng sóng lan tỏa 1 (Sóng dịu mắt) */
.warning-triangle-wrapper::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(225, 29, 72, 0.45);
  background: radial-gradient(circle, rgba(244, 63, 94, 0.18) 0%, rgba(225, 29, 72, 0.04) 65%, rgba(225, 29, 72, 0) 100%);
  pointer-events: none;
  z-index: 0;
  animation: dtc-alert-soft-ripple 2.8s cubic-bezier(0.16, 0.8, 0.3, 1) infinite;
}

/* Vòng sóng lan tỏa 2 (Sóng đệm tiếp nối êm ả) */
.warning-triangle-wrapper::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(244, 63, 94, 0.3);
  pointer-events: none;
  z-index: 0;
  animation: dtc-alert-soft-ripple 2.8s cubic-bezier(0.16, 0.8, 0.3, 1) infinite;
  animation-delay: 1.4s;
}

@keyframes dtc-alert-soft-ripple {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
    border-color: rgba(225, 29, 72, 0.5);
  }

  50% {
    opacity: 0.35;
    border-color: rgba(244, 63, 94, 0.3);
  }

  100% {
    transform: scale(2.05);
    opacity: 0;
    border-color: rgba(244, 63, 94, 0);
  }
}

.warning-triangle-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 3px rgba(225, 29, 72, 0.3));
  transition: transform 0.25s ease;
  animation: dtc-alert-gentle-breathe 2.8s ease-in-out infinite;
}

@keyframes dtc-alert-gentle-breathe {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 1px 2px rgba(225, 29, 72, 0.25));
  }

  50% {
    transform: scale(1.07);
    filter: drop-shadow(0 2px 6px rgba(225, 29, 72, 0.45));
  }
}

.warning-triangle-wrapper:hover .warning-triangle-icon {
  transform: scale(1.15);
}

/* Dòng chữ tiêu đề viết hoa đầu dòng "Công việc cần xử lý gấp" với tông đỏ dịu mắt */
.urgent-task-title {
  font-size: 0.92rem;
  font-weight: 700 !important;
  letter-spacing: -0.1px;
  color: #9f1239 !important;
  /* Rose 800: Đỏ mận dịu mắt, tương phản cao */
  text-transform: none !important;
  line-height: 1.2;
  margin-bottom: 0;
  display: inline-block;
}

/* Badge số lượng công việc cảnh báo khẩn cấp - Nhỏ gọn, tinh tế tương xứng với chữ */
.urgent-task-count-badge {
  position: relative;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 1px 7px !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 3px rgba(190, 18, 60, 0.25) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  line-height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  vertical-align: middle;
}

/* MẪU A: Capsule Pill 2 trong 1 ([ 🔴 X | 🟡 Y ]) - Tinh gọn, thẩm mỹ cao */
.urgent-capsule-badge {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  user-select: none !important;
  height: 20px !important;
  margin-left: 2px !important;
}

.urgent-capsule-badge .capsule-seg-red {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  color: #ffffff !important;
  padding: 0 6px 0 5px !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.urgent-capsule-badge .capsule-seg-divider {
  width: 1px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  display: inline-block !important;
}

.urgent-capsule-badge .capsule-seg-yellow {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  padding: 0 6px 0 5px !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.urgent-capsule-badge .capsule-seg-zero {
  background: #94a3b8 !important;
  color: #ffffff !important;
  padding: 0 7px !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
}

.urgent-badge-radar {
  position: relative;
}

/* MENU CHA CÁC NỘI DUNG CẢNH BÁO GẤP */
.urgent-parent-nav {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 52px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  flex-wrap: nowrap !important;
}

.urgent-nav-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  border-radius: 8px !important;
  padding: 6px 4px !important;
  height: 38px !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.urgent-nav-btn i {
  font-size: 0.82rem !important;
  flex-shrink: 0 !important;
}

.urgent-nav-btn span:not(.badge) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.urgent-nav-btn:hover:not(.active) {
  background-color: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #004ea2 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 78, 162, 0.15) !important;
}

.urgent-nav-btn.active {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  border-color: #00428d !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 66, 141, 0.35) !important;
}

.urgent-nav-btn.active i {
  color: #ffffff !important;
}

.urgent-nav-btn.active .badge {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.urgent-nav-btn .badge {
  font-size: 0.7rem !important;
  padding: 2px 6px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  line-height: 1.1 !important;
  flex-shrink: 0 !important;
}

.dashboard-reminders-responsive {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: #ffffff;
  min-height: 0;
}

.dashboard-reminders-table {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}

.dashboard-reminders-table tbody {
  height: 100% !important;
}

/* Cân chỉnh chiều cao 10 dòng chứa thông tin trạm căn đều vừa trọn trang */
.dashboard-reminders-table tbody tr {
  height: var(--urgent-row-height, 48px) !important;
  max-height: var(--urgent-row-height, 48px) !important;
  min-height: var(--urgent-row-height, 48px) !important;
  transition: background-color 0.15s ease;
}

.dashboard-reminders-table th,
.dashboard-reminders-table td {
  vertical-align: middle !important;
}

.dashboard-reminders-table tbody td {
  padding: 6px 8px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  height: var(--urgent-row-height, 48px) !important;
  box-sizing: border-box !important;
}

/* Dòng trống bổ sung khi trang có dưới 10 dòng để cố định chiều cao đồng bộ trang 1 và trang 2 */
.dashboard-reminders-table tbody tr.urgent-empty-row {
  height: var(--urgent-row-height, 48px) !important;
  max-height: var(--urgent-row-height, 48px) !important;
  min-height: var(--urgent-row-height, 48px) !important;
  background-color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.dashboard-reminders-table tbody tr.urgent-empty-row td {
  padding: 6px 8px !important;
  height: var(--urgent-row-height, 48px) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: transparent !important;
  box-sizing: border-box !important;
}

/* Dòng 3: Tiêu đề cột thead cân đối nhịp điệu với 2 dòng trên */
.dashboard-reminders-table thead th {
  padding: 9px 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  height: 42px !important;
  letter-spacing: 0.2px;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-bottom: 2px solid #cbd5e1 !important;
  white-space: nowrap;
  user-select: none;
}

.dashboard-reminders-table thead th.th-sortable {
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-reminders-table thead th.th-sortable:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Thẻ trạng thái và nút hành động trong bảng dashboard cân đối vừa vặn dòng 38px */
.dashboard-reminders-table .dtc-status-badge {
  height: 26px !important;
  font-size: 0.75rem !important;
  padding: 0 8px !important;
  width: 195px !important;
  min-width: 195px !important;
  max-width: 195px !important;
  gap: 6px !important;
}

.dashboard-reminders-table .dtc-status-badge .badge-days {
  font-size: 0.72rem !important;
  padding: 1px 5px !important;
  line-height: 1.3 !important;
}

.dashboard-reminders-table .btn-sm {
  height: 26px !important;
  padding: 2px 9px !important;
  font-size: 0.76rem !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Căn giữa theo chiều dọc cho các badge trong bảng */
.dashboard-reminders-table .badge {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

/* KHÓA CLICK CHUỘT / CON TRỎ TRÊN CÁC DÒNG TẠI BẢNG DASHBOARD - CHỈ CLICK CỘT THAO TÁC XỬ LÝ */
.dashboard-reminders-table tbody tr,
.dashboard-reminders-table tbody td {
  cursor: default !important;
}

.dashboard-reminders-table .bts-station-badge,
.dashboard-reminders-table .bts-csht-badge,
.dashboard-reminders-table .bts-station-name-badge,
.dashboard-reminders-table .urgent-category-badge,
.dashboard-reminders-table .dtc-status-badge {
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
}

.dashboard-reminders-table td.col-urgent-action,
.dashboard-reminders-table .btn-urgent-goto {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.dashboard-reminders-table .btn-urgent-goto {
  transition: all 0.15s ease !important;
}

.dashboard-reminders-table .btn-urgent-goto:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 5px rgba(13, 110, 253, 0.25) !important;
}

@media (max-width: 768px) {

  .dashboard-reminders-table th,
  .dashboard-reminders-table td {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }
}

/* =========================================================================
     THẺ THỐNG KÊ DASHBOARD (WIDGET "Thống kê trạm BTS")
     ========================================================================= */
.dashboard-stats-card {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.dashboard-stats-card:hover {
  box-shadow: 0 8px 26px rgba(0, 78, 162, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  border-color: #cbd5e1 !important;
}

/* ĐƯỜNG VIỀN NHẤN ĐẦU THẺ (ACCENT GRADIENT LINE) */
.dashboard-stats-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #004ea2 0%, #0080ff 50%, #00d2ff 100%);
  z-index: 2;
}

/* KHU VỰC ĐẦU THẺ (CARD HEADER): NỀN GRADIENT CÔNG NGHỆ, HIỆU ỨNG NỔI BẬT */
.dashboard-stats-header {
  background: linear-gradient(180deg, #f0f7ff 0%, #f8fafc 100%);
  padding: 16px 20px 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  position: relative;
}

/* Tiêu đề "Thống kê trạm BTS": Chữ hoa đầu dòng, font-weight 700, màu xanh đen sang trọng */
.dashboard-stats-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: none !important;
  /* Chữ hoa đầu dòng theo yêu cầu */
  letter-spacing: -0.2px !important;
}

/* Huy hiệu icon trạm anten BTS phát sáng công nghệ */
.dashboard-stats-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #004ea2 0%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 78, 162, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  position: relative;
}

.dashboard-stats-icon-wrap i {
  font-size: 15px !important;
  color: #ffffff !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}

.dashboard-stats-header:hover .dashboard-stats-icon-wrap {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 78, 162, 0.42);
}

.dashboard-stats-header:hover .dashboard-stats-icon-wrap i {
  transform: rotate(-6deg);
}

/* Cụm nút chuyển đổi ("Theo nhà mạng" / "Theo tỉnh/thành") dạng Segment Pill nổi bật */
.dashboard-stats-toggle {
  background: #e2e8f0;
  padding: 4px;
  border-radius: 30px;
  border: 1px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08);
}

/* Nút bấm toggle với hiệu ứng chuyển màu mềm mại, bo tròn pill */
.btn-stats-toggle {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  border-radius: 22px !important;
  border: 1px solid transparent !important;
  line-height: 1.4;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap;
  cursor: pointer;
  color: #475569 !important;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-stats-toggle i {
  font-size: 12px;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Trạng thái Hover khi di chuột vào nút Inactive */
.btn-stats-toggle:hover:not(.active) {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #004ea2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.btn-stats-toggle:hover:not(.active) i {
  opacity: 1;
  transform: scale(1.1);
}

/* Trạng thái Active: Gradient xanh viễn thông VNPT/DTC nổi bật, bóng đổ 3D */
.btn-stats-toggle.active {
  background: linear-gradient(135deg, #00428d 0%, #0066cc 100%) !important;
  background-color: #004ea2 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 3px 12px rgba(0, 66, 141, 0.38), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.02);
}

.btn-stats-toggle.active i {
  color: #ffffff !important;
  opacity: 1;
}

/* KHU VỰC THÂN THẺ (CARD BODY): THU GỌN VỪA VẶN KHUNG NHÌN */
.dashboard-stats-body {
  padding: 14px 16px !important;
  background: #ffffff;
}

#operatorBreakdownList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Khoảng cách gọn gàng giữa các dòng */
}

/* Giảm nhẹ padding giữa các dòng nhà mạng / tỉnh để bố cục gọn gàng, không kéo dài trang */
#operatorBreakdownList .stats-row-item {
  padding: 6px 12px;
  border-radius: 7px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  transition: all 0.15s ease;
}

#operatorBreakdownList .stats-row-item:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

#operatorBreakdownList .stats-row-header {
  font-size: 0.82rem;
  font-weight: 700;
}

#operatorBreakdownList .stats-row-progress {
  height: 5px;
  border-radius: 4px;
  background: #e2e8f0;
  overflow: hidden;
}

#operatorBreakdownList .stats-row-sub {
  font-size: 0.75rem;
  color: #64748b;
  padding-left: 2px;
}

@media (max-width: 576px) {
  .dashboard-stats-header {
    padding: 12px 14px;
    gap: 10px;
  }

  .dashboard-stats-title {
    font-size: 15px !important;
  }

  .dashboard-stats-title i {
    font-size: 16px !important;
  }

  .btn-stats-toggle {
    font-size: 13px !important;
    padding: 5px 12px !important;
  }
}

/* =========================================================================
     CONTAINER DỮ LIỆU FULL-WIDTH & CỰC KỲ DÀY DẶN DÒNG DATA
     ========================================================================= */
#view-table-module.app-view:not(.hidden) {
  width: 100%;
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  min-height: 520px;
}

.table-card {
  width: 100%;
  flex: 1 1 auto;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dtc-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.table-toolbar {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #ffffff;
  border-bottom: 1px solid var(--dtc-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 38px;
}

/* FREEZE TOP HEADER ON SCROLL */
.table-container {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 380px;
  width: 100%;
  position: relative;
  background: #ffffff;
}

.table-container table {
  margin-bottom: 0;
  font-size: 0.82rem;
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
}

/* STICKY FROZEN COLUMNS (STT & ACTION) */
.col-freeze-stt {
  position: sticky;
  left: 0;
  z-index: 12;
  background: #ffffff !important;
}

thead th.col-freeze-stt {
  z-index: 25 !important;
  background: #f1f5f9 !important;
  left: 0;
}

.col-freeze-action {
  position: sticky;
  right: 0;
  z-index: 12;
  background: #ffffff !important;
  box-shadow: -3px 0 6px rgba(0, 0, 0, 0.04);
}

thead th.col-freeze-action {
  z-index: 25 !important;
  background: #f1f5f9 !important;
  right: 0;
  box-shadow: -3px 0 6px rgba(0, 0, 0, 0.04);
}

/* CLICKABLE ROW FOR DETAIL VIEW */
tr.table-row-clickable {
  cursor: pointer !important;
  transition: background-color 0.12s ease;
}

tr.table-row-clickable td {
  cursor: pointer !important;
}

tr.table-row-clickable:hover td {
  background-color: #e0f2fe !important;
}

tr.table-row-clickable:hover td.col-freeze-stt {
  background-color: #bae6fd !important;
}

tr.table-row-clickable:hover td.col-freeze-action {
  background-color: #bae6fd !important;
}

tr.table-row-clickable:active td {
  background-color: #7dd3fc !important;
}

/* MULTI-COLUMN FORM & SPEC CARD STYLING */
.form-field-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  height: 100%;
  transition: all 0.15s ease;
}

.form-field-card:focus-within {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* VIETNAMESE DATEPICKER COMPONENT (DD/MM/YYYY) */
.vn-date-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.vn-date-input-group input[type="text"] {
  letter-spacing: 0.5px;
  font-weight: 600;
  background-color: #ffffff;
}

.vn-date-input-group .btn-vn-calendar {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #2563eb;
  cursor: pointer;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease-in-out;
}

.vn-date-input-group .btn-vn-calendar:hover {
  background-color: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.vn-date-input-group .vn-date-native-picker {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.spec-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 2.5px solid #2563eb;
  border-radius: 8px;
  padding: 8px 12px;
  height: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
}

.spec-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  border-top-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.spec-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #1d4ed8 !important; /* Màu chữ nhãn nổi bật, tương phản rõ rệt hơn nội dung */
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.spec-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  word-break: break-word;
}

/* THẺ THƯ MỤC HỒ SƠ TRẠM CHUẨN ERP TRONG MODAL CHI TIẾT TRẠM BTS */
.spec-card-folder {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
  border: 1px solid #bfdbfe !important;
  border-left: 4px solid #2563eb !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.spec-card-folder:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 100%) !important;
  border-color: #3b82f6 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.18) !important;
}

.spec-card-folder:active {
  transform: translateY(0);
}

/* GIAO DIỆN THƯ MỤC TÀI LIỆU HỒ SƠ TRẠM BTS */
#modalStationDossier {
  z-index: 1065 !important;
}

.station-doc-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.station-doc-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}

.station-doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.station-doc-icon-pdf {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.station-doc-icon-doc {
  background: #dbeafe;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.station-doc-icon-xls {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.station-doc-icon-img {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.station-doc-icon-other {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* DETAIL MODAL TABS & COMMENTS / AUDIT TIMELINE */
#detailModalNavTabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: #64748b;
  border-radius: 0;
}

#detailModalNavTabs .nav-link.active {
  color: #1e40af;
  border-bottom-color: #2563eb;
  background: transparent;
  font-weight: 700;
}

.comment-item {
  padding: 10px 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 0.78rem;
}

.comment-body {
  font-size: 0.83rem;
  color: #1e293b;
  white-space: pre-wrap;
  line-height: 1.45;
}

.comment-attachment-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  text-decoration: none;
  word-break: break-all;
}

.comment-attachment-badge:hover {
  background: #dbeafe;
  color: #1e40af;
}

.audit-timeline-item {
  position: relative;
  padding-left: 24px;
  padding-bottom: 14px;
  border-left: 2px solid #e2e8f0;
}

.audit-timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.audit-timeline-dot {
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #dbeafe;
}

.audit-timeline-dot.action-create {
  background: #10b981;
  box-shadow: 0 0 0 2px #d1fae5;
}

.audit-timeline-dot.action-update {
  background: #f59e0b;
  box-shadow: 0 0 0 2px #fef3c7;
}

.audit-timeline-dot.action-delete {
  background: #ef4444;
  box-shadow: 0 0 0 2px #fee2e2;
}

.audit-timeline-meta {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 2px;
}

.audit-timeline-content {
  font-size: 0.82rem;
  color: #334155;
  background: #f8fafc;
  border-radius: 6px;
  padding: 6px 10px;
  border: 1px solid #f1f5f9;
}

/* =========================================================================
     CHUẨN HÓA TOÀN BỘ BẢNG DỮ LIỆU (PLUS JAKARTA SANS, HEADER 13PX BOLD, DATA 13PX MEDIUM)
     Áp dụng đồng bộ cho tất cả các bảng dữ liệu (#mainDataTable, .table, dashboard, nearest, rbac, modal)
     ========================================================================= */
.table,
#mainDataTable,
.dashboard-reminders-table,
.nearest-table,
.rbac-table {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
}

thead th,
#tableHeaderRow th,
.table thead th,
#mainDataTable thead th,
.dashboard-reminders-table thead th,
.nearest-table thead th,
.rbac-table thead th {
  position: sticky;
  top: 0;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  /* Chuẩn 13px */
  letter-spacing: 0.2px !important;
  white-space: nowrap;
  border-bottom: 2px solid #cbd5e1 !important;
  z-index: 10;
  padding: 8px 10px !important;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  text-align: center !important;
  vertical-align: middle !important;
}

#mainDataTable tbody tr,
.dashboard-reminders-table tbody tr {
  height: 38px !important;
  max-height: 38px !important;
}

tbody td,
.table tbody td,
#mainDataTable tbody td,
.dashboard-reminders-table tbody td,
.nearest-table tbody td,
.rbac-table tbody td {
  padding: 3px 8px !important;
  height: 38px !important;
  vertical-align: middle !important;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #334155 !important;
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.8125rem !important;
  /* Chuẩn 13px */
  font-weight: 500 !important;
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box !important;
}

/* Định dạng số, mã hợp đồng, mã trạm, STT, ngày tháng giữ đúng font Plus Jakarta Sans với số thẳng hàng tabular */
.font-tabular,
.font-monospace {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.2px;
}

/* Thu gọn thumbnail ảnh hiện trường trong bảng để khoảng cách dòng khít và đồng bộ */
#mainDataTable .table-bts-img-thumb {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

#mainDataTable .table-bts-img-wrapper,
#mainDataTable td .d-inline-flex {
  align-items: center !important;
  line-height: 1 !important;
}

#mainDataTable td .table-bts-img-thumb:hover {
  transform: scale(2.2) !important;
  z-index: 50 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#mainDataTable .btn-group-sm>.btn {
  height: 24px !important;
  line-height: 22px !important;
  padding: 0 6px !important;
  font-size: 0.75rem !important;
}

#mainDataTable .badge {
  padding: 2px 6px !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
}

tbody tr:hover {
  background-color: #f8fafc !important;
}

.th-sortable {
  cursor: pointer;
  text-align: center !important;
  user-select: none;
}

.th-sortable:hover {
  background: #e2e8f0 !important;
  color: #0f172a;
}

.th-sortable .th-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  text-align: center;
}

/* FIXED FOOTER AT BOTTOM */
.table-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 5px 12px;
  background: #ffffff;
  border-top: 1px solid var(--dtc-border);
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 38px;
  font-size: 0.8rem;
}

/* ĐỒNG BỘ NÚT PHÂN TRANG THEO TÔNG NỀN FOOTER SIDEBAR XANH ĐẬM VNPT */
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  background-color: #004ea2 !important;
  border-color: #00428d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 66, 141, 0.35) !important;
}

.pagination .page-link {
  color: var(--dtc-text-main, #1e293b) !important;
  border-color: var(--dtc-border, #e2e8f0) !important;
  font-size: 0.82rem !important;
  padding: 4px 10px !important;
  transition: all 0.15s ease !important;
}

.pagination .page-link:hover:not(.active) {
  background-color: #eff6ff !important;
  color: #004ea2 !important;
  border-color: #93c5fd !important;
}

/* GPS BADGE LINK TO GOOGLE MAPS - ĐỒNG BỘ CHIỀU RỘNG & CĂN GIỮA */
.bts-gps-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 185px;
  min-width: 185px;
  max-width: 185px;
  padding: 3px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
  margin: 0 auto;
}

.bts-gps-badge:hover {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.bts-gps-badge span {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  text-align: center;
}

/* MÃ TRẠM BTS BADGE - MÀU XANH DƯƠNG MOBIFONE, NỀN XÁM XANH NHẸ, VIỀN XÁM XANH ĐẬM */
.bts-station-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  padding: 3px 8px !important;
  background: #e8eff5 !important;
  color: #005baa !important;
  border: 1px solid #627d98 !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  font-variant-numeric: tabular-nums !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(0, 91, 170, 0.06) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
}

/* Hiệu ứng khi rê chuột vào hàng (tr:hover): làm sáng nhẹ mã trạm */
tr:hover .bts-station-badge {
  background: #deebf7 !important;
  border-color: #005baa !important;
}

tr:hover .bts-station-badge .station-text {
  color: #0066b2 !important;
}

/* Hiệu ứng khi rê chuột trực tiếp vào badge mã trạm: sáng rõ, sắc nét, không vỡ layout */
.bts-station-badge:hover {
  background: #d4e6f6 !important;
  color: #0072ce !important;
  border-color: #005baa !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 91, 170, 0.22) !important;
}

.bts-station-badge .station-text {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.3px !important;
  font-weight: 700 !important;
  color: #005baa !important;
  transition: color 0.15s ease !important;
}

.bts-station-badge:hover .station-text {
  color: #0072ce !important;
}

/* MÃ CSHT BADGE - MÀU XANH LÁ/MINT DỊU MÁT, NỀN PASTEL, VIỀN XANH LỤC NHẸ (CHỈ TAB BTS) */
.bts-csht-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  padding: 3px 8px !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  font-variant-numeric: tabular-nums !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(22, 101, 52, 0.06) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
}

tr:hover .bts-csht-badge {
  background: #dcfce7 !important;
  border-color: #4ade80 !important;
}

tr:hover .bts-csht-badge .csht-text {
  color: #15803d !important;
}

.bts-csht-badge:hover {
  background: #bbf7d0 !important;
  color: #14532d !important;
  border-color: #22c55e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(22, 101, 52, 0.2) !important;
}

.bts-csht-badge .csht-text {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.3px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  transition: color 0.15s ease !important;
}

.bts-csht-badge:hover .csht-text {
  color: #14532d !important;
}

/* TÊN TRẠM BADGE - MÀU TÍM PASTEL/LAVENDER THANH NHÃ, ĐỘ RỘNG CỐ ĐỊNH 172PX (LỚN HƠN 20% MÃ TRẠM BTS 142PX), CĂN GIỮA */
.bts-station-name-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 172px !important;
  min-width: 172px !important;
  max-width: 172px !important;
  padding: 3px 8px !important;
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  border: 1px solid #c4b5fd !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.79rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(91, 33, 182, 0.05) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
}

tr:hover .bts-station-name-badge {
  background: #ede9fe !important;
  border-color: #a78bfa !important;
}

tr:hover .bts-station-name-badge .station-name-text {
  color: #4c1d95 !important;
}

.bts-station-name-badge:hover {
  background: #ede9fe !important;
  color: #4338ca !important;
  border-color: #8b5cf6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.18) !important;
}

.bts-station-name-badge .station-name-text {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  color: #5b21b6 !important;
  transition: color 0.15s ease !important;
  max-width: 156px !important;
  text-align: center !important;
}

.bts-station-name-badge:hover .station-name-text {
  color: #3b0764 !important;
}

/* NHÀ MẠNG BADGE - ĐÓNG KHUNG CỐ ĐỊNH 124PX, CĂN GIỮA, NỀN PASTEL NHẸ NHÀNG SANG TRỌNG CÙNG TÔNG MÀU NHƯ CỘT TÊN TRẠM */
.bts-carrier-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  height: 27px !important;
  padding: 3px 8px !important;
  background: #f0f7ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.05) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: default !important;
  user-select: none !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

tr:hover .bts-carrier-badge {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

tr:hover .bts-carrier-badge .carrier-text {
  color: #1e40af !important;
}

.bts-carrier-badge .carrier-text {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  color: #1d4ed8 !important;
  text-align: center !important;
  width: 100% !important;
}

/* BADGE HẠNG MỤC TẠI DASHBOARD - ĐÓNG KHUNG CỐ ĐỊNH, CĂN GIỮA, NỀN PHÙ HỢP CHỮ ĐEN */
.urgent-category-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  padding: 3px 8px !important;
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  font-variant-numeric: tabular-nums !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
}

tr:hover .urgent-category-badge {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.urgent-category-badge:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #64748b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

/* MAP CARRIER FILTER TOOLBAR */
#view-map-card .table-toolbar {
  position: relative;
  z-index: 1000;
  pointer-events: auto;
}

#mapCarrierFilterGroup {
  position: relative;
  z-index: 1001;
  pointer-events: auto;
}

/* NÚT LỌC NHÀ MẠNG ĐỒNG ĐỀU KÍCH CỠ & PHỐI MÀU CHUẨN THƯƠNG HIỆU */
.map-carrier-filter-btn {
  min-width: 95px !important;
  width: 95px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1002;
  transition: all 0.18s ease-in-out !important;
  user-select: none;
  border-width: 1.5px !important;
  border-style: solid !important;
  text-align: center !important;
}

/* NÚT TẤT CẢ: TONE MÀU SẮC RIÊNG BIỆT (DARK SLATE / NAVY ĐẬM ĐÀ) */
.map-carrier-filter-btn[data-carrier="ALL"] {
  background-color: #f1f5f9 !important;
  border-color: #64748b !important;
  color: #334155 !important;
}
.map-carrier-filter-btn[data-carrier="ALL"]:hover {
  background-color: #e2e8f0 !important;
  border-color: #1e293b !important;
  color: #0f172a !important;
}
.map-carrier-filter-btn[data-carrier="ALL"].active {
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%) !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.35) !important;
}

/* VIETTEL: ĐỎ VIETTEL */
.map-carrier-filter-btn[data-carrier="VIETTEL"] {
  background-color: #fef2f2 !important;
  border-color: #f87171 !important;
  color: #dc2626 !important;
}
.map-carrier-filter-btn[data-carrier="VIETTEL"]:hover {
  background-color: #fee2e2 !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
}
.map-carrier-filter-btn[data-carrier="VIETTEL"].active {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(220, 38, 38, 0.4) !important;
}

/* MOBIFONE: VÀNG CAM MOBIFONE */
.map-carrier-filter-btn[data-carrier="MOBIFONE"] {
  background-color: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #d97706 !important;
}
.map-carrier-filter-btn[data-carrier="MOBIFONE"]:hover {
  background-color: #fef3c7 !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
}
.map-carrier-filter-btn[data-carrier="MOBIFONE"].active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(217, 119, 6, 0.4) !important;
}

/* VINAPHONE: XANH DƯƠNG VINAPHONE / VNPT */
.map-carrier-filter-btn[data-carrier="VINAPHONE"] {
  background-color: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #1d4ed8 !important;
}
.map-carrier-filter-btn[data-carrier="VINAPHONE"]:hover {
  background-color: #dbeafe !important;
  border-color: #1d4ed8 !important;
  color: #1e40af !important;
}
.map-carrier-filter-btn[data-carrier="VINAPHONE"].active {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  border-color: #1e3a8a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(29, 78, 216, 0.4) !important;
}

/* VIETNAMOBILE: CAM VIBRANT */
.map-carrier-filter-btn[data-carrier="VIETNAMOBILE"] {
  background-color: #fff7ed !important;
  border-color: #fb923c !important;
  color: #ea580c !important;
}
.map-carrier-filter-btn[data-carrier="VIETNAMOBILE"]:hover {
  background-color: #ffedd5 !important;
  border-color: #ea580c !important;
  color: #c2410c !important;
}
.map-carrier-filter-btn[data-carrier="VIETNAMOBILE"].active {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  border-color: #9a3412 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(234, 88, 12, 0.4) !important;
}

/* GMOBILE: XANH LÁ VIBRANT */
.map-carrier-filter-btn[data-carrier="GMOBILE"] {
  background-color: #f0fdf4 !important;
  border-color: #4ade80 !important;
  color: #16a34a !important;
}
.map-carrier-filter-btn[data-carrier="GMOBILE"]:hover {
  background-color: #dcfce7 !important;
  border-color: #16a34a !important;
  color: #15803d !important;
}
.map-carrier-filter-btn[data-carrier="GMOBILE"].active {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  border-color: #166534 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(22, 163, 74, 0.4) !important;
}

/* 4 THƯ MỤC CON HỒ SƠ & TÀI LIỆU TRẠM TRÊN DETAIL POPUP */
.station-dossier-subfolder-card {
  transition: all 0.18s ease-in-out !important;
  border-width: 1.5px !important;
  user-select: none;
}
.station-dossier-subfolder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.station-dossier-subfolder-card .dossier-folder-icon {
  width: 34px;
  height: 34px;
  transition: transform 0.18s ease;
}
.station-dossier-subfolder-card:hover .dossier-folder-icon {
  transform: scale(1.08);
}
@media (max-width: 576px) {
  .station-dossier-subfolder-card {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  .station-dossier-subfolder-card .dossier-folder-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .station-dossier-subfolder-card .dossier-folder-icon i {
    font-size: 0.9rem !important;
  }
  .station-dossier-subfolder-card .dossier-folder-title {
    font-size: 0.74rem !important;
  }
  .station-dossier-subfolder-card .dossier-folder-badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }
}
@media (max-width: 380px) {
  .station-dossier-subfolder-card {
    padding: 5px 6px !important;
  }
  .station-dossier-subfolder-card .dossier-folder-title {
    font-size: 0.7rem !important;
  }
}

/* OPENSTREETMAP LEAFLET VIEW */
.map-container-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

#btsOsmMap {
  width: 100%;
  height: 100%;
  min-height: 450px;
  z-index: 1;
}

.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* CUSTOM POPUP IN LEAFLET */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22) !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  line-height: 1.5;
  font-family: var(--font-family, sans-serif) !important;
  width: auto !important;
  min-width: 320px !important;
  max-width: 400px !important;
}

.leaflet-container a.leaflet-popup-close-button {
  color: #ffffff !important;
  padding: 8px 10px 0 0 !important;
  font-size: 20px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  z-index: 20 !important;
  top: 2px !important;
  right: 4px !important;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: #f8fafc !important;
  transform: scale(1.1);
}

.bts-map-popup {
  width: 100%;
  min-width: 320px;
  max-width: 400px;
  box-sizing: border-box;
}

.bts-map-popup-header {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #ffffff;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bts-map-popup-body {
  padding: 12px 14px;
  font-size: 0.82rem;
  color: #334155;
  background: #ffffff;
}

.bts-map-popup-row {
  display: flex;
  margin-bottom: 6px;
  align-items: flex-start;
  line-height: 1.45;
}

.bts-map-popup-label {
  width: 90px;
  color: #64748b;
  font-weight: 600;
  flex-shrink: 0;
}

.bts-map-popup-val {
  flex: 1;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

.bts-map-popup-actions {
  padding: 10px 14px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  display: flex;
  gap: 10px;
  align-items: center;
}

.bts-map-popup-btn {
  flex: 1;
  height: 36px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.bts-map-popup-btn-primary {
  background: var(--dtc-brand, #0c4a9e);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(12, 74, 158, 0.25);
}

.bts-map-popup-btn-primary:hover {
  background: var(--dtc-brand-hover, #09387a);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(12, 74, 158, 0.35);
}

.bts-map-popup-btn-outline {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
}

.bts-map-popup-btn-outline:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* LOADING OVERLAY */
#loadingOverlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.94);
  z-index: 99999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.spinner-pulse {
  width: 50px;
  height: 50px;
  border: 4px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* MODAL STYLING */
.modal-dialog.modal-xl {
  max-width: 95vw !important;
  width: 95vw !important;
}

@media (min-width: 992px) {
  .modal-dialog.modal-xl {
    max-width: 94vw !important;
    width: 94vw !important;
  }
}

@media (min-width: 1200px) {
  .modal-dialog.modal-xl {
    max-width: 1300px !important;
    width: 92vw !important;
  }
}

@media (min-width: 1440px) {
  .modal-dialog.modal-xl {
    max-width: 1400px !important;
    width: 90vw !important;
  }
}

.modal-content,
form.modal-content {
  border-radius: 14px;
  border: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-content,
.modal-dialog-scrollable form.modal-content {
  max-height: 90vh !important;
  height: auto;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.modal-dialog-scrollable .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(90vh - 130px) !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 2rem !important;
}

.modal-header {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #ffffff;
  padding: 12px 18px;
  border-bottom: none;
  flex-shrink: 0;
}

.modal-footer {
  padding: 10px 20px;
  background: #f8fafc;
  border-top: 1px solid var(--dtc-border);
  flex-shrink: 0;
}

.header-station-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.header-station-thumb:hover {
  transform: scale(1.08);
}

/* TOAST NOTIFICATION */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100000;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 992px) {
  #sidebar {
    transform: translateX(-100%);
  }

  #sidebar.show {
    transform: translateX(0) !important;
  }

  body.mobile-sidebar-open #sidebarBackdrop {
    display: block !important;
  }

  #main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 6px 8px 12px;
  }

  .top-title {
    max-width: 140px;
  }

  .module-title-text {
    max-width: 110px;
  }

  .header-search-wrap {
    min-width: 180px;
    max-width: none;
  }
}

@media (max-width: 576px) {
  .top-title {
    max-width: 100px;
  }

  .module-title-text {
    max-width: 75px;
  }

  .header-search-wrap {
    min-width: 140px;
    max-width: none;
  }
}

/* =========================================================================
   LOGIN SCREEN OVERLAY & ENTERPRISE GLASSMORPHISM DESIGN (DTC TELECOM)
   ========================================================================= */
.login-screen-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #06102b;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px clamp(20px, 8vw, 130px);
  overflow: hidden;
}

/* Tone màu xanh hình nền anten sáng hơn 15%, giữ màu nền khung đăng nhập không đổi */
.login-bg-backdrop {
  position: absolute;
  inset: 0;
  background: #06102b url('/icons/vinaphone-bts-bg.jpg') no-repeat center center / cover;
  filter: brightness(1.22) saturate(1.22) contrast(1.04);
  pointer-events: none;
  z-index: 0;
}

/* Hiệu ứng phủ gradient công nghệ để làm nổi bật Card và trạm 5G BTS */
.login-screen-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 35, 75, 0.10) 0%, rgba(2, 18, 45, 0.15) 45%, rgba(4, 13, 33, 0.78) 100%),
              radial-gradient(ellipse at 78% 50%, rgba(0, 102, 178, 0.24) 0%, rgba(2, 6, 23, 0.6) 80%);
  pointer-events: none;
  z-index: 1;
}

/* Background Ambient Glow & Grid */
.login-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.45;
  z-index: 2;
}

.login-bg-glow-1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 163, 255, 0.35) 0%, rgba(0, 80, 180, 0) 70%);
  top: -60px;
  right: 10%;
  animation: floatGlow 12s ease-in-out infinite alternate;
}

.login-bg-glow-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.25) 0%, rgba(0, 50, 130, 0) 70%);
  bottom: -80px;
  right: 2%;
  animation: floatGlow 15s ease-in-out infinite alternate-reverse;
}

.login-bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 195, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 195, 255, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  opacity: 0.7;
  z-index: 2;
}

@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, 20px) scale(1.08); }
  100% { transform: translate(-20px, -15px) scale(0.95); }
}

.login-layout-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: center;
}

/* Login Card Container - Glassmorphism Vinaphone Cyber Theme */
.login-card-glass {
  position: relative;
  z-index: 10;
  width: 100%;
  background: rgba(10, 24, 52, 0.72);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  /* Đường viền xanh to, dày hơn bao bọc toàn bộ khung, 4 góc ôm sát */
  border: 3px solid #00d2ff;
  border-radius: 24px;
  padding: 36px 30px 26px;
  box-shadow: 
    0 24px 64px -12px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(0, 210, 255, 0.5),
    inset 0 0 16px rgba(0, 210, 255, 0.22);
  animation: 
    loginCardAppear 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    loginBorderWaveFlow 4.5s ease-in-out infinite;
}

/* Hiệu ứng gợn sóng nhẹ uốn lượn lan tỏa quanh toàn bộ 4 góc khung đăng nhập */
.login-card-glass::before,
.login-card-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  z-index: -1;
}

.login-card-glass::before {
  animation: loginCardWaveRipple 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.login-card-glass::after {
  animation: loginCardWaveRipple 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 2s;
}

/* Chu kỳ sóng ánh sáng uốn lượn đổi màu quanh viền xanh */
@keyframes loginBorderWaveFlow {
  0% {
    border-color: #00d2ff;
    box-shadow: 
      0 24px 64px -12px rgba(0, 0, 0, 0.8),
      0 0 22px rgba(0, 210, 255, 0.5),
      inset 0 0 14px rgba(0, 210, 255, 0.22);
  }
  35% {
    border-color: #38bdf8;
    box-shadow: 
      0 24px 64px -12px rgba(0, 0, 0, 0.8),
      0 0 32px rgba(56, 189, 248, 0.65),
      inset 0 0 18px rgba(56, 189, 248, 0.3);
  }
  70% {
    border-color: #0088ff;
    box-shadow: 
      0 24px 64px -12px rgba(0, 0, 0, 0.8),
      0 0 25px rgba(0, 136, 255, 0.5),
      inset 0 0 15px rgba(0, 136, 255, 0.25);
  }
  100% {
    border-color: #00d2ff;
    box-shadow: 
      0 24px 64px -12px rgba(0, 0, 0, 0.8),
      0 0 22px rgba(0, 210, 255, 0.5),
      inset 0 0 14px rgba(0, 210, 255, 0.22);
  }
}

/* Hiệu ứng gợn sóng nhịp nhàng lan tỏa ra ngoài ôm sát 4 góc */
@keyframes loginCardWaveRipple {
  0% {
    box-shadow: 
      0 0 0 0 rgba(0, 210, 255, 0.85),
      0 0 16px 2px rgba(0, 229, 255, 0.6),
      inset 0 0 10px rgba(0, 210, 255, 0.3);
    opacity: 1;
  }
  40% {
    opacity: 0.7;
  }
  100% {
    box-shadow: 
      0 0 0 18px rgba(0, 210, 255, 0),
      0 0 35px 8px rgba(0, 210, 255, 0),
      inset 0 0 18px rgba(0, 210, 255, 0);
    opacity: 0;
  }
}

/* ĐƯỜNG VIỀN NÉT MẢNH BÊN TRONG KHUNG ĐĂNG NHẬP (CÁCH VÀI MILIMET, TÔNG MÀU XANH ĐẬM NỔI BẬT HIỆN ĐẠI) */
.login-card-inner-border {
  position: absolute;
  inset: 6px;
  border-radius: 18px;
  border: 1.5px solid #0066d6;
  pointer-events: none;
  z-index: 1;
  box-shadow: 
    0 0 10px rgba(0, 102, 214, 0.5),
    inset 0 0 8px rgba(0, 102, 214, 0.25);
  animation: innerBorderShimmer 4s ease-in-out infinite;
}

@keyframes innerBorderShimmer {
  0% {
    border-color: rgba(0, 102, 214, 0.75);
    box-shadow: 0 0 8px rgba(0, 102, 214, 0.4), inset 0 0 6px rgba(0, 102, 214, 0.2);
  }
  50% {
    border-color: rgba(0, 136, 255, 0.95);
    box-shadow: 0 0 14px rgba(0, 136, 255, 0.65), inset 0 0 10px rgba(0, 136, 255, 0.35);
  }
  100% {
    border-color: rgba(0, 102, 214, 0.75);
    box-shadow: 0 0 8px rgba(0, 102, 214, 0.4), inset 0 0 6px rgba(0, 102, 214, 0.2);
  }
}

@keyframes loginCardAppear {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Connected Status Indicator (Góc trên phải Card) */
.login-connected-indicator {
  position: absolute;
  top: 18px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  color: #34d399;
  letter-spacing: 0.04em;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.login-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGreen 1.8s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Brand Logo DTC chỉ lấy hình Elip nguyên bản, nền trong suốt hòa quyện cùng tông màu nền card */
.login-brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 8px;
  transition: transform 0.3s ease;
}

.login-brand-logo-wrap:hover {
  transform: translateY(-2px) scale(1.03);
}

.login-brand-logo-img {
  width: 195px;
  height: auto;
  max-height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 102, 178, 0.45));
  transition: filter 0.3s ease;
}

.login-brand-logo-wrap:hover .login-brand-logo-img {
  filter: drop-shadow(0 10px 26px rgba(0, 195, 255, 0.65));
}

.login-system-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #ffffff;
  margin: 6px 0 0 0;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 163, 255, 0.25);
}

.login-input-label {
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Input Styles & Focus States trong suốt sang trọng */
.login-input-group {
  border-radius: 14px;
  background: rgba(12, 28, 62, 0.72);
  border: 1.5px solid rgba(56, 189, 248, 0.28);
  transition: all 0.22s ease-in-out;
  overflow: hidden;
}

.login-input-group:focus-within {
  background: rgba(15, 36, 80, 0.88);
  border-color: #00d2ff;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
}

.login-input-group .input-group-text {
  border: none;
  background: transparent;
  color: #38bdf8;
  padding-left: 14px;
  padding-right: 8px;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.login-input-group:focus-within .input-group-text {
  color: #00d2ff;
}

.login-input-group .form-control {
  border: none;
  background: transparent;
  padding: 11px 12px 11px 4px;
  font-size: 0.92rem;
  color: #ffffff;
  box-shadow: none !important;
}

.login-input-group .form-control::placeholder {
  color: rgba(148, 163, 184, 0.7);
  font-size: 0.86rem;
}

/* Fix Chrome Autofill Background & Color to blend with Glassmorphism */
.login-input-group .form-control:-webkit-autofill,
.login-input-group .form-control:-webkit-autofill:hover,
.login-input-group .form-control:-webkit-autofill:focus,
.login-input-group .form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(12, 28, 62, 0.92) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #ffffff;
}

.btn-password-toggle {
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  padding: 0 14px !important;
  transition: color 0.2s ease;
}

.btn-password-toggle:hover {
  color: #00d2ff !important;
}

.login-forgot-link {
  color: #38bdf8;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.login-forgot-link:hover {
  color: #7dd3fc;
  text-decoration: underline !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.login-check-label {
  color: #cbd5e1;
  font-size: 0.82rem;
}

#loginScreen .form-check-input {
  background-color: rgba(12, 28, 62, 0.7);
  border-color: rgba(56, 189, 248, 0.4);
}

#loginScreen .form-check-input:checked {
  background-color: #0072ff;
  border-color: #00d2ff;
}

/* Submit Button - Khung Login màu nền sáng nổi bật, hiệu ứng nhẹ nhàng */
#btnLoginSubmit.btn-login-submit,
.btn-login-submit {
  background: linear-gradient(135deg, #0084ff 0%, #00c0f0 50%, #00f0ff 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 9999px !important;
  padding: 13px 24px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 32, 77, 0.55);
  box-shadow: 
    0 6px 22px rgba(0, 160, 255, 0.5),
    0 0 28px rgba(0, 230, 255, 0.38),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative;
  overflow: hidden;
}

#btnLoginSubmit.btn-login-submit::before,
.btn-login-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transition: transform 0.65s ease;
  pointer-events: none;
}

#btnLoginSubmit.btn-login-submit:hover:not(:disabled),
.btn-login-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #0091ff 0%, #00d4ff 50%, #00f5ff 100%) !important;
  transform: translateY(-2px);
  box-shadow: 
    0 10px 30px rgba(0, 163, 255, 0.65),
    0 0 38px rgba(0, 230, 255, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.88) !important;
}

#btnLoginSubmit.btn-login-submit:hover:not(:disabled)::before,
.btn-login-submit:hover:not(:disabled)::before {
  transform: translateX(200%);
}

#btnLoginSubmit.btn-login-submit:active:not(:disabled),
.btn-login-submit:active:not(:disabled) {
  transform: translateY(0.5px);
  box-shadow: 
    0 4px 14px rgba(0, 163, 255, 0.4),
    0 0 16px rgba(14, 165, 233, 0.3) !important;
}

#btnLoginSubmit.btn-login-submit:disabled,
.btn-login-submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  filter: grayscale(20%);
}

/* Khung bảo mật nội bộ phía dưới thay thế khung đỏ OAuth */
.login-footer-security {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.login-security-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 18px;
  background: rgba(14, 38, 77, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 9999px;
  color: #bae6fd;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.login-security-box:hover {
  background: rgba(16, 44, 90, 0.75);
  border-color: rgba(56, 189, 248, 0.45);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.35);
}

.login-security-box i {
  color: #38bdf8;
  font-size: 0.92rem;
}

.login-copyright {
  color: #64748b;
  font-size: 0.72rem;
  margin-top: 10px;
  letter-spacing: 0.3px;
}

/* Responsive: Trên Mobile / Tablet thì căn giữa */
@media (max-width: 991px) {
  .login-screen-overlay {
    justify-content: center;
    padding: 16px;
  }
}

/* Shake Animation on Error */
.login-alert-shake {
  animation: loginShake 0.4s ease-in-out;
  border-radius: 12px;
}

@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.user-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* BTS IMAGE SLIDER & GALLERY STYLES */
.bts-gallery-box {
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  border: 1px solid #1e293b;
  position: relative;
}

.bts-slider-viewport {
  position: relative;
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020617;
  overflow: hidden;
}

.bts-slider-main-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.bts-slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.bts-slider-nav-btn:hover {
  background: rgba(37, 99, 235, 0.9);
  color: #ffffff;
  transform: translateY(-50%) scale(1.08);
}

.bts-slider-prev {
  left: 12px;
}

.bts-slider-next {
  right: 12px;
}

.bts-slider-meta {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.bts-slider-meta>* {
  pointer-events: auto;
}

.bts-slider-badge-counter {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.bts-slider-thumbs-strip {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: #0f172a;
  overflow-x: auto;
  scrollbar-width: thin;
  align-items: center;
}

.bts-slider-thumb-item {
  width: 64px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: all 0.2s ease;
  position: relative;
  background: #1e293b;
}

.bts-slider-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bts-slider-thumb-item:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.bts-slider-thumb-item.active {
  border-color: #3b82f6;
  opacity: 1;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.bts-gallery-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #1e293b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 8px;
}

.gallery-empty-box {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.gallery-empty-box:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.img-optimistic-uploading {
  filter: brightness(0.65) blur(1px);
}

.table-bts-img-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.table-bts-img-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
}

.table-bts-img-thumb:hover {
  transform: scale(1.25);
  z-index: 5;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   MODERN SPA & STANDALONE ENHANCEMENTS
   ========================================================================= */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  background-color: var(--bg-app);
}

/* Offline Banner */
#offlineBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #dc2626;
  color: white;
  text-align: center;
  font-size: 0.8rem;
  padding: 4px 10px;
  z-index: 10000;
  display: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Optimistic Upload Thumbnail in Form */
.optimistic-upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.75rem;
  margin: 3px;
  position: relative;
}

.optimistic-upload-chip img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
}

.optimistic-upload-chip .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f59e0b;
  display: inline-block;
  animation: pulse-sync 1.5s infinite;
}

.optimistic-upload-chip.synced .status-dot {
  background-color: #10b981;
  animation: none;
}

@keyframes pulse-sync {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.2);
  }
}

/* Background Sync Floating Indicator */
#bgSyncFloatingBadge {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: rgba(15, 23, 42, 0.9);
  color: white;
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 0.75rem;
  display: none;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 1050;
  backdrop-filter: blur(8px);
}

/* =========================================================================
   FIND NEAREST BTS BY COORDINATES STYLES
   ========================================================================= */
.view-find-nearest-container {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 4px 16px;
}

.nearest-input-card {
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--dtc-border) !important;
}

.nearest-card-header {
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.nearest-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nearest-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dtc-text-main);
}

.nearest-subtitle {
  font-size: 0.76rem;
  display: block;
}

.nearest-btn-reset {
  height: 36px;
  padding: 0 14px;
  font-size: 0.82rem;
  border-radius: 6px;
}

.nearest-quick-paste-group {
  border-radius: 6px;
  overflow: hidden;
}

.nearest-quick-paste-group input {
  height: 38px;
  font-size: 0.85rem;
}

.nearest-quick-paste-group .input-group-text {
  font-size: 0.82rem;
}

.nearest-input-wrap {
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
}

.nearest-input-wrap .input-group-text {
  font-size: 0.8rem;
  padding: 0 10px;
}

.nearest-input-wrap input {
  height: 38px;
  font-size: 0.85rem;
}

.nearest-action-btn {
  height: 38px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.nearest-results-card {
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--dtc-border) !important;
  overflow: hidden;
}

.nearest-results-header {
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.nearest-btn-export {
  height: 34px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
}

.nearest-table-responsive {
  max-height: calc(100vh - 310px);
  overflow-x: auto;
  overflow-y: auto;
}

.nearest-table {
  font-size: 0.82rem;
}

.nearest-table thead th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 9px 12px;
  background: #f8fafc;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.nearest-table tbody td {
  padding: 8px 12px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .view-find-nearest-container {
    padding: 0 0 16px;
  }

  .nearest-table-responsive {
    max-height: calc(100vh - 380px);
  }
}

/* =========================================================================
   BẢN ĐỒ TRỰC QUAN TÌM TRẠM THEO TỌA ĐỘ (NEAREST MAP VISUALIZATION)
   ========================================================================= */

/* Radar Pulsing Marker cho trạm tìm kiếm (Trạm gốc) */
.search-origin-marker-container {
  background: transparent !important;
  border: none !important;
}

.search-origin-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-origin-radar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  background: rgba(137, 87, 229, 0.45);
  pointer-events: none;
  animation: search-origin-pulse 2.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.search-origin-radar.radar-ring-2 {
  animation-delay: 0.7s;
}

.search-origin-radar.radar-ring-3 {
  animation-delay: 1.4s;
}

@keyframes search-origin-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.95;
  }

  60% {
    transform: scale(2.4);
    opacity: 0.25;
  }

  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

.search-origin-core {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8957e5, #581c87);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(88, 28, 135, 0.65), 0 0 0 2px rgba(137, 87, 229, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.search-origin-core:hover {
  transform: scale(1.15);
}

/* Tooltip cố định cho Trạm tìm kiếm (Gốc) - Màu tím GitHub chuẩn & chớp nháy liên tục */
.leaflet-tooltip.search-origin-fixed-tooltip {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #8957e5 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  max-width: 140px !important;
  font-size: 11px !important;
  font-family: var(--font-family, sans-serif) !important;
  white-space: nowrap !important;
  box-shadow: 0 0 0 0 rgba(137, 87, 229, 0.65), 0 2px 6px rgba(137, 87, 229, 0.25) !important;
  animation: originTooltipPulse 1.8s infinite ease-in-out !important;
}

.leaflet-tooltip.search-origin-fixed-tooltip::before {
  border-top-color: #8957e5 !important;
}

.search-origin-tooltip-box {
  text-align: center;
  animation: originTooltipScale 1.8s infinite ease-in-out;
  transform-origin: center center;
}

.search-origin-tooltip-box .origin-title {
  font-weight: 700;
  font-size: 11px !important;
  color: #8957e5;
  letter-spacing: 0.2px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.search-origin-tooltip-box .origin-coords {
  font-size: 8px !important;
  font-weight: 600;
  color: #475569;
  margin-top: 1px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@keyframes originTooltipPulse {
  0% {
    border-color: #8957e5 !important;
    box-shadow: 0 0 0 0 rgba(137, 87, 229, 0.65), 0 2px 6px rgba(137, 87, 229, 0.25) !important;
  }

  50% {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 4px rgba(137, 87, 229, 0), 0 4px 12px rgba(137, 87, 229, 0.5) !important;
  }

  100% {
    border-color: #8957e5 !important;
    box-shadow: 0 0 0 0 rgba(137, 87, 229, 0), 0 2px 6px rgba(137, 87, 229, 0.25) !important;
  }
}

@keyframes originTooltipScale {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Top 10 BTS Marker Pins */
.nearest-bts-marker-container {
  background: transparent !important;
  border: none !important;
}

.nearest-bts-pin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  border: 2.5px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  position: relative;
}

.nearest-bts-pin:hover {
  transform: scale(1.22);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  z-index: 1000 !important;
}

/* Polyline Distance Tooltip */
.leaflet-tooltip.polyline-distance-tooltip {
  background: rgba(15, 23, 42, 0.92) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(4px);
}

.leaflet-tooltip.polyline-distance-tooltip::before {
  display: none !important;
}

/* ==========================================================================
   Leaflet Layer Control Switcher (Circle Button & Auto-Collapse)
   ========================================================================== */

/* Trạng thái thu gọn mặc định: nút icon tròn đơn lẻ ở góc trên bên phải */
.leaflet-control-layers:not(.leaflet-control-layers-expanded),
#nearestMapViewWrap .leaflet-control-layers:not(.leaflet-control-layers-expanded),
#btsOsmMap .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 10px 10px 0 0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.leaflet-control-layers:not(.leaflet-control-layers-expanded):hover,
#nearestMapViewWrap .leaflet-control-layers:not(.leaflet-control-layers-expanded):hover,
#btsOsmMap .leaflet-control-layers:not(.leaflet-control-layers-expanded):hover {
  transform: scale(1.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  border-color: #2563eb !important;
}

.leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle,
#nearestMapViewWrap .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle,
#btsOsmMap .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'%3E%3C/polygon%3E%3Cpolyline points='2 17 12 22 22 17'%3E%3C/polyline%3E%3Cpolyline points='2 12 12 17 22 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  display: block !important;
  border: none !important;
}

.leaflet-control-layers:not(.leaflet-control-layers-expanded):hover .leaflet-control-layers-toggle,
#nearestMapViewWrap .leaflet-control-layers:not(.leaflet-control-layers-expanded):hover .leaflet-control-layers-toggle,
#btsOsmMap .leaflet-control-layers:not(.leaflet-control-layers-expanded):hover .leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'%3E%3C/polygon%3E%3Cpolyline points='2 17 12 22 22 17'%3E%3C/polyline%3E%3Cpolyline points='2 12 12 17 22 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Trạng thái mở rộng (expanded): Thu nhỏ panel về kích thước chuẩn (Hình 2), nhỏ gọn, chữ thanh mảnh */
.leaflet-control-layers.leaflet-control-layers-expanded,
#nearestMapViewWrap .leaflet-control-layers.leaflet-control-layers-expanded,
#btsOsmMap .leaflet-control-layers.leaflet-control-layers-expanded {
  width: auto !important;
  height: auto !important;
  min-width: 175px !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  margin: 10px 10px 0 0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(4px) !important;
  overflow: visible !important;
  font-family: var(--font-family, sans-serif) !important;
  animation: layerControlFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes layerControlFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.leaflet-control-layers-base,
#nearestMapViewWrap .leaflet-control-layers-base,
#btsOsmMap .leaflet-control-layers-base {
  margin: 0 !important;
  padding: 0 !important;
}

.leaflet-control-layers-base label,
.leaflet-control-layers-base label>div,
#nearestMapViewWrap .leaflet-control-layers-base label,
#nearestMapViewWrap .leaflet-control-layers-base label>div,
#btsOsmMap .leaflet-control-layers-base label,
#btsOsmMap .leaflet-control-layers-base label>div {
  margin-bottom: 4px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  line-height: 1.25 !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
}

.leaflet-control-layers-base label:last-child,
.leaflet-control-layers-base label:last-child>div,
#nearestMapViewWrap .leaflet-control-layers-base label:last-child,
#nearestMapViewWrap .leaflet-control-layers-base label:last-child>div,
#btsOsmMap .leaflet-control-layers-base label:last-child,
#btsOsmMap .leaflet-control-layers-base label:last-child>div {
  margin-bottom: 0 !important;
}

.leaflet-control-layers-base label span,
.leaflet-control-layers-base label>div>span,
#nearestMapViewWrap .leaflet-control-layers-base label span,
#nearestMapViewWrap .leaflet-control-layers-base label>div>span,
#btsOsmMap .leaflet-control-layers-base label span,
#btsOsmMap .leaflet-control-layers-base label>div>span {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  line-height: 1.25 !important;
}

.leaflet-control-layers-base label:hover,
#nearestMapViewWrap .leaflet-control-layers-base label:hover,
#btsOsmMap .leaflet-control-layers-base label:hover {
  background-color: #f1f5f9 !important;
  color: #1d4ed8 !important;
}

.leaflet-control-layers-base label:hover span,
.leaflet-control-layers-base label:hover>div>span,
#nearestMapViewWrap .leaflet-control-layers-base label:hover span,
#btsOsmMap .leaflet-control-layers-base label:hover span {
  color: #1d4ed8 !important;
}

.leaflet-control-layers-base input[type="radio"],
#nearestMapViewWrap .leaflet-control-layers-base input[type="radio"],
#btsOsmMap .leaflet-control-layers-base input[type="radio"] {
  accent-color: #2563eb !important;
  cursor: pointer !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transform: scale(0.85) !important;
}

/* =========================================================================
   THẺ CẢNH BÁO TRẠNG THÁI ĐỒNG BỘ (CÙNG KÍCH THƯỚC CHIỀU RỘNG & THẨM MỸ CAO)
   Áp dụng đồng nhất cho Hợp đồng thuê đất, Hợp đồng thuê trạm & Lịch nhắc bảo dưỡng
   ========================================================================= */
.dtc-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 195px !important;
  min-width: 195px !important;
  max-width: 195px !important;
  height: 28px !important;
  padding: 0 8px !important;
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  gap: 6px !important;
  line-height: 1.3 !important;
  transition: all 0.15s ease-in-out !important;
}

.dtc-status-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) !important;
}

.dtc-status-badge .badge-days {
  background-color: #ffffff !important;
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  white-space: nowrap !important;
}

/* 1. MÀU XANH LÁ: SỐ NGÀY ĐẾN HẠN CÒN > 20 NGÀY --> CÒN HIỆU LỰC ..... NGÀY */
.dtc-status-badge.status-green {
  background-color: var(--status-green-bg, #ecfdf5) !important;
  border: 1px solid var(--status-green-border, #10b981) !important;
  color: var(--status-green-text, #047857) !important;
}

.dtc-status-badge.status-green i {
  color: var(--status-green-border, #10b981) !important;
}

.dtc-status-badge.status-green .badge-days {
  color: var(--status-green-text, #047857) !important;
  border: 1px solid #a7f3d0 !important;
}

/* 2. MÀU VÀNG: CẢNH BÁO MỨC 2 - VÀNG NHẠT ÊM DỊU, KHÔNG CHÓI MẮT */
.dtc-status-badge.status-yellow {
  background-color: var(--status-yellow-bg, #fefce8) !important;
  border: 1px solid var(--status-yellow-border, #fde047) !important;
  color: var(--status-yellow-text, #854d0e) !important;
}

.dtc-status-badge.status-yellow i {
  color: #d97706 !important;
}

.dtc-status-badge.status-yellow .badge-days {
  color: var(--status-yellow-text, #854d0e) !important;
  border: 1px solid #fef08a !important;
}

/* 3. MÀU CAM: SỐ NGÀY CÒN HẠN KHOẢNG GIỮA TỪ 1 ĐẾN 9 NGÀY --> CÒN HIỆU LỰC ..... NGÀY */
.dtc-status-badge.status-orange {
  background-color: var(--status-orange-bg, #ffedd5) !important;
  border: 1px solid var(--status-orange-border, #f97316) !important;
  color: var(--status-orange-text, #c2410c) !important;
}

.dtc-status-badge.status-orange i {
  color: #ea580c !important;
}

.dtc-status-badge.status-orange .badge-days {
  color: var(--status-orange-text, #c2410c) !important;
  border: 1px solid #fdba74 !important;
}

/* 4. MÀU ĐỎ: SỐ NGÀY ĐẾN HẠN <= 0 NGÀY (NGAY NGÀY HIỆN TẠI) HOẶC QUÁ HẠN --> HẾT HIỆU LỰC ..... NGÀY */
.dtc-status-badge.status-red {
  background-color: var(--status-red-bg, #fff1f2) !important;
  border: 1px solid var(--status-red-border, #fda4af) !important;
  color: var(--status-red-text, #9f1239) !important;
}

.dtc-status-badge.status-red i {
  color: var(--status-red, #e11d48) !important;
}

.dtc-status-badge.status-red .badge-days {
  color: var(--status-red-text, #9f1239) !important;
  border: 1px solid #fecdd3 !important;
}

/* 5. MÀU GHI XÁM: ĐÃ HOÀN THÀNH / ĐÃ THANH LÝ */
.dtc-status-badge.status-gray {
  background-color: var(--status-gray-bg, #f1f5f9) !important;
  border: 1px solid var(--status-gray-border, #94a3b8) !important;
  color: var(--status-gray-text, #475569) !important;
  justify-content: center !important;
}

.dtc-status-badge.status-gray i {
  color: #64748b !important;
}

/* 6. MÀU TRẦM: CHƯA ĐẶT HẠN / CHƯA ĐẶT NGÀY */
.dtc-status-badge.status-muted {
  background-color: var(--dtc-bg, #f8fafc) !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--dtc-text-muted, #64748b) !important;
  justify-content: center !important;
}

.dtc-status-badge.status-muted i {
  color: #94a3b8 !important;
}

/* =========================================================================
   CHUÔNG THÔNG BÁO VÀ MODAL LỊCH SỬ CẬP NHẬT PHIÊN BẢN (v2.0.0)
   ========================================================================= */
.btn-header-bell {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid #d1d5db !important;
  background-color: #ffffff !important;
  color: #4b5563 !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.btn-header-bell:hover {
  background-color: #f3f4f6 !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.15) !important;
}

.btn-header-bell.has-unread {
  color: #1d4ed8 !important;
  border-color: #60a5fa !important;
}

.btn-header-bell.has-unread .bell-icon {
  animation: bellSwing 2.8s infinite ease-in-out;
  transform-origin: top center;
  color: #1d4ed8 !important;
}

@keyframes bellSwing {

  0%,
  100% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(15deg);
  }

  10% {
    transform: rotate(-15deg);
  }

  15% {
    transform: rotate(12deg);
  }

  20% {
    transform: rotate(-12deg);
  }

  25% {
    transform: rotate(6deg);
  }

  30% {
    transform: rotate(-6deg);
  }

  35% {
    transform: rotate(0deg);
  }
}

.notification-badge-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  background-color: #ef4444;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  pointer-events: none;
  animation: bellPulse 1.8s infinite ease-in-out;
}

@keyframes bellPulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.changelog-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: #e2e8f0 !important;
}

.changelog-item:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.08) !important;
  transform: translateY(-1px);
}

.shadow-xs {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* =========================================================================
   MA TRẬN PHÂN QUYỀN VAI TRÒ (ERP RBAC MATRIX) - DESIGN SYSTEM & RESPONSIVE CHUẨN QUỐC TẾ
   Primary: #2563EB | Background: Slate 50 (#F8FAFC) / White | Master-Detail Mobile | Sticky Table
   ========================================================================= */

/* Khi view phân quyền hiển thị: Fit 100vh, không cuộn cả trang */
#main-content.rbac-fit-view,
#main-content:has(#view-rbac-matrix.active),
#main-content:has(#view-rbac-matrix:not(.hidden)) {
  overflow: hidden !important;
  padding: 8px 14px 10px !important;
  height: calc(100vh - 64px) !important;
  max-height: calc(100vh - 64px) !important;
}

#view-rbac-matrix {
  --rbac-primary: #305dcb;
  --rbac-primary-hover: #2449a3;
  --rbac-primary-light: #eff4fe;
  --rbac-primary-border: #bfdbfe;
  --rbac-navy: #305dcb;
  --rbac-navy-hover: #2449a3;
  --rbac-cyan: #305dcb;
  --rbac-cyan-light: #eff4fe;
  --rbac-border: #e2e8f0;
  --rbac-muted: #64748b;
  --rbac-text: #0f172a;
  --rbac-bg: #f8fafc;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: rbacFadeIn 0.2s ease-out;
}

/* Container giới hạn khung hình cho Desktop lớn (27"+ & 4K) */
.rbac-container {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

@keyframes rbacFadeIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 1. Header / Topbar cố định phía trên */
.rbac-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid var(--rbac-border);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.rbac-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.rbac-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.rbac-tab i {
  font-size: 0.78rem;
  opacity: 0.9;
}

.rbac-tab:hover:not(.active) {
  background: #eff4fe !important;
  color: #305dcb !important;
  border-color: #bfdbfe !important;
}

/* Tab đang chọn: Tone xanh dương chuẩn Hình 2 #305DCB */
.rbac-tab.active {
  background: #305dcb !important;
  border-color: #305dcb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(48, 93, 203, 0.28) !important;
  font-weight: 700;
}

.rbac-tab.active i {
  color: #ffffff !important;
}

.rbac-tab-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
}

.rbac-tab.active .rbac-tab-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Nút thêm vai trò - Xanh dương chuẩn Hình 2 */
.rbac-btn-add-role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #305dcb !important;
  cursor: pointer;
  background: linear-gradient(135deg, #3b6ae2 0%, #305dcb 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(48, 93, 203, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
}

.rbac-btn-add-role:hover {
  background: linear-gradient(135deg, #2851b8 0%, #1f4299 100%) !important;
  border-color: #2449a3 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(48, 93, 203, 0.35) !important;
}

/* =========================================================================
   TAB: MA TRẬN PHÂN QUYỀN - BỐ CỤC 2 CỘT MASTER-DETAIL flex-1
   ========================================================================= */
.rbac-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  background: #ffffff;
  border: 1px solid var(--rbac-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin-bottom: 0 !important;
}

/* Cột vai trò bên trái */
.rbac-roles-panel {
  border-right: 1px solid var(--rbac-border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: #fafcff;
}

.rbac-roles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 8px;
  flex-shrink: 0;
}

.rbac-roles-title {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--rbac-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rbac-pill {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
}

.rbac-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.rbac-icon-btn:hover {
  background: #305dcb;
  color: #ffffff;
  border-color: #305dcb;
}

.rbac-search {
  position: relative;
  margin: 0 0 8px;
  flex-shrink: 0;
}

.rbac-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.75rem;
}

.rbac-search input {
  width: 100%;
  border: 1px solid var(--rbac-border);
  border-radius: 8px;
  padding: 6px 10px 6px 28px;
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #ffffff;
}

.rbac-search input:focus {
  border-color: #305dcb;
  box-shadow: 0 0 0 3px rgba(48, 93, 203, 0.15);
}

.rbac-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.rbac-role-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}

.rbac-role-item:hover:not(.active) {
  background: #eff4fe !important;
  border-color: #bfdbfe !important;
}

.rbac-role-item:hover:not(.active) .rbac-role-name {
  color: #305dcb !important;
}

.rbac-role-item.active {
  background: #305dcb !important;
  color: #ffffff !important;
  border-color: #305dcb !important;
  box-shadow: 0 2px 6px rgba(48, 93, 203, 0.28) !important;
}

.rbac-role-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rbac-role-name {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important; /* Chuẩn hóa bằng chính xác kích thước chữ menu sidebar (#sidebar .nav-link: 0.84rem) */
  line-height: 1.25;
  color: var(--rbac-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rbac-role-code {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.03em;
  color: #94a3b8;
  margin-top: 2px;
  text-transform: none !important;
}

.rbac-role-item.active .rbac-role-name {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
}

.rbac-role-item.active .rbac-role-code {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.74rem !important;
}

.rbac-role-chevron {
  font-size: 0.75rem;
}

.rbac-role-item.active .rbac-role-chevron {
  color: #ffffff !important;
}

.rbac-role-count {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.rbac-role-item.active .rbac-role-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.rbac-dirty-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  display: inline-block;
  flex-shrink: 0;
}

.rbac-empty {
  color: #94a3b8;
  font-size: 0.8rem;
  text-align: center;
  padding: 12px;
}

/* Panel ma trận bên phải */
.rbac-matrix-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
}

.rbac-matrix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rbac-border);
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.rbac-matrix-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--rbac-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rbac-code-badge {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px 8px;
}

.rbac-sub {
  color: var(--rbac-muted);
  font-size: 0.74rem;
  margin-top: 1px;
}

.rbac-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rbac-btn-save {
  display: inline-flex;
  align-items: center;
  border: 1px solid #305dcb !important;
  background: linear-gradient(135deg, #3b6ae2 0%, #305dcb 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(48, 93, 203, 0.28) !important;
  transition: all 0.15s;
}

.rbac-btn-save:hover:not(:disabled) {
  background: linear-gradient(135deg, #2851b8 0%, #1f4299 100%) !important;
  border-color: #2449a3 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(48, 93, 203, 0.35) !important;
}

.rbac-btn-save:disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 0.75;
  cursor: not-allowed;
  box-shadow: none !important;
}

.rbac-btn-ghost {
  border: 1px solid var(--rbac-border);
  background: #ffffff;
  color: #475569;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.rbac-btn-ghost:hover {
  background: #f8fafc;
}

/* Nút quay lại trên Mobile (Master-Detail UX) */
.rbac-btn-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  transition: all 0.15s;
  padding: 0;
}

.rbac-btn-back:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.rbac-btn-back:active {
  transform: scale(0.95);
}

.rbac-lock-note {
  margin: 6px 16px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.75rem;
  border: 1px solid #fde68a;
  flex-shrink: 0;
}

.rbac-sensitive {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 7px 16px;
  border-bottom: 1px solid var(--rbac-border);
  background: #fafafa;
  flex-shrink: 0;
}

.rbac-sensitive-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rbac-sensitive-label i {
  color: #f59e0b;
}

.rbac-sensitive-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.rbac-sens-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #334155;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.rbac-sens-item input {
  width: 14px;
  height: 14px;
  accent-color: #305dcb !important;
  cursor: pointer;
}

.rbac-sens-item.disabled {
  cursor: default;
  opacity: 0.8;
}

/* =========================================================================
   BẢNG MA TRẬN & BẢNG NHÂN SỰ: Cuộn nội bộ (overflow-y-auto), Sticky Header
   ========================================================================= */
.rbac-table-wrap {
  overflow-y: auto !important;
  overflow-x: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}

.rbac-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 680px;
}

/* Cố định hàng tiêu đề bảng (Sticky header) */
.rbac-table thead th,
.rbac-users-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #f8fafc !important;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: 0.02em;
  padding: 8px 6px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Cố định cột Phân hệ bên trái (Sticky left column) cho Laptop/Tablet */
.rbac-table tbody td.rbac-col-module {
  position: sticky !important;
  left: 0 !important;
  background: #ffffff !important;
  z-index: 8 !important;
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.04);
}

.rbac-table thead th.rbac-col-module {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 15 !important;
  background: #f8fafc !important;
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.04);
}

.rbac-table tbody tr:hover td.rbac-col-module {
  background: #eff6ff !important;
}

.rbac-table tbody td {
  padding: 5px 6px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: 0.78rem;
}

.rbac-table tbody tr,
.rbac-users-table tbody tr {
  transition: background 0.12s;
}

/* Hover dòng xanh nhạt #eff6ff */
.rbac-table tbody tr:hover,
.rbac-users-table tbody tr:hover {
  background: #eff6ff !important;
}

.rbac-col-module {
  padding-left: 14px !important;
  min-width: 175px;
  text-align: left;
}

.rbac-col-scope {
  width: 130px;
  text-align: left;
}

.rbac-col-act {
  width: 52px !important;
  min-width: 48px !important;
  text-align: center;
  padding: 4px 2px !important;
}

.rbac-mod {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rbac-mod-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.rbac-mod-icon .rbac-cycle-img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
  transition: transform 0.2s ease;
}

/* Category Color-ways for RBAC matrix module badges - Đồng nhất với Sidebar Menu */
.rbac-mod-icon.mod-dashboard {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  color: #4f46e5;
}
.rbac-mod-icon.mod-bts {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border: 1px solid #7dd3fc;
  color: #0284c7;
}
.rbac-mod-icon.mod-gps {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  color: #059669;
}
.rbac-mod-icon.mod-contract-land {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  color: #d97706;
}
.rbac-mod-icon.mod-contract-tower {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border: 1px solid #e9d5ff;
  color: #7c3aed;
}
.rbac-mod-icon.mod-maintenance-plan {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  color: #ea580c;
}
.rbac-mod-icon.mod-maintenance-log {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border: 1px solid #a5f3fc;
  color: #0891b2;
}
.rbac-mod-icon.mod-rental-cost {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}
.rbac-mod-icon.mod-rental-revenue {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  color: #15803d;
}
.rbac-mod-icon.mod-om-expense {
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
  border: 1px solid #f5d0fe;
  color: #a21caf;
}
.rbac-mod-icon.mod-users {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border: 1px solid #e9d5ff;
  color: #8b5cf6;
}
.rbac-mod-icon.mod-rbac {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  color: #4338ca;
}
.rbac-mod-icon.mod-payment {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  color: #d97706;
}
.rbac-mod-icon.mod-maintenance {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  color: #ea580c;
}
.rbac-mod-icon.mod-finance {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  color: #15803d;
}

/* Đồng nhất màu Top Navbar Title Badge cho từng phân hệ */
.brand-badge-wrapper.mod-bts { background: #e0f2fe !important; border-color: #7dd3fc !important; color: #0284c7 !important; }
.brand-badge-wrapper.mod-bts i { color: #0284c7 !important; }
.brand-badge-wrapper.mod-gps { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #059669 !important; }
.brand-badge-wrapper.mod-gps i { color: #059669 !important; }
.brand-badge-wrapper.mod-contract-land { background: #fffbeb !important; border-color: #fde68a !important; color: #d97706 !important; }
.brand-badge-wrapper.mod-contract-land i { color: #d97706 !important; }
.brand-badge-wrapper.mod-contract-tower { background: #faf5ff !important; border-color: #e9d5ff !important; color: #7c3aed !important; }
.brand-badge-wrapper.mod-contract-tower i { color: #7c3aed !important; }
.brand-badge-wrapper.mod-maintenance-plan { background: #fff7ed !important; border-color: #fed7aa !important; color: #ea580c !important; }
.brand-badge-wrapper.mod-maintenance-plan i { color: #ea580c !important; }
.brand-badge-wrapper.mod-maintenance-log { background: #ecfeff !important; border-color: #a5f3fc !important; color: #0891b2 !important; }
.brand-badge-wrapper.mod-maintenance-log i { color: #0891b2 !important; }
.brand-badge-wrapper.mod-rental-cost { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; }
.brand-badge-wrapper.mod-rental-cost i { color: #1d4ed8 !important; }
.brand-badge-wrapper.mod-rental-revenue { background: #f0fdf4 !important; border-color: #86efac !important; color: #15803d !important; }
.brand-badge-wrapper.mod-rental-revenue i { color: #15803d !important; }
.brand-badge-wrapper.mod-om-expense { background: #fdf4ff !important; border-color: #f5d0fe !important; color: #a21caf !important; }
.brand-badge-wrapper.mod-om-expense i { color: #a21caf !important; }
.brand-badge-wrapper.mod-rbac { background: #eef2ff !important; border-color: #c7d2fe !important; color: #4338ca !important; }
.brand-badge-wrapper.mod-rbac i { color: #4338ca !important; }
.brand-badge-wrapper.mod-users { background: #faf5ff !important; border-color: #e9d5ff !important; color: #8b5cf6 !important; }
.brand-badge-wrapper.mod-users i { color: #8b5cf6 !important; }

/* Hover effect on table row */
#rbacMatrixTable tr:hover .rbac-mod-icon,
.rbac-table tr:hover .rbac-mod-icon {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#rbacMatrixTable tr:hover .rbac-mod-icon .rbac-cycle-img,
.rbac-table tr:hover .rbac-mod-icon .rbac-cycle-img {
  transform: scale(1.06);
}

.rbac-row-off .rbac-mod-icon {
  opacity: 0.65;
  filter: grayscale(35%);
}

.rbac-mod-text {
  display: flex;
  flex-direction: column;
}

.rbac-mod-name {
  display: block;
  font-weight: 700;
  color: #0f172a;
  font-size: 0.84rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.rbac-mod-sub {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 500;
  margin-top: 1.5px;
}

.rbac-scope-select {
  width: 100%;
  max-width: 126px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.76rem;
  background: #ffffff;
  color: #1f2937;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.rbac-scope-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.rbac-scope-select:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Checkbox ma trận quyền - Chuẩn tone xám đen sang trọng (#0F172A), kích thước bằng 60% (~14px) */
.rbac-check {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border-radius: 3.5px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s, box-shadow 0.15s;
  background: #ffffff;
  font-size: 0.52rem !important;
  line-height: 1 !important;
  box-sizing: border-box;
}

.rbac-check i {
  font-size: 8px !important;
  line-height: 1 !important;
}

.rbac-check.on {
  background: #305dcb !important; /* Xanh dương chuẩn Hình 2 */
  border-color: #305dcb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(48, 93, 203, 0.3) !important;
}

.rbac-check.off {
  background: #f8fafc !important;
  color: transparent !important;
  border: 1px solid #cbd5e1 !important;
}

.rbac-check.off:hover:not(:disabled) {
  background: #eff4fe !important;
  color: #305dcb !important;
  border-color: #305dcb !important;
}

.rbac-check:hover:not(:disabled) {
  transform: scale(1.15) !important;
  box-shadow: 0 0 0 2.5px rgba(48, 93, 203, 0.2) !important;
}

.rbac-check:active:not(:disabled) {
  transform: scale(0.9) !important;
}

.rbac-check:disabled {
  cursor: default;
  opacity: 0.55;
}

.rbac-check-all {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border-radius: 3.5px !important;
  background: #ffffff !important;
  color: #475569 !important;
  border: 1.2px solid #475569 !important;
}

.rbac-check-all.on {
  background: #305dcb !important; /* Xanh dương chuẩn Hình 2 */
  color: #ffffff !important;
  border-color: #305dcb !important;
  box-shadow: 0 1px 3px rgba(48, 93, 203, 0.3) !important;
}

.rbac-dash {
  font-weight: 500;
  font-size: 0.68rem;
  color: #cbd5e1;
  line-height: 1;
}

.rbac-na {
  display: inline-block;
  width: 6px;
  height: 1px;
  background: #e2e8f0;
}

/* =========================================================================
   TAB: TÀI KHOẢN NHÂN SỰ - BỐ CỤC FIT MÀN HÌNH & THANH TÌM KIẾM 1 HÀNG
   ========================================================================= */
.rbac-users-pane {
  background: #ffffff;
  border: 1px solid var(--rbac-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin-bottom: 0 !important;
}

/* Gom thanh tìm kiếm, bộ lọc và các nút thêm mới thẳng hàng trên 1 dòng duy nhất */
.rbac-users-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rbac-border);
  flex-shrink: 0;
  flex-wrap: nowrap;
  background: #fafcff;
}

.rbac-search-inline {
  flex: 1;
  min-width: 220px;
  margin: 0;
}

.rbac-search-inline input {
  height: 34px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 0.8rem;
  padding-left: 28px;
}

.rbac-search-inline input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.rbac-filter-select {
  height: 34px;
  max-width: 220px;
  border-radius: 8px;
  font-size: 0.8rem;
  border: 1px solid #cbd5e1;
}

.rbac-filter-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#btnRbacAddUser,
.rbac-btn-add-role {
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid #305dcb !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #3b6ae2 0%, #305dcb 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(48, 93, 203, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s !important;
  white-space: nowrap !important;
}

#btnRbacAddUser:hover,
.rbac-btn-add-role:hover {
  background: linear-gradient(135deg, #2851b8 0%, #1f4299 100%) !important;
  border-color: #2449a3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(48, 93, 203, 0.35) !important;
}

.rbac-users-table {
  min-width: 720px;
}

.rbac-users-table thead th:first-child,
.rbac-users-table tbody td:first-child {
  padding-left: 14px !important;
}

.rbac-users-table tbody td {
  padding: 8px 10px !important;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: 0.82rem;
}

.rbac-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rbac-user-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: #305dcb !important; /* Xanh dương chuẩn Hình 2 */
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(48, 93, 203, 0.35) !important;
}

.rbac-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.rbac-user-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.82rem;
}

.rbac-user-email {
  font-size: 0.74rem;
  color: #64748b;
}

.rbac-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.rbac-status-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.rbac-status.on {
  background: #ecfdf5;
  color: #047857; /* Màu xanh lá cây đậm nổi bật, chuẩn trực tuyến */
  border: 1px solid #a7f3d0;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08);
}

.rbac-status.on .rbac-status-dot.online {
  background-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 0 8px #10b981 !important;
  animation: pulseGreenOnline 1.8s infinite ease-in-out !important;
}

.rbac-status.off {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.rbac-status.off .rbac-status-dot.offline {
  background-color: #94a3b8;
}

/* Fallback ::before nếu không có thẻ dot con */
.rbac-status:not(:has(.rbac-status-dot))::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.rbac-status.on:not(:has(.rbac-status-dot))::before {
  background-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 0 8px #10b981 !important;
  animation: pulseGreenOnline 1.8s infinite ease-in-out !important;
}
.rbac-status.off:not(:has(.rbac-status-dot))::before {
  background-color: #94a3b8;
}

.rbac-user-role {
  max-width: 200px;
}

.rbac-link-btn {
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #0f172a;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.rbac-link-btn:hover {
  background: #305dcb;
  color: #ffffff;
  border-color: #305dcb;
}

.rbac-users-table .btn-outline-primary {
  color: #305dcb !important;
  border-color: #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.rbac-users-table .btn-outline-primary:hover {
  background: #305dcb !important;
  color: #ffffff !important;
  border-color: #305dcb !important;
}

.rbac-users-table .btn-outline-danger {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.rbac-users-table .btn-outline-secondary {
  border-radius: 8px !important;
}

.rbac-modal {
  border-radius: 16px;
  border: 0;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

/* Ô dữ liệu nhạy cảm bị che */
.rbac-masked {
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: help;
}

.rbac-masked i {
  font-size: 0.75rem;
  letter-spacing: 0;
}

/* =========================================================================
   RESPONSIVE DESIGN SYSTEM: MOBILE FIRST & ADAPTIVE VIEWPORTS
   ========================================================================= */

/* 1. Mobile Adaptive (< 768px): Master-Detail Slide Flow, Touch Cards, Safe-area */
@media (max-width: 767.98px) {
  #main-content.rbac-fit-view,
  #main-content:has(#view-rbac-matrix.active),
  #main-content:has(#view-rbac-matrix:not(.hidden)) {
    overflow: hidden !important;
    padding: 6px 8px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  #view-rbac-matrix {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .rbac-topbar {
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  .rbac-tabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 5px !important;
  }

  .rbac-tab {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
    gap: 5px !important;
  }

  .rbac-tab-count {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 0.66rem !important;
    padding: 0 4px !important;
  }

  .rbac-btn-add-role {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
    gap: 4px !important;
    margin-left: auto;
  }

  /* Master-Detail UX Flow */
  .rbac-layout {
    display: block !important;
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Màn hình 1: Danh sách Chọn Vai Trò (Role List) */
  .rbac-roles-panel {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    border-right: 0 !important;
    border-radius: 10px !important;
    overflow-y: auto !important;
    padding: 8px !important;
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .rbac-role-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  .rbac-role-item {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
  }

  .rbac-role-item.active {
    background: #305dcb !important;
    border-color: #305dcb !important;
  }

  /* Màn hình 2: Bảng Cấp Quyền Chi Tiết (Matrix Panel) - mặc định ẩn trên mobile */
  .rbac-matrix-panel {
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 20;
    border-radius: 10px !important;
  }

  /* Khi có class .show-detail: Chuyển sang màn hình 2 (Slide transition) */
  .rbac-layout.show-detail .rbac-roles-panel {
    display: none !important;
  }

  .rbac-layout.show-detail .rbac-matrix-panel {
    display: flex !important;
    flex-direction: column !important;
    animation: rbacSlideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  @keyframes rbacSlideInRight {
    from {
      opacity: 0.6;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .rbac-btn-back {
    display: inline-flex !important;
  }

  .rbac-matrix-head {
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .rbac-matrix-title {
    font-size: 0.88rem !important;
  }

  .rbac-sensitive {
    padding: 6px 10px !important;
    gap: 8px !important;
    font-size: 0.74rem !important;
  }

  .rbac-sensitive-list {
    gap: 10px !important;
  }

  /* Mobile Card Layout cho Ma trận quyền thay thế Table */
  .rbac-mobile-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: touch;
  }

  .rbac-mobile-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s;
  }

  .rbac-mobile-card.rbac-row-off {
    background: #f8fafc;
    border-color: #f1f5f9;
  }

  .rbac-mobile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
  }

  .rbac-mobile-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .rbac-mobile-act-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    line-height: 1.2;
  }

  .rbac-mobile-act-chip:active {
    transform: scale(0.95);
  }

  .rbac-mobile-act-chip.on {
    background: #305dcb !important;
    color: #ffffff !important;
    border-color: #305dcb !important;
    font-weight: 700 !important;
  }

  .rbac-mobile-act-chip.off {
    background: #ffffff !important;
    color: #64748b !important;
  }

  .rbac-mobile-act-chip:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Tab Nhân sự trên di động */
  .rbac-users-pane {
    height: 100% !important;
    border-radius: 10px !important;
  }

  .rbac-users-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  .rbac-search-inline {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .rbac-filter-select {
    flex: 1 1 calc(50% - 4px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #btnRbacAddUser {
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
  }

  .rbac-users-pane .rbac-table-wrap {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 2. Tablet (768px - 1023px): Tỷ lệ cột tối ưu */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .rbac-layout {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }
  .rbac-col-module {
    min-width: 150px;
  }
}

/* 3. Laptop (1024px - 1439px): Sticky header & cột cố định chuẩn xác */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .rbac-layout {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }
}

/* =========================================================================
   CHUẨN HÓA 100% NÚT BẤM VÀ CÁC TAB THEO TÔNG NỀN FOOTER SIDEBAR (VNPT NAVY)
   ========================================================================= */
/* 1. CÁC NÚT BẤM CHÍNH (PRIMARY BUTTONS, SUBMIT BUTTONS) */
.btn-primary:not(.btn-outline-primary):not(#btnExport):not(#BTN_EXPORT_EXCEL):not(.nearest-btn-export):not(#btnLoginSubmit):not(#btnRbacAddUser),
button.btn-primary:not(.btn-outline-primary):not(#btnExport):not(#BTN_EXPORT_EXCEL):not(.nearest-btn-export):not(#btnLoginSubmit):not(#btnRbacAddUser),
#btnSubmitAdd,
#btnDetailEdit,
#btnSubmitChangePass,
#btnConfirmInstallPwa,
#btnSaveSupabase,
.nearest-action-btn {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  background-color: #004ea2 !important;
  border-color: #00428d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 66, 141, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:not(.btn-outline-primary):not(#btnExport):not(#BTN_EXPORT_EXCEL):not(.nearest-btn-export):not(#btnLoginSubmit):not(#btnRbacAddUser):hover,
button.btn-primary:not(.btn-outline-primary):not(#btnExport):not(#BTN_EXPORT_EXCEL):not(.nearest-btn-export):not(#btnLoginSubmit):not(#btnRbacAddUser):hover,
#btnSubmitAdd:hover,
#btnDetailEdit:hover,
#btnSubmitChangePass:hover,
#btnConfirmInstallPwa:hover,
#btnSaveSupabase:hover,
.nearest-action-btn:hover {
  background: linear-gradient(135deg, #003775 0%, #004ea2 100%) !important;
  background-color: #00428d !important;
  border-color: #003775 !important;
  box-shadow: 0 4px 12px rgba(0, 66, 141, 0.45) !important;
  transform: translateY(-1px);
}

/* 2. CÁC CỤM CHUYỂN TAB VÀ VIEW SWITCHER TOÀN BỘ WEBAPP */
#viewModeSwitcher button.active,
#viewModeSwitcher .btn-primary,
#btnViewModeTable.active,
#btnViewModeMap.active,
#nearestViewSwitcher button.active,
#nearestViewSwitcher .btn-primary,
#btnNearestViewTable.active,
#btnNearestViewMap.active,
.btn-stats-toggle.active,
.urgent-nav-btn.active {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  background-color: #004ea2 !important;
  border-color: #00428d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 66, 141, 0.35) !important;
}

#viewModeSwitcher button:not(.active),
#nearestViewSwitcher button:not(.active) {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

#viewModeSwitcher button:not(.active):hover,
#nearestViewSwitcher button:not(.active):hover {
  background-color: #eff6ff !important;
  color: #004ea2 !important;
  border-color: #93c5fd !important;
}

/* 3. SIDEBAR ALERT & TOTAL BADGES - ĐÃ ẨN TOÀN BỘ THEO YÊU CẦU */
#sidebar .badge-alert-count,
#sidebar .badge-sidebar-total,
#sidebar .badge-count,
#sidebar .badge {
  display: none !important;
}

/* 4. MÃ TRẠM BTS BADGE - MOBIFONE BLUE / SLATE BLUE SHIELD */
.bts-station-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 142px;
  min-width: 142px;
  max-width: 142px;
  padding: 3px 8px;
  background: #e8eff5;
  color: #005baa;
  border: 1px solid #627d98;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 91, 170, 0.06);
  margin: 0 auto;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

tr:hover .bts-station-badge {
  background: #deebf7;
  border-color: #005baa;
}

tr:hover .bts-station-badge .station-text {
  color: #0066b2;
}

.bts-station-badge:hover {
  background: #d4e6f6;
  color: #0072ce;
  border-color: #005baa;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 91, 170, 0.22);
}

.bts-station-badge .station-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  font-weight: 700;
  color: #005baa;
  transition: color 0.15s ease;
}

.bts-station-badge:hover .station-text {
  color: #0072ce;
}

/* 4b. MÃ CSHT BADGE - MINT EMERALD PASTEL */
.bts-csht-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 142px;
  min-width: 142px;
  max-width: 142px;
  padding: 3px 8px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 1px 2px rgba(22, 101, 52, 0.06);
  margin: 0 auto;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

tr:hover .bts-csht-badge {
  background: #dcfce7;
  border-color: #4ade80;
}

tr:hover .bts-csht-badge .csht-text {
  color: #15803d;
}

.bts-csht-badge:hover {
  background: #bbf7d0;
  color: #14532d;
  border-color: #22c55e;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(22, 101, 52, 0.2);
}

.bts-csht-badge .csht-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  font-weight: 700;
  color: #166534;
  transition: color 0.15s ease;
}

.bts-csht-badge:hover .csht-text {
  color: #14532d;
}

/* 4c. TÊN TRẠM BADGE - SOFT LAVENDER VIOLET - ĐỘ RỘNG CỐ ĐỊNH 172PX (+21% SO VỚI MÃ TRẠM BTS 142PX) */
.bts-station-name-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  min-width: 172px;
  max-width: 172px;
  padding: 3px 8px;
  background: #f5f3ff;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 1px 2px rgba(91, 33, 182, 0.05);
  margin: 0 auto;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

tr:hover .bts-station-name-badge {
  background: #ede9fe;
  border-color: #a78bfa;
}

tr:hover .bts-station-name-badge .station-name-text {
  color: #4c1d95;
}

.bts-station-name-badge:hover {
  background: #ede9fe;
  color: #4338ca;
  border-color: #8b5cf6;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.18);
}

.bts-station-name-badge .station-name-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #5b21b6;
  transition: color 0.15s ease;
  max-width: 156px;
  text-align: center;
}

.bts-station-name-badge:hover .station-name-text {
  color: #3b0764;
}

/* 5. DASHBOARD REMINDERS & CATEGORY BADGES */
.urgent-category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  min-width: 136px;
  max-width: 136px;
  padding: 3px 8px;
  background: #f1f5f9;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: 0 auto;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

tr:hover .urgent-category-badge {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

.urgent-category-badge:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #64748b;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.dashboard-reminders-table tbody tr,
.dashboard-reminders-table tbody td {
  cursor: default;
}

.dashboard-reminders-table .bts-station-badge,
.dashboard-reminders-table .urgent-category-badge,
.dashboard-reminders-table .dtc-status-badge {
  cursor: default;
  pointer-events: none;
  transform: none;
}

.dashboard-reminders-table td.col-urgent-action,
.dashboard-reminders-table .btn-urgent-goto {
  pointer-events: auto;
  cursor: pointer;
}

.dashboard-reminders-table .btn-urgent-goto {
  transition: all 0.15s ease;
}

.dashboard-reminders-table .btn-urgent-goto:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(13, 110, 253, 0.25);
}

/* 6. PHÂN TRANG (PAGINATION) */
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  background-color: #004ea2 !important;
  border-color: #00428d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 66, 141, 0.35);
}

.pagination .page-link:hover:not(.active) {
  background-color: #eff6ff;
  color: #004ea2;
  border-color: #93c5fd;
}

/* ĐỊNH DẠNG CĂN GIỮA NỘI DUNG CỘT LOẠI CỘT & CÁC CỘT BỔ SUNG */
td[data-col-key="loai_anten"],
th[data-col-key="loai_anten"],
td[data-col-key="do_cao_anten"],
th[data-col-key="do_cao_anten"],
td[data-col-key="so_neo"],
th[data-col-key="so_neo"],
td[data-col-key="ngay_ban_giao_csht"],
td[data-col-key="gia_thue_dat"],
td[data-col-key="so_nam_thue_dat"],
td[data-col-key="ngay_thanh_toan_thue_dat"],
td[data-col-key="gia_cho_thue_csht"],
td[data-col-key="so_nam_cho_thue_csht"],
td[data-col-key="ngay_thanh_toan_csht"],
td[data-col-key="hop_dong_cho_thue_tram"],
th[data-col-key="hop_dong_cho_thue_tram"],
td[data-col-key="hop_dong_thue_qsdd"],
th[data-col-key="hop_dong_thue_qsdd"],
td[data-col-key="ttk_duong_dat"],
td[data-col-key="ttk_duong_be_tong"],
td[data-col-key="ttk_loi_di_chung"],
td[data-col-key="ttk_duong_giao_thong"],
td[data-col-key="ttk_duong_dien"],
td[data-col-key="ttk_nha_o"] {
  text-align: center !important;
}

/* Thu hẹp cột Avatar nhỏ gọn, vừa đẹp */
th[data-col-key="__station_photo__"],
td[data-col-key="__station_photo__"] {
  width: 65px !important;
  min-width: 60px !important;
  max-width: 70px !important;
  text-align: center !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Cột Thiết bị phụ trợ căn chỉnh về lề bên tay trái */
td[data-col-key="thiet_bi_phu_tro"] {
  text-align: left !important;
}

/* =========================================================================
   BẢNG CHỌN THỜI HẠN DẠNG CALENDAR (TERM CALENDAR PICKER)
   ========================================================================= */
.term-calendar-trigger {
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.term-calendar-trigger:hover,
.term-calendar-trigger.active-picker {
  background-color: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #0c4a9e !important;
  box-shadow: 0 2px 6px rgba(12, 74, 158, 0.18) !important;
}

.term-calendar-popover {
  position: fixed !important;
  z-index: 99999 !important;
  display: none;
  box-sizing: border-box;
  animation: termCalendarFadeIn 0.18s ease-out forwards;
}

.term-calendar-popover *,
.term-calendar-popover *::before,
.term-calendar-popover *::after {
  box-sizing: border-box;
}

.term-calendar-popover.show {
  display: block;
}

@keyframes termCalendarFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.term-calendar-card {
  width: 340px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.25), 0 3px 12px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  font-family: inherit;
}

.term-calendar-card.card-grid-24 {
  width: 355px;
}

.term-calendar-card.card-grid-6 {
  width: 280px;
}

.term-calendar-card.card-grid-5 {
  width: 295px;
}

.term-calendar-card.card-grid-4 {
  width: 270px;
}

.term-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border-bottom: 1px solid #e2e8f0;
}

.term-calendar-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  font-size: 0.95rem;
  box-shadow: 0 1px 3px rgba(0, 91, 170, 0.1);
}

.term-calendar-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0f172a;
  line-height: 1.2;
}

.term-calendar-subtitle {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 1px;
}

.term-calendar-close-btn {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.term-calendar-close-btn:hover {
  color: #ef4444;
  background-color: #fee2e2;
}

.term-calendar-body {
  padding: 12px;
  background: #ffffff;
}

.term-calendar-grid {
  display: grid;
  gap: 7px;
}

.term-calendar-grid.grid-24 {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.term-calendar-grid.grid-15 {
  grid-template-columns: repeat(5, 1fr);
}

.term-calendar-grid.grid-10 {
  grid-template-columns: repeat(5, 1fr);
}

.term-calendar-grid.grid-6 {
  grid-template-columns: repeat(3, 1fr);
}

.term-calendar-grid.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.term-calendar-grid.grid-4 {
  grid-template-columns: repeat(2, 1fr);
}

.term-calendar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 4px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.16s ease-in-out;
  user-select: none;
}

.term-calendar-item .term-num {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--dtc-font-mono, monospace);
  color: #1e293b;
}

.term-calendar-item .term-unit {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
  text-transform: lowercase;
}

.term-calendar-item:hover {
  background-color: #eff6ff;
  border-color: #60a5fa;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(12, 74, 158, 0.15);
}

.term-calendar-item:hover .term-num {
  color: #005baa;
}

.term-calendar-item:hover .term-unit {
  color: #0284c7;
}

.term-calendar-item.active {
  background: linear-gradient(135deg, #004ea2 0%, #005baa 100%) !important;
  border-color: #003e82 !important;
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.35) !important;
}

.term-calendar-item.active .term-num {
  color: #ffffff !important;
}

.term-calendar-item.active .term-unit {
  color: #e0f2fe !important;
}

.term-calendar-item .term-check-icon {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.55rem;
  color: #38bdf8;
}

.term-calendar-footer {
  padding: 8px 12px;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  font-size: 0.72rem;
  color: #64748b;
}

/* BUTTONS TRIGGER CHỌN THỜI HẠN & NGÀY TRỰC TIẾP TRÊN BẢNG */
.term-calendar-trigger,
.date-quick-btn {
  font-size: 0.8rem !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.term-calendar-trigger:hover,
.date-quick-btn:hover {
  background-color: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #005baa !important;
  box-shadow: 0 2px 6px rgba(0, 91, 170, 0.15) !important;
  transform: translateY(-1px);
}

.term-calendar-trigger.active-picker {
  background-color: #eff6ff !important;
  border-color: #005baa !important;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.18) !important;
}

/* CĂN GIỮA NỘI DUNG VÀ TIÊU ĐỀ CHO CÁC CỘT MỚI */
th[data-col-key="ngay_tinh_tien_thue_dat"],
td[data-col-key="ngay_tinh_tien_thue_dat"],
th[data-col-key="chu_ky_thanh_toan_tien_dat"],
td[data-col-key="chu_ky_thanh_toan_tien_dat"],
th[data-col-key="ngay_tinh_tien_cho_thue_csht"],
td[data-col-key="ngay_tinh_tien_cho_thue_csht"],
th[data-col-key="chu_ky_thanh_toan_cho_thue_csht"],
td[data-col-key="chu_ky_thanh_toan_cho_thue_csht"],
th[data-col-key="ngay_ban_giao_csht"],
td[data-col-key="ngay_ban_giao_csht"],
th[data-col-key="ngay_bao_duong_gan_nhat"],
td[data-col-key="ngay_bao_duong_gan_nhat"],
th[data-col-key="chu_ky_bao_duong"],
td[data-col-key="chu_ky_bao_duong"],
th[data-col-key="han_bao_duong_tiep_theo"],
td[data-col-key="han_bao_duong_tiep_theo"],
th[data-col-key="ngay_bao_duong_tiep_theo"],
td[data-col-key="ngay_bao_duong_tiep_theo"],
th[data-col-key="ngay_son_anten"],
td[data-col-key="ngay_son_anten"],
th[data-col-key="ngay_thay_day_co"],
td[data-col-key="ngay_thay_day_co"],
th[data-col-key="ngay_sua_nha_tram"],
td[data-col-key="ngay_sua_nha_tram"] {
  text-align: center !important;
}

/* HIỆU ỨNG NÚT ĐANG CẬP NHẬT (PULSE & GLOW) */
@keyframes btnUpdatingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    transform: scale(0.98);
    opacity: 0.85;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    transform: scale(1);
    opacity: 0.95;
  }
}

.btn-updating-pulse {
  animation: btnUpdatingPulse 1.2s infinite ease-in-out !important;
  cursor: wait !important;
  pointer-events: none !important;
  filter: brightness(1.08);
}

/* =========================================================================
   THAO TÁC NHANH - MỖI MENU LÀ 1 HÀNG NGANG XẾP DỌC (CHUẨN WEBAPP ENTERPRISE)
   ========================================================================= */
.quick-action-list,
.quick-action-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.quick-action-card,
.quick-action-btn {
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 12px 0 8px !important;
  border-radius: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* KHUNG LOGO / ICON BADGE ĐẶT TRƯỚC TIÊU ĐỀ (TÔNG PASTEL DỊU MẮT) */
.quick-action-badge {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.05rem !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
  transition: all 0.2s ease !important;
}

/* NÚT 1: THÊM DỮ LIỆU (XANH DƯƠNG) */
.quick-action-primary {
  border-color: #e2e8f0 !important;
}
.quick-action-primary .quick-action-badge,
.quick-action-badge.badge-primary {
  background: #f0f7ff !important;
  color: #2563eb !important;
  border: 1px solid #e0edfe !important;
}
.quick-action-primary .quick-action-label,
.quick-action-primary .quick-action-text {
  color: #2563eb !important;
}
.quick-action-primary .quick-action-arrow {
  color: #93c5fd !important;
}
.quick-action-primary:hover {
  background-color: #fbfdff !important;
  border-color: #93c5fd !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08) !important;
  transform: translateY(-1.5px) !important;
}
.quick-action-primary:hover .quick-action-badge {
  background: #e0edfe !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}
.quick-action-primary:hover .quick-action-label,
.quick-action-primary:hover .quick-action-text {
  color: #1d4ed8 !important;
}
.quick-action-primary:hover .quick-action-arrow {
  color: #2563eb !important;
}

/* NÚT 2: TRẠM GẦN VỊ TRÍ (XANH LÁ NGỌC BẢO) */
.quick-action-success {
  border-color: #e2e8f0 !important;
}
.quick-action-success .quick-action-badge,
.quick-action-badge.badge-success {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #dcfce7 !important;
}
.quick-action-success .quick-action-label,
.quick-action-success .quick-action-text {
  color: #16a34a !important;
}
.quick-action-success .quick-action-arrow {
  color: #86efac !important;
}
.quick-action-success:hover {
  background-color: #fbfefc !important;
  border-color: #86efac !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.08) !important;
  transform: translateY(-1.5px) !important;
}
.quick-action-success:hover .quick-action-badge {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}
.quick-action-success:hover .quick-action-label,
.quick-action-success:hover .quick-action-text {
  color: #15803d !important;
}
.quick-action-success:hover .quick-action-arrow {
  color: #16a34a !important;
}

/* NÚT 3: TRẠM ĐẾN HẠN (ĐỎ HỒNG SAN HÔ) */
.quick-action-danger {
  border-color: #e2e8f0 !important;
}
.quick-action-danger .quick-action-badge,
.quick-action-badge.badge-danger {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #ffe4e6 !important;
}
.quick-action-danger .quick-action-label,
.quick-action-danger .quick-action-text {
  color: #e11d48 !important;
}
.quick-action-danger .quick-action-arrow {
  color: #fca5a5 !important;
}
.quick-action-danger:hover {
  background-color: #fffbfb !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 3px 10px rgba(225, 29, 72, 0.08) !important;
  transform: translateY(-1.5px) !important;
}
.quick-action-danger:hover .quick-action-badge {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border-color: #fecaca !important;
}
.quick-action-danger:hover .quick-action-label,
.quick-action-danger:hover .quick-action-text {
  color: #be123c !important;
}
.quick-action-danger:hover .quick-action-arrow {
  color: #e11d48 !important;
}

/* TIÊU ĐỀ NỘI DUNG TRONG MENU - CỐ ĐỊNH 1 DÒNG DUY NHẤT */
.quick-action-label,
.quick-action-text {
  font-size: 0.81rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
  letter-spacing: -0.1px !important;
  transition: all 0.2s ease !important;
}

/* MŨI TÊN TƯƠNG TÁC BÊN PHẢI */
.quick-action-arrow {
  font-size: 0.72rem !important;
  flex-shrink: 0 !important;
  margin-left: 6px !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
}

.quick-action-card:hover .quick-action-arrow,
.quick-action-btn:hover .quick-action-arrow {
  transform: translateX(3px) !important;
}

/* TỐI ƯU TRÊN MÀN HÌNH NHỎ & LAPTOP */
@media (max-width: 1366px) {
  .quick-action-card,
  .quick-action-btn {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 10px 0 6px !important;
  }
  .quick-action-badge {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.95rem !important;
    margin-right: 8px !important;
  }
  .quick-action-label,
  .quick-action-text {
    font-size: 0.76rem !important;
  }
}

/* Menu con 3 hạng mục cảnh báo khẩn cấp */
.quick-urgent-dropdown {
  border-radius: 10px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  padding: 6px !important;
  min-width: 250px;
  animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.quick-urgent-dropdown .dropdown-item {
  font-size: 0.83rem;
  font-weight: 500;
  transition: all 0.15s ease;
  border-radius: 6px;
  padding: 8px 12px;
}

.quick-urgent-dropdown .dropdown-item:hover {
  background-color: #fef2f2;
  transform: translateX(2px);
}

/* =========================================================================
   CỘT KHOẢNG CÁCH CHUẨN UI/UX: CĂN GIỮA, KHUNG BAO BẰNG NHAU, CỠ CHỮ CHUẨN
   ========================================================================= */
.bts-distance-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 28px !important;
  box-sizing: border-box !important;
  font-size: 0.84rem !important; /* Kích cỡ chữ tương đương các cột khác trong bảng */
  font-weight: 600 !important;
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  border-radius: 6px !important;
  padding: 0 6px !important;
  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border: 1px solid !important;
  transition: all 0.15s ease !important;
}

.bts-distance-badge.distance-walking {
  background-color: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
}

.bts-distance-badge.distance-driving {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

.bts-distance-badge:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Căn giữa cột khoảng cách */
.col-distance,
th.col-distance,
td.col-distance,
.nearest-table th.col-distance,
.nearest-table td.col-distance {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Marker bản đồ cảnh báo các trạm đến hạn xử lý */
.urgent-bts-marker-pin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #ffffff;
  border: 2.5px solid #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.urgent-bts-marker-pin:hover {
  transform: scale(1.15);
}

.urgent-bts-marker-pin.urgent-red {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.urgent-bts-marker-pin.urgent-orange {
  background: linear-gradient(135deg, #f97316, #c2410c);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.4), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.urgent-bts-marker-pin.urgent-yellow {
  background: linear-gradient(135deg, #eab308, #a16207);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.4), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Tabs trên popup Modal Bản đồ các trạm đến hạn xử lý (Phương án 2 - Hình 2) */
.urgent-map-tab-btn {
  flex: 1 1 0 !important;
  min-width: 140px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  height: 42px !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.urgent-map-tab-btn:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px);
}

.urgent-map-tab-btn.active {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  border-color: #00428d !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 66, 141, 0.35) !important;
}

.urgent-map-tab-btn.active i {
  color: #ffffff !important;
}

.urgent-map-tab-btn.active .badge {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

.urgent-map-tab-btn .badge {
  font-size: 0.72rem !important;
  padding: 2.5px 7px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  background-color: #64748b !important;
  color: #ffffff !important;
}