/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*************** ADD CUSTOM CSS HERE.   ***************/
body {
	font-family: "Inter", sans-serif;
}
h1, h2, h3, h4, h5 {
	font-family: "Bebas Neue", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	line-height: inherit;
}
.banner h1, .banner h2, .banner h3, .banner h4, .banner h5 {
	font-family: "Bebas Neue", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	line-height: inherit;
}
.section > .section-content > .row > .col {
	padding-bottom: 0;
}
p {
	margin-bottom: 10px;
}
p:last-child {
	margin-bottom: 0;
}
.header-main .nav>li>a {
	font-size: 19px;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
  	font-style: normal;
}
.header-main .nav-left {
	justify-content: center;
}
.nav-spacing-xlarge>li {
	margin: 0 6px;
}
.form-flat input:not([type=submit]), .form-flat select, .form-flat textarea {
	border: 1px solid var(--primary-color);
	background: transparent;
}
.form-flat .button.icon {
	color: var(--primary-color) !important;
}
strong, b {
	font-weight: bold;
}
.button {
	font-weight: 500;
}
.button.is-outline, input[type=button].is-outline, input[type=reset].is-outline, input[type=submit].is-outline {
	border: 1px solid;
}
.box-text .icon-box-left {
	display: flex;
	align-items: center;
}
.row-5 {
    width: 100% !important;
}
.sub-menu.nav-dropdown .row .col {
	padding-bottom: 0;
}

.request-sample-button {
   /* position: fixed;
    top: 13px;
    right: 0;*/
    background-color: #333333;
    color: #ffffff !important;
    padding: 10px 25px 5px 25px !important;
    text-decoration: none;
    border-radius: 100px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    z-index: 9999;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1);
    line-height: 22px !important;
}
/*.admin-bar .request-sample-button {
	top: 45px;
}

.admin-bar .stuck  .request-sample-button {
	top: 40px;
}*/
body:not(.admin-bar) .stuck .request-sample-button {
	top: 6px;
}

.request-sample-button .main-text {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
	font-family: "Bebas Neue", sans-serif;
	text-align: center;
	display: block;
	width: 100%
}

.request-sample-button .sub-text {
    font-size: 13px;
    color: #fff; /* Màu chữ nhỏ nhạt hơn chút */
	text-align: right;
	display: block;
	width: 100%
}

/* Hiệu ứng khi di chuột vào */
.request-sample-button:hover {
    background-color: #000000;
    transform: translateX(-5px); /* Nhô ra một chút khi hover */
}

.post-item .blog-post-inner {
	display: grid;
}
.post-item .box-text .post-title {
	font-size: 28px;
	text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
	order: 1;
}
.post-item .box-text p.from_the_blog_excerpt {
	font-size: 14px;
	color: #5E5E5E;
	order: 2;
	text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.post-item .box-text .post-meta {
	font-size: 12px;
	color: #787878;
	order: 3;
	margin-top: 10px;
}
.post-item .box-text .post-meta:before {
	content: '\f017';
	font-family: Fontawesome;
	margin-right: 5px;
}
.post-item .box-text .button {
	order: 4;
	width: 88px;
	text-transform: none;
	border-radius: 99px;
	box-shadow: none;
	margin-top: 10px;
	font-size: 14px;
	border: none;
	padding: 0;
}
.post-item .box-text .button span {
	display: flex;
	align-items: center;
}
.post-item .box-text .button span i {
	margin-right: 5px;
	position: relative;
	top: 0;
}
.box-blog-post .is-divider {
	display: none;
}

.tab-home.tabbed-content .nav.nav-simple>li {
	margin-right: 30px;
}
.tab-home.tabbed-content .nav>li>a {
	font-size: 24px;
	font-family: "Bebas Neue", sans-serif;
	color: #000;
	font-weight: normal;
}
.tab-home.tabbed-content .nav>li>a:hover, 
.tab-home.tabbed-content .nav>li.active>a {
	color: var(--primary-color);
}


.footer-wrapper strong,
.footer-wrapper b {
	font-weight: 600;
}
.footer-wrapper ul {
	margin-bottom: 0;
}
.footer-wrapper ul li {
	list-style: none;
	margin-left: 0;
}
.absolute-footer {
	border-top: 1px solid #E8CEBC;
	padding: 15px 0;
}
.copyright-footer {
	text-transform: uppercase;
	font-size: 14px;
}

.ic-custom.icon-box-center .icon-box-img .icon-inner {
	height: 60px;
	display: flex;
	align-items: end;
}

/* Card Container */
.custom-app-card {
    border: 1px solid #d9d9d9;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%; /* Giúp các card cao bằng nhau nếu text dài ngắn khác nhau */
}
/* Container chứa ảnh - cần có overflow: hidden để ảnh không tràn ra ngoài khi phóng to */
.post-item .box-image, 
.custom-app-card .box-image {
    overflow: hidden;
}

/* Trạng thái mặc định của ảnh */
.post-item .box-image img, 
.custom-app-card .box-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease; /* Thời gian chuyển động 0.5 giây */
}

/* Trạng thái khi hover vào card hoặc box-image */
.post-item:hover .box-image img, 
.custom-app-card:hover .box-image img {
    transform: scale(1.1); /* Phóng to lên 110% */
}
/* Phần text bên trong */
.post-item .box-text {
	transition: all .2s;
}
.custom-app-card .box-text {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    transition: all .2s;
}
/*.post-item:hover .box-text,
.custom-app-card:hover .box-text {
	padding-top: 5px !important;
}*/

/* Tiêu đề */
.post-item .post-title,
.custom-app-card .title-product {
	font-size: 28px;
    text-transform: uppercase; /* Chữ in hoa giống ảnh */
    line-height: 1.2;
    margin-bottom: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: all .2s;
    position: relative;
    top: 0;
}

.custom-app-card .title-product a {
    color: #000;
}
.post-item:hover .post-title,
.custom-app-card:hover .title-product, 
.custom-app-card:hover .title-product a {
	color: var(--primary-color);
	top: -10px;
}

/* Đoạn trích dẫn */
.custom-app-card .post-excerpt {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
    margin-bottom: 25px;
    flex-grow: 1; /* Đẩy nút View xuống đáy nếu các card có độ cao bằng nhau */
}

/* Nút View */
.custom-app-card .custom-view-btn {
    background-color: #f47a26; /* Màu cam giống ảnh */
    color: #fff;
    border-radius: 30px; /* Bo góc tròn */
    padding: 0px 30px;
    font-size: 1em;
    font-weight: 600;
    text-transform: none; /* Bỏ in hoa mặc định của nút Flatsome */
    display: inline-block;
    transition: opacity 0.3s;
    margin-bottom: 0;
	margin-top: 0;
	margin-right: 0;
}

.custom-app-card .custom-view-btn:hover {
    opacity: 0.85;
    background-color: #f47a26;
    color: #fff;
}
.line {
	display: block;
	width: 100%;
	height: 1px;
	border-top: 1px solid #ccc;
	margin-bottom: 10px;
}
.related-post h2 {
	font-size: 40px;
}
.resource-center-header .nav-uppercase>li {
	margin: 0 30px;
}
.resource-center-header .nav-uppercase>li>a {
	font-size: 28px;
	font-family: "Bebas Neue", sans-serif;
	font-weight: normal;
	color: #000;
}
.resource-center-header .nav-uppercase>li.active>a {
	color: var(--primary-color);
}

.resource-center-header h1 {
	font-size: 68px;
	margin-bottom: 15px;
}
h1.entry-title {
	font-size: 64px;
	line-height: 65px;
	margin-bottom: 0px;
}
.entry-header .is-divider {
	display: none;
}
.entry-header .entry-meta {
	display: none;
}
.entry-content {
	text-align: justify;
}
.entry-content h2 {
	font-size: 40px;
}

.widget .widget-title {
	font-size: 40px;
	font-weight: normal;
	font-family: "Bebas Neue", sans-serif;
	color: #000;
}
.widget .is-divider {
	width: 100%;
	height: 1px;
	background-color: #B5B5B5;
	max-width: inherit;
	margin-top: 0;
}
.widget_flatsome_related_news_widget .box {
	border: 1px solid #B5B5B5;
}
.widget_flatsome_related_news_widget .box .box-text {
	padding: 15px;
}
.widget_flatsome_related_news_widget .box .box-text .post-title {
	font-size: 28px;
}
.archive .box {
	border: 1px solid #B5B5B5;
}
.archive .box .box-text {
	padding: 15px;
}
.archive .box .box-text .post-title {
	font-size: 28px;
}
.single-application-post .post-item .box {
	border: 1px solid #B5B5B5;
}
.single-application-post .post-item .box .box-text {
	padding: 15px;
}
.single-application-post .post-item .box .box-text .post-title {
	font-size: 28px;
}

.resources-block-section {
	margin-bottom: 50px;
}

.career-category-header {
	padding-top: 80px;
}
.career-table-header {
	font-family: "Bebas Neue", sans-serif;
	font-size: 32px;
	
}
.career-category-header h2,
.career-category-header h1 {
	font-size: 64px;
}
.career-sidebar ul {
	margin-bottom: 0;
}
.career-sidebar ul li {
	list-style: none;
	margin-left: 0;
}
.job-content ul li {
	margin-left: 30px;
}
h1.job-title {
	font-size: 36px;
	font-family: Inter, sans-serif;
}
.row-contact > .col {
	padding-bottom: 0;
}

.row-contact .wpcf7-form-control.wpcf7-submit {
	border-radius: 99px;
	font-weight: normal;
  min-width: 150px;
}

.box-badge .box-text {
	bottom: 0;
}
.button.primary:not(.is-outline) {
	border: 1px solid var(--primary-color);
}
.button.primary:not(.is-outline):hover {
	background-color: #fff;
	color: var(--primary-color);
	box-shadow: none;
}
.ic-custom:hover a,
.ic-custom:hover h3 {
	color: var(--primary-color);
}

.box-ab .box-text {
    background-image: linear-gradient(to bottom, #ffffff00, #ffffffa1, #fff);
    background-color: transparent;
    padding-top: 45px;
    transition: all .2s;
    height: 180px;
}
.box-ab .box-text:before {
	content: '';
	position: absolute;
	width: 6px;
	height: 72px;
	background-color: #F37B28;
	bottom: 25px;
	left: 0;
}
.box-ab:hover .box-text {
	background-image: linear-gradient(to bottom, #00000080, #00000080, #00000080);
	height: 100%;
	background-color: transparent !important;
}
.box-ab:hover .box-text:before {
	display: none;
}
.box-ab .box-text .txt-hidden {
	visibility: hidden;
    transition: opacity 0.3s;
    height: 0;
    
}
.box-ab .box-text .txt-hidden p {
	font-size: 15px;
}
.box-ab:hover .box-text .txt-hidden {
	visibility: visible;
	height: auto;
}
.row-about {
	position: relative;
}
.row-about .col-7 {
	position: relative;
    z-index: 1;
}
.row-about .col-5 {
	position: absolute;
    right: 3%;
    top: 56%;
    z-index: 2;
    max-width: 55%;
}
.img-leaf {
    position: absolute;
    top: -135px;
    left: 27%;
}
.img-leaf-2 {
    position: absolute;
    top: -90%;
    left: 68%;
}

/* Container chứa các nút, ghim cố định bên phải */
.floating-social-buttons {
    position: fixed;
    right: 20px;               /* Cách lề phải 20px */
    bottom: 20%;                  /* Đẩy xuống giữa màn hình */
    transform: translateY(-50%); /* Căn chuẩn chính giữa theo chiều dọc */
    display: flex;
    flex-direction: column;    /* Xếp các nút theo chiều dọc */
    gap: 15px;                 /* Khoảng cách giữa các nút */
    z-index: 9999;             /* Đảm bảo luôn nằm trên các phần tử khác */
}

/* Thẻ a bọc ngoài */
.floating-social-buttons .social-btn {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease; /* Thời gian chuyển động cho hiệu ứng hover */
}

/* Định dạng thẻ img */
.floating-social-buttons .social-btn img {
    width: 50px;               /* Bạn có thể tùy chỉnh kích thước to/nhỏ tại đây */
    height: auto;
    display: block;
    border-radius: 50%;        /* Bo tròn phòng trường hợp ảnh có viền vuông */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Thêm bóng đổ nhẹ cho đẹp */
}

/* Hiệu ứng zoom in khi hover vào từng nút */
.floating-social-buttons .social-btn:hover {
    transform: scale(1.1);     /* Phóng to lên 110% */
}

.box-spotlight .box-text {
    height: 45%;
    top: 0;
    bottom: 0;
    margin: auto;
    border-left: 5px solid #fff;
    
    /* Thêm transition để chuyển động mượt mà trong 0.4s */
    transition: all 0.4s ease-in-out; 
    
    /* (Lưu ý: Để top/bottom và margin: auto hoạt động căn giữa dọc, 
       class này cần có position: absolute và element cha cần position: relative) */
}

.box-spotlight:hover .box-text {
    height: 100%;
    padding-top: 20%;
    padding-bottom: 20%;
    /* Đổi màu viền trái sang cam khi hover giống ảnh 2 */
    border-left-color: #f37021; /* Bạn có thể thay đổi mã màu cam này cho khớp chuẩn với thiết kế */
}

.box-spotlight .sportlight-title {
	transition: all 0.4s ease-in-out; 
}
.box-spotlight .sportlight-title {
    margin-top: 50px;
    
    /* Thêm transition nếu bạn muốn các phần tử con bên trong cũng di chuyển mượt */
    transition: margin-top 0.4s ease-in-out;
}
.box-spotlight:hover .sportlight-title {
	margin-top: 80%;
}
.btn-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* ==========================================
   MOBILE STYLES (Màn hình dưới 768px)
========================================== */
@media (max-width: 767px) {
    /* 1. Thu nhỏ khoảng cách và font chữ tiêu đề */
    .career-category-header {
        padding-top: 40px; 
    }
    .career-category-header h1 {
        font-size: 36px !important; 
    }
    
    /* 2. Ép các hàng thành dạng cột dọc, căn trái */
    .career-table-row {
        flex-direction: column;
        align-items: flex-start !important; 
        padding: 20px 0 !important;
    }
    
    /* 3. Ép mỗi cột bên trong chiếm 100% chiều ngang */
    .career-table-row > div {
        min-width: 100% !important; 
        text-align: left !important;
        padding: 5px 0 !important;
    }
    
    /* Tăng kích thước tên công việc một chút để dễ bấm */
    .career-table-row > div:first-child a {
        font-size: 1.2em !important;
        display: block;
        margin-bottom: 5px;
    }

    /* 4. Thêm nhãn (label) trước dữ liệu vì phần header đã bị ẩn */
    .career-table-row > div:nth-child(2)::before {
        content: "Employment Type: ";
        font-weight: 600;
        color: #333;
    }
    
    .career-table-row > div:nth-child(3)::before {
        content: "Work Location: ";
        font-weight: 600;
        color: #333;
    }
    
    .career-table-row > div:nth-child(4)::before {
        content: "Posting Date: ";
        font-weight: 600;
        color: #333;
    }
}
@media(min-width: 850px) {
	.row-5 .col {
		max-width: 20%;
		flex-basis: 20%;
	}
	.blog-single > .row > .col.large-9 {
		padding-right: 120px;
	}

	.slider-application .flickity-page-dots {
		width: auto;
	    left: auto;
	    right: 32%;
	    bottom: 70px;
	}
	.slider-application .flickity-prev-next-button.previous {
		left: auto;
	    right: 37%;
	    bottom: 59px;
	    margin: 0;
	    height: auto;
	    top: auto;
	}
	.slider-application .flickity-prev-next-button.next {
		bottom: 59px;
	    top: auto;
	    right: 29.5%;
	}
}
@media only screen and (max-width: 1060px) {
	.nav-spacing-xlarge>li {
		margin: 0 13px;
	}
}
@media only screen and (max-width: 480px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.resource-center-header h1 {
		font-size: 50px;
	}
	.resource-center-header .nav-uppercase>li {
		margin: 0 12px;
	}
	.resource-center-header .nav-uppercase>li>a {
		font-size: 25px;
	}
	h1.entry-title {
	    font-size: 38px;
	    line-height: 45px;
	    margin-bottom: 0px;
	}
	.entry-content h2 {
	    font-size: 30px;
	}
	.resources-block-section {
		margin-bottom: 0;
	}
	.widget .widget-title {
		font-size: 35px;
	}
	.entry-header-text-top {
		padding-bottom: 0;
	}
	.career-category-header h2, .career-category-header h1 {
		font-size: 45px;
	}
	.header-main .nav>li>a {
		font-size: 18px;
	}
	.row-about .col-5 {
		max-width: 100%;
		right: 0;
		position: inherit;
	}
	.post-item .box-text .post-title {
		font-size: 28px;
	}
	.floating-social-buttons {
		right: 5px;
	}
	.mfp-content .nav-sidebar .sub-menu {
        padding: 0 !important;
	}
	.mfp-content .nav-sidebar .sub-menu li {
		margin-left: 0px !important;
		position: relative;
	}
	.mfp-content .nav-sidebar .sub-menu li:before {
	    display: inline-block;
	    font: normal normal normal 14px / 1 FontAwesome;
	    content: "\f054";
        position: absolute;
        top: 10px;
	}
	.mobile-sidebar .row-5 a {
		display: block;
	}
	.mobile-sidebar .row-5 .col {
		padding-bottom: 0;
	}
	.mobile-sidebar .menu-item-has-children li:before {
		display: none !important;
	}
	.colo-mb .ux-menu-link__text {
		color: #fff;
	}
}
/* */
.top-language {
	font-size: 16px;
}
.top-language a{
	font-size: 18px;
	color: #000;
}
.top-language a.active {
	color: #F37B28;
}
/* */
.count-up {
	font-size: 48px;
}
.count-up:after {
	content: "+";
	font-size: 48px;
}
.term-des {
    max-width: 720px;
	margin: 0 auto 30px;
    overflow: hidden;
}

@media only screen and (min-width: 1100px) and (max-width: 1200px)  {
  .header-main .nav>li>a {
    font-size: 19px;
  }
}

@media only screen and (min-width: 667px) and (max-width: 1100px)  {
  .header-main  .show-for-medium {
    display: none;
  }
}

.hidde-mb .icon-angle-down {
	display: none;
}