.anchor {
    width: 180px;
    position: fixed;
    right: -180px;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
    transition: all .5s
}

    .anchor.open {
        right: 0
    }

        .anchor.open .i-txt {
            transform: rotate(180deg)
        }

    .anchor .btn-tai-dk {
        margin-left: 0
    }

        .anchor .btn-tai-dk .btn-tai-game {
            width: 180px;
            height: 63px;
            background: url(../images/btn-tai-game.jpg);
            background-size: 100% 100%
        }

            .anchor .btn-tai-dk .btn-tai-game:hover {
                background: url(../images/btn-tai-game-hover.jpg);
                background-size: 100% 100%
            }

.link-group {
    width: 180px;
    height: 178px;
    background: url(../images/bg-link-nav-right.png) no-repeat
}

    .link-group a {
        width: 50%;
        height: 50%;
        float: left;
        text-align: center;
        padding-top: 58px;
        color: #fff
    }

        .link-group a:hover {
            background: url(../home.html) no-repeat;
            background-size: contain
        }

        .link-group a:nth-child(3), .link-group a:nth-child(4) {
            padding-top: 50px
        }

.box-giftcode {
    width: 180px;
    height: 217px;
    background: url(../home.html);
    margin-top: 4px
}

    .box-giftcode .tit-bgc {
        line-height: 1.2;
        margin-left: 62px;
        padding-top: 17px
    }

.go-top {
    cursor: pointer;
    width: 49px;
    height: 129px;
    background: url(../images/bg-go-top.png);
    margin: 5px auto 0
}

.i-control {
    cursor: pointer;
    position: absolute;
    top: 63px;
    left: -27px;
    height: 90px;
    width: 27px;
    background: url(../images/bg-control.png) 50%/100% 100% no-repeat
}

    .i-control .i-txt {
        margin-top: 19px;
        margin-left: 3px;
        height: 54px;
        width: 21px;
        background: url(../images/icon-close-nav-right.png) 50%/100% 100% no-repeat;
        display: block;
        transform: rotate(0deg)
    }

    .i-control.i-control-open .i-txt {
        transform: rotate(180deg)
    }

.no-content {
    padding: 10.525rem 1rem;
    text-align: center;
    font-size: 1.25rem;
    color: #343a40
}

.download-btn, .game-payment {
    display: none
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    min-height: 100vh
}

footer { /*margin-top:5rem;*/
    height: 5rem;
    background-color: #222;
    color: #555
}

    footer .container {
        position: relative;
        height: 100%
    }

    footer .footer-content .text-muted {
        color: #888;
        font-size: .75rem
    }

#homepage-header {
    margin-bottom: 1rem;
}

    #homepage-header .logo .navbar-brand {
        margin: 0
    }

    #homepage-header .navbar .navbar-brand {
        font-size: 1.5rem;
        color: #fbcda0;
        margin: 0 auto
    }

    #homepage-header .navbar li a {
        font-weight: 700;
        font-size: .875rem
    }

        #homepage-header .navbar li a:hover {
            color: #d4152f
        }

.home-content {
    position: relative
}

.home-content__left {
    height: 100%
}

    .home-content__left .account {
        margin: .5rem 1px
    }

    .home-content__left .account__loggedin {
        background-color: #2d233e;
        color: #ccc;
        padding: 1rem;
        border-radius: .25rem
    }

    .home-content__left .account .btn {
        background: linear-gradient(180deg,#d1662a,#b5341e);
        border-radius: 0;
        color: #fff;
        padding: 1rem;
        text-decoration: none;
        border: none;
        font-size: .875rem
    }

        .home-content__left .account .btn:hover {
            background: linear-gradient(180deg,#dd4c33,#d33d23);
            transition: background-color .3s ease-in-out
        }

    .home-content__left .game-payment:hover {
        opacity: .8
    }

    .home-content__left .fanpage {
        background: #fff
    }

    .home-content__left .main-feature {
        margin: 1rem 0;
        background: #fafafa
    }

    .home-content__left .main-feature__header {
        padding: 1rem;
        background: linear-gradient(270deg,#004881,#00364d);
        color: #fff;
        font-size: 1.25rem;
        margin-bottom: 0
    }

    .home-content__left .main-feature.post-toc {
        padding: 1rem;
        background: linear-gradient(270deg,#d3302b,#851414);
        color: #fff;
        font-size: 1.25rem;
        margin-bottom: 0
    }

    .home-content__left .main-feature li {
        border-right: 1px solid #e9e9e9;
        border-top: 1px solid #e9e9e9;
        width: 50%;
        font-weight: 500;
        text-align: center;
        padding: 1rem .5rem
    }

        .home-content__left .main-feature li.post-section {
            width: 100%;
            font-weight: 400
        }

            .home-content__left .main-feature li.post-section.active {
                font-weight: 500
            }

                .home-content__left .main-feature li.post-section.active a {
                    color: #d4152f
                }

        .home-content__left .main-feature li > a {
            color: #343a40
        }

            .home-content__left .main-feature li > a:hover {
                color: #d4152f;
                transition: .3s ease-out
            }

.home-content .banner img {
    border-radius: .25rem .25rem 0 0
}

.home-content .articles {
    padding: .25rem;
    background-color: #fff
}

    .home-content .articles nav {
        font-size: .75rem;
        position: relative
    }

        .home-content .articles nav .btn-view-more {
            position: absolute;
            right: 1rem;
            top: .5rem;
            font-size: .875rem
        }

    .home-content .articles li {
        padding-left: .5rem;
        font-size: .75rem;
        transition: all .3s linear 0s
    }

        .home-content .articles li.hot-post a {
            margin: 0 auto;
            padding: 1rem;
            font-size: 1.25rem;
            text-transform: uppercase;
            font-weight: 600
        }

.home-content .articles__link {
    max-width: 88%;
    color: #333;
    text-decoration: none;
    font-size: .75rem;
    opacity: .8
}

    .home-content .articles__link.hot {
        font-weight: 500;
        color: #d4152f
    }

    .home-content .articles__link .tag {
        min-width: 4.25rem;
        border: 1px solid;
        padding: .25rem;
        margin-right: .5rem
    }

    .home-content .articles__link:hover {
        opacity: 1
    }

.home-content .articles .published-time {
    color: #888;
    font-size: .75rem
}

.home-content .articles .nav-tabs .nav-item {
    background-color: transparent;
    color: #000;
    border: none;
    font-weight: 500
}

    .home-content .articles .nav-tabs .nav-item.active {
        color: #d4152f;
        border-bottom: 2px solid #d4152f
    }

.home-content .factions .carousel-indicators {
    position: relative;
    margin: 0
}

    .home-content .factions .carousel-indicators li {
        flex: 0 0 20%;
        max-width: 20%;
        width: auto;
        height: auto;
        background: 0 0;
        text-indent: unset;
        margin: 0;
        padding: 0;
        color: #000;
        opacity: .9;
        border-bottom: 1px solid #eaeaec
    }

        .home-content .factions .carousel-indicators li.active {
            color: #d4152f;
            font-weight: 500;
            opacity: 1
        }

            .home-content .factions .carousel-indicators li.active div {
                font-weight: 500
            }

            .home-content .factions .carousel-indicators li.active:after {
                background-color: #d4152f;
                width: 56px;
                height: 3px;
                left: 15%;
                bottom: -2px;
                position: absolute;
                content: ""
            }

        .home-content .factions .carousel-indicators li div {
            font-size: .75rem;
            text-align: center;
            padding: 1rem .5rem
        }

.home-content .factions .faction-name {
    position: absolute;
    background: url(../images/factions/name-bg.png)
}

.home-content .factions__desc {
    background-size: 20%;
    padding: 1rem;
    min-height: 200px
}

    .home-content .factions__desc .faction-title {
        font-weight: 500;
        font-size: 1.25rem;
        color: #333
    }

    .home-content .factions__desc .faction-summary {
        font-size: .75rem
    }

.article-detail {
    background-size: contain;
    background: #fdfdfd repeat-y;
    border-radius: .25rem
}

    .article-detail .btn-download-game {
        width: 360px;
        color: #fff;
        text-indent: 2rem;
        background: url(../images/article-download.png) no-repeat 32px 22px #cb942d;
        text-decoration: none
    }

        .article-detail .btn-download-game:hover {
            background-color: #f7b63d
        }

    .article-detail .breadcrumb {
        background: linear-gradient(270deg,#bd132a,#8e0e20)
    }

        .article-detail .breadcrumb .breadcrumb-item {
            font-weight: 500
        }

            .article-detail .breadcrumb .breadcrumb-item.active {
                color: #fff;
                opacity: .9;
                font-weight: 400
            }

        .article-detail .breadcrumb a {
            color: #fff
        }

            .article-detail .breadcrumb a:hover {
                opacity: .8
            }

    .article-detail h1 {
        font-size: 1.5rem;
        color: #a25d39
    }

    .article-detail time {
        font-size: .875rem;
        font-weight: 400
    }

    .article-detail .list-group-item {
        border-color: #eee;
        border-style: dashed
    }

        .article-detail .list-group-item:hover:not(.text-muted), .article-detail .list-group-item:hover:not(.text-muted) .published-time {
            font-weight: 500
        }

    .article-detail .detail-content {
        font-size: .875rem
    }

        .article-detail .detail-content .main-content img {
            max-width: 100%;
            height: auto
        }

        .article-detail .detail-content nav {
            background: #fefefe;
            margin-bottom: 1rem
        }

            .article-detail .detail-content nav .nav-item {
                border-radius: 0;
                border-color: #eee;
                font-weight: 500;
                color: #212529
            }

                .article-detail .detail-content nav .nav-item:nth-child(2n) {
                    border-left: 0
                }

                .article-detail .detail-content nav .nav-item.active {
                    color: #d4152f
                }

        .article-detail .detail-content ul {
            padding-left: 1rem;
            margin-top: .25rem;
            margin-bottom: 1rem
        }

            .article-detail .detail-content ul li {
                background: url(../images/article/icon-li.png) 0 8px no-repeat;
                padding-left: 1rem;
                list-style-type: none
            }

        .article-detail .detail-content h3 {
            background: url(../images/article/icon-h3.png) no-repeat 0 3px;
            clear: both;
            text-indent: 1.5rem;
            color: #d4152f;
            margin-bottom: 1rem;
            font-weight: 600;
            margin-left: -.5rem
        }

        .article-detail .detail-content h5 {
            text-indent: 1.5rem;
            background: url(../images/article/icon-h5.png) no-repeat 0 4px;
            font-size: 1rem;
            color: #343a40;
            font-weight: 600
        }

        .article-detail .detail-content table {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
            background: #fff;
            border-collapse: collapse
        }

            .article-detail .detail-content table tbody tr:nth-child(odd) {
                background: #fffcf6
            }

            .article-detail .detail-content table tbody tr:nth-child(2n) {
                background: #fff
            }

            .article-detail .detail-content table thead th {
                color: #fff;
                background-color: maroon;
                border-color: #c3a783;
                vertical-align: middle;
                text-align: center;
                border-bottom: 2px solid #c3a783
            }

            .article-detail .detail-content table td, .article-detail .detail-content table th {
                padding: .75rem;
                border: 1px solid #c3a783;
                vertical-align: middle
            }

            .article-detail .detail-content table ul {
                margin-bottom: .5rem
            }

            .article-detail .detail-content table a {
                color: #008dff
            }

                .article-detail .detail-content table a:hover {
                    text-decoration: underline
                }

    .article-detail article {
        position: relative
    }

#goTop {
    position: fixed;
    width: 2rem;
    height: 2rem;
    background: #004881;
    box-shadow: 0 2px 5px #212529;
    right: 1rem;
    bottom: 30%;
    text-align: center;
    border-radius: 55%;
    color: #fff;
    opacity: .8
}

    #goTop:hover {
        opacity: 1
    }

    #goTop i {
        top: .25rem;
        position: relative
    }

@media(min-width:576px) {
    body {
        background: url(../images/bg-home-header.jpg) no-repeat top;
        background-color: #656776;
    }

    .navbar-brand > img {
        width: 128px;
        height: auto
    }

        .navbar-brand > img.small {
            width: 96px
        }

    .download-btn, .game-payment {
        display: block
    }

    .navbar-brand > img {
        width: 200px
    }

        .navbar-brand > img.small {
            width: 128px
        }

    .home-content .articles nav {
        font-size: 1rem
    }

    .home-content .articles__link, .home-content .articles li {
        font-size: .875rem
    }
}

@media(min-width:768px) {
    #homepage-header {
        margin-bottom: 30rem
    }
}

@media(min-width:1200px) {
    .home-content .factions .carousel-indicators li {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    #homepage-header .navbar-dark {
        margin-top: .25rem
    }

    #homepage-header .navbar li a {
        text-transform: uppercase;
        font-size: 1rem
    }

    .wrapper__inner {
        background-size: auto
    }
}

@media(max-width:767.98px) {
    .article-detail .detail-content table {
        display: block;
        overflow-x: auto
    }
}