/* ALO V22: Shop Money Page Layout Upgrade
   Scope riêng cho /shop/{slug}. Load sau V21 để nâng shop thành money page chính. */

.ct5-shop-page{
    background:linear-gradient(180deg,#f8fafc 0,#fff 360px,#f8fafc 100%)!important;
}

.ct5-shop-page .ct5-container{
    max-width:1220px!important;
}

.ct5-shop-page .ct5-breadcrumb{
    margin:14px 0 12px!important;
    color:#64748b!important;
    font-size:13px!important;
}

.ct5-shop-page .ct5-shop-banner-top{
    margin:14px 0 12px!important;
    border-radius:18px!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}

/* Hero money page */
.ct5-shop-page .ct5-shop-hero{
    border-radius:24px!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid rgba(226,232,240,.9)!important;
    box-shadow:0 22px 55px rgba(15,23,42,.11)!important;
    margin:0 0 18px!important;
}

.ct5-shop-page .ct5-shop-cover,
.ct5-shop-page .ct5-shop-cover img{
    border-radius:24px 24px 0 0!important;
}

.ct5-shop-page .ct5-shop-cover{
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    background:#e5e7eb!important;
    position:relative!important;
}

.ct5-shop-page .ct5-shop-cover:before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(15,23,42,.04) 0,rgba(15,23,42,.08) 48%,rgba(15,23,42,.26) 100%)!important;
}

.ct5-shop-page .ct5-shop-cover img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
}

.ct5-shop-page .ct5-shop-sticky-customer-head{
    margin:0!important;
    border-radius:0 0 24px 24px!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
}

.ct5-shop-page .ct5-shop-sticky-customer-head .ct5-shop-profile-row{
    display:grid!important;
    grid-template-columns:104px minmax(0,1fr) minmax(270px,360px)!important;
    gap:18px!important;
    align-items:center!important;
    padding:18px 22px!important;
    min-height:118px!important;
    border-bottom:1px solid #eef2f7!important;
}

.ct5-shop-page .ct5-shop-logo-wrap{
    width:96px!important;
    height:96px!important;
    margin:-42px 0 0!important;
    position:relative!important;
    z-index:3!important;
}

.ct5-shop-page .ct5-shop-logo,
.ct5-shop-page .ct5-shop-logo-wrap img{
    width:96px!important;
    height:96px!important;
    border-radius:22px!important;
    border:4px solid #fff!important;
    object-fit:cover!important;
    box-shadow:0 16px 34px rgba(15,23,42,.18)!important;
}

.ct5-shop-page .ct5-shop-info{
    min-width:0!important;
}

.ct5-shop-page .ct5-shop-title-line{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex-wrap:wrap!important;
}

.ct5-shop-page .ct5-shop-title-line h1,
.ct5-shop-page .ct5-shop-info h1{
    font-size:30px!important;
    line-height:1.18!important;
    font-weight:950!important;
    letter-spacing:-.035em!important;
    color:#0f172a!important;
    margin:0!important;
}

.ct5-shop-page .ct5-shop-title-line .ct5-shop-status,
.ct5-shop-page .ct5-shop-status{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:6px 11px!important;
    border-radius:999px!important;
    background:#ecfdf5!important;
    color:#15803d!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1.1!important;
    white-space:nowrap!important;
}

.ct5-shop-page .ct5-shop-info p{
    margin:7px 0 0!important;
    color:#475569!important;
    line-height:1.58!important;
    font-size:15px!important;
    max-width:760px!important;
}

.ct5-shop-page .ct5-shop-meta-line{
    margin-top:10px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px 14px!important;
    flex-wrap:wrap!important;
    color:#64748b!important;
    font-weight:700!important;
    font-size:13.5px!important;
}

/* CTA money block */
.ct5-shop-page .ct5-shop-actions.ct5-side-actions-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    align-self:stretch!important;
    align-content:center!important;
    padding:12px!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,#fff7ed,#fff)!important;
    border:1px solid #fed7aa!important;
    box-shadow:0 12px 28px rgba(251,146,60,.12)!important;
}

.ct5-shop-page .ct5-shop-actions.ct5-side-actions-grid .ct5-btn,
.ct5-shop-page .ct5-shop-actions.ct5-side-actions-grid a{
    height:44px!important;
    min-height:44px!important;
    border-radius:13px!important;
    font-size:13.5px!important;
    font-weight:950!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    padding:0 12px!important;
    text-decoration:none!important;
    white-space:nowrap!important;
}

.ct5-shop-page .ct5-shop-actions .ct5-btn-call,
.ct5-shop-page .ct5-shop-actions .ct5-btn-call-green{
    background:#16a34a!important;
    border-color:#16a34a!important;
    color:#fff!important;
}

.ct5-shop-page .ct5-shop-actions .ct5-btn-zalo{
    background:#0068ff!important;
    border-color:#0068ff!important;
    color:#fff!important;
}

.ct5-shop-page .ct5-shop-actions .ct5-btn-facebook{
    background:#1877f2!important;
    border-color:#1877f2!important;
    color:#fff!important;
}

.ct5-shop-page .ct5-shop-actions .ct5-btn-messenger{
    background:#eef5ff!important;
    border-color:#d6e6ff!important;
    color:#0b5ed7!important;
}

/* Tab bar như money page điều hướng nhanh */
.ct5-shop-page .ct5-shop-tabs,
.ct5-shop-page .ct5-shop-tabs-customer{
    background:#fff!important;
    border-top:0!important;
    border-bottom:0!important;
    border-radius:0 0 24px 24px!important;
    padding:0 18px!important;
    min-height:58px!important;
}

.ct5-shop-page .ct5-shop-tabs-links{
    display:flex!important;
    gap:4px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
}

.ct5-shop-page .ct5-shop-tabs-links::-webkit-scrollbar{display:none!important;}

.ct5-shop-page .ct5-shop-tabs-links > a,
.ct5-shop-page .ct5-shop-tabs a{
    min-height:58px!important;
    padding:0 15px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-bottom:3px solid transparent!important;
    color:#475569!important;
    font-weight:900!important;
    text-decoration:none!important;
    white-space:nowrap!important;
}

.ct5-shop-page .ct5-shop-tabs-links > a:hover,
.ct5-shop-page .ct5-shop-tabs a:hover,
.ct5-shop-page .ct5-shop-tabs-links > a.is-active,
.ct5-shop-page .ct5-shop-tabs a.is-active{
    color:#dc2626!important;
    border-bottom-color:#dc2626!important;
}

/* Main layout */
.ct5-shop-page .ct5-shop-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 340px!important;
    gap:18px!important;
    align-items:start!important;
    margin-top:18px!important;
}

.ct5-shop-page .ct5-shop-layout main,
.ct5-shop-page .ct5-shop-layout aside{
    min-width:0!important;
}

.ct5-shop-page .ct5-sticky-side{
    position:sticky!important;
    top:88px!important;
    display:grid!important;
    gap:14px!important;
}

.ct5-shop-page .ct5-ad-card,
.ct5-shop-page .ct5-panel,
.ct5-shop-page .ct5-shop-section,
.ct5-shop-page .ct5-money-boost,
.ct5-shop-page .ct5-money-panel,
.ct5-shop-page .ct5-contact-panel,
.ct5-shop-page .ct5-service-info-panel,
.ct5-shop-page .ct5-contextual-links,
.ct5-shop-page .ct5-freshness-panel,
.ct5-shop-page .ct5-trust-plus,
.ct5-shop-page .ct5-entity-trust{
    border-radius:22px!important;
    border:1px solid rgba(226,232,240,.95)!important;
    background:#fff!important;
    box-shadow:0 14px 34px rgba(15,23,42,.07)!important;
    overflow:hidden!important;
}

.ct5-shop-page main > section,
.ct5-shop-page main > div.ct5-panel,
.ct5-shop-page main > div.ct5-money-boost,
.ct5-shop-page main > div.ct5-contextual-links{
    margin-bottom:16px!important;
}

.ct5-shop-page .ct5-ad-card h2,
.ct5-shop-page .ct5-panel h2,
.ct5-shop-page .ct5-shop-section h2,
.ct5-shop-page .ct5-money-boost h2,
.ct5-shop-page .ct5-money-panel h2{
    color:#0f172a!important;
    letter-spacing:-.02em!important;
    font-weight:950!important;
}

/* Sidebar contact nhìn như khối chốt đơn */
.ct5-shop-page aside .ct5-contact-panel,
.ct5-shop-page aside .ct5-ad-card{
    box-shadow:0 18px 45px rgba(15,23,42,.09)!important;
}

.ct5-shop-page aside .ct5-btn,
.ct5-shop-page aside button,
.ct5-shop-page aside a[class*="btn"]{
    border-radius:13px!important;
    font-weight:950!important;
}

/* Listing trong shop: card gọn, đều, ưu tiên chuyển đổi */
.ct5-shop-page .ct5-shop-listing-grid{
    gap:14px!important;
}

.ct5-shop-page .ct5-shop-listing-grid .dtx-card,
.ct5-shop-page .ct5-shop-listing-grid article{
    border-radius:18px!important;
    border:1px solid #e5e7eb!important;
    overflow:hidden!important;
    box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}

.ct5-shop-page .ct5-shop-listing-grid .dtx-card:hover,
.ct5-shop-page .ct5-shop-listing-grid article:hover{
    transform:translateY(-2px)!important;
    border-color:#fecaca!important;
    box-shadow:0 18px 36px rgba(15,23,42,.1)!important;
}

.ct5-shop-page .ct5-shop-listing-grid img{
    aspect-ratio:4/3!important;
    object-fit:cover!important;
}

/* Mobile */
@media(max-width:1199px){
    .ct5-shop-page .ct5-shop-sticky-customer-head .ct5-shop-profile-row{
        grid-template-columns:92px minmax(0,1fr)!important;
    }
    .ct5-shop-page .ct5-shop-actions.ct5-side-actions-grid{
        grid-column:1 / -1!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
    }
    .ct5-shop-page .ct5-shop-layout{
        grid-template-columns:minmax(0,1fr) 310px!important;
    }
}

@media(max-width:991.98px){
    .ct5-shop-page .ct5-shop-cover{
        height:240px!important;
        min-height:240px!important;
        max-height:240px!important;
    }
    .ct5-shop-page .ct5-shop-layout{
        grid-template-columns:1fr!important;
        gap:14px!important;
    }
    .ct5-shop-page .ct5-sticky-side{
        position:relative!important;
        top:auto!important;
    }
    .ct5-shop-page .ct5-shop-layout aside{
        order:-1!important;
    }
    .ct5-shop-page .ct5-shop-sticky-customer-head .ct5-shop-profile-row{
        grid-template-columns:86px minmax(0,1fr)!important;
        padding:16px!important;
        gap:13px!important;
    }
    .ct5-shop-page .ct5-shop-logo-wrap,
    .ct5-shop-page .ct5-shop-logo,
    .ct5-shop-page .ct5-shop-logo-wrap img{
        width:82px!important;
        height:82px!important;
        border-radius:18px!important;
    }
    .ct5-shop-page .ct5-shop-title-line h1,
    .ct5-shop-page .ct5-shop-info h1{
        font-size:24px!important;
    }
    .ct5-shop-page .ct5-shop-actions.ct5-side-actions-grid{
        grid-template-columns:1fr 1fr!important;
        padding:10px!important;
    }
}

@media(max-width:575px){
    .ct5-shop-page .ct5-container{
        padding-left:12px!important;
        padding-right:12px!important;
    }
    .ct5-shop-page .ct5-shop-hero{
        border-radius:18px!important;
        margin-bottom:12px!important;
    }
    .ct5-shop-page .ct5-shop-cover,
    .ct5-shop-page .ct5-shop-cover img{
        border-radius:18px 18px 0 0!important;
    }
    .ct5-shop-page .ct5-shop-cover{
        height:190px!important;
        min-height:190px!important;
        max-height:190px!important;
    }
    .ct5-shop-page .ct5-shop-sticky-customer-head,
    .ct5-shop-page .ct5-shop-tabs,
    .ct5-shop-page .ct5-shop-tabs-customer{
        border-radius:0 0 18px 18px!important;
    }
    .ct5-shop-page .ct5-shop-sticky-customer-head .ct5-shop-profile-row{
        display:block!important;
        padding:0 14px 14px!important;
    }
    .ct5-shop-page .ct5-shop-logo-wrap{
        margin:-36px 0 9px!important;
    }
    .ct5-shop-page .ct5-shop-title-line{
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:6px!important;
    }
    .ct5-shop-page .ct5-shop-title-line h1,
    .ct5-shop-page .ct5-shop-info h1{
        font-size:22px!important;
        line-height:1.24!important;
    }
    .ct5-shop-page .ct5-shop-info p{
        font-size:14.5px!important;
    }
    .ct5-shop-page .ct5-shop-meta-line{
        gap:7px 10px!important;
        font-size:12.8px!important;
    }
    .ct5-shop-page .ct5-shop-actions.ct5-side-actions-grid{
        margin-top:12px!important;
        grid-template-columns:1fr 1fr!important;
    }
    .ct5-shop-page .ct5-shop-actions.ct5-side-actions-grid .ct5-btn,
    .ct5-shop-page .ct5-shop-actions.ct5-side-actions-grid a{
        height:42px!important;
        min-height:42px!important;
        font-size:12.5px!important;
        padding:0 8px!important;
    }
    .ct5-shop-page .ct5-shop-tabs-links > a,
    .ct5-shop-page .ct5-shop-tabs a{
        min-height:48px!important;
        padding:0 13px!important;
        font-size:13.5px!important;
    }
    .ct5-shop-page .ct5-ad-card,
    .ct5-shop-page .ct5-panel,
    .ct5-shop-page .ct5-shop-section,
    .ct5-shop-page .ct5-money-boost,
    .ct5-shop-page .ct5-money-panel,
    .ct5-shop-page .ct5-contact-panel,
    .ct5-shop-page .ct5-service-info-panel,
    .ct5-shop-page .ct5-contextual-links,
    .ct5-shop-page .ct5-freshness-panel,
    .ct5-shop-page .ct5-trust-plus,
    .ct5-shop-page .ct5-entity-trust{
        border-radius:18px!important;
    }
}