.main-container {
  top: 110px;
}

/* 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 */

.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-hover tbody tr:hover {
  background-color: #f8f9fa;
}

.badge {
  font-size: 14px;
}

.nav-link {
  font-weight: bold; /* Làm đậm chữ */
}

.profile-title {
  display: flex;
  align-items: center;
}

.profile-title img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-right: 15px;
}

.profile-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title h5 {
  margin: 0;
}

.edit-icon {
  cursor: pointer;
  color: #6c757d;
}

.edit-icon:hover {
  color: #000;
}

.profile-info {
  margin-bottom: 10px;
}

.profile-info .info-label {
  font-weight: bold;
}

.profile--main--user {
  padding-left: 300px;
}

.btn-custom {
  font-size: 1rem; /* Giảm kích thước chữ */
  padding: 8px 16px; /* Điều chỉnh padding */
  white-space: nowrap; /* Đảm bảo chữ không xuống dòng */
}

.social-link {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.social-link i {
  font-size: 20px;
  margin-right: 10px;
  color: #333;
}

.btn-update {
  background-color: #d9534f;
  color: white;
}

.profile--network-main {
  padding-left: 70px;
  padding-right: 70px;
}

.img__my--profile-account {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.fullName--account-image {
  border: 2px solid #8d4df3;
  display: block;
  width: 100%;
}

.upload-image-input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.camera-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 50%;
  /*opacity: 0;*/
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.btn-edit-user-name-account {
  border: none;
  background-color: unset;
}

.btn-edit-user-name-account i {
  font-size: 18px;
}

.btn-success-user-name-account {
  border: 1px solid #d9d9d9;
  border-radius: 7px;
  background-color: #27c727;
  color: white;
}

#icon-show-old-password {
  position: absolute;
  top: 43px;
  right: 15px;
}

#icon-show-new-password {
  position: absolute;
  top: 43px;
  right: 15px;
}

.btn-edit-account-profile {
  border: none;
  background-color: unset;
  font-size: 20px;
}

@media (max-width: 576px) {
  .section-header {
    display: flex;
    gap: 50px;
  }

  /* Đặt lại kích thước của nội dung chính */
  .main-content {
    padding: 10px;
  }

  .nav-tabs {
    display: flex;
    flex-wrap: nowrap; /* Không cho xuống dòng */
    overflow-x: auto; /* Thêm cuộn ngang */
    white-space: nowrap; /* Giữ nội dung trên một dòng */
  }

  .nav-item {
    flex: 0 0 auto; /* Đảm bảo kích thước cố định và không co lại */
  }

  .nav-tabs::-webkit-scrollbar {
    height: 6px; /* Tùy chỉnh chiều cao thanh cuộn */
  }

  .nav-tabs::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Màu thanh cuộn */
    border-radius: 10px; /* Bo góc */
  }

  .nav-tabs::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* Màu nền thanh cuộn */
  }

  /* Căn chỉnh lại bảng đơn hàng */
  .table th,
  .table td {
    font-size: 0.875rem; /* Giảm kích thước chữ trong bảng */
    padding: 8px;
  }

  .table {
    font-size: 0.875rem; /* Giảm kích thước chữ chung cho bảng */
  }

  /* Làm nhỏ các ô nhập và nút tìm kiếm */

  /* Điều chỉnh modal */
  .modal-content {
    padding: 15px;
  }

  /* Ẩn một số cột nếu không cần thiết trên mobile */
  .table th:nth-child(3),
    .table td:nth-child(3), /* Email khách hàng */
    .table th:nth-child(5),
    .table td:nth-child(5) {
    /* Kênh */
    display: none;
  }

  /* Canh giữa badge trạng thái */
  .table .badge {
    display: block;
    margin: 0 auto;
    width: fit-content;
  }

  /* Canh chỉnh nút xem chi tiết */

  /* Căn chỉnh lại modal */
  .modal-title {
    font-size: 1.25rem;
  }

  .modal-body {
    font-size: 0.875rem;
  }

  .profile-section {
    padding: 10px;
    margin-bottom: 15px;
  }

  .profile--main--user {
    padding-left: 0; /* Loại bỏ padding ở màn hình nhỏ */
  }

  .profile-title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .img__my--profile-account {
    margin-bottom: 15px;
  }

  .fullName--account-title,
  .user-name-account {
    text-align: center;
  }

  .btn-edit-user-name-account,
  .btn-success-user-name-account {
    margin-left: 5px; /* Tăng khoảng cách giữa các nút */
  }

  .social-link {
    text-align: center;
  }

  .social-link i {
    margin-right: 0;
    margin-bottom: 5px;
  }

  .btn-custom {
    width: 100%; /* Đảm bảo nút chiếm toàn bộ chiều rộng */
    padding: 10px; /* Điều chỉnh padding để phù hợp */
  }

  .profile--network-main {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
}

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