/* ===== THÀNH PHẦN DÙNG CHUNG: NÚT, Ô NHẬP, NHÃN, TIÊU ĐỀ TRANG ===== FILE NÀY GIỐNG HỆT Ở shopsieuthi VÀ thongke — sửa một bên là chép sang bên kia. Nạp ngay sau admin/style.css (khung riêng của từng site), trước các file theo trang (listFileCss). Vì sao tách khỏi style.css: hai site giữ khung riêng (thanh trên, menu trái) nên style.css khác nhau hoàn toàn, nhưng nút / ô nhập / nhãn / tiêu đề thì phải giống nhau từng pixel. Gộp chung một file là cách duy nhất để chúng không lệch dần theo thời gian. Mọi màu lấy từ admin/tokens.css. Gốc của .btn / .form-input / .form-select / .label nằm ở public/css/lib.css — file đó dùng chung với trang ngoài nên không sửa ở đấy được; ghi đè tại đây. */ /* ===== TIÊU ĐỀ TRANG ===== Nằm ở đây chứ không phải dashboard.css: MỌI trang admin đều dùng, mà dashboard.css chỉ nạp ở hai trang. Trước đây các trang khác dùng .label-main. */ .page-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } /* Tiêu đề của một MỤC bên trong trang ("Top sản phẩm bán tốt", "Đóng dấu (Watermark)"...). Không còn tiêu đề trang: đợt 2026-09-12 đã xoá hẳn ~250 thẻ `

` khỏi view của sáu site vì thanh trên và menu trái đã nói rõ đang ở đâu. Số thẻ còn lại là nhãn nội dung nên đổi tên cho đúng việc — .page-title không còn tồn tại ở đâu nữa. */ .section-title { margin: 0 0 12px; color: var(--ink); /* Lịch sử nét đậm + cỡ chữ của đúng dòng `font` dưới đây — đọc hết rồi hãy sửa, chỗ này đã lật đi lật lại ba lần. 2026-09-19: chủ site chốt ĐẬM 700 và cỡ cũ, sau khi thấy khu quản trị trên điện thoại chữ nhỏ hẳn đi. Đợt trước hạ xuống `400 clamp(0.9375rem, 1.6vw, 1rem)` với lý do đây là nhãn của mục bên trong trang chứ không phải tiêu đề trang. Lý do đó không sai, nhưng hậu quả đo được thì nặng hơn cái lợi: trên điện thoại cỡ gần như giữ nguyên (12,35px -> 12,19px) mà MẤT NÉT ĐẬM, nên tiêu đề mục chìm lẫn vào chữ thường; trên desktop tụt hẳn 18,4px -> 16px. Muốn giảm sức nặng của nó thì đổi màu hoặc giãn chữ, đừng bỏ đậm — đậm là dấu hiệu phân cấp duy nhất còn lại sau khi ~250 thẻ

bị gỡ hồi 2026-09-12. 2026-09-20: chủ site muốn chữ nhỏ lại. Hạ thang xuống `clamp(0.9375rem, 1.6vw, 1rem)` (13,125px ở điện thoại, 16px ở desktop, trước là 13,3px / 18,4px). Cùng ngày, chủ site muốn nhẹ nét đi: 700 -> 600, rồi nhẹ thêm một nấc nữa: 600 -> 500. Chủ site đã được nhắc về đợt 2026-09-19 và vẫn chốt hạ tiếp, nên 500 là giá trị đang muốn, không phải sơ suất — đừng "sửa lại cho đúng" thành 600/700 khi đọc đoạn trên. Vì sao 500 lần này không gãy như 400 lần trước: ở đợt 2026-09-19 cỡ chữ tiêu đề gần trùng chữ thường (12,19px so với ~11,7px) mà nét cũng về 400, nên mất cả hai dấu hiệu phân cấp cùng lúc. Nay đo lại ở 375px: tiêu đề 13,125px/500 so với chữ thường 11,25px/400 — chênh cả cỡ lẫn nét, vẫn tách được. Đây là nấc cuối còn an toàn. 400 là bằng đúng chữ thường xung quanh, lúc đó chỉ còn cỡ chữ đỡ — muốn nhẹ hơn nữa thì đổi màu (var(--muted)) hoặc giãn chữ, đừng hạ nét thêm. Be Vietnam Pro có sẵn nét 500 (link font khai 400;500;600;700), không phải nét giả do trình duyệt bôi ra. */ font: 500 clamp(0.9375rem, 1.6vw, 1rem)/1.3 var(--font); letter-spacing: -.01em; } /* Trong .page-head thì tiêu đề đã có margin của khối cha lo. */ .page-head .section-title { margin-bottom: 0; } /* .mt-scale (lib.css) nạp TRƯỚC file này, mà `margin` viết tắt ở trên cũng khai margin-top, cùng độ đặc hiệu — nên file này thắng và utility bị nuốt. Dòng này trả lại quyền cho .mt-scale khi hai class đi cùng nhau (ví dụ tiêu đề mục thứ hai trong một trang, cần thở ra khỏi khối phía trên). Giá trị bám theo .mt-scale trong lib.css. */ .section-title.mt-scale { margin-top: 20px; } .page-sub { margin: 3px 0 0; color: var(--muted); font-size: .78rem; } /* ===== NÚT VÀ Ô NHẬP TRONG KHU QUẢN TRỊ ===== .btn / .form-input / .form-select gốc nằm ở public/css/lib.css — file đó DÙNG CHUNG với trang ngoài nên không sửa ở đấy được, sửa là đổi luôn giao diện khách thấy. Ghi đè tại đây: admin/style.css nạp sau lib.css và chỉ nạp trong khu quản trị. Chỉ đổi màu, bo góc, đổ bóng và vòng focus về token. KHÔNG đụng cỡ chữ hay padding: lib.css khai font-size kèm !important và có cả một thang vw theo từng mốc màn hình, chen vào là phải viết lại toàn bộ thang đó. */ .btn, .label { border-radius: var(--radius-control); font-family: var(--font); box-shadow: var(--shadow-sm); } .btn { background-color: var(--muted); } .btn:hover:not([disabled]) { background-color: var(--ink-2); box-shadow: var(--shadow-sm); } /* Vòng focus dùng outline thay cho box-shadow của lib: box-shadow bị chính .btn:hover ghi đè nên bấm tab tới rồi rê chuột vào là vòng focus biến mất. */ .btn:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; box-shadow: var(--shadow-sm); } /* Biến thể phải đứng SAU .btn:hover — cùng độ đặc hiệu (0,2,0), rule sau thắng. Xếp trước thì mọi nút xanh/đỏ đều đổi sang màu hover chung khi rê chuột. */ .btn-white { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); } .btn-white:hover:not([disabled]) { background: var(--field); color: var(--ink); } /* Màu nút lấy từ --btn-*: tươi hơn hẳn bộ --good/--crit/--info (bộ kia dùng cho CHỮ trên nền nhạt nên phải tối). Mỗi màu ở đây là mức sáng nhất mà chữ trắng vẫn đạt 4.5:1 — sáng thêm nữa là chữ trên nút bắt đầu khó đọc. Riêng cam không có mức nào vừa tươi vừa đọc được với chữ trắng, nên nút cam lật ngược: nền vàng cam rực, chữ đậm. */ .btn-green { background-color: var(--btn-green); color: #fff; } .btn-green:hover:not([disabled]) { background-color: var(--btn-green-dark); } .btn-red { background-color: var(--btn-red); color: #fff; } .btn-red:hover:not([disabled]) { background-color: var(--btn-red-dark); } .btn-orange { background-color: var(--btn-orange); color: #fff; } .btn-orange:hover:not([disabled]) { background-color: var(--btn-orange-dark); color: #fff; } /* ===== NÚT ĐANG BỊ KHOÁ ===== Trước 2026-09-13 bộ này KHÔNG có kiểu nào cho :disabled, nên chỗ nào cần báo "bấm không được" phải mượn màu xám (btn-gray) — mà xám cũng là màu của nút phụ bình thường, và mượn xong thì nút xoá không còn ra dáng nút xoá nữa. Tách hẳn hai việc: MÀU nói nút làm gì, ĐỘ MỜ nói bấm được hay không. Khai cả :disabled lẫn [disabled]: :disabled chỉ ăn với button/input, còn thẻ đóng vai nút thì phải gắn thuộc tính disabled rồi bắt bằng [disabled]. Và phải huỷ cả :hover, nếu không rê chuột vào nút khoá nó vẫn sáng lên — nhưng huỷ bằng cách gắn :not([disabled]) vào TỪNG luật hover ở trên, không phải bằng background-color ở đây. Bản cũ khai `background-color: inherit` trong .btn:disabled:hover: `inherit` lấy nền của thẻ CHA, mà cha là mặt thẻ trắng, nên rê chuột vào nút khoá là nút trắng xoá. Độ đặc hiệu (0,3,0) của nó lại thắng mọi .btn-X:hover (0,2,0) nên không màu nào cứu được. */ .btn:disabled, .btn[disabled], .label:disabled, .label[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.35); } .btn:disabled:hover, .btn[disabled]:hover { box-shadow: none; } .btn-blue { background-color: var(--btn-blue); color: #fff; } .btn-blue:hover:not([disabled]) { background-color: var(--btn-blue-dark); } .btn-blue-light { background-color: var(--brand-soft) !important; color: var(--brand-text) !important; } .btn-gray { background-color: var(--ink-2); color: #fff; } .btn-gray:hover:not([disabled]) { background-color: var(--ink); } /* ----- Ô nhập ----- Giữ kiểu gạch chân của bản cũ, chỉ đưa màu và vòng focus về token. Đổi sang ô có khung viền là đổi hình dạng của hàng trăm biểu mẫu, không nằm trong phạm vi lần này. */ .form-input, .form-select { color: var(--ink); font-family: var(--font); border-bottom-color: var(--line); } .form-input::placeholder { color: var(--muted); } /* ===== Ô CHỌN CAO BẰNG Ô NHẬP ===== .form-input và .form-select trong lib.css được viết bằng ba bộ số khác nhau, không có lý do gì: font-size 0.875rem (và 0.8125rem từ 381px) vs 0.85rem line-height 1.5 vs 1.4 padding-bottom 2px vs 0 Cả hai đều KHÔNG khai chiều cao, nên cao bao nhiêu là do chữ quyết định — ba khác biệt trên cộng lại thành lệch thật. Đo ở trang sửa trang tính của thongke (ba ô cùng một hàng): input 21.4px, select 17.7px, thấp hơn 3.7px, gạch chân so le hẳn. Sửa ở đây chứ không ở lib.css: lib.css dùng chung với trang ngoài, đổi ở đó là đổi luôn mọi biểu mẫu khách nhìn thấy. File này chỉ nạp trong khu quản trị. Phải chép cả nấc 381px của .form-input, thiếu nó là qua mốc đó lại lệch. */ .form-select { font-size: 0.875rem; line-height: 1.5; padding-bottom: 2px; } @media only screen and (min-width: 381px) { .form-select { font-size: 0.8125rem; } } /* Đuôi ₫ trong ô tiền phải cùng cỡ chữ với ô chứa nó. lib.css dòng 586 có `span { font-size: 0.875rem }` — một quy tắc đặt cho MỌI thẻ span trên site. Nó đè lên thừa kế, nên .money-label đứng yên ở 14px/21px trong khi div.form-input bao quanh đã xuống 13px/19.5px. Mà div đó là flex, chiều cao lấy theo con cao nhất, nên cái đuôi ₫ kéo cả ô lên 24px — cao hơn input và select 1.5px dù ba ô nằm cùng một hàng. font-size: inherit trả nó về đúng cỡ của ô. Không sửa quy tắc `span` kia vì nó chạm tới toàn bộ hai site front-end lẫn khu quản trị. */ div.form-input > span, .money-label { font-size: inherit; } .form-input:focus, div.form-input:focus-within, .form-select:focus { border-bottom-color: var(--brand); } .form-select:hover { border-bottom-color: var(--ink-2); } .form-label { color: var(--ink-2); font-family: var(--font); } .code-textarea { border-color: var(--line); border-radius: var(--radius-sm); color: var(--ink); } .code-textarea:focus { border-color: var(--brand); } /* Icon trong nút: .btn đã là inline-flex có gap nên chỉ cần định cỡ. Dùng currentColor nên icon tự đổi màu theo từng loại nút, không phải khai lại. */ .btn > .btn-icon, .label > .btn-icon, /* .btn-crop KHÔNG mang class .btn (nó là nút nhỏ riêng của khung cắt ảnh trong admin/form.css), nên thiếu dòng này là SVG không được định cỡ và rơi về cỡ mặc định của thẻ replaced — đo được 36x36 trong cái nút cao 26px, icon tràn ra trên dưới và đẩy chữ xuống dòng. */ .btn-crop > .btn-icon, .warning-label > .btn-icon { flex: none; width: 1.15em; height: 1.15em; /* Nhích lên một chút. Hộp chữ tính cả khoảng trống dưới chân chữ (phần dành cho g, y, ộ) nên tâm hộp nằm thấp hơn tâm khối chữ nhìn thấy; icon căn theo tâm hộp sẽ trông chìm xuống. Dùng em để nhích theo cỡ chữ của nút. */ margin-top: -0.09em; /* stroke-width là thuộc tính trình bày của SVG nên CSS ghi đè được. AdminMenuIcon vẽ stroke 1.5 — đúng cho cỡ gốc 24px, nhưng trong nút icon chỉ còn ~13px, thu nhỏ gần một nửa thì nét mảnh như vệt mờ, đứng cạnh chữ 12px nửa đậm là lệch hẳn về độ dày. Nâng lên cho cân. */ stroke-width: 1.9; } /* ----- Nhãn màu (.label + .bg-*) ----- Bảng màu gốc ở lib.css dùng chung với trang ngoài. Chữ trên nhãn là #f3f3f3, và bốn màu trong đó trượt AA khá xa: cam #ff6600 chỉ 2.65:1, xanh biển #3CB371 2.40, bạc #999 2.57, ngọc #189c86 3.08 — chữ trắng trên nền sáng. Đậm lại vừa đủ, giữ nguyên tông để nhìn vẫn ra màu cũ. Đã đo, thấp nhất 4.86. */ .label.bg-orange { background-color: #9c4708 !important; } .label.bg-medium-sea-green { background-color: #17754e !important; } .label.bg-silver { background-color: #5d6b82 !important; } .label.bg-turquoise { background-color: #12766a !important; } .label.bg-red { background-color: #c4172a !important; } .label.bg-green { background-color: #5e6e35 !important; } .label.bg-grey { background-color: #4c5a70 !important; } /* .warning-label là khối chữ thường, không phải flex như .btn/.label — icon trong đó phải tự canh giữa theo dòng. */ .warning-label > .btn-icon { display: inline-block; vertical-align: -0.2em; margin-right: .25em; } /* ===== NÚT VÀ NHÃN — KHỔ HẸP ===== Khổ hẹp thường xếp nhiều nút cạnh nhau, cỡ 12px của lib.css làm chúng xuống dòng lộn xộn. Hạ một nấc: trần 12px -> 11px, padding bớt 1px mỗi chiều. Trước đây chỉ áp trong .form-row, nay áp cho MỌI nút trong khu quản trị để không có hai cỡ nút cạnh nhau. Vì sao đặt ở ĐÂY chứ không phải lib.css: lib.css dùng chung với TRANG KHÁCH, sửa ở đó là đổi luôn nút trên trang bán hàng. File này chỉ nạp trong khu quản trị (xem $publicCss của AdminBaseController), mà vẫn thuộc bộ 14 file dùng chung sáu site — sửa một nơi, sáu site cùng đổi. PHẢI có !important: lib.css khai cỡ chữ .btn/.label ở hai mốc này kèm !important, không có thì quy tắc này thua dù đặc hiệu hơn. File này nạp sau lib.css nên hai bên cùng !important thì bên này thắng. Giữ nguyên dạng thang vw của lib.css, chỉ hạ trần, để hai nấc không nhảy ngược nhau. ⚠️ MỐC QUY CHIẾU LÀ 430px, KHÔNG PHẢI 380px — sửa 2026-09-13. Thang min(calc(N * 100vw / X), Npx) chỉ co ở dưới X, từ X trở lên nó đứng yên ở trần. Để X = 380 thì mọi máy rộng hơn 380 đều nhận nguyên 11px, trong khi nấc max-width:380px ngay bên dưới lại kéo xuống 9,35px — thành một vách đứng: đo được 375px cho 9,23px/cao 21,2 còn 381px nhảy lên 11px/cao 25,34, tức +19% chỉ sau 6px màn hình. Mà iPhone 12/13/14 Pro rộng đúng 390px, nằm ngay phía trên vách, nên nút trên mấy máy đó phình hơn hẳn iPhone SE (375px). Lấy X = 430 (iPhone 14 Pro Max, máy rộng nhất trong nhóm) thì cả dải điện thoại đều co theo bề ngang thật: 390px -> 9,98px, 430px trở lên mới chạm trần 11px. */ @media only screen and (max-width: 600px) { .btn, .label { font-size: min(calc(11 * 100vw / 430), 11px) !important; /* Bớt 1px mỗi chiều so với giá trị THỰC của lib.css ở khổ này. Lưu ý: lib.css có thêm một nấc 381-600px đặt padding-top về 4px, nên giá trị thực là 4/9.6/4/9.6 chứ không phải 5/9.6/4/9.6 như khối max-width:600px đọc thoáng qua. Bớt 1 => 3/8.6/3/8.6. Trước đây còn bớt thêm 1px lề TRÊN (3 -> 2) với lập luận "chữ vốn nằm thấp so với tâm hộp". Sai: lệch lề trên/dưới d px thì HỘP CHỮ trôi lên đúng d/2. Đo ở 390px ra hộp chữ cao hơn tâm nút 0,45px và vệt mực chữ cao hơn 0,76px — nhìn ra được. Nay chia đều 2,5/2,5, tổng vẫn 5 nên ba số dưới không phải tính lại. */ padding: min(calc(2.5 * 100vw / 430), 2.5px) min(calc(8.6 * 100vw / 430), 8.6px) min(calc(2.5 * 100vw / 430), 2.5px) min(calc(8.6 * 100vw / 430), 8.6px); /* CHIỀU CAO cũng phải đổi mốc, không thì nút cao một đằng chữ một nẻo. lib.css khai line-height và min-height cho .btn ở khổ hẹp theo mốc 380, tức đứng yên ở trần 21,6 / 29,6 với mọi máy rộng hơn 380 — trong khi cỡ chữ và lề trong ở trên đã co theo mốc 430. Kết quả: nút thường cao 29,6 còn nút lọc (admin/filter-bar.css, mốc 430) chỉ 24,13 ở 390px, hai nút cạnh nhau lệch hẳn 5,5px. Ba số ăn khớp theo dựng hình: 21,6 (dòng chữ) + 5 (lề trên 2,5 + lề dưới 2,5) = 26,6. Nên ở mọi bề ngang w, chiều cao tự nhiên và min-height đều ra đúng 26,6·w/430 — trùng số của .btn-filter. Đổi một số là phải đổi cả ba. */ line-height: min(calc(21.6 * 100vw / 430), 21.6px); min-height: min(calc(26.6 * 100vw / 430), 26.6px); } } @media only screen and (max-width: 380px) { .btn, .label { font-size: min(calc(11 * 0.85 * 100vw / 380), 9.35px) !important; /* Cũng bớt 1px mỗi chiều so với thang 4.25/8.16/3.4/8.16 của lib.css. */ padding: min(calc(2.25 * 100vw / 380), 2.25px) min(calc(7.16 * 100vw / 380), 7.16px) min(calc(2.4 * 100vw / 380), 2.4px) min(calc(7.16 * 100vw / 380), 7.16px); } }