/*
 * ALO Giá Rẻ - category product grid v1
 * PC: 6 sản phẩm/hàng, 12 sản phẩm + AFF + 12 sản phẩm + banner + phân trang.
 * Mobile: 2 sản phẩm/hàng; AFF hiển thị 2 thẻ/lượt và vuốt ngang.
 */
.alo-category-grid-page .ctcat-main-layout{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    grid-template-columns:none!important;
    gap:0!important;
}
.alo-category-grid-page .ctcat-list-col{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    border-radius:16px!important;
    overflow:visible!important;
    background:var(--alo-theme-surface,#fff)!important;
    border:1px solid var(--alo-theme-border,#e5e7eb)!important;
    box-shadow:0 8px 26px rgba(15,23,42,.045)!important;
}
.alo-category-grid-page .ctcat-rightbar{display:none!important;}
.alo-category-grid-page .ctcat-tabs{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(190px,260px)!important;
    align-items:stretch!important;
    width:100%!important;
    height:58px!important;
    border-bottom:1px solid var(--alo-theme-border,#e5e7eb)!important;
    border-radius:16px 16px 0 0!important;
    overflow:visible!important;
    background:var(--alo-theme-surface,#fff)!important;
}
.alo-category-grid-page .ctcat-tabs>a,
.alo-category-grid-page .ctcat-tabs>.ctcat-sort-dropdown{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
}
.alo-category-grid-page .ctcat-tabs>a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 18px!important;
    border:0!important;
    border-bottom:3px solid var(--alo-theme-primary,var(--alo-ui-link-color,#d71920))!important;
    color:var(--alo-theme-text,#111827)!important;
    background:var(--alo-theme-surface,#fff)!important;
    font-size:16px!important;
    font-weight:900!important;
    text-decoration:none!important;
}
.alo-category-grid-page .ctcat-sort-dropdown{
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    height:58px!important;
    border-left:1px solid var(--alo-theme-border,#e5e7eb)!important;
}
.alo-category-grid-page .ctcat-sort-menu,
.alo-category-grid-page .ctcat-sort-menu summary{width:100%!important;}
.alo-category-grid-page .ctcat-sort-menu summary{
    min-width:0!important;
    height:58px!important;
    color:var(--alo-theme-text,#111827)!important;
    background:var(--alo-theme-surface,#fff)!important;
}
.alo-category-grid-content{padding:18px!important;}
.alo-category-product-grid{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:18px 14px!important;
    width:100%!important;
    min-width:0!important;
}
.alo-category-product-grid--second{margin-top:20px!important;}
.alo-category-card{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    overflow:hidden!important;
    border:1px solid var(--alo-theme-border,#e5e7eb)!important;
    border-radius:13px!important;
    background:var(--alo-theme-surface,#fff)!important;
    box-shadow:0 4px 14px rgba(15,23,42,.045)!important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.alo-category-card:hover{
    transform:translateY(-2px)!important;
    border-color:var(--alo-theme-border-active,var(--alo-theme-primary,#d71920))!important;
    box-shadow:0 10px 24px rgba(15,23,42,.10)!important;
}
.alo-category-card__media{position:relative!important;width:100%!important;min-width:0!important;overflow:hidden!important;background:#f3f4f6!important;}
.alo-category-card__image{display:block!important;width:100%!important;aspect-ratio:1/1!important;overflow:hidden!important;background:#f3f4f6!important;}
.alo-category-card__image img{display:block!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;object-position:center!important;background:#f3f4f6!important;transition:transform .22s ease!important;}
.alo-category-card__image img[src*="no-image"],.alo-category-card__image img[src*="alo-image-placeholder"]{object-fit:contain!important;padding:18%!important;background:color-mix(in srgb,var(--alo-theme-primary,#d71920) 5%,#f8fafc)!important;}
.alo-category-card:hover .alo-category-card__image img{transform:scale(1.035)!important;}
.alo-category-card__shop{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:26px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    background:var(--alo-theme-cta,var(--alo-ui-cta-button-bg,#ffc400))!important;
    color:var(--alo-theme-cta-text,var(--alo-ui-cta-button-text-color,#111))!important;
    border:1px solid color-mix(in srgb,var(--alo-theme-cta,#ffc400) 78%,#fff)!important;
    box-shadow:0 4px 12px rgba(15,23,42,.13)!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:900!important;
    text-decoration:none!important;
    white-space:nowrap!important;
}
.alo-category-card__count{
    position:absolute!important;
    left:8px!important;
    bottom:8px!important;
    z-index:2!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:4px!important;
    min-height:24px!important;
    padding:0 7px!important;
    border-radius:7px!important;
    background:rgba(15,23,42,.78)!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:800!important;
}
.alo-category-card__body{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;padding:11px 11px 12px!important;min-width:0!important;}
.alo-category-card__price{
    margin:0 0 6px!important;
    color:var(--alo-theme-primary,var(--alo-ui-link-color,#e11d2e))!important;
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.alo-category-card__title{
    margin:0!important;
    min-height:42px!important;
    font-size:14px!important;
    line-height:1.45!important;
    font-weight:850!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.alo-category-card__title a{color:var(--alo-theme-text,#111827)!important;text-decoration:none!important;}
.alo-category-card__title a:hover{color:var(--alo-theme-primary,var(--alo-ui-link-hover-color,#d71920))!important;}
.alo-category-card__location{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0!important;
    margin-top:9px!important;
    color:var(--alo-theme-muted,#64748b)!important;
    font-size:12px!important;
    line-height:1.3!important;
}
.alo-category-card__location i{flex:0 0 auto!important;color:var(--alo-theme-icon,var(--alo-theme-primary,#d71920))!important;}
.alo-category-card__location span{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.alo-category-aff-section{
    width:100%!important;
    margin:22px 0!important;
    padding:0!important;
    overflow:hidden!important;
}
.alo-category-aff-section>.alo-aff-slot{display:block!important;width:100%!important;min-width:0!important;margin:0!important;}
.alo-category-aff-section .alogiare-taxonomy-deal-panel{margin:0!important;width:100%!important;max-width:none!important;}
.alo-category-aff-section .alogiare-taxonomy-quick-track{gap:12px!important;}
.alo-category-aff-section .alo-quick-deal-card{
    flex:0 0 calc((100% - 60px)/6)!important;
    width:calc((100% - 60px)/6)!important;
    max-width:calc((100% - 60px)/6)!important;
    min-width:0!important;
}
.alo-category-bottom-banner{
    width:100%!important;
    margin:22px 0 0!important;
    overflow:hidden!important;
    border-radius:13px!important;
    background:var(--alo-theme-soft,#f8fafc)!important;
}
.alo-category-bottom-banner .front-banner,
.alo-category-bottom-banner .front-banner img,
.alo-category-bottom-banner .front-banner-script{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:120px!important;
    height:120px!important;
    object-fit:cover!important;
    border-radius:13px!important;
}
.alo-category-pagination{margin:22px 0 0!important;padding:0!important;}
.alo-category-grid-empty{
    grid-column:1/-1!important;
    padding:44px 20px!important;
    border:1px dashed var(--alo-theme-border,#d1d5db)!important;
    border-radius:14px!important;
    background:var(--alo-theme-soft,#f8fafc)!important;
    color:var(--alo-theme-muted,#64748b)!important;
    text-align:center!important;
    font-size:16px!important;
    font-weight:700!important;
}

@media (max-width:991.98px){
    .alo-category-grid-page .ctcat-list-col{border-radius:13px!important;}
    .alo-category-grid-page .ctcat-tabs{grid-template-columns:minmax(0,1fr) minmax(145px,42%)!important;border-radius:13px 13px 0 0!important;}
    .alo-category-grid-page .ctcat-tabs>a,
    .alo-category-grid-page .ctcat-sort-menu summary{font-size:14px!important;padding:0 8px!important;}
    .alo-category-grid-content{padding:10px!important;}
    .alo-category-product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:12px 10px!important;
    }
    .alo-category-product-grid--second{margin-top:14px!important;}
    .alo-category-card{border-radius:11px!important;box-shadow:none!important;}
    .alo-category-card:hover{transform:none!important;box-shadow:none!important;}
    .alo-category-card__body{padding:9px 9px 10px!important;}
    .alo-category-card__price{font-size:14px!important;margin-bottom:5px!important;}
    .alo-category-card__title{min-height:39px!important;font-size:13px!important;line-height:1.45!important;}
    .alo-category-card__location{margin-top:7px!important;font-size:11px!important;}
    .alo-category-card__shop{top:6px!important;right:6px!important;min-height:24px!important;padding:0 7px!important;font-size:10px!important;}
    .alo-category-card__count{left:6px!important;bottom:6px!important;min-height:22px!important;font-size:10px!important;}
    .alo-category-aff-section{margin:16px 0!important;}
    .alo-category-aff-section .alogiare-taxonomy-deal-head{padding:11px!important;}
    .alo-category-aff-section .alogiare-taxonomy-deal-copy h3{font-size:16px!important;}
    .alo-category-aff-section .alogiare-taxonomy-deal-copy p{display:none!important;}
    .alo-category-aff-section .alogiare-taxonomy-quick-menu{padding:10px!important;}
    .alo-category-aff-section .alogiare-taxonomy-quick-track{
        display:flex!important;
        flex-wrap:nowrap!important;
        gap:10px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        scroll-snap-type:x mandatory!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:none!important;
        padding-bottom:4px!important;
    }
    .alo-category-aff-section .alogiare-taxonomy-quick-track::-webkit-scrollbar{display:none!important;}
    .alo-category-aff-section .alo-quick-deal-card{
        flex:0 0 calc((100% - 10px)/2)!important;
        width:calc((100% - 10px)/2)!important;
        max-width:calc((100% - 10px)/2)!important;
        scroll-snap-align:start!important;
    }
    .alo-category-aff-section .alogiare-taxonomy-quick-nav{display:none!important;}
    .alo-category-bottom-banner{margin-top:16px!important;border-radius:11px!important;}
    .alo-category-bottom-banner .front-banner,
    .alo-category-bottom-banner .front-banner img,
    .alo-category-bottom-banner .front-banner-script{min-height:88px!important;height:88px!important;border-radius:11px!important;}
    .alo-category-pagination{margin-top:16px!important;}
}

@media (max-width:420px){
    .alo-category-grid-content{padding:8px!important;}
    .alo-category-product-grid{gap:10px 8px!important;}
    .alo-category-card__body{padding:8px!important;}
    .alo-category-card__price{font-size:13.5px!important;}
    .alo-category-card__title{font-size:12.5px!important;}
}

/* ALOVN_065 definitive image visibility fix.
   frontend.css hides every img[loading="lazy"] with opacity:0, while the active loader
   uses .lazyloaded instead of .loaded. Category cards use direct src, so force them visible. */
.alo-category-card__image > img,
.alo-category-card__image > img[loading="lazy"],
.alo-category-card__image > img.loaded,
.alo-category-card__image > img.lazyloaded{
    opacity:1!important;
    visibility:visible!important;
}

/* ALOVN_065 - Category banners: top + bottom fixed at 190px.
   Scope only category grid pages. The CSS variable also overrides an admin height_px
   passed inline by <x-frontend-banner>, because the component resolves height through
   --front-banner-responsive-height. */
.alo-category-grid-page .ctcat-top-ad,
.alo-category-grid-page .alo-category-bottom-banner{
    --front-banner-responsive-height:190px!important;
}

.alo-category-grid-page .ctcat-top-ad .front-banner,
.alo-category-grid-page .ctcat-top-ad .front-banner-image,
.alo-category-grid-page .ctcat-top-ad .front-banner-script,
.alo-category-grid-page .ctcat-top-ad .front-banner > a,
.alo-category-grid-page .ctcat-top-ad .front-banner img,
.alo-category-grid-page .ctcat-top-ad .ctcat-adsense-slot,
.alo-category-grid-page .alo-category-bottom-banner .front-banner,
.alo-category-grid-page .alo-category-bottom-banner .front-banner-image,
.alo-category-grid-page .alo-category-bottom-banner .front-banner-script,
.alo-category-grid-page .alo-category-bottom-banner .front-banner > a,
.alo-category-grid-page .alo-category-bottom-banner .front-banner img{
    height:190px!important;
    min-height:190px!important;
    max-height:190px!important;
}

.alo-category-grid-page .ctcat-top-ad .front-banner img,
.alo-category-grid-page .alo-category-bottom-banner .front-banner img{
    width:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
}

/* === ALO Mobile category/shop UX V1 ===
   Desktop banner height stays untouched.
   On mobile, real image banners follow their original aspect ratio instead of a fixed crop.
   Numbered pagination is also available on mobile (compact PC-style pagination). */
@media (max-width: 767.98px){
    /* Top + bottom image banners: preserve source ratio on phones. */
    .alo-category-grid-page .ctcat-top-ad .front-banner-image,
    .alo-category-grid-page .alo-category-bottom-banner .front-banner-image{
        --front-banner-responsive-height:auto!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow:hidden!important;
    }

    .alo-category-grid-page .ctcat-top-ad .front-banner-image > a,
    .alo-category-grid-page .alo-category-bottom-banner .front-banner-image > a{
        display:block!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow:hidden!important;
    }

    .alo-category-grid-page .ctcat-top-ad .front-banner-image img,
    .alo-category-grid-page .alo-category-bottom-banner .front-banner-image img,
    .alo-category-grid-page .ctcat-top-ad > img{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:auto!important;
        object-fit:contain!important;
        object-position:center center!important;
    }

    /* Script/Adsense banners keep their own safe mobile height; only photo banners become ratio-native. */
    .alo-category-grid-page .ctcat-top-ad .front-banner-script,
    .alo-category-grid-page .alo-category-bottom-banner .front-banner-script,
    .alo-category-grid-page .ctcat-top-ad .ctcat-adsense-slot{
        min-height:90px!important;
        height:90px!important;
        max-height:none!important;
    }

    .alo-category-bottom-banner{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
    }

    /* Mobile numbered pagination: same concept as PC, compact enough for 320-430px screens. */
    .alo-category-pagination{
        overflow:visible!important;
    }
    .alo-numbered-pagination-shell{
        width:100%!important;
    }
    .alo-numbered-pagination-mobile{
        width:100%!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:4px!important;
        padding:4px 0 2px!important;
        white-space:nowrap!important;
    }
    .alo-numbered-pagination-mobile .alo-page-btn{
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        flex:0 0 32px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        border:1px solid #e2e8f0!important;
        border-radius:8px!important;
        background:#fff!important;
        color:#1f2937!important;
        text-decoration:none!important;
        font-size:13px!important;
        line-height:1!important;
        font-weight:800!important;
        box-shadow:none!important;
    }
    .alo-numbered-pagination-mobile .alo-page-btn.is-active{
        border-color:var(--alo-theme-primary,#ed2028)!important;
        background:var(--alo-theme-primary,#ed2028)!important;
        color:#fff!important;
    }
    .alo-numbered-pagination-mobile .alo-page-btn.is-disabled{
        color:#b8c0cc!important;
        background:#f8fafc!important;
        border-color:#edf0f4!important;
        pointer-events:none!important;
    }
    .alo-numbered-pagination-mobile .alo-page-arrow{
        font-size:22px!important;
        font-weight:600!important;
    }
    .alo-numbered-pagination-mobile .alo-page-ellipsis{
        width:18px!important;
        min-width:18px!important;
        flex:0 0 18px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        color:#64748b!important;
        font-size:14px!important;
        font-weight:800!important;
    }
}

@media (max-width: 359.98px){
    .alo-numbered-pagination-mobile{gap:3px!important;}
    .alo-numbered-pagination-mobile .alo-page-btn{
        width:29px!important;
        height:29px!important;
        min-width:29px!important;
        flex-basis:29px!important;
        border-radius:7px!important;
        font-size:12px!important;
    }
    .alo-numbered-pagination-mobile .alo-page-ellipsis{
        width:14px!important;
        min-width:14px!important;
        flex-basis:14px!important;
    }
}

/* ALOVN_072 V13 - pagination duplicate hard guard.
   There must be only one numbered pagination block. Legacy compact/mobile nav is retired. */
.alo-numbered-pagination-mobile{
    display:none!important;
}
.alo-category-pagination.alo-pagination-single,
.alo-category-pagination .alo-numbered-pagination-shell,
.alo-category-pagination .alo-numbered-pagination-desktop{
    width:100%!important;
}
.alo-category-pagination.alo-pagination-single > nav,
.alo-category-pagination .alo-numbered-pagination-shell > nav,
.alo-category-pagination .alo-numbered-pagination-desktop > nav{
    display:flex!important;
    justify-content:center!important;
    width:100%!important;
}
.alo-category-pagination .pagination{
    justify-content:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    flex-wrap:wrap!important;
}