/*
 Theme Name:   V-ON
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ====================================================
   4. WOOCOMMERCE GLOBAL & ARCHIVES
==================================================== */
.wp-block-woocommerce-product-collection { margin-bottom: 0 !important; }
.woocommerce-archive-wrapper .woocommerce-products-header { padding-top: 20px; }
.woocommerce-archive-wrapper #wc-column-container, .archive .term-description {
    background-color: #fff; border-radius: 12px; padding: 20px 15px 15px; margin-bottom: 20px;
}

/* Lưới sản phẩm (Tránh reflow DOM) */
.home .woocommerce ul.products::before, .home .woocommerce ul.products::after { display: none; }
:is(.home, .single-product.woocommerce .related) ul.products.columns-6 {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; margin: 15px 0 0;
}

/* Product Card */
:is(.home, .single-product.woocommerce .related, .search-results .woocommerce-archive-wrapper #wc-column-container, .archive.woocommerce) ul.products li.product, .home .tin-tuc-home {
    width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch;
    border: 1px solid #ddd; border-radius: 8px; padding: 10px;
    position: relative; box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Tối ưu hiệu suất, bỏ transition: all */
}
:is(.home, .single-product.woocommerce .related, .search-results .woocommerce-archive-wrapper #wc-column-container, .archive.woocommerce) ul.products li.product:hover, .home .tin-tuc-home:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-3px);
}
:is(.home, .single-product.woocommerce .related, .search-results .woocommerce-archive-wrapper #wc-column-container, .archive.woocommerce) ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; color: var(--viva-text); transition: color 0.2s;
}
:is(.home, .single-product.woocommerce .related, .search-results .woocommerce-archive-wrapper #wc-column-container, .archive.woocommerce) ul.products li.product > a.woocommerce-LoopProduct-link:hover,
.single-product .viva-recently-viewed-wrapper ul.products li.product > a .woocommerce-loop-product__title:hover {
    color: #135790;
}
:is(.home, .single-product.woocommerce .related, .archive.woocommerce) ul.products li.product .star-rating { margin-top: auto !important; margin-bottom: 5px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.8em; font-weight: 500; }
.woocommerce ul.products li.product .price { font-size: 0.8em; }
.woocommerce ul.products li.product .price del { font-weight: normal; margin-right: 4px; }
.woocommerce ul.products li.product .price ins { font-weight: bold; color: #135790; line-height: 1.2; text-decoration: none; }

.home.separate-containers .inside-article{ padding: 0px !important; }

/* Menu */
.gb-sub-menu-sm81846c .menu-item {
    border-bottom: 1px solid #ddd;
}
:where(.gb-menu-container--mobile) .gb-menu--base .gb-sub-menu .gb-menu-link {
    text-transform: none;
}
:where(.gb-menu-container--mobile) .gb-menu--base.gb-menu--hover .menu-item>a {
    padding: 1em;
}
.gb-menu--base.gb-menu .gb-sub-menu--open>.gb-sub-menu>a {
    padding-left: 20px;
}
:where(.gb-menu-container--mobile) .gb-menu--base .gb-sub-menu .gb-sub-menu {
    padding-left: 20px;
}
	.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
        padding: 0px;
    }

.search-menu-top .wp-block-search.wp-block-search__button-only .wp-block-search__input {
    border-radius: 50px;
    height: 40px;
    margin-top: 5px;
}

.main-navigation .main-nav ul ul li a {
    font-size: 0.8rem;
    font-weight: 400;
    border-bottom: 1px solid #ddd;
	
}

/* Trang SP */



@media (max-width: 768px) {

    /* Woo Slider thay vì Grid (Cực kỳ tốt cho Mobile UX) */
    :is(.home, .single-product.woocommerce .related) ul.products {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory; gap: 15px; padding-bottom: 10px; scrollbar-width: none; /* Chuẩn Firefox */
    }
    :is(.home, .single-product.woocommerce .related) ul.products::-webkit-scrollbar { display: none; }
    :is(.home, .single-product.woocommerce .related) ul.products li.product {
        flex: 0 0 50%; min-width: 50%; scroll-snap-align: start; margin-bottom: 0;
    }

	.woocommerce-archive-wrapper #wc-column-container, .archive .term-description {
    margin: 0;
    }
    
	 /* Ép container sản phẩm chia thành 2 cột đều nhau */
    .archive.woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 10px !important; /* Bạn có thể tăng/giảm số này để chỉnh khoảng cách giữa 2 sản phẩm */
    }

    .archive.woocommerce ul.products li.product {
        width: 100% !important; 
        margin: 0 !important; /* Xóa margin thừa để không bị rớt dòng */
    }
	
	.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, 
	.inside-page-header {
        padding: 15px;
	}
	
	.slideout-navigation.main-navigation .main-nav ul ul ul ul li a {
    padding-left: 35px;
    }
	.main-navigation .main-nav ul li a {
    padding-left: 0px;
    padding-right: 0px;
    }
}




/* Tối ưu Layout chống CLS cho trang sản phẩm */
.gp-optimized-single-product .product-top-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
    margin-bottom: 3em;
}

@media (min-width: 768px) {
    .gp-optimized-single-product .product-top-wrapper {
        grid-template-columns: 1fr 1fr; /* Chia đôi màn hình: Trái (Ảnh) - Phải (Thông tin) */
    }
}

/* Đảm bảo hình ảnh không gây layout shift */
.product-gallery-section img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Thay đổi tỷ lệ này cho phù hợp với ảnh sản phẩm van của bạn */
    object-fit: cover;
}

/* Khoảng trống cho các tool kỹ thuật */
.technical-utilities-wrapper {
    margin-top: 1.5em;
    padding-top: 1.5em;
    border-top: 1px dashed #e2e2e2;
}