* {
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
	/* font-size: 15px; */
}
.nt{
	cursor: not-allowed!important;
}
.footer2 a{
	color:white
}
a:hover{
	color:#FF5900
}
.activepage a{ color:#FF5900}

.search-input{	
	background: none;
	outline: none;
	border:none;
	margin-top: 10px;
	width: 0px;					
	height: 30px;  
	transition: all .3s ease;
}
.search-box:hover .search-input{
	width: 200px!important;
	border-bottom: 1px solid black;
	margin-left: 20px;
}
.search-btn{
	height: 50px;
	width: 50px;
	border-radius: 50%;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	float:right;
	margin-top:2px;
	border:0;
	transition: 0.3s ease;
}


body{
	overflow-x: hidden;
}
.s1 a{color: #FF5900!important;}
.mainhr{
	background-color: #656565;
}
.ar{
	transform: rotate(90deg) translateY(-100%);
	
}
.cam{color:#FF5900;
cursor:pointer;
font-size: 14px;
text-transform: uppercase;}
.cam:hover{
	color:#656565;
	transition: 0.3s ease;
}
.main{
	max-width: 1440px;
	margin: 0 auto;
	
}
.sauda{
	font-family: Sauda;
	letter-spacing: 2% ;
	line-height: 120%;
}
.sf{
	font-family: sflight;
	letter-spacing: 0.4px;
	line-height: 140%;
	font-weight: lighter;
}
.sfthin{
	font-family: sfthin;
	letter-spacing: 1px;
	line-height: 140%;
	font-weight: lighter;
}
.sfre{
	font-family: sfre;
}
.sfbol{
	font-family: sfbol;
}
.bgd{
	background-color: #071714;
}

.bgl{background-color: #f6f3ee;}

@font-face {
	font-family: sfthin;
	src: url(font/SF-Pro-Display-Thin.otf);
}
@font-face {
	font-family: sflight;
	src: url(font/SF-Pro-Display-Light.otf);
}
@font-face {
	font-family: sfre;
	src: url(font/SF-Pro-Display-Regular.otf);
}
@font-face {
	font-family: sfbol;
	src: url(font/SF-Pro-Display-Bold.otf);
}
@font-face {
	font-family: Sauda;
	src: url(font/VLSaudagar.ttf);
}



.link {
	cursor: pointer;
	position: relative;
	white-space: nowrap;
}
.link:hover {
	color: #FF5900;
}

.link::before,
.link::after {
	position: absolute;
	width: 100%;
	height: 1px;
	background: orangered;
	top: 100%;
	left: 0;
	pointer-events: none;
}

.link::before {
	content: '';
	/* show by default */
}

.link--metis::before {
	transform-origin: 100% 50%;
	transform: scale3d(0, 1, 1);
	transition: transform 0.3s;
}

.link--metis:hover::before {
	transform-origin: 0% 50%;
	transform: scale3d(1, 1, 1);
}

.activepage:before {
	transform-origin: 0% 50%;
	transform: scale3d(1, 1, 1);
}

.to{font-size: 75px; letter-spacing: 2%;line-height: 120%}
.nd{font-size: 15px!important;
}


@media only screen and (max-width: 768px){
	

.phone-nho{font-size:  14px!important;}
.phone-to{
	font-size: 50px!important;
}
.ctp{
	font-size: 25px!important;
}
.ser{
	margin-top: 8vh !important;
}



}
/* ipad */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.if50{
		font-size: 50px!important;
	}
	.dis1{
		transform: translateY(50%)!important
		;
	}
	.trans{
		transform: translateY(0%)!important
		;
	}
	.dis,.dis0{ display: none;}
	.menu .row:nth-child(1){

		top: 20vh!important;
		
	  }

	  .ct img{
		  height:700px;
		  object-fit: cover;
	  }
.ct .sauda{
	font-size: 40px!important;
}
.a1{
	transform: translateX(0)!important;
	/* text-align: center; */
	margin-top: 40px;
}
.p100{
	font-size: 100px!important;
}
.p50{
	font-size: 50px!important;
	margin-top: 5vh;
}



}



/* dien thoai */
@media only screen and (max-width: 760px){
	.tron{
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		height: 350px!important;
		object-fit: cover;	
}			
	.imgb{
		width: 100%;
		height: 300px!important;;
		object-fit: cover;
	}
	.f40{
		font-size: 40px!important;
	}
	.f30{
		font-size: 30px!important;
	}
	.f13{
		font-size: 14px!important;
		line-height: 130%;
		letter-spacing: 0.3px;
	}
	.f60{
		font-size: 60px!important;
	}
	.f25{
		font-size: 25px!important;
	}
	.dis0{
		display:none
	}
	.dish{
		display:none
	
	}
	.dishi{
		height: 350px !important;
		object-fit: cover;
		padding: 0 35px!important
	}
	.s3i img:first-child{
	width: 250px;
	height: 355px;

}
.s3i img:nth-child(2){
	height: 235px;
	width: 161px;

}
.trans{
	transform: translateY(0%)!important
	;
}
.s8 .f25 {
width: 300px;
font-size: 20px!important;
	}
.s8 .marquee-wrap {
	font-size: 50px!important;
}

	.carousel-control-next,
.carousel-control-prev {
	bottom: 168px !important;

}

.carousel-control-prev {
	right: 58px !important;

}
.mtop{
	padding-top: 8vh!important;
}
.hi img{
	height:180px;
	width:500px;
	object-fit: cover;

}
.navblog{
	display: flex;
	
	justify-content: center;
	align-items: center;
	
}
.navblog li{

font-size: 16px;
margin: 0 10px;

}

.lala{
	align-items: center!important;
}

.lala div:nth-child(2){
	transform: translateX(-80px)		;
}

.menu .row:nth-child(1){

	top: 15vh!important;
	
  }

.footer2{
	padding-bottom: 30px!important;
}
.ct img{
height: 500px;
object-fit: cover;
}
.a1{
	transform: translateX(0)!important;
	/* text-align: center; */
	margin-top: 40px;
}





}
@media only screen and (min-width: 760px){
	.dishi1{
		display:none
	
	}
}












/* Lien he */



.input-data {
	height: 40px;
	width: 100%;
	position: relative;
	margin-bottom: 50px;
}

.input-field:focus~label,
.input-field:not(:placeholder-shown)~label {
	transform: translateY(-25px);
	color: orangered;
	font-size: 14px;
}

.input-data label {
	position: absolute;
	bottom: 0px;
	font-size: 18px;
	/* color: #ffffff; */
	pointer-events: none;
	transition: all 0.5s ease;
}

.datetime i {
	position: absolute;
	top: 12px;
	right: 8px;
	pointer-events: none;
}

.time-icon {
	position: relative
}

.input-login .underline {
	position: absolute;
	bottom: 0px;
	/* height: 1px; */
	background-color:#656565;
	width: 100%;
}

.input-login .underline:before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background: white;
	transform: scaleX(0);
	transition: transform 0.5s ease
}

.input-field:focus~.underline:before,
.input-field:not(:placeholder-shown)~.input-login .underline:before {
	transform: scaleX(1);
	
}

.input-login .maintitle {
	margin-bottom: 50px;
}



.input-field {
	width: 100%;
	padding: 8px 0!important;
	/* margin: 5px 0; */
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #656565;
	outline: none;
	/* font-family: Montserrat; */
	background: transparent;
	font-size: 16px;
}

.textarea {
	height: 120px;
	border: 1px solid #999;
	width: 100%;
	padding: 8px 0 5px 10px;
	outline: none;
	background: transparent;
	color: #ffffff;
}

.border {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	border: 1px solid #656565;;
	opacity: 0.6;
	transform: scaleX(0);
	transition: transform 0.5s ease
}


.input-field:focus~.underline:before,
.input-field:not(:placeholder-shown)~.underline:before {
	transform: scaleX(1);
	
}

.textarea:focus~.border {
	transform: scaleX(1);
}

.input-field:nth-child(1) {
	margin-right: 20px;
}

.form-option select{
	width: 100%;
	padding: 10px 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #656565;
	outline: none;
	color: #fcfcfc;
	background: transparent;
	font-size: 16px;
}
.form-option option{
	width: 100%;
	padding: 10px 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #656565;
	outline: none;
	color: #ffffff;
	background: #071714; ;
	line-height: 2%;
	font-size: 16px;
}


.datetime label {
	font-size: 18px;
}

#contactform input {
	color: #ffffff

	
}

.send{
	background-color: transparent;
	height: 50px;
width: 224px;
color: white;
outline: none;
border: 1px solid #656565
}
.send:hover{
	background-color: #FF5900;
	color:white
}





.preb, .preb2{
	position: relative;

}
.arb{
	position: absolute;
	top: 30%;
	transform:scale(0.8)   rotate(90deg) translateY(130%);
}
.arb2{
	position: absolute;
	top: 30%;
	right:0;
	transform:scale(0.8)   rotate(-90deg) translateY(100%);
}
.preb:hover  .sauda, .preb2:hover  .sauda{
	color: #FF5900
}
.preb:hover  .sauda, .preb:hover .sf{
	transition: ease-in-out 0.3s;
	transform: translate(-20px);
}
 .preb:hover .ar{
	transform:  rotate(90deg) translateY(100px);
	transition: ease-in-out 0.3s;
}
 .preb2:hover .arb2{
	transform:  rotate(-90deg) translateY(120%);
	transition: ease-in-out 0.3s;
}
.preb2:hover  .sauda, .preb2:hover .sf{
	transition: ease-in-out 0.3s;
	transform: translate(20px);
}


.number{
	position: relative;
	overflow: hidden;
}
.number p {
	position: absolute;
	left: 15px;
	transition: all 0.6s ease;
}

.number hr {
	width: 30px;
	position: absolute;
	transition: all 0.5s ease-in-out ;
	left: -30px;
	transition: all 0.6s ease;
	border-bottom: 1px solid #FF5900
}
.wp:hover .number hr {
	left: 15px;
}

.wp:hover  .number p {
	left: 55px;
	color: #FF5900;
}
.wp:hover{
	/* background-color: #E0D8D3; */
	transition: all 0.5s ease-in-out ;
}

.wp:hover .sf p{
	color: black !important;
}
.wp:hover .sauda {
	color: #FF5900 !important;
}


.marquee-wrap {
	position: relative;
	display: block;
	/* overflow: hidden; */
	width: 100vw;
	margin: 3vh 0
}

.marquee-wrap,
.marquee-wrap ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	/* line-height: 1.2; */
}

.marquee-wrap>li {
	display: flex;
	align-items: center;
	width: var(--scroller-size);
	will-change: transform;
	animation: text-scroller 15000ms linear 0ms normal infinite;
	text-indent: 0;
	justify-content: space-around;
	-webkit-transition: all 3000ms linear 0ms;
	-moz-transition: all 3000ms linear 0ms;
	-ms-transition: all 3000ms linear 0ms;
	-o-transition: all 3000ms linear 0ms;
	transition: all 3000ms linear 0ms;
	white-space: nowrap;
}

.marquee-wrap li:hover {
	color: #FF5900
}

@keyframes text-scroller {
	100% {
		transform: translateX(calc(var(--scroller-size)*-0.5));
	}
}

.marquee-wrap>li:nth-child(2) {
	animation-direction: reverse;
}

.marquee-wrap>li>ul li {
	display: inline-block;
	padding: 0 5vw;
	text-transform: uppercase;
}

 :root {
	--scroller-size: 170vw;
}

@media only screen and (max-width: 600px) {
	:root {
		--scroller-size: 200vw;
	}
	.s8{
		overflow: hidden;
	}
}


.la{
	height: 100%;
	 transform: translateX(-35%);
}

.s8 p {
width: 450px;
	font-size: 30px;
	/* margin-left: 30vh; */
}




@media only screen and (min-width: 1440px) {
	.loco{ 
			/* width: 1920px!important; */
			margin: 0 !important;
			/* transform: translateX(-12%); */
		}
		.loco2{
			width: 1920px!important;
			margin: auto 0 !important;
			padding: auto 0 !important;
			transform: translateX(-13%);
		}
}

.ser{
	margin-top:25vh
}

.s3 .col-2{
	padding-right: 0!important;
}


.menulink:hover{
	transform: translateX(30px);
transition: all 0.5s ease-in-out;
}
.menulink a{
	color: white;
}
.menulink:hover a{
	color: #FF5900;
}

.ct{
	position: relative;
}
.ct .ctt{
	color:white;
	max-width: 720px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.ctbt{
	 background: #00000087;
	 padding: 10px 35px;
	 border-radius: 10px
	;
}
.ctbt:hover												{
	 background: #FF5900;
	cursor: pointer;
	;
}










/* page reveal */

.overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: #071714;
	/* chỉnh để luôn nằm trên cùng */
	z-index: 10000011;
	/* cursor: none; */
}

.images {
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}

.img {
	width: 160px;
	height: 200px;
	opacity: 0.8;
}

.img-1 {
	transform: scale(1);
	background: url("https://images.unsplash.com/photo-1591700331354-f7eea65d1ce8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80") 50% 50% no-repeat;
	background-size: cover;
}

.img-2 {
	transform: scale(1.4);
	background: url("https://images.unsplash.com/photo-1606216794050-6ff7db8cb43d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80") 50% 50% no-repeat;
	background-size: cover;
}

.img-3 {
	transform: scale(1.2);
	background: url("https://images.unsplash.com/photo-1607190074257-dd4b7af0309f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80")50% 50% no-repeat;
	background-size: cover;
}

.img-4 {
	transform: scale(0.9);
	background: url("https://images.unsplash.com/photo-1544592732-83bbbfc46783?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80") 50% 50% no-repeat;
	background-size: cover;
}

.img-5 {
	transform: scale(1.2);
	background: url("https://images.unsplash.com/photo-1542415719-96b33a38d73d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80") 50% 50% no-repeat;
	background-size: cover;
}

.img-6 {
	transform: scale(1);
	background: url("https://images.unsplash.com/photo-1631133961299-4bbfedcac74e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80") 50% 50% no-repeat;
	background-size: cover;
}

.img-7 {
	transform: scale(1.1);
	background: url("https://images.unsplash.com/photo-1606216794074-735e91aa2c92?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80") 50% 50% no-repeat;
	background-size: cover;
}

.img-8 {
	transform: scale(0.9);
	background: url("https://images.unsplash.com/photo-1565038930214-09566ed2149b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80") 50% 50% no-repeat;
	background-size: cover;
}
.img-9 {
	transform: scale(1.1);
	background: url("https://i.pinimg.com/564x/8b/6a/ca/8b6aca2af395ad60d0aa620bfdfd98b7.jpg") 50% 50% no-repeat;
	background-size: cover;
}
.img-10 {
	transform: scale(1.2);
	background: url("https://i.pinimg.com/564x/38/37/7f/38377fb35b2b9802f7fda7d4f3d4e2a7.jpg") 50% 50% no-repeat;
	background-size: cover;
}

.overlay .navbar {
	position: absolute;
	bottom: 19vh;
	width: 100%;
	display: flex;
	justify-content: space-around;

	
}


/*mouse move*/
.cursor {
    position: absolute;
    background: #f93700;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    z-index: 100000000;
    transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
        0.2s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: scale(1);
}



.cursor.active {
    opacity: 1;
    transform: scale(12);
}
.cursor.active::before {
    opacity: 1;
}
.cursor-follower {
    position: absolute;
    border: 1px solid rgba(249,55,0,1.00);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    z-index: 100000000;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
        0.4s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: translate(8px, 4px);
}

.cursor-follower.active {
    opacity: 0.3;
    transform: scale(0);
}





.hover-img{
	position: relative;
	overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
	
} 
.hover-img img{
opacity: 1;
/* filter: grayscale(1); */
} 

.hover-img:hover img {
    -webkit-animation: kenburns-bottom 1s ease-out both;
/* filter: grayscale(1); */
opacity: 1;
}
@keyframes kenburns-bottom {
  0% {
    -webkit-transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 84%;
  }
  100% {
    -webkit-transform: scale(1.1) translateY(10px);
    -webkit-transform-origin: bottom;
  }
}





/* about */
.a1{
	font-size: 43px;
	transform: translateX(-100px)
}
.qt{
	transform: translateY(-105px);
}









.team {
	position: relative;
}




.team .project-title {

}

.project-categ {

}



.team .cursorr {
	position: absolute;
	width: 400px;
	height: 400px;
	top: 50%;
	left: 50%;
	transform: scale(0.1);
	opacity: 0;
	margin: -100px 0 0 -100px;
	background: url(image-1.jpg) no-repeat 50% 50%;
	background-size: cover;
	z-index: 1;
}

.team .project {

	display: flex;
	padding: 20px 0 40px;
	justify-content: space-between;
	position: relative;
	z-index: 2;

	margin-bottom: 20px
}


.team .project-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.team .project-list {
	margin-bottom: 50px
}

::-webkit-scrollbar {
    width: 8px;
    background:transparent;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background: rgb(155, 155, 155); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}