/*
 * File: components.css
 * Chứa style cho các thành phần cụ thể, có thể tái sử dụng: card, widget, tab...
 */

/* ===================================================================
 * PHIÊN BẢN 14.13: TINH CHỈNH KÍCH THƯỚC NHÃN TRẠNG THÁI
 * =================================================================== */

.story-status-on-thumb {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px; /* Giảm khoảng cách icon và chữ */
    color: white;
    padding: 3px 8px; /* Giảm padding */
    font-size: 11px;  /* Giảm kích thước chữ */
    font-weight: 600; /* Giảm độ đậm */
    line-height: 1.2;
    border-radius: 4px; /* Bo góc nhẹ */
    z-index: 10;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Màu cho truyện "Hoàn thành" (Full) */
.story-status-on-thumb.status-completed {
    background-color: #059669; /* emerald-600 */
}
.story-status-on-thumb.status-completed .status-dot {
    background-color: #a7f3d0; /* emerald-200 */
}

/* Màu cho truyện "Đang ra" */
.story-status-on-thumb.status-ongoing {
    background-color: #2563eb; /* blue-600 */
}
.story-status-on-thumb.status-ongoing .status-dot {
    background-color: #93c5fd; /* blue-300 */
    position: relative;
}

/* Hiệu ứng sóng lan tỏa cho chấm "Đang ra" */
.story-status-on-thumb.status-ongoing .status-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #93c5fd;
    animation: pulse 2s infinite cubic-bezier(0.24, 0, 0.76, 1);
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* --- Homepage Tabs & Slider --- */
.tab-button.active {
    color: #FF6F61;
    border-bottom: 2px solid #FF6F61;
}
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    transition: background-color 0.2s;
    cursor: pointer;
}
.slider-control:hover {
    background-color: white;
}

/* --- Ranking Widget --- */
.ranking-tab-btn.active {
    background-color: #FF6F61;
    color: white;
}


/* --- Recommended Widget --- */
.widget_truyenchuhub_recommended_widget {
    padding: 1.5rem !important;
    border-width: 1px !important;
}
.tch-widget-slider-compact {
    overflow: hidden;
}
.widget-story-link {
    position: relative;
    display: block;
    border-radius: 0.375rem; /* bo góc cho ảnh */
    overflow: hidden;
}
.widget-story-link .story-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}
.widget-story-link:hover .story-info-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 100%);
}
.widget-story-link .story-title-on-thumb {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    color: white;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    text-align: center;
}
.widget_truyenchuhub_recommended_widget .tch-slider-dots {
    text-align: center;
    margin-top: 1rem;
}
.widget_truyenchuhub_recommended_widget .slider-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #d1d5db; /* gray-300 */
    margin: 0 3px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}
.widget_truyenchuhub_recommended_widget .slider-dot.active {
    background-color: #FF6F61; /* primary */
    width: 16px;
    border-radius: 4px;
}

/* --- Latest Updates Widget --- */
.latest-update-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s ease-in-out;
    font-size: 14px;
}
.latest-update-row:hover {
    background-color: #f9fafb;
}
.latest-update-row .story-title {
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    margin-right: 1rem;
    display: flex;
    align-items: center;
}
.latest-update-row:hover .story-title {
    color: #FF6F61;
}

/* --- Reader Settings Panel --- */
.reader-header-chapter-select {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    border-radius: 8px; background-color: #f9fafb; border: 1px solid #f3f4f6; max-width: 100%;
}
.chapter-select-dropdown, .reader-settings-panel {
    position: absolute; top: calc(100% + 8px); right: 0; width: 320px;
    background-color: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid #f3f4f6; overflow: hidden;
}
#chapter-select-wrapper .chapter-select-dropdown { left: 50%; transform: translateX(-50%); }
#chapter-search-input { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #e5e7eb; }
.dropdown-list a:hover { background-color: #f9fafb; }
.dropdown-list a.current-chapter { background-color: #fee2e2; color: #FF6F61; font-weight: 600; }
.reader-tool-btn {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    background-color: #f9fafb; border: 1px solid #f3f4f6; border-radius: 8px; font-size: 20px;
}
.reader-tool-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.panel-header { padding: 12px; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.panel-content { padding: 16px; }
.setting-btn { padding: 8px; background-color: #f3f4f6; border-radius: 6px; }

/* --- Comment Section --- */
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; margin-left: 2rem; border-left: 2px solid #e5e7eb; padding-left: 1.5rem; }
.comment-body { padding: 1rem 0; border-bottom: 1px solid #f3f4f6; }
li.comment:last-child .comment-body { border-bottom: none; }
.comment-author { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.comment-author .avatar { border-radius: 9999px; }
.comment-author .fn { font-weight: 600; font-style: normal; color: #111827; }
.comment-meta { font-size: 12px; color: #6b7280; }
.reply a.comment-reply-link {
    display: inline-block; margin-top: 0.5rem; font-size: 13px; font-weight: 600;
    color: #FF6F61; background-color: #fee2e2; padding: 4px 10px; border-radius: 9999px;
}
#commentform p { margin-bottom: 1rem; }

/* --- Rating Box --- */
.story-rating-box {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px;
    text-align: center; min-width: 180px; background-color: #f9fafb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.rating-box-header {
    font-weight: 600; color: #1f2937; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.rating-stars-input .star-input-icon:hover { transform: scale(1.1); transition: transform 0.2s; }
.rating-result { font-style: italic; }
/* --- Reader Page Components --- */
.reader-header-story-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1f2937;
    font-weight: 600;
}
.reader-header-story-link:hover .story-title {
    color: #FF6F61;
}
.story-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}
.story-thumb-placeholder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    border-radius: 4px;
    font-size: 24px;
    color: #9ca3af;
}
.reader-header-chapter-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    max-width: 100%;
}
.chapter-select-dropdown, .reader-settings-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid #f3f4f6;
    overflow: hidden;
}
#chapter-select-wrapper .chapter-select-dropdown {
    left: 50%;
    transform: translateX(-50%);
}
.dropdown-header { 
    padding: 8px; 
}
#chapter-search-input {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}
.dropdown-list {
    max-height: 300px;
    overflow-y: auto;
}
.dropdown-list a {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
}
.dropdown-list a:hover { 
    background-color: #f9fafb; 
}
.dropdown-list a.current-chapter {
    background-color: #fee2e2;
    color: #FF6F61;
    font-weight: 600;
}
.reader-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    font-size: 20px;
}
.reader-tool-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.panel-header {
    padding: 12px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}
.panel-content { 
    padding: 16px; 
}
.setting-group { }
.setting-label { 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.setting-btn {
    padding: 8px;
    background-color: #f3f4f6;
    border-radius: 6px;
}
.setting-color-btn {
    height: 32px;
    border-radius: 6px;
    border: 2px solid transparent;
}
.setting-color-btn[data-value="light"] { background-color: #ffffff; border-color: #e5e7eb; }
.setting-color-btn[data-value="sepia"] { background-color: #fbf5e8; }
.setting-color-btn[data-value="dark"] { background-color: #1a202c; }
#chapter-content-wrapper, #chapter-content-wrapper > article {
    font-size: var(--reader-font-size);
}

/* ===================================================================
 * PHIÊN BẢN 17.5: BỔ SUNG CSS CHO NHÃN THỂ LOẠI (STORY TAG)
 * =================================================================== */
.story-tag {
    display: inline-block;
    background-color: #f3f4f6; /* gray-100 */
    color: #4b5563; /* gray-600 */
    padding: 4px 12px;
    border-radius: 9999px; /* rounded-full */
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e5e7eb; /* gray-200 */
}

.story-tag.status-completed {
    background-color: #dcfce7; /* green-100 */
    color: #166534; /* green-800 */
    border-color: #bbf7d0; /* green-200 */
}

/* Bổ sung style cho trạng thái "Đang Ra" (status-updating) */
.story-tag.status-updating {
    background-color: #dbeafe; /* blue-100 */
    color: #1e40af; /* blue-800 */
    border-color: #bfdbfe; /* blue-200 */
}
/* ===================================================================
 * PHIÊN BẢN 14.12: TỐI ƯU NHÃN TRẠNG THÁI TRÊN MOBILE
 * =================================================================== */

@media (max-width: 767px) {
    .story-status-on-thumb {
        padding: 3px 8px;       /* Giảm khoảng đệm */
        font-size: 10px;        /* Giảm kích thước chữ */
        gap: 4px;               /* Giảm khoảng cách giữa icon và chữ */
        top: 6px;               /* Điều chỉnh lại vị trí một chút */
        left: 6px;
    }

    .status-dot {
        width: 6px;             /* Chấm tròn cũng nhỏ lại */
        height: 6px;
    }
}

/* ===================================================================
 * PHIÊN BẢN 27.5: SỬA LỖI HIỂN THỊ LƯỢT XEM TRÊN MOBILE
 * =================================================================== */

/* Widget wrapper */
.widget_tch_three_column_widget {
    padding: 1.5rem !important;
    background-color: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    border: none !important;
}

/* Container chính */
.three-column-widget-container {
    display: grid;
    grid-template-columns: 1.5fr 3fr 1.5fr;
    gap: 1.5rem;
}

/* Từng cột */
.widget-column {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    min-width: 0; 
}
.widget-column.wide {
    padding: 0 1.5rem;
    border-left: 1px solid #f3f4f6;
    border-right: 1px solid #f3f4f6;
}

/* Tiêu đề cột */
.widget-column-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #111827;
}
.widget-column-title i {
    color: #FF6F61;
    font-size: 1.2em;
}

/* --- Hai cột bên --- */
.ranked-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ranked-list-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0; }
.rank-number { font-size: 1rem; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; color: #d1d5db; min-width: 1.5rem; text-align: center; line-height: 1.4; }
.ranked-item-info { flex-grow: 1; min-width: 0; }
.ranked-item-title a { font-weight: 600; color: #374151; transition: color 0.2s; line-height: 1.4; }
.ranked-item-title a:hover { color: #FF6F61; }
.ranked-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: 12px; color: #6b7280; }
.ranked-item-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.ranked-item-meta .rating-display i { color: #f59e0b; }
.ranked-item-thumb { width: 40px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid #f3f4f6; flex-shrink: 0; }
.ranked-list-item.is-top-1 { border-bottom: 1px dashed #e5e7eb !important; padding-bottom: 1rem; margin-bottom: 0.5rem; }
.ranked-list-item.is-top-1 .rank-number { color: #ef4444; font-size: 1.125rem; }
.ranked-list-item.is-top-1 .ranked-item-title a { font-size: 15px; color: #111827; }
.ranked-list-item.is-top-1 .ranked-item-meta { margin-top: 6px; font-size: 12px; color: #4b5563; }
.ranked-list-item:not(.is-top-1) { padding: 0.6rem 0; border-bottom: none; }
.ranked-list-item:not(.is-top-1) .ranked-item-info { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ranked-list-item:not(.is-top-1) .ranked-item-title a { font-size: 14px; }
.ranked-list-item:not(.is-top-1) .ranked-item-meta { margin-top: 0; flex-shrink: 0; }

/* --- Cột giữa --- */
.latest-update-row-widget { display: block; }
.latest-update-row-widget:not(:last-child) { padding-bottom: 0.5rem; border-bottom: 1px dashed #e5e7eb; margin-bottom: 0.5rem; }
.latest-update-row-widget .update-main-link { display: block; text-decoration: none; }
.latest-update-row-widget .update-main-link:hover .story-title-text { color: #FF6F61; }
.latest-update-row-widget .update-story-title { display: flex; align-items: center; gap: 0.25rem; color: #374151; font-weight: 500; font-size: 14px; transition: color 0.2s; }
.latest-update-row-widget .update-story-title i { font-size: 1.2em; color: #9ca3af; flex-shrink: 0; }
.latest-update-row-widget .story-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; }
.latest-update-row-widget .story-genres-inline { display: inline-flex; align-items: center; margin-left: auto; flex-shrink: 0; padding-left: 0.5rem; font-size: 12px; color: #9ca3af; }
.latest-update-row-widget .genre-separator { font-size: 10px; color: #d1d5db; margin: 0 0.2rem; }
.latest-update-row-widget .chapter-meta-group { display: flex; justify-content: space-between; align-items: baseline; padding-left: 1.5rem; gap: 1rem; margin-top: 0.25rem; }
.latest-update-row-widget .update-chapter-title { color: #6b7280; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.latest-update-row-widget .time-ago { color: #9ca3af; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

/* --- Responsive --- */
@media (max-width: 1023px) {
    .three-column-widget-container { grid-template-columns: 1fr; gap: 2rem; }
    .widget-column.wide { padding: 0; border: none; }
}
@media (max-width: 767px) {
    /* SỬA LỖI: Chỉ ẩn đi phần sao đánh giá, giữ lại lượt xem */
    .widget_tch_three_column_widget .ranked-list-item:not(.is-top-1) .rating-display {
        display: none;
    }
    .widget_tch_three_column_widget .ranked-list-item.is-top-1 .ranked-item-thumb {
        width: 40px;
        height: 60px;
    }
    .widget_tch_three_column_widget .story-genres-inline {
        display: none;
    }
}
/* ===================================================================
 * PHIÊN BẢN 31.0: CSS HOÀN THIỆN CHO WIDGET BẢNG XẾP HẠNG
 * =================================================================== */

/* Tiêu đề widget với icon */
.widget_truyenchuhub_ranking_widget .widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.widget_truyenchuhub_ranking_widget .widget-title i {
    font-size: 1.2em;
    color: #FF6F61;
}

/* Định dạng cho mỗi mục trong danh sách */
.ranking-widget-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; /* 12px */
    padding-bottom: 0.75rem; /* 12px */
}
.ranking-widget-item:not(:last-child) {
    border-bottom: 1px dashed #e5e7eb;
    margin-bottom: 0.75rem; /* 12px */
}

/* Khung chứa ảnh thumb */
.ranking-widget-thumb {
    width: 44px; 
    flex-shrink: 0;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    overflow: hidden;
}

/* Số thứ tự */
.ranking-widget-content .rank-number {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Roboto Condensed', sans-serif;
    color: #d1d5db; 
    line-height: 1;
    min-width: 2.25rem;
    text-align: center;
    margin-top: 4px;
}

/* Tô màu cho top 1, 2, 3 */
.widget_truyenchuhub_ranking_widget .rank-number.is-top-1 { color: #ef4444 !important; }
.widget_truyenchuhub_ranking_widget .rank-number.is-top-2 { color: #f97316 !important; }
.widget_truyenchuhub_ranking_widget .rank-number.is-top-3 { color: #f59e0b !important; }

/* Tên truyện */
.ranking-widget-story-title a {
    font-weight: 600;
}

/* Dòng meta (sao + view) */
.ranking-widget-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.ranking-widget-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ranking-widget-meta .rating-display i {
    color: #f59e0b;
}

/* Dòng thể loại */
.ranking-widget-genres {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ===================================================================
 * PHIÊN BẢN 33.2: THÊM CUỘN NGANG CHO TAB THỂ LOẠI
 * =================================================================== */

.category-tabs-nav {
    overflow-x: auto;   /* Bật cuộn ngang khi nội dung tràn ra */
    flex-wrap: nowrap;  /* Ép các tab luôn nằm trên một hàng */
    -ms-overflow-style: none;  /* Ẩn thanh cuộn trên IE và Edge */
    scrollbar-width: none;     /* Ẩn thanh cuộn trên Firefox */
}

/* Ẩn thanh cuộn trên các trình duyệt Webkit (Chrome, Safari, Opera...) */
.category-tabs-nav::-webkit-scrollbar {
    display: none;
}

/* Đảm bảo các nút bấm không bị co lại khi không đủ không gian */
.category-tabs-nav .category-tab-button {
    flex-shrink: 0;
}
/* Thêm hiệu ứng con trỏ khi kéo-thả tab */
.category-tabs-nav {
    cursor: grab;
    cursor: -webkit-grab;
}
.category-tabs-nav.is-grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    user-select: none; /* Ngăn bôi đen chữ khi kéo */
}
/* ===================================================================
 * PHIÊN BẢN 33.4: CSS CHO WIDGET TAB THỂ LOẠI
 * =================================================================== */

.category-tab-button {
    border: none;
    background-color: transparent;
    padding: 0.75rem 1.25rem; /* Tăng padding cho đẹp hơn */
    font-size: 15px;
    font-weight: 600;
    color: #4b5563; /* Màu chữ mặc định (gray-600) */
    position: relative;
    transition: color 0.3s ease;
    border-bottom: 3px solid transparent; /* Đường viền dưới ẩn */
    margin-bottom: -2px; /* Dịch lên để che đường viền của container */
}

.category-tab-button:hover {
    color: #FF6F61; /* Đổi màu khi di chuột qua */
}

.category-tab-button.active {
    color: #FF6F61; /* Màu chữ của tab đang được chọn */
    border-bottom-color: #FF6F61; /* Hiện đường viền dưới */
}
/* ===================================================================
 * PHIÊN BẢN 34.6: HOÀN THIỆN GIAO DIỆN SLIDER
 * =================================================================== */

.tch-hero-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background-color: #e5e7eb;
}

.hero-slider-track,
.hero-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slide-item {
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.hero-slide-item.active {
    opacity: 1;
    z-index: 2;
}

.hero-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
}

.hero-slide-info {
    position: absolute;
    z-index: 3;
    bottom: 10%;
    left: 5%;
    max-width: 55%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* SỬA LỖI: Tăng độ ưu tiên của selector và tăng kích thước chữ */
.tch-hero-slider .slide-story-title {
    font-size: 2.5rem; /* 40px - Tăng kích thước */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #ffffff; /* Đảm bảo màu trắng */
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.slide-story-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

.slide-story-meta .meta-status {
    background-color: rgba(255,255,255,0.15);
    padding: 3px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.25);
}

.slide-read-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #FF6F61;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}
.slide-read-button:hover {
    background-color: #e66054;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* SỬA: Đưa thanh điều hướng xuống thấp hơn và làm nhỏ lại */
.hero-slider-controls {
    position: absolute;
    bottom: 5%;
    right: 5%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slider-dots-container {
    display: flex;
    gap: 8px;
    background-color: rgba(0,0,0,0.3);
    padding: 6px 12px; /* Làm nhỏ lại */
    border-radius: 9999px;
    backdrop-filter: blur(5px);
}
.slider-dots-container .slider-dot {
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background-color: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.slider-dots-container .slider-dot.active {
    background-color: #fff;
}

.slider-control-arrow {
    position: static;
    width: 36px; /* Nhỏ lại */
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.tch-hero-slider:hover .slider-control-arrow {
    opacity: 1;
    visibility: visible;
}
.slider-control-arrow:hover {
    background-color: rgba(255,255,255,0.2);
}

/* Responsive cho mobile */
@media (max-width: 767px) {
    /* SỬA: Canh chỉnh lại toàn bộ khối thông tin */
    .hero-slide-info {
        left: 1rem;      /* Cách lề trái */
        right: auto;     /* Bỏ canh lề phải để không bị kéo giãn */
        bottom: 15%;     /* Cách lề dưới */
        top: auto;       /* Bỏ canh lề trên */
        transform: none; /* Bỏ canh giữa theo chiều dọc */
        max-width: 60%;  /* Giới hạn chiều rộng của khối */
        text-align: left;    /* Canh chữ về bên trái */
        align-items: flex-start; /* Canh nút bấm về bên trái */
    }

    /* SỬA: Giảm kích thước chữ của tiêu đề */
    .tch-hero-slider .slide-story-title {
        font-size: 1rem; /* 24px - Giảm đáng kể */
        margin-bottom: 0.5rem; /* Giảm khoảng cách */
    }

    /* SỬA: Giảm kích thước chữ của meta */
    .slide-story-meta {
        font-size: 8px;
        margin-bottom: 0.5rem;
    }

    /* SỬA: Giảm kích thước nút bấm */
    .slide-read-button {
        padding: 4px 8px;
        font-size: 8px;
    }

    /* Giữ nguyên vị trí thanh điều hướng */
    .hero-slider-controls {
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
    .slider-control-arrow {
        display: none;
    }
}
/* ===================================================================
 * PHIÊN BẢN 37.6: SỬA LỖI HIỆU ỨNG "ẢNH MỜ"
 * =================================================================== */

.widget_tch_btv_slider_widget .widget-title {
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.bookshelf-carousel-container {
    position: relative;
    height: 250px;
    perspective: 1500px;
}

.bookshelf-display {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-slot {
    position: absolute;
    cursor: pointer;
    /* SỬA LỖI: Chỉ định rõ các thuộc tính cần có hiệu ứng chuyển động */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility: hidden; /* Mặc định sẽ ẩn hoàn toàn các slide */
}

/* Chỉ những slide có class mới được hiện ra */
.book-slot.left,
.book-slot.center,
.book-slot.right {
    visibility: visible;
}

.book-slot.center {
    width: 140px;
    height: 210px;
    z-index: 30;
    transform: translateX(-50%) translateY(-50%) scale(1);
    left: 50%;
    top: 50%;
    opacity: 1;
}

.book-slot.left {
    width: 110px;
    height: 165px;
    z-index: 20;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    left: 20%;
    top: 50%;
    opacity: 0.6;
}

.book-slot.right {
    width: 110px;
    height: 165px;
    z-index: 20;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    left: 80%;
    top: 50%;
    opacity: 0.6;
}

.book-cover {
    width: 100%;
    height: 100%;
    border-radius: 3px 6px 6px 3px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    /* SỬA: Thay đổi màu gáy sách */
    border-left: 5px solid #495057; /* Màu xám tối */
}

.book-slot.center .book-cover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* Hiệu ứng khi di chuột vẫn được giữ lại và mượt mà */
.book-slot.center:hover {
    transform: translateX(-50%) translateY(-55%) scale(1.05) !important;
}
.book-slot.left:hover,
.book-slot.right:hover {
    transform: translateX(-50%) translateY(-50%) scale(0.85) !important;
    opacity: 1 !important;
}

.bookshelf-slide-indicators {
    position: relative;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.bookshelf-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bookshelf-indicator.active {
    background: #FF6F61;
    transform: scale(1.2);
}
/* ===================================================================
 * PHIÊN BẢN 40.0: CSS CHO WIDGET BÀI VIẾT MỚI
 * =================================================================== */

.tch-latest-posts-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.latest-post-item {
    padding: 0.65rem 0;
}

.latest-post-item:not(:last-child) {
    border-bottom: 1px dashed #e5e7eb; /* Đường kẻ đứt */
}

.latest-post-item a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151; /* Màu chữ mặc định */
    transition: color 0.2s;
}

.latest-post-item a:hover {
    color: #FF6F61; /* Màu chính của theme khi hover */
}

.latest-post-item i {
    font-size: 1.1em;
    flex-shrink: 0;
}
/* ===================================================================
 * PHIÊN BẢN 40.1: CSS CHO TIÊU ĐỀ WIDGET BÀI VIẾT MỚI
 * =================================================================== */

.widget_tch_latest_posts_widget .widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Tạo khoảng cách giữa icon và chữ */
    /* THÊM CÁC DÒNG SAU: */
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
/* ===================================================================
 * PHIÊN BẢN 39.2: THÊM LINE NGĂN CÁCH CHO TIÊU ĐỀ WIDGET BTV
 * =================================================================== */

.widget_tch_btv_slider_widget .widget-title {
    padding-bottom: 12px; /* Tạo khoảng cách giữa chữ và đường kẻ */
    margin-bottom: 20px; /* Tạo khoảng cách giữa đường kẻ và slider */
    border-bottom: 1px solid #e5e7eb; /* Đường kẻ ngang, mỏng, màu xám nhạt */
}
/* ===================================================================
 * PHIÊN BẢN 41.0: CSS CHO WIDGET TRANG TÙY CHỌN
 * =================================================================== */

.widget_tch_selected_pages_widget .widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.widget_tch_selected_pages_widget .widget-title i {
    font-size: 1.2em;
    line-height: 1;
}

.tch-selected-pages-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selected-page-item {
    padding: 0.65rem 0;
}

.selected-page-item:not(:last-child) {
    border-bottom: 1px dashed #e5e7eb;
}

.selected-page-item a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
    transition: color 0.2s;
}

.selected-page-item a:hover {
    color: #FF6F61;
}

.selected-page-item i {
    font-size: 1.1em;
    flex-shrink: 0;
}
/* ===================================================================
 * PHIÊN BẢN 46.0: SỬA LỖI TÊN TRUYỆN DÀI TRONG STORY CARD
 * =================================================================== */

.story-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; /* Bắt buộc phải có để text-overflow hoạt động */
}
/* ===================================================================
 * PHIÊN BẢN 42.1: SỬA LỖI CHO WIDGET TRUYỆN NGẪU NHIÊN
 * =================================================================== */

.tch-random-story-grid {
    display: grid;
    gap: 1.5rem; /* 24px */
    
    /* Mặc định trên mobile */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Áp dụng cho màn hình nhỏ (sm) trở lên */
@media (min-width: 640px) {
    .tch-random-story-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Áp dụng cho màn hình vừa (md) trở lên */
@media (min-width: 768px) {
    .tch-random-story-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Áp dụng cho màn hình lớn (lg) trở lên */
@media (min-width: 1024px) {
    .tch-random-story-grid {
        /* Đọc số cột từ biến --story-grid-columns đã được cài đặt trong widget */
        grid-template-columns: repeat(var(--story-grid-columns, 10), minmax(0, 1fr));
    }
}