/* === Layout tổng thể === */

.content-list-page {
  background: #FFFFFF;
}

/* Tiêu đề */
.content-list-page .td-title {
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 16px;
}

/* Bộ lọc */
.content-list-page .td-filter-card {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.content-list-page .form-control {
  /* border: 1px solid #D1D5DB; */
  border-radius: 6px;
  font-size: 14px;
  height: 38px;
}

.content-list-page .input-group-addon {
  background: #F3F4F6;
  border: 1px solid #D1D5DB;
}

/* Nút lọc */
.content-list-page .td-btn-filter-apply {
  background: #16A34A;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.content-list-page .td-btn-filter-apply i {
  font-size: 14px;
}

/* Bảng */
.content-list-page .td-table-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 0;
}

.content-list-page table.td-table {
  width: 100%;
  /* border-collapse: separate; */
  border-spacing: 0;
  font-size: 14px;
}

.content-list-page table.td-table thead th {
  background: #F3F4F6;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid #E5E7EB;
}

.content-list-page table.td-table tbody td {
  padding: 12px 16px;
  color: #111827;
  border-bottom: 1px solid #F3F4F6;
}

.content-list-page table.td-table tbody tr:hover {
  background: #F9FAFB;
}

/* Link trong bảng */
.content-list-page table.td-table a {
  color: #0A66C2;
  text-decoration: none;
}

.content-list-page table.td-table a:hover {
  text-decoration: underline;
}

/* Chip / Tag */
.content-list-page .td-chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 16px;
  margin-right: 4px;
}

.content-list-page .td-chip-green {
  background: #EAF7EE;
  color: #16A34A;
  border: 1px solid #C9EACD;
}

/* Phân trang */
.content-list-page .td-pagination {
  margin: 8px 0;
}

.content-list-page .pagination > li > span,
.content-list-page .pagination > li > a {
  border-radius: 6px !important;
  border: 1px solid #E5E7EB;
  color: #111827;
  font-size: 13px;
}

.content-list-page .pagination > .active > span {
  background: #16A34A;
  color: #fff;
  border-color: #16A34A;
}
/* ==== FILTER WRAPPER ==== */
.content-list-page .td-filter-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* ==== FILTER ITEMS ==== */
.content-list-page .td-filter-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

.content-list-page .td-filter-row .form-control {
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  height: 40px;
  font-size: 14px;
  color: #111827;
  box-shadow: none;
}

.content-list-page .td-filter-row .input-group {
  width: 100%;
}

.content-list-page .td-filter-row .input-group-addon {
  background: #FFFFFF;
  /* border: 1px solid #E5E7EB; */
  border-right: none;
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #6B7280;
}

.content-list-page .td-filter-row input.form-control {
  border-left: none;
  border-radius: 0 6px 6px 0;
}

/* ==== BUTTON ==== */
.content-list-page .td-btn-filter-apply {
  background: #16A34A;
  border: none;
  color: #fff;
  font-weight: 500;
  border-radius: 8px;
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.content-list-page .td-btn-filter-apply:hover {
  background: #128C3F;
}

/* ==== BUTTON ICON ==== */
.content-list-page .td-btn-filter-apply i {
  font-size: 14px;
  margin-top: 1px;
}

/* ==== SMALL SCREEN ==== */
@media (max-width: 768px) {
  .content-list-page .td-filter-card {
    flex-direction: column;
    align-items: stretch;
  }
}