/* =========================================================
   HATACA.VN - DANH SÁCH SẢN PHẨM / SHOP - FINAL
   File: san-pham.css
   Dùng cho:
   - /shop/
   - Product archive
   - Danh mục WooCommerce product_cat

   Lưu ý:
   - Header dùng chung từ hataca-global.css, KHÔNG định dạng lại ở đây.
   - Container chuẩn: 1100px.
   ========================================================= */

body.woocommerce-shop,
body.post-type-archive-product,
body.tax-product_cat {
    --hataca-product-container: 1100px;
    --hataca-product-gutter: 24px;
    --hataca-product-blue: #0057B8;
    --hataca-product-green: #16823A;
    --hataca-product-title: #12304A;
    --hataca-product-text: #374151;
    --hataca-product-muted: #64748B;
    --hataca-product-border: #E3E9EF;
    background: #FFFFFF;
    overflow-x: clip;
}

/* =========================================================
   1. MAIN / CONTAINER
   Khoảng trên giữ riêng cho Woo archive để breadcrumb không bị Header che.
   ========================================================= */

body.woocommerce-shop main.wp-block-group,
body.post-type-archive-product main.wp-block-group,
body.tax-product_cat main.wp-block-group,
body.woocommerce-shop main.has-global-padding,
body.post-type-archive-product main.has-global-padding,
body.tax-product_cat main.has-global-padding {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 100px 0 80px !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
}

/* Các block trực tiếp trong main về cùng lề 1100px */
body.woocommerce-shop main > .alignwide,
body.post-type-archive-product main > .alignwide,
body.tax-product_cat main > .alignwide,
body.woocommerce-shop main > .wc-block-breadcrumbs,
body.post-type-archive-product main > .wc-block-breadcrumbs,
body.tax-product_cat main > .wc-block-breadcrumbs,
body.woocommerce-shop main > .wp-block-breadcrumbs,
body.post-type-archive-product main > .wp-block-breadcrumbs,
body.tax-product_cat main > .wp-block-breadcrumbs {
    width: calc(100% - (var(--hataca-product-gutter) * 2)) !important;
    max-width: var(--hataca-product-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* =========================================================
   2 + 3. BREADCRUMB + TIÊU ĐỀ
   Gom thành một khối duy nhất, cùng nền và cùng border.
   QUAN TRỌNG: tắt pseudo-element full-width cũ của H1.
   ========================================================= */

/* Hai block về cùng đúng container 1100px */
body.woocommerce-shop main > .wc-block-breadcrumbs,
body.post-type-archive-product main > .wc-block-breadcrumbs,
body.tax-product_cat main > .wc-block-breadcrumbs,
body.woocommerce-shop main > .wp-block-breadcrumbs,
body.post-type-archive-product main > .wp-block-breadcrumbs,
body.tax-product_cat main > .wp-block-breadcrumbs,
body.woocommerce-shop main > h1.wp-block-query-title,
body.post-type-archive-product main > h1.wp-block-query-title,
body.tax-product_cat main > h1.wp-block-query-title {
    width: calc(100% - 48px) !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Breadcrumb = nửa trên của card */
body.woocommerce-shop main > .wc-block-breadcrumbs,
body.post-type-archive-product main > .wc-block-breadcrumbs,
body.tax-product_cat main > .wc-block-breadcrumbs,
body.woocommerce-shop main > .wp-block-breadcrumbs,
body.post-type-archive-product main > .wp-block-breadcrumbs,
body.tax-product_cat main > .wp-block-breadcrumbs {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;

    padding: 16px 24px 7px !important;

    background: #F6F9FC !important;

    border: 1px solid #DCE5ED !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

body.woocommerce-shop .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #64748B !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

body.woocommerce-shop .woocommerce-breadcrumb a,
body.post-type-archive-product .woocommerce-breadcrumb a,
body.tax-product_cat .woocommerce-breadcrumb a {
    color: #0057B8 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.woocommerce-shop .woocommerce-breadcrumb a:hover,
body.post-type-archive-product .woocommerce-breadcrumb a:hover,
body.tax-product_cat .woocommerce-breadcrumb a:hover {
    color: #27853F !important;
}

/* H1 = nửa dưới của cùng card */
html body.woocommerce-shop main > h1.wp-block-query-title,
html body.post-type-archive-product main > h1.wp-block-query-title,
html body.tax-product_cat main > h1.wp-block-query-title {
    position: relative !important;
    z-index: 1 !important;

    margin-top: 0 !important;
    margin-bottom: 32px !important;
    margin-block-start: 0 !important;
    margin-block-end: 32px !important;

    padding: 2px 24px 20px !important;

    background: #F6F9FC !important;

    border: 1px solid #DCE5ED !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;

    color: #12304A !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
    text-align: left !important;

    overflow: hidden !important;
    isolation: auto !important;
}

/* TẮT HOÀN TOÀN dải nền 100vw cũ */
html body.woocommerce-shop main > h1.wp-block-query-title::before,
html body.post-type-archive-product main > h1.wp-block-query-title::before,
html body.tax-product_cat main > h1.wp-block-query-title::before,
html body.woocommerce-shop main > h1.wp-block-query-title::after,
html body.post-type-archive-product main > h1.wp-block-query-title::after,
html body.tax-product_cat main > h1.wp-block-query-title::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: 0 !important;
}

/* Mobile */
@media (max-width: 781px) {
    body.woocommerce-shop main > .wc-block-breadcrumbs,
    body.post-type-archive-product main > .wc-block-breadcrumbs,
    body.tax-product_cat main > .wc-block-breadcrumbs,
    body.woocommerce-shop main > .wp-block-breadcrumbs,
    body.post-type-archive-product main > .wp-block-breadcrumbs,
    body.tax-product_cat main > .wp-block-breadcrumbs,
    body.woocommerce-shop main > h1.wp-block-query-title,
    body.post-type-archive-product main > h1.wp-block-query-title,
    body.tax-product_cat main > h1.wp-block-query-title {
        width: calc(100% - 32px) !important;
    }

    body.woocommerce-shop main > .wc-block-breadcrumbs,
    body.post-type-archive-product main > .wc-block-breadcrumbs,
    body.tax-product_cat main > .wc-block-breadcrumbs,
    body.woocommerce-shop main > .wp-block-breadcrumbs,
    body.post-type-archive-product main > .wp-block-breadcrumbs,
    body.tax-product_cat main > .wp-block-breadcrumbs {
        padding: 14px 16px 6px !important;
        border-radius: 10px 10px 0 0 !important;
    }

    html body.woocommerce-shop main > h1.wp-block-query-title,
    html body.post-type-archive-product main > h1.wp-block-query-title,
    html body.tax-product_cat main > h1.wp-block-query-title {
        margin-bottom: 24px !important;
        padding: 2px 16px 17px !important;
        border-radius: 0 0 10px 10px !important;
        font-size: 28px !important;
    }
}

/* =========================================================
   4. THANH KẾT QUẢ + SẮP XẾP
   ========================================================= */

body.woocommerce-shop main > .wp-block-group.alignwide.is-layout-flex,
body.post-type-archive-product main > .wp-block-group.alignwide.is-layout-flex,
body.tax-product_cat main > .wp-block-group.alignwide.is-layout-flex {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding: 13px 16px !important;
    gap: 18px !important;
    border: 1px solid var(--hataca-product-border) !important;
    border-radius: 10px !important;
    background: #F7FAFC !important;
    box-sizing: border-box !important;
}

body.woocommerce-shop .woocommerce-result-count,
body.post-type-archive-product .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count {
    margin: 0 !important;
    color: var(--hataca-product-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.woocommerce-shop .woocommerce-ordering,
body.post-type-archive-product .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering {
    margin: 0 !important;
}

body.woocommerce-shop .woocommerce-ordering select.orderby,
body.post-type-archive-product .woocommerce-ordering select.orderby,
body.tax-product_cat .woocommerce-ordering select.orderby {
    width: auto !important;
    min-width: 220px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 38px 0 13px !important;
    border: 1px solid #D6E0E8 !important;
    border-radius: 7px !important;
    background-color: #FFFFFF !important;
    color: var(--hataca-product-text) !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* =========================================================
   5. PRODUCT COLLECTION + GRID
   ========================================================= */

body.woocommerce-shop .wp-block-woocommerce-product-collection,
body.post-type-archive-product .wp-block-woocommerce-product-collection,
body.tax-product_cat .wp-block-woocommerce-product-collection {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.woocommerce-shop .wc-block-product-template,
body.post-type-archive-product .wc-block-product-template,
body.tax-product_cat .wc-block-product-template {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
    list-style: none !important;
}

body.woocommerce-shop .wc-block-product-template::before,
body.woocommerce-shop .wc-block-product-template::after,
body.post-type-archive-product .wc-block-product-template::before,
body.post-type-archive-product .wc-block-product-template::after,
body.tax-product_cat .wc-block-product-template::before,
body.tax-product_cat .wc-block-product-template::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   6. CARD SẢN PHẨM
   ========================================================= */

body.woocommerce-shop .wc-block-product-template > .wc-block-product,
body.post-type-archive-product .wc-block-product-template > .wc-block-product,
body.tax-product_cat .wc-block-product-template > .wc-block-product {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 0 22px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid var(--hataca-product-border) !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: 0 5px 20px rgba(18, 48, 74, .06) !important;
    box-sizing: border-box !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

body.woocommerce-shop .wc-block-product-template > .wc-block-product:hover,
body.post-type-archive-product .wc-block-product-template > .wc-block-product:hover,
body.tax-product_cat .wc-block-product-template > .wc-block-product:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 87, 184, .24) !important;
    box-shadow: 0 14px 36px rgba(18, 48, 74, .12) !important;
}

/* =========================================================
   7. ẢNH SẢN PHẨM
   ========================================================= */

body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-image,
body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-image,
body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-image {
    position: relative !important;
    width: 100% !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
}

body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-image > a,
body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-image > a,
body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-image > a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
}

body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-image img,
body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-image img,
body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 12px !important;
    object-fit: contain !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    transition: transform .35s ease !important;
}

body.woocommerce-shop .wc-block-product:hover .wp-block-woocommerce-product-image img,
body.post-type-archive-product .wc-block-product:hover .wp-block-woocommerce-product-image img,
body.tax-product_cat .wc-block-product:hover .wp-block-woocommerce-product-image img {
    transform: scale(1.035) !important;
}

/* =========================================================
   8. BADGE KHUYẾN MÃI
   Nền đỏ tự giãn, chữ luôn 1 dòng.
   ========================================================= */

body.woocommerce-shop .wc-block-product-template .wp-block-woocommerce-product-sale-badge,
body.post-type-archive-product .wc-block-product-template .wp-block-woocommerce-product-sale-badge,
body.tax-product_cat .wc-block-product-template .wp-block-woocommerce-product-sale-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
    z-index: 20 !important;
}

body.woocommerce-shop .wc-block-product-template .wc-block-components-product-sale-badge,
body.post-type-archive-product .wc-block-product-template .wc-block-components-product-sale-badge,
body.tax-product_cat .wc-block-product-template .wc-block-components-product-sale-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-width: 90px !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #E53935 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-shop .wc-block-components-product-sale-badge__text,
body.post-type-archive-product .wc-block-components-product-sale-badge__text,
body.tax-product_cat .wc-block-components-product-sale-badge__text {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* =========================================================
   9. TÊN SẢN PHẨM
   ========================================================= */

body.woocommerce-shop .wc-block-product .wp-block-post-title,
body.post-type-archive-product .wc-block-product .wp-block-post-title,
body.tax-product_cat .wc-block-product .wp-block-post-title {
    min-height: 52px !important;
    margin: 0 0 10px !important;
    padding: 0 17px !important;
    color: var(--hataca-product-title) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

body.woocommerce-shop .wc-block-product .wp-block-post-title a,
body.post-type-archive-product .wc-block-product .wp-block-post-title a,
body.tax-product_cat .wc-block-product .wp-block-post-title a {
    color: var(--hataca-product-title) !important;
    text-decoration: none !important;
}

body.woocommerce-shop .wc-block-product .wp-block-post-title a:hover,
body.post-type-archive-product .wc-block-product .wp-block-post-title a:hover,
body.tax-product_cat .wc-block-product .wp-block-post-title a:hover {
    color: var(--hataca-product-blue) !important;
}

/* =========================================================
   10. GIÁ
   ========================================================= */

body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-price,
body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-price,
body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-price {
    width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 17px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

body.woocommerce-shop .wc-block-product .wc-block-components-product-price,
body.post-type-archive-product .wc-block-product .wc-block-components-product-price,
body.tax-product_cat .wc-block-product .wc-block-components-product-price {
    color: var(--hataca-product-green) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

body.woocommerce-shop .wc-block-product .wc-block-components-product-price del,
body.post-type-archive-product .wc-block-product .wc-block-components-product-price del,
body.tax-product_cat .wc-block-product .wc-block-components-product-price del {
    margin-right: 5px !important;
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

body.woocommerce-shop .wc-block-product .wc-block-components-product-price ins,
body.post-type-archive-product .wc-block-product .wc-block-components-product-price ins,
body.tax-product_cat .wc-block-product .wc-block-components-product-price ins {
    color: var(--hataca-product-green) !important;
    -webkit-text-fill-color: var(--hataca-product-green) !important;
    text-decoration: none !important;
}

/* =========================================================
   11. NÚT THÊM VÀO GIỎ
   ========================================================= */

body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-button,
body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-button,
body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-button {
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 0 17px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

body.woocommerce-shop .wc-block-product .wc-block-components-product-button__button,
body.post-type-archive-product .wc-block-product .wc-block-components-product-button__button,
body.tax-product_cat .wc-block-product .wc-block-components-product-button__button,
body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link {
    width: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 17px !important;
    border: 2px solid var(--hataca-product-blue) !important;
    border-radius: 7px !important;
    background: var(--hataca-product-blue) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}

body.woocommerce-shop .wc-block-product .wc-block-components-product-button__button:hover,
body.post-type-archive-product .wc-block-product .wc-block-components-product-button__button:hover,
body.tax-product_cat .wc-block-product .wc-block-components-product-button__button:hover,
body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover,
body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover,
body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover {
    border-color: #34A853 !important;
    background: #34A853 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

body.woocommerce-shop .wc-block-product .added_to_cart,
body.post-type-archive-product .wc-block-product .added_to_cart,
body.tax-product_cat .wc-block-product .added_to_cart {
    margin: 8px 17px 0 !important;
    color: var(--hataca-product-blue) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* =========================================================
   12. TABLET
   ========================================================= */

@media (max-width: 900px) {
    body.woocommerce-shop .wc-block-product-template,
    body.post-type-archive-product .wc-block-product-template,
    body.tax-product_cat .wc-block-product-template {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }
}

/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 781px) {
    body.woocommerce-shop,
    body.post-type-archive-product,
    body.tax-product_cat {
        --hataca-product-gutter: 18px;
    }

    body.woocommerce-shop main.wp-block-group,
    body.post-type-archive-product main.wp-block-group,
    body.tax-product_cat main.wp-block-group,
    body.woocommerce-shop main.has-global-padding,
    body.post-type-archive-product main.has-global-padding,
    body.tax-product_cat main.has-global-padding {
        padding-top: 92px !important;
        padding-bottom: 55px !important;
    }

    html body.woocommerce-shop main > .wp-block-query-title,
    html body.post-type-archive-product main > .wp-block-query-title,
    html body.tax-product_cat main > .wp-block-query-title {
        width: calc(100% - 36px) !important;
        margin-bottom: 30px !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        font-size: 32px !important;
    }

    body.woocommerce-shop main > .wp-block-group.alignwide.is-layout-flex,
    body.post-type-archive-product main > .wp-block-group.alignwide.is-layout-flex,
    body.tax-product_cat main > .wp-block-group.alignwide.is-layout-flex {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 13px !important;
        gap: 10px !important;
    }

    body.woocommerce-shop .woocommerce-ordering,
    body.post-type-archive-product .woocommerce-ordering,
    body.tax-product_cat .woocommerce-ordering {
        width: 100% !important;
    }

    body.woocommerce-shop .woocommerce-ordering select.orderby,
    body.post-type-archive-product .woocommerce-ordering select.orderby,
    body.tax-product_cat .woocommerce-ordering select.orderby {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   14. MOBILE NHỎ - 2 CARD / HÀNG
   ========================================================= */

@media (max-width: 600px) {
    html body.woocommerce-shop main > .wp-block-query-title,
    html body.post-type-archive-product main > .wp-block-query-title,
    html body.tax-product_cat main > .wp-block-query-title {
        width: calc(100% - 32px) !important;
        margin-bottom: 26px !important;
        padding-top: 21px !important;
        padding-bottom: 21px !important;
        font-size: 30px !important;
    }

    body.woocommerce-shop .wc-block-product-template,
    body.post-type-archive-product .wc-block-product-template,
    body.tax-product_cat .wc-block-product-template {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.woocommerce-shop .wc-block-product-template > .wc-block-product,
    body.post-type-archive-product .wc-block-product-template > .wc-block-product,
    body.tax-product_cat .wc-block-product-template > .wc-block-product {
        padding-bottom: 15px !important;
        border-radius: 10px !important;
    }

    body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-image img,
    body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-image img,
    body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-image img {
        padding: 7px !important;
    }

    body.woocommerce-shop .wc-block-product-template .wp-block-woocommerce-product-sale-badge,
    body.post-type-archive-product .wc-block-product-template .wp-block-woocommerce-product-sale-badge,
    body.tax-product_cat .wc-block-product-template .wp-block-woocommerce-product-sale-badge {
        top: 9px !important;
        right: 9px !important;
    }

    body.woocommerce-shop .wc-block-product-template .wc-block-components-product-sale-badge,
    body.post-type-archive-product .wc-block-product-template .wc-block-components-product-sale-badge,
    body.tax-product_cat .wc-block-product-template .wc-block-components-product-sale-badge {
        min-width: 82px !important;
        padding: 6px 9px !important;
        font-size: 11px !important;
    }

    body.woocommerce-shop .wc-block-product .wp-block-post-title,
    body.post-type-archive-product .wc-block-product .wp-block-post-title,
    body.tax-product_cat .wc-block-product .wp-block-post-title {
        min-height: 44px !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-price,
    body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-price,
    body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-price {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    body.woocommerce-shop .wc-block-product .wc-block-components-product-price,
    body.post-type-archive-product .wc-block-product .wc-block-components-product-price,
    body.tax-product_cat .wc-block-product .wc-block-components-product-price {
        font-size: 15px !important;
    }

    body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-button,
    body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-button,
    body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-button {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    body.woocommerce-shop .wc-block-product .wc-block-components-product-button__button,
    body.post-type-archive-product .wc-block-product .wc-block-components-product-button__button,
    body.tax-product_cat .wc-block-product .wc-block-components-product-button__button,
    body.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
    body.post-type-archive-product .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
    body.tax-product_cat .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link {
        width: 100% !important;
        padding: 9px 8px !important;
        font-size: 12px !important;
    }
}

/* Máy rất nhỏ: 1 sản phẩm / hàng */
@media (max-width: 390px) {
    body.woocommerce-shop .wc-block-product-template,
    body.post-type-archive-product .wc-block-product-template,
    body.tax-product_cat .wc-block-product-template {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   HATACA - SHOP MOBILE
   Giảm khoảng cách Header -> Breadcrumb -> Tiêu đề
   Chỉ áp dụng /shop/
   ========================================================= */

@media (max-width: 781px) {

    /* Bỏ khoảng 40px Gutenberg tạo giữa Header và Main */
    body.post-type-archive-product
    .wp-site-blocks > main {
        margin-block-start: 0 !important;
        margin-top: 0 !important;
        padding-top: 12px !important;
    }

    /* Breadcrumb */
    body.post-type-archive-product
    main .woocommerce-breadcrumb {
        margin-top: 0 !important;
        margin-block-start: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Khối chứa tiêu đề shop */
    body.post-type-archive-product
    main .woocommerce-products-header {
        margin-top: 0 !important;
        margin-block-start: 0 !important;
    }

    /* Tiêu đề Sản phẩm */
    body.post-type-archive-product
    main h1.woocommerce-products-header__title,
    body.post-type-archive-product
    main h1.page-title {
        margin-top: 0 !important;
        margin-block-start: 0 !important;
        margin-bottom: 18px !important;
    }
}

/* =========================================================
   HATACA - DANH MỤC SẢN PHẨM MOBILE
   Giảm khoảng cách:
   Header -> Breadcrumb -> Tiêu đề
   ========================================================= */

@media (max-width: 781px) {

    /* Giảm khoảng cách mặc định từ Header xuống Main */
    body.tax-product_cat .wp-site-blocks > main,
    body.tax-product_cat main {
        margin-block-start: 0 !important;
        margin-top: 0 !important;
        padding-top: 12px !important;
    }

    /* Breadcrumb */
    body.tax-product_cat main .woocommerce-breadcrumb,
    body.tax-product_cat main .wc-block-breadcrumbs,
    body.tax-product_cat main .wp-block-breadcrumbs {
        margin-block-start: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Khối chứa tiêu đề danh mục */
    body.tax-product_cat main .woocommerce-products-header {
        margin-block-start: 0 !important;
        margin-top: 0 !important;
    }

    /* Tiêu đề danh mục */
    body.tax-product_cat main h1.woocommerce-products-header__title,
    body.tax-product_cat main h1.page-title,
    body.tax-product_cat main h1.wp-block-query-title {
        margin-block-start: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Tránh Gutenberg cộng thêm 40px giữa các block đầu trang */
    body.tax-product_cat main > :first-child {
        margin-block-start: 0 !important;
    }
}

/* =========================================================
   MOBILE - XÓA KHOẢNG TRẮNG GIỮA BREADCRUMB VÀ TIÊU ĐỀ
   Trang danh mục sản phẩm
   ========================================================= */

@media (max-width: 781px) {

    /* Breadcrumb không tạo khoảng dưới dư */
    body.tax-product_cat main .wc-block-breadcrumbs,
    body.tax-product_cat main .wp-block-breadcrumbs,
    body.tax-product_cat main .woocommerce-breadcrumb {
        margin-bottom: 0 !important;
        margin-block-end: 0 !important;
    }

    /* Block cha chứa H1 không nhận 40px mặc định của Gutenberg */
    body.tax-product_cat main > :has(h1.wp-block-query-title),
    body.tax-product_cat main > :has(h1.page-title),
    body.tax-product_cat main > :has(h1.woocommerce-products-header__title) {
        margin-top: 0 !important;
        margin-block-start: 0 !important;
    }

    /* Chính H1 cũng không tạo khoảng trên */
    body.tax-product_cat main h1.wp-block-query-title,
    body.tax-product_cat main h1.page-title,
    body.tax-product_cat main h1.woocommerce-products-header__title {
        margin-top: 0 !important;
        margin-block-start: 0 !important;
    }
}