/* Shop card fit 876 — CHỈ GIAO DIỆN: chiều cao THẺ trong lưới cửa hàng. Nạp SAU mobile-shop-846.css và shop-landscape-art.css. ═══════════════ HAI LỖI ĐO ĐƯỢC TRÊN LIVE b875 (13/10) ═══════════════════ (1) CỬA TRANG CHỦ — tên tàu 2 dòng làm thẻ CAO HƠN thẻ cùng hàng. Đo starlot.io/ ở 360×640 tiếng es/pt: thẻ `ship_jade_moon_rabbit` ("Conejo Lunar de Jade" / "Coelho Lunar de Jade") cao 193,77px, thẻ cùng hàng 188,33px ⇒ LỆCH 5,44px, hàng lưới trông so le. Gốc rễ: `mobile-shop-846.css:197` chỉ đặt `min-height: var(--msx-name-h)` cho ô tên, mà --msx-name-h là số px CỨNG (34px ở 361–600, 32px ở ≤360) trong khi hai dòng chữ THẬT cao `2 × 1.3 × --sfz-nm` (shop-text-836.css đặt `line-height: 1.3`). Ở 360 thì --sfz-nm = 14,4px ⇒ 37,44px, thừa ra đúng 5,44px. Ở 375–430 còn lệch tới 8,9px (--sfz-nm trần 16,5px). Chính chú thích của 846 cũng ghi "cao hơn nếu tên 2–3 dòng" — tức là biết trước, chỉ chưa chốt. Sửa ở đây: (a) Ô tên LUÔN đặt sẵn chỗ cho 2 dòng (tính TỪ `--sfz-nm`, không ghi số px mới ⇒ 836 đổi cỡ chữ thì ô tên tự theo). `max()` nên không khổ nào THẤP đi so với bản cũ. (b) Tên bị CẮT ở dòng thứ 2 kèm "…". Cửa trang chủ KHÔNG nạp shop-landscape-art.css nên hiện không có một lớp line-clamp nào — tên dài (ja/de, hoặc skin mới) có thể phình 3 dòng và lệch hàng nặng hơn. Đây là CHỐT CHẶN, không phải để cắt tên hiện có: 7 tiếng đo được đều ≤ 2 dòng. Phạm vi: `body:not(.rot90)` + điện thoại DỌC (≤600px, cao ≥541px) ⇒ PC, tablet và rot90 lệch 0 pixel. (2) CỬA /game/ — thẻ `ship_pearl_manta` (skin 48) cao hơn 22–26px. Đo rot90: 320→+25,9px · 360→+21,8px · 375→+23,2px · 390→+24,5px · 414→+26,4px. PC 1366 không lệch (ô ảnh đã đủ rộng). Gốc rễ: `shop-landscape-art.css` mục (5) CỐ Ý miễn trừ riêng thẻ này khỏi ô ảnh nông `--sla-art-a` (3.15) và cho nó `var(--msx-art-a, 1.95)` + `max-height: 79.7cqw`, vì thẻ 48 đáng lẽ có KHUNG 9-slice của `skin-frames-851.css`: ô ảnh phải khớp "lòng kính" nung trong ảnh khung. NHƯNG `skin-frames-851.css` KHÔNG được nạp ở bất kỳ index nào (grep 3 index = 0 kết quả) và tệp đó cũng không có trong repo — build 826 đã gỡ sạch trang trí riêng theo skin theo yêu cầu người dùng. Không có khung thì phần miễn trừ chỉ còn tác dụng duy nhất là đội thẻ lên 22–26px. Chính mục (5) đó cũng tự ghi: "⚠ CÒN MỞ (KHÔNG thuộc S3) ... thẻ này cao hơn thẻ cùng hàng". Đây là phần "CÒN MỞ" được chốt. Sửa ở đây: trả thẻ 48 về ĐÚNG số chung (`--sla-art-*`, bệ sáng, vùng an toàn, tên 2 dòng) cho CẢ hai nhánh: @media khổ ngang THẬT và body.rot90. ⚠⚠ NẾU NGÀY NÀO NẠP LẠI `skin-frames-851.css` (khung 9-slice cho skin 48) thì PHẢI GỠ mục (2) của tệp này cùng lúc — nếu không tàu 48 sẽ teo lại lọt thỏm giữa lòng kính, đúng lỗi mà mục (5) của shop-landscape-art.css mô tả và có test hồi quy ("o anh skin48 KHONG sap" trong scripts/_qa_shop_land_art_s3.py). Mục (1) thì độc lập với 851. SPECIFICITY — không dùng !important cho mục (1) (846 cũng không), và dùng 9 lần #shopframe cho mục (2) vì bản miễn trừ của shop-landscape-art.css dùng 8 lần #id + !important. Thang id cửa hàng: 779(2×) → 787(2×) → 830(3×) → 836(3×, rot90 4×) → 840(4×) → 846(5×) → 847(6×) → landscape-art(6×, thẻ 48: 8×) → tệp này(6×/9×). KHÔNG đụng CSS túi đồ (.sf-panel.mode-bag), không đụng ví, không đụng dải danh mục. */ /* =========================================================================== * (1) ĐIỆN THOẠI DỌC, CỬA TRANG CHỦ — ô tên đặt sẵn chỗ cho 2 dòng * ======================================================================== */ @media (max-width: 600px) and (min-height: 541px) { body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card .sf-card-n { /* 1.3 = line-height của .sf-nm ở shop-text-836.css:67 */ min-height: max(var(--msx-name-h, 34px), calc(2 * 1.3 * var(--sfz-nm, 15px))); } body:not(.rot90) #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card .sf-nm { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; width: 100%; max-width: 100%; /* chốt chặn cho trình duyệt không hiểu line-clamp */ max-height: calc(2 * 1.3em); overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; word-break: normal; text-align: center; } } /* =========================================================================== * (2) THẺ skin 48 — bỏ miễn trừ "khung 9-slice" không còn tồn tại. * Mọi số dưới đây CHÉP ĐÚNG rule chung của shop-landscape-art.css * (mục 3.1/3.2 cho @media, mục 4 cho rot90) — không phát minh số mới. * ======================================================================== */ @media (orientation: landscape) and (max-height: 540px) and (max-width: 1023.98px) { #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[data-code="ship_pearl_manta"] .sf-art { aspect-ratio: var(--sla-art-a) !important; height: auto !important; min-height: 0 !important; max-height: var(--sla-art-max) !important; --sk-a: var(--sla-art-a); } #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[data-code="ship_pearl_manta"] .sp-card-skin:not(.sk-on) { left: 7% !important; top: 9% !important; width: 86% !important; height: 82% !important; transform: none !important; object-fit: contain !important; } #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[data-code="ship_pearl_manta"] .sp-card-stage > .sp-card-pedestal { left: var(--sla-ped-x) !important; right: var(--sla-ped-x) !important; bottom: 4% !important; height: var(--sla-ped-h) !important; } #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[data-code="ship_pearl_manta"] .sf-nm { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: var(--sla-nm-lines); line-clamp: var(--sla-nm-lines); width: 100%; max-width: 100%; font-size: var(--sla-nm-fs) !important; line-height: 1.2 !important; max-height: calc(var(--sla-nm-lines) * 1.2em) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; text-align: center; } } body.rot90 #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[data-code="ship_pearl_manta"] .sf-art { aspect-ratio: var(--sla-art-a) !important; height: auto !important; min-height: 0 !important; max-height: var(--sla-art-max) !important; --sk-a: var(--sla-art-a); } body.rot90 #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[data-code="ship_pearl_manta"] .sp-card-skin:not(.sk-on) { left: 7% !important; top: 9% !important; width: 86% !important; height: 82% !important; transform: none !important; object-fit: contain !important; } body.rot90 #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[data-code="ship_pearl_manta"] .sp-card-stage > .sp-card-pedestal { left: var(--sla-ped-x) !important; right: var(--sla-ped-x) !important; bottom: 4% !important; height: var(--sla-ped-h) !important; } body.rot90 #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-card[data-code="ship_pearl_manta"] .sf-nm { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: var(--sla-nm-lines); line-clamp: var(--sla-nm-lines); width: 100%; max-width: 100%; font-size: var(--sla-nm-fs) !important; line-height: 1.2 !important; max-height: calc(var(--sla-nm-lines) * 1.2em) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; text-align: center; }