/* Style cho button xuất Excel */
.dt-button.buttons-excel.buttons-html5 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: #fff !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Active state */
.dt-button.buttons-excel.buttons-html5:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

@media screen and (max-width: 768px){
  .dt-paging nav {
    display: flex !important;
    align-items: center !important;
    width: 100vh !important;
    margin-top: 10px !important;
    flex-wrap: wrap !important;
  }

  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell > * {
    display: flex !important;
    align-items: center !important;
    width: 100vh !important;
  }
}

/* Container phân trang */
html div.dt-container .dt-paging {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin-top: 1rem !important;
}

/* Style cho tất cả các button phân trang */
html div.dt-container .dt-paging .dt-paging-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #475569 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

/* Button trang hiện tại */
html div.dt-container .dt-paging .dt-paging-button.current,
html div.dt-container .dt-paging .dt-paging-button.current:hover,
html div.dt-container .dt-paging .dt-paging-button.current:active {
  background: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 109, 181, 0.2) !important;
  border: none !important;
}

html div.dt-container .dt-paging .dt-paging-button.current *,
html div.dt-container .dt-paging .dt-paging-button.current:hover *,
html div.dt-container .dt-paging .dt-paging-button.current:active * {
  color: #ffffff !important;
}

/* Hover effect cho các button */
html div.dt-container .dt-paging .dt-paging-button:not(.disabled):not(.current):hover {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: var(--primary-color) !important;
  border: none !important;
  box-shadow: none !important;
}

html div.dt-container .dt-paging .dt-paging-button:not(.disabled):not(.current):hover * {
  color: var(--primary-color) !important;
}

/* Active effect cho các button */
html div.dt-container .dt-paging .dt-paging-button:not(.disabled):not(.current):active {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  box-shadow: none !important;
  transform: scale(0.95) !important;
}

/* Style cho button bị disabled */
html div.dt-container .dt-paging .dt-paging-button.disabled,
html div.dt-container .dt-paging .dt-paging-button.disabled:hover,
html div.dt-container .dt-paging .dt-paging-button.disabled:active {
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
}

/* Loại bỏ outline khi focus */
html div.dt-container .dt-paging .dt-paging-button:focus {
  outline: none !important;
  box-shadow: none !important;
}