/****************** JQUERY MOBILE MOD ******************/ tr { border-bottom: 1px solid #d6d6d6; } /****************** COMMON ******************/ .header-bar { text-align: center; margin-bottom: 1px; } /* Thanh nút đáy — hạ tầng dùng chung cả ba màn, KHÔNG bó trong .spk-moi vì có thanh nằm ngoài vùng đó (setting.html đặt nó ở khung trang). Ở khổ điện thoại nút tự xuống hàng (xem khối @media phía dưới); trước đây responsive.js gom nút phụ vào một ngăn "⋯", script ấy đã bỏ. */ .spk-thanh-day { position: fixed; bottom: 0px; left: 0; width: 100%; z-index: 10; box-sizing: border-box; display: flex; /* THANH ĐÁY LUÔN MỘT DÒNG — thứ nhường chỗ là TÊN NHÂN VẬT, không phải cả thanh. Bản trước để `wrap`: dưới 341px cụm nút rơi xuống dòng thứ hai và thanh cao 107px thay vì 58px — mất 49px khung nhìn ở đúng những máy hẹp nhất, nơi từng pixel dọc đã phải giành giật. Đo được thanh cần 345px để nằm một dòng. Flexbox XUỐNG DÒNG TRƯỚC rồi mới co, nên `min-width: 0` đặt sẵn ở `.spk-tt` từ trước không có tác dụng gì chừng nào còn `wrap` — cùng cái bẫy đã cắn ở `.spk-hang-aux`, `.spk-them` và `.spk-bang-the td`. Thứ tự nhường chỗ: tên nhân vật cắt bớt (có "…"), còn hai nút và chữ "Đã lưu" / "Chưa lưu" thì KHÔNG BAO GIỜ co — đó là thao tác chính và cảnh báo mất dữ liệu. Đo ở 280/300/320/340px: thanh 58px, không nút nào bị cắt, "Đã lưu" nguyên vẹn, tên còn 23/43/63/83px. Từ 360px trở lên KHÔNG đổi một pixel nào. */ flex-wrap: nowrap; /* Hai dòng: trình duyệt chưa có env() bỏ dòng sau và giữ dòng trước. Gộp một dòng như bản cũ thì Chrome 68 mất SẠCH padding của thanh nút. */ /* Đáy chỉ còn 2px: 4px còn lại là lề dưới của chính các nút — xem bên dưới. Đệm trên 4px thay vì 10px — xem khối "BA DẢI CỐ ĐỊNH" ở .spk-topbar. */ padding: 4px 14px 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--spk-vien); box-shadow: 0 -2px 10px rgba(0, 0, 0, .06); } /* NGỮ CẢNH ĐANG LÀM VIỆC ở mép trái thanh đáy: tài khoản │ nhân vật │ trạng thái lưu Cả cụm được phép CO (`min-width: 0` + `flex: 0 1 auto`) để nó nhường chỗ cho hai nút bên phải khi màn hẹp, chứ không đẩy chúng tràn ra ngoài. */ .spk-thanh-day .spk-tt { flex: 0 1 auto; min-width: 0; align-self: center; display: flex; align-items: baseline; font-size: 13px; color: var(--spk-chu-mo); overflow: hidden; } /* AI NHƯỜNG CHỖ KHI THANH ĐÁY CHẬT. Tên nhân vật là mẩu duy nhất được cắt: nó dài không lường trước được, và cắt bớt vẫn còn nhận ra. Chữ trạng thái thì không — "Chưa lưu" mà cụt thành "Chưa l…" là mất một cảnh báo về dữ liệu. */ .spk-tt-nv { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spk-tt-luu { flex: 0 0 auto; white-space: nowrap; } /* KHỔ QUÁ HẸP: nút "Khác ⋯" rút còn "⋯". Dưới 360px — hẹp hơn cả máy hẹp nhất còn hỗ trợ — tên nhân vật phải cắt bớt để cả thanh nằm một dòng. Bỏ chữ "Khác" trả lại 34px cho cái tên: ở 320 và 340px tên hiện TRỌN "Norrys0 [S329]" thay vì cụt mất mã máy chủ, ở 300px còn 77px thay vì 43. Mốc 359px chứ không phải 340px: ngay trên 340 thanh vẫn thiếu 4px nên tên vẫn cụt — cắt đúng ở chỗ hết cụt thì mốc mới có nghĩa. "⋯" một mình vẫn là quy ước quen thuộc cho "còn nữa". Chữ chỉ ẩn khỏi MẮT, không mất khỏi máy đọc màn hình: nút mang `aria-label="Khác"` nên tên gọi vẫn còn. THÊM CẢ MÀN HÌNH DỌC, không riêng dưới 360px: ở khổ dọc chiều ngang luôn là thứ đáng tiếc nhất, mà "⋯" thì đã đủ nghĩa. Hai điều kiện nối bằng dấu phẩy — CHỈ CẦN MỘT đúng là luật chạy: máy nằm ngang mà hẹp dưới 360px cũng vẫn rút gọn. */ @media only screen and (max-width: 359px), only screen and (orientation: portrait) { .spk-thanh-day .spk-nut-bar .spk-nut-chu { display: none; } } /* Dấu phân cách do CSS vẽ — cùng lối với dải tài khoản (.spk-tk-ten::after). Đặt ở ::before của mẩu ĐỨNG SAU, và chỉ khi mẩu ấy có chữ: mẩu rỗng mà vẫn vẽ dấu thì thanh đáy hiện ra một dấu │ trơ trọi không ngăn cách gì. */ .spk-tt-luu:not(:empty)::before { content: "|"; margin: 0 9px; color: var(--spk-vien); font-weight: 400; } /* CỤM TRẠNG THÁI TỰ XUỐNG DÒNG KHI KHÔNG ĐỦ CHỖ — không mốc màn hình nào cả. Đủ chỗ thì `tài khoản · nhân vật [máy chủ] · trạng thái` nằm một dòng cùng hai nút; không đủ thì tài khoản lên dòng trên, cụm còn lại xuống dòng dưới. ĐỂ FLEXBOX TỰ QUYẾT, đừng đoán hộ nó bằng mốc. Đã thử ba mốc — 640, 399, rồi 479px — và cả ba đều sai theo một kiểu: bề rộng CẦN phụ thuộc độ dài tên, mà tên là dữ liệu của người dùng. Đo được 441px với "smartpk · ziziziz [S405]" nhưng 453px với "smartpk · Norrys0 [S329]"; một cái tên dài hơn nữa thì mốc lại sai tiếp. `flex-wrap: wrap` biết chính xác lúc nào không vừa, vì nó là bên đo. Hai mẩu, không phải ba: `.spk-tt-dong` bọc nhân vật với trạng thái để chúng KHÔNG bị tách rời — ba mẩu ngang cấp thì flexbox có thể vỡ thành ba dòng. KHÔNG CÓ DẤU │ GIỮA TÀI KHOẢN VÀ NHÂN VẬT, chỉ có khoảng cách. Dấu ấy đặt ở `::before` của nhân vật thì khi xuống dòng nó mở đầu dòng dưới; đặt ở `::after` của tài khoản thì nó treo ở cuối dòng trên. CSS không có cách nào biết "vừa xuống dòng" để giấu đi — nên bỏ hẳn, và để khoảng trắng làm việc phân tách. Dấu │ giữa nhân vật và trạng thái thì giữ: hai mẩu ấy luôn cùng một dòng. */ .spk-thanh-day .spk-tt { flex-wrap: wrap; } .spk-tt-tk { margin-right: 12px; } /* Khối bọc "nhân vật · trạng thái". PHẢI CÓ LUẬT NỀN, không chỉ luật trong media query khổ hẹp. Bản đầu tôi chỉ khai nó ở `@media (max-width: 399px)`; từ 400px trở lên nó là một `` trơn, chữ bên trong tự xuống dòng và cụm lại thành HAI dòng — đúng thứ vừa bỏ công chống. Đo được ở 400px: cụm cao 39px thay vì 20px. Thêm một khối bọc thì phải trả lời cho MỌI khổ, không riêng khổ mình đang sửa. */ .spk-tt-dong { display: flex; align-items: baseline; flex: 0 1 auto; min-width: 0; } /* Tên tài khoản là mẩu dài và nhẹ ký nhất — cho nó co rồi cắt bằng dấu ba chấm. */ .spk-tt-tk { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spk-tt-nv { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--spk-chu); font-weight: 600; } /* Trạng thái lưu KHÔNG được co và không được cắt: đó là mẩu duy nhất người dùng cần đọc trọn. Hai mẩu kia nhường chỗ cho nó. Mờ khi "Đã lưu" — không có gì phải nhìn. "Chưa lưu" thì đỏ và đậm lên, vì đó là lúc người dùng cần biết mình còn việc phải làm. */ .spk-tt-luu { flex: none; white-space: nowrap; } .spk-tt-luu.spk-chua-luu { color: var(--spk-do); font-weight: 600; } /* KHOẢNG CÁCH GIỮA CÁC NÚT bằng MARGIN, không bằng `gap`. `gap` của flexbox bị Chrome 68 (MEmu) bỏ qua: trên máy người dùng các nút dính liền nhau, còn trên máy mình thì vẫn rời — kiểu hỏng không kêu. Thanh này `flex-wrap: wrap` nên không đổi sang grid được như .spk-hang-nut đã làm. Lề phải của mục cuối vô hại vì hàng căn trái. Lề dưới bù lại bằng việc bớt padding-bottom của thanh, nên chiều cao thanh không đổi. Lề dưới còn 4px: từ khi thanh mang `flex-wrap: nowrap` thì nút KHÔNG còn xuống hàng nữa, nên 8px cũ không còn phải gánh việc làm khe giữa hai hàng. */ .spk-thanh-day > .spk-nut-bar, .spk-thanh-day > .spk-menu-vo { margin: 0 8px 4px 0; /* KHÔNG co: từ lúc thanh thôi xuống dòng, thiếu chỗ là flex đi bóp thứ co được. Nút bị bóp hẹp hơn chữ của nó rồi cắt cụt — đúng lỗi đã shipped ở r3665. */ flex: 0 0 auto; } /* ĐẨY CẢ CỤM NÚT SANG PHẢI. Lề trái tự động đặt ở món ĐẦU TIÊN của cụm ("Khác"), nên nó nuốt hết chỗ trống còn lại và mọi thứ sau nó dồn về mép phải. Chữ trạng thái đứng lại bên trái. */ .spk-thanh-day > .spk-menu-vo { margin-left: auto; } /* Nút cuối không cần lề phải — nó đã sát mép rồi. */ .spk-thanh-day > .spk-nut-bar:last-child { margin-right: 0; } /* Nút của thanh đáy. Cỡ chạm 40px kể cả trên PC — đây là các thao tác chính. */ /* Nút ở thanh đáy: VIỀN XANH là mặc định. Bản trước là nút trắng viền xám — cùng tông với nền thanh nên cả hàng chìm nghỉm, phải nhìn kỹ mới thấy. Chỉ NÚT CHÍNH của thanh mới tô đặc (xem .spk-nut-chinh bên dưới). Bốn thanh trong app dùng chung lớp này — Tài khoản, Mua VIP, phân trang lịch sử, Thiết lập — mà phần lớn nút trong đó không phải thao tác chính; tô đặc hết thì "Thiết lập mặc định" (xoá sạch cấu hình) trông y hệt "Lưu thiết lập" nằm ngay cạnh. Dùng --spk-chinh của bảng màu (khai ở :root nên dùng được cả ngoài .spk-moi), không viết mã màu riêng. */ .spk-nut-bar { font: inherit; font-size: 14px; font-weight: 500; color: var(--spk-chinh); background: #fff; border: 1px solid var(--spk-chinh); border-radius: 8px; padding: 9px 18px; min-height: 40px; cursor: pointer; white-space: nowrap; } /* DÃY NÚT NẰM TRONG LUỒNG, ngay dưới thứ nó tác động — khác .spk-thanh-day là thanh cố định dính đáy màn. Chỉ màn Thiết lập còn dùng thanh cố định, vì "Lưu thiết lập" áp dụng cho cả màn và có thể cần ở bất cứ vị trí cuộn nào. Mua VIP / phân trang / đổi mật khẩu thì thuộc về đúng một khối, nên đi cùng khối ấy. Lề thay `gap` — gap trong flexbox cần Chrome 84, mà người dùng có máy chạy Chrome 68. Lề dưới của từng nút cũng là khoảng cách giữa hai dòng khi xuống dòng. */ .spk-day-nut { display: flex; flex-wrap: wrap; margin-top: 16px; } .spk-day-nut > * { margin: 0 8px 8px 0; } .spk-nut-bar:hover { background: rgba(107, 63, 160, .08); } /* NÚT CHÍNH của một thanh đáy: tô đặc để nổi hẳn so với các nút còn lại. Trước đây luật này viết theo ID (#btnApply) — vai trò "nút chính" nằm ở tên của MỘT nút cụ thể, nên thanh nào muốn có nút chính cũng phải chép thêm một luật id nữa, và đọc lớp trong HTML thì không thấy nút ấy khác gì các nút cùng lớp. Nay vai trò nằm ở lớp, đúng lối của .spk-nut-phu bên nút thường. */ .spk-nut-bar.spk-nut-chinh { color: #fff; background: var(--spk-chinh); } .spk-nut-bar.spk-nut-chinh:hover { background: #55307f; border-color: #55307f; } .spk-nut-bar:focus-visible { outline: 2px solid #6b3fa0; outline-offset: 2px; } .div-tool-bar { position: fixed; bottom: 0px; right: 0px; width: 60px; z-index: 11; text-align: right; } .div-top-spacing { height: 50px; } .spk-cho-cuon { height: 200px; clear: both; } .normal-btn { min-width: 80px !important; background: #663399 !important; color: white !important; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important; } .grey-btn { max-width: 120px; background: #663399 !important; text-overflow: unset; color: white !important; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important; } /* Đã gỡ bộ luật cũ của hai danh sách "bỏ qua hoạt động" (Bí Cảnh) và "kênh gửi tin" (Tiện ích) — cả hai khối đều đã chuyển sang giao diện mới, và luật cũ nay chỉ gây hại: · đường phân cách được vẽ lên HAI CỘT riêng (base-col và extra-col) chứ không lên cả dòng. Thời jQM hai cột là inline-block cao bằng nhau nên nhìn ra một vạch liền; giờ chúng cao khác nhau nên vạch đứt làm hai đoạn lệch nhau. · khung viền quanh base-col của danh sách kênh chồng lên viền của dòng. Kiểu dáng thay thế nằm trong khối "GIAO DIỆN MỚI" ở cuối tệp, bó trong .spk-moi. */ #accountContent { margin-bottom: 250px; } /****************** HƯỚNG DẪN ******************/ /* Khung cao ĐÚNG BẰNG vùng nhìn, cuộn nằm bên trong khung — đúng cách tham-khao-1 xếp. Bản cũ để `height: 2500px`: một con số bịa, ở khổ rộng thì thừa khoảng trống, ở khổ hẹp thì thành hai thanh cuộn lồng nhau. Chuỗi 100% chỉ đứng được khi mọi tổ tiên có chiều cao xác định: #content là flex item `flex: 1` nên có, còn .spk-man thì phải nêu ra ở đây. */ #spkMan_newsModule.spk-hien, #guideContent { height: 100%; } #guideContent iframe { /* block: thẻ iframe mặc định inline nên bị canh theo đường cơ chữ, chừa một khe trống dưới đáy — đo được 4px. */ display: block; width: 100%; height: 100%; border: 0; } /****************** SETTINGS ******************/ #playerInfoListTable { text-shadow: none; font-weight: bold; color: #323232; } #playerInfoListTable td { vertical-align: middle; } #playerSettingCheckAllContainer { display: none; } .setting-time-table input { width: 50px; } .setting-unit-table input { width: 75px; } .setting-unit-table-control { padding-left: 15px; } #pkSkillListContainer table { width: 38.5%; } #pkSkillListContainer td { vertical-align: top; width: 50%; padding-left: 10px; } #pkSkillListContainer td:first-child { padding-left: 0; padding-right: 10px; } #vatphamAuctionItemIdDiv { display: inline-block; width: 200px; } .target-black-list-col { width: 50%; display: inline-block; } /****************** ACCOUNT ******************/ .account-div { position: relative; } .account-div-title { color: blue; font-weight: bold; margin: 10px 0px; } /* ---------- Danh sách gói VIP (#playerLicenseList) ---------- Mỗi gói là một THẺ, danh sách nhân vật của gói nằm trong chính thẻ ấy — cùng cách bản tham-khao-1 xếp. Bản cũ là dải xám tràn viền, dựng bằng lồng trong
với cột chia theo phần trăm, nên trên điện thoại các cột chồng lên nhau. */ /* ---------- KHÔNG DÙNG `gap` TRÊN FLEX ---------- Chrome 68 (MEmu) chỉ có `gap` cho GRID (từ 66), không có cho FLEX (từ 84). Đo được: giả lập Chrome 68 thì màn Quản lý VIP lệch 1035/1087 phần tử — trên máy ấy mọi thứ dính sát vào nhau. Không dùng @supports: Chrome 68 VẪN PHÂN TÍCH ĐƯỢC `gap`, nên `@supports (gap: 1px)` trả true ở đó — không có phép dò trung thực nào. Một đường mã duy nhất cho mọi trình duyệt thì không có đường nào để quên. HAI CÁCH, chọn theo container (cả hai đã đo trên trang thử tối giản): · `> *` + bớt padding dưới đúng bằng N — khớp CHÍNH XÁC chiều cao của bản dùng gap. Dùng cho khối chiếm trọn bề ngang, và cho khối có con bị ẩn: con bị ẩn không sinh hộp nên không góp lề nào, khe giữa hai con ĐANG HIỆN luôn đúng bằng N. · `> *:not(:last-child)` — bắt buộc khi con cuối CO GIÃN (flex:1) hoặc khi chính container bó theo nội dung: lề thừa sau con cuối không rơi vào khoảng trống mà làm con ấy teo đi N, hoặc làm container phình ra N. Lề dọc chỉ đặt ở nơi hàng THẬT SỰ xuống dòng (thường là trong media query khổ hẹp). Đặt ở khổ rộng nơi hàng không bao giờ xuống dòng thì chỉ tổ làm hàng cao thêm N. */ .spk-moi #playerLicenseList { display: flex; flex-direction: column; margin-top: 10px; } /* Bỏ qua thẻ CUỐI, thay vì kéo margin âm trên khối chứa. Lề âm ấy GỘP LỀ ra ngoài khối cha — cha không có padding hay viền dưới nên nó không bù được gì, chỉ làm cha cao thêm đúng 10px. Đo được trên cả hai khổ. Đổi lại: thẻ cuối bị bộ lọc ẩn (.spk-an) thì thẻ trước nó giữ 10px thừa ở đáy danh sách. Đó là trường hợp DUY NHẤT còn lệch, và nó thừa đúng bằng cái vừa bỏ. */ .spk-moi #playerLicenseList > *:not(:last-child) { margin-bottom: 10px; } /* ---------- Thanh lọc của khu Quản lý VIP ---------- LƯỚI chứ không flex: `gap` của flexbox bị Chrome 68 (MEmu) bỏ qua, còn `gap` của grid chạy từ Chrome 66 — cùng lý do đã ghi ở khối hàng thiết lập. Hai ô chọn rộng cố định, ô tên ăn phần còn lại: "S12" hay "Còn hạn" không dài, kéo chúng bằng ô tên chỉ để lại một khoảng trống giữa chữ và mũi tên. */ .spk-moi .spk-vip-loc { display: grid; grid-template-columns: 150px 150px 1fr; gap: 12px; align-items: end; margin-top: 10px; padding: 12px 14px; background: var(--spk-nen-mo); border: 1px solid var(--spk-vien); border-radius: 10px; } .spk-moi .spk-vip-loc .spk-truong { margin: 0; min-width: 0; } .spk-moi .spk-vip-loc .spk-chon, .spk-moi .spk-vip-loc .spk-nhap { width: 100%; } /* Dòng đếm chiếm trọn hàng dưới cùng, không chen vào giữa ba ô. */ .spk-moi .spk-vip-loc-dem { grid-column: 1 / -1; color: var(--spk-chu-mo); font-size: 12.5px; } /* Lọc xong không còn dòng nào: nói ra hẳn, chứ để trống thì không phân biệt được với "chưa nạp xong". */ .spk-moi .spk-vip-trong { margin-top: 10px; padding: 26px 14px; color: var(--spk-chu-mo); text-align: center; background: var(--spk-nen); border: 1px dashed var(--spk-vien); border-radius: 10px; } @media only screen and (max-width: 640px) { /* Khổ hẹp: hai ô chọn chia đôi một hàng, ô tên xuống trọn hàng dưới. */ .spk-moi .spk-vip-loc { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; } .spk-moi .spk-vip-loc-ten { grid-column: 1 / -1; } } /* THẺ VIP XẾP HAI CỘT: trái là thông tin, phải là các nút. Bản trước xếp DỌC — thông tin một khối, cụm nút một khối dưới nó. Mỗi gói vì thế ăn thêm trọn một hàng nút cao 54px, nhân với 56 gói là 3.024px, tức một phần tư toàn bộ chiều cao danh sách (đo được 12.127px ở khổ 412px). Xếp ngang thì cụm nút nằm cạnh thông tin chứ không dưới nó, và chiều cao thẻ do bên CAO HƠN quyết định thay vì bằng tổng hai bên. Làm bằng CSS thuần, không đụng markup: `.spk-vip-goi` thành flex biết vỡ dòng, cột trái co giãn, cột nút giữ bề rộng tự nhiên, còn danh sách nhân vật chiếm trọn một dòng riêng bên dưới (`flex: 1 1 100%`). VỠ DÒNG ĐƯỢC là bắt buộc chứ không phải tuỳ chọn: ở khổ hẹp nhất, thông tin cộng cụm nút không đủ chỗ nằm ngang, và flexbox thì VỠ DÒNG TRƯỚC KHI CO — không mở `wrap` thì cụm nút bị bóp thay vì xuống dòng. */ .spk-moi .spk-vip-goi { display: flex; flex-wrap: wrap; align-items: flex-start; background: var(--spk-nen); border: 1px solid var(--spk-vien); border-radius: 10px; overflow: hidden; } /* Cột trái: sàn 200px rồi mới cho vỡ dòng — dưới mức ấy tên gói bị bóp thành ba bốn dòng chữ, mà cụm nút vẫn nguyên. */ .spk-moi .spk-vip-goi > .spk-vip-goi-dau { flex: 1 1 200px; min-width: 0; } /* Danh sách nhân vật luôn nằm trên dòng riêng, dưới cả hai cột. */ .spk-moi .spk-vip-goi > .spk-vip-nv-ds { flex: 1 1 100%; } /* THẺ 1 NHÂN VẬT XẾP LƯỚI 2×2 — để nó chỉ cao ĐÚNG HAI DÒNG. Với flex thì không xong, và lý do đáng ghi lại: cụm nút gói và cụm "Thiết lập · Copy" là hai con NGANG CẤP của thẻ, nên chúng nằm ở hai dòng flex khác nhau. Dòng flex thứ nhất cao bằng con CAO NHẤT của nó — mà đó là cột thông tin (tên + hết hạn, 2 dòng chữ), cao hơn một hàng nút. Kết quả: hàng "Thiết lập" bị đẩy xuống dưới đáy cột thông tin, để lại một khe 15px không ai muốn. Rút ngắn cụm nút còn làm khe RỘNG ra 23px — đo được đúng thế, vì thứ quyết định là bên KIA. Lưới nói được điều flex không nói được: "cột trái chiếm CẢ HAI hàng". Cột phải khi ấy có hai hàng nút xếp chồng, sát nhau, và thẻ cao bằng bên cao hơn thay vì bằng tổng. CSS Grid chạy từ Chrome 57, dưới mức Chrome 68 của máy người dùng. CHỈ ÁP CHO GÓI 1 NHÂN VẬT. Gói combo giữ flex: ở đó khối dưới là một DANH SÁCH tới 60 người, nó phải chiếm trọn bề ngang chứ không nép vào một cột. */ .spk-moi .spk-vip-goi[data-combo="0"] { display: grid; /* `minmax(0, 1fr)` chứ không `1fr` trơn: `1fr` có sàn là min-content, nên một cái tên dài sẽ đẩy cột phải ra ngoài thẻ thay vì tự cắt bằng `…`. */ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tin nut" "tin nv"; align-items: start; } .spk-moi .spk-vip-goi[data-combo="0"] > .spk-vip-goi-dau { grid-area: tin; } .spk-moi .spk-vip-goi[data-combo="0"] > .spk-vip-goi-nut { grid-area: nut; } .spk-moi .spk-vip-goi[data-combo="0"] > .spk-vip-nv-ds { grid-area: nv; } /* THẺ COMBO CŨNG XẾP LƯỚI, chỉ khác một chỗ: danh sách nhân vật chiếm CẢ HAI CỘT. Để flex thì ở khổ dọc cụm nút không đủ chỗ nằm cạnh thông tin nên nó vỡ xuống dòng riêng — và vì cột thông tin chỉ cao hai dòng chữ, cạnh nó là một mảng trống bằng đúng chiều cao cụm nút. Thẻ thành ba dòng với một khoảng hở không nói gì. Lưới thì cụm nút nằm đúng cột phải cạnh thông tin, còn danh sách nhân vật (thứ THẬT SỰ cần trọn bề ngang, có gói tới 60 người) xuống hàng dưới trải hết hai cột. */ .spk-moi .spk-vip-goi[data-combo="1"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tin nut" "nv nv"; /* `stretch` chứ không `start`: hai ô của hàng đầu — khối thông tin và cụm nút — đều mang nền của dải tiêu đề, nên chúng phải cao BẰNG NHAU thì dải mới liền một mạch. Với `start` thì ô thấp hơn dừng sớm và dải bị khuyết một góc. */ align-items: stretch; } /* CẢ CỤM ĐẦU THẺ LÀ MỘT DẢI — như đầu mục ở màn Hoạt động. Dải ôm trọn tiêu đề, dòng hết hạn, mã VIP, nút "Gia hạn" và ô tick "Chọn tất cả": đó là những thứ nói về CẢ GÓI. Thứ duy nhất nằm ngoài dải là danh sách nhân vật — phần mà cái mũi ▸ sổ ra. LÀM BẰNG NỀN CHỨ KHÔNG BẰNG MỘT Ô LƯỚI RIÊNG: dựng thêm một hàng cho tiêu đề thì đo được thẻ phình 67 → 110px và cả danh sách +18%. Tô nền hai ô sẵn có thì dải vẫn liền một mạch mà không tốn thêm một dòng nào. KHÔNG có màu rê chuột: dải này gồm hai ô lưới rời nhau, mà CSS không có cách nào nói "rê vào ô nào cũng sáng cả hai" nếu không có `:has()` — Chrome 105, người dùng có máy Chrome 68. Sáng nửa dải còn tệ hơn không sáng. */ .spk-moi .spk-vip-goi[data-combo="1"] > .spk-vip-goi-dau, .spk-moi .spk-vip-goi[data-combo="1"] > .spk-vip-goi-nut { background: var(--spk-nen-dau); } .spk-moi .spk-vip-goi[data-combo="1"] > .spk-vip-goi-dau { cursor: pointer; user-select: none; -webkit-user-select: none; } /* CỤM NÚT NEO LÊN ĐỈNH DẢI. `.spk-vip-goi-nut` xếp CHỒNG (`flex-direction: column`), nên `justify-content` của nó nói về trục DỌC — và nó đang là `flex-end`. Hồi ô lưới chỉ cao bằng nội dung thì luật ấy không làm gì; từ khi hàng đầu chuyển sang `stretch` để nền liền một mạch, ô nút cao bằng cả dải và `flex-end` đẩy hai nút xuống đáy — cạnh khối thông tin bốn dòng thì chúng trôi hẳn xuống dưới. KHÔNG đụng `align-items: flex-end` của nó: cái ấy nói về trục NGANG và đang giữ đúng việc dồn nút sang mép phải. */ .spk-moi .spk-vip-goi[data-combo="1"] > .spk-vip-goi-nut { justify-content: flex-start; } .spk-moi .spk-vip-goi[data-combo="1"] > .spk-vip-goi-nut { grid-area: nut; } .spk-moi .spk-vip-goi[data-combo="1"] > .spk-vip-nv-ds { grid-area: nv; } /* Ô TICK "Chọn tất cả" LUÔN Ở HÀNG DƯỚI nút — mọi khổ, không riêng khổ dọc. Hai thứ này khác loại: "Gia hạn" là một VIỆC để bấm, còn "Chọn tất cả" là một TRẠNG THÁI để bật. Xếp ngang hàng nhau thì mắt đọc chúng như hai lựa chọn ngang cấp. Xếp chồng cũng làm cột phải chỉ rộng bằng cái rộng nhất trong hai thứ, nên cột trái thở được — ở 412px trước đây chúng ăn hết ~190px và dòng "Hết hạn" vỡ làm hai. VỎ chiếm trọn hàng chứ không phải chính ô tick: cho `flex: 1 1 100%` thẳng vào ô tick thì cái viên bo dài ra hết cột, trông như một thanh chứ không như một ô chọn. */ .spk-moi .spk-vip-goi-tick { display: flex; justify-content: flex-end; margin-left: 0; margin-top: 4px; } /* MENU "⋯" CỦA THẺ VIP — một markup, hai bố cục. KHỔ MÁY TÍNH: các nút bày ra thành hàng ngang như thường, nút "⋯" biến mất. Vỏ menu không làm gì cả — nó chỉ là cái hộp trong suốt. KHỔ DỌC: nút "⋯" thay chỗ cả cụm, và cụm thành menu tràn neo dưới nó. Đo được lý do ở 412px: ba nút ăn hết bề ngang cột phải nên cột trái bị bó tới mức dòng "Hết hạn" vỡ làm hai, thẻ thành ba dòng thay vì hai. */ .spk-vip-menu-vo { position: relative; display: inline-flex; } .spk-vip-menu { display: flex; flex-wrap: wrap; align-items: center; } /* Khe giữa các nút trong menu — Chrome 68 không có `gap`. Lề TRÁI vì cùng lý do với khối trên: con cuối mang lề phải thì cả cụm bị đẩy vào trong 8px. KHÔNG CÓ LỀ DƯỚI. Ở dạng hàng ngang menu không vỡ dòng (khổ hẹp thì nó đã thành menu tràn xếp dọc, và ở đó có luật lề riêng), nên 4px lề dưới chẳng để làm gì — nhưng nó làm CÁI VỎ cao 32px trong khi nút bên trong 28px, và nút bị đẩy lên 2px so với ô tick đứng cạnh. Tâm của vỏ thì vẫn trùng tâm ô tick, nên số đo "tâm" nói không có gì sai — thứ lệch là cái nút NẰM TRONG vỏ. */ .spk-vip-menu > * { margin: 0 0 0 8px; } /* THẺ ĐANG MỞ MENU THÌ CHO NỘI DUNG TRÀN RA. `.spk-vip-goi` có `overflow: hidden` để bo góc cắt gọn nền các khối con — và nó cắt luôn menu tràn. Đo được: menu mở ra chỉ lộ MỘT mục, phần còn lại nằm ngoài thẻ nên bị xén, nhìn y hệt một menu chỉ có một việc. Người duyệt báo đúng hiện tượng ấy. Lớp do JS gắn lúc mở và gỡ lúc đóng: `:has()` mới hỏi được "thẻ này có menu đang mở không" mà `:has()` cần Chrome 105, còn máy người dùng chạy Chrome 68. */ .spk-moi .spk-vip-goi.spk-vip-cho-tran { overflow: visible; /* NÂNG CẢ THẺ LÊN, không chỉ nâng cái menu. Menu đã có `z-index: 20` mà vẫn bị nút của thẻ NGAY DƯỚI vẽ đè — hit-test 25 điểm bắt được `spk-nut`, `spk-tick` và cả `spk-vip-goi-dau` của thẻ sau nằm trên. Lý do: thẻ là `display: grid`, và con của grid được xếp chồng như thể đã định vị dù `position: static` — nên nút trong thẻ SAU vẽ sau menu trong thẻ TRƯỚC. `z-index` của menu chỉ so được với anh em TRONG cùng một thẻ. Muốn thắng cả thẻ sau thì thứ phải nâng là CHÍNH CÁI THẺ. Đặt cùng lúc với `overflow: visible` vì hai thứ phục vụ đúng một việc: cho menu thoát ra và nằm trên. */ position: relative; z-index: 30; } /* Gói đã hết hạn: chữ nghiêng và nhạt, không cần thêm nhãn nào. */ .spk-moi .spk-vip-hethan { color: var(--spk-chu-mo); font-style: italic; } /* RIÊNG NÚT thì không nghiêng. Chữ nghiêng là để nói "thông tin này đã cũ"; nút thì không cũ — chúng vẫn bấm được và vẫn làm đúng việc của chúng. Nghiêng cả nút chỉ làm nhãn nút khó đọc. */ .spk-moi .spk-vip-hethan button, .spk-moi .spk-vip-hethan .spk-tick { font-style: normal; } .spk-moi .spk-vip-goi-dau { display: flex; align-items: flex-start; padding: 12px 14px; } /* 2px chứ không 10px: mũi nay là hình trần, không còn viên bao để tự tách — mà cái viên ấy chính là thứ trước đây cần một khoảng cách để khỏi chạm vào chữ. Hình trần thì đứng gần được, và đứng gần mới đọc ra là mũi THUỘC VỀ tiêu đề chứ không phải một thứ rời đặt cạnh nó. */ /* TIÊU ĐỀ THẺ COMBO LÀ MỘT ĐÍCH BẤM (tay bấm ở license.js: `ganTieuDeVip`). `user-select: none` vì đây là thứ bấm hai lần liên tiếp là chuyện thường — bấm mở rồi bấm đóng — mà bấm đúp thì chữ bôi xanh lè, trông như vừa hỏng cái gì. Cùng lý do với `.spk-nhom-dau`. CHỈ `[data-combo="1"]`: tiêu đề thẻ lẻ là TÊN NHÂN VẬT, phải bôi đen chép được. */ .spk-moi .spk-vip-goi[data-combo="1"] .spk-vip-goi-ten { cursor: pointer; -webkit-user-select: none; user-select: none; } .spk-moi .spk-vip-goi-dau > *:not(:last-child) { margin-right: 2px; } /* Nút mở/đóng danh sách nhân vật. Giữ icon (▸/▾/ⓘ) vì đây là dấu hiệu DUY NHẤT cho biết thẻ bấm được; các nút khác đã bỏ icon vì đã có chữ. */ /* NÚT SỔ CỦA THẺ COMBO: MŨI TRẦN, KHÔNG VIÊN BAO. Cùng một hình với mũi ở đầu mục Hoạt động và ở Tiện ích — ba chỗ đều làm một việc, sổ một khối ra xem đầy đủ, nên chúng phải trông như một. BỎ KHUNG: cái viên 30px bo góc đọc ra là một NÚT ngang hàng với "Gia hạn" hay "Thiết lập", trong khi nó chỉ là dấu hiệu mở/đóng. Mũi trần nói đúng vai của nó. Vùng chạm không mất: nút vẫn rộng 24px và cao bằng dòng, chỉ là không còn viền. */ .spk-moi .spk-vip-mo { flex: none; display: inline-flex; align-items: center; /* MŨI SÁT MÉP TRÁI, và cả nút hẹp lại còn 18px. Hồi còn cái viên bao 30px thì khoảng trắng hai bên mũi là ĐỆM của nút, mắt đọc ra là một khối. Bỏ viên đi thì khoảng ấy thành một quãng trống vô cớ giữa mũi và tên gói — mũi trông như rơi ra khỏi tiêu đề. NÚT ÔM SÁT MŨI (`width: auto`), không giữ bề rộng 18px: mũi chỉ 5px nên 13px còn lại là khoảng trống NẰM TRONG nút, và lề 2px bên ngoài không thu ngắn được nó. Vùng chạm bù sang bên TRÁI bằng đệm 6px cộng lề âm 6px — chỗ ấy vốn là khoảng trống của thẻ, nên ngón tay được thêm 6px mà mắt không thấy gì dịch đi. */ justify-content: flex-start; width: auto; /* Đệm PHẢI bằng 0: mọi pixel ở đây nằm giữa mũi và chữ, và nó cộng thẳng vào cái khe mà lề 2px bên ngoài đang cố giữ. */ padding: 0 0 0 6px; margin-left: -6px; min-height: 24px; background: none; border: 0; /* ĐẬM NHƯ MŨI CỦA ĐẦU MỤC. Mũi vẽ bằng `currentColor`, mà `--spk-chu-mo` là màu xám mờ — trên dải nền tím nhạt của tiêu đề thì nó chìm tới mức nhìn như không có mũi. Cùng một sửa đã làm cho nút sổ ở Tiện ích. */ color: var(--spk-chu); font: inherit; font-style: normal; line-height: 1; cursor: pointer; } .spk-moi .spk-vip-mo:hover { color: var(--spk-chinh-dam); } /* MŨI VẼ BẰNG VIỀN, không phải ký tự — cùng cách `.spk-nhom-dau::before` làm, nên ba mũi trong app bằng nhau tuyệt đối về cỡ và màu, không phụ thuộc font nào đang có. Cái `` do JS sinh (xem datIcon) thành cái vỏ rỗng mang hình; ký tự bên trong bị `font-size: 0` nuốt đi. */ .spk-moi .spk-vip-mo .spk-nut-bt { display: inline-block; width: 0; height: 0; font-size: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; } /* Mở ra thì mũi quay xuống — đúng 90° như mọi mũi sổ khác. */ .spk-moi .spk-vip-goi.spk-vip-mo-ra .spk-vip-mo .spk-nut-bt { transform: rotate(90deg); } .spk-moi .spk-vip-goi-tin { flex: 1; min-width: 0; } /* TIÊU ĐỀ THẺ VIP CÙNG CỠ VỚI ĐẦU MỤC — 15px, không phải 12px. Nó làm đúng việc của một đầu mục: đứng đầu một khối, mang mũi sổ, bấm vào thì khối mở ra. Nhưng nó đang là chữ NHỎ NHẤT trong thẻ — nhỏ hơn cả dòng "Hết hạn" bên dưới nó, nên mắt đọc nó như một nhãn phụ chứ không như tiêu đề. CHỈ CỠ CHỮ, chưa lấy dải nền của đầu mục. Đo ở 412px, 19 thẻ combo: thẻ combo cả danh sách hiện tại 67px 4.891 cỡ chữ 15px 71px 4.992 (+2%) ← chọn + dải nền tràn ngang 110px 5.748 (+18%) Dải nền đòi tiêu đề phải chiếm trọn một hàng lưới riêng, đẩy cụm nút xuống — thẻ phình 64%. Danh sách này vừa được nén 52% ở đợt trước nên cái giá ấy phải do người duyệt quyết, không phải tự lấy. */ .spk-moi .spk-vip-goi-ten { font-size: 15px; font-weight: 600; color: var(--spk-chu); } .spk-moi .spk-vip-hethan .spk-vip-goi-ten { color: var(--spk-chu-mo); } /* DÒNG "ĐÃ HẾT HẠN" LÀ THỨ DUY NHẤT TRONG THẺ ĐƯỢC MÀU ĐỎ. Cả thẻ hết hạn đã mờ đi và nghiêng — đủ để nó lùi lại phía sau khi lướt qua. Nhưng khi mắt đã dừng ở một thẻ thì phải có đúng MỘT chỗ nói ra vì sao nó mờ, và đỏ là quy ước ai cũng đọc được mà không cần chú giải. GIỮ CHỮ NGHIÊNG của thẻ hết hạn — chỉ đổi màu và độ đậm. Nghiêng là dấu hiệu chung của cả thẻ; dựng thẳng riêng một dòng thì nó tách khỏi thẻ chứ không nhấn thêm được gì, mà màu đỏ đã đủ để mắt dừng lại. */ .spk-moi .spk-vip-hethan .spk-vip-qua-han { color: var(--spk-do); font-weight: 600; } .spk-moi .spk-vip-goi-han, .spk-moi .spk-vip-goi-ma, .spk-moi .spk-vip-goi-slot { margin-top: 2px; font-size: 13px; } /* CÁC DÒNG THÔNG TIN THẲNG VỚI MŨI, không thẳng với chữ của tiêu đề. Thẻ combo có nút ▸ đứng trước khối thông tin, nên mọi dòng trong khối bắt đầu ở sau cái mũi: đo được mũi ở x=25 còn chữ ở x=32. Mép trái của thẻ thành hai bậc, mà bậc ngoài chỉ có đúng một mũi tên 5px đứng. 7px = 5px bề rộng mũi + 2px khe tới tiêu đề — dựng lại từ chính hai con số vẽ ra cái khe ấy, nên đổi hình mũi thì công thức vẫn đúng. (Không trừ 6px đệm trái của nút: đó là vùng chạm nằm NGOÀI phần vẽ, kéo theo cả nó thì các dòng lại thò ra ngoài mũi.) CHỈ THẺ COMBO: thẻ một nhân vật không dựng nút ▸ nào nên khối thông tin của nó vốn đã bắt đầu ở mép trái. */ .spk-moi .spk-vip-goi[data-combo="1"] .spk-vip-goi-han, .spk-moi .spk-vip-goi[data-combo="1"] .spk-vip-goi-ma, .spk-moi .spk-vip-goi[data-combo="1"] .spk-vip-goi-slot { margin-left: calc(0px - 5px - 2px); } /* Số slot còn trống / đã dùng hết là thứ người mua tìm trước tiên — đỏ và đậm. Giữ nguyên màu ấy cả ở gói hết hạn: còn bao nhiêu slot vẫn là con số người dùng cần đọc khi quyết định gia hạn. */ .spk-moi .spk-vip-goi-slot { color: var(--spk-do); font-weight: 600; } /* Còn lại đúng một "Hướng dẫn" ở đây. Luật này có `padding: 0` và gạch chân — đúng cho một liên kết nằm trong dòng chữ, nhưng SAI cho nút, nên nút Copy phải đứng ngoài luật này (xem luật lề ngay dưới). */ /* NÚT TRỢ GIÚP "?" trên dòng Mã VIP — tròn, cỡ bằng mọi điều khiển khác (24px). Vẫn là thẻ vì nó mở một trang web; chỉ mặc bộ đồ của nút để đứng cạnh nút Copy cho gọn hàng. Ba chữ "Hướng dẫn" thu về một ký tự, đủ chỗ cho mã VIP thở. */ .spk-moi .spk-vip-tro-giup { display: inline-flex; align-items: center; justify-content: center; flex: none; /* Cùng bộ số với `.spk-nut-nho` — nút "Copy" đứng cạnh dùng đúng luật đó, và hai nút cạnh nhau lệch 4px chiều cao thì mắt thấy ngay. */ min-width: 24px; /* 28px, không phải 24: nút "Copy" cạnh nó ăn luật `.spk-vip-goi .spk-nut` nên cao 28px, mà nút này không phải `.spk-nut` nên phải tự khai. */ min-height: 28px; margin-left: 8px; padding: 2px 9px; font-size: 14px; font-weight: 600; line-height: 1; /* Bo góc 6px và viền tím — cùng bộ đồ với nút "Copy" đứng ngay cạnh. Vòng tròn tách nó ra thành một loại riêng, mà nó có làm việc gì khác nút đâu. */ color: var(--spk-chinh); background: var(--spk-nen); border: 1px solid var(--spk-chinh); border-radius: 6px; text-decoration: none; } .spk-moi .spk-vip-tro-giup:hover { background: var(--spk-chinh-nhat); border-color: var(--spk-chinh); } /* Nút Copy chỉ cần cách chữ ra, không lấy gì khác từ luật liên kết ở trên. */ .spk-moi .spk-vip-goi-ma .spk-nut-nho { margin-left: 8px; } .spk-moi .spk-vip-goi-nut { /* XẾP CHỒNG (column), không phải xếp ngang rồi cho vỡ dòng. Cột phải của lưới rộng `auto`, tức bằng max-content của cụm này. Khi cụm là flex NGANG có một con mang `flex-basis: 100%` (cái vỏ ô tick, để ép nó xuống dòng), max-content ấy phình lên 184px trong khi viên tick chỉ rộng 105px — dư gần 80px trống nằm giữa khối thông tin và ô tick, và đó là khoảng hở người duyệt thấy. Xếp chồng thì mỗi con giữ bề rộng nội dung của nó, cột phải rộng bằng con rộng nhất, và không cần mẹo `flex-basis: 100%` nào để ép xuống dòng nữa. */ display: flex; flex-direction: column; align-items: flex-end; /* CỘT PHẢI, VÀ VẪN DỒN PHẢI CẢ KHI ĐÃ VỠ DÒNG. `flex: 1 1 auto` chứ không `0 1 auto`: ở khổ hẹp mà thẻ có ba nút (Gia hạn / Chuyển VIP / Nâng SVIP) thì cụm này không đủ chỗ nằm cạnh thông tin và tự xuống dòng — lúc ấy với `flex: 0` nó co về bề rộng nội dung và dạt sang TRÁI, lệch hẳn với hàng "Thiết lập · Copy" bên phải ngay dưới nó. Cho nó nở thì cả hai trường hợp đều đúng: nằm cùng hàng thì `justify-content` đẩy nút về mép phải; vỡ dòng thì nó chiếm trọn hàng và vẫn dồn phải. Không có cách nào hỏi CSS "mày vừa vỡ dòng chưa", nên phải chọn luật đúng cho cả hai. */ flex: 1 1 auto; justify-content: flex-end; margin: 0; /* Đệm trên bằng cột trái để hai cột thẳng hàng nhau ở mép trên; đệm dưới BẰNG 0 để hàng "Thiết lập · Copy" nằm SÁT ngay dưới hàng nút này. Đo được khe giữa hai hàng là 15px — đủ để mắt đọc ra chúng là hai khối rời nhau, trong khi chúng là hai nửa của cùng một thẻ. Bỏ đệm dưới và hạ lề con xuống 4px thì khe còn 4px: vẫn tách được hai hàng mà thẻ đọc ra là MỘT. */ padding: 12px 14px 0; } /* LỀ TRÁI CHO CON SAU, KHÔNG PHẢI LỀ PHẢI CHO CON TRƯỚC. Nút Nâng SVIP / Thêm Slot bị ẩn tuỳ gói, nên `:not(:last-child)` không dùng được — con cuối NHÌN THẤY ĐƯỢC đổi theo từng gói. Nhưng để lề phải cho MỌI con thì con cuối cũng mang 8px thừa, và cụm bị đẩy vào trong: đo được mép phải nút hàng trên cách viền 19px trong khi hàng "Thiết lập · Copy" chỉ cách 11px. Lệch đúng 8px ấy. Đổi sang lề TRÁI thì phần thừa rơi về bên trái con đầu — mà cụm dồn phải nên chỗ ấy là khoảng trống, không ai thấy. Cùng một cách `.spk-vip-nv-nut` đã dùng. */ .spk-moi .spk-vip-goi-nut > * { margin: 0 0 4px 8px; } /* ---------- Nhân vật trong gói ---------- */ .spk-moi .spk-vip-nv-ds { border-top: 1px solid var(--spk-vien-nhat); } .spk-moi .spk-vip-nv { display: flex; flex-wrap: wrap; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--spk-vien-nhat); } /* Ở khổ rộng hàng này KHÔNG xuống dòng, nên không đặt lề dọc — đặt vào là hàng cao thêm 8px. Lề dọc nằm trong media query khổ hẹp bên dưới, đúng chỗ .spk-vip-nv-tin nở ra 100% và đẩy cụm nút xuống dòng. */ /* Lề đặt cho con SAU chứ không con TRƯỚC: .spk-vip-nv-tin co giãn (flex 1 1 200px), mà lề phải đặt trên nó thì ăn thẳng vào chiều rộng của chính nó — đo được ô thông tin hụt đúng 8px. Hàng này có đúng hai con và không con nào bị ẩn. */ .spk-moi .spk-vip-nv > *:not(:first-child) { margin-left: 8px; } .spk-moi .spk-vip-nv:last-child { border-bottom: 0; } /* Sọc xen kẽ để mắt bám được dòng khi gói có tới 60 nhân vật. */ .spk-moi .spk-vip-nv-le { background: var(--spk-nen-mo); } .spk-moi .spk-vip-nv-tin { flex: 1 1 200px; min-width: 0; font-size: 13px; } .spk-moi .spk-vip-nv-nhan { color: var(--spk-chu-mo); } .spk-moi .spk-vip-nv-ten { font-weight: 600; } .spk-moi .spk-vip-nv-nut { display: flex; flex-wrap: wrap; align-items: center; } /* Lề TRÁI cho con SAU, không phải lề phải cho con TRƯỚC. Con CUỐI của cụm này là nhắc và nút "Sao chép" — cả hai đều bị .hide(), nên :not(:last-child) vẫn cho con nhìn thấy được cuối cùng một lề thừa và cụm nút phình ra 8px. Con ĐẦU thì không bao giờ bị ẩn: nút "Chuyển VIP" lúc hết hạn là KHÔNG ĐƯỢC DỰNG chứ không phải bị giấu, nên con đầu luôn là một nút đang hiện. */ .spk-moi .spk-vip-nv-nut > *:not(:first-child) { margin-left: 8px; } .spk-moi .spk-vip-nv-nhac { color: var(--spk-do); font-size: 12px; } /* NÚT TRONG THẺ VIP GỌN LẠI: 28px thay vì 44px. Màn này có 116 nút — nhiều nhất trong cả app — và chúng chiếm 5.104px, tức 42% chiều cao danh sách. Mỗi nút bớt 16px là bớt 1.856px. 28px chứ KHÔNG 24px như ô nhập: 24px là con số cho điều khiển đứng cạnh nhau trong một hàng dày đặc, còn đây là nút HÀNH ĐỘNG (Gia hạn, Chuyển VIP) — bấm trượt vào nút gia hạn thì mở nhầm một luồng mua bán. Bốn pixel ấy là khoảng cách giữa "gọn" và "khó bấm". Phải hạ CẢ ĐỆM, không chỉ `min-height`: `.spk-nut` có `padding: 7px 16px`, nên chữ 21px cộng đệm 14 cộng viền 2 đã là 37px và sàn không có tác dụng gì. `line-height: 1` vì nút chỉ có một dòng chữ. */ .spk-moi .spk-vip-goi .spk-nut { /* CANH GIỮA CHỮ THEO CHIỀU DỌC — bắt buộc khi đã hạ chiều cao. `
thì một hàng rỗng không có
hầu như không dựng được chiều cao, nên KHÔNG áp cho bảng — ở đó dòng bay + tô sáng tay cầm đã đủ. */ .spk-moi li.ui-sortable-placeholder { visibility: visible !important; background: #eef3fe; outline: 1px dashed var(--spk-chinh); outline-offset: -2px; } .spk-moi .spk-ds-tick { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--spk-chinh); cursor: pointer; } .spk-moi .spk-ds-tick:focus-visible { outline: 2px solid var(--spk-chinh); outline-offset: 2px; } .spk-moi .spk-ds-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* NÚT BIỂU TƯỢNG TRONG HÀNG DANH SÁCH — nền chung của hai việc: xoá (✕) và thêm (+). Trước đây chỉ có MỘT lớp, tên .spk-ds-xoa, mà nút "+" (mở ô nhập khung giờ) cũng đeo nó — một lớp tên "xoá" đi vẽ nút thêm. Vì thế phải tách hai kiểu bằng `[aria-label^="Xóa"]`, tức là màu nút phụ thuộc vào CHỮ TIẾNG VIỆT trong nhãn: sửa nhãn thành "Xoá" (dấu đặt chỗ khác) là nút mất màu đỏ mà không ai hay. Nay việc nào lớp ấy: .spk-ds-nut lo hình dáng, .spk-ds-xoa lo màu đỏ, .spk-ds-them lo nút thêm. */ /* NÚT XOÁ / THÊM CỦA HÀNG DANH SÁCH: VUÔNG 24px, bằng công tắc. Trước đây 30px ở máy tính và 22px ở khổ điện thoại — hai con số, không cái nào liên quan tới thứ gì khác trên màn hình. Nay lấy đúng chiều cao công tắc như ô nhập và ô chọn, nên cả bốn loại điều khiển trong một hàng cùng một cỡ. Ở khổ điện thoại đây là nới ra (22 → 24), không phải bóp lại: cỡ chạm tốt hơn một chút so với trước. */ .spk-moi .spk-ds-nut { font: inherit; font-size: 15px; line-height: 1; color: var(--spk-chu-mo); background: transparent; border: 1px solid var(--spk-vien); border-radius: 6px; width: 24px; height: 24px; padding: 0; cursor: pointer; } /* NÚT XOÁ ĐỎ SẴN, không phải chỉ đỏ khi rê chuột — trên điện thoại không có "rê chuột" nên trước đây nút xoá chưa bao giờ đỏ. Đỏ để đọc ra ngay là thao tác không lùi lại được. */ .spk-moi .spk-ds-xoa { color: var(--spk-do); border-color: var(--spk-vien); } .spk-moi .spk-ds-xoa:hover { color: var(--spk-do); border-color: var(--spk-do); background: rgba(209, 36, 47, .07); } /* Nút THÊM rê chuột ra màu xanh, không mượn màu đỏ của nút xoá. Trước đây luật hover viết cho cả lớp .spk-ds-xoa nên nút "+" cũng đỏ lên khi rê chuột. */ .spk-moi .spk-ds-them:hover { color: var(--spk-chinh); border-color: var(--spk-chinh); background: var(--spk-chinh-nhat); } .spk-moi .spk-ds-nut:focus-visible { outline: 2px solid var(--spk-chinh); outline-offset: 2px; } /* NHÁY VIỀN quanh mục vừa nhảy tới từ cây điều hướng — ba nhịp, 3 giây, rồi tắt. setting.js gỡ lớp này sau 3 giây (xem nhayMuc). Vẽ bằng box-shadow INSET, không bằng border hay outline: · border — đổi kích thước, đẩy nội dung và làm lệch chính chỗ vừa cuộn tới · outline — Chrome 68 chưa bo tròn outline theo border-radius (phải Chrome 94), nên góc vuông chồng lên hộp bo tròn · box-shadow NGOÀI — bị cắt: .spk-nhom có `overflow: hidden`, mà đầu mục của Tiện ích là một HÀNG nằm trong đó · box-shadow inset — không bị cắt, nhưng NỀN CỦA CON vẽ đè lên nó: đo được, viền quanh một
mất hẳn đoạn chạy qua dòng tiêu đề, vì .spk-nhom-dau có nền riêng · lớp phủ ::after — là phần tử ĐƯỢC ĐỊNH VỊ nên vẽ trên nền của mọi con nằm trong luồng; viền liền mạch quanh cả tiêu đề lẫn thân, không đổi bố cục, theo đúng bo tròn (border-radius: inherit) Màu là --spk-chinh (#6b3fa0) viết thành rgba: biến CSS không lồng được vào trong rgba() nếu chỉ giữ mã màu dạng hex. Ba nhịp trong 3 giây là 1 lần/giây — dưới xa ngưỡng ba lần mỗi giây mà hướng dẫn về nội dung nhấp nháy đặt ra. */ @keyframes spk-nhay { 0% { border-color: rgba(107, 63, 160, 0); } 35% { border-color: rgba(107, 63, 160, 0.6); } 100% { border-color: rgba(107, 63, 160, 0); } } .spk-moi .spk-nhay { position: relative; } .spk-moi .spk-nhay::after { content: ""; position: absolute; /* Bốn khai báo dài thay `inset: 0` — inset cần Chrome 87. */ top: 0; right: 0; bottom: 0; left: 0; border: 3px solid rgba(107, 63, 160, 0); border-radius: inherit; pointer-events: none; animation: spk-nhay 1s ease-in-out 3; } /* VIỀN QUANH HÀNG ĐANG ĐƯỢC THAO TÁC — cùng dáng với viền nhảy, nhưng ĐỨNG YÊN. Hai việc khác nhau nên hai cách vẽ khác nhau, dù dùng chung một hình: · nhảy tới — một SỰ KIỆN, xảy ra rồi thôi, nên nháy ba nhịp rồi tắt; · đang sửa — một TRẠNG THÁI, kéo dài bao lâu tuỳ người dùng, nên giữ nguyên cho tới khi tiêu điểm rời đi. Nháy ở đây thì thành thứ nhấp nháy suốt lúc người ta đang gõ. `:focus-within` chứ không `:focus`: thứ nhận tiêu điểm là ô nhập / công tắc / nút BÊN TRONG hàng, còn thứ cần đánh dấu là CẢ HÀNG. Chạy từ Chrome 60, dưới mức Chrome 68 của máy người dùng. Dùng lại y hệt cách vẽ của `.spk-nhay`: lớp phủ `::after` chứ không `border` (đổi kích thước, đẩy nội dung) và không `outline` (Chrome 68 chưa bo tròn outline theo `border-radius`). Cả bốn lý do đã chép ở khối ngay trên. Màu lấy đúng ĐỈNH của hoạt ảnh nhảy — `rgba(107, 63, 160, .6)` ở nhịp 35% — nên hai dấu hiệu trông như một họ, không phải hai thứ hao hao. CHỈ TRONG #settingContent. Nó sinh ra cho màn Thiết lập, nơi có hàng trăm hàng giống hệt nhau xếp sát nhau và người dùng cần biết mình đang gõ vào hàng nào. Các màn Tài khoản chỉ có dăm trường, mỗi trường một nhãn riêng — ở đó cái viền không thêm thông tin gì mà lại nhấp nháy lên mỗi lần chạm vào một ô. Bộ chọn cũ `.spk-moi .spk-hang` bắt luôn cả Mua VIP, Chuyển Xu, Quản lý VIP vì các màn ấy cũng dùng chung lớp `.spk-hang` — lọt lưới, không phải một lựa chọn. */ #settingContent .spk-hang:focus-within::after { content: ""; position: absolute; /* Bốn khai báo dài thay `inset: 0` — inset cần Chrome 87. */ top: 0; right: 0; bottom: 0; left: 0; /* MỎNG HƠN VIỀN NHẢY: 2px thay vì 3px. Viền nhảy chỉ sống 3 giây và phải cướp được sự chú ý, nên nó dày. Viền này ở lại suốt lúc người ta đang gõ, mà hàng chỉ cao 28px — 3px chiếm hơn một phần mười chiều cao hàng và bắt đầu trông như một cái khung chứ không như một dấu hiệu. */ border: 2px solid rgba(107, 63, 160, .6); border-radius: inherit; pointer-events: none; } /* KHÔNG tắt hoạt ảnh này theo `prefers-reduced-motion`. Bản đầu có tắt, và hậu quả đo được: trên Edge của chính máy đặt hàng tính năng này, viền hiện ra nhưng KHÔNG nháy. Không phải Edge thiếu gì — hỏi thẳng Windows bằng SystemParametersInfo(SPI_GETCLIENTAREAANIMATION) thì nó trả về False, tức hệ điều hành đang báo "ít chuyển động", và Chromium dịch thẳng cờ ấy thành prefers-reduced-motion: reduce. Mà thứ đang chạy ở đây KHÔNG PHẢI chuyển động: không gì dịch chuyển, không gì phồng to hay xoay — chỉ có màu viền đậm lên rồi nhạt đi. Thứ mà `prefers-reduced-motion` sinh ra để chặn là chuyển động gây chóng mặt. Còn ngưỡng an toàn về nhấp nháy là ba lần mỗi giây; ở đây là một lần mỗi giây. */ /* ---------- Ô TÌM THIẾT LẬP ---------- */ /* Nằm ở VỎ, ngay dưới thanh trên cùng, chỉ hiện ở màn Thiết lập (app.js xét). Không nằm trong hộp cuộn nên không cần `position: sticky`, và không đè lên mục vừa nhảy tới. */ /* Đệm dọc 5px thay vì 10px — xem khối "BA DẢI CỐ ĐỊNH" ở .spk-topbar. Ô nhập bên trong giữ nguyên `min-height: 36px`, nên vùng chạm không đổi. */ .spk-tim-vo { position: relative; flex: none; padding: 5px 16px; background: var(--spk-nen); border-bottom: 1px solid var(--spk-vien); } /* Rộng hết phần chứa nó ở CẢ HAI chỗ đặt: trong cây thì bằng đúng bề ngang các hàng của cây (đo được: cùng mép 10→251); ở khu nội dung thì bằng bề ngang khu. Trước đó có trần 480px, nên ở khổ rộng ô tìm nằm lọt thỏm giữa một dải trống. */ .spk-tim { display: block; width: 100%; min-height: 36px; padding: 7px 12px; /* Nền xám như mọi ô nhập khác: dải chứa nó cũng trắng, nên ô trắng trên nền trắng là một cái hộp vô hình. Xem khối "NỀN VÀ VIỀN CỦA Ô NHẬP" ở bảng màu. */ background: var(--spk-nen-o); border: 1px solid var(--spk-vien-o); border-radius: var(--spk-bk); color: var(--spk-chu); font: inherit; font-size: 14px; } .spk-tim:focus { border-color: var(--spk-chinh); outline: 2px solid var(--spk-chinh); outline-offset: -1px; background: var(--spk-nen); } /* Danh sách gợi ý thả xuống. `display: none` mặc định, .spk-hien mới bày ra — cùng lối bật/tắt với các khối khác trong app, không dùng style inline. Cao tối đa 50vh chứ không một con số px: màn điện thoại nằm ngang chỉ cao vài trăm px, danh sách cố định 340px sẽ tràn khỏi màn. */ .spk-tim-goi-y { display: none; position: absolute; z-index: 20; top: 48px; /* Neo cả hai mép thay vì đặt bề ngang: danh sách luôn rộng bằng ô nhập. */ left: 16px; right: 16px; max-height: 50vh; margin: 0; padding: 4px; overflow-y: auto; list-style: none; background: var(--spk-nen); border: 1px solid var(--spk-vien); border-radius: var(--spk-bk); box-shadow: 0 8px 24px rgba(31, 35, 40, 0.16); } .spk-tim-goi-y.spk-hien { display: block; } .spk-tim-muc { display: block; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .spk-tim-muc:hover, .spk-tim-muc.spk-dang { background: var(--spk-chinh-nhat); } .spk-tim-ten { display: block; font-size: 13.5px; color: var(--spk-chu); } /* Đường dẫn là thứ phân biệt 232 mục trùng tên nhau — không được cắt bỏ. */ .spk-tim-duong { display: block; margin-top: 1px; font-size: 12px; color: var(--spk-chu-mo); } /* Ô TÌM KHI NẰM TRÊN ĐẦU CÂY (khổ rộng, cây luôn hiện). nav.js chuyển phần tử vào #spkSideTren và đeo lớp này — xem datChoOTim. Bỏ nền và đường kẻ: trong cây nó không còn là một dải riêng nữa. Lề dưới bằng margin chứ không dựa vào `gap` của .spk-side — gap của flexbox cần Chrome 84. Danh sách gợi ý thu về đúng bề rộng cột: .spk-side có `overflow-y: auto`, mà hộp cuộn thì cắt cả bề ngang — một danh sách rộng 480px trong cột 262px sẽ bị cắt cụt. */ .spk-side-tren { flex: none; } .spk-tim-vo-cay { padding: 0; margin-bottom: 8px; background: transparent; border-bottom: 0; } .spk-tim-vo-cay .spk-tim-goi-y { top: 42px; left: 0; right: 0; } /* ---------- Bảng vật phẩm ---------- */ /* Bảy bảng vật phẩm dùng chung bộ luật này. Tên cũ là spk-bang-the-* — nói sai việc, vì nó không riêng của Đấu giá; đổi sang spk-bang-the-* cho khớp việc nó làm: biến thành thẻ ở khổ hẹp. Bốn lớp chết đã bỏ từ Phase 1: -hidden, -input, -control, -disable-row (không nơi nào sinh ra chúng). Mỗi thành một thẻ — nhờ vậy bảng 7 cột vẫn đọc được trên điện thoại. */ .spk-moi .spk-bang-khoi { padding: 12px 14px; border-bottom: 1px solid var(--spk-vien-nhat); } .spk-moi .spk-nhom-than > .spk-bang-khoi:last-child { border-bottom: 0; } .spk-moi .spk-bang-nhan { margin: 0; font-weight: 600; } .spk-moi .spk-bang-nhan + .spk-goiy { margin-top: 2px; } /* Bảng nhiều cột hẹp hơn màn thì cuộn ngang TRONG khung, không đẩy cả trang. */ .spk-moi .spk-bang-cuon { margin-top: 8px; overflow-x: auto; border: 1px solid var(--spk-vien); border-radius: 6px; } .spk-moi .spk-bang-the { width: 100%; border-collapse: collapse; } /* Ô BẢNG ĐƯỢC XUỐNG DÒNG. `nowrap` bắt mỗi ô rộng bằng cả chuỗi dài nhất trong nó, nên cột tên vật phẩm phình tới 456px và cả bảng ra 861px — rộng hơn khu nội dung, cột cuối (nút Xoá) bị đẩy ra ngoài và phải cuộn ngang mới thấy. Đo ở app PC 890px: 5 trên 7 bảng tràn, chỉ 6 trên 58 nút Xoá nằm trong tầm nhìn. Cho xuống dòng thì ở 890px còn 1 bảng tràn và 57/58 nút thấy được; hàng cao thêm 16% — đắt hơn nhiều nếu phải cuộn ngang để bấm Xoá. Cột tên của 3 bảng kéo được vốn đã `white-space: normal` (xem .spk-bang-the-keo); luật này chỉ nới cho 4 bảng còn lại theo. */ .spk-moi .spk-bang-the td { padding: 7px 10px; vertical-align: middle; white-space: normal; word-break: break-word; } .spk-moi .spk-bang-the-dau td { position: sticky; top: 0; background: var(--spk-nen-mo); border-bottom: 1px solid var(--spk-vien); color: var(--spk-chu-mo); font-size: 12.5px; font-weight: 600; white-space: normal; } .spk-moi .spk-bang-the-chan td, .spk-moi .spk-bang-the-le td { border-top: 1px solid var(--spk-vien-nhat); } .spk-moi .spk-bang-the-chan { background: var(--spk-nen-mo); } /* Hàng lẻ phải nêu nền RÕ RÀNG chứ không để trong suốt: ô cuối ghim ở luật dưới lấy `background: inherit`, mà kế thừa từ một hàng trong suốt thì nội dung trượt qua bên dưới vẫn nhìn thấy xuyên qua nút Xoá. */ .spk-moi .spk-bang-the-le { background: var(--spk-nen); } /* ────────── GHIM CỘT CUỐI (nút Xoá) VÀO MÉP PHẢI Cho ô xuống dòng đã gỡ phần lớn tràn, nhưng bảng rộng nhất vẫn quá khổ ở cửa sổ app PC hẹp — mà bảng nào cũng có nút Xoá ở cột cuối, tức thao tác dễ mất nhất lại nằm đúng chỗ bị đẩy ra ngoài trước tiên. Ghim cột ấy thì dù bảng còn cuộn ngang, nút Xoá vẫn đứng nguyên ở mép phải: đo được 58/58 nút thấy được ở 700/840/890/1000px, thay vì 0/6/6/21. `position: sticky` chạy từ Chrome 56 nên máy người dùng (Chrome 68) có. Hàng tiêu đề trong chính bảng này đã dùng sticky theo trục dọc từ trước — ở đây là trục ngang, và ô cuối của hàng tiêu đề ghim CẢ HAI trục cùng lúc. CHỈ Ở KHỔ BẢNG. Từ 640px trở xuống bảng biến thành thẻ và ô cuối là `position: absolute` — đè lên nhau thì nút Xoá rơi khỏi góc thẻ. */ @media only screen and (min-width: 641px) { .spk-moi .spk-bang-the tbody td:last-child, .spk-moi .spk-bang-the .spk-bang-the-dau td:last-child { position: sticky; right: 0; background: inherit; } /* Ô cuối của hàng tiêu đề: nền riêng của nó (nen-mo) chứ không kế thừa hàng. */ .spk-moi .spk-bang-the .spk-bang-the-dau td:last-child { background: var(--spk-nen-mo); } } /* Nhãn cột nhúng trong ô: chỉ dùng ở khổ điện thoại. */ .spk-moi .spk-bang-the-nhan { display: none; } /* Nút sổ/thu chỉ có nghĩa ở khổ THẺ. Ở khổ bảng mọi cột đã bày sẵn, thêm nút là thêm một cột rỗng nghĩa. */ .spk-moi .spk-the-nut-mo { display: none; } /* MŨI SỔ CỦA THẺ VẬT PHẨM — vẽ bằng viền như ba chỗ kia, và trạng thái đọc từ `aria-expanded` thay vì từ ký tự do JS đặt. Khai ở đây, ngoài media query, để hình của nút không phụ thuộc khổ màn; còn việc nút CÓ HIỆN hay không thì vẫn do khổ quyết định (chỉ khổ thẻ mới cần nó). */ .spk-moi .spk-the-nut-mo::before { content: ""; display: inline-block; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; } .spk-moi .spk-the-nut-mo[aria-expanded="true"]::before { transform: rotate(90deg); } .spk-moi .spk-bang-the-noidung { display: inline-flex; align-items: center; } .spk-moi .spk-bang-the-tick { width: 17px; height: 17px; margin: 0; accent-color: var(--spk-chinh); cursor: pointer; } /* Ô nhập trong thẻ vật phẩm là LỚP RIÊNG, không ăn luật nền — nên chiều cao phải khai lại ở đây, cùng một con số (24px, bằng công tắc) và cùng lý do line-height 1.4. Bỏ sót chỗ này thì ô ra 33px giữa một màn hình toàn ô 24px. */ /* Ô NHẬP TRONG THẺ VẬT PHẨM CŨNG NỀN XÁM. Đợt trước đổi nền ô nhập và combobox từ trắng sang `--spk-nen-o` vì có người dùng báo "giao diện toàn màu trắng, khó phân biệt các control": ô trắng trên nền trắng thì thứ duy nhất tách chúng là một đường viền tím nhạt gần như trắng, và trên màn hình chói hoặc độ sáng thấp thì viền ấy biến mất. Các ô trong thẻ vật phẩm bị bỏ sót vì chúng mang lớp riêng (`.spk-bang-the-nhap`) chứ không phải `.spk-nhap`. Cùng một bệnh, cùng một thuốc. */ .spk-moi .spk-bang-the-nhap { font: inherit; line-height: 1.4; color: inherit; width: 84px; padding: 1px 8px; min-height: 24px; background: var(--spk-nen-o); border: 1px solid var(--spk-vien-o); border-radius: 6px; } /* ĐANG GÕ THÌ NỔI LÊN: ô nghỉ LÕM (nền xám), ô đang gõ NỔI (nền trắng). Trước đây hai trạng thái chỉ khác nhau ở viền; nay khác cả ở nền nên thấy được kể cả khi vòng sáng bị chói nuốt. Cùng lối với `.spk-nhap` ở màn Thiết lập. */ .spk-moi .spk-bang-the-nhap:focus { background: var(--spk-nen); } .spk-moi .spk-bang-the-nhap:focus { outline: 0; border-color: var(--spk-chinh); box-shadow: 0 0 0 3px rgba(107, 63, 160, .18); } /* KHÔNG CÒN LUẬT RIÊNG CHO TRẦN — cả dự án có 53 select và 52 cái mang `.spk-chon`, riêng cái này do JS sinh ra nên bị bỏ quên. Luật ở đây dựng lại một phiên bản rút gọn của `.spk-chon`: có viền có bo, nhưng không mũi tên tự vẽ và đệm dọc 5px thay vì 1px. Nay select ấy mang `.spk-chon` như mọi ô chọn khác, nên luật này chỉ còn là thứ ĐÈ LÊN nó: `.spk-bang-the select` (0-2-1) đặc hiệu hơn `.spk-chon` (0-2-0), nên ô vẫn cao 33px trong khi mọi ô khác đã về 24px. Gắn lớp mà không gỡ luật cũ thì không thấy gì thay đổi — đúng cái bẫy đặc hiệu đã cắn nhiều lần trong dự án này. */ /* Ô "Giá bán" KHÔNG ĐƯỢC XUỐNG DÒNG. Nó là ô duy nhất trong app có dạng `min ≤ [ô nhập] ≤ max` — năm mẩu phải đọc liền một mạch mới hiểu là một khoảng. Từ khi ô bảng được xuống dòng (để bảng hẹp lại, xem `.spk-bang-the td`), cột này chỉ được chia 104px trong khi cần ~190px, nên nó vỡ thành ba dòng: "1000 ≤ 2500" rồi "≤ 20000" — trông như hai con số rời. Đo ở cửa sổ app PC 890px: ô 90–111px → 48–57px, cả bảy bảng thấp đi 5.897 → 4.919px (−17%). Cái giá là bảng rộng thêm: phần tràn ngang 75 → 228px. Chấp nhận được vì cột cuối (nút Xoá) đã GHIM vào mép phải — đo được 82/82 nút vẫn thấy được ở mọi khổ. Lớp gắn ngay tại nơi dựng ô (setting.js), không dò theo nội dung: CSS không chọn được "ô có hai dấu ≤", và một bộ chọn mò thì hỏng lặng lẽ khi nội dung đổi. KÈM TÊN THẺ `td` cho đủ độ cụ thể. Bản đầu viết `.spk-moi .spk-bang-the-gia` (0,2,0) và nó THUA `.spk-moi .spk-bang-the td` (0,2,1) — luật nằm im, ô vẫn xuống dòng, `getComputedStyle` vẫn trả `white-space: normal`. Đo mới thấy. CHỈ Ở KHỔ BẢNG (≥641px). Bản đầu áp cho mọi khổ và làm hỏng chế độ THẺ: ở đó ô đã là flex một dòng sẵn, còn nhãn "Giá bán:" thì cần xuống dòng — cấm nó là nhãn bị CẮT CỤT. Bài đo bắt được ngay (mục 5: "không nhãn nào bị cắt cụt: 1"), trong khi phép đo tay của tôi soi cái Ô nên báo sạch. */ @media only screen and (min-width: 641px) { .spk-moi .spk-bang-the td.spk-bang-the-gia { white-space: nowrap; } } /* Ô tên vật phẩm. Ở 3 bảng kéo được thì chính ô này là tay cầm (xem cấu hình sortable trong setting.js); phần dấu hiệu kéo nằm ở khối "Dấu hiệu kéo thả". */ .spk-moi .spk-bang-the-keo { white-space: normal; min-width: 140px; } /* ---------- Hàng có cấu hình chi tiết sổ ra tại chỗ ---------- */ /* Bố cục của tham-khao-1: panel nằm NGAY DƯỚI hàng của nó, không phải một khối gập riêng ở cuối danh mục. Chú thích trong mã nguồn của họ nói rõ vì sao: xếp riêng ở cuối thì "người chơi phải tự đoán khối nào thuộc công tắc nào". Mũi ⌄ nằm ở CỘT THỨ TƯ — cùng cột với nút của mọi hàng khác — nên lưới không lệch khi một hàng có mũi còn hàng bên cạnh thì không. */ /* MỖI MỤC SỔ ĐƯỢC LÀ MỘT THẺ RIÊNG — cùng bộ đo với `.spk-nhom` ở Hoạt động. Trước đây chúng nằm liền một dải: mục này hết thì mục sau bắt đầu ngay, chỉ cách nhau một đường kẻ 1px. Mở một mục ra thì phần chi tiết của nó trôi thẳng vào hàng đầu của mục kế — mắt không có chỗ nào để biết mình vừa ra khỏi mục nào. Khoảng hở 12px làm việc mà một đường kẻ không làm được: nó nói "hết rồi" bằng KHOẢNG TRỐNG, thứ đọc được ngay cả khi lướt nhanh. KHE CẢ HAI PHÍA, không chỉ phía dưới. Ở Hoạt động mọi mục đều là thẻ nên lề dưới một mình là đủ — thẻ nào cũng có, khe nào cũng đều. Ở Tiện ích thì thẻ xen giữa các hàng thường, nên lề dưới một mình để lại đúng một nửa: hở ở dưới mà hàng ngay TRÊN vẫn dính vào tiêu đề. Hai thẻ cạnh nhau thì lề dọc chập lại còn 12px, không cộng thành 24. */ .spk-moi .spk-hang-boc { margin: 12px 0; background: var(--spk-nen); border: 1px solid var(--spk-vien); border-radius: var(--spk-bk); overflow: hidden; } .spk-moi .spk-hang-boc > .spk-hang { border-bottom: 0; cursor: pointer; /* ĐỆM 8px như đầu mục. Hàng thường đệm 2px vì có hàng trăm hàng xếp sát nhau và từng pixel dọc đáng giá; thanh tiêu đề thì ngược lại — nó cần thở ra để tách khỏi các hàng quanh nó, và mỗi màn chỉ có dăm cái. */ padding-top: 8px; padding-bottom: 8px; } /* TIÊU ĐỀ MỤC SỔ ĐƯỢC = ĐẦU MỤC CỦA HOẠT ĐỘNG. Hai thứ làm CÙNG MỘT việc: đứng đầu một khối và sổ khối ấy ra. Trước đây chúng chỉ giống nhau ở chữ đậm, còn lại lệch hết — đo được: đầu mục Hoạt động mục sổ Tiện ích nền #e8e1f2 trong suốt cỡ chữ 15px 14px khe mũi–chữ 2px 6,5px user-select none auto cao 40px 44px Một thanh không có nền thì mắt không bám được đâu là chỗ bắt đầu một mục khi cuộn qua vài chục hàng liền nhau — đúng lý do đã làm nền cho đầu mục ở đợt trước. */ .spk-moi .spk-hang-boc > .spk-hang { background: var(--spk-nen-dau); user-select: none; -webkit-user-select: none; } /* Cùng màu rê chuột với đầu mục: đậm thêm một nấc, không sáng lên. */ .spk-moi .spk-hang-boc > .spk-hang:hover { background: #ded4ec; } .spk-moi .spk-hang-boc > .spk-hang > .spk-hang-nhan { font-size: 15px; font-weight: 600; color: var(--spk-chu); /* KHE MŨI–CHỮ ĐÚNG 2px, như đầu mục. Mũi nằm trong cột `btn` rộng `--spk-cot-mo` (18px) và được căn GIỮA cột, nên nó thừa 6,5px mỗi bên — chữ bắt đầu ở mép phải của cột chứ không phải ngay sau mũi. Nút đã đổi sang căn TRÁI (luật `.spk-mo-ct` bên dưới), còn chữ thì kéo ngược lại đúng phần cột còn thừa. Viết bằng `calc` theo chính hai biến sinh ra nó — bề rộng cột và bề rộng mũi — chứ không gõ `-11px`: đổi `--spk-cot-mo` thì khe vẫn là 2px, không phải đi tìm lại một con số đã quên mất vì đâu mà có. */ margin-left: calc(2px + 5px - var(--spk-cot-mo)); } /* Mũi nép TRÁI cột, không nằm giữa: xem lý do ở khe 2px ngay trên. */ .spk-moi .spk-hang-boc > .spk-hang > .spk-hang-btn > .spk-mo-ct { justify-content: flex-start; } /* MỌI NHÃN CHUNG MỘT MỐC LỀ TRÁI — mép trái của mũi. Cột `btn` rộng `--spk-cot-mo` (18px) tồn tại cho mũi sổ. Hàng nào KHÔNG có mũi thì cột ấy rỗng mà vẫn chiếm chỗ, nên nhãn của nó bắt đầu ở mép PHẢI của cột — lệch đúng 18px so với hàng có mũi. Đo ở màn Tiện ích: mục sổ được 27px, mục đơn 45px, mục con bên trong 45px. Ba bậc thụt lề cho ba thứ đáng lẽ cùng một cột. Đây chính là cái bẫy "ô rỗng vẫn giữ chỗ" đã gỡ cho `.spk-hang-aux` và `.spk-hang-sw` — lần này ở cột đầu. Kéo nhãn về đúng đầu cột, trọn `--spk-cot-mo`, nên đổi biến ấy thì mọi hàng vẫn thẳng. HÀNG CÓ MŨI KHÔNG DÙNG LUẬT NÀY: luật riêng của `.spk-hang-boc > .spk-hang` đặc hiệu hơn (0-4-0 so với 0-3-0) và kéo ít hơn 7px, để chữ nằm sau mũi 2px. */ .spk-moi .spk-hang > .spk-hang-nhan { margin-left: calc(0px - var(--spk-cot-mo)); } /* ĐANG MỞ THÌ NỀN ĐỔI. Trước đây còn một vệt viền trái 3px sáng lên, nhưng viền ấy để lộ MỘT VỆT TRẮNG dọc mép trái thanh tiêu đề khi mục đang đóng: viền trong suốt vẫn nằm trong hộp nền của thẻ, nên nền trắng của thẻ hiện qua đúng 3px ấy trong khi thanh tiêu đề tím chỉ phủ tới mép padding. Giờ mục nào cũng là một thẻ riêng có khoảng hở hai bên, nên "đang ở trong mục nào" đã đọc được từ chính hình thẻ — không cần thêm một dấu hiệu nữa. NỀN KHI MỞ CŨNG BỎ NỐT: thân thẻ để trắng như thân nhóm ở Hoạt động. Thanh tiêu đề đã có nền tím và mũi đã quay — hai dấu hiệu ấy đủ nói mục đang mở, còn tô thêm nền cho thân thì thành lớp nền thứ hai chồng lên nhau. */ /* VÙNG CHẠM LÀ CẢ HÀNG, không phải riêng cái nút — `.spk-hang-boc > .spk-hang` mang `cursor: pointer` và tay bấm nằm ở đó. Nên sàn 40px của nút không còn là thứ giữ vùng chạm: hạ về 24px cho hàng cao đúng 40px như đầu mục, mà chỗ bấm vẫn là trọn thanh 40px × cả bề ngang. */ .spk-moi .spk-mo-ct { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 24px; padding: 0; background: none; border: 0; /* CÙNG MÀU VỚI MŨI CỦA ĐẦU MỤC. Mũi vẽ bằng `currentColor`, mà chỗ này đặt `--spk-chu-mo` (xám mờ) trong khi đầu mục ở Hoạt động thừa hưởng `--spk-chu` (gần đen) — hai mũi cùng hình, cùng cỡ, mà một cái nhạt hơn hẳn. Người duyệt nhận ra bằng mắt trước khi tôi nghĩ tới việc đo. Mờ đi là đúng khi nó còn là một nút phụ nép bên phải hàng; nay nó đứng đầu một thanh tiêu đề, nên nó phải đậm như chữ nó đứng cạnh. */ color: var(--spk-chu); font: inherit; line-height: 1; cursor: pointer; } /* CHÍNH SPAN xoay, không phải cả nút. Xoay cả nút thì bao hình xoay theo: một nút cao 40px quay 180° vẫn 40px, nhưng nếu sau này nút không vuông thì vùng chạm tụt xuống dưới ngưỡng — tách span ra là chặn sẵn lớp lỗi đó. */ /* MŨI SỔ VẼ BẰNG VIỀN — cùng một hình với đầu mục ở Hoạt động và cây điều hướng. Trước đây chỗ này bày ký tự ⌄ còn đầu mục dùng tam giác ▸. Hai nút làm CÙNG MỘT việc — sổ một khối ra xem đầy đủ — mà mang hai hình khác nhau thì người dùng phải học hai lần. Vẽ bằng bốn đường viền thay vì đặt ký tự: cùng cách `.spk-nhom-dau::before` làm, nên hai mũi bằng nhau tuyệt đối về cỡ và về màu, không phụ thuộc font nào đang có. Cái `` trong markup thành cái vỏ rỗng mang phép xoay. */ .spk-moi .spk-mo-ct-mui { display: inline-block; width: 0; height: 0; font-size: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; } /* Mở ra thì mũi quay xuống — đúng 90° như đầu mục, không phải 180°. */ .spk-moi .spk-ct-mo .spk-mo-ct-mui { transform: rotate(90deg); } /* Ẩn/hiện bằng LỚP trên thẻ bọc, không đặt display inline từ JS. */ /* THÂN MỤC LÀ THÂN THẺ, không phải một khung riêng lồng trong thẻ. Trước đây chỗ này tự vẽ một khung: nền trắng, viền, bo góc, thụt vào 14px mỗi bên — đúng khi mục sổ được còn là một HÀNG nằm giữa danh sách, vì khi ấy phần chi tiết cần một đường bao để nói "chỗ này thuộc về hàng bên trên". Từ khi mỗi mục sổ được là một THẺ riêng thì cái khung ấy thành lớp thứ hai: thẻ mở ra tô nền tím nhạt, rồi bên trong lại một hộp trắng có viền. Đầu mục ở Hoạt động không làm vậy — `.spk-nhom-than` không có nền cũng không có viền của riêng nó, nó CHÍNH LÀ thân của thẻ. */ .spk-moi .spk-chi-tiet { display: none; } .spk-moi .spk-ct-mo > .spk-chi-tiet { display: block; } /* Hàng cuối trong panel không cần kẻ dưới, đã có viền panel. */ .spk-moi .spk-chi-tiet > .spk-hang:last-child, .spk-moi .spk-chi-tiet > .spk-hang-doc:last-child { border-bottom: 0; } /* Mục con lồng trong panel: bớt viền để không thành ba lớp khung chồng nhau. */ .spk-moi .spk-chi-tiet .spk-nhom { margin: 0; border-width: 1px 0 0; border-radius: 0; } /* ---------- Mục "bỏ qua hoạt động" (Bí Cảnh Mê Cung) ---------- */ /* Cột trái của dòng này xếp DỌC: tên hoạt động, bảng nhập khung giờ (ẩn cho tới khi bấm +), rồi các chip khung giờ đã thêm. Mọi dòng danh sách khác chỉ có một dòng chữ nên xếp ngang là đủ; riêng đây thì không. */ .spk-moi .spk-ds-hang > .spk-ds-tay.spk-cot { flex-direction: column; align-items: flex-start; margin-bottom: -6px; } /* Xếp dọc thì chỉ cần lề dưới; kéo margin âm cho khỏi thừa một khe. */ .spk-moi .spk-ds-hang > .spk-ds-tay.spk-cot > * { margin-bottom: 6px; } .spk-moi .spk-khung-gio-them, .spk-moi .spk-khung-gio-ds { width: 100%; } .spk-moi .spk-khung-gio-ds { display: flex; flex-wrap: wrap; margin-bottom: -6px; } .spk-moi .spk-khung-gio-ds > * { margin: 0 6px 6px 0; } .spk-moi .spk-khung-gio-ds:empty { display: none; } /* Chip một khung giờ đã thêm. */ .spk-moi .spk-khung-gio-the { display: inline-flex; align-items: center; padding: 3px 4px 3px 10px; background: var(--spk-nen-mo); border: 1px solid var(--spk-vien); border-radius: 999px; font-size: 12.5px; font-variant-numeric: tabular-nums; } .spk-moi .spk-khung-gio-the > *:not(:last-child) { margin-right: 4px; } .spk-moi .spk-chip-xoa { font: inherit; font-size: 15px; line-height: 1; color: var(--spk-chu-mo); background: transparent; border: 0; border-radius: 50%; width: 20px; height: 20px; padding: 0; cursor: pointer; } .spk-moi .spk-chip-xoa:hover { color: var(--spk-do); background: var(--spk-nen); } /* ---------- Form tài khoản (đăng nhập / đăng ký / đổi mật khẩu) ---------- */ /* Bản gốc xếp hai cột bằng `float: left; width: 46%` — cần clearfix và không tự về một cột khi hẹp. Lưới auto-fit làm đúng việc đó: hai cột khi còn chỗ cho 300px mỗi cột, một cột khi không. */ .spk-moi #registerForm, .spk-moi #editAccountPass1, .spk-moi #editAccountPass2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px 18px; align-items: start; } /* Những thứ chiếm trọn bề ngang dù lưới có mấy cột. */ .spk-moi .account-div-title { margin: 12px 0; color: var(--spk-chu); font-weight: 600; } /* ---------- Nhóm chọn một (radio) ---------- */ /* jQM dựng nhóm radio thành dải nút phân đoạn. Ở đây mỗi lựa chọn là một "chip", cùng hình với ô tick nhưng chọn một. KHÔNG bọc vào trong trong license.html viết xuống dòng nên luôn chứa một node văn bản trắng, `:empty` không bao giờ trúng — luật cũ chết từ lúc viết, để lộ bốn vạch 2px. */ .spk-moi #transactionList .spk-bang-cuon:not(:has(tbody tr)) { display: none; } /* ---------- Khối tóm tắt đơn hàng ---------- */ .spk-moi .spk-tom-tat { padding: 12px 14px; background: var(--spk-nen-mo); border-top: 1px solid var(--spk-vien-nhat); } .spk-moi .spk-tom-tat > div { margin-bottom: 4px; } .spk-moi .spk-tom-tat > div:last-child { margin-bottom: 0; } /* Bí danh cho hai lớp cũ: JS còn ~30 chỗ ghép chuỗi `class='red-text-bold'` vào nội dung, phần lớn là thông báo hộp thoại (nằm NGOÀI .spk-moi, giữ nguyên đỏ tươi), số còn lại đổ vào #licenseTotalPrice, #bangPrice… (nằm TRONG .spk-moi). Đặt bí danh thay vì sửa 30 chuỗi: sửa chuỗi thì phải phân biệt chỗ nào vào hộp thoại chỗ nào vào panel — mà cùng một hàm dựng chuỗi có thể dùng cho cả hai. */ /* Chữ cần nhấn mạnh (gộp cả .red-text / .red-text-bold của bản gốc). */ .spk-moi .spk-nhan-manh { color: var(--spk-do); font-weight: 600; } /* Chữ phụ trong tiêu đề nhóm (vd "(tối đa 50 nhân vật)"). */ .spk-moi .spk-nhom-phu { color: var(--spk-chu-mo); font-weight: 400; } /* Hàng chỉ chứa các nút thao tác. */ .spk-moi .spk-thanh-nut { display: flex; flex-wrap: wrap; margin: 0; padding: 11px 14px 3px; border-bottom: 1px solid var(--spk-vien-nhat); } .spk-moi .spk-thanh-nut > * { margin: 0 8px 8px 0; } .spk-moi .spk-nhom-than > .spk-thanh-nut:last-child { border-bottom: 0; } /* ---------- Lưới ô tick ---------- */ /* Nhóm ô tick của bản gốc là chuỗi + thành một thẻ: hàng tiêu đề ẩn đi, nhãn cột nhúng sẵn trong từng ô hiện ra thay thế. */ .spk-moi .spk-bang-khoi { padding: 12px; } /* CHỈ bảng vật phẩm — loại biến thành thẻ ở khổ này — mới bỏ cuộn ngang. Trước đây luật này áp cho MỌI .spk-bang-cuon, nên bảng giao dịch (rộng 1053px, không biến thành thẻ) bị cắt cụt trong khung nhìn 412px mà không cuộn được. */ .spk-moi .spk-bang-cuon:has(.spk-bang-the) { overflow-x: visible; border: 0; border-radius: 0; } .spk-moi .spk-bang-the, .spk-moi .spk-bang-the tbody, .spk-moi .spk-bang-the tr, .spk-moi .spk-bang-the td { display: block; width: auto; } .spk-moi .spk-bang-the-chan, .spk-moi .spk-bang-the-le { /* Mốc định vị cho ô xoá ở góc trên–phải. */ position: relative; margin-bottom: 10px; padding: 4px 0; background: var(--spk-nen); border: 1px solid var(--spk-vien); border-radius: 6px; } /* NHÃN TRÁI — ĐIỀU KHIỂN PHẢI, cùng một hàng. Bản trước đặt nhãn thành một dòng riêng rồi cho điều khiển `width: 100%`; bảy trường thành mười bốn dòng và một thẻ cao 512px trong khung nhìn 800px — gần hai phần ba màn hình cho MỘT vật phẩm. Ô nhập chứa số "5" mà rộng 402px. flex-wrap giữ cho cụm "Giá bán: 6 ≤ [ô] ≤ 15" xuống dòng gọn gàng khi hẹp thay vì tràn. */ .spk-moi .spk-bang-the-chan td, .spk-moi .spk-bang-the-le td { display: flex; align-items: center; /* `nowrap` chứ không `wrap`: flexbox XUỐNG DÒNG TRƯỚC rồi mới co, nên để `wrap` thì mọi thứ cho con co lại đều vô nghĩa. Đo trên dữ liệu thật (81 thẻ, bảy bảng): 28 ô hai dòng → 0, và không ô nào tràn. Ô "Giá bán" là chỗ chật nhất — nhãn 83 + "1000" 30 + ô 100 + "≤" 24 + "20000" 38 = 275, cộng 5 khe × 6px là 305 trên 304px chỗ có. Tràn ĐÚNG 1px, và "20000" rơi xuống dòng riêng. */ flex-wrap: nowrap; padding: 4px 10px; border-top: 0; white-space: normal; } /* Markup của hàng "Giá bán" có một RỖNG (setting.js:2300) — nó không hiện gì mà vẫn ăn 6px lề, tức 6px trong đúng cái ô chật nhất. Ẩn hẳn. */ .spk-moi .spk-bang-the-chan td > span:empty, .spk-moi .spk-bang-the-le td > span:empty { display: none; } /* Lề thay cho `gap` — gap trong flexbox cần Chrome 84. */ .spk-moi .spk-bang-the-chan td > * + *, .spk-moi .spk-bang-the-le td > * + * { margin-left: 6px; } /* Ô xoá lên GÓC TRÊN–PHẢI của thẻ, đúng cách tham-khao-1 xếp (đo được: position:absolute tại 351,7 kích thước 44×44). Bản trước để nó thành một hàng riêng ở đáy — chiếm trọn 48px chỉ để chứa một nút 40px. `td:last-child` là mốc đúng: ô xoá luôn là giữ nguyên cho khổ BẢNG, nơi "Kích hoạt" đúng là cột đầu. VÀ TRẢ LẠI ĐỆM TRÁI 10px: ô tên bỏ đệm trái để lúc thu gọn nó nép sát ngay sau ô tick. Khi sổ ra thì nó đứng một mình trên dòng đầu, và mũi ▸ của nó thụt ra ngoài 10px so với nhãn của mọi dòng bên dưới — đo được mũi ở x=28 còn nhãn ở x=38. 10px là đúng đệm ngang của `.spk-bang-the td`, không phải một số chọn cho vừa mắt. */ .spk-moi .spk-bang-the > tbody > tr.spk-the-mo > td.spk-bang-the-keo { order: -1; padding-left: 10px; } .spk-moi .spk-bang-the tr:not(.spk-the-mo) > td.spk-the-tomtat { flex: 1 1 100%; } /* NÚT MŨI ĐỨNG TRƯỚC TÊN VẬT PHẨM, cùng bộ đo với đầu mục ở Hoạt động. Trước đây nó là một ô vuông 30px có viền, nằm ở góc trên phải cạnh nút Xoá — một cái nút trông như nút, đặt xa thứ nó mở. Nay nó về đúng chỗ mắt tìm: ngay trước tên, không vỏ, màu chữ như tên, cách tên 2px. Và bấm vào TÊN cũng sổ được (tay bấm ở setting.js) — mũi 5×8px là một đích quá nhỏ để bắt người ta nhắm vào. */ .spk-moi .spk-the-nut-mo { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin-right: 2px; padding: 0; background: none; border: 0; color: var(--spk-chu); font-size: 14px; line-height: 1; cursor: pointer; vertical-align: baseline; } /* Ô tên là một đích bấm: đừng bôi đen chữ khi bấm liền hai lần để đóng lại. */ .spk-moi .spk-bang-the-keo { cursor: pointer; user-select: none; -webkit-user-select: none; } .spk-moi .spk-bang-the-nhan { display: block; flex: 1 1 auto; min-width: 0; margin: 0; color: var(--spk-chu-mo); font-size: 12.5px; font-weight: 600; } .spk-moi .spk-bang-the-keo { min-width: 0; font-weight: 600; } /* Cả 12 ô nhập của các bảng này đều nằm trong — chính markup đã khai chúng là ô NHỎ (số lượng, giá). `width: 100%` là luật CSS ép ngược lại. Trả về đúng bề rộng cần dùng, giữ chiều cao 44px cho vùng chạm. */ /* Ô NHẬP RỘNG VỪA ĐỦ, KHÔNG GIÃN — để nhãn và ô nằm CÙNG MỘT DÒNG. Bản trước cho vỏ bọc `flex: 1 1 auto` để mọi điều khiển kết thúc ở một mép phải chung, chép cách xếp của tham-khao-1. Ở khổ dọc thì cái giá quá đắt: ô giãn tới 186–278px, không còn chỗ cho nhãn nên nhãn chiếm trọn dòng trên và ô rơi xuống dòng dưới. Đo được thẻ vật phẩm cao 358px, không ô nào nằm cạnh nhãn của nó. 100px là con số đo được, không chọn cho tròn: nhãn dài nhất "Số lượng trong hành trang:" rộng 161px, chỗ có 286px, 161 + 6 (lề) + 100 = 267 < 286 → vừa một dòng. Thử 120/100/90/80: thẻ ra 339/320/320/299px. Chọn 100 vì nó vẫn chứa trọn 8 chữ số (giá tới hàng triệu); 80px thì bắt đầu cắt số dài. Hàng "Giá bán" vẫn xếp đúng: `1000 ≤` và `≤ 20000` giữ bề rộng tự nhiên, chỉ ô nhập ở giữa là cố định. */ .spk-moi .spk-bang-the-nhap-nho { /* `0 1` chứ không `0 0`: 100px là bề rộng MONG MUỐN, còn ô "Giá bán" thì chật hơn nên phải nhường vài pixel. Đo được ô co về 77–96px ở đúng những hàng cần, còn 173/194 ô khác giữ nguyên 100px. Sàn 56px để còn đọc được bốn chữ số. */ flex: 0 1 100px; min-width: 56px; } /* Chiều cao theo luật nền (24px, bằng công tắc) — không nâng riêng ở đây nữa. */ .spk-moi .spk-bang-the-nhap { width: 100%; } .spk-moi .spk-bang-the select { flex: 1 1 auto; width: auto; min-width: 0; } .spk-moi .spk-gio .spk-so { width: 72px; } /* KHỐI THÊM (giờ/phút, ô nhập + nút) NẰM GỌN MỘT DÒNG. Hàng dải giờ có 4 ô số + 2 dấu ":" + chữ "tới" + nút. Bản trước nén ô còn 52px và khe còn 5px để vừa một dòng — đo ở 390px. Ở 360px thì hụt: cộng lại 311px trên 306px chỗ có, tràn 5px và cả cụm rơi xuống dòng thứ hai, khối cao 90px. Đó là hằng số nói TRẠNG THÁI của một bố cục, nên nó chết ngay khi bố cục đổi. Thay bằng CHO CO: `nowrap` + ô số co được, thiếu bao nhiêu thì ô nhường bấy nhiêu. Không còn con số nào phải chỉnh lại khi khổ màn đổi. Đo trên bảy danh mục ở ba khổ 320/360/412 — mọi loại khối đều về một dòng và không khối nào tràn: 12 khối 4 ô số 90 → 45px 1 khối nhập+2 nút 143 → 49px 2 khối select+nút 94 → 49px 1 khối giờ-tới-giờ 90 → 45px 2 khối 2 ô số 45 → 45px (vốn đã gọn) `min-width: 0` cho MỌI con là phần bắt buộc: mặc định `min-width: auto` của flex item không cho co nhỏ hơn nội dung, nên chỉ đặt `flex` là chưa đủ. Riêng ô số giữ sàn 34px để còn đọc được hai chữ số. */ .spk-moi .spk-them { flex-wrap: nowrap; margin-bottom: -5px; } /* Khổ hẹp: khe 5px thay vì 8px. */ .spk-moi .spk-them > * { margin: 0 5px 5px 0; min-width: 0; } /* NÚT thì KHÔNG co. `min-width: 0` ở trên mở cho mọi con co nhỏ hơn nội dung — đúng cho ô số, sai cho nút: đo được nút "Thêm hoạt động" bị bóp hẹp hơn chữ của nó rồi CẮT CỤT (`scrollWidth > clientWidth`), ở cả 360px lẫn 412px. Khối vẫn không tràn ra ngoài, nên phép chốt "tràn" của bài đo — vốn chỉ nhìn mép ngoài hộp chứa — không thấy gì. Chữ bị cắt nằm BÊN TRONG một con bị bóp. */ .spk-moi .spk-them > .spk-nut { flex: 0 0 auto; min-width: auto; } .spk-moi .spk-them > .spk-so { width: 52px; flex: 0 1 auto; min-width: 34px; padding-left: 6px; padding-right: 6px; } /* Hộp con `.spk-gio` cũng phải co được, kẻo nó giữ nguyên bề rộng và đẩy nút ra ngoài. */ .spk-moi .spk-them .spk-gio { flex: 0 1 auto; min-width: 0; } /* Ô giờ/phút phải có BỀ RỘNG MONG MUỐN, không được để `auto`. `width: auto` + `flex-basis: auto` trên một `` cho ra bề rộng NỘI TẠI của nó (mặc định `size=20`, khoảng 170px), rồi flex mới co dần khi hết chỗ. Nên ô CÀNG RỘNG KHI MÀN HÌNH CÀNG RỘNG, và ở ngay dưới mốc 640px thì nó phình to nhất — trong khi vượt mốc 640px là rơi về 62px của khổ máy tính. Đo được: 320px 43px · 360px 53px · 412px 66px · 500px 88px · 630px 119px 700px 62px · 840px 62px · 1280px 62px 119px rồi rơi thẳng xuống 62px chỉ vì rộng thêm 70px: đó là cái vực người dùng nhìn thấy. Lỗi là ở `auto`, không phải ở mốc. 72px là đúng con số của dòng `.spk-gio .spk-so` ngay trong khối điện thoại này, nên trong cùng một khổ mọi ô giờ bằng nhau. `flex: 0 1 auto` + sàn 34px giữ nguyên khả năng co ở khổ hẹp — 320px vẫn về 43px như trước. */ .spk-moi .spk-them .spk-gio .spk-so { width: 72px; flex: 0 1 auto; min-width: 34px; } /* Chiều cao đã do luật nền lo (24px, bằng ô nhập đứng cạnh) — ở đây chỉ còn bề ngang. Trước kia chỗ này khai 40px vì ô nhập ở khổ điện thoại cũng 40px. */ .spk-moi .spk-nut-icon { width: 40px; } } /* Trình duyệt chưa có :has() (Safari < 15.4, WebView2 đời cũ) sẽ BỎ QUA hai luật :has() ở trên vì selector không hợp lệ. Khi đó mọi hàng đều xếp dọc, kể cả hàng công tắc — vẫn dùng tốt, chỉ tốn thêm một dòng. Không cần dự phòng riêng. */ /* ===== hết GIAO DIỆN MỚI ===== */ /* ============================================================ VỎ ỨNG DỤNG — bỏ hoàn toàn jQuery Mobile ------------------------------------------------------------ Từ bản này trang KHÔNG nạp jquery.mobile.min.css nữa, nên khối này phải tự lo cả phần nền tảng (box-sizing, margin của body, chiều cao html/body) — trước đây jQM lo hộ. BỐ CỤC: một cột dọc cao đúng bằng khung nhìn. .spk-topbar ☰ · tên màn · đường dẫn (không cuộn) .spk-than (phần còn lại) .spk-side cây điều hướng — ngăn kéo khi hẹp .spk-scrim nền mờ sau ngăn kéo .spk-mans #accountInfo dòng "bạn là ai", DÙNG CHUNG cả ba màn #content VÙNG CUỘN DUY NHẤT .spk-man ×4 bốn màn nằm sẵn, bật/tắt bằng class #content GIỮ NGUYÊN TÊN ID có chủ ý: goToSection cuộn chính nó. (Lý do thứ hai — responsive.js tìm bảng quá khổ bằng `#content table` — đã mất theo script ấy.) Bốn màn nằm sẵn trong DOM thay vì nạp lại mỗi lần đổi màn. Bản cũ dùng $content.empty() + $.load(), nên quay lại một màn là mất sạch những gì đang nhập dở ở đó. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--spk-nen-mo); color: var(--spk-chu); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.5; /* Prefix này CẦN cho Safari trên iOS: thiếu nó thì chữ tự phóng to khi xoay ngang máy và vỡ lưới bốn cột của hàng thiết lập. license.js còn nhánh riêng cho Safari cũ, tức có người chơi dùng thật. */ -webkit-text-size-adjust: 100%; } button, input, select, textarea { font-family: inherit; color: inherit; } .spk-app { height: 100vh; /* dvh: thanh địa chỉ của trình duyệt di động co vào duỗi ra thì vỏ vẫn khít. */ height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } /* ---------- thanh trên cùng ---------- */ /* Khoảng cách trong thanh này dùng MARGIN, không dùng `gap`: `gap` của flexbox cần Chrome 84 mà người dùng có máy chạy Chrome 68 — ở đó nút ☰ dính liền vào dải chữ. Cùng lối mà .spk-day-nut và .spk-thanh-day đã dùng. */ /* BA DẢI CỐ ĐỊNH — thanh trên, ô tìm, thanh đáy — ăn 173px trong một khung nhìn 360×800, tức 22% màn hình trước khi hiện được một dòng thiết lập nào. Ở khổ nằm ngang 800×360 thì hai dải còn lại ăn 115 trên 360px. Đệm dọc của cả ba đều rộng gấp đôi mức cần: mỗi dải chỉ chứa MỘT thứ cao 36–40px, phần còn lại là khoảng trắng. Bớt đệm đưa 173 → 147px (khổ dọc), 115 → 99px (nằm ngang), 119 → 101px (máy tính) mà KHÔNG đụng tới cỡ chạm: nút vẫn 40px. Đã CÂN NHẮC VÀ BỎ việc thu nút burger xuống 36px: chỉ được thêm 4px, đổi lấy một vùng chạm dưới ngưỡng 40px của chính tài liệu này. */ .spk-topbar { flex: none; z-index: 40; display: flex; align-items: center; padding: 4px 14px; background: var(--spk-nen); border-bottom: 1px solid var(--spk-vien); } /* CHỮ TRÊN NÚT BURGER — chỉ ở khổ có cột cố định. Hình `«` một mình không nói được nó sắp làm gì; người dùng app PC báo không biết bấm vào đâu để mở rộng khung nhìn. Chữ do nav.js đổ (`capNhatNutBurger`), CSS chỉ quyết khi nào cho thấy. MỐC 641px: dưới mốc ấy cây luôn là NGĂN KÉO, mà `☰` mở ngăn kéo là quy ước ai cũng biết — thêm chữ chỉ tốn chỗ. Đo bề rộng còn trống của thanh trên: 125px ở 360px (chật), 322–882px từ 720px trở lên (thừa sức cho một chữ ~95px). */ .spk-burger-chu { display: none; } @media only screen and (min-width: 641px) { .spk-burger-chu { display: inline; margin-left: 6px; font-size: 13px; font-weight: 500; } /* Có chữ thì nút không còn vuông: bề rộng theo nội dung, sàn 40px giữ nguyên cỡ chạm cho lúc chữ bị ẩn. KÈM `.spk-topbar` cho ĐỦ ĐỘ CỤ THỂ (0,2,0). Bản đầu viết `.spk-burger` trơn (0,1,0) và đặt khối này TRƯỚC luật nền `.spk-burger { width: 40px }` — bằng độ cụ thể thì thứ tự quyết, luật nền đứng sau nên thắng, nút vẫn 40×40 và chữ bị ép ra ngoài. Đo mới thấy. Dựa vào vị trí trong tệp là chỗ dễ vỡ nhất khi ai đó sắp xếp lại; dựa vào độ cụ thể thì không. */ .spk-topbar .spk-burger { width: auto; min-width: 40px; padding-left: 10px; padding-right: 10px; } } .spk-burger { display: none; margin-right: 10px; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; background: var(--spk-nen-mo); border: 1px solid var(--spk-vien); border-radius: var(--spk-bk); font-size: 17px; line-height: 1; color: var(--spk-chu); cursor: pointer; } /* HIỆU CỦA APP ở góc phải thanh trên cùng. `margin-left: auto` đẩy nó sang phải; `min-width: 0` ở .spk-brand bên trái lo phần còn lại co được khi chật. Khoảng cách giữa ảnh và chữ dùng `margin` chứ không `gap`: `gap` của flexbox cần Chrome 84, mà người dùng có máy chạy Chrome 68 (thanh này vẫn còn `gap: 10px` từ trước — lỗi có sẵn, không phải của khối này). */ .spk-hieu { flex: none; margin-left: auto; display: flex; align-items: center; white-space: nowrap; } .spk-hieu-anh { flex: none; width: 24px; height: 24px; margin-right: 8px; border-radius: 5px; } .spk-hieu-ten { font-size: 13px; font-weight: 600; color: var(--spk-chu-mo); } /* KHỔ HẸP: giữ logo, BỎ dòng chữ. Đo ở 320px khi còn cả chữ: đường dẫn "/ Hoạt động" và tên nhân vật bị đẩy hết khỏi thanh. Điều hướng là thứ người dùng cần từng giây, còn nhãn hiệu thì không — nhường chỗ cho đường dẫn. */ @media (max-width: 640px) { .spk-hieu-ten { display: none; } .spk-hieu-anh { margin-right: 0; } } .spk-brand { display: flex; align-items: baseline; min-width: 0; } /* Là
chứa sẵn một ghi tên cột. Màn rộng: nhãn đó ẩn vì đã có hàng tiêu đề. Dưới 640px: hàng tiêu đề ẩn, nhãn hiện ra, mỗi
cuối trong cả bảy bảng vật phẩm. Dùng nó thay `:has(.spk-ds-xoa)` vì `:has()` cần Chrome 105, mà người dùng có máy chạy Chrome 68. */ .spk-moi .spk-bang-the-chan td:last-child, .spk-moi .spk-bang-the-le td:last-child { position: absolute; top: 6px; right: 8px; padding: 0; } /* THU GỌN: nút Xoá căn giữa theo DÒNG TIÊU ĐỀ, không theo mép trên thẻ. Nút nằm ngoài luồng (`absolute`) nên nó không tự biết dòng đầu cao bao nhiêu. Ở thẻ thu gọn, dòng đầu cao 40px vì ô tick giữ sàn 40 cho vừa ngón tay, trong khi ô tên chỉ 31 — nút neo ở `top: 6px` bèn nằm cao hơn tiêu đề 6px, đọc ra thành hai thứ ở hai dòng khác nhau. 8px = 4px đệm trên của thẻ + (31 − 24) / 2, với 31 là chiều cao dòng tiêu đề và 24 là chiều cao nút. Cùng công thức cho cả hai trạng thái, nên chúng khớp nhau. */ .spk-moi tr.spk-bang-the-le > td:last-child, .spk-moi tr.spk-bang-the-chan > td:last-child { top: 8px; } /* Hàng đầu chừa chỗ NGANG cho nút Xoá ở góc trên phải. SÀN 52px ĐÃ BỎ. Nó đặt từ hồi góc ấy có HAI nút cao 40px, và hàng đầu phải đủ cao để chứa trọn chúng kẻo chúng thò xuống đè hàng dưới. Nay chỉ còn nút Xoá cao 24px — mũi sổ đã về đứng trước tên — nên 52px chỉ còn là một khoảng hở thừa, và nó đẩy tiêu đề xuống 5px so với chính thẻ ấy lúc sổ ra. 44px cũng thay cho 96px vì cùng lý do: một nút chứ không phải hai. */ .spk-moi .spk-bang-the-chan td:first-child, .spk-moi .spk-bang-the-le td:first-child { padding-right: 44px; } /* THẺ THU GỌN: chỉ bày Kích hoạt · Tên · một ô tóm tắt · Xoá. Mỗi thẻ bày trọn 5–7 trường cao 199–299px; 82 thẻ là 20.218px phải cuộn qua. Thu gọn đưa thẻ về 143px và cả cụm về 11.384px (−44%). Ô tóm tắt được chọn theo TỪNG BẢNG (setting.js gắn lớp `spk-the-tomtat`), vì mỗi bảng có một trường đáng nhớ khác nhau: Giá bán · Giá tối đa · Số lượng · Số lượng tối thiểu · Số lượng giữ lại. Nó vẫn là ô NHẬP nên sửa được ngay khi đang thu gọn. Bốn `:not()` chứ không một lớp "ô phụ" gắn tay: bốn ô được giữ đều xác định bằng VỊ TRÍ (đầu, thứ hai, cuối) hoặc bằng vai (tóm tắt), nên không có gì phải nhớ khai thêm khi bảng đổi cột. `:not()` một mức chạy từ Chrome 4. */ .spk-moi .spk-bang-the tr:not(.spk-the-mo) > td:not(:first-child):not(:nth-child(2)):not(:last-child):not(.spk-the-tomtat) { display: none; } /* THẺ THU GỌN XẾP LẠI: [tick] [tên] trên MỘT dòng, tóm tắt xuống dòng dưới. Bỏ hai nhãn "Kích hoạt:" và "Tên vật phẩm:" — nhìn vào là hiểu, không cần nói. Nhưng bỏ nhãn KHÔNG THÔI thì gần như không được gì: đo được 11.384 → 11.342px, vì chiều cao thẻ do ô tick và ô tên NẰM HAI DÒNG quyết định, chứ không do nhãn. Phải xếp lại mới ăn: 11.384 → 7.183px (−37%). Hàng thành flex để hai ô đầu chung một dòng; ô tóm tắt `flex: 1 1 100%` nên tự xuống dòng dưới. Ô cuối vẫn `position: absolute` nên đứng ngoài luồng, hai nút mũi/Xoá không bị kéo theo. Ô tick giữ `min-height: 40px`: ô tick chỉ 17px, chỗ chạm thật nằm ở cả ô. Bỏ hẳn sàn thì hàng còn 39px và vùng chạm co theo — tiết kiệm 1px, mất một ngón tay. */ .spk-moi .spk-bang-the tr:not(.spk-the-mo) { display: flex; flex-wrap: wrap; align-items: center; } /* HÀNG TIÊU ĐỀ KHÔNG CÓ VIỆC GÌ Ở KHỔ THẺ — mỗi thẻ đã tự mang nhãn của từng ô. Luật này PHẢI đứng sau khối `tr:not(.spk-the-mo)` ngay trên. Hai selector có cùng độ đặc hiệu (0-3-1), nên thứ tự trong tệp là thứ quyết định — và hàng tiêu đề thì không mang lớp `spk-the-mo` nên nó KHỚP cả luật kia. Trước đây luật ẩn nằm ở đầu khối, và nó đúng cho tới khi đợt "thẻ thu gọn" thêm luật `display: flex` vào cuối: từ lúc ấy hàng tiêu đề hiện trở lại, bày ba ô lẻ trên một dải xám không phủ hết bề ngang. Người duyệt nhìn ra ngay — "ở chế độ item card thì đâu cần title đó nữa". */ .spk-moi .spk-bang-the tr.spk-bang-the-dau { display: none; } /* TÊN VẬT PHẨM LÀ TIÊU ĐỀ THẺ — luôn luôn, không chỉ lúc thu gọn. Trước đây nhãn "Tên vật phẩm:" bị ẩn khi thu gọn rồi HIỆN LẠI khi sổ ra, nên thẻ mở có một dòng "Tên vật phẩm: Bánh Răng" nằm ngay dưới chính cái tên đang làm tiêu đề. Một cái tên nói hai lần. Nhãn "Kích hoạt:" thì chỉ hiện KHI SỔ RA: lúc ấy nó là một dòng "nhãn: giá trị" như mọi dòng khác nên phải có nhãn. Lúc thu gọn nó nằm ngay trước tên trên cùng một dòng — nhìn vào là hiểu, thêm chữ chỉ tốn chỗ. */ .spk-moi .spk-bang-the > tbody > tr > td.spk-bang-the-keo .spk-bang-the-nhan, .spk-moi .spk-bang-the tr:not(.spk-the-mo) > td:first-child .spk-bang-the-nhan { display: none; } /* Tên là tiêu đề thẻ ở CẢ HAI trạng thái: cùng cỡ, cùng độ đậm với đầu mục. */ .spk-moi .spk-bang-the > tbody > tr > td.spk-bang-the-keo { min-width: 0; padding-left: 0; /* Chừa chỗ cho nút Xoá ở góc trên phải. */ padding-right: 44px; font-size: 15px; font-weight: 600; } /* THU GỌN: ô tick và tên chung MỘT dòng, tick đứng đầu — như cũ. */ .spk-moi .spk-bang-the tr:not(.spk-the-mo) > td:first-child { flex: 0 0 auto; padding-right: 8px; } /* DÒNG TIÊU ĐỀ CAO ĐÚNG BẰNG TIÊU ĐỀ, không bằng sàn chạm của ô tick. Ô tick vốn giữ `min-height: 40px` cho vừa ngón tay. Nhưng ô tên chỉ cao 31, mà hàng căn giữa — nên 9px thừa chia đôi và đẩy tiêu đề xuống: đo được đệm từ mép trên thẻ tới tiêu đề là 10px khi thu gọn còn 5px khi sổ ra. Cùng một cái thẻ mà hai trạng thái thở khác nhau. `stretch` cho ô tick cao BẰNG DÒNG thay vì tự đặt sàn: dòng cao 31 theo tiêu đề, ô tick cũng 31, và vùng chạm mất 9px (40 → 31) — đổi lấy hai trạng thái khớp nhau. Chỗ bấm để SỔ vẫn là trọn ô tên, không đụng gì tới thay đổi này. */ .spk-moi .spk-bang-the tr:not(.spk-the-mo) { align-items: stretch; } /* LỀ 6px CỦA VỎ NỘI DUNG LÀ KHE SAU CÁI NHÃN — mà ở đây nhãn "Kích hoạt:" đang ẩn, nên 6px ấy là chỗ trống không có gì đứng trước: ô tick lệch phải 6px so với nhãn của mọi dòng bên dưới (đo được x=44 với x=38). Cùng một cái bẫy với lề của `.spk-hang-aux` rỗng: một cái lề chỉ có nghĩa khi thứ nó cách ra còn hiện. */ .spk-moi .spk-bang-the tr:not(.spk-the-mo) > td:first-child > .spk-bang-the-noidung { margin-left: 0; } .spk-moi .spk-bang-the tr:not(.spk-the-mo) > td.spk-bang-the-keo { flex: 1 1 0; } /* SỔ RA: tên lên làm tiêu đề một dòng riêng, "Kích hoạt" thành một dòng thuộc tính như mọi dòng khác. Ghép [tick] [tên] trên một dòng là đúng khi thẻ thu gọn — hai thứ, một dòng, đọc xong là hết. Nhưng khi thẻ mở ra thì dưới nó là năm sáu dòng "nhãn: giá trị", và cái tên bị kẹp giữa một ô tick bên trái với chúng bên dưới thì không còn đọc ra là tiêu đề của cả khối nữa. HÀNG MỞ PHẢI LÀ FLEX. `order` không có nghĩa trong `display: block`, mà luật nền ở khổ thẻ đặt mọi `tr` là block và chỉ hàng THU GỌN mới được flex. Lần đầu tôi đặt `order: -1` mà quên điều ấy: thẻ mở ra vẫn bày "Kích hoạt" trên tên, y như trước. */ .spk-moi .spk-bang-the > tbody > tr.spk-the-mo { display: flex; flex-wrap: wrap; align-items: center; } .spk-moi .spk-bang-the > tbody > tr.spk-the-mo > td { flex: 1 1 100%; } /* DÒNG "KÍCH HOẠT" CAO BẰNG CÁC DÒNG KHÁC. Sàn 40px của ô tick sinh ra cho khổ thu gọn, nơi ô ấy là một đích chạm nằm cạnh tiêu đề. Khi sổ ra thì nó là một dòng "nhãn: giá trị" như năm dòng dưới nó, mà các dòng kia cao 32px (ô nhập 24 + đệm 8) còn nó 52px — một khoảng hở lạc lõng ngay dưới tiêu đề. 24px là chiều cao ô nhập, cùng con số đã dùng cho công tắc và nút khắp app; cộng đệm 4px trên dưới thành đúng 32px như các dòng kia. */ .spk-moi .spk-bang-the > tbody > tr.spk-the-mo > td:first-child { min-height: 32px; /* ĐỆM PHẢI VỀ 10px NHƯ MỌI DÒNG KHÁC. 44px là chỗ chừa cho nút Xoá ở góc trên phải — đúng khi thu gọn, vì lúc ấy ô tick nằm CÙNG DÒNG với nút. Khi sổ ra thì nút ở dòng tiêu đề phía trên, nên 44px thành chỗ trống đẩy ô tick lệch trái so với mép phải của các ô nhập bên dưới. */ padding-right: 10px; } /* Thứ tự trong