/*
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.   ***************/
.header.has-transparent {
	background-color: transparent !important;
}

.header{
	background-color: #020202;
}

.header.show-on-scroll, .stuck .header-main{
    background-color: #010103c4;
}

.button span{
	line-height: 1.1 !important;
}

#top-link{
	width: 40px;
	height: 40px;
}

body.home  {
	background-color: #010103;
}

.header-main .nav > li:not(:last-child)::after {
  content: ", ";
	color: #fff;
}

.header-main .nav > li:not(:last-child) {
	margin-right:3px;
}

.film-btn {
  --w: 160px;
  --h: 64px;
  position: relative;
  width: var(--w);
  height: var(--h);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: #030405;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(255,255,255,0.02);
  margin-top: 10px !important;
}

.film-btn span{
	color: #fff !important;
}

.film-btn span {
  position: relative;
  z-index: 3;
}

/* lớp nền tối bên trong */
.film-btn::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005)),
    #040506;
  z-index: 1;
}

/* vệt sáng blur chạy quanh nút */
.film-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 180%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center center;
  border-radius: 999px;
  z-index: 0;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.55) 18%,
      rgba(255, 255, 255, 0.18) 34%,
      rgba(255, 255, 255, 0.06) 50%,
      transparent 68%);
    
  filter: blur(16px);
  animation: orbitGlow 2s linear infinite;
  opacity: 0.95;
}

/* mặt nạ để chỉ thấy glow quanh mép nút nhiều hơn */
.film-btn {
  -webkit-mask-image: radial-gradient(circle, #fff 0 100%);
  mask-image: radial-gradient(circle, #fff 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes orbitGlow {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateY(calc(var(--h) * -0.78)) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg) translateY(calc(var(--h) * -0.78)) rotate(-90deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) translateY(calc(var(--h) * -0.78)) rotate(-180deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg) translateY(calc(var(--h) * -0.78)) rotate(-270deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateY(calc(var(--h) * -0.78)) rotate(-360deg);
  }
}

.film-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(255,255,255,0.04),
    0 8px 30px rgba(120, 200, 255, 0.08);
}

.stack-text-effect{
	position: absolute;
	top: 40%;
	left: 26px;
	width: 50%;
	flex-wrap: wrap;
}

.stack-banner-home{
	position: absolute;
	top: 40%;
	left: 26px;
	width: 50%;
}

.stack-text-effect.no-ab{
	position: static;
	width: 100%;
}

.stack-text-effect.no-ab .button, button, input[type=button], input[type=reset], input[type=submit]{
	opacity: 0.4;
}


.stack-text-effect .button, button, input[type=button], input[type=reset], input[type=submit] {
	min-height: fit-content;
	cursor: context-menu !important;
	color: #fff;
	font-size: 55px;
	text-transform: none;
	display: flex;
	text-align: left;
}

.stack-text-effect.word-grid .button, button, input[type=button], input[type=reset], input[type=submit] {
	font-size: 40px;
}

.stack-text-effect .button:hover{
	-webkit-text-stroke: 4px #fff;
	filter: blur(5px);
	opacity: 1;
}



/* ----------------------section-1*/

.section_1{
	
}

/* ----------------------section-2 */

.section_2{
	
}

.sec-2-cta.button.is-link {
	margin-top: 24px;
	margin-left: 8px;
	color: #fff !important;
	display: block !important;
	border: 1px solid #fff !important;
	padding: 0px 20px;
	border-radius: 50px !important;
	opacity: .5 !important;
	position: relative;
	z-index: 999999999999;
	width: max-content;
	text-transform: none;
}

/* ----------------------section-3 */
.sec_3 {
	    margin-top: -1px;
}


.sec_3-stack .section-title b {
	display: none;
}

.sec_3-stack .section-title {
	border-bottom: unset !important;
	margin: 0;
}
.section-title b {
	display: none;
}
.section-title {
	border-bottom: unset !important;
	margin: 0;
}
.section-title .section-title-main{
	border-bottom: unset !important;
	text-transform: none;
}

.sec_3-stack .section-title .section-title-main{
	font-size: 40px;
	border-bottom: unset !important;
	text-transform: none;
	color: #fff;
	padding: 0;
	/* margin: 0; */
}

.sec_3-stack .sec_3-btn-link{
	 color: #fff;
	 text-transform: none;
	 display: block;
	 width: 90px !important;
}

.sec_3-img-box video{
	border-radius: 20px;
}

.sec_3-img-box .stack {
	position: absolute;
    bottom: 0;
    left: 10px;
}

.sec_3-img-box .box-text-inner {
	position: relative;
}

.sec_3-img-box .stack .button.is-link{
	font-size: 16px !important;
	color: #fff !important;
	text-transform: none !important;
	display: block;
	padding: 0;
	margin: 0 !important;
	margin-right: 3px !important;
}

.sec_3-img-box .stack .text p{
	color: #fff;
	opacity: .7;
	margin-top: 1px;
	margin-bottom: 0;
}

.sec_3-img-box .box-image{
	display: none;
}



/* ----------------------section-5 */

.section_5{
	padding: 0;
	position: relative;
	/* height: 1000px; */
}

.sec5_stack_images{
	position: relative;
	height: 704px;
	overflow: hidden;
	margin-top: 20p;
}

.sec5_stack_switch {
	position: absolute;
	top: 70px;
	left: 20px;
	width: 100%;
	z-index: 3;
}

.sec5_stack_images .img {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	display: none;
}

.sec5_stack_images .img img{
	height: 704px;
	object-fit: cover;
}

.sec5_stack_images .img.active{
	display: block;
	animation-name: mymove;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-direction: normal;
  animation-fill-mode: both;
}

@keyframes mymove {
	0%   {transform: scale(1.1);}
  100% {transform: scale(1);}
}

.sec5_stack_switch .button, input[type=button].button, input[type=reset].button, input[type=submit], input[type=submit].button {
	font-size: 60px !important;
	letter-spacing: -.01em;
	text-transform: none;
	min-height: fit-content;
	color: #fff;
	font-size: 55px;
	text-transform: none;
	display: flex;
	min-height: fit-content;
	opacity: 0.7;
	width: 100% !important;
	transition: .4s ease-out;
}

.sec5_stack_switch .button:hover {
	opacity: 1 !important;
	color: #fff;
}

/* ----------------------section-6 */

.sec_6{
	margin-top: -1px;
}

/* ----------------------footer */

.absolute-footer{
	display: none;
}

.kino-footer{
	margin-top: -1px;
}

.footer-menu  .ux-menu-link__link{
	margin-bottom: 0px;
	padding-bottom: unset;
	padding-top: unset;
	min-height: fit-content;
	color: #fff;
}

.footer-menu  .ux-menu-link__link:hover{
	color: #fff;
}

.col-end-ft .col {
	padding-bottom: unset !important;
}

.col-end-ft{
	padding-bottom: 16px !important;
}

.col-end-ft .footer-menu  .ux-menu-link__link{
	opacity: 0.7;
}

.col-end-ft .footer-menu  .ux-menu-link__link:hover{
	opacity: 1;
}


.stack-action-word-grid{
	
}

.stack-switch-list{
	flex-wrap: wrap;
}

.stack-switch-list .sec_3-img-box {
	flex: 0 0 33.33%;
	padding: 0 8px;
}

.sec_3-img-box.list-view{
	flex: 0 0 100%;
	display: flex;
	border-top: 1px solid;
	padding: 10px;
}

.sec_3-img-box.list-view .box-text-inner {
	display: flex;
}

.sec_3-img-box.list-view .box-text-inner .stack{
	order: 1;
	position: static;
	flex: 0 0 80%;
	display: flex;
	align-items: center;
}

.sec_3-img-box.list-view .stack .text p{
	font-size: 30px;
}

.sec_3-img-box.list-view .stack .button.is-link{
	font-size: 40px !important;
	margin-right: 15px !important;
}

.sec_3-img-box.list-view .box-text-inner video{
	order: 2;
	flex: 0 0 20%;
	width: 20% !important;
}

.stack-action-word-grid p {
	margin-bottom: 0 !important;
}

.w-grid-grid, .w-grid-list{
	color: #eee !important;
	opacity: .6;
	margin-bottom: unset !important;
}

.w-grid-grid.active, .w-grid-list.active{
	color: #fff !important;
	opacity: 1;
}

.stack-text-effect.word-grid{
	position: static;
}

.section-banner-services .stack-text-effect{
	top: unset;
	bottom: 30px;
}

.sec2-services{
	
}

.img-box-services .box-image{
	background: linear-gradient(#fff0 70%, #0000004d 100%);
}

.img-box-services {
	border-radius: 14px;
    overflow: hidden;
}

.img-box-services .box-text{
	width: 80%;
	bottom: unset;
	top: 0;
	left: 0;
	height: 100%;
}

.img-box-services .box-text .box-text-inner{
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	/* align-items: self-end; */
}

.img-box-services .box-text p {
	margin-bottom: unset;
	line-height: 20px;
}

.img-box-services .stt {
	backdrop-filter: blur(50px);
	background-color: #fff3;
	border-radius: 55px;
	flex-flow: row;
	flex: none;
	place-content: center flex-end;
	align-items: center;
	gap: 0;
	width: min-content;
	height: min-content;
	padding: 9px 20px;
	display: flex;
	overflow: visible;
	margin-top: 10px;
}

.stack-title-services{
	position: sticky;
	top: 120px;
}

.stack-services-process{
	border-top: 1px solid;
	padding-top: 12px;
	padding-bottom: 60px;
	position: sticky;
	top: 200px;
	overflow: hidden;
	background: #000;
}

.stack-services-process:nth-child(1){
	z-index:1;
}
.stack-services-process:nth-child(2){
	z-index:2;
}
.stack-services-process:nth-child(3){
	z-index:3;
}
.stack-services-process:nth-child(4){
	z-index:4;
}
.stack-services-process:nth-child(5){
	z-index:5;
}

.stack-inner{
	flex: 0 0 40%;
}

.stack-inner .img {
	width: 219px !important;
	height: 293px;
}

.stack-inner .img-inner{
	height: 100%;
}

.stack-inner .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stack-inner .img-descript {
	font-size: 30px;
	margin-left: 10px !important;
	color: #fff;
	font-weight: bold;
}


.stack-services-process .section-title-container {
	flex: 0 0 30%;
	font-size: 32px;
	margin-top: -7px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stack-services-process .section-title {
	/* justify-content: center; */
	/* width: 300px; */
}
.stack-services-process .text {
	flex: 0 0 25%;
}


.about-us-img-box .box-image{
	border-radius: 12px;
}

.form-contact-kino{
	
}

.form-contact-kino .field label{
	color:rgb(136, 136, 136);
	font-weight: 500;
}

.form-contact-kino input[type=email], .form-contact-kino input[type=number], .form-contact-kino input[type=search], .form-contact-kino input[type=tel], .form-contact-kino input[type=text], .form-contact-kino input[type=url],.form-contact-kino select {
	background-color: #bbbbbb26;
	border-radius: 30px;
	height: 40px;
	border: unset;
}

.form-contact-kino input[type=submit] {
	cursor: pointer;
	overflow: visible;
	padding: 0px;
	position: relative;
	height: 50px;
	background-color: #fff;
	border-radius: 120px;
	color: #000000d4;
	font-size: 33px !important;
	text-align: center;
	background: #ffffffd6 !important;
	opacity: 1;
}

.form-contact-kino .submit{
	margin-top: 36px;
}

@media only screen and (max-width: 800px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	
	
	.stack-banner-home{
		top: 32% !important;
	}
	
	.sec-2-cta.button.is-link{
		margin-top: 20px !important;
		padding: 0px 15px !important;
		font-size: 21px !important;
	}
	.section_1 video {
		height: 100vh;
		object-fit: cover;
	}
	
	.stack-banner-home {
		width: 85% !important;
	}
	
}


@media only screen and (max-width: 576px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.stack-text-effect .button, button, input[type=button], input[type=reset], input[type=submit]{
    	font-size: 40px !important;
	}
	
	.sec5_stack_switch .button, input[type=button].button, input[type=reset].button, input[type=submit], input[type=submit].button {
		font-size: 46px !important;
	}
	
	.sec-2-cta.button.is-link{
		margin-top: 12px !important;
		font-size: 16px !important;
		padding: 0px 15px !important;
	}
	
	.sec_3-stack .section-title .section-title-main{
		font-size: 26px !important;
	}
	.stack-inner .img-descript{
		display: none;
	}
	.stack-inner .img{
		width: 100% !important;
		height: 100%;
	}
	.stack-services-process{
		flex-wrap: wrap;
		position: static;
		border-top: unset;
	}
	.stack-services-process .section-title-container{
		flex:0 0 100%;
		padding-top: 10px;
	}
	.stack-services-process .text{
		flex:0 0 100%;
	}
	
	.stack-inner{
		flex:0 0 100%;
    }
	
	.stack-title-services{
		position: static;
	}

}

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

}