@import url('../fonts/font.css');
*{padding:0;margin:0;}
ul, li, p, h1, h2, h3, h4, h5, h6 {padding:0;margin:0;}
a:hover, a:focus, a:active{
  text-decoration:none;
}
input, input:focus, button, select{
  outline:none!important;
}
button{
  border:none!important;
}
.none-list li{
  list-style-type: none;
}
/*======== Defautl img align-middle ========*/
.pad-t10{padding-top:10px;}
.pad-t15{padding-top:15px;}
.pad-t20{padding-top:20px;}
.pad-t25{padding-top:25px;}
.pad-t30{padding-top:30px;}
.pad-t35{padding-top:35px;}
.pad-t40{padding-top:40px;}
.pad-t45{padding-top:45px;}
.pad-t50{padding-top:50px;}
.pad-t55{padding-top:55px;}
.pad-t60{padding-top:60px;}
.pad-t65{padding-top:65px;}
.pad-t70{padding-top:70px;}
.pad-t75{padding-top:75px;}
.pad-t80{padding-top:80px;}
.pad-t85{padding-top:85px;}


.pad-b5{padding-bottom:5px;}
.pad-b10{padding-bottom:10px;}
.pad-b15{padding-bottom:15px;}
.pad-b20{padding-bottom:20px;}
.pad-b25{padding-bottom:25px;}
.pad-b30{padding-bottom:30px;}
.pad-b35{padding-bottom:35px;}
.pad-b40{padding-bottom:40px;}
.pad-b45{padding-bottom:45px;}
.pad-b50{padding-bottom:50px;}
.pad-b55{padding-bottom:55px;}
.pad-b60{padding-bottom:60px;}
.pad-b65{padding-bottom:65px;}
.pad-b70{padding-bottom:70px;}
.pad-b75{padding-bottom:75px;}
.pad-b80{padding-bottom:80px;}
.pad-b85{padding-bottom:85px;}

.pad-l10{padding-left:10px;}
.pad-l15{padding-left:15px;}
.pad-l20{padding-left:20px;}
.pad-l25{padding-left:25px;}
.pad-l30{padding-left:30px;}
.pad-l35{padding-left:35px;}
.pad-l40{padding-left:40px;}
.pad-l45{padding-left:45px;}
.pad-l50{padding-left:50px;}
.pad-l55{padding-left:55px;}
.pad-l60{padding-left:60px;}
.pad-l65{padding-left:65px;}
.pad-l70{padding-left:70px;}
.pad-l75{padding-left:75px;}
.pad-l80{padding-left:80px;}
.pad-l85{padding-left:85px;}

.pad-r10{padding-right:10px;}
.pad-r15{padding-right:15px;}
.pad-r20{padding-right:20px;}
.pad-r25{padding-right:25px;}
.pad-r30{padding-right:30px;}
.pad-r35{padding-right:35px;}
.pad-r40{padding-right:40px;}
.pad-r45{padding-right:45px;}
.pad-r50{padding-right:50px;}
.pad-r55{padding-right:55px;}
.pad-r60{padding-right:60px;}
.pad-r65{padding-right:65px;}
.pad-r70{padding-right:70px;}
.pad-r75{padding-right:75px;}
.pad-r80{padding-right:80px;}
.pad-r85{padding-right:85px;}

.mar-t10{margin-top:10px;}
.mar-t15{margin-top:15px;}
.mar-t20{margin-top:20px;}
.mar-t25{margin-top:25px;}
.mar-t30{margin-top:30px;}
.mar-t35{margin-top:35px;}
.mar-t40{margin-top:40px;}
.mar-t45{margin-top:45px;}
.mar-t50{margin-top:50px;}
.mar-t55{margin-top:55px;}
.mar-t60{margin-top:60px;}
.mar-t65{margin-top:65px;}
.mar-t70{margin-top:70px;}
.mar-t75{margin-top:75px;}
.mar-t80{margin-top:80px;}
.mar-t85{margin-top:85px;}

.mar-b10{margin-bottom:10px;}
.mar-b15{margin-bottom:15px;}
.mar-b20{margin-bottom:20px;}
.mar-b25{margin-bottom:25px;}
.mar-b30{margin-bottom:30px;}
.mar-b35{margin-bottom:35px;}
.mar-b40{margin-bottom:40px;}
.mar-b45{margin-bottom:45px;}
.mar-b50{margin-bottom:50px;}
.mar-b55{margin-bottom:55px;}
.mar-b60{margin-bottom:60px;}
.mar-b65{margin-bottom:65px;}
.mar-b70{margin-bottom:70px;}
.mar-b75{margin-bottom:75px;}
.mar-b80{margin-bottom:80px;}
.mar-b85{margin-bottom:85px;}

.mar-l10{margin-left:10px;}
.mar-l15{margin-left:15px;}
.mar-l20{margin-left:20px;}
.mar-l25{margin-left:25px;}
.mar-l30{margin-left:30px;}
.mar-l35{margin-left:35px;}
.mar-l40{margin-left:40px;}
.mar-l45{margin-left:45px;}
.mar-l50{margin-left:50px;}
.mar-l55{margin-left:55px;}
.mar-l60{margin-left:60px;}
.mar-l65{margin-left:65px;}
.mar-l70{margin-left:70px;}
.mar-l75{margin-left:75px;}
.mar-l80{margin-left:80px;}
.mar-l85{margin-left:85px;}

.mar-r10{margin-right:10px;}
.mar-r15{margin-right:15px;}
.mar-r20{margin-right:20px;}
.mar-r25{margin-right:25px;}
.mar-r30{margin-right:30px;}
.mar-r35{margin-right:35px;}
.mar-r40{margin-right:40px;}
.mar-r45{margin-right:45px;}
.mar-r50{margin-right:50px;}
.mar-r55{margin-right:55px;}
.mar-r60{margin-right:60px;}
.mar-r65{margin-right:65px;}
.mar-r70{margin-right:70px;}
.mar-r75{margin-right:75px;}
.mar-r80{margin-right:80px;}
.mar-r85{margin-right:85px;}
/*======== END Defautl img align-middle ========*/
/*--------- icon mobile -----*/
#nav-toggle {
    display: block;
    cursor: pointer;
    z-index: 999;
    position: relative;
    width:30px;
    height: 30px;
 }
#nav-toggle span{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
    cursor: pointer;
    height: 4px;
    width:28px;
    background: #231f20;
    position: absolute;
    display: block;
    content: '';
    right: 0;
}
#nav-toggle span:before {
  top: -10px; }

#nav-toggle span:after {
  bottom: -10px; }

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 200ms ease-in-out; }

#nav-toggle.active-menu span {
  background-color: transparent; }

#nav-toggle.active-menu span:before, #nav-toggle.active-menu span:after {
  top: 0; }

#nav-toggle.active-menu span:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

#nav-toggle.active-menu span:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }
 .form-search.style-mb{
  max-width: 100%;
 }

 /*========== ICON MOBILE 2 ========*/
 #nav-icon2{
  width: 40px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon2 span {
  display: block;
  position: absolute;
  height:5px;
  width: 50%;
  background: #d3531a;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
  left:0px;
  border-radius: 9px 0 0 9px;
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  top: 0px;
}

#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  top: 12px;
}

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: 24px;
}

#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
  left: 5px;
  top: 12px;
}

#nav-icon2.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 12px;
}

#nav-icon2.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
  left: 5px;
  top: 22px;
}

#nav-icon2.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 22px;
}

/*=========== ICON MOBILE 3 ======*/
.c-hamburger {
  display: block;
  position: relative;
  width: 31px;
  height: 27px;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  background: #fff;
}
.c-hamburger span {
  display: block;
  position: absolute;
  top:11px;
  left: 0px;
  height: 5px;
  background: #000;
  width: 30px;
}
.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #000;
  content: "";
}
.c-hamburger span::before {
  top: -10px;
}
.c-hamburger span::after {
  bottom: -10px;
}

.c-hamburger--htx span {
  -webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}
.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}
.c-hamburger--htx.is-active span {
  background: none;
}
.c-hamburger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}

/*========== CUSTOM SELECT ======*/
.custom-select select{
  -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    position: relative;
    z-index: 9;
    background: transparent;
    padding-right:20px;
    width: 100%;
    height: 40px;
    border:1px solid #ddd;
    cursor: pointer;
    padding-left: 15px;
}
.custom-select{
  position: relative;
}
.custom-select:before{
  content: "\f0d7";
  font-family: FontAwesome;
  position: absolute;
  right:10px;
  top:7px;
    z-index: 0;
  color: #000;
}
/*======== GOTO TOP =========*/
#goto-top {
    margin-left: 12px;
    font-size: 25px;
    z-index: 999;
    cursor: pointer;
    color: #ed5624;
    margin-top: 10px;
    width:30px;
    height:30px;
    text-align: center;
    color:#fff;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    border-radius:50%;
    background:#fdc810;
    text-align: center;
}
#goto-top i{
  margin-top: 2px;
}
/*========== LOGO LAVA =====*/
.box-lava {
    margin-top: 15px;
}
.box-fter-lava-text {
    max-width: 133px;
    display: inline-block;
    vertical-align: middle;
    text-align: justify;
    font-size: 13px;
    margin-right: 2px;
}
.box-fter-lava-text a:first-child {
    word-spacing: 6px;
    letter-spacing: 1px;
}
.box-fter-lava-text a {
    display: block;
    color: #000;
}
.box-fter-lava-text a:last-child {
    letter-spacing: 2px;
}

/*============== FORM SEARCH =========*/
.form-search-model{
    position: relative;
}
.form-search-model input {
    height: 40px;
    padding-left: 15px;
    width: 100%;
    padding-right: 55px;
}
.form-search-model button {
    width: 40px;
    height: 40px;
    background: #0063a7;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border: none;
    position: absolute;
    right: 0;
    top: 0;
}

/*============= ELEMENT ALIGN ======*/
.ele-center{
  text-align: center;
}
.ele-right{
  text-align: right;
}
.ele-left{
  text-align: left;
}

/*======== CHANGE COLOR PLACEHOLDER ======*/
.form-tuvan ::-webkit-input-placeholder { 
    color: #000;
  }
.form-tuvan ::-moz-placeholder {
    color: #000;
  }
.form-tuvan :-ms-input-placeholder {
    color: #000;
  }
.form-tuvan :-moz-placeholder {
    color: #000;
  }

.form-hoithao ::-webkit-input-placeholder { 
    color: #000;
  }
.form-hoithao ::-moz-placeholder {
    color: #000;
  }
.form-hoithao :-ms-input-placeholder {
    color: #000;
  }
.form-hoithao :-moz-placeholder {
    color: #000;
  }
  
  .runright-arrow{
    -webkit-animation: arrowrightrun 1.7s infinite;
    animation: arrowrightrun 1.7s infinite;
    display: inline-block;
  }

  @-webkit-keyframes arrowrightrun {
    0%{
      opacity: 1;
      -webkit-transform: translate(5px, 0);
      -ms-transform: translate(5px, 0);
      -o-transform: translate(5px, 0);
      transform: translate(5px, 0);
    }
     80%{
      -webkit-transform: translate(8px, 0);
      -ms-transform: translate(8px, 0);
      -o-transform: translate(8px, 0);
      transform: translate(8px, 0);
      opacity: 0.8;
    }
  100%  {
     -webkit-transform: translate(8px, 0);
      -ms-transform: translate(8px, 0);
      -o-transform: translate(8px, 0);
      transform: translate(8px, 0);
      opacity: 0;
    }
}
@keyframes arrowrightrun {
   0%{
      opacity: 1;
      -webkit-transform: translate(5px, 0);
      -ms-transform: translate(5px, 0);
      -o-transform: translate(5px, 0);
      transform: translate(5px, 0);
    }
     80%{
      -webkit-transform: translate(8px, 0);
      -ms-transform: translate(8px, 0);
      -o-transform: translate(8px, 0);
      transform: translate(8px, 0);
      opacity: 0.8;
    }
  100%  {
     -webkit-transform: translate(8px, 0);
      -ms-transform: translate(8px, 0);
      -o-transform: translate(8px, 0);
      transform: translate(8px, 0);
      opacity: 0;
    }
}