/* ==========================================================================
   NẠP PHÔNG CHỮ HỆ THỐNG (MONA SANS TOÀN WEBSITE)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

/* ==========================================================================
   1. GLOBAL DESIGN TOKENS (KHAI BÁO BIẾN TOÀN HỆ THỐNG)
   ========================================================================== */

/* --- 1.1 DESKTOP BREAKPOINT (MẶC ĐỊNH > 1024PX) --- */
:root {
    /* --- COLORS SYSTEM (BẢNG MÀU THƯƠNG HIỆU GLOBAL) --- */
    --color-primary: #ffffff;        /* Nền chính */
    --color-accent: #456C35;         /* Accent color 1 (Xanh lá chính) */
    --color-neutral-green: #9FB877;  /* Main Neutral color (Xanh nhạt) */
    --color-accent-dark: #374426;    /* Accent color 2 (Xanh đẫm) */
    --color-bg-beige: #DFDDD1;       /* Background beige */

    /* Biến phụ trợ tương thích */
    --primary: var(--color-primary);
    --accent: var(--color-accent);
    --neutral-green: var(--color-neutral-green);
    --accent-dark: var(--color-accent-dark);
    --bg: var(--color-bg-beige);

    --text-title: #374426;           /* Title */
    --text-dark: #0F0F0F;            /* Dark text */
    --text-white: #F7F8F9;           /* White text */
    --text-grey: #BBCDBD;            /* Grey text */

    /* --- FONTS SYSTEM (TẤT CẢ SỬ DỤNG MONA SANS) --- */
    --font-mona: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: var(--font-mona);
    --font-sans: var(--font-mona);
    --font-poppins: var(--font-mona);

    /* --- TYPOGRAPHY VARIABLES (DESKTOP) --- */
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-h3: 25px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 15px;

    /* Biến Variant Size (L, M, S) cho các thẻ */
    --fs-h2-l: 40px;   --lh-h2-l: 1.5;   --fw-h2-l: 600;   --ff-h2-l: var(--font-mona);
    --fs-h2-m: 32px;   --lh-h2-m: 1.25;  --fw-h2-m: 600;   --ff-h2-m: var(--font-mona);
    --fs-h2-s: 20px;   --lh-h2-s: 1.68;  --fw-h2-s: 400;   --ff-h2-s: var(--font-mona);

    --lh-h3: 1.25;     --fw-h3: 600;     --ff-h3: var(--font-mona);
    --lh-h4: 1.25;     --fw-h4: 400;     --ff-h4: var(--font-mona);
    --lh-h5: 1.25;     --fw-h5: 500;     --ff-h5: var(--font-mona);

    /* Text & Body Variables (Desktop) */
    --fs-body-l: 20px;    --lh-body-l: 1.5;    --fw-body-l: 400;    --ff-body-l: var(--font-mona);
    --fs-body-m: 16px;    --lh-body-m: 1.5;    --fw-body-m: 400;    --ff-body-m: var(--font-mona);
    --fs-body-s: 14px;    --lh-body-s: 1.5;    --fw-body-s: 400;    --ff-body-s: var(--font-mona);
    --fs-body-mobi: 14px; --lh-body-mobi: 1.5; --fw-body-mobi: 400; --ff-body-mobi: var(--font-mona);
    --fs-caption: 13px;   --lh-caption: 1.5;   --fw-caption: 400;   --ff-caption: var(--font-mona);

    /* Buttons & Menus Variables (Desktop) */
    --fs-btn-m: 14px;  --lh-btn-m: 1.5;  --fw-btn-m: 500;  --ff-btn-m: var(--font-mona);
    --fs-btn-s: 12px;  --lh-btn-s: 1.5;  --fw-btn-s: 500;  --ff-btn-s: var(--font-mona);
    --fs-menu-m: 16px; --lh-menu-m: 1.5; --fw-menu-m: 500; --ff-menu-m: var(--font-mona);
    --fs-menu-s: 14px; --lh-menu-s: 1.5; --fw-menu-s: 400; --ff-menu-s: var(--font-mona);

    /* --- DESIGN TOKENS (LAYOUT & SPACING TOÀN WEBSITE) --- */
    --radius-pill: 30px;
    --radius-card: 8px;
    --radius-atom: 4px;

    /* Padding gọn nhẹ giữa các section toàn website (Desktop 30px, Tablet 20px, Mobile 15px) */
    --section-pad-y: 30px;
    --card-gap: 20px;
    --transition-base: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

    --space-heading-bottom: 8px;
    --space-text-bottom: 20px;

    /* Màu mặc định kế thừa */
    --container-color: var(--text-dark);
    --heading-color: var(--text-title);
}

/* --- 1.2 TABLET BREAKPOINT (MAX-WIDTH: 1024PX) --- */
@media screen and (max-width: 1024px) {
    :root {
        --fs-h1: 32px;
        --fs-h2: 26px;
        --fs-h3: 22px;
        --fs-h4: 18px;
        --fs-h5: 16px;
        --fs-h6: 14px;

        --fs-h2-l: 32px;
        --fs-h2-m: 26px;
        --fs-h2-s: 15px;

        --fs-body-l: 18px;
        --fs-body-m: 15px;
        --fs-body-s: 13px;
        --fs-body-mobi: 13px;

        --fs-btn-m: 14px;
        --fs-btn-s: 12px;

        /* Section Padding giảm dần ở màn hình Tablet */
        --section-pad-y: 20px;
    }
}

/* --- 1.3 MOBILE BREAKPOINT (MAX-WIDTH: 767PX) --- */
@media screen and (max-width: 767px) {
    :root {
        --fs-h1: 26px;
        --fs-h2: 22px;
        --fs-h3: 18px;
        --fs-h4: 16px;
        --fs-h5: 15px;
        --fs-h6: 13px;

        --fs-h2-l: 26px;
        --fs-h2-m: 22px;
        --fs-h2-s: 14px;

        --fs-body-l: 16px;
        --fs-body-m: 14px;
        --fs-body-s: 12px;
        --fs-body-mobi: 12px;

        --fs-btn-m: 13px;
        --fs-btn-s: 11px;

        /* Section Padding giảm dần ở màn hình Mobile */
        --section-pad-y: 15px;
    }
}


/* ==========================================================================
   2. RESET & CHỐNG TRÀN TOÀN TRANG (GLOBAL RESET)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    font-family: var(--font-mona) !important;
    font-size: var(--fs-body-m);
    color: var(--text-dark);
    background-color: var(--color-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/* ==========================================================================
   3. QUY CHUẨN THẺ VĂN BẢN HỆ THỐNG (H1-H6, P, SPAN, A, DIV)
   ========================================================================== */

/* Thẻ Heading lấy màu mặc định từ biến (có thể override qua container) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-mona) !important;
    color: var(--heading-color, var(--text-title));
    margin-top: 0;
    margin-bottom: var(--space-heading-bottom, 8px) !important;
    text-rendering: optimizeLegibility;
}

h1, .h1 {
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: 1.25;
}

h2, .h2 {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.3;
}

h3, .h3 {
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.35;
}

h4, .h4 {
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: 1.35;
}

h5, .h5 {
    font-size: var(--fs-h5);
    font-weight: 500;
    line-height: 1.4;
}

h6, .h6 {
    font-family: var(--font-sans);
    font-size: var(--fs-h6);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Thẻ Đoạn Văn (P) kế thừa màu từ container/biến global */
p {
    font-family: var(--font-sans);
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m, 1.5);
    font-weight: var(--fw-body-m, 400);
    color: inherit;
    margin-top: 0;
    margin-bottom: var(--space-text-bottom, 20px) !important;
}

/* Thẻ Chữ Trong Dòng (SPAN) & Thẻ Cấu Trúc (DIV) */
span {
    font-family: inherit;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    display: inline;
}

div {
    box-sizing: border-box;
}

/* Utility cho thẻ span */
span.text-accent {
    color: var(--color-accent) !important;
}
span.text-highlight {
    color: var(--color-accent);
    font-weight: 600;
}

/* Thẻ Liên Kết (A) */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: var(--transition-base);
    font-family: inherit;
    cursor: pointer;
}

a:hover,
a:focus {
    color: var(--color-accent-dark);
    text-decoration: none;
    outline: none;
}

p a, li a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

p a:hover, li a:hover {
    color: var(--color-accent-dark);
}


/* ==========================================================================
   4. CLASS TIỆN ÍCH PHÔNG CHỮ (TYPOGRAPHY UTILITIES)
   ========================================================================== */
.font-h2-l { font-family: var(--ff-h2-l); font-size: var(--fs-h2-l); line-height: var(--lh-h2-l); font-weight: var(--fw-h2-l); }
.font-h2-m { font-family: var(--ff-h2-m); font-size: var(--fs-h2-m); line-height: var(--lh-h2-m); font-weight: var(--fw-h2-m); }
.font-h2-s { font-family: var(--ff-h2-s); font-size: var(--fs-h2-s); line-height: var(--lh-h2-s); font-weight: var(--fw-h2-s); }
.font-h3   { font-family: var(--ff-h3);   font-size: var(--fs-h3);   line-height: var(--lh-h3);   font-weight: var(--fw-h3); }
.font-h4   { font-family: var(--ff-h4);   font-size: var(--fs-h4);   line-height: var(--lh-h4);   font-weight: var(--fw-h4); }
.font-h5   { font-family: var(--ff-h5);   font-size: var(--fs-h5);   line-height: var(--lh-h5);   font-weight: var(--fw-h5); }

.font-body-l    { font-family: var(--ff-body-l);    font-size: var(--fs-body-l);    line-height: var(--lh-body-l);    font-weight: var(--fw-body-l); }
.font-body-m    { font-family: var(--ff-body-m);    font-size: var(--fs-body-m);    line-height: var(--lh-body-m);    font-weight: var(--fw-body-m); }
.font-body-s    { font-family: var(--ff-body-s);    font-size: var(--fs-body-s);    line-height: var(--lh-body-s);    font-weight: var(--fw-body-s); }
.font-body-mobi { font-family: var(--ff-body-mobi); font-size: var(--fs-body-mobi); line-height: var(--lh-body-mobi); font-weight: var(--fw-body-mobi); }
.font-caption   { font-family: var(--ff-caption);   font-size: var(--fs-caption);   line-height: var(--lh-caption);   font-weight: var(--fw-caption); }

.font-btn-m  { font-family: var(--ff-btn-m);  font-size: var(--fs-btn-m);  line-height: var(--lh-btn-m);  font-weight: var(--fw-btn-m); }
.font-btn-s  { font-family: var(--ff-btn-s);  font-size: var(--fs-btn-s);  line-height: var(--lh-btn-s);  font-weight: var(--fw-btn-s); }
.font-menu-m { font-family: var(--ff-menu-m); font-size: var(--fs-menu-m); line-height: var(--lh-menu-m); font-weight: var(--fw-menu-m); }
.font-menu-s { font-family: var(--ff-menu-s); font-size: var(--fs-menu-s); line-height: var(--lh-menu-s); font-weight: var(--fw-menu-s); }


/* ==========================================================================
   5. HỆ THỐNG TIỆN ÍCH MÀU CHỮ & KHỐI NỀN TỐI (CONTEXTUAL CONTAINER COLOR)
   ========================================================================== */
.text-white  { color: var(--text-white) !important; }
.text-dark   { color: var(--text-dark) !important; }
.text-title  { color: var(--text-title) !important; }
.text-accent { color: var(--color-accent) !important; }

/* Set biến color truyền vào container/section đặc biệt (ví dụ banner chữ trắng) */
.bg-dark, 
.is-dark-section,
.cta-bottom-section, 
.has-text-white,
[class*="banner"],
.site-banner,
.hero,
.hero-section,
.hero__content {
    --heading-color: var(--text-white) !important;
    color: var(--text-white) !important;
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark p, .bg-dark span, .bg-dark a,
.is-dark-section h1, .is-dark-section h2, .is-dark-section h3, .is-dark-section h4, .is-dark-section h5, .is-dark-section h6,
.is-dark-section p, .is-dark-section span, .is-dark-section a,
.has-text-white h1, .has-text-white h2, .has-text-white h3, .has-text-white h4, .has-text-white h5, .has-text-white h6,
.has-text-white p, .has-text-white span, .has-text-white a,
[class*="banner"] h1, [class*="banner"] h2, [class*="banner"] h3, [class*="banner"] h4, [class*="banner"] h5, [class*="banner"] h6,
[class*="banner"] p, [class*="banner"] span, [class*="banner"] a,
.site-banner h1, .site-banner h2, .site-banner h3, .site-banner h4, .site-banner h5, .site-banner h6,
.site-banner p, .site-banner span, .site-banner a,
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero p, .hero span, .hero div, .hero a,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6,
.hero-section p, .hero-section span, .hero-section div, .hero-section a,
.hero__content h1, .hero__content h2, .hero__content h3, .hero__content h4, .hero__content h5, .hero__content h6,
.hero__content p, .hero__content span, .hero__content div, .hero__content a,
.hero__content .font-h2-l, .hero__content .font-h2-m, .hero__content .font-h2-s,
.hero__content .font-body-l, .hero__content .font-body-m, .hero__content .font-body-s {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}


/* ==========================================================================
   6. LAST-CHILD MARGIN RESET
   ========================================================================== */
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child,
.font-h2-l:last-child, .font-h2-m:last-child, .font-h3:last-child,
.section-heading:last-child,
p:last-child, .font-body-m:last-child, .font-body-s:last-child,
.section-text:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   7. BUTTONS SYSTEM
   ========================================================================== */
.btn-primary {
    margin-top: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    border-radius: var(--radius-atom);
    background-color: var(--color-accent);
    color: #ffffff !important;
    font-family: var(--font-sans);
    font-size: var(--fs-btn-m);
    font-weight: 500;
    text-decoration: none !important;
    transition: var(--transition-base);
    cursor: pointer;
    border: none;
    line-height: 1.5;
}

.btn-primary:hover {
    background-color: var(--color-accent-dark);
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* ==========================================================================
   8. LAYOUT, CONTAINER & GRID UTILITIES
   ========================================================================== */
.container,
.site-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* --- HỆ THỐNG QUẢN LÝ LỀ & RESPONSIVE CHUNG CHO TOÀN WEBSITE --- */
@media screen and (max-width: 991px) {
    .container,
    .site-container {
        padding: 0 20px;
    }

    .inset-card-grid__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Triệt tiêu negative margin của Tầm nhìn & Sứ mệnh ở tablet & mobile */
    .alternating-overlap__block:not(.alternating-overlap__block--reverse) .alternating-overlap__content,
    .alternating-overlap__block--reverse .alternating-overlap__content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 767px) {
    .container,
    .site-container {
        padding: 0 16px;
    }

    /* Đảm bảo tất cả các khối layout/section không bị vỡ lề hoặc tràn ngang */
    main.site-main > section,
    main.site-main > div {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Chống tràn & giữ lề an toàn cho tất cả section component */
    .inset-card-grid,
    .alternating-overlap,
    .split-layout,
    .image-text {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .alternating-overlap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Responsive cho Inset Card Grid (Đội ngũ) */
    .inset-card-grid {
        margin: 40px auto !important;
        padding: 0 16px !important;
    }
    .inset-card-grid__grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Responsive cho Split Layout (Câu chuyện thương hiệu) */
    .split-layout,
    .split-layout--img-left {
        flex-direction: column-reverse !important;
    }
    .split-layout__content,
    .split-layout__image-wrapper {
        flex: 0 0 100% !important;
    }
    .split-layout__content {
        padding: 40px 20px !important;
    }
    .split-layout__image-wrapper {
        min-height: 260px !important;
    }

    /* Responsive cho Image Text (Về Midori) */
    .image-text__row,
    .image-text--img-right .image-text__row {
        flex-direction: column !important;
        gap: 25px !important;
    }
    .image-text__img-col,
    .image-text__text-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* Quy định padding khoảng cách bằng nhau tuyệt đối giữa các sections trên toàn bộ trang web */
section,
.section-padding,
.counters-section, .homepage-counters,
.featured-products-section, .homepage-featured-products,
.projects-section, .homepage-projects,
.testimonials-section, .homepage-testimonials,
.about-section, .counter-anim-grid,
.categories-section,
.services-overlay-section,
.section-inspiration, .dichvu-why-choose,
.cta-bottom-section { 
    padding: var(--section-pad-y) 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: var(--color-primary); 
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.italic { font-style: italic; }

.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-60 { gap: 60px; }

.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.w-100 { width: 100% !important; }
.w-50 { width: 50%; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }


/* ==========================================================================
   10. BODY OFFSET TRÁNH CHE KHUẤT
   ========================================================================== */

/* Các trang CÓ HERO BANNER làm phần tử đầu tiên -> KHÔNG PADDING TOP */
.site-main > .hero:first-child,
.site-main > section.hero:first-child,
.site-main > .hero-section:first-child,
.site-main > section[class*="hero"]:first-child,
body.page-template-page-gioi-thieu .site-main,
body.page-template-page-gioi-thieu-php .site-main,
body.page-gioi-thieu .site-main,
body .site-main.site-gioithieu,
body.post-type-archive-service .site-main,
body.tax-danh_muc_dich_vu .site-main,
body.single-service .site-main,
body.single-dich_vu .site-main,
body.single-dich-vu .site-main,
body.page-template-archive-service .site-main,
body.page-template-archive-service-php .site-main,
body.page-template-page-detail-service .site-main,
body.page-template-page-detail-service-php .site-main,
body.page-template-page-detail-giai-phap .site-main,
body.page-template-page-detail-giai-phap-php .site-main,
body.page-dich-vu .site-main,
body.page-dichvu .site-main,
body .site-main.site-dichvu-archive,
body .site-main.site-dichvu-single,
body .site-main.site-giaiphap-detail,
body.post-type-archive-project .site-main,
body.tax-danh_muc_du_an .site-main,
body.single-project .site-main,
body.single-du_an .site-main,
body.page-template-archive-project .site-main,
body.page-template-archive-project-php .site-main,
body.page-template-single-project .site-main,
body.page-template-single-project-php .site-main,
body.page-du-an .site-main,
body.page-duan .site-main,
body .site-main.site-duan-archive,
body.single-post .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Các trang KHÔNG CÓ hero banner ở đầu -> Bù padding-top tránh bị fixed header che */
body:not(.home) .site-main:not(:has(> .hero:first-child)):not(:has(> section.hero:first-child)) {
    padding-top: clamp(80px, 9vw, 110px);
}


/* ==========================================================================
   11. GIAO DIỆN TRANG GIỚI THIỆU (.site-gioithieu)
   ========================================================================== */
.site-gioithieu section:not(.site-banner):not(.cta-bottom-section):not(.philosophy-section):not(.capacity-section) h2,
.site-gioithieu section:not(.site-banner):not(.cta-bottom-section):not(.philosophy-section):not(.capacity-section) .section-title,
.site-gioithieu section:not(.site-banner):not(.cta-bottom-section):not(.philosophy-section):not(.capacity-section) .heading {
    font-family: var(--font-serif) !important;
    font-size: var(--fs-h2) !important;
    font-weight: 600 !important;
    color: var(--heading-color, var(--text-title)) !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-heading-bottom) !important;
    line-height: 1.3 !important;
}

.site-gioithieu section:not(.site-banner):not(.cta-bottom-section):not(.philosophy-section):not(.capacity-section) p:not(.story-highlight),
.site-gioithieu section:not(.site-banner):not(.cta-bottom-section):not(.philosophy-section):not(.capacity-section) li,
.site-gioithieu section:not(.site-banner):not(.cta-bottom-section):not(.philosophy-section):not(.capacity-section) .section-text {
    font-size: var(--fs-body-m) !important;
    line-height: 1.65 !important;
}

.site-gioithieu .philosophy-title,
.site-gioithieu .philosophy-subtitle,
.site-gioithieu .philosophy-item-text,
.site-gioithieu .capacity-title,
.site-gioithieu .capacity-number,
.site-gioithieu .capacity-text,
.site-gioithieu .cta-glass-card h2,
.site-gioithieu .cta-glass-card p {
    color: var(--text-white) !important;
}

.site-gioithieu .story-highlight,
.site-gioithieu em, .site-gioithieu i, .site-gioithieu blockquote {
    font-style: italic !important;
}


/* ==========================================================================
   12. WOOCOMMERCE PAGES (CART, CHECKOUT, ACCOUNT)
   ========================================================================== */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 60px) 15px;
    box-sizing: border-box;
    width: 100%;
}

.woocommerce, .woocommerce-page, .wc-block-cart, .wc-block-checkout,
.woocommerce input, .woocommerce select, .woocommerce textarea, .woocommerce button,
.woocommerce a.button, .woocommerce button.button, .wc-block-cart *, .wc-block-checkout * {
    font-family: var(--font-sans) !important;
}

.woocommerce-cart .product-name, .woocommerce-cart .product-name a, .woocommerce-cart td.product-name a,
.woocommerce-checkout .product-name, .woocommerce-checkout .product-name a, .woocommerce-checkout td.product-name,
.wc-block-cart .wc-block-components-product-name, .wc-block-cart a.wc-block-components-product-name,
.wc-block-cart-items .wc-block-components-product-name, .wc-block-cart-item__title,
.wc-block-checkout .wc-block-components-product-name, .wc-block-checkout a.wc-block-components-product-name,
.wc-block-checkout .wc-block-components-order-summary-item__title, .wc-block-components-order-summary-item__title,
.wc-block-order-summary .wc-block-components-product-name, a.wc-block-components-product-name, .wc-block-cart-items__row a {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body-m) !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

.woocommerce-cart .product-name a:hover, .woocommerce-checkout .product-name a:hover, a.wc-block-components-product-name:hover {
    color: var(--color-accent) !important;
}

.woocommerce-cart .amount, .woocommerce-cart .product-price, .woocommerce-cart .product-subtotal,
.woocommerce-checkout .amount, .woocommerce-checkout .product-price, .woocommerce-checkout .product-total,
.wc-block-cart .wc-block-formatted-money-amount, .wc-block-cart .wc-block-components-product-price,
.wc-block-cart .wc-block-components-totals-item__value, .wc-block-checkout .wc-block-formatted-money-amount,
.wc-block-checkout .wc-block-components-product-price, .wc-block-checkout .wc-block-components-totals-item__value {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
}

.woocommerce-checkout #place_order, .woocommerce-cart .checkout-button,
.wc-block-cart .wc-block-cart__submit-button, .wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-cart a.wc-block-components-button {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-btn-m) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: var(--radius-atom) !important;
    transition: var(--transition-base) !important;
}

.woocommerce-checkout #place_order:hover, .woocommerce-cart .checkout-button:hover,
.wc-block-cart .wc-block-cart__submit-button:hover, .wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-cart a.wc-block-components-button:hover {
    background-color: var(--color-accent-dark) !important;
}

.wc-block-cart__container, .wc-block-checkout__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 20px !important;
}

.wc-block-cart__contents, .wc-block-checkout__main,
.wc-block-cart__sidebar, .wc-block-checkout__sidebar {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* PAGINATION & BREADCRUMB */
.site-pagination, .site-pagination a, .site-pagination span {
    font-family: var(--font-poppins) !important;
}

.site-breadcrumb-nav {
    display: none !important;
}


/* ==========================================================================
   13. HỆ THỐNG RESPONSIVE MEDIA QUERIES (BỐ CỤC LAYOUT & ELEMENTS)
   ========================================================================== */

/* --- LAPTOP & TABLET LỚN (MAX-WIDTH: 1024PX) --- */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gap-60 {
        gap: 40px;
    }
}

/* --- TABLET / MOBILE (MAX-WIDTH: 768PX) --- */
@media screen and (max-width: 768px) {
    .grid-4, .grid-3, .grid-2 {
        grid-template-columns: 1fr;
    }

    .d-flex {
        flex-direction: column;
    }

    .w-50 {
        width: 100% !important;
    }

    .gap-60 {
        gap: 25px;
    }
    
    .gap-30 {
        gap: 20px;
    }

    .categories-section .grid-btn-wrapper {
        margin-top: 25px !important;
    }

    .featured-products-container .products-layout-row {
        margin-top: 15px !important;
    }
    
    .hide-on-mobile {
        display: none !important;
    }
    
    .text-center-mobile {
        text-align: center !important;
    }

    .sticky-icon-group {
        bottom: 20px !important;
        left: 15px !important;
        gap: 10px;
    }

    .sticky-icon-group__icon-wrapper {
        width: 44px;
        height: 44px;
    }

    .sticky-icon-group__img {
        width: 20px;
        height: 20px;
    }

    .sticky-icon-group__link--phone {
        height: 44px;
    }

    .sticky-icon-group__phone-number {
        font-size: 14px;
        padding: 0 14px 0 10px;
    }

    /* Khối chạy số thống kê (Counter Anim) hiển thị 3 cột ngang trên Mobile */
    .counter-anim-grid .counter-anim-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .counter-anim-grid .counter-anim-card {
        flex: 1 1 33.333% !important;
        width: 33.333% !important;
    }

    .counter-anim-grid .counter-anim-number-wrapper {
        font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
    }

    .counter-anim-grid .counter-anim-card p {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    /* Tab Sản phẩm nổi bật (sidebar-tabs-carousel) hiển thị cuộn ngang gọn gàng trên Mobile */
    .sidebar-tabs-carousel__row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .sidebar-tabs-carousel__sidebar {
        width: 100% !important;
        text-align: center !important;
    }

    .sidebar-tabs-carousel__sidebar-title {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 15px !important;
    }

    .sidebar-tabs-carousel__tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding-bottom: 8px !important;
        margin-bottom: 10px !important;
        scrollbar-width: none;
    }

    .sidebar-tabs-carousel__tabs::-webkit-scrollbar {
        display: none;
    }

    .sidebar-tabs-carousel__tab {
        white-space: nowrap !important;
        padding: 6px 14px !important;
        background-color: #f5f5f5 !important;
    }

    .sidebar-tabs-carousel__tab.is-active,
    .sidebar-tabs-carousel__tab.active {
        background-color: var(--color-accent) !important;
        color: #ffffff !important;
    }

    .sidebar-tabs-carousel__slider-col {
        padding: 0 !important;
    }

    .sidebar-tabs-carousel__prev,
    .sidebar-tabs-carousel__next {
        display: none !important;
    }
}

/* --- MOBILE NHỎ (MAX-WIDTH: 576PX) --- */
@media screen and (max-width: 576px) {
    .container {
        padding: 0 15px;
    }

    .btn-primary {
        width: 100%;
        padding: 12px 20px;
    }

    .woocommerce table.shop_table {
        font-size: var(--fs-body-s);
    }
    
    .woocommerce table.shop_table td, 
    .woocommerce table.shop_table th {
        padding: 8px 10px;
    }
}


/* ==========================================================================
   14. CSS RESPONSIVE HEADING OVERRIDES (SỬ DỤNG BIẾN GLOBAL)
   ========================================================================== */
.post-card-grid__heading {
    font-size: var(--fs-h3);
}

.sidebar-filter-grid__title {
    font-size: var(--fs-h3) !important;
}

.sidebar-filter-grid__subtitle {
    font-size: var(--fs-h4) !important;
}

@media (max-width: 1024px) {
    .post-card-grid__heading {
        font-size: var(--fs-h2-s);
    }
}

/* ==========================================================================
   BẮT BUỘC TẤT CẢ SLIDE VÀ CARD BẰNG CHIỀU CAO NHAU (EQUAL HEIGHT)
   ========================================================================== */

/* 1. Ép Swiper Slide tự động dãn bằng với slide cao nhất */
.sidebar-tabs-carousel__swiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important; /* Kéo dãn đều các slide */
}

.sidebar-tabs-carousel__swiper .swiper-slide {
    height: auto !important;         /* Cho phép slide tự dãn */
    display: flex !important;        /* Để wrapper con bên trong kế thừa 100% height */
}

/* 2. Wrapper bọc card ăn trọn 100% chiều cao slide */
.sidebar-tabs-carousel__card-wrapper {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Thẻ Card sản phẩm ăn trọn 100% chiều cao */
.product-card {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* 4. Khung nội dung text tự dãn đầy phần trống */
.product-card__info {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;         /* Tự động kéo dãn */
    padding: 20px 15px !important;
    text-align: center;
}

/* 5. Tên sản phẩm: Size 17px, font nhẹ thanh thoát, full text */
.product-card__info h4,
.product-card__info .product-card__title {
    font-size: 17px !important;       /* Đổi size chữ thành 17px */
    font-weight: 400 !important;      /* Độ đậm vừa phải */
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* 6. Chữ Liên hệ / Giá tiền luôn ghim thẳng hàng ở đáy mọi card */
.product-card__price {
    margin-top: auto !important;      /* Luôn đẩy sát đáy card */
    padding-top: 10px !important;
}
/* MOBILE RESPONSIVE (CHỈ XỬ LÝ LAYOUT NÚT) */
@media screen and (max-width: 767px) {
    .cta-banner__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .cta-banner__btn {
        width: 100%;
    }
}

/* ==========================================================================
   NÚT CTA 
   ========================================================================== */

/* --- 1. VARIANT OUTLINE --- */
body .cta-banner .cta-banner__btn--outline,
a.cta-banner__btn--outline { 
    border: 1px solid var(--text-white) !important; 
    color: var(--text-white) !important; 
    background: transparent !important; 
    box-shadow: none !important;
    text-decoration: none !important;
}

body .cta-banner .cta-banner__btn--outline:hover,
a.cta-banner__btn--outline:hover { 
    background-color: rgba(255, 255, 255, 0.2) !important; 
    border-color: var(--text-white) !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
}

/* --- 2. VARIANT SOLID --- */
body .cta-banner .cta-banner__btn--solid,
a.cta-banner__btn--solid { 
    background-color: var(--text-white) !important; 
    color: var(--text-dark) !important; 
    border: 1px solid var(--text-white) !important;
    text-decoration: none !important;
}
/* Tiêu đề chính: "Sản phẩm nổi bật" */
.sidebar-tabs-carousel__title {
    font-family: var(--font-serif);
    font-size: 32px;
    line-height: 1.3;
    color: var(--text-title);
    margin-top: 0;
    margin-bottom: 8px; /* Khoảng cách xuống chữ "từ Midori" */
}

/* Tiêu đề phụ: "từ Midori" */
.sidebar-tabs-carousel__subtitle {
    color: var(--text-dark);
    font-family: var(--font-serif);
    font-size: 20px;
    font-style: normal;
    margin-top: 0;
    margin-bottom: 16px; /* Khoảng cách xuống đoạn mô tả */
}

/* Đoạn mô tả */
.sidebar-tabs-carousel__desc {
    max-width: 650px;
    margin: 0 auto;
    color: var(--text-dark);
    opacity: 0.85;
    line-height: 1.6;
}
/* Responsive cho Tablet & Mobile */
@media (max-width: 1023px) {
    .sidebar-tabs-carousel__row {
        flex-direction: column;
        gap: 20px;
    }

    .sidebar-tabs-carousel__sidebar {
        width: 100%;
    }

    .sidebar-tabs-carousel__sidebar-title {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 12px;
        font-size: 20px;
    }

    /* Danh mục Tab cuộn ngang */
    .sidebar-tabs-carousel__tabs {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        gap: 10px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sidebar-tabs-carousel__tabs::-webkit-scrollbar {
        display: none;
    }

    .sidebar-tabs-carousel__tab {
        padding: 6px 16px;
        background-color: #F5F5F5;
        font-size: 13px;
    }

    .sidebar-tabs-carousel__tab.is-active {
        background-color: var(--color-accent, #374426);
        color: #ffffff;
    }

    /* Thêm padding 45px 2 bên để Card không bị phình to full màn hình, đồng thời dành chỗ cho nút điều hướng */
    .sidebar-tabs-carousel__slider-col {
        padding: 0 45px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Giữ lại và định vị 2 nút mũi tên tới / lùi ở 2 mép */
    .sidebar-tabs-carousel__prev,
    .sidebar-tabs-carousel__next {
        display: flex !important;
        width: 32px;
        height: 32px;
    }

    .sidebar-tabs-carousel__prev {
        left: 0;
    }

    .sidebar-tabs-carousel__next {
        right: 0;
    }

    .sidebar-tabs-carousel__pagination .swiper-pagination-bullet {
        width: 30px;
    }
}

@media (max-width: 767px) {
    .sidebar-tabs-carousel__header {
        margin-bottom: 20px;
    }

    .sidebar-tabs-carousel__title {
        font-size: 24px;
    }

    .sidebar-tabs-carousel__subtitle {
        font-size: 16px;
    }
}
/* ==========================================================================
   CSS RESPONSIVE HEADING OVERRIDES
   css Nghĩa
   ========================================================================== */

/* 1. QUY TẮC BO GÓC THẺ CARD TOÀN TRANG (CARD BORDER-RADIUS RESET) */
.product-card,
.product-card__img,
.card-standard,
.card-standard__img,
.card-product,
.card-standard--style-1,
.card-standard--style-2,
.post-card-grid__card,
[class*="card-"],
[class*="-card"] {
    border-radius: 0 !important;
}

/* RIÊNG 3 THẺ CỦA SECTION IMAGE-CARD-GRID MỚI CÓ BO GÓC = 5PX */
.image-card-grid__card {
    border-radius: 5px !important;
}

/* 2. TEXT BLOCK & CHI TIẾT BÀI VIẾT (SINGLE-POST) */
.text-block,
section.text-block {
    padding-top: clamp(40px, 6vw, 70px) !important;
    padding-bottom: clamp(40px, 6vw, 70px) !important;
}

.text-block h2 {
    font-size: var(--fs-h2-m, 32px) !important;
    line-height: 1.35 !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
    color: var(--text-dark, #0F0F0F) !important;
}

/* 3. POST CARD GRID (BÀI VIẾT TƯƠNG TỰ / DỰ ÁN LIÊN QUAN) */
.post-card-grid,
section.post-card-grid {
    padding-top: clamp(40px, 6vw, 80px) !important;
    padding-bottom: clamp(50px, 7vw, 90px) !important;
}

.post-card-grid h2,
.post-card-grid__heading,
.post-card-grid__container>h2 {
    text-align: center !important;
    margin-bottom: clamp(25px, 4vw, 40px) !important;
    font-size: var(--fs-h2-m, 32px) !important;
}

/* 4. TRANG LIÊN HỆ (INFO BOX GRID) */
.info-box-grid__header h1,
.info-box-grid__header h2 {
    font-size: var(--fs-h2-l, 40px) !important;
    line-height: 1.3 !important;
    letter-spacing: 2px !important;
    margin-bottom: 0 !important;
}

.info-box-grid__box h3,
.info-box-grid__social h4,
.info-box-grid__address-card h3,
.info-box-grid__map-wrapper h3,
.info-box-grid .font-body-l h3,
.info-box-grid .font-body-l h4 {
    font-size: var(--fs-body-l, 20px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--text-dark, #2B2B2B) !important;
}

.info-box-grid__item,
.info-box-grid__item a,
.info-box-grid__address-card p,
.info-box-grid .font-body-m,
.info-box-grid .font-body-m a,
.info-box-grid .font-body-m p {
    font-size: var(--fs-body-m, 16px) !important;
    line-height: 1.5 !important;
}

/* 5. SIDEBAR FILTER GRID (BỘ LỌC VÀ LƯỚI CARD DỊCH VỤ/DỰ ÁN) */
.sidebar-filter-grid__sidebar h2,
.sidebar-filter-grid__title {
    font-size: var(--fs-body-l, 20px) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.sidebar-filter-grid__section h3,
.sidebar-filter-grid__subtitle {
    font-size: var(--fs-body-m, 16px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* 6. IMAGE CARD GRID (VÌ SAO CHỌN MIDORI) */
.image-card-grid__card-content h3,
.image-card-grid__card h3 {
    color: #ffffff !important;
    font-size: var(--fs-body-l, 20px) !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
}

.image-card-grid__card-content p,
.image-card-grid__card p {
    color: #ffffff !important;
}

/* 7. BLOCK ACCORDION FAQ CLICK TOGGLE */
.block-accordion-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease-in-out !important;
}

.block-accordion-item.is-active .block-accordion-content {
    max-height: 1000px !important;
}

/* 8. DESKTOP OVERRIDES (MIN-WIDTH: 1025PX) */
@media (min-width: 1025px) {
    .info-box-grid__map-container iframe {
        height: 420px !important;
    }
}

/* 9. TABLET OVERRIDES (MAX-WIDTH: 1024PX) */
@media (max-width: 1024px) {
    .info-box-grid__row {
        flex-direction: column !important;
        gap: 30px !important;
        margin-top: 30px !important;
    }

    .info-box-grid__col-left,
    .info-box-grid__col-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .info-box-grid__box,
    .info-box-grid__address-card,
    .info-box-grid__map-wrapper {
        padding: 30px 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .post-card-grid__heading {
        font-size: var(--fs-h2-s, 28px);
    }

    .sidebar-filter-grid__container {
        display: flex !important;
        flex-direction: row !important;
        gap: 25px !important;
    }

    .sidebar-filter-grid__sidebar {
        width: 230px !important;
        flex-shrink: 0 !important;
    }

    .sidebar-filter-grid__main-content {
        flex-grow: 1 !important;
        min-width: 0 !important;
    }

    .sidebar-filter-grid__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .post-card-grid__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .image-card-grid__grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
        max-width: 660px !important;
        margin: 0 auto !important;
    }

    .image-card-grid__card {
        width: calc(50% - 10px) !important;
        max-width: 306px !important;
        box-sizing: border-box !important;
    }

    .sidebar-filter-grid__title {
        font-size: 26px !important;
    }

    .sidebar-filter-grid__subtitle {
        font-size: 22px !important;
    }
}

/* 10. MOBILE OVERRIDES (MAX-WIDTH: 767PX) */
@media (max-width: 767px) {
    .text-block__meta-share {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 25px !important;
    }

    .text-block__meta-left,
    .text-block__meta-right {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* GIAO DIỆN MOBILE TRANG GIỚI THIỆU (PAGE-GIOI-THIEU.PHP) */
    .image-text__row {
        flex-direction: column !important;
        gap: 25px !important;
    }

    .image-text__img-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: calc(100% + 30px) !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    .image-text__img {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    .image-text__text-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    .split-layout {
        flex-direction: column !important;
    }

    .split-layout__image-wrapper {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: calc(100% + 30px) !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        height: 360px !important;
    }

    .split-layout__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .split-layout__content {
        order: 2 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding: 30px 15px !important;
    }

    .inset-card-grid__grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .inset-card-grid__card {
        width: 100% !important;
        height: 380px !important;
    }

    .bg-stats-column__grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .bg-stats-column__box:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .bg-stats-column__box:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .bg-stats-column__box:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .bg-stats-column__box:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .bg-stats-column__box:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .bg-stats-column__box {
        padding: 25px 15px !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        border-radius: 4px !important;
        background: transparent !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .bg-stats-column__box h4 {
        font-size: 22px !important;
        margin-bottom: 8px !important;
        color: #ffffff !important;
    }

    .bg-stats-column__box p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #ffffff !important;
        opacity: 0.9 !important;
        text-align: center !important;
    }

    .text-block__bento-gallery {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 15px !important;
        margin-top: 30px !important;
    }

    .text-block__bento-item {
        grid-column: auto !important;
        grid-row: auto !important;
        height: 250px !important;
        border-radius: 10px !important;
    }

    .post-card-grid__grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .image-grid__desktop {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }

    .image-grid__card {
        width: 100% !important;
        flex-shrink: 0 !important;
        text-align: center;
    }

    .image-grid__scrollbar {
        position: relative !important;
        margin: 25px auto 0 auto !important;
        width: 140px !important;
        height: 4px !important;
        background: #ECEAE0 !important;
        border-radius: 2px !important;
        overflow: hidden;
    }

    .image-grid__scrollbar .swiper-scrollbar-drag {
        background: var(--color-accent, #456C35) !important;
        border-radius: 2px !important;
        height: 100% !important;
    }

    .image-card-grid__grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        justify-content: center !important;
    }

    .image-card-grid__grid>* {
        grid-column: auto !important;
        justify-self: center !important;
    }

    .sidebar-filter-grid__container {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }

    .sidebar-filter-grid__sidebar {
        width: 100% !important;
    }

    .sidebar-filter-grid__sidebar h2 {
        background-color: var(--color-neutral-green, #9FB877) !important;
        color: #ffffff !important;
        padding: 12px 20px !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
        margin: 0 0 15px 0 !important;
        border-bottom: none !important;
        user-select: none;
    }

    .sidebar-filter-grid__sidebar h2::after {
        content: "+" !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    .sidebar-filter-grid__sidebar h2.active::after {
        content: "−" !important;
    }

    .sidebar-filter-grid__sidebar .sidebar-filter-grid__wrap {
        display: none;
        margin-bottom: 20px;
        padding: 15px;
        background: #ffffff;
        border: 1px solid #e2e2e2;
        border-radius: 8px;
    }

    .sidebar-filter-grid__sidebar .sidebar-filter-grid__wrap.open {
        display: block !important;
    }

    .sidebar-filter-grid__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .sidebar-filter-grid__title {
        font-size: 20px !important;
    }

    .sidebar-filter-grid__subtitle {
        font-size: 16px !important;
    }

    .sidebar-filter-grid__pagination {
        margin-top: 25px !important;
    }
}

/* ==========================================================================
   RESPONSIVE MOBILE CHO BLOCK TESTIMONIAL
   ========================================================================== */
@media (max-width: 768px) {
    /* Chuyển card sang dạng dọc, giảm padding và khoảng cách */
    .block-testimonial__card {
        flex-direction: column;
        padding: 30px 20px;
        gap: 20px;
        text-align: center; /* Căn giữa nội dung cho đẹp trên mobile */
    }

    /* Thu nhỏ avatar một chút trên mobile */
    .block-testimonial__avatar {
        width: 100px;
        height: 100px;
        margin: 0 auto; /* Đảm bảo avatar luôn nằm giữa */
    }

    /* Căn chỉnh lại dấu ngoặc kép (nếu có) */
    .block-testimonial__content span {
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }

    /* Giảm kích thước khoảng cách text trên mobile */
    .block-testimonial__content p:first-of-type {
        margin-bottom: 15px;
    }

    /* Giảm chiều dài thanh phân trang swiper cho gọn */
    .block-testimonial__pagination .swiper-pagination-bullet {
        width: 25px;
    }
    .block-testimonial__pagination .swiper-pagination-bullet-active { 
        width: 50px; 
    }
}

/* ==========================================================================
   RESPONSIVE TABLET (Tuỳ chọn thêm để giao diện mượt hơn)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .block-testimonial__card {
        padding: 40px;
        gap: 30px;
    }
    .block-testimonial__avatar {
        width: 110px;
        height: 110px;
    }
}