/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.entry-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* ==========================================
   HEADER STYLE
   ========================================== */
#header.header.transparent.has-transparent {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1050;
}

#header .header-wrapper {
    background-color: rgba(12, 45, 94, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#header .header-bg-container,
#header .header-bg-image,
#header .header-bg-color,
#header .top-divider,
#header .header-nav .html.custom.html_topbar_left {
    display: none !important;
}

#header .header-main,
#header.transparent .header-main {
    height: 80px;
}

#header .header-inner.container {
    max-width: 1280px;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
    align-items: center;
}

#header #logo {
    display: flex;
    align-items: center;
    height: 100%;
    width: auto;
    margin-right: 0;
    line-height: 1;
}

#header .header-inner > .logo,
#header .header-inner > .flex-col.hide-for-medium.flex-left.flex-grow,
#header .header-inner > .flex-col.hide-for-medium.flex-right,
#header .header-inner > .flex-col.show-for-medium.flex-right {
    display: flex;
    align-items: center;
    height: 100%;
}

#header #logo img,
#header .header-logo,
#header .header-logo-dark,
#header .header-logo-sticky {
    display: none !important;
}

#header .xc-header-logo {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

#header .xc-header-logo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background-color: #e8720c;
    color: #ffffff;
    transition: background-color 0.2s ease;
}

#header .xc-header-logo:hover .xc-header-logo__icon {
    background-color: #c45c08;
}

#header .xc-header-logo__icon svg {
    width: 20px;
    height: 20px;
}

#header .xc-header-logo__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.25;
}

#header .xc-header-logo__title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

#header .xc-header-logo__subtitle {
    color: #e8720c;
    font-size: 12px;
    font-weight: 500;
}

#header .header-nav-main.nav {
    align-items: center;
    gap: 4px;
}

#header .header-nav-main.nav > li {
    margin: 0;
}

#header .header-nav-main.nav > li > a.nav-top-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    border-radius: 6px;
    color: #c5d3ea;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    padding: 10px 16px;
    text-transform: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

#header .header-nav-main.nav > li > a.nav-top-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

#header .header-nav-main.nav > li.current-menu-item > a.nav-top-link,
#header .header-nav-main.nav > li.current_page_item > a.nav-top-link,
#header .header-nav-main.nav > li.active > a.nav-top-link {
    background-color: #e8720c;
    color: #ffffff;
}

#header .header-button {
    display: inline-flex;
}

#header .header-button .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #e8720c !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
    min-height: 40px;
    padding: 10px 16px !important;
    text-transform: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#header .header-button .button:hover {
    background-color: #c45c08 !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

#header .header-button .button i {
    margin: 0;
    top: 0;
}

#header .header-button .button span {
    line-height: 1.2;
}

#header .mobile-nav {
    width: auto;
}

#header .mobile-nav > li {
    margin: 0;
}

#header .mobile-nav > li > a {
    color: #ffffff;
    padding: 8px;
}

#header .mobile-nav > li > a:hover {
    color: #ffffff;
}

#header .mobile-nav > li > a[aria-controls="main-menu"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 1;
}

#header .mobile-nav > li > a[aria-controls="main-menu"] i.icon-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0;
    line-height: 1;
    margin: 0;
    top: 0;
}

#header .mobile-nav > li > a[aria-controls="main-menu"] i.icon-menu::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#header .mobile-nav > li > a[aria-controls="main-menu"][aria-expanded="true"] i.icon-menu::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/svg%3E");
}

@media (min-width: 850px) {
    #header .header-inner.container {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 40px;
    }

    #header #logo {
        margin-right: 24px;
    }

    #header .header-inner > .flex-col.hide-for-medium.flex-left.flex-grow {
        display: flex;
        justify-content: center;
        min-width: 0;
        margin-right: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    #header .header-inner > .flex-col.hide-for-medium.flex-right {
        margin-left: 0;
    }

    #header .header-inner > .flex-col.hide-for-medium.flex-left.flex-grow > .header-nav-main.nav {
        justify-content: center;
        width: auto;
    }

    #header .header-inner > .flex-col.hide-for-medium.flex-right > .header-nav-main.nav {
        width: auto;
    }
}

@media (max-width: 849px) {
    #header .header-main,
    #header.transparent .header-main {
        height: 64px;
    }

    #header .header-inner.container {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding-left: 16px;
        padding-right: 16px;
    }

    #header .header-inner > .flex-col.show-for-medium.flex-left {
        display: none !important;
    }

    #header .header-inner > .logo {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        text-align: left;
    }

    #header .header-inner > .flex-col.show-for-medium.flex-right {
        order: 2;
        flex: 0 0 auto;
        margin-left: 0;
    }

    #header #logo {
        margin-right: 0;
        width: auto;
    }

    #header .xc-header-logo {
        gap: 12px;
        min-height: 40px;
        max-width: 100%;
    }

    #header .xc-header-logo__icon {
        width: 40px;
        height: 40px;
    }

    #header .xc-header-logo__icon svg {
        width: 20px;
        height: 20px;
    }

    #header .xc-header-logo__title {
        font-size: 14px;
    }

    #header .xc-header-logo__subtitle {
        font-size: 12px;
    }

    #header .mobile-nav > li > a[aria-controls="main-menu"] {
        width: auto;
        height: auto;
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
        border-radius: 0;
    }
}

/* Custom mobile menu */
@media (max-width: 849px) {
    #main-menu.mobile-sidebar,
    .main-menu-overlay,
    .mfp-bg,
    .mfp-wrap,
    .off-canvas-left .mfp-content,
    .off-canvas-right .mfp-content {
        display: none !important;
    }

    .off-canvas-left.mfp-ready .mfp-content,
    .off-canvas-right.mfp-ready .mfp-content,
    .off-canvas-left .mfp-content,
    .off-canvas-right .mfp-content {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }

    #header .xc-mobile-menu[hidden] {
        display: none !important;
    }

    #header .xc-mobile-menu {
        position: fixed;
        top: 64px;
        right: 0;
        left: 0;
        z-index: 1049;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background-color: #071a3a;
    }

    #header .xc-mobile-menu__inner {
        padding: 12px 16px;
    }

    #header .xc-mobile-menu__nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #header .xc-mobile-menu__link {
        display: block;
        width: 100%;
        border-radius: 6px;
        color: #c5d3ea;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.25;
        padding: 12px 16px;
        text-align: left;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    #header .xc-mobile-menu__link:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    #header .xc-mobile-menu__link.is-active {
        background-color: #e8720c;
        color: #ffffff;
    }

    #header .xc-mobile-menu__cta {
        margin-top: 8px;
    }

    #header .xc-mobile-menu__phone {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        border-radius: 6px;
        background-color: #e8720c;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        padding: 12px 16px;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    #header .xc-mobile-menu__phone:hover {
        background-color: #c45c08;
        color: #ffffff;
    }

    #header .xc-mobile-menu__phone-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        background-color: currentColor;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}

/* ==========================================
   CUSTOM FOOTER STYLE (.xc-footer)
   ========================================== */
.xc-footer {
    background-color: #071a3a !important;
    /* bg-navy-950 */
    color: #ffffff;
    padding-top: 56px !important;
    padding-bottom: 0 !important;
}

.xc-footer .section-content > .row:first-of-type {
    padding-bottom: 56px !important;
}

.xc-footer p {
    margin-bottom: 0;
}

.xc-footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

/* Column 1: Info */
.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo-icon {
    width: 48px;
    height: 48px;
    background-color: #e8720c;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-logo-icon svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
}

.footer-logo-text {
    line-height: 1.25;
}

.footer-logo-title {
    font-weight: 700;
    font-size: 16px;
}

.footer-logo-subtitle {
    color: #e8720c;
    font-size: 14px;
    font-weight: 500;
}

.xc-footer p.footer-desc {
    color: #7899ca;
    font-size: 14px;
    line-height: 1.625;
    margin-bottom: 20px;
    max-width: 384px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #7899ca;
    font-size: 14px;
    margin-bottom: 8px;
}

.footer-contact-item svg {
    width: 16px;
    height: 16px;
    color: #e8720c;
    flex-shrink: 0;
    margin-top: 3px;
}

.footer-contact-item a:hover {
    color: #e8720c;
}

/* Widget Titles */
.xc-footer .footer-widget-title {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    margin-bottom: 20px;
}

/* Column 2: Navigation */
.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 12px;
    list-style: none;
    margin-left: 0 !important;
}

.footer-nav-list a {
    color: #7899ca;
    font-size: 14px;
}

.footer-nav-list a:hover {
    color: #e8720c;
}

/* Column 3: Legal */
.footer-legal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal-list li {
    margin-bottom: 12px;
    list-style: none;
    margin-left: 0 !important;
}

.legal-label {
    color: #5b83be;
    font-size: 12px;
    display: block;
}

.legal-value {
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
}

.legal-desc {
    color: #5b83be;
    font-size: 12px;
}

/* Bottom Row */
.xc-footer .section-content > .row:last-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    margin-top: 24px;
}

.footer-copyright {
    color: #5b83be;
    font-size: 12px;
}

@media (max-width: 549px) {
    .footer-copyright {
        font-size: 9px;
        line-height: 1.15;
        letter-spacing: 0;
    }
}

.footer-credits {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: #5b83be;
    font-size: 12px;
    flex-wrap: wrap;
}

@media (max-width: 849px) {
    .footer-credits {
        justify-content: flex-start;
        margin-top: 10px;
    }
}

@media (max-width: 549px) {
    .footer-credits {
        font-size: 11px;
        gap: 2px;
        line-height: 1.2;
        flex-wrap: nowrap;
    }

    .footer-credits br {
        display: none;
    }

    .xc-footer a.credit-link {
        gap: 1px;
    }

    .credit-link svg {
        width: 10px;
        height: 10px;
        margin-left: 1px;
    }
}

.xc-footer a.credit-link {
    color: #e8720c;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.xc-footer a.credit-link:hover {
    color: #f5a04c;
}

.credit-link svg {
    width: 12px;
    height: 12px;
    margin-left: 2px;
}

/* Hide default absolute footer */
.absolute-footer {
    display: none !important;
}

/* ==========================================
   HERO BANNER (.xc-hero-banner)
   ========================================== */
.xc-hero-banner {
    min-height: 100vh !important;
    padding-top: 0 !important;
    display: flex;
    align-items: center;
}

.xc-hero-banner .banner-inner {
    height: 100% !important;
    min-height: 100vh !important;
}

/* Overlays (Gradient) */
.xc-hero-banner .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Gradient to top */
        linear-gradient(to top, rgba(7, 26, 58, 0.6), transparent 50%),
        /* Gradient to right */
        linear-gradient(to right, rgba(12, 45, 94, 0.95), rgba(12, 45, 94, 0.8), rgba(15, 47, 106, 0.6));
    z-index: 1;
}

/* Ensure content stays above overlay */
.xc-hero-banner .banner-layers {
    z-index: 2;
    position: relative;
    height: 100%;
    width: 100%;
}

.xc-hero-banner .banner-link {
    position: absolute !important;
}

.xc-hero-banner .text-box.banner-layer {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    max-width: 768px;
}

.xc-hero-banner .text-box.banner-layer:last-of-type {
    top: auto !important;
    bottom: 80px !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    max-width: none;
    transform: translateX(-50%) !important;
    z-index: 3;
}

.xc-hero-banner .text-box .text-box-content {
    font-size: 100% !important;
}

.xc-hero-banner .text-inner,
.xc-hero-banner .text-inner.text-center,
.xc-hero-banner .text-inner.text-center > div,
.xc-hero-banner .text-inner.text-center > div > div {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.xc-hero-banner .text-box.banner-layer:last-of-type .text-inner,
.xc-hero-banner .text-box.banner-layer:last-of-type .text-inner.text-center,
.xc-hero-banner .text-box.banner-layer:last-of-type .text-inner.text-center > div,
.xc-hero-banner .text-box.banner-layer:last-of-type .text-inner.text-center > div > div {
    text-align: center;
}

.xc-hero-banner .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(232, 114, 12, 0.2);
    border: 1px solid rgba(232, 114, 12, 0.4);
    color: #f5a04c; /* brand-orange-light */
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
}

.xc-hero-banner .hero-badge svg {
    width: 16px;
    height: 16px;
}

.xc-hero-banner .hero-badge br {
    display: none; /* Hide accidental <br> from flatsome editor */
}

.xc-hero-banner .hero-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 24px;
}

@media (min-width: 550px) {
    .xc-hero-banner .hero-title { font-size: 48px; }
}

@media (min-width: 850px) {
    .xc-hero-banner .hero-title { font-size: 60px; }
}

.xc-hero-banner .hero-title .text-primary {
    color: #e8720c;
    display: block;
    margin-top: 4px;
}

.xc-hero-banner .hero-desc {
    font-size: 18px;
    color: #c5d3ea; /* navy-100 */
    line-height: 1.625;
    margin-bottom: 40px;
    max-width: 672px; /* max-w-2xl */
}

@media (min-width: 550px) {
    .xc-hero-banner .hero-desc { font-size: 20px; }
}

/* Buttons in Row */
.xc-hero-row-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 48px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none;
    width: auto;
}

.xc-hero-row-btn > .col {
    padding: 0;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
}

.xc-hero-row-btn > .col .col-inner {
    margin: 0;
    width: 100%;
}

.xc-hero-banner .button.btn-kham-pha,
.xc-hero-banner .button.btn-tu-van {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 16px 32px;
    border: 2px solid transparent !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1;
    transition: all 0.2s;
    min-height: auto;
    min-width: 0;
    text-transform: none !important;
    width: auto;
}

.xc-hero-banner .button.btn-kham-pha span,
.xc-hero-banner .button.btn-tu-van span {
    line-height: 1.2;
}

.xc-hero-banner .button.btn-kham-pha {
    background-color: #e8720c !important;
    color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(232, 114, 12, 0.3) !important;
}

.xc-hero-banner .button.btn-kham-pha:hover {
    background-color: #c45c08 !important;
    box-shadow: 0 10px 15px -3px rgba(232, 114, 12, 0.5) !important;
    transform: translateY(-2px);
}

.xc-hero-banner .button.btn-tu-van {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
}

.xc-hero-banner .button.btn-tu-van:hover {
    border-color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Feature Row */
.xc-hero-banner .hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none;
    width: auto;
}

.xc-hero-banner .hero-features > .col {
    padding: 0;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
}

.xc-hero-banner .hero-features > .col .col-inner {
    margin: 0;
}

.xc-hero-banner .hero-features .feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c5d3ea;
    font-size: 14px;
    font-weight: 500;
}

.xc-hero-banner .hero-features .feature-item svg {
    width: 20px;
    height: 20px;
    color: #e8720c;
    flex-shrink: 0;
}

.xc-hero-banner .hero-features .feature-item br {
    display: none; /* Hide accidental <br> from flatsome editor */
}

/* Scroll Down Button */
@keyframes hero-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.xc-hero-banner .button.btn-scroll {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    animation: hero-bounce 1s infinite;
    padding: 8px !important;
    margin: 0 !important;
    min-width: 48px;
    min-height: 48px;
    line-height: 0;
    border-radius: 9999px !important;
    text-decoration: none !important;
}

.xc-hero-banner .button.btn-scroll:hover {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
}

.xc-hero-banner .button.btn-scroll span {
    display: none; /* Hide text */
}

.xc-hero-banner .button.btn-scroll::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.xc-hero-banner .text-box.banner-layer:last-of-type .text-box-content {
    line-height: 0;
}

@media (max-width: 849px) {
    .xc-hero-banner .text-box.banner-layer {
        max-width: 100%;
    }

    .xc-hero-banner .text-box.banner-layer .text-box-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .xc-hero-banner .text-box.banner-layer:last-of-type {
        bottom: 56px !important;
    }

    .xc-hero-row-btn {
        gap: 12px;
        flex-wrap: nowrap;
    }

    .xc-hero-row-btn > .col {
        width: 50%;
        flex: 1 1 0;
        max-width: 50%;
    }

    .xc-hero-row-btn > .col .col-inner {
        display: flex;
    }

    .xc-hero-banner .button.btn-kham-pha,
    .xc-hero-banner .button.btn-tu-van {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 52px;
        justify-content: center;
        padding: 14px 18px !important;
        font-size: 14px;
    }

    .xc-hero-banner .button.btn-kham-pha span,
    .xc-hero-banner .button.btn-tu-van span {
        white-space: nowrap;
    }

    .xc-hero-banner .hero-features > .col {
        width: 100%;
        flex-basis: 100%;
    }

    .xc-hero-banner .hero-features {
        gap: 16px;
    }
}

/* ==========================================
   NUMBERS SECTION (.xc-numbers)
   ========================================== */
.xc-numbers {
    background-color: #0c2d5e !important; /* bg-navy-900 */
    padding-top: 64px !important; /* py-16 = 4rem = 64px */
    padding-bottom: 64px !important;
}

.xc-numbers .number-box {
    text-align: center;
}

.xc-numbers .number-val {
    font-size: 36px;
    font-weight: 700;
    color: #e8720c; /* brand-orange */
    margin-bottom: 8px;
    line-height: 1;
}

@media (min-width: 850px) {
    .xc-numbers .number-val {
        font-size: 48px; /* lg:text-5xl */
    }
}

.xc-numbers .number-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
    line-height: 1.5;
}

@media (min-width: 850px) {
    .xc-numbers .number-title {
        font-size: 18px; /* lg:text-lg */
    }
}

.xc-numbers .number-desc {
    color: #9fb6da; /* navy-200 */
    font-size: 14px;
    line-height: 1.25;
}

/* ==========================================
   SERVICES SECTION (.xc-services)
   ========================================== */
.xc-services {
    background-color: #f9fafb !important; /* bg-gray-50 */
    padding-top: 80px !important; /* py-20 */
    padding-bottom: 80px !important;
}

/* Heading block */
.xc-services-heading {
    text-align: center;
    margin-bottom: 56px; /* mb-14 */
}

.xc-services-heading .xc-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background-color: rgba(232, 114, 12, 0.1); /* bg-brand-orange/10 */
    color: #e8720c; /* text-brand-orange */
    padding: 8px 16px !important;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    height: auto !important;
    width: auto !important;
}

.xc-services-heading h2 {
    font-size: 30px;
    font-weight: 700;
    color: #0c2d5e; /* text-navy-900 */
    margin-bottom: 16px;
}

@media (min-width: 550px) {
    .xc-services-heading h2 { font-size: 36px; }
}

.xc-services-heading p {
    color: #6b7280; /* text-gray-500 */
    font-size: 18px;
    line-height: 1.625;
    max-width: 672px;
    margin: 0 auto;
}

/* Icon Box Services (.xc-box-services) */
.xc-box-services {
    background-color: #ffffff;
    border-radius: 16px; /* rounded-2xl */
    padding: 28px !important; /* p-7 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    border: 1px solid #f3f4f6; /* border-gray-100 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.xc-box-services:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
    border-color: rgba(232, 114, 12, 0.2); /* hover:border-brand-orange/20 */
    transform: translateY(-4px); /* hover:-translate-y-1 */
}

/* Icon box using ::before for icons */
.xc-box-services::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    background-color: rgba(12, 45, 94, 0.05); /* bg-navy-900/5 */
    border-radius: 12px;
    margin-bottom: 20px;
    transition: all 0.3s;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}

.xc-box-services:hover::before {
    background-color: #e8720c; /* hover:bg-brand-orange */
}

/* 1. Thí nghiệm vật liệu */
.xc-box-services.thi-nghiem::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c2d5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E");
}
.xc-box-services.thi-nghiem:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E");
}

/* 2. Kiểm định công trình */
.xc-box-services.kiem-dinh::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c2d5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E");
}
.xc-box-services.kiem-dinh:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E");
}

/* 3. Giám sát chất lượng */
.xc-box-services.giam-sat::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c2d5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Ccircle cx='5' cy='14' r='3'/%3E%3Cpath d='m9 18-1.5-1.5'/%3E%3C/svg%3E");
}
.xc-box-services.giam-sat:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Ccircle cx='5' cy='14' r='3'/%3E%3Cpath d='m9 18-1.5-1.5'/%3E%3C/svg%3E");
}

/* 4. Thí nghiệm địa kỹ thuật */
.xc-box-services.dia-ky-thuat::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c2d5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
}
.xc-box-services.dia-ky-thuat:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
}

/* 5. Kiểm tra an toàn kết cấu */
.xc-box-services.an-toan::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c2d5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v2z'/%3E%3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M4 15v-3a6 6 0 0 1 6-6h0'/%3E%3Cpath d='M14 6h0a6 6 0 0 1 6 6v3'/%3E%3C/svg%3E");
}
.xc-box-services.an-toan:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v2z'/%3E%3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M4 15v-3a6 6 0 0 1 6-6h0'/%3E%3Cpath d='M14 6h0a6 6 0 0 1 6 6v3'/%3E%3C/svg%3E");
}

/* 6. Lập hồ sơ chất lượng công trình */
.xc-box-services.ho-so::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c2d5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
}
.xc-box-services.ho-so:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
}

/* Icon box text area */
.xc-box-services .icon-box-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0c2d5e;
    margin-bottom: 12px;
    line-height: 1.375;
}

.xc-box-services .icon-box-text p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.625;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: calc(1.625em * 3);
}

/* Convert UL LI to Tags */
.xc-box-services .icon-box-text ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.xc-box-services .icon-box-text ul li {
    background-color: rgba(12, 45, 94, 0.05); /* bg-navy-900/5 */
    color: #1e4484; /* text-navy-700 */
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 9999px;
    margin: 0 !important;
}

/* ==========================================
   WHY CHOOSE US (.xc-why)
   ========================================== */
.xc-why {
    background-color: #ffffff !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.xc-why .row {
    align-items: center; /* V-center the columns */
}

.xc-why .xc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(232, 114, 12, 0.1);
    color: #e8720c;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 16px;
}

/* Left column */
.xc-why-text h2 {
    font-size: 30px;
    font-weight: 700;
    color: #0c2d5e;
    margin-bottom: 20px;
    line-height: 1.25;
}

@media (min-width: 550px) {
    .xc-why-text h2 { font-size: 36px; }
}

.xc-why-text h2 span {
    color: #e8720c;
}

.xc-why-text > p {
    color: #6b7280;
    font-size: 16px;
    line-height: 1.625;
    margin-bottom: 32px;
}

.xc-why-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 32px 0 !important;
}

.xc-why-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
}

.xc-why-list li svg {
    width: 20px;
    height: 20px;
    color: #e8720c;
    flex-shrink: 0;
    margin-top: 2px;
}

.xc-why-list li span {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.625;
}

/* Button */
.xc-why-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background-color: #0c2d5e !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
    border: none !important;
    text-transform: none !important;
    margin: 0 !important;
}

.xc-why-btn:hover {
    background-color: #0f2f6a !important;
    transform: translateY(-2px);
}

.xc-why-btn svg {
    width: 16px;
    height: 16px;
}

/* Right column image */
.xc-why-img-box {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.xc-why-img-box > img {
    width: 100%;
    height: 384px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.xc-why-badge-experience {
    position: absolute;
    bottom: -24px;
    left: -24px;
    background-color: #e8720c;
    color: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(232, 114, 12, 0.3);
}

.xc-why-badge-experience .val {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1;
}

.xc-why-badge-experience .lbl {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

.xc-why-badge-status {
    position: absolute;
    top: -16px;
    right: -16px;
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.xc-why-badge-status .dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    animation: xc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.xc-why-badge-status .lbl {
    color: #0c2d5e;
    font-size: 14px;
    font-weight: 600;
}

@keyframes xc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mobile adjustments to prevent overflow */
@media (max-width: 849px) {
    .xc-why-img-box {
        margin-top: 32px;
        max-width: 90%;
    }
    .xc-why-badge-experience {
        left: -16px;
        bottom: -16px;
        padding: 16px;
    }
    .xc-why-badge-status {
        right: -16px;
        top: -16px;
        padding: 12px;
    }
}

/* ==========================================
   CONTACT SECTION (.xc-contact)
   ========================================== */
.xc-contact {
    background-color: #ffffff !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.xc-contact > .section-content > .row:first-child {
    margin-bottom: 56px;
}

.xc-contact > .section-content > .row:first-child .col-inner {
    text-align: center;
}

.xc-contact-heading__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(232, 114, 12, 0.1);
    color: #e8720c;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 16px;
}

.xc-contact-heading__title {
    font-size: 30px;
    font-weight: 700;
    color: #0c2d5e;
    line-height: 1.2;
    margin: 0 0 16px;
}

.xc-contact-heading__desc {
    color: #6b7280;
    font-size: 18px;
    line-height: 1.625;
    max-width: 576px;
    margin: 0 auto;
}

.xc-contact > .section-content > .row:first-child p:last-child {
    color: #6b7280;
    font-size: 18px;
    line-height: 1.625;
    max-width: 576px;
    margin: 0 auto;
}

@media (min-width: 550px) {
    .xc-contact-heading__title {
        font-size: 36px;
    }
}

.xc-contact > .section-content > .row:last-child {
    align-items: flex-start;
}

.xc-contact .box-lien-he {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.xc-contact .box-lien-he:hover {
    border-color: rgba(232, 114, 12, 0.3);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.xc-contact .box-lien-he::before {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex: 0 0 44px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.xc-contact .box-lien-he.dia-chi::before,
.xc-contact .box-lien-he.dien-thoai::before {
    background-color: rgba(232, 114, 12, 0.1);
}

.xc-contact .box-lien-he.so-tai-khoan::before,
.xc-contact .box-lien-he.mst::before,
.xc-contact .box-lien-he.gio-lam-viec::before {
    background-color: #c5d3ea;
}

.xc-contact .box-lien-he.dia-chi::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8720c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.xc-contact .box-lien-he.dien-thoai::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8720c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.xc-contact .box-lien-he.so-tai-khoan::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e4484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E");
}

.xc-contact .box-lien-he.mst::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e4484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

.xc-contact .box-lien-he.gio-lam-viec::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e4484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.xc-contact .box-lien-he .icon-box-text h3 {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.xc-contact .box-lien-he .icon-box-text p {
    color: #0c2d5e;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.625;
    margin-bottom: 0;
}

.xc-contact .box-map {
    background-color: #f3f4f6;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.xc-contact .box-map p {
    margin: 0;
}

.xc-contact .box-map br {
    display: none;
}

.xc-contact .box-map iframe {
    display: block;
    width: 100%;
    height: 288px;
}

.xc-contact .row.row-ho-tro {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: none;
}

.xc-contact .row-ho-tro .col {
    padding: 0;
}

.xc-contact .row-ho-tro .col-inner {
    background-color: #0c2d5e;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
}

.xc-contact .row-ho-tro h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.xc-contact .row-ho-tro p {
    color: #9fb6da;
    font-size: 14px;
    line-height: 1.625;
    margin-bottom: 20px;
}

.xc-contact .button.btn-ho-tro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #e8720c !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
    min-height: auto;
    min-width: 0;
    padding: 14px 24px !important;
    border-radius: 8px !important;
    text-transform: none !important;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.xc-contact .button.btn-ho-tro:hover {
    background-color: #c45c08 !important;
    box-shadow: 0 10px 15px -3px rgba(232, 114, 12, 0.3) !important;
    transform: translateY(-2px);
}

.xc-contact .button.btn-ho-tro i {
    font-size: 16px;
    line-height: 1;
    margin: 0;
    top: 0;
}

.xc-contact .button.btn-ho-tro span {
    display: inline-block;
    line-height: 1.2;
}

@media (max-width: 849px) {
    .xc-contact {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .xc-contact > .section-content > .row:first-child {
        margin-bottom: 40px;
    }

    .xc-contact .box-map iframe {
        height: 256px;
    }

    .xc-contact .row-ho-tro .col-inner {
        padding: 24px;
    }
}

/* ==========================================
   ABOUT PAGE HERO (.xc-page-about-hero)
   ========================================== */
.xc-page-about-hero {
    background-color: #0c2d5e !important;
    overflow: hidden;
    padding-top: 560px !important;
}

.xc-page-about-hero .banner-inner {
    min-height: 100%;
}

.xc-page-about-hero .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(12, 45, 94, 0.15);
    z-index: 1;
}

.xc-page-about-hero .banner-bg img {
    opacity: 0.15;
}

.xc-page-about-hero .banner-layers {
    position: relative;
    z-index: 2;
}

.xc-page-about-hero .text-box.banner-layer {
    width: 100% !important;
    max-width: 100%;
    top: 54% !important;
    transform: translate(-50%, -50%) !important;
}

.xc-page-about-hero .text-box.banner-layer .text-box-content {
    padding: 0 16px;
}

.xc-page-about-hero .xc-page-about-hero__content {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.xc-page-about-hero .xc-page-about-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(232, 114, 12, 0.2);
    border: 1px solid rgba(232, 114, 12, 0.3);
    color: #e8720c;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 24px;
}

.xc-page-about-hero .xc-page-about-hero__badge svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.xc-page-about-hero .xc-page-about-hero__badge br,
.xc-page-about-hero .xc-page-about-hero__title br,
.xc-page-about-hero .xc-page-about-hero__content p:empty {
    display: none !important;
}

.xc-page-about-hero .xc-page-about-hero__title {
    color: #ffffff;
    font-size: 36px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 24px;
}

.xc-page-about-hero .xc-page-about-hero__title span {
    display: block;
    color: #e8720c;
}

.xc-page-about-hero .xc-page-about-hero__desc {
    color: #9fb6da;
    font-size: 17px;
    line-height: 1.625;
    margin: 0 auto;
    max-width: 900px;
}

@media (min-width: 550px) {
    .xc-page-about-hero .xc-page-about-hero__title {
        font-size: 48px;
    }
}

@media (max-width: 849px) {
    .xc-page-about-hero {
        padding-top: 620px !important;
    }

    .xc-page-about-hero .text-box.banner-layer {
        top: 56% !important;
    }

    .xc-page-about-hero .text-box.banner-layer .text-box-content {
        padding: 0 16px;
    }
}

/* ==========================================
   ABOUT HISTORY (.xc-page-about-history)
   ========================================== */
.xc-page-about-history {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.xc-page-about-history .section-content > .row {
    align-items: center;
    margin-bottom: 0;
}

.xc-page-about-history .section-content > .row > .col {
    padding-bottom: 0;
}

.xc-page-about-history .section-content > .row > .col:first-child .col-inner {
    position: relative;
}

.xc-page-about-history .img.has-hover {
    margin-bottom: 0;
}

.xc-page-about-history .img.has-hover .img-inner {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.xc-page-about-history .img.has-hover img {
    display: block;
    width: 100%;
    height: 384px;
    object-fit: cover;
}

.xc-page-about-history .section-content > .row > .col:first-child p {
    position: absolute;
    right: -20px;
    bottom: -20px;
    z-index: 2;
    margin: 0;
    background-color: #e8720c;
    color: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    line-height: 1.3;
    font-size: 14px;
    font-weight: 500;
}

.xc-page-about-history .section-content > .row > .col:first-child p::first-line {
    font-size: 24px;
    font-weight: 700;
}

.xc-page-about-history .section-content > .row > .col:last-child .col-inner {
    text-align: left;
}

.xc-page-about-history .section-content > .row > .col:last-child p:first-child {
    color: #0c2d5e;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 20px;
}

.xc-page-about-history .section-content > .row > .col:last-child p:first-child::before {
    content: "Lịch sử hình thành";
    display: inline-flex;
    align-items: center;
    background-color: rgba(232, 114, 12, 0.1);
    color: #e8720c;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 20px;
}

.xc-page-about-history .section-content > .row > .col:last-child p:first-child br {
    display: none;
}

.xc-page-about-history .section-content > .row > .col:last-child p:first-child {
    display: flex;
    flex-direction: column;
}

.xc-page-about-history .section-content > .row > .col:last-child p:first-child::first-line {
    color: #0c2d5e;
}

.xc-page-about-history .section-content > .row > .col:last-child p + p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.625;
    margin-bottom: 16px;
}

.xc-page-about-history .section-content > .row > .col:last-child p:last-child {
    margin-bottom: 0;
}

@media (min-width: 850px) {
    .xc-page-about-history .section-content > .row {
        gap: 0;
    }

    .xc-page-about-history .section-content > .row > .col {
        padding-left: 15px;
        padding-right: 15px;
    }

    .xc-page-about-history .section-content > .row > .col:first-child {
        padding-right: 28px;
    }

    .xc-page-about-history .section-content > .row > .col:last-child {
        padding-left: 28px;
    }
}

@media (max-width: 849px) {
    .xc-page-about-history {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .xc-page-about-history .section-content > .row > .col:first-child {
        margin-bottom: 56px;
    }

    .xc-page-about-history .img.has-hover img {
        height: 320px;
    }

    .xc-page-about-history .section-content > .row > .col:first-child p {
        right: -8px;
        bottom: -16px;
        padding: 14px 18px;
    }

    .xc-page-about-history .section-content > .row > .col:last-child p:first-child {
        font-size: 28px;
    }
}

/* ==========================================
   ABOUT HISTORY OVERRIDE
   ========================================== */
.xc-page-about-history .section-content > .row > .col:first-child p {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.xc-page-about-history .section-content > .row > .col:first-child p::first-line {
    font-size: inherit !important;
    font-weight: inherit !important;
}

.xc-page-about-history .section-content > .row > .col:last-child p:first-child,
.xc-page-about-history .section-content > .row > .col:last-child p + p,
.xc-page-about-history .section-content > .row > .col:last-child p:last-child {
    all: unset;
}

.xc-page-about-history .section-content > .row > .col:last-child p:first-child::before {
    content: none !important;
}

.xc-page-about-history .xc-page-about-history__stat {
    position: absolute;
    right: -20px;
    bottom: -20px;
    z-index: 2;
    background-color: #e8720c;
    color: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.xc-page-about-history .xc-page-about-history__stat-value {
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 4px;
}

.xc-page-about-history .xc-page-about-history__stat-label {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    opacity: 0.9;
}

.xc-page-about-history .xc-page-about-history__content {
    width: 100%;
}

.xc-page-about-history .xc-page-about-history__badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(232, 114, 12, 0.1);
    color: #e8720c;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 20px;
}

.xc-page-about-history .xc-page-about-history__title {
    color: #0c2d5e;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 20px;
}

.xc-page-about-history .xc-page-about-history__title span {
    color: #e8720c;
}

.xc-page-about-history .xc-page-about-history__title br:last-of-type {
    display: none;
}

.xc-page-about-history .xc-page-about-history__body p {
    margin: 0 0 16px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.625;
}

.xc-page-about-history .xc-page-about-history__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 849px) {
    .xc-page-about-history .xc-page-about-history__stat {
        right: -8px;
        bottom: -16px;
        padding: 14px 18px;
    }

    .xc-page-about-history .xc-page-about-history__title {
        font-size: 28px;
    }
}

/* ==========================================
   ABOUT MVV (.xc-page-about-mvv)
   ========================================== */
.xc-page-about-mvv {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.xc-page-about-mvv .section-content > .row {
    margin-bottom: 0;
}

.xc-page-about-mvv .section-content > .row > .col {
    padding-bottom: 32px;
}

.xc-page-about-mvv .section-content > .row > .col .col-inner {
    height: 100%;
}

.xc-page-about-mvv .box-mvv {
    position: relative;
    height: 100%;
    padding: 32px;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.xc-page-about-mvv .box-mvv:hover {
    border-color: rgba(232, 114, 12, 0.3);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.xc-page-about-mvv .box-mvv::before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 12px;
    background-color: #0c2d5e;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    transition: background-color 0.3s ease;
}

.xc-page-about-mvv .box-mvv:hover::before {
    background-color: #e8720c;
}

.xc-page-about-mvv .box-mvv.su-menh::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

.xc-page-about-mvv .box-mvv.tam-nhin::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.xc-page-about-mvv .box-mvv.gia-tri::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

.xc-page-about-mvv .box-mvv .icon-box-text {
    margin: 0;
}

.xc-page-about-mvv .box-mvv h3 {
    color: #0c2d5e;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 12px;
}

.xc-page-about-mvv .box-mvv p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.625;
    margin: 0;
}

@media (max-width: 849px) {
    .xc-page-about-mvv {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .xc-page-about-mvv .section-content > .row > .col:last-child {
        padding-bottom: 0;
    }

    .xc-page-about-mvv .box-mvv {
        padding: 28px;
    }
}

/* ==========================================
   ABOUT TIMELINE SHORTCODE
   ========================================== */
.xc-page-about-timeline__heading {
    text-align: center;
    margin-bottom: 48px;
}

.xc-page-about-timeline__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(232, 114, 12, 0.1);
    color: #e8720c;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 16px;
}

.xc-page-about-timeline__badge-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8720c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

.xc-page-about-timeline__title {
    color: #0c2d5e;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    text-align: center;
}

.xc-about-timeline-shortcode {
    position: relative;
    margin-bottom: 80px;
}

.xc-about-timeline-shortcode__items {
    position: relative;
}

.xc-about-timeline-shortcode__track {
    display: none;
}

.xc-about-timeline-shortcode__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.xc-about-timeline-shortcode__item + .xc-about-timeline-shortcode__item {
    margin-top: 32px;
}

.xc-about-timeline-shortcode__side {
    width: 100%;
}

.xc-about-timeline-shortcode__side.is-empty {
    display: none;
}

.xc-about-timeline-shortcode__card {
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.xc-about-timeline-shortcode__card:hover {
    border-color: rgba(232, 114, 12, 0.3);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.xc-about-timeline-shortcode__year {
    color: #e8720c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
}

.xc-about-timeline-shortcode__item-title {
    color: #0c2d5e;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

.xc-about-timeline-shortcode__desc {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.625;
}

.xc-about-timeline-shortcode__dot {
    display: none;
}

@media (min-width: 768px) {
    .xc-about-timeline-shortcode__track {
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: #e5e7eb;
        transform: translateX(-50%);
    }

    .xc-about-timeline-shortcode__item {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .xc-about-timeline-shortcode__item.is-right {
        flex-direction: row-reverse;
    }

    .xc-about-timeline-shortcode__side {
        width: 50%;
    }

    .xc-about-timeline-shortcode__side:first-child {
        text-align: right;
    }

    .xc-about-timeline-shortcode__item.is-right .xc-about-timeline-shortcode__side:first-child {
        text-align: left;
    }

    .xc-about-timeline-shortcode__side.is-empty {
        display: block;
    }

    .xc-about-timeline-shortcode__dot {
        display: flex;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background-color: #0c2d5e;
        border: 4px solid #ffffff;
        color: #e8720c;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 1;
    }

    .xc-about-timeline-shortcode__dot svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 849px) {
    .xc-page-about-timeline__heading {
        margin-bottom: 40px;
    }

    .xc-page-about-timeline__title {
        font-size: 28px;
    }
}

/* ==========================================
   ORGANIZATION PAGE HERO (.xc-page-co-cau-banner)
   ========================================== */
.xc-page-co-cau-banner {
    background-color: #0c2d5e !important;
    overflow: hidden;
    padding-top: 560px !important;
}

.xc-page-co-cau-banner .banner-inner {
    min-height: 100%;
}

.xc-page-co-cau-banner .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(12, 45, 94, 0.15);
    z-index: 1;
}

.xc-page-co-cau-banner .banner-bg img {
    opacity: 0.15;
}

.xc-page-co-cau-banner .banner-layers {
    position: relative;
    z-index: 2;
}

.xc-page-co-cau-banner .text-box.banner-layer {
    width: 100% !important;
    max-width: 100%;
    top: 54% !important;
    transform: translate(-50%, -50%) !important;
}

.xc-page-co-cau-banner .text-box.banner-layer .text-box-content {
    padding: 0 16px;
}

.xc-page-co-cau-banner .xc-page-co-cau-banner__content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.xc-page-co-cau-banner .xc-page-co-cau-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(232, 114, 12, 0.2);
    border: 1px solid rgba(232, 114, 12, 0.3);
    color: #e8720c;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 24px;
}

.xc-page-co-cau-banner .xc-page-co-cau-banner__badge svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.xc-page-co-cau-banner .xc-page-co-cau-banner__badge br,
.xc-page-co-cau-banner .xc-page-co-cau-banner__title br,
.xc-page-co-cau-banner .xc-page-co-cau-banner__content p:empty {
    display: none !important;
}

.xc-page-co-cau-banner .xc-page-co-cau-banner__title {
    color: #ffffff;
    font-size: 36px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 24px;
}

.xc-page-co-cau-banner .xc-page-co-cau-banner__title span {
    display: block;
    color: #e8720c;
}

.xc-page-co-cau-banner .xc-page-co-cau-banner__desc {
    color: #9fb6da;
    font-size: 18px;
    line-height: 1.625;
    margin: 0 auto;
    max-width: 672px;
}

@media (min-width: 550px) {
    .xc-page-co-cau-banner .xc-page-co-cau-banner__title {
        font-size: 48px;
    }
}

@media (max-width: 849px) {
    .xc-page-co-cau-banner {
        padding-top: 620px !important;
    }

    .xc-page-co-cau-banner .text-box.banner-layer {
        top: 56% !important;
    }

    .xc-page-co-cau-banner .text-box.banner-layer .text-box-content {
        padding: 0 16px;
    }
}

/* ==========================================
   ORGANIZATION STRUCTURE (.xc-page-co-cau-to-chuc)
   ========================================== */
.xc-page-co-cau-to-chuc {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    background-color: #f9fafb;
}

.xc-page-co-cau-to-chuc .section-content > .row {
    margin-bottom: 0;
}

.xc-page-co-cau-to-chuc .section-content > .row > .col {
    padding-bottom: 0;
}

.xc-page-co-cau-to-chuc__chart {
    max-width: 1024px;
    margin: 0 auto;
}

.xc-page-co-cau-to-chuc__card {
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.xc-page-co-cau-to-chuc__head {
    background-color: #0c2d5e;
    padding: 24px;
    text-align: center;
}

.xc-page-co-cau-to-chuc__head-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 9999px;
    background-color: #e8720c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.xc-page-co-cau-to-chuc__head-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.xc-page-co-cau-to-chuc__head-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.xc-page-co-cau-to-chuc__head-desc {
    color: #7899ca;
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0 0;
}

.xc-page-co-cau-to-chuc__body {
    padding: 24px;
}

.xc-page-co-cau-to-chuc__line--vertical {
    width: 1px;
    height: 32px;
    background-color: #d1d5db;
    margin: 0 auto;
}

.xc-page-co-cau-to-chuc__branch {
    position: relative;
}

.xc-page-co-cau-to-chuc__branch-line {
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 1px;
    background-color: #d1d5db;
}

.xc-page-co-cau-to-chuc__leaders {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 48px;
}

.xc-page-co-cau-to-chuc__leader {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
}

.xc-page-co-cau-to-chuc__leader-line {
    width: 1px;
    height: 24px;
    background-color: #d1d5db;
}

.xc-page-co-cau-to-chuc__leader-box {
    background-color: #1e4484;
    color: #ffffff;
    text-align: center;
    padding: 12px 20px;
    border-radius: 12px;
    min-width: 220px;
}

.xc-page-co-cau-to-chuc__leader-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.xc-page-co-cau-to-chuc__leader-desc {
    color: #7899ca;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 2px;
}

.xc-page-co-cau-to-chuc__line--bottom {
    margin-top: 8px;
}

.xc-page-co-cau-to-chuc__departments {
    display: flex;
    justify-content: center;
    margin-top: 0;
    position: relative;
    padding-bottom: 48px;
}

.xc-page-co-cau-to-chuc__departments span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    border-radius: 8px;
    background-color: rgba(232, 114, 12, 0.1);
    border: 1px solid rgba(232, 114, 12, 0.2);
    color: #e8720c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.xc-page-co-cau-to-chuc__departments::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 1px;
    height: 28px;
    background-color: #d1d5db;
    transform: translateX(-50%);
}

.xc-page-co-cau-to-chuc__units {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}

.xc-page-co-cau-to-chuc__unit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background-color: #ffffff;
    color: #1e4484;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    padding: 10px 14px;
}

@media (max-width: 767px) {
    .xc-page-co-cau-to-chuc__body {
        padding: 20px;
    }

    .xc-page-co-cau-to-chuc__branch-line {
        display: none;
    }

    .xc-page-co-cau-to-chuc__leaders {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .xc-page-co-cau-to-chuc__leader {
        width: 100%;
    }

    .xc-page-co-cau-to-chuc__leader-box {
        min-width: 0;
        width: 100%;
        max-width: 280px;
    }

    .xc-page-co-cau-to-chuc__departments {
        padding-bottom: 40px;
    }

    .xc-page-co-cau-to-chuc__departments::after {
        height: 22px;
        bottom: 14px;
    }

    .xc-page-co-cau-to-chuc__units {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   DEPARTMENTS (.xc-page-co-cau-chuyen-mon)
   ========================================== */
.xc-page-co-cau-chuyen-mon {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    background-color: #ffffff;
}

.xc-page-co-cau-chuyen-mon .section-content > .row:first-child {
    margin-bottom: 48px;
}

.xc-page-co-cau-chuyen-mon .section-content > .row:first-child > .col,
.xc-page-co-cau-chuyen-mon .section-content > .row:nth-child(2) > .col {
    padding-bottom: 24px;
}

.xc-page-co-cau-chuyen-mon__heading {
    max-width: 576px;
    margin: 0 auto;
    text-align: center;
}

.xc-page-co-cau-chuyen-mon__title {
    color: #0c2d5e;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 12px;
}

.xc-page-co-cau-chuyen-mon__desc {
    color: #6b7280;
    font-size: 16px;
    line-height: 1.625;
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon {
    position: relative;
    height: 100%;
    padding: 28px;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.xc-page-co-cau-chuyen-mon .icon-box-left.box-chuyen-mon {
    align-items: flex-start;
    display: block;
}

.xc-page-co-cau-chuyen-mon .icon-box-left.box-chuyen-mon .icon-box-text {
    padding-left: 0;
    width: 100%;
    flex: none;
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon:hover {
    border-color: rgba(232, 114, 12, 0.3);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon::before {
    content: "";
    display: block;
    position: absolute;
    top: 28px;
    left: 28px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: #0c2d5e;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    transition: background-color 0.3s ease;
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon:hover::before {
    background-color: #e8720c;
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon.thi-nghiem::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E");
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon.kiem-dinh::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E");
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon.tu-van::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon.hanh-chinh::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.xc-page-co-cau-chuyen-mon .box-chuyen-mon .icon-box-text {
    margin: 0;
}

.xc-page-co-cau-chuyen-mon__head {
    min-height: 56px;
    padding-left: 72px;
    margin-bottom: 20px;
}

.xc-page-co-cau-chuyen-mon__main {
    min-width: 0;
    flex: 1 1 auto;
}

.xc-page-co-cau-chuyen-mon__code {
    color: #e8720c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.xc-page-co-cau-chuyen-mon__name {
    color: #0c2d5e;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 4px;
}

.xc-page-co-cau-chuyen-mon__meta {
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 20px;
}

.xc-page-co-cau-chuyen-mon__body {
    width: 100%;
}

.xc-page-co-cau-chuyen-mon__summary {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.625;
    margin: 0 0 20px;
}

.xc-page-co-cau-chuyen-mon__tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xc-page-co-cau-chuyen-mon__task {
    position: relative;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    padding-left: 14px;
}

.xc-page-co-cau-chuyen-mon__task::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: #e8720c;
}

@media (max-width: 849px) {
    .xc-page-co-cau-chuyen-mon {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .xc-page-co-cau-chuyen-mon .section-content > .row:first-child {
        margin-bottom: 40px;
    }

    .xc-page-co-cau-chuyen-mon__title {
        font-size: 28px;
    }

    .xc-page-co-cau-chuyen-mon .box-chuyen-mon {
        padding: 24px;
    }

    .xc-page-co-cau-chuyen-mon__head {
        padding-left: 70px;
        margin-bottom: 18px;
    }

    .xc-page-co-cau-chuyen-mon .box-chuyen-mon::before {
        top: 24px;
        left: 24px;
    }
}

/* ==========================================
   STAFF STATS (.xc-page-co-cau-nhan-luc)
   ========================================== */
.xc-page-co-cau-nhan-luc {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    background-color: #0c2d5e;
}

.xc-page-co-cau-nhan-luc .section-content > .row:first-child {
    margin-bottom: 40px;
}

.xc-page-co-cau-nhan-luc .section-content > .row:first-child > .col,
.xc-page-co-cau-nhan-luc .section-content > .row:nth-child(2) > .col {
    padding-bottom: 24px;
}

.xc-page-co-cau-nhan-luc__heading {
    text-align: center;
}

.xc-page-co-cau-nhan-luc__title {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 12px;
}

.xc-page-co-cau-nhan-luc__desc {
    color: #7899ca;
    font-size: 16px;
    line-height: 1.625;
    margin: 0;
}

.xc-page-co-cau-nhan-luc__item {
    text-align: center;
}

.xc-page-co-cau-nhan-luc__value {
    color: #e8720c;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 4px;
}

.xc-page-co-cau-nhan-luc__label {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 4px;
}

.xc-page-co-cau-nhan-luc__meta {
    color: #5b83be;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 849px) {
    .xc-page-co-cau-nhan-luc {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .xc-page-co-cau-nhan-luc .section-content > .row:first-child {
        margin-bottom: 32px;
    }

    .xc-page-co-cau-nhan-luc__title {
        font-size: 22px;
    }

    .xc-page-co-cau-nhan-luc__value {
        font-size: 28px;
    }
}