/* =============================================================================
 * CỬA HÀNG › KHUNG + LỀ AN TOÀN cho ĐIỆN THOẠI NẰM NGANG  (build 840)
 *
 * PHẠM VI (worker 1): CHỈ khung ngoài (#shopframe) + tấm nền (.sf-panel) + biến
 * CSS. KHÔNG đụng menu trái (.sf-rail/.sf-cat), thanh lọc (.sf-gridhead/.sf-sort/
 * .sf-allpill) hay thẻ tàu (.sf-grid/.sf-card) — các phần đó do worker khác sửa.
 *
 * VÌ SAO CẦN FILE NÀY
 *  1. shop-responsive-779.css đặt lề an toàn (env safe-area) cho .sf-panel ở
 *     @media(max-width:700px), NHƯNG block @media(max-height:500px) and
 *     (max-width:700px) ở CUỐI file ghi đè `padding:8px` ⇒ đúng khổ điện thoại
 *     nằm ngang (vd 667×375, 736×414) thì lề tai thỏ BỊ XOÁ, chữ/nút chui vào
 *     vùng khuyết và thanh Home.
 *  2. Ngưỡng cũ dừng ở max-height:500px. Máy 960×540 / 1024×540 (Android tầm
 *     trung, máy gập) nằm ngang KHÔNG khớp ngưỡng nào ⇒ rơi về bố cục PC, tràn.
 *  3. body.rot90 (máy khoá dọc, game tự xoay 90° bằng CSS) bị LỆCH TRỤC lề an
 *     toàn: mobile-repair-830.css lấy inset-left/right cho cạnh trái/phải BỐ CỤC,
 *     nhưng body xoay `rotate(90deg) translateY(-100%)` nên cạnh TRÁI bố cục nằm
 *     ở ĐỈNH máy — tức phải lấy inset-TOP. Kết quả: tai thỏ vẫn ăn vào mép trái
 *     cửa hàng. Xem bảng quy đổi ở block (4).
 *  4. Chiều cao bám `100%` của khung fixed: trên iOS/Android thanh địa chỉ co
 *     giãn làm hụt/tràn đáy. Dùng 100dvh/100dvw (có fallback vh/vw).
 *
 * KHÔNG ĐỔI MỘT PIXEL NÀO Ở PC: block (1) chỉ KHAI BÁO biến (không vẽ gì), mọi
 * block còn lại đều chặn `max-width: 1023.98px` — dưới hẳn breakpoint PC 1024px.
 *
 * ĐỘ ƯU TIÊN: dùng 4 lần #shopframe để thắng mobile-repair-830.css (3 lần) và
 * shop-responsive-779.css (2 lần). File này PHẢI được <link> SAU cả hai.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * (1) BIẾN DÙNG CHUNG — khai báo ở mọi khổ màn, KHÔNG sinh ra rule vẽ nào nên
 *     PC/tablet không đổi gì. Worker khác cứ dùng var(--sfl-safe-*) là có lề an
 *     toàn ĐÃ QUY ĐỔI ĐÚNG TRỤC (kể cả khi body.rot90).
 * ------------------------------------------------------------------------- */
#shopframe#shopframe#shopframe#shopframe {
  /* Lề thiết bị thô (trục MÀN HÌNH). */
  --sfl-si-t: env(safe-area-inset-top, 0px);
  --sfl-si-r: env(safe-area-inset-right, 0px);
  --sfl-si-b: env(safe-area-inset-bottom, 0px);
  --sfl-si-l: env(safe-area-inset-left, 0px);
  /* Lề theo trục BỐ CỤC — mặc định trùng trục màn hình (không xoay). */
  --sfl-safe-t: var(--sfl-si-t);
  --sfl-safe-r: var(--sfl-si-r);
  --sfl-safe-b: var(--sfl-si-b);
  --sfl-safe-l: var(--sfl-si-l);
  /* Lề/khe hở tối thiểu của khung. Giá trị thật đặt trong từng block bên dưới;
     ở PC hai biến này không được dùng tới. */
  --sfl-pad-x: 0px;
  --sfl-pad-y: 0px;
  --sfl-gap: 0px;
}

/* ---------------------------------------------------------------------------
 * (2) ĐIỆN THOẠI NẰM NGANG THẬT — ngưỡng NỚI từ 500px lên 540px để đón nhóm
 *     960×540 / 1024×540 trước đây lọt lưới. Chặn trên max-width 1023.98px nên
 *     máy tính (>=1024px) không bao giờ khớp.
 * ------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1023.98px) {
  #shopframe#shopframe#shopframe#shopframe {
    /* Lề tai thỏ dồn hết vào .sf-panel để NỀN vẫn phủ kín tới mép máy. */
    --sfl-pad-x: clamp(8px, 1.6vw, 16px);
    --sfl-pad-x: clamp(8px, 1.6dvw, 16px);
    --sfl-pad-y: clamp(6px, 1.8vh, 12px);
    --sfl-pad-y: clamp(6px, 1.8dvh, 12px);
    --sfl-gap: clamp(6px, 1.4vh, 12px);
    --sfl-gap: clamp(6px, 1.4dvh, 12px);

    /* Bám ĐÚNG khung nhìn động (thanh địa chỉ ẩn/hiện không làm hụt đáy). */
    top: 0; left: 0; right: auto; bottom: auto;
    width: 100vw;  height: 100vh;
    width: 100dvw; height: 100dvh;
    padding: 0 !important;      /* thắng mobile-repair-830.css dòng 75 */
    display: flex; align-items: stretch; justify-content: stretch;
    overflow: hidden;           /* khoá cuộn ngang toàn khung */
  }

  #shopframe#shopframe#shopframe#shopframe .sf-panel {
    /* Không còn khổ cố định 1280×720 + transform scale: trải kín, cho con reflow. */
    position: relative; left: auto; top: auto; transform: none;
    display: flex; flex-direction: column;
    width: 100% !important; height: 100% !important;
    max-width: 100%; max-height: 100vh; max-height: 100dvh;
    /* Gỡ mọi sàn chiều rộng: khung không được đẩy rộng hơn màn. */
    min-width: 0; min-height: 0;
    margin: 0; border: 0; border-radius: 0;
    /* Lề = max(lề tối thiểu, lề tai thỏ) trên TỪNG cạnh. */
    padding:
      max(var(--sfl-pad-y), var(--sfl-safe-t))
      max(var(--sfl-pad-x), var(--sfl-safe-r))
      max(var(--sfl-pad-y), var(--sfl-safe-b))
      max(var(--sfl-pad-x), var(--sfl-safe-l)) !important;
    gap: var(--sfl-gap) !important;
    /* Cỡ chữ GỐC co theo bề ngang — các rule con dùng px tuyệt đối không đổi,
       nên không có chỗ nào bị cắt chữ vì dòng này. */
    font-size: clamp(12px, 1.15vw, 13px);
    font-size: clamp(12px, 1.15dvw, 13px);
    overflow: hidden;
  }

  /* Chặn "flex/grid blowout": con trực tiếp của khung không được lấy kích thước
     nội dung làm sàn ⇒ hết tràn ngang. Chỉ đặt min-width/height, KHÔNG động
     tới bố cục riêng của menu trái / thanh lọc / lưới thẻ. */
  #shopframe#shopframe#shopframe#shopframe .sf-panel > * { min-width: 0; min-height: 0; }

  /* Hộp chi tiết phủ theo HỘP ĐỆM của .sf-panel (inset:0 tính từ padding box)
     nên vẫn liếm vào vùng tai thỏ — trả lại lề an toàn cho riêng nó. */
  #shopframe#shopframe#shopframe#shopframe .sf-dlg {
    padding:
      max(var(--sfl-pad-y), var(--sfl-safe-t))
      max(var(--sfl-pad-x), var(--sfl-safe-r))
      max(var(--sfl-pad-y), var(--sfl-safe-b))
      max(var(--sfl-pad-x), var(--sfl-safe-l));
  }
}

/* ---------------------------------------------------------------------------
 * (3) NGANG RẤT THẤP (<= 430px) — iPhone SE/8 xoay ngang (667×375),
 *     iPhone 13/14/15 xoay ngang (844×390, 852×393, 932×430). Siết lề/khe hở
 *     thêm một nấc để phần danh sách còn đủ chỗ; vẫn giữ nguyên lề tai thỏ.
 * ------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 430px) and (max-width: 1023.98px) {
  #shopframe#shopframe#shopframe#shopframe {
    --sfl-pad-x: clamp(6px, 1.2vw, 12px);
    --sfl-pad-x: clamp(6px, 1.2dvw, 12px);
    --sfl-pad-y: clamp(4px, 1.4vh, 9px);
    --sfl-pad-y: clamp(4px, 1.4dvh, 9px);
    --sfl-gap: clamp(4px, 1.2vh, 9px);
    --sfl-gap: clamp(4px, 1.2dvh, 9px);
  }
}

/* ---------------------------------------------------------------------------
 * (4) body.rot90 — MÁY DỌC, GAME TỰ XOAY 90° BẰNG CSS.
 *
 *     index.html: body.rot90 { width:100dvh; height:100dvw;
 *                              transform: rotate(90deg) translateY(-100%);
 *                              transform-origin: top left; }
 *     Ghép phép biến đổi (phải→trái): điểm bố cục (x,y) ra màn ở (H−y, x),
 *     với H = chiều cao bố cục = 100dvw. Suy ra bảng quy đổi CẠNH:
 *
 *         cạnh TRÊN  bố cục  (y=0)  →  cạnh PHẢI  màn hình
 *         cạnh DƯỚI  bố cục  (y=H)  →  cạnh TRÁI  màn hình
 *         cạnh TRÁI  bố cục  (x=0)  →  cạnh TRÊN  màn hình
 *         cạnh PHẢI  bố cục  (x=W)  →  cạnh DƯỚI  màn hình
 *
 *     ⇒ padding-left phải lấy inset-TOP (nơi tai thỏ nằm khi máy dọc), chứ
 *     KHÔNG phải inset-left như mobile-repair-830.css đang làm — đó là lý do
 *     mép trái cửa hàng vẫn bị khuyết màn che.
 *
 *     KHÔNG dùng @media ở đây: khung nhìn thật vẫn báo PORTRAIT nên mọi ngưỡng
 *     orientation:landscape đều trượt (bẫy đã ghi trong ui/shoptap.ts).
 * ------------------------------------------------------------------------- */
body.rot90 #shopframe#shopframe#shopframe#shopframe {
  --sfl-safe-t: var(--sfl-si-r);
  --sfl-safe-r: var(--sfl-si-b);
  --sfl-safe-b: var(--sfl-si-l);
  --sfl-safe-l: var(--sfl-si-t);

  --sfl-pad-x: clamp(6px, 1.2vh, 12px);   /* trục NGANG bố cục = trục DỌC màn */
  --sfl-pad-x: clamp(6px, 1.2dvh, 12px);
  --sfl-pad-y: clamp(5px, 1.2vw, 10px);
  --sfl-pad-y: clamp(5px, 1.2dvw, 10px);
  --sfl-gap: clamp(4px, 1.1vw, 9px);
  --sfl-gap: clamp(4px, 1.1dvw, 9px);

  /* Khung fixed nằm TRONG body đã xoay ⇒ 100% là đúng trục bố cục;
     KHÔNG viết 100dvw/100dvh ở đây (sẽ lộn trục). */
  inset: 0; width: 100%; height: 100%;
  padding: 0 !important;
  display: flex; align-items: stretch; justify-content: stretch;
  overflow: hidden;
}

body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-panel {
  position: relative; left: auto; top: auto; transform: none;
  display: flex; flex-direction: column;
  /* Bỏ trần 760px của mobile-repair-830.css: khung ngang 896–932px bị bỏ phí
     ~140px hai bên, thẻ tàu không có chỗ xếp thêm cột. */
  width: 100% !important; height: 100% !important;
  max-width: 100% !important; max-height: 100% !important;
  min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  padding:
    max(var(--sfl-pad-y), var(--sfl-safe-t))
    max(var(--sfl-pad-x), var(--sfl-safe-r))
    max(var(--sfl-pad-y), var(--sfl-safe-b))
    max(var(--sfl-pad-x), var(--sfl-safe-l)) !important;
  gap: var(--sfl-gap) !important;
  overflow: hidden !important;
}

body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-panel > * { min-width: 0; min-height: 0; }

body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-dlg {
  padding:
    max(var(--sfl-pad-y), var(--sfl-safe-t))
    max(var(--sfl-pad-x), var(--sfl-safe-r))
    max(var(--sfl-pad-y), var(--sfl-safe-b))
    max(var(--sfl-pad-x), var(--sfl-safe-l)) !important;
}