/* ==========================================================================
   NẠP PHÔNG CHỮ HỆ THỐNG
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
/* Lưu ý: Nếu Parastoo là font tải về, hãy dùng @font-face ở đây */

:root {
    /* ==========================================================================
       1. COLORS SYSTEM (BẢNG MÀU THƯƠNG HIỆU)
       ========================================================================== */
    --color-primary: #FCFAF7;        /* Main primary color */
    --color-neutral: #EFE8DF;        /* Product Card/Blog/Review */
    --color-accent-1: #E06640;       /* Accent color 1 (Cam) */
    --color-accent-2: #8A5038;       /* Accent color 2 (Nâu) */
    --color-bg-main: #FFF5E8;        /* Background */
    --color-bg-liner: #FFF5E8;       /* Background - Liner */

    --text-heading: #2F2B29;         /* Heading text */
    --text-body: #5C5752;            /* Body text */
    --text-white: #F7F8F9;           /* White text */
    --text-grey: #777777;            /* Grey text */
    
    --color-icon: #6C7658;           /* Icon/Badge */

    /* ==========================================================================
       2. FONTS SYSTEM (HỆ THỐNG PHÔNG CHỮ CHUẨN DESKTOP)
       ========================================================================== */
    --font-primary: 'Parastoo', serif; 
    --font-secondary: 'Be Vietnam Pro', sans-serif;

    /* --- 2.1. TYPOGRAPHY: HEADING (TIÊU ĐỀ DESKTOP) --- */
    --fs-h2: 38px;  --lh-h2: 1.35;  --fw-h2: 600;  --ff-h2: var(--font-primary);
    --fs-h3: 28px;  --lh-h3: 1.40;  --fw-h3: 600;  --ff-h3: var(--font-secondary);
    --fs-h4: 23px;  --lh-h4: 1.40;  --fw-h4: 600;  --ff-h4: var(--font-secondary);
    --fs-h5: 18px;  --lh-h5: 1.40;  --fw-h5: 600;  --ff-h5: var(--font-secondary);

    /* --- 2.2. TYPOGRAPHY: TEXT (VĂN BẢN DESKTOP) --- */
    --fs-body-m: 20px;   --lh-body-m: 1.20;  --fw-body-m: 400;  --ff-body-m: var(--font-primary);
    --fs-body-s: 18px;   --lh-body-s: 1.22;  --fw-body-s: 400;  --ff-body-s: var(--font-primary);
    --fs-caption: 13px;  --lh-caption: 1.20; --fw-caption: 400; --ff-caption: var(--font-primary);

    /* --- 2.3. TYPOGRAPHY: BUTTONS (NÚT BẤM DESKTOP) --- */
    --fs-btn-l: 20px;  --lh-btn-l: 1.40;  --fw-btn-l: 600;  --ff-btn-l: var(--font-secondary);
    --fs-btn-m: 14px;  --lh-btn-m: 1.40;  --fw-btn-m: 600;  --ff-btn-m: var(--font-secondary);
    --fs-btn-s: 12px;  --lh-btn-s: 1.35;  --fw-btn-s: 600;  --ff-btn-s: var(--font-secondary);

    /* --- 2.4. TYPOGRAPHY: MENU (ĐIỀU HƯỚNG DESKTOP) --- */
    --fs-menu-m: 20px;  --lh-menu-m: 1.40;  --fw-menu-m: 600;  --ff-menu-m: var(--font-primary);
    --fs-menu-s: 16px;  --lh-menu-s: 1.40;  --fw-menu-s: 600;  --ff-menu-s: var(--font-secondary);

    /* ==========================================================================
       3. DESIGN TOKENS (KHOẢNG CÁCH & HIỆU ỨNG)
       ========================================================================== */
    --transition-base: all 0.3s ease-in-out;
    --space-heading-bottom: 12px;
    --space-text-bottom: 24px;
}

/* ==========================================================================
   MOBILE DESIGN TOKENS OVERRIDES (GHI ĐÈ DÀNH CHO MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        /* Spacing Mobile */
        --space-heading-bottom: 8px;
        --space-text-bottom: 16px;

        /* Heading Mobile */
        --fs-h2: 26px;  --lh-h2: 1.30;  --fw-h2: 600;
        --fs-h3: 22px;  --lh-h3: 1.35;  --fw-h3: 600;
        --fs-h4: 19px;  --lh-h4: 1.35;  --fw-h4: 600;
        --fs-h5: 15px;  --lh-h5: 1.35;  --fw-h5: 600;

        /* Text Mobile */
        --fs-body-m: 15px;   --lh-body-m: 1.45;  --fw-body-m: 400;
        --fs-body-s: 13.5px; --lh-body-s: 1.40;  --fw-body-s: 400;
        --fs-caption: 11.5px;--lh-caption: 1.35; --fw-caption: 600;

        /* Button Mobile */
        --fs-btn-l: 10px;  --lh-btn-l: 1.35;  --fw-btn-l: 500;
        --fs-btn-m: 10px;  --lh-btn-m: 1.35;  --fw-btn-m: 500;
        --fs-btn-s: 10px;  --lh-btn-s: 1.35;  --fw-btn-s: 500;

        /* Menu Mobile */
        --fs-menu-m: 16px;  --lh-menu-m: 1.35;  --fw-menu-m: 600;
        --fs-menu-s: 14px;  --lh-menu-s: 1.35;  --fw-menu-s: 600;
    }
}

/* ==========================================================================
   RESET TOÀN TRANG (GLOBAL RESET)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    color: var(--text-body);
    background-color: var(--color-bg-main);
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   QUY CHUẨN THẺ VĂN BẢN (H1-H6, P)
   ========================================================================== */
h2, .h2 {
    font-family: var(--ff-h2); font-size: var(--fs-h2); 
    line-height: var(--lh-h2); font-weight: var(--fw-h2);
    color: var(--text-heading); margin: 0 0 var(--space-heading-bottom);
}

h3, .h3 {
    font-family: var(--ff-h3); font-size: var(--fs-h3); 
    line-height: var(--lh-h3); font-weight: var(--fw-h3);
    color: var(--text-heading); margin: 0 0 var(--space-heading-bottom);
}

h4, .h4 {
    font-family: var(--ff-h4); font-size: var(--fs-h4); 
    line-height: var(--lh-h4); font-weight: var(--fw-h4);
    color: var(--text-heading); margin: 0 0 var(--space-heading-bottom);
}

h5, .h5 {
    font-family: var(--ff-h5); font-size: var(--fs-h5); 
    line-height: var(--lh-h5); font-weight: var(--fw-h5);
    color: var(--text-heading); margin: 0 0 var(--space-heading-bottom);
}

p {
    font-family: var(--ff-body-m); font-size: var(--fs-body-m); 
    line-height: var(--lh-body-m); font-weight: var(--fw-body-m);
    margin: 0 0 var(--space-text-bottom);
}

/* ==========================================================================
   CLASS TIỆN ÍCH PHÔNG CHỮ (FONTS SYSTEM UTILITIES)
   ========================================================================== */
.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-caption { font-family: var(--ff-caption); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); }

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

/* ==========================================================================
   BUTTONS UTILITIES (TIỆN ÍCH NÚT BẤM)
   ========================================================================== */
.btn-l, .btn-m, .btn-s {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
    border: none;
    background-color: var(--color-accent-1);
    color: var(--text-white);
}

.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); padding: 16px 32px; }
.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); padding: 12px 24px; }
.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); padding: 8px 16px; }

.btn-l:hover, .btn-m:hover, .btn-s:hover {
    background-color: var(--color-accent-2);
}

/* ==========================================================================
   LAYOUT UTILITIES (TIỆN ÍCH BỐ CỤC)
   ========================================================================== */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }

/* ==========================================================================
   LAYOUT RESPONSIVE
   ========================================================================== */

/* --- Responsive product-card (GIỮ NGUYÊN HOÀN TOÀN DESKTOP) --- */
@media (min-width: 992px) {
    body .product-card {
        border-radius: 20px;
    }

    body .product-card__img img {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    body .product-card__body {
        padding: 16px !important;
    }

    body .product-card__title {
        font-size: 20px !important;
    }

    body .product-card__cart-btn {
        width: 42px !important;
        height: 42px !important;
    }

    body .product-card__cart-btn svg {
        width: 20px;
        height: 20px;
    }

    body .product-card__excerpt {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    body .product-card__price {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    body .product-card__actions {
        gap: 8px !important;
    }

    body .product-card__btn {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
}

/* --- RESPONSIVE product-card-list (GIỮ NGUYÊN ÉP 4 CỘT TRÊN DESKTOP) --- */
@media (min-width: 769px) {
    body .product-card-list {
        padding: 50px 0;
    }

    body .product-card-list__container {
        padding: 0 20px !important;
    }

    body .product-card-list__header h2 {
        font-size: var(--fs-h2);
    }

    body .product-card-list__header {
        margin-bottom: 35px;
    }

    /* Ép hiển thị đúng 4 cột trên Desktop */
    .product-card-list__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    body .product-card-list__footer {
        margin-top: 40px;
    }

    body .product-card-list__btn {
        padding: 10px 28px;
        font-size: 13px;
        font-weight: 700;
    }
}

/* --- RESPONSIVE member-card-list --- */
@media (max-width: 768px) {
    .member-card-list {
        padding: 35px 0;
    }

    .member-card-list__container {
        padding: 0 12px !important;
    }

    .member-card-list__title {
        font-size: var(--fs-h2);
    }

    .member-card-list__header {
        margin-bottom: 20px;
    }

    .member-card-list__item {
        padding: 18px 10px;
        border-radius: 12px;
    }

    .member-card-list__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .member-card-list__item-title {
        font-size: var(--fs-menu-s);
        margin-bottom: 6px;
    }

    .member-card-list__item-desc {
        font-size: var(--fs-caption);
        line-height: var(--lh-caption);
    }
}

/* --- content-image-block --- */
@media (max-width: 991px) {
    .content-image-block {
        padding: 35px 0;
    }

    .content-image-block__container {
        padding: 0 15px !important;
    }

    .content-image-block__row {
        flex-direction: column-reverse; /* Đưa chữ lên trên, ảnh xuống dưới */
        gap: 30px;
    }

    .content-image-block--img-left .content-image-block__row {
        flex-direction: column-reverse;
    }

   body .content-image-block__img-col {
        max-width: 100%;
        width: 100%;
    }

    .content-image-block__title {
        font-size: var(--fs-h2);
    }

    .content-image-block__subtitle {
        font-size: var(--fs-h4);
        margin-bottom: 15px;
    }

    .content-image-block__desc {
        font-size: var(--fs-body-s);
        line-height: var(--lh-body-s);
        margin-bottom: 20px;
    }

    .content-image-block__desc blockquote,
    .content-image-block__desc .quote {
        font-size: var(--fs-h5);
        margin: 15px 0;
    }

    .content-image-block__btn {
        padding: 8px 20px;
        font-size: var(--fs-btn-m);
        font-weight: var(--fw-btn-m);
    }
}

/* --- RESPONSIVE numbered-step-list --- */
@media (max-width: 768px) {
    .numbered-step-list {
        padding: 40px 0;
    }

    .numbered-step-list__container {
        padding: 0 12px !important;
    }

    .numbered-step-list__title {
        font-size: var(--fs-h2);
    }

    .numbered-step-list__subtitle {
        font-size: var(--fs-btn-s);
    }

    .numbered-step-list__grid {
        gap: 12px;
    }

    .numbered-step-list__item {
        padding: 16px 14px;
        border-radius: 10px;
    }

    .numbered-step-list__item-header {
        margin-bottom: 14px;
    }

    .numbered-step-list__number {
        width: 32px;
        height: 32px;
        font-size: var(--fs-menu-s);
        border-radius: 6px;
    }

    .numbered-step-list__icon {
        width: 32px;
        height: 32px;
    }

    .numbered-step-list__item-title {
        font-size: var(--fs-h5);
        margin-bottom: 6px;
    }

    .numbered-step-list__item-desc {
        font-size: var(--fs-caption);
        line-height: var(--lh-caption);
    }
}

/* ==========================================================================
   RESPONSIVE cta form
   ========================================================================== */

@media (min-width: 992px) {
    .cta-form-block {
        padding: 80px 0;
        background-size: contain;
        background-position: right center;
    }

    .cta-form-block__title {
        font-size: 34px;
    }
}

@media (max-width: 991px) {
    .cta-form-block {
        padding: 50px 0;
        background-position: center bottom;
        background-size: cover;
    }

    .cta-form-block__content {
        max-width: 100%;
    }

    .cta-form-block__title {
        font-size: var(--fs-h2);
    }

    .cta-form-block__desc {
        font-size: var(--fs-body-s);
        margin-bottom: 20px;
    }

    .cta-form-block__btn {
        height: 44px;
        font-size: var(--fs-btn-l);
    }
}


/* ==========================================================================
  Trang thanh toán
   ========================================================================== */

/* 1. Desktop */
.woocommerce-checkout .site-main,
.woocommerce-checkout .entry-content,
.woocommerce-checkout .site-content,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-checkout.alignfull,
.wc-block-checkout {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .site-main {
    padding-top: 40px !important;
    padding-bottom: 80px !important;
}

/* 2. Khung bố cục 2 cột của thông tin liên lạc và tóm tắt đơn hàng*/
.wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout.wc-block-checkout {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 3. Mobile */
@media (max-width: 767px) {
    .woocommerce-checkout .site-main,
    .woocommerce-checkout .entry-content,
    .wp-block-woocommerce-checkout,
    .wc-block-checkout {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 25px !important;
        padding-bottom: 60px !important;
    }
}

/* ==========================================================================
   CONSOLIDATED RESPONSIVE MEDIA QUERIES (GLOBAL)
   ========================================================================== */

/* --- MIN-WIDTH: 992PX (DESKTOP) --- */
@media (min-width: 992px) {
    /* Member Card List 4 Columns */
    .member-card-list {
        padding: 60px 0;
    }

    .member-card-list__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px;
    }

    .member-card-list__item {
        padding: 30px 20px;
    }

    .member-card-list__icon {
        width: 60px;
        height: 60px;
        margin-bottom: 18px;
    }

    .member-card-list__item-title {
        font-size: 17px;
    }

    .member-card-list__item-desc {
        font-size: 15px;
    }

    .member-card-list__item-title + .member-card-list__item-desc {
        font-size: 13.5px;
    }
}

/* --- MAX-WIDTH: 991PX (TABLET) --- */
@media (max-width: 991px) {
    /* Feature Commit Bar */
    .feature-commit-bar {
        margin-top: -50px;
        margin-bottom: 30px;
    }

    .feature-commit-bar__card {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .feature-commit-bar__item {
        padding: 18px 16px;
    }

    .feature-commit-bar__item:nth-child(2n) {
        border-right: none;
    }

    .feature-commit-bar__item:nth-child(1),
    .feature-commit-bar__item:nth-child(2) {
        border-bottom: 1px solid #EFE8DF;
    }

    /* Content Image Block Counters */
    .content-image-block__counters {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 40px;
    }

    .content-image-block__counter-card {
        padding: 24px 14px;
    }

    .content-image-block__counter-number {
        font-size: 36px;
        margin-bottom: 8px;
    }

    .content-image-block__counter-label {
        font-size: 14.5px;
    }

    /* Harvest Process */
    .harvest-process {
        padding: 45px 0 50px 0;
    }

    .harvest-process__header {
        margin-bottom: 30px;
    }

    .harvest-process__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 18px;
        max-width: 450px;
        margin: 0 auto;
    }
    
    .harvest-process__number-badge {
        width: 36px;
        height: 36px;
        font-size: 18px;
        top: 12px;
        left: 12px;
        border-radius: 6px;
    } 
  
    .harvest-process__title {
        font-size: var(--fs-h2, 28px);
    }

    .harvest-process__desc {
        font-size: var(--fs-body-s, 15px);
    }

    .harvest-process__card-title {
        font-size: 19px;
    }

    .harvest-process__card-desc {
        font-size: 13.5px;
    }

    /* Info Box Grid Contact */
    .info-box-grid {
        padding: 40px 0 50px 0;
    }

    .info-box-grid__row {
        flex-direction: column !important;
        gap: 30px;
    }

    .info-box-grid__box {
        padding: 30px 20px;
    }

    .info-box-grid__address-card {
        padding: 20px;
    }

    .info-box-grid__page-title {
        font-size: 30px;
    }

    /* Sidebar Filter Grid */
    .sidebar-filter-grid__container {
        flex-direction: column !important;
        gap: 30px;
    }

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

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

/* --- MAX-WIDTH: 768PX / 767PX (MOBILE LARGE / TABLET SMALL) --- */
@media (max-width: 768px) {
    /* Certificate List Swiper Mobile */
    .certificate-list {
        padding: 40px 0 50px 0;
    }

    .certificate-list__header {
        margin-bottom: 30px;
    }

    .certificate-list__title {
        font-size: var(--fs-h2, 28px);
    }

    .certificate-list__desc {
        font-size: var(--fs-body-s, 14.5px);
    }

    .certificate-list__desktop-only {
        display: none !important;
    }

    .certificate-list__mobile-only {
        display: block !important;
        width: 100%;
    }

    .certificate-list__swiper {
        width: 100%;
        padding-bottom: 35px !important;
    }

    .certificate-list__pagination.swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        position: relative !important;
        bottom: auto !important;
        margin-top: 20px;
    }

    .certificate-list__pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background-color: #D8D0C7;
        border-radius: 50%;
        opacity: 1;
        margin: 0 !important;
        transition: all 0.3s ease;
    }

    .certificate-list__pagination .swiper-pagination-bullet-active {
        background-color: var(--color-accent-2, #8A5038) !important;
        transform: scale(1.2);
    }
}

@media (max-width: 767px) {
    /* Hero Banner Mobile */
    .hero__container,
    .hero__slide {
        min-height: 540px;
    }

    .hero__slide {
        padding-top: 250px;
        padding-bottom: 50px;
    }

    .hero__pagination {
        bottom: 20px;
        gap: 8px;
    }

    .hero__pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .hero__pagination .swiper-pagination-bullet-active {
        transform: scale(1.25);
    }
}

/* --- MAX-WIDTH: 600PX (MOBILE SMALL) --- */
@media (max-width: 600px) {
    /* Content Image Block Counters Mobile */
    .content-image-block__counters {
        grid-template-columns: 1fr !important;
        gap: 14px;
        margin-top: 30px;
    }

    .content-image-block__counter-card {
        padding: 20px 14px;
    }

    .content-image-block__counter-number {
        font-size: 32px;
    }

    .content-image-block__counter-label {
        font-size: 14px;
    }
}

/* --- MAX-WIDTH: 575PX / 576PX (MOBILE EXTRA SMALL) --- */
@media (max-width: 576px) {
    /* Sidebar Filter Grid Mobile */
    .sidebar-filter-grid__grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575px) {
    /* Feature Commit Bar Mobile */
    .feature-commit-bar {
        margin-top: -40px;
    }

    .feature-commit-bar__card {
        grid-template-columns: 1fr !important;
    }

    .feature-commit-bar__item {
        border-right: none !important;
        border-bottom: 1px solid #EFE8DF;
        padding: 16px 14px;
    }

    .feature-commit-bar__item:last-child {
        border-bottom: none;
    }

    .feature-commit-bar__icon {
        width: 32px;
        height: 32px;
    }

    .feature-commit-bar__title {
        font-size: 13px;
    }

    .feature-commit-bar__desc {
        font-size: 12px;
    }
    
    /* Lightbox Modal Mobile */
    .cert-lightbox-modal__close {
        top: -12px;
        right: -12px;
        width: 34px;
        height: 34px;
        font-size: 22px;
    }
}