/* ═══════════════════════════════════════════════════════════════════
   TIKTOK SHOP — MOBILE
   Nơi ở DUY NHẤT cho mọi rule mobile của cụm 13 trang /tiktok-shop*.

   VÌ SAO PHẢI CÓ FILE NÀY (đọc trước khi sửa):
   Mỗi trang tiktok-shop phát một block <style> inline SAU riohub-theme.css.
   Rule mobile cũ nằm ở riohub-theme.css (block ≤576px) nên **cùng
   specificity nhưng đứng TRƯỚC** ⇒ bị <style> của trang đè. Kết quả: toàn
   bộ công tối ưu mobile cho cụm này trước đây KHÔNG có tác dụng, trừ vài
   dòng có !important. File này được <link> NGAY SAU block <style> của mỗi
   trang nên thắng cascade tường minh, không cần mẹo.

   ⚠ GIỮ NGUYÊN các `!important` đã có: chúng dùng để thắng `style=""`
   inline attribute trên chính thẻ HTML (CSS thường không thắng được).
   Bỏ đi = hồi quy im lặng.

   Breakpoint theo thang chuẩn dự án: 399.98 / 575.98 / 767.98 / 991.98.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {

    /* ─── Hero: 6 biến thể, cùng một cách nén ─── */
    .tts-hero,
    .collab-hero,
    .gen-hero,
    .dev-hero,
    .camp-hero,
    .ttc-hero {
        padding: 16px 14px !important;
        margin-bottom: 14px;
        border-radius: 12px;
    }
    .tts-hero h1,
    .collab-hero h1,
    .gen-hero h1,
    .dev-hero h1,
    .camp-hero h1,
    .ttc-hero h1 {
        font-size: var(--fs-xl);
        line-height: 1.25;
        margin-bottom: .35rem;
    }
    .tts-hero p,
    .collab-hero p,
    .gen-hero p,
    .dev-hero p,
    .camp-hero p,
    .ttc-hero p {
        font-size: var(--fs-sm);
        margin-bottom: 0;
    }
    /* Nút Developer-API nằm absolute ở góc hero → đè lên tiêu đề ở phone */
    .tts-hero .btn-light.position-absolute {
        position: static !important;
        display: inline-flex;
        margin-top: 12px;
    }

    /* ─── Card: 6 biến thể ─── */
    .tts-card,
    .collab-card,
    .gen-card,
    .camp-card,
    .ttc-card,
    .dev-card,
    .form-section,
    .rtd-card {
        padding: 14px !important;
        min-width: 0;
    }
    .rtd-kpi { padding: 12px !important; min-width: 0; }
    .not-connected-notice { padding: 22px 16px !important; }

    /* ─── Lưới: `1fr` không co dưới min-content ⇒ luôn dùng minmax(0,1fr) ─── */
    .rtd-kpis { gap: 8px; margin-bottom: 12px; }
    .rtd-grid { gap: 12px; grid-template-columns: minmax(0, 1fr); }
    .product-grid,
    .bs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .bs-card { min-width: 0; padding: 10px; }
    .bs-card * { overflow-wrap: anywhere; }

    /* ─── Toolbar nhiều control: xếp lưới 2 cột thay vì 1 cột dọc ───
       riohub-theme ép mọi select ≤767.98 thành min-height:44px + 16px.
       /tiktok-shop-orders có 14 control ⇒ xếp dọc ≈700px chiều cao trước
       khi thấy dữ liệu. Lưới 2 cột cắt còn ~một nửa.

       ⚠ Tên class ĐÃ VERIFY 21/08 (đừng đoán lại):
         .tts-toolbar  — wrapper THÊM MỚI vào tiktok-shop-orders.php (div gốc
                         không có class nào, chỉ `d-flex gap-2 flex-wrap`).
         .hist-toolbar / .hist-filters — có sẵn ở tiktok-shop-link-generator.php.
       Các control bên trong mang `style="width:auto"` / `style="max-width:230px"`
       INLINE ATTRIBUTE ⇒ bắt buộc `!important` mới thắng, không phải thừa. */
    .tts-toolbar,
    .hist-toolbar,
    .hist-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        align-items: end;
        width: 100%;
    }
    .tts-toolbar > *,
    .hist-toolbar > *,
    .hist-filters > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
    /* Thanh phân cách dọc của Bootstrap vô nghĩa khi đã xếp lưới */
    .tts-toolbar > .vr { display: none !important; }

    /* ─── Chữ code: /tiktok-shop-developer có 316 thẻ <code> rơi xuống 10.9px
       vì kế thừa font-size của .table đã nén. Đặt sàn 12px — vẫn nằm trong
       .table-responsive nên không gây tràn, chỉ đẩy thanh cuộn ngang. ─── */
    code, kbd, samp { font-size: 12px; }
    .param-table code { padding: 1px 5px; overflow-wrap: anywhere; }

    /* ─── Bảng: đã bọc .table-responsive sẵn ở cả 19 bảng, chỉ gợi ý cuộn ─── */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ─── Tier XS ≤399.98px ─── */
@media (max-width: 399.98px) {
    .product-grid,
    .bs-grid { grid-template-columns: minmax(0, 1fr); }
    .tts-toolbar,
    .hist-toolbar,
    .hist-filters { grid-template-columns: minmax(0, 1fr); }
    .tts-hero,
    .collab-hero,
    .gen-hero,
    .dev-hero,
    .camp-hero,
    .ttc-hero { padding: 14px 12px !important; }
}