/* Shop legibility 836 — visual only: CỠ CHỮ trong CỬA HÀNG / TÚI ĐỒ. Layer này nạp SAU shop-responsive-779 / mobile-shop-bag-787 / mobile-repair-830 nên chỉ cần thắng đúng specificity của các layer đó, không đụng logic giao dịch. Quy ước specificity: desktop / portrait -> #shopframe x3 (thắng x2 của 779 + 787) body.rot90 -> #shopframe x4 (thắng x3 !important của 830) ─────────────────────── BẢN SỬA: px CỐ ĐỊNH -> clamp() ───────────────────── VẤN ĐỀ NGƯỜI CHƠI BÁO: "chữ cửa hàng LÚC NÀO CŨNG NHỎ". Đúng: bản cũ của file này ghi px TUYỆT ĐỐI (tên tàu 15px, giá 14px, nút mua 16px) và nó là lớp THẮNG CUỐI cho font-size — mobile-shop-846.css và shop-textwrap-847.css nạp sau nhưng KHÔNG khai báo font-size nào (846 chỉ cấp `--msx-sb-fs` cho biến `--sc-sb-fs`, mà `.sc-sb-text{font-size:…!important}` ở đây vẫn đè lên). Vì khung cửa hàng KHÔNG còn `transform: scale(--sf-fit)` nữa (779 đặt `.sf-panel{transform:none}` bằng 2 lần id), px ở đây = px THẬT trên màn ⇒ màn 1920 và màn 1280 chữ y hệt nhau, nhìn bé tí trên màn lớn. CÁCH SỬA: mọi cỡ chữ đi qua MỘT bộ "núm vặn" --sfz-* khai báo bằng clamp(). Rule vẽ chỉ đọc biến, không viết số ⇒ muốn chỉnh chỉ sửa 1 chỗ. ĐƠN VỊ CHỌN THEO TỪNG KHỔ — cố ý khác nhau, đừng gom lại: • Máy tính/tablet : `vw` (khung nở theo bề ngang cửa sổ; .sf-panel trần 1280px nên trần clamp cũng phải thấp, không thì màn 2560 chữ to hơn thẻ). • Điện thoại : `vmin` (KHÔNG phải vw). Cùng một máy xoay ngang/dọc thì vmin = cạnh NGẮN vật lý, không đổi ⇒ chữ không nhảy cỡ khi xoay máy; `vw` ở khổ nằm ngang 667×375 sẽ cho ~27px, vỡ thẻ. • body.rot90 : `vh`. Game xoay body 90° nên TRỤC BỊ HOÁN: bề ngang BỐ CỤC = chiều cao khung nhìn (xem ghi chú (5) của mobile-shop-846.css). Dùng vw ở đây là lấy nhầm chiều cao. @media thì TRƯỢT hết (máy báo 414×896 dù bố cục đang 896×414) nên nhánh này neo vào `body.rot90`, không neo vào ngưỡng viewport. SÀN clamp() = ĐÚNG SỐ CŨ ở khổ nhỏ nhất của từng nhánh ⇒ điện thoại 320/360 không to thêm pixel nào, chỉ máy màn rộng mới được hưởng chữ lớn. */ /* ══════════════════ NÚM VẶN 1/3 — MÁY TÍNH + TABLET (vw) ═══════════════════ DẠNG `clamp(sàn, calc(hằng + k·vw), trần)` chứ không phải `k·vw` thuần: dưới ~1060px cửa hàng chỉ còn 3 cột nên THẺ HẸP ĐI dù màn rộng ra (tablet dọc 768 thẻ 156px, hẹp hơn cả điện thoại 430!). `k·vw` thuần muốn nhích được mốc 1280 thì phải để k lớn, mà k lớn lại thổi chữ ở đúng mấy khổ thẻ hẹp đó. Phần hằng gánh cỡ chữ, phần vw chỉ lo độ nở ⇒ ≤1050px rơi về SÀN (y hệt bản cũ, không đổi pixel nào), từ 1280 trở lên mới nở. */ #shopframe#shopframe#shopframe { --sfz-nm: clamp(15px, calc(8.0px + 0.66vw), 19px); /* TÊN SKIN trên thẻ */ --sfz-price: clamp(14px, calc(7.5px + 0.60vw), 17.5px); /* GIÁ / trạng thái trên thẻ */ --sfz-cta: clamp(16px, calc(8.5px + 0.70vw), 21px); /* NÚT MUA / TRANG BỊ / NHẬN */ --sfz-dname: clamp(22px, calc(11px + 0.95vw), 30px); /* tên tàu trong hộp chi tiết */ --sfz-title: clamp(16px, calc(8.0px + 0.70vw), 21px); /* tiêu đề TÚI ĐỒ */ --sfz-ui: clamp(14px, calc(7.5px + 0.55vw), 17px); /* danh mục, tab, ô lọc */ --sfz-ui-s: clamp(13px, calc(7.0px + 0.50vw), 15.5px); /* nhãn phụ, nút sắp xếp */ --sfz-hint: clamp(13px, calc(7.0px + 0.50vw), 15.5px); /* gợi ý dưới tên nhóm */ --sfz-tag: clamp(11px, calc(6.0px + 0.42vw), 13px); /* nhãn nhỏ: ĐANG DÙNG, FREE */ --sfz-wal: clamp(14px, calc(7.5px + 0.55vw), 16.5px); /* vàng / kim cương trên ví */ } /* ---------- 1. Nền chung (desktop + tablet) ---------- */ #shopframe#shopframe#shopframe .sf-cat {font:700 var(--sfz-ui)/1.35 system-ui} #shopframe#shopframe#shopframe .sf-allpill {font-size:var(--sfz-ui)} #shopframe#shopframe#shopframe .sf-sort select {font-size:var(--sfz-ui)} #shopframe#shopframe#shopframe .sf-grp {font-size:var(--sfz-ui)} #shopframe#shopframe#shopframe .sf-grp-n {font-size:var(--sfz-ui-s)} #shopframe#shopframe#shopframe .sf-grp-hint {font-size:var(--sfz-hint)} #shopframe#shopframe#shopframe .sf-wal b {font-size:var(--sfz-wal)!important} #shopframe#shopframe#shopframe .sf-card .sf-nm {font-size:var(--sfz-nm)!important;line-height:1.3!important} #shopframe#shopframe#shopframe .sf-card .sf-card-n {min-height:40px} #shopframe#shopframe#shopframe .sc-sb-text {font-size:var(--sfz-price)!important} #shopframe#shopframe#shopframe .sf-cell-n {font-size:var(--sfz-ui);line-height:1.3} #shopframe#shopframe#shopframe .sf-cell-tag {font-size:var(--sfz-tag)} #shopframe#shopframe#shopframe .sf-inv-tab {font-size:var(--sfz-ui)} #shopframe#shopframe#shopframe .sf-inv-title {font-size:var(--sfz-title)} #shopframe#shopframe#shopframe .sf-sortbtn {font-size:var(--sfz-ui-s)} #shopframe#shopframe#shopframe .sf-d-name {font-size:var(--sfz-dname)} #shopframe#shopframe#shopframe .sf-d-freetag {font-size:var(--sfz-tag)} #shopframe#shopframe#shopframe .sf-cta {font-size:var(--sfz-cta)} /* ══════════ NÚM VẶN 2/3 — ĐIỆN THOẠI DỌC + MÀN THẤP (vmin) ════════════════ Cùng ngưỡng @media như bản cũ. Chỉ đổi GIÁ TRỊ BIẾN — các rule vẽ ở khối 1 đọc lại biến mới nên không phải chép lại một dòng selector nào. Đối chiếu sàn với bản cũ (khổ 360px): tên 15→15, giá 14→14, nút 16→16, tên chi tiết 21→21 ⇒ KHÔNG khổ nào nhỏ đi. */ @media (max-width:700px), (max-height:500px) and (max-width:1000px) { #shopframe#shopframe#shopframe { --sfz-nm: clamp(15px, 4.00vmin, 16.5px); --sfz-price: clamp(14px, 3.70vmin, 15.5px); --sfz-cta: clamp(16px, 4.30vmin, 18px); --sfz-dname: clamp(21px, 5.60vmin, 24px); --sfz-title: clamp(15px, 4.00vmin, 16.5px); --sfz-ui: clamp(13.5px, 3.60vmin, 15px); --sfz-ui-s: clamp(12.5px, 3.35vmin, 14px); --sfz-hint: clamp(12.5px, 3.30vmin, 13.5px); --sfz-tag: clamp(11px, 2.90vmin, 12px); --sfz-wal: clamp(13.5px, 3.60vmin, 15px); } /* Chi tiết bố cục đi kèm cỡ chữ ở khổ này — giữ nguyên như bản cũ. */ #shopframe#shopframe#shopframe .sf-title {font-size:clamp(20px,5.60vmin,23px)} #shopframe#shopframe#shopframe .sf-cat .sf-cat-ic, #shopframe#shopframe#shopframe .sf-cat .sf-cat-ic svg {width:20px;height:20px;flex-basis:20px} #shopframe#shopframe#shopframe .sf-grp-hint {line-height:1.45} #shopframe#shopframe#shopframe .sf-card .sf-card-n {min-height:40px} #shopframe#shopframe#shopframe .sf-card .sf-price {height:36px;min-height:36px} #shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-cell-n {font-size:var(--sfz-ui);line-height:1.3} #shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-cell-tag {font-size:var(--sfz-tag);padding:3px 5px} #shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-tab {font-size:var(--sfz-ui-s)} #shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-foot .sf-sortbtn {font-size:var(--sfz-ui-s)} #shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship::after {font-size:var(--sfz-ui-s)} } /* Máy rất hẹp (<=360px): ô hàng 2 cột dễ vỡ chữ -> hạ trần + sàn đúng bằng số của bản cũ (14 / 13 / 12.5). Ở 320×568 vmin=320 nên clamp rơi về SÀN. */ @media (max-width:360px) { #shopframe#shopframe#shopframe { --sfz-nm: clamp(14px, 4.00vmin, 15px); --sfz-price: clamp(13px, 3.70vmin, 14px); --sfz-ui-s: clamp(12.5px, 3.35vmin, 13px); } } /* ══════════ NÚM VẶN 3/3 — body.rot90, ĐIỆN THOẠI CHƠI NGANG (vh) ══════════ 830 ép chữ xuống 9.5–11px cho vừa 4 cột. Ở đây đổi 4 -> 3 cột để có bề ngang cho chữ to, vẫn giữ nguyên chiều cao khung. vh = BỀ NGANG BỐ CỤC vì body đã xoay 90° (xem đầu file). Sàn = số của bản cũ ⇒ máy 640 bố cục không đổi pixel nào; máy 844/896 mới được nới. */ body.rot90 #shopframe#shopframe#shopframe#shopframe { --sfz-nm: clamp(13px, 1.62vh, 15px); --sfz-price: clamp(12.5px, 1.55vh, 14px); --sfz-cta: clamp(15px, 1.85vh, 17px); --sfz-dname: clamp(19px, 2.30vh, 21px); --sfz-title: clamp(16px, 1.95vh, 18px); --sfz-ui: clamp(12px, 1.45vh, 13.5px); --sfz-ui-s: clamp(11.5px, 1.35vh, 13px); --sfz-hint: clamp(11px, 1.30vh, 12.5px); --sfz-tag: clamp(10.5px, 1.25vh, 11.5px); --sfz-wal: clamp(12.5px, 1.50vh, 14px); } body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-rail {flex:0 0 104px!important;width:104px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-cat {font-size:var(--sfz-ui)!important;min-height:38px!important;padding:6px 6px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-cat .sf-cat-ic, body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-cat .sf-cat-ic svg {width:18px!important;height:18px!important;flex-basis:18px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-title {font-size:var(--sfz-title)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-wal b {font-size:var(--sfz-wal)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-allpill {font-size:var(--sfz-ui-s)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-sort select {font-size:var(--sfz-ui-s)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-grp {font-size:var(--sfz-ui)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-grp-hint {font-size:var(--sfz-hint)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-grid {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-card .sf-nm {font-size:var(--sfz-nm)!important;line-height:1.28!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-card .sf-card-n {min-height:32px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-card .sf-price {height:30px!important;min-height:30px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sc-sb-text {font-size:var(--sfz-price)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-grid:not(.list) {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-grid:not(.list) .sf-cell {min-height:118px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-cell-n {font-size:var(--sfz-price)!important;line-height:1.28!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-cell-tag {font-size:var(--sfz-tag)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-tab {font-size:var(--sfz-ui)!important;min-height:36px!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-foot .sf-sortbtn {font-size:var(--sfz-ui-s)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-d-name {font-size:var(--sfz-dname)!important} body.rot90 #shopframe#shopframe#shopframe#shopframe .sf-cta {font-size:var(--sfz-cta)!important} /* ══════════ CHỐT HÌNH HỌC HÀNG LƯỚI — ĐIỆN THOẠI MÀN DỌC (thêm 2026-10-12) ══════════ LỖI ĐÃ ĐO: layer khung riêng theo từng skin (`skin-frames-851.css`, 7 lần #shopframe + `aspect-ratio: 540/804` cho `.sf-card[data-code="ship_pearl_manta"]`) ép RIÊNG một thẻ cao hơn các thẻ CÙNG HÀNG 54–68px trên điện thoại dọc (đo 2026-09-28: 67.8px @414×896, 54.4px @360×640; đo lại 2026-10-12 bằng đối chứng dương trong `scripts/_qa_shop_mobilefit_s2_1012.py`: 58px @414×896). Vì sao chỉ thiếu ở nhánh MÀN DỌC: `shop-landscape-compact.css` (7×id) và `shop-landscape-art.css` (8×id) đã đặt `aspect-ratio: auto !important` cho nhánh `body.rot90` + landscape, nên ở hai nhánh đó 851 KHÔNG gây lệch (đối chứng rot90 đo được chênh 0px). Nhánh màn dọc thì không có ai chặn. CHỐT: hình học thẻ cửa hàng do LƯỚI quyết định, không do một skin quyết định. Khung 9-slice vẫn vẽ đủ — `.sp-card-frame` là `position:absolute; inset:0` nên nó bám theo cỡ thẻ, chỉ mất khả năng TỰ ÉP tỉ lệ thẻ. 8 lần #shopframe: 851 dùng 7 lần + !important (cùng con số mà nhánh rot90 của shop-landscape-art.css đã phải dùng, cùng một lý do). ⚠ Rule này KHÔNG đổi một pixel nào của bản đang chạy: không thẻ nào trên live có `aspect-ratio` riêng (đo 14 khổ / 390 ca harness + 10 khổ LIVE thật qua cả 2 cửa /game/ và trang chủ — tất cả `aspect-ratio: auto`). Nó là CHỐT CHẶN, không phải bản vá giao diện. Gỡ nó ra thì ngày 851 lên live hàng lưới lệch lại ngay. ⚠ KHÔNG đụng `--sf-tap` / `--sf-fit` (lane khác) và không đụng luật túi đồ `.sf-panel.mode-bag` ở trên. */ @media (max-width: 1023px) { body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[class] { aspect-ratio: auto !important; } }