/*
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.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
:root{
    --cl-pri: #008b32;
    --cl-sec:#0a1e27;
}
/* dev style all */
.section-title-normal span {
    margin-right: 15px;
    padding-bottom: 7.5px;
    border-bottom: 1px solid var(--cl-pri);
    margin-bottom: -4px;
}
.section-title-normal{
	border-bottom: 1px solid var(--cl-pri);
}
p{
	margin-bottom:5px;
}
.m-tb-30{
	margin:30px 0;
}
.mt-32{
	margin-top:32px;
}
.page-numbers {
	border: 1px solid;
    padding: 7px 12px;
    border-radius: 3px;
}
.header-block-block-1 .box-text.text-center{
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 0;
}
.infor-icon-archive{
  color:#fff;
}
.infor-icon-archive{
  text-align: center;
}
.header-block-block-1 .box-text p {
    color: var(--cl-sec);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 0.1em;
}
.header-block-block-1 .box-image{
    width: 60%!important;
    opacity: 0.8;
}
.nav-divided>li+li>a:after {
  border-left: 1px solid var(--cl-sec);
  height: 20px;
  margin-top: -10px;
}
.has-dropdown .icon-angle-down{
  color: var(--cl-sec);
}
.header:not(.transparent) .header-bottom-nav.nav > li > a{
  color: var(--cl-sec);
}
.page-numbers.current,.page-numbers:hover{
	    background: var(--cl-pri);
    color: #fff;
    border: 1px solid var(--cl-pri);
}
.header-inner  input[type='search']{
    height: 40px;
    box-shadow: none;
    border-radius: 3px;
}
.header-inner  .searchform .button.icon {
    margin: 0;
    padding: 1px 12px;
    box-shadow: none;
    position: absolute;
    right: 2px;
    top: 2px;
    border-radius: 3px!important;
}
/* dev header */
#header-contact a{
	color:#fff;
	text-transform:capitalize;
}
/* dev title */
.section-title-center.section-title b{
	background:transparent;
}
.section-title-center .section-title-main{
	border-bottom:1px solid var(--cl-pri);
	position:relative;
	padding-bottom:10px;
}
.section-title-center .section-title-main:before{
	content:"";
	height:1px;
	width:30%;
	bottom:-5px;
	left:50%;
	transform:translatex(-50%);
	background:var(--cl-pri);
	position:absolute;
}

/* dev home service */
.dev-service .icon-box-text h3{
	color:#fff;
	margin-bottom:0;
}
.dev-service .icon-box-text{
	vertical-align: middle;
    margin: auto;
}
/* dev service */
.carousel-cell {
  width: 100%;
  border-radius: 5px;
}
.slider-project .flickity-viewport{
	height:600px;
}
.carousel-project .carousel-cell {
	    background-size: contain;
    background-position: center;
}
.infor-icon svg{
	width:25px;
}
.dev-title-left-pri:before,.dev-title-left-pri:after{
	content:"";
	position:absolute;
	left:0;
}
.dev-title-left-pri{
	position:relative;
}
.dev-title-left-pri:before{
	width: 80%;
    bottom: -6px;
    height: 1px;
    background: #a6a6a6;
}
.dev-title-left-pri:after{
	width: 20%;
    bottom: -7px;
    height: 3px;
    background: var(--cl-pri);
}
.infor-project-item{
	    margin-top: 52px;
    padding: 20px;
    border: 1px solid #dadada;
}
.infor-project-item ul{
	    list-style: none;
}
.infor-project-item ul li+li{border-top:1px solid #dadada;
}
.infor-project-item ul li{
	margin-bottom: 0;
    padding: 5px 0;
}
.infor-text {
    font-size: 1.2em;
    line-height: 41px;
    color: #000;
    margin-left: 5px;
}
.infor-project-item h2{
	color:var(--cl-pri);
}
/* dev lightbox project */
.light-box-content-right .col-inner{
	padding:20px;
}
.light-box-content-right .col-inner .row{
	margin-left:0;
	margin-right:0;
}
 .col-inner .col-left{
	padding-right:10px;
}
 .col-inner .col-right{
	padding-left:10px;
}
.wpcf7-form input,.wpcf7-form textarea,.wpcf7-form  select{
	box-shadow:none;
	border: 1px solid var(--cl-pri);
}
.light-box-content-right .wpcf7-form ,.light-box-content-right .wpcf7-submit{
	margin-bottom:0;
}
#ligbox_home-model .box-badge .box-text{
	bottom:0%;
}
.content-project {
	text-align:justify;
}
/* dev loại hình */
.title-type-pj{
	font-size:2.5em;
	color:var(--cl-pri);
}
.dev-project-item {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.info-project {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
  background-color: rgb(0 138 50 / 76%);
}

.in-top .info-project {
	-webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
          animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .info-project {
  -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
          animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .info-project {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
          animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .info-project {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
          animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .info-project {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
          animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .info-project {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
          animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .info-project {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
          animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .info-project {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
          animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
/* you can ignore this ones */
.header:not(.transparent) .header-bottom-nav.nav > li > a {
  color: #000000;
  font-size: 16px;
}
.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-item > a {
  color: var(--cl-pri);
}
.nav-divided>li+li>a:after {
  left: -2em;
}
#wide-nav .nav-left {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: space-evenly;
}
.dev-project-item {
  position: relative;
  float: left;
	overflow:hidden;
  border-radius: 16px;
  list-style: none;
}
.dev-project-item a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}
.dev-project-item h3 {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
.dev-project-item p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
.project-item-archive.col{
	padding:0 10px 20px; 
}
.infor-icon-archive svg{
width:15px;
	fill:#fff;
}
.infor-icon-archive path{
	fill:#fff!important;
}
.infor-text-archive{
	    font-size: 1em;
    color: #fff;
    margin-left: 5px;
}
.infor-text-archive a{
	color:#fff;
}
.item-project {
	position: absolute;
    bottom: 0;
    background: #ffffffbf;
    width: 100%;
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
		transition:all 0.8s;
}
.item-project h2{
    margin-bottom: 0;
    color: var(--cl-pri);
}
.project-item-archive:hover .item-project{
	opacity:0;
	transition:all 0s;
}
.info-project h2{
	color: #fff;
    font-size: 1.4em;
}
.info-project ul{
	list-style:none;
}
.info-project{
	text-align:left;
}
/* dev footer */
#footer h3{
	color: #10c753;
    text-shadow: 1px 1px 1px #000;
}
/* dev service tranh chur */
.service-dev-content {
	text-align:center;
}
.tabbed-content .tab{
  background: #f4f4f4;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-top: 3px solid #d4cfcf;
  margin: 0px 13px;
  padding: 0px 38px;
  border-radius: 10px;
}
.tabbed-content .tab.active{
	 border-top: 3px solid var(--cl-pri);
	background:#fff;
}
.tabbed-content .tab:hover{
 border-top: 3px solid var(--cl-pri);
	background:#fff;
}
.tab-panels{
	border: none;
   
}
/* dev tab price */
.pricing-table .title {
    padding: 20px;
  border: none;
    background-color: #253746!important;
    color: #fff;
    font-size: 21px;
}.pricing-table.featured-table .title{
	    background-color: var(--cl-pri)!important;
	font-size:25px;
	    padding: 30px 10px;
}
.pricing-table.featured-table .price {
    padding: 37px 10px;
}
.pricing-table.featured-table {
    margin-top: -47px;
    border: none;
    padding-bottom: 50px;
}
.pricing-table .items>div {
	padding: 15px 0;}
.pricing-table {
    border: none;
    padding-bottom: 30px;
}
.pricing-table-header .price:after{
	content:" VND/m²";
	    font-size: 54%;
    margin-bottom: 20px;
}
.dev-none-price .pricing-table-header .price:after,.dev-none-price .pricing-table-header .price{
	display:none;
}
.accordion-title {
	background: #f4f4f4;
    border: 0;
    border-left: 3px solid var(--cl-pri);
    border-radius: 5px;
    color: var(--cl-pri);
    font-weight: 700;
	    margin: 5px 0;
}
.accordion-title.active{
	background: #007e20;
    color: #ffffff;
}
 .dev-social-contact.social-icons {
    display: inline-block;
    vertical-align: middle;
    font-size: .85em;
    color: var(--cl-pri);
}
.html.custom a{
color: #ffffff!important;
    text-transform: capitalize;
    padding: 5px 10px;
    border-radius: 5px;
}
.nav-dropdown-has-border .nav-dropdown {
    border: 1px solid var(--cl-pri);
}
.nav>li>a, .nav-dropdown>li>a, .nav-column>li>a{
	color:#000;
}
.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before {
    border-bottom-color: var(--cl-pri);
}

.nav-dropdown{
	    padding: 10px 0 10px;
}
.header-inner .nav-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: center;
}
.nav-dropdown-bold .nav-column li>a, .nav-dropdown.nav-dropdown-bold>li>a{
	border-radius:0px;
}
.tille-archive-project .title-center-pri{
	text-transform:uppercase;
}
.content.content-project{
	text-align:justify;
}
.blog-archive .page-numbers{
	border:none;
}
.dev-over-bgr .dev-bgr-post{
	background-size: contain;
    background-position: center bottom;
}
.dev-over-bgr .overlay{
	background:transparent;
}
.tabs-projec-home ul>li>a:before{
  height: 60px;
    width: 60px;
    opacity: 1;
    display: block;
    position: relative;
    background-size: contain;
    background-color: transparent;

  }
  .tabs-projec-home ul>li>a{
    display: block;
  }
.tabs-projec-home ul>li>a span{
  display: block;
  text-transform: capitalize;
    font-size: 14px;
    margin-top: 11px;
}
.tabs-projec-home .nav:hover>li:not(:hover)>a:before{
  opacity: 1;
 
}
.tabs-projec-home .nav-line>li:hover>a:before,.tabs-projec-home .nav-line>li.active>a:before{
  opacity: 1;
  filter: invert(29%) sepia(86%) saturate(7403%) hue-rotate(150deg) brightness(102%) contrast(101%);
}
.tabs-projec-home ul>li>a[href='#tab_chung-cư']:before{
  background-image: url('/wp-content/uploads/2022/06/apartment.png');
}
.tabs-projec-home ul>li>a[href="#tab_biệt-thự"]:before{
  background-image: url('/wp-content/uploads/2022/06/villa.png');
}
.tabs-projec-home ul>li>a[href="#tab_nhà-phố"]:before{
  background-image: url('/wp-content/uploads/2022/06/cityscape.png');
}
.tabs-projec-home ul>li>a[href="#tab_văn-phòng"]:before{
  background-image: url('/wp-content/uploads/2022/06/office-desk.png');
}
.tabs-projec-home ul>li>a[href="#tab_phòng-khách"]:before{
  background-image: url('/wp-content/uploads/2022/06/living-room-1.png');
}
.tabs-projec-home ul>li>a[href="#tab_phòng-ngủ"]:before{
  background-image: url('/wp-content/uploads/2022/06/bedroom.png');
}
.tabs-projec-home ul>li>a[href="#tab_phòng-bếp"]:before{
  background-image: url('/wp-content/uploads/2022/06/kitchen.png');
}