/*
 * SERVICE SHOP – taxi_shop clone
 * Giữ nguyên kích thước, responsive và chuyển động của taxi-shop.css.
 * File này chỉ đổi nhận diện sang dịch vụ địa phương.
 */
.service-shop-clone{
    --taxi-blue:#08783f;
    --taxi-blue-dark:#075f35;
    --taxi-yellow:#16a34a;
    --taxi-yellow-dark:#0f7a39;
    --taxi-black:#12342b;
    --taxi-black-soft:#1a493c;
    --taxi-green:#16a34a;
    --taxi-text:#173b31;
    --taxi-muted:#64786f;
    --taxi-border:#d7e6de;
    --taxi-soft:#f3f8f5;
}
.service-shop-clone .taxi-m06-hero .taxi-m06-hero-content h1,
.service-shop-clone .taxi-m06-profile-summary h2,
.service-shop-clone .taxi-m06-section-title h2,
.service-shop-clone .taxi-m06-listing-body h3,
.service-shop-clone .taxi-m06-route-grid h3,
.service-shop-clone .taxi-m06-review-panel .xe-review-compact__head h2{
    color:#125c38!important;
}
.service-shop-clone .taxi-m06-hero-actions .is-book,
.service-shop-clone .taxi-m06-hero-actions .is-quote{
    background:#08783f!important;
    border-color:#08783f!important;
    color:#fff!important;
    box-shadow:0 10px 22px rgba(8,120,63,.22)!important;
}
.service-shop-clone .taxi-m06-hero-actions .is-book:hover,
.service-shop-clone .taxi-m06-hero-actions .is-quote:hover{
    background:#066634!important;
    border-color:#066634!important;
}
.service-shop-clone .taxi-m06-avatar,
.service-shop-clone .taxi-m06-sticky-logo{
    background:linear-gradient(145deg,#1c9a59,#075f35)!important;
    color:#fff!important;
}
.service-shop-clone .taxi-m06-profile-summary h2 i,
.service-shop-clone .taxi-m06-sticky-summary strong i,
.service-shop-clone .taxi-m06-section-title h2>i,
.service-shop-clone .taxi-m06-service-list i,
.service-shop-clone .taxi-m06-area-list i,
.service-shop-clone .taxi-m06-about-eyebrow i{
    color:#16a34a!important;
}
.service-shop-clone .taxi-m06-nav-links a:hover,
.service-shop-clone .taxi-m06-nav-links a.is-active{
    color:#0f5132!important;
    border-bottom-color:#16a34a!important;
}
.service-shop-clone .taxi-m06-listing-image span,
.service-shop-clone .taxi-m06-listing-actions button,
.service-shop-clone .taxi-m06-listing-actions .is-book,
.service-shop-clone .taxi-shop-step-next,
.service-shop-clone .taxi-shop-lead-submit,
.service-shop-clone .taxi-shop-lead-tabs button.is-active{
    background:#16a34a!important;
    border-color:#16a34a!important;
    color:#fff!important;
}
.service-shop-clone .taxi-m06-service-more,
.service-shop-clone .taxi-m06-about-actions>a{
    background:#12342b!important;
    color:#fff!important;
}
.service-shop-clone .taxi-m06-benefit-list i{
    background:#e7f7ed!important;
    color:#08783f!important;
}
.service-shop-clone .taxi-m06-map>span{
    background:rgba(18,52,43,.88)!important;
    color:#fff!important;
}
.service-shop-clone .taxi-m06-map>span i{
    color:#fff!important;
}
.service-m06-pricing .taxi-m06-route-grid article{
    align-content:start;
}
.service-m06-pricing .service-m06-price{
    color:#dc2626;
    font-size:16px;
    font-weight:950;
    line-height:1.2;
}
.service-m06-pricing .taxi-m06-route-grid small{
    min-height:30px;
    color:#64748b;
    font-size:10px;
    line-height:1.5;
}
.service-shop-request-summary>div:first-child i{color:#08783f!important}
.service-hub-lead-modal .taxi-shop-lead-card{--taxi-yellow:#16a34a;--taxi-blue:#08783f;--taxi-black:#12342b;--taxi-border:#d7e6de}
.service-hub-lead-modal .taxi-shop-lead-heading h2{color:#125c38!important}

/* Thanh tab được portal ra body nên cần giữ màu service sau khi rời wrapper. */
body>.taxi-m06-nav.is-fixed-portal{
    --taxi-blue:#08783f;
    --taxi-blue-dark:#075f35;
    --taxi-yellow:#16a34a;
    --taxi-yellow-dark:#0f7a39;
    --taxi-black:#12342b;
    --taxi-black-soft:#1a493c;
    --taxi-text:#173b31;
    --taxi-border:#d7e6de;
}
body>.taxi-m06-nav.is-fixed-portal .taxi-m06-nav-links a:hover,
body>.taxi-m06-nav.is-fixed-portal .taxi-m06-nav-links a.is-active{
    color:#0f5132!important;
    border-bottom-color:#16a34a!important;
}

@media(max-width:767.98px){
    .service-m06-pricing .service-m06-price{font-size:14px}
    .service-m06-pricing .taxi-m06-route-grid small{min-height:0;font-size:9px}
}

/* =========================================================
 * SERVICE SHOP RESPONSIVE FIX 2026-07-24
 * Khóa tràn ngang riêng cho mẫu dịch vụ, không sửa taxi_shop.
 * ========================================================= */
html.has-service-shop-page,
html.has-service-shop-page body{
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;
}

.service-shop-clone{
    inline-size:100%;
    min-inline-size:0;
    max-inline-size:100%;
    overflow-x:clip;
}
.service-shop-clone,
.service-shop-clone *,
body>.taxi-m06-nav.is-fixed-portal,
body>.taxi-m06-nav.is-fixed-portal *{
    box-sizing:border-box;
}
.service-shop-clone > *,
.service-shop-clone section,
.service-shop-clone article,
.service-shop-clone div,
.service-shop-clone nav,
.service-shop-clone form,
.service-shop-clone label{
    min-width:0;
    max-width:100%;
}
.service-shop-clone img,
.service-shop-clone iframe,
.service-shop-clone video,
.service-shop-clone svg{
    max-width:100%;
}

/* Thanh tab thường luôn nằm gọn trong chiều rộng shop. */
.service-shop-clone .taxi-m06-nav:not(.is-fixed-portal){
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
}
.service-shop-clone .taxi-m06-nav:not(.is-fixed-portal) .taxi-m06-nav-links{
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
}
.service-shop-clone .taxi-m06-nav:not(.is-fixed-portal) .taxi-m06-nav-links::-webkit-scrollbar{
    display:none;
}
.service-shop-clone .taxi-m06-nav-links a{
    flex:0 0 auto;
}

/* Khi JS portal thanh tab ra body, width phải tính cả padding và border. */
body>.taxi-m06-nav.is-fixed-portal{
    left:0!important;
    right:auto!important;
    width:100vw!important;
    min-width:0!important;
    max-width:100vw!important;
    margin:0!important;
    overflow:hidden!important;
}
body>.taxi-m06-nav.is-fixed-portal .taxi-m06-nav-links,
body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-brand,
body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-summary,
body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact{
    min-width:0!important;
    max-width:100%!important;
}

/* Tất cả grid con được phép co đúng kích thước cột. */
.service-shop-clone .taxi-m06-listing-grid > *,
.service-shop-clone .taxi-m06-route-grid > *,
.service-shop-clone .taxi-m06-service-coverage > *,
.service-shop-clone .taxi-m06-coverage-layout > *,
.service-shop-clone .taxi-m06-about-overview > *,
.service-shop-clone .taxi-m06-about-highlights > *,
.service-shop-clone .taxi-m06-bottom-grid > *{
    min-width:0!important;
    max-width:100%!important;
}
.service-shop-clone .taxi-m06-listing-price{
    min-width:0;
    white-space:normal;
    flex-wrap:wrap;
}
.service-shop-clone .taxi-m06-listing-price span,
.service-shop-clone .taxi-m06-listing-price strong,
.service-shop-clone .service-m06-price,
.service-shop-clone .taxi-m06-route-grid small,
.service-shop-clone .taxi-m06-route-grid button,
.service-shop-clone .taxi-m06-route-grid a,
.service-shop-clone .taxi-m06-service-list strong,
.service-shop-clone .taxi-m06-service-list small,
.service-shop-clone .taxi-m06-area-list button,
.service-shop-clone .taxi-m06-faq-list summary,
.service-shop-clone .taxi-m06-faq-list p{
    overflow-wrap:anywhere;
    word-break:break-word;
}
.service-shop-clone .taxi-m06-map>span{
    max-width:calc(100% - 20px)!important;
}
.service-shop-clone .taxi-m06-about-actions > *{
    min-width:0;
    max-width:100%;
}

/* Tablet: tránh cụm liên hệ canh cuối làm nút Zalo trôi khỏi khung. */
@media(min-width:768px) and (max-width:991.98px){
    .service-shop-clone .taxi-m06-profile{
        grid-template-columns:92px minmax(0,1fr)!important;
    }
    .service-shop-clone .taxi-m06-profile-contact{
        grid-column:1/-1!important;
        grid-template-columns:none!important;
        grid-auto-flow:column!important;
        grid-auto-columns:calc((100% - 30px)/4)!important;
        justify-content:start!important;
        justify-self:stretch!important;
        width:100%!important;
        max-width:100%!important;
        gap:10px!important;
        padding-left:0!important;
        padding-right:0!important;
        overflow-x:hidden!important;
    }
    .service-shop-clone .taxi-m06-profile-contact a{
        width:100%!important;
        min-width:0!important;
        padding-left:8px!important;
        padding-right:8px!important;
    }
    .service-shop-clone .taxi-m06-nav:not(.is-fixed-portal) .taxi-m06-nav-links{
        justify-content:flex-start!important;
    }
}

@media(max-width:767.98px){
    /* Service không dùng kiểu nới rộng âm lề của Taxi vì gây tràn khung ngoài. */
    .service-shop-clone > .taxi-m06-listings,
    .service-shop-clone > .taxi-m06-routes,
    .service-shop-clone > .taxi-m06-service-coverage,
    .service-shop-clone > .taxi-m06-about,
    .service-shop-clone > .taxi-m06-bottom-grid{
        width:100%!important;
        max-width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
    }

    .service-shop-clone .taxi-m06-nav:not(.is-fixed-portal){
        padding-left:8px!important;
        padding-right:8px!important;
    }
    .service-shop-clone .taxi-m06-nav:not(.is-fixed-portal) .taxi-m06-nav-links{
        justify-content:flex-start!important;
    }

    /* Thanh sticky 2 tầng: bỏ phần cộng thêm 16px vượt viewport. */
    body>.taxi-m06-nav.is-fixed-portal .taxi-m06-nav-links{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .service-shop-clone .taxi-m06-profile-contact{
        justify-content:start!important;
    }

    /* Nút card dịch vụ dài hơn nút Đặt xe, cho phép co và ngắt chữ an toàn. */
    .service-shop-clone .taxi-m06-listing-actions{
        min-width:0!important;
        max-width:100%!important;
    }
    .service-shop-clone .taxi-m06-listing-actions a,
    .service-shop-clone .taxi-m06-listing-actions button,
    .service-shop-clone .taxi-m06-listing-actions span{
        min-width:0!important;
        max-width:100%!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .service-shop-clone .taxi-m06-service-more,
    .service-shop-clone .taxi-m06-about-actions > *{
        white-space:normal!important;
        text-align:center;
        overflow-wrap:anywhere;
    }

    .service-hub-lead-modal,
    .service-hub-lead-modal .taxi-shop-lead-card,
    .service-hub-lead-modal .taxi-shop-lead-body,
    .service-hub-lead-modal .taxi-shop-lead-grid,
    .service-hub-lead-modal .taxi-shop-field,
    .service-hub-lead-modal .taxi-shop-input-icon{
        min-width:0!important;
        max-width:100%!important;
    }
}

@media(max-width:420px){
    .service-shop-clone .taxi-m06-listing-actions a,
    .service-shop-clone .taxi-m06-listing-actions button,
    .service-shop-clone .taxi-m06-listing-actions span{
        padding-left:2px!important;
        padding-right:2px!important;
        font-size:8px!important;
    }
    .service-shop-clone .taxi-m06-route-grid article,
    .service-shop-clone .taxi-m06-section{
        min-width:0!important;
    }
}

/* =========================================================
 * SERVICE SHOP CONTACT + TAB ALIGN FIX 2026-07-24
 * - Shop chỉ có 1–3 kênh: giữ kích thước nút như bộ 4 nút.
 * - Cụm liên hệ dồn về bên phải trên PC, tablet và mobile.
 * - Các tab luôn bắt đầu từ mép trái ở trạng thái thường/sticky.
 * ========================================================= */
.service-shop-clone .taxi-m06-nav:not(.is-fixed-portal) .taxi-m06-nav-links,
html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-nav-links{
    justify-content:flex-start!important;
}

/* PC/laptop: mỗi nút giữ đúng 1/4 vùng của bộ bốn nút. */
.service-shop-clone .taxi-m06-profile-contact[data-contact-count="1"],
.service-shop-clone .taxi-m06-profile-contact[data-contact-count="2"],
.service-shop-clone .taxi-m06-profile-contact[data-contact-count="3"]{
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:calc((100% - 30px)/4)!important;
    justify-content:end!important;
    justify-self:end!important;
    overflow-x:hidden!important;
}

/* Cả bộ 4 nút cũng luôn neo về phía bên phải. */
.service-shop-clone .taxi-m06-profile-contact{
    justify-content:end!important;
}

@media(min-width:768px) and (max-width:991.98px){
    .service-shop-clone .taxi-m06-profile-contact,
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="1"],
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="2"],
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="3"]{
        grid-auto-columns:calc((100% - 30px)/4)!important;
        justify-content:end!important;
    }
}

@media(max-width:767.98px){
    .service-shop-clone .taxi-m06-profile-contact,
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="1"],
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="2"],
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="3"]{
        grid-template-columns:none!important;
        grid-auto-flow:column!important;
        grid-auto-columns:calc((100% - 12px)/4)!important;
        gap:4px!important;
        justify-content:end!important;
        justify-self:stretch!important;
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }
}

@media(max-width:390px){
    .service-shop-clone .taxi-m06-profile-contact,
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="1"],
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="2"],
    .service-shop-clone .taxi-m06-profile-contact[data-contact-count="3"]{
        grid-auto-columns:calc((100% - 9px)/4)!important;
        gap:3px!important;
    }
}


/* =========================================================
 * SERVICE SHOP STICKY CONTACT RIGHT FIX 2026-07-24
 * Thanh tab đã portal ra body nên không còn nằm trong .service-shop-clone.
 * Với 1–3 kênh liên hệ: giữ kích thước một ô của bộ 4 nút và neo cả cụm
 * về mép phải. Không tác động taxi_shop.
 * ========================================================= */
@media(min-width:1050.02px){
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="1"],
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="2"],
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="3"]{
        grid-template-columns:none!important;
        grid-auto-flow:column!important;
        grid-auto-columns:calc((100% - 21px)/4)!important;
        justify-content:end!important;
        justify-self:end!important;
        margin-left:auto!important;
        overflow:hidden!important;
    }
}

/* Laptop nhỏ/tablet ngang: Taxi thu mỗi nút sticky còn 40px. */
@media(min-width:768px) and (max-width:1050px){
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="1"],
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="2"],
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="3"]{
        grid-template-columns:none!important;
        grid-auto-flow:column!important;
        grid-auto-columns:40px!important;
        justify-content:end!important;
        justify-self:end!important;
        margin-left:auto!important;
        overflow:hidden!important;
    }
}

/* Mobile sticky có vùng liên hệ ở cột bên phải. Một nút sẽ nằm ở nửa phải;
   hai nút vẫn lấp đầy đúng vùng liên hệ và không trôi sang phía tab. */
@media(max-width:767.98px){
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="1"],
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="2"]{
        justify-content:end!important;
        justify-self:end!important;
        margin-left:auto!important;
    }
    html.has-service-shop-page body>.taxi-m06-nav.is-fixed-portal .taxi-m06-sticky-contact[data-contact-count="1"]{
        grid-auto-columns:calc((100% - 4px)/2)!important;
        overflow-x:hidden!important;
    }
}

/* =========================================================
 * SERVICE SHOP MOBILE CONTENT FULL WIDTH 2026-07-24
 * Khôi phục cơ chế mở rộng nội dung giống taxi_shop trên mobile:
 * - Giảm lề ngoài trái/phải của các khối nội dung từ 12px còn khoảng 4px.
 * - Giữ nguyên padding bên trong card để chữ và nút không sát mép.
 * - HTML/body tiếp tục khóa overflow ngang, không tạo thanh cuộn toàn trang.
 * ========================================================= */
@media(max-width:767.98px){
    /* Cho phép các khối con nới ra khỏi wrapper 8px như mẫu taxi_shop. */
    .service-shop-clone{
        overflow-x:visible!important;
    }

    /* Từ Tin đăng trở xuống: bám đúng độ rộng mobile của taxi_shop. */
    .service-shop-clone > .industry-template__affiliate,
    .service-shop-clone > .taxi-m06-listings,
    .service-shop-clone > .taxi-m06-routes,
    .service-shop-clone > .taxi-m06-service-coverage,
    .service-shop-clone > .taxi-m06-about,
    .service-shop-clone > .taxi-m06-bottom-grid{
        width:calc(100% + 16px)!important;
        max-width:none!important;
        margin-left:-8px!important;
        margin-right:-8px!important;
    }

    /* Khóa các khối mở rộng vẫn co đúng theo viewport, không sinh tràn do grid. */
    .service-shop-clone > .industry-template__affiliate,
    .service-shop-clone > .taxi-m06-listings,
    .service-shop-clone > .taxi-m06-routes,
    .service-shop-clone > .taxi-m06-service-coverage,
    .service-shop-clone > .taxi-m06-about,
    .service-shop-clone > .taxi-m06-bottom-grid,
    .service-shop-clone > .taxi-m06-service-coverage > *,
    .service-shop-clone > .taxi-m06-bottom-grid > *{
        min-width:0!important;
    }
}