/*
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.   ***************/
h1, h2, h3{
	margin-bottom:0px !important
}
.header-top-info{
	flex-direction: row;
	gap: 20px;
	color: white !important;
	.ux-menu-link{
		.ux-menu-link__link{
			border: 0px;
		}
	}
	span{
		color: white !important;
	}
	i{
		color: white !important;
	}
	
}

.header-search{
	margin: 0 !important;
	a{
		background-color: var(--fs-color-primary);
	}
}

.nav-icon{
	a{
		background-color: var(--fs-color-primary);
	}
}
.header-button{
	
	a{
		min-height: 2.5rem !important;
		min-width: 2.5rem !important;
		
		i{
			top: 3px !important;
		}
	}
}

.info-footer{
	span{
		color: var(--fs-color-primary);
		font-weight: bold;
		padding-left: 24px !important;
	}
	i{
		color: var(--fs-color-primary);
	}
	
	
		.ux-menu-link{
			&:hover{
				span{
					color: white;
					font-weight: bold;
				}
				i{
					color: white;
				}
			}
		}
}

.title-footer{
	h3{
		position: relative;
		border-left: none;
		padding-left: 0;
		font-size: 24px;
		margin-top: -0.1em;
		margin-bottom: 32px;
		padding-bottom: 8px;
		&:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 40px;
			height: 3px;
			background-color: var(--fs-color-primary);
			border-radius: 3px;
		}
		&:after{
			content: "";
			position: absolute;
			left: 45px;
			bottom: 0;
			width: 8px;
			height: 3px;
			background-color: white;
			border-radius: 3px;
		}
	}
}
p{
	margin: 0;
}

.item-service-home{
	padding: 2rem;
	padding-bottom: 0px;
	border: 2px solid #07ccec50;
	border-radius: .5rem;
	transition: all .5s;
	&:hover{
		border-color: var(--fs-color-secondary);
		.icon-box-img{
			background-color: var(--fs-color-secondary) !important;
		}
	}
	.box-image{
		img{
			aspect-ratio: 16 / 9;
  			width: 100%;
			object-fit:cover;
		}
	}
	.box-text{
		position: relative;
		.icon-box{
			position: relative;
			top: -50px;
			.icon-box-img{
				border-radius: 50%;
				background-color: var(--fs-color-primary);
				height: 100px;
				align-content: center;
				border: 10px solid white;
				transition: all .5s;
				.icon{
					width: 40px;
				}
			}
		}
		
		.icon.button{
			position: absolute;
			bottom: -7%;
			margin: 0;
			transform: translateX(-50%);
		}
	}
}

.banner-service-home {
    position: relative;
    overflow: hidden;

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        pointer-events: none;
    }

    /* Thanh ngang */
    &::before {
        background: linear-gradient(
            0,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 100%
        );
        height: 200%;         // chỉ chiếm 1 phần để tạo cảm giác “thanh ngang”
        width: 200%;
        z-index: 2;
		transform: rotate(20deg)
		
    }

    /* Thanh dọc */
    &::after {
        background: linear-gradient(
            0,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 100%
        );
        width: 200%;          // thanh dọc hẹp
        height: 200%;
        z-index: 1;
    }

    &:hover::before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(2);
		transition: all 2s ease;
    }

    &:hover::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(2);
		transition: all 2s ease;
    }
	border: .5rem solid white;
	.text-year-exp{
		width: fit-content !important;
		.text-box-content{
			border-radius: 0 50px 0 0;	
			p{
				margin: 0;
			}
		}
		
	}
	
	.video-button-wrapper {
		position: relative;
		display: inline-block;

		a {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: var(--fs-color-primary); // màu nút (bạn có thể đổi)
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			text-decoration: none;
			font-size: 2rem;
			position: relative;
			z-index: 2;
			box-shadow: 0 0 0 #07ccec50;
			animation: pulse 2s infinite; // hiệu ứng tỏa ra
			transition: all 0.3s ease;

			&:hover {
				background-color: var(--fs-color-secondary);
				transform: scale(1.05);
			}

			&::before,
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #07ccec50;
				z-index: -1;
				opacity: 0;
				animation: ripple 2s infinite;
			}

			&::after {
				animation-delay: 2s; // cho hiệu ứng so le, trông mềm hơn
			}
		}
	}
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    70% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

// Hiệu ứng “đập nhẹ” cho chính nút
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(255, 77, 79, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
    }
}

.icon-circle{
	
	.icon-box-text{
		align-content: center;
	}
	.icon{
		height: 60px;
		background: color-mix(in srgb, var(--fs-color-primary) 30%, transparent);
		border-radius: 50%;
		position: relative;
		.icon-inner{
			width: 30px;
			height: 30px;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-55%, -55%);
		}
	}
}

.counter-home{
	background: white;
	padding: 2rem;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 8px #80808020;
	.icon{
		height: 60px;
		border-radius: 50%;
		position: relative;
		border: 4px solid var(--fs-color-primary);
		animation: pulse 2s infinite; // hiệu ứng tỏa ra
		transition: all 0.3s ease;
		background: white;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #07ccec50;
			z-index: -1;
			opacity: 0;
			animation: ripple 5s infinite;
		}

		&::after {
			animation-delay: 5s; // cho hiệu ứng so le, trông mềm hơn
		}
		.icon-inner{
			width: 20px;
			height: 20px;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-55%, -75%);
		}
	}
}

.menu-booking{
	.ux-menu-link__icon{
		background: white;
		color: var(--fs-color-primary);
		border-radius: 50%;
		width: 20px;
		height: 20px;
		font-size: .75rem;
		display: flex;
		align-content: center;
		align-items: center;
		box-shadow: 0 0 4px #808080;
		&::before{
			margin: 0 auto;
		}
	}
}

.wpcf7 form .form-control {
  	border-radius: 50px;
	margin-bottom: 0 !important;
	padding: 12px 18px;
	height: auto;
}

.icon-booking-home{
	.icon{
		height: 60px;
		background: var(--fs-color-secondary);
		border-radius: 50%;
		position: relative;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #07ccec50;
			z-index: 1;
			opacity: 0;
			animation: ripple 2s infinite;
		}

		&::after {
			animation-delay: 2s; // cho hiệu ứng so le, trông mềm hơn
		}
		.icon-inner{
			width: 30px;
			height: 30px;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-55%, -55%);
		}
	}
}

.testimonial-home{
	.star-rating{
		&::before{
			color: #fec624;
		}
		span{
			&::before{
				color: #fec624;
			}
		}
	}
	.icon-box{
		.icon-box-img{
			border-radius: 50%;
			height: 70px;
			overflow: hidden;
			border: 10px solid white;
			img{
				width: 50px;
				height: 50px;
				padding: 0;
				display:none;
			}
		}
		
		.icon-box-text{
			align-content: center;
		}
	}
	
	.testimonial-box{
		.icon-box-text{
			display: flex;
			flex-direction: row-reverse;
			.testimonial-meta{
				display: none;
			}
			.testimonial-text{
				margin: 0;
			}
		}
	}
}

.breadcrumb{
	width: fit-content !important;
	transform: translatey(50%);
	z-index: 2;
	.text-box-content {
		.text-inner{
			padding: 1rem 3rem !important;		
		}
	}
	a{
		color: var(--fs-color-secondary);
		&:hover{
			color: var(--fs-color-primary);
		}
	}
}

.gallery-col{
	padding-bottom: 0 !important;
}
.corinthia-regular h3{
  font-family: "Corinthia", cursive, sans-serif;
  font-weight: 400;
}
.banner-service-detail {
	.box-text{
		.box-text-inner{
			position:absolute;
			bottom:0;
			width:100%;
			transform:translateY(50%);
		}
	}
}
.limit-2 span,
.limit-2 p{
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Giới hạn 2 dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.img-service img{
	aspect-ratio: 16 / 9;
    width: 100%;
	object-fit:cover;
}
.typing-css {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #007bff; /* màu và độ dày con trỏ */
  font-weight: 600;
  width: 0; /* ban đầu ẩn */
  animation: typing 1.8s steps(30, end) forwards, blink .6s step-end infinite;
}

/* Hiệu ứng gõ */
@keyframes typing {
  from { width: 0; }
	to { width: 20ch;}
}

/* Hiệu ứng nhấp nháy con trỏ */
@keyframes blink {
  50% { border-color: transparent; }
}
.typing-css.done {
  border-right: none;
}

.vision-intro .col-inner {
  --c: #8A9B0F; /* the border color */
  --b: 10px;    /* the border thickness*/
  --g: 5px;     /* the gap on hover */
  
  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%,var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g))
     var(--_i,200%) 0  /200% var(--_i,var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b),var(--_g))
     0   var(--_i,200%)/var(--_i,var(--b)) 200%  no-repeat ;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
.vision-intro .col-inner:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}
.blog-single{
	.large-10 {
		max-width:100%;
	}
}
.link-footer{
	i,span{
		color:white;
	}
	
}
@media only screen and (max-width: 549px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.banner-layers{
		overflow: unset !important;
	}

}