/**
 * Trang danh mục sản phẩm (product_cat) — bố cục riêng.
 *
 * Lưới danh mục dùng lại CSS của product-taxonomy-widgets.css (style-4),
 * file này chỉ thêm phần riêng của trang: header, banner, tab, video, list sp.
 *
 * @see inc/product-cat-layout.php
 */

.skx-cat-page {
    --skx-cat-primary: #0070AE;
    --skx-cat-border: #e3e8ef;
    --skx-cat-text: #1f2937;
    --skx-cat-muted: #4b5563;
}

/* --- Lưới danh mục ------------------------------------------------------ */

.skx-cat-nav {
    margin: 0 0 28px;
}

/*
 * Lưới chia đều theo số danh mục thực tế.
 *
 * CSS gốc của widget dùng flex với flex-basis tính cứng theo cặp
 * [data-cols][data-gap], và chỉ khai báo tới 6 cột — site có 7 danh mục nên
 * mục cuối rớt xuống dòng riêng. Grid với repeat(var(--skx-cat-cols))
 * không phụ thuộc bảng rule đó, thêm bớt danh mục vẫn vừa một dòng.
 */
.skx-cat-nav .elementor-product-categories-wrapper .row {
    display: grid;
    grid-template-columns: repeat(var(--skx-cat-cols, 6), minmax(0, 1fr));
    gap: 10px;
}

.skx-cat-nav .elementor-product-categories-wrapper .column-item {
    flex: none;
    max-width: none;
    padding: 0;
}

/*
 * Khung cắt ảnh theo bo góc, nếu không góc ảnh vuông sẽ thò ra ngoài viền.
 */
.skx-cat-nav .elementor-product-categories-wrapper .elementor-product-categories-item .elementor-product-categories-item-inner {
    position: relative;
    min-height: 180px;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Ảnh đã phủ kín khung nên bỏ bo góc riêng của nó. */
.skx-cat-nav .elementor-product-categories-wrapper .elementor-product-categories-item .elementor-product-categories-image,
.skx-cat-nav .elementor-product-categories-wrapper .elementor-product-categories-item .elementor-product-categories-image a,
.skx-cat-nav .elementor-product-categories-wrapper .elementor-product-categories-item .elementor-product-categories-image img {
    border-radius: 0;
}

.skx-cat-nav .elementor-product-categories-wrapper .elementor-product-categories-item:hover .elementor-product-categories-item-inner {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 112, 174, 0.16);
}

/* Danh mục đang xem */

/*
 * Viền vẽ bằng lớp phủ ::after chứ không phải border/outline/box-shadow inset:
 *
 *   - outline vẽ hình chữ nhật vuông góc, tách khỏi mép ở góc bo 10px;
 *   - border đẩy ảnh thụt vào 2px, ảnh nhảy vị trí khi đổi danh mục;
 *   - box-shadow inset bị ảnh đè lên, vì ảnh là position:absolute nên luôn
 *     nằm trên phần bóng của thẻ cha.
 *
 * ::after nằm cùng dòng xếp chồng với ảnh và khai báo sau nên phủ lên trên,
 * đồng thời theo đúng border-radius của khung.
 */
.skx-cat-nav .elementor-product-categories-wrapper .elementor-product-categories-item.is-current .elementor-product-categories-item-inner {
    box-shadow: 0 4px 14px rgba(0, 112, 174, 0.2);
}

.skx-cat-nav .elementor-product-categories-wrapper .elementor-product-categories-item.is-current .elementor-product-categories-item-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 2px solid var(--skx-cat-primary);
    border-radius: 10px;
    pointer-events: none;
}

/* Nhiều hơn 4 cột thì mobile/tablet không đủ chỗ, giảm dần theo bề ngang. */
@media (max-width: 1199px) {
    .skx-cat-nav .elementor-product-categories-wrapper .row {
        grid-template-columns: repeat(min(var(--skx-cat-cols, 6), 4), minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .skx-cat-nav .elementor-product-categories-wrapper .row {
        grid-template-columns: repeat(min(var(--skx-cat-cols, 6), 3), minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .skx-cat-nav .elementor-product-categories-wrapper .row {
        grid-template-columns: repeat(min(var(--skx-cat-cols, 6), 2), minmax(0, 1fr));
    }
}

/* --- Header ------------------------------------------------------------- */

.skx-cat-header {
    margin: 0 0 20px;
}

.skx-cat-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.25;
    color: var(--skx-cat-text);
}

.skx-cat-description {
    margin-top: 10px;
    color: var(--skx-cat-muted);
    line-height: 1.7;
}

/* --- Banner ------------------------------------------------------------- */

/* --- Banner danh mục ---------------------------------------------------- */

/* Ghi đè margin-bottom 1rem của parent (.product-category-banner). */
.skx-cat-banner {
    margin: 0 0 32px;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

.skx-cat-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Tab nội dung ------------------------------------------------------- */

.skx-cat-tabs {
    margin: 0 0 40px;
}

.skx-cat-tabs .detail-tabs {
    position: sticky;
    top: 90px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--skx-cat-border);
    border-radius: 10px;
    overflow: hidden;
}

.skx-cat-tabs .detail-tabs li {
    margin: 0;
    border-bottom: 1px solid var(--skx-cat-border);
}

.skx-cat-tabs .detail-tabs li:last-child {
    border-bottom: 0;
}

.skx-cat-tabs .detail-tabs li a {
    display: block;
    padding: 12px 16px;
    color: var(--skx-cat-text);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.skx-cat-tabs .detail-tabs li a:hover {
    background: #f3f7fb;
    color: var(--skx-cat-primary);
}

.skx-cat-tabs .detail-tabs li.active a {
    background: var(--skx-cat-primary);
    color: #fff;
}

.skx-cat-tabs .title-tab {
    margin-bottom: 30px;
    scroll-margin-top: 100px;
}

.skx-cat-tabs .title-tab:last-child {
    margin-bottom: 0;
}

.skx-cat-tabs .title-tab h2 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.35;
    color: var(--skx-cat-text);
}

.skx-cat-tabs .title-tab p {
    color: var(--skx-cat-muted);
    line-height: 1.75;
}

.skx-cat-tabs .title-tab img {
    max-width: 100%;
    height: auto;
}

/* --- Tiêu đề section chung ---------------------------------------------- */

.skx-cat-section {
    margin: 0 0 40px;
}

.skx-cat-section__title {
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 1.3;
    color: var(--skx-cat-text);
}

.skx-cat-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}

.skx-cat-section__head .skx-cat-section__title {
    margin: 0;
}

.skx-cat-section__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--e-global-color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.skx-cat-section__more:hover,
.skx-cat-section__more:focus {
    color: var(--e-global-color-primary);
}

.skx-cat-section__more:hover span,
.skx-cat-section__more:focus span {
    text-decoration: underline;
}

.skx-cat-section__more-icon {
    flex: none;
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.skx-cat-section__more:hover .skx-cat-section__more-icon,
.skx-cat-section__more:focus .skx-cat-section__more-icon {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .skx-cat-section__more-icon {
        transition: none;
    }

    .skx-cat-section__more:hover .skx-cat-section__more-icon,
    .skx-cat-section__more:focus .skx-cat-section__more-icon {
        transform: none;
    }
}

/* --- Danh sách sản phẩm ------------------------------------------------- */

/*
 * Parent theme dựng lưới kiểu Bootstrap: ul.products có margin -15px hai bên,
 * mỗi li.product có padding 0 15px và margin-bottom 30px. Ở đây thu gutter còn
 * 10px cho đỡ thưa, margin âm phải khớp padding để mép lưới vẫn thẳng hàng với
 * các section khác; margin-bottom hạ về 20px cho khớp khoảng cách ngang (2×10px),
 * còn margin-bottom âm ở ul nuốt lại khoảng hở của hàng cuối trước nút "Xem thêm".
 */
.skx-cat-products__list.products {
    margin: 0 -10px -20px;
}

.skx-cat-products__wrap .skx-cat-products__list.products > li.product {
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
}

/*
 * Mobile giữ 2 sản phẩm / dòng. Parent ép 100% (1 sp/dòng) ở <=575px
 * (woocommerce.css, rule .columns-5 ul.products > li) nên phải đè lại;
 * khoảng 576-767px parent đã để sẵn 50% nên không cần động tới.
 */
@media (max-width: 575px) {
    .skx-cat-products__wrap .skx-cat-products__list.products > li.product {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/*
 * ul.products có margin-bottom -20px (nuốt margin hàng cuối) nên khoảng hở
 * thực tế = margin-top - 20px. Đặt 48px để nút cách hàng sản phẩm cuối ~28px.
 */
.skx-cat-products__more {
    margin-top: 20px;
    text-align: center;
}

/* Nút dạng text + mũi tên đôi xuống, nhẹ hơn kiểu nút viền đặc. */
.skx-cat-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 20px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--e-global-color-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.skx-cat-load-more__icon {
    display: block;
    transition: transform 0.2s ease;
}

.skx-cat-load-more:hover:not(:disabled) {
    background: rgba(0, 112, 174, 0.08);
    color: var(--e-global-color-primary);
}

.skx-cat-load-more:hover:not(:disabled) .skx-cat-load-more__icon {
    transform: translateY(3px);
}

.skx-cat-load-more:disabled,
.skx-cat-load-more.is-loading {
    opacity: 0.65;
    cursor: default;
}

/* Đang tải: mũi tên nhấp nhô báo hiệu có việc đang chạy. */
.skx-cat-load-more.is-loading .skx-cat-load-more__icon {
    animation: skx-cat-load-more-bounce 0.9s ease-in-out infinite;
}

@keyframes skx-cat-load-more-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .skx-cat-load-more__icon,
    .skx-cat-load-more:hover:not(:disabled) .skx-cat-load-more__icon {
        transition: none;
        transform: none;
    }

    .skx-cat-load-more.is-loading .skx-cat-load-more__icon {
        animation: none;
    }
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 991px) {
    .skx-cat-title {
        font-size: 26px;
    }

    .skx-cat-section__title {
        font-size: 20px;
    }

    .skx-cat-section__more {
        font-size: 13px;
    }

    .skx-cat-section__more-icon {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 767px) {
    .skx-cat-nav .elementor-product-categories-wrapper .elementor-product-categories-item .elementor-product-categories-item-inner {
        min-height: 130px;
    }

    .skx-cat-title {
        font-size: 22px;
    }

    .skx-cat-banner {
        margin-bottom: 24px;
        border-radius: 8px;
    }

    .skx-cat-tabs,
    .skx-cat-section {
        margin-bottom: 28px;
    }
}

/* --- Bố cục 1 cột ------------------------------------------------------- */

/**
 * Sidebar đã bị gỡ ở PHP (filter opal_theme_sidebar), phần này chỉ đảm bảo
 * #primary chiếm trọn bề ngang kể cả khi theme cha còn rule 2 cột nào sót lại.
 */
body.skx-cat-full-width #primary,
body.skx-cat-full-width #primary .site-main {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin: 0;
}

body.skx-cat-full-width #secondary {
    display: none;
}