/* ==========================================================================
   NẠP PHÔNG CHỮ HỆ THỐNG (LEXEND & MONA SANS TOÀN WEBSITE)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&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 toàn trang (Màu trắng) */
    --color-accent: #027CC5;
    /* Main primary color (#027CC5) */
    --color-main-primary: #027CC5;
    /* Main primary color (#027CC5) */
    --color-secondary-primary: #273174;
    /* Secondary primary (#273174) */
    --color-neutral: #ADD4E5;
    /* Main Neutral color (#ADD4E5) */
    --color-neutral-green: #ADD4E5;
    /* Main Neutral color (#ADD4E5) */
    --color-accent-dark: #273174;
    /* Secondary primary (#273174) */
    --color-bg-subtle: #F6EEEA;
    /* Background - Subtle (#F6EEEA) */
    --color-bg-beige: #F6EEEA;
    /* Background be nhạt (#F6EEEA) */

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

    /* --- TEXT SYSTEM --- */
    --text-title: #3A2116;
    /* Dark text (#3A2116) */
    --text-dark: #3A2116;
    /* Dark text (#3A2116) */
    --text-white: #ffffff;
    /* White text (#ffffff) */
    --text-grey: #7B8A99;
    /* Grey text bổ trợ */
    --color-grey: #F0F4F6;
    /* Grey (#F0F4F6) */
    --bg-grey: #F0F4F6;

    /* --- FONTS SYSTEM (HEADING: LEXEND, TEXT & BUTTON: MONA SANS) --- */
    --font-lexend: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mona-sans: "Mona Sans", "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: var(--font-lexend);
    --font-body: var(--font-mona-sans);
    --font-serif: var(--font-lexend);
    --font-sans: var(--font-mona-sans);

    /* --- TYPOGRAPHY VARIABLES (DESKTOP) --- */
    /* Heading: Lexend */
    --fs-h1: 50px;
    --lh-h1: 1.25;
    --fw-h1: 600;
    --ff-h1: var(--font-lexend);

    --fs-h2: 30px;
    --lh-h2: 1.25;
    --fw-h2: 400;
    --ff-h2: var(--font-lexend);

    --fs-h3: 26px;
    --lh-h3: 1.25;
    --fw-h3: 400;
    --ff-h3: var(--font-lexend);

    --fs-h4: 18px;
    --lh-h4: 1.25;
    --fw-h4: 400;
    --ff-h4: var(--font-lexend);

    --fs-h5: 16px;
    --lh-h5: 1.25;
    --fw-h5: 400;
    --ff-h5: var(--font-lexend);

    --fs-h6: 14px;
    --lh-h6: 1.25;
    --fw-h6: 400;
    --ff-h6: var(--font-lexend);

    /* Biến Variant Size (L, M, S) */
    --fs-h2-l: 50px;
    --lh-h2-l: 1.25;
    --fw-h2-l: 600;
    --ff-h2-l: var(--font-lexend);

    --fs-h2-m: 30px;
    --lh-h2-m: 1.25;
    --fw-h2-m: 400;
    --ff-h2-m: var(--font-lexend);

    --fs-h2-s: 18px;
    --lh-h2-s: 1.25;
    --fw-h2-s: 400;
    --ff-h2-s: var(--font-lexend);

    --lh-h3: 1.25;
    --fw-h3: 400;
    --ff-h3: var(--font-lexend);
    --lh-h4: 1.25;
    --fw-h4: 400;
    --ff-h4: var(--font-lexend);
    --lh-h5: 1.25;
    --fw-h5: 400;
    --ff-h5: var(--font-lexend);

    /* Text & Body Variables (Mona Sans, Desktop) */
    --fs-body-l: 16px;
    --lh-body-l: 1.5;
    --fw-body-l: 600;
    --ff-body-l: var(--font-mona-sans);

    --fs-body-m: 16px;
    --lh-body-m: 1.5;
    --fw-body-m: 400;
    --ff-body-m: var(--font-mona-sans);

    --fs-body-s: 16px;
    --lh-body-s: 1.5;
    --fw-body-s: 400;
    --ff-body-s: var(--font-mona-sans);

    --fs-body-mobi: 14px;
    --lh-body-mobi: 1.5;
    --fw-body-mobi: 400;
    --ff-body-mobi: var(--font-mona-sans);

    --fs-caption: 13px;
    --lh-caption: 1.5;
    --fw-caption: 400;
    --ff-caption: var(--font-mona-sans);

    /* Buttons & Menus Variables (Mona Sans, Desktop) */
    --fs-btn-l: 14px;
    --lh-btn-l: 1.5;
    --fw-btn-l: 400;
    --ff-btn-l: var(--font-mona-sans);

    --fs-btn-m: 14px;
    --lh-btn-m: 1.5;
    --fw-btn-m: 400;
    --ff-btn-m: var(--font-mona-sans);

    --fs-btn-s: 10px;
    --lh-btn-s: 1.5;
    --fw-btn-s: 400;
    --ff-btn-s: var(--font-mona-sans);

    --fs-menu-m: 16px;
    --lh-menu-m: 1.5;
    --fw-menu-m: 500;
    --ff-menu-m: var(--font-mona-sans);

    --fs-menu-s: 14px;
    --lh-menu-s: 1.5;
    --fw-menu-s: 400;
    --ff-menu-s: var(--font-mona-sans);

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

    /* KHUNG TOÀN TRANG: MAX-WIDTH 1200PX VÀ LỀ 2 BÊN */
    --container-max-w: 1200px;
    --container-pad-x: 10px;

    /* QUY CHUẨN KHOẢNG CÁCH DỰ ÁN */
    --section-gap: 30px;
    --section-pad-top: var(--section-gap);
    --component-gap: calc(var(--section-gap) / 2);

    --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: 38px;
        --fs-h2: 26px;
        --fs-h3: 22px;
        --fs-h4: 16px;
        --fs-h5: 15px;
        --fs-h6: 13px;

        --fs-h2-l: 38px;
        --fs-h2-m: 26px;
        --fs-h2-s: 16px;

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

        --fs-btn-l: 13px;
        --fs-btn-m: 13px;
        --fs-btn-s: 10px;

        --container-pad-x: 24px;
        --section-gap: 24px;
        --section-pad-top: 24px;
        --component-gap: 12px;
    }
}

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

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

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

        --fs-btn-l: 13px;
        --fs-btn-m: 12px;
        --fs-btn-s: 10px;

        --container-pad-x: 16px;
        --section-gap: 20px;
        --section-pad-top: 20px;
        --component-gap: 10px;
    }
}


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

html, body {
    overflow-x: clip !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    font-family: var(--font-mona-sans) !important;
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m, 1.5);
    color: var(--text-dark);
    background-color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ĐỒNG BỘ NỀN TRẮNG CHO CÁC TRANG DANH SÁCH & ARCHIVE */
body.post-type-archive-du_an,
body.post-type-archive-project,
body.tax-danh_muc_du_an,
body.page-template-archive-project,
body.post-type-archive-dich_vu,
body.post-type-archive-service,
body.tax-danh_muc_dich_vu,
body.page-template-archive-service,
body.page-template-page-blog,
body.blog,
body.category,
body.tag,
body.archive,
body:has(.site-duan-archive),
body:has(.site-dichvu-archive),
body:has(.site-baiviet-archive),
.site-duan-archive,
.site-dichvu-archive,
.site-baiviet-archive,
.site-duan-archive section,
.site-dichvu-archive section,
.site-baiviet-archive section {
    background-color: #ffffff !important;
}

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)
   ========================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-lexend) !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: var(--fw-h1, 600); line-height: var(--lh-h1, 1.25); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2, 400); line-height: var(--lh-h2, 1.25); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3, 400); line-height: var(--lh-h3, 1.25); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4, 400); line-height: var(--lh-h4, 1.25); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-h5, 400); line-height: var(--lh-h5, 1.25); }
h6, .h6 { font-size: var(--fs-h6); font-weight: var(--fw-h6, 400); line-height: var(--lh-h6, 1.25); }

p {
    font-family: var(--font-mona-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;
}

span {
    font-family: inherit;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    display: inline;
}

div {
    box-sizing: border-box;
}

span.text-accent {
    color: var(--color-accent) !important;
}
span.text-highlight {
    color: var(--color-accent);
    font-weight: 600;
}

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-l  { font-family: var(--ff-btn-l);  font-size: var(--fs-btn-l);  line-height: var(--lh-btn-l);  font-weight: var(--fw-btn-l); }
.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
   ========================================================================== */
.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; }

.bg-dark, 
.is-dark-section,
.cta-bottom-section, 
.has-text-white,
.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,
.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 {
    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 & HỆ THỐNG KHOẢNG CÁCH SECTION
   ========================================================================== */
.container,
.site-container,
header .header-container,
footer .footer-container {
    width: 100%;
    max-width: var(--container-max-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-pad-x) !important;
    padding-right: var(--container-pad-x) !important;
    box-sizing: border-box !important;
}

/* 8.1 HERO BANNER ĐẦU TRANG */
.site-main > .hero:first-child,
.site-main > .site-banner:first-child,
.site-main > .hero-section:first-child,
.site-main > section:first-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 8.2 MẶC ĐỊNH CÁC SECTION NỀN TRẮNG NỐI TIẾP */
main>section,
.site-main>section,
section,
.image-text,
.text-block,
.article-content-section {
    padding-top: var(--section-pad-top, 30px);
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

/* 8.3 TẤT CẢ SECTION CÓ BACKGROUND */
body main > section[style*="background"],
body main > section[style*="background-image"],
body main > section[style*="background-color"],
body main > section[class*="bg-"],
body main > section.bg-dark,
body main > section.is-dark-section,
body main > section.cta-bottom-section,
body main > section.counters-section,
body main > section.homepage-counters,
body main > section.counter-anim-grid,
body main > section.categories-section,
body main > section.section-inspiration,
body main > section.dichvu-why-choose,
body main > section.inset-card-grid,
body main > section.alternating-overlap,
body main > section.split-layout,
body main > section.services-section,
body main > section.post-card-grid,
body main > section.image-text,
body main > section.text-block,
body main > section.article-content-section,
body main > section.vision-mission-banner,
body main > section.counter-section,
body main > section.our-team,
body main > section:last-child,
body .site-main > section:last-child {
    padding-top: var(--section-gap, 30px) !important;
    padding-bottom: var(--section-gap, 30px) !important;
    box-sizing: border-box !important;
}
body main > section.media-text-section,
.page-about .media-text-section,
.media-text-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
@media screen and (max-width: 767px) {
    body main > section.media-text-section,
    .page-about .media-text-section,
    .page-gioi-thieu .media-text-section,
    .media-text-section {
        padding-bottom: 30px !important;
    }
}
body main > section.image-text,
body main > section.text-block,
body main > section.media-text-section,
body main > section.our-team,
body main > section.post-card-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body main > section.product-carousel,
body .site-main > section.product-carousel,
body main > section#sec-featured-products,
body main > section.info-box-grid,
body .site-main > section.info-box-grid,
.site-main.site-lienhe > section,
.site-main.site-lienhe > .info-box-grid {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}
.midori-breadcrumb-nav,
.custom-shop-breadcrumb-row {
    padding-top: 40px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 13.5px;
    color: var(--text-dark, #000000);
    line-height: 1.4;
    box-sizing: border-box;
}

.section-header,
.categories-section .section-header,
.sidebar-filter-grid__title,
.homepage-projects .section-header,
.homepage-featured-products .section-header,
.homepage-testimonials .section-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   13. BODY OFFSET TRÁNH CHE KHUẤT (FIXED HEADER COMPATIBILITY)
   ========================================================================== */
.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,
body.page-template-page-lien-he .site-main,
body.page-template-page-lien-he-php .site-main,
body.page-lien-he .site-main,
body .site-main.site-lienhe,
body.page-template-page-blog .site-main,
body.page-template-page-blog-php .site-main,
body.page-blog .site-main,
body .site-main.page-blog-main,
body.blog .site-main,
body.archive .site-main,
body.woocommerce .site-main,
body.woocommerce-page .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body:not(.home) .site-main:not(:has(> .hero:first-child)):not(:has(> section.hero:first-child)) {
    padding-top: 0;
}


/* ==========================================================================
   14. 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;
}


/* ==========================================================================
   15. WOOCOMMERCE PAGES (CART, CHECKOUT, ACCOUNT)
   ========================================================================== */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
    max-width: var(--container-max-w) !important;
    margin: 0 auto;
    padding-top: 116px !important;
    padding-bottom: 50px;
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
    box-sizing: border-box;
    width: 100%;
    background-color: #ffffff !important;
}

.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-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;
}

.site-pagination, .site-pagination a, .site-pagination span {
    font-family: var(--font-poppins) !important;
}

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