/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

#button-contact-vr {
    position: fixed;
    bottom: 100px;
    z-index: 999;
    right: 0;
  }
  
  /*phone*/
  #button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
  }
  
  #button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
  }
  
  .phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: #cf203170;
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
  }
  
  .phone-vr-img-circle {
    background-color: #CF2031;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
  }
  
  .phone-vr-img-circle a {
    display: block;
    line-height: 37px;
  }
  
  .phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
  }
  
  @-webkit-keyframes phone-vr-circle-fill {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
  
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
  
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
  
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
  
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
  
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
  
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
  }
  
  @-webkit-keyframes zoom {
    0% {
        transform: scale(.9)
    }
  
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }
  
    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
  }
  
  @keyframes zoom {
    0% {
        transform: scale(.9)
    }
  
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }
  
    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
  }
  
  .phone-bar a {
    position: fixed;
    bottom: 25px;
    left: 30px;
    z-index: -1;
    color: #fff;
    font-size: 16px;
    padding: 8px 15px 7px 50px;
    border-radius: 100px;
    white-space: nowrap;
  }
  
  .phone-bar a:hover {
    opacity: 0.8;
    color: #fff;
  }
  
  #zalo-vr .phone-vr-img-circle {
    background-color: #1F5E9D;
  }
  
  #zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #1f5e9da3;
    background-color: #1f5e9d7a;
  }
#header-contact{

}
#header-contact {

}
#header-contact li{
  
}
#header-contact li a{
      font-size: 13px;
      color: #fff;
      text-transform: unset;
}
.company-name{text-align: center;}
.company-name h2{color: #35529e;}
.company-name p{
  font-size: 18px;
}
.header-nav.header-bottom-nav{

}
.header-nav.header-bottom-nav>li{

}
.header-nav.header-bottom-nav>li>a{padding: 14px 15px;}
.header-nav.header-bottom-nav>li>a::before {
    position: absolute;
    content: '';
    background: #fff;
    /* clip-path: polygon(100% 0, 0% 100%, 0 0); */
    height: 100%;
    width: 1px;
    bottom: 0;
    right: -10.5px;
    transform: skewX(-19deg);
    opacity: 1 !important;
    display: block;
}
.header-nav.header-bottom-nav>li>a:hover{position: relative;background: #606062;}
.header-nav.header-bottom-nav>li>a:hover:before {
    position: absolute;
    content: '';
    background: #606062;
    clip-path: polygon(100% 0, 0% 100%, 0 0);
    height: 100%;
    width: 18px;
    bottom: 0;
    right: -17.5px;
    transform: unset;
}
.header-nav.header-bottom-nav>li>a:hover:after {
    position: absolute;
    content: '';
    background: #606062;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    height: 100%;
    width: 18px;
    bottom: 0;
    left: -17.5px;
}
.header-nav.header-bottom-nav>li.active>a{position: relative;background: #606062;}
.header-nav.header-bottom-nav>li.active>a::before {
    position: absolute;
    content: '';
    background: #606062;
    clip-path: polygon(100% 0, 0% 100%, 0 0);
    height: 100%;
    width: 18px;
    bottom: 0;
    right: -17.5px;
    transform: unset;
}
.header-nav.header-bottom-nav>li.active>a::after {
    position: absolute;
    content: '';
    background: #606062;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    height: 100%;
    width: 18px;
    bottom: 0;
    left: -17.5px;
}
.hotline {
    padding-left: 65px;
    background: url(images/hotline.png) no-repeat left center;
    width: 215px;
}
.hotline span {
    font-size: 18px;
    font-weight: 500;
}
.hotline p {
    margin-bottom: 0;
    font-weight: 700;
    color: #35529e;
    font-size: 22px;
}
.icon-dv{

}
.icon-dv .icon-box-img{
   
}
.icon-dv .icon-box-img img{
 -webkit-transition: 0.8s ease-out;
    -moz-transition: 0.8s ease-out;
    -o-transition: 0.8s ease-out;
    transition: 0.8s ease-out;
}
.icon-dv:hover img {
    transform: scaleY(180);
    -webkit-transition: 0.8s ease-out;
    -moz-transition: 0.8s ease-out;
    -o-transition: 0.8s ease-out;
    transition: 0.8s ease-out;
    transform: rotateY(360deg);
}
.icon-dv .icon-box-text{

}
.icon-dv .icon-box-text h3{
  color: #fff;
}
.intro-infor{
  position: relative;
  z-index: 99999;
}
.intro-infor h2 {
    font-size: 18px;
    color: rgb(31, 30, 30);
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    padding: 10px 0px 0px;
}
.intro-infor h3{
    color: #35529e;
    /* font-family: 'Impact'; */
    transition: all 0.3s;
    text-transform: uppercase;
    font-size: 32px;
}
.intro-infor p{
line-height: 30px;
    color: #1f1e1e;
}
.intro-img{
  position: relative;
  /* padding: 20px; */
  padding: 20px 20px 0 0;
}
.intro-img:after {
    position: absolute;
    content: '';
    background: #35529e;
    width: 150px;
    height: 100px;
    top: 0px;
    right: 0px;
    z-index: -1;
}
.intro-img a{
  position: relative;
  overflow: hidden;
}
.intro-img a:after {
    position: absolute;
    top: 0;
    left: -66%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
    opacity: 0;
}
.intro-img a:hover:after {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    opacity: 1;
}
@-webkit-keyframes shine {100% { left:125%; }}
@keyframes shine {100% { left:125%; }}
.text-title-lv h2 {
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    padding-bottom: 25px;
    color: #35529e;
    text-transform: uppercase;
}
.text-title-lv h2::after {
    position: absolute;
    content: "";
    width: 194px;
    height: 12px;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    background: url(images/main-af.png) no-repeat;
}
.box-blog-post{margin-bottom: 30px;}
.box-blog-post .box-text{
  padding: 20px 5px 10px;
}
.box-blog-post .box-text h5.post-title{

}
.box-blog-post .box-text h5.post-title a{
      font-size: 14px;
      line-height: 23px;
      font-weight: 700;
      text-transform: uppercase;
      color: rgb(31, 30, 30);
      display: block;
      height: 46px;
      transition: 0.3s;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      white-space: normal;
}
.box-blog-post .box-text .from_the_blog_excerpt{
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  margin: 15px 0;
}
.view-detail-construction {
    font-weight: 700;
    color: #fff;
    display: inline-block;
    padding: 5px 20px;
    border-top: 1px solid #35529e;
    transition: 0.3s;
    background: #35529e;
}
.box-blog-post{
    word-break: break-all;
    background: rgb(242, 242, 242);
    padding: 5px;
    transition: 0.4s;
}

.box-blog-post:hover{
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.box-blog-post .box-image::after{
      position: absolute;
    top: 0px;
    left: -66%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    transform: skewX(-10deg);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
.box-blog-post:hover .box-image::after{
      animation: 0.75s ease 0s 1 normal none running shine;
}
.tab-congtrinh ul.nav{

}
.tab-congtrinh ul.nav li{margin: 0 10px;margin-bottom: 10px;}
.tab-congtrinh ul.nav li a{
  border: 1px solid #35529e;
  padding: 0 20px;
}
.icon-thanhtuu{

}
.icon-thanhtuu .icon-box-img{
   margin-bottom: 0;
}
.icon-thanhtuu .icon-box-img img{
 -webkit-transition: 0.8s ease-out;
    -moz-transition: 0.8s ease-out;
    -o-transition: 0.8s ease-out;
    transition: 0.8s ease-out;
}
.icon-thanhtuu:hover img {
    transform: scaleY(180);
    -webkit-transition: 0.8s ease-out;
    -moz-transition: 0.8s ease-out;
    -o-transition: 0.8s ease-out;
    transition: 0.8s ease-out;
    transform: rotateY(360deg);
}
.icon-thanhtuu .icon-box-text{

}
.icon-thanhtuu .icon-box-text h3{
  font-size: 18px;
    font-weight: 700;
    color: #1f1e1e;
    text-transform: capitalize;
    margin: 10px 0 0 0;
}
#newsletter-form{
  background-color: #606062;
  color: #fff;
  padding: 20px;
}
.register-slogan{
  margin-bottom: 10px !important;
  font-size: 14px;
  line-height: 21px;
}
#newsletter-form input.wpcf7-form-control{
  border-radius: 5px;
  margin-bottom: 10px;
}
#newsletter-form textarea.wpcf7-form-control{
  border-radius: 5px;
  margin-bottom: 10px;
}
#newsletter-form .text-end{
  text-align: right;
}
#newsletter-form .text-end .wpcf7-spinner{
  display: none;
}
.gal-doitac .gallery-box{
      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    background: #fff;
    margin: 5px 0;
    border-radius: 5px;
    padding: 8px;
}
.text-title-tintuc h2 {
    text-transform: uppercase;
    color: #35529e;
    font-size: 25px;
    display: block;
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    padding-bottom: 18px;
}
.text-title-tintuc h2::after {
    position: absolute;
    content: '';
    background: url(images/intro-title-af.png) no-repeat;
    width: 103px;
    height: 12px;
    bottom: 0;
    left: 0;
}
.blog-right .post-item{

}
.blog-right .post-item .view-detail-construction{
  display: none;
}
.blog-right .box-blog-post .box-text{
padding: 0;
padding-left: 10px;
}
.blog-right .box-blog-post .box-text .from_the_blog_excerpt{
margin: 0;
}
.blog-right  .box-blog-post{margin-bottom: 15px;}
.icon-footer{align-items: center;}
.icon-footer .icon-box-img{width: 15px !important;}
.icon-footer .icon-box-img img{padding-top: 0;}
.icon-footer .icon-box-text{
}
.icon-footer .icon-box-text p{
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
}
.title-ft{/* margin-top: 30px; */}
.title-ft h3{
font-weight: 700;
font-size: 16px;
color: #FFFFFF;
}
.menu-footer{
}
.menu-footer .menu-item{
}
.menu-footer .menu-item a{font-weight: 400;font-size: 14px;color: #FFFFFF;position: relative;padding-left: 15px;}
.menu-footer .menu-item a:before{
  content:"";
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  top: 43%;
}
.menu-footer .menu-item a span{
}
.infor-news-detail{

}
.infor-news-detail .col-inner{
  padding: 15px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  border-radius: 3px;
  margin-bottom: 30px;
}
.title-main-page{

}
.title-main-page h1{
      margin-bottom: 30px;
      text-align: center;
      position: relative;
      padding-bottom: 20px;
      color: #35529e;
      text-transform: uppercase;
}
.title-main-page h1::after {
    position: absolute;
    content: '';
    background: url(images/main-af.png) no-repeat;
    width: 194px;
    height: 12px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.right-news-detail{

}
.right-news-detail .col-inner{
     position: sticky;
    top: 70px;
}
.icon-right{
   padding: 15px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border-radius: 3px;

}
.archive-header{
      padding-top: 0px;
      padding-bottom: 0px;
      min-height: 45px;
      background-color: rgb(242, 244, 245);
      display: flex;
      align-items: center;
      margin-bottom: 30px;
}
.blog-single .title-main-page h1{
  text-transform: unset;
}
#comments{
  display:none;
}
.blog-single{
      padding-bottom: 30px;
}
.postTwo.postRelate{

}
.postTwo.postRelate .postTwoThumb{margin-bottom: 10px;}
.postTwo.postRelate .postTwoThumb a{height: 180px;display: block;width: 100%;position: relative;}
.postTwo.postRelate .postTwoThumb img{height: 100%;width: 100%;object-fit: cover; /* ảnh đầy khung, không méo */object-position: center; /* căn giữa ảnh */display: block;}
.postTwo.postRelate .postTwoContent{

}
.postTwo.postRelate .postTwoContent .postTwoTitle{
  line-height: 21px;
}
.postTwo.postRelate .postTwoContent a{
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
}
.blog-right .box-image{
  width: 35% !important;
          direction: ltr;
        display: table-cell;
        vertical-align: middle;
}
.blog-right .box-vertical{
          display: table;
        width: 100%;
}
@media(max-width:549px){
  .icon-dv {
    margin-bottom: 20px;
}
.intro-infor h3{
  font-size: 25px;
}
.icon-thanhtuu {
    margin-bottom: 20px;
}
.text-title-tintuc h2{
  font-size: 20px;
}
.title-ft {
    margin-top: 30px;
}
}