/*
 Theme Name:   Konexa theme
 Template:     hello-elementor
 Theme URI:    https://elementor.com/hello-theme/
 Description:  A child theme of Hello Elementor
 Author:       Diem Bui
 Version:      1.0
*/


.banner_home{
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(137, 208, 133, 0.1) 66.5%, rgba(77, 184, 72, 0.1) 100%);
}
/* Nền form sáng */
.wpcf7 form {
  background-color: #f9f9f9;
  padding: 40px;
  border-radius: 20px;
  color: #111;
  font-family: 'Segoe UI', sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

/* Input bo tròn, sáng, chữ đen */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #111;
  margin-bottom: 10px;
  transition: border 0.3s, box-shadow 0.3s;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
  outline: none;
}
.form_khaosat span.wpcf7-form-control-wrap{
  width: 100%;
    display: block;
    margin-top: 6px;
}
.form_khaosat p{
  font-weight: 400;
}

/* Label */
.wpcf7-form label {
  display: block;
  margin-bottom: 6px;
  color: #333;
}
.form_khaosat span.wpcf7-form-control.wpcf7-radio{
    display: flex;
    justify-content: space-between;
}
.form_khaosat .fieldset-cf7mls>p{
margin-bottom: 20px;
}
.wpcf7-form label{
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
/* Nút submit “KẾ TIẾP” */
.wpcf7 input[type="submit"] {
  background: linear-gradient(to right, #4facfe, #00f2fe);
  color: #fff;
  padding: 14px 30px;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s ease;
}

.wpcf7 input[type="submit"]:hover {
  background: linear-gradient(to right, #00f2fe, #4facfe);
}

/* Ẩn thông báo mặc định */
.wpcf7-response-output {
  display: none;
}

/* Multi-step form - nếu dùng */
.cf7-step {
  display: none;
}
.cf7-step.active {
  display: block;
}

/* Header bước */
.form-step-header {
  text-align: center;
  margin-bottom: 20px;
}
.form-step-header .step {
  display: inline-block;
  margin: 0 8px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: #ddd;
  color: #111;
  border-radius: 50%;
}
.form-step-header .step.active {
  background: #00f2fe;
  color: white;
}
.elementor-menu-toggle .e-font-icon-svg{
  fill: #4db849 !important;
}
/* ===== XO Hover Button (NO background / NO border) ===== */
.xo-hover-btn,
.xo-hover-btn a,
a.xo-hover-btn{
  --c: #fff;
  --u: rgba(255,255,255,.95);       /* underline */
  --glow: rgba(102,255,102,.18);    /* glow nhẹ */

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--c) !important;
  text-decoration: none !important;

  padding: 6px 2px; /* nhẹ thôi để underline đẹp */
  border-radius: 0;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  transition: transform .25s ease, text-shadow .25s ease;
  will-change: transform;
}

/* underline chạy */
.xo-hover-btn::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(90deg, transparent, var(--u), transparent);
  transform: scaleX(.15);
  transform-origin: left;
  opacity: 0;

  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

/* arrow/icon */
.xo-hover-btn .elementor-button-icon,
.xo-hover-btn i,
.xo-hover-btn svg{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
  transform: translateX(0) translateY(0);
}

/* HOVER */
.xo-hover-btn:hover{
  transform: translateY(-1px);
  text-shadow: 0 0 18px var(--glow);
}

.xo-hover-btn:hover::after{
  transform: scaleX(1);
  opacity: 1;
}

.xo-hover-btn:hover .elementor-button-icon,
.xo-hover-btn:hover i,
.xo-hover-btn:hover svg{
  transform: translateX(6px) translateY(-2px) rotate(-6deg);
}
.team img{
	width:80%;
}
.team  a{
	text-align: left;
}
/* click */
.xo-hover-btn:active{
  transform: translateY(0);
}
/* .section_built:before{
  content: "";
    background: url(https://konexa.com.vn/wp-content/uploads/2026/01/Clip-path-group.png);
    position: absolute;
    left: 0;
    height: 100%;
    width: 165px;
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
} */

/* ===== XO Hover Button BROWN (NO background / NO border) ===== */
.xo-hover-btn-brown,
.xo-hover-btn-brown a,
a.xo-hover-btn-brown{
  --c: #735d3b;                 /* màu chữ */
  --u: rgba(115,93,59,.95);     /* underline theo màu #735d3b */
  --glow: rgba(115,93,59,.22);  /* glow nhẹ cùng tông */

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--c) !important;
  text-decoration: none !important;

  padding: 6px 2px;
  border-radius: 0;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  transition: transform .25s ease, text-shadow .25s ease;
  will-change: transform;
}

/* underline chạy */
.xo-hover-btn-brown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(90deg, transparent, var(--u), transparent);
  transform: scaleX(.15);
  transform-origin: left;
  opacity: 0;

  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

/* arrow/icon */
.xo-hover-btn-brown .elementor-button-icon,
.xo-hover-btn-brown i,
.xo-hover-btn-brown svg{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
  transform: translateX(0) translateY(0);
  fill: currentColor;
}

/* hover */
.xo-hover-btn-brown:hover{
  transform: translateY(-1px);
  text-shadow: 0 0 18px var(--glow);
}

.xo-hover-btn-brown:hover::after{
  transform: scaleX(1);
  opacity: 1;
}

.xo-hover-btn-brown:hover .elementor-button-icon,
.xo-hover-btn-brown:hover i,
.xo-hover-btn-brown:hover svg{
  transform: translateX(6px) translateY(-2px) rotate(-6deg);
}

.xo-hover-btn-brown:active{
  transform: translateY(0);
}
/* ===== XO Hover Button BLACK (NO background / NO border) ===== */
.xo-hover-btn-black,
.xo-hover-btn-black a,
a.xo-hover-btn-black{
  --c: #1D1D1D;                 /* ✅ màu chữ */
  --u: rgba(29,29,29,.95);      /* ✅ underline theo màu #1D1D1D */
  --glow: rgba(29,29,29,.22);   /* ✅ glow nhẹ cùng tông */

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--c) !important;
  text-decoration: none !important;

  padding: 6px 2px;
  border-radius: 0;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  transition: transform .25s ease, text-shadow .25s ease;
  will-change: transform;
}

/* underline chạy */
.xo-hover-btn-black::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(90deg, transparent, var(--u), transparent);
  transform: scaleX(.15);
  transform-origin: left;
  opacity: 0;

  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

/* arrow/icon */
.xo-hover-btn-black .elementor-button-icon,
.xo-hover-btn-black i,
.xo-hover-btn-black svg{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
  transform: translateX(0) translateY(0);
  fill: currentColor;
}

/* hover */
.xo-hover-btn-black:hover{
  transform: translateY(-1px);
  text-shadow: 0 0 18px var(--glow);
}

.xo-hover-btn-black:hover::after{
  transform: scaleX(1);
  opacity: 1;
}

.xo-hover-btn-black:hover .elementor-button-icon,
.xo-hover-btn-black:hover i,
.xo-hover-btn-black:hover svg{
  transform: translateX(6px) translateY(-2px) rotate(-6deg);
}

.xo-hover-btn-black:active{
  transform: translateY(0);
}
.backgrand_tra .elementor-cta__content{
  background-color: transparent !important;
}

/* Crop thumbnail 16:9 cho block .thumnail_home */
.thumnail_home .post-thumbnail,
.thumnail_home .lakit-posts__thumbnail,
.thumnail_home .lakit-posts__thumbnail-link{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* Fallback nếu browser cũ không hỗ trợ aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
  .thumnail_home .post-thumbnail,
  .thumnail_home .lakit-posts__thumbnail,
  .thumnail_home .lakit-posts__thumbnail-link{
    height: 0;
    padding-top: 56.25%; /* 9/16 */
  }
}

/* ảnh fill khung và crop */
.thumnail_home .lakit-posts__thumbnail-link img,
.thumnail_home .lakit-posts__thumbnail img,
.thumnail_home .post-thumbnail img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
.lakit-images-layout.layout-type-grid .lakit-images-layout__image-instance{
  object-fit:contain !important;
}
body .elementor-sticky{
 background: linear-gradient(180deg, #AC8959 5%, rgba(136, 110, 73, 0.00) 67.96%), linear-gradient(180deg, rgba(132, 116, 93, 0.50) 26.83%, rgba(160, 141, 101, 0.00) 95.83%);
}
body .elementor-sticky--effects{
	background: var(--Text-Black, #1D1D1D);
}
.what_about .lakit-carousel__content{
width: 50%;
    position: absolute;
    bottom: 0;
}
.site-footer{
	padding: 0 !important;
}
.header_button .pp-buttons-group a:nth-child(2){
	border-radius: 50px;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(4px);
}
.header_button .pp-buttons-group a:nth-child(2):hover{
	border-radius: 50px;
border: 1px solid #FFF;
background: rgba(255, 255, 255, 0.25) !important;
backdrop-filter: blur(4px);
}
.header_button .pp-buttons-group a:nth-child(1){
	color: #E0DBD1 !important;
}
.header_button .pp-buttons-group a:nth-child(1):hover{
	
	color: #fff !important;
}
.about_socail .elementor-icon-box-title{
margin-top: -2px;
}
.width_100 img{
	width:100%;
}
.contact_socail a{
	color:#fff;
}
@media (max-width: 568px){
  .what_about .lakit-carousel__content{
width: 100%;
    position: relative;

}
}


.bg-grid-lines{
    position: relative;
    overflow: hidden;
    background-color: #e8e1cf;
}

.bg-grid-lines::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: linear-gradient(rgba(143, 116, 63, 0.55), rgba(143, 116, 63, 0.55)), linear-gradient(rgba(143, 116, 63, 0.55), rgba(143, 116, 63, 0.55)), linear-gradient(rgba(143, 116, 63, 0.55), rgba(143, 116, 63, 0.55)), linear-gradient(rgba(143, 116, 63, 0.55), rgba(143, 116, 63, 0.55));
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px;
    background-position: 38% 0, 62% 0, 0 250px, 0 628px;
    background-repeat: no-repeat;
    background-image: linear-gradient(rgba(143, 116, 63, 0.55), rgba(143, 116, 63, 0.55)), linear-gradient(rgba(143, 116, 63, 0.55), rgba(143, 116, 63, 0.55)), linear-gradient(rgba(143, 116, 63, 0.55), rgba(143, 116, 63, 0.55)), linear-gradient(rgba(143, 116, 63, 0.55), rgba(143, 116, 63, 0.55));
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px;
    background-position: 37% 0, 63% 0, 0 160px, 0 445px;
    background-repeat: no-repeat;
}

.bg-grid-lines > *{
    position: relative;
    z-index: 1;
}

/* ===== WHY KONEXA - equal height ===== */
.why_konexa .swiper-wrapper{
  display:flex !important;
  align-items:stretch !important;
}

.why_konexa .swiper-slide{
  height:auto !important;
  display:flex !important;
  align-self:stretch !important;
}

/* lớp item của lakit */
.why_konexa .swiper-slide > .lakit-carousel__item,
.why_konexa .swiper-slide > div{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:100% !important;
}

/* các lớp elementor bên trong */
.why_konexa .swiper-slide .elementor-element,
.why_konexa .swiper-slide .elementor-widget-wrap,
.why_konexa .swiper-slide .elementor-widget-container,
.why_konexa .swiper-slide .e-con,
.why_konexa .swiper-slide .elementor-container,
.why_konexa .swiper-slide .elementor-column,
.why_konexa .swiper-slide .elementor-column-wrap{
  height:100% !important;
}

/* nếu box xanh là widget text/icon thì kéo full chiều cao */
.why_konexa .swiper-slide .elementor-widget-container{
  display:flex !important;
  flex-direction:column !important;
}
.project_page .pp-post-terms-wrap{
  position: absolute;
bottom: 0px;
    left: 70px !important;
    right: 15px !important;
    z-index: 2 !important;
    top: auto !important;
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea{
  padding: .5rem 0rem !important;
}
.form_contact .elementor-button{
    margin-top: 10px !important;
}
.phone_contact a{
  color: #000;
}
.why_choose img{
	height:80px !important;
}
.text_white a{
	color:#fff;
}
.form_contact {
	    height: 44px;
}
.drag-cursor-zone.widget_full_right{
	
	background: #a19078;
    padding: 80px 0;
	padding-left:20px;
}
.icon_button:hover svg,.icon_button:hover svg path {
       fill: #fff !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
}
footer{
	box-shadow: 0 -3px 20px 0 rgba(0, 0, 0, 0.02), 0 -4px 15px 0 rgba(0, 0, 0, 0.03);
}
.single_icon .elementor-button-icon{
	font-size:14px;
}

.form_contact .elementor-select-wrapper .select-caret-down-wrapper {
    display: none !important;
}

.form_contact select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background-image: url("https://konexa.com.vn/beta/wp-content/uploads/2026/06/Vector.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 12px auto !important;

    padding-right: 45px !important;
}
.our_team {
    --team-gap: 17%;
}

.our_team .swiper,
.our_team .swiper-container,
.our_team .lakit-carousel-inner {
    overflow: visible !important;
}

.our_team .swiper-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    column-gap: var(--team-gap) !important;
    row-gap: 40px !important;
}

.our_team .lakit-carousel__item.swiper-slide {
    width: calc((100% - var(--team-gap)) / 2) !important;
    max-width: calc((100% - var(--team-gap)) / 2) !important;
    flex: 0 0 calc((100% - var(--team-gap)) / 2) !important;
    margin-right: 0 !important;
    padding: 0 !important;
}
.page-id-496{
	background:#555555;
}
body.page-id-496 .elementor-sticky{
	background: var(--Text-Black, #1D1D1D);
}
.button_project .elementor-button {
	border-radius: 50px;
border: 1px solid #FFF;
background: rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(4px) !important;
}
.button_project .elementor-button:hover{
	    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(4px);
}
@media (max-width: 767px){
	.db-kx-scrollbar{
		    max-width: 100% !important;
		        padding-right: 20px;
	}
	.team .lakit-carousel__content{
		text-align:center !important;
	}
    .our_team {
        --team-gap: 0%;
    }
	.drag-cursor-zone.widget_full_right{
		    background: transparent;
		    padding: 0;
	}
    .our_team .swiper-wrapper {
        column-gap: 0 !important;
        row-gap: 25px !important;
    }

    .our_team .lakit-carousel__item.swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
	.section_built:before{
		display:none;
	}
}