*{
    margin: 0;
    padding: 0;
}
.list-post ul li a>span{
    font-size: 28px;
    font-style: italic;
    margin-right: 10px;
    color: #7aa7cc;
    position: absolute;
    left: 0;
    top: -12px;
}
.nut a{
    border: 1px solid #fff;
    margin-right: 40px;
    padding: 3px 15px;
    border-radius: 3px;
    transition: all ease 0.3s;
}
.nut a:hover, .nut a.show-menu{
    background: #fff;
    color: #2d4057;
}
.list-post{
    position: fixed;
    right: 0;
    background: #2d4057;
    width: 40%;
    top: 35px;
    height: 100%;
    z-index: 99999;
    display: none;
    padding-bottom: 60px;
    padding-top: 20px;
}
.list-post ul li a{
    color: #fff;
    font-family: 'Noto Serif', serif;
    font-size: 14px;
    position: relative;
    padding-left: 50px;
}
.list-post ul li{
    list-style: none;
    padding: 10px 20px;
}
.list-post ul li:hover{
    background: #4c6b7f;
}
#_10{
    margin-bottom: 60px;
}
.cs-list .cs-slide p.body-text{
    position:relative;
    width:100%;
    left:initial;
    bottom:initial;
    margin-top:0 !important;
}
:focus{
    outline: none;
}
#_10 #abc-2{
    font-family: 'Roboto Slab', serif;
    color: #2d4057;
    position: absolute;
    top: 58px;
    left: 46px;
    font-size: 33px;
    text-transform: uppercase;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background: #f04a58;
}
.owl-theme .owl-dots .owl-dot span{
    background: #2d4057;
}
#_8{
    margin-bottom: 30px;
}
#_8:hover a, #_10:hover a{
    text-decoration: underline;
}
.box-img>img.img-responsive{
    width: 100%;
}
.full .container p{
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
    font-size: 36px;
    color:  #2f4156;
    margin: 0;
}
.owl-dots{
    width: 50%;
    margin: 0 auto;
    /* position: absolute; */
    /* left: 24%; */
    /* bottom: 5%; */
}
.owl-theme .owl-dots .owl-dot{
    width: 20%;
}
.owl-theme .owl-dots .owl-dot span{
    width: 95%;
    border-radius: 0;
    height: 5px;
}
body.slider-1 .nav>div {
    position: fixed;
    top: 50%;
}

.right-cs p.body-text {
    margin-bottom: 15px;
}

.content {
    max-height: 450px;
    overflow: hidden;
}

.menu {background: #2d4057;height: 35px;position: fixed;width: 100%;top: 0;left: 0;z-index: 9999;}

.menu li {
    float: left;
    list-style: none;
    line-height: 35px;
    width: 33.333333%;
}
.menu li a {
    color: #fff;
    text-transform: uppercase;
    font-size:  12px;
    font-family: 'Noto Serif', serif;
}

.menu li img {
    display: inline-block;
    margin-right: 5px;
    margin-top: -5px;
}

div#hn_3 {
    position: relative;
}

body.slider-1 .next-prev {
    position: relative;
    top: initial;
    margin-top: 0;
    display: none;
}

.footer {
    height: 1px;
    width: 100%;
}

.next-prev {
    display: inline-block;
    width: 100%;
    display: none !important;
    position: fixed;
    left: 0;
    margin-top:  -37px;
    top: 50%;
}

.next-prev a {
    display: inline-block;
    width: 50%;
    float: left;
    padding: 0 15px;
}

.top-30 {
    margin-top: 30px;
}

.list {
    display: inline-block;
    width: 100%;
    position: relative;
}

.list {
    display: none;
}

.list.active-2 {
    display: block;
}

.list.active-1 {
    display: inline-block;
    /* max-height: 500px; */
    overflow: hidden;
}

.list p {
    max-width: 250px;
    margin-top: 70px !important;
}

.nav>div {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    font-size: 36px;
    cursor: pointer;
}

.next-1 {
    left: -50px;
}

.next-2 {
    right: -50px;
}

#category .next-2 {
    right: -80%;
    color: #ed4f57;
    z-index: 9999;
}

#category .next-1 {
    left: -80%;
    z-index: 9999999;
    color: #ed4f57;
}
.full span.number {
    position: absolute;
    left: 80px;
    top: 20px;
}
.full .hn{
    padding-top: 0;
}
div#hn_2 {
    position: relative;
    margin-top: 10px;
}

img#next {
    /*transform:  scale(0);*/
    /*opacity: 0;*/
    transition: all ease 0.3s;
}

.bottom {
    background-image: url(../img/Luoc-su-3.jpg);
    height: 15px;
    background-repeat: no-repeat;
    margin: 20px 0;
}

.top {
    background-image: url(../img/Luoc-su-2.jpg);
    height: 15px;
    background-repeat: no-repeat;
    margin: 20px 0;
}
body#lich-su {
    background-image: url(../img/Luoc-su-bg.png);
}

body#lich-su {
    margin-top: 30px;
}

a:hover {
    text-decoration: none;
}

.prev {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    float: left;
    margin: 0 10px;
}

.next {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    float: left;
}

li.item {
    list-style: none;
    position: absolute;
    width: 488px;
    left: 0;
    top: 0;
    /* height: 369px; */
    transition: all ease 1s;
    opacity: 0;
    padding: 0 15px;
}

li.item h2, li.item p {
    display: none;
}

li.item h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size:  22px;
    color: #2d4057;
    text-transform: uppercase;
}

li.item.center-cs h2, li.item.center-cs p, li.item.center-cs .mt {
    display: block !important;
}

li.item p {
    opacity: 0;
    font-family: 'Noto Serif', serif;
    font-size: 15px;
    /* padding: 0 30px; */
    color: #507499;
}
body#category {
    background-image: url(../img/category-bg.png);
    padding-top: 30px;
}
div#slider {
    position: relative;
    height: 369px;
}
circle.st0 {
    opacity: 0;
}
.col-50 {
    width: 50%;
    float: left;
    padding: 0 10px;
}

.start {
    display: inline-block;
    width: 100%;
}

g#hanoi-text.zoom {
    opacity: 1;
}

.top-45 {
    margin-top: 45px;
}

img.go-to {
    position: absolute;
    right: 9%;
    bottom: -6%;
}

.box-img {
    position: relative;
}

img.text {
    position: absolute;
    bottom: 2%;
    left: 4%;
}

p.body-text {
    font-family: 'Noto Serif', serif;
    font-size: 17px;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom:25px;
}

img.img-100 {
    width: 100%;
}

.map {
    position: fixed;
    top: 12%;
    left: 5%;
    width: 24%;
    opacity:  0;
}
#animation{
    height: 900px;
}
#scene{
    height: 500px;
}
.fade-in{
    background: yellowgreen;
}
#duong-2>polyline.st2{
    /* visibility: hidden; */
}
#_1{
    margin-top: 45px;
}
.owl-theme .owl-nav [class*=owl-]{
    font-size: 60px !important;
    margin:0 !important;
    position: absolute;
    font-weight: 700 !important;
}
.owl-theme .owl-nav>button.owl-next{
    right: -40px;
    top: -30px;
}
.owl-theme .owl-nav{
    height: 10px;
}
.owl-theme .owl-nav>button.owl-prev{
    left: -30px;
    top: -30px;
}
.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent;
    color: #333;
    text-decoration: none;
}
.owl-theme .owl-nav {
    width: 50%;
    margin: 0 auto;
    position: relative;
}
#hanoi-text, #quangbinh-text, #hue-text, #danang-text, #nhatrang-text, #hochiminh-text{
    transition: all ease 0.3s;
    opacity: 0;
    cursor: pointer;
    z-index: 9999999999999999;
}
.left {
    max-width: 555px;
}
#_8 a#abc{
    font-family: 'Roboto Slab', serif;
    color: #2d4057;
    position: absolute;
    top: 58px;
    left: 46px;
    font-size: 33px;
    text-transform: uppercase;
}
.right {
    width: 61.5%;
    float: right;
    padding-left: 30px;
    padding-bottom: 10px;
    margin-top: 9px;
}
.italic{
    font-style: italic;
    margin-top:  10px;
    line-height: 1.6;
}
.button.rotate {
    background: #2e4058;
    color: #fff;
}
.center {
    float: none;
    margin: 40px auto 0;
    border: 5px dashed #fff;
    padding: 30px;
    background: #2e4058;
    display: none;
}
.box-tab {
    width: 225px;
    margin: 0 auto;
}
.button.rotate>span {
    transform: rotate(45deg);
    display: block;
}
.button span {
    transition: all ease 0.3s;
}
.top-10{
    margin-top: 10px;
}
.button {
    width: 100px;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    font-size: 30px;
    background-color: #fff7d1;
    color: #2e4058;
    border: 3px solid #2e4058;
    display: inline-block;
    margin: 0 5px;
}
#hanoi-2_1_, #quangbinh-2, #danang-2, #nhatrang-2, #hue-2, #hochiminh-2{
    cursor: pointer;
    z-index: 99999999999999999999999 !important;
    position: absolute;
}
.center-block{
    float: none;
}
p#test{
    font-family: 'Noto Serif', serif;
    font-size: 22px;
}
.mt{
    display: none;
}
.hn{
    padding-top: 55px;
}
#about h1, #about h2{
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    line-height: 1;
    color: #e80000;
    text-transform: uppercase;
    font-size: 36px;
    margin-bottom: 30px;
}
li.item:nth-child(2){
    transform: translateX(425px) translateY(38px) scale(0.75);
    z-index: 1;
    opacity: 1;
}
li.item:last-child{
    transform: translateX(-425px) translateY(38px) scale(0.75);
    z-index: 1;
    opacity: 1;
}
li.item:nth-child(1){
    opacity: 1;
    transform: scale(1);
}
#about h2{
    font-size: 30px;
    color: #2d4057;
}
._mCS_1 .mCSB_dragger .mCSB_dragger_bar{ background-color: #c3c3c3 !important; }
.mCSB_scrollTools .mCSB_draggerRail{
    background-color:#f1f1f1 !important; ;
}
#about {
    padding-top: 50px;
}
.fadeInRight1 {
    -webkit-animation-name: fadeInRight1;
    animation-name: fadeInRight1;
}
@keyframes fadeInRight1 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 38px, 0) scale(0.75);
        transform: translate3d(100%, 38px, 0) scale(0.75);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(-425px, 38px, 0)scale(0.75);
        transform: translate3d(-425px, 38px, 0)scale(0.75);
    }
}
.fadeInRight2 {
    -webkit-animation-name: fadeInRight1;
    animation-name: fadeInRight2;
}
.cs-slide p.body-text{
    font-size: 14px;
    max-width: inherit;
    position: absolute;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 20px 20px 20px 100px;
    left: 15px;
    width: 97%;
    margin: 0;
    color: #000;
}
@keyframes fadeInRight2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 38px, 0) scale(0.75);
        transform: translate3d(100%, 38px, 0) scale(0.75);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(425px, 38px, 0)scale(0.75);
        transform: translate3d(425px, 38px, 0)scale(0.75);
    }
}
.mg{
    /*margin: 0 -10px;*/
    display: inline-block;
    width: 100%;
    border-top: dashed 3px #ed4f57;
    padding-top: 20px;
}
#cs1 ul>li{
    width: initial;
}
.next-prev.block{
    display: block;
}
.next-prev a:nth-child(2) {
    display: inline-block;
    width: 150px;
    position: fixed;
    right: 0;
    padding: 0;
    top: 50%;
    margin-top: -39px;
}
.next-prev a:nth-child(1) {
    display: inline-block;
    width: 150px;
    position: fixed;
    left: 0;
    padding: 0;
    top: 50%;
    margin-top: -39px;
}
body.slider-1 .nav>div.next-1 {
    left: 30px;
}
body.slider-1 .nav>div.next-2 {
    right: 30px;
}
.list img.img-responsive{
    width: 100%;
}
body.slider-1 .next-prev{
    display: block;
}
body.slider-1 .next-prev a:nth-child(1) {
    display: inline-block;
    width: 150px;
    position: fixed;
    left: 67%;
    padding: 0;
    top: 7px;
    margin-top: 0;
    z-index: 99999999999999999;
    color: #fff;
    font-size: 12px;
    font-family: 'Noto Serif', serif;
}
span.number{
    position: absolute;
    left: 20px;
    top: 20px;
    height: calc(100% - 40px);
    border-right: 1px solid #000;
    padding-right: 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.qb .cs-slide p.body-text{
    padding: 20px;
}
body.slider-1 .next-prev a:nth-child(2) {
    display: inline-block;
    width: 150px;
    position: fixed;
    left: 73%;
    padding: 0;
    top: 7px;
    margin-top: 0;
    z-index: 99999999999999999;
    color: #fff;
    font-size: 12px;
    font-family: 'Noto Serif', serif;
}
body.slider-1 .next-prev a:hover {
    text-decoration: underline;
}
.full [class*=next-]:hover{
    color: #f04a58;
}
.thumb{
    width: 50%;
    float: left;
}
.title-1{
    font-family: 'Roboto Slab', serif;
    font-size: 42px;
    text-transform: uppercase;
    color: #2f4156;
    display:  block;
}
.pc{
    display: block;
}
.full .next-1 {
    left: 30px;
    top: 50%;
    bottom: inherit;
    color: #f04a58;
    margin-top: -25px;
}
.full .next-2 {
    right: 30px;
    left: initial!important;
    top: 50%;
    bottom: inherit;
    color: #fff;
}
.full .cs-slide p.body-text{
    width: 100%;
    left: 0;
    padding:  20px 60px 20px 150px;
    min-height: 106px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-top: 0 !important;
    color: #333;
}
.left-link{
    width: 50%;
    float: left;
    padding: 25px;
}
.mb{
    display: none;
}
.title{
    padding: 20px 0;
    background:url("../img/slide-background.png") ;
}
.rm{
    text-align: right;
    font-size: 15px;
    display: block;
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #ed545c;
}
.rm>span{
    color:#2f4156;
}
.link.mb{
    display: none;
}
.link{
    display: inline-block;
    width: 100%;
    background-image: url(../img/link-2-background.png);
    margin-bottom:  30px;
}
a.title-1:hover{
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    #index .pull-right .nut{
        display: none;
    }
    #index .pull-right{
        display: block;
    }
    #_10 a#abc-2 {
        font-family: 'Roboto Slab', serif;
        color: #2d4057;
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 14px;
        text-transform: uppercase;
    }
    .thumb, .left-link {
        width: 100%;
        float: left;
    }
    .owl-theme .owl-nav>button.owl-prev {
        left: -35%;
        top: -30px;
    }
    .owl-theme .owl-nav>button.owl-next {
        right: -42%;
        top: -30px;
    }
    #_8 a#abc {
        font-family: 'Roboto Slab', serif;
        color: #2d4057;
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 14px;
        text-transform: uppercase;
    }
    .full .cs-slide p.body-text {
        width: 100%;
        left: 0;
        padding: 20px 20px 20px 100px;
        position: relative;
    }
    .full span.number {
        position: absolute;
        left: 15px;
        top: 20px;
    }
    .full .next-1 {
        left: 30px;
        top: initial !important;
        bottom: -35px;
        color: #f04a58;
    }
    .full .next-2 {
        right: 30px;
        top: initial !important;
        bottom: -35px;
        color: #f04a58;
    }
    .owl-dots {
        width: 80%;
        margin: 0 auto !important;
    }
    .pc{
        display: none;
    }
    .mb{
        display: block;
    }
    .cs-slide p.body-text{
        width: 100%;
        left: 0;
        position: relative;
        bottom: initial;
    }
    .next-prev a:nth-child(1) {
        display: inline-block;
        width: 85px;
        position: absolute;
        left: 0;
        padding: 0;
        top: 85%;
        margin-top: -110px;
    }
    .next-prev a:nth-child(2) {
        display: inline-block;
        width: 85px;
        position: absolute;
        right: 0;
        padding: 0;
        top: 85%;
        margin-top: -110px;
    }
    .link.mb {
        display: block;
    }
    .menu li{
        width: initial;
    }
    body.slider-1 .next-prev a:nth-child(1) {
        display: inline-block;
        width: auto;
        position: relative;
        left: initial;
        top: initial;
        z-index: 99999999999999999;
        font-size: 15px;
        font-family: 'Noto Serif', serif;
        margin: 0 15px;
        background-color: #2d4057;
        padding: 8px 25px;
        color: #fff;
    }
    body.slider-1 .next-prev a:nth-child(2) {
        display: inline-block;
        width: auto;
        position: relative;
        left: initial;
        top: initial;
        z-index: 99999999999999999;
        font-size: 15px;
        font-family: 'Noto Serif', serif;
        margin: 0 15px;
        background-color: #2d4057;
        padding: 8px 25px;
        color: #fff;
    }
    .menu li:nth-child(2){
        display: none;
    }
    body.slider-1 .next-prev {
        display: block;
        margin: 0 auto;
        width: 304px;
        margin-bottom: 50px;
    }
    body.slider-1 .next-prev a>i{
        transform: translate(0,1px) !important;
    }
    .list p {
        max-width: initial;
        margin-top: 20px !important;
    }
    .full .container p{
        font-size: 22px;
    }
    .list.active-1 {
        display: inline-block;
        max-height:initial;
        overflow: hidden;
    }
    p.body-text{
        font-size: 15px;
    }
    .right {
        width: 100%;
        padding: 10px 0 20px;
    }
    .left {
        max-width: inherit;
    }
    list.active-1>.col-xs-12.col-md-8{
        max-height: 256px;
        overflow: hidden;
    }
    body.slider-1 .nav>div{
        top:34%;
        color: #fff;
    }
    li.item{
        width: 100%;
    }
    .next-prev {
        display: inline-block;
        width: 100%;
        opacity: 1;
        position: relative;
        left: initial;
        margin-top: 0;
        top: initial;
    }
    .map{
        display: none;
    }
    #category .next-2 {
        right: 0;
        color: #ed4f57;
        z-index: 9999;
    }
    #category .next-1 {
        left: 0;
        color: #ed4f57;
        z-index: 9999;
    }
    img.text {
        width: 50%;
    }
    img.go-to {
        width: 20%;
        right: 0;
        left: initial !important;
    }
}
@media screen and (max-width: 425px) {
    .nav>div{
        top: 37%;
    }
    body.slider-1 .nav>div{
        top: 32%;
    }
}
@media screen and (max-width: 375px) {
    .nav>div{
        top: 32%;
    }
    body.slider-1 .nav>div{
        top: 33%;
    }
}
@media screen and (max-width: 320px) {
    .nav>div{
        top: 26%;
    }
    body.slider-1 .nav>div{
        top: 39%;
    }
}