/**
 * MG QUẢNG TRỊ - RESPONSIVE & MOBILE-FIRST OPTIMIZATION
 * Chuẩn Mobile-First, Touch Targets >= 44px, Safe-Area iOS, Zero Horizontal Overflow
 */

html, body {
    overflow-x: clip;
    max-width: 100vw;
    width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   1. FLOATING MOBILE BOTTOM BAR (MÀN HÌNH DI ĐỘNG <= 768PX)
   ========================================================================== */
.mg-mobile-bottom-bar {
    display: none; /* Mặc định ẩn trên Desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -3px 18px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #e2e8f0;
    z-index: 1990;
    grid-template-columns: repeat(4, 1fr);
}

.mg-mb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 6px 4px;
    color: var(--mg-gray-700);
    text-align: center;
    cursor: pointer;
    background: transparent;
    user-select: none;
    transition: transform 0.15s ease, background 0.15s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.mg-mb-btn:active {
    transform: scale(0.95);
    background: var(--mg-gray-100);
}

.mb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin-bottom: 2px;
}

.mb-text {
    font-size: 0.688rem;
    font-family: var(--mg-font-heading);
    font-weight: 700;
    line-height: 1;
}

.mb-call .mb-icon svg { color: #16a34a; }
.mb-zalo .mb-icon { color: #0284c7; }
.mb-quote .mb-icon svg { color: var(--mg-black); }

/* Nút lái thử nổi bật nhất */
.mb-testdrive {
    background: var(--mg-red);
    color: #ffffff;
}
.mb-testdrive .mb-icon svg { color: #ffffff; }
.mb-testdrive .mb-text { color: #ffffff; }
.mb-testdrive:active {
    background: var(--mg-red-dark);
}

/* ==========================================================================
   2. TABLET BREAKPOINTS (MAX-WIDTH: 1024PX)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Cinema Hero Slider */
    .mg-hero-slides-wrapper {
        min-height: 460px;
    }

    /* Assurance Bar */
    .mg-assurance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Heritage Block */
    .mg-heritage-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .mg-heritage-narrative {
        max-width: 100%;
        text-align: center;
    }

    .mg-title-divider.left {
        margin: 14px auto 22px;
    }

    .mg-heritage-actions {
        justify-content: center;
    }

    /* Podium Grid Tablet (2 Cột cân đối) */
    .mg-car-grid,
    .mg-podium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .mg-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .mg-car-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        text-align: center;
        gap: 20px;
    }

    .mg-car-hero-content {
        display: contents !important;
    }

    .mg-hero-title-block {
        order: 1 !important;
    }

    .mg-car-hero-stage-container {
        order: 2 !important;
    }

    .mg-hero-details-block {
        order: 3 !important;
    }

    .mg-car-hero-cta {
        justify-content: center;
    }

    .mg-car-hero-img {
        max-height: 280px;
    }

    .mg-location-card {
        grid-template-columns: 1fr;
    }

    .mg-location-map iframe {
        min-height: 320px;
    }

    .mg-cta-box {
        flex-direction: column;
        gap: 25px;
        text-align: center;
        padding: 40px 30px;
    }

    .mg-cta-desc {
        margin: 0 auto;
    }

    .mg-article-layout {
        grid-template-columns: 1fr;
    }

    .mg-article-sidebar {
        margin-top: 30px;
    }

    .mg-showroom-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ==========================================================================
   3. MOBILE BREAKPOINTS (MAX-WIDTH: 768PX)
   ========================================================================== */
@media (max-width: 768px) {
    /* Đẩy body lên để không bị che khuất bởi Mobile Bottom Bar & iOS Safe Area */
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Hiển thị Mobile Bottom Bar */
    .mg-mobile-bottom-bar {
        display: grid;
    }

    /* Ẩn Quick Contact Bar của Desktop */
    .mg-quick-contact-bar {
        display: none !important;
    }

    /* Topbar tinh gọn trên Mobile */
    .mg-topbar-address,
    .mg-topbar-announcement {
        display: none !important;
    }

    .mg-topbar-inner {
        justify-content: center;
        padding: 4px 16px;
    }

    .mg-topbar-hotline {
        font-size: 0.813rem;
    }

    /* Header Nav & Mobile Toggle */
    .mg-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .mg-header.is-scrolled {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .mg-primary-navigation,
    .mg-header-actions .mg-btn {
        display: none !important;
    }

    .mg-mobile-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mg-mobile-toggle .bar {
        display: block;
        width: 24px;
        height: 2.5px;
        background-color: var(--mg-black);
        border-radius: 2px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    }

    .mg-mobile-toggle.is-active .bar:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    .mg-mobile-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    .mg-mobile-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    .mg-header-inner {
        height: 60px;
        padding: 0 16px;
    }

    /* Button Wrap Safeguard on Mobile */
    .mg-btn {
        max-width: 100%;
        box-sizing: border-box;
    }

    .specs-download-wrap {
        width: 100%;
        max-width: 100%;
    }

    .specs-download-wrap .mg-btn {
        white-space: normal !important;
        line-height: 1.4;
        text-align: center;
        padding: 10px 14px;
        max-width: 100%;
    }

    .mg-logo-img {
        height: 38px;
    }

    /* Drawer Menu Mobile */
    .mg-drawer-content {
        width: 86%;
        max-width: 360px;
        padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px));
    }

    .mg-drawer-header {
        padding: 16px 20px;
    }

    .mg-drawer-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
    }

    /* Hero Banner Slider Mobile */
    .mg-hero-slides-wrapper {
        aspect-ratio: 9 / 14;
        min-height: 440px;
        max-height: 600px;
    }

    .mg-hero-slide-action {
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

    .mg-slider-arrow {
        display: none !important;
    }

    .mg-slider-line-pagination {
        bottom: 12px;
        gap: 8px;
        padding: 4px 10px;
    }

    .mg-slider-line-pagination .line-name {
        display: none !important;
    }

    .pagination-line-item .line-track {
        width: 22px;
        height: 3.5px;
    }

    .pagination-line-item.is-active .line-track {
        width: 36px;
    }

    /* Quick Assurance Bar (Lưới 2x2 gọn gàng, tiết kiệm không gian) */
    .mg-assurance-bar {
        padding: 16px 0;
    }

    .mg-assurance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .assurance-item {
        padding: 12px 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        gap: 8px;
    }

    .assurance-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .assurance-icon svg {
        width: 18px;
        height: 18px;
    }

    .assurance-text strong {
        font-size: 0.725rem;
        line-height: 1.25;
        display: block;
    }

    .assurance-text span {
        font-size: 0.625rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.2;
    }

    /* Filter Tabs Phân khúc xe: Hiển thị đầy đủ mọi danh mục, căn giữa, không tràn, không khuất */
    .mg-filter-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 10px;
        margin: 0 auto 24px;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .mg-tab-btn {
        flex: 0 1 auto;
        white-space: nowrap;
        padding: 8px 15px;
        font-size: 0.813rem;
        min-height: 38px;
        border-radius: 20px;
    }

    /* Vehicle Lineup Cards (Thẻ xe chuẩn Mobile) */
    .mg-car-grid,
    .mg-podium-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 4px 0 16px;
    }

    .mg-card-media-stage {
        height: 185px;
        padding: 16px 14px 10px;
    }

    .mg-card-car-render {
        max-height: 150px;
    }

    .mg-card-body {
        padding: 14px 16px 18px;
    }

    .mg-card-title {
        font-size: 1.1rem;
    }

    .mg-card-price-row .price-value {
        font-size: 1.05rem;
    }

    .mg-card-specs-ticker .spec-label {
        white-space: normal;
        line-height: 1.3;
    }

    .mg-card-specs-ticker .spec-data {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.4;
        min-height: 2.8em;
        overflow-wrap: anywhere;
    }

    .mg-card-action-group {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mg-btn-action {
        padding: 10px 8px;
        font-size: 0.775rem;
        min-height: 44px;
    }

    /* Heritage Section Mobile */
    .mg-heritage-section {
        padding: 48px 0 52px;
    }

    .mg-heritage-container {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 30px;
    }

    .mg-heritage-narrative,
    .mg-heritage-visual,
    .heritage-card-box,
    .heritage-pill-feature {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mg-heritage-title {
        font-size: 1.45rem;
        line-height: 1.25;
        word-break: break-word;
        max-width: 100%;
    }

    .mg-heritage-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 6px;
        margin-bottom: 24px;
    }

    .mg-heritage-stats .stat-card {
        padding: 12px 6px;
        min-width: 0 !important;
    }

    .mg-heritage-stats .stat-card .stat-num {
        font-size: 1.35rem;
    }

    .mg-heritage-stats .stat-card .stat-label {
        font-size: 0.65rem;
    }

    .mg-heritage-actions .mg-btn {
        width: 100%;
        min-height: 48px;
    }

    /* Section Headers */
    .mg-section {
        padding: 48px 0;
    }

    .mg-section-title {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
        line-height: 1.3;
        word-break: keep-all;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .mg-section-header {
        margin-bottom: 30px;
    }

    .mg-section-desc {
        font-size: 0.938rem;
    }

    /* Financial Calculator Mobile */
    .mg-calc-section {
        padding: 48px 0;
    }

    .mg-calc-tabs-toggle {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 24px;
    }

    .mg-calc-tab-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 0.875rem;
        min-height: 46px;
    }

    .mg-calculator-card {
        padding: 20px 14px;
        border-radius: 12px;
    }

    .mg-calc-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 24px;
    }

    .mg-calc-inputs,
    .mg-calc-results {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mg-calc-results {
        padding: 20px 14px !important;
    }

    .mg-checkbox-label {
        font-size: 0.813rem;
        line-height: 1.4;
    }

    .mg-fee-item {
        font-size: 0.85rem;
    }

    .mg-fee-item .fee-val {
        font-size: 0.85rem;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 8px;
    }

    .total-price {
        font-size: 1.4rem;
    }

    /* News & Articles Mobile */
    .mg-news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mg-news-more .mg-btn {
        width: 100%;
        min-height: 48px;
    }

    /* Location & Showroom Card Mobile */
    .mg-location-card {
        grid-template-columns: 1fr;
        border-radius: 14px;
    }

    .mg-location-info {
        padding: 24px 18px;
    }

    .mg-location-title {
        font-size: 1.35rem;
    }

    .mg-location-map iframe {
        min-height: 250px;
        height: 250px;
    }

    /* Modals Popup Mobile (Form tư vấn / Đặt lịch) */
    .mg-modal-dialog {
        width: 94%;
        max-width: 440px;
        max-height: calc(100vh - 40px);
        margin: 20px auto;
        overscroll-behavior: contain;
        border-radius: 14px;
    }

    .mg-modal-header {
        padding: 18px 18px 14px;
    }

    .mg-modal-title {
        font-size: 1.2rem;
    }

    .mg-modal-desc {
        font-size: 0.813rem;
    }

    .mg-modal-body {
        padding: 16px 18px 20px;
    }

    .mg-form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .mg-form-group {
        margin-bottom: 12px !important;
    }

    .mg-input,
    .mg-select,
    .mg-textarea {
        font-size: 16px !important; /* Ngăn chặn tự động zoom trên iOS Safari */
        min-height: 44px;
    }

    .mg-modal-body .mg-btn {
        min-height: 48px;
        font-size: 0.938rem;
    }

    /* Footer Mobile */
    .mg-footer {
        padding-top: 45px;
    }

    .mg-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 35px;
    }

    .mg-copyright-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        font-size: 0.775rem;
    }
}

/* ==========================================================================
   4. SMALL MOBILE BREAKPOINTS (MAX-WIDTH: 480PX)
   ========================================================================== */
@media (max-width: 480px) {
    .mg-podium-card .mg-card-action-group {
        grid-template-columns: 1fr;
    }

    .mg-color-swatch-btn {
        width: 44px;
        height: 44px;
    }

    .mg-article-title {
        font-size: 1.5rem;
    }
}
/* Phase 4: readable controls, reduced motion, and mobile section navigation. */
.mg-skip-link { position:fixed; left:16px; top:-120px; z-index:100100; padding:12px 18px; background:#fff; color:#990018; border:2px solid currentColor; border-radius:6px; }
.mg-skip-link:focus { top:12px; }
:where(a,button,input,select,textarea):focus-visible { outline:3px solid #1265a8; outline-offset:3px; }
.mg-hero-pause { position:absolute; right:20px; top:16px; z-index:12; min-height:44px; padding:8px 14px; border:1px solid #fff; border-radius:6px; color:#fff; background:rgba(10,18,30,.85); font:inherit; font-size:.8rem; cursor:pointer; }
.is-autoplay-paused .line-fill { animation-play-state:paused !important; }
.mg-sticky-subnav { top:var(--mg-header-offset,76px); transition:none; }
.mg-car-single-wrapper section[id] { scroll-margin-top:var(--mg-anchor-offset,150px); }
.mg-car-single-wrapper #colors { scroll-margin-top:var(--mg-anchor-offset,150px); }
.mg-btn-primary, .mg-btn-primary:hover { box-shadow:none; }
.mg-mm-tab, .mg-tab-btn, .gallery-tab-btn, .mg-color-swatch-btn, .mg-hero-swatch-btn, .view-toggle-btn { min-height:44px; min-width:44px; }
.mg-megamenu-dropdown { transition:opacity .15s ease, transform .15s ease; }
.mg-showroom-lineup { padding-top:56px; padding-bottom:64px; }
.faq-question button { display:flex; align-items:center; justify-content:space-between; gap:16px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; width:100%; min-height:44px; cursor:pointer; }
@media (max-width:1024px) {
    .mg-sticky-subnav { display:block; padding:4px 0; }
    .mg-sticky-inner { min-width:0; display:block; }
    .mg-sticky-car-info { display:none; }
    .mg-sticky-nav-links { display:flex; width:100%; min-width:0; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
    .mg-sticky-nav-links a { flex:none; display:flex; align-items:center; white-space:nowrap; min-height:44px; font-size:.8rem; }
    .mg-hero-pause { right:12px; top:12px; font-size:.7rem; padding:6px 10px; }
    .mg-showroom-lineup { padding-top:36px; padding-bottom:44px; }
}
@media (prefers-reduced-motion:reduce) {
    .mg-hero-pause { display:none; }
    html { scroll-behavior:auto !important; }
    *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Compact navigation across the site. Keep touch targets usable. */
.mg-header .mg-header-inner { height:60px; }
.mg-header .mg-logo-img { height:38px; }
.mg-header .mg-menu > .menu-item > a { min-height:44px; padding:0; font-size:.875rem; }
.mg-header .mg-menu > .menu-item > a::after { bottom:6px; }
.mg-header .mg-header-actions > .mg-btn { min-height:40px; padding:9px 16px; font-size:.78rem; }
.mg-sticky-subnav { padding:0; }
.mg-sticky-inner { min-height:44px; }
.mg-sticky-title { font-size:1rem; }
.mg-sticky-price { font-size:.78rem; }
.mg-sticky-price strong { font-size:.9rem; }
.mg-sticky-nav-links { gap:14px; }
.mg-sticky-nav-links a { display:flex; align-items:center; min-height:44px; padding:0 3px; font-size:.78rem; }
.mg-sticky-nav-links a::after { bottom:0; }
@media (max-width:1024px) {
 .mg-header .mg-header-inner { height:54px; }
 .mg-header .mg-logo-img { height:32px; }
 .mg-sticky-subnav { padding:0; }
 .mg-sticky-nav-links { gap:12px; scrollbar-width:none; }
 .mg-sticky-nav-links::-webkit-scrollbar { display:none; }
 .mg-sticky-nav-links a { min-height:44px; padding:0 3px; }
}

/* On-road estimate: configuration, headline total, then itemized costs. */
.mg-on-road-redesign { padding:24px; box-shadow:0 8px 30px rgba(15,23,42,.04); }
.mg-on-road-redesign .mg-calc-header { padding-bottom:18px; margin-bottom:22px; }
.mg-on-road-redesign .mg-calc-title { font-size:1.35rem; }
.mg-on-road-redesign .mg-calc-grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:24px; }
.mg-on-road-redesign .mg-calc-inputs { background:#f7f8fa; border:1px solid #e2e8f0; border-radius:12px; padding:20px; gap:16px; }
.mg-calc-step-title { display:flex; align-items:center; gap:9px; font-size:1rem; color:#0f172a; margin:0 0 4px; }
.mg-calc-step-title > span { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:8px; background:#fee8ed; color:#b50020; font-size:.7rem; font-weight:800; }
.mg-calc-current-car { margin:-6px 0 0; font-weight:700; font-size:.85rem; color:#64748b; }
.mg-on-road-redesign .mg-calc-inputs label { margin-bottom:6px; font-size:.82rem; }
.mg-on-road-redesign .mg-select { font-size:.875rem; }
.mg-on-road-redesign .mg-form-checkbox { margin-top:0; padding-top:14px; border-top:1px solid #dce1e8; }
.mg-on-road-redesign .mg-checkbox-label { display:grid; grid-template-columns:20px minmax(0,1fr); gap:4px 10px; margin:0; min-height:44px; }
.mg-on-road-redesign .mg-checkbox-label input { grid-row:span 2; margin:2px 0 0; }
.mg-insurance-hint { font-family:var(--mg-font-body); font-size:.75rem; font-weight:400; color:#64748b; line-height:1.5; }
.mg-on-road-redesign .mg-calc-results { background:#fff; border:0; padding:0 !important; }
.mg-on-road-redesign .mg-total-box { margin:12px 0 20px; padding:20px; text-align:left; border:0; border-radius:12px; background:#af001d; box-shadow:none; }
.mg-estimate-context { display:flex; flex-wrap:wrap; gap:6px 12px; margin:0 0 14px; font-size:.78rem; color:#fff; }
.val-selected-province { padding-left:12px; border-left:1px solid rgba(255,255,255,.5); }
.mg-on-road-redesign .total-label { color:#ffe6eb; font-size:.75rem; font-weight:600; letter-spacing:.3px; }
.mg-on-road-redesign .total-price { color:#fff; font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.35; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.mg-estimate-caption { color:#ffe6eb; font-size:.72rem; margin:8px 0 0; }
.mg-fee-heading { margin:0 0 8px; font-size:.86rem; color:#334155; }
.mg-on-road-redesign .mg-fee-list { margin:0; gap:0; padding:0; list-style:none; }
.mg-on-road-redesign .mg-fee-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:14px; padding:10px 0; font-size:.82rem; }
.mg-on-road-redesign .mg-fee-item .fee-val { font-size:.82rem; margin:0; max-width:230px; text-align:right; white-space:normal; font-variant-numeric:tabular-nums; }
.mg-extra-cost { display:flex; justify-content:space-between; gap:16px; padding:12px 0 18px; font-size:.8rem; color:#475569; }
.mg-extra-cost strong { color:#0f172a; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mg-on-road-redesign .mg-calc-results > .mg-btn { margin-top:4px; min-height:46px; font-size:.84rem; }
.mg-estimate-assumptions { border-top:1px solid #e2e8f0; margin-top:22px; padding-top:14px; font-size:.78rem; color:#64748b; }
.mg-estimate-assumptions summary { cursor:pointer; min-height:32px; font-weight:600; color:#475569; }
.mg-estimate-assumptions .total-note { text-align:left; font-style:normal; line-height:1.65; }
.mg-estimate-assumptions .mg-data-note { margin-bottom:0; font-size:.75rem; }
@media (max-width:767px) {
 .mg-on-road-redesign { padding:16px; }
 .mg-on-road-redesign .mg-calc-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
 .mg-on-road-redesign .mg-calc-inputs { padding:16px; gap:14px; }
 .mg-on-road-redesign .mg-calc-title { font-size:1.1rem; }
 .mg-on-road-redesign .mg-calc-desc { font-size:.8rem; line-height:1.6; }
 .mg-on-road-redesign .mg-total-box { padding:18px; }
 .mg-on-road-redesign .mg-fee-item .fee-val { max-width:145px; }
 .mg-estimate-assumptions summary { min-height:44px; }
}