@font-face {
    font-family: "SVN-GothamMedium";
    src: url(../fonts/SVN-GothamMedium/SVN-GothamMedium.woff2) format("woff2"),
        url(../fonts/SVN-GothamMedium/SVN-GothamMedium.eot) format("eot"),
        url(../fonts/SVN-GothamMedium/SVN-GothamMedium.ttf) format("ttf"),
        url(../fonts/SVN-GothamMedium/SVN-GothamMedium.woff) format("woff");
}

.page-3c-question .navbar.navbar {
  position: absolute;
  width: 100%;
}

.page-3c-question {
  background: url(../images/bg-bd.jpg) center, no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  position: relative;
  min-height: 100vh;
}
.page-3c-question ::-webkit-scrollbar {
  height: 0px;
}
.page-3c-question .page-main {
  background-color: transparent;
}
@media screen and (min-width: 768.1px) {
  .page-3c-question .page-main {
    display: table;
    min-height: -webkit-calc(100vh - 50px);
    min-height: calc(100vh - 50px);
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .page-3c-question .page-main {
    min-height: -webkit-calc(100vh - 98px);
    min-height: calc(100vh - 98px);
    display: table;
    
    padding-bottom: 5%;
  }
  .page-3c-question .page-result{
    padding-top: 120px;
  }
}
@media screen and (max-width: 370px) {
  .page-3c-question .page-main {
    padding-top: 110px;
  }
}
@media screen and (min-width: 768.1px) {
  .page-3c-question .sapporo-footer-fixed {
    position: absolute !important;
  }
}
@media screen and (max-width: 769px) {
  .page-3c-question .sapporo-footer-fixed {
    position: relative;
    margin-top: 5%;
  }
}
.page-3c-question .sapporo-footer-fixed .container {
  width: 95%;
  max-width: 95%;
  margin: 0px auto;
  padding-left: 0;
  padding-right: 0;
}

/*.wrapper-group {
  position: relative;
}
@media screen and (min-width: 768.1px) {
  .wrapper-group {
    display: table-cell;
    vertical-align: middle;
  }
}
.wrapper-group .inner-wrapper-group {
  position: relative;
}
@media screen and (min-width: 768.1px) {
  .wrapper-group .inner-wrapper-group {
    margin-top: 0%;
  }
}*/

.blk-gr3c-animation {
  max-width: 100%;
  display: table-cell;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .blk-gr3c-animation {
    overflow-x: scroll;
    overflow-y: hidden;
  }
}
/*.blk-gr3c-animation .inner-gr3c-animation {
  position: relative;
  padding: 9% 10.0625% 6.4% 11.07%;
}*/
/* @media screen and (max-width: 768px) {
  .blk-gr3c-animation .inner-gr3c-animation {
    display: block;
    min-width: 200%;
    padding: 25.5% 9.0625% 17.8% 10.07%;
  }
} */

.bg-3c-animation {
  width: 100%;
}


@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }
}


.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home{
  width: 54%;
  display: table;
  margin: 25px auto 0px auto;
  position: relative;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .bg-home{
  width: 100%;
  height: auto;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .hp-img-text{
  animation: img-text-1 5s infinite;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1{
  width: 39%;
  height: auto;
  position: absolute;
  top: 20%;
  left: 31%;
/*  transform: translateX(-50%);*/
  z-index: 1;
  
}
@keyframes img-text-1{
  0%
  {-webkit-transform:scale(1);transform:scale(1)}
  4%
  {-webkit-transform:scale(1.3);transform:scale(1.3)}
  8%
  {-webkit-transform:scale(1);transform:scale(1)}
  12%
  {-webkit-transform:scale(1.3);transform:scale(1.3)}
  16%
  {-webkit-transform:scale(1);transform:scale(1)}
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .gift-1{
  position: absolute;
  right: 22%;
    top: 26%;
    width: 10%;
  animation: gift-1 5s;
  animation-delay: 0.5s;
}
@keyframes gift-1{
  /*from, 10%, 20%, 30%, 40%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }*/
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  10% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  40% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .gift-2{
  position: absolute;
  left: 21%;
    top: 20%;
    width: 15%;
    animation: gift-1 5s;
    animation-delay: 0.5s;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .gift-box{
  position: absolute;
  left: 16%;
  bottom: 24%;
  width: 18%;
  animation: gift-1 5s;
  animation-delay: 0.5s;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .gift-3{
  position: absolute;
      right: 27.5%;
    top: 32%;
    width: 12%;
    animation: gift-1 5s;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .content{
  position: absolute;
  width: 35%;
  top: 52%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: opacity-1 5s;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .content p{
  font-size: calc(3px + 1vw);
  text-align: center;
  font-weight: 500;
  font-family: "SVN-GothamMedium";
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button{
  position: absolute;
  width: 35%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16%;
  text-transform: uppercase;
  font-family: "UTM Bebas";
  line-height: 1em;
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .the-le:hover{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .choi-ngay:hover{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
/*.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button a:hover{
  text-decoration: none;
}*/
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .the-le{
  background: url(../images/ctn-button-1.png) no-repeat;
  background-size: 100% 100%;
  float: left;
  padding: 6% 12%;
  font-size: calc(10px + 1vw);
  display: inline-block;
  color: #adacac;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .choi-ngay{
  background: url(../images/ctn-button-2.png) no-repeat;
  background-size: 100% 100%;
  float: right;
  padding: 6% 10%;
  font-size: calc(10px + 1vw);
  display: inline-block;
  color: #FFF;
  
}
.page-3c-question .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .the-le span,
.page-3c-question .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .choi-ngay span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1px;
}
.page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .ani-choi-ngay{
  -webkit-animation: bounceInS 3s infinite;
         -o-animation: bounceInS 3s infinite;
            animation: bounceInS 3s infinite;
}
@-webkit-keyframes bounceInS {
  from, 10%, 20%, 30%, 40%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  10% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  40% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-o-keyframes bounceInS {
  from, 10%, 20%, 30%, 40%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  10% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  40% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceInS {
  from, 10%, 20%, 30%, 40%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  10% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  40% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@media screen and (max-width: 1200px){
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home{
    width: 60%;
  }
}
@media screen and (max-width: 991px){
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home{
    width: 65%;
  }
}

.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1{
  width: 22%;
  height: auto;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1 img{
  width: 100%;
  height: auto;
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1 p{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 70%;
  text-align: center;
  font-family: "UTM Bebas";
  font-size: calc(15px + 1.5vw);
  color: #ffd283;
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .content{
  top: 51%;
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .content{
  animation: opacity-1 3s;
}
@keyframes opacity-1{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .the-le{
  background: url(../images/ctn-quiz-1.png) no-repeat;
  background-size: 100% 100%;
  float: left;
  padding: 5% 12%;
  font-size: calc(10px + 1vw);
  display: inline-block;
  color: #FFF;
  width: 45%;
  text-align: center;
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .choi-ngay{
  background: url(../images/ctn-quiz-2.png) no-repeat;
  background-size: 100% 100%;
  float: right;
  padding: 5% 12%;
  font-size: calc(10px + 1vw);
  display: inline-block;
  color: #FFF;
  width: 45%;
  text-align: center;
}
.page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .ctn-button{
  position: absolute;
  width: 42%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 19%;
  text-transform: uppercase;
  font-family: "UTM Bebas";
  line-height: 1em;
}

@media screen and (max-width: 767px){
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .gift-box{
    bottom: auto;
    top: 36%;
    left: 8%;
    width: 25%;
  }
}

.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home{
  width: 30%;
  margin: 9.5% auto 0 auto;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1{
  width: 60%;
  position: static;
  margin: -8% auto 0 auto;
  display: table;
  transform: translateX(0);
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1 img{
  width: 100%;
  height: auto;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1 p{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  top: 50%;
  width: 80%;
  font-size: calc(5px + 0.8vw);
  font-family: "UTM Bebas";
  text-align: center;
  line-height: 1.3;
  color: #ffd283;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .md-text-1{
  position: absolute;
  top: 10%;
  font-size: calc(20px + 4vw);
  font-family: "UTM Bebas";
  color: #FFF;
  left: 50%;
  transform: translateX(-60%);
  z-index: 3;
  line-height: 0.8;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .bg-home{
  width: 75%;
  display: table;
  margin: 0 auto;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-2{
  display: table;
  margin: 10px auto;
  width: 30%;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .content-result{
  display: table;
  margin: 0 auto 10px auto;
  width: 22%;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .content-p1{
  text-align: center;
  font-size: calc(3px + 0.7vw);
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .content-p1 p{
  font-weight: 500;
  margin-bottom: 5px;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .ctn-button-3{
  background: url(../images/ctn-button-2.png) no-repeat;
  background-size: 100% 100%;
  padding: 4% 10%;
  font-size: calc(10px + 0.7vw);
  display: table;
  color: #FFF;
  width: auto;
  text-align: center;
  font-family: "UTM Bebas";
  margin: 20px auto 0 auto;
  line-height: 1;
  animation: bounceInD 3s infinite;
  position: relative;
  z-index: 10;
}
@-webkit-keyframes bounceInD {
  from, 10%, 20%, 30%, 40%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  10% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  40% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-o-keyframes bounceInD {
  from, 10%, 20%, 30%, 40%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  10% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  40% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceInD {
  from, 10%, 20%, 30%, 40%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  10% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  40% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .md-content-result{
  display: table;
  margin: 0 auto 10px auto;
  width: 70%;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .md-content-result .content-result{
  display: inline-block;
  margin: 0;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .md-content-result .content-result-1{
  float: left;
  width: 35%;
}
.page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .md-content-result .content-result-2{
  float: right;
  width: 45%;
}
.page-3c-question .md-the-le{
  width: 100%;
  height: 85%;
  display: none;
 vertical-align: bottom;
}
.page-3c-question .fancybox-slide{
  left: 50%;
  transform: translateX(-50%);
  width: 80% !important;
  top: auto;
  bottom: 0px;
  padding: 0px;
}
.page-3c-question .fancybox-content{
  background: url(../images/bg-the-le.jpg) no-repeat !important;
  background-size: 100% 100% !important;
  border-radius: 10px 10px 0px 0px;
  padding: 10px 70px;
}
.page-3c-question .fancybox-is-open .fancybox-bg{
  opacity: 0.6;
}
.page-3c-question .md-the-le .title-the-le{
  text-align: center;
  margin-bottom: 20px;
}
.page-3c-question .md-the-le .content{
  overflow-y: scroll;
  /* height: 300px; */
  padding-right: 30px;
}
.page-3c-question .md-the-le .content p{
  font-size: 13px;
}
.page-3c-question .md-the-le .content p a{
  color: #000;
}
.page-3c-question .md-the-le .title-the-le .img-2{
  width: 30%;
}

.page-3c-question .md-the-le .content::-webkit-scrollbar {
  width: 7px;               
}

.page-3c-question .md-the-le .content::-webkit-scrollbar-track {
  background: #FFF;    
  border-radius: 20px;        
}

.page-3c-question .md-the-le .content::-webkit-scrollbar-thumb {
  background-color: #f8aa52;    
  border-radius: 20px;       
}
.page-3c-question .fancybox-slide--html .fancybox-close-small{
  background: url(../images/ico-close.png) no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 30px;
  right: 10px;
  top: 10px;
}
.page-3c-question .fancybox-slide--html .fancybox-close-small svg{
  display: none;
}
@media screen and (max-width: 991px){
  .page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home{
    width: 40%;
  }
}

.page-3c-question .page-main .md-desktop{
  display: block;
}
.page-3c-question .page-main .md-mobile{
  display: none;
}

@media screen and (max-width: 767px){
  .page-3c-question .page-main .md-desktop{
    display: none;
  }
  .page-3c-question .page-main .md-mobile{
    display: block;
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home{
    width: 100%;
    margin: 0 auto;
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1{
    width: 70%;
    top: 25%;
    left: 15%;
  }
  @keyframes img-text-1{
    0%
    {-webkit-transform:scale(1);transform:scale(1)}
    4%
    {-webkit-transform:scale(1.2);transform:scale(1.2)}
    8%
    {-webkit-transform:scale(1);transform:scale(1)}
    12%
    {-webkit-transform:scale(1.2);transform:scale(1.2)}
    16%
    {-webkit-transform:scale(1);transform:scale(1)}
  }

  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .content{
    width: 56%;
    top: 59%;
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .content p{
    font-size: calc(4px + 2vw);
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button{
    width: 60%;
    bottom: 13%;
  }
  .page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button{
    bottom: 18%;
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .the-le{
    font-size: calc(15px + 1vw);
    padding: 6% 14%;
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .choi-ngay{
    font-size: calc(15px + 1vw);
    padding: 6% 12%;
  }
  .page-3c-question .fancybox-slide{
    width: 100%  !important;
  }
  .page-3c-question .md-the-le{
    height: 85%;
  }
  .page-3c-question .fancybox-content{
    padding: 10px 30px;
  }
  .page-3c-question .md-the-le .content{
    /* height: 400px; */
  }
  .page-3c-question .md-the-le .title-the-le{
    margin-bottom: 30px;
  }
  .page-3c-question .md-the-le .content::-webkit-scrollbar {
    width: 5px;               
  }
  .page-3c-question .fancybox-slide--html .fancybox-close-small{
   width: 50px;
    height: 20px;
  }
  .page-3c-question .fancybox-is-open .fancybox-bg{
    opacity: 0;
  }
  .page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1{
    width: 35%;
    top: 31%;
    left: 50%;
  }
  .page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1 p{
    font-size: calc(20px + 3vw);
  }
  .page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .content{
    top: 53.5%;
  }
  .page-3c-question .page-quiz-2 .blk-gr3c-animation .inner-gr3c-animation .main-home .content{
    top: 58%;
  }
  .page-3c-question .page-quiz-3 .blk-gr3c-animation .inner-gr3c-animation .main-home .content{
    top: 56%;
  }
  .page-3c-question .page-quiz-4 .blk-gr3c-animation .inner-gr3c-animation .main-home .content{
    top: 54%;
  }
  .page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button{
    width: 70%;
    bottom: 17%;
  }
  .page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .content p{
    font-size: calc(9px + 1vw);
  }
  .page-3c-question .page-main{
    margin: 0 auto;
    width: 100%;
  }
  .page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .bg-home{
    width: 70%;
  }
  .page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .md-text-1{
    font-size: calc(40px + 5vw);;
  }
  .page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1{
    width: 50%;
  }
  .page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .img-text-1 p{
    font-size: calc(4px + 2.2vw);
  }
  .page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .content-p1{
    font-size: calc(8px + 0.7vw);
    padding: 0px 10px;
  }
  .page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .ctn-button-3{
    padding: 3% 7%;
    font-size: calc(15px + 1vw);
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .gift-3{
    right: 15%;
    top: 34%;
    width: 18%;
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .gift-2{
    left: 3%;
    top: 28%;
    width: 20%;
  }
  .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .gift-1{
    right: 2%;
    top: 33%;
    width: 15%;
  }
  .page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .the-le:focus{
    transform: scale(1.2);
    transition-duration: 0.1s;
    font-size: calc(18px + 1vw);
  }
  .page-3c-question .page-quiz-1 .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button .choi-ngay:focus{
    transform: scale(1.2);
    transition-duration: 0.1s;
    font-size: calc(18px + 1vw);
  }
}

@media screen and (max-width: 400px){
    .page-3c-question .page-main .blk-gr3c-animation .inner-gr3c-animation .main-home .md-ctn-button{
      width: 65%;
      bottom: 12.5%;
    }
}

@media screen and (max-width: 991px) and (min-width: 400px){
    .page-3c-question .page-result .blk-gr3c-animation .inner-gr3c-animation .main-home .md-text-1{
      top: 12%;
    }
}

.page-3c-question .ico-book {
    position: absolute;
    right: 17.5%;
    top: 42%;
    width: 13%;
    animation: bounceInSs 3s infinite;
    animation-delay: 1s;
}
.page-3c-question .ico-book a {
    display: inline-block;
}

@-webkit-keyframes bounceInSs {
    from, 10%, 20%, 30%, 40%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    10% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
    30% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
    40% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
}
  
@-o-keyframes bounceInS {
    from, 10%, 20%, 30%, 40%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
         animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    10% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
    30% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
    40% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
@keyframes bounceInS {
    from, 10%, 20%, 30%, 40%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
         animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    10% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
    30% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
    40% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
}
.page-3c-question .ico-book img {
    width: 100%;
}
.page-3c-question .md-the-le-1 .title-the-le img {
    width: 70%;
}
.page-3c-question .md-the-le-1 .cl-yl {
    color: #cc9933;
    font-size: 25px !important;
    font-family: "UTM Bebas";
}
.page-3c-question .md-the-le-1 span {
    color: #000;
    font-weight: 700;
}
.page-3c-question .md-the-le-1 span a{
    color: #cc9933 !important;
}
@media (max-width: 767px) {
    .page-3c-question .ico-book {
        right: 0%;
        top: 50%;
        width: 20%;
    }
}