*,
*::before,
*::after {
  box-sizing: border-box;}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;}
@font-face {
    font-family: 'Muli';
    src:  url('/assets/frontend/fonts/Muli/Muli-Regular.ttf') format('truetype')}
@font-face {
    font-family: 'Muli-bold';
    src:  url('/assets/frontend/fonts/Muli/Muli-Bold.ttf') format('truetype')}
@font-face {
    font-family: 'Muli-ExtraBold';
    src:  url('/assets/frontend/fonts/Muli/Muli-ExtraBold.ttf') format('truetype')}
@font-face {
  font-family: 'Muli-Black';
  src:  url('/assets/frontend/fonts/Muli/Muli-Black.ttf') format('truetype')}
body {
  margin: 0;
  font-family: "Muli" , Fallback, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  overflow: hidden;
  color: #69707a;
  text-align: left;
  background-color: #fff;}
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;}
p {
  margin-top: 0;
  margin-bottom: 1rem;}
abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;}
ol,ul,dl {
  margin-top: 0;
  margin-bottom: 1rem;}
ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;}
dt {
  font-weight: 500;}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;}
blockquote {
  margin: 0 0 1rem;}
b, strong {
  font-weight: bolder;}
small {
  font-size: 80%;}
sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;}
sub {
  bottom: -0.25em;}
sup {
  top: -0.5em;}
a {
  color: #0061f2;
  text-decoration: none;
  background-color: transparent;}
  a:hover {
    color: #0042a6;
    text-decoration: underline;}
  a:not([href]):not([class]) {
    color: inherit;
    text-decoration: none;}
  a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;}
pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;}
figure {
  margin: 0 0 1rem;}
img {
  vertical-align: middle;
  border-style: none;}
svg {
  overflow: hidden;
  vertical-align: middle;}
table {
  border-collapse: collapse;}
caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #a7aeb8;
  text-align: left;
  caption-side: bottom;}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;}
label {
  display: inline-block;
  margin-bottom: 0.5rem;}
button {
  border-radius: 0;}
  button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;}
div.header{
    height: 80px;
    background-color: #861E00;
    background-image: url('/assets/frontend/img/Group 244.png');}
    div.header .logo{
        height: 52px;
        margin-left: 100px;}
        div.header .logo img{
            margin-top: 14px;}
    div.header .title{
        position: absolute;
        width: 1284px;
        height: 47px;
        left: 318px;
        top: 16px;
        font-style: normal;
        font-weight: 900;
        font-family: "Muli-Black" , Fallback, sans-serif;
        font-size: 28px;
        line-height: 47px;
        text-align: center;
        color: #FFFFFF;}
div .top-section{
  color: #861E00;
  padding-top: 40px;
  height: 120px;}
  div .top-section .title{
    position: relative;
    width: 90%;
    font-weight: 700;
    font-family: "Muli-Extrabold";
    float: left;
    font-size: 32px;}
  div .top-section .back{
    position: relative;
    width: 10%;
    /* font-family: 'Muli-Extrabold'; */
    font-weight: 400;
    color: #666666;
    text-align: right;
    padding-top: 10px;
    font-size: 20px;
    float: right;}
    div .top-section .back svg.svg-inline--fa{
      font-size: 20px;
    }
    div .top-section .back span::before {
      display: block;
      height: 24px;
      content: url(/assets/frontend/img/back-icon-2.png);
      position: absolute;
      right: 85px;
      top: 11px;}
div.home-content{
  height: 1000px;
  width: 100%;
  background-image: url('/assets/frontend/img/BG.png');}
  div.home-content .box-container{
    /* width: 970px; */
    width: 740px;
    height: 660px;
    position: absolute;
    top: 53%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}
    div.home-content .box-container .box{
      background: #FFFFFFBB;
      box-shadow: 3px 5px 4px rgba(0, 0, 0, 0.28);
      border-radius: 16px;}
      div.home-content .box.box-1{
        position: absolute;
        width: 470px;
        height: 200px;
        top: 0;}
      div.home-content .box.box-2{
        position: absolute;
        width: 240px;
        height: 200px;
        top: 0;
        left: 500px}
      div.home-content .box.box-3{
        position: absolute;
        width: 200px;
        height: 430px;
        left: 0;
        top: 230px;}
      div.home-content .box.box-4{
        position: absolute;
        width: 240px;
        height: 200px;
        left: 230px;
        top: 230px;}
      div.home-content .box.box-5{
        position: absolute;
        width: 240px;
        height: 200px;
        left: 500px;
        top: 230px;}
      div.home-content .box.box-6{
        position: absolute;
        width: 240px;
        height: 200px;
        left: 230px;
        top: 460px;}
      div.home-content .box.box-7{
        position: absolute;
        width: 200px;
        height: 430px;
        right: 0;
        top: 0;}
      div.home-content .box.box-8{
        position: absolute;
        /* width: 470px; */
        width: 510px;
        height: 200px;
        /* right: 0; */
        left: 230px;
        top: 460px;}
        div.home-content .box .icon{
          position: absolute;
          top: 37%;
          left: 50%;
          padding-left: 8px;
          padding-right: 8px;
          padding-bottom: 16px;
          border-bottom: 1px #861E00 solid;
          transform: translate(-50%, -37%);}
        div.home-content .box .box-title{
          font-family: 'Muli-Black';
          font-weight: 900;
          font-size: 18px;
          line-height: 23px;
          text-align: center;
          color: #861E00;
          margin-top: 130px;
          text-transform: uppercase;}
          div.home-content .box.box-3 .icon, div.home-content .box.box-7 .icon{top: 42%;}
            div.home-content .box.box-3 .box-title, div.home-content .box.box-7 .box-title{margin-top: 240px;}
        div.home-content .footer{
          font-size: 16px;
          line-height: 18px;
          color: #FFFFFF;
          position: absolute;
          left: 0;
          width: 100%;
          top:1016px;}
          div.home-content .footer .text{
            text-align: center;
            padding-top: 15px;}
          div.home-content .footer .btn-lang{
            position: absolute;
            right: 5.05%;
            bottom: 1.48%;}
            div.home-content .footer .btn-lang button{
              background: none;
              color: white;
              border: none;
              font-size: 16px;
              font-weight: 700;
              padding: 15px 20px;}
              div.home-content .footer .btn-lang button.active{
                border: solid .4px white;
                border-radius: 4px;}
div.sodo{
  background-color: #4E4F49;
  height: 1000px;
  width: 100%;}
    div.sodo .top-section .title{color: #fff;}
    div.sodo .top-section .back{color: #fff;}
div.loaihienvat{
  background-color: #FFF8EA;
  height: 1000px;
  width: 100%;}
  div.loaihienvat .bottom-section .box-container{
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 512px;
    width: 1212px;}
    div.loaihienvat .bottom-section .box-container .box{
      position: relative;
      color: white;
      text-transform: uppercase;
      text-align: center;
      font-size: 24px;
      line-height: 36px;
      font-weight: 700;
      width: 512px;
      height: 512px;}
      div.loaihienvat .bottom-section .box-container .box::before {
        content: '';
        display: block;
        position: absolute;
        width: 512px;
        height: 512px;
        background: #000;
        opacity: 0.5;
        z-index: 1;}
        div.loaihienvat.not-use-box-before .bottom-section .box-container .box::before{background: transparent !important;}
      div.loaihienvat .bottom-section .box-container .box .next-btn{position: relative;z-index: 2;}
      div.loaihienvat .bottom-section .box-container .box.box-bia{
        background-image: url(/assets/frontend/img/bg-bia.png);
        background-size: contain;
        /* filter: drop-shadow(4px 4px 6px #00000077); */
        box-shadow: 4px 4px 6px #00000077;
        float: left;}
        div.loaihienvat .bottom-section .box-container .box.box-bia p{
          margin-top: 40%;
          z-index: 2;
          position: relative;}
      div.loaihienvat .bottom-section .box-container .box.box-hoa-van{
        background-image: url(/assets/frontend/img/bg-hoavan.png);
        background-size: contain;
        /* filter: drop-shadow(4px 4px 6px #00000077); */
        box-shadow: 4px 4px 6px #00000077;
        float: right;}
        div.loaihienvat .bottom-section .box-container .box.box-hoa-van p{
          margin-top: 33%;
          z-index: 2;
          position: relative;}
@keyframes showImg {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes hideImg {
  0% {opacity: 1}
  100% {opacity: 0}
}
div.chitietsukien{background-color: #fff;}
  div.chitietsukien .slick-prev,
  div.chitietsukien .slick-next{top: 42%;}
  div.chitietsukien .img-contain{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 550px}
    div.chitietsukien .img-contain .img-show{
      position: absolute;
      max-width: 100%;
      animation: hideImg 400ms forwards;
      max-height: 100%;}
      div.chitietsukien .img-contain .img-show.active{animation: showImg 400ms forwards;}
  div.chitietsukien .chi-tiet__slider{
    width: 85%;
    margin-top: auto;
    align-self: center;}
    div.chitietsukien .chi-tiet__slider .chi-tiet-img-item{
      margin: 0 12px;
      max-height: 110px;
      opacity: 0.5;}
      div.chitietsukien .chi-tiet__slider .chi-tiet-img-item.active{opacity: 1;}
  div.chitietsukien .img-title{
    text-align: center;
    margin-top: 40px;
    font-style: italic;}
  div.chitietsukien .slick-list{border: none;}
  div.chitietsukien .anh-mo{
    position: fixed;
    width: 780px;
    height: 150px;
    bottom: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 77.42%);}
div.chitiethienvat{background-color: #fff;}
  div.chitiethienvat .img-contain{
    width: 100%;
    height: 800px}
    div.chitiethienvat .img-contain .img-show{
      max-width: 100%;
      max-height: 100%;}
  div.chitiethienvat .anh-mo{
    position: fixed;
    width: 780px;
    height: 150px;
    bottom: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 77.42%);}
.chitietbia .model-3d-container {
  width: 1280px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000;
  float: left;}
  .chitietbia .model-3d-container .model-3d {
      width: 100%;
      background-image: url(/assets/frontend/img/Background_chitiet_hienvat.png);
      background-size: cover;
      height: 960px;}
  .chitietbia .model-3d-detail {
      width: 640px;
      height: 1080px;
      float: left;
      text-align: justify;
      padding-left: 80px;
      padding-bottom: 80px;
      padding-right: 23px;
      padding-top: 100px;
      font-size: 18px;
      letter-spacing: 0.05em;
      color: #333333;
      background-color: #D9D9D9;}
  .chitietbia .model-3d-detail .num{
      font-family: 'Muli-Black';
      font-weight: 800;
      font-size: 48px;
      line-height: 60px;
      height: 60px;
      text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
      margin-bottom: 20px;}
  .chitietbia .model-3d-detail .title{
      font-size: 24px;
      padding-right: 60px;
      margin-bottom: 30px;
      text-transform: uppercase;
      font-family: 'Muli-Black';
      font-weight: 800;}
  .chitietbia .model-3d-detail .detail{
      padding-right: 54px;
      height: 730px;
      word-wrap: break-word;
      overflow-y: scroll;}
    .chitietbia .model-3d-detail .detail::-webkit-scrollbar {
      /* display: block; */
      background-color: #AAA;
      border-radius: 20px;
      width: 3px;}
    .chitietbia .model-3d-detail .detail::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
      border-radius: 20px;}
    .chitietbia .model-3d-detail .detail::-webkit-scrollbar-thumb {
      background: #fff;
      border-radius: 20px;}
div.container-x{
  width: 1720px;
  margin-left: 100px !important;
  margin-right: 100px !important;}
div.ct-box{
  display: flex;
  margin-left: 100px !important;
  margin-right: 30px !important;}
  div.ct-box .col{
    position: relative;
    float: left;
    height: 800px;
    text-align: justify;
    font-size: 20px;
    line-height: 30px;
    color: #333333;}
    div.ct-box .col.col-img{
      display: flex;
      flex-direction: column;
      width: 880px;}
    div.ct-box .col.col-content{
      word-wrap: break-word;
      overflow-y: scroll;
      margin-right: 60px;
      width: 780px;}
      div.ct-box .col.col-content::-webkit-scrollbar {display: none;}
      div.ct-box .col.col-content.full-width{
        margin-right: 0px;
        padding-right: 64px;
        width: 100%;}
        div.ct-box .col.col-content.full-width .anh-mo{display: none;}
      div.ct-box .col.col-content.full-width::-webkit-scrollbar {
        display: block;
        width: 3px;}
      div.ct-box .col.col-content.full-width::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
        border-radius: 10px;}
      div.ct-box .col.col-content.full-width::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}
div.tusach{
  background-color: #fff;
  height: 1000px;
  width: 100%;}
  div.tusach .filter-box{
    height: 130px;
    align-items: center;
    justify-content: center;
    display: flex;}
    div.tusach .filter-box button{
      margin-right: 25px;
      width: 225px;
      height: 48px;
      border-radius: 0;
      border: #CCCCCC solid 1px;
      font-size: 18px;
      line-height: 31px;
      color: #666;
      background: none;}
      div.tusach .filter-box button.active{
        color: #fff;
        font-family: 'Muli-bold';
        background-color: #861E00;}
      div.tusach .filter-box button:focus{
        outline: none;
      }
div.sukien{
  background-color: #fff;
  height: 1000px;
  width: 100%;}
  div.sukien .carousel{
    margin-top: -32px;
    height: 870px;}
    div.sukien .carousel .carousel-item{
      width: 930px;
      /* width: 580px; */
      height: 600px;
      margin-top: -90px;
      opacity: 1 !important;
      text-align: center;}
      div.sukien .carousel-item .overlay{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: .4;}
      div.sukien .carousel-item.active .overlay{
        display: none;}
      /* div.sukien .carousel-item img{
        max-width: 100%;
        height: 100%;} */
      div.sukien .carousel-item img{
        width: 100%;
        height: 600px;}
      div.sukien .carousel-item h3{
        font-size: 28px;
        font-weight: 700;
        margin-top: 10px;
        color: #000;
        line-height: 47px;
        text-align: center;
        display: none;}
      div.sukien .carousel-item.active h3{display: block;}
  div.sukien .btn.green{
    position: absolute;
    top: 50%;}
    div.sukien .btn.green.next.waves-effect {
      right: 0;}
    div.sukien .btn.green.prev.waves-effect {
      left: 0;}
div.dstour{
  background-color: #FFF;
  height: 1000px;
  width: 100%;}
  div.dstour .bottom-section .box-container{
    position: absolute;
    top: 51%;
    left: 0;
    transform: translate(0, -50%);
    margin-left: 100px;
    margin-right: 100px;
    height: 640px;
    width: 1720px;}
    div.dstour .bottom-section .box-container .box{
      position: relative;
      color: white;
      text-transform: uppercase;
      background-position: center;
      background-size: cover;
      text-align: center;
      font-size: 24px;
      line-height: 36px;
      font-weight: 700;
      width: 500px;
      height: 640px;}
      div.dstour .bottom-section .box-container .box::before {
        content: '';
        display: block;
        position: absolute;
        width: 500px;
        height: 640px;
        background: #000;
        opacity: 0.5;
        z-index: 1;}
        div.dstour.not-use-box-before .bottom-section .box-container .box::before{background: transparent !important;}
      div.dstour .bottom-section .box-container .box .next-btn{position: relative;z-index: 2;}
      div.dstour .bottom-section .box-container .box.box-1{
        background-image: url(/assets/frontend/img/img1.jpg);
        /* filter: drop-shadow(4px 4px 6px #00000077); */
        /* box-shadow: 4px 4px 6px #00000077; */
        float: left;}
        div.dstour .bottom-section .box-container .box.box-1 p{
          margin-top: 52%;
          z-index: 2;
          position: relative;}
      div.dstour .bottom-section .box-container .box.box-2{
        background-image: url(/assets/frontend/img/img2.jpg);
        /* filter: drop-shadow(4px 4px 6px #00000077); */
        /* box-shadow: 4px 4px 6px #00000077; */
        margin-left: 110px;
        margin-right: 110px;
        float: left;}
        div.dstour .bottom-section .box-container .box.box-2 p{
          margin-top: 47%;
          z-index: 2;
          position: relative;}
      div.dstour .bottom-section .box-container .box.box-3{
        background-image: url(/assets/frontend/img/img3.jpg);
        /* filter: drop-shadow(4px 4px 6px #00000077); */
        /* box-shadow: 4px 4px 6px #00000077; */
        float: right;}
        div.dstour .bottom-section .box-container .box.box-3 p{
          margin-top: 52%;
          z-index: 2;
          position: relative;}
.box-container svg.svg-inline--fa.fa-chevron-right {
  position: absolute;
  top: 50%;
  font-size: 48px;
  right: 30px;}
.box-container svg.svg-inline--fa.fa-chevron-left{
  position: absolute;
  top: 50%;
  font-size: 48px;
  left: 30px;}
.d-flex{display: flex !important;}
.ml-30{margin-left: 30px;}
.slick-list{border: 1px solid #CCCCCC;}
.slick-track{margin-left: 0;}
.slick-track .slick-slide>div{
  display: flex;
}
.slider-item {
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  flex-wrap: wrap;
  display: flex !important;
  padding-top: 30px;
  padding: 40px 30px;}
  .slider-item .img{
    width: 172px;
    height: 248px;}
    .slider-item .img img{
      width: 100%;
      height: 100%;}
  .slider-item .text-shadow{
    margin-top: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to top, #3A3A3AAA,#00000000);
    height: 120px;
    display: flex;}
    .slider-item .text{
      /* width: 413px; */
      width: 340px;
      padding-left: 30px;
      /* padding-right: 30px; */
      font-size: 19px;}
      .slider-item .text a{
        color: #333333;}
      .slider-item .text .read a{
        font-size: 16px;
        color: #861E00;
        font-weight: 600;}
      .slider-item .text .read i{
      margin-top: 4px;
      margin-left: 8px;}
.slick-next {right: -50px;}
  .slick-next:before{content:url('/assets/frontend/img/Chevron_Right.png')}
.slick-prev {left: -50px;}
  .slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 48px;
    line-height: 1;
    opacity: 1;
    color: #dd0202;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
  .slick-prev:before{content:url('/assets/frontend/img/Chevron_Left.png')}
.slick-dots {
  position: absolute;
  bottom: -60px;}
  .slick-dots li button:before {font-size: 12px;}
  .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #9D2503;}
.position-absolute {position: absolute;}
.menu{
  right: 100px;
  top: 20px;
  cursor: pointer;}
.tab-menu{display: none;}
  .tab-menu nav#navigation {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 424px;
    padding-top: 110px;
    line-height: 22.59px;
    z-index: 901;
    background: #fff;}
    .tab-menu nav#navigation ul{padding-left: 40px;}
      /* .tab-menu nav#navigation ul li{display: none;}  */
        .tab-menu nav#navigation ul li.menu-item-has-children{
          display: block;
          padding-top: 16px ;
          float: unset;
          padding-bottom: 17px;
          margin-right: 40px;}
            .tab-menu nav#navigation li.menu-item-has-children a{
            color: #333333;
            font-weight: 900;
            text-decoration: none;
            font-family: 'Muli-Black';
            font-size: 18px;}
              .tab-menu nav#navigation li.menu-item-has-children.current-page a{color: #861E00;}
              .tab-menu nav#navigation li.menu-item-has-children a:hover{color: #861E00;}
              .tab-menu nav#navigation li.menu-item-has-children a::before{
              font-family: "Font Awesome 5 Free";  content: "\f054";
              position: absolute;
              right: 40px;}
        .tab-menu nav#navigation .cancel {
          position: absolute;
          right: 40px;
          top: 40px;}
.brg-black{
  position: absolute;
  background: #00000080;
  top: 80px;
  width: 100%;
  z-index: 900;
  height: 1000px;}
.hienvat .slider-item{
  padding: 8px;
  border: none;
  height: 361px;}
  .hienvat .slider-item>div{
    display: flex;
    flex-direction: column;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;}
    .hienvat .slider-item .text{
      width: 413px;
      padding-right: 30px;
      margin-top: auto;}
      .hienvat .slider-item .text p{
        font-family: 'Muli-ExtraBold';
        font-weight: 700;
        color: #fff;}
.hienvat .slick-list{border: none}
.thoiky .timeline{
  width: 100vw;
  height: 880px;
  overflow: hidden;}
  .thoiky .timeline .btn-group{
    position: absolute;
    width: 1900px;
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    z-index: 9;
    text-align: center;}
    .thoiky .timeline .btn-group button{
      width: 412px;
      height: 52px;
      margin-right: 25px;
      margin-bottom: 30px;
      color: #fff;
      text-transform: uppercase;
      font-size: 18px;
      font-family: 'Muli';
      border-radius: 4px;
      line-height: 27px;
      border: none;
      background-color: #795E5ECC;}
      .thoiky .timeline .btn-group button.active{
        font-family: 'Muli-ExtraBold';
        background-color: #fff;
        box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
        color: #861E00;}
      .thoiky .timeline .btn-group button:focus{outline: none}
      .thoiky .timeline .btn-group button:last-child{margin-right: 0}
.chitietsach{
  height: 1000px;
  overflow: hidden;}
  .chitietsach .pdff-ui-wrapper, .chitietsach .pdff-ui-wrapper .pdff-ui-btn, .chitietsach .pdff-ui-page{background-color: #909090 !important; color: #fff !important;}
  .chitietsach .pdff-ui-btn.fa-chevron-right:before{content: url(/assets/frontend/img/Chevron_Right.png);}
  .chitietsach .pdff-ui-btn.fa-chevron-left:before{content: url(/assets/frontend/img/Chevron_Left.png);}
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn.fa-chevron-right::before{content: url(/assets/frontend/img/book-control-chevron-right.png);}
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn.fa-chevron-left::before{content: url(/assets/frontend/img/book-control-chevron-left.png);}
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn.ti-angle-double-right::before{content: url(/assets/frontend/img/book-control-chevrons-right.png);}
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn.ti-angle-double-left::before{content: url(/assets/frontend/img/book-control-chevrons-left.png);}
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn{background-color: transparent !important;}
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn.pdff-ui-start,
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn.pdff-ui-prev,
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn.pdff-ui-next,
  .chitietsach .pdff-ui-wrapper .pdff-ui-btn.pdff-ui-end{margin-top: -3px;}
  .chitietsach .pdff-ui-page label{color: #fff !important;}
  .chitietsach.cap1{background-color: #FFF8EA;}
  .chitietsach .bottom-section{
      display: flex;
      flex-direction: column;
      align-items: center;}
      .chitietsach .bottom-section .book-wrapper{
        height: 1000px;
        width: 100%;}
        .chitietsach .bottom-section .book-wrapper .pdff-floating .pdff-ui-controls{bottom: 30px !important;}
        .chitietsach .bottom-section .book-wrapper .pdff-container{
          width: 80%;
          /* background-color: #fff !important; */
          margin: 0 auto;}
          .chitietsach .bottom-section .book-wrapper .pdff-container .pdff-3dcanvas{
            padding-top: 20px;
            padding-bottom: 80px;}
          .chitietsach .bottom-section .book-wrapper .pdff-container.pdff-floating > .pdff-ui-next,
          .chitietsach .bottom-section .book-wrapper .pdff-container.pdff-floating > .pdff-ui-prev{
            background: none;
            margin-left: 43px;
            margin-right: 43px;
            font-size: 48px !important;}
      .chitietsach .bottom-section .flip-book {
      display: none;
      pointer-events: none;
      background-size: cover;}
      .chitietsach .bottom-section .flip-book .page.page-cover {
          background-color: #e3d0b5;
          margin-left: -327px;
          color: #785e3a;
          border: solid 1px #998466;}
          .chitietsach .bottom-section .flip-book .page.page-cover h2{
              text-align: center;
              padding-top: 40%;
              font-size: 210%;}
          .chitietsach .bottom-section .flip-book .page .page-content{
              background-size: cover;
              background-position: center;
          }
      .chitietsach .bottom-section .book-navigator{
        width: 385px;
        height: 54px;
        z-index: 9999;
        background-color: #909090;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
        border-radius: 100px;
        margin-top: 50px;}
        .chitietsach .bottom-section .book-navigator div.page-num{
          position: relative;
          float: left;
          font-size: 24px;
          line-height: 30px;
          color: #fff;
          margin-top: 11px;
          text-align: center;
          width: 128px;}
        .chitietsach .bottom-section .book-navigator button{
          background: none;
          border: none;
          margin-top: 10px;}
          .chitietsach .bottom-section .book-navigator button:focus{outline: none;}
          .chitietsach .bottom-section .book-navigator button.go-first{
            float: left;
            margin-left: 20px;}
          .chitietsach .bottom-section .book-navigator button.go-prev{
            float: left;
            margin-left: 20px;}
          .chitietsach .bottom-section .book-navigator button.go-last{
            float: right;
            margin-right: 20px;}
          .chitietsach .bottom-section .book-navigator button.go-next{
            float: right;
            margin-right: 20px;}
.game .box-container {
  display: flex;
  justify-content: center;
  margin-top: 150px;
}
.game__show {
  padding: 0 100px;

}
p.game__show-content{
  font-weight: 800;
  font-size: 28px;
  text-align: center;
  color: #333333;
  margin-top: 30px;
  font-family: 'Muli-ExtraBold';
}
.container-x .text-content{
    color: #333333;
    font-size: 20px;
}
.dsgame .box-container{
  display: flex;
  flex-wrap: wrap;
}
.box-img {
  max-width: 20%;
  margin: 0 25px;

}
.box-img:first-child,:nth-child(6),:nth-child(11),:nth-child(16),:nth-child(21){
  margin-left: 0;
}
.box-img:nth-child(5),:nth-child(10),:nth-child(15),:nth-child(20),:nth-child(26){
  margin-right: 0;
}
.boder-img {
  width: 304px;
  height: 264px;
  border: 1px solid #CCCCCC;
  padding: 40px 25px;
}
.box-container .text-content{
  color: #333333;
  font-weight: 800;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}
.dsgame .top-section{
  height: 100px;
}
.dsgame .boder-img img{
  width: 100%;
  height: 100%;
}
.dstukhoa .boder-img{
  width: 560px;
    height: 420px;
}
.box-key_img {
  width: 560px;
  margin: 0 100px;
}
.box-key_img img{
  width: 100%;
  height: 100%;
}
.dstukhoa .box-container{
  display: flex;
  justify-content: center;
  margin-top: 132px;
}
.game-ghep{
  width: 960px;
  height: 720px;
}
.gamechitiet .box-container {
  display: flex;
  justify-content: center;
}
.game-ghep img{
  width: 100%;
  height: 100%;
}
.bgr-bl{
  position: absolute;
width: 1920px;
height: 1000px;
left: 0px;
top: 80px;

background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
.chuc-mung{
  width: 600px;
  height: 654px;
  position: relative;
  background-color: #fff;
  border-radius: 30px ;
  margin-top: 120px;
    margin-left: 660px;
}
.chuc-mung .cup{
  position: absolute;
  width: 150px;
  height: 150px;
  left: 225px;
  top: 152px;

  background: #FFFFFF;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}
.chuc-mung .cup img{
  margin-top: 30px;
  margin-left: 28px;
}
.thongbao {
  margin-top: 125px;
  text-align: center;
}
.thongbao h3{
  color: #861E00;
  font-weight: 800;
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Muli-ExtraBold';
  margin-bottom: 20px;
}
.thongbao p{
  font-weight: 400;
font-size: 20px;
color: #333333;
margin: 0;
}
.thongbao b{
  font-weight: 600;
font-size: 20px;
color: #333333;

}
.btn-ok{
  position: absolute;
width: 240px;
height: 52px;
left: 180px;
top: 542px;

background: #861E00;
border-radius: 100px;
color: #FFFFFF;
font-weight: 800;
font-size: 20px;
padding: 11px 0;
}
.game-ghep-content {
  margin-left: 60px;
  width: 700px;
}
.game-ghep-content p{
  font-weight: 400;
  font-size: 18px;
  text-align: justify;
  line-height: 27px;
}
.ochu{
  width: 975px;
  height: 750px;
  border: 2px solid #861E00;
}
.key__cau-tra-loi{
  width: 641px;
  height: 758px;
  border: 2px solid #861E00;
  margin-left: 100px;
  padding: 26px 30px;
}
.keychitiet .box-container{
  display: flex;
}
.keychitiet .top-section{
  height: 100px;
}
.keychitiet .container-x .text-content{
  margin-bottom: 42px;
}
.key__input{
  border: none;
    border-bottom: 1px solid #CCCCCC;
    width: 100%;
    font-size: 20px;
    padding-bottom: 13px;
    padding-top: 13px;
    color: #333333;
    font-weight: 400;
    outline: transparent;
}
.key__box-input{
  position: relative;
}
.key__box-input:before{
  content: url('/assets/frontend/img/Vector.png');
  position:absolute;
  right: 0;
  top: 20px;
}
.key__dstk{
  font-weight: 600;
  font-size: 20px;
  color: #333333;
}
.bottom-ui .bottom-controls .mp-button-menu-button, .bottom-ui .bottom-controls .mp-nova-btn-icon{display: none !important;}
.footer-ui #footer .footer-logo{display: none !important;}
.position-absolute.lang {
  right: 200px;
  top: 30px;
}
div .top-section .back span::before {
    
    right: 112px !important;
    
}