/*
 * ALO STICKY TABS UNIFIED V3 — CONTAINER WIDTH FIX 2026-07-17
 * Chỉ áp dụng cho thanh tab xuất hiện khi cuộn ở trang Shop và Listing.
 * PC: Messenger + Zalo + Gọi ngay. Mobile: Zalo + Gọi.
 */
#ct5StickyTabs.ct5-scrollbar{
    background:#fff!important;
    border:0!important;
    border-bottom:1px solid #e5e7eb!important;
    box-shadow:0 4px 16px rgba(15,23,42,.12)!important;
}
#ct5StickyTabs .ct5-scrollbar-inner,
#ct5StickyTabs .ct5-sticky-top-row,
#ct5StickyTabs .ct5-mini-product,
#ct5StickyTabs .ct5-top-actions,
#ct5StickyTabs .ct5-tabs,
#ct5StickyTabs .ct5-tabs a{
    box-sizing:border-box!important;
}
#ct5StickyTabs .ct5-scrollbar-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    min-height:0!important;
    padding:0!important;
    background:#fff!important;
}
#ct5StickyTabs .ct5-sticky-top-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-width:0!important;
    margin:0!important;
    border-bottom:1px solid #f1f5f9!important;
    background:#fff!important;
}
#ct5StickyTabs .ct5-mini-product{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    margin:0!important;
}
#ct5StickyTabs .ct5-mini-product > div{
    min-width:0!important;
    overflow:hidden!important;
}
#ct5StickyTabs .ct5-mini-product img{
    display:block!important;
    object-fit:cover!important;
    object-position:center!important;
    background-color:#f1f5f9!important;
}
#ct5StickyTabs .ct5-mini-product strong{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#111827!important;
    font-weight:900!important;
}
#ct5StickyTabs .ct5-mini-product span{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#DA251D!important;
    font-weight:900!important;
}
#ct5StickyTabs .ct5-top-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
}
#ct5StickyTabs .ct5-top-actions a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    margin:0!important;
    border:1px solid transparent!important;
    text-decoration:none!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
    transform:none!important;
}
#ct5StickyTabs .ct5-top-actions .ct5-listing-cta-icon{
    display:block!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
}
#ct5StickyTabs .ct5-top-messenger{
    order:1!important;
    background:#eef5ff!important;
    border-color:#d6e6ff!important;
    color:#0958d9!important;
    box-shadow:none!important;
}
#ct5StickyTabs .ct5-top-facebook{
    background:#1877f2!important;
    border-color:#1877f2!important;
    color:#fff!important;
    box-shadow:none!important;
}
#ct5StickyTabs .ct5-top-zalo{
    order:2!important;
    background:#0878f9!important;
    border-color:#0878f9!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(8,120,249,.16)!important;
}
#ct5StickyTabs .ct5-top-call{
    order:3!important;
    background:#22c55e!important;
    border-color:#22c55e!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(34,197,94,.16)!important;
}
#ct5StickyTabs .ct5-top-facebook{display:none!important;}
#ct5StickyTabs .ct5-sticky-label-mobile{display:none!important;}
#ct5StickyTabs .ct5-sticky-label-desktop{display:inline!important;}
#ct5StickyTabs .ct5-tabs{
    display:flex!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    background:#fff!important;
}
#ct5StickyTabs .ct5-tabs::-webkit-scrollbar{display:none!important;}
#ct5StickyTabs .ct5-tabs a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    border:0!important;
    border-bottom:3px solid transparent!important;
    background:#fff!important;
    color:#4b5563!important;
    text-decoration:none!important;
    font-weight:800!important;
    line-height:1!important;
    white-space:nowrap!important;
}
#ct5StickyTabs .ct5-tabs a:hover,
#ct5StickyTabs .ct5-tabs a.is-active{
    color:#111827!important;
    border-bottom-color:#111827!important;
}

@media (min-width:992px){
    #ct5StickyTabs .ct5-scrollbar-inner{
        width:min(var(--w11-container,1280px),calc(100% - 32px))!important;
        max-width:var(--w11-container,1280px)!important;
        margin:0 auto!important;
        grid-template-rows:76px 48px!important;
    }
    #ct5StickyTabs .ct5-sticky-top-row,
    #ct5StickyTabs .ct5-tabs{
        width:100%!important;
        max-width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
    }
    #ct5StickyTabs .ct5-sticky-top-row{
        min-height:76px!important;
        height:76px!important;
        gap:16px!important;
        padding:0 6px!important;
    }
    #ct5StickyTabs .ct5-mini-product{
        flex:1 1 auto!important;
        max-width:calc(100% - 390px)!important;
        gap:12px!important;
        padding:0!important;
    }
    #ct5StickyTabs .ct5-mini-product img{
        width:48px!important;
        height:48px!important;
        min-width:48px!important;
        flex:0 0 48px!important;
        border-radius:8px!important;
    }
    #ct5StickyTabs .ct5-mini-product strong{
        font-size:15px!important;
        line-height:1.24!important;
    }
    #ct5StickyTabs .ct5-mini-product span{
        margin-top:4px!important;
        font-size:13px!important;
        line-height:1.15!important;
    }
    #ct5StickyTabs .ct5-top-actions{
        gap:8px!important;
    }
    #ct5StickyTabs .ct5-top-actions a{
        height:42px!important;
        min-height:42px!important;
        max-height:42px!important;
        padding:0 15px!important;
        gap:8px!important;
        border-radius:9px!important;
        font-size:14px!important;
    }
    #ct5StickyTabs .ct5-top-messenger{min-width:126px!important;}
    #ct5StickyTabs .ct5-top-zalo{min-width:108px!important;}
    #ct5StickyTabs .ct5-top-call{min-width:122px!important;}
    #ct5StickyTabs .ct5-top-actions .ct5-listing-cta-icon{
        width:18px!important;
        height:18px!important;
        min-width:18px!important;
        flex:0 0 18px!important;
    }
    #ct5StickyTabs .ct5-tabs{
        min-height:48px!important;
        height:48px!important;
    }
    #ct5StickyTabs .ct5-tabs a{
        flex:1 0 auto!important;
        min-width:106px!important;
        height:48px!important;
        min-height:48px!important;
        padding:0 14px!important;
        font-size:14px!important;
    }
}

@media (max-width:991.98px){
    #ct5StickyTabs .ct5-scrollbar-inner{
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
        padding:0 6px!important;
        grid-template-rows:62px 44px!important;
    }
    #ct5StickyTabs .ct5-sticky-top-row{
        min-height:62px!important;
        height:62px!important;
        gap:6px!important;
        padding:0!important;
    }

    /* Listing summary: ảnh + tiêu đề 2 dòng + giá/liên hệ = đúng 3 dòng thị giác. */
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product{
        flex:1 1 auto!important;
        width:auto!important;
        min-width:0!important;
        max-width:calc(100% - 166px)!important;
        gap:7px!important;
        padding:0 0 0 6px!important;
        box-sizing:border-box!important;
        align-items:center!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product img{
        width:48px!important;
        height:48px!important;
        min-width:48px!important;
        flex:0 0 48px!important;
        border-radius:7px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product > div{
        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
        min-width:0!important;
        height:48px!important;
        overflow:hidden!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product strong{
        display:-webkit-box!important;
        -webkit-box-orient:vertical!important;
        -webkit-line-clamp:2!important;
        white-space:normal!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        font-size:12px!important;
        line-height:1.22!important;
        font-weight:800!important;
        max-height:29.3px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product span{
        display:block!important;
        margin-top:3px!important;
        font-size:11px!important;
        line-height:1.05!important;
        font-weight:800!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    /* MOBILE CTA V6
       Thứ tự rail cố định: Facebook | Messenger | Zalo | Gọi ngay.
       Mặc định neo tại Zalo nên vùng nhìn chỉ hiện trọn 2 nút:
       Zalo | Gọi ngay. Vuốt sang phải để lộ Messenger rồi Facebook. */
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        flex:0 0 160px!important;
        width:160px!important;
        min-width:160px!important;
        max-width:160px!important;
        gap:4px!important;
        padding:0!important;
        margin:0!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        scroll-snap-type:x proximity!important;
        overscroll-behavior-x:contain!important;
        scrollbar-width:none!important;
        -webkit-overflow-scrolling:touch!important;
        touch-action:pan-x!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions::-webkit-scrollbar{display:none!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions a{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex:0 0 auto!important;
        height:34px!important;
        min-height:34px!important;
        max-height:34px!important;
        padding:0 6px!important;
        gap:4px!important;
        border-radius:8px!important;
        font-size:10.5px!important;
        line-height:1!important;
        font-weight:800!important;
        box-shadow:none!important;
        white-space:nowrap!important;
        overflow:visible!important;
        text-overflow:clip!important;
        scroll-snap-align:start!important;
        box-sizing:border-box!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions a .ct5-sticky-label{
        display:block!important;
        min-width:0!important;
        overflow:visible!important;
        text-overflow:clip!important;
        white-space:nowrap!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions .ct5-listing-cta-icon{
        width:14px!important;
        height:14px!important;
        min-width:14px!important;
        flex:0 0 14px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-facebook{
        order:1!important;
        display:inline-flex!important;
        flex-basis:82px!important;
        width:82px!important;
        min-width:82px!important;
        max-width:82px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-messenger{
        order:2!important;
        display:inline-flex!important;
        flex-basis:88px!important;
        width:88px!important;
        min-width:88px!important;
        max-width:88px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-zalo{
        order:3!important;
        display:inline-flex!important;
        flex-basis:64px!important;
        width:64px!important;
        min-width:64px!important;
        max-width:64px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-call{
        order:4!important;
        display:inline-flex!important;
        flex-basis:92px!important;
        width:92px!important;
        min-width:92px!important;
        max-width:92px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-sticky-label-desktop{display:none!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-sticky-label-mobile{display:inline!important;}

    #ct5StickyTabs .ct5-tabs{
        min-height:44px!important;
        height:44px!important;
        margin:0!important;
        padding:0!important;
    }
    #ct5StickyTabs .ct5-tabs a{
        flex:0 0 auto!important;
        min-width:94px!important;
        height:44px!important;
        min-height:44px!important;
        padding:0 12px!important;
        font-size:12px!important;
        border-bottom-width:2px!important;
    }

    /* Trang Shop vẫn giữ layout sticky hiện hành; chỉ Listing dùng cấu trúc 3 dòng + rail V6. */
    body:not(.ct5-listing-detail-page) #ct5StickyTabs .ct5-mini-product{
        flex:1 1 auto!important;
        min-width:0!important;
        gap:6px!important;
    }
    body:not(.ct5-listing-detail-page) #ct5StickyTabs .ct5-mini-product img{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        flex:0 0 38px!important;
        border-radius:6px!important;
    }

}

@media (max-width:375px){
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions{
        flex-basis:156px!important;
        width:156px!important;
        min-width:156px!important;
        max-width:156px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product{
        max-width:calc(100% - 162px)!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product img{
        width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product > div{height:44px!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product strong{font-size:11.5px!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-messenger{
        flex-basis:84px!important;width:84px!important;min-width:84px!important;max-width:84px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-zalo{
        flex-basis:62px!important;width:62px!important;min-width:62px!important;max-width:62px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-call{
        flex-basis:90px!important;width:90px!important;min-width:90px!important;max-width:90px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-facebook{
        flex-basis:78px!important;width:78px!important;min-width:78px!important;max-width:78px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions a{font-size:10.25px!important;padding:0 5px!important;}
}

@media (max-width:349.98px){
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions{
        flex-basis:150px!important;width:150px!important;min-width:150px!important;max-width:150px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product{max-width:calc(100% - 156px)!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product img{
        width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product > div{height:42px!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product strong{font-size:11px!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-mini-product span{font-size:10px!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-messenger{
        flex-basis:82px!important;width:82px!important;min-width:82px!important;max-width:82px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-zalo{
        flex-basis:58px!important;width:58px!important;min-width:58px!important;max-width:58px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-call{
        flex-basis:88px!important;width:88px!important;min-width:88px!important;max-width:88px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-facebook{
        flex-basis:76px!important;width:76px!important;min-width:76px!important;max-width:76px!important;
    }
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions a{font-size:9.75px!important;padding:0 4px!important;}
    body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions .ct5-listing-cta-icon{
        width:13px!important;height:13px!important;min-width:13px!important;flex-basis:13px!important;
    }
}


/* SHOP_DEFAULT sticky avatar: final override after generic Shop sticky rules.
   Keep the shop logo truly circular on mobile, including Safari/iOS. */
@media (max-width: 767.98px){
    body:not(.ct5-listing-detail-page) #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product > img,
    body:not(.ct5-listing-detail-page) #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product img{
        display:block!important;
        width:48px!important;
        height:48px!important;
        min-width:48px!important;
        min-height:48px!important;
        max-width:48px!important;
        max-height:48px!important;
        flex:0 0 48px!important;
        aspect-ratio:1 / 1!important;
        object-fit:cover!important;
        object-position:center center!important;
        border:0!important;
        outline:0!important;
        border-radius:50%!important;
        -webkit-border-radius:50%!important;
        clip-path:circle(50% at 50% 50%)!important;
        -webkit-clip-path:circle(50% at 50% 50%)!important;
        -webkit-mask-image:radial-gradient(circle at center,#000 0,#000 69%,transparent 71%)!important;
        mask-image:radial-gradient(circle at center,#000 0,#000 69%,transparent 71%)!important;
        box-shadow:none!important;
        background:transparent!important;
        overflow:hidden!important;
    }
}

@media (max-width: 375px){
    body:not(.ct5-listing-detail-page) #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product > img,
    body:not(.ct5-listing-detail-page) #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product img{
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
        min-height:44px!important;
        max-width:44px!important;
        max-height:44px!important;
        flex-basis:44px!important;
    }
}