/* CSS cho nút Bookmark */
.sbp-bookmark-button {
  display: inline-flex;
  align-items: center; /* Căn giữa icon và số đếm theo chiều dọc */
  padding: 5px;
  padding-left: 8px;
  background-color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.sbp-bookmark-button.bookmarked {
  color: #ff0;
}

.bookmark-count {
  font-size: 14px;
  margin-left: 5px; /* Tạo khoảng cách giữa icon và số đếm */
  color: #555;
}

.sbp-bookmark-list {
  margin-left: -10px; /* bù lại gutter trái */
}

.sbp-bookmark-item {
  box-sizing: border-box; /* 🔥 CHỐT: quan trọng nhất */
  width: calc(25% - 10px); /* 4 cột + gutter */
  margin-left: 10px;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .sbp-bookmark-item {
    width: 100%; /* 1 cột mobile */
  }
}

.sbp-bookmark-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.sbp-bookmark-item p {
  margin: 0;
}

.bookmark-gallery {
  margin-top: -10px;
}

.gallery-price {
  margin-left: 5px;
  color: #4a7d91;
  border-radius: 3px;
  text-align: right;
  font-size: 12px;
  height: 22px;
  text-align: right;
}

.gallery-metadata {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0px;
}

.gallery-formats {
  text-transform: capitalize;
  font-size: 12px;
  color: #4a7d91;
  font-weight: 400;
  text-align: left;
}

.bookmark-title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .sbp-bookmark-item {
    text-align: center;
    border-radius: 5px;
    width: 170px;
  }
}