#header .header-main .header-inner .header-language-dropdown>a {
    font-size: 0;
}
#header .header-main .header-inner .header-language-dropdown .image-icon img {
    width: 25px;
}
#header .header-main .header-inner .header-language-dropdown .nav-dropdown .icon-image img {
    width: 25px;
}
/* #header .header-main .header-inner .header-language-dropdown .nav-dropdown>li>a {
    font-size: 0;
} */
/* #header .header-main .header-inner .header-language-dropdown .nav-dropdown {
    min-width: 40px;
    padding: 0;
} */
.heroBanner {
    min-height: 100vh !important;
}
.home .header.transparent .header-bg-color {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(23, 50, 89, 0.85) 0%, rgba(23, 50, 89, 0.00) 100.27%) !important;
}
.header-logo-dark {
     filter: brightness(0) invert(1);
}
#masthead .header-nav-main {
    justify-content: center;
}

#masthead .header-nav-main>li>a {
    text-transform: none;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.heroBanner {
    	min-height: calc(45vh + 5px) !important;
	}
}

.pb-0{
	padding-bottom: 0px;
}
.pt-1{
	padding-top: 5px;
}
.text-justify{
	text-align: justify;
}
.breadcrumb-custom p, .rank-math-breadcrumb p {
    margin-bottom: 0px;
}
.button span{
	font-size: 18px;
	font-weight:400;
}
.tooltip{
opacity: 1 !important;
/* color: #002D6F !important; */
}
/* .html_topbar_left{
color: #002D6F !important;
} */
/* .icon-search{
color: #002D6F !important;
} */
.tabbed-content .nav{
gap: 16px;
border-bottom: 2px solid #E7EFF5;
}
.nav-pills>li.active>a{
border-radius: 4px 4px 0px 0px;
background-color: #379EFF !important;
box-shadow: 0px 9px 12px 0px rgba(55, 158, 255, 0.30);
}
.has-dropdown .icon-angle-down {
font-size: 20px !important;
margin-left: 0.3em !important;
opacity: 1 !important;
}
.ux-menu-link__text{
font-size: 16px;
}
.copyright-footer{
font-size: 14px;
color: #FFF;
}
.btn-cs{
display: flex;
padding: 7px 32px !important;
justify-content: center;
align-items: center;
gap: 10px;
}
.btn-1{
	border-radius: 4px;
	background: var(--Blue, linear-gradient(270deg, #4F8AFF 0%, #65B2FF 100%));
}
.btn-2{
	border-radius: 4px;
	background: var(--Xanh-l-Gradient, linear-gradient(307deg, #34B606 5.16%, #69EC3A 90.15%));
}
.btn-3{
	border-radius: 4px;
	background: var(--Nu-gradient, linear-gradient(307deg, #DE5711 5.16%, #FF8748 90.15%));
}

/* Giữ nguyên CSS chung */
.gallery-container{
display:flex;
flex-wrap: wrap;
gap: 10px;
}
.image-with-badge {
position: relative;
display: inline-block;
overflow: visible;
flex: 1 1 calc(33.333% - 10px);
}

.image-with-badge img {
display: block;
max-width: 100%;
height: auto;
}

.badge {
position: absolute;
background-color: #FFF;
padding: 10px 28px;
border-radius: 8px;
box-shadow: 0px 9px 12px 0px rgba(55, 158, 255, 0.30);
text-align: center;
z-index:10;
}

/* Sửa lại vị trí badge với transform */
.badge.top-left {
top: 0;
left: 0;
transform: translate(-30%, -30%);
}

.badge.bottom-left {
bottom: 0;
left: 0;
transform: translate(-30%, 30%);
}

.badge.bottom-right {
bottom: 0;
right: 0;
transform: translate(30%, 30%);
}

.badge-number {
color: #FF352B;
font-size: 30px;
font-weight: 700;
line-height: 1;
margin: 0;
}

.badge-text {
color: #00173A;
font-size: 16px;
margin: 2px 0 0 0;
font-weight: 700;
}

/* Thêm CSS responsive */
/* Màn hình tablet */
@media screen and (max-width: 991px) {
.image-with-badge {
flex: 0 1 calc(50% - 10px); /* 2 ảnh mỗi hàng */
}

.badge {
padding: 8px 20px;
}

.badge-number {
font-size: 26px;
}

.badge-text {
font-size: 14px;
}
}

/* Màn hình di động */
@media screen and (max-width: 575px) {
.gallery-container {
justify-content: center;
}

.image-with-badge {
flex: 0 1 60%; /* 1 ảnh mỗi hàng */
margin-bottom: 40px; /* Thêm khoảng cách để tránh chồng lấp */
}

.badge {
padding: 5px 15px;
}

.badge-number {
font-size: 20px;
}

.badge-text {
font-size: 11px;
}

.badge.bottom-left{
transform: translate(0, 50%); /* Điều chỉnh để badge không bị che khuất */
}

.badge.bottom-right {
transform: translate(0, 50%); /* Điều chỉnh để badge không bị che khuất */
}
}


.slanted-column {
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 200%); /* Cắt chéo góc dưới phải */
}


.marquee-container {
width: 100%;
margin: 0 auto;
/* overflow: hidden; */
position: relative;
display: flex;
}

.marquee-left, .marquee-right {
display: flex;
flex-direction: row; /* Đảm bảo hiển thị theo chiều ngang */
flex-wrap: nowrap; /* Không cho phép xuống dòng */
}

.marquee-item {
display: flex;
align-items: center;
padding: 16px;
width: 260px;
min-width: 260px; /* Quan trọng - đảm bảo không co lại */
flex: 0 0 auto; /* Quan trọng - ngăn co giãn */
height: 112px;
border-radius: 8px;
background: #FFF;
box-shadow: 3px 6px 14.8px 0px rgba(0, 102, 199, 0.20);
margin-right: 92px;
margin-bottom: 0; /* Đảm bảo không có margin dưới */
}

.marquee-icon {
width: 74px;
height: 76px;
object-fit: contain; /* Đảm bảo logo hiển thị đẹp */
margin-right: 12px;
}

.marquee-text {
font-weight: 700;
font-size: 20px;
}
.js-marquee-wrapper{
display:flex;
}
.js-marquee{
display:flex;
}


.latest-blogs-layout {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.latest-blogs-layout .left-big {
flex: 1;
/* min-width: 50%; */
}
.latest-blogs-layout .right-small {
flex: 1;
min-width: 50%;
display: flex;
flex-direction: column;
gap: 15px;
}
/* Thêm vào file latest-blogs.css */

/* Giới hạn độ dài tiêu đề trong blog-title */
.blog-title {
display: -webkit-box;
-webkit-line-clamp: 2; /* Giới hạn 2 dòng */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 2.6em; /* Điều chỉnh theo font-size và line-height */
margin: 5px 0;
font-size: 16px;
font-weight: bold;
line-height: 1.3;
}

/* Giới hạn độ dài cho liên kết trong blog-title */
.blog-title a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: inherit;
}

/* Giới hạn độ dài mô tả */
.blog-excerpt {
/* display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 4.2em;
font-size: 14px;
color: #666;
margin: 5px 0;
line-height: 1.4; */
}
.blog-item {
position: relative;
padding: 10px;
overflow: hidden;
margin-bottom: 15px;
}
.blog-item.big .blog-image img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
}
.date-badge {
position: absolute;
top: 20px;
left: 20px;
background-color: #FF352B;
color: white;
padding: 8px 12px;
font-weight: bold;
z-index: 9;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
border-radius: 4px;
}
.date-badge .day {
font-size: 16px;
}
.date-badge .month {
font-size: 14px;
}
.blog-category {
color: #FF756F;
font-weight: 400;
font-size: 14px;
display: block;
margin-bottom: 5px;
}
.blog-title {
font-size: 20px;
font-weight: 700;
margin: 5px 0;
line-height: 1.3;
color: #002D6F;
}
.blog-excerpt {
font-size: 14px;
color: #00173A;
margin: 5px 0;
line-height: 1.4;
}
.read-more {
color: #00173A;
text-decoration: none;
font-size: 14px;
}
.small-blog-flex {
display: flex;
gap: 15px;
/* align-items: center; */
}
.small-blog-flex .blog-image {
flex: 0 0 55%;
}
.small-blog-flex .blog-image img {
width: 100%;
height: 220px;
display: block;
border-radius: 6px;
}
.small-blog-flex .blog-content {
flex: 1;
}
@media (max-width: 768px) {
.latest-blogs-layout {
flex-direction: column;
}
.small-blog-flex {
flex-direction: column;
}
.small-blog-flex .blog-image {
flex: 0 0 100%;
}
}





.add-shadow > .col-inner{
box-shadow: 0px 0px 19.6px 0px rgba(80, 139, 255, 0.10);
}
.fluentform .ff-el-input--label label {
color: #FFF !important;
}
.ff-el-group.ff-text-left.ff_submit_btn_wrapper .ff-btn.ff-btn-submit {
padding: 12px 52px !important;
border-radius: 4px !important;
background: linear-gradient(270deg, #4F8AFF 0%, #65B2FF 100%) !important;
}
.ux-menu-link__link {
color: #FFF !important;
}
.megamenu-list .ux-menu-link__link {
color: #002D6F !important;
}
.gradient-text h2 {
background-image: linear-gradient(270deg, #4F8AFF 0%, #65B2FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gradient-text{
background-image: linear-gradient(270deg, #4F8AFF 0%, #65B2FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gradient-text-green{
	background: var(--Xanh-l-Gradient, linear-gradient(307deg, #34B606 5.16%, #69EC3A 90.15%));
	background-clip: text;
	font-weight: 700;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.gradient-text-orange{
	background: var(--Nu-gradient, linear-gradient(307deg, #DE5711 5.16%, #FF8748 90.15%));
	background-clip: text;
	font-weight: 700;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.bt-abus{
color: #FFF !important;
background-color: #76BDFF !important;
border: 1px solid #FFF !important;
}

.image-text-container {
position: relative;
width: 270.647px;
margin-bottom: 100px;
justify-items: center;
padding-top: 60px;
}

.image-wrapper {
width: 211px;
height: 150px;
transition: all 0.5s ease;
position: relative;
z-index: 1;
}

.image-wrapper img {
width: 100%;
height: 100%;
display: block;
transition: all 0.5s ease;
}

.overlay-text {
position: absolute;
bottom: -125px; /* Điều chỉnh để text có thể tràn xuống dưới ảnh */
right: 0;
width: 100%;
min-height: 180px; /* Đặt chiều cao tối thiểu thay vì height cố định */
height: auto; /* Cho phép chiều cao tự điều chỉnh theo nội dung */
background-color: white;
box-shadow: 0px -30px 32.3px -22px rgba(0, 115, 223, 0.15);
transition: all 0.5s ease;
z-index: 2;
transform: translateY(0);
}
.overlay-text h3 {
margin-top: 15px;
margin-bottom: 10px !important;
font-size: 22px;
color: #002D6F;
text-align: center;
}

.overlay-text ul {
margin: 0;
}
.overlay-text li {
margin-bottom: 5px;
font-size: 18px;
color: #002D6F;
line-height: 1.4;
}

/* Hiệu ứng khi hover */
.image-text-container:hover .overlay-text {
transform: translateY(50px); /* Di chuyển text ra khỏi vùng nhìn */
opacity: 1;
}
.image-text-container:hover .image-wrapper {
transform: translateY(-10px); /* Ảnh di chuyển lên trên */
}

/* Tùy chọn: nếu muốn ảnh zoom nhẹ khi hover */
.image-text-container:hover .image-wrapper img {
transform: scale(1.05);
}

/* Chỉ áp dụng position relative cho section có video */
.has-video-background {
position: relative;
}

.section-sound-toggle {
position: absolute;
bottom: 20px;
right: 20px;
width: 44px;
height: 44px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
z-index: 99;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}

.section-sound-toggle:hover {
background-color: rgba(0, 0, 0, 0.85);
}

.section-sound-toggle .sound-icon {
width: 20px;
height: 20px;
filter: invert(1);
}

/* Nút điều khiển âm thanh */
.section-sound-toggle {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 99;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.section-sound-toggle:hover {
    background-color: rgba(0, 0, 0, 0.85);
}

.section-sound-toggle .sound-icon {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

/* Nút điều khiển âm thanh (bên trái) */
.section-sound-toggle {
    position: absolute;
    bottom: 20px;
    right: 74px; /* Cách nút fullscreen: 44px (width) + 10px (khoảng cách) + 20px (margin) = 74px */
    width: 44px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 99;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.section-sound-toggle:hover {
    background-color: rgba(0, 0, 0, 0.85);
}

.section-sound-toggle .sound-icon {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

/* Nút xem video toàn màn hình (bên phải) */
.fullscreen-video-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 99;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.fullscreen-video-btn:hover {
    background-color: rgba(0, 0, 0, 0.85);
}

.fullscreen-video-btn .fullscreen-icon {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

/* Overlay video khi xem toàn màn hình */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.video-overlay video {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
}

.close-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    color: white;
    font-size: 24px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive cho mobile */
@media (max-width: 767px) {
    .section-sound-toggle {
        width: 36px;
        height: 36px;
        bottom: 15px;
        right: 61px; /* Cách nút fullscreen: 36px (width) + 10px (khoảng cách) + 15px (margin) = 61px */
    }
    
    .section-sound-toggle .sound-icon {
        width: 16px;
        height: 16px;
    }
    
    .fullscreen-video-btn {
        width: 36px;
        height: 36px;
        bottom: 15px;
        right: 15px;
    }
    
    .fullscreen-video-btn .fullscreen-icon {
        width: 16px;
        height: 16px;
    }
}
.float-contact
{
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo, .chat-facebook, .call-hotline
{
display: block;
margin-bottom: 6px;
line-height: 0;
}

.drop-acor {
    max-width: 100%;
    border: none;
    background: transparent;
}

.drop-acor .accordion-item {
    border: none;
    margin-bottom: 0;
    background: white;
    border-radius: 0;
}

.drop-acor .accordion-title {
    padding: 15px 20px;
    color: #999999;
    background: #f8f9fa;
    border-bottom: none;
	border-top: none;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
}

.drop-acor .accordion-title:hover {
    color: #666666;
    text-decoration: none;
}

/* Style cho item active */
.drop-acor .accordion-title.active {
    color: #ff6b35;
    background: white;
    border-left: 3px solid #ff6b35;
    padding-left: 17px; /* Giảm 3px để bù border trái */
}

/* Style cho các item không active */
.drop-acor .accordion-title:not(.active) {
    border-left: 3px solid #e9ecef;
    padding-left: 17px;
	margin-bottom: 10px;
}

/* Ẩn button toggle */
.drop-acor .toggle {
    display: none;
}

/* Content styling */
.drop-acor .accordion-inner {
    padding: 0px 0px 10px 20px;
    background: white;
    border-top: none;
    color: #333333;
    border-left: 3px solid #ff6b35;
    margin-bottom: 10px;
}

.custom-timeline-wrapper {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
position: relative;
}

.timeline-vertical-line {
position: absolute;
left: 50%;
top: 25px;
bottom: 25px;
width: 3px;
background: linear-gradient(to bottom, #74b9ff, #0984e3);
transform: translateX(-50%);
z-index: 1;
}

.timeline-step {
display: flex;
margin-bottom: 60px;
position: relative;
z-index: 2;
}

.timeline-step:nth-child(even) {
flex-direction: row-reverse;
}

.step-content {
flex: 1;
max-width: 500px;
padding: 10px;
position: relative;
margin: 0px -150px 0px -130px;
}

.step-title {
font-size: 24px;
font-weight: 700;
color: #379EFF;
margin-bottom: 8px;
}

.step-description {
font-size: 18px;
font-weight: 400;
color: #00173A;
}

.step-number {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #74b9ff, #0984e3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: bold;
box-shadow: 0 4px 15px rgba(116, 185, 255, 0.4);
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}

/* Speech bubble arrows */
.timeline-step:nth-child(odd) .step-content::before {
            content: '';
            position: absolute;
            right: -15px;
            top: 25px;
            width: 0;
            height: 0;
            border-left: 15px solid white;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

        .timeline-step:nth-child(even) .step-content::before {
            content: '';
            position: absolute;
            left: -15px;
            top: 25px;
            width: 0;
            height: 0;
            border-right: 15px solid white;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

        /* Highlighted steps */
        .timeline-step:nth-child(2) .step-title,
        .timeline-step:nth-child(4) .step-title {
            color: #74b9ff;
        }

        .timeline-step:nth-child(5) .step-title {
            color: #74b9ff;
        }

@media only screen and (max-width: 48em) {
    .custom-timeline-wrapper {
        padding: 0 15px;
        margin: 20px auto;
    }
    
    .timeline-vertical-line {
        left: 30px;
        transform: none;
        width: 2px;
    }
    
    .timeline-step {
        flex-direction: row !important;
        margin-bottom: 40px;
        align-items: flex-start;
    }
    
    .timeline-step:nth-child(odd),
    .timeline-step:nth-child(even) {
        flex-direction: row !important;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 14px;
        position: relative;
        left: auto;
        transform: none;
        margin-right: 20px;
        margin-top: 5px;
        flex-shrink: 0;
    }
    
    .step-content {
        margin: 0;
        max-width: none;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .step-title {
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .step-description {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .step-content::before {
        display: none;
    }
}
.product_meta>span {
	border-top: none !important;
	font-size: 20px;
	font-weight: 700;
}
.sku {
	color: #FF352B;
}
.posted_in {
	display: none !important;
}
.product-title {
	color: #379EFF !important;
	border-top: 1px solid #DFDFDF;
	padding-top: 16px;
	text-align: center;
}
.product-title-container .is-divider{
	display: none !important;
} 
.icon-box-left .icon-box-img+.icon-box-text {
    padding-left: 10px !important;
	padding-top: 4px;
}
.icon-box-text p {
	margin-bottom: 10px !important;
}

		.custom-job-meta {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
            border-left: 4px solid #007cba;
            margin: 50px 0 !important;
            padding: 20px;
            border-radius: 8px;
        }
        
        .custom-job-meta h4 {
            margin-bottom: 15px;
            color: #333;
            font-size: 18px;
        }
        
        .job-requirements {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .requirement-item {
            padding: 10px;
            background: rgba(255,255,255,0.7);
            border-radius: 5px;
        }
        
        .requirement-item strong {
            color: #555;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .job-listing-custom-meta {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #eee;
            font-size: 13px;
            color: #666;
        }
        
        @media (max-width: 768px) {
            .job-requirements {
                grid-template-columns: 1fr;
            }
            
            .custom-job-meta {
                padding: 15px;
            }
        }

.h-link a{
	color: #FFF;
    font-weight: 700;
}
.h-link a:hover{
	color: #FFF;
    font-weight: 700;
}

.image-fade_in_back .show-on-hover{
	display: none;
}
#menu-item-1270 > a {
    color: #000 !important;
    font-size: .8em !important;
    font-weight: bolder !important;
    text-transform: uppercase !important;
}
.nav-vertical li li.menu-item-has-children .sub-menu .menu-item-object-page>a{
	font-size: 0.75em;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.ft-chatbox-skin1 {
		display: flex;
		bottom: 5px !important;
	}

}