/**
 * Responsive overrides — load sau Vite build khi bundle CSS chưa cập nhật.
 */

.lp-row-block {
    box-sizing: border-box;
    min-width: 0;
    width: var(--lp-block-width, 100%);
    flex: 0 0 var(--lp-block-width, 100%);
    max-width: 100%;
    overflow: visible;
}

@media (max-width: 767.98px) {
    body.lp-page {
        overflow-x: clip;
    }

    .lp-row-block {
        --lp-block-width: 100%;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .lp-container,
    .lp-page .container {
        --lp-content-gutter: 20px;
    }

    .lp-flex-layout-split {
        grid-template-columns: 1fr;
    }

    .lp-flex-layout-row {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-flex-layout-row > .lp-flex-el {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    .lp-flex-layout-grid {
        grid-template-columns: 1fr;
    }

    .lp-flex-layout-free {
        min-height: 0;
    }

    .lp-flex-layout-free .lp-flex-el {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .lp-flex-col-left,
    .lp-flex-col-right {
        width: 100%;
        max-width: 100%;
    }

    .lp-page :is(img, video, iframe, svg, table) {
        max-width: 100%;
        height: auto;
    }

    .lp-btn {
        white-space: normal;
        text-align: center;
    }

    .lp-page :is(.hero-grid, .form-wrap, .feature-grid, .feature-grid-4, .skill-grid, .price-card, .adaptive-card, .final-grid, .form-row) {
        grid-template-columns: 1fr;
    }

    .lp-page .nav {
        flex-wrap: wrap;
    }
}