/* NẠP PHÔNG CHỮ HỆ THỐNG */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Kodchasan:wght@300;400;500;600;700&display=swap');

:root {
    /* ==========================================================================
       1. COLORS SYSTEM (BẢNG MÀU THƯƠNG HIỆU MIDORI)
       ========================================================================== */
    --midori-primary: #ffffff;        /* Đã chuyển đổi sang Trắng tuyền cho toàn bộ nền trang chủ */
    --midori-accent: #456C35;         /* Accent color 1 */
    --midori-neutral-green: #9FB877;  /* Main Neutral color */
    --midori-accent-dark: #374426;    /* Accent color 2 */
    --midori-bg: #DFDDD1;             /* Background beige */

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

    /* ==========================================================================
       2. FONTS SYSTEM (HỆ THỐNG PHÔNG CHỮ QUY CHUẨN)
       ========================================================================== */
    --font-serif: "Kodchasan", Georgia, serif;
    --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;

    /* --- 2.1. TYPOGRAPHY: HEADING (TIÊU ĐỀ) --- */
    --fs-h2-l: 40px;      --lh-h2-l: 1.5;   --fw-h2-l: 500;  --ff-h2-l: var(--font-serif);
    --fs-h2-m: 32px;      --lh-h2-m: 1.25;  --fw-h2-m: 500;  --ff-h2-m: var(--font-serif);
    --fs-h2-s: 16px;      --lh-h2-s: 1.68;  --fw-h2-s: 400;  --ff-h2-s: var(--font-sans);
    --fs-h3: 28px;        --lh-h3: 1.25;    --fw-h3: 500;    --ff-h3: var(--font-serif);
    --fs-h4: 23px;        --lh-h4: 1.25;    --fw-h4: 500;    --ff-h4: var(--font-serif);
    --fs-h5: 18px;        --lh-h5: 1.25;    --fw-h5: 500;    --ff-h5: var(--font-serif);

    /* --- 2.2. TYPOGRAPHY: TEXT (VĂN BẢN) --- */
    --fs-body-l: 20px;    --lh-body-l: 1.5; --fw-body-l: 400; --ff-body-l: var(--font-sans);
    --fs-body-m: 16px;    --lh-body-m: 1.5; --fw-body-m: 500; --ff-body-m: var(--font-sans);
    --fs-body-s: 16px;    --lh-body-s: 1.5; --fw-body-s: 400; --ff-body-s: var(--font-sans);
    --fs-body-mobi: 14px; --lh-body-mobi: 1.5; --fw-body-mobi: 400; --ff-body-mobi: var(--font-sans);
    --fs-caption: 13px;   --lh-caption: 1.5; --fw-caption: 400; --ff-caption: var(--font-sans);

    /* --- 2.3. TYPOGRAPHY: BUTTONS & MENUS (NÚT & ĐIỀU HƯỚNG) --- */
    --fs-btn-m: 14px;     --lh-btn-m: 1.5;  --fw-btn-m: 400; --ff-btn-m: var(--font-sans);
    --fs-btn-s: 10px;     --lh-btn-s: 1.5;  --fw-btn-s: 400; --ff-btn-s: var(--font-sans);
    --fs-menu-m: 16px;    --lh-menu-m: 1.5; --fw-menu-m: 500; --ff-menu-m: var(--font-sans);
    --fs-menu-s: 14px;    --lh-menu-s: 1.5; --fw-menu-s: 400; --ff-menu-s: var(--font-sans);

    /* ==========================================================================
       3. ĐƯỜNG CONG VÀ HIỆU ỨNG (DESIGN TOKENS)
       ========================================================================== */
    --radius-pill: 30px;
    --radius-card: 6px;
    --radius-atom: 4px;
    
    /* Hệ thống khoảng cách Section: Co rút cực gọn trên di động (chỉ 30px) và tự dãn rộng trên máy tính */
    --section-pad-y: clamp(30px, 6vw, 80px);
    --card-gap: 20px;
    --transition-base: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

    /* --- BIẾN KHOẢNG CÁCH CHỮ TOÀN HỆ THỐNG (ĐỂ ĐIỀU CHỈNH ĐỘ KHÍT) --- */
    --space-heading-bottom: 8px; /* Khoảng cách từ Tiêu đề đẩy xuống Đoạn văn (rất sát) */
    --space-text-bottom: 20px;   /* Khoảng cách từ Đoạn văn đẩy xuống Nút bấm (vừa vặn) */
}

/* ==========================================================================
   CLASS TIỆN ÍCH PHÔNG CHỮ (FONTS SYSTEM 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); }

/* ==========================================================================
   4. QUY CHUẨN KHOẢNG CÁCH HEADING, TEXT VÀ BUTTON TOÀN WEB
   ========================================================================== */
/* Ép Tiêu đề (Heading) sát vào đoạn văn bên dưới (cách 8px) */
h1, h2, h3, h4, h5, h6,
.font-h2-l, .font-h2-m, .font-h2-s, .font-h3, .font-h4, .font-h5,
.midori-heading {
    margin-top: 0 !important;
    margin-bottom: var(--space-heading-bottom) !important;
}

/* Ép Đoạn văn (Text) cách nút bấm hoặc thành phần bên dưới vừa phải (cách 20px) */
p, .font-body-l, .font-body-m, .font-body-s, .font-body-mobi, 
.midori-text {
    margin-top: 0 !important;
    margin-bottom: var(--space-text-bottom) !important;
}

/* Đảm bảo phần tử (chữ/heading) nằm cuối cùng trong một khối sẽ không bị dư lề dưới */
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, .midori-heading:last-child,
p:last-child, .font-body-m:last-child, .font-body-s:last-child, .midori-text:last-child {
    margin-bottom: 0 !important;
}

/* Đảm bảo nút bấm không bị Theme tự chèn thêm lề trên (margin-top) làm loãng layout */
.midori-btn {
    margin-top: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    border-radius: var(--radius-atom);
    text-decoration: none;
    transition: var(--transition-base);
    cursor: pointer;
    border: none;
}

/* ==========================================================================
   LAYOUT & SPACING SYSTEM
   ========================================================================== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.section-padding { padding: 80px 0; }
.text-center { text-align: center; }
.italic { font-style: italic; }

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

.gap-20 { gap: 20px; }
.gap-60 { gap: 60px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.mb-40 { margin-bottom: 40px; }

/* ==========================================================================
   MÃ NẠP SPACING SECTION HỆ THỐNG TOÀN TRANG CHỦ
   ========================================================================== */
.homepage-counters { padding: 0 0 80px 0; background-color: var(--midori-primary); }
.homepage-featured-products { padding: 80px 0; background-color: var(--midori-primary); }
.homepage-projects { padding: 80px 0; background-color: var(--midori-primary); }
.homepage-testimonials { padding: 80px 0; background-color: var(--midori-primary); }

/* ==========================================================================
   CHỐNG CHE KHUẤT RIÊNG CHO TRANG GIẢI PHÁP (SOLUTIONS PAGE ONLY OFFSET)
   ========================================================================== */
body.page-template-template-solutions .site-main,
body:not(.home) .site-main,
body.home .site-main > :first-child:not(.midori-hero-section) {
    padding-top: clamp(110px, 12vw, 150px) !important;
}

/* ==========================================================================
   TỰ ĐỘNG THU GỌN 50% KHOẢNG CÁCH LỀ TRÊN DI ĐỘNG (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    .grid-3 { grid-template-columns: 1fr; }
    .d-flex { flex-direction: column; }
    .w-50 { width: 100% !important; }
    .gap-60 { gap: 30px; }

    /* Thu gọn lề dọc các section toàn cục trên mobile xuống mức khít khao */
    .section-padding { padding: 30px 0 !important; }
    
    /* Ép toàn bộ lề dọc các khối trang chủ trên mobile về mức 25px - 30px tối giản */
    .homepage-counters { padding: 0 0 30px 0 !important; }
    .homepage-featured-products { padding: 30px 0 !important; }
    .homepage-projects { padding: 30px 0 !important; }
    .homepage-testimonials { padding: 30px 0 !important; }
    
    /* Ép toàn bộ lề dọc các Section template con trên mobile về mức 30px */
    .midori-about-section { padding: 30px 0 !important; }
    .midori-categories-section { padding: 30px 0 !important; }
    .midori-services-overlay-section { padding: 30px 0 !important; }
    .section-inspiration { padding: 30px 0 !important; }
    .dichvu-why-choose { padding: 30px 0 !important; }
    .midori-cta-bottom-section { padding: 45px 0 !important; }

    /* THU GỌN CÁC KHOẢNG TRỐNG MARGIN TRONG LÒNG COMPONENT TRÊN MOBILE */
    .midori-categories-section .grid-btn-wrapper { 
        margin-top: 25px !important; 
    }
    .midori-featured-products-container .products-layout-row {
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   RESET PADDING-TOP CHO CÁC TRANG CÓ BANNER ĐẦU TRANG
   ========================================================================== */
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.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-dich-vu .site-main,
body.page-dichvu .site-main,
body .site-main.site-dichvu-archive,
body .site-main.site-dichvu-single,
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 .site-main.site-duan-single,
body.single-post .site-main {
    padding-top: 0 !important;
}

/* ==========================================================================
   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(40px, 6vw, 80px) 15px;
    box-sizing: border-box;
    width: 100%;
}

/* Đồng bộ font chữ Open Sans của hệ thống cho các trang WooCommerce */
.woocommerce,
.woocommerce-page {
    font-family: var(--font-sans);
}

.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.woocommerce button,
.woocommerce a.button,
.woocommerce button.button {
    font-family: var(--font-sans) !important;
}

/* Đảm bảo các cột WooCommerce co giãn linh hoạt, không bị tràn ngang ở chế độ 2 cột mặc định */
.wc-block-cart__container,
.wc-block-checkout__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 20px !important; /* Giảm gap giữa 2 cột trên tablet/mobile */
}

.wc-block-cart__contents,
.wc-block-checkout__main {
    min-width: 0 !important; /* Cho phép cột nội dung co lại linh hoạt */
}

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