.story-banner {
  background-size: cover;
  background-position: center;
  position: relative;
}

.story-banner::before {
  background-color: rgb(253, 127, 169);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.story-banner > * {
  position: relative;
  z-index: 2;
}

/* Style cho nút chương truyện */
.chapter-btn {
    transition: all 0.2s ease-in-out;
}

.chapter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.comment-container .actions button {
    transition: color 0.2s ease-in-out;
}

.like-btn.text-pink-600 {
    font-weight: 700; /* Làm chữ "Thích" đậm hơn khi đã like */
}

#star-rating .star {
    cursor: pointer;
    transition: color 0.2s;
}
#star-rating .star.hover,
#star-rating .star.selected {
    color: #facc15; /* Màu vàng của Tailwind */
}

.story-banner::before {
  background-image: linear-gradient(to right, #fc7da3, #e9dcff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0.75rem; /* 12px */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Tạo kiểu cho khung lượt xem */
#story-views-box {
  position: absolute;
  bottom: 1.5rem; /* 24px */
  right: 1.5rem;  /* 24px */
  
  /* Hiệu ứng trong suốt (glassmorphism) */
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* Viền mềm mại */
  border-radius: 0.75rem; /* 12px */
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  padding: 1rem; /* 16px */
  text-align: center;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.genre-btn {
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid #e2e8f0; /* slate-200 */
    background-color: transparent;
}

.dark .genre-btn {
    border: 1px solid #475569; /* slate-600 */
}

.genre-btn.selected {
    background-color: #ec4899; /* pink-500 */
    color: white;
    border-color: #ec4899; /* pink-500 */
}

.genre-btn.add-new {
    border-style: dashed;
}

.dark .genre-btn:not(.selected):hover {
    background-color: #334155; /* slate-700 */
}

.light .genre-btn:not(.selected):hover {
    background-color: #f1f5f9; /* slate-100 */
}

.chapter-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Tạo layout grid linh hoạt */
    gap: 0.5rem; /* Khoảng cách giữa các nút */
}

.chapter-button {
    text-align: center;
    font-size: 0.9rem;
}

.new-tag {
    transform: translate(25%, -25%); /* Điều chỉnh vị trí thẻ new */
}

/* --- Favorite Button Styles --- */
#favorite-btn.liked i {
    font-weight: 900; /* Chuyển sang icon solid */
    color: #ec4899; /* Tailwind pink-500 */
}

#favorite-btn.liked {
    animation: heart-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heart-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.synopsis-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

@media (max-width: 767px) { /* Applies to screens smaller than 768px (Tailwind's 'md' breakpoint) */
    #story-views-box {
        /* 1. Thay đổi từ định vị tuyệt đối sang tĩnh để nó nằm trong luồng bình thường */
        position: static; 
        
        /* 2. Dùng 'order' để đẩy nó xuống cuối trong flex container */
        order: 99; /* Một số lớn để đảm bảo nó luôn ở cuối */

        /* 3. Căn giữa và tạo khoảng cách với nội dung bên trên */
        margin: 1.5rem auto 0 auto; /* Thêm 24px lề trên và tự động căn giữa ngang */
        
        /* 4. Đặt chiều rộng tự động theo nội dung */
        width: fit-content; 
    }
}