/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1765334640
Updated: 2025-12-10 02:44:00

*/

/*******************************************************************************************************************************************************************************************************
																						GENERAL
*******************************************************************************************************************************************************************************************************/

.text-bright-lime-gradient {
	background: linear-gradient(107.34deg, #F9D94E -1.33%, #48A214 106.25%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	width: fit-content !important;
}

/* text gold gradient */
.quote-form-title,
.hn__home_icon-box .elementor-icon-box-title,
.hn__about-us__counter, .elementor-counter
{
	background:  linear-gradient(180deg, #FFFEFA 0%, #E4BF19 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

p { margin: 0;}

/*	Remove background popup modal	*/
.elementor-popup-modal .dialog-widget-content { background-color: unset !important; }

.banner-100vh {
	height: calc(100vh - 40px) !important;
}
@media (max-width: 1500px) {
	.banner-100vh {
		height: calc(100vh - 20px) !important;
	}
}
@media (max-width: 1024px) {
	.banner-100vh {
		height: 85vh !important;
	}
}
@media (max-width: 768px) {
	.banner-100vh {
		height: 80vh !important;
	}
}
/*******************************************************************************************************************************************************************************************************
																						HEADER & FOOTER
*******************************************************************************************************************************************************************************************************/
.header-desktop.hn_scrolled {
    background: rgba(0, 70, 30, 1) !important; 
}
.header-desktop-inner.inner_scrolled {
	border: none !important;	
}


.header-ss-desktop.ss_scrolled {
	box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
}
.header-desktop-ss-inner.ss_inner_scrolled {
	border: none !important;	
}
.footer-link.see-all {
	text-decoration: underline;
}

/*******************************************************************************************************************************************************************************************************
																						CONTACT FORMS 
*******************************************************************************************************************************************************************************************************/
.wpcf7-select {
    /* 1. Xóa icon mặc định */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
	
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;  
    background-size: 16px auto !important;

}

/* Xóa mũi tên cho IE */
.wpcf7-select::-ms-expand {
    display: none !important;
}

/* Xóa mũi tên mặc định riêng cho IE (nếu cần) */
.wpcf7-select::-ms-expand {
    display: none;
}


.hn__quote-form,
.hn__get-in-touch-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
	width: 780px;
}

.hn__quote-input-wrapper label span,
.hn__get-in-touch-input-wrapper label span 
{
	color:rgba(255, 114, 114, 1);
	font-size: 16px;
}

.hn__get-in-touch-form *,
.hn__subcribe-input-group *
{
    font-family: 'Inter', Sans-Serif;
    font-size: 16px;
	color: black;
}

.hn__subcribe-input-wrapper input,
.hn__get-in-touch-input-wrapper input,
.hn__get-in-touch-input-wrapper textarea,
.hn__get-in-touch-input-wrapper select
{
	border-radius: 8px;
	border: 1px solid #48a214;
    background: transparent;
	width: 380px;
	height: 55px;
}

.hn__subcribe-input-wrapper input::placeholder,
.hn__get-in-touch-input-wrapper input::placeholder,
.hn__get-in-touch-input-wrapper textarea::placeholder,
.hn__get-in-touch-input-wrapper select::placeholder
{
	color: rgba(0,0,0,0.8);
	font-size:14px;
}


.hn__quote-form .quote-form-submit,
.hn__subcribe-form .subcribe-form-submit,
.hn__get-in-touch-form .contact-form-submit {
	background: linear-gradient(129.34deg, #F9D94E -1.33%, #48A214 106.25%);
	border-radius: 8px;
	color: rgba(255, 255, 255, 1);
	font: 700 16px 'Inter';
	padding: 12px 40px;
	border: none;
	width: 100%;
}

.hn__quote-input-group,
.hn__subcribe-input-group, 
.hn__get-in-touch-input-group {
    display: flex;
    column-gap: 15px;
    row-gap: 35px;
    justify-content: space-between;
}

.hn__get-in-touch-input-wrapper p label {margin-bottom: 10px;}

@media (max-width: 900px) {
	.hn__get-in-touch-form { 
		padding: 30px;
        border: 1px solid #69727d;
        border-radius: 8px;
		width: 100%;
	}
    .hn__get-in-touch-input-group {
		flex-direction: column;
    }
    .hn__get-in-touch-input-wrapper input,
    .hn__get-in-touch-input-wrapper textarea,
    .hn__get-in-touch-input-wrapper select {
        font-size: 14px;
        line-height: 18px;
		width: 100%;
    }
    
    .hn__get-in-touch-form {
        gap: 10px;
    }
    
    .hn__get-in-touch-input-group {
        row-gap: 10px;
    }
}




											/*		SUBCRIBE FORM		*/
.hn__subcribe-input-wrapper { width: 66%;}
.hn__subcribe-form .hn__subcribe-submit-btn { width: 33%;}
.hn__subcribe-input-wrapper input {	width: 100%; }
.hn__subcribe-form .subcribe-form-submit { height: 55px; }
@media (max-width: 576px) {
	.hn__subcribe-form .subcribe-form-submit { padding: 0; }
}



											/*		QUOTE FORM		*/

.hn__quote-form {
	width: 440px;
	background: linear-gradient(180deg, #00461E 0%, #017E36 100%);
	border-radius: 16px;
	padding: 48px 32px;
	border: 1.5px solid #fff;
}

/* .service-contact-form::before,
.hn__quote-form::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 16px;
	padding: 2px;
	background: linear-gradient(129.34deg, #F9D94E -1.33%, #48A214 106.25%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	z-index: 0;
} */

.service-contact-form h3,
.hn__quote-form h3 {
	font: 900 32px 'Inter';
	margin-bottom: 20px;
	text-align: center;
}

.hn__quote-input-wrapper *
{
    font-family: 'Inter', Sans-Serif;
    font-size: 14px;
	color: rgba(255, 255, 255, 1);
	font-weight:500;
}

.hn__quote-input-wrapper input,
.hn__quote-input-wrapper textarea,
.hn__quote-input-wrapper select
{
	border-radius: 8px;
    background: transparent;
	width: 180px;
	border-color: rgba(255, 255, 255, 0.2) !important;
}

.hn__quote-input-wrapper input::placeholder,
.hn__quote-input-wrapper textarea::placeholder,
.hn__quote-input-wrapper select::placeholder 
{
	color: rgba(255, 255, 255, 0.4);
}

.hn__quote-input-wrapper label { 
	margin-bottom: 10px; 

}

.hn__quote-input-wrapper textarea,
.hn__get-in-touch-input-wrapper textarea 
{
	width: 100%;
	height: 115px;
}
.hn__quote-input-wrapper select option{
	color: #000;
}


@media (max-width: 576px) {
    .hn__quote-input-group {
        flex-direction: column;
    }
    
    .hn__quote-input-wrapper input,
    .hn__quote-input-wrapper textarea,
    .hn__quote-input-wrapper select {
        font-size: 14px;
        line-height: 18px;
		width: 100%;
    }
    
    .hn__quote-input-group {
        row-gap: 10px;
    }
	
	.service-contact-form h3, .hn__quote-form h3 {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.hn__quote-form {
		width: 100%;
		gap: 10px;
		padding: 15px 25px;
	}
}


										/*		SERVICE QUOTE FORM		*/

.key-benefit-title {
	margin-top: 30px; 
	border-top: 1.5px solid rgba(192, 192, 192, 1);
	font: 600 18px 'Inter';
	color: #000;
	padding: 20px 0;
}

p.key-benefit-text{
	font-size: 14px;
	font-weight: 400;
	text-align: center;
}

.social-icons {
	 display: flex; 
	gap: 15px; 
	margin-top: 10px;
	justify-content:space-between;
}

.icon-wrapper { 
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	width: 23%;
}




/*******************************************************************************************************************************************************************************************************
																						HOME
*******************************************************************************************************************************************************************************************************/

/* ------------------- SECTION 2 ------------------- */
.service-cards-grid {
    display: grid;
    gap: 15px; 
    grid-template-columns: repeat(5, 1fr); 
}

.service-card,
.load-more-card {
    height: 295px;
    width: 100%; 
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    margin: 0;
    color: white;
    font-size: 18px;
    font-weight: bold;
    /* Gradient overlay cho dễ đọc text */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	text-align: center;
}

/* ----- LOAD MORE CARD STYLE ---- */
.load-more-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode: darken;
}

.load-more-card .service-card-title {
    background: none;
    position: static;
    padding: 0;
    margin-top: 10px;
    text-align: center;
    color: white;
}

.load-more-plus-icon {
    font-size: 80px;
    font-weight: 300;
    color: white;
    line-height: 1;
}



/* Trạng thái Unavailable */
.service-card.is-unavailable {
    ccursor: not-allowed !important;
    pointer-events: all; /* Cho phép hover để hiện tooltip */
    filter: grayscale(0.6);
    transform: none !important; /* Không cho nhảy khi hover */
}

/* Ẩn tooltip mặc định */
.service-tooltip {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 6px 12px;
    position: absolute;
    z-index: 10;
    top: 15px; /* Vị trí tooltip trong card */
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: normal;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
    pointer-events: none;
}

/* Mũi tên tooltip */
.service-tooltip::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    display: none; /* Ẩn mũi tên nếu tooltip nằm trên ảnh */
}

/* Hiện tooltip khi hover vào card unavailable */
.service-card.is-unavailable:hover .service-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Chặn hiệu ứng hover chuyển động cho card unavailable */
.service-card.is-unavailable:hover {
    transform: none;
}



/* ------------------- RESPONSIVE GRID ------------------- */

@media (max-width: 1300px) {
    .service-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .service-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .service-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
	
}

@media (max-width: 576px) {
	.service-card-title {padding: 10px; font-size: 14px;}
	.service-card, .load-more-card {height: 250px;}
	
}




.hn__icon-box h3 {margin: 0;}

/* .border-linear-green-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1.5px;
    background: linear-gradient(82.32deg, #FFFFFF -3.75%, #5BC31F 47.83%, #FFFFFF 101.42%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
	cursor: pointer;
	z-index:0;
} */



/* ------------------- SECTION Process  ------------------- */ 
.lawn-process-container {
    font-family: 'Inter';
	width: 525px;
} 

.process-step {
    display: flex;
    align-items: center;
    position: relative;
    padding: 30px 0; 
}

/* Ẩn đường kẻ nối ở bước cuối */
.process-step:last-child {
    padding-bottom: 0;
}

/* TẠO ĐƯỜNG KẺ NỐI */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 21px; 
    top: 72px; 
    bottom: -15px; 
    width: 1.5px;
	height: 60px;
    background-color: #fff; 
}

/* VÒNG TRÒN SỐ */
.process-number {
    width: 42px;
    height: 42px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-right: 30px;
}

.process-text {
    font-weight: 700; 
    font-size: 20px;
    line-height: 1.0;
    color: #fff;
}

@media (max-width: 1200px) {
	.lawn-process-container {width: 400px;}
}

@media (max-width: 768px) {
    .process-step {
        padding: 20px 0;
    }
    
    .process-step:not(:last-child)::after {
        left: 15px; 
        top: 50px;
    }
    
    .process-number {
        width: 30px;
        height: 30px;
        font-size: 14px;
        margin-right: 15px;
    }
    
    .process-text {
        font-size: 16px; 
    }
	
	.process-step:not(:last-child)::after {height: 40px;}
}




/* Testimonial swiper*/
.testimonial-swiper-custom {
    box-sizing: border-box;
	overflow:hidden;
}
.testimonial-swiper-custom .swiper-slide {
    box-sizing: border-box;
}
.custom-slide-style {
	margin-left: 0;
	margin-right: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(255, 255, 255, 1);
    backdrop-filter: blur(2px);
    
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 222px !important; 
}

.slide-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 7px;
}

.source-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.author-name {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.rating-stars {
	margin-bottom: 25px;
}
.rating-stars img.star {
    width: 18px; 
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
}

.quote-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    line-height: 1.5;
    margin: 0;
}

.swiper-pagination {
    bottom: -50px !important; 
}

.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 1) !important;
    transition: background 0.3s;
}

.swiper-pagination-bullet-active {
    background: #fff !important;
}

/*******************************************************************************************************************************************************************************************************
																						BLOG
*******************************************************************************************************************************************************************************************************/

.hn__blog-card-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.82%, #000000 100%);
	z-index: 1; 
	border-radius: 8px;
}

.hn__blog-card-img a {
	width: 100%;
}

/*******************************************************************************************************************************************************************************************************
																						SERVICE
*******************************************************************************************************************************************************************************************************/

.hn__service-card-title::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) -16.18%, #000000 100%);
	z-index: 1; 
	border-radius: 8px;
}

.hn__service-card-img a{
	width: 100%;
}




.main-service-container {
    font-family: 'Inter', sans-serif;
	background: rgba(251, 255, 250, 1);
}
								/* Phần 1: Img, name,... */

.service-image-header {
    height: 400px;
    display: flex;
    align-items: end;
    padding: 32px;
	border-radius: 8px;
}

.image-overlay {
    position: absolute;
    height: 400px;
    width: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.82%, #000000 100%);
	border-radius: 8px;
}

.image-content-wrapper {
    z-index: 0;
    color: #fff;
}

h1.sub-service-name-overlay {
    font-size: 32px !important;
    font-weight: 800 !important;
    margin-bottom: 5px;
}

p.sub-service-short-desc {
    font-size: 14px;
    font-weight: 400;
}

								/* Phần 2: Full description */

.service-full-description-container {
    margin: 20px 0 35px;
    font-size: 15px;
    font-weight: 400;
    color: rgb(64, 64, 64);

}
h2#dynamic-sub-service-title {
    font-size: 20px;
    font-weight: 700;
    color: rgb(38 112 70);
}
								/* Phần 3: Tabs */

.service-nav-tabs {
    display: flex;
    flex-direction: row; 
    gap: 40px;
    margin-bottom: 30px;
}

label.service-nav-label.season-label,
label.service-nav-label.sub-service-label {
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: 600;
	color: rgb(64, 64, 64);
}



/* Nhóm Tab 1: Sub Services (A1, A2...) */
.sub-service-nav-group {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
}

/* Nhóm Tab 2: Seasons (Hè, Đông...) */
/* Lưu ý: Javascript ẩn nhóm này nếu không có mùa */
.season-nav-group {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;
}

/* Định kiểu cho các nút Tab */
.sub-service-nav-group a, 
.season-nav-group a {
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    color: rgba(192, 192, 192, 1);
	border: 1.5px solid rgba(192, 192, 192, 1);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
	font-size: 16px;
	font-weight: 500;
}

/* Trạng thái Active */
.sub-service-nav-group a.active, 
.season-nav-group a.active {
    background-color: #000; 
    color: white;
    font-weight: 700;
	border-color: #000;
}

										/* Phần 4: Giá */

span.dollar-symbol,
span.price-value {
    background: linear-gradient(107.34deg, #F9D94E -1.33%, #48A214 106.25%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48px;
    font-weight: 600;
}

span.price-desc {
	color: rgb(64, 64, 64);
	font-size: 14px;
	font-weight: 400;
}


									/* Phần 4: Note, Billing term,... */

.details-row-5 {
    display: flex;
    margin-top: 10px;
	gap: 30px;
    justify-content: space-between;
}
.detail-column {width: 32%;}

.fixed-part-6 h4,
.details-row-5 h4 {
	font-size: 17px;
    font-weight: 600;
	margin-bottom: 10px;
	color: rgb(0 129 55);
}

.detail-column.detail-column-fixed-1 ul {
    list-style: none;
    padding: 0;
}

.fixed-part-6 p,
.note-content,
.details-row-5 ul li {
	font-size: 14px;
	font-weight: 400;
	color: rgb(64, 64, 64);
	margin: 5px 0;
	
}
ul.billing-term-list {padding-left: 20px;}

.fixed-part-6 {margin-top: 20px;}



								/* Phần 4: Transform result */

/* Swiper Container: Dùng class cố định */
.service-result-swiper { 
    overflow: hidden; 
    padding-bottom: 50px;
}

/* Slide item */
.transform-result-slide {
    position: relative;
    height: 260px !important; 
    border-radius: 8px;
    overflow: hidden;
}

/* Overlay */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.82%, #000000 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 24px;
    color: white;
}

.overlay-text-fixed {
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;
}

.slide-service-name {
    font-size: 18px;
    font-weight: 400;
	margin: 0;
}

.service-result-swiper-pagination {
	bottom: 0 !important;
}
.service-result-swiper-pagination .swiper-pagination-bullet {
    background: rgba(227, 227, 227, 1) !important; /* Màu bullet mặc định */
    opacity: 1;
}

.service-result-swiper-pagination .swiper-pagination-bullet-active {
    background: rgba(183, 183, 183, 1) !important; /* Màu bullet active khác biệt */
}

/* Container chứa 2 nửa ảnh */
.slide-images-split {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Từng nửa ảnh */
.img-split {
    flex: 0 0 50%; 
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.img-before {
    border-right: 1px solid rgba(255,255,255,0.3);
}

/* Cập nhật lại Slide gốc để hỗ trợ layer */
.transform-result-slide {
    position: relative;
    height: 260px !important;
    border-radius: 8px;
    overflow: hidden;
    background: #000; 
}

.slide-overlay {
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
}

@media (max-width: 1200px) {
	h1.sub-service-name-overlay {font-size: 30px !important;}
}

@media (max-width: 768px) {
	.sub-service-nav-group a, .season-nav-group a {
		font-size: 14px;
	}
	span.dollar-symbol, span.price-value { 
		font-size: 32px;
		font-weight: 700;
	}
	.season-nav-group {
		gap: 25px 10px;
	}
	.details-row-5 {
		flex-direction: column;
		gap: 15px;
	}
	.detail-column {
		width: 100%;
	}
	.fixed-part-6 h4, .details-row-5 h4 {font-size: 15px;}
}

@media (max-width: 576px) {
	h1.sub-service-name-overlay {font-size: 22px !important;}
	.service-image-header {
		height: 300px;
		padding: 20px;
	}
	.image-overlay {
		height: 300px;
	}
	h2#dynamic-sub-service-title {
    	font-size: 18px;
	}
	.service-nav-tabs {flex-direction: column; gap: 32px;}
}




/* Container chung của card (Elementor sẽ bao ngoài class của bạn) */
.service-is-disabled .hn__service-card-wrap {
    cursor: not-allowed !important;
    filter: grayscale(0.8);
    opacity: 0.8;
    position: relative;
    pointer-events: all; /* Vẫn cho phép hover */
}

/* Chặn click vào tất cả thành phần bên trong */
.service-is-disabled .hn__service-card-wrap * {
    pointer-events: none;
}

/* Tạo Tooltip bằng CSS Content */
.service-is-disabled .hn__service-card-wrap::after {
    content: "Temporarily unavailable"; /* Nội dung thông báo */
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99;
}

/* Hiện Tooltip khi hover */
.service-is-disabled:hover .hn__service-card-wrap::after {
    opacity: 1;
    visibility: visible;
}
/*******************************************************************************************************************************************************************************************************
																						BLOG
*******************************************************************************************************************************************************************************************************/
.elementor-icon-box-title span {
	display: block;
    word-break: break-all;
}
.related-services-takeaways {
    border: 1px solid #99c17a; 
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    margin: 20px 0;
    max-width: 800px;
}

.takeaways-header {
    background-color: #f7fcf2; 
    padding: 15px 20px;
    border-bottom: 1px solid #99c17a;
}

.takeaways-header h3 {
    margin: 0;
    color: #000;
    font-size: 20px;
    font-weight: 600;
}

.takeaways-body {
    padding: 20px;
    background-color: #fff;
}

.takeaway-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.takeaway-item:last-child {
    margin-bottom: 0;
}

.takeaway-icon {
    width: 35px;
    margin-right: 15px;
    flex-shrink: 0;
}

.takeaway-icon img {
    width: 24px;
    height: auto;
}

.takeaway-content strong {
    display: block;
    font-size: 16px;
    margin-bottom: 3px;
    color: #000;
}

.takeaway-content p {
    margin: 0;
    color: #000;
    font-weight: 400;
    font-size: 16px;
}

.takeaway-link {
    text-decoration: none;
    display: inline-block;
    margin-bottom: 3px;
}

.takeaway-link strong {
    color: #000; 
    transition: color 0.2s ease;
}

.takeaway-link:hover strong {
    color: #99c17a; 
}

@media (max-width: 576px) {
	.takeaways-header h3 {font-size: 18px;}
	.takeaway-content p { font-size: 14px;}
}