/* PATCH 06 - extracted from resources/views/pages/user/shop/partials/shop-default-mobile-style.blade.php. Static CSS only; kept for compatibility. */
/* =========================================================
 * SHOP_DEFAULT MOBILE V1 — đồng bộ phần đầu với Service_Shop
 * - Chỉ áp dụng template nội bộ "general" trên mobile.
 * - Giữ key general để không ảnh hưởng DB / auto-detect cũ.
 * ========================================================= */
@media (max-width: 767.98px){
    .ct5-shop-page-default{
        --shop-default-yellow:#ffd400;
        --shop-default-facebook:#1877f2;
        --shop-default-zalo:#087cf0;
        --shop-default-call:#22c55e;
    }

    /* Tách profile + tab thành hai khối như Service_Shop. */
    .ct5-shop-page-default .ct5-shop-sticky-customer-head{
        margin:-1px 0 12px!important;
        padding:0!important;
        background:transparent!important;
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        overflow:visible!important;
    }

    /* Profile mobile: logo trái, tiêu đề nhỏ phải, meta -> 4 nút -> mô tả. */
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-profile-row{
        display:grid!important;
        grid-template-columns:78px minmax(0,1fr)!important;
        grid-template-rows:auto auto auto auto!important;
        column-gap:12px!important;
        row-gap:5px!important;
        align-items:start!important;
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
        padding:0 14px 14px!important;
        background:#fff!important;
        border:1px solid #e5e7eb!important;
        border-top:0!important;
        border-radius:0 0 16px 16px!important;
        box-shadow:0 5px 18px rgba(15,23,42,.07)!important;
        box-sizing:border-box!important;
        overflow:visible!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-profile-row .ct5-shop-logo-wrap{
        grid-column:1!important;
        grid-row:1 / span 2!important;
        display:block!important;
        width:78px!important;
        height:78px!important;
        min-width:78px!important;
        min-height:78px!important;
        max-width:78px!important;
        max-height:78px!important;
        margin:-38px 0 0!important;
        padding:0!important;
        position:relative!important;
        z-index:4!important;
        align-self:start!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-profile-row .ct5-shop-logo,
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-profile-row .ct5-shop-logo-wrap img{
        width:78px!important;
        height:78px!important;
        min-width:78px!important;
        min-height:78px!important;
        max-width:78px!important;
        max-height:78px!important;
        aspect-ratio:1/1!important;
        border-radius:50%!important;
        object-fit:cover!important;
        border:3px solid #fff!important;
        box-shadow:0 0 0 1px #d9e2ec,0 7px 16px rgba(15,23,42,.14)!important;
    }

    /* display:contents cho phép xếp nút trước mô tả dù markup cũ không đổi. */
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-profile-row .ct5-shop-info{
        display:contents!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-title-line{
        grid-column:2!important;
        grid-row:1!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        justify-content:flex-start!important;
        gap:4px!important;
        width:100%!important;
        min-width:0!important;
        margin:9px 0 0!important;
        padding:0!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-title-line h1{
        display:-webkit-box!important;
        -webkit-box-orient:vertical!important;
        -webkit-line-clamp:2!important;
        line-clamp:2!important;
        width:100%!important;
        max-width:100%!important;
        max-height:48px!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:normal!important;
        color:#111827!important;
        font-size:18px!important;
        line-height:1.28!important;
        font-weight:800!important;
        letter-spacing:-.015em!important;
        text-align:left!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-title-line .ct5-shop-status{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:5px!important;
        width:auto!important;
        max-width:100%!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        color:#16a34a!important;
        font-size:12.5px!important;
        line-height:1.2!important;
        font-weight:700!important;
        white-space:nowrap!important;
        box-shadow:none!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-title-line .ct5-shop-status i{
        color:#22c55e!important;
        font-size:13px!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-meta-line{
        grid-column:2!important;
        grid-row:2!important;
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:5px 10px!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        margin:0!important;
        padding:0!important;
        color:#6b7280!important;
        font-size:12.5px!important;
        line-height:1.3!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-meta-line span{
        display:inline-flex!important;
        align-items:center!important;
        gap:4px!important;
        min-width:0!important;
        margin:0!important;
        white-space:nowrap!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-meta-line i{
        color:#e11d48!important;
    }

    /* 4 nút: Facebook / Messenger / Zalo / Gọi, 1 hàng như Service_Shop. */
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions{
        grid-column:1 / -1!important;
        grid-row:3!important;
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        grid-template-rows:1fr!important;
        grid-auto-flow:initial!important;
        gap:5px!important;
        align-items:stretch!important;
        justify-content:stretch!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:8px 0 0!important;
        padding:9px 0 0!important;
        border-top:1px solid #d9dee6!important;
        overflow:visible!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions > a{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:38px!important;
        height:38px!important;
        margin:0!important;
        padding:5px 3px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:4px!important;
        border:1px solid transparent!important;
        border-radius:10px!important;
        box-shadow:0 5px 13px rgba(15,23,42,.10)!important;
        color:#fff!important;
        font-size:10px!important;
        line-height:1!important;
        font-weight:700!important;
        white-space:nowrap!important;
        text-decoration:none!important;
        overflow:hidden!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions > a svg,
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions > a i{
        width:14px!important;
        height:14px!important;
        min-width:14px!important;
        flex:0 0 14px!important;
        color:currentColor!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions .ct5-contact-label{
        display:inline!important;
        min-width:0!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions .is-facebook{
        order:1!important;
        background:#1877f2!important;
        border-color:#1877f2!important;
        color:#fff!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions .is-messenger{
        order:2!important;
        background:linear-gradient(135deg,#00b2ff 0%,#006aff 52%,#7b2ff7 100%)!important;
        border-color:#1685ff!important;
        color:#fff!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions .is-zalo{
        order:3!important;
        background:#087cf0!important;
        border-color:#087cf0!important;
        color:#fff!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions .is-call{
        order:4!important;
        background:#22c55e!important;
        border-color:#22c55e!important;
        color:#fff!important;
    }

    /* Mô tả nằm sau cụm 4 nút như Service_Shop. */
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-info > p,
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-profile-row > p{
        grid-column:1 / -1!important;
        grid-row:4!important;
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        margin:6px 0 0!important;
        padding:0!important;
        color:#4b5563!important;
        font-size:13.5px!important;
        line-height:1.52!important;
        text-align:left!important;
    }

    /* Tab cuộn: card trắng, cuộn ngang, active gạch vàng giống Service_Shop. */
    .ct5-shop-page-default .ct5-shop-tabs-customer{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:54px!important;
        margin:10px 0 0!important;
        padding:0 8px!important;
        background:#fff!important;
        border:1px solid #e5e7eb!important;
        border-radius:14px!important;
        box-shadow:0 4px 14px rgba(15,23,42,.06)!important;
        overflow:hidden!important;
        box-sizing:border-box!important;
    }
    .ct5-shop-page-default .ct5-shop-tabs-customer .ct5-shop-tabs-links{
        display:flex!important;
        flex:1 1 auto!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        gap:0!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        overscroll-behavior-x:contain!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:none!important;
        white-space:nowrap!important;
    }
    .ct5-shop-page-default .ct5-shop-tabs-customer .ct5-shop-tabs-links::-webkit-scrollbar{
        display:none!important;
    }
    .ct5-shop-page-default .ct5-shop-tabs-customer .ct5-shop-tabs-links > a{
        flex:0 0 auto!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        min-height:54px!important;
        margin:0!important;
        padding:0 13px!important;
        border:0!important;
        border-bottom:3px solid transparent!important;
        border-radius:0!important;
        background:transparent!important;
        color:#111827!important;
        font-size:13px!important;
        line-height:1!important;
        font-weight:700!important;
        text-decoration:none!important;
        box-shadow:none!important;
        white-space:nowrap!important;
    }
    .ct5-shop-page-default .ct5-shop-tabs-customer .ct5-shop-tabs-links > a:hover,
    .ct5-shop-page-default .ct5-shop-tabs-customer .ct5-shop-tabs-links > a.is-active{
        color:#111827!important;
        border-bottom-color:#ffd400!important;
        background:transparent!important;
    }
    .ct5-shop-page-default .ct5-shop-tabs-customer .ct5-shop-tabs-actions{
        display:none!important;
    }

    /* Thanh tab sticky khi cuộn cũng giữ kiểu cuộn ngang + gạch vàng. */
    .ct5-shop-page-default #ct5StickyTabs .ct5-tabs{
        display:flex!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        gap:0!important;
        width:100%!important;
        min-width:0!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        scrollbar-width:none!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .ct5-shop-page-default #ct5StickyTabs .ct5-tabs::-webkit-scrollbar{
        display:none!important;
    }
    .ct5-shop-page-default #ct5StickyTabs .ct5-tabs > a{
        flex:0 0 auto!important;
        color:#111827!important;
        border-bottom:3px solid transparent!important;
        white-space:nowrap!important;
    }
    .ct5-shop-page-default #ct5StickyTabs .ct5-tabs > a:hover,
    .ct5-shop-page-default #ct5StickyTabs .ct5-tabs > a.is-active{
        color:#111827!important;
        border-bottom-color:#ffd400!important;
    }

    /* Shop_Default mobile không hiện badge ngành trên ảnh tin đăng. */
    .ct5-shop-page-default .dtx-card__kind,
    .ct5-shop-page-default .ctcat-item__kind{
        display:none!important;
    }
}

@media (max-width: 380px){
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .ct5-shop-title-line h1{
        font-size:17px!important;
    }
    .ct5-shop-page-default .ct5-shop-sticky-customer-head .shop-unified-general-actions > a{
        font-size:9.2px!important;
        gap:3px!important;
        padding-left:2px!important;
        padding-right:2px!important;
    }
    .ct5-shop-page-default .ct5-shop-tabs-customer .ct5-shop-tabs-links > a{
        padding-left:11px!important;
        padding-right:11px!important;
        font-size:12.5px!important;
    }
}


/* =========================================================
 * SHOP_DEFAULT MOBILE V2 — match Taxi_Shop contact UX
 * 2026-08-14
 * - Override FINAL mobile profile rules that use #ct5-shop-profile-contact.
 * - Normal state: 4 compact buttons in ONE row.
 * - Sticky state: brand 60% + Zalo/Gọi 40%, tabs on row 2.
 * ========================================================= */
@media (max-width: 767.98px){
    /* Profile density: closer to Taxi_Shop mobile. */
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-profile-row,
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-profile-row.ct5-no-contact-actions{
        grid-template-columns:78px minmax(0,1fr)!important;
        grid-template-rows:auto auto auto auto!important;
        column-gap:12px!important;
        padding:0 14px 12px!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-logo-wrap{
        width:78px!important;
        height:78px!important;
        min-width:78px!important;
        min-height:78px!important;
        max-width:78px!important;
        max-height:78px!important;
        margin:-34px 0 0!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-logo,
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-logo-wrap > img{
        width:78px!important;
        height:78px!important;
        min-width:78px!important;
        min-height:78px!important;
        max-width:78px!important;
        max-height:78px!important;
        border-width:3px!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-title-line{
        padding-top:10px!important;
        gap:4px!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-title-line h1,
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-info h1{
        max-height:46px!important;
        font-size:18px!important;
        line-height:1.25!important;
        letter-spacing:-.015em!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-title-line .ct5-shop-status{
        font-size:12px!important;
        line-height:1.2!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-meta-line{
        margin-top:4px!important;
        gap:4px 8px!important;
        font-size:12px!important;
        line-height:1.3!important;
    }

    /* 4 contact buttons: exactly one compact row, same density as Taxi_Shop v26. */
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-profile-row > .ct5-shop-actions.ct5-side-actions-grid.shop-unified-general-actions{
        grid-column:1 / -1!important;
        grid-row:3!important;
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        grid-template-rows:36px!important;
        grid-auto-flow:initial!important;
        align-items:stretch!important;
        justify-content:stretch!important;
        gap:4px!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        margin:8px 0 0!important;
        padding:7px 0 0!important;
        border:0!important;
        border-top:1px solid #e5e7eb!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        overflow:visible!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-profile-row > .shop-unified-general-actions > a.ct5-btn{
        display:inline-flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:center!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        height:36px!important;
        min-height:36px!important;
        max-height:36px!important;
        margin:0!important;
        padding:6px 2px!important;
        gap:3px!important;
        border:1px solid transparent!important;
        border-radius:9px!important;
        box-shadow:none!important;
        color:#fff!important;
        font-size:8.8px!important;
        font-weight:800!important;
        line-height:1!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        box-sizing:border-box!important;
        transform:none!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-profile-row > .shop-unified-general-actions > a.ct5-btn .ct5-listing-cta-icon,
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-profile-row > .shop-unified-general-actions > a.ct5-btn svg,
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-profile-row > .shop-unified-general-actions > a.ct5-btn i{
        position:static!important;
        display:block!important;
        width:14px!important;
        height:14px!important;
        min-width:14px!important;
        max-width:14px!important;
        flex:0 0 14px!important;
        margin:0!important;
        padding:0!important;
        transform:none!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .shop-unified-general-actions .is-facebook{order:1!important;background:#1877f2!important;border-color:#1877f2!important;color:#fff!important;}
    .ct5-shop-page-default #ct5-shop-profile-contact .shop-unified-general-actions .is-messenger{order:2!important;background:linear-gradient(135deg,#00b2ff 0%,#006aff 52%,#7b2ff7 100%)!important;border-color:#1685ff!important;color:#fff!important;}
    .ct5-shop-page-default #ct5-shop-profile-contact .shop-unified-general-actions .is-zalo{order:3!important;background:#087cf0!important;border-color:#087cf0!important;color:#fff!important;}
    .ct5-shop-page-default #ct5-shop-profile-contact .shop-unified-general-actions .is-call{order:4!important;background:#22c55e!important;border-color:#22c55e!important;color:#fff!important;}

    /* Description is below the 4-button row, like Taxi_Shop. */
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-info > p{
        grid-column:1 / -1!important;
        grid-row:4!important;
        margin:8px 0 0!important;
        font-size:13px!important;
        line-height:1.45!important;
        color:#4b5563!important;
    }

    /* Normal tab stays compact and horizontally scrollable. */
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-tabs-customer{
        min-height:48px!important;
        margin:8px 0 0!important;
        padding:0 8px!important;
        border:1px solid #e5e7eb!important;
        border-radius:14px!important;
        box-shadow:0 4px 14px rgba(15,23,42,.06)!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-tabs-links > a{
        min-height:48px!important;
        padding:0 12px!important;
        font-size:12.5px!important;
        border-bottom:3px solid transparent!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-tabs-links > a.is-active,
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-tabs-links > a:hover{
        border-bottom-color:#ffd400!important;
        color:#111827!important;
    }

    /* Sticky state. Element is moved directly under <body>, so scope by its own class. */
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-scrollbar-inner{
        display:grid!important;
        grid-template-columns:1fr!important;
        grid-template-rows:54px 42px!important;
        width:100%!important;
        max-width:100%!important;
        min-height:96px!important;
        padding:0 8px!important;
        background:#fff!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-sticky-top-row{
        display:grid!important;
        grid-template-columns:minmax(0,60%) minmax(0,40%)!important;
        align-items:center!important;
        gap:5px!important;
        min-width:0!important;
        border-bottom:1px solid #edf1f6!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product{
        display:flex!important;
        align-items:center!important;
        gap:6px!important;
        min-width:0!important;
        width:100%!important;
        padding:6px 0!important;
        overflow:hidden!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product img{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        flex:0 0 38px!important;
        border-radius:50%!important;
        object-fit:cover!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product > div{
        min-width:0!important;
        flex:1 1 auto!important;
        overflow:hidden!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product strong{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
        color:#111827!important;
        font-size:10.5px!important;
        line-height:1.2!important;
        font-weight:800!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product span{
        display:none!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        align-items:center!important;
        gap:4px!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        margin:0!important;
        padding:0!important;
        overflow:visible!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        height:34px!important;
        min-height:34px!important;
        max-height:34px!important;
        margin:0!important;
        padding:5px 3px!important;
        gap:3px!important;
        border-radius:7px!important;
        color:#fff!important;
        font-size:9px!important;
        font-weight:800!important;
        line-height:1!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        box-sizing:border-box!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-top-zalo{display:inline-flex!important;order:1!important;background:#087cf0!important;border-color:#087cf0!important;color:#fff!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-top-call{display:inline-flex!important;order:2!important;background:#22c55e!important;border-color:#22c55e!important;color:#fff!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-top-facebook,
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-top-messenger{display:none!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a .ct5-listing-cta-icon,
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a svg,
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a i{
        width:13px!important;
        height:13px!important;
        min-width:13px!important;
        flex:0 0 13px!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-sticky-label{
        display:inline!important;
        min-width:0!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-sticky-label-desktop{display:none!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-sticky-label-mobile{display:inline!important;}

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs{
        display:flex!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        width:calc(100% + 16px)!important;
        min-width:0!important;
        margin:0 -8px!important;
        padding:0 8px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        border:0!important;
        background:#fff!important;
        scrollbar-width:none!important;
        -webkit-overflow-scrolling:touch!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs::-webkit-scrollbar{display:none!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs > a{
        flex:0 0 auto!important;
        min-width:0!important;
        height:42px!important;
        min-height:42px!important;
        padding:0 12px!important;
        border-bottom:3px solid transparent!important;
        color:#4b5563!important;
        font-size:11px!important;
        font-weight:800!important;
        white-space:nowrap!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs > a.is-active,
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs > a:hover{
        color:#111827!important;
        border-bottom-color:#ffd400!important;
    }
}

@media (max-width: 380px){
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-title-line h1,
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-info h1{
        font-size:17px!important;
    }
    .ct5-shop-page-default #ct5-shop-profile-contact .ct5-shop-profile-row > .shop-unified-general-actions > a.ct5-btn{
        font-size:8.2px!important;
        gap:2px!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-sticky-top-row{
        grid-template-columns:minmax(0,60%) minmax(0,40%)!important;
        gap:4px!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions{
        gap:3px!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a{
        font-size:8px!important;
        padding-left:2px!important;
        padding-right:2px!important;
    }
}


/* ========================================================================== */
/* SHOP_DEFAULT MOBILE V3 — sticky rail parity with Taxi_Shop                 */
/* - Sticky row 1: logo/name left + 4 contact channels in horizontal rail.    */
/* - Initial viewport is positioned at Zalo + Gọi by JS; swipe left to reveal */
/*   Messenger + Facebook, exactly like Taxi_Shop mobile.                     */
/* - Sticky logo is round, borderless, with a small left breathing space.     */
/* - Sticky row 2: horizontal tabs, same two-tier floating behavior.           */
/* ========================================================================== */
@media (max-width: 767.98px){
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-scrollbar-inner{
        display:grid!important;
        grid-template-columns:1fr!important;
        grid-template-rows:62px 44px!important;
        width:100%!important;
        max-width:100%!important;
        min-height:106px!important;
        height:106px!important;
        margin:0!important;
        padding:0 6px!important;
        gap:0!important;
        background:#fff!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-sticky-top-row{
        display:grid!important;
        grid-template-columns:minmax(0,calc(100% - 166px)) 160px!important;
        align-items:center!important;
        column-gap:6px!important;
        width:100%!important;
        min-width:0!important;
        height:62px!important;
        min-height:62px!important;
        margin:0!important;
        padding:0!important;
        border-bottom:1px solid #f1f5f9!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:7px!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        height:62px!important;
        min-height:62px!important;
        margin:0!important;
        padding:0 0 0 6px!important;
        overflow:hidden!important;
        box-sizing:border-box!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product img{
        display:block!important;
        flex:0 0 48px!important;
        width:48px!important;
        min-width:48px!important;
        max-width:48px!important;
        height:48px!important;
        min-height:48px!important;
        max-height:48px!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        border-radius:9999px!important;
        -webkit-border-radius:9999px!important;
        clip-path:circle(50%)!important;
        -webkit-clip-path:circle(50%)!important;
        background:transparent!important;
        box-shadow:none!important;
        object-fit:cover!important;
        object-position:center center!important;
        overflow:hidden!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product > div{
        display:flex!important;
        flex:1 1 auto!important;
        flex-direction:column!important;
        justify-content:center!important;
        min-width:0!important;
        width:auto!important;
        max-width:100%!important;
        height:48px!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product strong{
        display:-webkit-box!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        max-height:29.3px!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        -webkit-box-orient:vertical!important;
        -webkit-line-clamp:2!important;
        white-space:normal!important;
        text-overflow:ellipsis!important;
        color:#111827!important;
        font-size:12px!important;
        line-height:1.22!important;
        font-weight:800!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product span{
        display:none!important;
    }

    /* CTA rail: all 4 channels remain in DOM and can be swiped horizontally. */
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        justify-self:auto!important;
        align-self:center!important;
        flex:none!important;
        width:160px!important;
        min-width:160px!important;
        max-width:160px!important;
        height:62px!important;
        min-height:62px!important;
        margin:0!important;
        padding:0!important;
        gap:4px!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;
        box-sizing:border-box!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions::-webkit-scrollbar{
        display:none!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex:0 0 auto!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        height:34px!important;
        min-height:34px!important;
        max-height:34px!important;
        margin:0!important;
        padding:0 6px!important;
        gap:4px!important;
        border:1px solid transparent!important;
        border-radius:8px!important;
        font-size:10.5px!important;
        line-height:1!important;
        font-weight:800!important;
        text-decoration:none!important;
        white-space:nowrap!important;
        overflow:visible!important;
        text-overflow:clip!important;
        scroll-snap-align:start!important;
        box-shadow:none!important;
        box-sizing:border-box!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a .ct5-listing-cta-icon,
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a svg,
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a i{
        display:block!important;
        position:static!important;
        flex:0 0 14px!important;
        width:14px!important;
        min-width:14px!important;
        max-width:14px!important;
        height:14px!important;
        min-height:14px!important;
        max-height:14px!important;
        margin:0!important;
        padding:0!important;
        color:inherit!important;
        transform:none!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-sticky-label{
        display:block!important;
        min-width:0!important;
        margin:0!important;
        padding:0!important;
        overflow:visible!important;
        text-overflow:clip!important;
        white-space:nowrap!important;
        color:inherit!important;
        font-size:inherit!important;
        line-height:inherit!important;
        font-weight:inherit!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-sticky-label-desktop{display:none!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-sticky-label-mobile{display:block!important;}

    /* Visual/source order matches Taxi_Shop: Facebook | Messenger | Zalo | Gọi. */
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .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;
        background:#1877f2!important;
        border-color:#1877f2!important;
        color:#fff!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .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;
        background:#eef5ff!important;
        border-color:#d6e6ff!important;
        color:#0958d9!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .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;
        background:#0878f9!important;
        border-color:#0878f9!important;
        color:#fff!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .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;
        background:#22c55e!important;
        border-color:#22c55e!important;
        color:#fff!important;
    }

    /* Row 2 mirrors Taxi_Shop sticky tabs. */
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs{
        display:flex!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        width:calc(100% + 12px)!important;
        min-width:0!important;
        max-width:none!important;
        height:44px!important;
        min-height:44px!important;
        margin:0 -6px!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;
        border-top:1px solid #f1f5f9!important;
        box-sizing:border-box!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs::-webkit-scrollbar{display:none!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs > a{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex:0 0 auto!important;
        min-width:94px!important;
        width:auto!important;
        height:44px!important;
        min-height:44px!important;
        margin:0!important;
        padding:0 12px!important;
        border:0!important;
        border-bottom:2px solid transparent!important;
        border-radius:0!important;
        background:#fff!important;
        color:#4b5563!important;
        font-size:12px!important;
        line-height:1!important;
        font-weight:800!important;
        text-decoration:none!important;
        white-space:nowrap!important;
        box-sizing:border-box!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs > a:hover,
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-tabs > a.is-active{
        color:#111827!important;
        border-bottom-color:#ffd400!important;
    }
}

@media (max-width: 375px){
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-sticky-top-row{
        grid-template-columns:minmax(0,calc(100% - 162px)) 156px!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions{
        width:156px!important;
        min-width:156px!important;
        max-width:156px!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product img{
        flex-basis:44px!important;
        width:44px!important;
        min-width:44px!important;
        max-width:44px!important;
        height:44px!important;
        min-height:44px!important;
        max-height:44px!important;
        border-radius:9999px!important;
        -webkit-border-radius:9999px!important;
        clip-path:circle(50%)!important;
        -webkit-clip-path:circle(50%)!important;
        object-fit:cover!important;
        object-position:center center!important;
    }
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product > div{height:44px!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product strong{font-size:11.5px!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-top-facebook{flex-basis:78px!important;width:78px!important;min-width:78px!important;max-width:78px!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-top-messenger{flex-basis:84px!important;width:84px!important;min-width:84px!important;max-width:84px!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-top-zalo{flex-basis:62px!important;width:62px!important;min-width:62px!important;max-width:62px!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions .ct5-top-call{flex-basis:90px!important;width:90px!important;min-width:90px!important;max-width:90px!important;}
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-top-actions > a{padding:0 5px!important;font-size:10.25px!important;}
}



/* ========================================================================== */
/* SHOP_DEFAULT MOBILE V4 — force sticky shop logo to a true circle on iOS   */
/* - Only Shop_Default sticky bar on mobile.                                  */
/* - border-radius + clip-path fixes rectangular source assets on Safari.     */
/* ========================================================================== */
@media (max-width: 767.98px){
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product{
        overflow:hidden!important;
    }

    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product > img,
    #ct5StickyTabs.ct5-sticky-shop-default .ct5-mini-product img{
        display:block!important;
        flex:0 0 48px!important;
        width:48px!important;
        min-width:48px!important;
        max-width:48px!important;
        height:48px!important;
        min-height:48px!important;
        max-height:48px!important;
        aspect-ratio:1 / 1!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        outline:0!important;
        border-radius:9999px!important;
        -webkit-border-radius:9999px!important;
        box-shadow:none!important;
        object-fit:cover!important;
        object-position:center center!important;
        overflow:hidden!important;
        clip-path:circle(50% at 50% 50%)!important;
        -webkit-clip-path:circle(50% at 50% 50%)!important;
        transform:translateZ(0)!important;
        -webkit-transform:translateZ(0)!important;
    }
}

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



/* ========================================================================== */
/* SHOP_DEFAULT MOBILE V5 — remove redundant lower CTA + natural banner ratio */
/* - Mobile already has profile contacts, sticky contacts and global bottom nav. */
/* - The old 4-button mobile CTA near the footer is redundant, so hide it.       */
/* - Sidebar/bottom banners use their natural aspect ratio instead of 350px crop. */
/* ========================================================================== */
@media (max-width: 767.98px){
    .ct5-shop-page-default #ct5-shop-mobile-contact,
    .ct5-shop-page-default .ct5-shop-mobile-cta.shop-unified-mobile-contact{
        display:none!important;
    }

    .ct5-shop-page-default .ct5-shop-sidebar-banner-card,
    .ct5-shop-page-default .ct5-shop-banner-bottom{
        --front-banner-responsive-height:auto;
        width:100%!important;
        max-width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:10px 0 12px!important;
        padding:0!important;
        border:0!important;
        border-radius:12px!important;
        background:transparent!important;
        box-shadow:none!important;
        overflow:hidden!important;
    }

    .ct5-shop-page-default .ct5-shop-sidebar-banner-card > .ct5-ad-label{
        display:none!important;
    }

    .ct5-shop-page-default .ct5-shop-sidebar-banner-card .front-banner,
    .ct5-shop-page-default .ct5-shop-sidebar-banner-card .front-banner-image,
    .ct5-shop-page-default .ct5-shop-sidebar-banner-card .front-banner-script,
    .ct5-shop-page-default .ct5-shop-sidebar-banner-card a,
    .ct5-shop-page-default .ct5-shop-sidebar-banner-card picture,
    .ct5-shop-page-default .ct5-shop-sidebar-banner-card img,
    .ct5-shop-page-default .ct5-shop-banner-bottom .front-banner,
    .ct5-shop-page-default .ct5-shop-banner-bottom .front-banner-image,
    .ct5-shop-page-default .ct5-shop-banner-bottom .front-banner-script,
    .ct5-shop-page-default .ct5-shop-banner-bottom a,
    .ct5-shop-page-default .ct5-shop-banner-bottom picture,
    .ct5-shop-page-default .ct5-shop-banner-bottom img{
        width:100%!important;
        max-width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        padding:0!important;
        display:block!important;
        object-fit:contain!important;
        object-position:center center!important;
        border-radius:0!important;
        box-sizing:border-box!important;
    }
}