/*
 * Tối ưu giao diện điện thoại (dưới 640px) cho trang học viên.
 * Máy tính để bàn giữ nguyên. Dùng !important vì Tailwind CDN chèn tiện ích lúc chạy.
 */
html { -webkit-text-size-adjust: 100%; }

/* Ẩn thanh cuộn của hàng chip cuộn ngang */
.m-scroll-x { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-scroll-x::-webkit-scrollbar { display: none; }

/* Khóa cuộn nền khi mở cửa sổ */
body.m-lock { overflow: hidden; }

@media (max-width: 639px) {
    /* 1. Ô nhập: chữ 16px chống iPhone tự phóng to, cao tối thiểu 48px cho ngón tay */
    input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
    select,
    textarea {
        font-size: 16px !important;
        min-height: 48px;
    }
    textarea { min-height: 84px; }

    /* 2. Vùng chạm tối thiểu 44px */
    .m-tap { min-height: 44px !important; min-width: 44px; }

    /* 3. Cửa sổ dạng bảng trượt từ dưới lên */
    .m-sheet-wrap { align-items: flex-end !important; padding: 0 !important; }
    .m-sheet {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
        overscroll-behavior: contain;
    }
    .m-sheet-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #e2e8f0;
        z-index: 2;
    }

    /* 4. Thanh thao tác dưới cùng */
    #mobileActionBar { padding-bottom: env(safe-area-inset-bottom); }
    body.has-action-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

    /* 5. Chữ quá nhỏ (8-11px): nâng lên 12px để đọc được trên điện thoại.
          Trừ đồng hồ đếm ngược vì khung của nó rất hẹp. */
    [class*="text-[8"]:not(#promoCountdown *):not(#promoPrice *),
    [class*="text-[9"]:not(#promoCountdown *):not(#promoPrice *),
    [class*="text-[10"]:not(#promoCountdown *):not(#promoPrice *),
    [class*="text-[11"]:not(#promoCountdown *):not(#promoPrice *) { font-size: 12px !important; }

    /* 6. Liên kết ở chân trang và thanh trên cùng: vùng chạm đủ lớn */
    footer a { display: inline-flex; align-items: center; min-height: 44px; }
    .m-topbar-link { display: inline-flex; align-items: center; min-height: 36px; }
}