/* Shop empty-state fit 876 — CHỈ GIAO DIỆN: chiều cao khối "chưa có món nào"
   trong lưới cửa hàng, RIÊNG lúc máy nằm ngang (trong trận / xoay máy).

   ═════════════════ LỖI ĐO ĐƯỢC TRÊN LIVE b875 (13/10) ═════════════════════

   Mở cửa hàng TRONG TRẬN trên điện thoại khoá dọc (`body.rot90`) ⇒ bố cục nằm
   ngang, vùng danh sách `.sf-scroll` chỉ còn 203–297px chiều cao BỐ CỤC. Nhóm
   "SKIN MIỄN PHÍ" hiện đang RỖNG trên LIVE nên lưới vẽ khối `.sf-msg-grp`
   ("Chưa có skin miễn phí nào — quay lại sau nhé.") — đo được **96px ở MỌI
   khổ**, tức 40–47% toàn bộ vùng cuộn, chỉ để nói một câu.

   Số đo (scripts/_qa_shopfit_w2/diag_scrollbudget.py, LIVE b875):

     khổ       vùng cuộn   chiếm trước   thẻ cao   THIẾU để hàng đầu lọt trọn
     320×568      203 px     149,38 px    108 px        54,38 px
     360×640      243 px     152,38 px    103 px        12,38 px
     375×667      258 px     152,38 px    106 px         0,38 px
     414×896      297 px     156,67 px    115 px       (dư 25,33 px)

   "Chiếm trước" = 2 tiêu đề nhóm (19–21px mỗi cái) + khối rỗng 96px + khe.
   Hệ quả: ở 320/360/375 **không có hàng thẻ nào lọt trọn khung nhìn** — người
   chơi luôn nhìn thấy hàng tàu đầu tiên bị cắt ngang ở mép dưới.

   Gốc rễ: `ui/shopframe.ts:3198` đặt `.sf-msg { min-height: 220px; padding: 24px;
   gap: 14px }` cho khối thông báo — con số của màn PC, nơi vùng cuộn cao
   ~600px. `.sf-msg-grp` (dòng 2764) hạ xuống `min-height: 120px` nhưng vẫn giữ
   nguyên `padding: 24px` ⇒ 24 + nội dung + 24.

   SỬA Ở ĐÂY: chỉ hạ `padding` / `gap` / `min-height` của RIÊNG khối thông báo
   trong lưới, và CHỈ ở hai nhánh màn nằm ngang. Giải phóng ~65px — đủ cho khổ
   chật nhất (320 cần 54,38px).

   ⚠ CỐ Ý KHÔNG đụng `font-size` / `line-height`: `shop-text-836.css` là lớp
     CHỐT CUỐI cho mọi cỡ chữ cửa hàng (xem KB `starlot-836-is-final-fontsize-
     layer`). Đổi cỡ chữ ở đây là giẫm chân tệp đó.
   ⚠ CỐ Ý KHÔNG đụng `.sf-msg-btn` (nút THỬ LẠI của trạng thái lỗi) — nó phải
     giữ `min-height: 44px` cho vùng chạm. Chỉ khối BỌC co lại.
   ⚠ KHÔNG áp cho điện thoại DỌC ở cửa trang chủ: ở đó trang cuộn dọc tự nhiên,
     khối thông báo thoáng là đúng ý đồ, và 4 khổ dọc đều đã PASS.

   SPECIFICITY: `.sf-msg` / `.sf-msg-grp` chỉ được khai trong CSS nội tuyến của
   `ui/shopframe.ts` với 1 lần `#shopframe`, không lớp ngoài nào chạm tới. Dùng
   7 lần `#shopframe` cho khớp thang của lane (779 2× → 787 2× → 830 3× →
   836 3× → 840 4× → 846 5× → 847 6× → 872/tệp này 7×) và KHÔNG `!important`.

   Đo: scripts/_qa_shopfit_w2/diag_scrollbudget.py (--patch) và
       scripts/_qa_shopfit_w2/probe_shopfit_w2.py. */

/* ===========================================================================
 * (1) MÁY NẰM NGANG THẬT (người chơi tự xoay máy)
 * ======================================================================== */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1023.98px) {
  #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-msg-grp {
    min-height: 0;
    padding: 4px 10px;
    gap: 6px;
  }
  #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-msg-grp p {
    max-width: none;
  }
}

/* ===========================================================================
 * (2) ĐIỆN THOẠI KHOÁ DỌC, XOAY BẰNG CSS TRONG TRẬN (`body.rot90`)
 *     Không gộp được vào @media ở trên: rot90 báo khung nhìn 360×640 nên
 *     `orientation: landscape` KHÔNG khớp (bẫy kinh điển của lane này).
 * ======================================================================== */
body.rot90 #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-msg-grp {
  min-height: 0;
  padding: 4px 10px;
  gap: 6px;
}
body.rot90 #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-msg-grp p {
  max-width: none;
}