/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 5.0
*/
/*************** ADD CUSTOM CSS HERE.   ***************/
/* Header Styles - White Background & Margins (Not Sticky) */
#header .header-wrapper{
    padding: 20px
}
#header .header-wrapper.stuck{
    padding: 0;
}
.header-main .nav > li > a{
	display: flex;
	flex-wrap: nowrap
}
#header .header-main {
       background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.header-search.header-search-dropdown{
    flex: 1 0 auto;
    text-align: right;
}
#ux-search-dropdown{
    width: 470px;
    padding: 25px 35px 35px;
	    box-shadow: 0 5px 20px rgba(22, 67, 153, 0.2);
    border-radius: 12px;
	border: none
}
/* Mobile Header Reset */
@media (max-width: 849px) {
    #header .header-main {
        background-color: transparent !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
	.nav-sidebar-ul.children, .nav-sidebar .sub-menu{
		 display: none;
	}
}
/* Ensure sticky header remains default (full width, no extra margins if not desired) */
#header.has-sticky.sticky .header-main {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
}
/* Custom Fonts - Bai Jamjuree */
/* Standardize Font Family Name and Weights */
/* Regular (400) */
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: normal;
    font-weight: 400;
    src: local('Bai Jamjuree Regular'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: italic;
    font-weight: 400;
    src: local('Bai Jamjuree Italic'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-Italic.woff') format('woff');
}
/* Medium (500) */
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: normal;
    font-weight: 500;
    src: local('Bai Jamjuree Medium Regular'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: italic;
    font-weight: 500;
    src: local('Bai Jamjuree Medium Italic'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-MediumItalic.woff') format('woff');
}
/* SemiBold (600) */
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: normal;
    font-weight: 600;
    src: local('Bai Jamjuree SemiBold Regular'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: italic;
    font-weight: 600;
    src: local('Bai Jamjuree SemiBold Italic'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-SemiBoldItalic.woff') format('woff');
}
/* Bold (700) */
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: normal;
    font-weight: 700;
    src: local('Bai Jamjuree Bold'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: italic;
    font-weight: 700;
    src: local('Bai Jamjuree Bold Italic'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-BoldItalic.woff') format('woff');
}
/* Light (300) */
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: normal;
    font-weight: 300;
    src: local('Bai Jamjuree Light Regular'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-Light.woff') format('woff');
}
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: italic;
    font-weight: 300;
    src: local('Bai Jamjuree Light Italic'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-LightItalic.woff') format('woff');
}
/* ExtraLight (200) */
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: normal;
    font-weight: 200;
    src: local('Bai Jamjuree ExtraLight Regular'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: italic;
    font-weight: 200;
    src: local('Bai Jamjuree ExtraLight Italic'), url('assets/fonts/bai-jamjuree-webfont/BaiJamjuree-ExtraLightItalic.woff') format('woff');
}
/* Apply Font Globally */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
input,
textarea,
button,
.nav>li>a {
    font-family: 'Bai Jamjuree', sans-serif;
}
@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
}
/* Header Menu Items */
.header-nav.nav{
	gap: 30px;
}
.header-nav.nav>li>a {
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 30px;
    color: #333333;
    text-transform: uppercase;
    padding: 20px 0;
}
html[lang="en-GB"] .header-language-dropdown__link::after{
	content: "EN";
}
html[lang="zh-CN"] .header-language-dropdown__link::after{
	content: "CN";
}
/* Header Menu Items Hover */
.header-nav.nav>li>a:hover,
.header-nav.nav>li.active>a,
.header-nav.nav>li.current-menu-item>a {
    color: rgb(41, 171, 226);
}
/* Hide Absolute Footer */
.absolute-footer {
    display: none !important;
}
/* Contact Icons List */
.xc-contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.col-inner .xc-contact-list .xc-contact-list__item {
    margin: 0 0 5px 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
}
.xc-contact-list__item:last-child {
    margin-bottom: 0;
}
.xc-contact-list__icon {
    width: 30px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 6px;
    color: #29abe2;
    /* Color icon */
}
.xc-contact-list__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}
.xc-contact-list__content {
    flex: 1;
    width: calc(100% - 30px);
    font-size: 15px;
    /* Match reference */
    line-height: 30px;
    /* Match reference */
}
/* Footer Widget Title - Base Style */
.xc-footer__widget-title {
    margin: 0 0 10px 0;
    padding: 0;
    color: #29abe2;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    line-height: 27px;
    box-sizing: border-box;
}
.xc-footer__widget-title:focus {
    outline: 0;
}
/* Company Name - Kế thừa style từ widget-title */
.xc-footer__company-name {
    /* Nếu cần override gì thì thêm vào đây */
}
@media print {
    .xc-footer__widget-title {
        text-shadow: none !important;
        box-shadow: none !important;
    }
}
/* Suitcase Icon for Career Title */
.xc-footer__career::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2329abe2' d='M128 480h256V80c0-26.5-21.5-48-48-48H176c-26.5 0-48 21.5-48 48v400zm64-384h128v32H192V96zm256 96v320h32c17.7 0 32-14.3 32-32V128c0-17.7-14.3-32-32-32h-32zm-352 0H64c-17.7 0-32 14.3-32 32v256c0 17.7 14.3 32 32 32h32V192z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
.xc-footer__copyright {
    margin: 20px 0 0 0;
    padding: 15px 0;
    text-align: center;
    font-size: 15px;
    /* Updated from 14px to match reference */
    line-height: 25px;
    /* Added matching reference */
    color: #fff;
    /* Updated from #666 to match reference */
}
.xc-footer__copyright-link {
    color: #fff;
    /* Updated to match reference text color */
    text-decoration: none;
    font-weight: bold;
    /* Often bold in copyright credits */
}
.xc-footer__copyright-link:hover {
    text-decoration: underline;
}
/* Main Footer Styling */
.footer-main {
    background-color: #2f3790 !important;
    background-image: url('/wp-content/uploads/ftback.webp');
    /* Use local image path if available, or update */
    background-position: top right;
    background-size: auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
    color: #fff !important;
    /* Added to match reference .vntfooter */
}
.footer-main a {
    color: #fff;
    /* Ensure generic links are white */
}
.footer-main a:hover {
    color: #aaa;
    /* Fallback hover */
}
/* Social Icons - Match reference */
.footer-main .social-icons .icon {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px !important;
    /* Square with slight radius */
    border: none !important;
    width: 35px !important;
    height: 35px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}
.footer-main .social-icons .icon:hover {
    border-radius: 100% !important;
    /* Circular on hover */
    background-color: rgba(255, 255, 255, 0.4) !important;
}
/* Footer Policy Menu */
.xc-footer__policy-menu {
    display: flex !important;
    flex-direction: row !important;
    /* Force row layout overriding stack-col */
    flex-wrap: wrap;
    /* Allow wrap on very small screens if needed, or set nowrap */
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    /* Align start based on mockup, or match requested alignment */
    align-items: center;
}
.xc-footer__policy-menu .menu-item {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    /* Prevent full width */
    margin-bottom: 0 !important;
    /* Remove bottom margin from stack */
}
/* Add separator line before items, except the first one */
.xc-footer__policy-menu .menu-item::before {
    content: '';
    margin: 0 20px;
    width: 1px;
    height: 14px;
    background-color: #fff;
    display: inline-block;
}
.xc-footer__policy-menu .menu-item:first-child::before {
    display: none;
}
/* Hide the old '|' separator if it exists */
.xc-footer__policy-menu .menu-item:not(:last-child)::after {
    display: none;
}
.xc-footer__policy-menu .ux-menu-link__link {
    text-decoration: none;
    color: #fff;
    /* Set link color to white */
    transition: all 0.3s linear;
}
.xc-footer__policy-menu .ux-menu-link__link:hover {
    color: #2f3790;
    /* Set hover color */
}
@media all and (max-width: 767px) {
    .xc-footer__policy-menu {
        justify-content: center;
    }
}
/* Registration Form Styling */
.xc-form-dang-ky {
    width: 100%;
}
.xc-form-dang-ky .ctpons {
    position: relative;
    max-width: 400px;
    /* Optional: limit width */
}
.xc-form-dang-ky input[type="email"] {
    width: 100%;
    height: 55px;
    border: none;
    border-bottom: 1px solid #ffffff;
    padding-right: 40px;
    background-color: transparent;
    font-size: 15px;
    line-height: 25px;
    color: #fff;
    margin-bottom: 0;
    /* Reset default margin */
    box-shadow: none;
}
.xc-form-dang-ky input[type="email"]::placeholder {
    color: #ffffff;
    opacity: 0.5;
}
.xc-form-dang-ky input[type="email"]:focus {
    outline: none !important;
    border-bottom: 1px solid #ffffff;
    /* Maintain border */
}
.xc-form-dang-ky button[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background-color: transparent;
    border: none;
    text-align: right;
    color: #fff;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s linear;
}
.xc-form-dang-ky button[type="submit"]:hover {
    color: #29abe2;
    /* Optional hover color */
}
.xc-form-dang-ky .hidden {
    display: none;
}
/* Remove CF7 default response output or style it */
.xc-form-dang-ky .wpcf7-response-output {
    position: absolute;
    bottom: -30px;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 12px;
    color: #fff;
}
/* Footer Information Links - Match reference */
.footer-main .ux-menu-link__link,
.footer-main .widget_nav_menu ul li a {
    font-size: 15px !important;
    line-height: 25px !important;
    color: #fff !important;
}
.footer-main .ux-menu-link__link:hover,
.footer-main .widget_nav_menu ul li a:hover {
    color: #2f3790 !important;
}
/* XC Information Section (BEM) */
.xc-information {
    color: #fff;
}
.xc-information__header {
    margin-bottom: 20px;
    text-transform: uppercase;
}
.xc-information__company-name {
    font-size: 35px;
    line-height: 50px;
    font-weight: bold;
    color: #fff;
    margin: 0;
}
.xc-information__content {
    font-size: 18px;
    line-height: 26px;
}
.xc-information__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xc-information__contact-item {
    position: relative;
    margin-bottom: 12px;
    padding-left: 35px;
    color: #fff;
}
.xc-information__contact-item a {
    color: #fff;
    text-decoration: none;
}
.xc-information__contact-item a:hover {
    color: #2f3790;
}
.xc-information__contact-item:last-child {
    margin-bottom: 0;
}
/* Icons using Font Awesome Pseudo-elements */
.xc-information__contact-item::before {
    font-family: 'Font Awesome 6 Free';
    /* Updated to FA 6 */
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    width: 20px;
    text-align: center;
}
.xc-information__contact-item--address::before {
    content: "\f3c5";
}
.xc-information__contact-item--phone::before {
    content: "\f879";
}
.xc-information__contact-item--email::before {
    content: "\f0e0";
}
.xc-information__contact-item--website::before {
    content: "\f0ac";
}
.xc-information__contact-item--map::before {
    content: "\f3c5";
}
.xc-information__map-link a {
    font-weight: normal;
}
/* Disable hover hover color change for footer map link and others as requested */
.xc-information__contact-item a:hover {
    color: #fff !important;
    /* Force white on hover */
    text-decoration: none;
    /* Optional: ensure underlining is removed/added as per preference, sticking to no decoration change implies just color lock */
}
/* Explicitly target the footer main to prevent hover color changes globally within it if requested "toàn bộ thẻ a ở footer main" */
.footer-main a:hover {
    color: #fff !important;
}
@media all and (max-width: 991px) {
    .xc-information__header {
        margin-bottom: 10px;
    }
    .xc-information__company-name {
        font-size: 20px;
        line-height: 35px;
    }
    .xc-information__content {
        font-size: 14px;
        line-height: 22px;
    }
}
/* XC Contact Form */
.xc-contact-form__inputs {
    margin-bottom: 20px;
}
.xc-contact-form__grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.xc-contact-form__col {
    padding: 0 10px;
    margin-bottom: 20px;
}
.xc-contact-form__col--half {
    width: 50%;
}
.xc-contact-form__col--full {
    width: 100%;
}
.xc-contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Align button to right */
}
.xc-contact-form__group input {
    width: 100%;
    height: 50px;
    border: none;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 18px;
    font-size: 15px;
    line-height: normal;
    margin-bottom: 0;
    color: #333;
    border: 1px solid #ddd;
}
.xc-contact-form__group textarea {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 15px;
    line-height: 23px;
    resize: none;
    margin-bottom: 0;
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
}
.xc-contact-form__group input::placeholder,
.xc-contact-form__group textarea::placeholder {
    color: #666;
}
.xc-contact-form__submit {
    height: 45px;
    border-radius: 5px;
    border: none;
    background-color: #29abe2;
    color: #fff;
    min-width: 170px;
    text-align: center;
    padding: 5px 20px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}
.xc-contact-form__submit:hover {
    background-color: #2f3790;
}
@media all and (max-width: 991px) {
    .xc-contact-form__grid {
        margin: 0 -5px;
    }
    .xc-contact-form__col {
        padding: 0 5px;
        margin-bottom: 10px;
    }
    .xc-contact-form__col--half {
        width: 100%;
    }
}
/* XC Information Wrapper Refinement */
.xc-infomation {
    padding: 45px 55px 40px;
    background-color: #2f3790;
    border-radius: 15px;
    margin-bottom: 30px;
    /* Optional spacing */
}
/* Ensure internal columns match reference padding logic if needed, 
   but Flatsome row/col logic usually handles it. 
   Just overlapping some specifics from .tpprojectt */
@media all and (max-width: 991px) {
    .xc-infomation {
        padding: 20px 20px 30px;
    }
}
/* Adjust contact form specific overrides for this dark section if any */
.xc-infomation .xc-contact-form__group input,
.xc-infomation .xc-contact-form__group textarea {
    background-color: #fff;
    /* Ensure white inputs on dark bg */
    border: none;
    /* Reference shows no border for inputs in this section */
}
.xc-infomation .xc-contact-form__submit {
    min-width: 170px;
}
/* Project Filter Menu */
.project-filter-container {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    margin-bottom: 30px;
}
.project-filter-container .nav>li>a {
    font-weight: bold;
    color: #333;
    font-size: 16px;
}
.project-filter-container .nav>li>a:hover {
    color: #29abe2;
}
.project-filter-container .nav-dropdown {
    min-width: 200px;
}
/* Project Item Styling Overrides */
.project-item .box-text-inner .post-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
.project-item .box-text-inner p {
    font-size: 14px;
    color: #666;
}
/* Project Filter Menu Styling */
.project-filter-container {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
}
.project-filter-container .nav>li>a {
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 700;
    color: #333;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 20px;
    transition: color 0.3s;
}
.project-filter-container .nav>li>a:hover,
.project-filter-container .nav>li.active>a {
    color: #29abe2;
}
.project-filter-container .nav-dropdown {
    border-top: 3px solid #29abe2;
    /* Brand accent */
    border-radius: 0 0 5px 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.project-filter-link {
    font-size: 14px;
    padding: 8px 15px;
    display: block;
    color: #555;
}
.project-filter-link:hover {
    background-color: #f9f9f9;
    color: #2f3790;
}
/* Project Item Styling */
.project-item {
    margin-bottom: 40px;
    /* Space between rows */
}
.project-item .box {
    box-shadow: none;
    /* Clean flat look */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    /* Rounded corners for the whole card */
    overflow: hidden;
    /* contain image */
    background: #fff;
    height: 100%;
    /* Equal height */
}
.project-item .box:hover {
    /* Lift effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.project-item .box-image {
    border-radius: 10px 10px 0 0;
    /* Top rounded */
    overflow: hidden;
}
.project-item .box-image img {
    -ms-transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
    -webkit-transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
    -moz-transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
    -o-transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
    transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
}
.project-item .box:hover .box-image img {
    transform: scale(1.05);
    /* Zoom effect */
}
.project-item .box-text {
    padding: 20px 15px;
    background-color: #fff;
}
.project-item .post-title {
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
    transition: color 0.3s;
}
.project-item .box:hover .post-title {
    color: #2f3790;
    /* Dark blue on hover */
}
.project-item .is-divider {
    background-color: #29abe2;
    /* Brand cyan divider */
    height: 2px;
    width: 30px;
    margin: 10px auto;
}
.project-item .from_the_blog_excerpt {
    font-size: 14px;
    color: #777;
    font-style: normal;
    font-weight: 500;
}
/* Project Item Styling (Refined based on demo) */
.itprojecbm .thumb {
    margin-bottom: 20px;
}
.itprojecbm .thumb a {
    border-radius: 15px;
    display: block;
    overflow: hidden;
    position: relative;
}
.vthzoom {
    display: block;
    overflow: hidden;
    position: relative;
}
.vthpadd65 {
    padding-top: 65.56%;
}
.vthfull img {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
}
.vthfull:hover img {
    transform: scale(1.05);
}
.itprojecbm .dstitle {
    margin-bottom: 20px;
    text-transform: uppercase;
}
.itprojecbm .dstitle h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    margin: 0;
}
.itprojecbm .dstitle a {
    color: #333;
    transition: all 0.3s linear;
    text-decoration: none;
}
.itprojecbm .dstitle a:hover {
    color: #2f3790;
}
.itprojecbm .dsinfos ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.itprojecbm .dsinfos li {
    font-size: 13px;
    line-height: 20px;
    padding: 5px 10px;
    color: #1c1c1c;
    font-weight: 500;
    background-color: #f5f5f5;
    border-radius: 5px;
    margin-right: 20px;
    margin-bottom: 5px;
}
/* Mobile Responsive Adjustments */
@media all and (max-width: 991px) {
    .itprojecbm .thumb {
        margin-bottom: 15px;
    }
    .itprojecbm .thumb a {
        border-radius: 10px;
    }
    .itprojecbm .dstitle {
        margin-bottom: 12px;
    }
    .itprojecbm .dstitle h3 {
        font-size: 18px;
    }
}
/* Truncate Title and Location to one line */
.itprojecbm .dstitle h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.itprojecbm .dsinfos li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Ensure it respects container width */
    display: block;
    /* Required for text-overflow to work on li if it was inline/flex child behaving oddly */
}
/* Align Title and Location to Left */
.itprojecbm .dstitle,
.itprojecbm .dsinfos {
    text-align: left;
}
.itprojecbm .dsinfos ul {
    justify-content: flex-start;
    /* Ensure flex items start from left */
}
/* Project Location Styling */
.project-location {
    font-size: 13px;
    line-height: 20px;
    padding: 5px 10px;
    color: #1c1c1c !important;
    font-weight: 500;
    background-color: #f5f5f5;
    border-radius: 5px;
    margin-right: 0;
    /* Adjusted to fit in card */
    margin-bottom: 5px;
    display: inline-block;
    /* Ensure padding works */
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Add Border to Project Items */
.project-item .box {
    border: 1px solid #e1e1e1 !important;
    border-radius: 10px !important;
    overflow: hidden;
}
/* Project Capacity Badge */
.project-capacity-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff0000;
    /* Red background */
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}
/* Refine Project Capacity Badge to match Location style */
.project-capacity-badge {
    background-color: rgba(245, 245, 245, 0.9) !important;
    /* Light gray with slight transparency */
    color: #1c1c1c !important;
    border: 1px solid #ddd;
    font-weight: 500;
    border-radius: 5px;
    /* Keep position */
    top: 10px;
    right: 10px;
}
/* Ego Solar Filter Menu Styling */
.hpprojecmm {
    box-sizing: border-box;
}
.hpprojecmm input[type=checkbox] {
    display: none;
}
.hpprojecmm {
    background-color: #2f3790;
    margin-bottom: 35px;
}
.tpprojecmm {
    position: relative;
    z-index: 2;
}
.tpprojecmm>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tpprojecmm>ul>li {
    margin-right: 50px;
}
.tpprojecmm>ul>li:last-child {
    margin-right: 0;
}
.tpprojecmm>ul>li>.m-sub {
    position: relative;
}
.tpprojecmm>ul>li>.m-sub .button-submenu {
    display: block;
    position: absolute;
    right: 0;
    width: 20px;
    height: 100%;
    top: 0;
    pointer-events: none;
}
.tpprojecmm>ul>li>.m-sub .button-submenu::before {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}
.tpprojecmm>ul>li>.m-sub>a {
    padding: 15px 0;
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 30px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}
.tpprojecmm>ul>li>.m-sub>a {
    padding-right: 20px;
}
.tpprojecmm>ul>li>ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 25px 40px 10px;
    background-color: #eeeeee;
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
}
.tpprojecmm>ul>li:hover>ul {
    opacity: 1;
    visibility: initial;
}
.tpprojecmm>ul>li>ul li {
    width: 25%;
    margin-bottom: 15px;
}
.tpprojecmm>ul>li>ul li a {
    font-size: 15px;
    line-height: 23px;
    color: #333;
    display: block;
}
.tpprojecmm>ul>li>ul li a:hover {
    color: #2f3790;
}
.tpprojecmm>ul>li>ul li a.active {
    color: #2f3790;
    font-weight: bold;
}
.wrapping {
    padding: 0px 30px;
    max-width: 1600px;
    margin: 0 auto;
}
@media all and (max-width: 1350px) {
    .wrapping {
        padding: 0px 20px;
    }
}
@media all and (max-width: 991px) {
    .hpprojecmm {
        padding: 12px 0;
        margin-bottom: 30px;
    }
    .tpprojecmm>ul>li {
        margin-right: 0;
        width: 100%;
        margin-bottom: 5px;
    }
    .tpprojecmm>ul>li>.m-sub {
        position: relative;
    }
    .tpprojecmm>ul>li>.m-sub>a {
        padding: 0;
        padding-right: 40px;
        display: block;
        font-size: 15px;
    }
    .tpprojecmm>ul>li>.m-sub .button-submenu {
        pointer-events: auto;
        width: 40px;
    }
    .tpprojecmm>ul>li>.m-sub .button-submenu::before {
        font-size: 16px;
    }
    .tpprojecmm>ul>li>ul {
        position: relative;
        padding: 5px 20px 5px 10px;
        opacity: 1;
        visibility: initial;
        top: 0;
        background-color: transparent;
        display: none;
        -webkit-transition: all 0s linear;
        -o-transition: all 0s linear;
        transition: all 0s linear;
        width: 100%;
        transform: none;
        left: 0;
    }
    .tpprojecmm>ul>li>ul.open {
        display: block;
    }
    /* Toggle class for mobile */
    .tpprojecmm>ul>li>ul li {
        width: 100%;
        margin-bottom: 10px;
    }
    .tpprojecmm>ul>li>ul li a {
        display: block;
        position: relative;
        padding-left: 12px;
        color: #fff;
    }
    .tpprojecmm>ul>li>ul li a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 3px;
        height: 3px;
        background-color: #fff;
        border-radius: 100%;
    }
}
/* Ensure Submenu attaches directly to bottom of Main Menu */
.tpprojecmm>ul>li {
    position: static !important;
    /* Allow dropdown to be relative to the full-width container */
}
.tpprojecmm {
    position: relative;
    /* Anchor for the absolute submenu */
}
.tpprojecmm>ul>li>ul {
    top: 100%;
    /* Position right at the bottom edge */
    margin-top: 0;
    border-radius: 0 0 5px 5px;
    /* Ensure full width relative to container or viewport depending on design preference, keeping existing 100vw hack or standard */
    /* Resetting slightly to be safe with static parent */
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    max-width: none;
}
/* Mobile: Ensure toggle works */
@media all and (max-width: 991px) {
    .tpprojecmm>ul>li {
        position: relative !important;
    }
    .tpprojecmm>ul>li>ul {
        top: 0;
        position: relative;
        width: 100%;
    }
}
/* Pagination Styling */
.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
    width: 100%;
    background: transparent;
    padding-top: 0;
    margin: 0;
    justify-content: center;
}
.pagination ul {
    padding-bottom: 2px;
    list-style: none;
    margin: 0;
}
.pagination ul li {
    display: inline-block;
    margin: 0 8px 0 0;
}
.pagination ul li span.current,
.pagination ul li a {
    display: table-cell;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    vertical-align: middle;
    color: #666666;
    border: solid 1px rgba(0, 0, 0, .1);
    text-align: center;
    border-radius: 5px;
    background-color: #fff;
    text-decoration: none;
    padding: 7px 0;
}
.pagination ul li a:hover,
.pagination ul li span.current {
    color: #ffffff;
    background-color: #29abe2;
    border-color: #29abe2;
}
.pagination a,
.pagination a:visited {
    color: #666666;
}
/* Flatsome Override */
.page-numbers.nav-pagination {
    display: none;
}
/* Hide default Flatsome pagination if we replace it, or style it if we map typical classes */
/* Mapping standard WP page-numbers to match user request */
.page-numbers li {
    display: inline-block;
    margin: 0 5px;
}
.page-numbers li .page-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: center;
    color: #666;
    font-size: 16px;
    background: #fff;
}
.page-numbers li .page-number.current,
.page-numbers li .page-number:hover {
    background-color: #29abe2;
    color: #fff;
    border-color: #29abe2;
}
/* Project Popup Styling */
#vhpopdetal {
    padding: 22px 32px 30px;
    background-color: #fff;
    border-radius: 10px;
    max-width: 850px;
    width: 100%;
    display: none;
}
#vhpopdetal .fancybox-close-small {
    padding: 0;
    opacity: 1;
    right: 0;
    top: 0;
}
#vhpopdetal .fancybox-close-small svg {
    width: 80%;
}
.hppopdetal .dttitle {
    margin-bottom: 15px;
    color: #2f3790;
    text-transform: uppercase;
}
.hppopdetal .dttitle h2 {
    font-size: 25px;
    line-height: 35px;
    font-weight: bold;
    margin: 0;
}
.tppopdetal .vthumb {
    margin-bottom: 20px;
}
.tppopdetal .dstitle {
    margin-bottom: 12px;
    text-transform: uppercase;
    color: #1c1c1c;
}
.tppopdetal .dstitle h2 {
    font-size: 30px;
    line-height: 40px;
    font-weight: bold;
    margin: 0;
}
.tppopdetal .dsinfos li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: #1c1c1c;
    display: flex;
    font-weight: 600;
    list-style: none;
}
.tppopdetal .dsinfos li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #2f3790;
    border-radius: 100%;
}
.tppopdetal .dsinfos li .tm {
    width: 180px;
    padding-right: 22px;
    position: relative;
}
.tppopdetal .dsinfos li .th {
    width: calc(100% - 180px);
}
.tppopdetal .dsinfos li .tm::before {
    content: ':';
    position: absolute;
    top: 0;
    right: 10px;
}
/* Fancybox Overrides specific to this popup */
.fancybox-content {
    padding: 44px;
    border-radius: 10px;
}
/* Mobile Responsive for Popup */
@media all and (max-width: 767px) {
    #vhpopdetal {
        padding: 15px 20px 25px;
    }
    .hppopdetal .dttitle h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .tppopdetal .dstitle h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .tppopdetal .dsinfos li {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 8px;
        padding-left: 15px;
    }
    .tppopdetal .dsinfos li::before {
        left: 0;
        width: 5px;
        height: 5px;
        top: 10px;
    }
    .tppopdetal .dsinfos li .tm {
        width: 156px;
    }
    .tppopdetal .dsinfos li .th {
        width: calc(100% - 156px);
    }
}
/* Flatsome Lightbox Popup Styling Override */
.white-popup-block {
    max-width: 850px;
    margin: 20px auto;
    background: #FFF;
    padding: 0;
    text-align: left;
    position: relative;
    border-radius: 10px;
}
/* Hide default close button if we have a custom one, or style the mfp-close */
.mfp-close {
    color: #333 !important;
    opacity: 1;
    right: 0px;
    top: 0px;
    width: 44px;
    height: 44px;
    line-height: 44px;
}
/* Lightbox White Background Override */
.lightbox-white {
    background-color: #fff;
    border-radius: 10px;
}
/* Ensure Slider within Lightbox behaves */
.lightbox-content .flickity-viewport {
    min-height: 200px;
}
/* Prevent collapse */
/* Fix Popup Close Button Position */
.lightbox-white .mfp-close {
    right: 0 !important;
    top: 0 !important;
    background: transparent !important;
    width: 44px;
    height: 44px;
    line-height: 44px;
    opacity: 1;
    color: #333;
}
/* Adjust Popup Padding for Mobile */
@media all and (max-width: 767px) {
    .lightbox-white {
        padding: 10px 0 !important;
    }
    .lightbox-white .mfp-close {
        right: -5px !important;
        top: -5px !important;
    }
}
/* Adjust Lightbox Padding */
.lightbox-white {
    padding: 30px !important;
}
.tppopdetal .vthumb {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.lightbox-content .flickity-viewport {
    min-height: 400px;
}
/* Ensure height for slider */
/* === Project Popup Styling (Refined) === */
/* Popup Container */
.lightbox-white {
    padding: 22px 32px 30px !important;
    border-radius: 10px !important;
    max-width: 850px !important;
}
/* Close Button */
.lightbox-white .mfp-close {
    color: #ccc;
    opacity: 0.8;
    top: -44px !important;
    right: -12px !important;
    background: transparent !important;
    font-size: 30px;
    font-weight: 300;
}
.lightbox-white .mfp-close:hover {
    color: #fff;
    opacity: 1;
}
/* Main Title (CHI TI?T D? ÁN) */
.hppopdetal .dttitle h2 {
    color: #2f3790;
    text-transform: uppercase;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 35px;
}
/* Slider Wrapper */
.tppopdetal .vthumb {
    margin-bottom: 20px;
}
/* Project Name Title */
.tppopdetal .dstitle h2 {
    color: #1c1c1c;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 12px;
    line-height: 40px;
}
/* Info List */
.dsinfos ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dsinfos li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 600;
    color: #1c1c1c;
    font-size: 16px;
}
.dsinfos li:last-child {
    margin-bottom: 0;
}
.dsinfos li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #2f3790;
    border-radius: 100%;
}
.dsinfos li .tm {
    width: 180px;
    padding-right: 22px;
    position: relative;
    flex-shrink: 0;
}
.dsinfos li .tm::after {
    content: ':';
    position: absolute;
    top: 0;
    right: 10px;
}
.dsinfos li .th {
    width: calc(100% - 180px);
}
/* === Slider Styling (Match Demo) === */
.xc-project-item-slider .flickity-prev-next-button {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: rgba(122, 124, 124, 0.8) !important;
    border: none;
    opacity: 1;
}
.xc-project-item-slider .flickity-prev-next-button .flickity-button-icon {
    color: #fff !important;
    width: 40%;
    height: 40%;
    left: 30%;
    top: 30%;
}
.xc-project-item-slider .flickity-prev-next-button:hover {
    background: rgba(122, 124, 124, 1) !important;
}
.xc-project-item-slider .flickity-prev-next-button.previous {
    left: 10px;
}
.xc-project-item-slider .flickity-prev-next-button.next {
    right: 10px;
}
.xc-project-item-slider .flickity-page-dots {
    bottom: 15px;
}
.xc-project-item-slider .flickity-page-dots .dot {
    background: #fff;
    opacity: 1;
    width: 11px;
    height: 11px;
    margin: 0 6px;
    border: none;
}
.xc-project-item-slider .flickity-page-dots .dot.is-selected {
    background: #29abe2;
}
h2.xc-section-title {
    font-family: 'Bai Jamjuree', sans-serif;
    font-style: normal;
    font-weight: 700;
    color: rgb(47, 55, 144);
    font-size: 40px;
    line-height: 50px;
    text-transform: uppercase;
}
.section-vi-tri-tuyen-dung {
    background-color: #f9f9f9;
    padding-top: 30px;
    padding-bottom: 30px;
}
/* Blog / Category Styles */
.news-cat-nav li a {
    display: inline-block;
    background-color: #fff;
    color: #000 !important;
    /* Force black text initially */
    padding: 9px 20px;
    /* More padding */
    border-radius: 5px;
    /* Pill shape */
    font-weight: 600;
    text-transform: none;
    /* Not uppercase */
    text-align: center;
    /* Center */
    text-decoration: none;
    transition: all 0.3s ease;
	font-size: 15px;
    line-height: 22px;
    /* Optional: slight shadow for depth on white */
}
.news-cat-nav li a:hover,
.news-cat-nav li.active a {
       color: #fff;
    background-color: #29abe2;
}
/* Ensure Image Scaling on Grid */
.box-blog-post .box-image img {
    height: 250px;
    object-fit: cover;
    width: 100%;
}
/* Blog Post Item Styles */
.box-blog-post {
    background-color: #f6f6f6;
    border-radius: 10px;
    overflow: hidden;
    /* Ensure rounded corners clip headers/images */
    height: 100%;
    /* Equal height */
}
/* Featured Post Style Override */
.featured-post {
    background-color: #f6f6f6;
    /* Apply background to feature wrapper */
    border-radius: 10px;
    padding: 0 !important;
    /* Remove inline padding */
    border-bottom: none !important;
    /* Remove line */
    overflow: hidden;
}
.featured-post .row {
    width: 100%;
    margin: 0;
    max-width: 100%;
}
.featured-post .col {
    padding: 0 !important;
}
.featured-post .box-image {
    height: 100%;
}
.featured-post .box-image img {
    height: 100%;
    object-fit: cover;
    min-height: 350px;
    width: 100%;
    display: block;
    /* Ensure visual balance */
}
/* Ensure padding for text boxes */
.box-blog-post .box-text {
    padding: 20px 25px 30px 25px !important;
}
.featured-post .box-text {
    padding: 40px 50px 40px 50px !important;
}
.section-news-categories {
    background-color: #f7f7f7;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}
.section-news-categories .col {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
}
.news-menu-wrapper {
    padding: 20px 0;
}
/* Category Menu Buttons */
.news-cat-nav {
    gap: 0;
    justify-content: center;
}
.news-cat-nav li {
    margin: 0 ;
}

/* Post Title Typography */
.post-title a {
    font-family: 'Bai Jamjuree', sans-serif;
    font-style: normal;
    font-weight: 700;
    color: #000;
    transition: color 0.3s;
    text-transform: uppercase;
    /* Line Clamp - Max 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Featured Post Title */
.featured-post .post-title a {
    font-size: 25px;
    line-height: 35px;
    height: 70px;
    /* Force 2 lines height */
}
/* Grid Post Title (Smaller) */
.box-blog-post .post-title a {
    font-size: 18px;
    line-height: 26px;
    height: 52px;
    /* Force 2 lines height for alignment */
    margin-bottom: 5px;
}
.post-title a:hover {
    color: rgb(0, 98, 171);
}
.post-date {
    color: #2f3790 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    /* Override op-7 class */
}
/* Single Post Styling */
.single-post .entry-title {
    color: #000;
    line-height: 1.3;
}
/* Ensure related posts slider inherits blog card styles */
.related-posts-section .box-blog-post {
    background-color: #fff;
    /* Reset to white inside grey section? Or keep grey? User asked for grey section. */
    /* If the section is #f6f6f6, and cards are #f6f6f6, they might blend. 
       However, user said 'section 3, background xám nhé'. 
       Usually cards on grey background should be white. 
       Let's check the request. 'Section 3, backgroud xám nhé'. 
       I won't enforce white cards yet, unless it looks bad. 
       But the previous .box-blog-post rule sets background to #f6f6f6. 
       So grey on grey. I will override for related posts to be white for contrast if needed, 
       but for now I will stick to the global rule to match the archive. */
}
/* If the user wants the share icons to look specific */
.social-icons {
    justify-content: flex-end;
    /* Align right for the top share */
}
/* Flickity Slider Adjustments for Related Posts */
.flickity-carousel-slider .col {
    width: 33.33%;
    /* Force 3 columns default */
}
@media (max-width: 850px) {
    .flickity-carousel-slider .col {
        width: 50%;
    }
}
@media (max-width: 550px) {
    .flickity-carousel-slider .col {
        width: 100%;
    }
}
/* Fix Flickity Slider Columns */
.flickity-carousel-slider .col {
    width: 33.33% !important;
    /* Force layout */
    float: left;
    /* Ensure floating behavior if flux fails */
    display: block;
    /* Ensure block */
}
/* Ensure Flickity viewport handles the width correctly */
.flickity-carousel-slider .flickity-viewport {
    width: 100%;
}
/* Certification Gallery Styles */
.xc-chung-nhan .box-image {
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    padding-top: 100%;
    /* Square Aspect Ratio */
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: none;
}
.xc-chung-nhan .box-image .image-cover {
    display: none;
    /* Hide default object-fit cover handling if present from Flatsome */
}
.xc-chung-nhan .box-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 85%;
    max-height: 85%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
}
.xc-chung-nhan .box:hover .box-image img {
    transform: translate(-50%, -50%) scale(1.05);
}
.xc-chung-nhan .box-text {
    padding: 0 !important;
    text-align: center;
}
.xc-chung-nhan .box-text p {
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #333;
    margin: 0;
    transition: color 0.3s linear;
}
.xc-chung-nhan .box:hover .box-text p {
    color: #2f3790;
}
/* Mobile Responsive */
@media all and (max-width: 991px) {
    .xc-chung-nhan .box-image {
        border-radius: 15px;
        margin-bottom: 12px;
    }
    .xc-chung-nhan .box-text p {
        font-size: 14px;
        line-height: 22px;
    }
}
/* Partner Logos (xc-doi-tac) Styles */
.xc-doi-tac .col-inner {
    height: 100%;
}
.xc-doi-tac .box-image {
    padding-top: 100% !important;
    /* Force Square Ratio */
    position: relative;
    background-color: transparent;
    /* Assuming transparent bg for logos, or white if needed */
}
/* Remove default Flatsome hover shadow/zoom if preferred, mimicking the 'hoc' style or clean logo grid */
.xc-doi-tac .box {
    box-shadow: none !important;
}
/* Logo Alignment - Bottom Aligned */
.xc-doi-tac .box-image img {
    position: absolute;
    bottom: 0 !important;
    /* Align to bottom */
    left: 50% !important;
    top: auto !important;
    /* Override center centering */
    transform: translateX(-50%) !important;
    /* Only center horizontally */
    max-width: 80% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin-bottom: 10px;
    /* Slight buffer from very bottom */
}
/* Ensure empty p tags don't cause layout shift */
.xc-doi-tac .box-text {
    display: none;
}
/* Partner Logos (xc-doi-tac) Refined Styles from Reference */
/* 1. Structure: Force Layout to Match Reference grid logic if needed, but Flatsome col works too. 
   The reference uses .itpartnemb a as the container. 
   We will style .xc-doi-tac .box-image as that container. */
.xc-doi-tac .box-image {
    display: block;
    width: 100%;
    padding-top: 50% !important;
    /* Aspect Ratio 2:1 from reference */
    position: relative;
    overflow: hidden;
    background-color: transparent;
    /* Or white if needed */
    margin-bottom: 0;
}
/* 2. Image Positioning: Center Middle with specific sizing */
.xc-doi-tac .box-image img {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    /* Reset previous bottom align */
    transform: translate(-50%, -50%) !important;
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 !important;
    /* Animation */
    transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
}
/* 3. Hover Effect */
.xc-doi-tac .box:hover .box-image img {
    transform: translate(-50%, -50%) scale(1.05) !important;
}
/* 4. Reset previous bottom align overrides if any remained */
.xc-doi-tac .col-inner {
    height: auto;
}
/* Introduction Section Styles (Hoc Reference) */
.home-gioi-thieu {
    background-image: url('https://egosolar.vn/modules/main/images/aaback.png');
    /* If available, or keep section bg */
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100px !important;
}
/* 1. Left Column: Image & Experience Box */
.home-gioi-thieu .box-image {
    padding-left: 129px;
    /* Space for absolute vertical text */
    position: relative;
    overflow: visible !important;
}
.home-gioi-thieu .box-image img {
    border-radius: 5px;
    width: 100%;
    display: block;
}
/* Experience Box (Overlapping) */
.home-gioi-thieu .box-text {
    position: absolute;
    top: 80px;
    left: 0;
    width: 280px;
    height: 280px;
    border: 3px solid #29abe2;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 40px 20px 15px;
    background: transparent;
    /* Assuming transparent overlay */
    z-index: 10;
}
.home-gioi-thieu .home-gioi-thieu__kinh-nghiem {
    color: #29abe2;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
}
.home-gioi-thieu .home-gioi-thieu__kinh-nghiem span {
    color: #fff;
}
/* Counter */
.home-gioi-thieu .box-text .count-up {
    color: #29abe2;
    font-size: 130px;
    line-height: 130px;
    font-weight: bold;
    display: block;
    margin-top: 10px;
}
/* Vertical Text */
.home-gioi-thieu .home-gioi-thieu__kinh-nghiem_vertical {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 129px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    white-space: nowrap;
    color: #000;
}
.home-gioi-thieu .home-gioi-thieu__kinh-nghiem_vertical {
    transform: rotate(-90deg);
    transform-origin: 0% 100%;
    position: absolute;
    left: 120px;
    /* Adjust based on container */
    bottom: 0;
    display: block;
    width: 400px;
    /* Width to hold text before rotate */
    text-align: left;
}
/* 2. Right Column: Text Content */
.home-gioi-thieu p:first-child {
    font-size: 18px;
    color: #29abe2;
    font-weight: bold;
    margin-bottom: 10px;
}
.home-gioi-thieu h2.xc-section-title {
    font-size: 60px;
    line-height: 70px;
    color: #2f3790;
    text-align: left;
    margin-bottom: 25px;
}
.home-gioi-thieu p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 25px;
    text-align: justify;
}
/* Button */
.home-gioi-thieu .button.primary {
    background-color: #29abe2;
    padding: 10px 35px;
    font-size: 15px;
    font-weight: bold;
}
.home-gioi-thieu .button.primary:hover {
    background-color: #2f3790;
}
/* Responsive */
@media (max-width: 991px) {
    .home-gioi-thieu {
        padding-top: 40px !important;
    }
    .home-gioi-thieu .box-image {
        padding-left: 0;
    }
    .home-gioi-thieu .box-text {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        border: none;
        align-items: flex-start;
        padding: 0;
        margin-bottom: 20px;
    }
    .home-gioi-thieu .home-gioi-thieu__kinh-nghiem_vertical {
        display: none;
    }
    .home-gioi-thieu h2.xc-section-title {
        font-size: 40px;
    }
}
/* Introduction Section - Specific Element Styles */
.tpaainfoha {
    position: relative;
    padding-left: 129px;
    /* Space for vertical text */
}
.tpaainfoha .hainfos {
    position: absolute;
    top: 80px;
    left: 0;
    border: 3px solid #29abe2;
    border-radius: 5px;
    min-width: 280px;
    min-height: 280px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 40px 20px 15px;
    background: transparent;
    z-index: 10;
}
.tpaainfoha .hainfos .itext {
    color: #29abe2;
    font-size: 50px;
    line-height: 50px;
}
.tpaainfoha .hainfos .inumb {
    color: #29abe2;
    font-size: 130px;
    line-height: 130px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tpaainfoha .hainfos .itext span,
.tpaainfoha .hainfos .inumb span {
    color: #fff;
    /* Ensure white text if bg is image, but here bg is transparent? Ref says span text is white. */
    /* Wait, the background image is behind. But if the box is transparent, the text overlaps the image? 
       Yes, reference image shows it overlapping. White text on image parts, or blue text? 
       Reference .inumb color is #29abe2. Span is #fff. 
       If the image is dark enough or user handles it. */
}
.tpaainfoha .hathumb {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Below the box */
}
.tpaainfoha .hathumb img {
    width: 100%;
    display: block;
}
.tpaainfoha .hadecss {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 129px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    white-space: nowrap;
}
.tpaainfoha .hadecss .dstext {
    transform: rotate(-90deg);
    transform-origin: 0% 100%;
    position: relative;
    left: 60%;
    /* Adjust centering */
    color: #000;
}
/* Mobile adjustments for Intro */
@media all and (max-width: 767px) {
    .tpaainfoha {
        padding-left: 66px;
    }
    .tpaainfoha .hainfos {
        top: 40px;
        min-width: 144px;
        min-height: 144px;
    }
    .tpaainfoha .hainfos .itext {
        font-size: 26px;
        line-height: 34px;
    }
    .tpaainfoha .hainfos .inumb {
        font-size: 68px;
        line-height: 68px;
    }
    .tpaainfoha .hadecss {
        width: 66px;
        font-size: 12px;
        line-height: 20px;
    }
}
/* Introduction Section - BEM Styles */
.home-gioi-thieu__left-col {
    position: relative;
    padding-left: 129px;
    /* Space for vertical text */
}
/* Experience Box (Overlapping) */
.home-gioi-thieu__experience-box {
    position: absolute;
    top: 80px;
    left: 0;
    border: 3px solid #29abe2;
    border-radius: 5px;
    min-width: 280px;
    min-height: 280px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 40px 20px 15px;
    background: transparent;
    z-index: 10;
}
.home-gioi-thieu__experience-text {
    color: #29abe2;
    font-size: 50px;
    line-height: 50px;
}
.home-gioi-thieu__experience-text span {
    color: #fff;
}
.home-gioi-thieu__experience-number {
    color: #29abe2;
    font-size: 130px;
    line-height: 130px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.home-gioi-thieu__experience-number span {
    color: #fff;
}
/* Image Wrapper */
.home-gioi-thieu__image-wrapper {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Below the box */
}
.home-gioi-thieu__image-wrapper img {
    width: 100%;
    display: block;
}
/* Vertical Text */
.home-gioi-thieu__vertical-text-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 129px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    white-space: nowrap;
}
.home-gioi-thieu__vertical-text {
    transform: rotate(-90deg);
    transform-origin: 0% 100%;
    position: relative;
    left: 80px !important;
    /* Adjusted: closer to image but with distinct gap. Previous 'auto' was wrong context. */
    bottom: 0;
    white-space: nowrap;
    color: #000;
}
.home-gioi-thieu__vertical-text-wrapper {
    /* Ensure the wrapper abuts the image */
    width: 120px;
    /* Reduce width slightly to create gap? */
    padding-right: 20px;
    /* Add padding to the right side of the text container */
}
/* Mobile Adjustments for Introduction (BEM) */
@media all and (max-width: 767px) {
    .home-gioi-thieu__left-col {
        padding-left: 66px;
    }
    /* Scale down the overlapped box */
    .home-gioi-thieu__experience-box {
        top: 20px;
        left: 0;
        min-width: 144px;
        min-height: 144px;
        border-width: 2px;
        padding: 10px;
    }
    .home-gioi-thieu__experience-text {
        font-size: 26px;
        line-height: 30px;
    }
    .home-gioi-thieu__experience-number {
        font-size: 60px;
        /* Smaller number */
        line-height: 60px;
        margin-top: 5px;
    }
    /* Adjust Vertical Text Wrapper and Text */
    .home-gioi-thieu__vertical-text-wrapper {
        width: 66px;
        /* Matches padding-left of container */
        padding-right: 0;
        /* Clear desktop padding */
    }
    .home-gioi-thieu__vertical-text {
        font-size: 14px;
        /* Smaller text */
        left: 30px !important;
        /* Adjusted for smaller width */
        bottom: 10px;
    }
    /* Reset Image Height for Mobile to avoid huge gaps */
    .home-gioi-thieu__image-wrapper {
        min-height: auto;
        height: auto;
    }
    .home-gioi-thieu__image-wrapper img {
        min-height: 250px;
        /* Ensure some height properties */
    }
    /* Title Adjustments */
    .home-gioi-thieu__title {
        font-size: 30px;
        line-height: 40px;
    }
}
/* Mobile Reordering and Resizing for Introduction */
@media all and (max-width: 767px) {
    /* 1. Reorder Columns: Text First, Image Second */
    .home-gioi-thieu>.row {
        display: flex;
        flex-direction: column-reverse;
    }
    /* Reset padding for the text column on mobile */
    .home-gioi-thieu .col[padding*='30px'] {
        padding: 0 !important;
        margin-bottom: 30px;
        /* Add space between text and image below */
    }
    /* 2. Reduce Experience Box Size Further */
    .home-gioi-thieu__experience-box {
        min-width: 100px;
        /* Reduced from 144px */
        min-height: 100px;
        padding: 5px;
        border-width: 2px;
        top: 10px;
    }
    .home-gioi-thieu__experience-text {
        font-size: 14px;
        /* Reduced from 26px */
        line-height: 16px;
    }
    .home-gioi-thieu__experience-number {
        font-size: 35px;
        /* Reduced from 60px */
        line-height: 35px;
        margin-top: 2px;
    }
    /* 3. Reduce Vertical Text Size */
    .home-gioi-thieu__left-col {
        padding-left: 40px;
        /* Reduce container padding */
    }
    .home-gioi-thieu__vertical-text-wrapper {
        width: 40px;
        /* Match container padding */
    }
    .home-gioi-thieu__vertical-text {
        font-size: 11px;
        /* Reduced font size */
        left: 15px !important;
        /* Adjust position */
        bottom: 5px;
    }
}
/* Reputation (Uy tin) Section - BEM Styles */
/* Section Background */
.home-uy-tin {
    position: relative;
    padding: 50px 0 60px;
    z-index: 1;
}
/* Pseudo element for background image to allow non-repeating auto size */
.home-uy-tin::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://egosolar.vn/vnt_upload/images/05_2025/bbback.png');
    /* Or local path */
    background-size: auto;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
}
/* Left Column - Headline */
.home-uy-tin__headline {
    color: #2f3790;
    font-size: 36px;
    line-height: 46px;
    font-weight: 600;
    max-width: 460px;
}
/* Center Column - Image */
.home-uy-tin__image-col {
    text-align: center;
}
.home-uy-tin__image {
    max-width: 100%;
    height: auto;
    display: inline-block;
}
/* Right Column - Stats */
.home-uy-tin__stat-item {
    margin-bottom: 30px;
}
.home-uy-tin__stat-item:last-child {
    margin-bottom: 0;
}
.home-uy-tin__stat-number-wrapper {
    position: relative;
    padding-bottom: 35px;
    /* Space for the line */
    display: flex;
    align-items: baseline;
}
/* Stat Number Main Color */
.home-uy-tin__stat-number {
    color: #2f3790;
    font-size: 50px;
    line-height: 50px;
    font-weight: bold;
}
/* Plus Sign Color */
.home-uy-tin__stat-plus {
    color: #29abe2;
    font-size: 35px;
    line-height: 35px;
    font-weight: bold;
    margin-left: 5px;
}
/* Horizontal Line */
.home-uy-tin__stat-number-wrapper::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: #b7b7b7;
}
/* Vertical Tick Mark */
.home-uy-tin__stat-number-wrapper::after {
    content: '';
    position: absolute;
    bottom: 15px;
    /* Starts slightly below the line? Ref says bottom 15px, line button 20px.  */
    left: 0;
    height: 10px;
    width: 1px;
    background-color: #b7b7b7;
}
.home-uy-tin__stat-text {
    font-size: 16px;
    line-height: 24px;
    color: #333;
}
/* Mobile Responsive */
@media all and (max-width: 991px) {
    .home-uy-tin {
        padding: 25px 0 40px;
    }
    .home-uy-tin::before {
        top: -30px;
        background-size: 100%;
        /* Cover on mobile looks better usually, or keep auto */
    }
    .home-uy-tin__headline {
        font-size: 25px;
        line-height: 35px;
        margin-bottom: 20px;
    }
    .home-uy-tin__image-col {
        margin-bottom: 35px;
    }
}
/* Updates for Image and Column in Reputation Section */
.home-uy-tin__image-col {
    text-align: center;
}
/* Target the [ux_image] generated container or the img tag within it */
.home-uy-tin__image .img-inner img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    /* Center it */
}
/* Ensure no extra padding disrupts alignment */
.home-uy-tin__image {
    display: block;
    width: 100%;
}
/* Adjust Plus Sign Position to Superscript */
.home-uy-tin__stat-plus {
    vertical-align: super;
    font-size: 28px;
    /* Slightly smaller for superscript look */
    line-height: 1;
    position: relative;
    top: -10px;
    /* Adjust visual height */
    margin-left: 2px;
}
/* Product Section (Sản phẩm) - BEM Styles */
.home-san-pham {
    position: relative;
    padding: 55px 0 100px;
    background-image: url('https://egosolar.vn/vnt_upload/images/05_2025/ccback.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}
.home-san-pham::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    opacity: 0.93;
    z-index: -1;
    pointer-events: none;
}
/* Title Styling */
.home-san-pham__title {
    font-size: 60px !important;
    line-height: 70px !important;
    color: #2f3790 !important;
    text-align: center !important;
    margin-bottom: 60px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
}
.home-san-pham__title a {
    color: #2f3790 !important;
    text-decoration: none;
}
/* 2. Staggered Slider Layout (Offset Columns) */
.xc-custom-product-list.row .col:nth-child(odd),
.home-san-pham .row .col:nth-child(odd) {
    margin-top: 120px !important;
}
.home-san-pham .row.xc-custom-product-list{
    width: 990px;
    margin: auto;
}
/* 3. Product Box Styling (Overlay Style) */
.product-small.box.xc-custom-product-list,
.home-san-pham__box {
    position: relative;
    overflow: hidden !important;
    border-radius: 10px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}
.product-small.box.xc-custom-product-list .box-image,
.home-san-pham__box .box-image {
    padding-top: 141.667% !important;
    /* Specific aspect ratio from reference */
    position: relative;
    overflow: hidden !important;
    border-radius: 10px !important;
}
.product-small.box.xc-custom-product-list .box-image img,
.home-san-pham__box .box-image img,
.home-san-pham__box .box-image .img-inner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86) !important;
    border-radius: 10px !important;
}
.product-small.box.xc-custom-product-list:hover .box-image img,
.home-san-pham__box:hover .box-image img {
    transform: scale(1.05) !important;
}
/* 4. Box Text Overlay with Gradient */
.product-small.box.xc-custom-product-list .box-text,
.home-san-pham__box .box-text {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 20px 25px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    text-align: left !important;
    background: transparent !important;
}
.product-small.box.xc-custom-product-list .box-text::before,
.home-san-pham__box .box-text::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%) !important;
    pointer-events: none;
    z-index: -1;
}
.product-small.box.xc-custom-product-list .title-wrapper,
.home-san-pham__box .title-wrapper {
    margin: 0 !important;
}
.product-small.box.xc-custom-product-list .product-title,
.product-small.box.xc-custom-product-list .product-title a,
.home-san-pham__name,
.home-san-pham__name a {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-transform: none !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.product-small.box.xc-custom-product-list .price-wrapper,
.home-san-pham__box .price-wrapper {
    display: none !important;
}

/* 5. Mobile Responsive */
@media all and (max-width: 991px) {
    .home-san-pham {
        padding: 35px 0 50px;
    }
    .home-san-pham__title {
        font-size: 25px !important;
        line-height: 35px !important;
        margin-bottom: 30px !important;
    }
    .xc-custom-product-list.row .col:nth-child(odd),
    .home-san-pham .row .col:nth-child(odd) {
        margin-top: 60px !important;
    }
    .product-small.box.xc-custom-product-list .box-text,
    .home-san-pham__box .box-text {
        padding: 15px !important;
    }
    .product-small.box.xc-custom-product-list .product-title,
    .product-small.box.xc-custom-product-list .product-title a,
    .home-san-pham__name {
        font-size: 13px !important;
        line-height: 21px !important;
    }
}
@media all and (max-width: 550px) {
    .xc-custom-product-list.row .col:nth-child(odd),
    .home-san-pham .row .col:nth-child(odd) {
        margin-top: 20px !important;
    }
}
/* Project Slider Section (Referencing .hpddinfohc) - BEM: cs-slider-project */
.cs-slider-project {
    position: relative;
    padding-top: 0;
    padding-bottom: 80px;
    margin-top: -160px;
    /* Negative margin overlap */
    z-index: 10;
}
/* Blue Background Block on the Right */
.cs-slider-project::before {
    content: '';
    position: absolute;
    top: 160px;
    right: 0;
    width: 60%;
    /* Adjusted from calc(100% + ...) effectively covering right side */
    bottom: 0;
    background-color: #2f3790;
    pointer-events: none;
    z-index: -1;
    /* To mimic calc(100% + 10000px) from reference, just use a large width if layout flows right */
    width: 200vw;
    right: -100vw;
    /* Wait, flatsome container might clip. Better to apply to a full width row bg if possible. 
       Or apply to the section and pseudo element. */
    left: 40%;
    /* Starts 40% from left */
    width: 60%;
    right: 0;
    width: auto;
    left: 20%;
    /* Reference seems to cover most of right side */
}
/* Split Layout */
.cs-slider-project__container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-end;
}
/* Text Content Column (Left/Overlay) */
.cs-slider-project__text-col {
    width: 30%;
    /* Approx .mcol 270px/1440 ~ 18%, adjusted for flatsome grid */
    position: relative;
    z-index: 2;
    padding-right: 20px;
}
/* Slider Column (Right) */
.cs-slider-project__slider-col {
    width: 70%;
    position: relative;
}
/* Text Content Styling */
.cs-slider-project__text-item {
    color: #fff;
    opacity: 0;
    /* Hidden by default, active one shown */
    transform: translateX(100%);
    transition: all 0.3s;
    position: absolute;
    /* Stacked on top of each other */
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}
.cs-slider-project__text-item.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
    /* Takes space */
}
.cs-slider-project__title {
    font-size: 60px;
    line-height: 70px;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.65);
}
.cs-slider-project__title a {
    color: #fff;
}
.cs-slider-project__desc {
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase;
    max-height: 90px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 30px;
}
.cs-slider-project__link a {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}
.cs-slider-project__link a span::before {
    content: '\f105';
    /* FontAwesome angle-right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 10px;
}
/* Slider Image Styling */
.cs-slider-project__slider .col {
    padding: 0 15px;
}
.cs-slider-project__image-box {
    width: 100%;
    padding-top: 65.56%;
    /* Aspect Ratio */
    position: relative;
    overflow: hidden;
}
.cs-slider-project__image-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Navigation - Arrows below */
.cs-slider-project__nav {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    padding-right: 50px;
}
/* Counter */
.cs-slider-project__counter {
    display: flex;
    align-items: center;
    color: #fff;
    margin-left: auto;
    /* Push to right */
    padding-right: 200px;
    /* Space for arrows */
}

/* Mobile Responsive */
@media all and (max-width: 991px) {
    .cs-slider-project {
        margin-top: 0;
        /* Reset negative margin */
        padding-bottom: 40px;
    }
    .cs-slider-project::before {
        top: 0;
        left: 0;
        width: 100%;
    }
    .cs-slider-project__container {
        flex-direction: column-reverse;
    }
    .cs-slider-project__text-col {
        width: 100%;
        display: none;
        /* Hide separate text col on mobile as text moves inside image box? */
    }
    /* On mobile, ref shows text INSIDE the image box (ttxt hidden-md hidden-lg) */
    .cs-slider-project__mobile-text {
        display: block !important;
        /* Show on mobile */
        color: #fff;
        padding: 15px;
    }
    .cs-slider-project__slider-col {
        width: 100%;
    }
    .cs-slider-project__title {
        font-size: 20px;
        line-height: 30px;
    }
}
/* Refined Project Slider CSS - Sync Text and Image */
/* Since we wrapped text and image in [row_inner] inside [ux_slider], they slide together. */
/* Hide the duplicate text column behavior from reference logic (where text slider and image slider were separate but synced). 
   Here we use a single slider containing both col-3 (text) and col-9 (image). */
.cs-slider-project__slider .flickity-viewport {
    overflow: visible !important;
    /* Allow overlapping if needed */
}
/* Adjust text column positioning */
.cs-slider-project__text-col {
    padding-right: 40px;
    display: flex;
    align-items: center;
}
/* Layout adjustments */
.cs-slider-project__item {
    width: 100%;
    /* Align items bottom if needed */
    align-items: flex-end;
}
/* Style overrides for slider arrows to match reference (bottom right) */
.cs-slider-project__slider .flickity-prev-next-button {
    top: auto;
    bottom: -60px;
    background: #fff;
    border: 2px solid #ddd;
    color: #333;
}
.cs-slider-project__slider .flickity-prev-next-button.previous {
    left: auto;
    right: 100px;
}
.cs-slider-project__slider .flickity-prev-next-button.next {
    right: 50px;
}
.cs-slider-project__slider .flickity-prev-next-button:hover {
    background: #29abe2;
    color: #fff;
    border-color: #29abe2;
}
/* Mobile CSS for Project Slider */
@media all and (max-width: 991px) {
    .cs-slider-project__text-col {
        display: none !important;
        /* Hide desktop text col */
    }
    .cs-slider-project__mobile-text {
        padding: 20px;
        background-color: #2f3790;
        color: #fff;
    }
    .cs-slider-project__mobile-text .cs-slider-project__title a {
        color: #fff;
    }
}
/* Dynamic Project Slider (cs-project-slider) Styles */
/* 1. Reset standard grid styles to allow custom side-by-side layout */
.cs-project-slider .box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /* Align bottom as per reference */
    width: 100%;
}
/* 2. Left Column: Text */
.cs-project-slider .box-text {
    width: 30%;
    /* Left part width */
    padding: 0 40px 40px 0;
    /* Spacing */
    order: 1;
    /* First */
    background: transparent;
    pointer-events: none;
    /* Just text layer */
}
/* Allow interaction with links inside */
.cs-project-slider .box-text a {
    pointer-events: auto;
}
/* Text Content Styling */
.cs-project-slider .post-title {
    font-size: 60px;
    line-height: 70px;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.65);
}
.cs-project-slider .post-title a {
    color: #fff;
}
.cs-project-slider .is-divider {
    display: none;
}
/* Hide divider */
.cs-project-slider .from_the_blog_excerpt {
    font-size: 16px;
    line-height: 30px;
    color: #fff;
    margin-bottom: 30px;
    max-height: 90px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* Read More Button Styling */
.cs-project-slider .box-text .button,
.cs-project-slider .box-text .read-more {
    color: #fff;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: none;
}
.cs-project-slider .box-text .button::after {
    content: '\f105';
    /* FontAwesome angle-right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 10px;
}
/* 3. Right Column: Image */
.cs-project-slider .box-image {
    width: 70%;
    /* Right part width */
    order: 2;
    /* Second */
    margin-bottom: 0 !important;
}
.cs-project-slider .box-image img {
    border-radius: 0;
    /* Reset radius constraints for this layout if needed, or keep */
}
/* 4. Navigation Arrows */
.cs-project-slider .flickity-prev-next-button {
    top: auto;
    bottom: -60px;
    background: #fff;
    border: 2px solid #ddd;
    color: #333;
    width: 45px;
    height: 45px;
}
.cs-project-slider .flickity-prev-next-button.previous {
    left: auto;
    right: 100px;
}
.cs-project-slider .flickity-prev-next-button.next {
    right: 50px;
}
.cs-project-slider .flickity-prev-next-button:hover {
    background-color: #29abe2;
    color: #fff;
    border-color: #29abe2;
}
/* 5. Mobile Responsive */
@media all and (max-width: 991px) {
    .cs-project-slider .box {
        flex-direction: column-reverse;
        /* Text below image or overlay? Reference hides desktop text overlay on mobile. */
    }
    .cs-project-slider .box-text {
        width: 100%;
        order: 2;
        padding: 20px;
        background-color: #2f3790;
        /* Blue background for text block on mobile */
        color: #fff;
        position: relative;
        top: -10px;
        /* Slight overlap or connect */
    }
    .cs-project-slider .post-title {
        font-size: 20px;
        line-height: 30px;
        text-shadow: none;
    }
    .cs-project-slider .box-image {
        width: 100%;
        order: 1;
    }
}
/* XC Project Slider Custom Styles */
/* Base Slide Container */
.xc-project-slide {
    position: relative;
    /* Ensure overflow is visible so text can hang outside */
    overflow: visible !important;
}
.xc-project-slide .col-inner {
    overflow: visible !important;
}
/* Image Wrapper */
.xc-project-image {
    width: 100%;
    margin-left: 20%;
    /* Push image to right to make room for overlapping text on left */
    width: 80%;
    /* Remaining width */
    position: relative;
    opacity: 0.5;
    /* Default inactive state */
    transition: opacity 0.3s;
}
.xc-project-image img {
    width: 100%;
    display: block;
    border-radius: 0;
    /* Or 5px if needed */
}
/* Active Slide Image */
.xc-project-slider .is-selected .xc-project-image {
    opacity: 1;
    /* Active state */
}
/* Text Info Box (Desktop) */
.xc-project-info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    /* Stick to left edge of container */
    width: 35%;
    /* Width of text block */
    z-index: 10;
    opacity: 0;
    /* Hidden on inactive slides */
    transition: opacity 0.3s, transform 0.5s;
    pointer-events: none;
    /* Let clicks pass through if covered */
}
.xc-project-info a {
    pointer-events: auto;
}
/* Active Slide Text */
.xc-project-slider .is-selected .xc-project-info {
    opacity: 1;
    /* Optional slide in animation if desired */
}
/* Text Content Styling */
.xc-project-title {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.xc-project-title a {
    color: #fff;
}
.xc-project-desc {
    color: #fff;
    font-size: 15px;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xc-project-more a {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}
/* Counter Styles (from user) */
.slhcrange {
    color: #fff;
    font-family: sans-serif;
    /* Or theme font */
}
/* Ensure Flickity overflow visible for side-by-side view */
.xc-project-slider .flickity-viewport {
    overflow: visible !important;
}
/* Mobile Adjustments */
@media all and (max-width: 991px) {
    .xc-project-image {
        margin-left: 0;
        width: 100%;
        opacity: 1;
        /* Always visible on mobile */
    }
    .xc-project-info {
        display: none;
        /* Hidden on mobile per php show-for-medium logic, but ensure CSS doesn't conflict */
    }
    .xc-project-info-mobile {
        padding: 15px 0;
    }
    .xc-project-info-mobile .xc-project-title {
        font-size: 20px;
        line-height: 30px;
    }
    .xc-project-info-mobile .xc-project-title a {
        color: #fff;
    }
}
/* Project Slider BEM Styles (.home-project-slider) */
.home-project-slider {
    position: relative;
    z-index: 10;
    margin-top: -160px;
    /* Overlap previous section */
    padding-bottom: 80px;
    padding-left: 75px;
    /* Container padding from reference */
    max-width: calc(100% - (((100% - 1440px) / 2)));
    /* Alignment logic from reference or use container width */
    margin-left: auto;
}
/* Blue Background Block */
.home-project-slider::before {
    content: '';
    position: absolute;
    top: 160px;
    /* Start below the overlap */
    right: 0;
    width: 200%;
    /* Cover right side extensively */
    bottom: 0;
    background-color: #2f3790;
    pointer-events: none;
    z-index: -1;
    left: 270px;
    /* Starts after left text col */
}
.home-project-slider__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /* Bottom align sliders */
    align-content: flex-end;
}
/* Columns */
.home-project-slider__text-col {
    width: 270px;
    /* Fixed width per reference */
    flex-shrink: 0;
    padding-right: 20px;
}
.home-project-slider__image-col {
    flex-grow: 1;
    width: calc(100% - 270px);
    overflow: hidden;
    /* Clip images */
    padding-bottom: 20px;
}
/* Text Slider Styles */
.home-project-slider__text-slider {
    width: 100%;
}
.home-project-slider__text-item {
    width: 100%;
    color: #fff;
    padding-bottom: 30px;
}
.home-project-slider__title {
    font-size: 60px;
    line-height: 70px;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.65);
    margin-bottom: 24px;
}
.home-project-slider__title a {
    color: #fff;
}
.home-project-slider__desc {
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase;
    max-height: 90px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 30px;
}
.home-project-slider__more a {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
}
.home-project-slider__more a span::before {
    content: '\f105';
    /* FontAwesome angle-right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 10px;
}
/* Image Slider Styles */
.home-project-slider__image-slider {
    width: 100%;
}
.home-project-slider__image-item {
    width: 50%;
    /* Show 2 items per view roughly, or specific width */
    padding-right: 30px;
    /* Spacing between slides */
}
/* Adjust width to show 1 full and part of next? Ref uses 510px width approx. */
.home-project-slider__thumb {
    position: relative;
    padding-top: 65.56%;
    /* Aspect ratio */
    overflow: hidden;
}
.home-project-slider__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Controls */
.home-project-slider__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-right: 50px;
    /* Spacing from right edge */
}
/* Arrows */
.home-project-slider__arrows button {
    background-color: #29abe2;
    color: #fff;
    border: 2px solid #29abe2;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    cursor: pointer;
    transition: 0.3s;
}
.home-project-slider__arrows button:hover {
    background-color: #fff;
    color: #29abe2;
}
/* Counter */
.home-project-slider__counter {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}
.counter-grid {
    display: flex;
    align-items: center;
}
.col-bar {
    width: 150px;
    margin: 0 15px;
}
.progress-bar-bg {
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
}
.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
    transition: width 0.3s;
}
/* Mobile Responsive */
@media all and (max-width: 991px) {
    .home-project-slider {
        padding-left: 20px;
        margin-top: 0;
        /* Reset negative margin */
        background-color: #2f3790;
        /* Full blue bg on mobile */
    }
    .home-project-slider::before {
        display: none;
        /* Remove desktop bg block */
    }
    .home-project-slider__grid {
        flex-direction: column;
    }
    .home-project-slider__text-col {
        width: 100%;
        display: none;
        /* Hidden on mobile */
    }
    .home-project-slider__image-col {
        width: 100%;
    }
    .home-project-slider__image-item {
        width: 85%;
        /* Carousel peek effect */
        padding-right: 15px;
    }
    .home-project-slider__mobile-text {
        padding: 15px 0;
        color: #fff;
    }
    .home-project-slider__mobile-text .home-project-slider__title {
        font-size: 20px;
        line-height: 30px;
        text-shadow: none;
    }
    .home-project-slider__controls {
        padding-right: 20px;
        justify-content: flex-start;
    }
    .home-project-slider__arrows {
        margin-right: 30px;
    }
}
/* Fix for Project Slider Layout */
.home-project-slider__text-item {
    width: 100%;
}
.home-project-slider__image-item {
    width: 50%;
    /* Adjust to 55% or similar to match reference peek */
    padding-right: 30px;
}
/* Ensure Flickity viewport height is correct */
.flickity-viewport {
    transition: height 0.2s;
}
/* Ensure controls are visible */
.home-project-slider__controls {
    position: relative;
    z-index: 10;
}
/* Mobile override */
@media all and (max-width: 991px) {
    .home-project-slider__image-item {
        width: 85%;
    }
}
/* FOUC Protection: Hide sliders until initialized */
.home-project-slider__image-slider:not(.flickity-enabled),
.home-project-slider__text-slider:not(.flickity-enabled) {
    opacity: 0;
    transition: opacity 0.3s;
}
.home-project-slider__image-slider.flickity-enabled,
.home-project-slider__text-slider.flickity-enabled {
    opacity: 1;
}
/* Ensure Text Slider height adjusts */
.home-project-slider__text-slider .flickity-viewport {
    transition: height 0.3s;
}
/* Image Item Sizing for Peek Effect */
.home-project-slider__image-item {
    width: 60%;
    /* Shows 1 full item and part of next */
    margin-right: 30px;
}
@media all and (max-width: 991px) {
    .home-project-slider__image-item {
        width: 85%;
        margin-right: 15px;
    }
}
/* Project Slider Layout Refinement (Step 670) */
@media all and (min-width: 992px) {
    .home-project-slider__image-item {
        width: 64% !important;
        /* Calibrated for roughly 1.5 items visible */
        margin-right: 30px !important;
    }
    .home-project-slider__text-col {
        width: 270px !important;
        /* Fixed width for title */
        flex-shrink: 0;
    }
    .home-project-slider__image-col {
        width: calc(100% - 270px) !important;
        flex-grow: 1;
    }
}
/* --- BEM Section Du An Styles (Step 696) --- */
/* Scoped Generics */
.section-du-an a {
    text-decoration: none;
    color: #333;
    transition: all 0.3s linear;
}
.section-du-an a:hover {
    color: #2f3790;
}
.section-du-an img {
    max-width: 100%;
    vertical-align: middle;
}
.section-du-an button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s linear;
}
.section-du-an button:focus {
    outline: 0;
}
/* Main Block */
.section-du-an {
    width: 100%;
    position: relative;
}
/* Ensure positioning context */
.section-du-an__container {
    width: 100%;
}
.section-du-an__wrapper {
    max-width: 1440px;
    padding: 0 75px;
    margin: 0 auto;
}
/* Header */
.section-du-an__header {
    padding: 75px 0 80px;
}
.section-du-an__header-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -20px;
}
.section-du-an__header-left {
    width: 47.745%;
    padding: 0 20px;
}
.section-du-an__header-right {
    width: calc(100% - 47.745%);
    padding: 0 20px;
}
.section-du-an__title {
    text-transform: uppercase;
}
.section-du-an__title,
.section-du-an__title a {
    color: #2f3790;
}
.section-du-an__title h2 {
    font-size: 60px;
    line-height: 70px;
    font-weight: bold;
    margin: 0;
}
.section-du-an__description {
    font-size: 18px;
    line-height: 30px;
}
/* Thumbnail */
.section-du-an__thumbnail {
    width: 100%;
}
.section-du-an__thumbnail-inner {
    width: 100%;
}
.section-du-an__thumbnail-bg {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 413px;
}
.section-du-an__thumbnail-bg::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(0deg, rgba(47, 55, 144, 1) 0%, rgba(47, 55, 144, 0) 100%);
    pointer-events: none;
    z-index: 1;
}
.section-du-an__thumbnail-bg img {
    width: 100%;
    opacity: 0;
}
/* Content */
.section-du-an__content {
    max-width: calc(100% - (((100% - 1440px) / 2)));
    margin-left: auto;
    padding-left: 75px;
    position: relative;
    z-index: 1;
    margin-top: -160px;
    padding-bottom: 80px;
}
.section-du-an__content::before {
    content: '';
    position: absolute;
    top: 160px;
    right: 0;
    width: 200%;
    bottom: 0;
    background-color: #2f3790;
    pointer-events: none;
    z-index: -1;
}
/* Increased width to cover right */
.section-du-an__content-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
.section-du-an__text-col {
    width: 270px;
    flex-shrink: 0;
}
.section-du-an__image-col {
    width: calc(100% - 270px);
    overflow: hidden;
    padding-bottom: 20px;
    flex-grow: 1;
}
/* Project Slider */
.project-slider {
    position: relative;
}
.project-slider--text {
    width: calc(100% + 240px);
    position: relative;
    z-index: 2;
    pointer-events: none;
}
/* Text allows click-through except active */
.project-slider--text .project-slider__slide--active {
    pointer-events: auto;
}
/* When using Flickity, we override custom track styles */
.project-slider--image {
    width: 100%;
}
/* Flickity overrides */
.project-slider .flickity-viewport {
    overflow: visible !important;
}
/* We keep slide styling */
.project-slider__slide {
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s linear;
}
.project-slider__slide.is-selected,
.project-slider__slide--active {
    opacity: 1;
}
.project-slider--image .project-slider__slide {
    width: 64%;
    margin-right: 30px;
}
/* Calibrated width */
/* Project Card */
.project-card {
    color: #fff;
}
.project-card a {
    color: #fff;
}
.project-card__title {
    margin-bottom: 24px;
    text-transform: uppercase;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.65);
}
.project-card__title h3 {
    font-size: 60px;
    line-height: 70px;
    font-weight: 600;
    margin: 0;
}
.project-card__description {
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase;
    max-height: 90px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 30px;
}
.project-card__link a {
    display: inline-block;
    font-size: 15px;
    line-height: 25px;
    text-transform: uppercase;
    font-weight: 600;
}
.project-card__link a span {
    display: inline-block;
    position: relative;
    padding-right: 20px;
}
.project-card__link a span::before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
/* Project Image */
/*.project-image { width: 800px; } Unnecessary fixed width, let flickity/flex handle it */
.project-image {
    width: 100%;
}
.project-image__thumb {
    display: block;
    padding-top: 65.56%;
    position: relative;
    overflow: hidden;
}
.project-image__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-image__info {
    display: none;
}
/* Hide on desktop */
/* Slider Arrows */
.project-slider__arrow {
    position: absolute;
    top: auto;
    bottom: -90px;
    background-color: #29abe2;
    border: 2px solid #29abe2;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    z-index: 10;
    color: #fff;
    transition: 0.3s;
}
.project-slider__arrow:hover {
    background-color: #fff;
    color: #29abe2;
}
.project-slider__arrow--prev {
    right: 130px;
}
.project-slider__arrow--next {
    right: 75px;
}
.project-slider__arrow i {
    font-size: 14px;
}
/* Progress Bar */
.project-slider__progress {
    padding-right: 200px;
    margin-top: 60px;
    color: #fff;
}
.project-slider__progress-grid {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 -6.5px;
}
.project-slider__progress-grid>div {
    padding: 0 6.5px;
}
.project-slider__progress-bar {
    position: relative;
    width: 150px;
}
.project-slider__progress-track {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
}
.project-slider__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background-color: #fff;
    z-index: 2;
    transition: width 0.3s linear;
}
/* Responsive Mobile */
@media (max-width: 991px) {
    .section-du-an__header {
        padding: 25px 0 35px;
    }
    .section-du-an__header-left,
    .section-du-an__header-right {
        width: 100%;
        padding: 0;
    }
    .section-du-an__title h2 {
        font-size: 25px;
        line-height: 35px;
        text-align: center;
    }
    .section-du-an__description {
        text-align: justify;
        text-align-last: center;
        font-size: 14px;
        line-height: 24px;
    }
    .section-du-an__content {
        margin-top: 0;
        padding-left: 0;
        background-color: #2f3790;
        margin-left: 0;
        max-width: 100%;
    }
    .section-du-an__content::before {
        display: none;
    }
    .section-du-an__content-grid {
        flex-direction: column-reverse;
    }
    .section-du-an__text-col {
        display: none;
    }
    .section-du-an__image-col {
        width: 100%;
        padding-bottom: 10px;
        padding-left: 15px;
    }
    /* Add padding for peek */
    .project-slider--image .project-slider__slide {
        width: 85%;
        margin-right: 15px;
    }
    .project-image__info {
        display: block;
        color: #fff;
        margin-top: 15px;
    }
    .project-image__info a {
        color: #fff;
    }
    .project-image__info .project-card__title h3 {
        font-size: 20px;
        line-height: 30px;
        text-shadow: none;
    }
    .project-image__info .project-card__description {
        font-size: 14px;
        line-height: 24px;
        max-height: 72px;
        margin-bottom: 10px;
    }
    .project-slider__progress {
        padding-right: 20px;
        margin-top: 30px;
    }
    .project-slider__progress-grid {
        justify-content: flex-start;
    }
    .project-slider__arrow {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }
    /* Arrows overlap on mobile? Reference had different positioning logic. Simplified to side arrows or hide. User's css put them bottom. */
    .project-slider__arrow--prev {
        left: 15px;
        right: auto;
    }
    .project-slider__arrow--next {
        right: 15px;
        left: auto;
    }
}
/* --- Final Refined Home News Section (home-tin-tuc) --- */
.home-tin-tuc {
    padding-top: 60px !important;
    padding-bottom: 100px !important;
    background-color: #f6f6f6 !important;
}
.home-tin-tuc .row {
    max-width: 1400px !important;
    /* Wider for premium look */
}
/* Left Column - Vertical Title Container */
.home-tin-tuc .col.medium-4 {
    position: sticky;
    top: 120px;
    height: fit-content;
    display: flex;
    justify-content: center;
}
.home-tin-tuc h2.title {
    font-size: 55px;
    /* Large premium size */
    line-height: 1;
    font-weight: 800;
    color: #2f3790;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0;
    white-space: nowrap;
    letter-spacing: 2px;
}
.home-tin-tuc h2.title a {
    color: inherit !important;
}
/* Sub-title (Captions) */
.home-tin-tuc p.sub-title {
    font-size: 18px;
    line-height: 1.6;
    color: #333333 !important;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 50px;
    border-bottom: none !important;
    padding-bottom: 0px;
    text-align: right !important;
    /* Aligned right per request */
    letter-spacing: 0.5px;
}
/* Post Item List Smoothing */
.home-tin-tuc .home-blog-vertical {
    margin-top: 0;
}
.home-tin-tuc .post-item {
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
    /* Added for pseudo-elements */
}
/* Odd Items Pseudo Backgrounds */
.home-tin-tuc .post-item:nth-child(odd):before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    background: #FFFFFF;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%);
}
.home-tin-tuc .post-item:nth-child(odd):after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - 100px);
    width: 100px;
    z-index: -1;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
}
/* Even Items Pseudo Backgrounds */
.home-tin-tuc .post-item:nth-child(even):before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: -1;
    background: #FFFFFF;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 100%);
}
.home-tin-tuc .post-item:nth-child(even):after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    width: 100000px;
    z-index: -1;
}
.home-tin-tuc .post-item .col-inner {
    border-bottom: 1px solid rgba(47, 55, 144, 0.1);
    padding: 40px 0 !important;
    background-color: transparent !important;
    transition: background 0.3s;
}
.home-tin-tuc .post-item:hover .col-inner {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
.home-tin-tuc .post-item:last-child .col-inner {
    border-bottom: none;
}
.home-tin-tuc .post-item .box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: 100% !important;
}
/* Flex Order Smoothing */
/* Default: 1:Date, 2:Image, 3:Text */
.home-tin-tuc .post-item .badge.post-date {
    order: 1 !important;
    margin: 0 !important;
}
.home-tin-tuc .post-item .box-image {
    order: 2 !important;
    margin: 0 !important;
}
.home-tin-tuc .post-item .box-text {
    order: 3 !important;
    margin: 0 !important;
}
/* Alternating Flex Order for Desktop Only */
@media (min-width: 850px) {
    /* Odd Items: 1:Date, 2:Text, 3:Image */
    .home-tin-tuc .post-item:nth-child(odd) .box-text {
        order: 2 !important;
        margin: 0 50px !important;
    }
    .home-tin-tuc .post-item:nth-child(odd) .box-image {
        order: 3 !important;
    }
    /* Even Items: 1:Date, 2:Image, 3:Text */
    .home-tin-tuc .post-item:nth-child(even) .box-image {
        order: 2 !important;
        margin: 0 50px !important;
    }
    .home-tin-tuc .post-item:nth-child(even) .box-text {
        order: 3 !important;
    }
}
/* Date Column */
.home-tin-tuc .post-item .badge.post-date {
    position: static !important;
    flex-shrink: 0 !important;
    width: 130px !important;
    /* Adjusted for dd-mm-yyyy width */
    height: auto !important;
    background: transparent !important;
    border: none !important;
    pointer-events: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
}
.home-tin-tuc .post-item .badge-inner {
    background: transparent !important;
    color: #666 !important;
    text-align: left;
    font-size: 16px;
    /* Slightly smaller to fit YYYY */
    font-weight: 600;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    white-space: nowrap !important;
    border: none !important;
    /* Removed border */
}
.home-tin-tuc .post-item .badge-inner br {
    display: none !important;
}
.home-tin-tuc .post-item .post-date-day,
.home-tin-tuc .post-item .post-date-month {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #666 !important;
}
.home-tin-tuc .post-item .post-date-day::after {
    content: '-';
    margin: 0 1px;
}
/* Note: Year usually isn't in Flatsome badge, 
   we can append a static year or use JS if needed, 
   but for now making it look like DD-MM format horizontally. */
/* Image Wrapper */
.home-tin-tuc .post-item .box-image {
    width: 320px !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
    /* Higher z-index to stay above background gradients */
}
/* Content Area */
.home-tin-tuc .post-item .box-text {
    flex-grow: 1 !important;
    padding: 0 !important;
    text-align: left !important;
    z-index: 10 !important;
    /* Higher than gradients */
    min-width: 0;
    /* Fix for line-clamp in flex */
}
.home-tin-tuc .post-item .post-title a {
    font-size: 19px !important;
    line-height: 26px !important;
    height: 78px !important;
    /* 26px * 3 = 78px to show 3 full lines */
    min-height: 78px !important;
    max-height: 78px !important;
    margin-bottom: 5px !important;
    color: #2f3790 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    /* Always uppercase */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: all 0.3s ease;
    word-wrap: break-word;
    position: relative;
    z-index: 20 !important;
    /* Ensure it's above backgrounds */
}
/* Specific hover for title */
.home-tin-tuc .post-item:hover .post-title a {
    color: #29abe2 !important;
}
.home-tin-tuc .post-item .box-text-inner {
    display: block !important;
    position: relative !important;
    z-index: 15 !important;
}
/* "Xem chi tiết" Link - Restored using ::after */
.home-tin-tuc .post-item .box-text-inner::after {
    content: 'Xem chi tiết >' !important;
    /* Added icon character */
    display: inline-block !important;
    margin-top: 15px !important;
    font-size: 14px !important;
    color: #2f3790 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    border: none !important;
    /* No border-bottom per request */
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.home-tin-tuc .post-item:hover .box-text-inner::after {
    color: #29abe2 !important;
}
/* Hide ONLY the specific 'Read More' link of Flatsome */
.home-tin-tuc .post-item .box-text>.box-text-inner>a.plain {
    display: none !important;
}
/* Mobile Responsive Pass */
@media (max-width: 849px) {
    .home-tin-tuc {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        overflow-x: hidden;
    }
    .home-tin-tuc .col.medium-4 {
        position: static;
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
    }
    /* Vertical Title maintained on mobile */
    .home-tin-tuc h2.title {
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
        font-size: 40px !important;
        margin: 0 auto !important;
    }
    .home-tin-tuc p.sub-title {
        text-align: center !important;
        margin-bottom: 30px;
        font-size: 15px !important;
        /* Reduced size on mobile */
    }
    /* Remove backgrounds/gradients on mobile */
    .home-tin-tuc .post-item::before,
    .home-tin-tuc .post-item::after {
        display: none !important;
    }
    /* Post Item stacked with White Background */
    .home-tin-tuc .post-item {
        background-color: #fff !important;
        margin-bottom: 20px !important;
        border-radius: 10px;
        overflow: hidden;
    }
    .home-tin-tuc .post-item .col-inner {
        padding: 20px !important;
        border-bottom: none !important;
    }
    .home-tin-tuc .post-item .box {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Order: Date(1) -> Image(2) -> Title(3) */
    .home-tin-tuc .post-item .badge.post-date {
        order: 1 !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }
    .home-tin-tuc .post-item .box-image {
        order: 2 !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }
    .home-tin-tuc .post-item .box-text {
        order: 3 !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .home-tin-tuc .post-item .post-title a {
        font-size: 15px !important;
        /* Further reduced title size */
        min-height: unset !important;
        max-height: unset !important;
        -webkit-line-clamp: 3 !important;
        text-transform: uppercase !important;
        line-height: 1.4 !important;
    }
    .home-tin-tuc .post-item .box-text-inner::after {
        font-size: 13px !important;
        /* Reduced "Xem thêm" size */
        margin-top: 10px !important;
    }
    .home-tin-tuc .post-item .image-cover {
        padding-top: 56.25% !important;
        /* 16:9 for mobile */
    }
}
/* Final Specific Resets */
.home-tin-tuc .post-item .box-blog-post {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.home-tin-tuc .post-item .is-divider {
    display: none !important;
}
.home-tin-tuc .post-item .from_the_blog_excerpt {
    display: none !important;
}
/* XC Product Category Menu Section */
.xc-category-product {
    background-color: #f7f7f7;
    padding: 15px 0;
}
.xc-category-product__wrapper {
    max-width: 1440px;
    padding: 0 75px;
    margin: 0 auto;
}
.xc-category-product__inner {
    display: flex;
    justify-content: center;
}
.xc-category-product__list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    flex-flow: row nowrap;
}
/* Hide scrollbar but allow scrolling on mobile */
.xc-category-product__list::-webkit-scrollbar {
    height: 5px;
    background-color: #F5F5F5;
}
.xc-category-product__list::-webkit-scrollbar-thumb {
    background-color: #2f3790;
}
.xc-category-product__list li {
    margin-right: 10px;
}
.xc-category-product__list li:last-child {
    margin-right: 0;
}
.xc-category-product__list li a {
    display: block;
    color: #333333;
    padding: 9px 20px;
    font-size: 15px;
    line-height: 22px;
    position: relative;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.xc-category-product__list li a:hover,
.xc-category-product__list li.current-menu-item a,
.xc-category-product__list li.active a {
    color: #fff !important;
    background-color: #29abe2 !important;
}
/* Mobile Styling */
@media (max-width: 991px) {
  .xc-category-product {
    padding: 10px 0 0 !important;
    background: transparent !important;
  }

  .xc-category-product__wrapper {
    padding: 0 10px !important;
  }

  .xc-category-product__inner {
    display: block !important;
  }

  .xc-category-product__mobile-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 12px 42px 12px 16px !important;
    background: #29abe2 !important;
    color: #fff !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    position: relative !important;
    cursor: pointer !important;
  }

  .xc-category-product__mobile-label:before {
    content: "\f107" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
  }

  .xc-category-product__list {
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    flex-direction: column !important;
    gap: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .xc-category-product__list.is-open {
    display: block !important;
  }

  .xc-category-product__list > li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
  }

  .xc-category-product__list > li:last-child {
    margin-bottom: 0 !important;
  }

  .xc-category-product__list > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    line-height: 1.35 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ececec !important;
    border-radius: 4px !important;
    box-shadow: none !important;
  }

  .xc-category-product__list > li.current-menu-item > a,
  .xc-category-product__list > li.current_page_item > a,
  .xc-category-product__list > li > a:hover {
    background: #3a43b7 !important;
    border-color: #3a43b7 !important;
    color: #fff !important;
  }
}
@media (max-width: 1350px) {
  .xc-category-product__wrapper {
    padding: 0 20px;
  }
}
/* ==========================================================================
   PREMIUM PRODUCT LIST (.tpproducbb)
   ========================================================================== */
.tpproducbb {
    padding-bottom: 40px;
    margin-bottom: 50px;
    border-bottom: 1px solid #e0e0e0;
}
.itproducbb {
    margin-bottom: 80px;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
.itproducbb:last-child {
    margin-bottom: 0;
}
.itproducbb .bbgrip {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -45px;
    align-items: center;
}
.itproducbb .bbgrip>div {
    padding: 0 45px;
}
.itproducbb .bbgrip .mcol {
    width: 55%;
}
.itproducbb .bbgrip .hcol {
    width: 45%;
}
/* Zig-zag alternating */
.itproducbb:nth-child(even) .bbgrip .mcol {
    order: 2;
}
.itproducbb .thumb a {
    display: block;
    padding-top: 65%;
    /* Adjusted aspect ratio */
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f7f7f7;
}
.itproducbb .thumb a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.5s ease;
}
.itproducbb:hover .thumb a img {
    transform: translate(-50%, -50%) scale(1.05);
}
.itproducbb .dstitle {
    margin-bottom: 20px;
}
.itproducbb .dstitle h3 {
    font-size: 36px !important;
    line-height: 46px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}
.itproducbb .dstitle h3 a {
    color: #2f3790 !important;
}
.itproducbb .dsconts {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 35px;
    color: #444;
}
.itproducbb .dsconts p {
    margin-bottom: 1em;
}
.itproducbb .dsviews a {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    padding: 15px 45px;
    background-color: #29abe2;
    color: #fff !important;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.itproducbb .dsviews a:hover {
    background-color: #2f3790;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(41, 171, 226, 0.3);
}
.itproducbb .thumb.ivideo a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-image: url("https://egosolar.vn/modules/product/images/hhicon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    pointer-events: none;
    border-radius: 100%;
    animation: pulse_toa 2s infinite;
}
@keyframes pulse_toa {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
/* Mobile Adjustments */
@media (max-width: 991px) {
    .itproducbb {
        margin-bottom: 50px;
    }
    .itproducbb .bbgrip {
        margin: 0 -15px;
    }
    .itproducbb .bbgrip>div {
        padding: 0 15px;
        width: 100% !important;
    }
    .itproducbb .bbgrip .mcol {
        margin-bottom: 25px;
    }
    .itproducbb:nth-child(even) .bbgrip .mcol {
        order: 0;
    }
    .itproducbb .dstitle h3 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .itproducbb .dsconts {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 25px;
    }
}
/* XC Category Information Section */
.xc-category-information {
    padding: 80px 0;
    background-color: #fcfcfc;
}
.xc-category-information__header {
    margin-bottom: 50px;
}
.xc-category-information__body {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -25px;
    align-items: flex-start;
    /* Căn top */
}
.xc-category-information__content,
.xc-category-information__slider {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 25px;
}
.xc-category-information__main-title {
    text-align: center !important;
    text-transform: uppercase !important;
    font-family: "Bai Jamjuree", sans-serif !important;
    font-size: 50px !important;
    line-height: 60px !important;
    font-weight: 700 !important;
    color: #2f3790 !important;
    letter-spacing: 0;
    margin: 0 !important;
}
.xc-category-information__sub-title {
    font-family: "Bai Jamjuree", sans-serif !important;
    font-size: 40px !important;
    line-height: 50px !important;
    font-weight: 600 !important;
    color: #2f3790 !important;
    margin-bottom: 25px !important;
    position: relative;
    padding-bottom: 0 !important;
    text-transform: none !important;
}
.xc-category-information__desc {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}
.xc-category-information__slider .slider {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* Force Slider Buttons and Dots to always show */
.xc-category-information__slider .flickity-prev-next-button {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #2f3790 !important;
}
.xc-category-information__slider .flickity-prev-next-button:hover {
    background-color: #2f3790 !important;
    color: #fff !important;
}
.xc-category-information__slider .flickity-page-dots {
    display: block !important;
    bottom: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.xc-category-information__slider .flickity-page-dots .dot {
    background: #2f3790 !important;
    opacity: 0.3 !important;
}
.xc-category-information__slider .flickity-page-dots .dot.is-selected {
    opacity: 1 !important;
}
.xc-category-information__slider .slider img {
    border-radius: 0 !important;
    /* Slider controls container radius */
}
@media (max-width: 991px) {
    .xc-category-information {
        padding: 50px 0;
    }
    .xc-category-information__main-title {
        font-size: 28px !important;
    }
    .xc-category-information__content,
    .xc-category-information__slider {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .xc-category-information__slider {
        margin-top: 40px;
    }
}
/* Loop Divider Line */
.xc-line {
    padding-bottom: 50px;
    margin-bottom: 80px;
    border-bottom: 1px solid #e0e0e0;
}
/* ==========================================================================
   RE-ENGINEERED BLOG POST LAYOUT (XC-CUSTOM-POST)
   ========================================================================== */
.xc-custom-post .post-item {
    margin-bottom: 115px !important;
    padding: 0 !important;
}
/* 1. Global Box Reset */
.xc-custom-post .post-item .box {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    /* Căn top */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 -45px !important;
    width: auto !important;
    background: none !important;
}
/* 2. Photo Column (mcol) - Order 2 (RIGHT) */
.xc-custom-post .post-item .box-image {
    width: 60.145% !important;
    flex: 0 0 60.145% !important;
    order: 2 !important;
    padding: 0 45px !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}
/* FORCE SQUARE RATIO 1:1 */
.xc-custom-post .post-item .box-image .image-cover {
    padding-top: 80% !important;
    /* 1:1 Square */
    border-radius: 0 !important;
    background-color: transparent !important;
}
.xc-custom-post .post-item .box-image .image-cover img {
    height: 100% !important;
    /* Override 250px conflict */
    width: 100% !important;
    object-fit: cover !important;
}
/* 3. Content Column (hcol) - Order 1 (LEFT) */
.xc-custom-post .post-item .box-text {
    width: 39.855% !important;
    flex: 0 0 39.855% !important;
    order: 1 !important;
    padding: 0 45px !important;
    text-align: left !important;
    background: transparent !important;
    position: static !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
.xc-custom-post .post-item .box-text-inner {
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
    width: 100% !important;
}
/* 4. Title: Full height, no truncation */
.xc-custom-post .post-title {
    margin: 0 0 15px 0 !important;
    width: 100% !important;
}
.xc-custom-post .post-title a {
    display: block !important;
    font-family: "Bai Jamjuree", sans-serif !important;
    font-size: 40px !important;
    line-height: 50px !important;
    font-weight: 600 !important;
    color: #2f3790 !important;
    text-transform: uppercase !important;
    /* Reset any line-clamping */
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
/* 5. Excerpt: Exactly 6 lines */
.xc-custom-post .from_the_blog_excerpt {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 28px !important;
    margin: 0 0 30px 0 !important;
    color: #333 !important;
    /* Limit to exactly 6 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: calc(28px * 6) !important;
    padding: 0 !important;
}
/* 6. Read More Button (dsviews) */
.xc-custom-post .dsviews {
    display: block !important;
    margin: 0 !important;
}
.xc-custom-post .xc-read-more-button {
    display: inline-block !important;
    background-color: #29abe2 !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 25px !important;
    font-weight: bold !important;
    padding: 10px 40px !important;
    border-radius: 5px !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
}
.xc-custom-post .xc-read-more-button:hover {
    background-color: #2f3790 !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* Reset Flatsome Dividers & Badges */
.xc-custom-post .is-divider,
.xc-custom-post .badge,
.xc-custom-post .post-date {
    display: none !important;
}
/* Mobile Responsive */
@media (max-width: 991px) {
    .xc-custom-post .post-item {
        margin-bottom: 50px !important;
    }
    .xc-custom-post .post-item .box {
        margin: 0 !important;
    }
    .xc-custom-post .post-item .box-image {
        width: 100% !important;
        flex: 0 0 100% !important;
        order: 1 !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
    .xc-custom-post .post-item .box-image .image-cover {
        padding-top: 60% !important;
        /* Back to portrait/landscape on mobile if needed */
    }
    .xc-custom-post .post-item .box-text {
        width: 100% !important;
        flex: 0 0 100% !important;
        order: 2 !important;
        padding: 0 !important;
    }
    .xc-custom-post .post-title a {
        font-size: 25px !important;
        line-height: 35px !important;
    }
    .xc-custom-post .from_the_blog_excerpt {
        font-size: 14px !important;
        line-height: 24px !important;
        -webkit-line-clamp: 4 !important;
        line-clamp: 4 !important;
        max-height: calc(24px * 4) !important;
    }
}
/* Đảo thứ tự cột trên Mobile */
@media (max-width: 549px) {
    .row-dao-chieu {
        flex-direction: column-reverse !important;
    }
}
/* ==========================================================================
   FLATSOME MOBILE MENU CUSTOMIZATION
   ========================================================================== */
/* 1. Main Sidebar Container */
.mobile-sidebar {
    width: 100% !important;
    max-width: 420px !important;
    background-color: #fff !important;
}
/* 2. Search Form in Mobile Menu */
.mobile-sidebar .header-search-form {
    padding: 15px 20px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin: 0 !important;
}
.mobile-sidebar .searchform-wrapper .flex-row {
    background-color: #f5f5f5 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}
.mobile-sidebar .search-field {
    height: 50px !important;
    border: none !important;
    background-color: transparent !important;
    padding-left: 15px !important;
    font-size: 15px !important;
}
.mobile-sidebar .ux-search-submit {
    height: 50px !important;
    background-color: transparent !important;
    border: none !important;
    color: #333 !important;
    padding: 0 15px !important;
}
/* 3. Menu List (nav-sidebar) */
.nav-sidebar {
    padding: 0 !important;
    background-color: #ffffff !important;
}
.nav-sidebar>li {
    border-bottom: 1px solid #e0e0e0 !important;
    margin: 0 !important;
}
.nav-sidebar>li>a {
    display: block !important;
    padding: 12px 60px 12px 20px !important;
    font-size: 15px !important;
    line-height: 25px !important;
    font-weight: 700 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    border: none !important;
}
/* 4. Active / Current Menu Item */
.nav-sidebar>li.current-menu-item,
.nav-sidebar>li.active,
.nav-sidebar>li.current-menu-parent {
    background-color: #29abe2 !important;
}
.nav-sidebar>li.current-menu-item>a,
.nav-sidebar>li.active>a,
.nav-sidebar>li.current-menu-parent>a,
.nav-sidebar>li.current-menu-item>.toggle,
.nav-sidebar>li.active>.toggle,
.nav-sidebar>li.current-menu-parent>.toggle {
    color: #fff !important;
}
/* 5. Submenu Toggle (Plus/Minus Icons) */
.nav-sidebar .icon-angle-right,
.nav-sidebar .icon-angle-down {
    /* Icons inherit color from parent toggle */
}
/* Mimic the button-submenu look */
.nav-sidebar li.menu-item-has-children {
    position: relative;
}
.nav-sidebar li.menu-item-has-children>.toggle {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 60px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #006b53;
}
/* White border when active */
.nav-sidebar li.current-menu-item.menu-item-has-children>.toggle,
.nav-sidebar li.active.menu-item-has-children>.toggle,
.nav-sidebar li.current-menu-parent.menu-item-has-children>.toggle {
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
}
/* Remove the pseudo divider as we use toggle's border */
.nav-sidebar li.menu-item-has-children>a::after {
    display: none !important;
}
/* Submenu background */
.nav-sidebar-ul.children {
    background-color: #f3f3f3 !important;
    padding: 10px 0 !important;
}
.nav-sidebar-ul.children li a {
    padding: 8px 60px 8px 20px !important;
    font-size: 14px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    color: #1c1c1c !important;
    text-transform: uppercase !important;
}
.nav-sidebar-ul.children li a:hover {
    color: #29abe2 !important;
}
/* Overlay background */
.mfp-bg {
    background: rgba(0, 0, 0, 0.7) !important;
}
/* Ensure font family is consistent */
.mobile-sidebar a,
.mobile-sidebar span,
.mobile-sidebar button,
.mobile-sidebar input {
    font-family: 'Bai Jamjuree', sans-serif !important;
}
/* ==========================================================================
   VERTICAL HOME BLOG SECTION (.home-blog-vertical)
   ========================================================================== */
.home-blog-vertical .post-item {
    margin-bottom: 10px !important;
    /* Spacing between items */
    padding-bottom: 0 !important;
}
.home-blog-vertical .box {
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    /* Disable item lift/shadow hover */
}
/* Keep Image Zoom Hover */
.home-blog-vertical .box-image {
    overflow: hidden !important;
}
.home-blog-vertical .box-image img {
    transition: transform 0.6s ease !important;
}
.home-blog-vertical .box:hover .box-image img {
    transform: scale(1.1) !important;
}
/* Title Hover Color */
.home-blog-vertical .post-title a {
    transition: color 0.3s ease !important;
    color: #333 !important;
}
.home-blog-vertical .post-title a:hover {
    color: #29abe2 !important;
    /* Brand Blue */
}
/* Hide divider if present */
.home-blog-vertical .is-divider {
    display: none !important;
}
/* ==========================================================================
   CUSTOM MOBILE MENU ICON (HAMBURGER)
   ========================================================================== */
.mobile-nav .nav-icon .icon-menu {
    font-size: 0 !important;
    /* Hide default icon font */
    width: 24px !important;
    height: 2px !important;
    background-color: #29abe2 !important;
    display: inline-block !important;
    position: relative !important;
    vertical-align: middle !important;
    border: none !important;
    transition: all 0.3s ease !important;
}
.mobile-nav .nav-icon .icon-menu::before,
.mobile-nav .nav-icon .icon-menu::after {
    content: "" !important;
    position: absolute !important;
    width: 24px !important;
    height: 2px !important;
    background-color: #29abe2 !important;
    left: 0 !important;
    transition: all 0.3s ease !important;
}
.mobile-nav .nav-icon .icon-menu::before {
    top: -8px !important;
}
.mobile-nav .nav-icon .icon-menu::after {
    top: 8px !important;
}
/* Adjust the link container for proper alignment if needed */
.mobile-nav .nav-icon>a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
}
/* Hover effect on icon */
.mobile-nav .nav-icon:hover .icon-menu,
.mobile-nav .nav-icon:hover .icon-menu::before,
.mobile-nav .nav-icon:hover .icon-menu::after {
    background-color: #2f3790 !important;
}
/* ==========================================================================
   FEATURED PROJECTS SECTION (.xc-project-section)
   ========================================================================== */
.xc-project-section {
    padding: 30px 0 0;
    overflow: visible;
}
.xc-project-title h2 {
    font-size: 60px !important;
    line-height: 70px !important;
    font-weight: 700 !important;
    color: #2f3790 !important;
    text-transform: uppercase !important;
    margin-bottom: 20px;
}
.xc-project-intro {
    font-size: 18px;
    line-height: 28px;
    color: #444;
}
/* Hero Background Section */
.xc-project-hero {
    margin-top: 50px;
    position: relative;
}
.xc-project-hero__bg {
    min-height: 420px;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}
/* Gradient shadow at bottom of image */
.xc-project-hero__bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, rgba(47, 55, 144, 0.9), transparent);
}
/* Sync Slider Body */
.xc-project-sync {
    margin-top: -180px;
    /* Overlap the image */
    position: relative;
    z-index: 10;
    padding-bottom: 100px;
}
/* Blue Box Extension */
.xc-project-sync::before {
    content: '';
    position: absolute;
    top: 180px;
    left: 15%;
    /* Offset to match text slider start */
    right: -2000px;
    /* Infinite right */
    bottom: 0px;
    background-color: #2f3790;
    z-index: -1;
}
.xc-project-sync__wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}
.xc-project-sync__row {
    display: flex;
    align-items: flex-end;
}
/* Left: Text Col */
.xc-project-sync__text-col {
    width: 450px;
    flex: 0 0 450px;
    padding-bottom: 80px;
    z-index: 12;
}
/* Right: Image Col */
.xc-project-sync__image-col {
    flex: 1;
    position: relative;
    max-width: calc(100% - 450px);
}
/* Text Slider Styles */
.xc-text-slide__inner {
    padding-right: 40px;
}
.xc-text-slide__title a {
    font-size: 60px !important;
    line-height: 70px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    text-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.xc-text-slide__excerpt {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    opacity: 0.9;
    margin: 30px 0;
    max-width: 380px;
}
.xc-btn-detail {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 1px;
    border-bottom: 2px solid #fff;
    padding-bottom: 5px;
    text-transform: uppercase;
}
/* Image Slider Styles */
.xc-image-slider {
    overflow: visible !important;
}
.xc-image-slide {
    width: 900px !important;
    /* Huge items */
    margin-right: 40px;
}
.xc-image-slide__thumb {
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 */
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
/* Controls */
.xc-project-sync__controls {
    display: flex;
    align-items: center;
    margin-top: 40px;
}
.xc-project-sync__arrows {
    display: flex;
    gap: 15px;
    margin-right: 40px;
}
.xc-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #29abe2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.xc-arrow:hover {
    background-color: #fff;
    color: #29abe2;
}
/* Progress Bar */
.xc-project-sync__progress {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-weight: 600;
    flex: 1;
}
.xc-progress-bar {
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    flex: 1;
    max-width: 300px;
}
.xc-progress-fill {
    height: 100%;
    background-color: #29abe2;
    width: 0;
    transition: width 0.3s;
}
/* Mobile Responsive */
@media (max-width: 1024px) {
    .xc-project-sync__row {
        flex-direction: column;
        align-items: stretch;
    }
    .xc-project-sync__text-col {
        width: 100%;
        flex: none;
        padding-bottom: 30px;
    }
    .xc-project-sync__image-col {
        max-width: 100%;
    }
    .xc-text-slide__title a {
        font-size: 30px !important;
        line-height: 40px !important;
    }
    .xc-image-slide {
        width: 80% !important;
    }
    .xc-project-sync::before {
        left: 0;
        top: 0;
    }
    .xc-project-sync {
        margin-top: 30px;
    }
}
/* ==========================================================================
   FIXED CONTACT LIST (xc-fixed-contact-list)
   ========================================================================== */
#xc-fixed-contact {
    position: fixed;
    right: 8px;
    bottom: 72px;
    z-index: 9999;
}
#xc-fixed-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xc-fixed-contact__item {
    position: relative;
    margin-bottom: 6px;
}
.xc-fixed-contact__item:last-child {
    margin-bottom: 0;
}
.xc-fixed-contact__toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #29abe2;
    border-radius: 100%;
    color: #fff;
    margin-left: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.xc-fixed-contact__toggle img {
    max-height: 24px;
    max-width: 24px;
}
/* Hover Behavior to show Poptool */
.xc-fixed-contact__item:hover .xc-fixed-contact__poptool {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.xc-fixed-contact__poptool {
    position: absolute;
    right: calc(100% + 15px);
    background-color: #fff;
    width: 250px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    padding: 15px 20px;
    bottom: -5px;
    transform: translateX(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
}
.xc-fixed-contact__poptool::before {
    content: '';
    position: absolute;
    bottom: 18px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #fff;
    left: 100%;
}
/* Phone Poptool Specifics */
.xc-fixed-contact__poptool--phone {
    width: 280px;
    padding: 5px 20px;
}
.xc-fixed-contact__row {
    padding: 12px 0;
    border-top: 1px solid #eee;
}
.xc-fixed-contact__row:first-child {
    border-top: none;
}
.xc-fixed-contact__phone-grid {
    display: flex;
    align-items: center;
}
.xc-fixed-contact__label-col {
    width: 65px;
    font-size: 14px;
    color: #666;
}
.xc-fixed-contact__info-col {
    flex: 1;
}
.xc-fixed-contact__number a {
    display: flex;
    align-items: center;
    color: #333 !important;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
}
.xc-fixed-contact__small-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
.xc-fixed-contact__small-icon img {
    width: 14px;
}
/* Chat Poptool Specifics */
.xc-fixed-contact__chat-row {
    margin-bottom: 10px;
}
.xc-fixed-contact__chat-row:last-child {
    margin-bottom: 0;
}
.xc-fixed-contact__chat-item a {
    display: flex;
    align-items: center;
    color: #333 !important;
    font-size: 15px;
    transition: color 0.3s;
    text-decoration: none !important;
}
.xc-fixed-contact__chat-item a:hover {
    color: #2f3790 !important;
}
.xc-fixed-contact__chat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}
.xc-fixed-contact__chat-icon img {
    max-width: 60%;
}
/* Animation for the main phone icon */
.vhrung {
    animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
}
@keyframes quick-alo-circle-img-anim {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg);
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        transform: rotate(0deg) scale(1) skew(1deg);
    }
    100% {
        transform: rotate(0deg) scale(1) skew(1deg);
    }
}
/* Mobile Adjustments */
@media screen and (max-width: 767px) {
    #xc-fixed-contact {
        right: 5px;
        bottom: 40px;
    }
    .xc-fixed-contact__poptool {
        width: 240px;
    }
    .xc-fixed-contact__phone-grid {
        flex-direction: column;
        align-items: flex-start;
    }
    .xc-fixed-contact__label-col {
        margin-bottom: 5px;
    }
}
/* ==========================================================================
   CORE VALUES SECTION (.stack-gia-tri)
   ========================================================================== */
@keyframes pulse_toab {
    0% {
        box-shadow: 0 0 0 0 rgba(41, 171, 226, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(41, 171, 226, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(41, 171, 226, 0);
    }
}
.stack-gia-tri {
    gap: 30px !important;
}
.box-gia-tri {
    flex: 0 0 auto !important;
    width: auto !important;
}
/* The Circular Icon Container */
.box-gia-tri .icon-box-img {
    width: 160px !important;
    height: 160px !important;
    background-color: #29abe2 !important;
    border-radius: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
    animation: pulse_toab 2s infinite;
    padding: 0 !important;
}
.box-gia-tri .icon-box-img .icon {
    width: 100% !important;
    height: 100% !important;
}
.box-gia-tri .icon-box-img .icon-inner {
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}
.box-gia-tri .icon-box-img img {
    max-width: 60% !important;
    max-height: 60% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
/* Title Styling */
.box-gia-tri .icon-box-text h3 {
    font-size: 24px !important;
    line-height: 36px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-align: center !important;
}
/* Responsive Adjustments */
@media screen and (max-width: 1200px) {
    .box-gia-tri .icon-box-img {
        width: 140px !important;
        height: 140px !important;
    }
    .box-gia-tri .icon-box-text h3 {
        font-size: 20px !important;
        line-height: 30px !important;
    }
}
@media screen and (max-width: 991px) {
    .stack-gia-tri {
        gap: 15px !important;
    }
    /* Display 3 per row roughly on tablets if needed, or just let them wrap/shrink */
    .box-gia-tri .icon-box-img {
        width: 130px !important;
        height: 130px !important;
        margin-bottom: 15px !important;
    }
}
@media screen and (max-width: 767px) {
    .stack-gia-tri {
        flex-wrap: wrap !important;
    }
    .box-gia-tri {
        width: 45% !important;
        /* 2 items per row */
        margin-bottom: 25px !important;
    }
}
/* ==========================================================================
   VALUES TITLE SECTION (.box-gia-tri-cot-loi)
   ========================================================================== */
.box-gia-tri-cot-loi {
    align-items: center !important;
}
/* Equivalent to .xcol */
.box-gia-tri-cot-loi .icon-box-img {
    width: 110px !important;
    max-width: 110px !important;
    margin-bottom: 0 !important;
}
/* Equivalent to .ycol padding */
.box-gia-tri-cot-loi .icon-box-text {
    padding-left: 20px !important;
}
/* Equivalent to .tname */
.box-gia-tri-cot-loi .icon-box-text h3 {
    color: #29abe2 !important;
    font-size: 35px !important;
    line-height: 45px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}
/* Responsive Adjustments */
@media screen and (max-width: 991px) {
    .box-gia-tri-cot-loi .icon-box-img {
        width: 76px !important;
        max-width: 76px !important;
    }
    .box-gia-tri-cot-loi .icon-box-text h3 {
        font-size: 25px !important;
        line-height: 35px !important;
    }
}
/* ==========================================================================
   HISTORY SECTION (.section-lich-su)
   ========================================================================== */
.section-lich-su {
    padding: 50px 0 60px !important;
    background-color: #2c8bcb !important;
    /* Background image from reference */
    background-image: url('https://egosolar.vn/modules/about/images/bbback.png') !important;
    background-position: top left !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
}
.section-lich-su h2 {
    font-size: 50px !important;
    line-height: 60px !important;
    font-weight: bold !important;
    color: #fff !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-bottom: 45px !important;
}
/* 1. Circular Image with Offset Background */
.box-lich-su .box-image {
    width: 100% !important;
    max-width: 280px !important;
    /* Scale for desktop */
    margin: 0 auto 45px !important;
    border-radius: 100% !important;
    border: 3px solid #29abe2 !important;
    position: relative !important;
    overflow: visible !important;
    /* Allow pseudo element to show outside */
}
.box-lich-su .box-image::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: #29abe2;
    opacity: 0.8;
    z-index: 0;
}
/* Flatsome's immediate child div of box-image or img-inner */
.box-lich-su .box-image>div,
.box-lich-su .box-image .img-inner {
    padding-top: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 100% !important;
    z-index: 1 !important;
}
.box-lich-su .box-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* 2. Text Content Styling */
.box-lich-su .box-text {
    color: #fff !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.box-lich-su .box-text h4 {
    font-size: 50px !important;
    line-height: 50px !important;
    font-weight: bold !important;
    color: #fff !important;
    margin-bottom: 25px !important;
    text-align: center;
}
.box-lich-su .box-text p {
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
    font-size: 16px !important;
    line-height: 26px !important;
    text-align: justify;
    color: #fff !important;
}
/* 3. Mobile Responsive Adjustments */
@media screen and (max-width: 991px) {
    .section-lich-su {
        background-image: url("https://egosolar.vn/modules/about/images/bbbackm.png") !important;
    }
    .section-lich-su h2 {
        font-size: 25px !important;
        line-height: 35px !important;
        margin-bottom: 25px !important;
    }
    .box-lich-su .box-image {
        max-width: 200px !important;
        margin-bottom: 35px !important;
    }
    .box-lich-su .box-text h4 {
        font-size: 42px !important;
        line-height: 50px !important;
    }
    .box-lich-su .box-text p {
        font-size: 14px !important;
        line-height: 24px !important;
    }
}
/* ==========================================================================
   PARTNERS SECTION (.section-doi-tac)
   ========================================================================== */
.section-doi-tac {
    padding: 55px 0 75px !important;
    background-color: #2471b7 !important;
    background-image: url('https://egosolar.vn/vnt_upload/images/05_2025/nnback.png') !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
}
.section-doi-tac h2 {
    font-size: 50px !important;
    line-height: 60px !important;
    font-weight: bold !important;
    color: #fff !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}
.section-doi-tac p {
    max-width: 850px !important;
    margin: 0 auto 45px !important;
    text-align: center !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 30px !important;
}
/* ==========================================================================
   2-ROW SLIDER LOGIC (.home-doi-tac__slider)
   ========================================================================== */
/* 1. Adjust Viewport Height for 2 Rows */
.home-doi-tac__slider .flickity-viewport {
    height: 240px !important; /* Ensure enough height for 2 logos + gaps */
    overflow: visible !important; /* Allow controls to show */
}
/* 2. Position items in 2 rows using nth-child trick */
/* Every second item will be shifted down by 1 row height */
.home-doi-tac__slider .ux-logo:nth-child(even) {
    transform: translateY(120px) !important; /* Adjust based on logo height + gap */
}
/* Ensure the logos themselves are styled like the reference */
.home-doi-tac__slider .ux-logo-link {
    background-color: #fff !important;
    border-radius: 10px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100px !important; /* Fixed height for consistency */
    transition: transform 0.3s ease !important;
}
.home-doi-tac__slider .ux-logo-link:hover {
    transform: scale(1.05) !important;
}
.home-doi-tac__slider .ux-logo-image {
    max-width: 85% !important;
    max-height: 85% !important;
    height: auto !important;
}
/* 3. Slider Arrows Styling (Blue Rounded Buttons) */
.home-doi-tac__slider .flickity-prev-next-button {
    background-color: #29abe2 !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    opacity: 1 !important;
}
.home-doi-tac__slider .flickity-prev-next-button svg {
    fill: #fff !important;
    width: 40% !important;
}
/* Outside positioning on large screens */
@media screen and (min-width: 850px) {
    .home-doi-tac__slider .flickity-prev-next-button.previous { left: -60px !important; }
    .home-doi-tac__slider .flickity-prev-next-button.next { right: -60px !important; }
}
/* 4. Mobile Adjustments */
@media screen and (max-width: 991px) {
    .section-doi-tac {
        padding: 30px 0 50px !important;
    }
    
    .section-doi-tac h2 {
        font-size: 25px !important;
        line-height: 35px !important;
    }
    
    .section-doi-tac p {
        font-size: 14px !important;
        line-height: 24px !important;
        text-align: justify !important;
    }
    .home-doi-tac__slider .flickity-viewport {
        height: 180px !important;
    }
    .home-doi-tac__slider .ux-logo:nth-child(even) {
        transform: translateY(90px) !important;
    }
    .home-doi-tac__slider .ux-logo-link {
        height: 80px !important;
        border-radius: 5px !important;
    }
    .home-doi-tac__slider .flickity-prev-next-button {
        width: 35px !important;
        height: 35px !important;
    }
}
/* ==========================================================================
   UPDATED PARTNERS SLIDER (2 ROWS, CORRECT SIZES)
   ========================================================================== */
/* 1. Reset viewport height for 2 rows of larger logos */
.home-doi-tac__slider .flickity-viewport {
    height: 340px !important; /* (150px height * 2) + 20px middle gap + 20px bottom gap */
}
/* 2. Column-wise wrapping logic */
.home-doi-tac__slider .flickity-slider {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
}
/* 3. Logo Item Sizing (Matching reference ~260px width) */
.home-doi-tac__slider .ux-logo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 260px !important;           /* Correct width from reference */
    height: 150px !important;          /* Correct height from reference */
    padding: 0 10px !important;        /* Horizontal gap (total 20px between) */
    margin-bottom: 20px !important;    /* Vertical gap */
    display: flex !important;
    align-items: stretch !important;
}
.home-doi-tac__slider .ux-logo-link {
    background-color: #fff !important;
    border-radius: 10px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 15px !important;          /* Space inside white box */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.home-doi-tac__slider .ux-logo-image {
    max-width: 85% !important;         /* Reference uses max 85% */
    max-height: 85% !important;
    height: auto !important;
    width: auto !important;
}
/* 4. Navigation Buttons (Arrows outside) */
.home-doi-tac__slider .flickity-prev-next-button {
    background-color: #29abe2 !important;
    width: 45px !important;
    height: 45px !important;
    opacity: 1 !important;
    z-index: 10 !important;
}
.home-doi-tac__slider .flickity-prev-next-button svg {
    fill: #fff !important;
}
@media screen and (min-width: 850px) {
    .home-doi-tac__slider .flickity-prev-next-button.previous { left: -65px !important; }
    .home-doi-tac__slider .flickity-prev-next-button.next { right: -65px !important; }
}
/* 5. Mobile Adjustments (Scale down proportionally) */
@media screen and (max-width: 991px) {
    .home-doi-tac__slider .flickity-viewport {
        height: 240px !important;      /* Smaller height on mobile */
    }
    .home-doi-tac__slider .ux-logo {
        width: 180px !important;       /* Smaller width on mobile */
        height: 100px !important;      /* Smaller height on mobile */
        margin-bottom: 15px !important;
        padding: 0 5px !important;
    }
    .home-doi-tac__slider .ux-logo-link {
        padding: 10px !important;
        border-radius: 5px !important;
    }
}
/* ==========================================================================
   PHẦN ĐỐI TÁC - KHÁCH HÀNG: TITLE & DESCRIPTION
   ========================================================================== */
/* 1. Tiêu đề (H2) */
.section-doi-tac h2 {
    font-size: 50px !important;
    line-height: 60px !important;
    font-weight: bold !important;
    color: #fff !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
}
/* 2. Đoạn văn mô tả (P) */
.section-doi-tac .col-inner > p {
    text-align: center !important;
    font-size: 18px !important;
    line-height: 30px !important;
    color: #fff !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 45px !important;
    max-width: 850px !important; /* Giới hạn độ rộng như mẫu */
    display: block !important;
}
/* 3. Responsive cho tiêu đề và mô tả */
@media screen and (max-width: 991px) {
    .section-doi-tac h2 {
        font-size: 25px !important;
        line-height: 35px !important;
        margin-bottom: 10px !important;
    }
    
    .section-doi-tac .col-inner > p {
        font-size: 14px !important;
        line-height: 24px !important;
        text-align: justify !important; /* Mobile căn lề 2 bên theo mẫu */
        text-align-last: center !important; /* Dòng cuối căn giữa */
        margin-bottom: 30px !important;
    }
}
/* ==========================================================================
   PHẦN ĐỐI TÁC - KHÁCH HÀNG: FIX NAVIGATION & SPACING
   ========================================================================== */
/* 1. Đảm bảo phần Slider có khoảng trống hai bên cho nút Next/Prev */
.home-doi-tac__slider {
    padding: 0 70px !important; /* Tạo "lề" cho các nút điều hướng */
    position: relative !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* 2. Ép Viewport ẩn các phần tử dư và nằm giữa 2 nút */
.home-doi-tac__slider .flickity-viewport {
    height: 340px !important; /* (150px x 2) + 20px gap + 20px padding */
    overflow: hidden !important; /* Đảm bảo logo không bị tràn ra ngoài vùng giới hạn */
    width: 100% !important;
}
/* 3. Chỉnh lại nút Next/Previous cho giống mẫu egosolar.vn */
.home-doi-tac__slider .flickity-prev-next-button {
    background-color: #29abe2 !important;
    border: 2px solid #29abe2 !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.home-doi-tac__slider .flickity-prev-next-button:hover {
    background-color: #fff !important;
}
.home-doi-tac__slider .flickity-prev-next-button svg {
    fill: #fff !important;
    width: 40% !important;
    height: 40% !important;
}
.home-doi-tac__slider .flickity-prev-next-button:hover svg {
    fill: #29abe2 !important;
}
/* Định vị nút nằm ở vùng lề 70px đã tạo */
.home-doi-tac__slider .flickity-prev-next-button.previous {
    left: 10px !important;
}
.home-doi-tac__slider .flickity-prev-next-button.next {
    right: 10px !important;
}
/* 4. Cấu hình các logo (items) bên trong */
.home-doi-tac__slider .ux-logo {
    width: 260px !important;
    height: 150px !important;
    padding: 0 10px !important; /* Khoảng cách giữa các logo */
}
/* 5. Điều chỉnh Mobile */
@media screen and (max-width: 849px) {
    .home-doi-tac__slider {
        padding: 0 45px !important; /* Giảm lề nút trên mobile */
    }
    
    .home-doi-tac__slider .flickity-viewport {
        height: 240px !important;
    }
    .home-doi-tac__slider .flickity-prev-next-button {
        width: 35px !important;
        height: 35px !important;
    }
    .home-doi-tac__slider .ux-logo {
        width: 170px !important;
        height: 100px !important;
    }
    
    /* Ẩn hiện tùy chọn nếu muốn mobile tinh gọn hơn */
    .home-doi-tac__slider .flickity-prev-next-button.previous { left: 0px !important; }
    .home-doi-tac__slider .flickity-prev-next-button.next { right: 0px !important; }
}
/* ==========================================================================
   PHẦN GIỚI THIỆU ĐỐI TÁC (.gioi-thieu-doi-tac)
   ========================================================================== */
.gioi-thieu-doi-tac {
    padding: 55px 0 75px !important;
    background-color: #2471b7 !important;
    background-image: url('https://egosolar.vn/vnt_upload/images/05_2025/nnback.png') !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
}
.gioi-thieu-doi-tac h2 {
    font-size: 50px !important;
    line-height: 60px !important;
    font-weight: bold !important;
    color: #fff !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
}
.gioi-thieu-doi-tac .col-inner > p {
    text-align: center !important;
    font-size: 18px !important;
    line-height: 30px !important;
    color: #fff !important;
    margin: 0 auto 45px !important;
    max-width: 850px !important;
    display: block !important;
}
/* ==========================================================================
   SLIDER 2 HÀNG (.gioi-thieu-doi-tac__slider)
   ========================================================================== */
/* 1. Vùng chứa Slider - Tạo không gian cho nút điều hướng */
.gioi-thieu-doi-tac__slider {
    padding: 0 60px !important; /* Đẩy nội dung vào giữa để không chạm nút */
    position: relative !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}
/* 2. Chiều cao Viewport cho 2 hàng logo */
.gioi-thieu-doi-tac__slider .flickity-viewport {
    height: 250px !important; /* (100px chiều cao logo x 2) + 20px gap + space */
    overflow: hidden !important;
}
/* 3. Logic Flexbox để chia 2 hàng */
.gioi-thieu-doi-tac__slider .flickity-slider {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    transform: none !important; /* Tắt transform mặc định để flex wrap hoạt động */
    width: 100% !important;
    height: 100% !important;
}
/* 4. Định dạng Item Logo */
.gioi-thieu-doi-tac__slider .ux-logo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 262px !important;      /* Đúng kích thước 262px theo mẫu */
    height: 100px !important;      /* Chiều cao logo box */
    padding: 0 10px !important;   /* Khoảng cách ngang giữa các logo */
    margin-bottom: 20px !important; /* Khoảng cách dọc giữa 2 hàng */
    display: flex !important;
}
.gioi-thieu-doi-tac__slider .ux-logo-link {
    background-color: #fff !important;
    border-radius: 10px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.gioi-thieu-doi-tac__slider .ux-logo-image {
    max-width: 85% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
}
/* 5. Nút điều hướng (Blue Circle, White Arrow) */
.gioi-thieu-doi-tac__slider .flickity-prev-next-button {
    background-color: #29abe2 !important;
    border: 2px solid #29abe2 !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease !important;
}
.gioi-thieu-doi-tac__slider .flickity-prev-next-button svg {
    fill: #fff !important;
    width: 16px !important;
    height: 16px !important;
}
.gioi-thieu-doi-tac__slider .flickity-prev-next-button:hover {
    background-color: #fff !important;
}
.gioi-thieu-doi-tac__slider .flickity-prev-next-button:hover svg {
    fill: #29abe2 !important;
}
/* Nút nằm hoàn toàn ngoài vùng hiển thị logo */
.gioi-thieu-doi-tac__slider .flickity-prev-next-button.previous {
    left: 0px !important;
}
.gioi-thieu-doi-tac__slider .flickity-prev-next-button.next {
    right: 0px !important;
}
/* 6. Responsive cho Mobile */
@media screen and (max-width: 991px) {
    .gioi-thieu-doi-tac {
        padding: 30px 0 50px !important;
    }
    
    .gioi-thieu-doi-tac h2 {
        font-size: 25px !important;
        line-height: 35px !important;
    }
    
    .gioi-thieu-doi-tac .col-inner > p {
        font-size: 14px !important;
        line-height: 24px !important;
        text-align: justify !important;
        text-align-last: center !important;
        margin-bottom: 30px !important;
    }
    .gioi-thieu-doi-tac__slider {
        padding: 0 40px !important;
    }
    .gioi-thieu-doi-tac__slider .flickity-viewport {
        height: 180px !important;
    }
    .gioi-thieu-doi-tac__slider .ux-logo {
        width: 150px !important;
        height: 75px !important;
        margin-bottom: 10px !important;
        padding: 0 5px !important;
    }
}
header .searchform input.search-field{
    width: 100%;
    height: 50px;
    padding: 0 50px 0 0;
    border: none;
    border-bottom: 1px solid #666666;
    background-color: transparent;
    color: #333333;
    font-size: 16px;
    line-height: 24px;
    box-shadow: none
}
header .searchform .button.icon{
    position: absolute;
    top: 0;
    height: 50px;
    right: 0;
    background-color: transparent;
    border: transparent;
    width: 50px;
    font-size: 16px;
    color: #333333;
}
.header-nav-main.nav.nav-left{
    flex-wrap: nowrap;
}
.post-type-archive-du_an .section-title-center{
    text-align: center;
    font-size: 50px;
    line-height: 60px;
    text-transform: uppercase;
    color: #08509e;
    margin-bottom: 10px;
}
.post-type-archive-du_an .section-title-center b{
    background-color: unset;
    opacity: 1;
    height: auto;
}
.post-type-archive-du_an .section-title-container{
    margin-bottom: 0;
}
.post-type-archive-du_an .box-blog-post .box-image img{
    height: 100%;
}
.post-type-archive-product .shop-page-title{
    display: none;
}
@media only screen and (min-width: 1024px) {
    .hidden-lg{
        display: none;
    }
}
.tabs.wc-tabs.product-tabs{
    display: none
}

/* =========================
   HEADER DESKTOP UNIFIED
   ========================= */

/* Desktop lớn: giống mẫu */
@media (min-width: 1200px) {
  #header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: transparent !important;
  }

  #header .header-wrapper {
    padding: 10px 12px !important; /* sát viền hơn */
    background: transparent !important;
    box-shadow: none !important;
  }

  #header #masthead,
  #header .header-main,
  #header .header-main.show-logo-center {
    background: #fff !important;
    border-radius: 8px !important; /* bo nhẹ, áp mọi trang */
    box-shadow: 0 2px 5px rgba(0,0,0,.05) !important;
    min-height: 84px !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #header .header-inner,
  #header .header-inner.flex-row.container.logo-center,
  #header .header-inner.flex-row.container.logo-center.medium-logo-center {
    min-height: 84px !important;
    height: auto !important;
    padding: 0 26px !important;
    display: flex !important;
    align-items: center !important;
  }

  #header #logo img,
  #header .header-logo,
  #header .header-logo-dark {
    max-height: 46px !important;
    width: auto !important;
    height: auto !important;
  }

  #header .header-nav > li > a,
  #header .nav > li > a,
  #header .nav-top-link {
    line-height: 84px !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  #header .header-search > a,
  #header .nav-icon > a {
    line-height: 84px !important;
    height: auto !important;
  }

  #header .header-bg-container,
  #header .header-bg-image,
  #header .header-bg-color {
    opacity: 0 !important;
    background: transparent !important;
  }

  /* Language */
  #header .header-language-dropdown {
    min-width: auto !important;
  }

  #header .header-language-dropdown > a,
  #header .header-language-dropdown .header-language-dropdown__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    white-space: nowrap !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #header .header-language-dropdown .image-icon,
  #header .header-language-dropdown .icon-image {
    margin: 0 4px 0 0 !important;
  }

  #header .header-language-dropdown .icon-angle-down {
    margin-left: 2px !important;
  }

  /* Dropdown ngôn ngữ */
  #header .header-language-dropdown .nav-dropdown {
    min-width: 190px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  }

  #header .header-language-dropdown .nav-dropdown li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
  }

  /* Sticky: đồng bộ mọi trang */
  #header .header-wrapper.stuck {
    padding: 0 !important;
    background: #fff !important;
  }

  #header .header-wrapper.stuck #masthead,
  #header .header-wrapper.stuck .header-main,
  #header .stuck .header-main,
  #header .stuck #masthead {
    min-height: 70px !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.05) !important;
  }

  #header .header-wrapper.stuck .header-inner,
  #header .header-wrapper.stuck .header-inner.flex-row.container.logo-center,
  #header .header-wrapper.stuck .header-inner.flex-row.container.logo-center.medium-logo-center {
    min-height: 70px !important;
  }

  #header .header-wrapper.stuck .header-nav > li > a,
  #header .header-wrapper.stuck .nav > li > a,
  #header .header-wrapper.stuck .nav-top-link,
  #header .header-wrapper.stuck .header-search > a {
    line-height: 70px !important;
  }

  #header .header-wrapper.stuck #logo img,
  #header .header-wrapper.stuck .header-logo,
  #header .header-wrapper.stuck .header-logo-dark {
    max-height: 40px !important;
  }
}

/* Tablet / màn hình nhỏ desktop:
   không cho menu bị vỡ 2 dòng */
@media (min-width: 850px) and (max-width: 1199px) {
  #header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: transparent !important;
  }

  #header .header-wrapper {
    padding: 8px 8px !important;
    background: transparent !important;
  }

  #header #masthead,
  #header .header-main,
  #header .header-main.show-logo-center {
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.05) !important;
    min-height: 72px !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #header .header-inner,
  #header .header-inner.flex-row.container.logo-center,
  #header .header-inner.flex-row.container.logo-center.medium-logo-center {
    min-height: 72px !important;
    padding: 0 14px !important;
    align-items: center !important;
  }

  #header #logo img,
  #header .header-logo,
  #header .header-logo-dark {
    max-height: 38px !important;
    width: auto !important;
    height: auto !important;
  }

  #header .header-nav > li > a,
  #header .nav > li > a,
  #header .nav-top-link {
    line-height: 72px !important;
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  #header .header-search > a,
  #header .nav-icon > a {
    line-height: 72px !important;
  }

  #header .header-language-dropdown > a,
  #header .header-language-dropdown .header-language-dropdown__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 12px !important;
  }

  #header .header-language-dropdown .image-icon,
  #header .header-language-dropdown .icon-image {
    margin: 0 2px 0 0 !important;
  }

  /* sticky tablet */
  #header .header-wrapper.stuck {
    padding: 0 !important;
  }

  #header .header-wrapper.stuck #masthead,
  #header .header-wrapper.stuck .header-main {
    min-height: 64px !important;
    border-radius: 0 !important;
  }

  #header .header-wrapper.stuck .header-inner {
    min-height: 64px !important;
  }

  #header .header-wrapper.stuck .nav > li > a,
  #header .header-wrapper.stuck .nav-top-link,
  #header .header-wrapper.stuck .header-search > a {
    line-height: 64px !important;
  }

  #header .header-wrapper.stuck #logo img,
  #header .header-wrapper.stuck .header-logo,
  #header .header-wrapper.stuck .header-logo-dark {
    max-height: 34px !important;
  }
}

/* Mobile thật: trả về menu mobile của Flatsome */
@media (max-width: 849px) {
  #header {
    position: relative !important;
    background: transparent !important;
  }

  #header .header-wrapper {
    padding: 0 !important;
    background: transparent !important;
  }

  #header #masthead,
  #header .header-main,
  #header .header-main.show-logo-center {
    min-height: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #header .header-inner,
  #header .header-inner.flex-row.container.logo-center,
  #header .header-inner.flex-row.container.logo-center.medium-logo-center {
    min-height: 64px !important;
    padding: 0 15px !important;
  }

  /* Ẩn nav desktop, dùng mobile nav của theme */
  #header .hide-for-medium {
    display: none !important;
  }

  #header .show-for-medium {
    display: flex !important;
  }
}
/* ===== Language switcher: globe + VN/EN/ZH ===== */

/* 1) Ẩn cờ trong link đang hiển thị */
#header .header-language-dropdown > a .image-icon,
#header .header-language-dropdown > a .icon-image,
#header .header-language-dropdown .header-language-dropdown__link .image-icon,
#header .header-language-dropdown .header-language-dropdown__link .icon-image {
  display: none !important;
}

/* 2) Biến link ngôn ngữ thành 1 cụm cố định */
#header .header-language-dropdown > a,
#header .header-language-dropdown .header-language-dropdown__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: auto !important;
  min-width: auto !important;
  white-space: nowrap !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
}

/* 3) Luôn giữ icon trái đất + mũi tên hiện ra, kể cả hover */
#header .header-language-dropdown > a:before,
#header .header-language-dropdown .header-language-dropdown__link:before,
#header .header-language-dropdown > a .icon-angle-down,
#header .header-language-dropdown .header-language-dropdown__link .icon-angle-down,
#header .header-language-dropdown:hover > a:before,
#header .header-language-dropdown:hover .header-language-dropdown__link:before,
#header .header-language-dropdown:hover .icon-angle-down,
#header .header-language-dropdown > a:hover .icon-angle-down,
#header .header-language-dropdown .header-language-dropdown__link:hover .icon-angle-down {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* 4) Khoảng cách icon trái đất với chữ */
#header .header-language-dropdown > a:before,
#header .header-language-dropdown .header-language-dropdown__link:before {
  margin-right: 4px !important;
}

/* 5) Khoảng cách chữ với mũi tên */
#header .header-language-dropdown .icon-angle-down {
  margin-left: 2px !important;
}

/* 6) Hover không được làm ẩn icon hoặc đổi vị trí */
#header .header-language-dropdown > a:hover,
#header .header-language-dropdown .header-language-dropdown__link:hover,
#header .header-language-dropdown > a:focus,
#header .header-language-dropdown .header-language-dropdown__link:focus {
  opacity: 1 !important;
  transform: none !important;
}

/* 7) Chỉ giữ text ngôn ngữ ngắn gọn */
html[lang="vi"] #header .header-language-dropdown > a,
html[lang="vi"] #header .header-language-dropdown .header-language-dropdown__link {
  font-size: 0 !important;
}
html[lang="vi"] #header .header-language-dropdown > a:after,
html[lang="vi"] #header .header-language-dropdown .header-language-dropdown__link:after {
  content: "VN";
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

/* English */
html[lang="en-US"] #header .header-language-dropdown > a,
html[lang="en-US"] #header .header-language-dropdown .header-language-dropdown__link,
html[lang="en"] #header .header-language-dropdown > a,
html[lang="en"] #header .header-language-dropdown .header-language-dropdown__link {
  font-size: 0 !important;
}
html[lang="en-US"] #header .header-language-dropdown > a:after,
html[lang="en-US"] #header .header-language-dropdown .header-language-dropdown__link:after,
html[lang="en"] #header .header-language-dropdown > a:after,
html[lang="en"] #header .header-language-dropdown .header-language-dropdown__link:after {
  content: "EN";
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

/* Chinese */
html[lang="zh-CN"] #header .header-language-dropdown > a,
html[lang="zh-CN"] #header .header-language-dropdown .header-language-dropdown__link,
html[lang="zh"] #header .header-language-dropdown > a,
html[lang="zh"] #header .header-language-dropdown .header-language-dropdown__link {
  font-size: 0 !important;
}
html[lang="zh-CN"] #header .header-language-dropdown > a:after,
html[lang="zh-CN"] #header .header-language-dropdown .header-language-dropdown__link:after,
html[lang="zh"] #header .header-language-dropdown > a:after,
html[lang="zh"] #header .header-language-dropdown .header-language-dropdown__link:after {
  content: "ZH";
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

/* 8) Trong dropdown vẫn hiện bình thường */
#header .header-language-dropdown .nav-dropdown a {
  font-size: 14px !important;
}
#header .header-language-dropdown .nav-dropdown a:after,
#header .header-language-dropdown .nav-dropdown a:before {
  content: none !important;
}
/* ===== FIX riêng cho EN ===== */
html[lang="en-US"] #header .header-language-dropdown > a,
html[lang="en-US"] #header .header-language-dropdown .header-language-dropdown__link,
html[lang="en"] #header .header-language-dropdown > a,
html[lang="en"] #header .header-language-dropdown .header-language-dropdown__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;              /* giảm khoảng cách */
  width: auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  white-space: nowrap !important;
}

/* Globe sát chữ EN hơn */
html[lang="en-US"] #header .header-language-dropdown > a:before,
html[lang="en-US"] #header .header-language-dropdown .header-language-dropdown__link:before,
html[lang="en"] #header .header-language-dropdown > a:before,
html[lang="en"] #header .header-language-dropdown .header-language-dropdown__link:before {
  margin-right: 2px !important;
}

/* Mũi tên sát EN hơn */
html[lang="en-US"] #header .header-language-dropdown .icon-angle-down,
html[lang="en"] #header .header-language-dropdown .icon-angle-down {
  margin-left: 1px !important;
}

/* Bỏ mọi khoảng cách thừa ở item cha */
html[lang="en-US"] #header .header-language-dropdown,
html[lang="en"] #header .header-language-dropdown {
  min-width: auto !important;
  margin-right: 0 !important;
}

/* Chặn hover làm lệch icon */
html[lang="en-US"] #header .header-language-dropdown > a:hover,
html[lang="en-US"] #header .header-language-dropdown .header-language-dropdown__link:hover,
html[lang="en"] #header .header-language-dropdown > a:hover,
html[lang="en"] #header .header-language-dropdown .header-language-dropdown__link:hover {
  transform: none !important;
  opacity: 1 !important;
}
#header .header-language-dropdown > a,
#header .header-language-dropdown .header-language-dropdown__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  width: auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  white-space: nowrap !important;
}

#header .header-language-dropdown > a:before,
#header .header-language-dropdown .header-language-dropdown__link:before {
  margin-right: 2px !important;
}

#header .header-language-dropdown .icon-angle-down {
  margin-left: 1px !important;
}
/* ===== FIX CỨNG language switcher ===== */

/* item cha không bị kéo rộng */
#header .header-language-dropdown {
  flex: 0 0 auto !important;
  min-width: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* link chính */
#header .header-language-dropdown > a,
#header .header-language-dropdown .header-language-dropdown__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  column-gap: 0 !important;
  gap: 0 !important;
}

/* ẩn cờ */
#header .header-language-dropdown .image-icon,
#header .header-language-dropdown .icon-image {
  display: none !important;
}

/* icon trái đất */
#header .header-language-dropdown > a:before,
#header .header-language-dropdown .header-language-dropdown__link:before {
  display: inline-block !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* mũi tên */
#header .header-language-dropdown .icon-angle-down {
  display: inline-block !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* xóa text gốc hoàn toàn */
#header .header-language-dropdown > a,
#header .header-language-dropdown .header-language-dropdown__link {
  font-size: 0 !important;
  line-height: 1 !important;
}

/* hiện mã ngôn ngữ bằng pseudo */
html[lang="vi"] #header .header-language-dropdown > a:after,
html[lang="vi"] #header .header-language-dropdown .header-language-dropdown__link:after {
  content: "VN";
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

html[lang="en"] #header .header-language-dropdown > a:after,
html[lang="en"] #header .header-language-dropdown .header-language-dropdown__link:after,
html[lang="en-US"] #header .header-language-dropdown > a:after,
html[lang="en-US"] #header .header-language-dropdown .header-language-dropdown__link:after {
  content: "EN";
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

html[lang="zh"] #header .header-language-dropdown > a:after,
html[lang="zh"] #header .header-language-dropdown .header-language-dropdown__link:after,
html[lang="zh-CN"] #header .header-language-dropdown > a:after,
html[lang="zh-CN"] #header .header-language-dropdown .header-language-dropdown__link:after {
  content: "ZH";
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

/* hover không được làm lệch */
#header .header-language-dropdown > a:hover,
#header .header-language-dropdown .header-language-dropdown__link:hover,
#header .header-language-dropdown:hover > a,
#header .header-language-dropdown:hover .header-language-dropdown__link {
  transform: none !important;
  opacity: 1 !important;
}
/* TẤT CẢ TRANG GIỐNG TRANG DỰ ÁN */
@media (min-width: 850px) {

  /* header đầu trang */
  #header .header-wrapper {
    padding: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #header #masthead.header-main,
  #header .header-main.show-logo-center,
  #header .header-main {
    background: #fff !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    min-height: 76px !important;
  }

  #header .header-inner {
    min-height: 76px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    align-items: center !important;
  }

  /* sticky giữ full ngang như hiện tại */
  #header .header-wrapper.stuck {
    padding: 0 !important;
  }

  #header .header-wrapper.stuck #masthead,
  #header .header-wrapper.stuck .header-main,
  #header .stuck .header-main,
  #header .stuck #masthead,
  #header.has-sticky.sticky .header-main {
    border-radius: 0 !important;
    margin: 0 !important;
  }
}
/* CHỈ FIX TRANG SẢN PHẨM KHI STICKY */
@media (min-width: 850px) {
  body:has(#menu-item-78.current-menu-item) #header .header-wrapper.stuck {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  body:has(#menu-item-78.current-menu-item) #header .header-wrapper.stuck #masthead,
  body:has(#menu-item-78.current-menu-item) #header .header-wrapper.stuck .header-main,
  body:has(#menu-item-78.current-menu-item) #header .stuck #masthead,
  body:has(#menu-item-78.current-menu-item) #header .stuck .header-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  body:has(#menu-item-78.current-menu-item) #header .header-wrapper.stuck .header-inner,
  body:has(#menu-item-78.current-menu-item) #header .stuck .header-inner,
  body:has(#menu-item-78.current-menu-item) #header .header-wrapper.stuck .container,
  body:has(#menu-item-78.current-menu-item) #header .stuck .container {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* MOBILE: menu off-canvas đè lên cả topbar/header */
@media (max-width: 849px) {

  .mfp-bg {
    z-index: 999998 !important;
  }

  .mfp-wrap,
  .off-canvas-left,
  .off-canvas-right,
  .mobile-sidebar,
  #main-menu {
    z-index: 999999 !important;
  }

  /* khung menu phủ từ mép trên cùng */
  .mfp-wrap {
    top: 0 !important;
  }

  .mfp-container,
  .mfp-content,
  #main-menu.mobile-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
  }

  /* nếu muốn panel menu dính sát đỉnh */
  #main-menu,
  .mobile-sidebar {
    top: 0 !important;
    padding-top: 0 !important;
  }

  /* nút close luôn nổi trên cùng */
  .mfp-close {
    z-index: 1000000 !important;
  }
}
@media (max-width: 849px) {
  html,
  body,
  .mfp-wrap {
    margin-top: 0 !important;
    top: 0 !important;
  }

  #wpadminbar {
    z-index: 1 !important;
  }
}
/* MOBILE: khi mở menu thì ẩn thanh header phía sau */
@media (max-width: 849px) {

  /* menu popup nằm trên header */
  .mfp-bg {
    z-index: 100000 !important;
  }

  .mfp-wrap,
  #main-menu,
  .mobile-sidebar {
    z-index: 100001 !important;
  }

  /* khi menu đang mở thì ẩn header mobile phía sau */
  .off-canvas-left #header,
  .off-canvas-right #header,
  .mfp-ready #header,
  html.has-off-canvas #header,
  body.has-off-canvas #header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}