@keyframes float {
    0% {
        transform: translateY(0); /* Vị trí ban đầu */
    }
    50% {
        transform: translateY(-20px); /* Lên cao */
    }
    100% {
        transform: translateY(0); /* Quay lại vị trí ban đầu */
    }
}


.bannertop{ position:relative; }
.bannertop .container{ max-width:85% }
.bannertop .img{ padding-top:3rem; text-align:center; position:relative; }
.bannertop .img img{ width:60%; z-index:5; position:relative; }
.bannertop .img .balloon{ position:absolute; bottom:10px; left:0px }
.bannertop .img .balloon:after{
	position:absolute;
	content: '';
	top: -73px;
    left: 59px;
	background-image: url('../img/experiences/bong-trai-2.png');
	width: 150px;
    height: 150px;
    background-size: contain; /* Đảm bảo ảnh vừa khung */
    background-repeat: no-repeat;
    background-position: center;
    animation: float 2s ease-in-out infinite; /* Thời gian 3s, hiệu ứng lặp vô hạn */
    transition: transform 0.6s; /* Mượt khi hover */
}
.bannertop .img .balloon:before{
	position:absolute;
	content: '';
	top: 0;
    left: -43px;
	background-image: url('../img/experiences/bong-trai-3.png');
	width: 110px;
    height: 110px;
    background-size: contain; /* Đảm bảo ảnh vừa khung */
    background-repeat: no-repeat;
    background-position: center;
    animation: float 5s ease-in-out infinite; /* Thời gian 3s, hiệu ứng lặp vô hạn */
    transition: transform 0.7s; /* Mượt khi hover */
}
.bannertop .img .balloon img{
	width:85%;
	animation: float 3s ease-in-out infinite; /* Thời gian 3s, hiệu ứng lặp vô hạn */
    transition: transform 0.3s; /* Mượt khi hover */
}
.bannertop .col-md-8{ display:flex; align-items: center; }
.bannertop .content{ font-size:1.7rem; line-height:2.2rem; position:relative; }
.bannertop .content img{ margin-left:-70px; margin-bottom:20px }
.bannertop>.balloon{ position:absolute; top:0px; right:-40px }
.bannertop>.balloon img{ width:250px; animation: float 5s ease-in-out infinite; /* Thời gian 3s, hiệu ứng lặp vô hạn */
    transition: transform 0.7s; /* Mượt khi hover */ }
.bannertop>.balloon:after{
	position:absolute;
	content: '';
	top: 50px;
    left: -175px;
	background-image: url('../img/experiences/bong-phai-1.png');
	width: 150px;
    height: 150px;
    background-size: contain; /* Đảm bảo ảnh vừa khung */
    background-repeat: no-repeat;
    background-position: center;
    animation: float 2s ease-in-out infinite; /* Thời gian 3s, hiệu ứng lặp vô hạn */
    transition: transform 0.6s; /* Mượt khi hover */
}
.bannertop>.balloon:before{
	position:absolute;
	content: '';
	top: 220px;
    left: -80px;
	background-image: url('../img/experiences/bong-phai-3.png');
	width: 83px;
    height: 83px;
    background-size: contain; /* Đảm bảo ảnh vừa khung */
    background-repeat: no-repeat;
    background-position: center;
    animation: float 3s ease-in-out infinite; /* Thời gian 3s, hiệu ứng lặp vô hạn */
    transition: transform 0.9s; /* Mượt khi hover */
}

.section1{ display:flex; align-items: flex-end; }
.section1 {
    height: 110vh;
    background: 
        radial-gradient(circle, rgba(7, 63, 60, 0) 60%, var(--main-color) 100%), /* Hiệu ứng tập trung vào giữa */
        linear-gradient(to bottom, rgba(7, 63, 60, 0) 50%, var(--main-color) 100%), /* Hiệu ứng từ giữa xuống dưới */
        url(../img/experiences/pic-head.png) no-repeat center center; /* Ảnh nền gốc */
    background-size: cover;
    position: relative;
}
.section1 h2{ text-align:center; font-size:6rem; color:#f0c964 }
.section1 p{ text-align:center; font-size:1.5rem; color:#fff; margin:0 auto; line-height:1.7rem }

.section2{ padding:4rem 0; position:relative; }
.section2{ background:var(--main-color); }
.section1 .container, .section2 .container{ max-width:60% }
.section2 h3{ font-size:5rem; color:#f0c964 }
.section2 p{ font-size:1.4rem; color:#fff; line-height:2rem }
.section2 .row{ align-items: center; }
.section2 .icon{ text-align:right; }
.section2 .img{ position:relative; }
.section2 .img img{ width:80%; margin:0 auto; position:relative; z-index:2 }

.text-left{ text-align:left !important; }

.spotlight {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #276867, #ffffff00);
    border-radius: 50%;
    filter: blur(50px);
    bottom: -300px;
    right: 0px;
    z-index: 1;
}
.section2>.spotlight1 {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #276867, #ffffff00);
    border-radius: 50%;
    filter: blur(50px);
    top: 0px;
    left: -250px;
    z-index: 1;
} 
.section2>.spotlight2 {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #276867, #ffffff00);
    border-radius: 50%;
    filter: blur(50px);
    bottom: -150px;
    right: -200px;
    z-index: 1;
} 


.section3{ position:relative; z-index:5;
    background:url(../img/experiences/pic-foot.png) no-repeat center center; /* Ảnh nền gốc */
    background-size: cover;
    position: relative;
}
.section3{ color:#fff; padding:4rem 0 }
.section3 h3{ color:#f0c964; font-size:3rem }
.section3 p{ font-size:1.4rem; line-height:2rem }
.section3 ul{ display:flex; flex-direction: column; }
.section3 ul li{ font-size:1.4rem; line-height:2rem; position:relative; padding-left:18px  }
.section3 ul li:after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #fff;
    left: 0;
    top: 12px;
}