.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
  padding: 20px;
  border-radius: 8px;
  display: none;
}

.dialog.hidden {
  display: none;
}

.dialog-3dmodel-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#edit-3dmodel-price-input {
  padding: 8px;
  font-size: 16px;
  width: 100%;
}

button {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

/* Popup container */
#edit-3dmodel-dialog {
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Nội dung popup */
.dialog-3dmodel-content {
  background-color: #fff;
  padding: 30px;
  width: 100%;
  max-width: 800px;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  will-change: transform;
}

/* Lớp cuộn riêng biệt, nằm bên trong, trừ padding nếu cần */
.dialog-scroll-inner {
  max-height: calc(80vh - 40px); /* 40px = 2 * padding */
  overflow-y: auto;
  padding-right: 30px;
  color: #000000;
}

#model-description {
  min-height: 100px; /* Chiều cao tối thiểu */
  height: auto; /* Cho phép tự động điều chỉnh chiều cao */
  resize: vertical; /* Chỉ cho phép thay đổi chiều cao theo hướng dọc */
  padding: 10px;
}

/* Ẩn popup khi có class 'hidden' */
.hidden {
  display: none !important;
}
/* Nút trong popup */
button {
  margin: 10px 5px;
  padding: 10px 20px;
  background-color: #4a7d91;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #005177;
}

#edit-3dmodel-close-button {
  background-color: #f44336;
}

#edit-3dmodel-close-button:hover {
  background-color: #c33d2a;
}

/* Container cho hàng */
.input-row {
  display: flex;
  gap: 20px; /* Khoảng cách giữa các nhóm input */
  margin-bottom: 20px; /* Khoảng cách dưới cùng của hàng */
  align-items: flex-start;
  max-width: 760px;
}

/* Mỗi nhóm input */
.input-group {
  flex: 1; /* Để các nhóm có chiều rộng bằng nhau */
  display: flex;
  flex-direction: column;
}

/* Các nút khác */
.button-row button {
  background-color: #4a7d91;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button-row button:hover {
  background-color: #0056b3;
}

/* Container nhóm Renders và Style */
.style-render-group {
  display: flex;
  gap: 20px; /* Khoảng cách giữa 2 nhóm */
  margin-bottom: 20px; /* Khoảng cách dưới */
}

/* Nhóm render */
.render-group {
  flex: 1; /* Đảm bảo chiều rộng cân bằng giữa các nhóm */
  display: flex;
  flex-direction: column;
  gap: 10px; /* Khoảng cách giữa nhãn và nội dung */
}

/* Nhóm style */
.style-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.edit-3dmodel-note {
  font-size: 14px;
  color: #ff0000; /* Màu đỏ để thu hút sự chú ý */
  margin-bottom: 0px; /* Tạo khoảng cách với các nút */
  line-height: 1.5; /* Dễ đọc hơn */
}

/* CSS cho popup */
#request-delete-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 20px;
  border-radius: 8px;
  display: none; /* Không hiển thị mặc định */
}

#request-delete-popup.hidden {
  display: none; /* Ẩn khi có class hidden */
}

#request-delete-popup:not(.hidden) {
  display: block; /* Hiển thị khi không có class hidden */
}

/* Nội dung bên trong popup */
#request-delete-popup h3 {
  font-size: 18px;
  margin-bottom: 15px;
  text-align: center;
  color: #333;
}

#request-delete-popup label {
  font-size: 14px;
  color: #555;
  display: block;
  margin-bottom: 5px;
}

#request-delete-popup textarea {
  width: 100%;
  min-height: 80px;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 15px;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
}

#request-delete-popup .button-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#request-delete-popup button {
  padding: 10px 15px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#request-delete-popup #confirm-delete-request-button {
  background-color: #4a7d91;
  color: white;
}

#request-delete-popup #confirm-delete-request-button:hover {
  background-color: #005177;
}

#request-delete-popup #cancel-delete-request-button {
  background-color: #f44336;
  color: white;
}

#request-delete-popup #cancel-delete-request-button:hover {
  background-color: #c33d2a;
}
/* Overlay cho yêu cầu xóa */
#popup-overlay-request-delete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Vùng tối */
  z-index: 999; /* Nằm dưới popup */
  display: none; /* Ẩn mặc định */
}

#popup-overlay-request-delete:not(.hidden) {
  display: block; /* Hiển thị overlay khi không có class hidden */
}

.dialog-3dmodel-content {
  position: relative; /* Đảm bảo vị trí tham chiếu cho nút "Close" */
}
.close-icon-edit-3dmodel {
  position: absolute;
  top: 10px;
  right: 35px;
  background: #0000008c;
  color: #fffdfd;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  line-height: 30px;
  text-align: center;
  padding: 5px 12px;
}
.close-icon-edit-3dmodel:hover {
  background: #858585;
}
.section-to-hide {
  display: none;
}

.post-thumbnail-wrapper {
  position: relative;
  display: inline-block;
}

.post-status,
.edit-3dmodel-button,
.overlay-mymodel {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* Lớp phủ mờ */
.overlay-mymodel {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Màu đen mờ */
  z-index: 1;
  pointer-events: none; /* Cho phép chuột phải hoạt động trên ảnh */
  border-radius: 8px;
}

/* Hiển thị khi hover */
.post-card:hover .post-status,
.post-card:hover .edit-3dmodel-button,
.post-card:hover .overlay-mymodel {
  opacity: 1;
  visibility: visible;
}

.post-status {
  top: 10px;
  left: 10px;
  background: #3b3b3bad;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 5px;
  z-index: 2;
}

@media (min-width: 768px) {
  .post-status {
    opacity: 1;
    visibility: visible;
  }
}

.edit-3dmodel-button {
  bottom: 5px;
  right: 10px;
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 2;
}

/* Hiệu ứng khi hover */
.edit-3dmodel-button:hover {
  color: #fff; /* Chữ trắng */
}

.edit-3dmodel-button i {
  pointer-events: none; /* Ngăn icon chặn sự kiện click */
}
.back-button-style {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgb(74, 125, 145)!important;
  color: white!important;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.back-button-style:hover {
  background-color: #005f8d;
}