/* 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&family=Poppins: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;
    --font-poppins: "Poppins", 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;
    
    /* Thiết lập khoảng cách Section cố định ở mức 36px */
    --section-pad-y: 36px;
    --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) */
}

/* CHỐNG HOÀN TOÀN LỖI CUỘN NGANG TOÀN TRANG (PREVENT HORIZONTAL SCROLL) */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.site-main {
    overflow-x: hidden;
}

/* ==========================================================================
   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, .midori-section-title, .midori-vm-title, .midori-team-title, .midori-philosophy-title, .midori-journey-title, .midori-partners-title {
    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: var(--section-pad-y) 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Ủ (ĐÃ ĐIỀU CHỈNH VỀ 36PX)
   ========================================================================== */
.homepage-counters { padding: 0 0 var(--section-pad-y) 0; background-color: var(--midori-primary); }
.homepage-featured-products { padding: var(--section-pad-y) 0; background-color: var(--midori-primary); }
.homepage-projects { padding: var(--section-pad-y) 0; background-color: var(--midori-primary); }
.homepage-testimonials { padding: var(--section-pad-y) 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 KHOẢNG CÁCH LỀ TRÊN DI ĐỘNG (MOBILE) - ĐỒNG BỘ 36PX
   ========================================================================== */
@media (max-width: 768px) {
    .grid-3 { grid-template-columns: 1fr; }
    .d-flex { flex-direction: column; }
    .w-50 { width: 100% !important; }
    .gap-60 { gap: 30px; }

    /* Lề dọc các section toàn cục trên mobile đồng bộ 36px */
    .section-padding { padding: var(--section-pad-y) 0 !important; }
    
    /* Ép lề dọc các khối trang chủ trên mobile về mức 36px */
    .homepage-counters { padding: 0 0 var(--section-pad-y) 0 !important; }
    .homepage-featured-products { padding: var(--section-pad-y) 0 !important; }
    .homepage-projects { padding: var(--section-pad-y) 0 !important; }
    .homepage-testimonials { padding: var(--section-pad-y) 0 !important; }
    
    /* Ép lề dọc các Section template con trên mobile về mức 36px */
    .midori-about-section { padding: var(--section-pad-y) 0 !important; }
    .midori-categories-section { padding: var(--section-pad-y) 0 !important; }
    .midori-services-overlay-section { padding: var(--section-pad-y) 0 !important; }
    .section-inspiration { padding: var(--section-pad-y) 0 !important; }
    .dichvu-why-choose { padding: var(--section-pad-y) 0 !important; }
    .midori-cta-bottom-section { padding: 36px 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;
}

/* ==========================================================================
   ĐỒNG BỘ TYPOGRAPHY VÀ KHOẢNG CÁCH TRANG GIỚI THIỆU (.site-gioithieu)
   ========================================================================== */
.site-gioithieu section:not(.midori-banner):not(.midori-cta-bottom-section):not(.midori-philosophy):not(.midori-capacity-section) h2,
.site-gioithieu section:not(.midori-banner):not(.midori-cta-bottom-section):not(.midori-philosophy):not(.midori-capacity-section) .midori-section-title,
.site-gioithieu section:not(.midori-banner):not(.midori-cta-bottom-section):not(.midori-philosophy):not(.midori-capacity-section) .midori-heading {
    font-family: var(--font-serif, 'Kodchasan', Georgia, serif) !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    color: var(--text-title, #374426) !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-heading-bottom) !important; /* Khoảng cách lề dưới từ Heading tới Text chuẩn trang chủ */
    line-height: 1.3 !important;
}

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

/* ĐẢM BẢO CHỮ MÀU TRẮNG CHO CÁC SECTION NỀN TỐI TRÊN TRANG GIỚI THIỆU */
.site-gioithieu .midori-philosophy-title,
.site-gioithieu .midori-philosophy-subtitle,
.site-gioithieu .midori-philosophy-item-text,
.site-gioithieu .midori-capacity-title,
.site-gioithieu .midori-capacity-number,
.site-gioithieu .midori-capacity-text,
.site-gioithieu .midori-cta-glass-card h2,
.site-gioithieu .midori-cta-glass-card p {
    color: #ffffff !important;
}

/* Giữ nguyên kiểu chữ nghiêng nghệ thuật (Italic) cho các câu quote trích dẫn */
.site-gioithieu .midori-story-highlight,
.site-gioithieu em,
.site-gioithieu i,
.site-gioithieu blockquote {
    font-style: italic !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ữ hệ thống cho các trang WooCommerce */
.woocommerce,
.woocommerce-page,
.wc-block-cart,
.wc-block-checkout {
    font-family: var(--font-sans, "Plus Jakarta Sans", "Open Sans", sans-serif) !important;
}

.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, "Plus Jakarta Sans", "Open Sans", sans-serif) !important;
}

/* Tên sản phẩm trong trang Giỏ hàng & Thanh toán (Cả bảng WooCommerce truyền thống và WC Block Cart/Checkout) */
.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, "Plus Jakarta Sans", "Open Sans", sans-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-dark, #0F0F0F) !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(--midori-accent, #456C35) !important;
}

/* Giá tiền & Tổng tiền trong Giỏ hàng & Thanh toán */
.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, "Plus Jakarta Sans", "Open Sans", sans-serif) !important;
    font-weight: 600 !important;
    color: var(--text-dark, #0F0F0F) !important;
}

/* Nút Đặt hàng / Thanh toán */
.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(--midori-accent, #456C35) !important;
    color: #ffffff !important;
    font-family: var(--font-sans, "Plus Jakarta Sans", "Open Sans", sans-serif) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 0 !important;
    transition: var(--transition-base, all 0.3s ease) !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(--midori-accent-dark, #374426) !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;
}

/* PAGINATION FONT OVERRIDE */
.midori-pagination,
.midori-pagination a,
.midori-pagination span {
    font-family: var(--font-poppins, 'Poppins', sans-serif) !important;
}

/* ẨN BREADCRUMB HOÀN TOÀN TRÊN GIAO DIỆN ĐỂ GIỮ NGUYÊN THIẾT KẾ ĐẸP, NHƯNG BỌT CODE VẪN CHO YOAST SEO ĐỌC ĐƯỢC */
.midori-breadcrumb-nav {
    display: none !important;
}