/*
Theme Name: MatBaoWS
Description: This is a child theme for Flatsome Theme
Author: MatBaoWS Team
Template: flatsome
Version: 3.1
*/
/*************** ADD CUSTOM CSS HERE.   ***************/
.stats-section-modern .stat-number {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 2rem;
}

.stats-section-modern .icon-box-img {
    background-color: rgb(255 255 255 / 0.2);
    padding: 8px;
    border-radius: 0.75rem;
    max-width: 48px;
    max-height: 48px;
}

.stats-section-modern .icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        padding: 0 !important;
        margin: 0;
    }
}

.stats-section-modern .col {
    padding-bottom: 0;
}

.stats-section-modern .icon-box-img {
    background-color: rgb(255 255 255 / 0.2);
    /* padding: 6px; */
    border-radius: 0.75rem;
}

.stats-section-modern .stat-label {

    color: rgb(255 255 255 / 0.8);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.sub-title {
    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
    background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
    color: #0d9488;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: inline-block;
    width: fit-content;
    border-radius: 9999px;
    padding: 0.3rem 1rem;
    margin-bottom: 15px;

    * {
        margin: 0 !important;
    }
}

.sub-title-dark {
    background-color: rgb(13 148 136 / 0.2);
    color: var(--fs-color-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: inline-block;
    width: fit-content;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    margin-bottom: 15px;

    * {
        margin: 0 !important;
    }
}

.icon-box-img svg path,
.icon-box-img svg {
    fill: transparent !important;
}

.services-section {
    .box {
        background-color: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid #f1f5f9;
        transition: all 0.3s ease;
        overflow: hidden;

        &:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            transform: translateY(-5px);
        }
    }

    .box-image {
        position: relative;
        border-radius: 1rem 1rem 0 0;
        overflow: hidden;

        img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            display: block;
        }
    }

    .box-text {
        padding: 0;
    }

    .icon-box {
        padding: 1.5rem;
        position: relative;
    }

    .icon-box-img {
        position: absolute;
        top: -70px;
        left: 16px;
        background-color: #0d9488;
        width: 48px !important;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3);

        img {
            width: 32px;
            height: 32px;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }
    }

    .icon-box-text {
        padding-top: 0;

        h3 {
            font-size: 1.25rem;
            /* color: #1e3a8a; */
            font-weight: 700;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }

        p {
            font-size: 0.95rem;
            color: #64748b;
            line-height: 1.6;
            margin-bottom: 1.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        a.button {
            background-color: transparent !important;
            color: #0d9488 !important;
            padding: 0;
            margin: 0;
            font-size: 0.95rem;
            font-weight: 600;
            box-shadow: none !important;
            border: none !important;
            text-transform: none;
            display: inline-flex;
            align-items: center;

            &:hover {
                background-color: transparent !important;
            }

            span {
                color: inherit;
            }

            &::after {
                content: "\f061";
                font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome", sans-serif;
                font-weight: 900;
                margin-left: 8px;
                transition: transform 0.3s ease;
            }

            &:hover::after {
                transform: translateX(5px);
            }
        }
    }
}

/* --- ABOUT SECTION --- */
.about-section {

    /* Hình ảnh */
    .img-inner {
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .custom-col {

        margin-top: 30px;

    }

    /* Box xanh 15+ năm */
    .col-inner[style*="background-color"] {
        border-radius: 1rem;
        box-shadow: 0 10px 25px rgba(13, 148, 136, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem !important;
    }

    .box-text-absolute-about {

        position: absolute;
        bottom: -36px;
        right: -24px;

        .col-inner {
            padding: 1.25rem !important;
        }

        p {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.9) !important;
            margin: 0;
            line-height: 1.5;
            font-weight: 500;
        }

        p::first-line {
            font-size: 2.75rem;
            font-weight: 800;
            color: #ffffff;
            line-height: 1.2;
        }
    }


    /* Feature Icons */
    .icon-box {
        margin-bottom: 1.5rem;
        align-items: flex-start;

        .icon-box-img {
            background-color: #ccfbf1 !important;
            /* Xanh nhạt */
            border-radius: 12px;
            width: 48px !important;
            height: 48px !important;
            min-width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0 !important;

            .icon-inner {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            svg {
                width: 24px;
                height: 24px;

                path,
                .st0 {
                    /* fill: #0d9488 !important; */
                    /* Xanh đậm */
                }
            }
        }

        .icon-box-text {
            padding-top: 0;

            h4 {
                font-size: 1rem;
                font-weight: 700;
                margin-bottom: 0.25rem;
            }

            p {
                font-size: 0.85rem;
                color: #64748b;
                line-height: 1.5;
                margin-bottom: 0;
            }
        }
    }

    /* Button */
    a.button.primary {
        background-color: #0d9488 !important;
        border-radius: 9999px !important;
        padding: 0 2rem;
        font-size: 1rem;
        font-weight: 600;
        text-transform: none;
        box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3) !important;
        transition: all 0.3s ease;
        margin-top: 1rem;

        &:hover {
            background-color: #0f766e !important;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(13, 148, 136, 0.4) !important;
        }

        i {
            font-size: 0.9em;
        }
    }
}

/* --- WHY CHOOSE SECTION --- */
.why-choose-section {
    .text-center {
        h2 {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #ffffff;
        }

        p {
            /* color: #94a3b8; */
            /* font-size: 1.05rem; */
        }
    }

    .benefits-grid {
        margin-top: 2rem;

        .col {
            padding-bottom: 30px;
        }

        .col-inner {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 1rem;
            padding: 2rem !important;
            height: 100%;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.05);

            &:hover {
                transform: translateY(-5px);
                background-color: rgba(255, 255, 255, 0.08);
                border-color: rgba(255, 255, 255, 0.15);
            }
        }

        .icon-box-img {
            background-color: #0d9488 !important;
            border-radius: 12px;
            width: 48px !important;
            height: 48px !important;
            min-width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 1.5rem 0 !important;

            svg {
                width: 24px;
                height: 24px;

                path,
                .st0 {
                    /* fill: #ffffff !important; */
                }
            }
        }

        .icon-box-text {
            h3 {
                font-size: 1.15rem;
                font-weight: 700;
                color: #ffffff;
                margin-bottom: 0.75rem;
                line-height: 1.4;
            }

            p {
                font-size: 0.9rem;
                color: #94a3b8;
                line-height: 1.6;
                margin-bottom: 0;
            }
        }
    }
}

/* --- LOGO SCROLL MARQUEE --- */
.logo-scroll-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    padding: 3rem 0;
    /* Hiệu ứng mờ 2 bên mép để nhìn mượt hơn */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-scroll-track {
    display: inline-flex;
    align-items: center;
    gap: 4rem;
    /* Khoảng cách giữa các logo */
    /* Thời gian 30s có thể điều chỉnh để chạy nhanh hay chậm */
    animation: scroll-marquee 30s linear infinite;
    width: max-content;
}

.logo-scroll-track:hover {
    /* Dừng cuộn khi di chuột vào */
    animation-play-state: paused;
}

/* Sửa lỗi nếu dùng Flatsome Image Element */
.logo-scroll-track>* {
    flex-shrink: 0;
    margin: 0 !important;
    width: auto !important;
    /* Ghi đè flatsome width */
}

.logo-scroll-track img {
    height: 9rem !important;
    /* Chiều cao cố định cho logo */
    width: auto !important;
    object-fit: contain;
    /* Làm xám logo để nhìn đồng bộ, khi hover sẽ hiện màu gốc */
    /* filter: grayscale(100%) opacity(0.5); */
    transition: all 0.3s ease;
}
.logo-scroll-track .ux-logo{
    width: 200px !important;
}
.logo-scroll-track:hover img {
    /* Khi trỏ vào cả track thì hiện màu tất cả hoặc chỉ hiện màu cái được hover */
}

.logo-scroll-track img:hover {
    /* filter: grayscale(0%) opacity(1); */
    transform: scale(1.05);
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Cuộn đi đúng 1 nửa chiều dài (chính xác với cấu trúc lặp đôi) */
        transform: translateX(calc(-50% - 2rem));
    }
}

/* --- NEWS SECTION --- */
.news-section {
    background-color: #f8fafc;
    /* Nền xám nhạt */

    /* Nút Xem tất cả trên cùng */
    .button.is-link {
        color: #0d9488;
        font-weight: 600;
        text-transform: none;
        font-size: 1rem;

        &:hover {
            color: #0f766e;
        }
    }

    .col {
        padding-bottom: 30px;
        /* Tránh bị cắt bóng */
    }

    .box-blog-post {
        background-color: #ffffff;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        /* Chuẩn bị cho label absolute */

        &:hover {
            /* transform: translateY(-5px); */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .box-image {
            border-radius: 1rem 1rem 0 0;
            overflow: hidden;
            width: 100%;
            height: 200px;
            /* Chiều cao cố định 200px theo yêu cầu */
            flex-shrink: 0;
            display: block;

            .image-cover {
                padding-top: 0 !important;
                height: 100%;
            }

            img {
                height: 100% !important;
                object-fit: cover;
                /* Đảm bảo ảnh không bị méo */
            }
        }

        .box-text {
            padding: 1.5rem !important;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            background-color: transparent;
            position: static !important;
            /* Để label có thể ra ngoài box-text */

            .box-text-inner {
                position: static !important;
                display: flex;
                flex-direction: column;
                height: 100%;
            }
        }

        /* Category Label / Badge (Đặt lên trên hình) */
        .cat-label {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background-color: #0d9488 !important;
            /* Xanh ngọc */
            color: #ffffff !important;
            padding: 0.35rem 1rem !important;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: capitalize !important;
            /* Giống hình: Vận Tải Biển, Hải Quan */
            z-index: 10;
            margin: 0;
            opacity: 1 !important;
            /* Ghi đè Flatsome op-7 */
            box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3);
            pointer-events: none;
            /* Tránh cản trở click hình */
        }

        /* Post Meta (Date) */
        .post-meta {
            font-size: 0.85rem;
            font-weight: 500 !important;
            /* Giảm độ đậm ngày tháng */
            color: #94a3b8 !important;
            margin-bottom: 0.75rem;
            opacity: 1 !important;
            display: flex;
            align-items: center;
            order: -1;
            /* Đẩy lên trên cùng */

            &::before {
                content: "\f133";
                /* Icon Lịch */
                font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
                font-weight: 400;
                margin-right: 0.5rem;
            }
        }

        /* Title */
        .post-title {
            font-size: 1.15rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 0.75rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

            a {
                transition: color 0.3s ease;

                &:hover {
                    color: var(--fs-color-primary);
                }
            }
        }

        /* Ẩn gạch ngang mặc định */
        .is-divider {
            display: none;
        }

        /* Excerpt */
        .from_the_blog_excerpt {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* Giới hạn 2 dòng giống hình */
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
        }

        /* Button "Đọc thêm" */
        .button.is-link {
            padding: 0;
            margin-top: auto;
            color: #0d9488 !important;
            font-weight: 600;
            font-size: 0.9rem;
            align-self: flex-start;
            /* Nút nằm sang trái */

            &::after {
                content: "\f061";
                /* Mũi tên sang phải */
                font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
                font-weight: 900;
                margin-left: 0.5rem;
                font-size: 0.85em;
                transition: transform 0.3s ease;
            }

            &:hover::after {
                transform: translateX(3px);
            }
        }
    }
}

/* --- CONTACT SECTION --- */
.contact-section {
    background-color: #ffffff;
    /* Khớp hình */

    /* --- LEFT COLUMN: INFO --- */
    .contact-info {
        .icon-box {
            margin-bottom: 2rem;

            .icon-box-img {
                width: 45px !important;
                margin-right: 0 !important;

                .icon-inner {
                    background-color: #ccfbf1;
                    border-radius: 0.75rem;
                    width: 45px;
                    height: 45px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0;

                    svg {
                        width: 22px;
                        height: 22px;
                        /* fill: #0d9488 !important; */

                        * {
                            /* fill: #0d9488 !important; */
                            stroke: var(--fs-color-primary) !important;
                            color: var(--fs-color-primary) !important;
                        }
                    }
                }
            }

            .icon-box-text {
                h4 {
                    font-size: 1rem;
                    color: #1e293b;
                    font-weight: 700;
                    margin-bottom: 0.25rem;
                    line-height: 1.2;
                    margin-top: 0 !important;
                }

                p {
                    font-size: 0.95rem;
                    color: #64748b;
                    line-height: 1.6;
                    margin-bottom: 0;
                }
            }
        }

        /* Title: Theo Dõi Chúng Tôi */
        h4 {
            font-size: 1.05rem;
            color: #1e293b;
            font-weight: 700;
            margin-bottom: 1rem;
            margin-top: 2rem;
        }

        .social-icons {
            display: flex;
            gap: 0.75rem;
            margin-top: 1.5rem;
            /* Đẩy icon xuống để nhường chỗ cho tooltip */

            .icon.button {
                background-color: #ccfbf1 !important;
                color: #0d9488 !important;
                border: 0 !important;
                box-shadow: none !important;
                /* Xóa viền/outline mặc định của Flatsome */
                outline: none !important;
                border-radius: 0.5rem !important;
                width: 40px;
                height: 40px;
                margin: 0 !important;
                padding: 0 !important;
                display: flex !important;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;

                i {
                    font-size: 1.1rem;
                    line-height: 1;
                    /* Căn giữa hoàn toàn */
                    margin: 0;
                }

                &:hover {
                    background-color: #0d9488 !important;
                    color: #ffffff !important;
                    transform: translateY(-3px);
                    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3) !important;
                }
            }
        }
    }

    /* --- RIGHT COLUMN: FORM --- */
    .wpcf7 {
        background-color: rgb(249 250 251);
        border-radius: 1rem;
        padding: 2.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);

        @media (max-width: 550px) {
            padding: 1.5rem;
        }
    }

    .cf7-wrap {
        .cf7-row {
            display: flex;
            flex-wrap: wrap;
            margin-left: -10px;
            margin-right: -10px;

            .cf7-col {
                width: 50%;
                padding: 0 10px;
            }

            .cf7-col-full {
                width: 100%;
                padding: 0 10px;
            }

            @media (max-width: 768px) {
                .cf7-col {
                    width: 100%;
                }
            }
        }

        label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 0.5rem;
            display: block;
        }

        input[type="text"],
        input[type="tel"],
        input[type="email"],
        select,
        textarea {
            width: 100%;
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            padding: 0.6rem 1rem;
            font-size: 0.95rem;
            color: #334155;
            box-shadow: none;
            transition: border-color 0.3s ease;
            margin-bottom: 1.5rem;
            height: auto;

            &:focus {
                border-color: #0d9488;
                outline: none;
                box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
            }
        }

        textarea {
            min-height: 80px;
            height: 100px;
            /* Ép chiều cao cố định để đè rows="10" mặc định của CF7 */
            resize: vertical;
        }

        input[type="submit"] {
            width: 100%;
            background-color: #0d9488 !important;
            color: #ffffff !important;
            font-weight: 600;
            font-size: 1rem;
            padding: 0.5rem;
            /* Giảm padding để nút bớt cao */
            border-radius: 0.5rem;
            border: none;
            transition: all 0.3s ease;
            margin-top: 0.5rem;

            &:hover {
                background-color: #0f766e !important;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2);
            }
        }

        .wpcf7-spinner {
            position: absolute;
            /* Tránh đẩy lệch nút khi loading */
        }
    }
}

/* --- FOOTER SECTION --- */
#footer {
    background-color: #1F425D;
    /* Nền xanh đen */
    color: #cbd5e1;
    border-top: none;

    /* Base Typography */
    p {
        color: #cbd5e1;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    /* Titles */
    h4 {
        color: #ffffff;
        font-size: 1.15rem;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 1.5rem;
        position: relative;
        padding-left: 1rem;
        display: inline-block;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0%;
            height: 100%;
            width: 3px;
            background-color: #0d9488;
            /* Kẻ xanh ngọc */
            border-radius: 2px;
        }
    }

    /* Column 1: Logo, Text, Socials */
    .row>.col:nth-child(1) {
        h4 {
            display: none;
            /* Ẩn h4 cột 1 theo hình mẫu */
        }

        .logo-footer {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding-left: 85px;
            /* Khoảng trống cho hình logo nằm bên trái */
            min-height: 70px;
            /* Đảm bảo đủ chiều cao cho 2 dòng text */
            margin-bottom: 1.5rem;
            margin-left: 0 !important;
            margin-right: auto !important;
            width: 100% !important;
            /* Đè inline style chiều rộng của Builder */
            text-align: left !important;

            .img-inner {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 70px;
                /* Kích thước logo */
                margin: 0;
                background-color: #ffffff;
                /* Nền trắng tạo viền */
                padding: 4px;
                /* Độ dày viền trắng */
                border-radius: 12px;
                /* Bo góc viền ngoài */
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

                img {
                    display: block;
                    width: 100%;
                    height: auto;
                    border-radius: 8px;
                    /* Bo góc ảnh bên trong để đồng bộ với viền */
                }
            }

        }

        /* Social Icons (Nếu người dùng thêm element share icons vào cột này) */
        .social-icons {
            display: flex;
            gap: 0.75rem;
            margin-top: 1.5rem;

            .icon.button {
                background-color: rgba(255, 255, 255, 0.1) !important;
                color: #cbd5e1 !important;
                border: 0 !important;
                outline: none !important;
                border-radius: 0.5rem !important;
                width: 38px;
                height: 38px;
                margin: 0 !important;
                padding: 0 !important;
                display: flex !important;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;

                i {
                    font-size: 1rem;
                    line-height: 1;
                    margin: 0;
                }

                &:hover {
                    background-color: #0d9488 !important;
                    color: #ffffff !important;
                    transform: translateY(-3px);
                }
            }
        }
    }

    /* Column 2 & 3: UX Menus */
    .ux-menu {
        .ux-menu-link {
            padding: 0;

            .ux-menu-link__link {
                color: #cbd5e1;
                font-size: 0.9rem;
                display: flex;
                align-items: center;
                transition: color 0.3s ease, transform 0.3s ease;
                padding: 0;

                &::before {
                    content: "\f105";
                    /* Mũi tên > FontAwesome */
                    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
                    font-weight: 900;
                    font-size: 0.8rem;
                    color: #cbd5e1;
                    margin-right: 0.75rem;
                    transition: color 0.3s ease;
                }

                &:hover {
                    color: #0d9488;
                    transform: translateX(5px);

                    &::before {
                        color: #0d9488;
                    }
                }
            }
        }
    }

    /* Column 4: Contact Info */
    .row>.col:nth-child(4) {
        p {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.25rem;

            &::before {
                font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
                font-weight: 900;
                color: #0d9488;
                /* Màu xanh ngọc */
                font-size: 1.1rem;
                margin-right: 0.75rem;
                margin-top: 0.1rem;
                width: 20px;
                text-align: center;
                flex-shrink: 0;
            }

            /* Map marker */
            &:nth-of-type(1)::before {
                content: "\f3c5";
            }

            /* Phone */
            &:nth-of-type(2)::before {
                content: "\f095";
            }

            /* Envelope */
            &:nth-of-type(3)::before {
                content: "\f0e0";
            }

            a {
                color: #cbd5e1;
                transition: color 0.3s ease;

                &:hover {
                    color: #0d9488;
                }
            }
        }
    }

    /* Absolute Footer (Bottom Bar) */
    .absolute-footer {
        /* background-color: #1a364d; */
        /* Màu nền bottom bar tối hơn nền chính */
        padding: 1.5rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        color: #94a3b8;
        font-size: 0.9rem;

        .copyright-footer {
            color: #94a3b8;

            a {
                color: #94a3b8;
                transition: color 0.3s ease;

                &:hover {
                    color: #ffffff;
                }
            }
        }

        /* Khi user thêm nội dung phía phải (Điều khoản bảo mật) */
        .footer-secondary {
            a {
                color: #94a3b8;
                transition: color 0.3s ease;
                margin-left: 1.5rem;

                &:hover {
                    color: #ffffff;
                }
            }
        }
    }
}

/* --- BACK TO TOP BUTTON --- */
#top-link.back-to-top {
    background-color: #0d9488 !important;
    /* Xanh ngọc */
    color: #ffffff !important;
    /* Icon màu trắng */
    border: none !important;
    /* Xóa viền */
    border-radius: 50% !important;
    /* Hình tròn hoàn hảo */
    width: 45px;
    height: 45px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4);
    transition: all 0.3s ease;

    /* Ghi đè class is-outline mặc định của theme */
    &::before {
        display: none !important;
    }

    i {
        font-size: 1.2rem;
        line-height: 1;
        margin: 0;
    }

    &:hover {
        background-color: #0f766e !important;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(13, 148, 136, 0.6);
    }
}

/* --- HERO SLIDER --- */
.hero-logistics-slider {

    /* Đổi màu overlay sang tone xanh lá đậm thay vì xanh dương đậm */
    .overlay {
        background-color: rgba(22, 78, 71, 0.75) !important;
    }

    /* Khung text "Đối tác logistics..." dạng pill box */
    .text-box-content p:first-of-type {
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.4);
        padding: 5px 18px;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        text-transform: none !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        margin-bottom: 20px !important;

        /* Thêm icon mỏ neo (anchor) */
        &::before {
            content: "\f13d";
            font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
            font-weight: 900;
            margin-right: 8px;
            font-size: 1rem;
        }
    }

    /* Tiêu đề chính */
    .text-box-content h1 {
        font-size: 58px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        margin-bottom: 20px !important;

        span {
            color: #f59e0b !important;
            /* Đổi màu cam tươi hơn mẫu HTML ban đầu */
        }
    }

    @media (max-width: 768px) {
        .text-box-content h1 {
            font-size: 38px !important;
        }
    }

    /* Chỉnh kích thước chữ đoạn mô tả */
    .text-box-content p:not(:first-of-type) {
        font-size: 16px !important;
        max-width: 90%;
    }

    /* Tùy chỉnh các nút trong Slider */
    .text-box-content a.button {
        border-radius: 50px !important;
        /* Bo góc hoàn toàn */
        padding: 8px 25px !important;
        font-weight: 600;
        margin-right: 15px;
        margin-top: 10px;
        display: inline-flex;
        align-items: center;
        transition: all 0.3s ease;

        /* Ẩn icon góc phải mặc định */
        i {
            display: none !important;
        }

        /* Khởi tạo icon bên trái */
        &::before {
            font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
            font-weight: 900;
            margin-right: 8px;
            font-size: 1.1rem;
        }
    }

    /* Nút: Khám Phá Dịch Vụ */
    .text-box-content a.button.secondary {
        background-color: #0d9488 !important;
        /* Xanh ngọc */
        color: #ffffff !important;
        border: none !important;

        &::before {
            content: "\f5fd";
            /* Icon Layer Group (Các khối hộp) */
        }

        &:hover {
            background-color: #0f766e !important;

            box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4);
        }
    }

    /* Nút: Liên Hệ Tư Vấn */
    .text-box-content a.button.white {
        background-color: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        color: #ffffff !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);

        &::before {
            content: "\f4ad";
            /* Icon Comment Dots (Khung chat) */
        }

        &:hover {
            background-color: #ffffff !important;
            color: #0d9488 !important;

        }
    }

    /* Slider Navigation Dots (Dấu chấm chuyển slide) */
    .flickity-page-dots {
        bottom: 25px !important;
    }

    .flickity-page-dots .dot {
        width: 8px;
        height: 8px;
        background-color: rgba(255, 255, 255, 0.4);
        border: none;
        border-radius: 50%;
        margin: 0 4px;
        opacity: 1;
        transition: all 0.3s ease;
    }

    .flickity-page-dots .dot.is-selected {
        width: 24px;
        height: 8px;
        background-color: #ffffff;
        border-radius: 10px;
        /* Biến thành hình viên thuốc (pill) */
    }
}


/* --- HEADER STYLING --- */
#header {

    /* Căn giữa toàn bộ cụm Menu theo chiều ngang (giữa Logo và Nút) */
    .header-main .flex-left.flex-grow .header-nav {
        justify-content: center !important;
    }

    /* Logo Header */
    #logo {
        a {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding-left: 65px;
            /* Để trống không gian cho icon logo */
            min-height: 55px;
            /* Chiều cao tối thiểu để chứa 2 dòng chữ */
            text-decoration: none !important;
            white-space: nowrap;
            /* Ngăn text logo bị rớt dòng */

            img {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);

                height: auto !important;
                max-height: none !important;
            }


        }

        /* Ẩn tagline cũ của theme */
        .logo-tagline {
            display: none !important;
        }
    }

    /* Đảm bảo li chứa a tự động căn giữa theo chiều dọc */
    .header-nav>li {
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Menu Items */
    .header-nav>li>a {
        color: #334155 !important;
        font-weight: 600 !important;
        text-transform: capitalize !important;
        /* Viết hoa chữ cái đầu theo hình */
        font-size: 15px !important;
        padding: 8px 18px !important;
        margin: 0;
        border-radius: 8px;
        /* Bo góc nhẹ */
        transition: all 0.3s ease;
        height: auto !important;
        line-height: 1.5 !important;
    }

    /* Hover State */
    .header-nav>li>a:hover {
        color: #0d9488 !important;
        background-color: #ccfbf1 !important;
    }

    /* Active / Current State (Nút Trang Chủ đang active ở hình) */
    .header-nav>li.current-menu-item>a,
    .header-nav>li.active>a {
        background-color: #ccfbf1 !important;
        /* Xanh ngọc nhạt */
        color: #0d9488 !important;
    }

    /* Nút: Gọi Ngay */
    .header-button-1 .button.primary {
        background-color: #0d9488 !important;
        /* Xanh ngọc đặc trưng */
        color: #ffffff !important;
        border: none !important;
        border-radius: 9999px !important;
        /* Hình viên thuốc */
        font-weight: 600 !important;
        padding: 0 24px !important;
        height: 42px !important;
        line-height: 42px !important;
        text-transform: capitalize !important;
        box-shadow: 0 4px 10px rgba(13, 148, 136, 0.2);
        transition: all 0.3s ease;

        i {
            font-size: 1.1rem;
            margin-right: 8px;
        }

        &:hover {
            background-color: #0f766e !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(13, 148, 136, 0.3);
        }
    }

    /* --- SUB-MENU (Dropdown) STYLING --- */
    .header-nav .sub-menu {
        background-color: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        padding: 12px 0 !important;
        min-width: 270px !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        margin-top: 10px !important;
    }

    /* Ghi đè màu nền dark mặc định của theme */
    .header-nav .sub-menu.dark {
        background-color: #ffffff !important;
    }

    .header-nav .sub-menu>li {
        margin: 0 !important;
    }

    .header-nav .sub-menu>li>a {
        color: #334155 !important;
        /* Xám đen slate-700 */
        font-weight: 500 !important;
        font-size: 15px !important;
        padding: 12px 24px !important;
        text-transform: capitalize !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: none !important;
        /* Bỏ viền dưới mặc định */
        background-color: transparent !important;
    }

    /* Hover effect for sub-menu items */
    .header-nav .sub-menu>li>a:hover {
        background-color: transparent !important;
        color: #0d9488 !important;
        /* Chữ xanh ngọc khi hover */
        transform: translateX(6px);
        /* Trượt nhẹ sang phải mượt mà */
    }

    /* Icon chung cho tất cả các mục Sub-menu */
    .header-nav .sub-menu>li>a::before {
        font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome";
        font-weight: 900;
        margin-right: 14px;
        color: #0d9488;
        font-size: 16px;
        width: 24px;
        text-align: center;
        transition: all 0.3s ease;
    }

    /* Gán Icon động theo thứ tự menu hiện tại của bạn */
    .header-nav .sub-menu>li:nth-child(1)>a::before {}

    /* Kho bãi - warehouse */
    .header-nav .sub-menu>li:nth-child(2)>a::before {}

    /* Logistics Xanh - seedling */
    .header-nav .sub-menu>li:nth-child(3)>a::before {}

    /* Chuỗi cung ứng - sitemap */
    .header-nav .sub-menu>li:nth-child(4)>a::before {}

    /* Hải quan - file-alt */
    .header-nav .sub-menu>li:nth-child(5)>a::before {}

    /* Nội địa - truck */
    .header-nav .sub-menu>li:nth-child(6)>a::before {}

    /* Quốc tế - ship */

    /* Fallback cho các mục thêm sau (nếu có) */
    .header-nav .sub-menu>li:nth-child(n+7)>a::before {}

    /* check-circle */

    /* Căn chỉnh lại icon sổ xuống (mũi tên góc phải nếu có sub-menu cấp 2) */
    .header-nav .sub-menu>li>a::after {
        margin-left: auto;
        /* Đẩy mũi tên sang cùng bên phải */
    }
}

#header {
    .header-nav .sub-menu.dark {
        background-color: #ffffff !important;
        top: 100%;

        .sub-menu {
            top: 0 !important;
        }
    }
}

/* ==========================================================================
   LỊCH SỬ HÌNH THÀNH (TIMELINE) SECTION
   ========================================================================== */

/* Nền trắng sáng, ghi đè màu nền xanh đậm của builder */
.timeline-section {
    background-color: #ffffff !important;
}

/* Loại bỏ màu chữ trắng/vàng và viền cam inline do UX Builder sinh ra */

.timeline-section .text>div {
    border-left: none !important;
    padding-left: 0 !important;
}

/* --- Tiêu đề (Sub-title) hình viên thuốc --- */
/* .timeline-section #col-2104443224 h4 {
    display: inline-block;
    background-color: #ccfbf1 !important;
    color: #0d9488 !important;
    padding: 6px 20px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
}


.timeline-section h2 {
    color: #1e293b !important;
    font-weight: 800 !important;
    font-size: 32px !important;
} */

/* --- Cấu trúc Timeline Dọc --- */
.timeline-section .timeline-row {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    max-width: 900px;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
}

/* Đường dọc trung tâm (Trục Timeline) */
.timeline-section .timeline-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #ccfbf1;
    /* Xanh ngọc nhạt */
    transform: translateX(-50%);
    z-index: 1;
}

/* Thiết lập từng mốc thời gian (Block 50% màn hình) */
.timeline-section .timeline-row .col {
    width: 50% !important;
    max-width: 50% !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    position: relative;
    z-index: 2;
}

/* Phần tử Bên TRÁI (Left Side) - Đan xen nhau */
.timeline-section .row:nth-of-type(2) .col:nth-child(odd),
.timeline-section .row:nth-of-type(3) .col:nth-child(even) {
    align-self: flex-start;
    padding-right: 20px !important;
    text-align: right !important;
}

/* Phần tử Bên PHẢI (Right Side) - Đan xen nhau */
.timeline-section .row:nth-of-type(2) .col:nth-child(even),
.timeline-section .row:nth-of-type(3) .col:nth-child(odd) {
    align-self: flex-end;
    padding-left: 20px !important;
    text-align: left !important;
}



/* Gạch ngang Bên TRÁI (kéo từ sát lề phải ra) */
.timeline-section .row:nth-of-type(2) .col:nth-child(odd)::before,
.timeline-section .row:nth-of-type(3) .col:nth-child(even)::before {
    right: 0;
}

/* Gạch ngang Bên PHẢI (kéo từ sát lề trái ra) */
.timeline-section .row:nth-of-type(2) .col:nth-child(even)::before,
.timeline-section .row:nth-of-type(3) .col:nth-child(odd)::before {
    left: 0;
}

/* --- Cục mốc thời gian (Năm) dạng viên thuốc --- */
.timeline-section .timeline-row h3 {
    display: inline-block !important;
    /* Ép không cho kéo dài hết dòng */
    width: auto !important;
    /* Thu gọn vừa đủ chữ */
    background-color: #0d9488 !important;
    /* Xanh ngọc đậm */
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 18px !important;
    border-radius: 9999px;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.2);
}

/* --- Dấu chấm tròn trên trục dọc --- */
.timeline-section .timeline-row .col::after {
    content: '';
    position: absolute;
    top: 35px;
    /* Căn ngang với viên thuốc h3 */
    width: 14px;
    height: 14px;
    background-color: #0d9488;
    border-radius: 50%;
    border: 3px solid #ffffff;
    /* Viền trắng tách biệt với trục */
    z-index: 3;
    box-shadow: 0 0 0 4px rgba(204, 251, 241, 0.5);
    /* Hào quang xanh ngọc nhẹ */
}

/* Vị trí chấm của Bên TRÁI (bám vào lề phải của khối 50%) */
.timeline-section .row:nth-of-type(2) .col:nth-child(odd)::after,
.timeline-section .row:nth-of-type(3) .col:nth-child(even)::after {
    right: -7px;
}

/* Vị trí chấm của Bên PHẢI (bám vào lề trái của khối 50%) */
.timeline-section .row:nth-of-type(2) .col:nth-child(even)::after,
.timeline-section .row:nth-of-type(3) .col:nth-child(odd)::after {
    left: -7px;
}

/* --- Typography Nội dung --- */
.timeline-section .timeline-row h4 {
    font-size: 20px !important;
    color: #1e293b !important;
    /* Xanh đen navy */
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.timeline-section .timeline-row p {
    font-size: 15px !important;
    color: #475569 !important;
    /* Xám đen đọc chữ mượt hơn */
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* --- Mobile Responsive (Thu trục về 1 bên) --- */
@media (max-width: 849px) {

    /* Đẩy trục dọc sang sát lề trái */
    .timeline-section .timeline-row::before {
        left: 20px;
        transform: none;
    }

    /* Chuyển tất cả các cột thành 100% width và dồn về bên phải trục */
    .timeline-section .timeline-row .col,
    .timeline-section .row:nth-of-type(2) .col:nth-child(odd),
    .timeline-section .row:nth-of-type(3) .col:nth-child(even),
    .timeline-section .row:nth-of-type(2) .col:nth-child(even),
    .timeline-section .row:nth-of-type(3) .col:nth-child(odd) {
        width: 100% !important;
        max-width: 100% !important;
        align-self: flex-start !important;
        padding-left: 20px !important;
        padding-right: 15px !important;
        text-align: left !important;
    }

    /* Đưa toàn bộ các dấu chấm về đè lên trục dọc bên trái */
    .timeline-section .timeline-row .col::after {
        left: 13px !important;
        right: auto !important;
    }

    /* Sửa lại đường gạch ngang mờ nối từ lề trái */
    .timeline-section .timeline-row .col::before {
        left: 20px !important;
        right: auto !important;
        width: 40px !important;
    }
}

/* ==========================================================================
   TẦM NHÌN — SỨ MỆNH — GIÁ TRỊ CỐT LÕI SECTION
   ========================================================================== */

.vmv-section {
    background-color: #f8fafc !important;
    /* Nền trang xám cực nhạt */
}

/* --- Tiêu đề (Sub-title) hình viên thuốc --- */
/* .vmv-section .sub-title p {
    display: inline-block;
    background-color: #ccfbf1 !important;
color: #0d9488 !important;
padding: 6px 20px;
border-radius: 9999px;
font-size: 12px;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

*/
/* --- Tiêu đề chính --- */


/* --- Thiết kế 3 thẻ Card (Cột) --- */
.vmv-section .row:last-child .col>.col-inner {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    height: 100%;
    transition: all 0.3s ease;
    border-top: 4px solid transparent;
    /* Chuẩn bị cho viền màu */
    overflow: hidden;
}

.vmv-section .row:last-child .col>.col-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Viền trên cùng đặc trưng cho từng Card */
.vmv-section .row:last-child .col:nth-child(1)>.col-inner {
    border-top-color: #0d9488;
}

/* Tầm nhìn: Xanh ngọc */
.vmv-section .row:last-child .col:nth-child(2)>.col-inner {
    border-top-color: #f59e0b;
}

/* Sứ mệnh: Vàng cam */
.vmv-section .row:last-child .col:nth-child(3)>.col-inner {
    border-top-color: #1e3a8a;
}

/* Giá trị: Xanh đậm */

/* --- Xử lý Icon Box --- */
.vmv-section .icon-box-img {
    margin-bottom: 20px;
    width: 100% !important;
    text-align: left;
}

/* Khung nền chứa Icon */
.vmv-section .icon-box-img .icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

/* Ẩn cục diện SVG xám đen mặc định của Flatsome */
.vmv-section .icon-box-img svg {
    display: none !important;
    fill: transparent !important;
}

/* Tạo Icon FontAwesome thay thế */
.vmv-section .icon-box-img .icon::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome";
    font-weight: 900;
    font-size: 22px;
}

/* Màu nền & Icon cụ thể cho Card 1: Tầm Nhìn */
.vmv-section .row:last-child .col:nth-child(1) .icon-box-img .icon {
    background-color: #ccfbf1;
}

.vmv-section .row:last-child .col:nth-child(1) .icon-box-img .icon::before {
    content: "\f06e";
    /* fa-eye */
    color: #0d9488;
}

/* Màu nền & Icon cụ thể cho Card 2: Sứ Mệnh */
.vmv-section .row:last-child .col:nth-child(2) .icon-box-img .icon {
    background-color: #fef3c7;
}

.vmv-section .row:last-child .col:nth-child(2) .icon-box-img .icon::before {
    content: "\f140";
    /* fa-bullseye */
    color: #f59e0b;
}

/* Màu nền & Icon cụ thể cho Card 3: Giá Trị */
.vmv-section .row:last-child .col:nth-child(3) .icon-box-img .icon {
    background-color: #e0e7ff;
}

.vmv-section .row:last-child .col:nth-child(3) .icon-box-img .icon::before {
    content: "\f3a5";
    /* fa-gem */
    color: #1e3a8a;
}

/* --- Typography bên trong Card --- */
.vmv-section .icon-box-text h3 {
    font-size: 20px !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.vmv-section .icon-box-text p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    /* Xám đậm hơn chút để dễ đọc */
    margin-bottom: 0;
}

/* --- Style riêng cho Checkmark trong phần Giá trị cốt lõi --- */
/* Vì người dùng dùng thẻ <strong> để bắt đầu mỗi dòng, ta gắn checkmark vào trước nó */
.vmv-section .row:last-child .col:nth-child(3) .icon-box-text p strong {
    display: inline-block;
    margin-top: 8px;
    /* Tách các dòng với nhau */
}

.vmv-section .row:last-child .col:nth-child(3) .icon-box-text p strong::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome";
    font-weight: 900;
    content: "\f058";
    /* fa-check-circle */
    color: #0d9488;
    /* Màu xanh ngọc của checkmark */
    margin-right: 8px;
    font-size: 14px;
}

/* ==========================================================================
   ĐỘI NGŨ LÃNH ĐẠO (TEAM) SECTION
   ========================================================================== */
.team-section {
    background-color: #f8fafc !important;
    /* Nền xám cực nhạt giống mẫu */
}

/* --- Tiêu đề (Sub-title) hình viên thuốc --- */
.team-section #col-2075527706 h4 {
    display: inline-block;
    background-color: #ccfbf1 !important;
    color: #0d9488 !important;
    padding: 6px 20px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
}

/* --- Thẻ thông tin Thành Viên (Card) --- */
.team-section .row:last-child .col>.col-inner {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    /* Giữ ảnh gọn trong bo góc */
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 0 !important;
    /* Loại bỏ padding mặc định để ảnh tràn viền */
}

.team-section .row:last-child .col>.col-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Xử lý khoảng trống của phần chứa ảnh */
.team-section .row:last-child .col .uxb-image,
.team-section .row:last-child .col .img {
    margin-bottom: 0 !important;
}

/* Ép khung ảnh khi upload luôn đồng nhất kích thước */
.team-section .row:last-child .col .img img {
    height: 250px !important;
    object-fit: cover !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
}

/* --- Căn chỉnh khu vực Chữ (Text Block) --- */
.team-section .row:last-child .col .text {
    padding: 25px 20px !important;
    text-align: center !important;
    position: relative;
    padding-bottom: 0px !important;
    /* Chừa không gian trống dưới cùng để gắn icon MXH */
}

/* Tên thành viên */
.team-section .row:last-child .col .text h4 {
    color: #1e293b !important;
    /* Xanh đen */
    font-size: 17px !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

/* Chức vụ (Ghi đè màu vàng thành xanh ngọc) */
.team-section .row:last-child .col .text p:nth-of-type(1) {
    color: #0d9488 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

/* Đoạn mô tả ngắn */
.team-section .row:last-child .col .text p:nth-of-type(2) {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* Khoảng cách giữa text và nút */
.team-section .row:last-child .col .text {
    padding-bottom: 15px !important;
}

/* --- Social Media Buttons (LinkedIn, Facebook) --- */
.team-section .row:last-child .col .col-inner>a.button {
    background-color: #ccfbf1 !important;
    /* Xanh ngọc siêu nhạt */
    color: #0d9488 !important;
    /* Xanh ngọc đậm */
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 6px 25px 6px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

/* Xoá margin thừa của icon bên trong nút */
.team-section .row:last-child .col .col-inner>a.button i {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Hiệu ứng Hover */
.team-section .row:last-child .col .col-inner>a.button:hover {
    background-color: #0d9488 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3) !important;
}

/* ==========================================================================
   CHỨNG NHẬN & GIẢI THƯỞNG SECTION
   ========================================================================== */


/* --- Thẻ thông tin (Card) --- */
.certifications-section .row:nth-of-type(2) .col>.col-inner {
    background-color: #f8fafc !important;
    /* Xám siêu nhạt mặc định */
    border-radius: 12px !important;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    height: 100%;
}

/* Hiệu ứng Hover - Đổi nền trắng và viền xanh (Như card thứ 3 trong mẫu) */
.certifications-section .row:nth-of-type(2) .col>.col-inner:hover {
    background-color: #ffffff !important;
    border-color: #0d9488 !important;
    /* Viền xanh ngọc */
    box-shadow: 0 10px 30px rgba(13, 148, 136, 0.1) !important;
    transform: translateY(-5px);
    cursor: pointer;
}

/* --- Icon Style (Tự động thay thế SVG rỗng của user) --- */
.certifications-section .icon-box-img {
    margin: 0 auto 15px auto !important;
    width: 100% !important;
}

.certifications-section .icon-box-img .icon {
    width: 64px !important;
    height: 64px !important;
    background-color: #ccfbf1 !important;
    /* Nền xanh ngọc nhạt */
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Ẩn SVG cục tẩy đen xì mặc định do builder sinh ra */
.certifications-section .icon-box-img img,
.certifications-section .icon-box-img svg {
    /* padding: 10px !important; */
    width: 32px;
}

.certifications-section .icon-box-img svg path {
    /* fill: var(--fs-color-primary) !important; */
}

/* FontAwesome chung cho Icon */
.certifications-section .icon-box-img .icon::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome";
    font-weight: 900;
    font-size: 20px;
    color: #0d9488;
    /* Màu xanh ngọc đậm */
}


/* --- Text Typography --- */
.certifications-section .icon-box-text h4 {
    color: #1e293b !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
}

.certifications-section .icon-box-text p {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   CALL TO ACTION SECTION
   ========================================================================== */

/* --- Container --- */
.cta-section {}

/* --- Text Typography --- */
.cta-section #text-2912658538 h2 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
}

.cta-section #text-2912658538 p {
    font-size: 15px !important;
    color: #cbd5e1 !important;
    /* Xám nhạt */
    margin-bottom: 30px !important;
}

/* --- Buttons --- */
.cta-section a.button {
    border-radius: 9999px !important;
    /* Bo tròn hoàn toàn (viên thuốc) */
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 0 30px !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 10px 15px 10px !important;
    /* Khoảng cách giữa 2 nút */
    transition: all 0.3s ease !important;
}

.cta-section a.button span {
    margin: 0 !important;
}

/* Ẩn các icon mặc định của builder */
.cta-section a.button i {
    display: none !important;
}

/* Chèn icon mới sang bên trái (đặt ::before) */
.cta-section a.button::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome";
    font-weight: 900;
    font-size: 16px;
    margin-right: 8px;
    /* Khoảng cách icon và chữ */
}

/* Nút 1: Liên Hệ Tư Vấn */
.cta-section a.button.alert {
    background-color: #0d9488 !important;
    /* Xanh ngọc đậm */
    color: #ffffff !important;
    border: 1px solid #0d9488 !important;
}

/* Icon bong bóng chat (fa-comment-alt) */
.cta-section a.button.alert::before {
    content: "\f27a";
}

.cta-section a.button.alert:hover {
    background-color: #0f766e !important;
    border-color: #0f766e !important;
    box-shadow: 0 5px 20px rgba(13, 148, 136, 0.4) !important;
    transform: translateY(-3px);
}

/* Nút 2: Xem Dịch Vụ */
.cta-section a.button.white {
    background-color: rgba(255, 255, 255, 0.08) !important;
    /* Nền trong suốt siêu mờ */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Icon xếp lớp (fa-layer-group) */
.cta-section a.button.white::before {
    content: "\f5fd";
}

.cta-section a.button.white:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-3px);
}

/* ==========================================================================
   ABOUT HERO SECTION
   ========================================================================== */

/* --- Gradient Overlay --- */
.about-hero-section .section-bg-overlay {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    background-color: transparent !important;
    /* Xoá màu nền cứng do builder chèn */
}

/* --- Container Text --- */
.about-hero-section #text-2082358679 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Pill Title (VỀ CHÚNG TÔI) --- */
.about-hero-section h4 {
    display: inline-flex !important;
    align-items: center !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    /* Đổi vàng thành trắng */
    padding: 6px 20px !important;
    border-radius: 9999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin-bottom: 25px !important;
    backdrop-filter: blur(4px);
    width: fit-content !important;
}

/* Thêm icon toà nhà kho (fa-warehouse) trước VỀ CHÚNG TÔI */
.about-hero-section h4::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome";
    font-weight: 900;
    content: "\f494";
    margin-right: 8px;
    font-size: 14px;
}

/* --- H1 (Phương Nam Thịnh Vượng) --- */
.about-hero-section h1 {
    font-size: 48px !important;
    margin-bottom: 0px !important;
    /* Kéo sát vào h3 */
    color: #ffffff !important;
    text-transform: none !important;
}

/* --- H3 (Đối Tác Logistics Tin Cậy) --- */
.about-hero-section h3 {
    font-size: 48px !important;
    /* To bằng H1 */
    font-weight: 800 !important;
    color: #FDB913 !important;
    /* Màu vàng cam */
    opacity: 1 !important;
    margin-bottom: 25px !important;
    text-transform: none !important;
}

/* Thêm gạch ngang (—) trước H3 */
.about-hero-section h3::before {
    content: "\2014  ";
    /* Em-dash */
    color: #FDB913;
}

/* --- Paragraph --- */
.about-hero-section p {
    max-width: 750px;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* --- Responsive Mobile --- */
@media screen and (max-width: 849px) {

    .about-hero-section h1,
    .about-hero-section h3 {
        font-size: 32px !important;
    }
}

@media screen and (max-width: 549px) {

    .about-hero-section h1,
    .about-hero-section h3 {
        font-size: 26px !important;
    }

    .list-custom-mobile .col {
        padding-bottom: 0;
    }

    .box-text-absolute-about {
        display: none;
    }
}

.services-section svg *,
.stats-section-modern svg * {
    stroke: rgb(255, 255, 255) !important;
    color: rgb(255, 255, 255) !important;
}

/* ==========================================================================
   BÀI VIẾT LIÊN QUAN SECTION (RELATED POSTS)
   ========================================================================== */

/* Tiêu đề section */
.mbws-related-posts h3,
#post-list h3 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 25px !important;
}

/* Container của mỗi bài viết */
.mbws-related-posts .post-item .col-inner,
#post-list .post-item .col-inner {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.mbws-related-posts .post-item .col-inner:hover,
#post-list .post-item .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Ảnh bài viết */
.mbws-related-posts .box-image,
#post-list .box-image {
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}

/* Badge chuyên mục (Vận tải biển, Hải quan...) */
.mbws-related-posts .badge,
#post-list .badge {
    position: absolute;
    top: 15px !important;
    left: 15px !important;
    margin: 0 !important;
    z-index: 9;
}

.mbws-related-posts .badge-inner,
#post-list .badge-inner {
    background-color: #0d9488 !important;
    /* Xanh ngọc */
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    border-radius: 9999px !important;
    /* Bo tròn dạng pill */
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3) !important;
    border: none !important;
    text-transform: none !important;
    line-height: 1 !important;
}

/* Khu vực nội dung Text */
.mbws-related-posts .box-text,
#post-list .box-text {
    padding: 25px !important;
    text-align: left !important;
}

.mbws-related-posts .box-text-inner,
#post-list .box-text-inner {
    position: relative;
    /* Chừa không gian cho nút Đọc Thêm giả */
}

/* Ngày đăng (Nếu có) */
.mbws-related-posts .post-date,
.mbws-related-posts .is-divider+p.is-xsmall,
#post-list .post-date,
#post-list .is-divider+p.is-xsmall {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-bottom: 12px !important;
    text-transform: none !important;
}

.mbws-related-posts .post-date::before,
.mbws-related-posts .is-divider+p.is-xsmall::before,
#post-list .post-date::before,
#post-list .is-divider+p.is-xsmall::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome";
    content: "\f133";
    /* fa-calendar-alt */
    font-weight: 400;
    margin-right: 6px;
    font-size: 13px;
    color: #94a3b8;
}

/* Ẩn dải phân cách mặc định */
.mbws-related-posts .is-divider,
#post-list .is-divider {
    display: none !important;
}

/* Tiêu đề bài viết */
.mbws-related-posts .post-title,
#post-list .post-title {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.mbws-related-posts .post-title a,
#post-list .post-title a {
    color: #1e293b !important;
    /* Xanh đen */
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
}

.mbws-related-posts .post-item .col-inner:hover .post-title a,
#post-list .post-item .col-inner:hover .post-title a {
    color: #0d9488 !important;
    /* Đổi màu xanh ngọc khi hover */
}

/* Đoạn trích dẫn (Excerpt) */
.mbws-related-posts .from_the_blog_excerpt,
#post-list .from_the_blog_excerpt {
    color: #64748b !important;
    /* Xám */
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    /* Giới hạn 3 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nút "Đọc Thêm ->" bằng pseudo-element */
/* .mbws-related-posts .box-text-inner::after,
#post-list .box-text-inner::after {
    content: "Đọc Thêm \2192";
    position: absolute;
    bottom: 0;
    left: 0;
    color: #0d9488 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
} */

.mbws-related-posts .post-item .col-inner:hover .box-text-inner::after,
#post-list .post-item .col-inner:hover .box-text-inner::after {
    padding-left: 8px;
    /* Trượt mũi tên sang phải khi hover */
}

/* Style cho nút điều hướng slider của Flickity */
.mbws-related-posts .flickity-prev-next-button,
#post-list .flickity-prev-next-button {
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    width: 40px !important;
    height: 40px !important;
    transition: all 0.3s ease !important;
}

.mbws-related-posts .flickity-prev-next-button:hover,
#post-list .flickity-prev-next-button:hover {
    background-color: #0d9488 !important;
}

.mbws-related-posts .flickity-prev-next-button:hover svg,
#post-list .flickity-prev-next-button:hover svg {
    fill: #ffffff !important;
}

/* ==========================================================================
   PAGE HEADER (PAGE TITLE)
   ========================================================================== */
.mbws-pageheader .title-overlay {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    background-color: transparent !important;
}

.mbws-pageheader .page-title-inner {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.mbws-pageheader .title-wrapper {
    text-align: center !important;
    margin-bottom: 5px !important;
    flex: none !important;
    width: 100% !important;
}

.mbws-pageheader .title-content {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    flex: none !important;
    width: 100% !important;
}

/* ==========================================================================
   CONTACT FORM 7 STYLING (MATCHING DESIGN)
   ========================================================================== */

/* Fix layout grid to match image (Họ tên 50%, Số ĐT 50%, Email 100%) */
.wpcf7-form .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.wpcf7-form .col:has([data-name="your-name"]) {
    width: 50% !important;
    max-width: 50% !important;
    flex-basis: 50% !important;
    order: 1;
}

.wpcf7-form .col:has([data-name="your-phone"]) {
    width: 50% !important;
    max-width: 50% !important;
    flex-basis: 50% !important;
    order: 2;
}

.wpcf7-form .col:has([data-name="your-mail"]) {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    order: 3;
}

.wpcf7-form .col:has([data-name="content"]) {
    order: 4;
}

.wpcf7-form .col:has(.wpcf7-submit) {
    order: 5;
}

@media screen and (max-width: 849px) {

    .wpcf7-form .col:has([data-name="your-name"]),
    .wpcf7-form .col:has([data-name="your-phone"]) {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* Input & Textarea Styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    color: #475569 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    height: 48px !important;
}

.wpcf7-form textarea {
    /* height: auto !important; */

    resize: vertical !important;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
    outline: none !important;
}

/* Ẩn placeholder mặc định vì đã có nhãn (Label) */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: transparent !important;
}

/* Tạo nhãn (Fake Label) bên trên các input */
.wpcf7-form .wpcf7-form-control-wrap {
    position: relative;
    display: block;
    /* Tạo khoảng trống phía trên cho Label */
    margin-bottom: 5px !important;
}

.wpcf7-form .wpcf7-form-control-wrap::before {
    position: absolute;
    top: -28px;
    left: 0;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    /* Xám đậm */
}

/* Submit Button Container */
.wpcf7-form .col.pb-0 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 15px !important;
}

/* Nút Submit gốc (làm ẩn chữ để dùng icon) */
.wpcf7-form input[type="submit"] {
    background-color: #0d9488 !important;
    color: transparent !important;
    /* Ẩn chữ mặc định */
    border: none !important;
    border-radius: 10px !important;
    height: 54px !important;
    width: 100% !important;
    /* Nút rộng 100% */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #0f766e !important;
    box-shadow: 0 6px 15px rgba(13, 148, 136, 0.3) !important;
    transform: translateY(-2px);
}

/* Thêm Icon và Text mới đè lên nút submit */
.wpcf7-form .col.pb-0::after {
    content: "\f1d8 \00a0 Gửi Yêu Cầu Tư Vấn";
    /* Icon máy bay giấy + Text */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome", sans-serif;
    font-weight: 900;
    position: absolute;
    color: #ffffff;
    font-size: 16px;
    font-family: inherit;
    /* Cho phần chữ kế thừa font của web */
    pointer-events: none;
    /* Xuyên thao tác click xuống nút thật bên dưới */
}

/* ==========================================================================
   SERVICES MENU (BUTTON STYLE)
   ========================================================================== */
#menu-services-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Ôm sát chiều dài của chữ */
    gap: 8px;
    /* Khoảng cách giữa các nút */
}

#menu-services-menu .menu-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
}

#menu-services-menu .menu-item a {
    width: 100%;
    position: relative;
    padding: 12px 20px 12px 35px !important;
    display: inline-flex;
    align-items: center;
    background-color: #f4f4f5 !important;
    /* Màu xám nhạt */
    color: #1e293b !important;
    /* Xanh đen */
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

#menu-services-menu .menu-item a::before {
    content: "\f105";
    /* Mũi tên góc phải (fa-angle-right) */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome", sans-serif;
    font-weight: 900;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #0d9488;
    /* Màu xanh ngọc đồng bộ */
    font-size: 14px;
    transition: all 0.3s ease;
}

#menu-services-menu .menu-item a:hover {
    background-color: #0d9488 !important;
    /* Đổi nền sang xanh ngọc khi hover */
    color: #ffffff !important;
    /* Đổi chữ sang trắng */
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2) !important;
}

#menu-services-menu .menu-item a:hover::before {
    color: #ffffff !important;
    /* Đổi icon sang trắng */
    transform: translateY(-50%) translateX(4px);
    /* Hiệu ứng trượt nhẹ khi hover */
}

/* ==========================================================================
   SOCIAL SHARE ICONS (SQUARE ROUNDED)
   ========================================================================== */
.blog-share .social-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.blog-share .social-icons a.icon.button {
    background-color: var(--fs-color-primary) !important;
    /* Nền xanh ngọc siêu nhạt */
    color: #ffffff !important;
    /* Icon xanh ngọc đậm */
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    /* Khử viền tròn mặc định, bo góc hình hộp */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.blog-share .social-icons a.icon.button i {
    font-size: 18px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.blog-share .social-icons a.icon.button:hover {
    background-color: #0d9488 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(13, 148, 136, 0.3) !important;
}

/* ==========================================================================
   SIDEBAR & WIDGETS
   ========================================================================== */

/* Thiết kế khung thẻ (Card) chung cho các Widget */
#secondary .widget {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

/* Tiêu đề Widget */
#secondary .widget-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 20px !important;
    display: block !important;
    border-bottom: none !important;
}

#secondary .widget-title > span {
    position: relative;
    padding-bottom: 8px;
}

/* Thanh gạch dưới tiêu đề màu xanh ngọc */
#secondary .widget-title > span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #0d9488;
    border-radius: 2px;
}

/* Ẩn dải phân cách mặc định của Flatsome */
#secondary .is-divider {
    display: none !important;
}

/* --- 1. WIDGET TÌM KIẾM (SEARCH) --- */
#secondary .widget_search .searchform {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    transition: all 0.3s ease;
}

#secondary .widget_search .searchform:focus-within {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
}

#secondary .widget_search input.search-field {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    color: #475569 !important;
    height: auto !important;
}

#secondary .widget_search button.submit-button {
    background-color: transparent !important;
    color: #94a3b8 !important;
    border: none !important;
    box-shadow: none !important;
    width: 50px !important;
    height: 100% !important;
    transition: all 0.3s ease !important;
}

#secondary .widget_search button.submit-button:hover {
    color: #0d9488 !important;
    background-color: rgba(13, 148, 136, 0.05) !important;
}

/* --- 2. WIDGET BÀI VIẾT MỚI (RECENT POSTS) --- */
#secondary .flatsome_recent_posts ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#secondary .flatsome_recent_posts .recent-blog-posts-li {
    padding: 15px 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
}

#secondary .flatsome_recent_posts .recent-blog-posts-li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Ảnh thumbnail bài viết */
#secondary .flatsome_recent_posts .badge-square {
    border-radius: 8px !important;
    overflow: hidden !important;
    width: 65px !important;
    height: 65px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

#secondary .flatsome_recent_posts .badge-inner {
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Tiêu đề bài viết */
#secondary .flatsome_recent_posts a {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    transition: color 0.3s ease !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px !important;
}

#secondary .flatsome_recent_posts a:hover {
    color: #0d9488 !important;
}

/* Ẩn dòng chữ bình luận bị tắt gây rối mắt */
#secondary .flatsome_recent_posts .post_comments {
    display: none !important;
}

/* --- 3. WIDGET CHUYÊN MỤC (CATEGORIES) --- */
#secondary .widget_categories ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#secondary .widget_categories li {
    padding: 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    transition: all 0.3s ease !important;
}

#secondary .widget_categories li:last-child {
    border-bottom: none !important;
}

#secondary .widget_categories li a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 0 !important;
    color: #475569 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Icon mũi tên */
#secondary .widget_categories li a::before {
    content: "\f105"; /* fa-angle-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "fontawesome", sans-serif;
    font-weight: 900;
    margin-right: 12px;
    color: #cbd5e1;
    font-size: 12px;
    transition: all 0.3s ease;
}

#secondary .widget_categories li:hover a {
    color: #0d9488 !important;
    padding-left: 5px !important;
}

#secondary .widget_categories li:hover a::before {
    color: #0d9488 !important;
}

/* Trạng thái danh mục đang chọn (Active Category) */
#secondary .widget_categories li.current-cat a {
    color: #0d9488 !important;
}

#secondary .widget_categories li.current-cat a::before {
    color: #0d9488 !important;
}

/* Custom Gallery Tabs Styling for Thư viện ảnh Page */
.page-id-1124 .tabbed-content ul.nav {
    gap: 1.2rem !important;
    justify-content: center !important;
    border-bottom: none !important;
    margin-bottom: 2rem !important;
}
.page-id-1124 .tabbed-content ul.nav li.tab {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0.5rem !important;
}
.page-id-1124 .tabbed-content ul.nav li.tab a {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.page-id-1124 .tabbed-content ul.nav li.tab.active a {
    background: linear-gradient(135deg, #0d9488 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35) !important;
}
.page-id-1124 .tabbed-content ul.nav li.tab a:hover {
    border-color: #0d9488 !important;
    color: #0d9488 !important;
}
.page-id-1124 .tabbed-content ul.nav li.tab.active a:hover {
    color: #ffffff !important;
}