#author-dashboard,
#withdrawal-container,
#withdrawal-table-container {
  width: 800px;
  text-align: center;
  margin: 0 auto;
}
.no-emoji-cross::before {
  content: "✖";
  color: white;
  font-size: 16px;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
}
.edit-profile-form,
.bulk-upload-models,
.account-dashboard-menu {
  width: 800px;
  margin: 0 auto;
}
@media (max-width: 899px) {
  .edit-profile-form,
  .bulk-upload-models,
  .account-dashboard-menu,
  #author-dashboard,
  #withdrawal-container,
  #withdrawal-table-container 
  {
    width: 100%;
  }
}
.placeholder-row {
  background-color: #f0f0f0; /* Màu nền xám nhạt */
  color: #ccc; /* Màu chữ nhạt (nếu có nội dung) */
  height: 27px; /* Chiều cao dòng */
  border-bottom: 1px solid #ddd; /* Đường viền ngăn cách */
  animation: shimmer 1.5s infinite; /* Hiệu ứng shimmer (tuỳ chọn) */
}

/* Hiệu ứng shimmer (nếu cần) */
@keyframes shimmer {
  0% {
    background-color: #f0f0f0;
  }
  50% {
    background-color: #e0e0e0;
  }
  100% {
    background-color: #f0f0f0;
  }
}

.placeholder-overview {
  color: #d3d3d3;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.author-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, 190px);
  gap: 10px;
  flex: 1;
  margin-left: auto;
  align-content: center;
  text-align: center;
  justify-content: space-evenly;
}

.post-card.placeholder {
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  border: 1px solid #fff;
  border-radius: 8px;
  background-color: #fff;
}

.post-card.placeholder .post-thumbnail {
  width: 100%;
  width: 100%;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 8px;
}

.post-card.placeholder .post-title {
  width: 100%;
  height: 20px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

/* Hiệu ứng Skeleton Loader */
@keyframes loading {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (max-width: 600px) {
  .post-card {
    width: 170px !important;
  }
  .post-thumbnail {
    width: 170px !important;
    height: 200px !important;
  }
  .author-posts {
    grid-template-columns: repeat(auto-fill, 170px) !important;
  }
}
div#recent-orders-container {
    min-width: 700px;
}
.post-card {
  width: 190px;
  overflow: hidden;
  text-align: center;
  /* background: #f9f9f9; */
  /* border: 1px solid #ddd; */
  border-radius: 5px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  padding: 5px;
}

.post-thumbnail {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 5px;
}

.post-title {
  font-size: 14px;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.pagination-button {
  display: inline-block;
  margin: 0 5px;
  padding: 10px 15px;
  border: none;
  background: #ffffff;
  color: #000000;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s;
  border: 1px solid #ddd;
}

.pagination-button.active {
  background: #656565;
  cursor: default;
  color: white;
}

.pagination-button:hover:not(.active) {
  background: #000;
  color: #fff;
}

/* Tùy chỉnh nút Next và Back */
.pagination-button:first-of-type {
  margin-right: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.pagination-button:last-of-type {
  margin-left: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Placeholder container */
.placeholder {
  position: relative;
  overflow: hidden;
  background: #65656500;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 190px;
  /* height: 300px;*/
}

/* Placeholder cho hình ảnh */
.placeholder .post-thumbnail {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 5px;
  animation: shimmer 1.5s infinite; /* Hiệu ứng shimmer */
}

/* Placeholder cho tiêu đề */
.placeholder .post-title {
  width: 80%;
  height: 20px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 5px;
  animation: shimmer 1.5s infinite;
}

/* Hiệu ứng shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Khi bài viết thực tế được hiển thị */
.post-card .post-thumbnail {
  background: none; /* Xóa nền placeholder */
  /*height: 190px;*/
}

@media (min-width: 768px) {
  .author-posts.category-12-row .post-thumbnail {
    height: 180px !important;
  }

  .author-posts.category-other-row .post-thumbnail {
    height: 190px !important;
  }
}

@media (max-width: 768px) {
  .author-posts.category-12-row .post-thumbnail {
    height: 120px !important;
  }

  .author-posts.category-other-row .post-thumbnail {
    height: 170px !important;
  }
}

/* Bọc hình ảnh và trạng thái */
.post-thumbnail-wrapper {
  position: relative;
}

.ap-pro-form-field-wrapper {
  margin-bottom: 10px;
  font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
}

/* Danh sách tải xuống */
.download-item {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.download-item:hover {
  transform: scale(1.02);
}

/* Hiệu ứng tải trang */
.loading-placeholder {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.placeholder-item {
  width: 200px;
  height: 50px;
  background: #e0e0e0;
  border-radius: 5px;
  animation: shimmer 1.5s infinite;
}

/* Khối đơn hàng */
.order-block {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Khối sản phẩm */
.item-block {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  width: calc(33.33% - 10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.item-block:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hình ảnh sản phẩm */
.item-block img {
  width: 100px;
  height: auto;
  border-radius: 3px;
  display: block;
  margin: 0 auto 10px;
}

/* Container cho popup */
.thumbnail-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 5px;
}

.thumbnail-popup img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 5px;
}

/* Backdrop */
.thumbnail-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
}

.product-title-cell {
  max-width: 300px; /* Giới hạn chiều rộng tối đa */
  white-space: nowrap; /* Không cho phép xuống dòng */
  overflow: hidden; /* Cắt nội dung vượt quá chiều rộng */
  text-overflow: ellipsis; /* Hiển thị dấu "..." nếu nội dung bị cắt */
}

.product-title-cell a {
  display: inline-block; /* Đảm bảo áp dụng max-width cho cả link */
  max-width: 100%; /* Đảm bảo không vượt quá kích thước ô */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nút mặc định */
button.chart-btn {
  color: #000000;
  font-size: 14px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 10px 15px;
  transition: all 0.3s ease;
  font-weight: bold;
}

/* Nút active */
button.chart-btn.active {
  background-color: #767676; /* Nền đen */
  color: #ffffff; /* Chữ trắng */
}

/* Placeholder Row Styles */
.placeholder-top-selling {
  height: 27px;
  animation: fadeRow 2s infinite;
  background-color: #e0e0e0;
  animation-fill-mode: forwards; /* Đảm bảo trạng thái cuối cùng giữ nguyên */
}

/* Placeholder Cell Styles */
.placeholder-cell {
  background-color: inherit;
  height: 27px;
  border: 1px solid #ddd;
}

/* Keyframes để chuyển màu */
@keyframes fadeRow {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #f5f5f5;
  }
  100% {
    background-color: #e0e0e0;
  }
}

/* Placeholder Row Styles for Recent Orders */
.placeholder-recent {
  height: 27px;
  animation: fadeRowRecent 2s infinite ease-in-out;
  background-color: #e0e0e0;
}

/* Keyframes to change row color */
@keyframes fadeRowRecent {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #f5f5f5;
  }
  100% {
    background-color: #e0e0e0;
  }
}

/* Placeholder Box Styles */
.stat-box-placeholder {
  width: 190px;
  height: 185px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 5px;
  margin: 0px;
  display: inline-block;
}

.chart-buttons-placeholder {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  justify-content: center; /* Căn giữa các phần tử con theo chiều ngang */
}

.button-placeholder {
  width: 150px;
  height: 40px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 5px;
}

.chart-placeholder {
  width: 100%;
  height: 350px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 10px;
  margin-top: 0px;
}

.recent-orders-placeholder,
.top-selling-products-placeholder {
  width: 100%;
  height: 400px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 10px;
  margin-top: 0px;
}

/* Keyframes để tạo hiệu ứng shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Placeholder Container Styles */
.dashboard-placeholder {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stats-placeholder {
  display: flex;
  gap: 10px;
  justify-content: space-around;
}

/* Tổng thể bảng */
.top-selling-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd; /* Đường viền bảng xám nhẹ */
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
    min-width: 600px;  
}

/* Phần đầu bảng */
.top-selling-table thead th {
  background-color: #e8e8e8; /* Nền xám nhạt */
  border-bottom: 1px solid #ddd; /* Đường viền dưới đầu bảng */
  padding: 10px;
  text-align: left;
  font-weight: bold;
  color: black !important;
}

/* Phần thân bảng */
.top-selling-table tbody tr {
  border-bottom: 1px solid #eee; /* Đường viền giữa các hàng */
}

.top-selling-table tbody tr:hover {
  background-color: #f9f9f9; /* Nền khi hover */
}

.top-selling-table tbody td {
  padding: 10px;
  text-align: left;
}

/* Placeholder hàng */
.placeholder-top-selling td {
  background-color: #f0f0f0; /* Màu placeholder xám nhạt */
  animation: placeholder-animation 1.5s infinite;
}

/* Hiệu ứng loading cho placeholder */
@keyframes placeholder-animation {
  0% {
    background-color: #f0f0f0;
  }
  50% {
    background-color: #e0e0e0;
  }
  100% {
    background-color: #f0f0f0;
  }
}

.notice-container-upload {
  display: none; /* Mặc định ẩn */
}

.notice-container-upload.back-button {
  text-align: center;
  margin-top: 10px;
}

.notice-container-upload:not(:empty) {
  display: block; /* Chỉ hiển thị nếu có nội dung */
}

.notice-container-upload p {
  display: block;
  margin: 0;
  padding: 0px;
  background-color: #f9f9f9;
  /* border: 1px solid #ccc; */
  border-radius: 5px;
  font-size: 20px;
  color: #000000;
  text-align: center;
}
.back-button {
  text-align: center;
  margin-bottom: 10px;
}
.back-button .back-link {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 60px;
  background-color: #5998ff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
}

button#back-button {
  display: inline-block;
  margin-top: 10px;
 
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
}

.back-buttons-container {
  text-align: center;
}
.notice-container-upload.back-button {
  font-size: 16px;
  color: #1208ff;
}

.back-button .back-link:hover {
  background-color: #4a74b8;
  color: #fff;
}

.back-button p {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.ap-pro-form-field-wrapper {
  margin-bottom: 10px;
  font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
}

.no-data-wrapper {
  width: 100%;
  display: flex;
  justify-content: center; /* Canh giữa */
  align-items: center;
  padding: 20px 0;
}

.no-data-message {
  text-align: center;
  margin: 10px auto;
  padding: 20px;
  /* max-width: 500px; */
  /* background-color: #f8f9fa; */
  /*border: 1px solid #ddd; */
  border-radius: 8px;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.no-data-message p {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

.no-data-message a {
  display: inline-block;
  padding: 10px 15px;
  color: #fff !important;
  text-decoration: none;
  font-size: 14px !important;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  background: linear-gradient(to bottom, #66afe9, #0056b3);
  text-transform: uppercase;
  font-weight: normal;
  width: 150px;
}

.no-data-message a:hover {
  background-color: #005f8d;
}

.post-thumbnail-aa {
  display: inline-block;
  width: 100%;
  height: 15px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 5px;
}

.top-selling-placeholder {
  display: inline-block;
  width: 100%;
  height: 15px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 5px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.product-info-container {
  display: flex;
  align-items: center; /* Căn giữa theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa ảnh và tiêu đề */
}

.product-thumbnail-container {
  width: 40px;
  height: 40px;
  background: #ccc;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* Ẩn ảnh trước khi tải xong */
}

.post-card.placeholder {
  box-shadow: none !important;
}
.bulk-price-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 9999;
  width: 300px;
}