/* CSS cho bảng và các tính năng */
body {
  font-family: "Inter", sans-serif;
  background-color: #111827; /* gray-900 */
  color: #d1d5db; /* gray-300 */
}

/* Giữ cố định tiêu đề bảng khi cuộn */
thead th {
  position: sticky;
  top: 0;
  background-color: #1f2937; /* gray-800 */
  z-index: 10;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

/* Kiểu cho tiêu đề có thể sắp xếp */
th[data-sort] {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease-in-out;
}
th[data-sort]:hover {
  color: #ffffff;
}
/* Biểu tượng mũi tên sắp xếp */
th[data-sort]::after {
  content: " \25B2"; /* Mũi tên lên */
  opacity: 0.3;
  font-size: 0.8em;
}
th[data-sort].sort-desc::after {
  content: " \25BC"; /* Mũi tên xuống */
}
th[data-sort].sort-active::after {
  opacity: 1;
}

/* Kiểu cho từ khóa được highlight */
mark {
  background-color: #fde047; /* yellow-300 */
  color: #111827; /* gray-900 */
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}

/* Tùy chỉnh ô input số trang */
#current-page,
#current-page-top {
  width: 60px;
  background-color: #374151; /* gray-700 */
  color: #ffffff;
  border: 1px solid #4b5563; /* gray-600 */
  text-align: center;
}

/* Nút điều hướng */
.nav-button {
  background-color: #374151; /* gray-700 */
  color: #ffffff;
  border: 1px solid #4b5563; /* gray-600 */
}
.nav-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}