/*
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.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	
	#top-bar > .flex-row {
		height: 30px;
	}

	.section {
		padding: 0!important;
	}
	
	.row.row-masonry {
		margin-left: 0!important;
		margin-right: 0!important;
	}
	
	.col.post-item {
		padding: 5px;
	}
	
	.service-blog.row.row-masonry .box-text.text-center {
		height: 200px;
	}
	
	.header-contact-container {
		justify-content: start!important;
	}
	
	.contact-box {
		color: #000;
	}
	
	.contact-box a {
		color: #da0f17;
	}

}


@media only screen and (min-width: 1200px) {
	.section.landing-why .stack {
		max-width: 1170px;
	}
}

@media only screen and (max-width: 1100px) {	
	.section.landing-why .stack .icon-box{
		max-width: 180px;
	}
}

@media only screen and (max-width: 1024px) {	
	.section.landing-why .stack .icon-box{
		width: 250px;
	}
}

@media (min-width: 850px) { 
	.header-wrapper.stuck {
		top: 0!important;
	}
}

/* -------------- HEADER MAIN - STICKY --------------*/

/* 1. Thiết lập chung cho Top Bar và các phần bị ẩn khi Sticky */
#top-bar, .hide-for-sticky {
    display: block !important; /* Luôn giữ để chạy được hiệu ứng trượt */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    height: auto;
    max-height: 200px; /* Giới hạn chiều cao tối đa để transition mượt hơn */
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), 
                opacity 0.4s ease, 
                max-height 0.4s ease !important;
}

/* 2. Trạng thái ẩn hoàn toàn khi cuộn xuống (Sticky đang kích hoạt) */
.stuck #top-bar, 
.show-on-scroll #top-bar,
.stuck .hide-for-sticky,
.header.show-on-scroll .hide-for-sticky {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-100%) !important; /* Trượt hẳn lên trên */
    max-height: 0 !important; /* Thu hồi diện tích */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

/* 3. Hiệu ứng mượt cho phần Header Main còn lại */
.header-main {
    transition: all 0.4s ease-in-out !important;
}

/* 4. Khử giật cho Header Wrapper */
.header-wrapper {
    will-change: transform;
    transition: none !important;
}


/* -------------- ICON ON TOPBAR (RIGHT) -------------- */
/* Bố cục chung */
.header-contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* Khoảng cách giữa Hotline và Email */
    align-items: center;
    color: #ffffff;
    font-family: sans-serif;
}

.contact-box {
    display: flex;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa icon và chữ */
    font-size: 15px;
}

/* Định dạng Icon */
.contact-box i {
    font-size: 1.1em;
    color: #ffcc00; /* Màu icon mặc định là vàng */
}

/* Định dạng chữ nhãn */
.label-text {
    font-weight: 500;
}

/* Hiệu ứng nhấp nháy cho Hotline */
.hotline-blink {
    text-decoration: none;
    animation: blinkGoldWhite 1s infinite;
}

/* Hiệu ứng cho Email */
.email-static {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.email-static:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* Keyframes cho hiệu ứng nhấp nháy */
@keyframes blinkGoldWhite {
    0%, 100% { color: #ffcc00; }
    50% { color: #ffffff; }
}

/* Mobile: Tự động xuống hàng nếu màn hình nhỏ */
@media (max-width: 600px) {
    .header-contact-container {
        gap: 10px;
        justify-content: center;
    }
}

/* -------------- LANDING PAGE --------------*/

.row.landing-info {
	background-color: transparent;
	margin-top: -60px!important;
	z-index: 99;
    position: relative;
}

.landing-info .icon-box-img svg path {
	fill: #fff!important;
}

.landing-info .col > .col-inner {
	background-color: #fff;
	padding: 20px!important;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}

.landing-info .col-inner .icon-box  {
	min-height: 98px;
}

.landing-info .icon-box-left .icon-box-img {
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 16px;
	border-radius: 6px;
	background-color: #da0f17;
}

.landing-info .col:nth-child(2) .icon-box-left .icon-box-img {
	background-color: green;
}

.section.landing-about {
    padding-top: 180px!important;
    margin-top: -90px;
}

.section.landing-why .stack {
	width: 100%;
    padding: 0 15px;
    margin: auto;
}

/* SECTION WHY CHOOSE US */
.section.landing-why .stack {
	flex-wrap: wrap;
}

.section.landing-why .stack .icon-box{
	max-width: 210px;
}

.section.landing-why .icon-box-text > .uppercase {
	font-weight: 800;
	color: #000;
	font-size: 15px;
}

.section.landing-why .icon-box-text > p > span {
	color: #000;
	font-size: 14px;
}

.num-count {
	margin-bottom: 12px;
}

.num-count > strong {
	font-weight: 900;
	font-size: 32px;
	line-height: 1.25;
	text-transform: uppercase;
	color: #da0f17;
}

/* BLOG POST */
.post-item .col-inner,
.box {
	border-radius: 10px;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	overflow: hidden;
}

.box.box-push .post-title {
	color: #fff;
	background-color: #0a6333;
	border: 1px solid #fff;
	border-radius: 12px;
	padding: 8px 12px;
}

.box .post-title > a.plain {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    overflow: hidden;
}

.from_the_blog_excerpt {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    overflow: hidden;
}

.box.box-push .box-text {
	background-color: transparent!important;
	padding: 30px 0px 20px;
}

.from_the_blog_excerpt {
	color: #000;
}

.box.box-push .is-devider {
	display: none;
}

.box.box-push a::before {
	display: none;
}

.box.box-push a.is-underline {
	text-decoration: underline;
}
/* FOOTER */
.footer-info p > span {
	color: #da0f17;
	font-weight: bold;
}

/* CONTACT FORM */
.contact-wrapper{
	max-width:1100px;
	margin:auto;
	padding:40px 20px;
	font-family:Arial, sans-serif;
}

.contact-title{
	font-size:32px;
	font-weight:700;
	color:#333;
	margin-bottom:10px;
}

.contact-title span{
	color:#e00000;
}

.contact-subtitle{
	color:#666;
	margin-bottom:30px!important;
}

.contact-row{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.contact-col{
	flex:1;
	min-width:250px;
}

.contact-wrapper input,
.contact-wrapper textarea{
	width:100%;
	padding:16px 20px;
	border-radius:30px;
	border:1px solid #ddd;
	font-size:16px;
	outline:none;
}

.contact-wrapper textarea{
	border-radius:30px;
	height:90px;
	margin-top:20px;
	resize:none;
}

.contact-button{
	margin-top:25px;
}

.contact-button input{
	background:#0f6b3a;
	color:white;
	border:none;
	padding:16px 32px;
	border-radius:40px;
	font-weight:600;
	font-size:16px;
	cursor:pointer;
	transition:0.3s;
}

.contact-button input:hover{
	background:#0c5a31;
}