* {
  font-family: "Averta Std CY";
}
.wd-card-container {
  display: flex;
  height: 100vh;
}

.wd-card-sidebar {
  width: 20%;
  background-color: #fff;
  border-right: 1px solid #ddd;
  padding: 24px 16px;
}

.wd-card-sidebar h3 {
  margin-bottom: 16px;
  font-size: 16px;
  color: #b07a59;
  font-family: "Averta Std CY";
  padding: 12px 20px;
  background: #ebe4df;
}

.wd-card-template-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wd-card-template-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  gap: 10px;
}

.wd-card-template-item:hover,
.wd-card-template-item.wd-card-active {
  background-color: #f2e7df;
}

.wd-card-template-item span {
  font-size: 14px;
}

.wd-card-main-content {
  flex: 1;
  padding: 32px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.wd-card-main-content h2 {
  margin-top: 0;
  font-family: "Averta Std CY";
  font-size: 20px;
}

.wd-card-search-box {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 8px 16px;
  gap: 10px;
}

.wd-card-search-box input {
  border: none;
  outline: none;
  width: 100%;
}

.wd-card-table-wrapper {
  overflow-x: auto;
  min-height: 515px;
}

.wd-card-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid #eee;
}

.wd-card-table th,
.wd-card-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  vertical-align: top;
}

.wd-card-table th {
  background-color: #f5f5f5;
}

.wd-card-download-btn {
  align-self: flex-end;
  margin-top: 24px;
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.wd-card-download-btn:hover {
  background-color: #f2f2f2;
}
.wd-card-not-logged-in {
  display: flex;
  justify-content: center; /* căn giữa ngang */
  align-items: center; /* căn giữa dọc */
  height: 100vh; /* chiều cao toàn bộ màn hình */
  text-align: center; /* căn giữa nội dung văn bản */
  padding: 20px;
  background-color: #f9f9f9; /* tùy chọn: màu nền nhẹ */
  font-size: 18px;
}

.wd-card-not-logged-in a {
  color: #0073aa;
  text-decoration: underline;
}
.wd-card-not-logged-in a:hover {
  color: #005177;
}

.wd-pagination {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
button.wd-pagination-btn {
  padding: 10px 19px;
  background-color: #b48c72;
  border: none;
  color: #fff;
  border-radius: 5px;
}
.wd-card-download-btn-block {
  display: flex;
  justify-content: flex-end;
}
.wd-card-template-item-none {
  text-align: center;
}
.wd-card-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
/* .wd-card-main-header a {
  text-decoration: none;
} */
@media screen and (max-width: 992px) {
  .wd-card-sidebar {
    width: 30%;
  }
}
@media screen and (max-width: 768px) {
  .wd-card-container {
    flex-direction: column;
  }
  .wd-card-sidebar {
    width: 100%;
  }
  .wd-card-main-content {
    padding: 0 16px 32px 16px;
  }
  .wd-card-table {
    table-layout: auto; /* hoặc thử table-layout: fixed nếu cần kiểm soát */
    min-width: 800px; /* Đảm bảo bảng đủ rộng */
  }

  .wd-card-table td:nth-child(6),
  .wd-card-table th:nth-child(6) {
    white-space: normal;
    word-break: break-word;
  }
  .wd-card-table-wrapper {
    overflow-x: auto;
    width: 100%;
  }
  .wd-card-table td:nth-child(6),
  .wd-card-table th:nth-child(6) {
    min-width: 300px;
    max-width: 500px;
  }
  .wd-pagination {
    justify-content: center;
  }
  .wd-card-download-btn-block {
    display: flex;
    justify-content: center;
  }
}