/* =====================================================
   VAY & iPHONE - MOBILE-SPECIFIC OVERRIDES
   ===================================================== */

@media (max-width: 768px) {
    /* Đưa CALCULATOR (id=calculator) lên đầu bằng DOM order trick:
       Ẩn HERO/PRICING trên mobile, chỉ show CALCULATOR đầu tiên.
       Tuy nhiên để UX tốt, ta giữ pricing nhỏ + đẩy calculator lên sau hero */
    .hero { order: 1; }
    #pricing { order: 2; }
    #calculator { order: 3; }
    .process-section { order: 4; }

    /* Tối ưu section padding */
    .section, .section-light, .section-blue {
        padding: 40px 0;
    }
    .section-cta { padding: 40px 0; }

    /* Pricing card compact */
    .pricing-card { padding: 14px; }
    .pricing-card-name { font-size: 14px; margin-bottom: 10px; }
    .pricing-storage-row { padding: 4px 0; font-size: 12px; }
    .pricing-group { margin-bottom: 24px; }
    .pricing-group-title { font-size: 16px; margin-bottom: 12px; }

    /* Calculator result highlight */
    .calc-result { padding: 14px; }
    .calc-row { font-size: 13px; }
    .calc-row.big { font-size: 14px; }

    /* Hero highlight button bigger */
    .btn-calc-highlight {
        width: 100%;
        justify-content: center;
        font-size: 15px;
        padding: 14px 20px;
    }
}

/* Mobile nhỏ */
@media (max-width: 380px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 22px; }
    .section-header h2 { font-size: 20px; }
}

/* Landscape phone */
@media (max-width: 920px) and (orientation: landscape) {
    .hero { padding: 32px 0; }
}