/*Du an*/
.section.project{overflow: hidden;}
.s-duan{overflow: hidden;    padding: 0px;}
.s-duan .slick-list{margin: 0px 0px; overflow: hidden;}
.s-duan .slick-list{padding: 0px 10px}
.s-duan .slick-slide{
  color: #FFF;    position: relative;
  margin: 0 15px 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-in-out;
}
.s-duan .slick-slide,
.s-duan .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] {
  transition: all 0.4s ease-in-out;
}
.box-project {position: absolute;opacity: 0;transition: width 0.5s ease-in-out;    height: 130px; visibility: hidden; pointer-events: none; z-index: 2; bottom: 0px; right: -13px;width:320px; background: linear-gradient(105.28deg, #FFCD1E -14.57%, #C98A10 65.35%); border-top-left-radius: 30px; padding: 25px 75px 20px 30px;}
.box-project:after{content: ''; width: 0; height: 0; border-left: 13px solid #B27A0D; border-top: 20px solid transparent; border-bottom: 0px solid transparent; position: absolute; right: 0px; top: -20px;}
	.box-project .name-banner{font-family: "K2D", sans-serif; font-weight: 700; color: var(--colorFFF); font-size: var(--fz-20);}
	.box-project .view-more a{border-radius: 7px;}

	.s-duan .slick-active .box-project{opacity: 1; visibility: visible; pointer-events: auto;}
	.s-duan .slick-active .name-banner {animation-name: fadeInUpSD; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 1;}
	.s-duan .slick-active .view-more {animation-name: fadeInUpSD; animation-duration: 0.9s; animation-fill-mode: forwards; opacity: 1;}
.des-project {transition: height 0.5s ease-in-out; opacity: 0; visibility: hidden; height: 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.s-duan .img-duan{ border-radius: 10px;}
.s-duan .img-duan img {object-fit: cover;  width: 100%; height: 440px; }

.project-item { display: grid ; grid-template-columns: 50% 50%;margin-bottom: 50px;    align-items: center; }
.thumb-project .img-duan{border-radius: var(--border-radius);}


.main-project .project-item:nth-child(2n+1) .w-desc-pro{padding-left: 50px;order:2; padding-right: 0px;}
.main-project .project-item:nth-child(2n+1) .thumb-project{order:1}

.main-project .project-item .w-desc-pro{padding-right: 50px; order: 1;}
.main-project .project-item .thumb-project{order:2}

.w-desc-pro h3{color: var(--color098); font-size: var(--fz-22); text-transform: uppercase; position: relative; padding-bottom: 10px; margin-bottom: 25px;}
.w-desc-pro h3:after{position: absolute; content: ''; left: 0px; bottom: 0px; width: 100%;height: 2px; background: linear-gradient(90deg, #0099DA 3.14%, #005CA1 100%);}

.add-pro{margin-top: 20px; margin-bottom: 20px; position: relative; padding-left: 30px;}
	.add-pro:before{content: ''; position: absolute; left: 0px; top: 3px; background: url(../images/ico-location.svg) left center no-repeat;
		background-size: contain; width: 22px; height: 22px;
	}
.des-pro{padding-bottom: 20px;border-bottom: 1px solid var(--color9D9);    text-align: justify;}
.thumb-project .img-duan img{object-fit: cover;  width: 100%; height: 380px; }
.project-info .project-location .thumb-project .img-duan img {height: auto !important;    }
.project-info{margin-bottom: 50px;}
.project-info .tab-project {display: grid ; grid-template-columns: 55% 45%;}
.detail-pro p{margin-bottom: 10px;}
.project-info .w-desc-pro{padding-left: 50px;    padding-right: 40px;}
.project-info .w-desc-pro h3:after{height: 1px; background: var(--color9D9);}

.project-info .thumb-project .img-duan img { border-radius: var(--border-radius);}
.project-info .thumb-project .img-duan img{height: 460px; }
.project-info .thumb-project{position: relative; }

.logo-proj {
   position: absolute; transition: width 0.5s ease-in-out;pointer-events: none; z-index: 2; 
   top: 40px; right: -13px; width: 240px; background: rgb(249 249 249 / 90%); padding: 25px; display: flex ; align-items: center;
   border-top-left-radius: var(--border-radius);border-bottom-left-radius: var(--border-radius); min-height: 130px;
}
.logo-proj:after {
    content: '';  width: 0;  height: 0;  border-left: 13px solid #B9A7A7;
    border-top: 20px solid transparent; border-bottom: 0px solid transparent; position: absolute; right: 0px;
    top: -20px;
}
	.logo-proj img{max-height: 130px; margin: auto;}
.project-info .des-pro { padding-bottom: 15px; margin-bottom: 15px; }
.project-info .w-desc-pro ul{padding-left: 0px;}
.project-info .w-desc-pro li{list-style-type: none; position: relative; margin-bottom: 10px; padding-left:20px;}
.project-info .w-desc-pro li:before{content: ''; position: absolute; left: 0px; top: 7px; background-color: var(--colorD93); 
	border-radius: 50%; width: 10px; height: 10px;}		

.s-project-detail{position: relative;}

   .menu-project { text-align: center; position: absolute; right: 0px; top: 0px; z-index: 50; }

   .menu-project .menu-item {display: flex ; align-items: center; justify-content: center; font-weight: 700; padding: 45px 10px 10px; color: #555555; 
      text-decoration: none; font-size: 18px; position: relative; overflow: hidden; z-index: 1; background: #E8F0F5; border: 1px solid #DDE0E3;   }

   .menu-project .menu-item:after{content: ''; position: absolute; left: 50%; top: 13px; transform: translateX(-50%);background-size: contain !important;  transition: var(--d-transition);}
   .m-back:after{background:url(../images/ico-back.svg) left center no-repeat; width: 26px; height: 20px; }
   .m-overv:after{background:url(../images/ico-tongquan.svg) left center no-repeat; width: 26px; height: 26px; }
   .m-location:after{background:url(../images/ico-loca.svg) left center no-repeat;width: 24px; height: 24px; }
   .m-link:after{background:url(../images/ico-link.svg) left center no-repeat;width: 24px; height: 24px; }

   .menu-project .menu-item:hover:after,.menu-project .menu-item.highlight:after{filter: brightness(0) invert(1);}

   .menu-project  .menu-item.highlight {background: linear-gradient(105.28deg, #FFCD1E -14.57%, #C98A10 65.35%);   color: #fff;  }
   .menu-project  .menu-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      background: linear-gradient(105.28deg, #FFCD1E -14.57%, #C98A10 65.35%);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      z-index: -1;
    }
   .menu-project  .menu-item:hover::before {  width: 200%;   height: 200%;    }
   .menu-project  .menu-item:hover {
      color: #fff;
      background: linear-gradient(105.28deg, #FFCD1E -14.57%, #C98A10 65.35%);
      transition: background 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease-out;
    }

.section.s-form-proj{padding-bottom: 0px;}
.form-project { float: right; width:100%; position:relative; }
.form-pro{    background: #E8F0F5;  border: 1px solid rgb(5 80 152 / 30%);  padding: 40px 80px 40px 280px;  border-radius: 10px;   float: right;position: relative;}
.form-pro:after{
            content: ''; position: absolute; left: 10px; top: -10px; width: 100%; height: 100%;
            border: 2px solid transparent;
            border-radius: 10px;
            background: linear-gradient(90deg, #C98A10, #FFCD1E) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;

}
.form-pro .form-group{border-bottom: 10px;}
.form-pro .form-control{background-color: transparent; border:0px; border-bottom: 1px solid #D9D9D9; color: var(--color55);    border-radius: 0px;    padding: 0px;}
.form-pro .submit{background: var(--colorD93);color: var(--colorFFF); border-radius: 7px; font-weight: 700; font-size: 17px;    padding: 5px 20px;}

.form-pro .form-control:focus{outline: 0px; box-shadow: none;}

.bg-user-form{background: url(../images/bg-user-register.png) left bottom no-repeat; background-size: contain; position: absolute; left: 30px; bottom: 0px; z-index: 2;
   width: 300px; height: 550px;
}

.form-pro .col_form:nth-child(1){-webkit-animation-delay: 0.20s;  -moz-animation-delay: 0.20s;  -o-animation-delay: 0.20s;  animation-delay: 0.20s;}
.form-pro .col_form:nth-child(2){-webkit-animation-delay: 0.40s;-moz-animation-delay: 0.40s;-o-animation-delay: 0.40s;  animation-delay: 0.40s;}
.form-pro .col_form:nth-child(3){-webkit-animation-delay: 0.60s;  -moz-animation-delay: 0.60s;  -o-animation-delay: 0.60s;  animation-delay: 0.60s;}
.form-pro .col_form:nth-child(4){-webkit-animation-delay: 0.80s;-moz-animation-delay: 0.80s;-o-animation-delay: 0.80s;  animation-delay: 0.80s;}
.form-pro .col_form:nth-child(5){-webkit-animation-delay: 1s;  -moz-animation-delay: 1s;  -o-animation-delay:1s;  animation-delay: 1s;}
.form-pro .col_form:nth-child(6){-webkit-animation-delay: 1.2s;-moz-animation-delay: 1.2s;-o-animation-delay: 1.2s;  animation-delay: 1.2s;}

.form-project .wpcf7-not-valid-tip{position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}


@media screen and (min-width:1200px){
	.s-duan .box-project:hover .name-banner{animation-name: fadeInUp2; animation-duration: 0.3s; animation-fill-mode: forwards;}
	.s-duan .box-project:hover .des-project{opacity: 1; visibility: visible; height: auto;animation-name: fadeInUp2; animation-duration: 1s; animation-fill-mode: forwards;}
	.s-duan .box-project:hover .view-more{ display: inline-block; position: absolute; right: 30px; bottom: 30px;animation-name: fadeInUp2; animation-duration: 0.5s; animation-fill-mode: forwards; }

	.s-duan  .box-project:hover{width: calc(100% - 50px); padding-right: 165px;}

	

}
@media screen and (min-width:1400px){
	
}
@media screen and (min-width:1440px){
	.project .slick-slide img { height: 500px; }
	.new-small .news-item { margin-bottom: 25px; }
	.project-info .thumb-project .img-duan img { height: 540px; }
	.form-pro {padding: 40px 110px 40px 380px; }
	.form-pro .form-control{margin-bottom: 10px;line-height: 28px;}
}	
@media screen and (min-width:1600px){
	.project .slick-slide img { height: 570px; }
	.thumb-project .img-duan img{height: 420px; }
	.project-info .thumb-project .img-duan img { height: 570px; }
}	
@media screen and (min-width:1680px){
	.project .slick-slide img { height: 620px; }

}
@media screen and (min-width:1900px){
	.project .slick-slide img { height: 700px; }
	.thumb-project .img-duan img{height: 480px; }
	.w-desc-pro h3 {font-size: var(--fz-25); padding-bottom: 15px;}
	.add-pro{margin-bottom: 40px;}
	.bg-user-form {left: 60px;width: 383px; height: 717px; }
	.form-pro { padding: 60px 110px 60px 450px; }
	.project-info .thumb-project .img-duan img { height: 760px; }
	.project-info .w-desc-pro li:before{top: 10px;}
}
@media screen and (min-width:2030px){
	.project .slick-slide img { height: 780px; }
}
@media screen and (min-width:2500px){
	.project .slick-slide img { height: 900px; }
}	
@media screen and (min-width:992px) and (max-width:1199px){
	.menu-project {position: relative; right: auto; top: auto;display: grid ; grid-template-columns: repeat(4, 1fr); margin-bottom: 50px; }
	.form-pro{padding-left: 38%;}
	.project-info .w-desc-pro{padding-right: 0px;}
}
@media screen and (min-width:768px) and (max-width:979px){
	.menu-project {position: relative; right: auto; top: auto;display: grid ; grid-template-columns: repeat(4, 1fr); margin-bottom: 50px; }
	.project-info .w-desc-pro{padding-right: 0px;}
	.form-pro { padding-left: 46%; padding-right: 30px; }
	.bg-user-form {width: 280px; height: 523px; }
	.s-duan .img-duan img {height: 370px; }
	.main-project .project-item:nth-child(2n+1) .w-desc-pro { padding-left: 30px;}
	.main-project .project-item .w-desc-pro { padding-right: 30px;}
	.thumb-project .img-duan img {height: 310px; }
	.des-pro { border-bottom: none; overflow: hidden;position: relative; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; height: 94px; }

	.add-pro{padding-top: 20px;margin-bottom: 10px;}
	.add-pro:after{position: absolute; content: ''; left: 0px; top: 0px; width: 100%;height: 1px; background: var(--color9D9)}
	.add-pro:before{top: 20px;}
}

@media screen and (max-width: 767px) {		
	.s-duan .img-duan img {height: 370px; }
	.main-project .project-item:nth-child(2n+1) .w-desc-pro { padding-left: 30px;}
	.main-project .project-item .w-desc-pro { padding-right: 30px;}
	.thumb-project .img-duan img {height: 310px; }
	.menu-project { position: relative; right: auto; top: auto; display: grid ; grid-template-columns: repeat(4, 1fr); margin-bottom: 50px; }
	.project-info .w-desc-pro{padding-right: 0px;}
	.form-pro { padding-left: 46%; padding-right: 30px; }
	.bg-user-form {width: 280px; height: 523px; }
	.des-pro { border-bottom: none; overflow: hidden;position: relative; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; height: 94px; }

	.add-pro{padding-top: 20px;margin-bottom: 10px;}
	.add-pro:after{position: absolute; content: ''; left: 0px; top: 0px; width: 100%;height: 1px; background: var(--color9D9)}
	.add-pro:before{top: 20px;}
	

}


/*Mobile Đứng*/
@media screen and (max-width: 480px) and (orientation : portrait) {
	.box-project{width: auto; padding: 18px 30px 15px 25px; height: auto;}
	.box-project .des-project{display: none;}	
    .s-duan .img-duan img { height: 300px; }
    .project-item {grid-template-columns: 100%;}
    .thumb-project .img-duan img { height: 270px; }
    .main-project .project-item .thumb-project { order: 1; }
    .main-project .project-item .w-desc-pro { padding-right: 0px; order: 2;margin-top: 20px;  }
    .main-project .project-item:nth-child(2n+1) .w-desc-pro { padding-left: 0px; margin-top: 20px; }

    .project .slick-slider .slick-prev { left: 25px; }
    .project .slick-slider .slick-next { right: 25px; }
	
	 .project-info { margin-bottom: 30px; }
    .project-info .tab-project {grid-template-columns:none ; gap: 30px; }
    .project-info .w-desc-pro{padding-left: 0px;}
    .project-info .thumb-project .img-duan img { height: 390px; }

    .logo-proj{min-height: auto}
    .menu-project {grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; } 
    .bg-user-form{display: none;}
    .form-project { float: none; padding: 0px 15px 30px; }
    .form-pro { padding-left: 30px; padding-right: 20px; }
}
@media screen and (max-width:420px) {
	.thumb-project .img-duan img { height: 240px; }
}	
@media screen and (max-width:380px) {
	.thumb-project .img-duan img { height: 210px; }
	.project .slick-slider .slick-prev { left: 15px; }
    .project .slick-slider .slick-next { right: 15px; }
   .project-info .thumb-project .img-duan img { height: 330px; }
}

@media screen and (max-width: 360px) {
	
}
@media screen and (max-width: 330px) {
	.box-project .view-more a {margin-top:5px; }

}