/* ============================================================
   FILE: SRC/CSS/HEADER_NAVBAR_CUSTOM.css
   ============================================================ */

/* 1. KHUNG CHỨA TOÀN BỘ HEADER - KHÓA GIAO DIỆN KHÔNG TRÀN */
header,
.top-navbar,
.top-bar,
.app-header,
#top-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 8px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  min-height: 54px !important;
}

/* 2. CỤM TIÊU ĐỀ BÊN TRÁI - CO GIÃN THÔNG MINH, CHỐNG TRÀN NGANG */
header > div:first-child,
header .header-left,
header .header-left-group,
header div.d-flex:first-of-type,
.top-nav-left,
header .top-nav-left {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  width: auto !important;
  max-width: none !important;
  gap: 10px !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

.header-title-badge,
.route-title-badge,
#currentModuleTitle,
.module-header-title,
.top-title,
.top-title.page-title,
header h1, header h2, header h4, header h5,
header div:has(> svg):has(span) span,
header .header-left span.fw-bold {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  overflow: visible !important;
}

.header-title-badge span,
.route-title-badge span,
#currentModuleTitle span,
#currentModuleTitle .module-title-text,
.module-header-title .module-title-text,
.module-title-text {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: visible !important;
  min-width: max-content !important;
  margin: 0 !important;
}

/* 3. Ô TÌM KIẾM - VIỀN CHỮ NHẬT BÓNG MỜ THẨM MỸ, ÁP SÁT NÚT ĐIỆN THOẠI */
.header-search-container,
.header-search-wrapper,
.header-search-wrap,
#headerSearchWrap,
.search-box,
header div:has(> input[placeholder*="Tìm kiếm"]),
header div:has(input[placeholder*="Tìm kiếm"]),
header form:has(input[placeholder*="Tìm kiếm"]),
header form:has(input[type="search"]) {
  margin-left: auto !important; /* ĐẨY HẾT KHOẢNG TRỐNG VỀ BÊN TRÁI */
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
}

#header-search,
.header-search-group,
.header-search-group:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}

#HEADER_SEARCH_INPUT,
#inputSearch,
#header-search input,
header input[type="search"],
header input[placeholder*="Tìm kiếm"] {
  width: 155px !important;
  min-width: 140px !important;
  max-width: 170px !important;
  height: 38px !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(148, 163, 184, 0.15) !important; /* Đổ viền bóng mờ chiều sâu */
  padding: 0 10px 0 30px !important;
  margin: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
}

#HEADER_SEARCH_INPUT:focus,
#inputSearch:focus,
header input[placeholder*="Tìm kiếm"]:focus {
  border-color: #94a3b8 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 56, 168, 0.12), 0 3px 8px rgba(15, 23, 42, 0.1) !important;
}

#header-search .input-group-text {
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 4 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #64748b !important;
  pointer-events: none !important;
}

#header-search .btn-clear-search {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 4 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 4px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
}

/* 4. CỤM NÚT BÊN PHẢI - LUÔN CĂN PHẢI (PINNED TO FAR RIGHT THEO HÌNH 1) */
header > div:last-child,
header .header-right,
header .header-actions-group,
header div.d-flex:last-of-type,
header div:has(> #USER_AVATAR_BTN),
.top-nav-actions,
.top-nav-actions.ms-auto,
.header-actions,
header .top-nav-actions,
header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* Khi có thanh tìm kiếm hiển thị kế bên, thanh tìm kiếm đã đẩy về phải nên actions theo sát */
#headerSearchWrap:not([style*="display: none"]):not([style*="display:none"]) ~ .top-nav-actions,
#headerSearchWrap:not([style*="display: none"]):not([style*="display:none"]) ~ .header-actions {
  margin-left: 0 !important;
}

/* NÚT ĐIỆN THOẠI - KHUNG VIỀN XANH THƯƠNG HIỆU DTC */
#btnInstallAppHeader,
header button:has(i.fa-mobile-screen),
header button:has(i.fa-mobile-screen-button),
header button:has(svg path[d*="phone"]),
header button:has(svg):not(#BTN_SYNC_HEADER):not(#btnSyncHeader):not(#BTN_SYNC_STATUS):not(.btn-success):not(.btn-primary):not(#USER_AVATAR_BTN) {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  min-width: 38px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--dtc-brand, #0c4a9e) !important;
  background: #ffffff !important;
  color: var(--dtc-brand, #0c4a9e) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  gap: 6px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  line-height: normal !important;
}

#btnInstallAppHeader i,
#btnInstallAppHeader span,
header button:has(i.fa-mobile-screen) i,
header button:has(i.fa-mobile-screen-button) i,
header button:has(svg path[d*="phone"]) svg,
header button:has(svg):not(#BTN_SYNC_HEADER):not(#btnSyncHeader):not(#BTN_SYNC_STATUS):not(.btn-success):not(.btn-primary):not(#USER_AVATAR_BTN) svg path {
  color: var(--dtc-brand, #0c4a9e) !important;
  fill: var(--dtc-brand, #0c4a9e) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ============================================================
   NÚT ĐỒNG BỘ TRÊN HEADER: PILL XÁM SLATE TINH TẾ, ICON XOAY XANH DTC (#0c4a9e)
   ============================================================ */
#btnSyncHeader,
#BTN_SYNC_HEADER,
button#BTN_SYNC_STATUS,
header button#BTN_SYNC_HEADER,
header button#btnSyncHeader,
.btn-top-action#BTN_SYNC_HEADER,
.btn-top-action#btnSyncHeader,
header button:has(i.fa-arrows-rotate),
header button:has(#iconSync),
header button:has(#textSyncStatus),
header .btn-sync,
header button[title*="đồng bộ"],
header button[title*="Đồng bộ"] {
  background: #f0f7ff !important;
  background-color: #f0f7ff !important;
  border: 1px solid #bfdbfe !important;
  color: #004ea2 !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 78, 162, 0.08) !important;
  outline: none !important;
  vertical-align: middle !important;
  line-height: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#btnSyncHeader:hover,
#btnSyncHeader:focus,
#BTN_SYNC_HEADER:hover,
#BTN_SYNC_HEADER:focus,
header button#BTN_SYNC_HEADER:hover,
header button#BTN_SYNC_HEADER:focus,
header button:has(i.fa-arrows-rotate):hover,
header button:has(i.fa-arrows-rotate):focus,
header button[title*="đồng bộ"]:hover,
header button[title*="đồng bộ"]:focus,
header button[title*="Đồng bộ"]:hover,
header button[title*="Đồng bộ"]:focus {
  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 *,
#BTN_SYNC_HEADER *,
button#BTN_SYNC_STATUS *,
#btnSyncHeader #textSyncStatus,
#BTN_SYNC_HEADER #textSyncStatus {
  color: #004ea2 !important;
  fill: #004ea2 !important;
}

#btnSyncHeader #iconSync,
#BTN_SYNC_HEADER #iconSync,
#btnSyncHeader i.fa-arrows-rotate,
#BTN_SYNC_HEADER i.fa-arrows-rotate {
  color: #0085ff !important;
  fill: #0085ff !important;
}

#headerSearchWrap[style*="display: none"],
#headerSearchWrap[style*="display:none"],
#btnExport[style*="display: none"],
#btnExport[style*="display:none"],
#btnAddRecord[style*="display: none"],
#btnAddRecord[style*="display:none"],
#btnInstallAppHeader[style*="display: none"],
#btnInstallAppHeader[style*="display:none"] {
  display: none !important;
}

#btnExport:not([style*="display: none"]):not([style*="display:none"]),
button#BTN_EXPORT_EXCEL:not([style*="display: none"]):not([style*="display:none"]),
header button:has(i.fa-file-excel):not([style*="display: none"]):not([style*="display:none"]),
header button.btn-success:not([style*="display: none"]):not([style*="display:none"]) {
  background: #f0f7ff !important;
  background-color: #f0f7ff !important;
  border: 1.5px solid #bfdbfe !important;
  box-shadow: 0 1px 3px rgba(0, 78, 162, 0.08) !important;
  color: #004ea2 !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  line-height: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#btnExport:hover,
#btnExport:focus,
button#BTN_EXPORT_EXCEL:hover,
header button:has(i.fa-file-excel):hover,
header button.btn-success: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;
  transform: translateY(-1px) !important;
}

#btnExport *,
#btnExport i,
button#BTN_EXPORT_EXCEL *,
header button:has(i.fa-file-excel) *,
header button.btn-success * {
  color: #004ea2 !important;
  fill: #004ea2 !important;
}

#btnExport:hover *,
#btnExport:hover i,
button#BTN_EXPORT_EXCEL:hover *,
header button:has(i.fa-file-excel):hover *,
header button.btn-success:hover * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

#btnAddRecord:not([style*="display: none"]):not([style*="display:none"]),
button#BTN_ADD_NEW:not([style*="display: none"]):not([style*="display:none"]),
header button.btn-primary:not([style*="display: none"]):not([style*="display:none"]),
header button.btn-add-record:not([style*="display: none"]):not([style*="display:none"]) {
  background: linear-gradient(135deg, #00428d 0%, #005baa 100%) !important;
  background-color: #004ea2 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 6px rgba(0, 66, 141, 0.35) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  line-height: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#btnAddRecord:hover,
button#BTN_ADD_NEW:hover,
header button.btn-primary:hover,
header button.btn-add-record: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;
  transform: translateY(-1px) !important;
}

#btnAddRecord *,
#btnAddRecord i,
button#BTN_ADD_NEW *,
header button.btn-primary * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* 5. LOGO TRÒN CHỮ P: GÓC PHẢI HEADER VÀ GÓC TRÁI DƯỚI CÙNG SIDEBAR */
#USER_AVATAR_BTN,
#headerUserDropdown,
.user-avatar-btn,
.user-avatar-vinaphone,
.user-profile-circle,
.header-user-avatar-btn,
header button:has(> span:only-child):not(.btn-primary),
aside .rounded-circle,
.sidebar .rounded-circle,
aside div:has(> span:only-child):not(.badge),
.sidebar div:has(> span:only-child):not(.badge),
div:has(> .badge):has(> span:only-child) > span:first-child,
div:has(> #btn-logout-sidebar) div.rounded-circle,
div:has(> span:only-child):has(+ div:has(.badge)),
#userAvatar,
#sidebar .user-avatar,
.sidebar-footer .user-avatar,
.user-profile-card .user-avatar {
  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;
  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;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  outline: none !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Ẩn hoàn toàn ::before của avatar */
#USER_AVATAR_BTN::before,
#headerUserDropdown::before,
.header-user-avatar-btn::before,
.user-avatar-vinaphone::before,
.user-avatar-btn::before,
.user-profile-circle::before {
  display: none !important;
  content: none !important;
}

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

#USER_AVATAR_BTN span,
#headerUserDropdown span,
.user-avatar-btn span,
.user-profile-circle span,
.header-user-avatar-text,
#headerUserAvatar,
header button:has(> span:only-child):not(.btn-primary) span,
aside .rounded-circle span,
.sidebar .rounded-circle span,
aside div:has(> span:only-child):not(.badge) span,
.sidebar div:has(> span:only-child):not(.badge) span,
div:has(> span:only-child):has(+ div:has(.badge)) span,
#userAvatar span,
#sidebar .user-avatar span,
.sidebar-footer .user-avatar span,
.user-profile-card .user-avatar span {
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
}

/* NÚT THU GỌN / MỞ RỘNG SIDEBAR & CHUÔNG THÔNG BÁO TRÊN HEADER */
#btnToggleSidebar,
#btnNotificationBell,
.btn-header-bell {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* ============================================================
   CHUẨN HÓA CHIỀU CAO ĐỒNG NHẤT (38PX) CHO TẤT CẢ Ô CHỮ NHẬT TRÊN HEADER
   (Sidebar toggle, Search box, Nút điện thoại cài app, Nút Đã đồng bộ, Nút Xuất Excel, Nút Thêm mới)
   ============================================================ */
.top-navbar .btn-top-action,
header .btn-top-action,
#top-header .btn-top-action,
#btnToggleSidebar,
#btnNotificationBell,
.btn-header-bell,
#header-search,
#inputSearch,
#btnInstallAppHeader,
#BTN_SYNC_HEADER,
#btnSyncHeader,
#btnExport,
#btnAddRecord {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

#dropdownUserRole {
  font-size: 0.75rem;
  background-color: var(--dtc-brand, #004ea2) !important;
  color: #ffffff !important;
}

/* ============================================================
   RESPONSIVE MOBILE HEADER: CHỐNG TRÀN NGANG 100% TRÊN MỌI ĐIỆN THOẠI
   ============================================================ */
@media (max-width: 768px) {
  header,
  .top-navbar,
  .top-bar,
  #top-header {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 6px 8px 4px 8px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-height: 46px !important;
  }

  header .top-nav-left,
  .top-nav-left {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  #currentModuleTitle,
  .module-header-title,
  .top-title,
  #currentModuleTitle .module-title-text,
  .module-title-text {
    font-size: 14.5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #currentModuleTitle .brand-badge-wrapper {
    display: none !important;
  }

  header .top-nav-actions,
  .top-nav-actions,
  .header-actions {
    gap: 4px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  #btnToggleSidebar,
  #btnNotificationBell,
  .btn-header-bell,
  #BTN_SYNC_HEADER,
  #btnSyncHeader,
  #btnExport:not([style*="display: none"]):not([style*="display:none"]),
  #btnAddRecord:not([style*="display: none"]):not([style*="display:none"]),
  #btnInstallAppHeader:not([style*="display: none"]):not([style*="display:none"]) {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  #btnToggleSidebar,
  #btnNotificationBell,
  .btn-header-bell {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
  }

  #USER_AVATAR_BTN,
  #headerUserDropdown,
  .header-user-avatar-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    margin-left: 2px !important;
    font-size: 13.5px !important;
  }

  #headerNotificationWrapper,
  #headerUserDropdownWrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Đưa ô tìm kiếm xuống dòng thứ 2 full-width trên Mobile khi đang hiển thị */
  #headerSearchWrap:not([style*="display: none"]):not([style*="display:none"]) {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
  }

  #header-search,
  .header-search-group {
    width: 100% !important;
    max-width: 100% !important;
  }

  #inputSearch,
  #HEADER_SEARCH_INPUT,
  #header-search input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}