/* =====================================================
   CHI TIẾT TRUYỆN - TEENNOVEL STYLE
===================================================== */

body,
.ih-main {
    background: #090912 !important;
}

/* ================= BREADCRUMB ================= */


.ct-breadcrumb {
    margin: 20px;
    padding: 15px 30px;
    background: #090912;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    font-size: 17px;
}



    .ct-breadcrumb a {
        color: #555;
        text-decoration: none;
    }



        .ct-breadcrumb a:hover {
            color: #9333ea;
        }



    .ct-breadcrumb span {
        color: #9333ea;
        font-weight: 600;
    }








/* ================= BOX CHÍNH ================= */



.ct-box {
    width: 95%;
    margin: 35px auto;
    background: #11111c;
    color: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 25px rgba(168,85,247,.15);
}

/* ================= KHU VỰC THÔNG TIN ================= */
.ct-info-wrap {
    display: flex;
    gap: 45px;
}


/* ================= POSTER ================= */
.ct-poster {
    width: 280px;
    flex-shrink: 0;
    text-align: center;
}

    .ct-poster img {
        width: 260px;
        height: 380px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 8px 25px rgba(0,0,0,.35);
    }

.no-img {
    width: 260px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
    font-size: 60px;
}

/* ================= ĐÁNH GIÁ SAO ================= */
.rating {
    margin-top: 15px;
    font-size: 18px;
    color: #555;
}

    .rating span {
        color: #ffb000;
        font-size: 25px;
    }

    .rating b {
        color: #9333ea;
    }

/* ================= THÔNG TIN TRUYỆN ================= */
.ct-info {
    flex: 1;
}



    .ct-info h1 {
        font-size: 35px;
        color: #222;
        margin-top: 5px;
        margin-bottom: 15px;
        font-weight: 700;
    }




    .ct-info hr {
        border: none;
        height: 1px;
        background: #ddd;
        margin-bottom: 25px;
    }





    .ct-info p {
        font-size: 18px;
        margin: 16px 0;
        color: #333;
    }





    .ct-info i {
        color: #9333ea;
        margin-right: 8px;
    }






/* ================= TAG THỂ LOẠI ================= */



.tag {
    display: inline-block;
    background: #f3e8ff;
    color: #9333ea;
    padding: 6px 15px;
    border-radius: 20px;
    margin-right: 5px;
    font-weight: 600;
}







/* ================= TRẠNG THÁI ================= */



.status {
    color: #16a34a;
    font-weight: bold;
}









/* ================= MÔ TẢ ================= */



.ct-description {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #ddd;
}





    .ct-description h2 {
        font-size: 25px;
        color: #222;
        margin-bottom: 15px;
    }



    .ct-description p {
        font-size: 18px;
        line-height: 1.8;
        color: #444;
    }
/* ================= BUTTON ================= */
.ct-buttons {
    margin-top: 30px;
    display: flex;
    gap: 25px;
}

.btn-read,
.btn-new {
    padding: 13px 35px;
    border-radius: 30px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 600;
    transition: .3s;
}

.btn-read {
    background: #9333ea;
}

.btn-new {
    background: #f97316;
}
    .btn-read:hover,
    .btn-new:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,.25);
        color: white;
    }


/* ================= DANH SÁCH CHƯƠNG ================= */
.chapter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ct-info h1,
.ct-info p,
.ct-description h2,
.ct-description p,
.chapter-title span {
    color: #f5f3ff;
}
.ct-info hr {
    background: rgba(255,255,255,.2);
}


/* ===============================
   FIX KHÔNG ĐÈ LAYOUT DOCGIA
================================ */


.ih-navbar,
.ih-navbar * {
    box-sizing: border-box;
}



.ih-sidebar,
.ih-sidebar * {
    box-sizing: border-box;
}





.ih-navbar {
    background: #090912 !important;
}





.ih-nav-links a {
    color: #d8b4fe !important;
}





    .ih-nav-links a:hover,
    .ih-nav-links a.active {
        background: #000 !important;
        border: 1px solid white;
        color: #e9d5ff !important;
    }





.ih-sidebar {
    background: #090912 !important;
}





    .ih-sidebar a {
        color: #94a3b8 !important;
    }



        .ih-sidebar a:hover,
        .ih-sidebar a.active {
            background: #000 !important;
            border: 1px solid white;
            color: #d8b4fe !important;
        }



/* ================= RESPONSIVE ================= */



@media(max-width:768px) {



    .ct-info-wrap {
        flex-direction: column;
        align-items: center;
    }



    .ct-info {
        width: 100%;
    }




        .ct-info h1 {
            text-align: center;
            font-size: 26px;
        }




    .ct-buttons {
        flex-direction: column;
    }




    .btn-read,
    .btn-new {
        text-align: center;
    }




    .ct-box {
        width: calc(100% - 24px);
        margin: 16px auto;
        padding: 16px;
    }

    .chapter-empty {
        padding: 40px 20px;
        text-align: center;
        color: #888;
        font-size: 15px;
    }

        .chapter-empty i {
            display: block;
            font-size: 42px;
            margin-bottom: 10px;
            color: #b8b8b8;
        }

    .ct-breadcrumb { margin: 12px; padding: 10px 14px; font-size: 13px; overflow-wrap: anywhere; }
    .ct-poster { width: 100%; }
    .ct-poster img, .no-img { width: min(220px, 100%); height: auto; aspect-ratio: 2 / 3; }
    .ct-info p, .ct-description p { font-size: 15px; line-height: 1.65; }
    .ct-description { margin-top: 24px; padding-top: 18px; }
    .ct-description h2 { font-size: 21px; }
    .ct-buttons { gap: 12px; margin-top: 22px; }
    .btn-read, .btn-new { padding: 11px 18px; font-size: 15px; }
    .chapter-title { margin-top: 32px; }
    .chapter-title span { font-size: 21px; padding: 0 12px; }
    .chapter-list a { padding: 12px 14px; font-size: 14px; }
}