@charset "utf-8";

        @font-face {
            font-family: 'webtruyen_icon';
            src: url('https://img.dtruyen.com/webtruyen_icon.eot');
            src: url('https://img.dtruyen.com/webtruyen_icon.eot#iefix') format('embedded-opentype'), url('https://img.dtruyen.com/webtruyen_icon.woff2') format('woff2'), url('https://img.dtruyen.com/webtruyen_icon.woff') format('woff'), url('https://img.dtruyen.com/webtruyen_icon.ttf') format('truetype'), url('https://img.dtruyen.com/webtruyen_icon.svg?#webtruyen_icon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        html {
            color: #000;
            background: #eee;
            overflow-y: scroll;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            scroll-behavior: smooth;
        }

        html * {
            outline: 0;
            -webkit-text-size-adjust: none;
            -webkit-tap-highlight-color: transparent
        }

        body,
        html {
            font-family: "Segoe UI", Arial, sans-serif;
            font-size: 14px;
            background: #eee;
        }

        article,
        aside,
        blockquote,
        body,
        button,
        code,
        dd,
        details,
        div,
        dl,
        dt,
        fieldset,
        figcaption,
        figure,
        footer,
        form,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        header,
        hgroup,
        hr,
        input,
        legend,
        li,
        menu,
        nav,
        ol,
        p,
        pre,
        section,
        td,
        textarea,
        th,
        ul {
            margin: 0;
            padding: 0
        }

        input,
        select,
        textarea {
            font-size: 100%;
            font-family: inherit;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        fieldset,
        img {
            border: 0
        }

        abbr,
        acronym {
            border: 0;
            font-variant: normal
        }

        del {
            text-decoration: line-through
        }

        address,
        caption,
        cite,
        code,
        dfn,
        th,
        var {
            font-style: normal;
            font-weight: 400
        }

        ol,
        ul {
            list-style: none
        }

        caption,
        th {
            text-align: left
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 100%;
            font-weight: 600
        }

        q:after,
        q:before {
            content: ''
        }

        sub,
        sup {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline
        }

        sup {
            top: -.5em
        }

        sub {
            bottom: -.25em
        }

        a:hover {
            text-decoration: underline
        }

        a,
        ins {
            text-decoration: none
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        a {
            color: #016eb2;
            text-decoration: none;
        }

        small {
            font-size: 0.8em;
        }

        img {
            max-width: 100%;
            vertical-align: middle;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        [class^="fa-"]:before,
        [class*=" fa-"]:before {
            font-family: "webtruyen_icon";
            font-style: normal;
            font-weight: normal;
            display: inline-block;
            text-decoration: inherit;
            text-align: center;
            font-variant: normal;
            text-transform: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .fa-user:before {
            content: '\e800';
        }

        .fa-tags:before {
            content: '\e801';
        }

        .fa-refresh:before {
            content: '\e802';
        }

        .fa-eye:before {
            content: '\e803';
        }

        .fa-thumbs-o-up:before {
            content: '\e804';
        }

        .fa-signal:before {
            content: '\e805';
        }

        .fa-cloud-upload:before {
            content: '\f0ee';
        }

        .fa-angle-left:before {
            content: '\f104';
        }

        .fa-angle-right:before {
            content: '\f105';
        }

        .fa-angle-down:before {
            content: '\f107';
        }

        .fa-diamond:before {
            content: '\f219';
        }

        .fa-search:before {
            content: '\e80a';
        }

        .fa-cog:before {
            content: '\e80b';
        }

        .fa-off:before {
            content: '\e80e';
        }

        .fa-facebook:before {
            content: '\f09a';
        }

        .fa-money:before {
            content: '\f0d6';
        }

        .fa-history:before {
            content: '\f1da';
        }

        .fa-paypal:before {
            content: '\f1ed';
        }

        .fa-off:before {
            content: '\e80e';
        }

        .fa-heart-empty:before {
            content: '\e808';
        }

        .fa-list-bullet:before {
            content: '\f0ca';
        }

        .fa-star::before {
            content: '\e807'
        }

        .container {
            width: 100%;
            max-width: 1000px;
            margin: auto;
            display: flex;
        }

        #main {
            margin-top: 20px;
        }

        #main-header {
            height: 50px;
            background: #2C7ABE;
            color: #fff;
        }

        #main-header .logo {
            float: left;
            margin-right: 10px;
        }

        #main-header .logo a {
            margin: 5px 0;
            display: block;
            color: #fff;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 17px;
            text-transform: capitalize;
            font-weight: 600;
        }
		#main-header .logo  img {
			    height:30px;
		}
        #main-header ul.main-nav {
            float: left;
        }

        #main-header ul.main-nav>li {
            float: left;
            positioN: relative;
        }

        #main-header ul.main-nav>li>a {
            padding: 0 15px;
            height: 50px;
            line-height: 50px;
            color: #fff;
        }

        #main-header ul.main-nav>li ul {
            position: absolute;
            left: 0;
            top: 50px;
            background: #fff;
            width: 300px;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
            display: none;
            flex-wrap: wrap;
            z-index: 9;
        }

        #main-header ul.main-nav>li:hover ul {
            display: flex;
        }

        #main-header ul.main-nav>li ul li {
            width: 50%;
            flex-shrink: 0;
            border-right: 1px solid #ddd;
            border-top: 1px solid #ddd;
        }

        #main-header ul.main-nav>li ul li:nth-of-type(2n) {
            border-right: none;
        }

        #main-header ul.main-nav>li ul li:nth-of-type(1),
        #main-header ul.main-nav>li ul li:nth-of-type(2) {
            border-top: none;
        }

        #main-header ul.main-nav>li ul li a {
            padding: 8px 16px;
            display: block;
            color: #333;
            text-decoration: none;
        }

        #main-header ul.main-nav>li ul li a.vip-link {
            color: #e74c3c;
        }

        #main-header ul.main-nav>li ul li.compose-link {
            width: 100%;
            text-align: center;
        }

        #main-header ul.main-nav>li ul li.compose-link a {
            color: #e74c3c;
        }

        #main-header ul.main-nav>li ul li a:hover {
            background: #eee;
        }

        #search_form {
            float: left;
            padding: 8px 10px;
            position: relative;
        }

        #search_form input {
            width: 300px;
            height: 34px;
            line-height: 34px;
            padding: 0 15px;
            border-radius: 1px;
            border: none;
            background: #fff;
            float: left;
        }

        #search_form button {
            background: #e5e6e9;
            border: none;
            padding: 0 15px;
            line-height: 34px;
            margin-left: 3px;
            border-radius: 1px;
        }

        #userPanel {
            margin-left: auto;
            height: 50px;
            position: relative;
        }

        #userPanel .login-btn {
            line-height: 50px;
            color: #fff;
        }

        .main-col {
            flex-grow: 1;
        }

        .right-sidebar {
            flex-shrink: 0;
            width: 300px;
            margin-left: 20px;
        }

        .card-box {
            background: #fff;
            margin-bottom: 12px;
            border-top: 1px solid #e5e6e9;
            border-bottom: 1px solid #e5e6e9;
        }

        .card-box header {
            padding: 8px 10px;
            border-bottom: 1px solid #e5e6e9;
            color: #2F52B2;
            font-size: 18px;
            line-height: 18px;
            font-weight: 600;
            letter-spacing: -2px;
            text-transform: uppercase;
        }

        .card-box header i {
            margin: 0 10px;
        }

        .card-box footer {
            text-align: center;
            padding: 8px 10px;
        }

        .card-box footer .show-more-btn {
            padding: 5px 20px;
            font-size: 14px;
            border-radius: 15px;
            background: #737373;
            color: #fff;
            text-align: center;
            cursor: pointer;
            white-space: nowrap;
            display: inline-block;
        }

        .card-box>nav {
            padding: 5px;
            border-bottom: 1px dashed #e5e6e9;
            text-align: center;
            display: flex;
            width: 100%;
            overflow: hidden;
        }

        .card-box>nav a {
            font-size: 13px;
            letter-spacing: -.5px;
            display: inline-block;
            padding: 5px;
            background: #555;
            color: #fff;
            margin-bottom: 5px;
            border-radius: 2px;
            flex-shrink: 0;
            margin-right: 10px;
        }

        .vip-1:before {
            display: none;
            content: "VIP";
            color: #e74c3c;
            border: 1px solid #e74c3c;
            width: 27px;
            font-size: 13px;
            font-weight: 500;
            padding: 0 3px;
            letter-spacing: -1px;
            margin-left: 5px;
        }

        .hot-1:before {
            content: "HOT";
            color: #2c7abe;
            border: 1px solid #2c7abe;
            width: 27px;
            font-size: 13px;
            font-weight: 500;
            padding: 0 3px;
            letter-spacing: -1px;
            margin-left: 5px;
        }

        .story-list .info .label-type-1::before,
        .story-list .info .label-type-2::before,
        .story-list .info .label-type-3::before {
            color: #e74c3c;
            border: 1px solid #e74c3c;
            width: 27px;
            font-size: 13px;
            font-weight: 500;
            padding: 0 3px;
            letter-spacing: -1px;
            margin-left: 5px;
        }

        .story-list .info .label-type-1::before {
            content: "SÁNG TÁC";
        }

        .story-list .info .label-type-2::before {
            content: "DỊCH";
        }

        .story-list .info .label-type-3::before {
            content: "CONVERT";
        }

        .full-end:before {
            content: "FULL";
            color: #090;
            border: 1px solid #090;
            width: 27px;
            font-size: 13px;
            font-weight: 500;
            padding: 0 3px;
            letter-spacing: -1px;
            margin-left: 5px;
        }

        .side-description {
            line-height: 1.3em;
            margin-bottom: 15px;
            padding: 10px;
            background: #fff;
            border: 1px solid #ddd;
        }

        .side-description ul {
            margin-left: 10px;
            list-style: disc;
        }

        #reading-stories {
            margin: 10px;
        }

        #reading-stories>div {
            margin-bottom: 10px;
            display: flex;
            background: #ffeecc;
            border: 1px solid #ffcc66;
            border-radius: 40px;
            height: 40px;
        }

        #reading-stories>div:last-child {
            margin-bottom: 0;
        }

        #reading-stories>div>a {
            flex-grow: 1;
            overflow: hidden;
            color: #000;
        }

        #reading-stories>div>a h5 {
            display: block;
            white-space: nowrap;
            font-weight: 600;
            font-size: 13px;
        }

        #reading-stories>div>a em {
            margin-right: 20px;
        }

        #reading-stories>div>a em,
        #reading-stories>div>a span {
            font-size: 12px;
        }

        #reading-stories>div>i {
            float: left;
            width: 40px;
            line-height: 40px;
            text-align: center;
            flex-shrink: 0;
        }

        #reading-stories>div>button {
            flex-shrink: 0;
            width: 44px;
            border: none;
            background: none;
            font-size: 21px;
            text-align: center;
            line-height: 36px;
            margin: 2px 0;
            border-left: 1px solid #ffcc66;
        }

        #reading-stories>div>span {
            line-height: 40px;
            flex-shrink: 0;
            font-size: 13px;
            text-align: right;
            margin: 0 5px 0 10px;
        }

        .promo-author {
            background: #fff;
            margin-bottom: 12px;
            border-top: 1px solid #e5e6e9;
            border-bottom: 1px solid #e5e6e9;
            text-align: center;
            padding: 10px;
            font-size: 16px;
        }

        .promo-author p {
            margin-bottom: 10px;
        }

        .promo-author .gogo {
            display: inline-block;
            padding: 6px 16px;
            white-space: nowrap;
            border-radius: 2px;
            color: #fff;
            background: #e91b0c;
            margin-top: 10px;
            text-decoration: none;
        }

        @media print {

            html,
            body {
                display: none;
            }
        }

        @media only screen and (max-width: 860px) {
            #main-header:after {
                content: "";
                display: table;
                clear: both;
            }

            #main-header ul.main-nav>li>a {
                padding: 0 5px;
            }

            #search_form input {
                width: 170px;
            }

            .container {
                display: block;
            }

            .card-box>nav {
                overflow: scroll;
            }

            .right-sidebar {
                width: auto;
                margin-right: 20px;
            }

            #userPanel {
                float: right;
            }
        }

        @media only screen and (max-width: 600px) {
            #header {
                height: 100px;
            }
        }

        .swipe-stories {
            margin: 10px 5px;
            overflow-x: hidden;
            position: relative;
        }

        .swipe-stories ul {
            display: flex;
            transition: all 0.5s;
            -o-transition: all 0.5s;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            transform: translateX(0);
            -webkit-transform: translateX(0);
            -o-transform: translateX(0);
            -moz-transform: translateX(0);
        }

        .swipe-stories ul li {
            width: 33.3334%;
            flex-shrink: 0;
            padding: 0 5px;
        }

        .swipe-stories .direction-btn {
            position: absolute;
            top: 35%;
            height: 100px;
            margin-top: -50px;
            line-height: 100px;
            z-index: 9;
            font-size: 5rem;
            color: #fff;
            text-shadow: 0 0 10px #000;
        }

        .swipe-stories .direction-btn.disabled {
            opacity: 0.2;
        }

        .swipe-stories .direction-btn.prev {
            left: 15px;
        }

        .swipe-stories .direction-btn.next {
            right: 15px;
        }

        .story-hot {
            background: #fff;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .story-hot .thumb {
            display: block;
        }

        .story-hot .thumb img {
            width: 100%;
            height: auto;
            display: block;
        }

        .story-hot .info {
            padding: 8px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            text-align: center;
        }

        .story-hot .title a {
            color: #fff;
        }

        .story-hot .last-chapter {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);
        }

        .grid-stories {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 10px;
        }

        .story-grid {
            width: 152px;
        }

        .story-grid .thumb {
            display: block;
            position: relative;
        }

        .story-grid .thumb img {
            width: 100%;
            height: auto;
            display: block;
        }

        .story-grid .thumb .label-type-1,
        .story-grid .thumb .label-type-2,
        .story-grid .thumb .label-type-3 {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 45px;
            height: 52px;
            line-height: 36px;
            background: url(https://img.dtruyen.com/badge2.svg) no-repeat;
            background-size: contain;
            color: #fff;
            font-weight: bold;
            text-align: center;
            font-size: 1.2em;
        }

        .story-grid .thumb .label-type-1::before {
            content: "ST"
        }

        .story-grid .thumb .label-type-2::before {
            content: "D"
        }

        .story-grid .thumb .label-type-3::before {
            content: "CV"
        }

        .story-grid .info {
            padding: 8px;
            text-align: center;
        }

        .story-grid .title a {
            color: #000;
        }

        .story-grid .last-chapter {
            color: #888;
            font-size: 12px;
        }

        .story-list {
            display: flex;
            padding: 8px 10px;
            border-bottom: 1px dashed #ddd;
        }

        .story-list:hover {
            background: #eee;
        }

        .story-list .info {
            flex-grow: 1;
        }

        .story-list .info .title {
            font-size: 15px;
            line-height: 14px;
            font-weight: 500;
            display: inline;
            letter-spacing: -0.5px;
            text-transform: capitalize;
        }

        .story-list .info .title a {
            color: #444;
        }

        .story-list .last-chapter,
        .story-list .last-updated2 {
            font-size: 13px;
            color: #707070;
            text-align: right;
            flex-shrink: 0;
        }

.story-list .last-chapter {
    width: 140px;
    height: 20px;
    overflow: hidden;
}

        .story-list .last-updated2 {
            width: 100px;
        }

        .categories a {
            width: 50%;
            float: left;
            padding: 6px 6px 6px 20px;
            color: #444;
            text-transform: capitalize;
        }

        .categories a:nth-of-type(1),
        .categories a:nth-of-type(2),
        .categories a:nth-of-type(3),
        .categories a:nth-of-type(4) {
            font-weight: 600;
            color: #df1a0c;
        }

        .categories a:before {
            font-family: webtruyen_icon;
            display: inline-block;
            vertical-align: baseline;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: "\e801";
            margin-right: 5px;
        }

        .categories a:nth-of-type(1):before,
        .categories a:nth-of-type(2):before,
        .categories a:nth-of-type(3):before,
        .categories a:nth-of-type(4):before {
            content: "\f219";
        }

        .news-item .thumb {
            width: 70px;
            padding: 10px;
            float: left;
        }

        .news-item .thumb img {
            height: auto;
        }

        .news-item .title {
            padding-top: 10px;
            padding-right: 10px;
            font-weight: normal;
            margin-left: 70px;
        }

        .news-item .title a {
            color: #444;
            text-transform: capitalize;
        }

        .story-top {
            border-bottom: 1px dashed #e5e6e9;
        }

        .story-top:before {
            width: 50px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            font-weight: 200;
            font-size: 25px;
            letter-spacing: -.5px;
            color: #2980b9;
            float: left;
        }

        .top-stories .story-top:nth-of-type(1):before {
            content: "01";
            color: #e74c3c;
        }

        .top-stories .story-top:nth-of-type(2):before {
            content: "02";
            color: #3a833c;
        }

        .top-stories .story-top:nth-of-type(3):before {
            content: "03";
            color: #8f6b00;
        }

        .top-stories .story-top:nth-of-type(4):before {
            content: "04";
        }

        .top-stories .story-top:nth-of-type(5):before {
            content: "05";
        }

        .top-stories .story-top:nth-of-type(6):before {
            content: "06";
        }

        .top-stories .story-top:nth-of-type(7):before {
            content: "07";
        }

        .top-stories .story-top:nth-of-type(8):before {
            content: "08";
        }

        .top-stories .story-top:nth-of-type(9):before {
            content: "09";
        }

        .top-stories .story-top:nth-of-type(10):before {
            content: "10";
        }

        .story-top:after {
            content: "";
            display: table;
            clear: both;
        }

        .story-top .title {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -1px;
            padding-top: 6px;
            padding-right: 6px;
            overflow: hidden;
        }

        .story-top .title a {
            color: #333;
        }

        .story-top .viewed {
            color: #757575;
            font-size: 11px;
        }

        .short-stories {
            display: flex;
        }

        .short-stories .large {
            width: 345px;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .short-stories .large .short-story {
            position: relative;
        }

        .short-stories .large .title {
            position: absolute;
            padding: 10px;
            background: rgba(0, 0, 0, 0.8);
            bottom: 0;
            left: 0;
            right: 0;
        }

        .short-stories .large .title a {
            color: #fff;
        }

        .short-stories .small {
            flex-grow: 1;
        }

        .short-stories .small .short-story {
            margin-bottom: 5px;
        }

        .short-stories .small .thumb {
            float: left;
            margin-right: 10px;
        }

        .short-stories .small .title {
            font-weight: normal;
        }

        .short-stories .small .title a {
            color: #333;
        }
		
		
		
		
		
		
		
		
		
		
		
		
#breadcrumb span,
#breadcrumb h1 {
    display: inline-block;
    font-weight: 400;
}

#breadcrumb a {
    color: #595959;
    display: inline-block;
    line-height: 40px;
}

.fa-folder-open:before {
    content: '\e80f';
}

.fa-home:before {
    content: '\e806';
}

.fa-paper-plane:before {
    content: '\f1d8';
}

.fa-chat:before {
    content: '\e809';
}

.fa-list-bullet:before {
    content: '\f0ca';
}

.fa-doc-text:before {
    content: '\f0f6';
}

.fa-star:before {
    content: '\e807';
}

.news-item .thumb {
    width: 70px;
    padding: 10px;
    float: left;
}

.news-item .thumb img {
    height: auto;
}

.news-item .title {
    padding-top: 10px;
    padding-right: 10px;
    font-weight: normal;
    margin-left: 70px;
}

.news-item .title a {
    color: #444;
    text-transform: capitalize;
}

.categories a {
    width: 50%;
    float: left;
    padding: 0px 0px 0px 20px;
    color: #444;
    text-transform: capitalize;
    display: block;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
} 

.categories a:nth-of-type(1),
.categories a:nth-of-type(2),
.categories a:nth-of-type(3),
.categories a:nth-of-type(4) {
    font-weight: 600;
    color: #df1a0c;
}

.categories a:before {
    font-family: webtruyen_icon;
    display: inline-block;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e801";
    margin-right: 5px;
}

.categories a:nth-of-type(1):before,
.categories a:nth-of-type(2):before,
.categories a:nth-of-type(3):before,
.categories a:nth-of-type(4):before {
    content: "\f219";
}

#story-detail {
    display: flex;
    width: 100%;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
}

#story-detail .col1 {
    width: 220px;
    flex-shrink: 0;
    margin-right: 20px;
}

#story-detail .col2 {
    flex-grow: 1;
}

#story-detail .thumb {
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
}

#story-detail .label-vip-1,
#story-detail .label-hot-1 {
    position: absolute;
    top: 10px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    transform-origin: center;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
}

#story-detail .label-vip-1 {
    background: #df1a0c;
    left: -25px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    display: none;
}

#story-detail .label-hot-1 {
    background: #2c7abe;
    right: -25px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

#story-detail .label-vip-1:before {
    content: "VIP";
}

#story-detail .label-hot-1:before {
    content: "HOT";
}

#story-detail .label-type-1,
#story-detail .label-type-2,
#story-detail .label-type-3 {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 60px;
    height: 70px;
    line-height: 48px;
    background: url(https://img.dtruyen.com/badge2.svg) no-repeat;
    background-size: contain;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
}

#story-detail .label-type-1::before {
    content: "ST"
}

#story-detail .label-type-2::before {
    content: "D"
}

#story-detail .label-type-3::before {
    content: "CV"
}

#story-detail .infos p {
    margin: 8px 0;
    line-height: 1.5;
    display: flex;
}

#story-detail .infos p i {
    width: 20px;
    color: #555;
    flex-shrink: 0;
}

#story-detail .infos p span {
    flex-grow: 1;
    flex-wrap: wrap;
}

#story-detail .infos p span a:after {
    content: ", ";
}

#story-detail .infos p span a:last-child:after {
    content: "";
}

#story-detail .title {
    text-transform: uppercase;
    color: #df1a0c;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

#story-detail .rate {
    text-align: center;
    margin: 8px 0;
}

#story-detail .actions {
    text-align: center;
    margin-bottom: 15px;
}

#story-detail .actions a,
.comment-form [type="submit"],
.replyComment button {
    display: inline-block;
    padding: 6px 16px;
    white-space: nowrap;
    border-radius: 2px;
    color: #fff;
}

#story-detail .actions a.read-btn,
#story-detail .actions a.chapter-list {
    background: #2c7abe;
    font-size: 13px;
}

#story-detail .actions a#add_favorite {
    background: #e91b0c;
    margin-top: 10px;
}

#story-detail .actions a.read-btn {
    padding: 12px 16px;
    font-weight: bold;
    text-transform: uppercase;
}

#story-detail .actions hr {
    border-top: none;
    margin-top: 10px;
}

#story-detail .actions .reading-info {
    color: #666;
    padding: 10px 0;
    font-size: 13px;
    text-transform: capitalize;
}

#story-detail .desc-title {
    margin: 8px 0;
    border: 1px solid #eee;
    width: 100vw;
    margin-left: -10px;
    padding: 10px 5px;
}

#story-detail .description {
    overflow: hidden;
    padding-top: 15px;
    height: 310px;
    border-top: 1px solid #ddd;
    position: relative;
    font-size: 15px;
    line-height: 1.5;
}

#story-detail .description:after {
    content: "Xem thêm";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 20px;
    font-size: 13px;
    font-style: italic;
    color: #4267b2;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
}

#story-detail .description.show {
    height: auto;
    padding-bottom: 30px;
}

#story-detail .description.show:after {
    content: "Rút gọn";
}

.combo-box {
    padding: 20px;
    text-align: center;
    position: relative;
    border: 2.5px dashed #2c7abe;
}

.combo-box p {
    font-size: 1.3em;
    margin-bottom: 10px;
}

.combo-box span {
    display: block;
}

.combo-box .point {
    color: #e74c3c;
}

.combo-box .guide {
    font-size: 12px;
    font-style: italic;
    color: #888;
}

#buy-combo {
    display: inline-block;
    cursor: pointer;
    padding: 6px 16px;
    white-space: nowrap;
    border-radius: 2px;
    color: #fff;
    background: #2c7abe;
    font-size: 14px;
    border: none;
    text-transform: uppercase;
    line-height: 30px;
}

.rate-holder {
    position: relative;
    color: #fafafa;
    display: inline-block;
    text-align: left;
    font-family: webtruyen_icon;
    font-size: 18px;
}

.rate-holder:after {
    content: "\e807 \e807 \e807 \e807 \e807 \e807 \e807 \e807 \e807 \e807";
    text-shadow: 0 0 1px #000;
    letter-spacing: 5px;
}

.rate-holder span {
    position: absolute;
    top: 0;
    left: 0;
    color: #ffc74c;
    overflow: hidden;
    height: 100%;
    white-space: nowrap;
}

.rate-holder p {
    position: absolute;
    top: 0;
    left: 0;
    color: #ffc74c;
    overflow: hidden;
    height: 100%;
    white-space: nowrap;
    width: 100%;
    letter-spacing: 5px;
}

.rate-holder p i {
    opacity: 0;
}

.rate-holder p i:hover {
    opacity: 0.5;
    color: #000;
}

.rate-holder span:after {
    content: "\e807 \e807 \e807 \e807 \e807 \e807 \e807 \e807 \e807 \e807";
    letter-spacing: 5px;
}

.chapters li {
    border-bottom: 1px dashed #ddd;
}

.chapters li a {
    padding: 6px 2px 6px 16px;
    color: #333;
    display: block;
    font-size: 15px;
    text-transform: capitalize;
}

.chapters li:hover {
    background: #eee;
}

.chapters li a:visited {
    color: #888;
}

.chapters li.vip-1:before,
.chapters.v1 li.vip-0:before {
    display: none;
    position: absolute;
    left: 0;
    top: 5px;
    text-align: center;
    width: 20px;
    font-size: 11px;
    height: 16px;
    line-height: 16px;
    color: #fff;
    background: #e74c3c;
}

.chapters.v1 li.vip-0:before {
    content: "FREE";
    border: 1px solid #090;
    background: #090;
    font-weight: 500;
    padding: 0 3px;
    letter-spacing: -1px;
    margin-left: 5px;
}

.chapters li:last-child {
    border-bottom: none;
}

.pagination-control {
    margin: 10px 0;
    text-align: center;
}

.pagination-control .pagination li {
    display: inline-block;
}

.pagination-control .pagination li a {
    padding: 5px 12px;
    display: inline-block;
    color: #737373;
    font-size: 18px;
    font-weight: 500;
}

.pagination-control .pagination li.active a {
    background: #2F52B2;
    color: #fff;
}

.goto {
    width: 170px;
    margin: 5px auto 15px auto;
}

.goto label {
    font-size: 12px;
    line-height: 34px;
    float: left;
    margin-right: 5px;
}

.goto input {
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    width: 60px;
    float: left;
}

.goto button {
    background: #2F52B2;
    color: #fff;
    border: none;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
}

.comment-form {
    padding: 20px;
}

.comment-form textarea {
    width: 100%;
    height: 70px;
    padding: 10px;
    background: #f2f2f2;
}

.comment-form [type="submit"] {
    border: none;
    background: #2980b9;
    color: #fff;
}

#comment-char-count {
    font-style: italic;
    font-weight: 600;
    font-size: 13px;
}

#comment-char-count span {
    color: #e74c3c;
}

.comment-form .text-right {
    text-align: right;
}

#comment-more {
    text-align: center;
    margin-bottom: 10px;
}

#comment-more a {
    display: inline-block;
    outline: 0;
    padding: 6px 16px;
    cursor: pointer;
    white-space: nowrap;
    background-color: #757575;
    color: #fff;
    border-radius: 30px;
}

.story-top {
    border-bottom: 1px dashed #e5e6e9;
}

.story-top:before {
    width: 50px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: 200;
    font-size: 25px;
    letter-spacing: -.5px;
    color: #2980b9;
    float: left;
}

.top-stories .story-top:nth-of-type(1):before {
    content: "01";
    color: #e74c3c;
}

.top-stories .story-top:nth-of-type(2):before {
    content: "02";
    color: #3a833c;
}

.top-stories .story-top:nth-of-type(3):before {
    content: "03";
    color: #8f6b00;
}

.top-stories .story-top:nth-of-type(4):before {
    content: "04";
}

.top-stories .story-top:nth-of-type(5):before {
    content: "05";
}

.top-stories .story-top:nth-of-type(6):before {
    content: "06";
}

.top-stories .story-top:nth-of-type(7):before {
    content: "07";
}

.top-stories .story-top:nth-of-type(8):before {
    content: "08";
}

.top-stories .story-top:nth-of-type(9):before {
    content: "09";
}

.top-stories .story-top:nth-of-type(10):before {
    content: "10";
}

.story-top:after {
    content: "";
    display: table;
    clear: both;
}

.story-top .title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -1px;
    padding-top: 6px;
    padding-right: 6px;
    overflow: hidden;
}

.story-top .title a {
    color: #333;
    line-height: 20px;
    max-height: 20px;
    overflow: hidden;
    display: block;
}

.story-top .viewed {
    color: #757575;
    font-size: 11px;
}

.comment-list {
    margin: 10px 0;
    background: #fff;
    color: #333;
}

.comment {
    padding: 3px 10px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    background: #fff;
    position: relative;
}

.comment.hash {
    background: #ddd;
}

.comment.replyComment {
    padding-left: 30px;
    border-bottom: 1px dotted #ddd !important;
    clear: both;
}

.replyComment button {
    border: none;
    background: #2980b9;
}

.comment .avatar-letter,
.comment img.avatar {
    float: left;
    margin-right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    line-height: 34px;
    background: #ddd;
    text-align: center;
    border: 3px solid #777;
}

.comment.vip .avatar-letter,
.comment.vip img.avatar {
    border-color: #ffd600;
}

.comment.admin .avatar-letter,
.comment.admin img.avatar {
    border-color: #df1a0c;
}

.comment .comment-content {
    border: 0;
    margin-left: 55px;
}

.comment.replyComment .comment-content {
    margin-left: 25px;
    display: flex;
}

.comment .comment-content .userinfo {
    margin-bottom: 5px;
    font-size: 13px;
}

.comment .comment-content .userinfo a {
    font-weight: 700;
    float: left;
    text-decoration: none;
}

.comment .comment-content .userinfo .labels {
    float: left;
    margin-left: 10px;
}

.comment .comment-content .userinfo .labels span {
    padding: 0 4px;
    line-height: 16px;
    font-size: 11px;
    color: #fff;
    background: #777;
    display: inline-block;
}

.comment .comment-content .userinfo .labels .label-vip {
    background: #d5b300;
}

.comment .comment-content .userinfo .labels .label-admin {
    background: #df1a0c;
}

.comment .comment-content .userinfo .labels .label-author {
    background: #2196f3;
}

.comment .comment-content .userinfo .labels .label-trans {
    background: #4caf50;
}

.comment .comment-content .userinfo .labels .label-converter {
    background: #ff7043;
}

.comment .comment-content .userinfo i {
    color: #aaa;
    font-size: 4px;
    margin: 0 8px;
    float: left;
    height: 13px;
    line-height: 14px;
}

.comment .comment-content .message {
    line-height: 21px;
    overflow-x: hidden;
}

.comment .comment-content .comment-text,
.comment-textarea {
    width: 100%;
    border: 1px solid #eee;
    resize: none;
    font-size: 13px;
    height: 50px;
}

.comment .acts {
    float: right;
    text-align: right;
    font-size: 12px;
    line-height: 20px;
}

.comment .acts .action-reply-comment {
    font-weight: bold;
}

.comment .acts .action-love-comment {
    color: #ec5b24;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #ddd;
}

.comment .acts .action-love-comment.liked {
    color: #aaa;
    cursor: default;
}

.comment .acts .action-love-comment span {
    color: #aaa;
}

.comment .acts .action-remove-comment {
    color: #aaa;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #ddd;
}

.comment.subComment {
    margin-left: 50px;
    border-left: 3px solid #eee;
}

.donateBox {
    color: #285b2a;
    background-color: #e2f2e3;
    position: relative;
    padding: .9375rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #5ab55e;
    text-align: center;
    font-size: 1.1em;
    line-height: 1.3em;
    font-weight: 500;
}

.donateBox p {
    margin-bottom: 7px;
}

#show-donate-box {
    display: inline-block;
    padding: 6px 16px;
    white-space: nowrap;
    border-radius: 2px;
    color: #fff;
    background: #2c7abe;
    font-size: 13px;
    text-transform: capitalize;
}

.single-post .list-stories>ul {
    display: flex;
}

.single-post .list-stories li {
    margin: 0 10px;
    padding: 15px;
    border-bottom: 1px dashed #e5e6e9;
    width: 50%;
}

.related-story {
    display: flex;
}

.related-story .thumb {
    display: block;
    width: 35px;
    margin-right: 10px;
    flex-shrink: 0;
}

.related-story .info {
    flex-grow: 1;
}

.related-story .info .title {
    font-size: 15px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: -1px;
    display: inline;
}

.related-story .info .title a {
    color: #444;
}

.related-story .last-chap {
    width: 150px;
    font-size: 12px;
    color: #707070;
    flex-shrink: 0;
}

.related-story p {
    font-size: 15px;
    color: #000;
    margin-top: 4px;
}










.list-stories.archive > ul {
    display: block;
}
.list-stories.archive > ul > li {
    width: 100%;
}

.list-stories.archive li{margin:0 10px;padding:15px 0;border-bottom: 1px dashed #e5e6e9;}
.list-stories.archive .story-list{display:flex;}
.list-stories.archive .story-list .thumb{display:block;width:35px;margin-right:10px;flex-shrink: 0;}
.list-stories.archive .story-list .info{flex-grow: 1;}
.list-stories.archive .story-list .info .title{ font-size: 15px; line-height: 14px; font-weight: 600; letter-spacing: -1px; display: inline;
}
.list-stories.archive .story-list .info .title a{color: #444;}
.list-stories.archive .story-list .last-chap{width:150px;font-size: 12px;color: #707070;flex-shrink: 0;}
.list-stories.archive .story-list p{font-size: 15px;color: #000;margin-top: 4px;text-align: left;}








#chapter-page{width: 100%; max-width: 1000px; margin: auto;}
#chapter{ background: #fff; border: 1px solid #e5e6e9;
}
#chapter header{margin:15px;padding: 10px;border:2px dotted #757575;border-radius: 10px;text-align:center;}
#chapter header .story-title{font-weight: 700;font-size: 20px;color:#df1a0c;text-transform: uppercase;}
#chapter header .story-title a{color:#df1a0c;}
#chapter header .chapter-title{font-weight:500;font-size:16px;color:#555;text-transform: capitalize;margin: 7px 0;}
#chapter header p{margin: 10px 0;}
.chapter-button{margin: 15px 0;text-align:center;}
.chapter-button a{ color:#fff; display: inline-block; outline: 0; padding: 10px 16px; cursor: pointer; background:#2980b9; font-size: 18px;
}
.chapter-button a.all-chapters,.chapter-button a.config{background:#888;}
.chapter-button a.disabled{opacity:0.1;}
.chapter-button select{height:32px;line-height:32px;border:1px solid #ddd;max-width: 200px}
#configReader{display:none;width:500px;padding:15px;border:1px dashed #ddd;}
#configReader p{ border-bottom: 1px dotted #757575; padding: 5px; line-height:34px; display:flex; width:100%;
}
#configReader p label{float:left;width:150px;flex-shrink: 0;}
#configReader select{padding:5px 10px;line-height:34px;height:34px;border:1px solid #ddd;flex-grow: 1;}
#configReader span{flex-grow: 1;text-align: center;}
#configReader button{background: none;border:none;height:34px;line-height:34px;width:40px;text-align:center;margin: 0 5px;font-size:2em;}
#chapter-content{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; font-family: "Palatino Linotype", "Noticia Text", "Times New Roman", serif; font-size: 22px; text-align: justify; padding: 12px; line-height:1.5em; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto;
}
#chapter-content p{margin-bottom: 20px;}
#pre-vip{ background-color: #f1f1f1;text-align:center;border-radius: 2px;padding-left: 8px; padding-right: 8px;margin: 24px 0;
}
#pre-vip span{color:#df1a0c;}
#pre-vip ol{list-style: decimal;text-align: left;margin-left: 40px;}
#pre-vip ol li{margin: 8px 0;}
#click-to-show{color:#fff; display: block; outline: 0; padding: 6px 16px; margin: 0 10px;text-align:center; cursor: pointer; background:#616161;}
.card-box{ background: #fff; margin-bottom: 12px; border-top: 1px solid #e5e6e9; border-bottom: 1px solid #e5e6e9;
}
.card-box header{ padding: 6px 10px; border-bottom: 1px solid #e5e6e9; color: #016eb2; font-size: 16px; line-height: 1.3em; font-weight: 600;
}
.text-webtruyen{display: flex; flex-direction: row; font-size: 16px; color: slategray; margin-top: 0px; margin-bottom: 0px;}
.text-webtruyen:before, .text-webtruyen:after { content: ""; flex: 1 1; border-bottom: 1px solid #cfcbcb; margin: auto;
}
.comment-form{padding: 20px;}
.comment-form textarea{width:100%;height:70px;padding:10px;background:#f2f2f2;}
.comment-form [type="submit"]{border:none;background:#2980b9;color:#fff;display:inline-block;padding: 6px 16px;white-space: nowrap;border-radius: 2px;}
#comment-char-count{font-style: italic;font-weight:600;font-size:13px;}
#comment-char-count span{color:#e74c3c;}
.comment-form .text-right{text-align:right;}
.comment-list { margin: 10px 0; background:#fff; color: #333;
}
.comment { padding: 3px 10px; transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; background:#fff; position: relative;
}
.comment.hash{background:#ddd;}
.comment.replyComment { padding-left: 30px; border-bottom: 1px dotted #ddd !important; clear: both;
}
.replyComment button{border:none;background:#2980b9;}
.comment .avatar-letter,.comment img.avatar { float: left; margin-right: 15px; width:40px;height:40px;border-radius: 20px; line-height:34px;background: #ddd; text-align: center; border: 3px solid #777;
}
.comment.vip .avatar-letter,.comment.vip img.avatar{ border-color: #ffd600;
}
.comment.admin .avatar-letter,.comment.admin img.avatar{ border-color: #df1a0c;
}
.comment .comment-content { border: 0; margin-left: 55px;
}
.comment.replyComment .comment-content{margin-left:25px;display:flex;}
.comment .comment-content .userinfo { margin-bottom: 5px; font-size: 13px;
}
.comment .comment-content .userinfo a { font-weight: 700; float: left; text-decoration: none;
}
.comment .comment-content .userinfo .labels{float:left;margin-left: 10px;}
.comment .comment-content .userinfo .labels span{padding: 0 4px;line-height:16px;font-size: 11px;color:#fff;background:#777;display:inline-block;}
.comment .comment-content .userinfo .labels .label-vip{background: #d5b300;}
.comment .comment-content .userinfo .labels .label-admin{background: #df1a0c;}
.comment .comment-content .userinfo .labels .label-author{background: #2196f3;}
.comment .comment-content .userinfo .labels .label-trans{background: #4caf50;}
.comment .comment-content .userinfo .labels .label-converter{background: #ff7043;}
.comment .comment-content .userinfo i { color: #aaa; font-size: 4px; margin: 0 8px; float: left; height: 13px; line-height: 14px;
}
.comment .comment-content .message { line-height: 21px; overflow-x: hidden;
}
.comment .comment-content .comment-text, .comment-textarea { width: 100%; border: 1px solid #eee; resize: none; font-size: 13px; height: 50px;
}
.comment .acts { float: right; text-align: right; font-size: 12px; line-height: 20px;
}
.comment .acts .action-reply-comment { font-weight: bold;
}
.comment .acts .action-love-comment { color: #ec5b24; padding-left: 10px; margin-left: 10px; border-left: 1px solid #ddd;
}
.comment .acts .action-love-comment.liked { color: #aaa; cursor: default;
}
.comment .acts .action-love-comment span { color: #aaa;
}
.comment .acts .action-remove-comment{ color: #aaa; padding-left: 10px; margin-left: 10px; border-left: 1px solid #ddd;
}
.comment.subComment { margin-left: 50px; border-left: 3px solid #eee;
}
#comment-more{text-align: center;margin-bottom: 10px;}
#comment-more a{display: inline-block;outline: 0;padding: 6px 16px;cursor: pointer; white-space: nowrap;background-color: #757575;color:#fff;border-radius:30px;}
.switcher { width: 100%; position: relative; margin: 16px 0; background: #fff; padding: 5px 10px; border: 1px solid #ddd;
}
.switcher input { position: absolute; opacity: 0;
}
.switcher label { line-height: 24px; display: block; position: relative; font-size: 17px;
}
.switcher label:before { content: ""; display: inline-block; position: absolute; width: 40px; height: 14px; top: 5px; right: 0; border-radius: 8px; background-color: #b2b2b2;
}
.switcher label:after { content: ""; position: absolute; width: 24px; height: 24px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); background-color: #ececec; right: 22px; border-radius: 50%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.switcher input[type="checkbox"]:checked + label::before { background-color: rgba(66,103,178,0.4);
}
.switcher input[type="checkbox"]:checked + label::after { right: -6px; background-color: #4267b2;
}
.wt-ads2 { text-align: center; padding: 5px 0; background: #f5f5f5; margin: 20px auto;
}
.wt-ads2:before,.wt-ads:before { display: block; text-align: center; content: "Advertisements"; font-size: 14px; color: #888; margin-bottom: 5px; font-weight: bold;
}
.wt-ads{display:flex;margin: 30px auto;width:620px;justify-content: space-between;position: relative;padding-top:30px;}
.wt-ads:before{position:absolute;top:0;left:0;right:0;height:30px;margin-bottom:0;line-height:30px;background:#f5f5f5;}
.donateBox{ color: #285b2a; background-color: #e2f2e3; position: relative; padding: .9375rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid #5ab55e; text-align: center; font-size: 1.3em; line-height: 1.3em; font-weight: 500;
}
.donateBox p{margin-bottom: 7px;}
#show-donate-box{display: inline-block; padding: 6px 16px; white-space: nowrap; border-radius: 2px; color: #fff;background: #2c7abe; font-size: 1em;text-transform: capitalize;}








.list-stories{display: flex;justify-content: space-between; flex-wrap: wrap;margin: 5px;}
.list-stories .short-story{flex-shrink: 0;width:300px;margin-bottom: 15px;position: relative;}
.list-stories .short-story .info{display: block;position: relative;}
.list-stories .short-story .info img{display:block;width:100%;height:auto;}
.list-stories .short-story .title{position: absolute;bottom:0;left:0;right:0;padding: 15px;background: rgba(0,0,0,0.8);}
.list-stories .short-story .title a{font-weight: bold;color: #fff;font-size: 1.1em;}
.list-stories .short-story .shortdesc{padding: 10px;line-height: 1.3em;}

.storyContent{padding: 10px;line-height: 1.5em;font-size: 17px;}


#page_ajax a.active {
	color:red;
}






@media only screen and (max-width: 481px) {
	
#main-header {
	height:auto;
}
.container {
    padding: 0 10px;
} 
#search_form {
  width: 100%;
}	
#search_form input {
    width: calc(100% - 50px);
}	
#main-header ul.main-nav {
  float: right;
}
#main-header ul.main-nav > li {
  position: static;
}
#main-header ul.main-nav > li ul.active {
	display: flex !important;
}
#main-header ul.main-nav > li ul {
  left: 0;
  width: 100%;
}
#main-header ul.main-nav > li:hover ul {
  display: none;
}
	
	
	
.story-grid {
  width: 49%;
}
.short-stories .large {
  width: 100%;
}
.short-stories .large  .cover {
    width: 100%;
}
.short-stories {
  display: block;
}

.right-sidebar {
	margin:0;
}
	
#story-detail {
	display:block;
}
#story-detail .col1 {
  width: 100%;
}
#story-detail .col1 .cover {
  margin: 0 auto;
  display: block;
}

	
}



@media only screen and (max-width: 321px) {
	
.story-list {
display:block;
}	
.story-list .last-chapter, .story-list .last-updated2 {
    text-align: left;
}
	
	
	
	
}