/* =====================================================
   VISA24 – MOBILE UX/UI
   100% inside media queries – KHÔNG ảnh hưởng desktop
===================================================== */

/* ── TABLET ≤991px ───────────────────────────────── */
@media (max-width: 991px) {
    html { scroll-behavior: smooth; }
    .site-main { padding-top: 70px !important; }
}

/* ── PHONE ≤767px ────────────────────────────────── */
@media (max-width: 767px) {

    /* --- Base --- */
    body {
        font-size: 15px;
        -webkit-text-size-adjust: 100%;
        padding-bottom: 72px !important; /* space for bottom bar */
    }

    /* --- Header --- */
    .visa-header .navbar { padding: .5rem 0; }
    .visa-header .navbar-brand img { max-height: 40px; }
    .site-main, main[style*="padding-top"] { padding-top: 64px !important; }

    /* --- Container --- */
    .container { padding-left: 16px; padding-right: 16px; }

    /* --- Typography --- */
    .pg-title, .cat-h1, .ct-h1, .ab-h1 { font-size: 1.6rem !important; }
    .section-title, .lpc-section-title { font-size: 1.3rem !important; }
    .visa-hero h1 { font-size: 1.7rem !important; }
    .lpc-hero-text h1 { font-size: 1.7rem !important; }
    .hero-desc, .lpc-hero-desc { font-size: .95rem; }

    /* --- Hero --- */
    .visa-hero {
        min-height: auto !important;
        padding-bottom: 2rem !important;
    }
    .visa-hero .hero-content .row { min-height: auto !important; }
    .visa-lead-form { display: none !important; } /* popup replaces */

    /* Hero buttons full width */
    .visa-hero .d-flex.flex-wrap { flex-direction: column; }
    .visa-hero .btn-cta-primary,
    .visa-hero .btn-cta-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: .85rem 1.5rem;
    }

    /* --- Sections spacing --- */
    .visa-services, .visa-why, .hp-process,
    .hp-feedback, .hp-cases, .hp-blog,
    .visa-cta-banner,
    .lpc-categories, .lpc-pain, .lpc-checklist,
    .lpc-pricing, .lpc-testimonials, .lpc-form-section,
    .lpc-faq, .lpc-final-cta {
        padding: 3rem 0;
    }

    /* --- Bento cards --- */
    .bento-card-main { height: 240px; }
    .bento-card-main .card-overlay h3 { font-size: 1.15rem; }
    .bento-card-main .card-overlay .price { font-size: .95rem; }
    .bento-card-side, .bento-card-accent { padding: 1.5rem; }
    .bento-card-side h3, .bento-card-accent h3 { font-size: 1.1rem; }
    .bento-card-small img { height: 100px; }
    .bento-card-small h4 { font-size: .88rem; }

    /* --- Stats --- */
    .hp-stats-bar, .lpc-stats-bar { padding: 1.5rem 0; }
    .hp-stat-num, .lpc-stat-num { font-size: 1.5rem !important; }
    .hp-stat-label, .lpc-stat-label { font-size: .7rem; }

    /* --- Process --- */
    .hp-step { padding: 1.5rem; }
    .hp-step-num { width: 38px; height: 38px; font-size: .95rem; margin-bottom: 1rem; }

    /* --- Feedback --- */
    .hp-fb-card { padding: 1.5rem; }
    .hp-fb-quote { font-size: .88rem; }
    .hp-fb-avatar { width: 34px; height: 34px; font-size: .7rem; }

    /* --- Case study --- */
    .hp-case { padding: 1.5rem; }

    /* --- White card (page/single) --- */
    .pg-card { padding: 1.25rem; }
    .pg-featured-img { margin: -1.25rem -1.25rem 1.25rem; }
    .pg-featured-img img { max-height: 220px; }
    .pg-header { margin-bottom: 1.25rem; padding-bottom: 1rem; }
    .pg-content img { border-radius: 6px !important; }

    /* Sidebar unstick */
    .pg-sidebar-cta, .cat-sidebar-cta { position: static !important; }

    /* --- Forms: 16px prevents iOS zoom --- */
    .form-control, .form-select,
    .vlp-field input, .vlp-field select,
    .lpc-lead-form .form-control,
    .lpc-lead-form .form-select,
    .ct-form .form-control,
    .ct-form .form-select,
    .v24-cm-field input, .v24-cm-field textarea {
        font-size: 16px !important;
        padding: .8rem .9rem !important;
    }

    /* Submit buttons bigger touch target */
    .lpc-btn-primary.lpc-btn-lg,
    .lpc-btn-ghost.lpc-btn-lg,
    .vlp-submit, .ct-submit, .btn-submit,
    .v24-cm-submit {
        min-height: 50px;
        font-size: 1rem !important;
    }

    /* --- Tables --- */
    .lpc-table thead th, .lpc-table tbody td {
        padding: .6rem .5rem !important;
        font-size: .8rem !important;
        white-space: nowrap;
    }

    /* --- Pricing --- */
    .lpc-guarantee {
        flex-direction: column;
        text-align: center;
        gap: .75rem;
        padding: 1.5rem;
    }

    /* --- CTA Banner --- */
    .visa-cta-banner .cta-inner,
    .lpc-cta-box { padding: 2rem 1.25rem !important; }
    .visa-cta-banner h2, .lpc-cta-content h2 { font-size: 1.35rem !important; }

    .btn-cta-call, .btn-cta-zalo {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: .9rem !important;
    }

    /* --- Blog CTA / Page CTA --- */
    .blog-cta-inner, .pg-cta-inner {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }
    .blog-cta-icon, .pg-cta-icon { width: 44px; height: 44px; }
    .blog-cta-buttons, .pg-cta-buttons { justify-content: center; width: 100%; }
    .blog-cta-links { justify-content: center; text-align: center; padding: .5rem 1rem; }

    /* --- Category --- */
    .cat-featured-body { padding: 1rem 1.25rem; }
    .cat-featured-title { font-size: 1.15rem !important; }

    /* --- Comments --- */
    .v24-cm-body { padding: 1rem; gap: .75rem; }
    .v24-cm-avatar-img { width: 34px !important; height: 34px !important; }
    .v24-cm-fields-row { grid-template-columns: 1fr; }
    .v24-cm-list .children { padding-left: 1rem; }

    /* --- FAQ --- */
    .lpc-accordion .accordion-button { font-size: .9rem; padding: .9rem 1rem; }
    .lpc-accordion .accordion-body { font-size: .85rem; padding: 0 1rem 1rem; }

    /* --- Pain / Cat cards --- */
    .lpc-pain-card, .lpc-cat-card { padding: 1.25rem; }

    /* --- Testimonials --- */
    .lpc-testi-card { padding: 1.25rem; }
    .lpc-testi-quote { font-size: .85rem; }

    /* --- Form section (landing) --- */
    .lpc-form-info { padding: 1.5rem; }
    .lpc-form-info h2 { font-size: 1.25rem; }
    .lpc-form-body { padding: 1.5rem; }

    /* --- Contact --- */
    .ct-qcard { padding: 1.5rem; }
    .ct-form-box { padding: 1.5rem; }
    .ct-info-box { padding: 1.5rem; }

    /* --- About --- */
    .ab-value-card { padding: 1.5rem; }
    .ab-img-grid { grid-template-columns: 1fr; }
    .ab-img-item:first-child { grid-row: auto; }
    .ab-img-item img { height: 180px !important; min-height: auto !important; }

    /* --- Popup --- */
    .vlp-popup { max-height: 95vh; }
    .vlp-info h3 { font-size: 1.15rem; }

    /* --- Footer --- */
    .visa-footer-main { padding: 2.5rem 0 2rem; }

    /* --- Hide desktop floating, show bottom bar --- */
    .visa-floating-btns { display: none !important; }
    .lpc-float-bar { display: none !important; }
}

/* ── MOBILE BOTTOM BAR ───────────────────────────── */
.mobile-bottom-bar { display: none; }

@media (max-width: 767px) {
    .mobile-bottom-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1045;
        background: #fff;
        box-shadow: 0 -2px 16px rgba(0,0,0,.1);
        padding: .5rem .75rem;
        padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0));
        gap: .5rem;
        border-top: 1px solid rgba(192,199,210,.2);
    }
    .mobile-bottom-bar a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        padding: .7rem .4rem;
        border-radius: .5rem;
        font-weight: 700;
        font-size: .85rem;
        text-decoration: none;
        min-height: 46px;
    }
    .mbb-call { background: var(--visa-primary, #005993); color: #fff; }
    .mbb-zalo { background: #0068ff; color: #fff; }
    .mbb-form { background: var(--visa-secondary-container, #fe9824); color: var(--visa-on-secondary-container, #663800); }
    .mobile-bottom-bar .material-symbols-outlined { font-size: 1.1rem; }
}

/* ── SMALL PHONES ≤375px ─────────────────────────── */
@media (max-width: 375px) {
    .container { padding-left: 12px; padding-right: 12px; }
    .visa-hero h1 { font-size: 1.45rem !important; }
    .lpc-hero-text h1 { font-size: 1.45rem !important; }
    .pg-card { padding: 1rem; }
    .pg-featured-img { margin: -1rem -1rem 1rem; }
    .bento-card-main { height: 200px; }
    .mobile-bottom-bar a { font-size: .78rem; padding: .55rem .25rem; }
}

/* ── LANDSCAPE ───────────────────────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
    .visa-hero, .lpc-hero { min-height: auto !important; padding: 70px 0 1.5rem !important; }
    body { padding-bottom: 58px !important; }
}