h1.titleone {
  text-align: justify;
  letter-spacing: 1.5px;
  line-height: 1.4;
    margin-top: 0;
    padding-top: 0;  
}
h1.titleone::first-letter {
  text-transform: uppercase;
}

.white-icon {
  filter: brightness(0) invert(1);
}

img.icon-inline.white-icon {
  height: 20px;
  width: 20px;
}

.formats-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.format-item {
  display: flex;
  align-items: center;

  border-radius: 6px;
  font-size: 14px;
}

.format-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 6px;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0px !important;
  padding-bottom: 0px;
}

@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
}
.card-width-table .card-footer,
.table tr td {
  border-top: 1px solid rgb(255 255 255 / 100%) !important;
}
.product-buttons-wrapper button.add-to-cart-btn,
.product-buttons-wrapper button.download-button-free {
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #5b92af, #3d5f73);
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
  width: 100%;
  text-transform: uppercase;
  font-weight: 600;
  margin: 5px 0px;
  overflow: hidden;
  box-shadow:
    inset 0 4px 6px rgba(255, 255, 255, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: Helvetica, Helvetica, Arial, sans-serif;
  letter-spacing: 1.1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-buttons-wrapper button.add-to-cart-btn::after,
.product-buttons-wrapper button.download-button-free::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 135%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-30deg);
  transition: all 0.5s ease-in-out;
}

.product-buttons-wrapper button.add-to-cart-btn:hover,
.product-buttons-wrapper button.download-button-free:hover {
  background: linear-gradient(135deg, #6aa5c5, #4a6f84);
  box-shadow:
    inset 0 6px 10px rgba(255, 255, 255, 0.4),
    0 4px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.product-buttons-wrapper button.add-to-cart-btn:hover::after,
.product-buttons-wrapper button.download-button-free:hover::after {
  left: 100%;
}


@media (max-width: 768px) {
  .col-md-4 {
    margin-top: 60px;
  }
}

@media (max-width: 1199px) {
  .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .col-md-4 {
    max-width: 380px !important;
    width: 380px;
    padding-left: 15px;
     
  }
}

/* Mặc định (cho kích thước màn hình nhỏ hơn 1199px) */
@media (max-width: 1199px) {
  .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto;
  }
}

/* Màn hình từ 1200px trở lên */
@media (min-width: 1200px) {
  .col-md-8 {
    flex: 1;
    padding-right: 20px;
    min-width: 0;
  }
}



@media (min-width: 1600px) {
  .template-page-product-management {
    width: 1600px;
    height: auto;
    margin: 0 auto;
    padding: 10px 0px;
    box-shadow: 0 1px 10px rgb(255 255 255 / 20%);
  }
}
@media (max-width: 1599px) {
  .template-page-product-management {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 10px 16px;
  }
}

#show-more-posts {
  display: block;
  margin: 10px auto; /* Căn giữa */
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase; /* In hoa */
  color: #4a7d91; /* Màu chữ cam */
  background-color: transparent; /* Nền trong suốt */
  border: none; /* Bỏ bo viền */
  cursor: pointer;
}

h1.related-products-title {
  font-size: 14px;
  font-weight: 400;
  color: #8f8f8f;
  text-transform: uppercase;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 10px;  
}

.product-price-custom {
  font-weight: 700 !important;
  margin-top: 5px;
  color: #4a7d91;
  background-color: #e9e9e9;
  border-radius: var(--border-radius-regular);
  height: 30px;
  display: flex;
  align-items: center; /* Căn giữa theo chiều dọc */
  justify-content: center; /* Căn giữa theo chiều ngang */
  text-align: center;
}

.entry-bottom {
  margin: 10px;
}

.comments h3.comment-reply-title {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.comments,
.entry-bottom {
  width: 100%;
}

.yarpp-related h3 {
  padding-left: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 1600px) {
  div.breadcrumbs {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.jquerycssmenu {
  height: 50px;
}

.yarpp-thumbnails-horizontal .yarpp-thumbnail {
  border: 0px solid hsla(0, 0%, 50%, 0.1);
  vertical-align: top;
}

element.style {
}

/* CSS cho slider và thumbnails */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%; /* Điều chỉnh kích thước slider theo ý muốn */
  margin: 0 auto; /* Canh giữa slider */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider {
  display: flex;
  justify-content: center; /* Giúp căn giữa ảnh */
  align-items: center; /* Đảm bảo ảnh căn giữa theo chiều dọc */
}

@media (min-width: 725px) {
  .slider {
    height: 725px; /* Đảm bảo chiều cao cố định */
  }
}

@media (max-width: 480px) {
  .slider {
    height: 380px; /* Đảm bảo chiều cao cố định */
  }
}

/* Thêm đoạn này để đặt chiều cao 480px trong khoảng 480px - 725px */
@media (min-width: 480px) and (max-width: 725px) {
  .slider {
    height: 580px;
  }
}

.slider ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Hiển thị các hình ảnh trong slider theo chiều ngang */
  align-items: center; /* Canh giữa hình ảnh theo chiều dọc */
  transition: transform 0.3s ease-in-out; /* Hiệu ứng chuyển đổi giữa các hình ảnh */
  width: 100%;
}

.slider ul li {
  flex: 0 0 100%; /* Các hình ảnh trong slider chiếm 100% chiều rộng màn hình */
  padding: 0;
}
.image-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.image-wrapper {
  position: relative; /* Quan trọng để .id-overlay căn theo ảnh */
  display: flex; /* Căn giữa ảnh theo chiều dọc */
  justify-content: center;
  align-items: flex-start; /* Quan trọng: căn ảnh sát mép trên */
  width: fit-content;
  margin: 0 auto;
  overflow: hidden; /* Ngăn overlay bị lệch */
}

.image-wrapper img {
  display: block;
  width: auto;
  height: auto;
  max-height: 100%; /* Đảm bảo không méo ảnh */
  object-fit: contain; /* Đảm bảo ảnh giữ nguyên tỉ lệ */
}

.slider-container .prev-next-btns {
  position: absolute;
  top: 45% !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1; /* Đảm bảo nút previous và next hiển thị trên slider */
}

/* CSS cho nút previous và next */
@media (max-width: 768px) {
  .slider-container .prev-next-btns {
    width: 100% !important;
  }
}
/* CSS cho nút previous và next */
@media (min-width: 768px) {
  .slider-container .prev-next-btns {
    width: 80% !important;
  }
}

.prev-btn:focus {
  outline: none; /* Xóa viền focus nếu có */
}

.prev-btn:focus i.fas.fa-chevron-left,
.prev-btn:active i.fas.fa-chevron-left {
  color: white !important;
}
.slider-container .prev-next-btns button {
  background-color: transparent;
  font-size: 40px;
  cursor: pointer;
  color: #bfbfbf;
  background: none;
  border: none;
  padding: 10px !important;
  outline: none;
}

/* Khi di chuột vào .col-md-8 hoặc nút, các nút sẽ có hiệu ứng hover */
.col-md-8:hover .prev-btn,
.prev-btn:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  border-radius: 0 15px 15px 0;
}

.col-md-8:hover .next-btn,
.next-btn:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  border-radius: 15px 0 0 15px;
}

@media (max-width: 768px) {
  .slider-container .prev-next-btns button {
    padding: 5px 5px;
  }
}

@media (max-width: 768px) {
  .col-md-4 {
    bottom: -60px !important;
  }
}

@media (max-width: 768px) {
  .thumbnailszzz {
    margin-bottom: -80px;
  }
}

/* Tạo hình ảnh hình tròn */
img.vgehoidshvsd {
  height: 45px;
  width: 45px; /* Đảm bảo cả chiều rộng và chiều cao bằng nhau */
  background: #ccc;
  object-fit: cover;
  border-radius: 50%;
}
.wrap1 {
  width: 1610px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 10px 45px;
  box-shadow: 0 1px 10px rgb(255 255 255 / 20%);
}

.btn {
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 100%;
}
 
.table-bordered,
.table-bordered td,
.table-bordered th {
 
  line-height: 18px;
}
 

@media (max-width: 768px) {
  .id-overlay {
    display: none;
  }
}

@media (max-width: 768px) {
  .slider img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media (min-width: 768px) {
  .slider img {
    width: auto;
    max-height: 725px !important;
    object-fit: contain;
  }
}

button#load-template-btn {
  display: none;
}
#template-container {
  display: block; /* Đảm bảo hiển thị */
  padding: 20px; /* Tùy chọn để làm nổi bật */
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  color: #888;
}

.thumbnail-item-wrapper-related-posts:hover .overlay {
  display: block !important;
  opacity: 1 !important; /* Hiển thị lớp phủ khi di chuột */
}

.overlay {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Lớp phủ màu đen trong suốt */
  border-radius: 5px;
  display: none; /* Ẩn mặc định */
  transition: opacity 0.3s ease; /* Hiệu ứng mượt mà */
  pointer-events: none; /* Cho phép click qua overlay */
}

/* Điều chỉnh gallery dots */
.gallery-dots {
  display: none; /* Ẩn dấu chấm theo mặc định */
  justify-content: flex-start; /* Căn giữa các dấu chấm theo chiều ngang */
  align-items: center;
  position: absolute;
  bottom: 5px; /* Đặt vị trí của dấu chấm phía dưới ảnh */
  left: 0; /* Đảm bảo dấu chấm bắt đầu từ cạnh trái của imgWrap */
  width: 90%; /* Đặt chiều rộng của dấu chấm bằng chiều rộng của imgWrap */
  padding: 0 10px; /* Thêm một ít padding để tránh dots bị sát mép */
  overflow-x: auto; /* Cho phép cuộn ngang nếu có quá nhiều dots */
  white-space: nowrap; /* Đảm bảo các dots nằm trên cùng một hàng */
  z-index: 10;
}

/* Dấu chấm tròn */
.dot {
  width: 5px; /* Kích thước hợp lý cho dấu chấm */
  height: 5px;
  margin: 0 1px; /* Khoảng cách giữa các dấu chấm */
  background-color: #c6c6c6; /* Màu sắc mặc định */
  border-radius: 50%; /* Để tạo hình dạng tròn */
  display: inline-block; /* Hiển thị thành hàng ngang */
  cursor: pointer; /* Con trỏ chuột */
  flex-shrink: 0; /* Đảm bảo dấu chấm không co lại khi có quá nhiều dots */
}

.gallery-dots .dot.active {
  opacity: 1; /* Làm sáng dấu chấm tròn đang hoạt động */
  background-color: yellow; /* Có thể thay đổi màu sắc nếu cần */
}

/* Hiển thị dấu chấm khi hover vào thumbnail */
.thumbnail-item-wrapper-related-posts:hover .gallery-dots {
  display: flex; /* Hiển thị dấu chấm khi hover vào ảnh thu nhỏ */
}

/* Khối popup-info (toàn bộ popup) */
.popup-info {
  position: fixed; /* Đặt popup ở vị trí cố định */
  display: none; /* Mặc định ẩn, hiển thị khi cần */
  width: 600px; /* Đặt chiều rộng cố định */
  top: 10%; /* Vị trí từ trên xuống, bạn có thể điều chỉnh tùy ý */
  left: 50%; /* Vị trí giữa ngang màn hình */
  transform: translateX(-50%); /* Chỉ dịch chuyển ngang để căn giữa */
  background-color: white; /* Nền trắng */
  border: 1px solid #ddd; /* Đường viền nhẹ */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Bóng đổ cho toàn bộ popup */
  z-index: 9999; /* Đảm bảo popup luôn nằm trên các phần tử khác */
  padding: 10px; /* Tạo khoảng cách bên trong */
  border-radius: 3px; /* Bo tròn các góc */
  object-fit: contain;
}

/* Hình ảnh trong popup */
.popup-info img {
  display: block; /* Đặt ảnh là block để tránh khoảng cách dưới ảnh */
  margin: 0;
  padding: 0;
  width: 100%; /* Đặt ảnh có chiều rộng 100% của khối cha */
  height: auto; /* Giữ tỷ lệ ảnh */
  object-fit: contain; /* Đảm bảo ảnh luôn bao phủ khung hình */
}

/* Tiêu đề bên trong popup */
.popup-info h1 {
  font-size: 20px;
  margin: 0 0 10px 0; /* Khoảng cách dưới để cách biệt với nội dung bên dưới */
}

/* Khối additional-info và dimensions */
.additional-info,
.dimensions {
  background-color: white; /* Nền trắng cho các khối bên trong */
  margin-bottom: 10px; /* Khoảng cách giữa các khối bên trong */
  border-radius: 5px; /* Bo tròn các góc cho đẹp */
  box-shadow: none; /* Không có bóng đổ riêng cho các khối này */
  width: 580px;
}

/* Tùy chỉnh cho văn bản bên trong additional-info */
.popup-info .additional-info span,
.dimensions span {
  color: #4a7d91 !important; /* Màu văn bản */
  font-size: 14px !important;
  text-transform: capitalize; /* Viết hoa chữ cái đầu của văn bản */
}

/* Định dạng nút điều hướng */
.prev-button,
.next-button {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0); /* Màu nền đen bán trong suốt */
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
  display: none; /* Chỉ hiển thị khi hover */
  border-radius: 5px;
}

.thumbnail-item-wrapper-related-posts:hover .prev-button,
.thumbnail-item-wrapper-related-posts:hover .next-button {
  display: block; /* Hiển thị nút khi hover */
}

.prev-button {
  left: 5px; /* Vị trí bên trái */
}

.next-button {
  right: 5px; /* Vị trí bên phải */
}

.prev-button i,
.next-button i {
  font-size: 20px;
  color: #fff; /* Màu mũi tên */
  cursor: pointer;
}

/*
.thumbnail-title,
.thumbnail-meta .formats,
.thumbnail-meta .type,
.thumbnail-meta .an-display-view,
.thumbnail-meta .product-price {
    color: transparent;
    height: 20px;	
}*/

/* Khi tải xong nội dung, bỏ nền và hiển thị nội dung */
.loaded .thumbnail-title,
.loaded .thumbnail-meta .formats,
.loaded .thumbnail-meta .type,
.loaded .thumbnail-meta .an-display-view,
.loaded .thumbnail-meta .product-price {
  background-color: transparent;
  color: #4a7d91; /* Màu thực tế sau khi nội dung tải xong */
}

@media (min-width: 480px) {
  .related-posts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    min-height: 666px;
  }
}

@media (max-width: 480px) {
  .related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 170px);
    gap: 10px;
    flex: 1;
    margin-left: auto;
    align-content: center;
    text-align: center;
    justify-content: space-evenly;
  }
  .thumbnail-item-wrapper-related-posts {
    width: 170px;
  }  
}

@media (min-width: 480px) {
  .thumbnail-item-wrapper-related-posts {
    min-width: 200px;
  }  
}

.thumbnail-item-wrapper-related-posts {
  display: flex;
  flex-direction: column;
  height: auto;
  flex-grow: 1;
  max-width: 312px;
  margin-bottom: 10px;
  opacity: 1!important;
}


.thumbnail-item {
  text-align: center;
}
@media (min-width: 480px) {
  .thumbnail-img-related-posts {
    width: 100%;
  min-width: 200px;
  max-width: 310px;    
    height: 212px;
    object-fit: cover;
    border-radius: 10px;
    background: #ffffff;
  }
}

@media (max-width: 480px) {
  .thumbnail-img-related-posts {
    width: 170px;
    height: 170px;
    object-fit: cover;
  }
}


@media (max-width: 480px) {
  .thumbnail-placeholder-related-posts {
    background-image: url("https://3dbrute.com/wp-content/uploads/2024/10/placeholder-300x300.jpg");
    background-size: cover;
    width: 170px;
    height: 170px;
    border-radius: 5px;
  }
}

@media (min-width: 480px) {
  .thumbnail-placeholder-related-posts {
    width: 100%;
    height: 212px;
    object-fit: cover;
    border-radius: 10px;
    background: #ffffff;
  }
}

.thumbnail-title {
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.2; /* Điều chỉnh chiều cao dòng để tránh cắt chữ */
  text-align: left;
  margin: 10px 0px 0px;
  /*border-bottom: 1px solid rgba(0, 0, 0, .1);*/
  width: 100%; /* Để tiêu đề căn đều theo phần nội dung */
  max-width: 200px; /* Đảm bảo không quá dài */
}

.thumbnail-meta {
  font-size: 12px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin: 5px 0px 10px;
  color: #4a7d91;
  text-transform: capitalize;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#articles,
#featured-articles {
  min-height: 70vh;
}

.an-display-view {
  color: #4a7d91;
}

div.type {
  float: right;
  margin: 0px;
  margin-left: 5px;
  color: #4a7d91;
  border-radius: 3px;
  text-align: center;
  margin-top: 0px !important;
  width: 27px;
}

.formats,
.product-price {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .size-controls {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .an-display-view {
    display: none;
  }
}

.an-display-view {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ẩn nút Like và Bookmark mặc định */
.thumbnail-item-wrapper-related-posts .like-button,
.thumbnail-item-wrapper-related-posts .bookmark-button {
  top: 5px; /* Khoảng cách từ phía trên */
  color: white; /* Màu chữ */
  cursor: pointer; /* Con trỏ chuột */
  z-index: 10; /* Đảm bảo nút nằm trên lớp khác */
  display: none; /* Ẩn mặc định */
}

/* Vị trí của nút Like và Bookmark */
.thumbnail-item-wrapper-related-posts .like-button {
  left: 5px; /* Nằm bên trái */
}

.thumbnail-item-wrapper-related-posts .bookmark-button {
  right: 5px; /* Nằm bên phải */
}

.thumbnail-item-wrapper-related-posts:hover .like-button,
.thumbnail-item-wrapper-related-posts:hover .bookmark-button {
  display: block; /* Hiển thị nút khi hover */
}
.author-row {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.avatar-column {
  margin-right: 20px; /* Khoảng cách giữa cột avatar và cột thông tin */
  display: flex;
  align-items: center; /* Căn giữa ảnh avatar theo chiều dọc */
}

.info-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100px;
}
img.vgehoidshvsd {
  height: 45px;
  width: 45px;
  background: #ccc;
  border-radius: 50%;
}

.interaction-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Tạo tooltip khi di chuột vào nút like */
.slp-like-button::after {
  content: "Appreciate";
  position: absolute;
  top: -10px; /* Khoảng cách từ tooltip đến nút */
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  font-size: 14px;
  z-index: 10;
}

/* Hiệu ứng khi di chuột vào */
.slp-like-button:hover::after {
  opacity: 1;
  transform: translate(-50%, -10px); /* Hiệu ứng di chuyển nhẹ lên trên */
}

/* Tạo tooltip khi di chuột vào nút Bookmark */
.sbp-bookmark-button::after {
  content: "Bookmark";
  position: absolute;
  top: 30px; /* Khoảng cách từ tooltip đến nút */
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  font-size: 14px;
  z-index: 10;
}

/* Hiệu ứng khi di chuột vào */
.sbp-bookmark-button:hover::after {
  opacity: 1;
  transform: translate(-50%, -10px); /* Hiệu ứng di chuyển nhẹ lên trên */
}

/* Tạo tooltip khi di chuột vào nút Comment */
.comment-section::after {
  content: "Comment";
  position: absolute;
  top: 30px; /* Khoảng cách từ tooltip đến nút */
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  font-size: 14px;
  z-index: 10;
}

/* Hiệu ứng khi di chuột vào */
.comment-section:hover::after {
  opacity: 1;
  transform: translate(-50%, -10px); /* Hiệu ứng di chuyển nhẹ lên trên */
}

.content-row {
  display: flex;
  align-items: center;
  gap: 10px; /* Khoảng cách giữa các phần tử */
}

.formats,
.type {
  display: inline-block; /* Hiển thị trên cùng một dòng */
  width: auto; /* Tự động điều chỉnh chiều rộng theo nội dung */
  margin-right: 10px; /* Khoảng cách giữa các phần tử */
  vertical-align: top; /* Canh chỉnh trên cùng nếu chiều cao khác nhau */
}

.yarpp-related .yarpp-thumbnail-title {
  font-size: 14px;
}

.gallery-metadata {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  width: 94%;
}

 
div.formats {
  margin-left: 0px;
  color: #4a7d91;
  max-width: 115px;
}

.an-display-view,
div.type,
div.formats {
  text-transform: capitalize;
  font-size: 12px;
  font-weight: 400;
}

button.close-share-menu {
  color: #4a8eff;
  float: right;
  font-size: 28px;
  font-weight: bold;
  border: none;
  padding: 0px;
  margin: 0px;
  background-color: white;
}

button.close-share-menu:hover,
button.close-share-menu:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

button.share-btn {
  border: none;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  width: 45px;
  height: 24px;
}

/* Nút chia sẻ chính */
.share-button {
  position: relative; /* Giữ vị trí tương đối để sử dụng trong JavaScript */
}

#share-btn {
  font-size: 16px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: black;
}

/* Dropdown menu chia sẻ */
.share-menu {
  display: none; /* Ẩn menu mặc định */
  position: absolute; /* Đảm bảo menu hiển thị dưới nút */
  top: 10%;
  right: 90%;
  background-color: white; /* Màu nền trắng */
  border-radius: 10px;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  width: 250px;
  z-index: 1000;
}

.share-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.share-menu ul li {
  margin-bottom: 10px;
}

.share-menu ul li a {
  color: black; /* Màu chữ đen */
  text-decoration: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 5px;
  background-color: white; /* Màu nền trắng */
  transition: background-color 0.2s ease-in-out;
}

.share-menu ul li a:hover {
  background-color: #f2f2f2; /* Đổi nền khi hover */
}

.share-menu ul li a i {
  margin-right: 10px;
  font-size: 18px;
}

/* Các màu icon riêng biệt */
.facebook i {
  color: #3b5998;
} /* Màu Facebook */
.whatsapp i {
  color: #25d366;
} /* Màu WhatsApp */
.twitter i {
  color: #1da1f2;
} /* Màu Twitter */
.linkedin i {
  color: #0077b5;
} /* Màu LinkedIn */
.reddit i {
  color: #ff4500;
} /* Màu Reddit */
.telegram i {
  color: #0088cc;
} /* Màu Telegram */
.email i {
  color: #d44638;
} /* Màu Email */
.line i {
  color: #00c300;
} /* Màu Line */
.pinterest i {
  color: #bd081c;
} /* Màu Pinterest */

/* Đường viền và căn chỉnh của các icon */
i {
  width: 24px;
  text-align: center;
}

/* Nút đóng */
.close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.post-followers {
  font-size: 11px;
}

.author-row {
  display: flex;
}

.avatar-column {
  margin-right: 20px; /* Khoảng cách giữa cột avatar và cột thông tin */
  display: flex;
  align-items: center; /* Căn giữa ảnh avatar theo chiều dọc */
}

.info-column {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Căn giữa tên tác giả và followers theo chiều dọc */
}

#share-tooltip {
  position: absolute;
  visibility: hidden;
  color: white !important;
  background-color: black !important;
  font-size: 14px;
  padding: 5px;
  border-radius: 5px;
  z-index: 1000;
}

@media (min-width: 768px) {
  .yarpp-related {
    margin-top: 0px !important;
  }
}

@media (max-width: 768px) {
  .yarpp-related {
    margin-top: 60px;
  }
}

.sleft {
  margin-bottom: 10px; /* Khoảng cách giữa các biểu tượng chia sẻ */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sleft a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer; /* Thêm thuộc tính này để hiển thị hình bàn tay khi di chuột vào */
}

.social-share-container2 {
  margin-left: -50px;
  display: flex;
  margin-top: -100px;
  justify-content: flex-start; /* Căn trên */
  align-items: center; /* Căn giữa theo chiều ngang */
}

.single-share1 {
  display: flex;
  height: 20px;
}

.sleft1 {
  margin-top: 10px; /* Khoảng cách giữa các biểu tượng chia sẻ */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
}

@media (min-width: 1600px) {
  .social-share-container3 {
    display: none;
  }
}

.thumbnailszzz.column-reverse {
  left: 0;
}

@media (min-width: 480px) {
  .thumbnailszzz.column-reverse ul {
    flex-direction: column-reverse;
    align-items: flex-start; /* Căn trái khi chuyển sang column */
    left: 0;
  }
}
.thumbnailszzz li {
  display: inline-block;
  margin: 5px;
}

.thumbnailszzz img {
  border-radius: 8px;
  width: auto; /* Điều chỉnh kích thước hình thu nhỏ trong danh sách theo ý muốn */
  max-height: 60px;
  cursor: pointer;
  border: 1px solid #d7d7d7; /* Thêm đường viền mặc định cho hình thu nhỏ */
}

 

@media only screen and (min-width: 768px) {
  .ID3dmodel {
    display: none;
  }
}

.social-button {
  margin-left: 15px;
  width: 25px;
  height: 25px;
  background-size: cover;
  display: inline-block;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 15px;
  cursor: pointer; /* Add this line to make the cursor a hand pointer */
}

.facebook-btn {
  background-color: #3b5998;
}
.twitter-btn {
  background-color: #1da1f2;
}
.pinterest-btn {
  background-color: #bd081c;
}
.reddit-btn {
  background-color: #ff4500;
}
.linkedin-btn {
  background-color: #0077b5;
}
.tumblr-btn {
  background-color: #35465c;
}
.vkontakte-btn {
  background-color: #4c75a3;
}
.digg-btn {
  background-color: #000000;
}

.entry p {
  margin: 0px 0px 0px !important;
  line-height: 1.9;
}
.description-limit {
  line-height: 25px !important;
}

@media (min-width: 480px) {
  .single-share {
    opacity: 1 !important;
    height: 20px;
    float: left !important;
    margin-left: 10px !important;
  }
}

.single-share {
  display: flex;
  flex-direction: column;
  align-items: center; /* Căn chỉnh về phía giữa */
}

.capitalize-first-letter::first-letter {
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .yarpp-related .yarpp-thumbnail-title {
    font-size: 14px;
    font-weight: 200 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.image-counter {
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 10px;
  /* background-color: rgba(128, 128, 128, 0); */
  /* color: black; */
  padding: 3px 8px;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.22);
  color: #fff;
  border-radius: 10px;
}

 
.btn {
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 100%;
}
 
.table td,
.table th {
  text-transform: none;
  padding-top: 0.155rem;
  background-color: #fff;
  padding-bottom: 0.155rem;
 
}

@media (max-width: 768px) {
  .bredxdses {
    height: 340px;
  }
}

@media (min-width: 768px) {
  .bredxdses {
    display: block; /* Để ảnh được căn giữa */
    margin: 0 auto; /* Để căn giữa ảnh trong vùng chứa */
  }
}

.max-width-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1; /* Ẩn ảnh khi chưa tải */
  transition: opacity 0.5s ease-in-out;
}

/* Tạo hiệu ứng bóng loáng */
.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transform: skewX(-25deg);
  opacity: 0;
  transition:
    left 1s ease-in-out,
    opacity 0.3s ease-in-out;
}

/* Khi ảnh tải xong, chạy hiệu ứng bóng loáng */
.image-wrapper.image-loaded::after {
  left: 150%;
  opacity: 1;
}

/* Khi ảnh tải xong, làm ảnh hiện dần */
.image-wrapper.image-loaded .max-width-img {
  opacity: 1;
}

@media (min-width: 768px) {
  .id-overlay {
    position: absolute;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.22);
    color: #fff;
    padding: 10px;
    top: 0;
    border-radius: 0px 20px 0px 20px;
    opacity: 0; /* Ẩn đi ban đầu */
    transition: opacity 0.3s ease-in-out;
  }
}

.colorContainer {
  display: flex;
  align-items: center;
}

.colorItem {
  margin-right: 20px; /* Khoảng cách giữa các màu */
}

.colorCircle {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 3px;
  border: 1px solid #ccc; /* Thêm viền màu xám */
  position: relative;
}

.color-circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}
.colorCircle:hover {
  transform: scale(1.5) !important;
}
.colorCircle::after {
  font-size: 10px;
  content: "Copy hex code";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  background-color: black;
  color: white;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap; /* Thêm dòng này để ngăn văn bản xuống dòng */
}

.colorCircle.copied::after {
  content: "Copied";
}

.colorCircle:hover::after {
  opacity: 1;
}

.colorDetails {
  display: none;
}

.underline {
  width: 100%; /* Nét gạch trải dài toàn bộ chiều rộng */
  height: 1px; /* Độ dày của nét gạch */
  background-color: rgba(0, 0, 0, 0.1); /* Màu sắc nét gạch (ở đây là đen) */
  margin-bottom: 10px; /* Khoảng cách giữa nét gạch và phần mô tả */
}
 
.product_link-limi {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px !important;
}
@media (min-width: 1200px) {
  .titleone {
    text-align: justify;
    font-size: 20px;
    max-width: 380px;
    word-wrap: break-word;
    overflow: hidden;
    position: relative;
  }
}

.show-more-button,
.show-less-button {
  text-transform: uppercase;
  cursor: pointer;
  color: #4a7d91;
  text-align: right;
  margin-right: 60px;
}


.show-more-button {
  visibility: hidden;  /* Vẫn chiếm chỗ, nhưng ẩn nội dung */
  height: 21px;         /* Chiều cao cố định */
  line-height: 21px;    /* Căn giữa văn bản nếu hiện ra */
}

.show-more-button:hover {
  color: #71cd7d;
}

.show-less-button {
  display: none;
}

@media (min-width: 1200px) {
  .col-md-4 {
    max-height: 725px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
  }
}

.description-limit {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* CSS cho các hình thu nhỏ */
.thumbnailszzz {
  background: rgba(50, 50, 50, 0);
  text-align: center;
  position: absolute;
  bottom: 0px !important; /* Căn lề ra ngoài cùng bên trái và dưới cùng của phần tử cha */
}

.thumbnailszzz ul {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 0;
}

.thumbnailszzz li {
  display: inline-block;
  margin: 5px;
  
}

.thumbnailszzz li.active {
  position: relative; /* Đảm bảo phần tử cha có vị trí tương đối */
}

/* Thêm hiển thị active cho thumbnail khi được chọn */
.thumbnailszzz li.active img {
  border: 1px solid #4a8eff; /* Thay đổi hiển thị chỉ số active theo ý muốn */
}

.thumbnailszzz li.active::after {
  content: "";
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  /*width: 100%;*/
  /*height: 100%;*/
  background: rgba(0, 0, 0, 0.1); /* Màu xám nhẹ */
  pointer-events: none; /* Đảm bảo không chặn tương tác */
}

.comment-must-log-in {
  font-size: 16px;
  color: #333;
  margin: 10px auto;
  text-align: center;
}

.comment-must-log-in a {
  color: #0073e6; /* Màu của liên kết */
  text-decoration: underline; /* Gạch dưới liên kết */
}

.comment-must-log-in a:hover {
  color: #0056b3; /* Màu khi hover vào liên kết */
  text-decoration: none; /* Bỏ gạch dưới khi hover */
}