/*
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.   ***************/
:root {
    --font-serif: "Barlow Semi Condensed", sans-serif;
    font-size: 16px;
    --color-white: #ffffff;
}
.wpcf7-spinner{
    display: none !important;
}
* {
    font-family: "Manrope", sans-serif;
}

.font-serif,
.font-serif * {
    font-family: var(--font-serif);
}

.text-white {
    color: var(--color-white);
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.absolute-footer {
    display: none;
}

.logo-center .flex-left {
    flex: 1 1 0;
    order: 1;
}

.header-nav>li {
    margin: 0 10px !important;
}

.nav-footer a {
    border: none;
}
.follow-icons li {
    margin: 0 !important;
}

.border-b-primary {
    border-color: var(--primary-color) !important;
}

.text-black {
    color: #000 !important;
}

.footer-mail {
    height: 50px !important;
    border-radius: 12px !important;
}

.header-nav li a {
    font-size: .9rem;
    font-family: var(--font-serif);
}

.header-nav li i {
    color: var(--primary-color);
}

#logo {
    position: relative;
}

#logo img {
    position: relative;
    z-index: 1;
}

#masthead>.header-inner {
    background: #FFF;

}

#logo::before {
    content: "";
    width: 200px;
    height: 200px;
    background: #FFF;
    position: absolute;
    border-radius: 99px;
    top: -90px;
    left: -10px;
    z-index: -1;
    box-shadow: 0 0px 10px rgb(0 0 0 / 10%);
}

.col-why-choose .col-inner {
    padding: 2rem 2rem;
    border: 1px solid var(--primary-color);
}

.col-why-choose .icon img {
    background-color: var(--primary-color);
    padding: 1rem 1rem;
    border-radius: 50px;
}

.img-inner {
    position: relative;
}

.bluescale-filter {
    /* Optional: ensure smooth rendering */
    transition: filter 0.3s ease;
}

.img-blue-scale img {
    width: 500px;
    max-width: none;
    margin-left: -100px;
}

.title-big h2 {
    margin-bottom: 30px;
}

.slider-testinominal img {
    width: 100px;
    height: 100px;
    border-radius: 99px;
    object-position: top;
    object-fit: cover;
}

.slider-testinominal .img {
    position: absolute;
    background-color: #FFF;
    top: -10px;
    left: 0;
}

.slider-testinominal .row .col {
    overflow: visible !important;
}

.slider-testinominal .box-doi-tac .box-text {
    padding: 64px 52px 40px;
    border-radius: 0 32px 0 32px;
    position: relative;
    overflow: visible !important;
    border: 1px solid var(--primary-color);
}

.slider-testinominal .box-image {
    position: absolute;
    z-index: 1;
    background-color: #FFF;
    padding: 20px;
    top: -100px;
    left: 0;
    box-sizing: content-box;
}

.slider-testinominal .flickity-button {
    bottom: 15%;
}

.flickity-button svg {
    border-width: 1px !important;
    width: 40px;
    padding: 12px;
    border-color: var(--primary-color) !important;
    fill: var(--primary-color);
}

.flickity-button .arrow {
    fill: var(--primary-color);
}

.flickity-page-dots {
    bottom: -26px;
}

.flickity-page-dots .dot.is-selected {
    background-color: var(--primary-color);
    transform: scale(1.1);
}

.flickity-page-dots .dot {
    border: none;
    transform: scale(.9);
    background-color: var(--fs-color-secondary);
}

/* Swiper Navigation Buttons */
.custom-blog-slider-wrapper {
    position: relative;
}

.custom-blog-slider-wrapper .swiper-button-next,
.custom-blog-slider-wrapper .swiper-button-prev {
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    background-color: transparent;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.custom-blog-slider-wrapper .swiper-button-next:after,
.custom-blog-slider-wrapper .swiper-button-prev:after {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: bold;
}

/* TбєЎo mЕ©i tГЄn sau nГєt */
.btn-arrow-right::after {
    content: "\279C";
    /* Mã Unicode của mũi tên (→). Bạn có thể đổi thành " ->" nếu thích */
    margin-left: 8px;
    display: inline-block;
    /* Để áp dụng được hiệu ứng di chuyển */
    transition: transform 0.3s ease;
    font-size: 18px;
    line-height: 1;
}

/* Hiệu ứng khi di chuột vào nút: Mũi tên chạy sang phải */
.btn-arrow-right:hover::after {
    transform: translateX(5px);
}

.custom-blog-slider-wrapper .swiper-button-next:hover,
.custom-blog-slider-wrapper .swiper-button-prev:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.custom-blog-slider-wrapper .swiper-button-prev {
    left: auto;
    right: 100%;
    margin-right: 10px;
}

.custom-blog-slider-wrapper .swiper-button-next {
    right: auto;
    left: 100%;
    margin-left: 10px;
}

#nav {
    z-index: 99999;
}

#nav>li {
    margin-bottom: 0;
}

/* Sticky nav state applied by assets/custom.js */
.nav-wrap.stuck {
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.flickity-prev-next-button {
    width: 40px;
    height: 40px;
}

.custom-blog-slider-wrapper .swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.product-info .breadcrumbs a{
    color: #000;
}
.product-info .is-divider{
    display: none;
}
#ez-toc-container{
    width: 100%;
}

@media (max-width: 768px) {
    .custom-blog-slider-wrapper {
        padding: 0 50px;
    }

    .custom-blog-slider-wrapper .swiper-button-next,
    .custom-blog-slider-wrapper .swiper-button-prev {
        width: 40px;
        height: 40px;
    }

    .custom-blog-slider-wrapper .swiper-button-next:after,
    .custom-blog-slider-wrapper .swiper-button-prev:after {
        font-size: 16px;
    }
}

.nav-pills .tab a {
    padding: 16px 52px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.nav-pills .tab a span {
    font-family: var(--font-serif);
}

.nav-pills .tab a {
    border: 1px solid var(--primary-color);
    margin: 0 10px;
}

.tab-knowledge {
    margin-top: -92px;
}

.slider-style-container .flickity-slider>:not(.is-selected),
.slider-style-focus .flickity-slider>:not(.is-selected),
.slider-style-shadow .flickity-slider>:not(.is-selected) {
    opacity: 1;
}

.slider-bao-chi .img {
    overflow: hidden;
    border-radius: 20px !important;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 12px 0px;
    transform: scale(0.9);
}

.slider-bao-chi .flickity-slider,
.slider-bao-chi .flickity-viewport {
    min-height: 118px;
    margin-top: -12px;
    display: flex;
    align-items: center;
}

/* Tб»•ng thб»ѓ Form */
.hirun-consult-form {
    /* MГ u nб»Ѓn be nhбєЎt giб»‘ng бєЈnh */
    border-radius: 8px;
    font-family: Arial, sans-serif;
}

/* TiГЄu Д‘б»Ѓ */
.form-heading {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 32px;
    margin-bottom: 30px;
    color: #222;
}

.section-label {
    font-size: 16px;
    font-weight: 700;
    margin: 20px 0 15px;
    color: #333;
}

/* Chia cб»™t 2 bГЄn */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Ô nhập liệu (Input) */
.hirun-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    outline: none;
}

/* Phбє§n Radio Button (Nhu cбє§u) */
.demand-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Timeline (history shortcode) styles */
.p1_1_2 #timeline {
    margin-top: 40px;
}

.p1_1_2 .swiper_dsj,
.p1_1_2 .swiper-container {
    padding: 40px 0;
}

.p1_1_2 .swiper_dsj .swiper-wrapper {
    align-items: center;
}

.p1_1_2 .swiper_dsj .swiper-slide {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 30px 60px;
    box-sizing: border-box;
}

.p1_1_2 .swiper_dsj .swiper-slide img {
    width: 420px;
    height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.p1_1_2 .swiper_dsj .swiper-slide h4 {
    font-size: 42px;
    margin: 0 0 12px;
    color: #ffffff;
}

.p1_1_2 .swiper_dsj .swiper-slide p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0;
}

/* Large circular nav arrows */
.p1_1_2 .swiper-button-next,
.p1_1_2 .swiper-button-prev,
.p1_1_2 .timeline-controls .timeline-next,
.p1_1_2 .timeline-controls .timeline-prev {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
}

.p1_1_2 .swiper-button-next:after,
.p1_1_2 .swiper-button-prev:after {
    font-size: 28px;
    color: #fff;
}

/* Dates (bottom timeline) */
.p1_1_2 #dates {
    display: flex;
    gap: 40px;
    list-style: none;
    padding: 28px 32px;
    margin: 30px 0 0;
    overflow-x: auto;
    align-items: center;
    -webkit-overflow-scrolling: touch;
}

.p1_1_2 #dates li {
    white-space: nowrap;
}

/* Hide horizontal scrollbar for timeline dates while keeping scrollable */
.history-dates {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.history-dates::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
    height: 0;
}

.p1_1_2 #dates li a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    text-decoration: none;
    padding: 6px 8px;
    display: inline-block;
}

.p1_1_2 #dates li.active a {
    color: #ffffff;
    font-weight: 700;
}

/* timeline controls placement */
.p1_1_2 .timeline-controls {
    position: relative;
    margin-top: 18px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* adjust for smaller screens */
@media (max-width: 900px) {
    .p1_1_2 .swiper_dsj .swiper-slide {
        flex-direction: column;
    }


    /* Center the history swiper slide visually */
    .history-swiper {
        display: block;
    }

    .history-swiper .swiper-slide {
        display: flex;
        justify-content: center;
    }

    .history-item-inner {
        max-width: 1200px;
        width: 100%;
    }

    .p1_1_2 .swiper_dsj .swiper-slide img {
        width: 80%;
        height: auto;
    }

    .p1_1_2 #dates {
        gap: 18px;
    }
}

.radio-item {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #333;
    cursor: pointer;
}

.radio-item input[type="radio"] {
    margin-right: 10px;
    accent-color: #E86C35;
    /* Màu cam cho chấm tròn radio */
    transform: scale(1.2);
}

/* Input "Vui lГІng ghi rГµ" */
.other-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.input-other {
    margin-left: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    flex-grow: 1;
    font-size: 13px;
}

/* NГєt Submit */
.form-submit-center {
    text-align: center;
}

.form-submit-center input[type="submit"] {
    /* MГ u cam Д‘бє­m */
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 40px;
    border: none;
    border-radius: 50px;
    /* Bo trГІn nГєt */
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}


input.wpcf7-form-control.wpcf7-text {
    border-radius: 12px;
    border: 1px solid var(--primary-color);
    box-shadow: none;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner {
    font-size: 16px;
    line-height: 1;
    font-family: var(--font-serif);
}

/* --- CHIA LЖЇб»љI 2 Cб»˜T, 2 DГ’NG --- */
.demand-grid {
    display: grid;
    /* Chia thГ nh 2 cб»™t bбє±ng nhau */
    grid-template-columns: 1fr 1fr;
}

.demand-title {
    font-weight: bold;
    color: #fff;
}
.demand-grid .label-text {
    color: #fff;
}
.hirun-consult-form input.wpcf7-form-control.wpcf7-submit.has-spinner {
    margin: 0;
    background-color: #000;
}

.wpcf7-form {
    margin-bottom: 0;
}

/* --- Responsive cho Mobile --- */
/* Trên điện thoại sẽ tự về 1 cột để không bị vỡ */
@media (max-width: 768px) {

    .form-grid-2,
    .demand-grid {
        grid-template-columns: 1fr;
    }

    .option-other {
        flex-wrap: wrap;
        /* Nếu màn hình quá nhỏ thì input xuống dòng */
    }

    .input-part {
        width: 100%;
        margin-top: 8px;
        margin-left: 30px;
        /* Thụt vào cho thẳng hàng với chữ */
    }
}

.label-text {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-serif);
}

/* Style cho cГЎc input phГ­a trГЄn (TГЄn, SДђT...) */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Style cho Swiper Container */
.history-swiper {
    padding-bottom: 30px;
    /* Chừa chỗ cho dấu chấm phân trang */
    width: 100%;
}

/* Nб»™i dung bГЄn trong Slide (Layout 2 cб»™t) */
.history-item-inner {
    display: flex;
    align-items: center;
    /* CДѓn giб»Їa theo chiб»Ѓu dб»Ќc */
    gap: 40px;
    background: transparent;
}

.p1_1_4 {
    padding: 30px 0 !important;
}

/* Cб»™t бєўnh */
.history-col-img {
    flex: 0 0 50%;
    max-width: 50%;
}

.history-col-img img {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    display: block;
}

/* Cб»™t Nб»™i dung */
.history-col-content {
    flex: 1;
    color: #fff;
    padding-right: 20px;
}

.history-wrapper {
    padding: 30px 0;
}

#dates .selected {
    font-size: 24px !important;
}

#dates,
#timeline {
    margin-top: 0;
    padding-bottom: 0;
}

.history-year {
    font-size: 42px;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    line-height: 1;
}

.history-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #e0e0e0;
    text-align: justify;
}

/* Tùy chỉnh nút Next/Prev của Swiper */
.history-swiper .swiper-button-next,
.history-swiper .swiper-button-prev {
    color: #fff;
    /* MГ u mЕ©i tГЄn trбєЇng */
    background: rgba(0, 0, 0, 0.2);
    /* Nб»Ѓn mб»ќ */
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.history-swiper .swiper-button-next:after,
.history-swiper .swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
}

.history-swiper .swiper-button-next:hover,
.history-swiper .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Tùy chỉnh dấu chấm phân trang */
.history-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
    width: 10px;
    height: 10px;
}

.history-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
    transform: scale(1.2);
}

/* RESPONSIVE: Mobile */
@media (max-width: 768px) {
    .history-item-inner {
        flex-direction: column;
        /* Xбєїp chб»“ng бєЈnh lГЄn trГЄn */
        gap: 20px;
        text-align: left;
    }

    .history-col-img,
    .history-col-content {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .history-year {
        font-size: 32px;
    }

    /* бєЁn bб»›t nГєt mЕ©i tГЄn trГЄn mobile cho Д‘б»Ў rб»‘i, dГ№ng vuб»‘t tay */
    .history-swiper .swiper-button-next,
    .history-swiper .swiper-button-prev {
        display: none;
    }
}

.history-item-inner {
    max-width: 815px !important;
    margin: 0 auto;
}

/* RESPONSIVE: Giao diện trên điện thoại */
@media (max-width: 768px) {
    .history-item {
        flex-direction: column;
        /* Xбєїp chб»“ng lГЄn nhau */
        gap: 20px;
    }

    .history-col-img,
    .history-col-content {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .history-year {
        font-size: 28px;
    }
}

/* Mobile Responsive: Trên điện thoại sẽ về 1 cột */
@media (max-width: 768px) {

    .form-grid-2,
    .demand-options {
        grid-template-columns: 1fr;
    }

    .hirun-consult-form {
        padding: 20px;
    }
}

/* Style khung bao quanh sбєЈn phбє©m (Card) */
ul.products li.product {
    background-color: #fff;
    /* Nб»Ѓn trбєЇng */
    border: 1px solid #e0e0e0;
    /* Viб»Ѓn xГЎm mб»ќ */
    border-radius: 0px;
    /* бєўnh mбє«u cГі vбє» vuГґng hoбє·c bo nhбє№ */
    text-align: center;
    /* CДѓn giб»Їa toГ n bб»™ */
    padding: 20px;
    transition: box-shadow 0.3s;
}

ul.products li.product:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Style TiГЄu Д‘б»Ѓ (TrГЄn cГ№ng) */
ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    padding: 0 5px;
}

ul.products li.product .woocommerce-loop-product__title a {
    text-decoration: none;
    color: inherit;
}

/* Style бєўnh */
ul.products li.product .dfk-img-wrapper img {
    margin: 0 auto;
    height: 180px;
    /* Cб»‘ Д‘б»‹nh chiб»Ѓu cao Д‘б»ѓ hГ ng Д‘б»Ѓu nhau */
    object-fit: contain;
    /* ДђбєЈm bбєЈo бєЈnh khГґng bб»‹ mГ©o */
}

/* --- PHбє¦N DЖЇб»љI --- */

/* ДђЖ°б»ќng kбє» ngang */
.dfk-divider {
    height: 1px;
    width: 80%;
    /* NgбєЇn hЖЎn khung mб»™t chГєt */
    background-color: #ddd;
    margin: 15px auto;
}

/* MГґ tбєЈ ngбєЇn */
.dfk-short-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
    /* Giới hạn 2 dòng, có dấu ... nếu dài */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 10px;
}

/* Nút "Xem thêm" hình viên thuốc */
.dfk-btn-view-more {
    display: inline-block;
    padding: 8px 35px;
    background-color: #fff;
    border: 1px solid #ccc;
    /* Viб»Ѓn xГЎm */
    border-radius: 50px;
    /* Bo tròn tuyệt đối */
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}

.dfk-btn-view-more:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

.woocommerce-loop-product__title {
    color: #666;
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 2;
}

.woocommerce-loop-product__title a {
    color: #666 !important;
    font-weight: 700;
}

.woocommerce-loop-product__title a:hover {
    color: var(--primary-color) !important;
}

/* Utility: two-line clamp (use class .two-line-clamp) */
.two-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.woocommerce-page #main,
.woocommerce-page #wrapper {
    background-color: #eeeeee;
}

.product-small.col {}

.product-small.col .col-inner:hover,
.product-small.col .col-inner:hover .woocommerce-loop-product__title a {
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
}

.product-small .box-image img {
    max-height: 300px;
    object-fit: cover;
    object-position: center;

}

.box-text-products {
    padding: 20px;
}

.product-small.col .col-inner {
    background-color: #fff;
    padding: 0;
}

.product-small .box-excerpt {
    display: -webkit-box;
    font-size: 14px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.n_banner h5 {
    margin-bottom: 0 !important;
}

.breadcrumbs a,
.breadcrumbs {
    color: #FFF;
}

p {
    text-indent: 0 !important;
}

.mb-0 p {
    margin-bottom: 0 !important;
}


.form-lien-he input {
    border-radius: 0 !important;
    border: 1px solid #eee !important;
    box-shadow: none;
}

.products.row.row-small {
    margin: 0 -15px;
}

.products.row.row-small .product-small.col {
    padding: 0 15px 30px;
}


/* Sб»­a lб»—i rб»›t chб»Ї Heading 2 trong bГ i viбєїt */
.blog-single .entry-content h2 {
    font-size: 26px;
    /* Điều chỉnh kích thước font mặc định của H2 trong bài viết */
}

/* 1. TбєЎo khung thбє» bГ i viбєїt (Card) */
.post-item .col-inner {
    background-color: #ffffff;
    /* Nб»Ѓn trбєЇng */
    border-radius: 12px;
    /* Bo trГІn 4 gГіc */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Дђб»• bГіng nhбє№ */
    overflow: hidden;
    /* Ẩn phần thừa (quan trọng cho hiệu ứng zoom ảnh) */
    transition: all 0.3s ease;
    /* Hiệu ứng mượt mà */
    border: 1px solid #f0f0f0;
    /* Viб»Ѓn mб»ќ nhбє№ */
    height: 100%;
}

/* Hiệu ứng khi di chuột vào thẻ */
.post-item .col-inner:hover {
    transform: translateY(-5px);
    /* Nб»•i lГЄn trГЄn 1 chГєt */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    /* BГіng Д‘бє­m hЖЎn */
}

/* 2. Xử lý phần Ảnh đại diện */
.post-item .box-image .image-cover {
    border-radius: 12px 12px 0 0;
    /* Bo trГІn gГіc trГЄn trГ№ng vб»›i thбє» */
}

.post-item .box-image img {
    transition: transform 0.5s ease;
    /* Thб»ќi gian zoom бєЈnh */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Zoom бєЈnh khi hover vГ o thбє» cha */
.post-item .col-inner:hover .box-image img {
    transform: scale(1.1);
    /* PhГіng to бєЈnh 110% */
}

/* 3. Phбє§n nб»™i dung chб»Ї (Padding & Text) */
.post-item .box-text-inner {
    padding: 20px 25px !important;
    /* KhoбєЈng cГЎch lб»Ѓ trong */
    background-color: #fff;
}

/* TiГЄu Д‘б»Ѓ bГ i viбєїt */
.post-title {
    margin-bottom: 10px;
    min-height: auto;
}

.post-title a {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.3s;

    /* Giới hạn tiêu đề 2 dòng, dài quá hiện dấu ... */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-title a:hover {
    color: var(--primary-color);
    /* Màu cam chủ đạo (đổi màu này theo web của bạn) */
}

/* ДђЖ°б»ќng gбєЎch ngang nhб»Џ (Divider) */
.is-divider {
    margin: 15px auto;
    background-color: var(--primary-color);
    /* MГ u gбєЎch ngang */
    width: 40px;
    height: 3px;
    border-radius: 10px;
}

/* ДђoбєЎn trГ­ch dбє«n (Excerpt) */
.from_the_blog_excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;

    /* Giб»›i hбєЎn 3 dГІng */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 4. NgГ y thГЎng (Badge Date) */
.badge.post-date {
    top: 15px;
    left: 15px;
    margin: 0;
}

.post-item .col-inner:hover .badge-inner {
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

.badge-inner {
    /* Nб»Ѓn mГ u cam */
    color: var(--primary-color) !important;
    /* Chб»Ї trбєЇng */
    border: none;
    /* Bб»Џ viб»Ѓn cЕ© */
    border-radius: 8px;
    /* Bo gГіc ngГ y thГЎng */
    box-shadow: 0 4px 10px rgba(26, 124, 237, 0.4);
    /* Bóng của ngày tháng */
    padding: 5px 10px;
}

.post-date-day {
    font-size: 18px;
    font-weight: 800;
}

.post-date-month {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
}

.menu-item-gtranslate>a.gt-current-wrapper {
    display: none;
}

.menu-item-gtranslate .dropdown-menu {
    display: flex;
    list-style: none;
}

.menu-item-gtranslate .dropdown-menu img {
    width: 20px;
    height: 20px;
    border-radius: 99px;
    margin-left: 10px;
    object-fit: cover;
}

.hero-slider .flickity-page-dots {
    bottom: 20px;
}

.hero-slider .flickity-page-dots .dot {
    transform: none;
    background: #fff;
}

.hero-slider .flickity-button svg {
    border: none;
}


/* --- 1. Cбє¤U TRГљC CHUNG & Nб»ЂN --- */
.history-wrapper {
    position: relative;
    padding: 60px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}


/* Đưa nội dung lên trên lớp phủ */
.history-section-wrapper,
#timeline {
    position: relative;
    z-index: 1;
}

/* --- 2. SWIPER CONTENT (LAYOUT 2 Cб»˜T) --- */
.history-swiper {
    padding-bottom: 20px;
}

.history-item-inner {
    display: flex;
    align-items: center;
    /* CДѓn giб»Їa theo chiб»Ѓu dб»Ќc */
    justify-content: center;
    gap: 50px;
    /* KhoбєЈng cГЎch giб»Їa бєЈnh vГ  chб»Ї */
    padding: 0 50px;
    /* TrГЎnh bб»‹ nГєt Next/Prev Д‘ГЁ lГЄn */
}

/* Cб»™t бєўnh */
.history-col-img {
    flex: 0 0 45%;
    /* Chiбєїm 45% chiб»Ѓu rб»™ng */
    max-width: 45%;
}

.history-col-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    object-fit: cover;
    display: block;
}

/* Cб»™t Nб»™i dung */
.history-col-content {
    flex: 1;
    /* Chiбєїm phбє§n cГІn lбєЎi */
    text-align: left;
}

.history-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #e0e0e0;
}

/* Style nút Next/Prev mặc định của Swiper cho sáng lên */
.history-swiper .swiper-button-next,
.history-swiper .swiper-button-prev {
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
}

.history-swiper .swiper-button-next:hover,
.history-swiper .swiper-button-prev:hover {
    color: #fff;
    transform: scale(1.1);
}

/* бєЁn thanh cuб»™n mбє·c Д‘б»‹nh */
#dates::-webkit-scrollbar {
    height: 6px;
}

#dates li {
    flex: 0 0 auto;
    /* KhГґng cho co lбєЎi */
    position: relative;
    padding-top: 15px;
    /* Chừa chỗ cho dấu chấm tròn */
}

.col-mega-middle {
    background: #f9f9f9;
    height: auto;
    max-height: 100%;
}

.col-middle-vertical{
    display: flex;
    align-items: center;
}

.page-services-wrapper{
    padding: 100px 0;
    background: #eee;
}

.ss-contact-form .col-inner{
    background-image: url("/wp-content/uploads/2026/01/laze-bg.png");
    background-size: cover;
    background-position: center;
}

.title-name-category h1{
    font-weight: bold;
    margin-bottom: 0;
}

.title-name-category {
    position: relative;
    padding-bottom: 30px;
}

.title-name-category:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100px;
    height: 6px;
    margin-left: -50px;
    background-color: currentColor;
}

.ss-product-category .box .box-text h4{
    font-size: 20px;
    color: #333;
    font-weight: bold;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: 0.3s;
    margin-bottom: 30px;
}

.ss-product-category .box-image{
    background-image: url("/wp-content/uploads/2026/01/prod_img_bg.jpg");
    background-size: cover;
    background-position: center;
}

.ss-product-category .col-inner ul li{
    margin-left: 0 !important;
}

p.more {
    font-size: 20px;
}

.ss-banner-category h1.name{
    color: #0091db;
    font-weight: bold;
    font-size: 40px;
}

.ss-banner-category p{
    font-size: 15px;
    color: #333;
}

.product-action-group {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    max-width: 500px; 
}

.product-action-group a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    text-decoration: none;
    font-weight: 700;
    font-family: sans-serif;
    border-radius: 2px;
    box-sizing: border-box;
}

.btn-quote {
    background-color: #d71920;
    color: #ffffff;
    border: 1px solid #d71920;
    text-transform: uppercase;
    font-size: 14px;
    flex: 1; 
}

.btn-hotline {
    background-color: #ffffff;
    color: #d71920;
    border: 1px solid #d71920;
    font-size: 20px;
    flex: 1; 
}

.btn-hotline i {
    margin-right: 10px;
    font-size: 18px;
    transform: rotate(-30deg);
}

/* Hover effects */
.btn-quote:hover {
    background-color: #b0151b !important;
    border-color: #b0151b;
    color: #fff;
}

.btn-hotline:hover {
    background-color: #fff5f5 !important;
}
.ss-aboutus {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  padding-bottom: 0;
}

.ss-aboutus .section-bg {
  display: none !important;
}

.ss-aboutus::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 163%;
  min-height: 600px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234A90E2' fill-opacity='1' d='M0,288L48,272C96,256,192,224,288,213.3C384,203,480,213,576,202.7C672,192,768,160,864,138.7C960,117,1056,107,1152,90.7C1248,75,1344,53,1392,42.7L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 0;
  pointer-events: none;
}

.ss-aboutus .section-content {
  position: relative;
  z-index: 10;
}

.ss-question {
  position: relative;
  background-color: #ffffff;
  overflow: visible;
}

.ss-question .section-bg {
  display: none !important;
}

.ss-question::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234A90E2' d='M1000,0 L1000,1000 L300,1000 C-100,700 700,300 300,0 Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover; 
  z-index: 0;
}   

.ss-question .section-content {
  position: relative;
  z-index: 10;
}

/* --- 4. MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .history-wrapper {
        padding: 40px 0;
    }

    .history-item-inner {
        flex-direction: column;
        /* Xбєїp chб»“ng dб»Ќc */
        gap: 20px;
        padding: 0 15px;
        text-align: center;
    }

    .history-col-img {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .history-col-content {
        text-align: justify;
        /* CДѓn Д‘б»Ѓu chб»Ї cho Д‘бє№p trГЄn mobile */
    }

    .history-year {
        text-align: center;
        font-size: 30px;
    }

    /* бєЁn nГєt Next/Prev trГЄn mobile Д‘б»ѓ dГ№ng thao tГЎc vuб»‘t tay cho mЖ°б»Јt */
    .history-swiper .swiper-button-next,
    .history-swiper .swiper-button-prev {
        display: none;
    }

    /* Chỉnh lại thanh timeline trên mobile */
    #timeline {
        padding-top: 20px;
        margin-top: 20px;
    }

    #dates li a {
        font-size: 14px;
    }

    #dates li a.selected {
        font-size: 18px;
    }
}

@media only screen and (max-width: 48em) {

    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .box-doi-tac .box-image {
        width: 40% !important;
    }

    .custom-blog-slider-wrapper {
        padding: 0;
    }

    .tab-knowledge {
        margin-top: 0;
    }

    .input-part {
        margin-left: 0;
    }

    .hirun-consult-form input.wpcf7-form-control.wpcf7-submit {
        display: flex;
        margin: auto !important;
    }

    .hirun-consult-form {
        padding-top: 0;
        padding-bottom: 0;
    }

    .custom-blog-slider-wrapper .swiper-button-prev,
    .custom-blog-slider-wrapper .swiper-button-next {
        display: none;
    }

    ul.nav.nav-pills {
        justify-content: space-between;
    }

    .nav-placeholder {
        height: 30px !important;
    }

    .history-swiper .swiper-slide {
        height: 300px;
    }

    .services-ux-block {
        padding: 0 10px;
    }

    .cert-tabs-nav {
        overflow-x: scroll;
    }

    #dates {
        width: 510px;
    }

    .cert-tab-btn {
        min-width: 250px !important;
    }

    .dszzc {
        display: flex;
    }

    #nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    #nav>li {
        width: 100%;
    }

    .nav-wrap li a,
    .nav-wrap_no li a {
        white-space: nowrap;
    }

    .dszzc {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        height: max-content !important;
    }

    .dszzc img {
        width: 100% !important;
        height: 56% !important;
    }

    .xs-reverse {
        flex-direction: column-reverse;
    }

    .sucai {
        padding: 0 !important;
        max-width: 100%;
    }
}

/* Full Width Banner Category */
.ss-banner-category {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ss-banner-category .section-content {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
}

.ss-banner-category .section-content > .row {
    max-width: 100% !important;
    width: 100% !important;
}

.ss-banner-category .row-full-width {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.ss-banner-category .col,
.ss-banner-category [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ss-banner-category .col-inner {
    padding: 0 !important;
    margin: 0 !important;
}

.ss-banner-category .banner {
    border-radius: 0 !important;
}

.ss-banner-category .banner-inner {
    border-radius: 0 !important;
}

.ss-banner-category .banner-layers.container {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
}

.ss-banner-category .banner-bg {
    border-radius: 0 !important;
}

.ss-banner-category .banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}