/* quant-ai-mobile-390.css — bản mobile (design #2b): header gọn + tab bar dưới.
 * Desktop mặc định ẩn header/tab bar mobile; breakpoint 768px chuyển layout. */

.qa-mobile-header { display: none; }
.m-tabbar { display: none; }

@media (max-width: 768px) {

    /* ---- Shell: bỏ sidebar, thêm header + tab bar ---- */
    .d-rail { display: none; }
    body { padding-bottom: 72px; }

    .qa-mobile-header {
        display: flex; align-items: center; gap: 10px;
        padding: 14px 18px 10px;
    }
    .qa-mobile-header .b-mark { height: 19px; }
    .qa-mobile-header .b-mark i { width: 5px; }
    .qa-mobile-title { font-weight: 800; font-size: 16px; color: var(--qa-ink); }
    .qa-mobile-title em { font-style: normal; color: var(--qa-green); }

    .m-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        background: var(--qa-card); border-top: 1px solid var(--qa-border);
        display: flex; padding: 8px 6px 14px;
    }
    .m-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        font-weight: 600; font-size: 10px; color: var(--qa-faint); text-decoration: none;
        min-height: 44px; justify-content: center;
    }
    .m-tab.on { color: var(--qa-green); }
    .m-tabico { font-size: 15px; }

    /* ---- Config screen (#3a -> mobile cards) ---- */
    .b-hero { padding: 24px 20px 4px; }
    .b-h1 { font-size: 30px; }
    .b-hp { font-size: 14px; }
    .b-flow { margin-top: 20px; padding: 0 16px 130px; gap: 12px; }
    .b-flow > #mtfPanel { gap: 12px; }
    .b-step { padding: 16px; border-radius: 14px; }
    .b-chip, .asset-btn, .timeframe-btn, .mtf-tf-item { padding: 8px 13px; font-size: 12px; }
    .b-seg { display: flex; width: 100%; padding: 3px; }
    .b-segbtn { flex: 1; padding: 9px 6px; font-size: 11.5px; text-align: center; }
    .b-row2 { gap: 8px; }
    .b-input { padding: 9px 12px; font-size: 12.5px; }

    /* Nút "Chạy phân tích" nổi phía trên tab bar (gradient fade phía sau) */
    .b-runwrap {
        position: fixed; left: 0; right: 0; bottom: 64px; z-index: 40;
        padding: 24px 16px 12px;
        background: linear-gradient(180deg, rgba(242, 247, 243, 0), var(--qa-bg) 40%);
        text-align: center;
    }
    .b-run { width: 100%; padding: 15px; font-size: 15px; }
    .b-runsub { display: none; }
    .mtf-stepper { margin-top: 10px; background: var(--qa-bg); border-radius: 10px; padding: 4px 10px; }

    /* ---- Results screen (#2a -> mobile stack, quyết định lên đầu) ---- */
    .d-main { padding: 6px 16px 24px; }
    .d-mhead { gap: 8px; }
    .d-mtitle { font-size: 20px; }
    .d-mlive { margin-left: 0; width: 100%; }
    .d-cols { grid-template-columns: 1fr; gap: 12px; }
    .qa-col-side { order: -1; }
    .d-sum { position: static; }
    .d-card { padding: 16px; margin-bottom: 12px; }
    .decision-badge { display: block; text-align: center; padding: 11px; font-size: 18px; letter-spacing: .12em; }
    #mtfContextCards { grid-template-columns: 1fr; gap: 10px; }
    .qa-2up { grid-template-columns: 1fr; }
    .b-stats3 { gap: 8px; }
    .b-stat { padding: 10px 6px; }
    .b-statnum { font-size: 15px; }
    .b-statlab { font-size: 9px; }
    .qa-decision-actions { justify-content: center; }
}