/* ALO V32 - Contact CTA aligned with the proven datxe.net button system. */

body.ct5-listing-detail-page {
    --ct5-cta-zalo: #0878f9;
    --ct5-cta-zalo-hover: #0068e8;
    --ct5-cta-call: #22c55e;
    --ct5-cta-call-hover: #16a34a;
    --ct5-cta-shop: #0f172a;
    --ct5-cta-shop-hover: #020617;
    --ct5-cta-icon-hover: #facc15;
}

/* V32.4: CTA listing dùng SVG thật, bỏ hoàn toàn phụ thuộc Bootstrap Icons/pseudo-element. */
body.ct5-listing-detail-page a .ct5-listing-cta-icon,
body.ct5-listing-detail-page a .ct5-listing-cta-icon path {
    color: inherit !important;
    fill: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

body.ct5-listing-detail-page a:is(:hover, :focus-visible) .ct5-listing-cta-icon,
body.ct5-listing-detail-page a:is(:hover, :focus-visible) .ct5-listing-cta-icon path {
    color: inherit !important;
    fill: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Main listing CTA: roomy top/bottom spacing and one consistent desktop height. */
body.ct5-listing-detail-page .ct5-human-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 8px 0 0 !important;
    padding: 8px 0 12px !important;
    box-sizing: border-box !important;
}

body.ct5-listing-detail-page .ct5-human-actions a {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08) !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

body.ct5-listing-detail-page .ct5-human-actions .ct5-human-quote {
    background: #fffaf5 !important;
    border: 1px solid #fdba74 !important;
    color: #9a3412 !important;
    box-shadow: none !important;
}

body.ct5-listing-detail-page .ct5-human-actions .ct5-human-zalo {
    background: var(--ct5-cta-zalo) !important;
    border-color: var(--ct5-cta-zalo) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-human-actions .ct5-human-shop {
    background: var(--ct5-cta-shop) !important;
    border-color: var(--ct5-cta-shop) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-human-actions .ct5-human-call {
    background: var(--ct5-cta-call) !important;
    border-color: var(--ct5-cta-call) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-human-actions a > i,
body.ct5-listing-detail-page .ct5-side-actions-grid a > i {
    color: currentColor !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: color .18s ease !important;
}

body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions a > i {
    color: currentColor !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: color .18s ease !important;
}

/* CTA nền xanh giữa trang: icon luôn theo màu chữ, không bị theme nhuộm đỏ. */
body.ct5-listing-detail-page #alo-v24-listing-lead .alo-v24-lead-btn > i {
    color: currentColor !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: color .18s ease !important;
}

body.ct5-listing-detail-page #alo-v24-listing-lead .alo-v24-lead-btn:hover > i,
body.ct5-listing-detail-page #alo-v24-listing-lead .alo-v24-lead-btn:focus-visible > i {
    color: var(--ct5-cta-icon-hover) !important;
}

body.ct5-listing-detail-page .ct5-human-actions a:hover,
body.ct5-listing-detail-page .ct5-human-actions a:focus-visible {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .13) !important;
}

body.ct5-listing-detail-page .ct5-human-actions .ct5-human-quote:hover,
body.ct5-listing-detail-page .ct5-human-actions .ct5-human-quote:focus-visible {
    background: #fff7ed !important;
    border-color: #fb923c !important;
    color: #9a3412 !important;
}

body.ct5-listing-detail-page .ct5-human-actions .ct5-human-zalo:hover,
body.ct5-listing-detail-page .ct5-human-actions .ct5-human-zalo:focus-visible {
    background: var(--ct5-cta-zalo-hover) !important;
    border-color: var(--ct5-cta-zalo-hover) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-human-actions .ct5-human-shop:hover,
body.ct5-listing-detail-page .ct5-human-actions .ct5-human-shop:focus-visible {
    background: var(--ct5-cta-shop-hover) !important;
    border-color: var(--ct5-cta-shop-hover) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-human-actions .ct5-human-call:hover,
body.ct5-listing-detail-page .ct5-human-actions .ct5-human-call:focus-visible {
    background: var(--ct5-cta-call-hover) !important;
    border-color: var(--ct5-cta-call-hover) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-human-actions a:hover > i,
body.ct5-listing-detail-page .ct5-human-actions a:focus-visible > i,
body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions a:hover > i,
body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions a:focus-visible > i,
body.ct5-listing-detail-page #p3-contact .ct5-side-actions-grid a:hover > i,
body.ct5-listing-detail-page #p3-contact .ct5-side-actions-grid a:focus-visible > i {
    color: var(--ct5-cta-icon-hover) !important;
}

/* Sticky listing CTA: compact like datxe.net because horizontal space is limited. */
body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-actions a {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 9px !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-zalo {
    background: var(--ct5-cta-zalo) !important;
    border-color: var(--ct5-cta-zalo) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-facebook {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
    color: #fff !important;
}

body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-messenger {
    background: #eef5ff !important;
    border-color: #d6e6ff !important;
    color: #0b5ed7 !important;
}

body.ct5-listing-detail-page #ct5StickyTabs .ct5-top-call {
    background: var(--ct5-cta-call) !important;
    border-color: var(--ct5-cta-call) !important;
    color: #fff !important;
}

/* Listing sidebar CTA: medium size with clear breathing room inside the card. */
body.ct5-listing-detail-page .ct5-side-actions-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 8px 0 2px !important;
    padding: 6px 0 4px !important;
}

body.ct5-listing-detail-page .ct5-side-actions-grid .ct5-social-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

body.ct5-listing-detail-page .ct5-side-actions-grid .ct5-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.ct5-listing-detail-page .ct5-side-actions-grid .ct5-btn-zalo {
    background: var(--ct5-cta-zalo) !important;
    border-color: var(--ct5-cta-zalo) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-side-actions-grid .ct5-btn-call,
body.ct5-listing-detail-page .ct5-side-actions-grid .ct5-btn-call-green {
    background: var(--ct5-cta-call) !important;
    border-color: var(--ct5-cta-call) !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-side-actions-grid .ct5-btn-facebook {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
    color: #fff !important;
}

body.ct5-listing-detail-page .ct5-side-actions-grid .ct5-btn-messenger {
    background: #eef5ff !important;
    border-color: #d6e6ff !important;
    color: #0b5ed7 !important;
}

@media (max-width: 1199.98px) {
    body.ct5-listing-detail-page .ct5-human-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    body.ct5-listing-detail-page .ct5-human-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin-top: 7px !important;
        padding: 7px 0 10px !important;
    }

    body.ct5-listing-detail-page .ct5-human-actions a {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        gap: 7px !important;
        font-size: 13px !important;
    }

    body.ct5-listing-detail-page .ct5-human-actions .ct5-human-zalo {
        display: inline-flex !important;
    }

    body.ct5-listing-detail-page .ct5-side-actions-grid {
        margin-top: 8px !important;
        padding: 6px 0 3px !important;
    }

    body.ct5-listing-detail-page .ct5-side-actions-grid .ct5-btn {
        min-height: 44px !important;
        height: 44px !important;
        max-height: 44px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 380px) {
    body.ct5-listing-detail-page .ct5-human-actions a {
        font-size: 12px !important;
        padding-inline: 7px !important;
    }
}

/* V32.3: Bootstrap icon dùng ::before; ép cả lớp glyph kế thừa đúng màu chữ của nút. */
body.ct5-listing-detail-page :is(
    #ct5StickyTabs .ct5-top-actions a,
    #ct5-overview .ct5-human-actions a,
    #alo-v24-listing-lead .alo-v24-lead-btn,
    #p3-contact .ct5-side-actions-grid a,
    .ct5-listing-conversion-actions a
) > i,
body.ct5-listing-detail-page :is(
    #ct5StickyTabs .ct5-top-actions a,
    #ct5-overview .ct5-human-actions a,
    #alo-v24-listing-lead .alo-v24-lead-btn,
    #p3-contact .ct5-side-actions-grid a,
    .ct5-listing-conversion-actions a
) > i::before,
body.ct5-listing-detail-page :is(
    #ct5StickyTabs .ct5-top-actions a,
    #ct5-overview .ct5-human-actions a,
    #alo-v24-listing-lead .alo-v24-lead-btn,
    #p3-contact .ct5-side-actions-grid a,
    .ct5-listing-conversion-actions a
) > i::after {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Không cho rule hover toàn site đổi riêng icon lệch khỏi màu chữ. */
body.ct5-listing-detail-page :is(
    #ct5StickyTabs .ct5-top-actions a,
    #ct5-overview .ct5-human-actions a,
    #alo-v24-listing-lead .alo-v24-lead-btn,
    #p3-contact .ct5-side-actions-grid a,
    .ct5-listing-conversion-actions a
):is(:hover, :focus-visible) > i,
body.ct5-listing-detail-page :is(
    #ct5StickyTabs .ct5-top-actions a,
    #ct5-overview .ct5-human-actions a,
    #alo-v24-listing-lead .alo-v24-lead-btn,
    #p3-contact .ct5-side-actions-grid a,
    .ct5-listing-conversion-actions a
):is(:hover, :focus-visible) > i::before,
body.ct5-listing-detail-page :is(
    #ct5StickyTabs .ct5-top-actions a,
    #ct5-overview .ct5-human-actions a,
    #alo-v24-listing-lead .alo-v24-lead-btn,
    #p3-contact .ct5-side-actions-grid a,
    .ct5-listing-conversion-actions a
):is(:hover, :focus-visible) > i::after {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Thanh CTA mobile V24 bị trùng và nằm chìm dưới menu đáy mới. Tắt hẳn bản cũ. */
body.ct5-listing-detail-page .ct5-mobile-conversion-bar.alo-v24-mobile-cta {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 767.98px) {
    body.ct5-listing-detail-page {
        padding-bottom: 84px !important;
    }
}

/* V33: đồng bộ banner + deal đầu trang listing với shop, chỉ trên mobile. */
@media (max-width: 767.98px) {
    body.ct5-listing-detail-page .ct5-listing-page .ct5-detail-banner-top,
    body.ct5-listing-detail-page .ct5-listing-page .ct5-detail-banner-mobile-fallback {
        --ct5-listing-mobile-banner-height: clamp(104px, 28vw, 118px);
        --front-banner-responsive-height: var(--ct5-listing-mobile-banner-height);
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--ct5-listing-mobile-banner-height) !important;
        min-height: var(--ct5-listing-mobile-banner-height) !important;
        max-height: var(--ct5-listing-mobile-banner-height) !important;
        margin: 0 calc(50% - 50vw) 4px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        line-height: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.ct5-listing-detail-page .ct5-listing-page .ct5-detail-banner-top :is(.front-banner, .front-banner-image, .front-banner-script, a, picture, img),
    body.ct5-listing-detail-page .ct5-listing-page .ct5-detail-banner-mobile-fallback :is(.front-banner, .front-banner-image, .front-banner-script, a, picture, img) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: var(--ct5-listing-mobile-banner-height) !important;
        min-height: var(--ct5-listing-mobile-banner-height) !important;
        max-height: var(--ct5-listing-mobile-banner-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        object-fit: cover !important;
        object-position: center center !important;
        line-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.ct5-listing-detail-page .alo-aff-slot[data-aff-slot="listing.detail.after_breadcrumb"] .alogiare-taxonomy-deal-head p {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.ct5-listing-detail-page .alo-aff-slot[data-aff-slot="listing.detail.after_breadcrumb"] .alogiare-taxonomy-deal-head {
        align-items: center !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* V34: giảm khoảng trắng dọc theo ảnh đối chiếu, không tác động desktop. */
    body.ct5-listing-detail-page .ct5-page.ct5-listing-page {
        padding-top: 4px !important;
    }

    body.ct5-listing-detail-page .ct5-listing-page .ct5-breadcrumb {
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }

    body.ct5-listing-detail-page .alo-aff-slot[data-aff-slot="listing.detail.after_breadcrumb"] {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.ct5-listing-detail-page .alo-aff-slot[data-aff-slot="listing.detail.after_breadcrumb"] > .alogiare-taxonomy-deal-panel {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }
}

/* V35: banner 1 listing cách đều viewport 2px, bo góc nhẹ 3px; chỉ mobile. */
@media (max-width: 767.98px) {
    body.ct5-listing-detail-page .ct5-listing-page .ct5-detail-banner-top,
    body.ct5-listing-detail-page .ct5-listing-page .ct5-detail-banner-mobile-fallback {
        width: calc(100vw - 4px) !important;
        max-width: calc(100vw - 4px) !important;
        margin: -2px calc(50% - 50vw + 2px) 2px !important;
        border: 0 !important;
        border-radius: 3px !important;
    }

    body.ct5-listing-detail-page .ct5-listing-page .ct5-detail-banner-top :is(.front-banner, .front-banner-image, .front-banner-script, a, picture, img),
    body.ct5-listing-detail-page .ct5-listing-page .ct5-detail-banner-mobile-fallback :is(.front-banner, .front-banner-image, .front-banner-script, a, picture, img) {
        border: 0 !important;
        border-radius: 3px !important;
    }
}