/*
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:'brandon_text';src:url(./fonts/brandontext-bold-webfont.ttf) format('truetype');font-weight:bold;font-style:normal}
@font-face{font-family:'brandon_text';src:url(./fonts/brandontext-regular-webfont.ttf) format('truetype');font-weight:normal;font-style:normal;}*/
@import "https://unpkg.com/open-props@1.6.17/easings.min.css";
*{
	margin:0;
	padding:0;
}

:root{
	 --primary-color: #ffffff;
    --secondary-color: #0a1119;
    --third-color: #FF2883;
    --four-color: #07847F;
    --body-bg-color: #fff;
    --primary-color-rgb: 255, 255, 255;
    --secondary-color-rgb: 10, 17, 25;
    --third-color-rgb: 255, 40, 131;
    --four-color-rgb: 7, 132, 127;
    --body-bg-color-rgb: 255, 255, 255;
    --link-color: #fff;
    --link-color-hover: #fff;
    --link-color-active: #5f2dde;
    --gradient-color-from: #E91A83;
    --gradient-color-to: #4C24C1;
}
/* section1 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1.4);
    }
}
.pulse{
	position:absolute;
	z-index:2;
	animation: pulse var(--ease-elastic-in-1) 8000ms infinite alternate;
}
@keyframes moveUpDown {
    0% {
        transform: translateY(0); /* Vị trí ban đầu */
    }
    50% {
        transform: translateY(10px); /* Di chuyển xuống 10px */
    }
    100% {
        transform: translateY(0); /* Quay về vị trí ban đầu */
    }
}	
.container-item{
	position:relative;
	z-index:3;
	gap:20px;
	padding-top:100px
}
.bg-images::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%; /* Chiều rộng chiếm toàn bộ phần tử cha */
    height: 100%; /* Chiều cao chiếm toàn bộ phần tử cha */
    background: url("https://event.theme.trueads.vn/wp-content/uploads/2024/10/home-1-bg-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none; 
}
.title-right-img h2{
	color: #FF2883;
    font-family: "Plus Jakarta Sans", Sans-serif;
}
.title-heading {
	font-family: "Syne", Sans-serif !important;
	background-image: linear-gradient(180deg, #ffffff 0%, #8e7cb3 100%);
	font-weight: 700;
    clear: both;
	letter-spacing: 0.025em;
    margin: 0;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.title-li ul {
    list-style: none; /* Xóa bullet mặc định */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.title-li li {
    position: relative; /* Để chứa được pseudo-element */
    padding-left: 20px; /* Tạo khoảng trống cho dấu chấm */
}

.title-li ul li::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 37%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background: linear-gradient(180deg, var(--gradient-color-from, #ff00cc) 0%, var(--gradient-color-to, #ff66ff) 100%);
    border-radius: 50%;
}
.title-li h4{
	font-family: 'Plus Jakarta Sans', Sans-serif;
	font-size:20px;
    color: #ffffff;
}
.btn-right-title{
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    background: var(--purple-grad-5, linear-gradient(90deg, var(--gradient-color-from) 0%, var(--gradient-color-to) 51%, var(--gradient-color-from) 100%));
    background-size: 200%, auto;
	overflow:hidden;
    box-sizing: border-box;
	color:#ffffff;
	margin-left: 30px;
}
.bottom-image-text{
	position:absolute;
	z-index:3;
	left: -37px;
    bottom: 43px;
}
.top-image-text{
	position:absolute;
	z-index:3;
	top: 10%;
    left: -20%;
}
.midded-image{
	position:absolute;
	z-index:3;
	top: 30%;
	animation: moveUpDown 4s ease-in-out infinite; /* Áp dụng animation */
}
}
.top-image-text .text{
	position:absolute;
	bottom: 0;
    left: -30%;
}
.bottom-image-text h2{
	position:absolute;
	bottom:0;
}
.title-transform-90deg{
	position:absolute;
	top: 30%;
    transform: rotate(90deg);
    right: -22px;
}
.title-transform-90deg .col-inner{
	display:inline-flex;
	height:auto;
	column-gap:300px;
}
.div-icons{
	display:flex;
	gap:10px
}
/* section1 */
/* section2 */
.bg-section-2{
 	background-color: #0f0f2f;  
    background-image: repeating-linear-gradient(
        to right,
        #CCCCCC,           
        #CCCCCC 1px,     
        transparent 1px,  
        transparent calc(17% - 1px) 
    );
}
.card{
	margin-top:5%;
	position:relative;
	z-index:3;
}

.card-content  {
	margin-left: 13% !important;
	transition: transform 0.2s ease; /* Hiệu ứng mượt */
}
.box-title-up-image{
	display:inline;
	position:absolute;
	top:50%;
	left: 7%;
    z-index: 3;
    border: 4px solid #ffffff;
    padding: 10px 30px;
}
.box-title-up-image h2{
	margin:0;
}
.title-left-rotate h1{
	font-family: 'Syne', sans-serif;
	transform:rotate(90deg);
	margin-top: 20%;
    margin-left: 31%;
    font-size: 8.5rem;;
}
.title-right-image h3{
    color: #813BB9;
    font-family: "Plus Jakarta Sans", Sans-serif;
	letter-spacing:5px;
	font-weight:700;
}
.title-right-image h4{
	color:white !important;
	 font-family: "Plus Jakarta Sans", Sans-serif !important;
	font-weight:600;
}
.explore-btn {
    width: 150px;
    height: 150px;
    border-radius: 50%; 
    background: linear-gradient(180deg, #e200c2, #8b00ff);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Arial', sans-serif;
	overflow:hidden;
	z-index:4;
}

.explore-btn::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free"; 
    font-weight: 700; 
    color: white;
    font-size: 20px;
    margin-left: 5px; 
    transition: transform 0.3s ease;
    display: inline-block;
	transform:rotate(315deg);
}	

.explore-btn:hover::after{
	transform:rotate(360deg);
}
.under-image{
position:absolute;
bottom:0%;
z-index:0;
}
.bg-icon{
	border-radius:50%;
	padding:10px;
	background-color: transparent;
    background-image: linear-gradient(180deg, #E100A8 0%, #71009C 100%);
}
.items-card {
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background-color: transparent; 
}

.items-content {
    padding: 20px;
    transition: transform 0.3s ease;
}

.items-card:hover {
    transform: scale(1.05);
}

.items-card:hover .items-content {
    transform: translate(10px, 10px);
}

.items-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    transition: background 0.4s ease; 
    z-index: 0;
}

.items-card:hover::before {
    background-image: radial-gradient(circle at 50% 30%, #23283d 0%, transparent 100%), 
                      linear-gradient(180deg, #0f1324 0%, #1d1d36 100%);
}

.items-card::after {
    position: absolute;
    content: '';
    top: -100%; 
    left: -100%;
    width: 100%;
    height: 100%;
    opacity: 0;
	padding:20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.items-card:hover::after {
    top: 0;
    left: 0;
    opacity: 1;
}
/* .box-card{
	margin:0 auto !important;
} */
.bg-box{
	background: url("https://event.theme.trueads.vn/wp-content/uploads/2024/10/about-us-bg-1-1.png")  no-repeat;
    background-size: cover;
	background-position: 100% 100%;
	padding:30px;
}
/* section2*/
/* section3 */
.bg-section-3{
	background:url("https://event.theme.trueads.vn/wp-content/uploads/2024/10/event-schedule-bg-top.png");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center 80%;
	
}
.bg-heading-section-3{
	position:absolute;
	top:0;
	z-index:0;
}

.hoverDot-img img{
	 -webkit-transition: all 500ms;

}
.hoverDot:hover img {
	-webkit-transform: rotateY(360deg);	
}
.tabbed-pannel ul {
	background:
	position:absolute;
	top:-50px;
}
.tabbed-pannel ul li{
    width: 15%;
    margin: 0;
	text-align:center;
	border:1px solid #ccc;
}
.tabbed-pannel ul li:first-child{
	border-top-left-radius: 50px;
    border-bottom-left-radius:50px;
}
.tabbed-pannel ul li:last-child{
	border-top-right-radius: 50px;
    border-bottom-right-radius: 50px
}
.tab span{
	font-weight:700;
	color:white;
}
.nav-box>li.active>a, .nav-pills>li.active{
	border-radius:none;
	background:linear-gradient(180deg, #e100a8 0%, #71009c 100%);

}
.nav-box>li.active>a, .nav-pills>li.active>a{
	background:rgba(255, 255, 255, 0);
}
/* section3 */
@media screen and (max-width: 770px) {
	.title-heading h1{
		font-size:1.5em;
		
	}
}
/*  */

.tab-panels{
	margin-top:10% ;
}
.col, .columns, .gallery-item,
.row .row:not(.row-collapse),
.col-inner>.img:not(:last-child), .col>.img:not(:last-child){
	margin:0;
	padding:0;
}
/*  */