/* CSS cho nút Like */
.slp-like-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; /* Sử dụng kích thước tương tự như nút Bookmark */
}

.slp-like-button.liked {
  color: #000;
}

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

/* Định dạng cho phần chứa nút Like */
.like-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Định dạng cho nền tối của popup */
.slp-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Định dạng cho nội dung popup */
.slp-popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 100%;
}

.slp-popup-content p {
  font-size: 16px;
  margin-bottom: 20px;
}

.slp-popup-content button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
}

#slp-login-btn {
  background-color: #007bff;
  color: #fff;
}

#slp-close-btn {
  background-color: #ccc;
}

.like-modal {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 4px;
  display: none;
  z-index: 1000;
}

.like-modal .like-user {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.like-modal .like-user span {
  font-size: 14px;
  color: #333;
}

.like-modal .like-user img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  object-fit: cover; /* Đảm bảo ảnh được cắt vừa khung mà không bị méo */
}