/*
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.   ***************/
@font-face {
    font-family: 'Framer';
    src: url('fonts/FramerSans100.ttf') format('truetype');
    src: url('fonts/FramerSans100.woff') format('woff');
    src: url('fonts/FramerSans100.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Framer';
    src: url('fonts/FramerSans200.ttf') format('truetype');
    src: url('fonts/FramerSans200.woff') format('woff');
    src: url('fonts/FramerSans200.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Framer';
    src: url('fonts/FramerSans300.ttf') format('truetype');
    src: url('fonts/FramerSans300.woff') format('woff');
    src: url('fonts/FramerSans300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Framer';
    src: url('fonts/FramerSans400.ttf') format('truetype');
    src: url('fonts/FramerSans400.woff') format('woff');
    src: url('fonts/FramerSans400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Framer';
    src: url('fonts/FramerSans500.ttf') format('truetype');
    src: url('fonts/FramerSans500.woff') format('woff');
    src: url('fonts/FramerSans500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Framer';
    src: url('fonts/FramerSans600.ttf') format('truetype');
    src: url('fonts/FramerSans600.woff') format('woff');
    src: url('fonts/FramerSans600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Framer';
    src: url('fonts/FramerSans700.ttf') format('truetype');
    src: url('fonts/FramerSans700.woff') format('woff');
    src: url('fonts/FramerSans700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}


@font-face {
    font-family: 'Anton';
    src: url('fonts/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.loadpage1 {
	width: 100%;
	height: 100vh;
	position: absolute;
	overflow: hidden;
	background: #fff;        
	z-index: 10000;

}

:has(section.active) .loadpage1 {
	height: 0vh;
}

.loadpage1 .bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #E4F6ED 100%);
	animation: displayNone 0s forwards calc(var(--delay-bongnuoc) + var(--delay-transition-background) + (var(--duration-transition-background) / 2));
}


.loadpage1 .songnuoc {
	position: absolute;
	height: 600px;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	animation: displayNone 0s forwards calc(var(--delay-bongnuoc) + var(--delay-transition-background) + (var(--duration-transition-background) / 2)); 
}

.loadpage1 .water-item {
	width: var(--full-width);
	height: 500px;
	margin-top: 100px;
	position: absolute;
	box-shadow: 28.08px 28.08px 84.25px 0px #53995A40, -28.08px -28.08px 84.25px 0px #FFFFFF;
	border-radius: 50%;
	bottom: 0;
	animation-name: waterEffect;
	animation-duration: 12s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: calc((12s / 6 * (6 - var(--i))) * -1);
	filter: blur(20px);
}

.loadpage1 .bongnuoc {
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 1;
	width: 250px;
	animation: bubbleWater var(--duration-bongnuoc) linear forwards var(--delay-bongnuoc), displayNone 0s forwards calc(var(--delay-bongnuoc) + var(--delay-transition-background) + (var(--duration-transition-background) / 2));
}

.loadpage1 .bongnuoc > img {
	width: 100%;
}

.loadpage1 .bongnuoc .bongtren {
	transform: scale(100%);
	animation: bubbleWaterOff 0s linear forwards var(--delay-bongnuoc);
}
.loadpage1 .bongnuoc .bongduoi {
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(0%);
	animation: bubbleWaterOn 0s linear forwards var(--delay-bongnuoc);
}

.loadpage1 .bg-mix-down-up {
	display: flex;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	position: absolute;
	z-index: 3;
	bottom: calc(-100% - 450px);
	top: calc(100% + 450px);
	animation: transitionBackground var(--duration-transition-background) linear calc(var(--delay-bongnuoc) + var(--delay-transition-background));
}

.loadpage1 .bg-item {
	width: var(--w);
	height: 100%;
	position: relative;
}
:root{
  --tube: linear-gradient(
    to bottom,
    #56e386 0%,
    #439d62 25%,
    #1d7a46 50%,
    #439d62 75%,
    #56e386 100%
  );
}

.loadpage1 .bg-item > div,
.loadpage1 .bg-item::before,
.loadpage1 .bg-item::after{
  background-image: var(--tube);
  background-repeat: no-repeat;
  background-size: 100% 300%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.loadpage1 .bg-item::before{
  content:"";
  width:100%;
  height:calc(var(--ht) + 1px);
  position:absolute;
  bottom:100%;
  border-radius:1000px 1000px 0 0;
  background-position:0 -1px;        
  display:block;
}

.loadpage1 .bg-item > div{
  width:100%;
  height:calc(100% + 2px);       
  background-position:0 calc(50% - 1px);
}

.loadpage1 .bg-item::after{
  content:"";
  width:100%;
  height:calc(var(--hb) + 1px);
  position:absolute;
  top:100%;
  border-radius:0 0 1000px 1000px;
  background-position:0 calc(100% - 1px);
  display:block;
}
@keyframes waterEffect {
	from {
		opacity: 0.5;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1.1);
	}
}

@keyframes bubbleWater {
	from {  top: 50px;  transform: translate(-50%, 0%);     }
	to {    top: 100%;  transform: translate(-50%, 0%);     }
}
@keyframes bubbleWaterOff {
	from {  transform: scale(100%);     }
	to {    transform: scale(0%);     }
}
@keyframes bubbleWaterOn {
	from {  transform: scale(0%);     }
	to {    transform: scale(100%);     }
}

@keyframes displayNone{
	from { opacity: 1 ;} to { opacity: 0; }
}



@keyframes transitionBackground{
	0% {
		bottom: calc(-100% - 450px);
		top: calc(100% + 450px);
	}
	100% {
		bottom: calc(100% + 510px);
		top: calc(-100% - 510px);
	}
}
.loadpage.active{z-index:-111111;height:0;opacity:0}
.section2.active, .section2.uxb-draggable {
    opacity: 1;padding-top: 0px !important;height: 100vh;
}
.section2 {
    background: #fff;
    --width-center: 25vw;
    --padding: 130px;
    height: 0vh;
    inset: 0;
    opacity: 0;overflow:hidden;
}
.nguyenlan-rolldrop .roller{    position: relative;
    left: 50%;
    transform: translate(-50%, -42px);
    min-width: calc(100% + 160px) !important;
    filter: drop-shadow(0px 5px 23px #84848480);} 
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}