/*
    Theme Name: Truyện Bộ 24 - Đọc Truyện Online
    Theme URI: https://truyenbo24.com/
    Author: truyenbo24
    Author URI: https://truyenbo24.com/
*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');*/
/*@import url('css/font-face.css');*/
:root{
    --th-color-main: #f7941d;
    --th-color-orange: #ff9800;
    --th-color-red: #c01e2e;
    --th-color-blue: #0768ea;
    --th-color-blue2: #4caf50;
    --th-color-gray: #eff4fa;
    --th-color-link: #03a9f4;
    --th-font-main: 'Quicksand', sans-serif;
    /*--th-font-main: 'Open Sans', sans-serif;
    --th-font-bookerly: 'Bookerly', sans-serif;*/
}
@media screen{
    * {
        margin: 0px;
        padding: 0px;
    }
    a:link{
        text-decoration:none;
    }
    a:focus{
        outline: none;
    }
    img{
        display: block;
        padding: 0px;
        outline: none;
        border: none;
    }
    ul{
        list-style:none;
    }
    h1{
        margin: 0px;
        padding: 0px;
    }
    body{
        position: relative;
        font-family: var(--th-font-main);
        color: #333;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 500;
        /*background-color: #dedede;*/
        background-color: #222;
    }
    .body-overfl-hidden{
        overflow: hidden;
    }
    .container{
        position: relative;
        width: 1170px;
        margin: 0 auto;
    }
    /*
    * HEADER.
    */
    .header{
        position: relative;
        box-shadow: 0 3px 5px rgb(0, 0, 0, .1);
    }
    /*.logged-in .header{
        top: 32px;
    }*/
    .header-main{
        background-color: #333;
    }
    .header .container{
        height: 60px;
        line-height: 60px;
    }
    .logo{
        margin: 0px;
        padding: 0px;
        margin-top: 12px;
        height: 36px;
        transition: all ease-in-out .3s;
    }
    .logo a{
        display: block;
        height: 100%;
    }
    .logo a img{
        height: 100%;
    }
    /**/
    .main-nav-inner>ul{
        padding: 0 20px;
    }
    .main-nav-inner>ul>li{
        float: left;
        position: relative;
    }
    .main-nav-inner>ul>li.menu-item-has-children>a:after{
        position: absolute;
        font-family: 'Font Awesome 5 Pro';
        content: "\f107";
        right: 18px;
        top: 0px;
        color: var(--th-color-black);
        font-weight: 300;
    }
    .main-nav-inner>ul>li a{
        display: block;
        color: #c6c6c6;
        padding: 0 20px;
        text-transform: capitalize;
    }
    .main-nav-inner>ul>li>a{
        position: relative;
        font-size: 14px;
        font-weight: 500;
        padding-left: 45px;
        text-transform: uppercase;
    }
    .main-nav-inner>ul>li>a>i{
        position: absolute;
        top: 22px;
        left: 20px;
        font-size: 16px;
    }
    .main-nav-inner>ul>li.menu-item-has-children>a{
        padding-right: 36px;
    }
    /*.main-nav-inner>ul>li:last-child>a{
        padding-right: 0px;
    }
    .main-nav-inner>ul>li:first-child>a{
        border-left: 0px;
    }*/
    .main-nav-inner>ul>li:last-child>a{
        border-right: 0px;
    }
    /*.main-nav-inner>ul>li.current-menu-item>a,*/
    .main-nav-inner>ul>li:hover>a{
        background-color: #393939;
        color: var(--th-color-orange);
    }
    .main-nav-inner>ul>li.current-menu-item>a>i{
        color: #fff;
        background-color: var(--th-color-orange);
    }
    .main-nav-inner>ul>li>ul{
        position: absolute;
        top: calc(100% + 8px);
        left: 0px;
        min-width: 200px;
        line-height: 1.5;
        z-index: 1000;
        box-sizing: border-box;
        background-color: #393939;
        text-transform: none;
        border-radius: 0 0 3px 3px;
        padding: 10px 0;
        padding-top: 0px;
        opacity: 0;
        visibility: hidden;
        transition: all ease-in-out .1s;
        /*box-shadow: 0 3px 10px rgba(0, 0, 0, .1);*/
    }
    /*.main-nav-inner>ul>li.nav-pro>ul{
        opacity: 1;
        visibility: visible;
    }*/
    .main-nav-inner>ul>li:hover>ul{
        top: calc(100%);
        opacity: 1;
        visibility: visible;
        transition: all ease-in-out .2s;
    }
    .header.active .main-nav-inner>ul>li:hover>ul{
        top: 100%;
    }
    .main-nav-inner>ul>li>ul>li>a{
        color: #fff;
        font-size: 13px;
        padding: 5px 20px;
        transition: all ease-in-out .2s;
    }
    .main-nav-inner>ul>li>ul>li>a:hover,
    .header.active .main-nav-inner>ul>li>ul>li>a:hover{
        color: var(--th-color-orange);
    }
    .main-nav-inner>ul>li ul li{
        white-space: nowrap;
    }
    .main-nav-inner>ul>li.nav-col ul{
        width: 400px;
        overflow: hidden;
        padding-top: 10px;
    }
    .main-nav-inner>ul>li.nav-col ul li{
        float: left;
        width: calc(100% / 3);
    }
    .main-nav-inner>ul>li.nav-col ul li a{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .show-nav-mobile{
        display: none;
        position: absolute;
        top: 12px;
        right: 0px;
        color: #c6c6c6;
        font-size: 23px;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        border-radius: 3px;
        background-color: #222222;
    }
    .show-nav-mobile:hover{
        color: #fff;
    }
    /**/
    .header-bottom{
        background-color: #2c2c2c;
        border-bottom: 1px solid #323232;
    }
    .header-bottom .container{
        height: 38px;
        line-height: 38px;
        color: #fff;
        font-size: 13px;
    }
    /**/
    .search-form{
        position: relative;
        height: 36px;
        line-height: 1;
        margin-top: 12px;
        width: 250px;
    }
    .search-input{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        outline: none;
        box-sizing: border-box;
        padding: 0 15px;
        border: none;
        border-radius: 3px;
        color: #fff;
        background-color: #222;
    }
    .search-submit{
        position: absolute;
        top: 0px;
        right: 0px;
        width: 40px;
        height: 100%;
        outline: none;
        box-sizing: border-box;
        border: none;
        background-color: #222;
        color: #c6c6c6;
        border-radius: 0 3px 3px 0;
    }
    .search-submit:hover{
       color: var(--th-color-main); 
    }


    /*
    * FEATURED.
    */
    .featured{
        position: relative;
        background-color: #f9f9f9;
    }
    .featured:before{
        position: absolute;
        content: '';
        left: 0px;
        top: 0px;
        width: 100%;
        height: 300px;
        z-index: 1;
        background: -moz-linear-gradient(bottom,transparent 0,rgba(0,0,0,.65) 100%);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0,transparent),color-stop(100%,rgba(0,0,0,.65)));
        background: -webkit-linear-gradient(bottom,transparent 0,rgba(0,0,0,.65) 100%);
        background: -o-linear-gradient(bottom,transparent 0,rgba(0,0,0,.65) 100%);
        background: -ms-linear-gradient(bottom,transparent 0,rgba(0,0,0,.65) 100%);
        background: linear-gradient(bottom top,transparent 0,rgba(0,0,0,.65) 100%);
    }
    .carousel-wrap{
        position: relative;
    }
    .slick-track{
        display: flex;
        flex-flow: row wrap;
    }
    .slick-slide{
        height: auto;
    }
    .arrow-btn{
        position: absolute;
        display: block;
        top: calc(50% - 13px);
        width: 35px;
        height: 35px;
        line-height: 35px !important;
        border-radius: 100%;
        box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
        background-color: #fff;
        text-align: center;
        font-size: 20px;
        color: var(--th-color-orange);
        cursor: pointer;
        z-index: 100;
        font-weight: 300 !important;
    }
    .arrow-btn.slick-disabled{
        color: #dedede;
    }
    .arrow-btn-prev{
        left: -26px;
    }
    .arrow-btn-next{
        right: -26px;
    }
    .carousel-wrap .slick-list{
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    /**/
    .featured-item{
        display: block;
        color: #333;
        height: 800px;
    }
    .featured-carousel{
        margin: 0px !important;
    }
    .featured .carousel-wrap .slick-list{
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .featured .arrow-btn{
        font-size: 40px;
        top: calc(50% - 20px);
        background-color: transparent;
        font-weight: 300;
        box-shadow: none;
        border-radius: 0px;
    }
    .featured .arrow-btn,
    .featured .arrow-btn.slick-disabled{
        color: rgba(255, 255, 255, .5);
    }
    .featured .arrow-btn:hover,
    .featured .arrow-btn.slick-disabled:hover{
        color: rgba(255, 255, 255, .8);
    }
    .featured .arrow-btn-prev{
        left: 20px;
    }
    .featured .arrow-btn-next{
        right: 20px;
    }
    .featured .slick-dots{
        bottom: 20px;
    }
    .featured .slick-dots li,
    .featured .slick-dots li button{
        width: 17px;
        transition: all ease-in-out .3s;
    }
    .featured .slick-dots li button:before{
        content: '';
        width: 17px;
        height: 7px;
        border-radius: 7px;
        background-color: #fff;
        transition: all ease-in-out .3s;
    }
    .featured .slick-dots li.slick-active,
    .featured .slick-dots li.slick-active button,
    .featured .slick-dots li.slick-active button:before{
        width: 22px;
    }
    .featured .slick-dots li.slick-active button:before{
        background-color: var(--th-color-orange);
    }
    /*
    * HOME WRAP.
    */
    .main-wrap .container{
        padding: 20px 0;
    }
    .block-item{
/*        overflow: hidden;*/
    }
    .block-item:nth-child(n+2){
        margin-top: 20px;
    }
    .block-item-hl{
        border: 1px solid var(--th-color-main);
    }
    .block-item-head{
        position: relative;
        height: 30px;
        line-height: 30px;
        padding-left: 38px;
        border-bottom: 1px solid #363636;
    }
    .block-item-head:before,
    .block-item-head:after{
        position: absolute;
        content: '';
    }
    .block-item-head:before{
        width: 25px;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: var(--th-color-main);
    }
    .block-item-head:after{
        top: 0px;
        left: 25px;
        border: 4px solid transparent;
        border-left: 4px solid #ff9800;
        border-top: 4px solid #ff9800;
    }
    .block-item-title{
        font-size: 16px;
        font-weight: 700;
/*        color: var(--th-color-main);*/
        color: #fff;
    }
    .block-item-content{
        margin-top: 12px;
    }
    .block-content-flex{
        display: flex;
        flex-flow: row wrap;
    }
    .thumb-cover{
        overflow: hidden;
    }
    .thumb-cover img{
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /**/
    .block-story-hot{
        position: relative;
        padding-left: calc(((100% - 46px) / 4) + 12px);
    }
    .story-col-item{
        position: relative;
        width: calc((100% - 60px) / 6);
        margin-right: 12px;
        overflow: hidden;
    }
    .story-col-item:nth-child(7),
    .story-col-item:nth-child(13){
        float: right;
        margin-right: 0px;
    }
    .story-col-item:nth-child(n+8){
        margin-top: 12px;
    }
    .story-col-item:nth-child(1){
        position: absolute;
        top: 0px;
        left: 0px;
        width: calc((100% - 46px) / 4);
    }
    .story-col-item-thumb{
        position: relative;
        display: block;
        color: #333;
        height: 194px;
        padding: 3px;
        background-color: #333;
        box-sizing: border-box;
        box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
    }
    .story-col-item:nth-child(1) .story-col-item-thumb{
        height: 426px;
    }
    .icon-hot-gift{
        position: absolute;
        top: 10px;
        right: 10px;
        text-indent: -99999px;
        width: 28px;
        height: 15px;
        background: url(images/icon/icon-hot.gif) top left no-repeat;
    }
    .story-col-item-info{
        margin-top: 8px;
    }
    .story-col-item-title{
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
    }
    .story-col-item-title a{
        display: block;
        color: #fff;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    }
    /**/
    .block-wrap:nth-child(n+2){
        margin-top: 20px;
    }
    .sidebar{
        width: 300px;
    }
    .primary{
        width: calc(100% - 320px);
    }
    .block-story-update-loading{
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .block-story-update-loading i{
        margin-right: 5px;
    }
    .story-list-item{
        background-color: #2e2e2e;
    }
    .story-list-item:nth-child(even){
        background-color: #252525;
    }
    /*.story-list-item:nth-child(n):hover{
        background-color: #fff;
    }*/
    /*.story-list-item:nth-child(n):hover *{
        color: #fff;
    }*/
    .story-list-item-title,
    .story-list-item-cat,
    .story-list-item-chap,
    .story-list-item-time{
        padding: 0 10px;
        box-sizing: border-box;
        height: 42px;
        line-height: 42px;
        color: #c6c6c6;
        font-size: 13px;
    }
    .story-list-item-title{
        position: relative;
        padding-right: 45px;
        width: calc(100% - (180px + 120px + 130px));
    }
    .story-list-item-title:before{
        position: absolute;
        font-family: 'Font Awesome 5 Pro';
        content: "\f105";
        left: 11px;
        top: 1px;
        color: var(--th-color-main);
    }
    .story-new-item-time-list{
        position: absolute;
        margin: 0px;
        top: 0px;
        right: 0px;
    }
    .story-list-item-cat{
        width: 180px;
    }
    .story-list-item-chap{
        width: 130px;
    }
    .story-list-item-time{
        width: 120px;
    }
    .story-list-item-time a{
        color: #c6c6c6;
    }
    .story-list-item-title h3{
        font-size: 13px;
        font-weight: 400;
    }
    .story-list-item-title a{
        display: block;
        color: #c6c6c6;
        padding-left: 13px;
    }
    .story-list-item-cat p a{
        color: #c6c6c6;
    }
    .story-list-item-cat p a:last-child span{
        display: none;
    }
    .story-list-item-chap a{
        display: block;
        font-weight: 500;
        color: var(--th-color-main);
    }
    .story-list-item-time{
        text-align: right;
    }
    .story-list-item-time i{
        color: #999;
    }
    /**/
    .story-new-item{
        width: calc((100% - 12px) / 2);
        margin-right: 12px;
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 3px;
    }
    .story-new-item:nth-child(2n+2){
        float: right;
        margin-right: 0px;
    }
    .story-new-item:nth-child(n+3){
        margin-top: 12px;
    }
    .story-new-item-thumb{
        display: block;
        color: #f9f9f9;
        width: 122px;
        height: 180px;
        border-radius: 3px;
        /*box-shadow: 0 3px 5px rgba(0, 0, 0, .1);*/
    }
    .story-new-item-info{
        width: calc(100% - (122px + 12px));
    }
    .story-new-item-time{
        font-style: italic;
        margin-bottom: 7px;
    }
    .icon-detail{
        height: 20px;
        line-height: 20px;
        padding: 0 6px;
        border-radius: 20px;
        font-style: normal;
/*        background-color: #fff;*/
        border: 1px solid #ddd;
        margin-right: 3px;
    }
    .icon-full{
        color: var(--th-color-main);
        border: 1px solid var(--th-color-main);
    }
    .icon-new{
        color: var(--th-color-orange);
        border: 1px solid var(--th-color-orange);
    }

    .story-new-item-title{
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        text-transform: capitalize;
    }
    .story-new-item-title a{
        display: block;
        color: #333;
    }
    .story-new-item-cat{
        margin-top: 5px;
        font-size: 13px;
    }
    .story-new-item-cat a{
        color: #333;
    }
    .story-new-item-cat a:last-child span{
        display: none;
    }
    .story-new-item-chap{
        position: relative;
        margin-top: 7px;
        padding-top: 15px;
    }
    .story-new-item-chap:before{
        position: absolute;
        content: '';
        top: 0px;
        left: 0px;
        width: 70px;
        border-top: 1px dotted #999;
    }
    .story-new-item-chap li:nth-child(n+2){
        margin-top: 3px;
    }
    .story-new-item-chap li a{
        position: relative;
        font-size: 15px;
        padding-left: 15px;
        font-weight: 500;
        color: var(--th-color-main);
    }
    .story-new-item-chap li a:before{
        position: absolute;
        font-family: 'Font Awesome 5 Pro';
        content: "\f101";
        left: 0px;
        top: -2px;
        color: #999;
        font-weight: 300;
    }
    .story-new-item-chap li i{
        margin-left: 5px;
        color: var(--th-color-main);
    }
    .story-new-item-chap li:last-child a{
        font-size: 13px;
        font-weight: 400;
        color: #333;
        padding: 0px;
    }
    .story-new-item-chap li:last-child a:before{
        display: none;
    }
    /**/
    .story-full-item{
        width: calc((100% - 70px) / 8);
        margin-right: 10px;
    }
    .story-full-item:nth-child(8n+8){
        float: right;
        margin-right: 0px;
    }
    .story-full-item:nth-child(n+9){
        margin-top: 10px;
    }
    .story-full-item-info{
        text-align: center;
        margin-top: 5px;
    }
    .story-chap-full{
        color: var(--th-color-main);
        font-size: 12px;
        text-align: center;
        margin-bottom: 6px;
    }
    .story-chap-full span{
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
        border-radius: 20px;
        border: 1px solid var(--th-color-main);
    }
    .story-full-item-title{
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
    }
    .story-full-item-title a{
        display: block;
        color: #fff;
    }


    /**/
    .story-viewed-item:nth-child(n+2){
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px dotted #555;
    }
    .story-viewed-item-thumb{
        display: block;
        width: 70px;
        color: #333;
        border-radius: 3px;
        overflow: hidden;
        background-color: #f9f9f9;
    }
    .story-viewed-item-info{
        margin-left: 80px;
        line-height: 1.5;
    }
    .story-viewed-item-title{
        font-weight: 700;
    }
    .story-viewed-item-title a{
        color: #333;
        display: block;
    }
    .story-viewed-item-note{
        font-size: 12px;
        font-style: italic;
        color: #999;
    }
    .story-viewed-item-chap{
        margin-top: 0px;
        font-size: 13px;
        line-height: 1.5;
    }
    .story-viewed-item-chap a{
        color: #c6c6c6;
    }


    /**/
    .sb-item-content{
        background-color: #333;
        padding: 10px;
    }
    .sd-tax-item{
        width: calc((100% - 5px) / 2);
        box-sizing: border-box;
    }
    .sd-tax-item:nth-child(2n+2){
        float: right;
        margin-left: 5px;
    }
    .sd-tax-item:nth-child(n+3){
        margin-top: 3px;
    }
    .sd-tax-item a{
        position: relative;
        display: block;
        color: #c6c6c6;
        font-size: 13px;
        font-weight: 500;
        padding-left: 5px;
    }
    .sd-tax-item a:hover{
        color: var(--th-color-main);
    }

    /*
    * FOOTER.
    */
    .footer{
        background-color: #181818;
        color: #c6c6c6;
        font-size: 13px;
    }
    .footer-top{
        padding: 20px 0;
    }
    .footer-left{
        width: 40%;
    }
    .footer-logo a{
        display: block;
        height: 42px;
        color: #c6c6c6;
    }
    .footer-logo a img{
        height: 100%;
        margin: 0 auto;
    }
    .footer-intro{
        margin-top: 15px;
        text-align: center;
    }
    .footer-intro a{
        font-weight: 700;
        color: #c6c6c6;
    }
    .footer-right{
        text-align: right;
        width: calc(100% - (40% + 30px));
    }
    /**/
    .footer-bottom{
        line-height: 1.5;
        padding-bottom: 20px;
    }
    .footer-nav{
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 32px;
        margin-top: 15px;
    }
    .footer-nav ul li{
        display: inline-block;
        float: left;
    }
    .footer-nav ul li a{
        display: block;
        color: #c6c6c6;
        padding: 0 15px;
        border-radius: 3px;
        background-color: #222;
    }
    .footer-nav ul li:nth-child(n+2){
        margin-left: 5px;
    }
    .footer-nav ul li:nth-child(1) a i{
        margin-right: 5px;
    }
    .footer-nav ul li:nth-child(2) a i{
        margin-left: 5px;
    }
    .footer-nav ul li:last-child a{
        padding: 0px;
    }
    .footer-nav ul li img{
        height: 100%;
    }
    .copyright{
        text-align: center;
    }
    .copyright a{
        color: #c6c6c6;
    }


    /* Pagination */
    .pagination{
        clear: both;
        text-align: center;
        margin-top: 20px;
    }
    .pagination span,
    .pagination a{
        display: inline-block;
        margin-right: 6px;
        margin-top: 10px;
        height: 34px;
        line-height: 34px;
        width: 34px;
        text-align: center;
        color: #c6c6c6;
        font-weight: 700;
/*        border-radius: 3px;*/
        transition: all ease-in-out .3s;
        background-color: #333;
        border-radius: 3px;
    }
    .pagination.style2 span,
    .pagination.style2 a{
        background-color: #222;
    }
    .pagination a:last-child,
    .pagination span:last-child{
        margin-right: 0px;
    }
    .pagination a:hover{
        color: var(--th-color-main);
    }
    .pagination .current{
        color: var(--th-color-main);
        background-color: #222;
    }
    .pagination.style2 .current{
        background-color: #333;
    }
    .pagination .next,
    .pagination .prev{
        width: auto;
        padding: 0 10px;
    }
    .loading{
        margin-top: 20px;
        color: #c6c6c6;
        text-align: center;
        font-size: 13px;
    }

    /*
    * ARCHIVE STORY.
    */
    .primary-story-item{
        position: relative;
        width: calc((100% - 50px) / 6);
        margin-right: 10px;
    }
    .primary-story-item:nth-child(6n+6){
        float: right;
        margin-right: 0px;
    }
    .primary-story-item:nth-child(n+7){
        margin-top: 10px;
    }
    .primary-story-item-thumb{
        position: relative;
        display: block;
        color: #c6c6c6;
        height: 182px;
        padding: 3px;
        background-color: #333;
        box-sizing: border-box;
        box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
    }
    .primary-story-item-detail{
        position: absolute;
        z-index: 10;
        top: 5px;
        left: -4px;
        height: 18px;
        line-height: 18px;
/*        border-radius: 0 18px 18px 0;*/
        color: #fff;
        padding: 0 8px;
        padding-right: 10px;
        font-size: 12px;
        background-color: var(--th-color-orange);
        box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
    }
    .primary-story-item-detail:after{
        position: absolute;
        content: '';
        left: 0px;
        top: 100%;
        border: 2px solid #e38412;
        border-left: 2px solid transparent;
        border-bottom: 2px solid transparent;
    }
    .primary-story-item-info{
        color: #999;
        font-size: 12px;
        line-height: 1.5;
        margin-top: 8px;
    }
    .primary-story-item-title{
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
    }
    .primary-story-item-title a{
        display: block;
        color: #fff;
    }
    .primary-story-item-author{
        font-style: italic;
        line-height: 1.4;
    }
    .primary-story-item-author a{
        color: #999;
    }
    /**/
    .block-comment-content{
        margin-top: 5px;
        background-color: #333;
    }


    /*
    * SINGLE STORY.
    */
    .breadcrumb{
    }
    .breadcrumb-single{
        margin-top: 0px;
        padding: 0px;
        background-color: transparent;
    }
    .breadcrumb a,
    .breadcrumb span{
        color: #fff;
        padding: 0 1px;
    }
    .breadcrumb p>a:first-child{
        padding-left: 0px;
    }
    .breadcrumb span.breadcrumb_last{
        padding-left: 6px;
    }
    /**/
    .single-content{
        font-size: 14px;
        color: #333;
    }
    .single-content p{
        padding: 5px 0;
    }
    .single-content p:first-child{
        padding-top: 0px;
    }
    .single-content p:last-child{
        padding-bottom: 0px;
    }
    .single-content table,
    .single-pro-des table{
        width: 100% !important;
        margin: 10px 0;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        table-layout: fixed;
    }
    /*.single-content table thead,
    .single-content table tbody,
    .single-content table tr{
        white-space: nowrap;
        display: block !important;
    }
    .single-content table tr td:last-child,
    .single-content table tr th:last-child{
        width: 1%;
        white-space: nowrap;
    }*/
    .single-pro-des table{
        margin: 0px;
        margin-top: 15px;
        background-color: #fff;
    }
    .single-content table tr:nth-child(odd){
        background-color: #f9f9f9;
    }
    .single-content table tr th,
    .single-content table tr td,
    .single-pro-des table tr td{
        padding: 10px 15px;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .single-content table tr td[colspan="3"]{
        color: #fff;
        background-color: #518aaa;
        letter-spacing: 1px;
    }
    .single-content a{
        color: var(--th-color-second);
    }
    .single-content a:hover{
        text-decoration: underline;
    }
    .single-content img{
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        /*height: auto !important;*/
        margin: 0px auto;
        /*border: 1px solid #ddd;
        padding: 5px;
        box-sizing: border-box;*/
    }
    .single-content>h1,
    .single-content>h2,
    .single-content>h3,
    .single-content>h4{
        line-height: 1.5;
    }
    .single-content>h1{
        font-size: 22px;
        font-weight: 700;
        padding: 5px 0;
    }
    .single-content>h2{
        font-size: 20px;
        font-weight: 700;
        padding: 5px 0;
    }
    .single-content>h3{
        padding: 5px 0;
    }
    .single-content ul{
        padding: 5px 0;
    }
    .single-content ul li{
        position: relative;
        padding-left: 26px;
    }
    .single-content ul li:nth-child(n+2){
        margin-top: 3px;
    }
    .single-content ul li:before{
        position: absolute;
        content: '';
        top: 10px;
        left: 10px;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: var(--th-color-main);
    }
    .single-content p iframe,
    .single-content iframe{
        display: block !important;
        width: 100% !important;
        height: 500px !important;
    }
    .single-content .wp-caption{
        width: 100% !important;
        text-align: center;
        margin: 10px 0;
    }
    .single-content p.wp-caption-text{
        padding-top: 10px;
        text-align: center;
        line-height: 20px;
        color: #666;
        font-size: 14px;
        font-style: italic;
    }
    .single-chap-content br{
        display: none !important;
    }
    /**/
    .sg-story-top{
        background-color: #333;
        color: #fff;
    }
    .sg-story-top .container{
        padding: 40px 0;
    }
    .sg-story-info-left{
        width: 200px;
    }
    .sg-story-info-right{
        width: calc(100% - 230px);
    }
    .sg-story-thumb{
        margin-top: -50px;
        width: 100%;
/*        border-radius: 3px;*/
        background-color: #f9f9f9;
        box-shadow: 5px 5px 2px rgba(255, 255, 255, .1);
    }
    .sg-story-meta{
        font-size: 13px;
        overflow: hidden;
    }
    .sg-story-meta p{
/*        float: left;*/
/*        width: calc((100% - 30px) / 4);*/
        margin-right: 10px;
        position: relative;
        padding-left: 12px;
        box-sizing: border-box;
    }
    /*.sg-story-meta p:nth-child(4n+4){
        float: right;
        margin-right: 0px;
    }*/
    .sg-story-meta p strong{
        margin-right: 8px;
    }
    .sg-story-meta p:nth-child(n+2){
        margin-top: 10px;
    }
    .sg-story-meta p:before{
        position: absolute;
        content: '';
        top: 10px;
        left: 0px;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: var(--th-color-main);
    }
    .sg-story-meta a{
        color: var(--th-color-main);
    }
    .sg-story-meta p a:last-child span{
        display: none;
    }
    .sg-story-meta-cat a{
        display: inline-block;
        padding: 0 10px;
        height: 22px;
        line-height: 22px;
        border-radius: 22px;
        border: 1px solid var(--th-color-main);
    }
    .sg-story-meta-cat a:hover{
        color: #fff;
        background-color: var(--th-color-main);
    }
    .sg-story-meta p i{
        color: #ffc107;
        text-shadow: 1px 1px 0px rgba(0, 0, 0, .8);
        letter-spacing: 2px;
    }
    .sg-story-meta p>span{
        display: inline-block;
        padding: 0 10px;
        height: 23px;
        line-height: 23px;
        border-radius: 23px;
        color: #fff;
        background-color: var(--th-color-main);;
    }
    .sg-story-title{
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
        margin-top: 8px;
        color: #fff;
        margin-bottom: 15px;
        margin-left: 230px;
    }
    .sg-story-btn{
        margin-top: 20px;
    }
    .sg-story-btn-item{
        display: inline-block;
        height: 32px;
        line-height: 32px;
        border-radius: 32px;
        padding: 0 20px;
        color: #fff;
        border: 1px solid #525252;
        margin-top: 10px;
        margin-right: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
    }
    .sg-story-btn-item:hover{
        color: var(--th-color-main);
        border-color: var(--th-color-main);
    }
    .sg-story-btn-item i{
        margin-left: 10px;
        color: var(--th-color-main);
    }
    .sg-story-content{
        margin-top: 20px;
        max-height: 190px;
        overflow: hidden;
    }
    .sg-story-content .single-content{
        color: #fff;
    }
    .content-full{
        max-height: 100%;
    }
    .sg-story-more-content{
        display: none;
        margin-top: 10px;
        text-align: right;
    }
    .sg-story-more-content span{
        display: inline-block;
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        border-radius: 3px;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        background-color: var(--th-color-main);
    }
    .sg-story-more-content i{
        margin-left: 5px;
    }
    .sg-story-tab-nav{
        line-height: 40px;
    }
    .sg-story-tab-nav li{
        background-color: #2e2c2c;
        display: inline-block;
        color: #fff;
        padding: 0 20px;
        border-top: 2px solid #333;
/*        border-radius: 3px 3px 0 0;*/
        font-weight: 700;
        cursor: pointer;
    }
    .sg-story-tab-nav li.active{
        background-color: #333;
        border-top-color: var(--th-color-orange);
    }
    .sg-story-tab-nav li i{
        margin-right: 5px;
    }
    .sg-story-tab-nav li.active i{
        color: var(--th-color-orange);
    }
    .sg-story-tab-wrap{
        background-color: #333;
    }
    .sg-story-tab-item{
        padding: 20px;
        display: none;
    }
    .sg-story-tab-item.active{
        display: block;
    }
    .sg-story-tab-item .single-content{
        color: #c6c6c6;
    }
    .sg-story-tab-item .single-content strong{
        color: #fff;
    }

    /**/
    .sg-story-chap{
    }
    .sg-story-chap ul{
        float: left;
        width: calc((100% - 20px) / 2);
        margin-right: 20px;
    }
    .sg-story-chap ul:nth-child(2){
        float: right;
        margin-right: 0px;
    }
    .sg-story-chap ul li{
        position: relative;
    }
    .sg-story-chap ul li:nth-child(n+2){
        margin-top: 3px;
    }
    .sg-story-chap ul li a{
        display: block;
        position: relative;
        font-weight: 400;
        padding-left: 12px;
        color: #c6c6c6;
    }
    .sg-story-chap ul li a:hover{
        color: #fff;
/*        text-decoration: underline;*/
    }
    .sg-story-chap ul li a:before{
        position: absolute;
        font-family: 'Font Awesome 5 Pro';
        content: "\f0da";
        left: 0px;
        top: 0px;
        color: var(--th-color-main);
        font-weight: 700;
    }
    .sg-story-chap ul li a:hover:before{
        color: #fff;
    }

    /*
    * SINGLE CHAP.
    */
    .single-chap-wrap{
        background-color: #f4f4f4;
    }
    .single-chap-meta{
        text-align: center;
    }
    .single-chap-story{
        font-size: 25px;
        line-height: 1.5;
        font-weight: 700;
    }
    .single-chap-title{
        margin-top: 5px;
        font-size: 16px;
        font-weight: 700;
        color: var(--th-color-main);
    }
    .single-chap-nav{
        text-align: center;
    }
    .single-chap-nav-bottom{
        margin-bottom: 15px;
    }
    .single-chap-nav a,
    .single-chap-nav>span{
        display: inline-block;
        height: 45px;
        line-height: 45px;
        padding: 0 16px;
        color: var(--th-color-main);
        font-size: 15px;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 20px;
        background-color: #333;
    }
    .single-chap-nav a:hover,
    .single-chap-nav>span:hover{
        color: #fff;
        background-color: var(--th-color-main);
    }
    .single-chap-nav>span{
        margin: 0 5px;
        font-size: 25px;
        padding: 0 12px;
        line-height: 1;
        cursor: pointer;
        padding: 0px;
    }
    .single-chap-nav>span i{
        height: 100%;
        line-height: 45px;
        padding: 0 13px;
    }
    .single-chap-prev,
    .single-chap-next{
        width: 152px;
        padding: 0px !important;
        box-sizing: border-box;
        font-weight: 500;
    }
    .single-chap-prev i{
        margin-right: 5px;
    }
    .single-chap-next i{
        margin-left: 5px;
    }
    .btn-link-disable{
        opacity: .5;
        pointer-events: none;
    }
    .single-chap-nav-btn select{
        font-size: 14px;
        color: #333;
        height: 29px;
        outline: none;
        max-width: 150px;
        border: none;
        line-height: 1;
        margin: 0 10px;
        margin-top: 8px;
        border-radius: 3px;
        padding: 0 6px;
        padding-right: 0px;
        font-weight: 700;
    }
    .single-chap-nav-btn select option{
        font-weight: 700;
        padding: 3px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .single-chap-note{
        position: relative;
        padding: 0.5rem 1.25rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        text-align: center;
        font-size: 16px;
        width: 860px;
        margin: 0px auto;
        margin-top: 15px;
        box-sizing: border-box;
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
    }
    .single-chap-btn{
        position: relative;
        padding: 1rem 1.25rem;
        border: 2px dashed transparent;
        border-radius: 0.25rem;
        text-align: center;
        color: #0c5460;
        border-color: #ffeeba;
        background-color: #f9f9f9;
        width: 860px;
        margin: 0px auto;
        box-sizing: border-box;
    }
    .single-chap-btn span,
    .single-chap-btn a{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        border-radius: 3px;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        border: 1px solid transparent;
    }
    .single-chap-btn span:nth-child(n+2),
    .single-chap-btn a:nth-child(n+2){
        margin-left: 5px;
    }
    .single-chap-btn i{
        margin-right: 5px;
    }
    .single-chap-btn-comment{
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    .single-chap-btn-report{
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    .single-chap-comment{
        background-color: #f9f9f9;
        padding: 15px;
        border-radius: 5px;
        width: 860px;
        margin: 0px auto;
        margin-top: 0px;
        display: none;
        box-sizing: border-box;
        margin-top: 15px;
    }

    .single-chap-content{
        width: 860px;
        margin: 80px auto;
        margin-bottom: 40px;
        /*font-family: var(--th-font-bookerly);*/
        font-size: 23px;
        color: #2b2b2b;
        line-height: 1.7;
        /*text-align: justify;*/
    }
    .single-chap-content p{
        margin: 30px 0;
    }
    .single-chap-content img{
        max-width: 100% !important;
        margin: 20px auto;
    }
    /**/
    .block-comment{
        margin-top: 20px;
        padding: 10px;
        border-radius: 3px;
        background-color: #fff;
    }
    .block-comment-head{
        font-size: 16px;
        font-weight: 700;
        color: var(--th-color-main);
    }


    /*
    * SEARCH.
    */
    .search-item{
        box-shadow: none;
    }
    .search-item-thumb{
        border-radius: 3px;
        box-shadow: 0 3px 5px rgb(0, 0, 0, .1);
    }
    .search-item-info{
        margin-top: 10px;
        text-align: center;
    }
    .search-item-title{
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
    }
    .search-item-title a{
        color: #333;
    }
    

    /**/
    .grecaptcha-badge{
        display: none !important;
    }
    /**/
    input.wpcf7-not-valid,
    textarea.wpcf7-not-valid{
        border: 1px solid #f15628 !important;
    }
    .wpcf7-not-valid-tip{
        display: none !important;
    }
    .wpcf7-response-output{
        margin: 0px !important;
        margin-top: 10px !important;
        padding: 5px 10px !important;
        text-align: center;
        background-color: #fff;
        color: #333;
        line-height: 20px;
    }
    /**/
    #ez-toc-container {
        display: block;
        box-sizing: border-box;
    }
    #ez-toc-container a:before{
        display: none !important;
    }


    /*
    * HUYDEV SHORT CODE.
    */
    .hd-shc{
        padding: 10px 0;
    }
    .single-content .hd-shc:first-child{
        padding-top: 0px;
    }
    .single-content .hd-shc:last-child{
        padding-bottom: 0px;
    }
    .hd-shc-image-title {
        font-weight: 700;
        font-size: 13px;
    }
    .hd-shc-image-title img{
        margin-right: 10px;
    }
    /**/
    .empty-content{
        width: 100%;
        box-sizing: border-box;
        position: relative;
        padding: 8px 12px;
        border: 1px solid transparent;
/*        border-radius: 0.25rem;*/
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }


    /*
    * .
    */

    /*
    * .
    */
}