.chapter-nav {
            margin-top: 20px;
            text-align: center;
            position: relative;
        }

        .btn-group {
            display: inline-flex;
            gap: 10px;
        }

        .btn {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #28a745;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #218838;
        }
            a:hover {
                text-decoration: none;
                color: #fff;
            }
            p {
                font-size: 22px;
            }
        .btn:disabled {
            background-color: #6c757d; /* Màu cho nút không hoạt động */
            cursor: not-allowed; /* Con trỏ chuột khi không hoạt động */
            opacity: 0.65; /* Giảm độ trong suốt */
            pointer-events: none; /* Ngăn chặn tất cả các sự kiện chuột */
        }

        .disabled-button {
            background-color: #6c757d; /* Màu nền khi disable */
            cursor: not-allowed; /* Con trỏ khi hover */
            opacity: 0.65; /* Giảm độ trong suốt */
            pointer-events: none; /* Ngăn chặn tất cả các sự kiện chuột */
        }

        .menu-button {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #28a745;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .menu-button:hover {
            background-color: #218838;
        }

        .chapter-select {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #255625;
            background-color: #1a1a1a;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            max-width: 100%;
           
        }
        .title {
            text-align: center; /* Căn giữa */
            font-size: 28px; /* Kích thước chữ lớn */
            margin-bottom: 10px; /* Khoảng cách dưới */
            line-height: 3rem;
            color: #690;
            font-family: "Roboto Condensed",Tahoma,sans-serif;
        }

        .subtitle {
            text-align: center; /* Căn giữa */
            font-size: 18px; /* Kích thước chữ nhỏ hơn */
            margin-bottom: 20px; /* Khoảng cách dưới */
            color: gray;
            line-height: 1.5;
        }

        .chapter-select option[selected] {
            background-color: #d1e7dd; /* Màu nền cho chương hiện tại */
            color: #0f5132; /* Màu chữ cho chương hiện tại */
        }
        .chapter-select-container select option {
            background-color: #fff; /* Màu nền cho option */
            color: #000; /* Màu chữ cho option */
            max-width: 150px;
        }
        .chapter-content{
            font-family: "Palatino Linotype","Arial","Times New Roman",sans-serif;
            line-height: 180%;
            
            font-size: 22px;
            text-align: left;
            word-wrap: break-word;
        
        }
        .chapter-content img {
            max-width: 100%;
            display: block;
            margin: 0 auto;
        }
        hr.chapter-start {
            background: url(/images/spriteimg_new_white_op.png) -200px -27px no-repeat;
            width: 59px;
            height: 20px;
            filter: brightness(4.5);
            border: none;
        }
         hr.chapter-end {
            background: url(/images/spriteimg_new_white_op.png) 0 -51px no-repeat;
            width: 277px;
            height: 35px;
            margin: 20px;
            border: none;
            filter: brightness(2.5);
        }
        
@media only screen and (max-width: 1023px) {
    .chapter-nav {
            margin-top: 20px;
            text-align: center;
            position: relative;
            display: none;
        }
    .chapter-nav2 {
            margin-top: 20px;
            text-align: center;
            position: relative;
        }
}
@media only screen and (min-width: 1024px) {
    .main{
        padding-left:40px;
        padding-top: 50px;
    }
    .chapter-nav {
            margin-top: 20px;
            text-align: center;
            position: relative;
        }
    .chapter-nav2 {
            margin-top: 20px;
            text-align: center;
            position: relative;
            display: none;
        }
}
.breadcrumb-container {
    display: flex; /* Sử dụng flexbox cho bố cục ngang */
    justify-content: space-between; /* Khoảng cách đều giữa các cột */
    margin-top: 10px;
    overflow: hidden;
}

.breadcrumb li {
    overflow: hidden; /* Ẩn phần nội dung vượt quá */
    white-space: nowrap; /* Ngăn không cho chữ xuống dòng */
    text-overflow: ellipsis; /* Hiện ba dấu chấm nếu chữ quá dài */
    color: #6c757d;
    margin: 0 2px;
}




.breadcrumb a {
    text-decoration: none; /* Bỏ gạch dưới cho link */
    color: #6c757d; /* Màu chữ cho link */
}

.breadcrumb a:hover {
    text-decoration: underline; /* Gạch dưới khi hover */
}
.breadcrumb li+li:before {
    content: '/'; /* Thêm ký hiệu phân cách */
    color: #6c757d; /* Màu sắc cho ký hiệu */
}
.chapter-list {
    list-style-type: none; /* Bỏ dấu đầu dòng */
    padding: 0; /* Bỏ lề */
}

.chapter-list {
    column-count: 2; /* Chia thành 2 cột */
    column-gap: 20px; /* Khoảng cách giữa các cột */
    max-height: 400px; /* Cao tối đa (tùy chỉnh theo nhu cầu) */
    overflow-y: auto; /* Thêm cuộn nếu vượt quá chiều cao */
}

.chapter-list li {
    break-inside: avoid; /* Ngăn chặn chia cắt giữa các phần tử */
    margin-bottom: 10px; /* Khoảng cách giữa các mục */
}


.chapter-list a:hover {
    text-decoration: underline; /* Gạch chân khi hover */
}
.pagination {
    display: flex;
    justify-content: center; /* Căn giữa */
    align-items: center; /* Căn giữa theo chiều dọc */
    margin: 20px 0;
}

.pagination a {
    margin: 0 10px;
    text-decoration: none;
}

.pagination input {
    margin-left: 10px;
    width: 80px; /* Chiều rộng của ô input */
}

.pagination button {
    margin-left: 5px;
}
.pagination-box {
    background-color: #f8f9fa; /* Màu nền box */
    border: 1px solid #ddd; /* Đường viền box */
    border-radius: 5px; /* Bo góc box */
    padding: 15px; /* Khoảng cách bên trong box */
    margin: 20px 0; /* Khoảng cách bên ngoài box */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng */
}

.pagination a {
    background-color: #25252b; /* Màu nền của nút */
    color: #fff; /* Màu chữ */
    padding: 10px 15px; /* Khoảng cách trong nút */
    border-radius: 5px; /* Bo góc nút */
    transition: background-color 0.3s; /* Hiệu ứng chuyển màu khi hover */
}

.pagination a:hover {
    background-color: #25252bb3; /* Màu nền khi hover */
}

.pagination input {
    margin-left: 10px;
    width: 80px; /* Chiều rộng của ô input */
    padding: 5px; /* Khoảng cách bên trong input */
    border: 1px solid #ddd; /* Đường viền input */
    border-radius: 5px; /* Bo góc input */
}

@media (max-width: 768px) {
    .breadcrumb {
        display: flex; /* Sử dụng Flexbox */
        justify-content: space-between; /* Căn giữa các phần tử */
        width: 100%; /* Đảm bảo chiều rộng của breadcrumb không vượt quá 100% */
        overflow: hidden; /* Ẩn phần tràn ra ngoài */
        padding: 0; /* Xóa padding nếu có */
    }

    .breadcrumb li {
        flex: 0 0 auto; /* Không co giãn, giữ kích thước cố định */
        min-width: 0; /* Cho phép phần tử co giãn xuống */
        white-space: nowrap; /* Không xuống dòng */
        overflow: hidden; /* Giới hạn chiều dài */
        text-overflow: ellipsis; /* Hiển thị dấu "..." nếu quá dài */
        text-align: center; /* Căn giữa chữ */
        margin: 0; /* Xóa khoảng cách bên ngoài */
    }

    .breadcrumb li:first-child {
        width: 20%; /* Chiếm 20% cho phần tử đầu tiên */
    }

    .breadcrumb li:nth-child(2) {
        width: 50%; /* Chiếm 32% cho phần tử giữa */
    }

    .breadcrumb li:last-child {
        width: 30%; /* Chiếm 48% cho phần tử cuối cùng */
    }

    
    .chapter-list {
        column-count: 1; /* Chỉ 1 cột trên điện thoại */
        max-height: none; /* Bỏ giới hạn chiều cao */
        overflow-y: visible; /* Không cho cuộn dọc */
    }
}
.button-container {
    display: flex; /* Sử dụng Flexbox để định dạng các nút */
    justify-content: space-between; /* Đặt khoảng cách giữa các nút */
    align-items: center; /* Căn giữa theo chiều dọc */
    padding: 10px; /* Khoảng cách bên trong */
}

.btn {
    margin: 0; /* Đặt margin về 0 để tránh khoảng cách không mong muốn */
}

    .full-screen {
    width: 100%;
    position: relative; /* Hoặc absolute nếu cần */
    overflow: auto; /* Đảm bảo cuộn khi cần */
    margin-left: 0;
    padding-top: 0;
}


.footer.full-screen {
    margin-left: 0; /* Không có khoảng cách khi fullscreen */
}

    .hidden {
    display: none;
}

    .settings-dropdown {
    margin-bottom: 20px; /* Khoảng cách giữa các dropdown */
}



.dropdown label {
    display: block; /* Đảm bảo label hiển thị trên cùng */
    margin-bottom: 5px; /* Khoảng cách giữa label và select */
    font-weight: bold; /* Làm cho label nổi bật */
}

.form-control {
    width: 100%; /* Chiều rộng 100% cho dropdown */
    padding: 8px; /* Padding cho dropdown */
    border: 1px solid #ccc; /* Đường viền cho dropdown */
    border-radius: 4px; /* Bo tròn góc */
    background-color: #fff; /* Màu nền cho dropdown */
    color: #000; /* Màu chữ cho dropdown */
}

    .btn-settings {
    background-color: #25252b; /* Màu nền nút */
    color: #fff; /* Màu chữ nút */
}

    .btn-settings2 {
    background-color: #7239ea; /* Màu nền nút */
    color: #fff; /* Màu chữ nút */
}

.dropdown-menu {
    display: none; /* Ẩn dropdown mặc định */
    position: absolute; /* Để dropdown không ảnh hưởng đến layout */
    z-index: 1000; /* Đảm bảo nó nằm trên các phần tử khác */
    padding: 15px; /* Padding cho dropdown */
}

.dropdown-menu.show {
    display: block; /* Hiển thị dropdown khi cần */
    right: 0;
}

.form-horizontal .form-group {
    margin: 10px 0; /* Khoảng cách giữa các nhóm */
}
.dropdown-menu {
    background-color: #fff; /* Màu nền của dropdown */
    color: #000; /* Màu chữ trong dropdown */
    border: 1px solid #ccc; /* Đường viền cho dropdown */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng cho dropdown */
}

.dropdown-menu select {
    background-color: #fff; /* Màu nền cho select */
    color: #000; /* Màu chữ cho select */
}

/* Tùy chọn hover cho dropdown */
.dropdown-menu option:hover {
    background-color: #f0f0f0; /* Màu nền khi hover */
}