.mxSv__desktopView {
    display: block;
}

.mxSv__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxSv__desktopView {
        display: none !important;
    }

    .mxSv__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════════
                                           DESKTOP CSS
                                        ════════════════════════════════════════════ */
.sv-page-header {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 0;
}

.sv-page-header h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

.sv-page-header p {
    color: rgba(255, 255, 255, .75);
    margin: 6px 0 0;
    font-size: 14px;
}

.sv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding: 36px 0;
}

.sv-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s, transform .25s;
    text-decoration: none;
    color: inherit;
}

.sv-card:hover {
    box-shadow: 0 8px 32px rgba(21, 101, 192, .16);
    transform: translateY(-3px);
}

.sv-card__imgWrap {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: #e8f2fd;
}

.sv-card__imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
    display: block;
}

.sv-card:hover .sv-card__imgWrap img {
    transform: scale(1.05);
}

.sv-card__iconPlaceholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-card__iconPlaceholder i {
    font-size: 72px;
    color: #1976d2;
    opacity: .35;
}

.sv-card__orderBadge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #1976d2;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-card__body {
    padding: 18px 18px 10px;
    flex: 1;
}

.sv-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.sv-card__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.sv-card__icon i {
    font-size: 22px;
    color: #1976d2;
}

.sv-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    line-height: 1.3;
}

.sv-card__desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sv-card__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 18px 16px;
}

.sv-card__readBtn {
    background: #1976d2;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 20px;
    text-decoration: none;
    transition: background .2s;
    letter-spacing: .3px;
}

.sv-card__readBtn:hover {
    background: #0d47a1;
    color: #fff;
}

.sv-empty {
    text-align: center;
    padding: 80px 20px;
    color: #94a3b8;
}

.sv-empty .material-icons {
    font-size: 72px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 16px;
}

.sv-empty h3 {
    color: #475569;
    margin: 0 0 8px;
}

.sv-empty p {
    font-size: 14px;
    margin: 0;
}

/* ════════════════════════════════════════════
                                           MOBILE CSS
                                        ════════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxSv {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxSv__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 58px;
        position: relative;
        overflow: hidden;
    }

    .mxSv__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxSv__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxSv__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxSv__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxSv__heroTitle {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.25;
    }

    .mxSv__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* Floating count card */
    .mxSv__countCard {
        background: #fff;
        border-radius: 18px;
        margin: -28px 12px 0;
        padding: 12px 16px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .14);
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mxSv__countNum {
        font-size: 22px;
        font-weight: 900;
        color: #1565c0;
    }

    .mxSv__countText {
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
    }

    .mxSv__countIcon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxSv__countIcon i {
        color: #1976d2;
        font-size: 22px;
    }

    /* Section label */
    .mxSv__secLabel {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 18px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxSv__secLabel::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* Cards */
    .mxSv__cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxSv__card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSv__card:active {
        transform: scale(.99);
    }

    .mxSv__imgWrap {
        position: relative;
        height: 185px;
        overflow: hidden;
        background: #e8f2fd;
    }

    .mxSv__imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxSv__imgIcon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxSv__imgIcon i {
        font-size: 70px;
        color: #1976d2;
        opacity: .3;
    }

    .mxSv__numBadge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #1976d2;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxSv__cardBody {
        padding: 14px 14px 0;
        flex: 1;
    }

    .mxSv__cardIcon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }

    .mxSv__cardIcon img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .mxSv__cardIcon i {
        font-size: 19px;
        color: #1976d2;
    }

    .mxSv__cardTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 7px;
        line-height: 1.3;
    }

    .mxSv__cardDesc {
        font-size: 12.5px;
        color: #64748b;
        line-height: 1.55;
        margin: 0 0 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxSv__metaRow {
        display: flex;
        gap: 12px;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
        padding: 8px 0;
        border-top: 1px solid #f1f5f9;
        flex-wrap: wrap;
    }

    .mxSv__metaItem {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .mxSv__metaItem i {
        font-size: 13px;
    }

    .mxSv__cardFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px 14px;
    }

    .mxSv__readBtn {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11.5px;
        font-weight: 800;
        padding: 7px 16px;
        border-radius: 20px;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
        -webkit-tap-highlight-color: transparent;
    }

    .mxSv__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxSv__empty i {
        font-size: 52px;
        display: block;
        margin-bottom: 12px;
        color: #cbd5e1;
    }

    .mxSv__empty h3 {
        font-size: 16px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxSv__empty p {
        font-size: 13px;
        margin: 0;
    }

}


.mxSvS__desktopView {
    display: block;
}

.mxSvS__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxSvS__desktopView {
        display: none !important;
    }

    .mxSvS__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════════
                                       DESKTOP CSS — Single Service
                                    ════════════════════════════════════════════ */
.svs-hero {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.svs-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.svs-hero::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -30px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.svs-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.svs-hero h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

.svs-hero p {
    color: rgba(255, 255, 255, .75);
    margin: 6px 0 0;
    font-size: 14px;
}

.svs-breadcrumb {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.svs-breadcrumb a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.svs-breadcrumb a:hover {
    color: #fff;
}

.svs-breadcrumb i {
    font-size: 14px;
}

.svs-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    padding: 36px 0;
    align-items: start;
}

/* Main content */
.svs-main {}

.svs-cover {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    margin-bottom: 24px;
    background: #e8f2fd;
}

.svs-cover-placeholder {
    width: 100%;
    height: 280px;
    border-radius: 16px;
    background: #e8f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.svs-cover-placeholder i {
    font-size: 90px;
    color: #1976d2;
    opacity: .3;
}

.svs-iconRow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.svs-iconBox {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: #eff6ff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svs-iconBox img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.svs-iconBox i {
    font-size: 28px;
    color: #1976d2;
}

.svs-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
}

.svs-short {
    font-size: 15px;
    color: #475569;
    line-height: 1.7;
    margin: 0 0 24px;
    padding: 16px;
    background: #eff6ff;
    border-radius: 12px;
    border-left: 4px solid #1976d2;
}

.svs-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
}

.svs-desc h1,
.svs-desc h2,
.svs-desc h3 {
    color: #0f172a;
    margin: 24px 0 10px;
}

.svs-desc p {
    margin: 0 0 14px;
}

.svs-desc ul,
.svs-desc ol {
    padding-left: 20px;
    margin: 0 0 14px;
}

.svs-desc li {
    margin-bottom: 6px;
}

.svs-desc img {
    max-width: 100%;
    border-radius: 10px;
}

.svs-cta {
    margin-top: 32px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.svs-cta__text h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.svs-cta__text p {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    margin: 0;
}

.svs-cta__btn {
    flex-shrink: 0;
    background: #fff;
    color: #1565c0;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    transition: transform .15s;
}

.svs-cta__btn:hover {
    transform: scale(1.03);
    color: #1565c0;
}

/* Sidebar */
.svs-sidebar {}

.svs-sidebar__card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
    margin-bottom: 20px;
}

.svs-sidebar__head {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.svs-sidebar__head i {
    font-size: 18px;
    color: #1976d2;
}

.svs-otherList {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.svs-otherItem {
    border-bottom: 1px solid #f8fafc;
}

.svs-otherItem:last-child {
    border-bottom: none;
}

.svs-otherLink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}

.svs-otherLink:hover {
    background: #f8fafc;
}

.svs-otherLink__icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svs-otherLink__icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.svs-otherLink__icon i {
    font-size: 18px;
    color: #1976d2;
}

.svs-otherLink__text {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
}

.svs-otherLink__arrow {
    margin-left: auto;
    color: #94a3b8;
}

.svs-otherLink__arrow i {
    font-size: 18px;
}

.svs-otherLink--active {
    background: #eff6ff !important;
}

.svs-otherLink--active .svs-otherLink__text {
    color: #1565c0;
}

/* ════════════════════════════════════════════
                                       MOBILE CSS — Single Service
                                    ════════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxSvS {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxSvS__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 58px;
        position: relative;
        overflow: hidden;
    }

    .mxSvS__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxSvS__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxSvS__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxSvS__heroBack {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: rgba(255, 255, 255, .75);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 10px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSvS__heroBack i {
        font-size: 15px;
    }

    .mxSvS__heroBack:active {
        color: #fff;
    }

    .mxSvS__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxSvS__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0;
        line-height: 1.25;
    }

    /* Floating card */
    .mxSvS__floatCard {
        background: #fff;
        border-radius: 20px;
        margin: -30px 12px 0;
        padding: 16px;
        box-shadow: 0 8px 28px rgba(21, 101, 192, .15);
        position: relative;
        z-index: 10;
    }

    .mxSvS__iconRow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mxSvS__iconBox {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mxSvS__iconBox img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    .mxSvS__iconBox i {
        font-size: 24px;
        color: #1976d2;
    }

    .mxSvS__floatTitle {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
        line-height: 1.25;
    }

    .mxSvS__shortDesc {
        font-size: 13px;
        color: #475569;
        line-height: 1.65;
        padding: 12px;
        background: #f8fafd;
        border-radius: 10px;
        border-left: 3px solid #1976d2;
        margin: 0;
    }

    /* Cover image */
    .mxSvS__sec {
        padding: 16px 12px 0;
    }

    .mxSvS__cover {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 16px;
        display: block;
    }

    .mxSvS__coverPlaceholder {
        width: 100%;
        height: 170px;
        border-radius: 16px;
        background: #e8f2fd;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxSvS__coverPlaceholder i {
        font-size: 70px;
        color: #1976d2;
        opacity: .3;
    }

    /* Content */
    .mxSvS__secTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 12px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mxSvS__secTitle i {
        font-size: 18px;
        color: #1976d2;
    }

    .mxSvS__descBox {
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        font-size: 13.5px;
        color: #475569;
        line-height: 1.8;
    }

    .mxSvS__descBox h1,
    .mxSvS__descBox h2,
    .mxSvS__descBox h3 {
        color: #0f172a;
        font-size: 15px;
        margin: 18px 0 8px;
    }

    .mxSvS__descBox p {
        margin: 0 0 12px;
    }

    .mxSvS__descBox ul,
    .mxSvS__descBox ol {
        padding-left: 18px;
        margin: 0 0 12px;
    }

    .mxSvS__descBox li {
        margin-bottom: 5px;
    }

    .mxSvS__descBox img {
        max-width: 100%;
        border-radius: 10px;
    }

    /* CTA */
    .mxSvS__cta {
        margin: 16px 12px 0;
        border-radius: 18px;
        overflow: hidden;
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 60%, #1976d2 100%);
        padding: 20px 16px;
        position: relative;
    }

    .mxSvS__cta::before {
        content: '';
        position: absolute;
        top: -20px;
        right: -15px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxSvS__ctaInner {
        position: relative;
        z-index: 1;
    }

    .mxSvS__ctaTitle {
        font-size: 16px;
        font-weight: 800;
        color: #fff;
        margin: 0 0 6px;
    }

    .mxSvS__ctaText {
        font-size: 12px;
        color: rgba(255, 255, 255, .8);
        margin: 0 0 14px;
        line-height: 1.6;
    }

    .mxSvS__ctaBtn {
        display: inline-block;
        padding: 10px 22px;
        border-radius: 10px;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    }

    .mxSvS__ctaBtn:active {
        transform: scale(.97);
    }

    /* Other services */
    .mxSvS__otherLabel {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 18px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxSvS__otherLabel::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    .mxSvS__otherCards {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .mxSvS__otherCards::-webkit-scrollbar {
        display: none;
    }

    .mxSvS__otherCard {
        flex-shrink: 0;
        width: 150px;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
        text-decoration: none;
        color: inherit;
        display: block;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSvS__otherCard:active {
        transform: scale(.97);
    }

    .mxSvS__otherCard__img {
        height: 90px;
        overflow: hidden;
        background: #e8f2fd;
    }

    .mxSvS__otherCard__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxSvS__otherCard__placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxSvS__otherCard__placeholder i {
        font-size: 36px;
        color: #1976d2;
        opacity: .3;
    }

    .mxSvS__otherCard__body {
        padding: 10px 10px 12px;
    }

    .mxSvS__otherCard__title {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxSvS__otherCard__link {
        font-size: 10.5px;
        color: #1976d2;
        font-weight: 700;
    }

}

/* end @media */

/* ════════════════════════════════════════
                               SHOW / HIDE
                            ════════════════════════════════════════ */
.mxPt__desktop {
    display: block;
}

.mxPt__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxPt__desktop {
        display: none !important;
    }

    .mxPt__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════
                               DESKTOP — Price Trends Index
                            ════════════════════════════════════════ */
.pt-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 40px 0 50px;
    position: relative;
    overflow: hidden;
}

.pt-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.pt-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.pt-hero__inner {
    position: relative;
    z-index: 1;
}

.pt-hero__label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin: 0 0 8px;
}

.pt-hero__title {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}

.pt-hero__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
    font-weight: 500;
}

.pt-hero__date {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Stat bar */
.pt-statbar {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(21, 101, 192, .12);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: -28px;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.pt-statbar__item {
    padding: 18px 20px;
    border-right: 1px solid #f1f5f9;
    text-align: center;
}

.pt-statbar__item:last-child {
    border-right: none;
}

.pt-statbar__num {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1565c0;
    line-height: 1;
}

.pt-statbar__lbl {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

/* Section title */
.pt-secTitle {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pt-secTitle::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0, transparent);
}

.pt-secTitle i {
    font-size: 22px;
    color: #1976d2;
}

/* City Grid */
.pt-cityGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.pt-cityCard {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: all .2s;
    border: 1.5px solid transparent;
}

.pt-cityCard:hover {
    box-shadow: 0 6px 24px rgba(21, 101, 192, .15);
    border-color: #bfdbfe;
    transform: translateY(-2px);
}

.pt-cityCard__avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #1976d2;
    flex-shrink: 0;
}

.pt-cityCard__name {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
}

.pt-cityCard__price {
    font-size: 13px;
    font-weight: 700;
    color: #1565c0;
    margin: 0 0 3px;
}

.pt-cityCard__change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.pt-cityCard__change--up {
    background: #f0fdf4;
    color: #16a34a;
}

.pt-cityCard__change--down {
    background: #fef2f2;
    color: #ef4444;
}

.pt-cityCard__change--flat {
    background: #f8fafc;
    color: #64748b;
}

.pt-cityCard__change i {
    font-size: 13px;
}

.pt-cityCard__arrow {
    margin-left: auto;
    color: #cbd5e1;
}

.pt-cityCard__arrow i {
    font-size: 20px;
}

/* Top appreciated table */
.pt-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
}

.pt-table thead th {
    background: #eff6ff;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 800;
    color: #1565c0;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    border-bottom: 2px solid #dbeafe;
}

.pt-table tbody td {
    padding: 13px 16px;
    font-size: 13.5px;
    color: #334155;
    border-bottom: 1px solid #f8fafc;
    font-weight: 500;
}

.pt-table tbody tr:last-child td {
    border-bottom: none;
}

.pt-table tbody tr:hover td {
    background: #f8fafc;
}

.pt-table__rank {
    font-size: 13px;
    font-weight: 800;
    color: #94a3b8;
}

.pt-table__city {
    font-weight: 700;
    color: #0f172a;
}

.pt-table__price {
    font-weight: 800;
    color: #1565c0;
}

.pt-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.pt-badge--up {
    background: #f0fdf4;
    color: #16a34a;
}

.pt-badge--down {
    background: #fef2f2;
    color: #ef4444;
}

.pt-badge--flat {
    background: #f8fafc;
    color: #64748b;
}

.pt-badge i {
    font-size: 13px;
}

/* Affordable chips */
.pt-affordGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pt-affordCard {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    text-decoration: none;
    color: inherit;
    transition: all .2s;
}

.pt-affordCard:hover {
    border-color: #bfdbfe;
    box-shadow: 0 4px 16px rgba(21, 101, 192, .12);
}

.pt-affordCard__city {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}

.pt-affordCard__price {
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
    margin: 0;
}

/* ════════════════════════════════════════
                               MOBILE — Price Trends Index
                            ════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxPt {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxPt__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 60px;
        position: relative;
        overflow: hidden;
    }

    .mxPt__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxPt__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxPt__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxPt__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxPt__heroTitle {
        font-size: 1.2rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.2;
    }

    .mxPt__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        font-weight: 500;
        margin: 0;
    }

    .mxPt__heroDate {
        display: inline-block;
        margin-top: 10px;
        padding: 4px 12px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .15);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }

    /* Floating stat card */
    .mxPt__statCard {
        background: #fff;
        border-radius: 18px;
        margin: -28px 12px 0;
        padding: 14px 12px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .15);
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .mxPt__statItem {
        text-align: center;
        padding: 6px 4px;
        border-right: 1px solid #f1f5f9;
    }

    .mxPt__statItem:last-child {
        border-right: none;
    }

    .mxPt__statNum {
        font-size: 18px;
        font-weight: 900;
        color: #1565c0;
        line-height: 1;
    }

    .mxPt__statLbl {
        font-size: 10px;
        color: #64748b;
        font-weight: 500;
        margin-top: 3px;
    }

    /* Section label */
    .mxPt__secLabel {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 18px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxPt__secLabel i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxPt__secLabel::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* City Cards */
    .mxPt__cityCards {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 12px;
    }

    .mxPt__cityCard {
        background: #fff;
        border-radius: 16px;
        padding: 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPt__cityCard:active {
        transform: scale(.99);
        background: #f8fafc;
    }

    .mxPt__cityAvatar {
        width: 44px;
        height: 44px;
        border-radius: 11px;
        background: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 900;
        color: #1976d2;
        flex-shrink: 0;
    }

    .mxPt__cityName {
        font-size: 14.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 2px;
    }

    .mxPt__cityPrice {
        font-size: 12.5px;
        font-weight: 700;
        color: #1565c0;
        margin: 0 0 4px;
    }

    .mxPt__cityBadge {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 6px;
    }

    .mxPt__cityBadge--up {
        background: #f0fdf4;
        color: #16a34a;
    }

    .mxPt__cityBadge--down {
        background: #fef2f2;
        color: #ef4444;
    }

    .mxPt__cityBadge--flat {
        background: #f8fafc;
        color: #64748b;
    }

    .mxPt__cityBadge i {
        font-size: 12px;
    }

    .mxPt__cityArrow {
        margin-left: auto;
        color: #cbd5e1;
    }

    .mxPt__cityArrow i {
        font-size: 20px;
    }

    /* Top Appreciated scroll */
    .mxPt__topScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .mxPt__topScroll::-webkit-scrollbar {
        display: none;
    }

    .mxPt__topCard {
        flex-shrink: 0;
        width: 160px;
        background: #fff;
        border-radius: 14px;
        padding: 14px 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPt__topCard:active {
        transform: scale(.97);
    }

    .mxPt__topRank {
        font-size: 11px;
        font-weight: 800;
        color: #94a3b8;
        margin: 0 0 6px;
    }

    .mxPt__topCity {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
    }

    .mxPt__topPrice {
        font-size: 12px;
        font-weight: 700;
        color: #1565c0;
        margin: 0 0 6px;
    }

    .mxPt__topBadge {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        font-weight: 800;
        padding: 3px 8px;
        border-radius: 6px;
    }

    .mxPt__topBadge--up {
        background: #f0fdf4;
        color: #16a34a;
    }

    .mxPt__topBadge--down {
        background: #fef2f2;
        color: #ef4444;
    }

    .mxPt__topBadge i {
        font-size: 12px;
    }

    /* Affordable scroll */
    .mxPt__affordScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .mxPt__affordScroll::-webkit-scrollbar {
        display: none;
    }

    .mxPt__affordCard {
        flex-shrink: 0;
        width: 150px;
        background: #fff;
        border-radius: 14px;
        padding: 14px 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPt__affordCard:active {
        transform: scale(.97);
    }

    .mxPt__affordCity {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
    }

    .mxPt__affordPrice {
        font-size: 13px;
        font-weight: 800;
        color: #16a34a;
        margin: 0;
    }

}

/* end @media */

/* ════════════════════════════════════════
       SHOW / HIDE
    ════════════════════════════════════════ */
.mxPtC__desktop {
    display: block;
}

.mxPtC__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxPtC__desktop {
        display: none !important;
    }

    .mxPtC__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════
       DESKTOP — City Detail
    ════════════════════════════════════════ */
.ptc-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 36px 0 50px;
    position: relative;
    overflow: hidden;
}

.ptc-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.ptc-hero::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.ptc-hero__inner {
    position: relative;
    z-index: 1;
}

.ptc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ptc-breadcrumb a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.ptc-breadcrumb a:hover {
    color: #fff;
}

.ptc-breadcrumb i {
    font-size: 14px;
}

.ptc-hero__title {
    font-size: 1.9rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}

.ptc-hero__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
    font-weight: 500;
}

/* Stat bar */
.ptc-statbar {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(21, 101, 192, .12);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: -28px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.ptc-statbar__item {
    padding: 16px 18px;
    border-right: 1px solid #f1f5f9;
    text-align: center;
}

.ptc-statbar__item:last-child {
    border-right: none;
}

.ptc-statbar__num {
    font-size: 1.3rem;
    font-weight: 900;
    color: #1565c0;
    line-height: 1;
}

.ptc-statbar__lbl {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

.ptc-statbar__num--up {
    color: #16a34a;
}

.ptc-statbar__num--down {
    color: #ef4444;
}

/* Layout */
.ptc-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    padding: 36px 0;
    align-items: start;
}

/* Section title */
.ptc-secTitle {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ptc-secTitle::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0, transparent);
}

.ptc-secTitle i {
    font-size: 20px;
    color: #1976d2;
}

/* Type cards */
.ptc-typeGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.ptc-typeCard {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    border-top: 3px solid #1976d2;
}

.ptc-typeCard__type {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 8px;
}

.ptc-typeCard__price {
    font-size: 1.2rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 4px;
}

.ptc-typeCard__unit {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 8px;
}

.ptc-typeCard__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ptc-typeBadge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.ptc-typeBadge--up {
    background: #f0fdf4;
    color: #16a34a;
}

.ptc-typeBadge--down {
    background: #fef2f2;
    color: #ef4444;
}

.ptc-typeBadge--flat {
    background: #f8fafc;
    color: #64748b;
}

.ptc-typeBadge i {
    font-size: 12px;
}

/* Table */
.ptc-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    margin-bottom: 28px;
}

.ptc-table thead th {
    background: #eff6ff;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #1565c0;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-align: left;
    border-bottom: 2px solid #dbeafe;
    white-space: nowrap;
}

.ptc-table tbody td {
    padding: 12px 14px;
    font-size: 13.5px;
    color: #334155;
    border-bottom: 1px solid #f8fafc;
    font-weight: 500;
}

.ptc-table tbody tr:last-child td {
    border-bottom: none;
}

.ptc-table tbody tr:hover td {
    background: #f8fafc;
}

.ptc-table__area {
    font-weight: 700;
    color: #0f172a;
}

.ptc-table__price {
    font-weight: 800;
    color: #1565c0;
}

.pt-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}

.pt-badge--up {
    background: #f0fdf4;
    color: #16a34a;
}

.pt-badge--down {
    background: #fef2f2;
    color: #ef4444;
}

.pt-badge--flat {
    background: #f8fafc;
    color: #64748b;
}

.pt-badge i {
    font-size: 12px;
}

/* Analysis box */
.ptc-analysisBox {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
    border-left: 4px solid #1976d2;
    margin-bottom: 28px;
}

/* Sidebar */
.ptc-sideCard {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    margin-bottom: 18px;
}

.ptc-sideHead {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ptc-sideHead i {
    font-size: 16px;
    color: #1976d2;
}

.ptc-sideList {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.ptc-sideItem {
    border-bottom: 1px solid #f8fafc;
}

.ptc-sideItem:last-child {
    border-bottom: none;
}

.ptc-sideLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    text-decoration: none;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
}

.ptc-sideLink:hover {
    background: #f8fafc;
    color: #1976d2;
}

.ptc-sideLink__price {
    font-size: 12px;
    font-weight: 700;
    color: #1565c0;
}

.ptc-sideLink__badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 5px;
}

.ptc-sideLink__badge--up {
    background: #f0fdf4;
    color: #16a34a;
}

.ptc-sideLink__badge--down {
    background: #fef2f2;
    color: #ef4444;
}

/* ════════════════════════════════════════
       MOBILE — City Detail
    ════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxPtC {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxPtC__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 60px;
        position: relative;
        overflow: hidden;
    }

    .mxPtC__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxPtC__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxPtC__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxPtC__heroBack {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: rgba(255, 255, 255, .75);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 10px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPtC__heroBack i {
        font-size: 15px;
    }

    .mxPtC__heroBack:active {
        color: #fff;
    }

    .mxPtC__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .65);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxPtC__heroTitle {
        font-size: 1.15rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.2;
    }

    .mxPtC__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        font-weight: 500;
        margin: 0;
    }

    /* Stat strip */
    .mxPtC__statStrip {
        background: #fff;
        border-radius: 18px;
        margin: -28px 12px 0;
        padding: 12px 8px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .15);
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .mxPtC__statItem {
        text-align: center;
        border-right: 1px solid #f1f5f9;
        padding: 6px 2px;
    }

    .mxPtC__statItem:last-child {
        border-right: none;
    }

    .mxPtC__statNum {
        font-size: 14px;
        font-weight: 900;
        color: #1565c0;
        line-height: 1;
    }

    .mxPtC__statNum--up {
        color: #16a34a;
    }

    .mxPtC__statNum--down {
        color: #ef4444;
    }

    .mxPtC__statLbl {
        font-size: 9.5px;
        color: #64748b;
        font-weight: 600;
        margin-top: 3px;
    }

    /* Section label */
    .mxPtC__secLabel {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 18px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mxPtC__secLabel i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxPtC__secLabel::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* Type scroll */
    .mxPtC__typeScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .mxPtC__typeScroll::-webkit-scrollbar {
        display: none;
    }

    .mxPtC__typeCard {
        flex-shrink: 0;
        width: 160px;
        background: #fff;
        border-radius: 14px;
        padding: 14px 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        border-top: 3px solid #1976d2;
    }

    .mxPtC__typeLabel {
        font-size: 10px;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin: 0 0 7px;
    }

    .mxPtC__typePrice {
        font-size: 1.1rem;
        font-weight: 900;
        color: #0f172a;
        margin: 0 0 4px;
    }

    .mxPtC__typeUnit {
        font-size: 11px;
        color: #64748b;
        margin: 0 0 8px;
    }

    .mxPtC__typeBadges {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .mxPtC__typeBadge {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 10.5px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 6px;
    }

    .mxPtC__typeBadge--up {
        background: #f0fdf4;
        color: #16a34a;
    }

    .mxPtC__typeBadge--down {
        background: #fef2f2;
        color: #ef4444;
    }

    .mxPtC__typeBadge--flat {
        background: #f8fafc;
        color: #64748b;
    }

    .mxPtC__typeBadge i {
        font-size: 11px;
    }

    /* Chart */


    /* Area table (scrollable) */
    .mxPtC__tableWrap {
        margin: 0 12px;
        overflow-x: auto;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    }

    .mxPtC__table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        min-width: 460px;
    }

    .mxPtC__table thead th {
        background: #eff6ff;
        padding: 10px 12px;
        font-size: 11px;
        font-weight: 800;
        color: #1565c0;
        text-transform: uppercase;
        letter-spacing: .4px;
        text-align: left;
        border-bottom: 2px solid #dbeafe;
        white-space: nowrap;
    }

    .mxPtC__table tbody td {
        padding: 11px 12px;
        font-size: 13px;
        color: #334155;
        border-bottom: 1px solid #f8fafc;
        font-weight: 500;
        white-space: nowrap;
    }

    .mxPtC__table tbody tr:last-child td {
        border-bottom: none;
    }

    .mxPtC__table__area {
        font-weight: 700;
        color: #0f172a;
    }

    .mxPtC__table__price {
        font-weight: 800;
        color: #1565c0;
    }

    .mxPtC__badge {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 6px;
    }

    .mxPtC__badge--up {
        background: #f0fdf4;
        color: #16a34a;
    }

    .mxPtC__badge--down {
        background: #fef2f2;
        color: #ef4444;
    }

    .mxPtC__badge--flat {
        background: #f8fafc;
        color: #64748b;
    }

    .mxPtC__badge i {
        font-size: 11px;
    }

    /* Top areas scroll */
    .mxPtC__areaScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .mxPtC__areaScroll::-webkit-scrollbar {
        display: none;
    }

    .mxPtC__areaCard {
        flex-shrink: 0;
        width: 155px;
        background: #fff;
        border-radius: 14px;
        padding: 14px 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    }

    .mxPtC__areaName {
        font-size: 13.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
    }

    .mxPtC__areaPrice {
        font-size: 12px;
        font-weight: 700;
        color: #1565c0;
        margin: 0 0 6px;
    }

    .mxPtC__areaChange {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 6px;
    }

    .mxPtC__areaChange--up {
        background: #f0fdf4;
        color: #16a34a;
    }

    .mxPtC__areaChange--down {
        background: #fef2f2;
        color: #ef4444;
    }

    .mxPtC__areaChange i {
        font-size: 11px;
    }

    /* Analysis */
    .mxPtC__analysis {
        margin: 0 12px;
        background: #fff;
        border-radius: 14px;
        padding: 16px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        border-left: 3px solid #1976d2;
        font-size: 13px;
        color: #475569;
        line-height: 1.75;
    }

    /* Other cities */
    .mxPtC__otherScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .mxPtC__otherScroll::-webkit-scrollbar {
        display: none;
    }

    .mxPtC__otherCard {
        flex-shrink: 0;
        width: 140px;
        background: #fff;
        border-radius: 14px;
        padding: 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPtC__otherCard:active {
        transform: scale(.97);
    }

    .mxPtC__otherAvatar {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 800;
        color: #1976d2;
        margin-bottom: 8px;
    }

    .mxPtC__otherCity {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 3px;
    }

    .mxPtC__otherPrice {
        font-size: 11.5px;
        font-weight: 700;
        color: #1565c0;
        margin: 0;
    }

}

/* end @media */


/* ════════════════════════════════════════
                                       SHOW / HIDE
                                    ════════════════════════════════════════ */
.mxGd__desktop {
    display: block;
}

.mxGd__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxGd__desktop {
        display: none !important;
    }

    .mxGd__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════
                                       DESKTOP STYLES
                                    ════════════════════════════════════════ */
.gd-hero {
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 44px 20px 50px;
    position: relative;
    overflow: hidden;
}

.gd-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.gd-hero::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -30px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.gd-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
}

.gd-hero h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0 0 8px;
}

.gd-hero p {
    color: rgba(255, 255, 255, .75);
    margin: 0 0 22px;
    font-size: 14px;
}

/* Search bar desktop */
.gd-searchBar {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
    max-width: 520px;
    margin: 0 auto;
}

.gd-searchBar input {
    flex: 1;
    border: none;
    outline: none;
    padding: 13px 16px;
    font-size: 14px;
    color: #0f172a;
    background: transparent;
}

.gd-searchBar button {
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gd-searchBar button:hover {
    background: #1565c0;
}

.gd-searchBar button i {
    font-size: 18px;
}

/* Toolbar */
.gd-toolbar {
    background: #fff;
    border-radius: 16px;
    margin-top: -24px;
    position: relative;
    z-index: 10;
    padding: 14px 18px;
    box-shadow: 0 4px 20px rgba(21, 101, 192, .12);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gd-toolbar__label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.gd-filterScroll {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    scrollbar-width: none;
}

.gd-filterScroll::-webkit-scrollbar {
    display: none;
}

.gd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 50px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid transparent;
    transition: all .15s;
    text-decoration: none;
}

.gd-chip:hover {
    background: #dbeafe;
    color: #1976d2;
    border-color: #bfdbfe;
}

.gd-chip.active {
    background: #1976d2;
    color: #fff;
    border-color: #1565c0;
}

.gd-chip__count {
    background: rgba(255, 255, 255, .3);
    color: inherit;
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 700;
}

.gd-chip:not(.active) .gd-chip__count {
    background: #e2e8f0;
    color: #64748b;
}

/* Search result info bar */
.gd-resultInfo {
    font-size: 13px;
    color: #64748b;
    margin: 16px 0 4px;
    font-weight: 500;
}

.gd-resultInfo strong {
    color: #0f172a;
}

.gd-clearBtn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    margin-left: 10px;
}

.gd-clearBtn i {
    font-size: 14px;
}

/* Featured strip */
.gd-featuredRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.gd-featuredCard {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: all .2s;
    border: 2px solid transparent;
}

.gd-featuredCard:hover {
    box-shadow: 0 6px 24px rgba(21, 101, 192, .16);
    border-color: #bfdbfe;
    transform: translateY(-2px);
}

.gd-featuredCard__img {
    height: 160px;
    overflow: hidden;
}

.gd-featuredCard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.gd-featuredCard:hover .gd-featuredCard__img img {
    transform: scale(1.05);
}

.gd-featuredCard__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.gd-featuredCard__body {
    padding: 14px;
}

.gd-featuredCard__type {
    font-size: 10.5px;
    font-weight: 800;
    color: #1976d2;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 5px;
}

.gd-featuredCard__title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gd-featuredCard__meta {
    font-size: 11.5px;
    color: #94a3b8;
    display: flex;
    gap: 10px;
}

/* Guide grid */
.gd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.gd-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    text-decoration: none;
    color: inherit;
    transition: all .2s;
    display: flex;
    flex-direction: column;
}

.gd-card:hover {
    box-shadow: 0 6px 24px rgba(21, 101, 192, .14);
    transform: translateY(-2px);
}

.gd-card__img {
    height: 185px;
    overflow: hidden;
    position: relative;
}

.gd-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.gd-card:hover .gd-card__img img {
    transform: scale(1.05);
}

.gd-card__typeBadge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #1976d2;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.gd-card__body {
    padding: 14px 16px 0;
    flex: 1;
}

.gd-card__title {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 7px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gd-card__excerpt {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gd-card__metaRow {
    display: flex;
    gap: 12px;
    font-size: 11.5px;
    color: #94a3b8;
    padding: 8px 0;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.gd-card__metaItem {
    display: flex;
    align-items: center;
    gap: 3px;
}

.gd-card__metaItem i {
    font-size: 13px;
}

.gd-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 14px;
}

.gd-card__date {
    font-size: 11.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 3px;
}

.gd-card__date i {
    font-size: 13px;
}

.gd-readBtn {
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all .15s;
    box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
}

.gd-readBtn:hover {
    box-shadow: 0 4px 14px rgba(21, 101, 192, .35);
}

/* Empty */
.gd-empty {
    text-align: center;
    padding: 60px 20px;
}

.gd-empty i {
    font-size: 64px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 14px;
}

.gd-empty h3 {
    color: #475569;
    margin: 0 0 8px;
}

.gd-empty p {
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
}

/* ════════════════════════════════════════
                                       MOBILE STYLES
                                    ════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxGd {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxGd__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 20px;
        position: relative;
        overflow: hidden;
    }

    .mxGd__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxGd__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxGd__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxGd__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxGd__heroTitle {
        font-size: 1.2rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.25;
    }

    .mxGd__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0 0 14px;
    }

    /* Search bar mobile */
    .mxGd__searchBar {
        display: flex;
        background: rgba(255, 255, 255, .15);
        border-radius: 13px;
        border: 1.5px solid rgba(255, 255, 255, .25);
        overflow: hidden;
        backdrop-filter: blur(4px);
    }

    .mxGd__searchBar input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        padding: 11px 14px;
        font-size: 13px;
        color: #fff;
    }

    .mxGd__searchBar input::placeholder {
        color: rgba(255, 255, 255, .6);
    }

    .mxGd__searchBar button {
        background: rgba(255, 255, 255, .2);
        border: none;
        padding: 0 14px;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxGd__searchBar button i {
        font-size: 20px;
    }

    .mxGd__searchBar button:active {
        background: rgba(255, 255, 255, .3);
    }

    /* Floating chips card */
    .mxGd__chipsWrap {
        background: #fff;
        border-radius: 18px;
        margin: 12px 12px 0;
        padding: 10px 12px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .14);
        display: flex;
        align-items: center;
        gap: 8px;
        overflow: hidden;
    }

    .mxGd__chipsScroll {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxGd__chipsScroll::-webkit-scrollbar {
        display: none;
    }

    .mxGd__chip {
        flex-shrink: 0;
        padding: 7px 13px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 700;
        background: #f1f5f9;
        color: #64748b;
        cursor: pointer;
        border: 1.5px solid transparent;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
        transition: all .15s;
    }

    .mxGd__chip.active {
        background: #1976d2;
        color: #fff;
        border-color: #1565c0;
    }

    .mxGd__chip:active {
        transform: scale(.96);
    }

    .mxGd__chipCount {
        font-size: 10px;
        font-weight: 800;
        background: rgba(0, 0, 0, .08);
        border-radius: 10px;
        padding: 1px 5px;
        margin-left: 2px;
    }

    .mxGd__chip.active .mxGd__chipCount {
        background: rgba(255, 255, 255, .25);
    }

    /* Result info */
    .mxGd__resultInfo {
        font-size: 12px;
        color: #64748b;
        margin: 12px 12px 0;
        font-weight: 500;
    }

    .mxGd__resultInfo strong {
        color: #0f172a;
    }

    .mxGd__clearLink {
        color: #ef4444;
        font-weight: 700;
        font-size: 12px;
        text-decoration: none;
        margin-left: 6px;
    }

    /* Section label */
    .mxGd__secLabel {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxGd__secLabel i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxGd__secLabel::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* Featured scroll */
    .mxGd__featScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .mxGd__featScroll::-webkit-scrollbar {
        display: none;
    }

    .mxGd__featCard {
        flex-shrink: 0;
        width: 220px;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxGd__featCard:active {
        transform: scale(.98);
    }

    .mxGd__featImg {
        height: 130px;
        overflow: hidden;
        position: relative;
    }

    .mxGd__featImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mxGd__featBadge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #f59e0b;
        color: #fff;
        font-size: 9.5px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    .mxGd__featBody {
        padding: 11px 12px;
    }

    .mxGd__featType {
        font-size: 10px;
        font-weight: 800;
        color: #1976d2;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin: 0 0 4px;
    }

    .mxGd__featTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxGd__featMeta {
        font-size: 10.5px;
        color: #94a3b8;
        display: flex;
        gap: 8px;
    }

    /* Guide cards */
    .mxGd__cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxGd__card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        flex-direction: column;
    }

    .mxGd__card:active {
        transform: scale(.99);
    }

    .mxGd__cardImg {
        height: 185px;
        overflow: hidden;
        position: relative;
    }

    .mxGd__cardImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mxGd__cardTypeBadge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #1976d2;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .mxGd__cardBody {
        padding: 14px 14px 0;
        flex: 1;
    }

    .mxGd__cardTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 7px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxGd__cardExcerpt {
        font-size: 12.5px;
        color: #64748b;
        line-height: 1.55;
        margin: 0 0 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxGd__metaRow {
        display: flex;
        gap: 12px;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
        padding: 8px 0;
        border-top: 1px solid #f1f5f9;
        flex-wrap: wrap;
    }

    .mxGd__metaItem {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .mxGd__metaItem i {
        font-size: 13px;
    }

    .mxGd__cardFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px 14px;
    }

    .mxGd__cardDate {
        font-size: 11.5px;
        color: #94a3b8;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .mxGd__cardDate i {
        font-size: 13px;
    }

    .mxGd__readBtn {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11.5px;
        font-weight: 800;
        padding: 7px 16px;
        border-radius: 20px;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
    }

    /* Empty */
    .mxGd__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxGd__empty i {
        font-size: 52px;
        color: #cbd5e1;
        display: block;
        margin-bottom: 12px;
    }

    .mxGd__empty h3 {
        font-size: 15px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    /* Pagination */
    .mxGd__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxGd__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxGd__pageBtn--active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }

    .mxGd__pageBtn--disabled {
        opacity: .4;
        pointer-events: none;
    }

}

/* end @media */

/* ════════════════════════════════════════
           SHOW / HIDE
        ════════════════════════════════════════ */
.mxGdS__desktop {
    display: block;
}

.mxGdS__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxGdS__desktop {
        display: none !important;
    }

    .mxGdS__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════
           DESKTOP — Guide Detail
        ════════════════════════════════════════ */
.gds-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 36px 0 50px;
    position: relative;
    overflow: hidden;
}

.gds-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.gds-hero::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -40px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.gds-hero__inner {
    position: relative;
    z-index: 1;
}

.gds-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.gds-breadcrumb a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.gds-breadcrumb a:hover {
    color: #fff;
}

.gds-breadcrumb i {
    font-size: 14px;
}

.gds-hero__typeBadge {
    display: inline-block;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 10px;
}

.gds-hero__title {
    font-size: 1.9rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.2;
    max-width: 720px;
}

.gds-hero__meta {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
    flex-wrap: wrap;
}

.gds-hero__meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gds-hero__meta i {
    font-size: 15px;
}

/* Layout */
.gds-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    padding: 36px 0;
    align-items: start;
}

/* Cover image */
.gds-coverImg {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 28px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .12);
    display: block;
}

.gds-coverPlaceholder {
    width: 100%;
    height: 260px;
    border-radius: 16px;
    margin-bottom: 28px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gds-coverPlaceholder i {
    font-size: 80px;
    color: #93c5fd;
}

/* Content */
.gds-contentBox {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
    margin-bottom: 28px;
    font-size: 15px;
    color: #334155;
    line-height: 1.8;
}

.gds-contentBox h2,
.gds-contentBox h3 {
    color: #0f172a;
    font-weight: 800;
}

.gds-contentBox h2 {
    font-size: 1.3rem;
    margin: 24px 0 12px;
}

.gds-contentBox h3 {
    font-size: 1.1rem;
    margin: 20px 0 10px;
}

.gds-contentBox p {
    margin: 0 0 14px;
}

.gds-contentBox ul,
.gds-contentBox ol {
    padding-left: 22px;
    margin: 0 0 14px;
}

.gds-contentBox li {
    margin-bottom: 6px;
}

.gds-contentBox a {
    color: #1976d2;
    text-decoration: underline;
}

.gds-contentBox blockquote {
    border-left: 4px solid #1976d2;
    margin: 16px 0;
    padding: 12px 16px;
    background: #eff6ff;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #475569;
}

.gds-contentBox img {
    max-width: 100%;
    border-radius: 10px;
    margin: 10px 0;
}

/* Excerpt */
.gds-excerptBox {
    background: #eff6ff;
    border-radius: 14px;
    padding: 18px 20px;
    border-left: 4px solid #1976d2;
    font-size: 14.5px;
    color: #1565c0;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 24px;
    font-style: italic;
}

/* Section title */
.gds-secTitle {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gds-secTitle::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0, transparent);
}

.gds-secTitle i {
    font-size: 20px;
    color: #1976d2;
}

/* Related cards */
.gds-relatedGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.gds-relCard {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    text-decoration: none;
    color: inherit;
    transition: all .2s;
}

.gds-relCard:hover {
    box-shadow: 0 4px 16px rgba(21, 101, 192, .14);
    transform: translateY(-2px);
}

.gds-relCard__img {
    height: 120px;
    overflow: hidden;
    position: relative;
}

.gds-relCard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gds-relCard__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #1976d2;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

.gds-relCard__body {
    padding: 12px;
}

.gds-relCard__title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gds-relCard__meta {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    gap: 8px;
}

/* Sidebar */
.gds-sideCard {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    margin-bottom: 18px;
}

.gds-sideHead {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gds-sideHead i {
    font-size: 16px;
    color: #1976d2;
}

.gds-sideList {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.gds-sideItem {
    border-bottom: 1px solid #f8fafc;
}

.gds-sideItem:last-child {
    border-bottom: none;
}

.gds-sideLink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
}

.gds-sideLink:hover {
    background: #f8fafc;
    color: #1976d2;
}

.gds-sideLink i {
    font-size: 16px;
    color: #94a3b8;
}

.gds-sideLink__badge {
    margin-left: auto;
    background: #eff6ff;
    color: #1976d2;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
}

/* CTA box */
.gds-ctaBox {
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    border-radius: 16px;
    padding: 22px;
    color: #fff;
    margin-bottom: 18px;
}

.gds-ctaBox h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 8px;
}

.gds-ctaBox p {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 14px;
    line-height: 1.5;
}

.gds-ctaBtn {
    display: block;
    text-align: center;
    background: #fff;
    color: #1565c0;
    font-size: 13px;
    font-weight: 800;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .15s;
}

.gds-ctaBtn:hover {
    background: #eff6ff;
}

/* ════════════════════════════════════════
           MOBILE — Guide Detail
        ════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxGdS {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxGdS__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 60px;
        position: relative;
        overflow: hidden;
    }

    .mxGdS__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxGdS__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxGdS__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxGdS__heroBack {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: rgba(255, 255, 255, .75);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 10px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxGdS__heroBack i {
        font-size: 15px;
    }

    .mxGdS__heroBack:active {
        color: #fff;
    }

    .mxGdS__heroType {
        display: inline-block;
        background: rgba(255, 255, 255, .2);
        color: #fff;
        font-size: 10.5px;
        font-weight: 800;
        padding: 3px 11px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 8px;
    }

    .mxGdS__heroTitle {
        font-size: 1.1rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 10px;
        line-height: 1.25;
    }

    .mxGdS__heroMeta {
        display: flex;
        gap: 12px;
        font-size: 11.5px;
        color: rgba(255, 255, 255, .75);
        flex-wrap: wrap;
    }

    .mxGdS__heroMeta span {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .mxGdS__heroMeta i {
        font-size: 14px;
    }

    /* Floating card */
    .mxGdS__floatCard {
        background: #fff;
        border-radius: 20px;
        margin: -28px 12px 0;
        padding: 16px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .15);
        position: relative;
        z-index: 10;
    }

    .mxGdS__floatExcerpt {
        font-size: 13px;
        color: #1565c0;
        font-weight: 600;
        line-height: 1.65;
        font-style: italic;
        margin: 0;
    }

    /* Cover image */
    .mxGdS__cover {
        width: calc(100% - 24px);
        margin: 14px 12px 0;
        border-radius: 16px;
        display: block;
        max-height: 220px;
        object-fit: cover;
    }

    .mxGdS__coverPlaceholder {
        margin: 14px 12px 0;
        border-radius: 16px;
        height: 160px;
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxGdS__coverPlaceholder i {
        font-size: 64px;
        color: #93c5fd;
    }

    /* Section label */
    .mxGdS__secLabel {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 18px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mxGdS__secLabel i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxGdS__secLabel::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* Content box */
    .mxGdS__contentBox {
        margin: 0 12px;
        background: #fff;
        border-radius: 16px;
        padding: 18px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        font-size: 14px;
        color: #334155;
        line-height: 1.8;
    }

    .mxGdS__contentBox h2 {
        font-size: 1.1rem;
        font-weight: 800;
        color: #0f172a;
        margin: 20px 0 10px;
    }

    .mxGdS__contentBox h3 {
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 0 8px;
    }

    .mxGdS__contentBox p {
        margin: 0 0 12px;
    }

    .mxGdS__contentBox ul,
    .mxGdS__contentBox ol {
        padding-left: 18px;
        margin: 0 0 12px;
    }

    .mxGdS__contentBox li {
        margin-bottom: 5px;
    }

    .mxGdS__contentBox a {
        color: #1976d2;
    }

    .mxGdS__contentBox blockquote {
        border-left: 3px solid #1976d2;
        margin: 12px 0;
        padding: 10px 14px;
        background: #eff6ff;
        border-radius: 0 8px 8px 0;
        font-style: italic;
        color: #475569;
    }

    .mxGdS__contentBox img {
        max-width: 100%;
        border-radius: 8px;
        margin: 8px 0;
    }

    /* CTA */
    .mxGdS__cta {
        margin: 0 12px;
        background: linear-gradient(135deg, #0d47a1, #1976d2);
        border-radius: 16px;
        padding: 18px;
        color: #fff;
    }

    .mxGdS__cta h3 {
        font-size: .95rem;
        font-weight: 800;
        margin: 0 0 7px;
    }

    .mxGdS__cta p {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .8);
        margin: 0 0 12px;
        line-height: 1.5;
    }

    .mxGdS__ctaBtn {
        display: block;
        text-align: center;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        padding: 11px;
        border-radius: 11px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mxGdS__ctaBtn:active {
        background: #eff6ff;
    }

    /* Related scroll */
    .mxGdS__relScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }

    .mxGdS__relScroll::-webkit-scrollbar {
        display: none;
    }

    .mxGdS__relCard {
        flex-shrink: 0;
        width: 200px;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxGdS__relCard:active {
        transform: scale(.97);
    }

    .mxGdS__relImg {
        height: 110px;
        overflow: hidden;
        position: relative;
    }

    .mxGdS__relImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mxGdS__relBadge {
        position: absolute;
        top: 7px;
        left: 7px;
        background: #1976d2;
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    .mxGdS__relBody {
        padding: 11px 12px;
    }

    .mxGdS__relTitle {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxGdS__relMeta {
        font-size: 10.5px;
        color: #94a3b8;
    }

    /* Other types */
    .mxGdS__typeChips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding: 0 12px;
    }

    .mxGdS__typeChip {
        padding: 7px 14px;
        border-radius: 20px;
        background: #fff;
        border: 1.5px solid #e2e8f0;
        font-size: 12px;
        font-weight: 700;
        color: #475569;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 1px 6px rgba(15, 23, 42, .06);
    }

    .mxGdS__typeChip:active {
        background: #eff6ff;
        color: #1976d2;
        border-color: #bfdbfe;
    }

}

/* end @media */
/* ════════════════════════════════════════
                                           SHOW / HIDE
                                        ════════════════════════════════════════ */
.mxFq__desktop {
    display: block;
}

.mxFq__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxFq__desktop {
        display: none !important;
    }

    .mxFq__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════
                                           DESKTOP STYLES
                                        ════════════════════════════════════════ */
.fq-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 44px 0 54px;
    position: relative;
    overflow: hidden;
}

.fq-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.fq-hero::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -30px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.fq-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.fq-hero__label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0 0 8px;
}

.fq-hero h1 {
    font-size: 2.1rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}

.fq-hero__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 24px;
}

.fq-searchBar {
    display: flex;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .2);
    max-width: 580px;
    margin: 0 auto;
}

.fq-searchBar input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 18px;
    font-size: 14px;
    color: #0f172a;
}

.fq-searchBar input::placeholder {
    color: #94a3b8;
}

.fq-searchBar button {
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 0 24px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
}

.fq-searchBar button:hover {
    background: #1565c0;
}

.fq-searchBar button i {
    font-size: 20px;
}

.fq-searchBar__clear {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    padding: 0 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all .15s;
    text-decoration: none;
}

.fq-searchBar__clear:hover {
    background: #fee2e2;
    color: #ef4444;
}

.fq-searchBar__clear i {
    font-size: 16px;
}

.fq-toolbar {
    background: #fff;
    border-radius: 16px;
    margin-top: -26px;
    position: relative;
    z-index: 10;
    padding: 14px 18px;
    box-shadow: 0 4px 20px rgba(21, 101, 192, .12);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fq-toolbar__label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.fq-filterScroll {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
}

.fq-filterScroll::-webkit-scrollbar {
    display: none;
}

.fq-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 50px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid transparent;
    transition: all .15s;
    text-decoration: none;
}

.fq-chip:hover {
    background: #dbeafe;
    color: #1976d2;
    border-color: #bfdbfe;
}

.fq-chip.active {
    background: #1976d2;
    color: #fff;
    border-color: #1565c0;
}

.fq-chip__count {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 700;
}

.fq-chip:not(.active) .fq-chip__count {
    background: #e2e8f0;
    color: #64748b;
}

.fq-chip.active .fq-chip__count {
    background: rgba(255, 255, 255, .3);
}

.fq-resultInfo {
    font-size: 13px;
    color: #64748b;
    margin: 16px 0 4px;
}

.fq-resultInfo strong {
    color: #0f172a;
    font-weight: 800;
}

.fq-clearBtn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    margin-left: 10px;
}

.fq-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 28px;
    padding: 28px 0 40px;
    align-items: start;
}

.fq-section {
    margin-bottom: 28px;
}

.fq-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.fq-section__head i {
    font-size: 20px;
    color: #1976d2;
}

.fq-section__count {
    margin-left: auto;
    background: #eff6ff;
    color: #1565c0;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
}

.fq-item {
    background: #fff;
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    overflow: hidden;
    border: 1.5px solid transparent;
    transition: border-color .2s;
}

.fq-item.open {
    border-color: #bfdbfe;
}

.fq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    cursor: pointer;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.fq-item__q:hover {
    background: #f8fafc;
}

.fq-item__qText {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    flex: 1;
    line-height: 1.4;
}

.fq-item__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    background: #eff6ff;
    color: #1976d2;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, background .2s;
}

.fq-item.open .fq-item__icon {
    background: #1976d2;
    color: #fff;
    transform: rotate(45deg);
}

.fq-item__a {
    display: none;
    padding: 0 18px 16px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.75;
    border-top: 1px solid #f1f5f9;
}

.fq-item.open .fq-item__a {
    display: block;
    padding-top: 14px;
}

.fq-empty {
    text-align: center;
    padding: 60px 20px;
}

.fq-empty i {
    font-size: 64px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 14px;
}

.fq-empty h3 {
    color: #475569;
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.fq-empty p {
    color: #94a3b8;
    font-size: 13.5px;
}

.fq-sideCard {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    margin-bottom: 18px;
}

.fq-sideHead {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fq-sideHead i {
    font-size: 16px;
    color: #1976d2;
}

.fq-sideList {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.fq-sideItem {
    border-bottom: 1px solid #f8fafc;
}

.fq-sideItem:last-child {
    border-bottom: none;
}

.fq-sideLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    text-decoration: none;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
}

.fq-sideLink:hover {
    background: #f8fafc;
    color: #1976d2;
}

.fq-sideLink.active {
    background: #eff6ff;
    color: #1976d2;
    font-weight: 800;
}

.fq-sideLink__count {
    background: #eff6ff;
    color: #1565c0;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
}

.fq-sideLink.active .fq-sideLink__count {
    background: #1976d2;
    color: #fff;
}

.fq-ctaBox {
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    border-radius: 14px;
    padding: 20px;
    color: #fff;
}

.fq-ctaBox h3 {
    font-size: .95rem;
    font-weight: 800;
    margin: 0 0 7px;
}

.fq-ctaBox p {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 14px;
    line-height: 1.5;
}

.fq-ctaBtn {
    display: block;
    text-align: center;
    background: #fff;
    color: #1565c0;
    font-size: 13px;
    font-weight: 800;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
}

.fq-ctaBtn:hover {
    background: #eff6ff;
}

/* ════════════════════════════════════════
                                           MOBILE STYLES
                                        ════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxFq {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    .mxFq__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 20px;
        position: relative;
        overflow: hidden;
    }

    .mxFq__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxFq__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxFq__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxFq__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxFq__heroTitle {
        font-size: 1.2rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxFq__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        margin: 0 0 14px;
    }

    .mxFq__searchBar {
        display: flex;
        background: rgba(255, 255, 255, .15);
        border-radius: 13px;
        border: 1.5px solid rgba(255, 255, 255, .3);
        overflow: hidden;
    }

    .mxFq__searchBar input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        padding: 11px 14px;
        font-size: 13px;
        color: #fff;
    }

    .mxFq__searchBar input::placeholder {
        color: rgba(255, 255, 255, .6);
    }

    .mxFq__searchBar__btn {
        background: rgba(255, 255, 255, .2);
        border: none;
        padding: 0 14px;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxFq__searchBar__btn i {
        font-size: 20px;
    }

    .mxFq__searchBar__btn:active {
        background: rgba(255, 255, 255, .35);
    }

    .mxFq__searchBar__clear {
        background: rgba(255, 0, 0, .2);
        border: none;
        padding: 0 12px;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: transparent;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }

    .mxFq__chipsWrap {
        background: #fff;
        border-radius: 18px;
        margin: 12px 12px 0;
        padding: 10px 12px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .14);
        display: flex;
        align-items: center;
        gap: 8px;
        overflow: hidden;
    }

    .mxFq__chipsScroll {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxFq__chipsScroll::-webkit-scrollbar {
        display: none;
    }

    .mxFq__chip {
        flex-shrink: 0;
        padding: 7px 13px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 700;
        background: #f1f5f9;
        color: #64748b;
        border: 1.5px solid transparent;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
        transition: all .15s;
    }

    .mxFq__chip.active {
        background: #1976d2;
        color: #fff;
        border-color: #1565c0;
    }

    .mxFq__chip:active {
        transform: scale(.96);
    }

    .mxFq__chipCount {
        font-size: 10px;
        font-weight: 800;
        background: rgba(0, 0, 0, .08);
        border-radius: 10px;
        padding: 1px 5px;
        margin-left: 2px;
    }

    .mxFq__chip.active .mxFq__chipCount {
        background: rgba(255, 255, 255, .25);
    }

    .mxFq__resultInfo {
        font-size: 12px;
        color: #64748b;
        margin: 12px 12px 0;
    }

    .mxFq__resultInfo strong {
        color: #0f172a;
        font-weight: 800;
    }

    .mxFq__clearLink {
        color: #ef4444;
        font-weight: 700;
        font-size: 12px;
        text-decoration: none;
        margin-left: 6px;
    }

    .mxFq__secLabel {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 18px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxFq__secLabel i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxFq__secLabel::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    .mxFq__secCount {
        background: #eff6ff;
        color: #1565c0;
        font-size: 10.5px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 20px;
    }

    .mxFq__items {
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 0 12px;
    }

    .mxFq__item {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        overflow: hidden;
        border: 1.5px solid transparent;
        transition: border-color .2s;
    }

    .mxFq__item.open {
        border-color: #bfdbfe;
    }

    .mxFq__itemQ {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .mxFq__itemQ:active {
        background: #f8fafc;
    }

    .mxFq__itemQText {
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
        flex: 1;
        line-height: 1.4;
    }

    .mxFq__itemIcon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        flex-shrink: 0;
        background: #eff6ff;
        color: #1976d2;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .2s, background .2s;
    }

    .mxFq__item.open .mxFq__itemIcon {
        background: #1976d2;
        color: #fff;
        transform: rotate(45deg);
    }

    .mxFq__itemA {
        display: none;
        padding: 0 14px 14px;
        font-size: 13.5px;
        color: #475569;
        line-height: 1.75;
        border-top: 1px solid #f1f5f9;
    }

    .mxFq__item.open .mxFq__itemA {
        display: block;
        padding-top: 12px;
    }

    .mxFq__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxFq__empty i {
        font-size: 52px;
        color: #cbd5e1;
        display: block;
        margin-bottom: 12px;
    }

    .mxFq__empty h3 {
        font-size: 15px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

}

/* ══ SHOW/HIDE ══ */
.mxAb__desktop {
    display: block;
}

.mxAb__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxAb__desktop {
        display: none !important;
    }

    .mxAb__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══ DESKTOP ══ */
.ab-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 52px 0 60px;
    position: relative;
    overflow: hidden;
}

.ab-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.ab-hero::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -30px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.ab-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ab-hero__label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0 0 8px;
}

.ab-hero h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
}

.ab-hero__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

/* Stats bar */
.ab-stats {
    background: #fff;
    border-radius: 18px;
    margin-top: -32px;
    position: relative;
    z-index: 10;
    padding: 24px 28px;
    box-shadow: 0 8px 32px rgba(21, 101, 192, .14);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.ab-stat {
    text-align: center;
    padding: 8px 16px;
    border-right: 1px solid #f1f5f9;
}

.ab-stat:last-child {
    border-right: none;
}

.ab-stat__num {
    font-size: 2rem;
    font-weight: 900;
    color: #1565c0;
    line-height: 1;
}

.ab-stat__plus {
    font-size: 1.3rem;
    color: #1976d2;
}

.ab-stat__label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
}

/* Section */
.ab-sec {
    padding: 48px 0;
}

.ab-sec--alt {
    background: #f8fafd;
}

.ab-secTitle {
    font-size: 1.6rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 8px;
}

.ab-secSub {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 28px;
    line-height: 1.7;
}

/* Mission/Vision/Values grid */
.ab-mvv {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.ab-mvvCard {
    background: #fff;
    border-radius: 18px;
    padding: 28px 22px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .07);
    border-top: 4px solid #1976d2;
}

.ab-mvvCard__icon {
    font-size: 36px;
    color: #1976d2;
    margin-bottom: 12px;
}

.ab-mvvCard h3 {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
}

.ab-mvvCard p {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* Story section */
.ab-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.ab-story__img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(21, 101, 192, .12);
}

.ab-story__img img {
    width: 100%;
    display: block;
    height: 450px;
    object-fit: cover;
}

.ab-story__text p {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.85;
    margin: 0 0 16px;
}

/* CEO */
.ab-ceo {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    border-radius: 20px;
    padding: 40px;
    color: #fff;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: center;
}

.ab-ceo__img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.ab-ceo__quote {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .4);
    line-height: 1;
    margin-bottom: 12px;
}

.ab-ceo__text {
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 20px;
}

.ab-ceo__name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px;
}

.ab-ceo__role {
    font-size: 12px;
    color: rgba(255, 255, 255, .65);
}

/* ══ MOBILE ══ */
@media (max-width: 768px) {
    .mxAb {
        padding-bottom: 32px;
    }

    .mxAb__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 48px;
        position: relative;
        overflow: hidden;
    }

    .mxAb__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxAb__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxAb__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxAb__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxAb__heroTitle {
        font-size: 1.35rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxAb__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        margin: 0;
    }

    /* Stats card */
    .mxAb__statsCard {
        background: #fff;
        border-radius: 20px;
        margin: -28px 12px 0;
        padding: 16px;
        box-shadow: 0 8px 32px rgba(21, 101, 192, .15);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: #e2e8f0;
        position: relative;
        z-index: 10;
    }

    .mxAb__stat {
        background: #fff;
        padding: 14px 10px;
        text-align: center;
    }

    .mxAb__stat:first-child {
        border-radius: 16px 0 0 0;
    }

    .mxAb__stat:nth-child(2) {
        border-radius: 0 16px 0 0;
    }

    .mxAb__stat:nth-child(3) {
        border-radius: 0 0 0 16px;
    }

    .mxAb__stat:last-child {
        border-radius: 0 0 16px 0;
    }

    .mxAb__statNum {
        font-size: 1.6rem;
        font-weight: 900;
        color: #1565c0;
        line-height: 1;
    }

    .mxAb__statPlus {
        font-size: 1rem;
        color: #1976d2;
    }

    .mxAb__statLabel {
        font-size: 11px;
        color: #64748b;
        font-weight: 600;
        margin-top: 3px;
    }

    .mxAb__sec {
        padding: 20px 12px 0;
    }

    .mxAb__secTitle {
        font-size: 17px;
        font-weight: 900;
        color: #0f172a;
        margin: 0 0 6px;
    }

    .mxAb__secText {
        font-size: 13.5px;
        color: #475569;
        line-height: 1.75;
        margin: 0 0 16px;
    }

    /* Story image */
    .mxAb__storyImg {
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 16px;
    }

    .mxAb__storyImg img {
        width: 100%;
        display: block;
        height: 200px;
        object-fit: cover;
    }

    /* MVV cards */
    .mxAb__mvvCards {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mxAb__mvvCard {
        background: #fff;
        border-radius: 16px;
        padding: 18px 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        border-left: 4px solid #1976d2;
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }

    .mxAb__mvvCard i {
        font-size: 28px;
        color: #1976d2;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .mxAb__mvvCard h3 {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
    }

    .mxAb__mvvCard p {
        font-size: 12.5px;
        color: #475569;
        line-height: 1.65;
        margin: 0;
    }

    /* CEO card */
    .mxAb__ceoCard {
        background: linear-gradient(135deg, #0d47a1, #1976d2);
        border-radius: 20px;
        margin: 20px 12px 0;
        padding: 20px 16px;
        color: #fff;
    }

    .mxAb__ceoTop {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 14px;
    }

    .mxAb__ceoImg {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid rgba(255, 255, 255, .3);
        flex-shrink: 0;
    }

    .mxAb__ceoName {
        font-size: 15px;
        font-weight: 800;
        color: #fff;
        margin: 0 0 2px;
    }

    .mxAb__ceoRole {
        font-size: 11px;
        color: rgba(255, 255, 255, .7);
    }

    .mxAb__ceoText {
        font-size: 13px;
        color: rgba(255, 255, 255, .88);
        line-height: 1.75;
        margin: 0;
        font-style: italic;
    }

    /* Images row */
    .mxAb__imgsRow {
        display: flex;
        gap: 10px;
    }

    .mxAb__imgsRow img {
        flex: 1;
        border-radius: 14px;
        height: 240px;
        object-fit: cover;
    }
}

/* ══ SHOW/HIDE ══ */


/* ══ SHOW/HIDE ══ */
.mxCt__desktop {
    display: block;
}

.mxCt__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxCt__desktop {
        display: none !important;
    }

    .mxCt__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══ DESKTOP ══ */
.ct-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 52px 0 68px;
    position: relative;
    overflow: hidden;
}

.ct-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.ct-hero::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -30px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.ct-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ct-hero__label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0 0 8px;
}

.ct-hero h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
}

.ct-hero__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

/* Layout */
.ct-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    padding: 40px 0 60px;
    align-items: start;
    margin-top: -36px;
    position: relative;
    z-index: 10;
}

/* Info cards */
.ct-infoCards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-infoCard {
    background: #fff;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ct-infoCard__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(21, 101, 192, .3);
}

.ct-infoCard__icon i {
    font-size: 22px;
    color: #fff;
}

.ct-infoCard__label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 4px;
}

.ct-infoCard__val {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.5;
}

.ct-infoCard__val a {
    color: #1565c0;
    text-decoration: none;
}

/* Social */
.ct-socialRow {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ct-socialBtn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}

.ct-socialBtn:hover {
    background: #dbeafe;
    color: #1565c0;
}

.ct-socialBtn i {
    font-size: 18px;
}

/* Map */
.ct-map {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    margin-top: 16px;
}

.ct-map iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: none;
}

/* Form card */
.ct-formCard {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(21, 101, 192, .12);
    overflow: hidden;
}

.ct-formHead {
    padding: 22px 26px;
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    color: #fff;
}

.ct-formHead h3 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 2px;
}

.ct-formHead p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

.ct-formBody {
    padding: 24px 26px;
}

.ct-formGroup {
    margin-bottom: 16px;
}

.ct-formLabel {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 7px;
}

.ct-formInput {
    width: 100%;
    height: 48px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    color: #0f172a;
    background: #f8fafd;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}

.ct-formInput:focus {
    border-color: #1976d2;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .1);
}

.ct-formInput::placeholder {
    color: #cbd5e1;
}

.ct-formTextarea {
    height: 110px;
    padding: 12px 14px;
    resize: none;
}

.ct-formRow2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ct-formSubmit {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .6px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 24px rgba(21, 101, 192, .3);
    transition: transform .18s, box-shadow .18s;
    margin-top: 6px;
}

.ct-formSubmit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(21, 101, 192, .4);
}

.ct-formSubmit i {
    font-size: 20px;
}

/* Alert */
.ct-alert {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ct-alert--success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
}

.ct-alert--error {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
}

.ct-alert i {
    font-size: 18px;
}

/* ══ MOBILE ══ */
@media (max-width: 768px) {
    .mxCt {
        padding-bottom: 32px;
    }

    .mxCt__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 20px;
        position: relative;
        overflow: hidden;
    }

    .mxCt__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxCt__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxCt__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxCt__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxCt__heroTitle {
        font-size: 1.35rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxCt__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        margin: 0;
    }

    .mxCt__sec {
        padding: 16px 12px 0;
    }

    .mxCt__secTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 12px;
    }

    /* Info chips */
    .mxCt__infoCards {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mxCt__infoCard {
        background: #fff;
        border-radius: 16px;
        padding: 14px 16px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        display: flex;
        align-items: center;
        gap: 13px;
    }

    .mxCt__infoIcon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        flex-shrink: 0;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 10px rgba(21, 101, 192, .28);
    }

    .mxCt__infoIcon i {
        font-size: 20px;
        color: #fff;
    }

    .mxCt__infoLabel {
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin: 0 0 2px;
    }

    .mxCt__infoVal {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        line-height: 1.4;
    }

    .mxCt__infoVal a {
        color: #1565c0;
        text-decoration: none;
    }

    /* Social */
    .mxCt__socials {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 16px 12px 0;
    }

    .mxCt__socialBtn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 13px;
        border-radius: 10px;
        background: #fff;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 1px 6px rgba(15, 23, 42, .08);
        -webkit-tap-highlight-color: transparent;
    }

    .mxCt__socialBtn i {
        font-size: 16px;
    }

    .mxCt__socialBtn:active {
        background: #eff6ff;
        color: #1565c0;
    }

    /* Map */
    .mxCt__map {
        margin: 16px 12px 0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
    }

    .mxCt__map iframe {
        display: block;
        width: 100%;
        height: 200px;
        border: none;
    }

    /* Form */
    .mxCt__formCard {
        background: #fff;
        border-radius: 20px;
        margin: 16px 12px 0;
        box-shadow: 0 4px 20px rgba(21, 101, 192, .1);
        overflow: hidden;
    }

    .mxCt__formHead {
        padding: 16px 18px;
        background: linear-gradient(135deg, #0d47a1, #1976d2);
        color: #fff;
    }

    .mxCt__formHead h3 {
        font-size: 15px;
        font-weight: 800;
        margin: 0 0 2px;
    }

    .mxCt__formHead p {
        font-size: 11.5px;
        color: rgba(255, 255, 255, .75);
        margin: 0;
    }

    .mxCt__formBody {
        padding: 18px 16px;
    }

    .mxCt__formGroup {
        margin-bottom: 14px;
    }

    .mxCt__formLabel {
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 6px;
    }

    .mxCt__formInput {
        width: 100%;
        height: 46px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 13px;
        font-size: 13.5px;
        color: #0f172a;
        background: #f8fafd;
        outline: none;
        font-family: inherit;
        box-sizing: border-box;
        transition: border-color .2s;
    }

    .mxCt__formInput:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .1);
    }

    .mxCt__formInput::placeholder {
        color: #cbd5e1;
    }

    .mxCt__formTextarea {
        height: 100px;
        padding: 12px 13px;
        resize: none;
    }

    .mxCt__formSubmit {
        width: 100%;
        height: 50px;
        border-radius: 13px;
        border: none;
        background: linear-gradient(135deg, #0d47a1, #1976d2);
        color: #fff;
        font-size: 13.5px;
        font-weight: 800;
        letter-spacing: .5px;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 5px 20px rgba(21, 101, 192, .28);
        margin-top: 4px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxCt__formSubmit:active {
        transform: scale(.98);
    }

    .mxCt__formSubmit i {
        font-size: 18px;
    }

    .mxCt__alert {
        padding: 11px 14px;
        border-radius: 11px;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 14px;
    }

    .mxCt__alert--success {
        background: #f0fdf4;
        color: #16a34a;
        border: 1.5px solid #bbf7d0;
    }

    .mxCt__alert--error {
        background: #fef2f2;
        color: #dc2626;
        border: 1.5px solid #fecaca;
    }

    .mxCt__alert i {
        font-size: 17px;
    }
}


.mxPp__desktop {
    display: block;
}

.mxPp__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxPp__desktop {
        display: none !important;
    }

    .mxPp__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══ SHARED POLICY STYLES ══ */
.pp-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 52px 0 68px;
    position: relative;
    overflow: hidden;
}

.pp-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.pp-hero::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -30px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.pp-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.pp-hero__label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0 0 8px;
}

.pp-hero h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
}

.pp-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
}

.pp-hero__meta i {
    font-size: 15px;
}

/* Layout */
.pp-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 32px;
    padding: 40px 0 60px;
    align-items: start;
    margin-top: -36px;
    position: relative;
    z-index: 10;
}

/* Content card */
.pp-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(21, 101, 192, .1);
    overflow: hidden;
}

.pp-card__head {
    padding: 20px 28px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-card__head i {
    font-size: 22px;
    color: #1976d2;
}

.pp-card__head h2 {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.pp-card__body {
    padding: 28px;
}

/* Prose */
.pp-prose {
    font-size: 14.5px;
    color: #374151;
    line-height: 1.85;
}

.pp-prose h1,
.pp-prose h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 28px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8f2fd;
}

.pp-prose h1:first-child,
.pp-prose h2:first-child {
    margin-top: 0;
}

.pp-prose h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1565c0;
    margin: 20px 0 8px;
}

.pp-prose p {
    margin: 0 0 14px;
}

.pp-prose ul,
.pp-prose ol {
    padding-left: 22px;
    margin: 0 0 14px;
}

.pp-prose li {
    margin-bottom: 6px;
}

.pp-prose a {
    color: #1976d2;
    text-decoration: underline;
}

.pp-prose strong {
    color: #0f172a;
}

.pp-prose mark {
    background: #fef08a;
    color: #713f12;
    border-radius: 3px;
    padding: 0 2px;
}

/* Sidebar */
.pp-sidebar {
    position: sticky;
    top: 20px;
}

.pp-sideBox {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    margin-bottom: 16px;
}

.pp-sideHead {
    padding: 12px 16px;
    background: #f8fafd;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11.5px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pp-sideBody {
    padding: 14px 16px;
}

.pp-sideBody p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 10px;
}

.pp-sideLink {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1976d2;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.pp-sideLink:last-child {
    border-bottom: none;
}

.pp-sideLink:hover {
    color: #1565c0;
}

.pp-ctaBox {
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
}

.pp-ctaBox h3 {
    font-size: .95rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.pp-ctaBox p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 12px;
    line-height: 1.5;
}

.pp-ctaBtn {
    display: block;
    text-align: center;
    background: #fff;
    color: #1565c0;
    font-size: 13px;
    font-weight: 800;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
}

/* ══ MOBILE ══ */
@media (max-width: 768px) {
    .mxPp {
        padding-bottom: 32px;
    }

    .mxPp__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 20px;
        position: relative;
        overflow: hidden;
    }

    .mxPp__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxPp__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxPp__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxPp__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxPp__heroTitle {
        font-size: 1.2rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 6px;
    }

    .mxPp__heroMeta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 255, 255, .15);
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 20px;
        padding: 5px 12px;
        font-size: 11.5px;
        color: rgba(255, 255, 255, .85);
        font-weight: 600;
    }

    .mxPp__heroMeta i {
        font-size: 13px;
    }

    .mxPp__card {
        background: #fff;
        border-radius: 20px;
        margin: 12px 12px 0;
        box-shadow: 0 4px 20px rgba(21, 101, 192, .1);
        overflow: hidden;
    }

    .mxPp__cardHead {
        padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #f8fafd;
    }

    .mxPp__cardHead i {
        font-size: 20px;
        color: #1976d2;
    }

    .mxPp__cardHead h2 {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .mxPp__cardBody {
        padding: 18px 16px;
    }

    .mxPp__prose {
        font-size: 13.5px;
        color: #374151;
        line-height: 1.85;
    }

    .mxPp__prose h1,
    .mxPp__prose h2 {
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        margin: 22px 0 8px;
        padding-bottom: 6px;
        border-bottom: 2px solid #e8f2fd;
    }

    .mxPp__prose h1:first-child,
    .mxPp__prose h2:first-child {
        margin-top: 0;
    }

    .mxPp__prose h3 {
        font-size: .9rem;
        font-weight: 700;
        color: #1565c0;
        margin: 16px 0 6px;
    }

    .mxPp__prose p {
        margin: 0 0 12px;
    }

    .mxPp__prose ul,
    .mxPp__prose ol {
        padding-left: 20px;
        margin: 0 0 12px;
    }

    .mxPp__prose li {
        margin-bottom: 5px;
    }

    .mxPp__prose a {
        color: #1976d2;
    }

    .mxPp__ctaBox {
        background: linear-gradient(135deg, #0d47a1, #1976d2);
        border-radius: 16px;
        margin: 16px 12px 0;
        padding: 18px;
        color: #fff;
    }

    .mxPp__ctaBox h3 {
        font-size: .9rem;
        font-weight: 800;
        margin: 0 0 5px;
    }

    .mxPp__ctaBox p {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .8);
        margin: 0 0 12px;
        line-height: 1.5;
    }

    .mxPp__ctaBtn {
        display: block;
        text-align: center;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        padding: 11px;
        border-radius: 11px;
        text-decoration: none;
    }
}


/* ══ SHOW/HIDE ══ */
.mxTc__desktop {
    display: block;
}

.mxTc__mobile {
    display: none;
}

@media (max-width: 768px) {
    .mxTc__desktop {
        display: none !important;
    }

    .mxTc__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══ DESKTOP ══ */
.tc-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 52px 0 68px;
    position: relative;
    overflow: hidden;
}

.tc-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.tc-hero::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -30px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.tc-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.tc-hero__label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0 0 8px;
}

.tc-hero h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
}

.tc-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
}

.tc-hero__meta i {
    font-size: 15px;
}

.tc-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 32px;
    padding: 40px 0 60px;
    align-items: start;
    margin-top: -36px;
    position: relative;
    z-index: 10;
}

.tc-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(21, 101, 192, .1);
    overflow: hidden;
}

.tc-card__head {
    padding: 20px 28px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafd;
}

.tc-card__head i {
    font-size: 22px;
    color: #1976d2;
}

.tc-card__head h2 {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.tc-card__body {
    padding: 28px;
}

.tc-prose {
    font-size: 14.5px;
    color: #374151;
    line-height: 1.85;
}

.tc-prose h1,
.tc-prose h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 28px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8f2fd;
}

.tc-prose h1:first-child,
.tc-prose h2:first-child {
    margin-top: 0;
}

.tc-prose h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1565c0;
    margin: 20px 0 8px;
}

.tc-prose p {
    margin: 0 0 14px;
}

.tc-prose ul,
.tc-prose ol {
    padding-left: 22px;
    margin: 0 0 14px;
}

.tc-prose li {
    margin-bottom: 7px;
}

.tc-prose a {
    color: #1976d2;
    text-decoration: underline;
}

.tc-prose strong {
    color: #0f172a;
}

.tc-sidebar {
    position: sticky;
    top: 20px;
}

.tc-sideBox {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    margin-bottom: 16px;
}

.tc-sideHead {
    padding: 12px 16px;
    background: #f8fafd;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11.5px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.tc-sideLink {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1976d2;
    text-decoration: none;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}

.tc-sideLink:last-child {
    border-bottom: none;
}

.tc-sideLink:hover {
    background: #f8fafd;
    color: #1565c0;
}

.tc-noticeBox {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tc-noticeBox i {
    font-size: 20px;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}

.tc-noticeBox p {
    font-size: 13px;
    color: #92400e;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.tc-ctaBox {
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
}

.tc-ctaBox h3 {
    font-size: .95rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.tc-ctaBox p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 12px;
    line-height: 1.5;
}

.tc-ctaBtn {
    display: block;
    text-align: center;
    background: #fff;
    color: #1565c0;
    font-size: 13px;
    font-weight: 800;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
}

/* ══ MOBILE ══ */
@media (max-width: 768px) {
    .mxTc {
        padding-bottom: 32px;
    }

    .mxTc__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 20px;
        position: relative;
        overflow: hidden;
    }

    .mxTc__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxTc__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxTc__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxTc__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxTc__heroTitle {
        font-size: 1.2rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 6px;
    }

    .mxTc__heroMeta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 255, 255, .15);
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 20px;
        padding: 5px 12px;
        font-size: 11.5px;
        color: rgba(255, 255, 255, .85);
        font-weight: 600;
    }

    .mxTc__heroMeta i {
        font-size: 13px;
    }

    .mxTc__notice {
        background: #fffbeb;
        border: 1.5px solid #fde68a;
        border-radius: 14px;
        margin: 12px 12px 0;
        padding: 12px 14px;
        display: flex;
        gap: 9px;
        align-items: flex-start;
    }

    .mxTc__notice i {
        font-size: 18px;
        color: #d97706;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .mxTc__notice p {
        font-size: 12.5px;
        color: #92400e;
        line-height: 1.6;
        margin: 0;
        font-weight: 500;
    }

    .mxTc__card {
        background: #fff;
        border-radius: 20px;
        margin: 12px 12px 0;
        box-shadow: 0 4px 20px rgba(21, 101, 192, .1);
        overflow: hidden;
    }

    .mxTc__cardHead {
        padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #f8fafd;
    }

    .mxTc__cardHead i {
        font-size: 20px;
        color: #1976d2;
    }

    .mxTc__cardHead h2 {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .mxTc__cardBody {
        padding: 18px 16px;
    }

    .mxTc__prose {
        font-size: 13.5px;
        color: #374151;
        line-height: 1.85;
    }

    .mxTc__prose h1,
    .mxTc__prose h2 {
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        margin: 22px 0 8px;
        padding-bottom: 6px;
        border-bottom: 2px solid #e8f2fd;
    }

    .mxTc__prose h1:first-child,
    .mxTc__prose h2:first-child {
        margin-top: 0;
    }

    .mxTc__prose h3 {
        font-size: .9rem;
        font-weight: 700;
        color: #1565c0;
        margin: 16px 0 6px;
    }

    .mxTc__prose p {
        margin: 0 0 12px;
    }

    .mxTc__prose ul,
    .mxTc__prose ol {
        padding-left: 20px;
        margin: 0 0 12px;
    }

    .mxTc__prose li {
        margin-bottom: 5px;
    }

    .mxTc__prose a {
        color: #1976d2;
    }

    .mxTc__linksCard {
        background: #fff;
        border-radius: 16px;
        margin: 12px 12px 0;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        overflow: hidden;
    }

    .mxTc__linksHead {
        padding: 12px 16px;
        background: #f8fafd;
        border-bottom: 1px solid #f1f5f9;
        font-size: 11px;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .mxTc__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid #f8fafc;
        text-decoration: none;
        color: #334155;
        font-size: 13px;
        font-weight: 600;
    }

    .mxTc__link:last-child {
        border-bottom: none;
    }

    .mxTc__link i {
        font-size: 16px;
        color: #94a3b8;
    }

    .mxTc__link:active {
        background: #f8fafd;
        color: #1976d2;
    }

    .mxTc__ctaBox {
        background: linear-gradient(135deg, #0d47a1, #1976d2);
        border-radius: 16px;
        margin: 12px 12px 0;
        padding: 18px;
        color: #fff;
    }

    .mxTc__ctaBox h3 {
        font-size: .9rem;
        font-weight: 800;
        margin: 0 0 5px;
    }

    .mxTc__ctaBox p {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .8);
        margin: 0 0 12px;
        line-height: 1.5;
    }

    .mxTc__ctaBtn {
        display: block;
        text-align: center;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        padding: 11px;
        border-radius: 11px;
        text-decoration: none;
    }
}

/* ════════════════════════════════════════
           SHOW / HIDE
        ════════════════════════════════════════ */
.mxTm__desktop {
    display: block;
}

.mxTm__mobile {
    display: none;
}

@media (max-width:768px) {
    .mxTm__desktop {
        display: none !important;
    }

    .mxTm__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════
           DESKTOP
        ════════════════════════════════════════ */
.tm-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 46px 0 58px;
    position: relative;
    overflow: hidden;
}

.tm-hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -50px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.tm-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.tm-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.tm-hero__label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .9px;
    margin: 0 0 10px;
}

.tm-hero h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.2;
}

.tm-hero__sub {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

/* Stat bar */
.tm-statbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(21, 101, 192, .15);
    margin-top: -28px;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.tm-stat {
    padding: 20px;
    border-right: 1px solid #f1f5f9;
    text-align: center;
}

.tm-stat:last-child {
    border-right: none;
}

.tm-stat__num {
    font-size: 1.7rem;
    font-weight: 900;
    color: #1565c0;
    line-height: 1;
}

.tm-stat__lbl {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    margin-top: 5px;
}

/* Stars */
.tm-stars {
    display: inline-flex;
    gap: 1px;
}

.tm-stars i {
    font-size: 15px;
    color: #fbbf24;
}

.tm-stars i.empty {
    color: #e2e8f0;
}

/* Section heading */
.tm-secHead {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 34px 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tm-secHead i {
    font-size: 22px;
    color: #1976d2;
}

.tm-secHead::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0, transparent);
}

/* Filter toolbar */
.tm-toolbar {
    background: #fff;
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 0 2px 14px rgba(21, 101, 192, .1);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.tm-toolbar__lbl {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.tm-chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
}

.tm-chips::-webkit-scrollbar {
    display: none;
}

.tm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 50px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    border: 2px solid transparent;
    text-decoration: none;
    transition: all .15s;
}

.tm-chip:hover {
    background: #dbeafe;
    color: #1976d2;
    border-color: #bfdbfe;
}

.tm-chip.on {
    background: #1976d2;
    color: #fff;
    border-color: #1565c0;
}

.tm-chip__n {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 800;
}

.tm-chip:not(.on) .tm-chip__n {
    background: #e2e8f0;
    color: #64748b;
}

.tm-chip.on .tm-chip__n {
    background: rgba(255, 255, 255, .3);
}

.tm-citySelect {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
    cursor: pointer;
    outline: none;
    font-weight: 600;
}

.tm-citySelect:focus {
    border-color: #1976d2;
}

/* Featured grid */
.tm-featGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 10px;
}

.tm-featCard {
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 3px 18px rgba(15, 23, 42, .09);
    position: relative;
    border-top: 4px solid #1976d2;
    transition: all .2s;
}

.tm-featCard:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(21, 101, 192, .16);
}

.tm-featCard__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
}

.tm-featCard__q {
    font-size: 46px;
    color: #dbeafe;
    font-family: Georgia, serif;
    line-height: .8;
    margin-bottom: 6px;
}

.tm-featCard__text {
    font-size: 14px;
    color: #334155;
    line-height: 1.75;
    margin: 0 0 14px;
}

.tm-featCard__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.tm-featCard__av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.tm-featCard__name {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
}

.tm-featCard__info {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

/* Main cards grid */
.tm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.tm-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all .2s;
}

.tm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(21, 101, 192, .13);
}

.tm-card__hd {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tm-card__av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
}

.tm-card__name {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
}

.tm-card__info {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.tm-card__text {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.75;
    flex: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tm-card__ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #f8fafc;
}

.tm-card__type {
    background: #eff6ff;
    color: #1565c0;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.tm-card__city {
    font-size: 11.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 3px;
}

.tm-card__city i {
    font-size: 14px;
}

/* Video grid */
.tm-vidGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.tm-vidCard {
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all .2s;
    display: block;
    text-decoration: none;
}

.tm-vidCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

.tm-vidCard__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    opacity: .8;
    display: block;
}

.tm-vidCard__placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #1e3a5f, #0d47a1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-vidCard__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

.tm-vidCard__play i {
    font-size: 30px;
    color: #1976d2;
    margin-left: 3px;
}

.tm-vidCard__info {
    padding: 12px 14px;
    background: #0f172a;
}

.tm-vidCard__name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
}

.tm-vidCard__meta {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0;
}

/* Empty */
.tm-empty {
    text-align: center;
    padding: 64px 20px;
}

.tm-empty i {
    font-size: 64px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 14px;
}

.tm-empty h3 {
    color: #475569;
    margin: 0 0 8px;
}

.tm-empty p {
    color: #94a3b8;
    font-size: 13.5px;
    margin: 0;
}

/* ════════════════════════════════════════
           MOBILE
        ════════════════════════════════════════ */
@media (max-width:768px) {

    .mxTm {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxTm__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 24px 16px 62px;
        position: relative;
        overflow: hidden;
    }

    .mxTm__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxTm__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxTm__heroIn {
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .mxTm__tag {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 6px;
    }

    .mxTm__h1 {
        font-size: 1.25rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 6px;
        line-height: 1.25;
    }

    .mxTm__sub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        margin: 0;
    }

    /* Stat strip */
    .mxTm__stats {
        background: #fff;
        border-radius: 18px;
        margin: -30px 12px 0;
        padding: 12px 6px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .16);
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .mxTm__si {
        text-align: center;
        border-right: 1px solid #f1f5f9;
        padding: 4px 2px;
    }

    .mxTm__si:last-child {
        border-right: none;
    }

    .mxTm__sn {
        font-size: 16px;
        font-weight: 900;
        color: #1565c0;
        line-height: 1;
    }

    .mxTm__sl {
        font-size: 9.5px;
        color: #64748b;
        font-weight: 600;
        margin-top: 3px;
    }

    /* Chips */
    .mxTm__chips {
        background: #fff;
        border-radius: 18px;
        margin: 12px 12px 0;
        padding: 10px 12px;
        box-shadow: 0 4px 20px rgba(21, 101, 192, .12);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxTm__chScroll {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxTm__chScroll::-webkit-scrollbar {
        display: none;
    }

    .mxTm__ch {
        flex-shrink: 0;
        padding: 7px 13px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 700;
        background: #f1f5f9;
        color: #64748b;
        border: 1.5px solid transparent;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
        transition: all .15s;
    }

    .mxTm__ch.on {
        background: #1976d2;
        color: #fff;
        border-color: #1565c0;
    }

    .mxTm__ch:active {
        transform: scale(.96);
    }

    .mxTm__chn {
        font-size: 10px;
        font-weight: 800;
        background: rgba(0, 0, 0, .08);
        border-radius: 10px;
        padding: 1px 5px;
        margin-left: 2px;
    }

    .mxTm__ch.on .mxTm__chn {
        background: rgba(255, 255, 255, .25);
    }

    /* Section label */
    .mxTm__sec {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 18px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxTm__sec i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxTm__sec::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* Featured horizontal scroll */
    .mxTm__featScr {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px 4px;
    }

    .mxTm__featScr::-webkit-scrollbar {
        display: none;
    }

    .mxTm__fc {
        flex-shrink: 0;
        width: 274px;
        background: #fff;
        border-radius: 18px;
        padding: 18px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .09);
        border-top: 4px solid #1976d2;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .mxTm__fc:active {
        transform: scale(.98);
    }

    .mxTm__fcBadge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #fef3c7;
        color: #92400e;
        font-size: 9.5px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    .mxTm__fcQ {
        font-size: 38px;
        color: #dbeafe;
        font-family: Georgia, serif;
        line-height: .8;
        margin-bottom: 6px;
    }

    .mxTm__fcTxt {
        font-size: 13px;
        color: #334155;
        line-height: 1.7;
        margin: 0 0 10px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxTm__fcMeta {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
    }

    .mxTm__fcAv {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        flex-shrink: 0;
        object-fit: cover;
        background: linear-gradient(135deg, #1976d2, #0d47a1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 800;
        color: #fff;
    }

    .mxTm__fcName {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 2px;
    }

    .mxTm__fcInfo {
        font-size: 10.5px;
        color: #64748b;
        margin: 0;
    }

    /* Card list */
    .mxTm__list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxTm__card {
        background: #fff;
        border-radius: 18px;
        padding: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mxTm__card__hd {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mxTm__card__av {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        flex-shrink: 0;
        object-fit: cover;
        background: linear-gradient(135deg, #1976d2, #0d47a1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        font-weight: 900;
        color: #fff;
    }

    .mxTm__card__nm {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 2px;
    }

    .mxTm__card__dg {
        font-size: 11.5px;
        color: #64748b;
        margin: 0;
    }

    .mxTm__card__tx {
        font-size: 13.5px;
        color: #475569;
        line-height: 1.75;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxTm__card__ft {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 8px;
        border-top: 1px solid #f8fafc;
    }

    .mxTm__card__tp {
        background: #eff6ff;
        color: #1565c0;
        font-size: 10.5px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 20px;
    }

    .mxTm__card__ct {
        font-size: 10.5px;
        color: #94a3b8;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .mxTm__card__ct i {
        font-size: 12px;
    }

    /* Stars mobile */
    .mxTm__stars {
        display: inline-flex;
        gap: 1px;
    }

    .mxTm__stars i {
        font-size: 13px;
        color: #fbbf24;
    }

    .mxTm__stars i.empty {
        color: #e2e8f0;
    }

    /* Video scroll */
    .mxTm__vidScr {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px 4px;
    }

    .mxTm__vidScr::-webkit-scrollbar {
        display: none;
    }

    .mxTm__vc {
        flex-shrink: 0;
        width: 224px;
        background: #000;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        display: block;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mxTm__vc:active {
        transform: scale(.97);
    }

    .mxTm__vcImg {
        width: 100%;
        height: 140px;
        object-fit: cover;
        opacity: .8;
        display: block;
    }

    .mxTm__vcPh {
        width: 100%;
        height: 140px;
        background: linear-gradient(135deg, #1e3a5f, #0d47a1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxTm__vcPlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxTm__vcPlay i {
        font-size: 24px;
        color: #1976d2;
        margin-left: 2px;
    }

    .mxTm__vcInfo {
        padding: 10px 12px;
        background: #0f172a;
    }

    .mxTm__vcName {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        margin: 0 0 2px;
    }

    .mxTm__vcMeta {
        font-size: 10px;
        color: #94a3b8;
        margin: 0;
    }

    /* Pagination */
    .mxTm__pag {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxTm__pgBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxTm__pgBtn--on {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }

    .mxTm__pgBtn--off {
        opacity: .4;
        pointer-events: none;
    }

}

/* end @media */

/* ════════════════════════════════════════
                                               SHOW / HIDE
                                            ════════════════════════════════════════ */
.mxFb__desktop {
    display: block;
}

.mxFb__mobile {
    display: none;
}

@media (max-width:768px) {
    .mxFb__desktop {
        display: none !important;
    }

    .mxFb__mobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ════════════════════════════════════════
                                               DESKTOP
                                            ════════════════════════════════════════ */
.fb-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
    padding: 46px 0 60px;
    position: relative;
    overflow: hidden;
}

.fb-hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -50px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.fb-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.fb-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.fb-hero__label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .9px;
    margin: 0 0 10px;
}

.fb-hero h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.2;
}

.fb-hero__sub {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

/* Layout */
.fb-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    padding: 36px 0 48px;
    align-items: start;
}

/* Form card */
.fb-formCard {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 22px rgba(15, 23, 42, .08);
    overflow: hidden;
    margin-top: -28px;
    position: relative;
    z-index: 10;
}

.fb-formCard__head {
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-formCard__head i {
    font-size: 22px;
    color: #1976d2;
}

.fb-formCard__head h2 {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.fb-formCard__body {
    padding: 24px;
}

/* Form elements */
.fb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.fb-field {
    margin-bottom: 16px;
}

.fb-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
}

.fb-req {
    color: #ef4444;
}

.fb-input,
.fb-select {
    width: 95%;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: #0f172a;
    background: #f8fafd;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}

.fb-textarea {
    width: 97%;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: #0f172a;
    background: #f8fafd;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}

.fb-input:focus,
.fb-select:focus,
.fb-textarea:focus {
    border-color: #1976d2;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .1);
}

.fb-input::placeholder,
.fb-textarea::placeholder {
    color: #94a3b8;
}

.fb-select {
    cursor: pointer;
}

.fb-textarea {
    resize: vertical;
    min-height: 130px;
}

/* Type buttons */
.fb-typeGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.fb-typeBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 6px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #f8fafd;
    cursor: pointer;
    transition: all .15s;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    text-align: center;
}

.fb-typeBtn i {
    font-size: 22px;
}

.fb-typeBtn:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1976d2;
}

.fb-typeBtn.active {
    border-color: #1976d2;
    background: #eff6ff;
    color: #1976d2;
}

.fb-typeBtn.active i {
    color: #1976d2;
}

/* Star rating */
.fb-stars {
    display: flex;
    gap: 6px;
}

.fb-starBtn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    color: #e2e8f0;
    transition: color .1s, transform .1s;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.fb-starBtn:hover,
.fb-starBtn.lit {
    color: #fbbf24;
    transform: scale(1.15);
}

.fb-starLbl {
    font-size: 12.5px;
    color: #64748b;
    margin-left: 8px;
    align-self: center;
}

/* Error */
.fb-err {
    font-size: 11.5px;
    color: #ef4444;
    margin-top: 4px;
    display: block;
}

/* Submit btn */
.fb-submitBtn {
    width: 100%;
    height: 52px;
    border-radius: 13px;
    border: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    margin-top: 4px;
}

.fb-submitBtn:hover {
    background: linear-gradient(90deg, #0d47a1, #1565c0);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(21, 101, 192, .35);
}

.fb-submitBtn:active {
    transform: scale(.98);
}

.fb-submitBtn i {
    font-size: 20px;
}

/* Success banner */
.fb-success {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.fb-success i {
    font-size: 28px;
    color: #16a34a;
    flex-shrink: 0;
}

.fb-success h3 {
    font-size: 15px;
    font-weight: 800;
    color: #15803d;
    margin: 0 0 4px;
}

.fb-success p {
    font-size: 13px;
    color: #166534;
    margin: 0;
}

/* Sidebar info cards */
.fb-infoCard {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .07);
    margin-bottom: 18px;
}

.fb-infoCard h3 {
    font-size: .9rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fb-infoCard h3 i {
    font-size: 20px;
    color: #1976d2;
}

.fb-typeList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fb-typeItem {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fb-typeItem__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fb-typeItem__icon i {
    font-size: 18px;
}

.fb-typeItem__name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
}

.fb-typeItem__desc {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

/* CTA box */
.fb-ctaBox {
    background: linear-gradient(135deg, #0d47a1, #1976d2);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
}

.fb-ctaBox h3 {
    font-size: .95rem;
    font-weight: 800;
    margin: 0 0 7px;
}

.fb-ctaBox p {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 14px;
    line-height: 1.5;
}

.fb-ctaBtn {
    display: block;
    text-align: center;
    background: #fff;
    color: #1565c0;
    font-size: 13px;
    font-weight: 800;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
}

.fb-ctaBtn:hover {
    background: #eff6ff;
}

/* ════════════════════════════════════════
                                               MOBILE
                                            ════════════════════════════════════════ */
@media (max-width:768px) {

    .mxFb {
        min-height: calc(100vh - 118px);
        padding-bottom: 40px;
    }

    /* Hero */
    .mxFb__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 24px 16px 64px;
        position: relative;
        overflow: hidden;
    }

    .mxFb__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxFb__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxFb__heroIn {
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .mxFb__tag {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 6px;
    }

    .mxFb__h1 {
        font-size: 1.3rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 6px;
    }

    .mxFb__sub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        margin: 0;
    }

    /* Floating card */
    .mxFb__card {
        background: #fff;
        border-radius: 20px;
        margin: -30px 12px 0;
        box-shadow: 0 6px 28px rgba(21, 101, 192, .15);
        position: relative;
        z-index: 10;
        overflow: hidden;
    }

    .mxFb__cardHead {
        padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxFb__cardHead i {
        font-size: 20px;
        color: #1976d2;
    }

    .mxFb__cardHead h2 {
        font-size: .95rem;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .mxFb__cardBody {
        padding: 16px;
    }

    /* Success */
    .mxFb__success {
        background: #f0fdf4;
        border: 1.5px solid #bbf7d0;
        border-radius: 14px;
        padding: 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .mxFb__success i {
        font-size: 24px;
        color: #16a34a;
        flex-shrink: 0;
    }

    .mxFb__success h3 {
        font-size: 14px;
        font-weight: 800;
        color: #15803d;
        margin: 0 0 3px;
    }

    .mxFb__success p {
        font-size: 12.5px;
        color: #166534;
        margin: 0;
    }

    /* Field */
    .mxFb__field {
        margin-bottom: 14px;
    }

    .mxFb__label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 5px;
    }

    .mxFb__req {
        color: #ef4444;
    }

    .mxFb__input,
    .mxFb__select,
    .mxFb__textarea {
        width: 93%;
        border: 1.5px solid #e2e8f0;
        border-radius: 13px;
        padding: 12px 14px;
        font-size: 14px;
        color: #0f172a;
        background: #f8fafd;
        outline: none;
        font-family: inherit;
        transition: border-color .15s;
    }

    .mxFb__input:focus,
    .mxFb__select:focus,
    .mxFb__textarea:focus {
        border-color: #1976d2;
        background: #fff;
    }

    .mxFb__input::placeholder,
    .mxFb__textarea::placeholder {
        color: #94a3b8;
    }

    .mxFb__textarea {
        resize: vertical;
        min-height: 120px;
    }

    .mxFb__select {
        cursor: pointer;
    }

    .mxFb__err {
        font-size: 11px;
        color: #ef4444;
        margin-top: 4px;
        display: block;
    }

    /* Type buttons mobile */
    .mxFb__typeGrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;
    }

    .mxFb__typeBtn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 4px;
        border-radius: 11px;
        border: 2px solid #e2e8f0;
        background: #f8fafd;
        cursor: pointer;
        transition: all .15s;
        font-size: 10px;
        font-weight: 700;
        color: #64748b;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxFb__typeBtn i {
        font-size: 20px;
    }

    .mxFb__typeBtn.active {
        border-color: #1976d2;
        background: #eff6ff;
        color: #1976d2;
    }

    .mxFb__typeBtn:active {
        transform: scale(.95);
    }

    /* Stars mobile */
    .mxFb__stars {
        display: flex;
        gap: 8px;
    }

    .mxFb__starBtn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 32px;
        color: #e2e8f0;
        transition: color .1s;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .mxFb__starBtn.lit {
        color: #fbbf24;
    }

    /* Submit */
    .mxFb__submitBtn {
        width: 100%;
        height: 52px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(90deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        -webkit-tap-highlight-color: transparent;
        margin-top: 4px;
    }

    .mxFb__submitBtn:active {
        transform: scale(.97);
    }

    .mxFb__submitBtn i {
        font-size: 20px;
    }

    /* Info chips below */
    .mxFb__infoRow {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 16px 12px 0;
        -webkit-overflow-scrolling: touch;
    }

    .mxFb__infoRow::-webkit-scrollbar {
        display: none;
    }

    .mxFb__infoPill {
        flex-shrink: 0;
        background: #fff;
        border-radius: 14px;
        padding: 14px 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        min-width: 150px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mxFb__infoPill i {
        font-size: 22px;
        color: #1976d2;
        flex-shrink: 0;
    }

    .mxFb__infoPill p {
        font-size: 11.5px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 2px;
    }

    .mxFb__infoPill span {
        font-size: 10.5px;
        color: #64748b;
    }

}

/* end @media */
/* ══════════════════════════════════════════════
                       SHOW / HIDE
                    ══════════════════════════════════════════════ */
.mxBl__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxBl__desktopView {
        display: none !important;
    }

    .mxBl__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════════════════
                       MOBILE STYLES
                    ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxBl {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* ── Hero ── */
    .mxBl__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 58px;
        position: relative;
        overflow: hidden;
    }

    .mxBl__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxBl__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxBl__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxBl__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxBl__heroTitle {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.25;
    }

    .mxBl__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* ── Category chips (floating) ── */
    .mxBl__chipsWrap {
        background: #fff;
        border-radius: 18px;
        margin: -28px 12px 0;
        padding: 10px 12px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .14);
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 8px;
        overflow: hidden;
    }

    .mxBl__chipsScroll {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxBl__chipsScroll::-webkit-scrollbar {
        display: none;
    }

    .mxBl__chip {
        flex-shrink: 0;
        padding: 7px 14px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 700;
        background: #f1f5f9;
        color: #64748b;
        cursor: pointer;
        border: 1.5px solid transparent;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
    }

    .mxBl__chip.active {
        background: #1976d2;
        color: #fff;
        border-color: #1565c0;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxBl__chip:active {
        transform: scale(.96);
    }

    .mxBl__scrollBtn {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        color: #64748b;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }

    /* ── Section title ── */
    .mxBl__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxBl__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* ── Blog cards ── */
    .mxBl__cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxBl__card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxBl__card:active {
        transform: scale(.99);
    }

    /* image */
    .mxBl__imgWrap {
        position: relative;
        height: 185px;
        overflow: hidden;
    }

    .mxBl__imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxBl__catBadge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #1976d2;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    /* body */
    .mxBl__cardBody {
        padding: 14px 14px 0;
        flex: 1;
    }

    .mxBl__cardTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 7px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxBl__cardExcerpt {
        font-size: 12.5px;
        color: #64748b;
        line-height: 1.55;
        margin: 0 0 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxBl__metaRow {
        display: flex;
        gap: 12px;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
        padding: 8px 0;
        border-top: 1px solid #f1f5f9;
        flex-wrap: wrap;
    }

    .mxBl__metaItem {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .mxBl__metaItem i {
        font-size: 13px;
    }

    /* footer */
    .mxBl__cardFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px 14px;
    }

    .mxBl__cardDate {
        font-size: 11.5px;
        color: #94a3b8;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mxBl__cardDate i {
        font-size: 13px;
    }

    .mxBl__readBtn {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11.5px;
        font-weight: 800;
        padding: 7px 16px;
        border-radius: 20px;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
        -webkit-tap-highlight-color: transparent;
    }

    /* ── Empty ── */
    .mxBl__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxBl__empty i {
        font-size: 52px;
        display: block;
        margin-bottom: 12px;
        color: #cbd5e1;
    }

    .mxBl__empty h3 {
        font-size: 16px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxBl__empty p {
        font-size: 13px;
        margin: 0;
    }

    /* ── Pagination ── */
    .mxBl__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxBl__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
    }

    .mxBl__pageBtn--active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxBl__pageBtn--disabled {
        opacity: .4;
        pointer-events: none;
    }

}
.mxBlMobile .mxBl__card {
    cursor: default;
}

.mxBlMobile .mxBl__card:active {
    transform: none;
}

.mxBlMobile .mxBl__tag,
.mxBlMobile .mxBl__tagPill,
.mxBlMobile .mxBl__catBadge {
    cursor: pointer;
}

/* end @media */

/* ══════════════════════════════════════════════
                       DESKTOP CSS — original untouched
                    ══════════════════════════════════════════════ */
.blog-page-header {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 0;
}

.blog-page-header h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

.blog-page-header p {
    color: rgba(255, 255, 255, 0.75);
    margin: 6px 0 0;
    font-size: 14px;
}

.filter-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.filter-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 6px 2px;
    flex: 1;
    scrollbar-width: none;
}

.filter-scroll::-webkit-scrollbar {
    display: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 50px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
}

.chip:hover {
    background: #dbeafe;
    color: #1976d2;
    border-color: #1976d2;
}

.chip.active {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
}

.chip .badge {
    background: rgba(255, 255, 255, 0.3);
    color: inherit;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 600;
}

.chip.active .badge {
    background: rgba(255, 255, 255, 0.3);
}

.scroll-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    color: #1976d2;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-btn:hover {
    background: #1976d2;
    color: #fff;
}

.blog-card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 210px;
}

.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mdc-card:hover .blog-card-img-wrap img {
    transform: scale(1.05);
}

.blog-category-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #1976d2;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.blog-card-body {
    padding: 14px 16px 0;
}

.blog-card-title a {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-title a:hover {
    color: #1976d2;
}

.blog-card-excerpt {
    font-size: 13px;
    color: #64748b;
    margin: 8px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.blog-meta-row {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #94a3b8;
    padding: 8px 0;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.blog-meta-row span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.blog-meta-row .material-icons {
    font-size: 14px;
}

.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 14px;
}

.blog-card-date {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.blog-card-date .material-icons {
    font-size: 14px;
}

.btn-read-more {
    background: #1976d2;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s;
    letter-spacing: 0.3px;
}

.btn-read-more:hover {
    background: #0d47a1;
}

.blog-empty {
    text-align: center;
    padding: 60px 20px;
    width: 100%;
}

.blog-empty .material-icons {
    font-size: 64px;
    color: #cbd5e1;
}

.blog-empty h3 {
    color: #475569;
    margin: 12px 0 6px;
}

.blog-empty p {
    color: #94a3b8;
    font-size: 14px;
}

/* ══════════════════════════════════════════════
                           SHOW / HIDE
                        ══════════════════════════════════════════════ */
.mxBc__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxBc__desktopView {
        display: none !important;
    }

    .mxBc__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════════════════
                           MOBILE STYLES
                        ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxBc {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* ── Hero ── */
    .mxBc__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 58px;
        position: relative;
        overflow: hidden;
    }

    .mxBc__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxBc__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxBc__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxBc__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxBc__heroTitle {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.25;
    }

    .mxBc__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0 0 10px;
    }

    /* breadcrumb */
    .mxBc__breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 255, 255, .13);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 30px;
        padding: 5px 13px;
        font-size: 11px;
        flex-wrap: wrap;
    }

    .mxBc__breadcrumb a {
        color: rgba(255, 255, 255, .8);
        text-decoration: none;
        font-weight: 600;
    }

    .mxBc__breadcrumb span {
        color: rgba(255, 255, 255, .5);
    }

    .mxBc__breadcrumb i {
        font-size: 12px;
        color: rgba(255, 255, 255, .4);
    }

    /* ── Search (floating) ── */
    .mxBc__searchWrap {
        background: #fff;
        border-radius: 18px;
        margin: -28px 12px 0;
        padding: 10px 14px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .14);
        position: relative;
        z-index: 10;
    }

    .mxBc__searchForm {
        display: flex;
        gap: 8px;
    }

    .mxBc__searchInput {
        flex: 1;
        height: 44px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 13.5px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
    }

    .mxBc__searchInput:focus {
        border-color: #1976d2;
        background: #fff;
    }

    .mxBc__searchBtn {
        height: 44px;
        width: 44px;
        border-radius: 12px;
        border: none;
        flex-shrink: 0;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxBc__searchBtn i {
        font-size: 20px;
    }

    /* ── Category chips ── */
    .mxBc__chipsWrap {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 14px 12px 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxBc__chipsWrap::-webkit-scrollbar {
        display: none;
    }

    .mxBc__chip {
        flex-shrink: 0;
        padding: 7px 14px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 700;
        background: #fff;
        color: #64748b;
        border: 1.5px solid #e2e8f0;
        white-space: nowrap;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mxBc__chip.active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .22);
    }

    /* ── Section title ── */
    .mxBc__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 14px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxBc__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* ── Blog cards ── */
    .mxBc__cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxBc__card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxBc__card:active {
        transform: scale(.99);
    }

    .mxBc__imgWrap {
        position: relative;
        height: 185px;
        overflow: hidden;
    }

    .mxBc__imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxBc__catBadge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #1976d2;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .mxBc__cardBody {
        padding: 14px 14px 0;
        flex: 1;
    }

    .mxBc__cardTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 7px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxBc__cardExcerpt {
        font-size: 12.5px;
        color: #64748b;
        line-height: 1.55;
        margin: 0 0 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxBc__metaRow {
        display: flex;
        gap: 12px;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
        padding: 8px 0;
        border-top: 1px solid #f1f5f9;
        flex-wrap: wrap;
    }

    .mxBc__metaItem {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .mxBc__metaItem i {
        font-size: 13px;
    }

    .mxBc__cardFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px 14px;
    }

    .mxBc__cardDate {
        font-size: 11.5px;
        color: #94a3b8;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mxBc__cardDate i {
        font-size: 13px;
    }

    .mxBc__readBtn {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11.5px;
        font-weight: 800;
        padding: 7px 16px;
        border-radius: 20px;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
    }

    /* ── Recent posts ── */
    .mxBc__recentCard {
        background: #fff;
        border-radius: 16px;
        margin: 0 12px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        overflow: hidden;
    }

    .mxBc__recentHeader {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
        padding: 10px 14px;
    }

    .mxBc__recentItem {
        display: flex;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid #f1f5f9;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mxBc__recentItem:last-child {
        border-bottom: none;
    }

    .mxBc__recentItem:active {
        background: #f8fafd;
    }

    .mxBc__recentImg {
        width: 52px;
        height: 52px;
        border-radius: 10px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .mxBc__recentTitle {
        font-size: 12.5px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0 0 3px;
    }

    .mxBc__recentDate {
        font-size: 11px;
        color: #94a3b8;
        font-weight: 500;
    }

    /* ── Empty ── */
    .mxBc__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxBc__empty i {
        font-size: 52px;
        display: block;
        margin-bottom: 12px;
        color: #cbd5e1;
    }

    .mxBc__empty h3 {
        font-size: 16px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxBc__empty p {
        font-size: 13px;
        margin: 0;
    }


    .mxBc__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxBc__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
    }

    .mxBc__pageBtn--active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxBc__pageBtn--disabled {
        opacity: .4;
        pointer-events: none;
    }

}

/* end @media */

/* ══════════════════════════════════════════════
                           DESKTOP CSS — original untouched
                        ══════════════════════════════════════════════ */
.blog-page-header {
    width: 100%;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
}

.blog-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    margin-top: 10px;
}

.blog-header-card h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.blog-header-card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    margin: 0;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex-wrap: wrap;
}

.breadcrumb-inner a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.breadcrumb-inner a:hover {
    color: #fff;
    text-decoration: underline;
}

.breadcrumb-inner span {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-inner .material-icons {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.blog-sidebar {
    padding-left: 12px;
}

@media(max-width:768px) {
    .blog-sidebar {
        padding-left: 0;
        margin-top: 16px;
    }
}

.sidebar-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    margin-bottom: 16px;
    overflow: hidden;
}

.sidebar-card-header {
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 14px;
}

.sidebar-cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #475569;
    text-decoration: none;
    transition: background 0.15s;
}

.sidebar-cat-item:last-child {
    border-bottom: none;
}

.sidebar-cat-item:hover,
.sidebar-cat-item.active {
    background: #eff6ff;
    color: #1976d2;
}

.cat-count {
    background: #e0e7ff;
    color: #1976d2;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.sidebar-cat-item.active .cat-count {
    background: #1976d2;
    color: #fff;
}

.recent-blog-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    transition: background 0.15s;
}

.recent-blog-item:last-child {
    border-bottom: none;
}

.recent-blog-item:hover {
    background: #eff6ff;
}

.recent-blog-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 7px;
    flex-shrink: 0;
}

.recent-title {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recent-blog-item:hover .recent-title {
    color: #1976d2;
}

.recent-date {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
}

.sidebar-search {
    padding: 12px 14px;
}

.sidebar-search input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
}

.sidebar-search input:focus {
    border-color: #1976d2;
}

.sidebar-search button {
    margin-top: 8px;
    width: 100%;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-search button:hover {
    background: #0d47a1;
}

.blog-card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 190px;
}

.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mdc-card:hover .blog-card-img-wrap img {
    transform: scale(1.05);
}

.blog-category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #1976d2;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.blog-card-body {
    padding: 12px 14px 0;
    flex: 1;
}

.blog-card-title a {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-title a:hover {
    color: #1976d2;
}

.blog-card-excerpt {
    font-size: 12px;
    color: #64748b;
    margin: 6px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.blog-meta-row {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #94a3b8;
    padding: 7px 0;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.blog-meta-row span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.blog-meta-row .material-icons {
    font-size: 13px;
}

.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px 12px;
}

.blog-card-date {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 3px;
}

.blog-card-date .material-icons {
    font-size: 13px;
}

.btn-read-more {
    background: #1976d2;
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-read-more:hover {
    background: #0d47a1;
}

.blog-empty {
    text-align: center;
    padding: 50px 20px;
    width: 100%;
}

.blog-empty .material-icons {
    font-size: 56px;
    color: #cbd5e1;
}

.blog-empty h3 {
    color: #475569;
    margin: 10px 0 4px;
    font-size: 1.1rem;
}

.blog-empty p {
    color: #94a3b8;
    font-size: 13px;
}


/* ══════════════════════════════════
                                       SHOW / HIDE
                                    ══════════════════════════════════ */
.mxBlDesktop {
    display: block;
}

.mxBlMobile {
    display: none;
}

@media (max-width: 768px) {
    .mxBlDesktop {
        display: none !important;
    }

    .mxBlMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════
                                       DESKTOP STYLES (original, untouched)
                                    ══════════════════════════════════ */
.blog-page-header {
    width: 100%;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
}

.blog-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    margin-top: 10px;
}

.blog-header-card h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex-wrap: wrap;
}

.breadcrumb-inner a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.breadcrumb-inner a:hover {
    color: #fff;
    text-decoration: underline;
}

.breadcrumb-inner span {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-inner .material-icons {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.blog-featured-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    display: block;
}

.blog-content-card {
    background: #fff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    padding: 24px 28px;
}

@media(max-width:600px) {
    .blog-content-card {
        padding: 16px;
    }
}

.blog-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.blog-tag {
    background: #eff6ff;
    color: #1976d2;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.blog-tag:hover {
    background: #1976d2;
    color: #fff;
}

.blog-main-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin: 0 0 16px;
}

@media(max-width:600px) {
    .blog-main-title {
        font-size: 1.25rem;
    }
}

.blog-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e7ff;
    flex-shrink: 0;
}

.author-avatar-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.author-info {
    flex: 1;
}

.author-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.author-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.blog-stats {
    display: flex;
    gap: 16px;
    margin-left: auto;
    flex-wrap: wrap;
}

.blog-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #94a3b8;
}

.blog-stats .material-icons {
    font-size: 15px;
}

.blog-body {
    font-size: 15px;
    color: #334155;
    line-height: 1.8;
    word-break: break-word;
}

.blog-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 12px 0;
}

.blog-body h1,
.blog-body h2,
.blog-body h3 {
    color: #0f172a;
    margin: 20px 0 10px;
}

.blog-body p {
    margin: 0 0 14px;
}

.blog-body a {
    color: #1976d2;
}

.blog-body ul,
.blog-body ol {
    padding-left: 20px;
    margin-bottom: 14px;
}

.blog-body blockquote {
    border-left: 4px solid #1976d2;
    background: #eff6ff;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin: 16px 0;
    color: #475569;
    font-style: italic;
}

.blog-tags-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.blog-tags-section .label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-pill {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    margin: 3px;
    text-decoration: none;
    transition: all 0.2s;
}

.tag-pill:hover {
    background: #1976d2;
    color: #fff;
}

.blog-nav {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.blog-nav-item {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    padding: 14px 16px;
    text-decoration: none;
    transition: box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-nav-item:hover {
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.15);
}

.blog-nav-item.next {
    flex-direction: row-reverse;
    text-align: right;
}

.blog-nav-item .nav-icon {
    color: #1976d2;
    flex-shrink: 0;
}

.blog-nav-item .nav-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-nav-item .nav-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-nav-item:hover .nav-title {
    color: #1976d2;
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-bottom: 10px;
    border-bottom: 2px solid #1976d2;
    display: inline-block;
    margin-bottom: 16px;
}

.related-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.related-card:hover {
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.15);
}

.related-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform 0.4s;
}

.related-card:hover .related-card-img {
    transform: scale(1.04);
}

.related-card-img-wrap {
    overflow: hidden;
}

.related-card-body {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.related-card-cat {
    font-size: 10px;
    font-weight: 700;
    color: #1976d2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.related-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.related-card-title:hover {
    color: #1976d2;
}

.related-card-date {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.related-card-date .material-icons {
    font-size: 13px;
}

.blog-sidebar {
    padding-left: 12px;
}

@media(max-width:768px) {
    .blog-sidebar {
        padding-left: 0;
        margin-top: 16px;
    }
}

.sidebar-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    margin-bottom: 16px;
    overflow: hidden;
}

.sidebar-card-header {
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 14px;
}

.sidebar-cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #475569;
    text-decoration: none;
    transition: background 0.15s;
}

.sidebar-cat-item:last-child {
    border-bottom: none;
}

.sidebar-cat-item:hover,
.sidebar-cat-item.active {
    background: #eff6ff;
    color: #1976d2;
}

.cat-count {
    background: #e0e7ff;
    color: #1976d2;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.sidebar-cat-item.active .cat-count {
    background: #1976d2;
    color: #fff;
}

.recent-blog-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    transition: background 0.15s;
}

.recent-blog-item:last-child {
    border-bottom: none;
}

.recent-blog-item:hover {
    background: #eff6ff;
}

.recent-blog-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 7px;
    flex-shrink: 0;
}

.recent-title {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recent-blog-item:hover .recent-title {
    color: #1976d2;
}

.recent-date {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
}

.sidebar-search {
    padding: 12px 14px;
}

.sidebar-search input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
}

.sidebar-search input:focus {
    border-color: #1976d2;
}

.sidebar-search button {
    margin-top: 8px;
    width: 100%;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-search button:hover {
    background: #0d47a1;
}

/* ══════════════════════════════════
                                       MOBILE STYLES  (prefix: mxBl__)
                                    ══════════════════════════════════ */
@media (max-width: 768px) {

    .mxBl {
        min-height: 100vh;
        padding-bottom: 24px;
    }

    /* ── Hero ── */
    .mxBl__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 56px;
        position: relative;
        overflow: hidden;
    }

    .mxBl__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxBl__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxBl__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxBl__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 5px;
    }

    .mxBl__heroTitle {
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 10px;
        line-height: 1.35;
    }

    .mxBl__heroBreadcrumb {
        display: flex;
        align-items: center;
        gap: 3px;
        flex-wrap: wrap;
    }

    .mxBl__heroBreadcrumb a {
        font-size: 11px;
        color: rgba(255, 255, 255, .75);
        text-decoration: none;
        font-weight: 500;
    }

    .mxBl__heroBreadcrumb a:hover {
        color: #fff;
    }

    .mxBl__heroBreadcrumb span {
        font-size: 11px;
        color: rgba(255, 255, 255, .55);
    }

    .mxBl__heroBreadcrumb .material-icons {
        font-size: 12px;
        color: rgba(255, 255, 255, .45);
    }

    /* ── Featured Image (floats over hero) ── */
    .mxBl__featImgWrap {
        margin: -30px 12px 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
        position: relative;
        z-index: 10;
    }

    .mxBl__featImg {
        width: 100%;
        height: 210px;
        object-fit: cover;
        display: block;
    }

    .mxBl__catBadge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #1976d2;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: .5px;
        text-decoration: none;
    }

    /* ── Content card ── */
    .mxBl__card {
        background: #fff;
        border-radius: 20px;
        margin: 12px 12px 0;
        padding: 18px 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    }

    /* ── Tags row ── */
    .mxBl__tagRow {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxBl__tag {
        background: #eff6ff;
        color: #1976d2;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: .5px;
        text-decoration: none;
    }

    /* ── Title ── */
    .mxBl__title {
        font-size: 1.15rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.35;
        margin: 0 0 14px;
    }

    /* ── Author row ── */
    .mxBl__authorRow {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 0;
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 18px;
    }

    .mxBl__authorAvatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e0e7ff;
        flex-shrink: 0;
    }

    .mxBl__authorAvatarPh {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1976d2, #0d47a1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 17px;
        flex-shrink: 0;
    }

    .mxBl__authorName {
        font-size: 12.5px;
        font-weight: 700;
        color: #1e293b;
    }

    .mxBl__authorDate {
        font-size: 11px;
        color: #94a3b8;
        margin-top: 1px;
    }

    .mxBl__statChips {
        display: flex;
        gap: 8px;
        margin-left: auto;
        flex-wrap: wrap;
    }

    .mxBl__statChip {
        display: flex;
        align-items: center;
        gap: 3px;
        background: #f8fafd;
        border-radius: 8px;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
    }

    .mxBl__statChip .material-icons {
        font-size: 13px;
        color: #1976d2;
    }

    /* ── Blog body ── */
    .mxBl__body {
        font-size: 14.5px;
        color: #334155;
        line-height: 1.8;
        word-break: break-word;
    }

    .mxBl__body img {
        max-width: 100%;
        border-radius: 8px;
        margin: 12px 0;
    }

    .mxBl__body h1,
    .mxBl__body h2,
    .mxBl__body h3 {
        color: #0f172a;
        margin: 20px 0 10px;
    }

    .mxBl__body p {
        margin: 0 0 14px;
    }

    .mxBl__body a {
        color: #1976d2;
    }

    .mxBl__body ul,
    .mxBl__body ol {
        padding-left: 20px;
        margin-bottom: 14px;
    }

    .mxBl__body blockquote {
        border-left: 4px solid #1976d2;
        background: #eff6ff;
        padding: 12px 16px;
        border-radius: 0 8px 8px 0;
        margin: 16px 0;
        color: #475569;
        font-style: italic;
    }

    /* ── Tags section ── */
    .mxBl__tagsSection {
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid #f1f5f9;
    }

    .mxBl__tagsLabel {
        font-size: 10px;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 8px;
    }

    .mxBl__tagPill {
        display: inline-block;
        background: #f1f5f9;
        color: #475569;
        font-size: 12px;
        padding: 4px 12px;
        border-radius: 20px;
        margin: 3px;
        text-decoration: none;
    }

    /* ── Prev / Next ── */
    .mxBl__navRow {
        display: flex;
        gap: 10px;
        margin: 0 12px;
    }

    .mxBl__navItem {
        flex: 1;
        background: #fff;
        border-radius: 16px;
        padding: 13px 14px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        min-width: 0;
    }

    .mxBl__navItem--next {
        flex-direction: row-reverse;
        text-align: right;
    }

    .mxBl__navIcon {
        color: #1976d2;
        flex-shrink: 0;
        font-size: 22px;
    }

    .mxBl__navLabel {
        font-size: 9px;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .6px;
    }

    .mxBl__navTitle {
        font-size: 12px;
        font-weight: 700;
        color: #1e293b;
        margin-top: 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35;
    }

    /* ── Section title ── */
    .mxBl__sectionTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 14px;
    }

    .mxBl__sectionTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #1976d2, transparent);
        border-radius: 1px;
    }

    /* ── Related cards horizontal scroll ── */
    .mxBl__relatedScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxBl__relatedScroll::-webkit-scrollbar {
        display: none;
    }

    .mxBl__relatedCard {
        flex-shrink: 0;
        width: 210px;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
        display: flex;
        flex-direction: column;
    }

    .mxBl__relatedImg {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .mxBl__relatedBody {
        padding: 11px 12px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .mxBl__relatedCat {
        font-size: 10px;
        font-weight: 800;
        color: #1976d2;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 4px;
    }

    .mxBl__relatedTitle {
        font-size: 12.5px;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.4;
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 1;
    }

    .mxBl__relatedDate {
        font-size: 11px;
        color: #94a3b8;
        margin-top: 7px;
        display: flex;
        align-items: center;
        gap: 3px;
        font-weight: 500;
    }

    .mxBl__relatedDate .material-icons {
        font-size: 13px;
    }

    /* ── Sidebar accordion ── */
    .mxBl__sidebarCard {
        background: #fff;
        border-radius: 20px;
        margin: 12px 12px 0;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        overflow: hidden;
    }

    .mxBl__sidebarHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mxBl__sidebarHeadTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
    }

    .mxBl__sidebarHeadIcon {
        font-size: 20px;
        color: #94a3b8;
        transition: transform .25s;
    }

    .mxBl__sidebarCard.open .mxBl__sidebarHeadIcon {
        transform: rotate(180deg);
    }

    .mxBl__sidebarBody {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .mxBl__sidebarCard.open .mxBl__sidebarBody {
        max-height: 600px;
    }

    /* Search inside sidebar */
    .mxBl__searchWrap {
        padding: 12px 16px 16px;
    }

    .mxBl__searchInput {
        width: 100%;
        height: 44px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 12px;
        font-size: 13px;
        outline: none;
        box-sizing: border-box;
        font-family: inherit;
        color: #0f172a;
        transition: border-color .2s;
    }

    .mxBl__searchInput:focus {
        border-color: #1976d2;
    }

    .mxBl__searchBtn {
        margin-top: 8px;
        width: 100%;
        height: 44px;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-shadow: 0 3px 12px rgba(21, 101, 192, .25);
    }

    .mxBl__searchBtn .material-icons {
        font-size: 17px;
    }

    /* Category list inside sidebar */
    .mxBl__catItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        border-bottom: 1px solid #f8fafd;
        font-size: 13px;
        color: #475569;
        text-decoration: none;
        font-weight: 500;
    }

    .mxBl__catItem:last-child {
        border-bottom: none;
    }

    .mxBl__catItem.active {
        color: #1565c0;
        font-weight: 700;
        background: #f0f6fd;
    }

    .mxBl__catCount {
        background: #f0f6fd;
        color: #1565c0;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
    }

    .mxBl__catItem.active .mxBl__catCount {
        background: #1976d2;
        color: #fff;
    }

    /* Recent posts inside sidebar */
    .mxBl__recentItem {
        display: flex;
        gap: 10px;
        padding: 10px 16px;
        border-bottom: 1px solid #f8fafd;
        text-decoration: none;
        align-items: flex-start;
    }

    .mxBl__recentItem:last-child {
        border-bottom: none;
    }

    .mxBl__recentImg {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .mxBl__recentTitle {
        font-size: 12px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxBl__recentDate {
        font-size: 11px;
        color: #94a3b8;
        margin-top: 3px;
        font-weight: 500;
    }
}

/* ══════════════════════════════════
               SHOW / HIDE
            ══════════════════════════════════ */
.mxEmDesktop {
    display: block;
}

.mxEmMobile {
    display: none;
}

@media (max-width: 768px) {
    .mxEmDesktop {
        display: none !important;
    }

    .mxEmMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════
               DESKTOP STYLES (original, untouched)
            ══════════════════════════════════ */
.calc-page-header {
    width: 100%;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
}

.calc-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    margin-top: 10px;
}

.calc-header-card h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.calc-header-card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    margin: 4px 0 0;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex-wrap: wrap;
}

.breadcrumb-inner a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.breadcrumb-inner a:hover {
    color: #fff;
    text-decoration: underline;
}

.breadcrumb-inner span {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-inner .material-icons {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.calc-wrapper {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.calc-tabs {
    display: flex;
    border-bottom: 2px solid #f1f5f9;
    background: #f8fafc;
}

.calc-tab {
    flex: 1;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.calc-tab.active {
    color: #1976d2;
    border-bottom-color: #1976d2;
    background: #fff;
}

.calc-tab:hover {
    color: #1976d2;
}

.calc-panel {
    display: none;
    padding: 24px;
}

.calc-panel.active {
    display: block;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
    background: #fff;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #1976d2;
}

.input-prefix-wrap {
    position: relative;
}

.input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

.input-prefix-wrap input {
    padding-left: 28px;
}

.range-wrap {
    margin-top: 6px;
}

.range-wrap input[type=range] {
    width: 100%;
    border: none;
    padding: 0;
    accent-color: #1976d2;
    cursor: pointer;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.btn-calc {
    width: 100%;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    letter-spacing: 0.5px;
}

.btn-calc:hover {
    opacity: 0.9;
}

.btn-reset {
    width: 100%;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.btn-reset:hover {
    background: #e2e8f0;
}

.result-box {
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    margin-bottom: 16px;
}

.result-box .result-label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.result-box .result-value {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.result-box .result-sub {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 4px;
}

.result-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.breakdown-item {
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px;
    border-left: 3px solid #1976d2;
}

.breakdown-item.interest {
    border-left-color: #ef4444;
}

.breakdown-item.total {
    border-left-color: #f59e0b;
}

.breakdown-item .bi-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.breakdown-item .bi-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.chart-wrap {
    position: relative;
    height: 200px;
    margin-bottom: 16px;
}

.amort-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.amort-table th {
    background: #1976d2;
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
}

.amort-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}

.amort-table tr:hover td {
    background: #eff6ff;
}

.amort-scroll {
    max-height: 280px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.desc-box {
    background: #eff6ff;
    border-left: 4px solid #1976d2;
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 16px;
}

@media(max-width:600px) {
    .result-breakdown {
        grid-template-columns: 1fr;
    }

    .calc-panel {
        padding: 16px;
    }
}

/* ══════════════════════════════════
               MOBILE STYLES  (prefix: mxEm__)
            ══════════════════════════════════ */
@media (max-width: 768px) {
    .mxEm {
        min-height: 100vh;
        padding-bottom: 32px;
    }

    /* ── Hero ── */
    .mxEm__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 54px;
        position: relative;
        overflow: hidden;
    }

    .mxEm__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxEm__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxEm__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxEm__heroIcon {
        font-size: 28px;
        margin-bottom: 4px;
    }

    .mxEm__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxEm__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        font-weight: 500;
        margin: 0 0 10px;
    }

    .mxEm__heroBreadcrumb {
        display: flex;
        align-items: center;
        gap: 3px;
        flex-wrap: wrap;
    }

    .mxEm__heroBreadcrumb a {
        font-size: 11px;
        color: rgba(255, 255, 255, .75);
        text-decoration: none;
        font-weight: 500;
    }

    .mxEm__heroBreadcrumb span {
        font-size: 11px;
        color: rgba(255, 255, 255, .55);
    }

    .mxEm__heroBreadcrumb .material-icons {
        font-size: 12px;
        color: rgba(255, 255, 255, .45);
    }

    /* ── Card base ── */
    .mxEm__card {
        background: #fff;
        border-radius: 20px;
        margin: 12px 12px 0;
        padding: 18px 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    }

    .mxEm__cardTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
    }

    .mxEm__cardTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
        border-radius: 1px;
    }

    /* ── EMI Result box (floats over hero) ── */
    .mxEm__resultBox {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        border-radius: 20px;
        margin: -30px 12px 0;
        padding: 20px 18px;
        box-shadow: 0 8px 28px rgba(21, 101, 192, .28);
        position: relative;
        z-index: 10;
    }

    .mxEm__resultLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .75);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin: 0 0 4px;
    }

    .mxEm__resultValue {
        font-size: 2.2rem;
        font-weight: 900;
        color: #fff;
        letter-spacing: -1px;
        margin: 0;
        line-height: 1;
    }

    .mxEm__resultSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        margin: 5px 0 0;
        font-weight: 500;
    }

    .mxEm__breakdown {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 14px;
    }

    .mxEm__bItem {
        background: rgba(255, 255, 255, .12);
        border-radius: 12px;
        padding: 10px 12px;
    }

    .mxEm__bItem--full {
        grid-column: 1/-1;
    }

    .mxEm__bLabel {
        font-size: 10px;
        color: rgba(255, 255, 255, .7);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 3px;
    }

    .mxEm__bValue {
        font-size: 14px;
        font-weight: 800;
        color: #fff;
    }

    /* ── Chart card ── */
    .mxEm__chartWrap {
        position: relative;
        height: 200px;
    }

    /* ── Form inputs ── */
    .mxEm__formGroup {
        margin-bottom: 16px;
    }

    .mxEm__formLabel {
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: block;
        margin-bottom: 7px;
    }

    .mxEm__inputWrap {
        position: relative;
    }

    .mxEm__inputPrefix {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        font-weight: 700;
        color: #64748b;
        pointer-events: none;
    }

    .mxEm__input {
        width: 100%;
        height: 48px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        transition: border-color .2s, background .2s;
    }

    .mxEm__input--prefix {
        padding-left: 30px;
    }

    .mxEm__input:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
    }

    .mxEm__range {
        width: 100%;
        margin-top: 8px;
        accent-color: #1976d2;
        cursor: pointer;
        border: none;
        padding: 0;
        background: none;
    }

    .mxEm__rangeLabels {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: #94a3b8;
        margin-top: 2px;
        font-weight: 600;
    }

    /* ── Tabs (Calculator / Amortization) ── */
    .mxEm__tabs {
        display: flex;
        background: #f0f4fb;
        border-radius: 14px;
        padding: 4px;
        margin-bottom: 18px;
    }

    .mxEm__tabBtn {
        flex: 1;
        height: 40px;
        border: none;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        background: none;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .mxEm__tabBtn .material-icons {
        font-size: 16px;
    }

    .mxEm__tabBtn.active {
        background: #fff;
        color: #1565c0;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    }

    .mxEm__tabPanel {
        display: none;
    }

    .mxEm__tabPanel.active {
        display: block;
    }

    /* ── Calc buttons ── */
    .mxEm__calcBtn {
        width: 100%;
        height: 50px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 4px 16px rgba(21, 101, 192, .28);
        margin-top: 4px;
    }

    .mxEm__calcBtn .material-icons {
        font-size: 20px;
    }

    .mxEm__resetBtn {
        width: 100%;
        height: 44px;
        border-radius: 12px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        margin-top: 8px;
    }

    /* ── Amortization table ── */
    .mxEm__amortScroll {
        max-height: 300px;
        overflow-y: auto;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
    }

    .mxEm__amortTable {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }

    .mxEm__amortTable th {
        background: #1976d2;
        color: #fff;
        padding: 9px 10px;
        text-align: left;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .mxEm__amortTable td {
        padding: 8px 10px;
        border-bottom: 1px solid #f1f5f9;
        color: #374151;
        font-weight: 500;
    }

    .mxEm__amortTable tr:nth-child(even) td {
        background: #f8fafd;
    }

    /* ── Info chips ── */
    .mxEm__infoBox {
        background: #eff6ff;
        border-left: 4px solid #1976d2;
        border-radius: 0 12px 12px 0;
        padding: 12px 14px;
        font-size: 12.5px;
        color: #475569;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .mxEm__formulaBox {
        background: #f8fafd;
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 12.5px;
        color: #475569;
        font-family: monospace;
        margin-bottom: 0;
    }

    .mxEm__noteBox {
        background: #fef3c7;
        border-radius: 12px;
        padding: 11px 13px;
        font-size: 12px;
        color: #92400e;
        border-left: 3px solid #f59e0b;
    }

    /* ── Other calculators ── */
    .mxEm__calcLink {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid #f8fafd;
        text-decoration: none;
    }

    .mxEm__calcLink:last-child {
        border-bottom: none;
    }

    .mxEm__calcLink .material-icons {
        font-size: 22px;
        color: #1976d2;
    }

    .mxEm__calcLinkText {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
    }

    .mxEm__calcLinkArr {
        margin-left: auto;
        font-size: 18px;
        color: #cbd5e1;
    }

    /* ── Properties horizontal scroll ── */
    .mxEm__propScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxEm__propScroll::-webkit-scrollbar {
        display: none;
    }

    .mxEm__propCard {
        flex-shrink: 0;
        width: 200px;
        background: #f8fafd;
        border-radius: 14px;
        overflow: hidden;
    }

    .mxEm__propCard img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        display: block;
    }

    .mxEm__propCardBody {
        padding: 10px;
    }

    .mxEm__propCardTitle {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 3px;
        line-height: 1.3;
    }

    .mxEm__propCardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxEm__propCardPrice {
        font-size: 13px;
        font-weight: 900;
        color: #1565c0;
        margin: 0;
    }

    .mxEm__propCardLoc {
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
        margin: 3px 0 0;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .mxEm__propCardLoc .material-icons {
        font-size: 12px;
    }

    /* ── Blog cards ── */
    .mxEm__blogCards {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxEm__blogCards::-webkit-scrollbar {
        display: none;
    }

    .mxEm__blogCard {
        flex-shrink: 0;
        width: 220px;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    }

    .mxEm__blogCard img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .mxEm__blogCardBody {
        padding: 12px;
    }

    .mxEm__blogCardTitle {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxEm__blogCardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxEm__blogCardText {
        font-size: 11.5px;
        color: #64748b;
        line-height: 1.5;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxEm__blogCardMeta {
        display: flex;
        justify-content: space-between;
        font-size: 10.5px;
        color: #94a3b8;
        font-weight: 600;
    }

    /* ── Sell CTA ── */
    .mxEm__sellCard {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        border-radius: 20px;
        margin: 12px 12px 0;
        padding: 22px 18px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .mxEm__sellCard::before {
        content: '';
        position: absolute;
        top: -30px;
        right: -20px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxEm__sellTitle {
        font-size: 1.05rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 8px;
    }

    .mxEm__sellText {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .8);
        line-height: 1.6;
        margin: 0 0 16px;
    }

    .mxEm__sellBtn {
        display: inline-block;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        padding: 11px 24px;
        border-radius: 12px;
        text-decoration: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    }
}

/* ══════════════════════════════════
               SHOW / HIDE
            ══════════════════════════════════ */
.mxAcDesktop {
    display: block;
}

.mxAcMobile {
    display: none;
}

@media (max-width: 768px) {
    .mxAcDesktop {
        display: none !important;
    }

    .mxAcMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════
               DESKTOP STYLES (original, untouched)
            ══════════════════════════════════ */
.calc-page-header {
    width: 100%;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
}

.calc-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    margin-top: 10px;
}

.calc-header-card h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.calc-header-card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    margin: 4px 0 0;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex-wrap: wrap;
}

.breadcrumb-inner a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.breadcrumb-inner a:hover {
    color: #fff;
}

.breadcrumb-inner span {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-inner .material-icons {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.calc-wrapper {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
    background: #fff;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #1976d2;
}

.btn-calc {
    width: 100%;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-calc:hover {
    opacity: 0.9;
}

.desc-box {
    background: #eff6ff;
    border-left: 4px solid #1976d2;
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 16px;
}

.converter-card {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
}

.converter-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 20px;
}

@media(max-width:600px) {
    .converter-row {
        grid-template-columns: 1fr;
    }

    .swap-btn-wrap {
        text-align: center;
    }
}

.swap-btn {
    background: #eff6ff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: #1976d2;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin-bottom: 2px;
}

.swap-btn:hover {
    background: #1976d2;
    color: #fff;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.result-unit {
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px;
    border-left: 3px solid #1976d2;
    transition: all 0.2s;
}

.result-unit.highlight {
    background: #eff6ff;
    border-left-color: #0d47a1;
}

.result-unit .ru-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.result-unit .ru-value {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-all;
}

.conv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 16px;
}

.conv-table th {
    background: #1976d2;
    color: #fff;
    padding: 9px 12px;
    text-align: left;
    font-weight: 600;
}

.conv-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}

.conv-table tr:hover td {
    background: #eff6ff;
}

/* ══════════════════════════════════
               MOBILE STYLES  (prefix: mxAc__)
            ══════════════════════════════════ */
@media (max-width: 768px) {

    .mxAc {
        min-height: 100vh;
        padding-bottom: 32px;
    }

    /* ── Hero ── */
    .mxAc__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 54px;
        position: relative;
        overflow: hidden;
    }

    .mxAc__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxAc__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxAc__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxAc__heroIcon {
        font-size: 28px;
        margin-bottom: 4px;
    }

    .mxAc__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxAc__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        font-weight: 500;
        margin: 0 0 10px;
    }

    .mxAc__heroBreadcrumb {
        display: flex;
        align-items: center;
        gap: 3px;
        flex-wrap: wrap;
    }

    .mxAc__heroBreadcrumb a {
        font-size: 11px;
        color: rgba(255, 255, 255, .75);
        text-decoration: none;
        font-weight: 500;
    }

    .mxAc__heroBreadcrumb span {
        font-size: 11px;
        color: rgba(255, 255, 255, .55);
    }

    .mxAc__heroBreadcrumb .material-icons {
        font-size: 12px;
        color: rgba(255, 255, 255, .45);
    }

    /* ── Card base ── */
    .mxAc__card {
        background: #fff;
        border-radius: 20px;
        margin: 12px 12px 0;
        padding: 18px 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    }

    .mxAc__cardTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
    }

    .mxAc__cardTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
        border-radius: 1px;
    }

    /* ── Converter floating card over hero ── */
    .mxAc__converterBox {
        background: #fff;
        border-radius: 20px;
        margin: -30px 12px 0;
        padding: 18px 16px;
        box-shadow: 0 8px 28px rgba(15, 23, 42, .13);
        position: relative;
        z-index: 10;
    }

    /* ── Form ── */
    .mxAc__formLabel {
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: block;
        margin-bottom: 7px;
    }

    .mxAc__input {
        width: 100%;
        height: 50px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        transition: border-color .2s, background .2s;
    }

    .mxAc__input:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
    }

    .mxAc__select {
        width: 100%;
        height: 50px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        transition: border-color .2s;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%231976d2'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
    }

    .mxAc__select:focus {
        border-color: #1976d2;
        background-color: #fff;
    }

    .mxAc__formRow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .mxAc__swapRow {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0 14px;
    }

    .mxAc__swapBtn {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        border: none;
        border-radius: 14px;
        height: 44px;
        padding: 0 20px;
        cursor: pointer;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: inherit;
        box-shadow: 0 3px 10px rgba(21, 101, 192, .25);
        -webkit-tap-highlight-color: transparent;
    }

    .mxAc__swapBtn .material-icons {
        font-size: 18px;
    }

    /* ── Result grid ── */
    .mxAc__resultGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 4px;
    }

    .mxAc__resultUnit {
        background: #f8fafd;
        border-radius: 12px;
        padding: 12px 12px;
        border-left: 3px solid #1976d2;
    }

    .mxAc__resultUnit.highlight {
        background: #eff6ff;
        border-left-color: #0d47a1;
    }

    .mxAc__ruLabel {
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 4px;
    }

    .mxAc__ruValue {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        word-break: break-all;
        line-height: 1.3;
    }

    /* ── Reference table ── */
    .mxAc__tableScroll {
        overflow-x: auto;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
    }

    .mxAc__table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11.5px;
        min-width: 360px;
    }

    .mxAc__table th {
        background: #1976d2;
        color: #fff;
        padding: 9px 10px;
        text-align: left;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
        white-space: nowrap;
    }

    .mxAc__table td {
        padding: 8px 10px;
        border-bottom: 1px solid #f1f5f9;
        color: #374151;
        font-weight: 500;
    }

    .mxAc__table tr:nth-child(even) td {
        background: #f8fafd;
    }

    /* ── Common units list ── */
    .mxAc__unitRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f8fafd;
        font-size: 13px;
        color: #475569;
        font-weight: 500;
    }

    .mxAc__unitRow:last-child {
        border-bottom: none;
    }

    .mxAc__unitBadge {
        font-size: 11px;
        font-weight: 700;
        color: #1976d2;
        background: #eff6ff;
        padding: 2px 9px;
        border-radius: 20px;
    }

    /* ── Other calculators ── */
    .mxAc__calcLink {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid #f8fafd;
        text-decoration: none;
    }

    .mxAc__calcLink:last-child {
        border-bottom: none;
    }

    .mxAc__calcLink .material-icons {
        font-size: 22px;
        color: #1976d2;
    }

    .mxAc__calcLinkText {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
    }

    .mxAc__calcLinkArr {
        margin-left: auto;
        font-size: 18px;
        color: #cbd5e1;
    }

    /* ── Properties scroll ── */
    .mxAc__propScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxAc__propScroll::-webkit-scrollbar {
        display: none;
    }

    .mxAc__propCard {
        flex-shrink: 0;
        width: 200px;
        background: #f8fafd;
        border-radius: 14px;
        overflow: hidden;
    }

    .mxAc__propCard img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        display: block;
    }

    .mxAc__propCardBody {
        padding: 10px;
    }

    .mxAc__propCardTitle {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 3px;
        line-height: 1.3;
    }

    .mxAc__propCardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxAc__propCardPrice {
        font-size: 13px;
        font-weight: 900;
        color: #1565c0;
        margin: 0;
    }

    .mxAc__propCardLoc {
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
        margin: 3px 0 0;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .mxAc__propCardLoc .material-icons {
        font-size: 12px;
    }

    /* ── Sell CTA ── */
    .mxAc__sellCard {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        border-radius: 20px;
        margin: 12px 12px 0;
        padding: 22px 18px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .mxAc__sellCard::before {
        content: '';
        position: absolute;
        top: -30px;
        right: -20px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxAc__sellTitle {
        font-size: 1.05rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 8px;
    }

    .mxAc__sellText {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .8);
        line-height: 1.6;
        margin: 0 0 16px;
    }

    .mxAc__sellBtn {
        display: inline-block;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        padding: 11px 24px;
        border-radius: 12px;
        text-decoration: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    }

    /* ── Blog cards ── */
    .mxAc__blogCards {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxAc__blogCards::-webkit-scrollbar {
        display: none;
    }

    .mxAc__blogCard {
        flex-shrink: 0;
        width: 220px;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    }

    .mxAc__blogCard img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .mxAc__blogCardBody {
        padding: 12px;
    }

    .mxAc__blogCardTitle {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxAc__blogCardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxAc__blogCardText {
        font-size: 11.5px;
        color: #64748b;
        line-height: 1.5;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxAc__blogCardMeta {
        display: flex;
        justify-content: space-between;
        font-size: 10.5px;
        color: #94a3b8;
        font-weight: 600;
    }
}

/* ══════════════════════════════════════
                                           DESKTOP STYLES — original
                                        ══════════════════════════════════════ */

.calc-page-header {
    width: 100%;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
}

.calc-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    margin-top: 10px;
}

.calc-header-card h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.calc-header-card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    margin: 4px 0 0;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex-wrap: wrap;
}

.breadcrumb-inner a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.breadcrumb-inner a:hover {
    color: #fff;
}

.breadcrumb-inner span {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-inner .material-icons {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.calc-wrapper {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #1976d2;
}

.input-prefix-wrap {
    position: relative;
}

.input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

.input-prefix-wrap input {
    padding-left: 28px;
}

.btn-calc {
    width: 100%;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-calc:hover {
    opacity: 0.9;
}

.desc-box {
    background: #eff6ff;
    border-left: 4px solid #1976d2;
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 16px;
}

.section-header {
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-body {
    padding: 20px;
}

.verdict-box {
    border-radius: 10px;
    padding: 20px 24px;
    text-align: center;
    margin-bottom: 16px;
}

.verdict-box.buy {
    background: linear-gradient(135deg, #059669, #047857);
}

.verdict-box.rent {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.verdict-box.neutral {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.verdict-box .v-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-bottom: 6px;
}

.verdict-box .v-title {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.verdict-box .v-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.compare-card {
    border-radius: 10px;
    padding: 16px;
    border: 2px solid #e2e8f0;
}

.compare-card.buy-card {
    border-color: #059669;
    background: #f0fdf4;
}

.compare-card.rent-card {
    border-color: #7c3aed;
    background: #faf5ff;
}

.compare-card .cc-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}

.compare-card.buy-card .cc-title {
    color: #059669;
}

.compare-card.rent-card .cc-title {
    color: #7c3aed;
}

.compare-card .cc-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #475569;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.compare-card .cc-row:last-child {
    border-bottom: none;
    font-weight: 700;
    color: #0f172a;
}

.chart-wrap {
    height: 220px;
    position: relative;
}

/* ══════════════════════════════════════
                                           MOBILE ONLY STYLES
                                        ══════════════════════════════════════ */

.mxRvb__mobileView {
    display: none;
}

@media (max-width: 768px) {

    .mxRvb__desktopView {
        display: none !important;
    }

    .mxRvb__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }

    .mxRvb {
        padding-bottom: 40px;
    }

    /* ── Hero ── */
    .mxRvb__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 48px;
        position: relative;
        overflow: hidden;
    }

    .mxRvb__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxRvb__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxRvb__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxRvb__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxRvb__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* ── Breadcrumb ── */
    .mxRvb__breadcrumb {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        margin-top: 8px;
        flex-wrap: wrap;
    }

    .mxRvb__breadcrumb a {
        color: rgba(255, 255, 255, .8);
        text-decoration: none;
    }

    .mxRvb__breadcrumb span {
        color: rgba(255, 255, 255, .55);
    }

    .mxRvb__breadcrumb i {
        font-size: 12px;
        color: rgba(255, 255, 255, .45);
    }

    /* ── Desc Box ── */
    .mxRvb__descBox {
        margin: -22px 12px 0;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(21, 101, 192, .12);
        padding: 14px 16px;
        position: relative;
        z-index: 10;
        font-size: 12.5px;
        color: #475569;
        line-height: 1.7;
        border-left: 4px solid #1976d2;
    }

    /* ── Tabs ── */
    .mxRvb__tabs {
        display: flex;
        margin: 14px 12px 0;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
        overflow: hidden;
    }

    .mxRvb__tab {
        flex: 1;
        padding: 10px 6px;
        font-size: 11.5px;
        font-weight: 700;
        border: none;
        background: transparent;
        color: #64748b;
        cursor: pointer;
        font-family: inherit;
        transition: all .2s;
        -webkit-tap-highlight-color: transparent;
    }

    .mxRvb__tab.active {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        border-radius: 10px;
    }

    /* ── Input Card ── */
    .mxRvb__inputCard {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
        margin: 12px 12px 0;
        overflow: hidden;
    }

    .mxRvb__inputHeader {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 800;
        color: #fff;
    }

    .mxRvb__inputHeader.buy {
        background: linear-gradient(135deg, #1565c0, #1976d2);
    }

    .mxRvb__inputHeader.rent {
        background: linear-gradient(135deg, #7c3aed, #6d28d9);
    }

    .mxRvb__inputHeader i {
        font-size: 16px;
    }

    .mxRvb__inputBody {
        padding: 14px 16px;
    }

    .mxRvb__formGroup {
        margin-bottom: 12px;
    }

    .mxRvb__formLabel {
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: block;
        margin-bottom: 5px;
    }

    .mxRvb__formInput {
        width: 100%;
        height: 44px;
        border: 1.5px solid #e2e8f0;
        border-radius: 11px;
        padding: 0 12px;
        font-size: 13.5px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        transition: border .2s;
    }

    .mxRvb__formInput:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
    }

    .mxRvb__prefixWrap {
        position: relative;
    }

    .mxRvb__prefix {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        font-weight: 700;
        color: #64748b;
    }

    .mxRvb__prefixWrap .mxRvb__formInput {
        padding-left: 24px;
    }

    /* ── Calculate Button ── */
    .mxRvb__calcBtn {
        margin: 12px 12px 0;
        width: calc(100% - 24px);
        height: 50px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 4px 16px rgba(21, 101, 192, .28);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxRvb__calcBtn i {
        font-size: 18px;
    }

    /* ── Results ── */
    .mxRvb__results {
        padding: 0 12px;
        margin-top: 12px;
    }

    .mxRvb__verdictBox {
        border-radius: 16px;
        padding: 18px 20px;
        text-align: center;
        margin-bottom: 12px;
    }

    .mxRvb__verdictBox.buy {
        background: linear-gradient(135deg, #059669, #047857);
    }

    .mxRvb__verdictBox.rent {
        background: linear-gradient(135deg, #7c3aed, #6d28d9);
    }

    .mxRvb__verdictBox.neutral {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .mxRvb__vLabel {
        color: rgba(255, 255, 255, .8);
        font-size: 11px;
        margin-bottom: 4px;
    }

    .mxRvb__vTitle {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 800;
        margin-bottom: 3px;
    }

    .mxRvb__vSub {
        color: rgba(255, 255, 255, .85);
        font-size: 12px;
    }

    .mxRvb__compareGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .mxRvb__compareCard {
        border-radius: 14px;
        padding: 14px;
        border: 2px solid #e2e8f0;
    }

    .mxRvb__compareCard.buy-card {
        border-color: #059669;
        background: #f0fdf4;
    }

    .mxRvb__compareCard.rent-card {
        border-color: #7c3aed;
        background: #faf5ff;
    }

    .mxRvb__ccTitle {
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .mxRvb__compareCard.buy-card .mxRvb__ccTitle {
        color: #059669;
    }

    .mxRvb__compareCard.rent-card .mxRvb__ccTitle {
        color: #7c3aed;
    }

    .mxRvb__ccRow {
        display: flex;
        justify-content: space-between;
        font-size: 10.5px;
        color: #475569;
        padding: 3px 0;
        border-bottom: 1px solid rgba(0, 0, 0, .05);
    }

    .mxRvb__ccRow:last-child {
        border-bottom: none;
        font-weight: 700;
        color: #0f172a;
        font-size: 11px;
    }

    .mxRvb__chartCard {
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        margin-bottom: 12px;
    }

    .mxRvb__chartTitle {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 10px;
    }

    .mxRvb__chartWrap {
        height: 200px;
        position: relative;
    }

    /* ── Tips Card ── */
    .mxRvb__tipsCard {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        margin: 12px 12px 0;
        padding: 16px;
    }

    .mxRvb__tipsTitle {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 8px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .mxRvb__tipsList {
        font-size: 12px;
        color: #475569;
        line-height: 1.8;
        padding-left: 16px;
        margin: 0 0 12px;
    }

    .mxRvb__noteBox {
        background: #fef3c7;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 11.5px;
        color: #92400e;
        border-left: 3px solid #f59e0b;
        margin-bottom: 14px;
    }

    .mxRvb__otherCalcTitle {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 8px;
    }

    .mxRvb__calcLink {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #f8fafc;
        border-radius: 10px;
        text-decoration: none;
        margin-bottom: 7px;
    }

    .mxRvb__calcLink i {
        color: #1976d2;
        font-size: 18px;
    }

    .mxRvb__calcLink span {
        font-size: 12.5px;
        font-weight: 600;
        color: #1e293b;
    }

    /* ── Section Title ── */
    .mxRvb__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxRvb__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    .mxRvb__secHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        margin: 16px 0 10px;
    }

    .mxRvb__secHeaderTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .mxRvb__secHeaderBtn {
        height: 32px;
        padding: 0 14px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    /* ── Property Cards Horizontal Scroll ── */
    .mxRvb__propScroll {
        display: flex;
        gap: 12px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mxRvb__propScroll::-webkit-scrollbar {
        display: none;
    }

    .mxRvb__propCard {
        flex-shrink: 0;
        width: 240px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .09);
        overflow: hidden;
    }

    .mxRvb__propImg {
        position: relative;
        height: 150px;
        overflow: hidden;
    }

    .mxRvb__propImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxRvb__propBadges {
        position: absolute;
        top: 8px;
        left: 8px;
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }

    .mxRvb__badge {
        padding: 2px 8px;
        border-radius: 5px;
        font-size: 9px;
        font-weight: 800;
        color: #fff;
    }

    .mxRvb__badge--blue {
        background: #1976d2;
    }

    .mxRvb__badge--green {
        background: #16a34a;
    }

    .mxRvb__wishBtn {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .88);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .mxRvb__wishBtn i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxRvb__propBody {
        padding: 10px 12px;
    }

    .mxRvb__propTitle {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
        line-height: 1.3;
    }

    .mxRvb__propTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxRvb__propLoc {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .mxRvb__propLoc i {
        font-size: 12px;
        color: #94a3b8;
    }

    .mxRvb__propPrice {
        font-size: 13px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 8px;
    }

    .mxRvb__propStats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
        margin-bottom: 10px;
    }

    .mxRvb__stat {
        background: #f8fafd;
        border-radius: 8px;
        padding: 5px 4px;
        text-align: center;
    }

    .mxRvb__statLabel {
        font-size: 8px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        display: block;
        margin-bottom: 1px;
    }

    .mxRvb__statVal {
        font-size: 10.5px;
        font-weight: 800;
        color: #0f172a;
    }

    .mxRvb__propFooter {
        display: flex;
        gap: 6px;
        padding: 0 12px 12px;
    }

    .mxRvb__btnNum {
        flex: 1;
        height: 36px;
        border-radius: 9px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxRvb__btnContact {
        flex: 1.4;
        height: 36px;
        border-radius: 9px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxRvb__btnContact i {
        font-size: 14px;
    }

    /* ── Sell Section ── */
    .mxRvb__sellCard {
        background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
        border-radius: 20px;
        margin: 16px 12px 0;
        padding: 20px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: 0 4px 20px rgba(21, 101, 192, .3);
    }

    .mxRvb__sellIcon img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .mxRvb__sellContent h3 {
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        margin: 0 0 5px;
    }

    .mxRvb__sellContent p {
        font-size: 11.5px;
        color: rgba(255, 255, 255, .8);
        margin: 0 0 10px;
        line-height: 1.5;
    }

    .mxRvb__sellBtn {
        display: inline-block;
        height: 34px;
        padding: 0 16px;
        border-radius: 8px;
        background: #fff;
        color: #1565c0;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
        display: flex;
        align-items: center;
        width: fit-content;
    }

    /* ── Promotions ── */
    .mxRvb__promoScroll {
        display: flex;
        gap: 10px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mxRvb__promoScroll::-webkit-scrollbar {
        display: none;
    }

    .mxRvb__promoItem {
        flex-shrink: 0;
        width: 280px;
        border-radius: 12px;
        overflow: hidden;
    }

    .mxRvb__promoItem img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    /* ── Blog Cards ── */
    .mxRvb__blogScroll {
        display: flex;
        gap: 12px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mxRvb__blogScroll::-webkit-scrollbar {
        display: none;
    }

    .mxRvb__blogCard {
        flex-shrink: 0;
        width: 220px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        overflow: hidden;
    }

    .mxRvb__blogImg {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .mxRvb__blogBody {
        padding: 12px;
    }

    .mxRvb__blogTitle {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 6px;
        line-height: 1.4;
        text-decoration: none;
        display: block;
    }

    .mxRvb__blogExcerpt {
        font-size: 11px;
        color: #64748b;
        margin: 0 0 8px;
        line-height: 1.5;
    }

    .mxRvb__blogMeta {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: #94a3b8;
        font-weight: 600;
    }

}

/* ══════════════════════════════════
                               DESKTOP — original styles
                            ══════════════════════════════════ */

.calc-page-header {
    width: 100%;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
}

.calc-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    margin-top: 10px;
}

.calc-header-card h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.calc-header-card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    margin: 4px 0 0;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex-wrap: wrap;
}

.breadcrumb-inner a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.breadcrumb-inner a:hover {
    color: #fff;
}

.breadcrumb-inner span {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-inner .material-icons {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.calc-wrapper {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
    background: #fff;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #1976d2;
}

.input-prefix-wrap {
    position: relative;
}

.input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

.input-prefix-wrap input {
    padding-left: 28px;
}

.btn-calc {
    width: 100%;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 4px;
}

.btn-calc:hover {
    opacity: 0.9;
}

.desc-box {
    background: #eff6ff;
    border-left: 4px solid #1976d2;
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 16px;
}

.result-box {
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    margin-bottom: 16px;
}

.result-box .result-label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.result-box .result-value {
    font-size: 2rem;
    font-weight: 800;
}

.result-box .result-sub {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 4px;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

@media(max-width:500px) {
    .breakdown-grid {
        grid-template-columns: 1fr;
    }
}

.bd-item {
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px;
    border-left: 3px solid #1976d2;
}

.bd-item.reg {
    border-left-color: #ef4444;
}

.bd-item.misc {
    border-left-color: #f59e0b;
}

.bd-item.total {
    border-left-color: #059669;
    grid-column: span 2;
}

@media(max-width:500px) {
    .bd-item.total {
        grid-column: span 1;
    }
}

.bd-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.bd-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.state-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.state-table th {
    background: #1976d2;
    color: #fff;
    padding: 9px 12px;
    text-align: left;
    font-weight: 600;
}

.state-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}

.state-table tr:hover td {
    background: #eff6ff;
}

.state-table .highlight-row td {
    background: #eff6ff;
    font-weight: 600;
    color: #1976d2;
}

/* ══════════════════════════════════
                               MOBILE — hide/show
                            ══════════════════════════════════ */

.mxSd__mobileView {
    display: none;
}

@media (max-width: 768px) {

    .mxSd__desktopView {
        display: none !important;
    }

    .mxSd__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }

    .mxSd {
        padding-bottom: 40px;
    }

    /* Hero */
    .mxSd__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 48px;
        position: relative;
        overflow: hidden;
    }

    .mxSd__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxSd__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxSd__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxSd__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxSd__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0 0 6px;
    }

    .mxSd__breadcrumb {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        flex-wrap: wrap;
    }

    .mxSd__breadcrumb a {
        color: rgba(255, 255, 255, .8);
        text-decoration: none;
    }

    .mxSd__breadcrumb span {
        color: rgba(255, 255, 255, .55);
    }

    .mxSd__breadcrumb i {
        font-size: 12px;
        color: rgba(255, 255, 255, .45);
    }

    /* Desc box */
    .mxSd__descBox {
        margin: -22px 12px 0;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(21, 101, 192, .12);
        padding: 14px 16px;
        position: relative;
        z-index: 10;
        font-size: 12.5px;
        color: #475569;
        line-height: 1.7;
        border-left: 4px solid #1976d2;
    }

    /* Tabs */
    .mxSd__tabs {
        display: flex;
        margin: 14px 12px 0;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
        overflow: hidden;
    }

    .mxSd__tab {
        flex: 1;
        padding: 10px 6px;
        font-size: 10.5px;
        font-weight: 700;
        border: none;
        background: transparent;
        color: #64748b;
        cursor: pointer;
        font-family: inherit;
        transition: all .2s;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSd__tab.active {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        border-radius: 10px;
    }

    /* Input card */
    .mxSd__inputCard {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
        margin: 12px 12px 0;
        overflow: hidden;
    }

    .mxSd__inputHeader {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, #1565c0, #1976d2);
    }

    .mxSd__inputHeader i {
        font-size: 16px;
    }

    .mxSd__inputBody {
        padding: 14px 16px;
    }

    .mxSd__formGroup {
        margin-bottom: 12px;
    }

    .mxSd__formLabel {
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: block;
        margin-bottom: 5px;
    }

    .mxSd__formInput,
    .mxSd__formSelect {
        width: 100%;
        height: 44px;
        border: 1.5px solid #e2e8f0;
        border-radius: 11px;
        padding: 0 12px;
        font-size: 13.5px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        transition: border .2s;
        appearance: none;
        -webkit-appearance: none;
    }

    .mxSd__formInput:focus,
    .mxSd__formSelect:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
    }

    .mxSd__prefixWrap {
        position: relative;
    }

    .mxSd__prefix {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        font-weight: 700;
        color: #64748b;
    }

    .mxSd__prefixWrap .mxSd__formInput {
        padding-left: 24px;
    }

    /* Calc button */
    .mxSd__calcBtn {
        margin: 12px 12px 0;
        width: calc(100% - 24px);
        height: 50px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 4px 16px rgba(21, 101, 192, .28);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSd__calcBtn i {
        font-size: 18px;
    }

    /* Result card */
    .mxSd__resultCard {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        border-radius: 18px;
        padding: 18px 20px;
        margin: 12px 12px 0;
        color: #fff;
        box-shadow: 0 4px 20px rgba(21, 101, 192, .3);
    }

    .mxSd__resultLabel {
        font-size: 11px;
        color: rgba(255, 255, 255, .75);
        margin-bottom: 4px;
    }

    .mxSd__resultValue {
        font-size: 1.8rem;
        font-weight: 900;
        margin-bottom: 3px;
    }

    .mxSd__resultSub {
        font-size: 11.5px;
        color: rgba(255, 255, 255, .75);
    }

    /* Breakdown grid */
    .mxSd__breakGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 10px 12px 0;
    }

    .mxSd__breakItem {
        background: #fff;
        border-radius: 14px;
        padding: 12px 14px;
        border-left: 3px solid #1976d2;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .07);
    }

    .mxSd__breakItem.reg {
        border-left-color: #ef4444;
    }

    .mxSd__breakItem.misc {
        border-left-color: #f59e0b;
    }

    .mxSd__breakItem.grand {
        border-left-color: #059669;
        grid-column: span 2;
    }

    .mxSd__breakLabel {
        font-size: 9.5px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .3px;
        display: block;
        margin-bottom: 3px;
    }

    .mxSd__breakValue {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
    }

    /* Note box */
    .mxSd__noteBox {
        background: #fef3c7;
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 11.5px;
        color: #92400e;
        border-left: 3px solid #f59e0b;
        margin: 10px 12px 0;
    }

    /* State table */
    .mxSd__tableCard {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .08);
        margin: 12px 12px 0;
        overflow: hidden;
    }

    .mxSd__tableHeader {
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
    }

    .mxSd__tableWrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mxSd__table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11.5px;
        min-width: 420px;
    }

    .mxSd__table th {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        padding: 9px 12px;
        text-align: left;
        font-weight: 700;
        font-size: 11px;
    }

    .mxSd__table td {
        padding: 9px 12px;
        border-bottom: 1px solid #f1f5f9;
        color: #374151;
    }

    .mxSd__table .highlight-row td {
        background: #eff6ff;
        font-weight: 700;
        color: #1976d2;
    }

    /* Info card */
    .mxSd__infoCard {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        margin: 12px 12px 0;
        padding: 16px;
    }

    .mxSd__infoTitle {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 8px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .mxSd__infoText {
        font-size: 12px;
        color: #475569;
        line-height: 1.7;
        margin: 0 0 12px;
    }

    .mxSd__infoList {
        font-size: 12px;
        color: #475569;
        line-height: 1.8;
        padding-left: 16px;
        margin: 0 0 12px;
    }

    .mxSd__calcLink {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #f8fafc;
        border-radius: 10px;
        text-decoration: none;
        margin-bottom: 7px;
    }

    .mxSd__calcLink i {
        color: #1976d2;
        font-size: 18px;
    }

    .mxSd__calcLink span {
        font-size: 12.5px;
        font-weight: 600;
        color: #1e293b;
    }

    /* Section header */
    .mxSd__secHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        margin: 16px 0 10px;
    }

    .mxSd__secHeaderTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .mxSd__secHeaderBtn {
        height: 32px;
        padding: 0 14px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    /* Property cards scroll */
    .mxSd__propScroll {
        display: flex;
        gap: 12px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mxSd__propScroll::-webkit-scrollbar {
        display: none;
    }

    .mxSd__propCard {
        flex-shrink: 0;
        width: 240px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .09);
        overflow: hidden;
    }

    .mxSd__propImg {
        position: relative;
        height: 150px;
        overflow: hidden;
    }

    .mxSd__propImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxSd__propBadges {
        position: absolute;
        top: 8px;
        left: 8px;
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }

    .mxSd__badge {
        padding: 2px 8px;
        border-radius: 5px;
        font-size: 9px;
        font-weight: 800;
        color: #fff;
    }

    .mxSd__badge--blue {
        background: #1976d2;
    }

    .mxSd__badge--green {
        background: #16a34a;
    }

    .mxSd__wishBtn {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .88);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .mxSd__wishBtn i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxSd__propBody {
        padding: 10px 12px;
    }

    .mxSd__propTitle {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
        line-height: 1.3;
    }

    .mxSd__propTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxSd__propLoc {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .mxSd__propLoc i {
        font-size: 12px;
        color: #94a3b8;
    }

    .mxSd__propPrice {
        font-size: 13px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 8px;
    }

    .mxSd__propStats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
        margin-bottom: 10px;
    }

    .mxSd__stat {
        background: #f8fafd;
        border-radius: 8px;
        padding: 5px 4px;
        text-align: center;
    }

    .mxSd__statLabel {
        font-size: 8px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        display: block;
        margin-bottom: 1px;
    }

    .mxSd__statVal {
        font-size: 10.5px;
        font-weight: 800;
        color: #0f172a;
    }

    .mxSd__propFooter {
        display: flex;
        gap: 6px;
        padding: 0 12px 12px;
    }

    .mxSd__btnNum {
        flex: 1;
        height: 36px;
        border-radius: 9px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSd__btnContact {
        flex: 1.4;
        height: 36px;
        border-radius: 9px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSd__btnContact i {
        font-size: 14px;
    }

    /* Sell card */
    .mxSd__sellCard {
        background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
        border-radius: 20px;
        margin: 16px 12px 0;
        padding: 20px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: 0 4px 20px rgba(21, 101, 192, .3);
    }

    .mxSd__sellIcon img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .mxSd__sellContent h3 {
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        margin: 0 0 5px;
    }

    .mxSd__sellContent p {
        font-size: 11.5px;
        color: rgba(255, 255, 255, .8);
        margin: 0 0 10px;
        line-height: 1.5;
    }

    .mxSd__sellBtn {
        display: inline-flex;
        align-items: center;
        height: 34px;
        padding: 0 16px;
        border-radius: 8px;
        background: #fff;
        color: #1565c0;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

    /* Promotions */
    .mxSd__promoScroll {
        display: flex;
        gap: 10px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mxSd__promoScroll::-webkit-scrollbar {
        display: none;
    }

    .mxSd__promoItem {
        flex-shrink: 0;
        width: 280px;
        border-radius: 12px;
        overflow: hidden;
    }

    .mxSd__promoItem img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    /* Blog cards */
    .mxSd__blogScroll {
        display: flex;
        gap: 12px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mxSd__blogScroll::-webkit-scrollbar {
        display: none;
    }

    .mxSd__blogCard {
        flex-shrink: 0;
        width: 220px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        overflow: hidden;
    }

    .mxSd__blogImg {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .mxSd__blogBody {
        padding: 12px;
    }

    .mxSd__blogTitle {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 6px;
        line-height: 1.4;
        text-decoration: none;
        display: block;
    }

    .mxSd__blogExcerpt {
        font-size: 11px;
        color: #64748b;
        margin: 0 0 8px;
        line-height: 1.5;
    }

    .mxSd__blogMeta {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: #94a3b8;
        font-weight: 600;
    }

}

.dev-seller-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-seller-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* Desktop: show desktop, hide mobile */
.mxHmDesktop {
    display: block;
}

.mxHmMobile {
    display: none;
}

/* Mobile: hide desktop, show mobile */
@media (max-width: 768px) {
    .mxHmDesktop {
        display: none !important;
    }

    .mxHmMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ═══════════════════════════════════════════════
               MOBILE STYLES — prefix mxHm__
            ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mxHm {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxHm__hero {
        position: relative;
        width: 100%;
        height: 240px;
        overflow: hidden;
    }

    .mxHm__heroImg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


    .mxHm__heroContent {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 18px 16px 50px;
    }

    .mxHm__heroTitle {
        font-size: 1.35rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 5px;
        line-height: 1.2;
    }

    .mxHm__heroSub {
        font-size: .78rem;
        color: rgba(255, 255, 255, .82);
        font-weight: 500;
        margin: 0;
    }

    /* Search Card */
    .mxHm__searchCard {
        background: #fff;
        border-radius: 20px;
        margin: -32px 12px 0;
        padding: 14px 14px 16px;
        box-shadow: 0 8px 32px rgba(21, 101, 192, .18);
        position: relative;
        z-index: 10;
    }

    .mxHm__searchRow {
        display: flex;
        gap: 8px;
    }

    .mxHm__searchInput {
        flex: 1;
        height: 50px;
        border: 1.5px solid #e2e8f0;
        border-radius: 13px;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
    }

    .mxHm__searchInput:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .1);
    }

    .mxHm__searchBtn {
        width: 50px;
        height: 50px;
        border-radius: 13px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 14px rgba(21, 101, 192, .3);
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__searchBtn:active {
        transform: scale(.96);
    }

    .mxHm__searchBtn i {
        font-size: 22px;
    }

    .mxHm__filterRow {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .mxHm__filterChip {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        border-radius: 20px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        font-size: 12px;
        font-weight: 700;
        color: #475569;
        cursor: pointer;
        white-space: nowrap;
        font-family: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__filterChip i {
        font-size: 15px;
    }

    .mxHm__filterChip:active {
        background: #e8f2fd;
        border-color: #1976d2;
        color: #1565c0;
    }

    /* Section */
    .mxHm__sec {
        padding: 20px 12px 0;
    }

    .mxHm__secHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }

    .mxHm__secTitle {
        font-size: 17px;
        font-weight: 900;
        color: #0f172a;
        margin: 0;
    }

    .mxHm__viewAll {
        font-size: 12px;
        font-weight: 700;
        color: #1976d2;
        text-decoration: none;
        padding: 6px 12px;
        border-radius: 20px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__viewAll:active {
        background: #dbeafe;
    }

    /* Categories */
    .mxHm__catScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxHm__catScroll::-webkit-scrollbar {
        display: none;
    }

    .mxHm__catCard {
        flex-shrink: 0;
        width: 108px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        background: #fff;
        text-decoration: none;
        color: inherit;
        display: block;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__catCard:active {
        transform: scale(.97);
    }

    .mxHm__catImg {
        width: 100%;
        height: 70px;
        object-fit: cover;
        display: block;
    }

    .mxHm__catBody {
        padding: 8px 9px 10px;
    }

    .mxHm__catName {
        font-size: 11.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 2px;
    }

    .mxHm__catCount {
        font-size: 10px;
        color: #64748b;
        font-weight: 600;
        margin: 0;
    }

    /* Promos */
    .mxHm__promoScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxHm__promoScroll::-webkit-scrollbar {
        display: none;
    }

    .mxHm__promoItem {
        flex-shrink: 0;
        width: 88vw;
        max-width: 330px;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .09);
    }

    .mxHm__promoItem img {
        width: 100%;
        display: block;
    }

    /* Property Card */
    .mxHm__propScroll {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxHm__propScroll::-webkit-scrollbar {
        display: none;
    }

    .mxHm__propCard {
        flex-shrink: 0;
        width: 78vw;
        max-width: 300px;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        overflow: hidden;
    }

    .mxHm__propImg {
        position: relative;
        height: 180px;
        overflow: hidden;
    }

    .mxHm__propImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxHm__badges {
        position: absolute;
        top: 9px;
        left: 9px;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .mxHm__badge {
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxHm__badge--blue {
        background: #1976d2;
    }

    .mxHm__badge--green {
        background: #16a34a;
    }

    .mxHm__badge--red {
        background: #ef4444;
    }

    .mxHm__wishBtn {
        position: absolute;
        top: 9px;
        right: 9px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .14);
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__wishBtn i {
        font-size: 16px;
        color: #64748b;
    }

    .mxHm__propBody {
        padding: 12px;
    }

    .mxHm__propTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
        line-height: 1.3;
    }

    .mxHm__propTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxHm__propLoc {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 11.5px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .mxHm__propLoc i {
        font-size: 13px;
        color: #94a3b8;
    }

    .mxHm__propPrice {
        font-size: 15px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 8px;
    }

    .mxHm__propFeats {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 10px;
    }

    .mxHm__propFeat {
        display: flex;
        align-items: center;
        gap: 3px;
        background: #f0f6fd;
        border-radius: 7px;
        padding: 3px 8px;
        font-size: 10.5px;
        font-weight: 700;
        color: #1565c0;
    }

    .mxHm__propFeat i {
        font-size: 12px;
    }

    .mxHm__propBtns {
        display: flex;
        gap: 7px;
    }

    .mxHm__btnNum {
        flex: 1;
        height: 34px;
        border-radius: 9px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 11.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__btnCall {
        flex: 1;
        height: 34px;
        border-radius: 9px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__btnCall:active {
        transform: scale(.97);
    }

    .mxHm__btnCall i {
        font-size: 13px;
    }

    /* Hot Offer */
    .mxHm__hotCard {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        overflow: hidden;
        margin-bottom: 12px;
    }

    .mxHm__hotImg {
        position: relative;
        height: 195px;
        overflow: hidden;
    }

    .mxHm__hotImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxHm__hotBody {
        padding: 14px;
    }

    .mxHm__hotTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.3;
    }

    .mxHm__hotTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxHm__hotLoc {
        display: flex;
        align-items: flex-start;
        gap: 3px;
        font-size: 11px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 6px;
        flex-wrap: wrap;
    }

    .mxHm__hotLoc i {
        font-size: 13px;
        color: #94a3b8;
        margin-top: 1px;
        flex-shrink: 0;
    }

    .mxHm__hotPrice {
        font-size: 16px;
        font-weight: 900;
        color: #ef4444;
        margin: 0 0 6px;
    }

    .mxHm__hotDesc {
        font-size: 12px;
        color: #64748b;
        line-height: 1.6;
        margin: 0 0 10px;
        font-weight: 500;
    }

    .mxHm__hotFeats {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 10px;
    }

    .mxHm__hotFeat {
        display: flex;
        align-items: center;
        gap: 3px;
        background: #fff5f5;
        border-radius: 7px;
        padding: 3px 8px;
        font-size: 10.5px;
        font-weight: 700;
        color: #ef4444;
    }

    .mxHm__hotFeat i {
        font-size: 12px;
    }

    .mxHm__hotStatus {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 20px;
        background: #fff5f5;
        color: #ef4444;
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    /* Cities */
    .mxHm__cityScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxHm__cityScroll::-webkit-scrollbar {
        display: none;
    }

    .mxHm__cityCard {
        flex-shrink: 0;
        width: 130px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        position: relative;
        text-decoration: none;
        display: block;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__cityCard:active {
        transform: scale(.97);
    }

    .mxHm__cityImg {
        width: 100%;
        height: 90px;
        object-fit: cover;
        display: block;
    }

    .mxHm__cityMask {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(13, 71, 161, .75) 100%);
    }

    .mxHm__cityInfo {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px 10px;
    }

    .mxHm__cityName {
        font-size: 12px;
        font-weight: 800;
        color: #fff;
        margin: 0 0 1px;
    }

    .mxHm__cityCount {
        font-size: 10px;
        color: rgba(255, 255, 255, .82);
        font-weight: 600;
        margin: 0;
    }

    /* Sellers */
    .mxHm__sellerScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxHm__sellerScroll::-webkit-scrollbar {
        display: none;
    }

    .mxHm__sellerCard {
        flex-shrink: 0;
        width: 190px;
        background: #fff;
        border-radius: 16px;
        padding: 14px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        text-decoration: none;
        display: block;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__sellerCard:active {
        transform: scale(.97);
    }

    .mxHm__sellerTop {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .mxHm__sellerAvatar {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #1976d2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 800;
        color: #fff;
        flex-shrink: 0;
        overflow: hidden;
    }

    .mxHm__sellerAvatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mxHm__sellerName {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 2px;
        line-height: 1.2;
    }

    .mxHm__sellerLoc {
        font-size: 10.5px;
        color: #64748b;
        font-weight: 500;
        margin: 0;
    }

    .mxHm__sellerBadges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .mxHm__sellerBadge {
        padding: 4px 9px;
        border-radius: 8px;
        font-size: 10.5px;
        font-weight: 700;
    }

    .mxHm__sellerBadge--exp {
        background: #eff6ff;
        color: #1976d2;
    }

    .mxHm__sellerBadge--prop {
        background: #f0fdf4;
        color: #16a34a;
    }

    /* Mission */
    .mxHm__missionGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mxHm__missionCard {
        background: #fff;
        border-radius: 16px;
        padding: 14px 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        text-align: center;
    }

    .mxHm__missionCard i {
        font-size: 32px;
        color: #1976d2;
        display: block;
        margin-bottom: 8px;
    }

    .mxHm__missionCard h3 {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        text-transform: capitalize;
    }

    .mxHm__missionCard p {
        font-size: 11px;
        color: #64748b;
        line-height: 1.5;
        margin: 0;
    }

    /* Services */
    .mxHm__serviceScroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxHm__serviceScroll::-webkit-scrollbar {
        display: none;
    }

    .mxHm__serviceCard {
        flex-shrink: 0;
        width: 160px;
        background: #fff;
        border-radius: 16px;
        padding: 16px 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        text-align: center;
    }

    .mxHm__serviceCard i {
        font-size: 34px;
        color: #1976d2;
        display: block;
        margin-bottom: 8px;
    }

    .mxHm__serviceCard h3 {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        text-transform: capitalize;
    }

    .mxHm__serviceCard p {
        font-size: 11px;
        color: #64748b;
        line-height: 1.5;
        margin: 0;
    }

    /* Testimonials */
    .mxHm__testiCard {
        background: #fff;
        border-radius: 18px;
        padding: 18px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        text-align: center;
        margin-bottom: 10px;
    }

    .mxHm__testiAvatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #e8f2fd;
        margin: 0 auto 12px;
        display: block;
    }

    .mxHm__testiText {
        font-size: 13px;
        color: #475569;
        line-height: 1.7;
        margin: 0 0 12px;
        font-style: italic;
    }

    .mxHm__testiName {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 2px;
    }

    .mxHm__testiDesig {
        font-size: 11px;
        color: #94a3b8;
        margin: 0 0 8px;
    }

    .mxHm__testiStars {
        color: #f59e0b;
        font-size: 14px;
    }

    .mxHm__devAvatar {
        border-radius: 10px !important;
    }

    .mxHm__devAvatar img {
        border-radius: 8px;
    }

    /* Sell CTA */
    .mxHm__sellCta {
        margin: 20px 12px 0;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 60%, #1976d2 100%);
        padding: 22px 18px;
        position: relative;
    }

    .mxHm__sellCta::before {
        content: '';
        position: absolute;
        top: -30px;
        right: -20px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxHm__sellCta::after {
        content: '';
        position: absolute;
        bottom: -40px;
        left: -15px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .05);
    }

    .mxHm__sellCtaInner {
        position: relative;
        z-index: 1;
    }

    .mxHm__sellCtaImg {
        width: 80px;
        float: right;
        margin: -8px -4px 0 12px;
    }

    .mxHm__sellCtaTitle {
        font-size: 18px;
        font-weight: 900;
        color: #fff;
        margin: 0 0 8px;
        line-height: 1.2;
    }

    .mxHm__sellCtaText {
        font-size: 12px;
        color: rgba(255, 255, 255, .82);
        line-height: 1.6;
        margin: 0 0 14px;
        font-weight: 500;
    }

    .mxHm__sellCtaBtn {
        display: inline-block;
        padding: 11px 22px;
        border-radius: 12px;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__sellCtaBtn:active {
        transform: scale(.97);
    }

    /* Blogs */
    .mxHm__blogScroll {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxHm__blogScroll::-webkit-scrollbar {
        display: none;
    }

    .mxHm__blogCard {
        flex-shrink: 0;
        width: 76vw;
        max-width: 290px;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        text-decoration: none;
        display: block;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__blogCard:active {
        transform: scale(.98);
    }

    .mxHm__blogImg {
        width: 100%;
        height: 150px;
        object-fit: cover;
        display: block;
    }

    .mxHm__blogBody {
        padding: 12px;
    }

    .mxHm__blogTitle {
        font-size: 13.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 6px;
        line-height: 1.35;
    }

    .mxHm__blogText {
        font-size: 11.5px;
        color: #64748b;
        line-height: 1.6;
        margin: 0 0 8px;
        font-weight: 500;
    }

    .mxHm__blogMeta {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mxHm__blogAuthor {
        font-size: 10.5px;
        color: #1976d2;
        font-weight: 700;
    }

    .mxHm__blogDate {
        font-size: 10.5px;
        color: #94a3b8;
        font-weight: 600;
    }

    /* Quick Links */
    .mxHm__qlxTabs {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    .mxHm__qlxTab {
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__qlxTab.active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }

    .mxHm__qlxPanel {
        display: none;
    }

    .mxHm__qlxPanel.active {
        display: block;
    }

    .mxHm__qlxCol {
        background: #fff;
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 10px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .07);
    }

    .mxHm__qlxColTitle {
        font-size: 13px;
        font-weight: 800;
        color: #1565c0;
        margin: 0 0 10px;
    }

    .mxHm__qlxLink {
        display: block;
        padding: 7px 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 13px;
        color: #475569;
        text-decoration: none;
        font-weight: 500;
    }

    .mxHm__qlxLink:last-of-type {
        border-bottom: none;
    }

    .mxHm__qlxLink:active {
        color: #1976d2;
    }

    .mxHm__qlxViewMore {
        font-size: 12px;
        font-weight: 700;
        color: #1976d2;
        text-decoration: none;
        display: inline-block;
        margin-top: 6px;
    }

    /* Calculators */
    .mxHm__calcGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mxHm__calcCard {
        background: #fff;
        border-radius: 16px;
        padding: 16px 12px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
        text-decoration: none;
        display: block;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__calcCard:active {
        transform: scale(.97);
    }

    .mxHm__calcIcon {
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        display: block;
    }

    .mxHm__calcTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
    }

    .mxHm__calcText {
        font-size: 11px;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
    }

    /* Filter Drawer */
    .mxHm__drawer {
        position: fixed;
        inset: 0;
        z-index: 99999;
        pointer-events: none;
    }

    .mxHm__drawerOverlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        transition: opacity .3s;
        pointer-events: none;
    }

    .mxHm__drawerPanel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 22px 22px 0 0;
        max-height: 82vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.32, .72, 0, 1);
        pointer-events: none;
    }

    .mxHm__drawer.open .mxHm__drawerOverlay {
        opacity: 1;
        pointer-events: auto;
    }

    .mxHm__drawer.open .mxHm__drawerPanel {
        transform: translateY(0);
        pointer-events: auto;
    }

    .mxHm__drawerHandle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e2e8f0;
        margin: 12px auto 0;
    }

    .mxHm__drawerTitle {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        padding: 14px 18px 10px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mxHm__drawerClose {
        background: none;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
    }

    .mxHm__drawerClose i {
        font-size: 22px;
    }

    .mxHm__drawerSec {
        padding: 14px 18px 0;
    }

    .mxHm__drawerLabel {
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin: 0 0 8px;
        display: block;
    }

    .mxHm__drawerSelect {
        width: 100%;
        height: 48px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        background: #f8fafd;
        padding: 0 14px;
        font-size: 14px;
        font-family: inherit;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
        color: #0f172a;
        margin-bottom: 12px;
    }

    .mxHm__drawerSelect:focus {
        border-color: #1976d2;
    }

    .mxHm__drawerPriceRow {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mxHm__drawerPriceInput {
        flex: 1;
        height: 48px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 14px;
        font-family: inherit;
        outline: none;
        background: #f8fafd;
        color: #0f172a;
    }

    .mxHm__drawerPriceInput:focus {
        border-color: #1976d2;
    }

    .mxHm__drawerAmeGrid {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 14px;
    }

    .mxHm__drawerAmeChk {
        display: none;
    }

    .mxHm__drawerAmeLbl {
        padding: 6px 13px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
        background: #f8fafd;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHm__drawerAmeChk:checked+.mxHm__drawerAmeLbl {
        background: #e8f2fd;
        border-color: #1976d2;
        color: #1565c0;
    }

    .mxHm__drawerBedsRow {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 14px;
    }

    .mxHm__drawerBedChk {
        display: none;
    }

    .mxHm__drawerBedLbl {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #475569;
        cursor: pointer;
        background: #f8fafd;
    }

    .mxHm__drawerBedChk:checked+.mxHm__drawerBedLbl {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }

    .mxHm__drawerActions {
        display: flex;
        gap: 10px;
        padding: 16px 18px 28px;
        border-top: 1px solid #f1f5f9;
        margin-top: 10px;
    }

    .mxHm__drawerClear {
        flex: 1;
        height: 50px;
        border-radius: 13px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        color: #64748b;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
    }

    .mxHm__drawerApply {
        flex: 2;
        height: 50px;
        border-radius: 13px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 4px 14px rgba(21, 101, 192, .28);
    }

    .mxHm__drawerApply:active {
        transform: scale(.98);
    }
}

/* ══════════════════════════════════════════
           SHOW / HIDE
        ══════════════════════════════════════════ */
.mxSrchDesktop {
    display: block;
}

.mxSrchMobile {
    display: none;
}


@media (max-width: 768px) {
    .mxSrchDesktop {
        display: none !important;
    }

    .mxSrchMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════════════
           MOBILE STYLES
        ══════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxSrch {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* ── Hero bar ── */
    .mxSrch__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 60%, #1976d2 100%);
        padding: 14px 16px 52px;
        position: relative;
        overflow: hidden;
    }

    .mxSrch__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxSrch__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxSrch__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxSrch__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxSrch__heroSub {
        font-size: .75rem;
        color: rgba(255, 255, 255, .78);
        margin: 0;
        font-weight: 500;
    }

    /* ── Floating search card ── */
    .mxSrch__searchCard {
        background: #fff;
        border-radius: 0px;
        margin: -35px 0px 0;
        padding: 16px;
        box-shadow: 0 8px 30px rgba(21, 101, 192, .16);
        position: relative;
        z-index: 10;
    }

    .mxSrch__searchRow {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

    .mxSrch__searchInput {
        flex: 1;
        height: 48px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        transition: border-color .2s, box-shadow .2s;
    }

    .mxSrch__searchInput:focus {
        border-color: #1976d2;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
        background: #fff;
    }

    .mxSrch__searchBtn {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 3px 12px rgba(21, 101, 192, .28);
    }

    .mxSrch__searchBtn:active {
        transform: scale(.95);
    }

    .mxSrch__searchBtn i {
        font-size: 20px;
    }

    .mxSrch__filterBtn {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        color: #64748b;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        position: relative;
    }

    .mxSrch__filterBtn.active {
        background: #e8f2fd;
        border-color: #1976d2;
        color: #1565c0;
    }

    .mxSrch__filterBtn i {
        font-size: 20px;
    }

    .mxSrch__filterDot {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ef4444;
        display: none;
    }

    .mxSrch__filterDot.show {
        display: block;
    }

    /* ── Chips (status scroll) ── */
    .mxSrch__chipsWrap {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 12px 12px 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxSrch__chipsWrap::-webkit-scrollbar {
        display: none;
    }

    .mxSrch__chip {
        flex-shrink: 0;
        padding: 7px 14px;
        border-radius: 20px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        cursor: pointer;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
        transition: all .15s;
    }

    .mxSrch__chip.active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxSrch__chip:active {
        transform: scale(.97);
    }

    /* ── Results count bar ── */
    .mxSrch__countBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px 0;
    }

    .mxSrch__countText {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
    }

    .mxSrch__countSub {
        font-size: 11px;
        color: #94a3b8;
        font-weight: 500;
    }

    /* ── Property card ── */
    .mxSrch__cards {
        padding: 10px 12px 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mxSrch__card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        overflow: hidden;
        position: relative;
    }

    /* image */
    .mxSrch__cardImg {
        position: relative;
        height: 190px;
        overflow: hidden;
    }

    .mxSrch__cardImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxSrch__cardImg .swiper-container,
    .mxSrch__cardImg .swiper-wrapper,
    .mxSrch__cardImg .swiper-slide {
        height: 100%;
    }

    /* badges */
    .mxSrch__badges {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 5px;
        z-index: 2;
        flex-wrap: wrap;
    }

    .mxSrch__badge {
        padding: 3px 9px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxSrch__badge--hot {
        background: #ef4444;
    }

    .mxSrch__badge--ver {
        background: #16a34a;
    }

    .mxSrch__badge--feat {
        background: #1976d2;
    }

    /* wishlist btn */
    .mxSrch__wishBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        -webkit-tap-highlight-color: transparent;
    }

    .mxSrch__wishBtn i {
        font-size: 17px;
        color: #64748b;
    }

    /* card body */
    .mxSrch__cardBody {
        padding: 14px;
    }

    .mxSrch__cardTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.35;
    }

    .mxSrch__cardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxSrch__cardLoc {
        display: flex;
        align-items: flex-start;
        gap: 3px;
        font-size: 11.5px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 8px;
        flex-wrap: wrap;
        line-height: 1.4;
    }

    .mxSrch__cardLoc i {
        font-size: 14px;
        color: #94a3b8;
        margin-top: 1px;
        flex-shrink: 0;
    }

    .mxSrch__cardLoc a {
        color: #1565c0;
        text-decoration: none;
        font-weight: 600;
    }

    .mxSrch__price {
        font-size: 17px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 8px;
    }

    .mxSrch__desc {
        font-size: 12px;
        color: #64748b;
        line-height: 1.6;
        margin: 0 0 10px;
        font-weight: 500;
    }

    /* features pills */
    .mxSrch__feats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxSrch__feat {
        display: flex;
        align-items: center;
        gap: 4px;
        background: #f0f6fd;
        border-radius: 8px;
        padding: 4px 9px;
        font-size: 11px;
        font-weight: 700;
        color: #1565c0;
    }

    .mxSrch__feat i {
        font-size: 13px;
    }

    /* dealer row */
    .mxSrch__dealer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .mxSrch__dealerInfo {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 1;
        min-width: 0;
    }

    .mxSrch__dealerImg {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e2e8f0;
        flex-shrink: 0;
    }

    .mxSrch__dealerName {
        font-size: 12px;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mxSrch__dealerBadge {
        font-size: 10px;
        color: #16a34a;
        font-weight: 700;
        display: block;
    }

    .mxSrch__dealerBtns {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    .mxSrch__btnNum {
        height: 34px;
        padding: 0 12px;
        border-radius: 9px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 11.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
        transition: all .15s;
    }

    .mxSrch__btnNum:active {
        background: #e8f2fd;
    }

    .mxSrch__btnCall {
        height: 34px;
        padding: 0 12px;
        border-radius: 9px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        align-items: center;
        gap: 4px;
        box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
        white-space: nowrap;
        transition: all .15s;
    }

    .mxSrch__btnCall:active {
        transform: scale(.97);
    }

    .mxSrch__btnCall i {
        font-size: 13px;
    }

    /* ── Drawer overlay filter panel ── */
    .mxSrch__drawer {
        position: fixed;
        inset: 0;
        z-index: 99999;
        pointer-events: none;
    }

    .mxSrch__drawerOverlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        transition: opacity .3s;
        pointer-events: none;
    }

    .mxSrch__drawerPanel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 22px 22px 0 0;
        max-height: 82vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.32, .72, 0, 1);
        pointer-events: none;
    }

    .mxSrch__drawer.open .mxSrch__drawerOverlay {
        opacity: 1;
        pointer-events: auto;
    }

    .mxSrch__drawer.open .mxSrch__drawerPanel {
        transform: translateY(0);
        pointer-events: auto;
    }

    .mxSrch__drawerHandle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e2e8f0;
        margin: 12px auto 0;
    }

    .mxSrch__drawerTitle {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        padding: 14px 18px 10px;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 2px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mxSrch__drawerClose {
        background: none;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
    }

    .mxSrch__drawerClose i {
        font-size: 22px;
    }

    .mxSrch__drawerSection {
        padding: 14px 18px 0;
    }

    .mxSrch__drawerLabel {
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin: 0 0 8px;
        display: block;
    }

    .mxSrch__selectWrap {
        position: relative;
        margin-bottom: 12px;
    }

    .mxSrch__selectWrap i {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #94a3b8;
        pointer-events: none;
    }

    .mxSrch__select {
        width: 100%;
        height: 48px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        background: #f8fafd;
        padding: 0 40px 0 14px;
        font-size: 14px;
        font-weight: 500;
        color: #0f172a;
        font-family: inherit;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        transition: border-color .2s;
    }

    .mxSrch__select:focus {
        border-color: #1976d2;
        background: #fff;
    }

    .mxSrch__priceRow {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mxSrch__priceInput {
        flex: 1;
        height: 48px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        transition: border-color .2s;
    }

    .mxSrch__priceInput:focus {
        border-color: #1976d2;
        background: #fff;
    }

    .mxSrch__priceDiv {
        display: flex;
        align-items: center;
        color: #94a3b8;
        font-size: 18px;
        font-weight: 300;
    }

    /* Amenities checkboxes in drawer */
    .mxSrch__amenitiesGrid {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 14px;
    }

    .mxSrch__amenityCheck {
        display: none;
    }

    .mxSrch__amenityLabel {
        padding: 6px 13px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        background: #f8fafd;
    }

    .mxSrch__amenityCheck:checked+.mxSrch__amenityLabel {
        background: #e8f2fd;
        border-color: #1976d2;
        color: #1565c0;
    }

    .mxSrch__bedsRow {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 14px;
    }

    .mxSrch__bedChk {
        display: none;
    }

    .mxSrch__bedLabel {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #475569;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        background: #f8fafd;
    }

    .mxSrch__bedChk:checked+.mxSrch__bedLabel {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }

    .mxSrch__drawerActions {
        display: flex;
        gap: 10px;
        padding: 16px 18px 24px;
        border-top: 1px solid #f1f5f9;
        margin-top: 10px;
    }

    .mxSrch__drawerClear {
        flex: 1;
        height: 50px;
        border-radius: 13px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        color: #64748b;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        transition: all .15s;
    }

    .mxSrch__drawerApply {
        flex: 2;
        height: 50px;
        border-radius: 13px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 4px 14px rgba(21, 101, 192, .28);
        transition: all .15s;
    }

    .mxSrch__drawerApply:active {
        transform: scale(.98);
    }

    /* ── Pagination ── */
    .mxSrch__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 16px 12px;
        flex-wrap: wrap;
    }

    .mxSrch__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        padding: 0 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #475569;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        font-family: inherit;
    }

    .mxSrch__pageBtn.active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxSrch__pageBtn.disabled {
        opacity: .4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .mxSrch__pageBtn:active:not(.disabled) {
        transform: scale(.95);
    }

    /* ── SEO link grid ── */
    .mxSrch__seoBox {
        background: #fff;
        margin: 10px 12px;
        border-radius: 16px;
        padding: 16px;
    }

    .mxSrch__seoTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 12px;
        line-height: 1.4;
    }

    .mxSrch__seoColTitle {
        font-size: 12px;
        font-weight: 800;
        color: #1565c0;
        margin: 0 0 8px;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

    .mxSrch__seoList {
        list-style: none;
        padding: 0;
        margin: 0 0 14px;
    }

    .mxSrch__seoList li {
        border-bottom: 1px solid #f1f5f9;
    }

    .mxSrch__seoList li:last-child {
        border-bottom: none;
    }

    .mxSrch__seoList a {
        display: block;
        padding: 7px 0;
        font-size: 12.5px;
        color: #475569;
        text-decoration: none;
        font-weight: 500;
    }

    .mxSrch__seoList a:active {
        color: #1976d2;
    }

}

/* end @media */
/* ══════════════════════════════════════════
       SHOW / HIDE
    ══════════════════════════════════════════ */
.mxSpDesktop {
    display: block;
}

.mxSpMobile {
    display: none;
}

@media (max-width: 768px) {
    .mxSpDesktop {
        display: none !important;
    }

    .mxSpMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

.mxSp__modal {
    display: none;
}

@media (max-width: 768px) {
    .mxSp__modal {
        display: flex;
        /* ya jo bhi original display value thi */
    }
}

/* ══════════════════════════════════════════
       MOBILE STYLES
    ══════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxSp {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* ── Hero ── */
    .mxSp__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 60px;
        position: relative;
        overflow: hidden;
    }

    .mxSp__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxSp__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxSp__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxSp__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxSp__heroTitle {
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff;
        margin: 0;
    }

    /* ── Profile card (floats over hero) ── */
    .mxSp__profileCard {
        background: #fff;
        border-radius: 20px;
        margin: -44px 12px 0;
        padding: 20px 16px 22px;
        box-shadow: 0 8px 32px rgba(21, 101, 192, .14);
        position: relative;
        z-index: 10;
    }

    /* avatar row */
    .mxSp__avatarRow {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 14px;
    }

    .mxSp__avatarWrap {
        flex-shrink: 0;
        position: relative;
    }

    .mxSp__avatar {
        width: 76px;
        height: 76px;
        border-radius: 18px;
        object-fit: cover;
        border: 3px solid #e8f2fd;
        display: block;
    }

    .mxSp__avatarVerified {
        position: absolute;
        bottom: -4px;
        right: -4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #16a34a;
        border: 2px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxSp__avatarVerified i {
        font-size: 13px;
        color: #fff;
    }

    .mxSp__nameBlock {
        flex: 1;
        min-width: 0;
        padding-top: 4px;
    }

    .mxSp__name {
        font-size: 18px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.2;
    }

    .mxSp__company {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12.5px;
        color: #64748b;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .mxSp__company i {
        font-size: 15px;
        color: #1976d2;
    }

    /* stars */
    .mxSp__stars {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .mxSp__stars i {
        font-size: 15px;
        color: #f59e0b;
    }

    .mxSp__stars i.empty {
        color: #e2e8f0;
    }

    /* badges */
    .mxSp__badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }

    .mxSp__badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mxSp__badge--featured {
        background: #fff4e6;
        color: #d97706;
        border: 1px solid #fed7aa;
    }

    .mxSp__badge--verified {
        background: #f0fdf4;
        color: #16a34a;
        border: 1px solid #bbf7d0;
    }

    .mxSp__badge--listings {
        background: #f0f6fd;
        color: #1565c0;
        border: 1px solid #bfdbfe;
    }

    /* contact info */
    .mxSp__contactRow {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }

    .mxSp__contactItem {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #f8fafd;
        border-radius: 12px;
        padding: 10px 14px;
    }

    .mxSp__contactItem i {
        font-size: 17px;
        color: #1976d2;
        flex-shrink: 0;
    }

    .mxSp__contactText {
        font-size: 13px;
        color: #475569;
        font-weight: 600;
    }

    /* CTA */
    .mxSp__ctaBtn {
        width: 100%;
        height: 52px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 4px 16px rgba(21, 101, 192, .28);
        -webkit-tap-highlight-color: transparent;
    }

    .mxSp__ctaBtn:active {
        transform: scale(.98);
    }

    .mxSp__ctaBtn i {
        font-size: 20px;
    }

    /* ── Section title ── */
    .mxSp__sectionTitle {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        padding: 16px 16px 2px;
    }

    /* ── Status chips ── */
    .mxSp__chipsWrap {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 12px 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxSp__chipsWrap::-webkit-scrollbar {
        display: none;
    }

    .mxSp__chip {
        flex-shrink: 0;
        padding: 7px 14px;
        border-radius: 20px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
        transition: all .15s;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .mxSp__chip.active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxSp__chip:active {
        transform: scale(.97);
    }

    /* ── Property cards ── */
    .mxSp__cards {
        padding: 10px 12px 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mxSp__card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        overflow: hidden;
    }

    .mxSp__cardImg {
        position: relative;
        height: 185px;
        overflow: hidden;
    }

    .mxSp__cardImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxSp__cardBadges {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 5px;
        z-index: 2;
        flex-wrap: wrap;
    }

    .mxSp__cardBadge {
        padding: 3px 9px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxSp__cardBadge--hot {
        background: #ef4444;
    }

    .mxSp__cardBadge--ver {
        background: #16a34a;
    }

    .mxSp__cardBadge--feat {
        background: #1976d2;
    }

    .mxSp__wishBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        -webkit-tap-highlight-color: transparent;
    }

    .mxSp__wishBtn i {
        font-size: 17px;
        color: #64748b;
    }

    .mxSp__cardBody {
        padding: 14px;
    }

    .mxSp__cardTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 6px;
        line-height: 1.3;
    }

    .mxSp__cardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxSp__cardLoc {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .mxSp__cardLoc i {
        font-size: 14px;
        color: #94a3b8;
        flex-shrink: 0;
    }

    .mxSp__cardPrice {
        font-size: 17px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 10px;
    }

    .mxSp__feats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxSp__feat {
        display: flex;
        align-items: center;
        gap: 4px;
        background: #f0f6fd;
        border-radius: 8px;
        padding: 4px 9px;
        font-size: 11px;
        font-weight: 700;
        color: #1565c0;
    }

    .mxSp__feat i {
        font-size: 13px;
    }

    .mxSp__cardBtns {
        display: flex;
        gap: 8px;
    }

    .mxSp__btnNum {
        flex: 1;
        height: 40px;
        border-radius: 10px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSp__btnCall {
        flex: 1;
        height: 40px;
        border-radius: 10px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
        -webkit-tap-highlight-color: transparent;
    }

    .mxSp__btnCall i {
        font-size: 14px;
    }

    /* ── Pagination ── */
    .mxSp__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 16px 12px;
        flex-wrap: wrap;
    }

    .mxSp__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        padding: 0 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #475569;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        font-family: inherit;
    }

    .mxSp__pageBtn.active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }

    .mxSp__pageBtn.disabled {
        opacity: .4;
        pointer-events: none;
    }

    .mxSp__pageBtn:active:not(.disabled) {
        transform: scale(.95);
    }

    /* ── Contact modal ── */
    .mxSp__modal {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: none;
        align-items: flex-end;
        justify-content: center;
        background: rgba(0, 0, 0, .45);
        backdrop-filter: blur(3px);
    }

    .mxSp__modal.open {
        display: flex;
    }

    .mxSp__modalPanel {
        background: #fff;
        border-radius: 22px 22px 0 0;
        width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        animation: mxSpSlideUp .3s cubic-bezier(.32, .72, 0, 1);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    @keyframes mxSpSlideUp {
        from {
            transform: translateY(100%)
        }

        to {
            transform: translateY(0)
        }
    }

    .mxSp__modalHandle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e2e8f0;
        margin: 12px auto 0;
    }

    .mxSp__modalHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 18px 10px;
        border-bottom: 1px solid #f1f5f9;
    }

    .mxSp__modalTitle {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .mxSp__modalClose {
        background: none;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 4px;
    }

    .mxSp__modalClose i {
        font-size: 22px;
    }

    .mxSp__modalBody {
        padding: 18px;
    }

    .mxSp__formGroup {
        margin-bottom: 14px;
    }

    .mxSp__formLabel {
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: block;
        margin-bottom: 7px;
    }

    .mxSp__formInput {
        width: 100%;
        height: 50px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        transition: border-color .2s, background .2s;
    }

    .mxSp__formInput:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
    }

    .mxSp__formTextarea {
        width: 100%;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        resize: none;
        transition: border-color .2s, background .2s;
        min-height: 100px;
    }

    .mxSp__formTextarea:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
    }

    .mxSp__formSubmit {
        width: 100%;
        height: 52px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 4px 16px rgba(21, 101, 192, .28);
        margin-top: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .mxSp__formSubmit i {
        font-size: 18px;
    }

}

/* end @media */

/* ── Review Summary Bar ── */
.rv-summary {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 20px 0 24px;
    flex-wrap: wrap;
}

.rv-avg {
    text-align: center;
}

.rv-avg__num {
    font-size: 3rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
}

.rv-avg__icon {
    font-size: 32px;
    margin: 4px 0;
}

.rv-avg__lbl {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.rv-bars {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rv-bar__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rv-bar__icon {
    font-size: 18px;
}

.rv-bar__track {
    flex: 1;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.rv-bar__fill {
    height: 100%;
    border-radius: 4px;
    transition: width .4s;
}

.rv-bar__count {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 700;
    min-width: 16px;
    text-align: right;
}

/* ── Review card ── */
.rv-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    margin-bottom: 14px;
    border-left: 4px solid #e2e8f0;
    transition: border-color .2s;
}

.rv-card:hover {
    border-left-color: #1976d2;
}

.rv-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.rv-card__av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.rv-card__name {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
}

.rv-card__date {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0;
}

.rv-card__rating {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rv-card__rating i {
    font-size: 22px;
}

.rv-card__rating span {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.rv-card__text {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.75;
    margin: 0;
}

/* ── Form ── */
.rv-form {
    margin-top: 8px;
}

.rv-form__alert {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rv-form__alert--success {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
}

.rv-form__alert--error {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
}

.rv-form__alert i {
    font-size: 20px;
    flex-shrink: 0;
}

.rv-form__alert--success i {
    color: #16a34a;
}

.rv-form__alert--error i {
    color: #ef4444;
}

.rv-form__alert p {
    font-size: 13px;
    margin: 0;
    font-weight: 600;
}

.rv-form__alert--success p {
    color: #15803d;
}

.rv-form__alert--error p {
    color: #dc2626;
}

/* Rating picker */
.rv-ratingPicker {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0 14px;
    flex-wrap: wrap;
}

.rv-ratingBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: #f8fafd;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all .15s;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    -webkit-tap-highlight-color: transparent;
}

.rv-ratingBtn i {
    font-size: 28px;
}

.rv-ratingBtn:hover {
    background: #f0f6ff;
    border-color: #bfdbfe;
}

.rv-ratingBtn.active {
    border-color: var(--rc);
    background: var(--rb);
}

.rv-ratingBtn.active i,
.rv-ratingBtn.active span {
    color: var(--rc);
}

.rv-ratingLbl {
    font-size: 12.5px;
    color: #64748b;
    font-style: italic;
    margin-left: 6px;
}

.rv-field {
    margin-bottom: 14px;
}

.rv-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: block;
    margin-bottom: 5px;
}

.rv-req {
    color: #ef4444;
}

.rv-input,
.rv-textarea {
    width: 95%;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 13.5px;
    color: #0f172a;
    background: #f8fafd;
    outline: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.rv-textarea {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 13.5px;
    color: #0f172a;
    background: #f8fafd;
    outline: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.rv-input:focus,
.rv-textarea:focus {
    border-color: #1976d2;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .1);
}

.rv-input::placeholder,
.rv-textarea::placeholder {
    color: #94a3b8;
}

.rv-textarea {
    resize: vertical;
    min-height: 110px;
}

.rv-err {
    font-size: 11px;
    color: #ef4444;
    margin-top: 3px;
    display: block;
}

.rv-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rv-submitBtn {
    background: linear-gradient(90deg, #1565c0, #1976d2);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 32px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .15s;
}

.rv-submitBtn:hover {
    background: linear-gradient(90deg, #0d47a1, #1565c0);
    transform: translateY(-1px);
}

.rv-submitBtn:active {
    transform: scale(.98);
}

.rv-submitBtn i {
    font-size: 18px;
}

.rv-note {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 10px;
}

/* No reviews */
.rv-empty {
    text-align: center;
    padding: 36px 20px;
    color: #94a3b8;
}

.rv-empty i {
    font-size: 48px;
    color: #e2e8f0;
    display: block;
    margin-bottom: 10px;
}

.mxPdDesktop {
    display: block;
}

.mxPdMobile {
    display: none;
}

@media (max-width: 768px) {
    .mxPdDesktop {
        display: none !important;
    }

    .mxPdMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

@media (max-width: 768px) {
    .mxPd {
        min-height: 100vh;
        padding-bottom: 100px;
    }

    .mxPd__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 54px;
        position: relative;
        overflow: hidden;
    }

    .mxPd__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxPd__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxPd__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxPd__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxPd__heroTitle {
        font-size: 1.05rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 8px;
        line-height: 1.3;
    }

    .mxPd__heroLoc {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: rgba(255, 255, 255, .75);
        font-weight: 500;
    }

    .mxPd__heroLoc i {
        font-size: 14px;
        color: rgba(255, 255, 255, .6);
    }

    .mxPd__priceCard {
        background: #fff;
        border-radius: 20px;
        margin: -34px 12px 0;
        padding: 16px 18px;
        box-shadow: 0 8px 32px rgba(21, 101, 192, .14);
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .mxPd__price {
        font-size: 20px;
        font-weight: 900;
        color: #1565c0;
        margin: 0;
        line-height: 1.1;
    }

    .mxPd__priceUnit {
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
        margin-top: 3px;
    }

    .mxPd__wishBtn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #f0f6fd;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPd__wishBtn i {
        font-size: 20px;
        color: #1976d2;
    }

    .mxPd__tabsWrap {
        display: flex;
        gap: 0;
        overflow-x: auto;
        background: #fff;
        margin: 12px 12px 0;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        padding: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxPd__tabsWrap::-webkit-scrollbar {
        display: none;
    }

    .mxPd__tab {
        flex-shrink: 0;
        padding: 8px 14px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        cursor: pointer;
        white-space: nowrap;
        border: none;
        background: none;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        font-family: inherit;
    }

    .mxPd__tab.active {
        background: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxPd__mainImg {
        width: 100%;
        height: 240px;
        object-fit: cover;
        display: block;
    }

    .mxPd__galleryBadges {
        position: absolute;
        top: 12px;
        left: 12px;
        display: flex;
        gap: 5px;
        z-index: 2;
    }

    .mxPd__gBadge {
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxPd__gBadge--hot {
        background: #ef4444;
    }

    .mxPd__gBadge--ver {
        background: #16a34a;
    }

    .mxPd__gBadge--feat {
        background: #1976d2;
    }

    .mxPd__galleryCount {
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 8px;
        backdrop-filter: blur(4px);
    }

    .mxPd__thumbs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 8px 12px;
        background: #fff;
        scrollbar-width: none;
    }

    .mxPd__thumbs::-webkit-scrollbar {
        display: none;
    }

    .mxPd__thumb {
        flex-shrink: 0;
        width: 64px;
        height: 48px;
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid transparent;
        cursor: pointer;
        transition: border-color .15s;
    }

    .mxPd__thumb.active {
        border-color: #1976d2;
    }

    .mxPd__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mxPd__card {
        background: #fff;
        border-radius: 20px;
        margin: 12px 12px 0;
        padding: 18px 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    }

    .mxPd__cardTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 14px;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxPd__cardTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
        border-radius: 1px;
    }

    .mxPd__detailGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mxPd__detailItem {
        background: #f8fafd;
        border-radius: 12px;
        padding: 10px 12px;
    }

    .mxPd__detailItem--full {
        grid-column: 1 / -1;
    }

    .mxPd__detailLabel {
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 4px;
    }

    .mxPd__detailValue {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.3;
    }

    .mxPd__chipList {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mxPd__fChip {
        display: flex;
        align-items: center;
        gap: 5px;
        background: #f0f6fd;
        border-radius: 10px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 700;
        color: #1565c0;
    }

    .mxPd__fChip i {
        font-size: 15px;
    }

    .mxPd__emptyTxt {
        font-size: 13px;
        color: #94a3b8;
        font-weight: 500;
        font-style: italic;
    }

    .mxPd__descBody {
        font-size: 13.5px;
        color: #475569;
        line-height: 1.7;
        font-weight: 400;
    }

    .mxPd__videoWrap {
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        padding-top: 56.25%;
    }

    .mxPd__videoWrap iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .mxPd__videoEmpty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 30px 0;
        color: #94a3b8;
    }

    .mxPd__videoEmpty i {
        font-size: 40px;
    }

    .mxPd__videoEmpty p {
        font-size: 13px;
        font-weight: 600;
        margin: 0;
    }

    .mxPd__sellerRow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }

    .mxPd__sellerAvatar {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        object-fit: cover;
        border: 2px solid #e8f2fd;
        flex-shrink: 0;
    }

    .mxPd__sellerName {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
    }

    .mxPd__sellerBadges {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 12px;
    }

    .mxPd__sBadge {
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .mxPd__sBadge--green {
        background: #f0fdf4;
        color: #16a34a;
        border: 1px solid #bbf7d0;
    }

    .mxPd__sBadge--grey {
        background: #f1f5f9;
        color: #64748b;
        border: 1px solid #e2e8f0;
    }

    .mxPd__sellerInfo {
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin-bottom: 14px;
    }

    .mxPd__sellerInfoItem {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        color: #64748b;
        font-weight: 600;
    }

    .mxPd__sellerInfoItem i {
        font-size: 16px;
        color: #1976d2;
    }

    .mxPd__sellerBio {
        font-size: 13px;
        color: #64748b;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .mxPd__socialRow {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    .mxPd__socialBtn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #f0f6fd;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .mxPd__socialBtn svg {
        width: 18px;
        height: 18px;
        fill: #1976d2;
    }

    .mxPd__viewProfileBtn {
        width: 100%;
        height: 44px;
        border-radius: 12px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPd__formGroup {
        margin-bottom: 12px;
    }

    .mxPd__formLabel {
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .4px;
        display: block;
        margin-bottom: 6px;
    }

    .mxPd__formInput {
        width: 100%;
        height: 46px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 0 12px;
        font-size: 13.5px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        transition: border-color .2s, background .2s;
    }

    .mxPd__formInput:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
    }

    .mxPd__formTextarea {
        width: 100%;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        padding: 10px 12px;
        font-size: 13.5px;
        font-weight: 500;
        color: #0f172a;
        background: #f8fafd;
        font-family: inherit;
        outline: none;
        box-sizing: border-box;
        resize: none;
        min-height: 90px;
        transition: border-color .2s, background .2s;
    }

    .mxPd__formTextarea:focus {
        border-color: #1976d2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .10);
    }

    .mxPd__formSubmit {
        width: 100%;
        height: 50px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 4px 16px rgba(21, 101, 192, .28);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .mxPd__formSubmit i {
        font-size: 18px;
    }

    .mxPd__ratingRow {
        display: flex;
        gap: 4px;
        margin-bottom: 14px;
    }

    .mxPd__ratingBtn {
        flex: 1;
        height: 46px;
        border-radius: 12px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
    }

    .mxPd__ratingBtn i {
        font-size: 22px;
        color: #94a3b8;
    }

    .mxPd__ratingBtn.selected {
        background: #fff4e6;
        border-color: #fed7aa;
    }

    .mxPd__ratingBtn.selected i {
        color: #f59e0b;
    }

    .mxPd__hScroll,
    .mxPd__allCards,
    .mxPd__blogCards {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxPd__hScroll::-webkit-scrollbar,
    .mxPd__allCards::-webkit-scrollbar,
    .mxPd__blogCards::-webkit-scrollbar {
        display: none;
    }

    .mxPd__miniCard {
        flex-shrink: 0;
        width: 200px;
        background: #f8fafd;
        border-radius: 14px;
        overflow: hidden;
    }

    .mxPd__miniCard img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        display: block;
    }

    .mxPd__miniCardBody {
        padding: 10px;
    }

    .mxPd__miniCardTitle {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 3px;
        line-height: 1.3;
    }

    .mxPd__miniCardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxPd__miniCardPrice {
        font-size: 13px;
        font-weight: 900;
        color: #1565c0;
        margin: 0;
    }

    .mxPd__blogCard {
        flex-shrink: 0;
        width: 220px;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    }

    .mxPd__blogCard img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .mxPd__blogCardBody {
        padding: 12px;
    }

    .mxPd__blogCardTitle {
        font-size: 12.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxPd__blogCardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxPd__blogCardText {
        font-size: 11.5px;
        color: #64748b;
        line-height: 1.5;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mxPd__blogCardMeta {
        display: flex;
        justify-content: space-between;
        font-size: 10.5px;
        color: #94a3b8;
        font-weight: 600;
    }

    .mxPd__faqItem {
        background: #fff;
        border-radius: 14px;
        margin-bottom: 8px;
        box-shadow: 0 1px 6px rgba(15, 23, 42, .06);
        overflow: hidden;
    }

    .mxPd__faqQ {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        cursor: pointer;
        gap: 10px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPd__faqQText {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.4;
        flex: 1;
    }

    .mxPd__faqIcon {
        font-size: 20px;
        color: #94a3b8;
        flex-shrink: 0;
        transition: transform .25s;
    }

    .mxPd__faqItem.open .mxPd__faqIcon {
        transform: rotate(180deg);
    }

    .mxPd__faqA {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        padding: 0 16px;
    }

    .mxPd__faqItem.open .mxPd__faqA {
        max-height: 300px;
    }

    .mxPd__faqA p {
        font-size: 12.5px;
        color: #64748b;
        line-height: 1.65;
        padding-bottom: 14px;
        margin: 0;
    }

    .mxPd__brochureBtn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #fff4e6;
        border-radius: 12px;
        padding: 10px 14px;
        text-decoration: none;
        color: #d97706;
        font-size: 13px;
        font-weight: 700;
        border: 1px solid #fed7aa;
        margin-bottom: 12px;
    }

    .mxPd__brochureBtn i {
        font-size: 18px;
    }

    .mxPd__stickyBar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #f1f5f9;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
        z-index: 100;
        display: flex;
        gap: 8px;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, .1);
    }

    .mxPd__stickyNum {
        flex: 1;
        height: 48px;
        border-radius: 13px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mxPd__stickyContact {
        flex: 1.6;
        height: 48px;
        border-radius: 13px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-shadow: 0 3px 12px rgba(21, 101, 192, .28);
        -webkit-tap-highlight-color: transparent;
    }

    .mxPd__stickyContact i {
        font-size: 17px;
    }

    .mxPd__modal {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: none;
        align-items: flex-end;
        justify-content: center;
        background: rgba(0, 0, 0, .45);
        backdrop-filter: blur(3px);
    }

    .mxPd__modal.open {
        display: flex;
    }

    .mxPd__modalPanel {
        background: #fff;
        border-radius: 22px 22px 0 0;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        animation: mxPdSlideUp .3s cubic-bezier(.32, .72, 0, 1);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    @keyframes mxPdSlideUp {
        from {
            transform: translateY(100%)
        }

        to {
            transform: translateY(0)
        }
    }

    .mxPd__modalHandle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e2e8f0;
        margin: 12px auto 0;
    }

    .mxPd__modalHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 18px 10px;
        border-bottom: 1px solid #f1f5f9;
    }

    .mxPd__modalTitle {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .mxPd__modalClose {
        background: none;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 4px;
    }

    .mxPd__modalClose i {
        font-size: 22px;
    }

    .mxPd__modalBody {
        padding: 18px;
    }
}

/* ── Review summary strip ── */
.mxPd__rvSummary {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafd;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.mxPd__rvAvgNum {
    font-size: 2.2rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
}

.mxPd__rvAvgIcon {
    font-size: 26px;
    margin: 3px 0 1px;
}

.mxPd__rvAvgLbl {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

.mxPd__rvBars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mxPd__rvBarRow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mxPd__rvBarRow i {
    font-size: 15px;
}

.mxPd__rvBarTrack {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.mxPd__rvBarFill {
    height: 100%;
    border-radius: 3px;
}

.mxPd__rvBarCnt {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 700;
    min-width: 14px;
    text-align: right;
}

/* ── Toggle button ── */
.mxPd__rvToggleBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f6ff;
    color: #1976d2;
    border: 1.5px solid #bfdbfe;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 14px;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}

.mxPd__rvToggleBtn:active {
    background: #dbeafe;
}

.mxPd__rvToggleBtn i {
    font-size: 18px;
}

/* ── Review card ── */
.mxPd__rvCard {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    border-left: 4px solid #e2e8f0;
}

.mxPd__rvCardHead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mxPd__rvAv {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.mxPd__rvName {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
}

.mxPd__rvDate {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

.mxPd__rvRating {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 3px;
}

.mxPd__rvRating i {
    font-size: 19px;
}

.mxPd__rvRating span {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

.mxPd__rvText {
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* ── Form alerts ── */
.mxPd__rvAlert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mxPd__rvAlert--success {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
}

.mxPd__rvAlert--error {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
}

.mxPd__rvAlert i {
    font-size: 18px;
    flex-shrink: 0;
}

.mxPd__rvAlert--success i {
    color: #16a34a;
}

.mxPd__rvAlert--error i {
    color: #ef4444;
}

.mxPd__rvAlert p {
    font-size: 12.5px;
    margin: 0;
    font-weight: 600;
}

.mxPd__rvAlert--success p {
    color: #15803d;
}

.mxPd__rvAlert--error p {
    color: #dc2626;
}

/* ── Rating picker (form) ── */
.mxPd__ratingRow {
    display: flex;
    gap: 6px;
    margin: 8px 0 14px;
    flex-wrap: wrap;
}

.mxPd__ratingBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #f8fafd;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    flex: 1;
    min-width: 52px;
    -webkit-tap-highlight-color: transparent;
    transition: all .15s;
}

.mxPd__ratingBtn i {
    font-size: 24px;
    color: #cbd5e1;
}

.mxPd__selectBox {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}

.mxPd__ratingLbl {
    font-size: 11.5px;
    color: #64748b;
    font-style: italic;
}

/* form err */
.mxPd__rvErr {
    font-size: 11px;
    color: #ef4444;
    margin-top: 2px;
    display: block;
}

.mxSr__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxSr__desktopView {
        display: none !important;
    }

    .mxSr__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }

    .mxSr {
        min-height: 100vh;
        padding-bottom: 30px;
    }

    .mxSr__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 28px;
        position: relative;
        overflow: hidden;
    }

    .mxSr__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxSr__heroTitle {
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxSr__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .7);
        margin: 0;
        font-weight: 500;
    }

    .mxSr__searchWrap {
        margin: -18px 12px 0;
        position: relative;
        z-index: 10;
    }

    .mxSr__searchBox {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(21, 101, 192, .15);
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxSr__searchBox i {
        font-size: 20px;
        color: #94a3b8;
        flex-shrink: 0;
    }

    .mxSr__searchInput {
        flex: 1;
        border: none;
        outline: none;
        font-size: 13.5px;
        font-weight: 500;
        color: #0f172a;
        background: transparent;
        font-family: inherit;
    }

    .mxSr__searchInput::placeholder {
        color: #94a3b8;
    }

    .mxSr__searchBtn {
        height: 38px;
        padding: 0 14px;
        border-radius: 10px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        flex-shrink: 0;
    }

    .mxSr__resetBtn {
        height: 38px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        flex-shrink: 0;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .mxSr__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px 12px 0;
    }

    .mxSr__chip {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 700;
    }

    .mxSr__chip--count {
        background: #fff3cd;
        color: #92400e;
        border: 1px solid #fde68a;
    }

    .mxSr__chip--keyword {
        background: #e0f2fe;
        color: #075985;
        border: 1px solid #bae6fd;
    }

    .mxSr__chip--keyword a {
        color: inherit;
        display: flex;
        align-items: center;
    }

    .mxSr__chip--keyword i {
        font-size: 14px;
    }

    .mxSr__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxSr__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    .mxSr__cardList {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxSr__propCard {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .09);
        overflow: hidden;
    }

    .mxSr__imgWrap {
        position: relative;
        height: 200px;
        overflow: hidden;
    }

    .mxSr__imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxSr__imgBadges {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 5px;
    }

    .mxSr__badge {
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxSr__badge--blue {
        background: #1976d2;
    }

    .mxSr__badge--green {
        background: #16a34a;
    }

    .mxSr__wishBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .85);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .mxSr__wishBtn i {
        font-size: 18px;
        color: #1976d2;
    }

    .mxSr__cardBody {
        padding: 14px 14px 0;
    }

    .mxSr__propTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.3;
    }

    .mxSr__propTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxSr__propLoc {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .mxSr__propLoc i {
        font-size: 14px;
        color: #94a3b8;
    }

    .mxSr__propPrice {
        font-size: 17px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 10px;
    }

    .mxSr__propStats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxSr__stat {
        background: #f8fafd;
        border-radius: 10px;
        padding: 7px 8px;
        text-align: center;
    }

    .mxSr__statLabel {
        font-size: 9px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .3px;
        display: block;
        margin-bottom: 2px;
    }

    .mxSr__statVal {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
    }

    .mxSr__cardFooter {
        display: flex;
        gap: 8px;
        padding: 0 14px 14px;
    }

    .mxSr__btnNum {
        flex: 1;
        height: 42px;
        border-radius: 11px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSr__btnContact {
        flex: 1.4;
        height: 42px;
        border-radius: 11px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxSr__btnContact i {
        font-size: 16px;
    }

    .mxSr__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxSr__empty i {
        font-size: 52px;
        margin-bottom: 12px;
        display: block;
    }

    .mxSr__empty h3 {
        font-size: 16px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxSr__empty p {
        font-size: 13px;
        margin: 0;
    }

    .mxSr__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxSr__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
    }

    .mxSr__pageBtn--active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxSr__pageBtn--disabled {
        opacity: .4;
        pointer-events: none;
    }

    .mxSr__catCard {
        background: #fff;
        border-radius: 20px;
        margin: 16px 12px 0;
        padding: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
    }

    .mxSr__catCardTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 12px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .mxSr__catList {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mxSr__catList li a {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 20px;
        background: #f0f6fd;
        color: #1565c0;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid #dbeafe;
    }
}


/* ══════════════════════════════════════════════
           HIDE / SHOW — only rule that matters
        ══════════════════════════════════════════════ */
.mxPpDesktop {
    display: block;
}

.mxPpMobile {
    display: none;
}

@media (max-width: 768px) {
    .mxPpDesktop {
        display: none !important;
    }

    .mxPpMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════════════════
           MOBILE STYLES
        ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxPp {
        min-height: calc(100vh - 118px);
        padding: 0 0 40px;
    }

    /* Hero */
    .mxPp__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 50%, #1976d2 100%);
        padding: 22px 16px 30px;
        position: relative;
        overflow: hidden;
    }

    .mxPp__hero::before {
        content: '';
        position: absolute;
        top: -30px;
        right: -30px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

    .mxPp__hero::after {
        content: '';
        position: absolute;
        bottom: -40px;
        left: -20px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .05);
    }

    .mxPp__heroTag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 255, 255, .18);
        color: #fff;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
    }

    .mxPp__hero h1 {
        font-size: 1.3rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 6px;
        position: relative;
        z-index: 1;
        line-height: 1.3;
    }

    .mxPp__hero h1 span {
        color: #ffd54f;
    }

    .mxPp__hero p {
        font-size: .8rem;
        color: rgba(255, 255, 255, .82);
        margin: 0 0 14px;
        position: relative;
        z-index: 1;
        font-weight: 500;
    }

    .mxPp__heroBadges {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
    }

    .mxPp__heroBadge {
        display: flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 255, 255, .15);
        color: #fff;
        padding: 5px 10px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 600;
    }

    /* Form Card — floats up over hero */
    .mxPp__formCard {
        background: #fff;
        border-radius: 20px 20px 0 0;
        margin-top: -16px;
        padding: 22px 16px 26px;
        box-shadow: 0 -4px 20px rgba(21, 101, 192, .10);
        position: relative;
        z-index: 2;
    }

    .mxPp__formTitle {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 16px;
    }

    /* Purpose tabs */
    .mxPp__purposeRow {
        display: flex;
        gap: 6px;
        margin-bottom: 16px;
    }

    .mxPp__purposeBtn {
        flex: 1;
        height: 42px;
        border-radius: 12px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        font-size: 13px;
        font-weight: 700;
        color: #64748b;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        font-family: inherit;
    }

    .mxPp__purposeBtn.active {
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        border-color: #1565c0;
        box-shadow: 0 3px 10px rgba(21, 101, 192, .25);
    }

    .mxPp__purposeBtn:active {
        transform: scale(.97);
    }

    /* Section labels */
    .mxPp__secLabel {
        font-size: 11px;
        font-weight: 700;
        color: #0f172a;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin: 14px 0 7px;
        display: block;
    }

    /* Category pills */
    .mxPp__catRow {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .mxPp__catPill {
        padding: 9px 16px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mxPp__catPill input {
        display: none;
    }

    .mxPp__catPill.checked {
        background: #e8f2fd;
        border-color: #1976d2;
        color: #1565c0;
    }

    .mxPp__catPill:active {
        transform: scale(.97);
    }

    /* Property type 2×2 grid */
    .mxPp__typeGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mxPp__typeTile {
        border: 1.5px solid #e2e8f0;
        border-radius: 14px;
        padding: 13px 10px;
        background: #f8fafd;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
        text-align: center;
    }

    .mxPp__typeTile input {
        display: none;
    }

    .mxPp__tileEmoji {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .mxPp__tileName {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

    .mxPp__typeTile.checked {
        border-color: #1976d2;
        background: #e8f2fd;
    }

    .mxPp__typeTile.checked .mxPp__tileName {
        color: #1565c0;
    }

    .mxPp__typeTile:active {
        transform: scale(.97);
    }

    /* Inputs */
    .mxPp__inputWrap {
        position: relative;
        margin-top: 6px;
        margin-bottom: 12px;
    }

    .mxPp__icoLeft {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #94a3b8;
        pointer-events: none;
    }

    .mxPp__codeLeft {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        font-weight: 700;
        color: #475569;
        pointer-events: none;
    }

    .mxPp__input {
        width: 100%;
        height: 52px;
        border: 1.5px solid #e2e8f0;
        border-radius: 13px;
        background: #f8fafd;
        padding: 0 14px 0 42px;
        font-size: 15px;
        font-weight: 500;
        color: #0f172a;
        font-family: inherit;
        outline: none;
        transition: border-color .2s, box-shadow .2s, background .2s;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
    }

    .mxPp__input.phone {
        padding-left: 50px;
    }

    .mxPp__input::placeholder {
        color: #b0bec5;
        font-weight: 400;
    }

    .mxPp__input:focus {
        border-color: #1976d2;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, .12);
        background: #fff;
    }

    .mxPp__loginNote {
        font-size: 12.5px;
        color: #64748b;
        font-weight: 500;
        margin: 4px 0 16px;
    }

    .mxPp__loginNote a {
        color: #1565c0;
        font-weight: 700;
        text-decoration: none;
    }

    /* Big CTA */
    .mxPp__ctaBtn {
        width: 100%;
        height: 54px;
        border-radius: 14px;
        background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
        color: #fff;
        border: none;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(21, 101, 192, .30);
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s, box-shadow .15s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: inherit;
    }

    .mxPp__ctaBtn:active {
        transform: scale(.97);
        box-shadow: 0 2px 8px rgba(21, 101, 192, .2);
    }

    .mxPp__ctaBtn i {
        font-size: 20px;
    }

    /* Section blocks */
    .mxPp__block {
        background: #fff;
        margin-top: 10px;
        padding: 20px 16px;
    }

    .mxPp__blockTitle {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
    }

    .mxPp__blockSub {
        font-size: 12px;
        color: #64748b;
        margin: 0 0 16px;
        font-weight: 500;
    }

    /* Steps */
    .mxPp__stepList {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mxPp__stepItem {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        background: #f8fafd;
        border-radius: 14px;
        padding: 14px;
    }

    .mxPp__stepNum {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        flex-shrink: 0;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        font-weight: 800;
    }

    .mxPp__stepInfo h4 {
        font-size: 13.5px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 3px;
    }

    .mxPp__stepInfo p {
        font-size: 12px;
        color: #64748b;
        margin: 0;
        font-weight: 500;
    }

    /* Stats */
    .mxPp__stats {
        background: linear-gradient(135deg, #0d47a1, #1976d2);
        padding: 20px 16px;
        margin-top: 10px;
    }

    .mxPp__statsHeading {
        font-size: 13.5px;
        font-weight: 700;
        color: rgba(255, 255, 255, .85);
        text-align: center;
        margin: 0 0 16px;
        line-height: 1.55;
    }

    .mxPp__statsGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .mxPp__statBox {
        text-align: center;
        background: rgba(255, 255, 255, .13);
        border-radius: 12px;
        padding: 13px 6px;
    }

    .mxPp__statNum {
        font-size: 19px;
        font-weight: 800;
        color: #fff;
    }

    .mxPp__statLbl {
        font-size: 10px;
        color: rgba(255, 255, 255, .75);
        margin-top: 3px;
        font-weight: 600;
        line-height: 1.3;
    }

    /* Action buttons grid */
    .mxPp__actions {
        background: #fff;
        margin-top: 10px;
        padding: 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mxPp__actionBtn {
        height: 46px;
        border-radius: 12px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
    }

    .mxPp__actionBtn:active {
        background: #e8f2fd;
        border-color: #1976d2;
        color: #1565c0;
    }

    .mxPp__actionBtn i {
        font-size: 16px;
    }

    /* FAQ */
    .mxPp__faqItem {
        border-radius: 12px;
        border: 1.5px solid #e2e8f0;
        margin-bottom: 8px;
        overflow: hidden;
    }

    .mxPp__faqQ {
        padding: 14px 16px;
        font-size: 13.5px;
        font-weight: 700;
        color: #0f172a;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        background: #f8fafd;
        gap: 10px;
    }

    .mxPp__faqQ i {
        font-size: 18px;
        color: #94a3b8;
        transition: transform .25s;
        flex-shrink: 0;
    }

    .mxPp__faqQ.open {
        background: #e8f2fd;
        color: #1565c0;
    }

    .mxPp__faqQ.open i {
        transform: rotate(180deg);
        color: #1565c0;
    }

    .mxPp__faqA {
        display: none;
        padding: 0 16px 14px;
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
        line-height: 1.65;
    }
}

.pp-input-row {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.pp-input-group {
    flex: 1;
    min-width: 160px;
    position: relative;
}

.pp-input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #94a3b8;
}

.pp-phone-code {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.pp-input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px 10px 36px;
    font-size: 14px;
    outline: none;
    transition: border .2s;
    box-sizing: border-box;
}

.pp-input.pp-phone {
    padding-left: 44px;
}

.pp-input:focus {
    border-color: #1976d2;
}

.x-modal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    z-index: 999999;
    padding: 16px;
}

.x-modal-dialog {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: slideUp .3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.x-modal-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.x-modal-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.x-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.x-step-indicator {
    display: flex;
    gap: 5px;
    margin-top: 4px;
}

.x-dot {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3);
    transition: background .3s;
}

.x-dot.active {
    background: #fff;
}

.x-close-btn {
    background: rgba(255, 255, 255, .15);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.x-close-btn:hover {
    background: rgba(255, 255, 255, .3);
}

.x-body {
    padding: 22px;
}

.x-step-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 16px;
}

.x-form-group {
    margin-bottom: 14px;
}

.x-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    display: block;
}

.x-input-wrap {
    position: relative;
}

.x-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #94a3b8;
}

.x-phone-code {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.x-input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 11px 14px 11px 38px;
    font-size: 14px;
    outline: none;
    transition: border .2s;
    box-sizing: border-box;
}

.x-input:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .1);
}

.x-input.error {
    border-color: #ef4444;
}

.x-error {
    font-size: 11px;
    color: #ef4444;
    margin-top: 4px;
    display: block;
    min-height: 14px;
}

.x-btn {
    width: 100%;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    border: none;
    padding: 13px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.x-btn:hover {
    opacity: .9;
}

.x-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.x-btn-ghost {
    width: 100%;
    background: transparent;
    color: #64748b;
    border: 1.5px solid #e2e8f0;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.x-btn-ghost:hover {
    background: #f1f5f9;
}

.x-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.x-otp-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eff6ff;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 16px;
}

.otp-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0 0 8px;
}

.otp-input {
    width: 44px;
    height: 50px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    outline: none;
    transition: .2s;
    color: #0f172a;
}

.otp-input:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .1);
}

.otp-input.filled {
    border-color: #1976d2;
    background: #eff6ff;
}

.otp-input.error {
    border-color: #ef4444;
    background: #fef2f2;
}

.x-resend-row {
    text-align: center;
    font-size: 12px;
    color: #64748b;
    margin: 10px 0 14px;
}

.x-resend-btn {
    background: none;
    border: none;
    color: #1976d2;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.type-select {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.type-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}

.type-card:hover {
    border-color: #1976d2;
    background: #eff6ff;
}

.type-card.selected {
    border-color: #1976d2;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
}

.type-card-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.type-card-label {
    font-size: 13px;
    font-weight: 700;
}

.type-card-sub {
    font-size: 10px;
    opacity: .7;
    margin-top: 2px;
}

.type-card input {
    display: none;
}

.x-success-icon {
    font-size: 56px;
    margin: 8px 0 12px;
}

.x-success-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
}

.x-success-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px;
}

.x-success-details {
    background: #f0fdf4;
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    color: #065f46;
    margin-bottom: 16px;
    text-align: left;
}

@media(max-width:480px) {
    .otp-input {
        width: 38px;
        height: 46px;
        font-size: 18px;
    }

    .type-select {
        grid-template-columns: 1fr;
    }

    .x-body {
        padding: 16px;
    }
}


/* ── Desktop pe mobile hidden ── */
.mxFp__mobileView {
    display: none;
}

@media (max-width: 768px) {

    .mxFp__desktopView {
        display: none !important;
    }

    .mxFp__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }

    .mxFp {
        min-height: 100vh;
        padding-bottom: 30px;
    }

    /* ── Hero ── */
    .mxFp__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 52px;
        position: relative;
        overflow: hidden;
    }

    .mxFp__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxFp__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxFp__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxFp__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxFp__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.3;
    }

    .mxFp__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* ── Filter Chips ── */
    .mxFp__filterWrap {
        background: #fff;
        margin: -22px 12px 0;
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(21, 101, 192, .14);
        padding: 10px 10px;
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    .mxFp__filterScroll {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxFp__filterScroll::-webkit-scrollbar {
        display: none;
    }

    .mxFp__chip {
        flex-shrink: 0;
        padding: 7px 14px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 700;
        background: #f1f5f9;
        color: #64748b;
        cursor: pointer;
        border: 1.5px solid transparent;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .mxFp__chip.active {
        background: #1976d2;
        color: #fff;
        border-color: #1565c0;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxFp__scrollBtn {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafd;
        color: #64748b;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* ── Section Title ── */
    .mxFp__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxFp__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* ── Card List ── */
    .mxFp__cardList {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxFp__propCard {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .09);
        overflow: hidden;
    }

    /* Image */
    .mxFp__imgWrap {
        position: relative;
        height: 210px;
        overflow: hidden;
    }

    .mxFp__imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxFp__imgBadges {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .mxFp__badge {
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxFp__badge--red {
        background: #ef4444;
    }

    .mxFp__badge--green {
        background: #16a34a;
    }

    .mxFp__badge--blue {
        background: #1976d2;
    }

    .mxFp__wishBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .88);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .mxFp__wishBtn i {
        font-size: 18px;
        color: #1976d2;
    }

    /* Card Body */
    .mxFp__cardBody {
        padding: 14px 14px 0;
    }

    .mxFp__propTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.3;
    }

    .mxFp__propTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxFp__propLoc {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .mxFp__propLoc i {
        font-size: 14px;
        color: #94a3b8;
    }

    .mxFp__propPrice {
        font-size: 17px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 10px;
    }

    .mxFp__propStats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxFp__stat {
        background: #f8fafd;
        border-radius: 10px;
        padding: 7px 8px;
        text-align: center;
    }

    .mxFp__statLabel {
        font-size: 9px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .3px;
        display: block;
        margin-bottom: 2px;
    }

    .mxFp__statVal {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
    }

    /* Footer Buttons */
    .mxFp__cardFooter {
        display: flex;
        gap: 8px;
        padding: 0 14px 14px;
    }

    .mxFp__btnNum {
        flex: 1;
        height: 42px;
        border-radius: 11px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxFp__btnContact {
        flex: 1.4;
        height: 42px;
        border-radius: 11px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxFp__btnContact i {
        font-size: 16px;
    }

    /* Empty */
    .mxFp__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxFp__empty i {
        font-size: 52px;
        margin-bottom: 12px;
        display: block;
    }

    .mxFp__empty h3 {
        font-size: 16px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxFp__empty p {
        font-size: 13px;
        margin: 0;
    }

    /* ── Pagination ── */
    .mxFp__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxFp__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
    }

    .mxFp__pageBtn--active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxFp__pageBtn--disabled {
        opacity: .4;
        pointer-events: none;
    }
}

/* ── Desktop pe mobile hidden ── */
.mxHo__mobileView {
    display: none;
}

@media (max-width: 768px) {

    .mxHo__desktopView {
        display: none !important;
    }

    .mxHo__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }

    .mxHo {
        min-height: 100vh;
        padding-bottom: 30px;
    }

    /* ── Hero ── */
    .mxHo__hero {
        background: linear-gradient(135deg, #b71c1c 0%, #c62828 50%, #d32f2f 100%);
        padding: 18px 16px 52px;
        position: relative;
        overflow: hidden;
    }

    .mxHo__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxHo__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxHo__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxHo__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxHo__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.3;
    }

    .mxHo__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* ── Section Title ── */
    .mxHo__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxHo__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* ── Card List ── */
    .mxHo__cardList {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxHo__propCard {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .09);
        overflow: hidden;
    }

    /* Image */
    .mxHo__imgWrap {
        position: relative;
        height: 210px;
        overflow: hidden;
    }

    .mxHo__imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxHo__imgBadges {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .mxHo__badge {
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxHo__badge--red {
        background: #ef4444;
    }

    .mxHo__badge--green {
        background: #16a34a;
    }

    .mxHo__badge--blue {
        background: #1976d2;
    }

    .mxHo__wishBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .88);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .mxHo__wishBtn i {
        font-size: 18px;
        color: #d32f2f;
    }

    /* Card Body */
    .mxHo__cardBody {
        padding: 14px 14px 0;
    }

    .mxHo__propTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.3;
    }

    .mxHo__propTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxHo__propLoc {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .mxHo__propLoc i {
        font-size: 14px;
        color: #94a3b8;
    }

    .mxHo__propPrice {
        font-size: 17px;
        font-weight: 900;
        color: #c62828;
        margin: 0 0 10px;
    }

    .mxHo__propStats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxHo__stat {
        background: #fff5f5;
        border-radius: 10px;
        padding: 7px 8px;
        text-align: center;
    }

    .mxHo__statLabel {
        font-size: 9px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .3px;
        display: block;
        margin-bottom: 2px;
    }

    .mxHo__statVal {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
    }

    /* Footer Buttons */
    .mxHo__cardFooter {
        display: flex;
        gap: 8px;
        padding: 0 14px 14px;
    }

    .mxHo__btnNum {
        flex: 1;
        height: 42px;
        border-radius: 11px;
        border: 1.5px solid #d32f2f;
        background: #fff;
        color: #c62828;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHo__btnContact {
        flex: 1.4;
        height: 42px;
        border-radius: 11px;
        border: none;
        background: linear-gradient(135deg, #c62828, #d32f2f);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxHo__btnContact i {
        font-size: 16px;
    }

    /* Empty */
    .mxHo__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxHo__empty i {
        font-size: 52px;
        margin-bottom: 12px;
        display: block;
    }

    .mxHo__empty h3 {
        font-size: 16px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxHo__empty p {
        font-size: 13px;
        margin: 0;
    }

    /* ── Pagination ── */
    .mxHo__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxHo__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
    }

    .mxHo__pageBtn--active {
        background: #d32f2f;
        border-color: #c62828;
        color: #fff;
        box-shadow: 0 2px 8px rgba(211, 47, 47, .28);
    }

    .mxHo__pageBtn--disabled {
        opacity: .4;
        pointer-events: none;
    }
}

/* ── Desktop pe mobile hidden ── */
.mxLp__mobileView {
    display: none;
}

@media (max-width: 768px) {

    .mxLp__desktopView {
        display: none !important;
    }

    .mxLp__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }

    .mxLp {
        min-height: 100vh;
        padding-bottom: 30px;
    }

    /* ── Hero ── */
    .mxLp__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 52px;
        position: relative;
        overflow: hidden;
    }

    .mxLp__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxLp__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxLp__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxLp__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxLp__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.3;
    }

    .mxLp__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* ── Section Title ── */
    .mxLp__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxLp__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* ── Card List ── */
    .mxLp__cardList {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxLp__propCard {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .09);
        overflow: hidden;
    }

    /* Image */
    .mxLp__imgWrap {
        position: relative;
        height: 210px;
        overflow: hidden;
    }

    .mxLp__imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxLp__imgBadges {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .mxLp__badge {
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxLp__badge--red {
        background: #ef4444;
    }

    .mxLp__badge--green {
        background: #16a34a;
    }

    .mxLp__badge--blue {
        background: #1976d2;
    }

    .mxLp__wishBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .88);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .mxLp__wishBtn i {
        font-size: 18px;
        color: #1976d2;
    }

    /* Card Body */
    .mxLp__cardBody {
        padding: 14px 14px 0;
    }

    .mxLp__propTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.3;
    }

    .mxLp__propTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxLp__propLoc {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .mxLp__propLoc i {
        font-size: 14px;
        color: #94a3b8;
    }

    .mxLp__propPrice {
        font-size: 17px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 10px;
    }

    .mxLp__propStats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxLp__stat {
        background: #f8fafd;
        border-radius: 10px;
        padding: 7px 8px;
        text-align: center;
    }

    .mxLp__statLabel {
        font-size: 9px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .3px;
        display: block;
        margin-bottom: 2px;
    }

    .mxLp__statVal {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
    }

    /* Footer Buttons */
    .mxLp__cardFooter {
        display: flex;
        gap: 8px;
        padding: 0 14px 14px;
    }

    .mxLp__btnNum {
        flex: 1;
        height: 42px;
        border-radius: 11px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxLp__btnContact {
        flex: 1.4;
        height: 42px;
        border-radius: 11px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxLp__btnContact i {
        font-size: 16px;
    }

    /* Empty */
    .mxLp__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxLp__empty i {
        font-size: 52px;
        margin-bottom: 12px;
        display: block;
    }

    .mxLp__empty h3 {
        font-size: 16px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxLp__empty p {
        font-size: 13px;
        margin: 0;
    }

    /* ── Pagination ── */
    .mxLp__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxLp__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
    }

    .mxLp__pageBtn--active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxLp__pageBtn--disabled {
        opacity: .4;
        pointer-events: none;
    }
}


/* ══════════════════════════════════════════════
           SHOW / HIDE
        ══════════════════════════════════════════════ */
.mxLb__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxLb__desktopView {
        display: none !important;
    }

    .mxLb__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════════════════
           MOBILE STYLES
        ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxLb {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
        font-family: 'DM Sans', sans-serif;
    }

    /* ── Hero ── */
    .mxLb__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 58px;
        position: relative;
        overflow: hidden;
    }

    .mxLb__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxLb__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxLb__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxLb__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 5px;
    }

    .mxLb__heroTitle {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 5px;
        line-height: 1.25;
    }

    .mxLb__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* ── Breadcrumb pill ── */
    .mxLb__breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, .13);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 40px;
        padding: 6px 14px;
        font-size: 11px;
        flex-wrap: wrap;
        margin-top: 12px;
        position: relative;
        z-index: 1;
    }

    .mxLb__bcStep {
        color: rgba(255, 255, 255, .55);
        font-weight: 600;
    }

    .mxLb__bcStep.active {
        color: #fff;
    }

    .mxLb__bcSep {
        color: rgba(255, 255, 255, .3);
    }

    /* ── Floating panel ── */
    .mxLb__panel {
        background: #fff;
        border-radius: 22px;
        margin: -38px 12px 0;
        box-shadow: 0 8px 32px rgba(21, 101, 192, .14);
        position: relative;
        z-index: 10;
        overflow: hidden;
    }

    /* ── Step header ── */
    .mxLb__stepHeader {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 16px 12px;
        border-bottom: 1.5px solid #f1f5f9;
    }

    .mxLb__stepNum {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 14px;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mxLb__stepTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 2px;
    }

    .mxLb__stepHint {
        font-size: 11px;
        color: #94a3b8;
        font-weight: 500;
        margin: 0;
    }

    .mxLb__backBtn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #eff6ff;
        color: #1565c0;
        border: none;
        border-radius: 20px;
        padding: 6px 13px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        font-family: 'DM Sans', sans-serif;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    .mxLb__backBtn i {
        font-size: 15px;
    }

    /* ── Tile grid ── */
    .mxLb__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px;
    }

    .mxLb__tile {
        background: #f8fafd;
        border: 1.5px solid #e8edf6;
        border-radius: 14px;
        padding: 14px 12px 12px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
    }

    .mxLb__tile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: #1976d2;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform .2s;
    }

    .mxLb__tile:active {
        transform: scale(.97);
    }

    .mxLb__tile.active {
        background: #1976d2;
        border-color: #1565c0;
        box-shadow: 0 4px 16px rgba(21, 101, 192, .28);
    }

    .mxLb__tile.active::before {
        background: #f59e0b;
        transform: scaleY(1);
    }

    .mxLb__tileIcon {
        font-size: 22px;
        margin-bottom: 6px;
        display: block;
    }

    .mxLb__tileName {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.3;
        margin: 0 0 3px;
    }

    .mxLb__tile.active .mxLb__tileName {
        color: #fff;
    }

    .mxLb__tileMeta {
        font-size: 10px;
        color: #94a3b8;
        font-weight: 600;
    }

    .mxLb__tile.active .mxLb__tileMeta {
        color: rgba(255, 255, 255, .65);
    }

    .mxLb__tileArrow {
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 14px;
        color: #d0dcf0;
        transition: all .15s;
    }

    .mxLb__tile:not(.active):active .mxLb__tileArrow {
        color: #1976d2;
        transform: translateX(3px);
    }

    .mxLb__tile.active .mxLb__tileArrow {
        color: rgba(255, 255, 255, .45);
    }

    /* property count badge */
    .mxLb__propBadge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #eff6ff;
        color: #1565c0;
        border-radius: 20px;
        padding: 3px 9px;
        font-size: 10px;
        font-weight: 700;
        margin-top: 5px;
    }

    .mxLb__propBadge.zero {
        background: #f1f5f9;
        color: #94a3b8;
    }

    .mxLb__tile.active .mxLb__propBadge {
        background: rgba(255, 255, 255, .2);
        color: #fff;
    }

    .mxLb__propDot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #f59e0b;
        flex-shrink: 0;
    }

    /* empty */
    .mxLb__empty {
        text-align: center;
        padding: 28px 16px;
        font-size: 13px;
        color: #94a3b8;
        font-weight: 600;
        grid-column: 1/-1;
    }

    .mxLb__empty i {
        font-size: 36px;
        display: block;
        margin-bottom: 8px;
        color: #cbd5e1;
    }

    /* step animation */
    @keyframes mxLbSlide {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mxLb__step {
        animation: mxLbSlide .22s ease both;
    }

}

/* end @media */

.mxAs__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxAs__desktopView {
        display: none !important;
    }

    .mxAs__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

@media (max-width: 768px) {

    .mxAs {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* ── Hero ── */
    .mxAs__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 58px;
        position: relative;
        overflow: hidden;
    }

    .mxAs__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxAs__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxAs__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxAs__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxAs__heroTitle {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.25;
    }

    .mxAs__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* ── Search bar (floating) ── */
    .mxAs__searchWrap {
        background: #fff;
        border-radius: 18px;
        margin: -30px 12px 0;
        padding: 12px 14px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .14);
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mxAs__searchWrap i {
        font-size: 20px;
        color: #94a3b8;
        flex-shrink: 0;
    }

    .mxAs__searchInput {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        font-weight: 500;
        color: #0f172a;
        font-family: inherit;
        background: transparent;
    }

    .mxAs__searchInput::placeholder {
        color: #94a3b8;
    }

    /* ── Section title ── */
    .mxAs__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxAs__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* ── Seller grid ── */
    .mxAs__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0 12px;
    }

    /* ── Seller card ── */
    .mxAs__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: #fff;
        border-radius: 18px;
        padding: 20px 12px 16px;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        border: 1.5px solid #f1f5f9;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
    }

    .mxAs__card:active {
        transform: scale(.97);
        box-shadow: 0 1px 6px rgba(15, 23, 42, .06);
    }

    /* Avatar */
    .mxAs__avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 1.1rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid #e8f2fd;
    }

    .mxAs__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* verified tick */
    .mxAs__cardWrap {
        position: relative;
        margin-bottom: 10px;
    }

    .mxAs__verifiedDot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #16a34a;
        border: 2px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxAs__verifiedDot i {
        font-size: 11px;
        color: #fff;
    }

    /* Name */
    .mxAs__name {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 4px;
        line-height: 1.3;
    }

    /* Location */
    .mxAs__loc {
        font-size: 11px;
        color: #94a3b8;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        margin-bottom: 10px;
    }

    .mxAs__loc i {
        font-size: 12px;
    }

    /* Badges */
    .mxAs__badges {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mxAs__badgeExp {
        font-size: 10px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        background: #fff8e1;
        color: #d97706;
    }

    .mxAs__badgeProp {
        font-size: 10px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        background: #eff6ff;
        color: #1565c0;
    }

    /* ── Empty state ── */
    .mxAs__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
        grid-column: 1/-1;
    }

    .mxAs__empty i {
        font-size: 48px;
        display: block;
        margin-bottom: 10px;
        color: #cbd5e1;
    }

    .mxAs__empty h3 {
        font-size: 15px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 5px;
    }

    .mxAs__empty p {
        font-size: 13px;
        margin: 0;
    }

}

/* end @media */

/* ══════════════════════════════════════════════
                                                                                                   DESKTOP CSS — original untouched
                                                                                                ══════════════════════════════════════════════ */
.sellers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 8px 0 32px;
}

@media (max-width:1024px) {
    .sellers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:768px) {
    .sellers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:480px) {
    .sellers-grid {
        grid-template-columns: 1fr;
    }
}

.seller-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 24px 16px 18px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.seller-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(25, 118, 210, 0.12);
    border-color: #a8c8f8;
    text-decoration: none;
    color: inherit;
}

.s-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #1976d2;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.s-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 5px;
    line-height: 1.3;
}

.s-location {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.s-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.badge-exp,
.badge-prop {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
}

.badge-exp {
    background: #fff8e1;
    color: #f59e0b;
}

.badge-prop {
    background: #e3f0ff;
    color: #1976d2;
}

.mxDev__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxDev__desktopView {
        display: none !important;
    }

    .mxDev__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════
                                       MOBILE
                                    ══════════════════════════════ */
@media (max-width: 768px) {

    .mxDev {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxDev__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 22px 16px 58px;
        position: relative;
        overflow: hidden;
    }

    .mxDev__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxDev__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxDev__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxDev__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 4px;
    }

    .mxDev__heroTitle {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.25;
    }

    .mxDev__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* Search */
    .mxDev__searchWrap {
        background: #fff;
        border-radius: 18px;
        margin: -30px 12px 0;
        padding: 12px 14px;
        box-shadow: 0 6px 24px rgba(21, 101, 192, .14);
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mxDev__searchWrap i {
        font-size: 20px;
        color: #94a3b8;
        flex-shrink: 0;
    }

    .mxDev__searchInput {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        font-weight: 500;
        color: #0f172a;
        font-family: inherit;
        background: transparent;
    }

    .mxDev__searchInput::placeholder {
        color: #94a3b8;
    }

    /* Section title */
    .mxDev__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxDev__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* Grid */
    .mxDev__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0 12px;
    }

    /* Card */
    .mxDev__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: #fff;
        border-radius: 18px;
        padding: 20px 12px 16px;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
        border: 1.5px solid #f1f5f9;
        -webkit-tap-highlight-color: transparent;
        transition: all .15s;
    }

    .mxDev__card:active {
        transform: scale(.97);
    }

    /* Logo/Image */
    .mxDev__logo {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 1.2rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid #e8f2fd;
    }

    .mxDev__logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mxDev__name {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 8px;
        line-height: 1.3;
    }

    .mxDev__propBadge {
        font-size: 10px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        background: #eff6ff;
        color: #1565c0;
    }

    /* Empty */
    .mxDev__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
        grid-column: 1/-1;
    }

    .mxDev__empty i {
        font-size: 48px;
        display: block;
        margin-bottom: 10px;
        color: #cbd5e1;
    }

    .mxDev__empty h3 {
        font-size: 15px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 5px;
    }

    .mxDev__empty p {
        font-size: 13px;
        margin: 0;
    }
}

/* ══════════════════════════════
                                       DESKTOP
                                    ══════════════════════════════ */
.dev-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    padding: 8px 0 32px;
}

@media (max-width:1200px) {
    .dev-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width:992px) {
    .dev-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:768px) {
    .dev-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dev-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    padding: 24px 16px 20px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.dev-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(25, 118, 210, 0.13);
    border-color: #a8c8f8;
    text-decoration: none;
    color: inherit;
}

/* Developer logo */
.dev-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e3f0fc;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
}

.dev-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dev-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
    line-height: 1.3;
}

.dev-prop-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
    background: #e3f0ff;
    color: #1976d2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dev-prop-badge svg {
    flex-shrink: 0;
}

.mxDp__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxDp__desktopView {
        display: none !important;
    }

    .mxDp__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

@media (max-width: 768px) {

    .mxDp {
        min-height: 100vh;
        padding-bottom: 30px;
    }

    /* ── Hero ── */
    .mxDp__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 18px 16px 58px;
        position: relative;
        overflow: hidden;
    }

    .mxDp__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxDp__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxDp__heroInner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mxDp__heroLogo {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.15);
        border: 2px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
    }

    .mxDp__heroLogo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mxDp__heroText {}

    .mxDp__heroLabel {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 0 0 3px;
    }

    .mxDp__heroTitle {
        font-size: 1.1rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 3px;
        line-height: 1.3;
    }

    .mxDp__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        font-weight: 500;
        margin: 0;
    }

    /* Section Title */
    .mxDp__secTitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 16px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxDp__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* Card List */
    .mxDp__cardList {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .mxDp__propCard {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, .09);
        overflow: hidden;
    }

    /* Image */
    .mxDp__imgWrap {
        position: relative;
        height: 210px;
        overflow: hidden;
    }

    .mxDp__imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mxDp__imgBadges {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    .mxDp__badge {
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxDp__badge--red {
        background: #ef4444;
    }

    .mxDp__badge--green {
        background: #16a34a;
    }

    .mxDp__badge--blue {
        background: #1976d2;
    }

    .mxDp__wishBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .88);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .mxDp__wishBtn i {
        font-size: 18px;
        color: #1976d2;
    }

    /* Body */
    .mxDp__cardBody {
        padding: 14px 14px 0;
    }

    .mxDp__propTitle {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.3;
    }

    .mxDp__propTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxDp__propLoc {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .mxDp__propLoc i {
        font-size: 14px;
        color: #94a3b8;
    }

    .mxDp__propPrice {
        font-size: 17px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 10px;
    }

    .mxDp__propStats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxDp__stat {
        background: #f8fafd;
        border-radius: 10px;
        padding: 7px 8px;
        text-align: center;
    }

    .mxDp__statLabel {
        font-size: 9px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .3px;
        display: block;
        margin-bottom: 2px;
    }

    .mxDp__statVal {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
    }

    /* Footer */
    .mxDp__cardFooter {
        display: flex;
        gap: 8px;
        padding: 0 14px 14px;
    }

    .mxDp__btnNum {
        flex: 1;
        height: 42px;
        border-radius: 11px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mxDp__btnContact {
        flex: 1.4;
        height: 42px;
        border-radius: 11px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
    }

    .mxDp__btnContact i {
        font-size: 16px;
    }

    /* Empty */
    .mxDp__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxDp__empty i {
        font-size: 52px;
        margin-bottom: 12px;
        display: block;
        color: #cbd5e1;
    }

    .mxDp__empty h3 {
        font-size: 16px;
        font-weight: 800;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxDp__empty p {
        font-size: 13px;
        margin: 0;
    }

    /* Pagination */
    .mxDp__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 20px 12px 0;
        flex-wrap: wrap;
    }

    .mxDp__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 8px;
    }

    .mxDp__pageBtn--active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxDp__pageBtn--disabled {
        opacity: .4;
        pointer-events: none;
    }
}

/* ══════════════════════════════
                       DESKTOP — Developer info bar
                    ══════════════════════════════ */
.dev-info-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 18px 24px;
    box-shadow: 0 2px 12px rgba(25, 118, 210, 0.08);
    margin-bottom: 20px;
    border: 1px solid #e3f0fc;
}

.dev-info-logo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e3f0fc;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
}

.dev-info-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dev-info-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 4px;
}

.dev-info-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1976d2;
    background: #e3f0ff;
    padding: 3px 12px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* ═══════════════════════════════════════════════
                                                       SHARED
                                                    ═══════════════════════════════════════════════ */
.mxLb__desktopView {
    display: block;
}

.mxLb__mobileView {
    display: none;
}

@media (max-width: 768px) {
    .mxLb__desktopView {
        display: none !important;
    }

    .mxLb__mobileView {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ═══════════════════════════════════════════════
                                                       DESKTOP
                                                    ═══════════════════════════════════════════════ */
.mxLb__deskWrap {
    min-height: 100vh;
    background: #f4f7fb;
    font-family: 'Segoe UI', sans-serif;
}

/* Hero */
.mxLb__deskHero {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 50%, #1976d2 100%);
    padding: 30px 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mxLb__deskHero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}

.mxLb__deskHero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.mxLb__deskHeroInner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.mxLb__deskHeroEyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.mxLb__deskHeroTitle {
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.2;
}

.mxLb__deskHeroSub {
    font-size: 15px;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 28px;
}

/* Search */
.mxLb__deskSearchWrap {
    max-width: 480px;
    margin: 0 auto;
}

.mxLb__deskSearchBox {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}

.mxLb__deskSearchBox i {
    color: #94a3b8;
    font-size: 22px;
    flex-shrink: 0;
}

.mxLb__deskSearchBox input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #0f172a;
    background: transparent;
}

.mxLb__deskSearchBox input::placeholder {
    color: #94a3b8;
}

/* Breadcrumb */
.mxLb__deskBreadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 40px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.mxLb__deskBreadcrumb a {
    color: #64748b;
    text-decoration: none;
}

.mxLb__deskBreadcrumb a:hover {
    color: #1976d2;
}

.mxLb__deskBreadcrumb i {
    font-size: 14px;
}

/* Stats bar */
.mxLb__deskStats {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mxLb__deskStatsTitle {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.mxLb__deskStatsCount {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Grid */
.mxLb__deskGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 20px 40px 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card */
.mxLb__deskCard {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1.5px solid #e8edf5;
    border-radius: 18px;
    padding: 18px 16px;
    text-decoration: none !important;
    transition: all .2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mxLb__deskCard::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #1565c0, #1976d2);
    opacity: 0;
    transition: opacity .2s;
}

.mxLb__deskCard:hover {
    border-color: #bbdefb;
    box-shadow: 0 8px 32px rgba(25, 118, 210, .12);
    transform: translateY(-3px);
}

.mxLb__deskCard:hover::before {
    opacity: 1;
}

.mxLb__deskCardIcon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #e3f0ff, #bbdefb);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.mxLb__deskCard:hover .mxLb__deskCardIcon {
    background: linear-gradient(135deg, #1565c0, #1976d2);
}

.mxLb__deskCardIcon i {
    font-size: 26px;
    color: #1976d2;
    transition: color .2s;
}

.mxLb__deskCard:hover .mxLb__deskCardIcon i {
    color: #fff;
}

.mxLb__deskCardBody {
    flex: 1;
    min-width: 0;
}

.mxLb__deskCardName {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mxLb__deskCardMeta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #64748b;
}

.mxLb__deskCardMeta i {
    font-size: 14px;
    color: #94a3b8;
}

.mxLb__deskCardArrow {
    font-size: 22px;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: all .2s;
}

.mxLb__deskCard:hover .mxLb__deskCardArrow {
    color: #1976d2;
    transform: translateX(4px);
}

/* Empty */
.mxLb__deskEmpty {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
    color: #94a3b8;
}

.mxLb__deskEmpty i {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
}

.mxLb__deskEmpty h3 {
    font-size: 18px;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 8px;
}

.mxLb__deskEmpty p {
    font-size: 14px;
    margin: 0;
}

/* ═══════════════════════════════════════════════
                                                       MOBILE
                                                    ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mxLb {
        min-height: calc(100vh - 118px);
        padding-bottom: 30px;
    }

    /* Hero */
    .mxLb__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
        padding: 20px 16px 54px;
        position: relative;
        overflow: hidden;
    }

    .mxLb__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxLb__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxLb__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxLb__heroEyebrow {
        display: inline-block;
        background: rgba(255, 255, 255, .12);
        color: rgba(255, 255, 255, .8);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 4px 10px;
        border-radius: 20px;
        margin-bottom: 8px;
    }

    .mxLb__heroTitle {
        font-size: 1.2rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 5px;
        line-height: 1.3;
    }

    .mxLb__heroSub {
        font-size: 12px;
        color: rgba(255, 255, 255, .65);
        margin: 0;
        font-weight: 500;
    }

    /* Search card */
    .mxLb__searchCard {
        background: #fff;
        margin: -22px 12px 0;
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(21, 101, 192, .14);
        padding: 12px 14px;
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxLb__searchCard i {
        color: #94a3b8;
        font-size: 20px;
        flex-shrink: 0;
    }

    .mxLb__searchCard input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        color: #0f172a;
        background: transparent;
    }

    .mxLb__searchCard input::placeholder {
        color: #94a3b8;
    }

    /* Section title */
    .mxLb__secTitle {
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
        margin: 20px 12px 10px;
        text-transform: uppercase;
        letter-spacing: .6px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mxLb__secTitle::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, #e2e8f0, transparent);
    }

    /* Country list */
    .mxLb__list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 12px;
    }

    /* Country row card */
    .mxLb__row {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border-radius: 16px;
        padding: 14px 14px;
        text-decoration: none !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        border: 1.5px solid transparent;
        transition: border-color .15s;
        -webkit-tap-highlight-color: transparent;
    }

    .mxLb__row:active {
        border-color: #1976d2;
        background: #f0f7ff;
    }

    .mxLb__rowIcon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        flex-shrink: 0;
        background: linear-gradient(135deg, #e3f0ff, #bbdefb);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mxLb__rowIcon i {
        font-size: 22px;
        color: #1976d2;
    }

    .mxLb__rowBody {
        flex: 1;
        min-width: 0;
    }

    .mxLb__rowName {
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mxLb__rowCount {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 11.5px;
        color: #64748b;
    }

    .mxLb__rowCount i {
        font-size: 13px;
        color: #94a3b8;
    }

    .mxLb__rowArrow {
        font-size: 22px;
        color: #cbd5e1;
        flex-shrink: 0;
    }

    /* Empty */
    .mxLb__empty {
        text-align: center;
        padding: 50px 20px;
        color: #94a3b8;
    }

    .mxLb__empty i {
        font-size: 48px;
        display: block;
        margin-bottom: 10px;
    }

    .mxLb__empty h3 {
        font-size: 15px;
        font-weight: 700;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxLb__empty p {
        font-size: 13px;
        margin: 0;
    }
}

.mxLpDesktop {
    display: block;
}

.mxLpMobile {
    display: none;
}

@media (max-width: 768px) {
    .mxLpDesktop {
        display: none !important;
    }

    .mxLpMobile {
        display: block !important;
    }

    body {
        background: #f0f4fb !important;
    }
}

/* ══════════════════════════════════════════
                       MOBILE STYLES
                    ══════════════════════════════════════════ */
@media (max-width: 768px) {

    .mxLp {
        min-height: calc(100vh - 118px);
        padding-bottom: 32px;
    }

    /* Hero */
    .mxLp__hero {
        background: linear-gradient(135deg, #0d47a1 0%, #1565c0 60%, #1976d2 100%);
        padding: 14px 16px 52px;
        position: relative;
        overflow: hidden;
    }

    .mxLp__hero::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -30px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
    }

    .mxLp__hero::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: -20px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .mxLp__heroInner {
        position: relative;
        z-index: 1;
    }

    .mxLp__heroTitle {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 4px;
    }

    .mxLp__heroSub {
        font-size: .75rem;
        color: rgba(255, 255, 255, .78);
        margin: 0;
        font-weight: 500;
    }

    /* Breadcrumb */
    .mxLp__breadcrumb {
        display: flex;
        align-items: center;
        gap: 0;
        flex-wrap: wrap;
        font-size: 11.5px;
        background: #fff;
        margin: 10px 12px 0;
        border-radius: 12px;
        box-shadow: 0 1px 6px rgba(15, 23, 42, .07);
        overflow: hidden;
    }

    .mxLp__breadcrumb a {
        color: #1565c0;
        text-decoration: none;
        font-weight: 700;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        transition: background .15s;
    }

    .mxLp__breadcrumb a:active {
        background: #f0f7ff;
    }

    .mxLp__breadcrumb a i {
        font-size: 14px;
    }

    .mxLp__breadcrumb span {
        color: #0f172a;
        font-weight: 700;
        padding: 8px 10px 8px 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }

    .mxLp__breadcrumb .mxLp__sep {
        color: #cbd5e1;
        font-size: 16px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    /* Chips scroll */
    .mxLp__chipsWrap {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 12px 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mxLp__chipsWrap::-webkit-scrollbar {
        display: none;
    }

    .mxLp__chip {
        flex-shrink: 0;
        padding: 7px 14px;
        border-radius: 20px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }

    .mxLp__chip:active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }

    /* Count bar */
    .mxLp__countBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px 0;
    }

    .mxLp__countText {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
    }

    .mxLp__countSub {
        font-size: 11px;
        color: #94a3b8;
        font-weight: 500;
    }

    /* Cards */
    .mxLp__cards {
        padding: 10px 12px 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mxLp__card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .07);
        overflow: hidden;
        position: relative;
    }

    /* Image */
    .mxLp__cardImg {
        position: relative;
        height: 190px;
        overflow: hidden;
    }

    .mxLp__cardImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Badges */
    .mxLp__badges {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        gap: 5px;
        z-index: 2;
        flex-wrap: wrap;
    }

    .mxLp__badge {
        padding: 3px 9px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
    }

    .mxLp__badge--hot {
        background: #ef4444;
    }

    .mxLp__badge--ver {
        background: #16a34a;
    }

    .mxLp__badge--feat {
        background: #1976d2;
    }

    /* Wishlist */
    .mxLp__wishBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        -webkit-tap-highlight-color: transparent;
    }

    .mxLp__wishBtn i {
        font-size: 17px;
        color: #64748b;
    }

    /* Card body */
    .mxLp__cardBody {
        padding: 14px;
    }

    .mxLp__cardTitle {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 5px;
        line-height: 1.35;
    }

    .mxLp__cardTitle a {
        color: inherit;
        text-decoration: none;
    }

    .mxLp__cardLoc {
        display: flex;
        align-items: flex-start;
        gap: 3px;
        font-size: 11.5px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 8px;
        flex-wrap: wrap;
        line-height: 1.4;
    }

    .mxLp__cardLoc i {
        font-size: 14px;
        color: #94a3b8;
        margin-top: 1px;
        flex-shrink: 0;
    }

    .mxLp__cardLoc a {
        color: #1565c0;
        text-decoration: none;
        font-weight: 600;
    }

    .mxLp__price {
        font-size: 17px;
        font-weight: 900;
        color: #1565c0;
        margin: 0 0 8px;
    }

    .mxLp__desc {
        font-size: 12px;
        color: #64748b;
        line-height: 1.6;
        margin: 0 0 10px;
        font-weight: 500;
    }

    /* Feature pills */
    .mxLp__feats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 12px;
    }

    .mxLp__feat {
        display: flex;
        align-items: center;
        gap: 4px;
        background: #f0f6fd;
        border-radius: 8px;
        padding: 4px 9px;
        font-size: 11px;
        font-weight: 700;
        color: #1565c0;
    }

    .mxLp__feat i {
        font-size: 13px;
    }

    /* Dealer row */
    .mxLp__dealer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .mxLp__dealerInfo {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 1;
        min-width: 0;
        text-decoration: none;
    }

    .mxLp__dealerImg {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e2e8f0;
        flex-shrink: 0;
    }

    .mxLp__dealerName {
        font-size: 12px;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mxLp__dealerBadge {
        font-size: 10px;
        color: #16a34a;
        font-weight: 700;
        display: block;
    }

    .mxLp__dealerBtns {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    .mxLp__btnNum {
        height: 34px;
        padding: 0 12px;
        border-radius: 9px;
        border: 1.5px solid #1976d2;
        background: #fff;
        color: #1565c0;
        font-size: 11.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }

    .mxLp__btnCall {
        height: 34px;
        padding: 0 12px;
        border-radius: 9px;
        border: none;
        background: linear-gradient(135deg, #1565c0, #1976d2);
        color: #fff;
        font-size: 11.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        align-items: center;
        gap: 4px;
        box-shadow: 0 2px 8px rgba(21, 101, 192, .22);
        white-space: nowrap;
    }

    .mxLp__btnCall i {
        font-size: 13px;
    }

    /* Empty */
    .mxLp__empty {
        background: #fff;
        border-radius: 16px;
        padding: 50px 20px;
        text-align: center;
        color: #94a3b8;
    }

    .mxLp__empty i {
        font-size: 48px;
        display: block;
        margin-bottom: 12px;
    }

    .mxLp__empty h3 {
        font-size: 15px;
        font-weight: 700;
        color: #64748b;
        margin: 0 0 6px;
    }

    .mxLp__empty p {
        font-size: 13px;
        margin: 0;
    }

    /* Pagination */
    .mxLp__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 16px 12px;
        flex-wrap: wrap;
    }

    .mxLp__pageBtn {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        padding: 0 10px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        color: #475569;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        font-family: inherit;
    }

    .mxLp__pageBtn.active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
        box-shadow: 0 2px 8px rgba(25, 118, 210, .25);
    }

    .mxLp__pageBtn.disabled {
        opacity: .4;
        cursor: not-allowed;
        pointer-events: none;
    }
}

/* end @media */

/* ===== mxSrch Search Card - Android Fixed ===== */

.mxSrch__searchCard {
    width: 100%;
    padding: 12px 12px;
    box-sizing: border-box;
}

.mxSrch__searchRow {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    /* Android recommended touch height */
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;

    /* Android me shadow fix */
    -webkit-appearance: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.mxSrch__searchInput {
    flex: 1 1 0%;
    /* Android flex shrink fix */
    min-width: 0;
    /* Text overflow fix */
    height: 100%;
    padding: 0 12px;
    border: none;
    outline: none;
    background: transparent;

    font-size: 16px;
    /* 16px ZARURI hai — Android zoom rokta hai */
    line-height: 1.4;
    color: #222;

    /* Android input default styles hatao */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none;

    /* Android me placeholder color */
    color: #222;
}

.mxSrch__searchInput::placeholder {
    color: #999;
    font-size: 14px;
}

/* Android autofill background fix */
.mxSrch__searchInput:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
}

.mxSrch__searchBtn,
.mxSrch__filterBtn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    /* Android touch target minimum */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;

    /* Android button default reset */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    outline: none;

    /* Smooth tap feedback */
    transition: background 0.15s ease;
}

.mxSrch__searchBtn:active,
.mxSrch__filterBtn:active {
    background: rgba(0, 0, 0, 0.06);
}

.mxSrch__searchBtn {
    color: #555;
    border-left: 1px solid #eee;
}

.mxSrch__filterBtn {
    color: #555;
    border-left: 1px solid #eee;
    position: relative;
    /* Dot ke liye */
}

.mxSrch__searchBtn .material-icons,
.mxSrch__filterBtn .material-icons {
    font-size: 22px;
    display: block;
    line-height: 1;

    /* Android me icon rendering fix */
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
}

/* Filter active dot */
.mxSrch__filterDot {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 7px;
    height: 7px;
    background: #e53935;
    border-radius: 50%;
    border: 1.5px solid #fff;
}

.mxSrch__filterDot.active {
    display: block;
}

/* ===== Small Android phones (360px se kam) ===== */
@media (max-width: 360px) {
    .mxSrch__searchCard {
        padding: 10px 10px;
    }

    .mxSrch__searchInput {
        font-size: 15px;
        padding: 0 8px;
    }

    .mxSrch__searchBtn,
    .mxSrch__filterBtn {
        width: 44px;
        min-width: 44px;
    }
}