/* =========================================================
   DATXE MOBILE UI - App style header + homepage mobile polish
   Scope: mobile only. Không đụng desktop, service/category/listing CSS riêng.
========================================================= */

@media (min-width: 992px) {
    .datxe-mobile-app-header { display: none !important; }
}

@media (max-width: 991.98px) {
    :root {
        --datxe-mobile-red: var(--header-wow-top-bg, #ef0808);
        --datxe-mobile-orange: var(--header-wow-sticky-button-bg, #f59e0b);
        --datxe-mobile-gap: 12px;
    }

    body.w11-menu-open { overflow: hidden; }

    /* Header B: logo trái + search giữa + icon phải */
    .header-wow,
    .header-mobile-search-box,
    .w11-mobile-cta-bar {
        display: none !important;
    }

    .datxe-mobile-app-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        width: 100% !important;
        background: var(--datxe-mobile-red) !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .16) !important;
    }

    .datxe-mobile-appbar {
        height: 56px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 36px 36px !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 7px 10px !important;
        box-sizing: border-box !important;
    }

    .datxe-mobile-app-logo {
        width: auto !important;
        max-width: 84px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        text-decoration: none !important;
    }

    .datxe-mobile-app-logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 82px !important;
        max-height: 40px !important;
        object-fit: contain !important;
        object-position: left center !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .datxe-mobile-app-search {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .datxe-mobile-app-search-inner {
        height: 36px !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) 34px !important;
        align-items: center !important;
        background: #fff !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06) !important;
    }

    .datxe-mobile-app-search-inner > i {
        color: #94a3b8 !important;
        font-size: 15px !important;
        text-align: center !important;
        line-height: 36px !important;
    }

    .datxe-mobile-app-search-inner input {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: #111827 !important;
        font-size: 13px !important;
        line-height: 36px !important;
        padding: 0 2px !important;
    }

    .datxe-mobile-app-search-inner input::placeholder {
        color: #94a3b8 !important;
        opacity: 1 !important;
    }

    .datxe-mobile-app-search-inner button {
        width: 34px !important;
        height: 36px !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--datxe-mobile-orange) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 22px !important;
    }

    .datxe-mobile-app-icon {
        width: 36px !important;
        height: 36px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.16) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        font-size: 21px !important;
        line-height: 1 !important;
        padding: 0 !important;
    }

    .datxe-mobile-app-icon:active {
        transform: scale(.96) !important;
    }

    /* Không để chữ Trang chủ / tên site cũ chen vào header mobile */
    .header-mobile-logo span,
    .datxe-mobile-app-logo span,
    .box-header-mobile-left span {
        display: none !important;
    }

    /* Mobile menu panel: giữ menu, không có bottom/floating button */
    .w11-mobile-panel {
        top: 0 !important;
        right: -360px !important;
        width: min(340px, 88vw) !important;
        height: 100vh !important;
        z-index: 10002 !important;
        padding: 18px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }

    body.w11-menu-open::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10001 !important;
        background: rgba(15,23,42,.36) !important;
    }

    .w11-menu-open .w11-mobile-panel {
        right: 0 !important;
    }

    /* Homepage mobile spacing đều giữa các khối chính */
    .datxe-home .datxe-province-strip,
    .datxe-home .datxe-service-strip,
    .datxe-home .datxe-categories,
    .datxe-home .datxe-vip,
    .datxe-home .datxe-latest-listings,
    .datxe-home .datxe-listings,
    .datxe-home .datxe-seo {
        margin-top: var(--datxe-mobile-gap) !important;
    }

    .datxe-home .datxe-province-strip:first-child,
    .datxe-home .datxe-banner-wrap:first-child,
    .datxe-home .datxe-home-wrapper:first-child {
        margin-top: 0 !important;
    }

    .datxe-home .datxe-service-strip,
    .datxe-home .datxe-categories,
    .datxe-home .datxe-vip,
    .datxe-home .datxe-latest-listings {
        padding-top: 8px !important;
        padding-bottom: 12px !important;
    }

    .datxe-home .datxe-title {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        min-height: 28px !important;
        line-height: 1.15 !important;
    }

    /* Latest listings mobile: giá nổi bật, bỏ đường xám, đẩy giá lên */
    .datxe-latest-listings .v11-card-body {
        padding: 7px 7px 8px !important;
    }

    .datxe-latest-listings .v11-card-title {
        margin-bottom: 4px !important;
    }

    .datxe-latest-listings .v11-card-title a {
        min-height: 34px !important;
        font-size: 13px !important;
        line-height: 17px !important;
    }

    .datxe-latest-listings .v11-card-bottom {
        border-top: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .datxe-latest-listings .v11-card-price {
        border-top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .datxe-latest-listings .v11-card-price strong {
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 900 !important;
        color: #ed2028 !important;
        letter-spacing: -.1px !important;
    }

    .datxe-latest-listings .v11-card-price small,
    .datxe-latest-listings .v11-card-actions {
        display: none !important;
    }

    .w11-pro-main {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 575px) {
    .datxe-mobile-appbar {
        grid-template-columns: auto minmax(0, 1fr) 34px 34px !important;
        gap: 6px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .datxe-mobile-app-logo {
        max-width: 74px !important;
    }

    .datxe-mobile-app-logo img {
        max-width: 72px !important;
        max-height: 38px !important;
    }

    .datxe-mobile-app-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        font-size: 20px !important;
    }

    .datxe-mobile-app-search-inner {
        height: 35px !important;
        grid-template-columns: 30px minmax(0, 1fr) 32px !important;
    }

    .datxe-mobile-app-search-inner input {
        height: 35px !important;
        line-height: 35px !important;
        font-size: 12.5px !important;
    }

    .datxe-mobile-app-search-inner button {
        width: 32px !important;
        height: 35px !important;
    }
}