.rank-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  margin-bottom: 15px;
}

.rank-title {
  font-size: 20px;
  margin-bottom: 15px;
}

.rank-story-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rank-story-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.rank-story-item:last-child {
  border-bottom: none;
}

.rank-num {
  width: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #555;
}

.rank-story-info {
  flex: 1;
  margin-left: 10px;
}

.rank-story-title {
  font-size: 16px;
  text-decoration: none;
  color: #1a0dab;
  cursor: pointer;           
  transition: color 0.2s ease;
}

.rank-story-title:hover {
  color: #d93025;
  text-decoration: underline;
}

.rank-more-link {
  margin-top: 15px;
  text-align: center;
}

.rank-view-more {
  display: inline-block;
  padding: 8px 14px;
  background-color: #f5f5f5;
  color: #007bff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 15px;
  transition: background-color 0.2s, color 0.2s;
}

.rank-view-more:hover {
  background-color: #e2e6ea;
  color: #0056b3;
}

#newupdate_title {
    font-size: 22px;
    font-weight: bold;
}

.rank-story-desc {
  font-size: 13px;
  color: #555;
  margin-top: 5px;
}

.rank-story-thumb img {
  border-radius: 4px;
  max-height: 60px;
}

        .swiper-pagination-bullet {
            width: 16px;
            height: 16px;
            margin: 0 8px; /* khoảng cách giữa các chấm */
            background-color: #ccc;
            }

            .swiper-pagination-bullet-active {
            background-color: #007bff;
            }

        .category-rating-text {
            margin-top: -10px;
            margin-bottom: 5px;
            margin-left: 12px;
        }

        .star1 {
            color: gold; /* hoặc #FFD700 */
            font-size: 16px; /* chỉnh nếu muốn lớn hơn */
        }

        .story-detail-box {
            border: 1px solid #ddd;
            padding: 5px 15px;
            margin-top: -6px;
            background-color: #fafafa;
            border-radius: 8px;
            max-width: 600px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            font-family: Arial, sans-serif;
        }

        .story-detail-box h4 {
            margin: 0 0 12px 0;
            font-size: 20px;
            color: #333;
        }

        .story-detail-box .review-text {
        font-size: 15px;
        line-height: 1.5;
        color: #555;
        max-height: 6em; /* khoảng 3 dòng */
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 5px; /* cách nút đọc ngay 5px */
        margin-top: -4px;
        }

        .story-detail-box .read-now-btn {
        display: inline-block;
        background-color: #0056b3;
        color: #ffffff;
        text-decoration: none;
        padding: 6px 12px; /* nhỏ lại */
        border-radius: 4px;
        font-weight: 600;
        font-size: 0.8rem; /* nhỏ hơn */
        transition: background-color 0.3s ease;
        white-space: nowrap;
        margin-left: 0; /* canh trái */
        }

        .story-detail-box .read-now-btn:hover {
        background-color: #0056b3;
        }



        .content {
            text-align: center; /* Canh giữa hình ảnh */
            padding: 20px;
        }

        .content img {
            width: 100%; /* Chiều rộng 100% của div cha */
            max-width: 1500px; /* Đặt kích thước tối đa */
            height: 370px; /* Tự động thay đổi chiều cao theo tỉ lệ */
        }

        .section-header {
            display: flex; /* Bố cục ngang */
            justify-content: space-between; /* Tiêu đề ở bên trái, "Xem thêm" ở bên phải */
            align-items: center; /* Căn giữa theo chiều dọc */
            margin-bottom: 10px; /* Khoảng cách dưới */
            padding-left: 10px;
        }

        .section-title {
            font-size: 24px;
            font-weight: bold;
            margin: 0;
        }

        .read-more {
            font-size: 14px;
            color: #007bff; /* Màu xanh nhấn mạnh */
            text-decoration: none;
        }

        .read-more:hover {
            text-decoration: underline; /* Hiệu ứng hover */
        }

        /* CSS cho thẻ thông báo */
        #notification {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 17%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 600px;
            height: auto;
            background-color: #f1c40f;
            padding: 0;
            margin: 0;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
            z-index: 1000;
        }

        #notification p {
            flex: 1;
            font-size: 16px;
            color: #333;
            margin: 0;
            padding: 0;
            margin-right: 15px;
        }

        #notification button {
            position: absolute;
            top: 0px;
            right: 1px;
            background-color: transparent;
            border: none;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            color: #333;
        }
        /* Ẩn tooltip ban đầu */
        .search-advanced-link .tooltip {
            position: absolute;
            top: 30px; /* Khoảng cách từ biểu tượng */
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            white-space: nowrap;
            font-size: 14px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            z-index: 1009;
        }

        /* Hiển thị tooltip khi hover hoặc chạm vào biểu tượng */
        .search-advanced-link:hover .tooltip,
        .search-advanced-link:focus-within .tooltip {
            opacity: 1;
            visibility: visible;
        }

        .story-image {
            position: relative;
        }

        .new-star {
            position: absolute;
            top: 1px;
        }

        .new-star1 {
            position: absolute;
        }

        .star-icon {
            color: red;
        }

        body {
            overflow-x: hidden; /* Ngăn chặn cuộn ngang */
            touch-action: pan-y; /* Chỉ cho phép cuộn dọc */
        }

        .carousel-section {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        /* Định dạng chung cho các phần carousel */
        .carousel-container {
            width: 100%; /* Đảm bảo phần tử chiếm toàn bộ chiều rộng */
            margin: 0 auto; /* Giữa phần tử trong trang */
        }

        /* Định dạng cho carousel-slider */
        .carousel-slider {
            display: flex; /* Sử dụng flexbox để xếp hàng các phần tử */
            flex-wrap: nowrap; /* Không cho phép các phần tử xuống dòng */
        }

        /* Định dạng cho các phần tử carousel-item */
        .carousel-item {
            position: relative; /* Để phần tử con có thể dùng position: absolute */
            overflow: hidden; /* Đảm bảo nội dung thừa không hiển thị ra ngoài */
            flex: 0 0 auto; /* Đảm bảo không co lại và không giãn ra */
            margin: 0; /* Đặt khoảng cách giữa các item thành 0 */
            /* Kích thước có thể được điều chỉnh dưới đây nếu cần */
            width: calc(100% / 3); /* Hoặc điều chỉnh theo nhu cầu cụ thể */
        }

        /* Định dạng cho hình ảnh */
        .carousel-item img {
            width: 100%; 
            height: 100%;
            object-fit: cover;
            border-radius: 6px;
        }

        /* Phần card-overlay đè lên ảnh */
        .card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6); /* Nền mờ */
            color: white;
            opacity: 0; /* Ẩn đi ban đầu */
            transition: opacity 0.3s ease; /* Hiệu ứng mượt */
            display: flex;
            align-items: flex-end; /* Đẩy nội dung xuống đáy */
            z-index: 1001;
        }

        /* Nội dung card */
        .card-content {
            padding: 10px;
            width: 100%;
        }

        /* Thẻ tag nhỏ */
        .tag {
            display: inline-block;
            background-color: #ff5e57;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            margin-bottom: 5px;
        }

        /* Hover trên desktop: Hiển thị nội dung card */
        .carousel-item:hover .card-overlay {
            opacity: 1;
            cursor: pointer;
        }

        /* CSS hỗ trợ trên mobile bằng click */
        .carousel-item.active .card-overlay {
            opacity: 1;
        }

        .carousel-item.active {
            border: 3px solid #0984e3;
            box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
            transition: border 0.3s, box-shadow 0.3s;
        }

        /* Định dạng cho các thẻ tag */
        .tags {
            position: fixed; /* Định vị tuyệt đối để có thể đặt chính xác */
            top: 4px; /* Khoảng cách từ trên xuống */
            padding: 0px; /* Khoảng cách bên trong cho tags */
            border-radius: 5px; /* Bo góc cho tags */
            z-index: 10; /* Đảm bảo các tags nằm trên hình ảnh */
            display: flex;
        }

        .tags span:empty {
            display: none; /* Ẩn span khi không có nội dung */
        }

        .tags span {
            display: inline-flex; /* Đảm bảo các thẻ span không tự động xuống dòng */
            align-items: center; /* Căn giữa nội dung trong mỗi span */
        }

        .vip-tag, .status-tag, .rating-tag {
            display: inline-block; /* Hiển thị các tag trên cùng một hàng */
            margin: 0 2px; /* Khoảng cách giữa các tag */
            font-size: 11px;
            padding:2px;
            border-radius: 4px;
        }

        .vip-tag {
            background-color: #ffe08a;
            color: #000;
        }

        .status-tag {
            background-color: lightblue; 
            color: #000; 
        }

        .rating-tag {
            color: #000;
            background-color: #FFAA66;
        }

        /* Định dạng cho các chỉ số tròn */
        .carousel-indicators {
            margin-top:10px;
            margin-left:600px;
        }

        .indicator {
            width: 10px; /* Chiều rộng của chỉ số */
            height: 10px; /* Chiều cao của chỉ số */
            background-color: #ccc; /* Màu nền mặc định cho chỉ số */
            border-radius: 50%; /* Làm tròn các góc */
            margin: 0 5px; /* Khoảng cách giữa các chỉ số */
            cursor: pointer; /* Hiển thị con trỏ khi di chuột vào */
            transition: background-color 0.3s; /* Hiệu ứng chuyển màu khi hover */
        }

        .indicator.active {
            background-color: #FF0000	;
            opacity: 1; /* Độ sáng nổi bật khi được chọn */
        }

        /* CSS cho thanh tìm kiếm */
        #search-form {
            max-width: 100%;
            margin: 10px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .search-box {
            display: flex;
            align-items: center;
            width: 75%;
            max-width: 500px;
            background: #fff;
            border: 1px solid #ddd;
            box-shadow: 0 4px 8px rgba(0,0,0,0.06);
            border-radius: 28px;
            padding: 10px 16px;
            transition: box-shadow 0.3s ease;
        }

        .search-box:focus-within {
            box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
            border-color: #1e88e5;
        }

        .search-icon {
            margin-right: 10px;
            font-size: 18px;
            color: #888;
        }

        .search-box input[type="text"] {
            border: none;
            outline: none;
            font-size: 16px;
            width: 100%;
            background: transparent;
            color: #333;
        }

        .search-box input::placeholder {
            color: #aaa;
        }


        /* CSS cho kết quả tìm kiếm */
        #search-results {
            margin-top: 20px;
            max-height: 300px; /* Chiều cao tối đa cho khối chứa kết quả */
            overflow-y: auto; /* Bật thanh cuộn dọc nếu chiều cao vượt quá 300px */
        }

        .story-list {
            list-style: none;
            padding: 0;
        }

        .story-item {
            display: flex;
            align-items: flex-start;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #fff;
            position:relative;
        }

        .story-cover {
            width: 80px; /* Chiều rộng bìa truyện */
            height: auto; /* Chiều cao tự động */
            margin-right: 10px;
            border-radius: 4px;
        }

        .story-details {
            flex-grow: 1; /* Giúp khối chi tiết chiếm phần còn lại */
        }

        .story-title {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .vip-label {
            background-color: gold;
            padding: 2px 5px;
            border-radius: 4px;
            margin-left: 5px;
        }

        .complete-label {
            background-color: lightgreen;
            padding: 2px 5px;
            border-radius: 4px;
            margin-left: 5px;
        }

        .story-author, .latest-chapter {
            font-size: 14px;
            color: #666;
        }

        .success-message {
            background-color: #dff0d8;
            color: #3c763d;
            padding: 15px;
            position: fixed; /* Vị trí cố định */
            top: 65px; /* Khoảng cách từ trên */
            left: 75%; /* Canh giữa ngang */
            transform: translateX(-50%); /* Đặt chính giữa ngang */
            border-radius: 5px;
            z-index: 9999; /* Đảm bảo thông báo nổi lên trên */
            font-size: 16px;
            border: 1px solid #d6e9c6;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            opacity: 1;
            visibility: visible;
            transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; /* Hiệu ứng mờ và ẩn */
        }

        .hidden {
            opacity: 0;
            visibility: hidden; /* Ẩn hoàn toàn */
        }

        .main-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            color: #333;
            font-size: 2em; /* Kích thước tiêu đề lớn hơn */
        }

        .novel-list {
            display: flex;
            flex-wrap: wrap;
            gap: 15px; /* Giảm khoảng cách giữa các item */
        }

        .novel-item {
            background: #fff;
            border: 1px solid #e0e0e0; /* Màu viền nhạt hơn */
            border-radius: 8px;
            overflow: hidden;
            width: calc(33.333% - 15px); /* 3 items per row */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s; /* Hiệu ứng khi di chuột */
        }

        .novel-item:hover {
            transform: scale(1.02); /* Phóng to một chút khi di chuột */
        }

        .novel-item img {
            width: 100%;
            height: auto;
        }

        .novel-info {
            padding: 15px;
        }

        .novel-info h2 {
            font-size: 1.4em; /* Kích thước tiêu đề truyện */
            margin: 0 0 10px;
            color: #007BFF; /* Màu xanh cho tiêu đề */
        }

        .novel-info p {
            margin: 5px 0;
            color: #666; /* Màu chữ nhạt hơn */
        }

        .novel-tags {
            margin: 10px 0;
        }

        .tag {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 5px;
            margin-right: 5px;
            font-size: 0.85em; /* Kích thước chữ cho tag */
            color: white;
        }

        .vip {
            background-color: #d9534f; /* Màu đỏ cho VIP */
        }

        .status {
            background-color: #5bc0de; /* Màu xanh cho status */
        }

        .category {
            background-color: #5cb85c; /* Màu xanh lá cho thể loại */
        }

        /* Định dạng tổng thể cho danh sách truyện mới nhất */
        .latest-stories {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 15px;
        }

        /* Định dạng từng truyện */
        .story-card {
            display: flex;
            gap: 15px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            align-items: center;
        }

        /* Hình ảnh của truyện */
        .story-image img {
            width: 100px;
            height: 180px;
            border-radius: 8px;
            object-fit: cover;
        }

        /* Thông tin truyện (tên truyện, tác giả, VIP, trạng thái) */
        .story-info {
            flex-grow: 1;
        }

        .story-title {
            font-size: 18px;
            font-weight: bold;
            margin: 0 0 5px;
        }

        .story-meta {
            font-size: 14px;
            color: #ffffff;
            background-color: #6c757d;
            width: 170px;
            font-size: 15px;
            padding: 2px;
            border-radius: 5px;
        }

        .latest-stories {
            display: flex;
            flex-direction: column;
            gap: 20px; /* Khoảng cách giữa các thẻ truyện */
        }

        .box {
            flex: 1; /* Các phần tử sẽ chiếm không gian bằng nhau */
            min-width: 0; /* Đảm bảo không bị tràn ra ngoài container */
            padding: 20px; /* Khoảng đệm cho các phần tử */
            border: 1px solid #ccc; /* Đường viền cho các phần tử */
            box-sizing: border-box; /* Đảm bảo padding và border được tính trong kích thước */
            overflow-wrap: break-word; /* Cho phép xuống hàng khi cần */
            border:none;
        }

        .story-card {
            align-items: center; /* Căn giữa theo chiều dọc */
            justify-content: space-between; /* Căn đều các phần tử */
            border: 1px solid #ccc; /* Đường viền cho mỗi thẻ truyện */
            padding: 10px;
            border-radius: 8px;
        }

        .story-image img {
            width: 100px; /* Kích thước hình ảnh */
            height: auto;
            border-radius: 5px; /* Bo tròn các góc */
        }

        .story-info {
            padding: 0 15px; /* Khoảng cách bên trái và bên phải */
        }

        .story-genres {
            justify-content: center; /* Căn giữa thể loại */
            flex-wrap: wrap; /* Cho phép xuống dòng khi không đủ chỗ */
        }

        span.genre-tag {
            background-color: #33CCFF; /* Màu nền cho thể loại */
            border-radius: 15px; /* Bo tròn các góc */
            margin-left:2px;
            padding:2px;
            white-space: nowrap;
            display: inline-block;
            margin-top: 7px;
        }

        .story-updates {
            text-align: right; /* Căn phải cho thông tin cập nhật */
            flex-shrink: 0; /* Ngăn không cho phần này co lại */
        }

        h3.story-title {
            color: blue;
        }

        

        /* Định dạng cho Mobile */
        @media (max-width: 768px) {
            .carousel-section {
                margin-left:15px;
                width: 96%;
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .content img {
                width: 100%; /* Chiều rộng 100% của div cha */
                max-width: 1500px; /* Đặt kích thước tối đa */
                height: auto; /* Tự động thay đổi chiều cao theo tỉ lệ */
            }

            #notification {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 79px;
                left: 13em;
                transform: translate(-50%, -50%);
                width: 80%;
                max-width: 600px;
                height: auto;
                background-color: #f1c40f;
                padding: 0;
                margin: 0;
                border-radius: 8px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                text-align: center;
                z-index: 1000;
            }

            .success-message {
                background-color: #dff0d8;
                color: #3c763d;
                padding: 15px;
                position: fixed;
                top: 67px;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 5px;
                z-index: 9999;
                font-size: 16px;
                border: 1px solid #d6e9c6;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                opacity: 1;
                visibility: visible;
                transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
                white-space: nowrap;
            }

            .new-story-update {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                position: relative;
                margin-left: 5px;
            }

            .new-story-update img {
                width: 100px;
                height: auto;
                border-radius: 10px;
                margin-right: 10px;
            }

            .new-story-info {
                text-align: left;
            }

            .new-story-info h3 {
                font-size: 16px;
                margin: 0;
            }

            .new-story-info .tags1 .tag1 {
                font-size: 15px;
            }

            .genres span {
                font-size: 11px;
            }

            .story-card {
                width: 100%;
            }

            .carousel-section{
                margin-left:8px;
            }

            .carousel-item img {
                width: 100%; /* Chiều rộng hình ảnh bằng chiều rộng phần tử cha */
                aspect-ratio: 2 / 3;
                display: block; /* Đảm bảo không có khoảng trắng bên dưới hình ảnh */
                border-radius: 6px;
                object-fit: cover;
            }

            .carousel-indicators {
                margin-top:10px;
                margin-left:190px;
            }

            .hidden {
                opacity: 0;
                visibility: hidden; /* Ẩn hoàn toàn */
            }

            .card-content h3 {
                margin: 0; /* Xóa margin */
                font-size: 10px;
            }

            .tag {
                display: inline-block;
                padding: 5px 10px;
                border-radius: 5px;
                margin-right: 5px;
                font-size: 8px;
                color: white;
            }

        }