div.dt-container .dt-search input {
  outline: none;
  width: 300px !important;
}

.table-my-products-row {
  white-space: nowrap;
}

.table-my-products-row th {
  font-size: clamp(14px, 2vw, 16px);
}

.table-my-products-body tr {
  white-space: nowrap;
}

.table-my-products-body tr td {
  font-size: clamp(14px, 2vw, 15px);
  padding: 12px 8px;
}

.main-container {
  top: 110px;
}

.action-icon {
  cursor: pointer;
  font-size: 16px;
  margin: 0 5px;
}

.btn-outline-secondary {
  font-weight: 700;
  font-size: 10px;
}

/* Nút "THANH TOÁN NGAY LẬP TỨC" với icon tia sét */

/* Nút bắt đầu */
.btn-primary {
  background: linear-gradient(
      90deg,
      rgba(0, 123, 255, 1) 0%,
      rgba(0, 88, 255, 1) 100%
  );
  border: none;
  border-radius: 6px;
}

.btn-primary:hover {
  background: linear-gradient(
      90deg,
      rgba(0, 103, 214, 1) 0%,
      rgba(0, 73, 184, 1) 100%
  );
}

/* Thông báo */

.order-data {
  padding: 20px 0;
}

.main-content .nav-tabs .nav-link {
  font-size: 1rem;
  font-weight: 600;
  padding: 10px 15px;
}

table.table-hover tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.1); /* Màu nền nhạt khi hover */
  cursor: pointer;
}

.main-content .nav-tabs .nav-link.active {
  background: linear-gradient(90deg, #6b00e0, #4ca5ff);
  color: #fff;
  border-color: #fff;
}

.main-content .nav-tabs .nav-link {
  color: #333333; /* Màu chữ mặc định cho các tab */
}

.main-content .nav-tabs .nav-link:hover {
  background: linear-gradient(90deg, #6b00e0, #4ca5ff);
  color: #fff;
  border-color: #fff;
}

.table {
  background-color: #fff;
}

.table th,
.table td {
  text-align: center;
  vertical-align: middle;
}

.table .badge {
  font-size: 0.8rem;
}

.b {
  font-size: 15px;
}

.order-status {
  max-width: 100%;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

.status-paid {
  display: block;
  background-color: green;
  color: white;
}

.status-unpaid {
  display: block;
  background-color: red;
  color: white;
}

.select__my--product-filter {
  padding: .375rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  font-weight: 500;
  outline: none;
}

@media (max-width: 576px) {
  .nav-tabs {
    margin-top: 15px;
  }

  .main-container {
    top: 80px;
  }

  h3 {
    font-size: 1rem;
  }

  .row {
    margin-left: 1px;
  }

  /* Làm cho bảng có thể cuộn theo chiều ngang */
  .tble--all-academy {
    overflow-x: auto;
  }

  /* Điều chỉnh kích thước của bảng trên màn hình nhỏ */
  .table {
    font-size: 0.8rem; /* Giảm kích thước font */
  }

  /* Thu nhỏ các cột */
  .table th,
  .table td {
    padding: 0.5rem; /* Giảm padding để thu nhỏ bảng */
    font-size: 1rem; /* Giảm kích thước font */
  }

  #table-my-products th:nth-child(1),
  #table-my-products th:nth-child(4),
  #table-my-products th:nth-child(6),
  #table-my-products th:nth-child(7),
  #table-my-products td:nth-child(1),
  #table-my-products td:nth-child(4),
  #table-my-products td:nth-child(6),
  #table-my-products td:nth-child(7) {
    display: none;
  }

  #table-my-cards th:nth-child(3),
  #table-my-cards th:nth-child(4),
  #table-my-cards th:nth-child(5),
  #table-my-cards th:nth-child(7),
  #table-my-cards td:nth-child(3),
  #table-my-cards td:nth-child(4),
  #table-my-cards td:nth-child(5),
  #table-my-cards td:nth-child(7) {
    display: none;
  }

  .order-data#appointmentsData table th:nth-child(2),
  .order-data#appointmentsData table th:nth-child(3),
  .order-data#appointmentsData table th:nth-child(4),
  .order-data#appointmentsData table th:nth-child(6),
  .order-data#appointmentsData table td:nth-child(2),
  .order-data#appointmentsData table td:nth-child(3),
  .order-data#appointmentsData table td:nth-child(4),
  .order-data#appointmentsData table td:nth-child(6) {
    display: none;
  }

  /* Làm cho badge trong bảng nhỏ lại */
  .table .badge {
    font-size: 0.6rem; /* Giảm kích thước badge */
  }

  /* Điều chỉnh kích thước nút tải PDF */

  /* Làm cho modal hiển thị phù hợp trên màn hình nhỏ */
  .modal-content {
    padding: 10px;
  }

  .modal-title {
    font-size: 1.2rem;
  }

  /* Đặt chiều cao input và button cho phù hợp trên màn hình nhỏ */

  /* Giảm padding của các hàng trong bảng */
  .table-hover tbody tr {
    padding: 0.3rem 0.2rem; /* Giảm padding để gọn bảng hơn */
  }

  .form-control {
    width: 60%;
  }


  .order-data {
    padding-bottom: 100px;
  }
}

@media (min-width: 1200px) and (max-width: 1400px) {
}