/* =============================================================================
 * shop-railfit-875.css — CỬA HÀNG vừa khung ĐIỆN THOẠI DỌC (build 875)
 *
 * LỖI ĐANG VÁ (đo trên LIVE build 874, cửa TRANG CHỦ — `scripts/_probe_live_shop_fitv2_1013.py`)
 *   Dải danh mục `#sf-rail` ở màn DỌC là một hàng ngang `nowrap` gồm 4 nút có
 *   bề ngang theo NỘI DUNG (icon 20 + khe 6 + nhãn + đệm 20). Tổng 447px + 3×6px
 *   khe = 465px, trong khi dải chỉ rộng 336–394px:
 *
 *     khổ      dải rộng   cần      thừa     thấy trọn   vùng chạm nút rìa
 *     360×640    ~336     465     100px       2/4            —
 *     375×667    ~351     465      85px       3/4           7px
 *     390×844    ~366     465      80px       3/4          14px
 *     414×896     394     465      71px       3/4          26px
 *     430×932    ~410     465      57px       3/4          41px
 *
 *   `overflow-x:auto` nên về lý thuyết cuộn được, nhưng KHÔNG có vạch cuộn
 *   (`scrollbar-width:none`) ⇒ người chơi không biết còn mục phía sau, và nút
 *   nằm vắt qua mép chỉ còn 7–41px bề ngang chạm được (< 44px).
 *   Lỗi này đã được ghi nhận từ 2026-09-25 (vòng w5) và CHƯA từng được vá.
 *
 * CÁCH VÁ
 *   Đổi 4 nút sang dạng tab dọc (icon trên — nhãn dưới) và cho mỗi nút
 *   `flex: 1 1 0` để CHIA ĐỀU bề ngang dải. Bề ngang nút thành HỆ QUẢ của dải
 *   chứ không còn là tổng nội dung ⇒ về nguyên tắc không thể tràn, bất kể
 *   bản dịch dài tới đâu (nhãn xuống tối đa 2 dòng rồi mới cắt).
 *
 * PHẠM VI — CHỈ màn điện thoại DỌC THẬT
 *   `(max-width:700px) and (min-height:501px)` + `body:not(.rot90)`
 *     · `max-height:500px` là nhánh ĐIỆN THOẠI NẰM NGANG (779:119, 830:117),
 *       ở đó dải đã là cột dọc rồi — `min-height:501px` loại nó ra.
 *     · `body.rot90` là cửa hàng mở GIỮA TRẬN trên máy khoá dọc; nhánh đó đã
 *       sạch 0 lỗi ở cả 5 khổ (đo LIVE 2026-10-13) — không đụng vào.
 *     · PC (>700px) không khớp media query ⇒ 0 pixel thay đổi.
 *   `:not([data-nav="rail"])` — ở chế độ rail, `ui/shopnav.ts` biến `.sf-cat-l`
 *   thành nhãn chỉ-cho-trình-đọc-màn-hình (1×1px + `clip-path:inset(50%)`).
 *   Đổi `display`/`white-space` của ô đó là phá công thức visually-hidden.
 *
 * SỐ LẦN `#shopframe` = 8 — bậc thang hiện hành:
 *   1× khối <style> của shopframe.ts · 2× 779/787 · 3× 830/836 · 4× 840
 *   5× 846 · 6× 847 · 7× 872 · ⇒ lớp này phải 8×. Không dùng `!important`.
 * ========================================================================== */

@media (max-width: 700px) and (min-height: 501px) {

  /* Dải: hàng ngang, KHÔNG cuộn — 4 mục luôn nằm trọn. */
  body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe:not([data-nav="rail"]) .sf-rail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    gap: 4px;
    padding: 0 0 2px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  /* Nút: chia đều bề ngang dải, icon trên — nhãn dưới. */
  body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe:not([data-nav="rail"]) .sf-cat {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 5px 3px;
    height: auto;
    min-height: max(46px, var(--sw-tap, 46px));
    white-space: normal;
    transform: none;
  }

  /* Nhãn: tối đa 2 dòng rồi cắt — không bao giờ đẩy nút rộng ra. */
  body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe:not([data-nav="rail"]) .sf-cat .sf-cat-l {
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    width: 100%;
    min-width: 0;
    font-size: clamp(8.5px, 2.5vw, 11.5px);
    line-height: 1.18;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    overflow: hidden;
    text-overflow: clip;
  }

  /* Icon giữ đúng ô vuông, không bị chữ bóp. */
  body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe:not([data-nav="rail"]) .sf-cat .sf-cat-ic,
  body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe:not([data-nav="rail"]) .sf-cat .sf-cat-ic svg {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  /* `.sf-cat:hover{transform:translateX(2px)}` của khối <style> gốc đẩy nút ra
     khỏi dải khi ngón tay giữ — ở dạng chia đều thì không còn chỗ để đẩy. */
  body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe:not([data-nav="rail"]) .sf-cat:hover {
    transform: none;
  }
}