/* ── BẢNG MÀU ─────────────────────────────────────────────────────────── (Chú thích trong khối này KHÔNG được có dấu huyền ngược — cả khối nằm trong một template literal, một dấu là cắt ngang chuỗi và trang không build được.) Trước 08/08 hệ chạy HAI bảng màu đánh nhau: biến CSS ở đây và một object M viết tay trong page.tsx. Cùng một trang mà nửa trên nhạt nửa dưới ấm — đúng cái Đạt nhìn ra khi so hai ảnh chụp. Nay CHỈ CÒN chỗ này là nguồn. 29/08 đổi từ tông ẤM (kem, vàng đồng) sang XANH HỒNG PASTEL. Còn 1.106 mã màu GÕ CỨNG ở 63 tệp chưa quét — chúng không theo biến, nên tới khi quét xong thì CHƯA ĐƯỢC bật chế độ tối: nó sẽ ra một trang tối lỗ chỗ ô sáng. */ :root { /* ── XANH HỒNG PASTEL (29/08) ────────────────────────────────────── Đạt chốt: "làm thành màu Pastel, kiểu xanh hồng pastel cho nhìn có sức sống". Pastel nằm ở NỀN, mực nằm ở CHỮ — pastel là bão hoà thấp cộng sáng cao, đúng hai thứ giết tương phản, nên chữ mang nghĩa không bao giờ được pastel hoá. MỌI giá trị dưới đây do máy giải, không chọn tay: 56 ràng buộc lấy từ những chỗ hỏng CÓ THẬT trong mã (mỗi ràng buộc ghi kèm file:line trong tests/bang-mau.spec.ts). Đổi một mã màu ở đây mà không chạy lại bài kiểm đó là gần như chắc chắn làm rớt một ràng buộc khác. */ --ink: #1B2038; /* chữ chính — mực navy, KHÔNG phải đen */ --ink-soft: #46507B; /* chữ phụ đậm */ --muted: #5C6788; /* chữ mờ — 1.510 lượt gọi. Bản cũ #8A7F6E chỉ đo 3,49 trên nền giấy, DƯỚI chuẩn đọc */ --muted-2: #7C86A6; /* nhãn IN HOA nhỏ (eyebrow) */ --paper: #F2F4FD; /* nền trang — xanh phấn rất nhạt */ --card: #FFFFFF; /* nền thẻ — trắng để ảnh chai lên đúng màu */ --card-2: #F6F0F7; /* hover / đầu bảng — ĐÂY là chỗ hồng sống */ --card-3: #E6EBF9; /* bậc nền thứ ba (nhóm cột bảng giá) */ --line: #BDC8E6; /* viền thẻ */ --line-2: #CFD8EE; /* viền trong thẻ (bảng, ô con) */ --line-soft: #D9E0F1; /* kẻ ngăn nhạt nhất */ --link: #4356CE; /* ĐƯỜNG DẪN — tách khỏi --warn, xem chú thích thẻ a */ --link-hover: #2E3EA6; --gold: #B98CE0; /* NỀN huy hiệu / chip nhấn. KHÔNG phải màu link: nó đóng vai nền nên phải đủ tối cho chữ --ink */ --vet: #C9A9E8; /* vệt đánh dấu mục menu đang mở — ở rail 64px đây là tín hiệu DUY NHẤT, phải sáng trên nền mực */ --wash-bg: #F0E8FB; /* nền wash cảnh báo / đang chọn */ --gold-soft: var(--wash-bg); /* tên cũ, 62 chỗ đang gọi. Trỏ bằng var() chứ KHÔNG chép giá trị: chép thì nó đứng yên khi bật nền tối */ --accent: #6377DF; /* HÌNH: thanh tiến độ, cột biểu đồ. Không mang chữ */ --track: #DFE4F6; /* rãnh của thanh tiến độ */ --rose: #D26AA4; /* HÌNH: chấm, avatar. Chip có chữ dùng --rose-bg */ --rose-ink: #A6376E; --rose-bg: #FBE4EF; --rose-line: #EFB9D6; --green: #22704B; /* dương / lời / còn hàng / xong */ --green-bg: #C6E7D7; --green-line: #93CDB2; /* chưa từng được khai — 5 chỗ đang gọi nó và cả khai báo border rơi về initial */ --danger: #98203B; /* âm / lỗ / lỗi / chưa trả lời */ --danger-bg: #FBDFE5; --danger-line: #F2B9C4; /* HỌ CHÚ Ý — chỉnh lại 30/08. Đạt: "tôi không thích kiểu màu be này, nó không hợp với pastel lắm... tôi thấy nó rất nhiều". Đo ra đúng hai chỗ sai, và cả hai đều là SỐ chứ không phải cảm giác: 1. NẶNG NHẤT BẢNG. Chuẩn của họ nền nhạt là ΔE 12-14 so với trắng (wash-bg 12,3 - rose-bg 12,4 - danger-bg 13,8), mà warn-bg cũ ở 20,5. Nền nặng nhất thì mắt bắt nó trước mọi thứ khác — đó chính là cảm giác "thấy nó rất nhiều", dù số CHỖ dùng không hề tăng. 2. SAI TÔNG. Hue 40 là vàng-cam, mà vàng-cam ở độ sáng cao thì mắt đọc ra BE/nâu nhạt, không đọc ra một màu. Dời lên hue ~48-51 là vàng kem, đứng được cạnh hồng và tím pastel. Giữ nguyên NGHĨA ở cả 232 chỗ đang gọi (sai wifi, thiếu GPS, trễ trên 40 ngày, hàng đang về, cần báo khách...) — chỉ đổi tông, không phân loại lại. Đã cân để hue không đâm vào họ hồng: ΔE tới danger-bg/rose-bg là 19,6. */ --warn: #735E0D; /* chú ý / tạm tính / sắp hạn. Trên trắng 6,30 — đúng bằng bản cũ 6,29, chỉ bớt nâu */ --warn-bg: #FDF8DD; /* ΔE so với trắng 14,1 (cũ 20,5) */ --warn-line: #E6D599; /* tương phản trên nền 1,37 — đúng chuẩn họ (rose 1,39 - danger 1,34 - green 1,36) */ --warn-ink: #685512; /* chữ trên nền hổ phách: 6,78 trên nền mới */ /* Bốn tên bị gọi ở 20 chỗ mà CHƯA TỪNG được khai — nên var(--ok, #2e7d32) không phải mã dự phòng, nó LÀ màu đang vẽ. Riêng ve-hang/page.tsx:169 viết var(--ok) không dự phòng nên khai báo color hỏng hẳn. Khai alias ở đây là 20 chỗ tự về hệ, 0 dòng phải sửa. */ --ok: var(--green); --ok-bg: var(--green-bg); --fg: var(--ink); --hover: var(--card-2); /* Hai tên nữa cùng bệnh, tìm ra khi quét 29/08: --gold-deep đánh dấu số VỐN ẢO đã lưu ở bảng giá (5 chỗ). Nó là tín hiệu thật: chú thích ở bang-gia/page.tsx:158 kể rằng bản đầu để trạng thái CHƯA LƯU dùng --warn nên trùng khít với nó và mất hẳn tín hiệu. Nay chưa-lưu là --danger nên hổ phách trả về đúng vai "số tạm tính". Tệp đó tự khai một bản cục bộ trong .bg-khung; khai thêm ở đây để chỗ nào nằm ngoài khung vẫn có màu. --serif bị gọi ở 3 chỗ nhưng token thật tên là --font-serif, nên fontFamily rơi về thừa kế và ba chỗ đó mất phông serif mà không ai thấy. */ --gold-deep: var(--warn); --serif: var(--font-serif); /* ── Tấm MỰC nằm giữa trang sáng ────────────────────────────────── Sidebar, .pghead, thẻ quỹ lương, chuỗi tiền của đơn. Nhóm này KHÔNG lật theo chế độ sáng/tối, nên màu ngữ nghĩa đứng trên nó phải có bản riêng (--danger-tm...) chứ không dùng --danger được: --danger trên --side-bg chỉ đo 1,82, mù hẳn. */ --side-bg: #2A3358; /* PHẢI cách --ink >= 1,3 — xem luật 4 */ --side-tx: #DCE3F7; --side-dim: #98A3C4; --side-line: #3E4A70; --on-dark-tx: #EFB3D0; /* chữ nhấn trên nền mực (chữ MOYAR ở .mobilebar) */ --fill-dam: #252C4C; /* NỀN mực. 18 chỗ đang lấy --ink làm nền — sai, vì --ink sẽ lật sáng ở chế độ tối */ --fill-dam-tx: #E4EAFA; --danger-tm: #F0899C; /* ba màu ngữ nghĩa dùng TRÊN nền mực */ --warn-tm: #EBDA84; /* trên nền mực: 7,29 lên 8,70 */ --green-tm: #7FDCAF; --scrim: #1B2038; /* lớp phủ sau hộp thoại */ --bong: #1B2038; /* gốc của bóng đổ */ } :root { /* 29/08: BỎ hai dòng khai lại --side-tx/--side-dim bằng rgba(246,241,232,…) của bảng ẤM. Chúng đứng SAU nên đè chết #DCE3F7/#98A3C4 khai ở trên, và cả cột menu + .pghead vẫn ra kem ấm giữa một trang xanh phấn. tests/bang-mau.spec.ts không bắt được: docBien() cắt 3 số đầu của rgb() và bỏ alpha, nên nó đo #F6F1E8 rồi báo xanh. */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } .serif { font-family: var(--font-serif), Georgia, 'Times New Roman', serif; } /* ── Link ────────────────────────────────────────────────────────────────── Trước 11/08 KHÔNG có luật nào cho thẻ a, nên mọi link không tự đặt màu đều rơi về mặc định trình duyệt: xanh lam, đã bấm thì TÍM, kèm gạch chân. Trên nền giấy ấm của bản vẽ nó chỏi hẳn ra — Đạt bắt được ở breadcrumb trang chi tiết đơn, nhưng chỗ đó chỉ là chỗ dễ thấy nhất: mã đơn ở tab Cần soi, link trong bảng Hủy/Hoàn… đều đang tím. Màu lấy đúng bản vẽ (helmet của Chi tiet don hang): #8F5E1E, hover #C9A06A. KHÔNG gạch chân mặc định — gạch chân khi rê chuột thôi. KHÔNG khai a:visited. Bản đầu (11/08) có, và nó nhuộm VÀNG cả sidebar: chọn tử a:visited nặng (0,1,1) hơn .sblink (0,1,0), nên mọi mục menu đã bấm qua bị đè màu — Đạt mở ra thấy cả cột vàng khè. Không cần nó: luật color trên thẻ a của TÁC GIẢ đã thắng bảng mặc định của trình duyệt ở cả hai trạng thái, nên link vẫn không bị tím. (Chú thích ở đây KHÔNG được chứa dấu huyền ngược — cả khối nằm trong một template literal, một dấu là cắt đứt chuỗi và trang không build được. Đã ghi ở đầu file từ lâu, tôi vẫn dẫm phải 11/08.) */ /* 29/08: đổi --warn → --link và --accent → --link-hover. Trước đó MỌI đường dẫn trong OS mang đúng màu dành cho "chú ý / tạm tính" — hai việc khác hẳn nhau dùng chung một màu. Và a:hover để --accent thì đo chỉ 3,07 trên nền thẻ, dưới chuẩn đọc: rê chuột vào link là nó MỜ đi. */ a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } h1, h2 { color: var(--ink); font-weight: 600; letter-spacing: -0.2px; } /* ── Bảng ── */ .rtable { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; } .rtable th { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; } .rtable th:first-child { text-align: left; } .rtable td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; } .rtable td:first-child { text-align: left; white-space: normal; max-width: 340px; font-variant-numeric: normal; } .rtable tbody tr:hover { background: var(--card-2); } /* Số tiền in ĐỦ (13.650.000.000₫) — cỡ chữ KPI phải vừa thẻ trên điện thoại */ .kval { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; margin: 4px 0 2px; font-variant-numeric: tabular-nums; color: var(--ink); } .kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; } .kcard { padding: 15px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } /* Thanh lọc: MỘT sticky container/trang, offset dưới header mobile (audit E4) */ .fbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); padding: 11px 0; z-index: 5; } .fbtn { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: 18px; padding: 6px 14px; cursor: pointer; font-size: 13px; } .fbtn:hover { border-color: var(--gold); } .fbtn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .finput { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--card); color: var(--ink); } /* ── HỘP NỔI (modal / bottom-sheet) ──────────────────────────────────────── Đạt 10/08: "nhiều cái bấm ở điện thoại khi pop up thì nút tắt bị tai thẻ điện thoại che nên không tắt được". Nguyên nhân: layout.tsx đặt viewportFit cover để nền tối tràn ra tai thỏ — đúng cho trang, nhưng mọi hộp nổi trong kho đều tự dựng bằng position:fixed; inset:0 và KHÔNG hộp nào biết tới env(safe-area-inset-*). Nút tắt ở góc trên vì thế nằm dưới tai thỏ / thanh trạng thái, bấm không tới, và người dùng kẹt trong hộp. Ba chốt ở đây: 1. --an-toan-tren/duoi = vùng an toàn thật của máy. Mọi hộp trừ ra. 2. Thanh tiêu đề sticky top:0 NGAY TRONG vùng cuộn → nút tắt không bao giờ cuộn mất, kể cả nội dung dài. 3. dvh chứ không vh: trên iOS Safari 100vh tính cả thanh địa chỉ nên đáy hộp bị đẩy khỏi màn hình, nút ở đáy cũng mất luôn. (Chú thích này KHÔNG được chứa dấu huyền ngược: cả khối CSS nằm trong một template literal, một dấu là cắt đứt chuỗi và cả layout hỏng.) */ :root { --an-toan-tren: env(safe-area-inset-top, 0px); --an-toan-duoi: env(safe-area-inset-bottom, 0px); } .hop-nen { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--scrim) 50%, transparent); display: flex; align-items: center; justify-content: center; padding: calc(var(--an-toan-tren) + 16px) 16px calc(var(--an-toan-duoi) + 16px); overscroll-behavior: contain; } .hop { background: var(--card); border: 1px solid var(--line); border-radius: 14px; width: min(920px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 48px color-mix(in srgb, var(--bong) 22%, transparent); } .hop-dau { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border-bottom: 1px solid var(--line); } .hop-dau h3 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; min-width: 0; } .hop-than { overflow: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 18px; } .hop-tat { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer; } .hop-tat:hover { border-color: var(--gold); } @media (max-width: 720px) { /* Điện thoại: dán đáy màn hình như bottom-sheet. Ngón cái với tới nút tắt, và mép trên luôn cách tai thỏ ít nhất 24px nên không thể bị che. */ .hop-nen { align-items: flex-end; padding: 0; } .hop { width: 100%; border-radius: 16px 16px 0 0; border-bottom: 0; max-height: calc(100dvh - var(--an-toan-tren) - 24px); } .hop-than { padding-bottom: calc(var(--an-toan-duoi) + 22px); } .hop-dau { padding: 12px 14px; } .hop-tat { width: 44px; height: 44px; } /* vùng chạm tối thiểu 44px */ } /* Bản vẽ để mọi nút lọc là VIÊN (r-pill 999). Ô nhập chữ giữ 8px — viên với một ô nhập dài thì chữ dính sát bo tròn, khó đọc. */ .fsel { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; background: var(--card); color: var(--ink); } /* Ngón tay không bấm trúng nút 28px. Trên mobile mọi thứ bấm được phải ≥44px chiều cao (yêu cầu 27/07). */ @media (max-width: 560px) { .fbtn, .fsel, .finput, .rtable input, .rtable select { min-height: 44px; } /* 16px, khong phai cho de doc — Safari iOS TU PHONG TO ca trang khi hoi tu vao o chu nho hon 16px, va KHONG thu lai. Tam truot dang mo se nhay. .finput mac dinh 13px nen dinh dung bay do. Cao them 0px vi min-height 44px o dong tren da nuot (33px < 44px); may tinh khong doi mot chu vi khoi nay chi chay tu 560px tro xuong. De .fbtn ngoai: nut khong hoi tu duoc nen khong kich phong to. */ .fsel, .finput, .rtable input, .rtable select { font-size: 16px; } } @media (max-width: 480px) { .kgrid { grid-template-columns: repeat(2, 1fr); } } /* ── Sidebar tối ── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 214px; z-index: 20; background: var(--side-bg); padding: 20px 12px 12px; display: flex; flex-direction: column; overflow-y: auto; /* GIẤU THANH CUỘN, giữ nguyên khả năng cuộn. Menu cao 1.989px trong khung 700px nên nó LUÔN cuộn được — và trên Windows thanh cuộn là một rãnh THẬT rộng ~15px, không phải lớp phủ như trên máy Mac. Ở dạng menu 214px thì hơi xấu; ở dạng rail 64px thì nó ăn gần một phần tư bề ngang và cắt vào hình. Đây là thanh điều hướng, không phải nội dung: không ai cần nhìn mình đang cuộn tới đâu trong một danh sách 15 mục. */ scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } /* Bề rộng ảnh wordmark. Ở ĐÂY chứ không inline trong nav.tsx — xem chú thích tại chỗ khai . */ /* display + height cung phai o DAY, khong duoc de inline trong nav.tsx: inline thang moi luat CSS thuong, nen luat rail ben duoi (doi anh lay chu M) se KHONG BAO GIO an. Dinh dung 30/08. */ .sblogo-img { width: 104px; height: auto; display: block; } .sblink { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--side-tx); font-size: 13.5px; padding: 8px 11px; border-radius: 9px; transition: background .12s, color .12s; } /* Chu tren nen muc KHONG duoc la --paper (nen trang lat sang o che do toi la mat chu). Nhung tra ca ba trang thai ve --side-tx thi mat luon bac sang: nghi / re chuot / dang mo cung mot mau. --on-dark-tx dung la token "chu NHAN tren nen muc" — bai kiem da chot no >= 4,5 tren --side-bg. */ .sblink:hover { background: var(--side-line); color: var(--on-dark-tx); } .sblink.on { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--on-dark-tx); font-weight: 500; box-shadow: inset 2px 0 0 var(--gold); } .sbgroup { color: var(--side-dim); font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 14px 11px 5px; } .page { margin-left: 214px; min-height: 100dvh; } /* Trang tự lo chiều cao của mình (hiện chỉ /crm) — bỏ sàn 100dvh của .page. Vì sao cần: .topbar là ANH EM của .page, cao ~57px và nằm NGOÀI nó. Nên "thanh trên 57 + .page tối thiểu một màn" = một màn + 57px, và trang cuộn được đúng 57px đó dù nội dung vừa khít. Cuộn ngắn kiểu này tệ hơn cuộn dài: bánh xe nhích lên rồi dội lại, ô soạn tin trôi khỏi mép dưới. Không sửa thẳng .page vì nó là khung của cả 48 trang; trang nào tự đặt chiều cao thì tự gỡ sàn. */ .page-mot-man { min-height: 0; } .mobilebar { display: none; } /* Bang si khach xem (/si-bang) — trang CONG KHAI, khong co sidebar nen tu giang het be ngang (Dat 17/08: "bung ra tran man di dung co giua nua"). Hai cot: bo loc dinh trai, danh sach chiem phan con lai. */ .sb-than { display: flex; gap: 22px; align-items: flex-start; padding: 0 clamp(14px, 2.6vw, 44px) 0; } .sb-loc { flex: 0 0 300px; width: 300px; position: sticky; top: 14px; max-height: calc(100dvh - 28px); overflow-y: auto; } .sb-ds { flex: 1; min-width: 0; } .sb-ngang { padding: 0 clamp(14px, 2.6vw, 44px); } .bottomnav { display: none; } /* ── Thu gọn menu (Đạt 24/07: iPad bị menu che) ── Trạng thái lưu ở localStorage, gắn lên trước khi vẽ (script trong ) nên không nháy. Chỉ áp ở ≥900px — dưới đó đã là bottom-nav, không có sidebar để thu. ── THU = HẸP LẠI CÒN HÌNH, KHÔNG PHẢI BIẾN MẤT (Đạt chốt 21/08) ── Bản cũ đẩy cả thanh ra khỏi màn ("translateX(-100%)"). Đổi lấy 150px bề ngang thì mất SẠCH đường đi: muốn sang trang khác phải bung menu ra, chọn, rồi thu lại — ba thao tác cho một cú nhảy. Nên người ta hoặc không thu bao giờ (mất chỗ), hoặc thu rồi đi bằng nút Lùi của trình duyệt (lạc). Rail giữ được 90% giá trị: hình vẫn bấm được, mục đang mở vẫn sáng, huy hiệu chat chưa trả lời vẫn thấy. Chỉ mất chữ — mà chữ thì "title" rê chuột ra. 64px là bề ngang tối thiểu để hình 18px nằm giữa mà vùng chạm vẫn ≥44px. Điều kiện để rail đọc được: MỖI MỤC MỘT HÌNH RIÊNG. Bỏ chữ đi thì hai mục trùng hình là hai nút y hệt nhau. "tests/nav-rail.spec.ts" gác chỗ đó. */ .sidebar, .page, .topbar { transition: margin-left .18s ease, width .18s ease; } html[data-nav="an"] .sidebar { width: 64px; padding: 20px 8px 12px; overflow-x: hidden; } html[data-nav="an"] .page, html[data-nav="an"] .topbar { margin-left: 64px; } /* Chữ, tên nhóm, dòng tên người dùng: giấu bằng "display:none" chứ không "width:0" — chữ rộng 0 vẫn chiếm dòng và vẫn bị trình đọc màn hình đọc. */ html[data-nav="an"] .sbtx, html[data-nav="an"] .sbgroup, html[data-nav="an"] .sb-danh { display: none; } html[data-nav="an"] .sblink { justify-content: center; padding: 11px 0; gap: 0; position: relative; } /* Mục đang mở: rail không còn nền chữ dài để nhận ra, nên vệt vàng phải rõ hơn. */ html[data-nav="an"] .sblink.on { box-shadow: inset 3px 0 0 var(--gold); } /* Huy hiệu co thành CHẤM đè góc hình. Con số 4 chữ ("2951") không lọt 64px, mà bỏ hẳn thì mất đúng thứ Đạt bảo phải thấy: chat còn nợ khách. Chấm nói "có việc" — bấm vào là ra số. */ html[data-nav="an"] .sbbadge { position: absolute; top: 7px; right: 14px; width: 7px; height: 7px; padding: 0; margin: 0; border-radius: 50%; background: var(--danger-tm); /* -tm: dam nam tren nen muc */ font-size: 0; overflow: hidden; } /* Logo dạng rail: ĐỔI CHỖ ảnh wordmark lấy một chữ M. Ảnh gốc 1199x481; thu xuống bề rộng 40px là cao 16px, và cả chữ MOYAR nén vào 16px thành một vệt mờ không đọc ra chữ nào (đo 30/08). Luật cũ ở đây tự khai "chỉ còn chữ M đầu" nhưng chỉ đặt bề rộng, chưa bao giờ làm được. Đổi bằng CSS chứ không bằng state React: trạng thái rail do script chạy trước khi vẽ gắn lên thẻ html, React đọc vào là lệch hydration. */ .sblogo-m { display: none; } html[data-nav="an"] .sblogo-img { display: none; } /* Mau chu PHAI khai o day. Anh wordmark la anh TRANG, con .sblogo-m thua mau chu tu .sblogo, ma khoi do khong khai mau nen no roi ve --ink cua body: do 30/08 la #1B2038 tren nen #2A3358, tuong phan 1.31 — chu M gan nhu vo hinh, anh chup trong doc duoc chi nho khu rang cua. */ html[data-nav="an"] .sidebar .sblogo-m { display: block; font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--side-tx); } html[data-nav="an"] .sidebar .sblogo { padding: 2px 0 6px; text-align: center; } html[data-nav="an"] .sblogo div { display: none; } /* Chân menu: vòng chữ cái + nút thoát. Ở dạng menu chúng nằm CẠNH nhau (32px + khe 10 + nút 30 = 72px, vừa trong 190px). Ở rail thì lòng trong chỉ còn 48px — xếp ngang là nút thoát tràn ra tận 90px, đè lên nội dung trang. Xếp DỌC thì cả hai vẫn còn: biết mình đang đăng nhập bằng ai, và vẫn thoát được mà không phải bung menu ra. */ html[data-nav="an"] .sb-chan { flex-direction: column; gap: 6px; padding: 12px 0 4px; } .navthu { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--line); background: var(--card-2); color: var(--muted); cursor: pointer; } .navthu:hover { color: var(--ink); border-color: var(--gold); } /* ── Top-bar chung (mockup 18/07): breadcrumb + tìm đơn. KHÔNG sticky — .fbar của trang đang sticky top:0, topbar dính sẽ đè lên nó ── */ /* Thanh trên từng bị LỘN MÀU so với bản vẽ: nó lấy nền thẻ (sáng) còn ô tìm kiếm lấy nền phụ (tối) — nhìn ra một dải trắng vắt ngang đầu trang, khác hẳn bản vẽ. Bản vẽ để thanh trên BẰNG nền trang, ô tìm kiếm mới là mảng sáng nổi lên. Ô tìm kiếm cũng flex:1 chứ không kẹp 420px, nếu không màn rộng là nó teo lại một góc. */ .topbar { margin-left: 214px; display: flex; align-items: center; gap: 16px; padding: 11px 26px; border-bottom: 1px solid var(--line-2); background: var(--paper); } .topsearch { flex: 1; max-width: 720px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; background: var(--card); color: var(--muted); } .topsearch:focus-within { border-color: var(--gold); } .topsearch input { border: none; outline: none; background: transparent; width: 100%; font-size: 12.5px; color: var(--ink); } @media (max-width: 900px) { .topbar { display: none; } } @media (max-width: 900px) { /* ── ĐẦU TRANG TRÊN ĐIỆN THOẠI (.pghead) ───────────────────────────── Dùng chung cho mọi trang có khối tiêu đề: Tổng quan, Dòng tiền… Trước 08/08 cụm luật này nằm trong the style RIÊNG của Tổng quan nên trang khác không ăn — chép sang từng trang là kiểu lệch nhau ngay lần sửa đầu. (Chữ "the style" viết trần, TUYỆT ĐỐI không gõ dạng thẻ có ngoặc nhọn trong comment CSS này: SSR escape ký tự s mở thẻ thành mã CSS "73" còn client giữ nguyên chữ → hydration mismatch TOÀN APP, React âm thầm dựng lại cây mỗi lượt tải, máy chậm thì thỉnh thoảng văng hẳn ra trang lỗi — tốn 4 vòng CI ngày 13/08 mới tóm được. Backslash cũng cấm: cả khối là template literal, escape lạ là hỏng build.) Trang nào muốn đảo thứ tự con (ví dụ Tổng quan đẩy .pghead lên trên băng cảnh báo phí) thì tự khai .ckpage + order ở trang đó. */ /* Băng cảnh báo biểu phí dựng TRƯỚC khối tiêu đề trong mã (trên máy tính nó đứng đầu trang, đúng bản vẽ 1A). Trên điện thoại thứ tự đó làm nó chen vào GIỮA thanh MOYAR và khối tối — hai mảng đen kẹp một dải hổ phách. Bản vẽ 1B để nó nằm dưới khối tối. Đảo bằng order chứ không dời mã, để bản máy tính giữ nguyên. */ .pghead { /* Tràn ra hết mép màn để nối liền .mobilebar (main đang padding 14/20). */ margin: -14px -20px 14px; padding: 12px 16px 14px; background: var(--side-bg); color: var(--side-tx); } .pgcrumb { display: none; } /* thanh MOYAR ngay trên đã nói rồi */ /* !important CHO CẢ h1, không riêng . Bản 08/08 chỉ đặt !important ở .pghead p b nên tiêu đề lọt lưới: tien/page.tsx:74 và flow/page.tsx:154 đều viết
, mà style inline luôn thắng stylesheet. --ink và --side-bg CÙNG LÀ #1A1714 ⇒ trên điện thoại hai trang đó hiện khối tối rỗng, tiêu đề tàng hình hoàn toàn. Không phải chữ mờ khó đọc — là không thấy gì. */ .pghead h1 { color: var(--side-tx) !important; font-size: 23px; margin-top: 0; } .pghead p { color: var(--side-tx); font-size: 11.5px; } /* Chữ nhấn trong đoạn mô tả hay để color:var(--ink) — trên nền tối là ĐEN TRÊN ĐEN, mất hẳn chữ. Bắt sáng lại, và phải !important vì nó là inline. */ .pghead p b { color: var(--on-dark-tx) !important; font-weight: 600; } /* Cùng lý do, chữ nhấn nằm ngoài
(flow đặt trong
xếp ngang). */ .pghead b, .pghead strong { color: var(--on-dark-tx) !important; } /* Pill "Cập nhật · tạm tính" phải đọc được trên nền tối */ /* Ẩn breadcrumb rồi thì margin-left:auto không còn gì để đẩy — pill trôi sang phải, hở một mảng trống bên trái. Kéo về sát lề. */ .pghead .pgasof { background: var(--side-line); color: var(--warn-tm); margin-left: 0 !important; } .pghead .pgasof > span:first-child { background: var(--warn-tm); } /* Thanh lọc trong khối tối: bỏ nền kem + sticky (sticky ở đây làm nó dính lơ lửng giữa màn khi cuộn, che mất số). XUỐNG HÀNG, không cuộn cả thanh. Bản đầu cho cả .fbar cuộn ngang: sáu nút chọn kỳ ăn hết bề ngang nên ô "Theo sổ kế toán", "Mọi kênh" và nút CSV bị đẩy khuất ra ngoài mép phải — muốn đổi cách tính doanh thu phải đoán ra là vuốt được. Nay chỉ HÀNG NÚT KỲ cuộn, phần còn lại rơi xuống dòng dưới. */ .pghead .fbar { position: static; background: none; backdrop-filter: none; padding: 10px 0 0; gap: 7px; flex-wrap: wrap; } /* Nút chọn kỳ: từ khối liền viền vuông → các VIÊN rời, đúng bản vẽ. Đây là span inline-style nên phải với vào bằng con trực tiếp. */ .pghead .fbar > span:first-child { border: none !important; border-radius: 0 !important; background: none !important; display: flex; gap: 7px; flex-wrap: nowrap !important; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .pghead .fbar > span:first-child::-webkit-scrollbar { display: none; } .pghead .fbar > span:first-child > button { flex: 0 0 auto; } /* Nút đang chọn nhận diện bằng CLASS .on, không dò chuỗi style. Bản đầu viết [style*="var(--ink)"] — nó khớp luôn cả nút KHÔNG chọn, vì màu chữ của nút đó là var(--ink-SOFT), chứa nguyên chuỗi đang dò. */ .pghead .fbar > span:first-child > button { border-radius: 999px !important; border-right: none !important; padding: 6px 14px !important; font-size: 12.5px; background: var(--side-line) !important; color: var(--side-tx) !important; } .pghead .fbar > span:first-child > button.on { background: var(--gold-soft) !important; color: var(--ink) !important; } /* Ô chọn / nút CSV trên nền tối */ /* Vien lay --side-dim chu khong --side-line: nen cua chinh no da la --side-line roi, hai thu cung mau thi mat luon duong vien. */ .pghead .fbar .fbtn, .pghead .fbar select.fbtn, .pghead .fbar input.fbtn { background: var(--side-line); border-color: var(--side-dim); color: var(--side-tx); } /* Chiều cao HAI thanh điều hướng cố định của bản điện thoại. Trang nào cần "vừa đúng một màn" (CRM chat) trừ hai số này ra là ra phần dùng được. 100dvh chứ KHÔNG 100vh: trên iOS 100vh tính theo màn hình lúc thanh địa chỉ ĐÃ thu, nên khi thanh còn hiện thì đáy trang (ô nhập + nút Gửi) nằm dưới mép màn — đúng thứ Đạt gặp khi thử chat bằng điện thoại. */ :root { --nav-tren: calc(48px + env(safe-area-inset-top)); --nav-duoi: calc(60px + env(safe-area-inset-bottom)); } .sidebar { display: none; } /* Dien thoai: mot cot, bo loc gap len tren nhu cu (ban ve 8B). */ .sb-than { display: block; padding: 0; } .sb-loc { position: static; width: auto; max-height: none; } .sb-ngang { padding: 0; } /* min-height 100vh cũ + thanh trên + padding dưới = trang LUÔN dài hơn màn một đoạn, lúc nào cũng nhấp nhổm cuộn dọc dù nội dung ngắn. */ .page { margin-left: 0; min-height: calc(100dvh - var(--nav-tren) - var(--nav-duoi)); } /* Chừa VÙNG TAI THỎ. Cài ra màn hình chính + black-translucent thì nội dung tràn lên dưới thanh trạng thái — đẹp, nhưng không chừa thì logo nằm chồng lên đồng hồ iOS (Đạt bắt được ngay ảnh đầu tiên, 02/08). env() bằng 0 trên trình duyệt thường nên không ảnh hưởng máy tính. */ /* KHÔNG kẻ viền dưới: trang Tổng quan nối .pghead (cũng nền tối) ngay bên dưới, một vạch sáng cắt ngang giữa hai mảng cùng màu nhìn như lỗi dựng. Các trang khác có nội dung nền kem — tự nó đã tách bằng màu rồi. */ .mobilebar { display: flex; align-items: center; gap: 8px; padding: calc(11px + env(safe-area-inset-top)) 16px 11px; background: var(--side-bg); color: var(--gold-soft); position: sticky; top: 0; z-index: 15; } /* 66px cũ là số CỨNG — máy có vùng vuốt dưới (iPhone X trở đi) thì thanh nav cao hơn 66px, dòng cuối trang chui xuống dưới nó. */ body { padding-bottom: var(--nav-duoi); } /* Nav dưới: 5 mục chính + "Thêm" = 6 nút, phần còn lại vào "Thêm" — vừa màn 390px (390 − 12 padding = 378 ÷ 6 ≈ 63px/nút, vùng bấm vẫn > 44px như yêu cầu 27/07) */ /* Thanh dưới màu KEM, không phải tối (bản vẽ 1B dòng 497). Bản cũ để tối giống sidebar máy tính — thành ra màn điện thoại bị hai dải đen kẹp trên dưới, phần nội dung ở giữa trông như nhét vào khe. */ .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px color-mix(in srgb, var(--bong) 6%, transparent); justify-content: space-around; gap: 2px; padding: 9px 6px calc(9px + env(safe-area-inset-bottom)); } .bottomnav a { flex: 1 1 0; text-decoration: none; color: var(--muted); font-size: 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; /* Nhãn dài ("Tổng quan") bị CẮT chứ không đẩy thanh rộng ra khỏi màn — min-width:44px cũ khiến 6 nút cộng lại tràn ở màn hẹp. */ min-width: 0; overflow: hidden; white-space: nowrap; } .bottomnav a .ic { font-size: 18px; line-height: 1.2; } .bottomnav a.on { color: var(--ink); font-weight: 500; } } /* ── CRM Chat: MỘT khung mỗi lần trên điện thoại ────────────────────────────── Trang /crm là trang duy nhất phải VỪA ĐÚNG MỘT MÀN chứ không cuộn dài: ô nhập tin phải luôn nhìn thấy, danh sách tin cuộn bên trong. Bố cục 3 cột đặt gridTemplateColumns bằng INLINE STYLE nên media query không với tới được — việc chọn 1 cột / 3 cột do chính trang quyết (state dienThoai), ở đây chỉ lo chiều cao và cuộn. Đổi con số ở :root --nav-* phía trên là cả trang theo. */ /* ── TRANG /crm CAO ĐÚNG MỘT MÀN, KHÔNG CUỘN (Đạt 21/08: "cố định luôn") ── Trước đây trang dư 57px và cuộn được một đoạn ngắn. Cuộn ngắn tệ hơn cuộn dài: bánh xe chuột nhích trang lên vài chục pixel rồi dội lại, ô soạn tin trôi khỏi mép dưới, và hàng nút đầu khung chat trôi khỏi mép trên — trong khi ba cột bên trong ĐỀU CÓ cuộn riêng của chúng. Cách làm giống hệt bản điện thoại (luật ở ngay dưới, có từ đợt 2E-1): khung cao đúng một màn, "overflow: hidden", và cho lưới bên trong "flex: 1". Chiều cao lấy bằng "100dvh - <đỉnh của chính nó>", đo bằng biến CSS "--crm-dinh" do trang tự đặt — không gõ cứng chiều cao thanh trên, vì thanh đó cao bao nhiêu còn tuỳ breadcrumb gãy mấy dòng. "dvh" chứ không "vh": trên iPad Safari "vh" tính theo màn lúc thanh địa chỉ ĐÃ thu, nên khi nó còn hiện thì đáy trang nằm dưới mép — cùng cái bẫy đã ghi ở "--nav-duoi". */ .crm-main { width: 100%; padding: 14px 20px 14px; height: calc(100dvh - var(--crm-dinh, 57px)); display: flex; flex-direction: column; overflow: hidden; } .crm-grid { overflow-wrap: break-word; } /* link dài trong tin không đội cột ra */ .crm-grid > * { min-width: 0; } /* KHÔNG có dòng này thì ô grid phình theo nội dung rộng nhất → cuộn ngang */ @media (max-width: 900px) { .crm-main { height: calc(100dvh - var(--nav-tren) - var(--nav-duoi)); padding: 8px 12px 0; display: flex; flex-direction: column; overflow: hidden; } .crm-mota { display: none; } /* đoạn mô tả dài — để dành chỗ cho tin */ /* ── iOS TU PHONG TO KHI CHAM VAO O NHAP ──────────────────────────────── Dat 27/08: "sao toi bam vo khung chat no bi zoom vo khong giong kieu messenger va vpage". Khong phai loi bo cuc. Safari tren iPhone tu phong trang len khi o nhap duoc focus co co chu DUOI 16px — de chu doc duoc. O soan tin dang de 13.5px nen dinh; o cua Vpage 16px nen khong. Phong xong trang rong hon man, nguoi ta phai vuot ngang de thay nut Gui. Khong chua duoc bang viewport: tu iOS 10 Safari BO QUA user-scalable=no va maximum-scale (luat tro nang), va van tu phong khi focus. Duong duy nhat la co chu >= 16px. Dung !important vi nhieu o nhap dat co chu bang inline style ben page.tsx, ma inline luon thang CSS — khong co no thi luat nay im lang khong an dung o quan trong nhat. Chua checkbox/radio ra: co chu khong doi gi hinh dang chung, ma dat 16px thi mot so trinh duyet ve o to hon. */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; } /* Bu lai 6px ma co chu 16px vua lay cua luong tin: dem doc o soan 10 -> 7px. Luong tin tren 390x844 chi dư 3px so voi nguong 320 neu khong bu. */ .crm-composer { --dem-doc: 7px; } .crm-grid { flex: 1; min-height: 0; } .crm-grid > * { height: 100%; } /* Panel phải: cuộn CẢ cột (tab + nội dung) thay vì tự giới hạn 76/80vh — inline style nên phải !important, đây là chỗ duy nhất dùng nó. */ .crm-panel { max-height: none !important; /* Tấm trượt là flex-column KIÊM hộp cuộn: con flex:1 trong đó bị bóp về gần 0 trước khi thanh cuộn kịp chạy (01/09: form Tạo đơn còn đúng một ô, hàng tab cắt nửa dòng). Trên điện thoại mọi section đứng theo chiều cao THẬT, cả tấm cuộn. */ flex: 0 0 auto !important; } /* Ô soạn tin dính đáy khung chat. Khung chat cao đúng 1 màn nên nó đã nằm đáy sẵn; sticky là lưới an toàn cho lúc bàn phím đẩy bố cục. */ .crm-composer { position: sticky; bottom: 0; z-index: 3; background: var(--card); border-radius: 0 0 12px 12px; } /* Hàng nút dài (Khiếu nại · Tạo đơn · Làm mới…) cuộn NGANG TRONG hàng của nó — cuộn ngang ở đây không tính là trang tràn, và nó giữ hàng cao đúng 1 dòng. */ .crm-hang-cuon { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } .crm-hang-cuon::-webkit-scrollbar { display: none; } .crm-hang-cuon > * { flex: 0 0 auto; } /* ── CHẾ ĐỘ TẬP TRUNG — đang ở TRONG một hội thoại trên điện thoại ──────── Bản vẽ 2A không vẽ một màn nào; nó là một bản tính chỗ, tiêu đề nguyên văn "Máy đang lấy 307pt để nói những điều nhân viên đã biết". Cộng lại trên màn 390x844: logo MOYAR 56 + tiêu đề trang 52 + thanh dưới 84 + ... = 307pt khung máy, luồng tin còn 269pt — thấy đúng 2 tin. Bỏ những thứ nhân viên đã biết (mình đang ở app Moyar, mình đang ở mục Chat) thì còn 135pt, luồng tin lên 597pt: 5 tin. Chỉ bật khi ĐANG MỞ MỘT HỘI THOẠI và đang xem khung chat. Ở danh sách thì vẫn cần thanh dưới để đi mục khác — người ở danh sách là người đang chọn việc, người trong hội thoại là người đang làm việc. Đường thoát KHÔNG mất: nút quay lại đầu khung chat vẫn còn (nó là đường chính từ trước), và bỏ tập trung là thanh dưới hiện lại ngay. Vì sao khoá theo class trên body chứ không đổi inline style: hai thanh nav do layout vẽ, trang /crm không với tới chúng. Class là chỗ nối duy nhất. Đặt lại --nav-tren/--nav-duoi ngay tại đây thay vì sửa .crm-main: mọi thứ khác đã trừ theo hai biến này rồi, sửa một chỗ là cả trang theo. (Chú thích trong khối này KHÔNG được có dấu huyền ngược — cả khối là một template literal, một dấu là đóng chuỗi sớm và hỏng toàn app. Đã dính một lần 08/08, e2e đỏ ngẫu nhiên suốt năm ngày.) */ body.crm-tap-trung { --nav-tren: var(--an-toan-tren); --nav-duoi: 0px; padding-bottom: 0; } body.crm-tap-trung .mobilebar, body.crm-tap-trung .bottomnav { display: none; } /* Chừa tai thỏ: thanh trên biến mất thì đầu khung chat leo lên dưới đồng hồ iOS. Dùng biến vùng an toàn thật, KHÔNG gõ cứng 44px hay 126px như bản vẽ — bản vẽ dùng số cứng ở 17 khung và không dùng vùng an toàn lần nào. */ /* CHIỀU CAO ĐẶT LẠI THÀNH TRỌN MÀN — đừng bỏ dòng "height" này (Đạt 26/08: "trong khung chat bị khoảng trắng", ảnh chụp iPhone). Công thức chung ở trên là "100dvh - --nav-tren - --nav-duoi", và nó ĐÚNG ở chế độ thường vì .mobilebar thật sự đứng trên .crm-main và ăn đúng --nav-tren pixel. Ở chế độ tập trung thì .mobilebar display:none — không còn gì chiếm chỗ đó nữa, nhưng công thức vẫn trừ. Vùng tai thỏ do đó bị chừa HAI LẦN: một lần trong "height", một lần nữa ở "padding-top" ngay dưới đây. Kết quả là một dải trắng đúng bằng tai thỏ + thanh vuốt nằm dưới ô soạn tin — đo trên hình học iPhone 15 Pro: 94px. Ở đây .crm-main là thứ DUY NHẤT trên màn, nên chiều cao của nó đúng bằng một màn, và hai vùng an toàn là PADDING chứ không phải phần bị trừ. padding-bottom về 0 để thẻ chat chạm mép dưới; thanh vuốt do chính ô soạn tin chừa, qua biến --dem-day (xem ngay dưới). Chừa ở đây thì lại thành dải trắng 34px, chỉ là mỏng hơn. */ body.crm-tap-trung .crm-main { height: 100dvh; padding-top: calc(8px + var(--an-toan-tren)); padding-bottom: 0; } /* Ô soạn tin tự chừa thanh vuốt của iPhone, bên TRONG thẻ. Truyền bằng biến chứ không viết thẳng "padding-bottom" ở đây: padding của ô soạn là inline style bên page.tsx, mà inline luôn thắng CSS — sửa ở đây sẽ im lặng không ăn, trừ khi dùng !important (thứ tệp này cố tránh). */ body.crm-tap-trung .crm-composer { --dem-day: var(--an-toan-duoi); } } /* ── Hàng soạn tin: xếp hai dòng khi CỘT CHAT hẹp ────────────────────────── Luật này từng nằm trong @media (max-width: 900px) — tức nó nhìn bề ngang MÀN HÌNH. Sai chỗ: thứ bóp ô nhập là bề ngang CỘT CHAT. Ở màn 1440px, lưới ba cột (320 · 1fr · 470 + khe) chia cho cột chat đúng ~368px — gần bằng màn điện thoại 390px vốn đã được công nhận là hỏng. Ảnh Playwright chụp 05/08 bắt tận tay: ô nhập còn 59px, chữ vỡ thành ba dòng một âm tiết. Container query hỏi đúng câu cần hỏi: "cái hộp CHỨA hàng này rộng bao nhiêu", nên nó phủ cả điện thoại lẫn cột chat hẹp trên máy tính — một luật thay vì hai, và không thể lệch nhau nữa. Ngưỡng 480px: 4 nút công cụ + "Gửi" + khe ăn ~286px; dưới mốc này ô nhập tụt xuống dưới 180px, tức không còn thấy nổi câu vừa gõ. */ /* BA CHAM NHAY cua chi bao "dang go" (0237). Day la @keyframes DAU TIEN trong ca frontend - truoc gio khong co animation nao. Vi sao dang nhay chu khong phai chu tinh: chu "dang go" dung yen trong 5 giay giua hai lan poll trong y het mot dong chu chet. Ba cham nhay noi duoc dieu ma chu khong noi duoc - rang thu nay dang SONG. prefers-reduced-motion: co nguoi tat chuyen dong vi chong mat that. Tat animation va de opacity co dinh - van doc duoc, chi khong nhay. */ @keyframes crm-go { 0%, 60%, 100% { opacity: .22 } 30% { opacity: 1 } } .crm-go-cham { animation: crm-go 1.25s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .crm-go-cham { animation: none; opacity: .65; } } /* ── HÀNG TAB CỘT PHẢI trên MÁY TÍNH ──────────────────────────────────── Chín nút đều mang icon, trong một cột 404px thì xuống ba dòng và ăn ~120px chiều cao trước khi thấy được nội dung tab nào. KHÔNG dùng lại .crm-hang-cuon: lớp đó nằm trong @media (max-width: 900px) nên trên máy tính vô hiệu, và nó đặt flex-wrap: nowrap !important — trạng thái "bày hết" sẽ không xuống dòng được. Ở đây không dùng !important, nên .mo-het đè lại bình thường. Không có "> * { flex: 0 0 auto }" cho nút thu/mở, vì nút đó đứng NGOÀI hộp. */ /* Tên chai / tên listing bấm được: KHÔNG gạch chân thường trực. Đạt 30/08: "cái gạch dưới chân nhìn xấu quá". Tên ở đây hay dài hai dòng, mà gạch chân chạy dưới CẢ HAI dòng, kể cả dòng thứ hai cụt lủn — thành ra mỗi hàng có một vệt gãy. Danh sách 211 dòng thì đó là 211 vệt. Đổi sang hiện lúc rê chuột, và đổi luôn màu chữ để lúc đó nói rõ là bấm được. Đứng yên thì hàng sạch; vẫn còn con trỏ tay, thuộc tính title và vòng hội tụ bàn phím làm dấu. */ .crm-ten-mo { text-decoration: none; } .crm-ten-mo:hover { color: var(--link); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; text-decoration-color: var(--link); } .crm-ten-mo:focus-visible { color: var(--link); } .crm-cuon-tab { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .crm-cuon-tab::-webkit-scrollbar { display: none; } .crm-cuon-tab > * { flex: 0 0 auto; } .crm-cuon-tab.mo-het { flex-wrap: wrap; overflow-x: visible; } @media (prefers-reduced-motion: reduce) { .crm-cuon-tab { scroll-behavior: auto; } } .crm-composer { container-type: inline-size; } /* NGƯỠNG 620, không phải 480 (29/08). Đo trên màn 1440: cột chat rộng 368px khi menu mở, nhưng 518px khi menu thu gọn — mà bản vẽ desktop chính là màn có menu thu gọn (rail 64px, đúng bằng .sidebar thu gọn của OS). Ở 518px ngưỡng 480 không ăn, nên ô soạn tin rơi về bố cục MỘT DÒNG và ô nhập bị bóp còn ~180px ngồi cạnh năm cái nút. Bản vẽ ở 580px vẫn để hàng nút một dòng, ô nhập một dòng. Cột chat chỉ vượt 620px khi thu CẢ HAI cột bên — lúc đó một dòng là đúng. */ @container (max-width: 620px) { /* HÀNG NÚT LÊN TRÊN, Ô NHẬP XUỐNG DƯỚI cạnh nút Gửi (Đạt 29/08: "để 5 nút lên trên cái chat thay vì nằm cạnh"; đúng bản vẽ khung 1D). Bản trước làm NGƯỢC: order:-1 kéo ô nhập lên đầu, nút dồn xuống dưới. Hai cái giá của lối đó — ô nhập nằm xa mép dưới nhất, tức xa ngón cái nhất trên máy cầm tay; và nút Gửi bị margin-left:auto đẩy sang tận mép phải, cách ô vừa gõ cả bề ngang màn. Nay thứ tự DOM tự lo: nút đứng trước, ô nhập và Gửi đứng sau. Chỉ cần ô nhập KHÔNG chen vừa cạnh hàng nút thì nó tự xuống dòng, kéo Gửi theo. flex:1 1 60% chứ không phải 100%: 100% thì ô nhập độc chiếm một dòng và Gửi rơi xuống dòng thứ BA. 60% của 366px là 220px — vừa đủ chỗ cho Gửi nằm cùng dòng, và vẫn trên sàn 180px mà crm-dien-thoai.spec.ts chốt cho ô nhập. !important vì ô nhập đã có flex:1 đặt sẵn bằng style inline. */ .crm-hang-gui { flex-wrap: wrap; } .crm-hang-gui textarea { flex: 1 1 60% !important; min-height: 46px; } } @media (max-width: 480px) { .kval { font-size: 16px; letter-spacing: -0.3px; } } @media (max-width: 560px) { .rtable thead { display: none; } .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; white-space: normal; } .rtable tr { border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; margin-bottom: 9px; background: var(--card); } .rtable td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 3px 0; } .rtable td:first-child { font-weight: 600; max-width: none; display: block; padding-bottom: 5px; } .rtable td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 400; } }