/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
/*bổ sung menu*/ /*@media screen and (min-width: 850px){.transparent #masthead{z-index:11}}#logo img {padding: 6px;}#header.has-transparent #masthead,#header.has-transparent .top-bar-nav.nav-right {border-bottom: 1px solid white;}*/
#header.has-transparent .stuck #masthead {
  border-bottom: 0.5px solid rgb(0 56 61 / 68%);
} /*.header.show-on-scroll:not(.stuck), .header.transparent:not(.stuck) #masthead,.header.transparent:not(.stuck) #top-bar {background: #0000004a;}*/
/*shake button + text typing*/
.my-shake {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  animation: myshake 1.5s ease infinite alternate;
}
@keyframes myshake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
.my-text-typing {
  animation: tp-typing 4s steps(20) infinite;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  border-right: 0.15em solid #fff;
}
@keyframes tp-typing {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  55%,
  65%,
  75% {
    opacity: 1;
  }
  60%,
  70% {
    opacity: 0;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
.section-baogia .wpcf7-response-output {
  color: #801024;
}
.section-baogia p span input {
  color: #f8da3c !important;
  border-radius: 8px;
}
.form-widget p input {
    border-radius: 8px;
}
.has-spinner.button-popup.button-max-width:hover {
    background: #f8da3c; 
    color: #fff;
}
/*Form bao gia ngang*/
.section-baogia,
.section-baogia .section-bg {
  box-shadow: inset 0 -1vw 15vw 0 #335f64;
  mix-blend-mode: multiply;
}
.wpcf7-spinner {
  display: none;
}
.row-bao-gia .wpcf7 p > span > input {
  background: transparent !important;
}
.row-bao-gia #icon-form {
  color: #fff;
}
.row-bao-gia .wpcf7 input::placeholder {
  color: #fff;
}
.row-bao-gia .flex-col.ml-half {
  margin-left: 0;
}
@media only screen and (min-width: 850px) {
  .row-bao-gia .flex-col.flex-grow {
    margin-right: 12px;
  }
}
@media only screen and (max-width: 549px) {
  .submit-btn-custom {
    width: 100%;
  }
}
.wpcf7 p {
  position: relative;
}
#icon-form {
  position: absolute;
  color: #666;
  z-index: 1;
  font-size: 18px;
  top: 8px;
  left: 10px;
}
.contact-input {
  padding-left: 40px !important;
}
/*Form - date input*/
@media (max-width: 849px) {
  input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}
/*CSS marquee*/
.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 70px;
  overflow-x: hidden;
}
.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
  height: 70px;
}
.content {
  margin-top: 20px;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/*color listing gold*/
.color-listing ul li.bullet-star:before {
  color: #ffeb3b;
}
.gold-listing ul li.bullet-star:before {
  color: #ff9800;
}
/*tab custom*/
.custom-tab-tien-ich .nav-pills > li > a {
  border-radius: 0;
  border: 1.5px solid #fff;
  text-transform: capitalize;
  font-family: sans-serif;
  font-size: 13pt;
}
.custom-tab-tien-ich .nav-pills > li:nth-child(n + 1) {
  margin-left: 2px;
}
.custom-tab-tien-ich .nav-pills > li {
  margin-bottom: 20px;
  background: #979797;
  transition: all 0.6s ease;
}
.custom-tab-tien-ich .nav-pills > li span {
  color: #fff;
}
.custom-tab-tien-ich .nav-pills > li:hover {
  background: #1a1449;
}
.custom-tab-tien-ich .nav-pills > li.active > a {
  background: linear-gradient(248deg, #2ab574 0%, #283891 100%);
  border: 1.5px solid #009688;
}
.custom-tab-tien-ich > ul {
  overflow: auto;
  white-space: nowrap;
  display: block;
}
.custom-tab-tien-ich > li {
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 14px;
  text-decoration: none;
} /*.line-tab .tab-panels{border: 1px solid #d5ccaa;padding: 12px;}*/
/*My gallery*/
.my-gallery .image-cover {
  margin: 3px;
  border-radius: 6px;
}
.my-gallery .box-text {
  margin: 3px;
  border-radius: 0 0 6px 6px;
  width: 98.5%;
}
.my-gallery .box-text {
  padding: 2px;
}
/*CSS button btn*/
.custom-btn {
  width: 200px;
  height: 40px;
  padding: 1px 25px;
  border: 2px solid #000;
  font-family: "roboto", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
/* btn 66 */
.btn-66 {
  /*background:#0b535f;*/
  color: #fff;
  z-index: 1;
}
.btn-66:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  background: #fff6ed;
  transition: all 0.3s ease;
}
.btn-66:hover {
  color: #000;
}
.btn-66:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-66:active {
  top: 2px;
}
/*btn 67*/
.btn-67 {
  background: #000;
  color: #fff;
  z-index: 1;
}
.btn-67:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #0b535f;
  transition: all 0.3s ease;
}
.btn-67:hover {
  color: #000;
}
.btn-67:hover:after {
  left: 0;
  width: 100%;
}
.btn-67:active {
  top: 2px;
}
/*btn 68*/
.btn-68 {
  background: #0b535f;
  color: #fff;
  z-index: 1;
}
.btn-68:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  background: #e0e5ec;
  transition: all 0.3s ease;
}
.btn-68:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-68 {
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn-68:hover {
  color: #0b535f;
}
.btn-68:before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-68:active {
  box-shadow: 4px 4px 6px 0 #ffffff4d, -4px -4px 6px 0 #747d8833,
    inset -4px -4px 6px 0 #ffffff33, inset 4px 4px 6px 0 #00000033;
}
@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
/**** CSS Auto popup bottom project page *****/
.custom-popUp {
  position: fixed;
  z-index: 1000;
  max-width: 379px;
  height: 360px;
  background: #fff;
  border: 2px solid #b6ddda;
  bottom: 0;
  left: 0;
  margin-left: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  margin-bottom: -425px;
}
.custom-popUp .x-close {
  color: #fff;
  right: 8px;
  top: 0;
  position: absolute;
  font-size: 20pt;
  cursor: pointer;
  z-index: 20;
  transform: rotate(200deg);
  transition: all 0.5s ease;
}
#test-my-custom-button .my-text-typing {
  border-right: 0.15em solid #835e38 !important;
}
.add-plus {
  position: fixed;
  z-index: 999;
  bottom: 0;
  font-size: 15px;
  left: 2%;
  -webkit-transition: all 1.25s ease;
  -moz-transition: all 1.25s ease;
  -o-transition: all 1.25s ease;
  transition: all 1.25s ease;
  cursor: pointer;
  text-align: left;
  letter-spacing: 1px;
  width: 228px;
  justify-content: flex-start;
  padding: 15px 10px;
  display: -webkit-flex;
  align-items: center;
  height: 45px;
  background: #f3d8a1;
  color: #79542f;
  border-top: 2px solid #79542f;
  border-right: 2px solid #79542f;
  border-left: 2px solid #79542f;
}
.add-plus span {
}
.custom-popUp.active {
  margin-bottom: 0 !important;
}
.custom-popUp.active .x-close {
  transform: rotate(45deg);
  transition: all 1.3s ease;
}
.add-plus.active {
  margin-bottom: -55px;
}
.add-plus.active + .devvn_bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000ad;
  z-index: 2;
  transition: all 1.25s ease;
}
.back-to-top {
  bottom: 50px;
  left: 2%;
  right: unset;
}
@media only screen and (max-width: 549px) {
  .add-plus {
    width: 235px;
  }
  .custom-popUp {
    max-width: 300px;
    height: 320px;
  }
} /*#test-my-custom .col-inner{padding:12px 6px!important}*/
.custom-popUp .wpcf7 p {
  position: relative;
}
.custom-popUp #icon-form {
  position: absolute;
  color: #cb8639;
  z-index: 100;
  font-size: 18px;
  top: 8px;
  left: 10px;
}
.custom-popUp .wpcf7 p > span > input {
  border: 0 solid;
  border-bottom: 1px solid #cb8639;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  background: transparent !important;
}
.custom-popUp .wpcf7 p > span > textarea {
  border: 0 solid;
  border-bottom: 1px solid #cb8639;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  background: transparent;
}
.custom-popUp .wpcf7 input::placeholder {
  color: #cb8639;
}
.custom-popUp .wpcf7 textarea::placeholder {
  color: #cb8639;
}
.custom-popUp .contact-input {
  padding-left: 40px !important;
}
.custom-popUp .submit-btn-custom {
  border: 1px solid #fff !important;
}
/*Effect iconhover -> icon*/
.my-icon-top {
  margin-top: -40px;
  margin-bottom: 10px;
  visibility: hidden;
  transition: all 0.2s linear;
}
.my-icon-bottom {
  visibility: visible;
}
#test-my-custom-button.add-plus:hover > .icon-bao-gia > .my-icon-top {
  margin-top: 31px !important;
  visibility: visible;
  transition: all 0.2s linear;
}
/*img hover zoom*/
.img-hover-zoom .img-inner:before {
  content: "\e012";
  font-family: fl-icons;
  font-size: 6px;
  color: #fff;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 1;
  visibility: hidden;
}
.img-hover-zoom .img-inner:hover:before {
  font-size: 20px;
  top: 50%;
  visibility: visible;
  margin-top: -20px;
  margin-left: -20px;
  border: solid 2px;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  line-height: 38px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  text-align: center;
  transition: all 0.6s ease;
  color: #f8da3c;
}
.button.primary.lowercase {
    border-radius: 8px;
    overflow: hidden;
}
.img-hover-zoom .overlay {
  box-sizing: border-box;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
.img-hover-zoom:hover .overlay {
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
  transition: all 0.6s ease;
}
.img-hover-zoom .caption {
  transform: translateY(90%);
  height: 100%;
  font-size: 16px;
  padding: 2px 10px;
}
.img-hover-zoom:hover .caption {
  padding-top: 50%;
}