/* WVEP.Web/wwwroot/css/wvep-cogian.css */ /* Tầng CO GIÃN THEO MÀN HÌNH của WVEP, dùng chung cho mọi cửa. VÌ SAO TÁCH RIÊNG MỘT TỆP. wvep.css là bảng kiểu dáng của tám mươi màn nghiệp vụ, wvep-cong.css là bảng kiểu dáng của cái vỏ mọi cửa. Luật co giãn thì cắt ngang cả hai: một mốc bề rộng phải sửa đồng thời khung điều hướng, thanh trên, lưới biểu mẫu và bảng dữ liệu. Nhét những luật ấy rải rác vào hai tệp kia thì mỗi lần đổi một mốc phải đi lùng khắp hai nghìn dòng. Gom về đây thì mở đúng một tệp là thấy toàn bộ hành vi của hệ thống ở từng bề rộng. Tệp này nạp SAU hai tệp kia, nên mọi dòng ở đây đè lên dòng cùng tên ở đó. Đó là chỗ dựa của toàn bộ các khối theo bề rộng phía dưới. BẢY MỐC BỀ RỘNG, đi từ rộng xuống hẹp: 1400 màn rộng lưới nhập ba cột, lề thoáng nhất 1200 máy tính xách tay thân trang thu lề, bảng bắt đầu cuộn trong khung 1100 máy tính bảng ngang lưới nhập và lưới xem về hai cột 900 máy tính bảng dọc khung điều hướng thành ngăn trượt, có nút ba gạch 760 điện thoại lớn lưới về một cột, thanh trên rút gọn còn ba thứ 560 điện thoại đầu trang xuống dòng, ô lọc chiếm trọn hàng 400 điện thoại nhỏ lề nhỏ nhất, cỡ chữ tiêu đề hạ xuống ĐƠN VỊ. Chỗ nào chứa chữ thì đo bằng rem chứ không đo bằng pixel, để người chỉnh cỡ chữ hệ thống lên lớn thì cái khung nở theo chứ không bóp chữ vào một cái hộp cứng rồi đẩy chữ tràn ra ngoài. Pixel chỉ còn ở đúng ba chỗ không liên quan tới chữ: bề dày đường viền, bán kính bo góc và mốc của khối theo bề rộng. LUẬT BẤT BIẾN. Thân trang không bao giờ trôi ngang, ở bất kỳ bề rộng nào. Bảng dài thì cuộn trong khung riêng của nó. Đây là luật được đo lại bằng máy sau mỗi lần sửa chứ không phải lời hứa suông. */ /* ------------------------------------------------------------------ Phần một: hàng rào chống trôi ngang, áp cho MỌI bề rộng ------------------------------------------------------------------ */ /* Ba tấm chắn xếp chồng. Tấm ngoài cùng là cái vỏ và cái thân: chúng không được rộng hơn chỗ còn lại của cửa sổ. Tấm giữa là những thứ vốn có kích thước riêng: ảnh, khung nhúng, bảng, khối mã. Tấm trong cùng là ô nhập, thứ hay tự đòi bề rộng mặc định của trình duyệt rồi chọc thủng cả hàng. min-width: 0 trên .wv-vo và .wv-than là dòng quan trọng nhất ở đây. Phần tử con của lưới và của flex mặc định KHÔNG chịu co xuống dưới bề rộng nội dung của nó, nên chỉ một cái bảng rộng nằm sâu bên trong cũng đủ nong cả cái thân ra và kéo theo cả trang. */ .wv-vo, .wv-than { min-width: 0; } /* max-width chỉ đặt cho CÁI VỎ, không đặt cho cái thân. Cái thân đã có trần bề rộng đọc được của riêng nó ở wvep-cong.css, và tấm này nạp SAU nên một dòng max-width 100% ở đây thắng trần ấy: trên màn rất rộng thân trang kéo dài hết cửa sổ thay vì dừng lại ở bề rộng đọc được. Đo được ngày 26 tháng 8 năm 2026 bằng phép quét mọi bộ chọn khai ở hai tệp, đây là một trong ba chỗ khai CÙNG thuộc tính với HAI giá trị khác nhau. */ .wv-vo { max-width: 100%; } .wv-than img, .wv-than svg, .wv-than video, .wv-than iframe, .wv-than pre { max-width: 100%; } .wv-o-nhap, .wv-than input, .wv-than select, .wv-than textarea { max-width: 100%; box-sizing: border-box; } /* Ô nhập nhiều dòng chỉ được kéo cao chứ không được kéo ngang. Kéo ngang thì người dùng tự tay làm trang trôi ngang, mà đó đúng là thứ cả tệp này đang chống. */ .wv-than textarea { resize: vertical; } /* Chữ dài không có dấu cách, ví dụ một địa chỉ thư điện tử hay một đoạn mã, phải được phép ngắt giữa chừng. Không cho ngắt thì nó nong ô chứa nó ra bằng đúng chiều dài của nó và không ô nào giữ lại được. */ /* PHẢI là break-word chứ KHÔNG được là anywhere, và đây là chỗ khác nhau đắt giá. anywhere cho phép ngắt ở bất kỳ đâu, và nó kéo theo một hệ quả ít ai ngờ: bề rộng tối thiểu của ô tụt xuống còn ĐÚNG MỘT CHỮ CÁI. Trình duyệt chia bề ngang bảng theo bề rộng tối thiểu của từng cột, nên trong một bảng mười cột mà mấy cột tiền đều cấm xuống dòng, cột chữ bị bóp về đúng một chữ cái và tên tour đổ dọc mỗi dòng một chữ. Đã nhìn thấy tận mắt ở màn Bảng chiết tính. break-word vẫn cắt được một chuỗi dài không có dấu cách, ví dụ một địa chỉ thư điện tử, nhưng KHÔNG hạ bề rộng tối thiểu của ô xuống. Cột chữ giữ được chỗ của nó. */ .wv-bang td, .wv-luoi-xem > div, .wv-o-tom-tat { overflow-wrap: break-word; } /* ------------------------------------------------------------------ Phần hai: cột số tiền và cột ngày ------------------------------------------------------------------ */ /* Đây là hai chỗ DUY NHẤT còn giữ luật không xuống dòng trong toàn hệ thống. Số tiền bị ngắt giữa chừng thì đọc ra một con số khác: 1.795.000 vỡ thành 1.795 và 000 nằm hai dòng, mắt người đọc hàng trên rồi bỏ hàng dưới. Ngày tháng cũng vậy, 24/08/2026 vỡ làm hai thì không còn là một ngày nữa. Mọi chỗ khác đều được phép xuống dòng, vì chữ xuống dòng chỉ xấu chứ không sai. */ /* Chỉ ô dữ liệu mới cấm xuống dòng, còn ô tiêu đề thì không. Tiêu đề cột kiểu Doanh thu sau thuế dự kiến mà cấm xuống dòng thì một mình nó nong cột ra gấp ba lần con số nằm dưới, và cả bảng dài thêm vô ích. */ .wv-bang td.wv-phai, .wv-bang td.wv-cong, .wv-bang td.wv-o-so, .wv-bang td.wv-so, .wv-bang td.wv-so-tinh, .wv-bang td.wv-o-ngay, .wv-o-tom-tat .wv-gia-tri, .wv-tuoi-o .wv-gia-tri, .wv-the-lai .wv-gia-tri { white-space: nowrap; } /* Ô nhập nằm trong một cột số tiền thì bản thân nó vẫn phải co được, chỉ có con số hiện ra là không được ngắt. Không mở lại thì cái ô cứng đờ đúng bằng bề rộng cột. */ .wv-bang td.wv-phai .wv-o-nhap, .wv-bang td.wv-o-so .wv-o-nhap { white-space: normal; } /* Câu báo dưới ô nằm trong cột số cũng phải xuống dòng, không thì một câu dài nong cả cột ra. */ .wv-bang td .wv-loi-o { white-space: normal; } /* Nhãn và huy hiệu: không xuống dòng thì phải cắt bớt, chứ không được tràn ra ngoài. */ .wv-trang-thai, /* Hai dòng overflow và text-overflow đã có ở wvep-cong.css với đúng cùng giá trị. */ .wv-chi-nhanh { max-width: 100%; vertical-align: bottom; } /* ------------------------------------------------------------------ Phần ba: bảng dữ liệu cuộn trong khung riêng ------------------------------------------------------------------ */ /* Khung cuộn đã có sẵn ở wvep.css. Ở đây thêm hai thứ nó còn thiếu. Thứ nhất là bề rộng tối thiểu của chính cái bảng. Không có nó thì ở màn hẹp trình duyệt bóp mọi cột về vừa đúng khung, và một cột như Hạng mục vỡ thành mỗi dòng một chữ: bảng vẫn nằm gọn nhưng không ai đọc nổi. Có nó thì bảng giữ nguyên tỉ lệ cột và người dùng kéo ngang trong khung của nó, đúng như kéo một tờ giấy rộng trên mặt bàn. Thứ hai là hành vi cuộn: chặn đà cuộn tràn sang trang cha khi kéo bằng ngón tay. ĐÍNH CHÍNH. Đoạn ghi chú cũ ở đây nói khung này có đổ bóng bên trong ở mép phải làm dấu báo còn cột nữa. Không có bóng nào cả, và người kiểm chứng đã đo tận nơi: cả ::before lẫn ::after của .wv-bang-cuon đều là none. Dấu báo thật là THANH CUỘN ĐỂ LỘ, khai ở wvep-thanh-phan.css cùng đúng lý do ấy. Từ đợt này những bảng hay bị kéo mất cột cuối trên điện thoại đã chuyển sang xếp chồng, nên thanh cuộn chỉ còn phải gánh các bảng rộng trên máy tính, nơi kéo ngang là chuyện người dùng vẫn làm. */ /* Hai dòng overflow-x và max-width đã có ở wvep-thanh-phan.css với đúng cùng giá trị. */ .wv-bang-cuon { overflow-y: hidden; /* Cuộn bằng ngón tay thì dừng đúng chỗ thả tay, không trôi tiếp sang trang khác. */ overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* Ba nấc bề rộng tối thiểu của bảng. Bảng nào không mang lớp nào thì lấy nấc nền ở khối màn hẹp phía dưới. Cả ba nấc đều viết theo dạng con nằm trong khung cuộn, đúng dạng của luật nền ở khối màn hẹp. Viết ngắn hơn thì luật nền có độ ưu tiên cao hơn và đè mất cả ba nấc, bảng mười bốn cột lại bị bóp về ba mươi tư rem. */ .wv-bang-cuon > .wv-bang { min-width: 34rem; } /* SÀN BỀ RỘNG CHO Ô CHỮ TRONG BẢNG DANH SÁCH. Bảng mười cột mà bảy cột là tiền và ngày, tức là bảy cột cấm xuống dòng. Bảy cột ấy giành hết bề ngang, còn cột Tên bảng và tour bị dồn xuống bằng bề rộng của một chữ dài nhất trong nó, tên tour đổ dọc thành một cột chữ cao mười dòng. Đã nhìn thấy tận mắt ở màn Bảng chiết tính trên màn 1440. Đặt sàn cho ô chữ thì bảng đòi rộng hơn khung chứa nó, và khung cuộn làm đúng việc của khung cuộn: cho kéo ngang. Kéo ngang một bảng rộng là chuyện bình thường và người dùng biết làm; đọc một tên tour đổ dọc thì không. Bốn hạng ô KHÔNG chịu luật này: cột tiền, cột số, cột ngày và cột căn giữa. Chúng vốn đã có bề rộng riêng theo con số nằm trong đó, ép thêm sàn chỉ làm bảng dài vô ích. Hạng thứ năm là wv-cot-hep, dành cho cột chữ NGẮN VÀ ĐÓNG, kiểu Đơn vị tính hay tên loại dịch vụ. Chúng chỉ chứa một hai từ lấy từ danh mục nên không bao giờ vỡ dọc, mà ép sàn tám rem cho mỗi cột như vậy là ăn mất tám mươi điểm ảnh của bảng. Đúng tám mươi điểm ảnh ấy là chỗ cột cuối màn Tra giá nhanh bị đẩy ra ngoài khung ở khổ 1280. Đây là hạng dành cho cột lấy chữ từ DANH MỤC, không phải cho cột người dùng gõ tự do. Gắn nhầm vào một cột tên tour là tên tour đổ dọc trở lại đúng như lỗi cũ. */ .wv-bang-cuon > .wv-bang td:not(.wv-phai):not(.wv-cong):not(.wv-o-so):not(.wv-so):not(.wv-so-tinh):not(.wv-o-ngay):not(.wv-giua):not(.wv-cot-hep) { min-width: 8rem; } .wv-bang-cuon > .wv-bang-vua { min-width: 48rem; } .wv-bang-cuon > .wv-bang-rong { min-width: 72rem; } /* Bảng chi phí của bảng chiết tính: mười bốn cột, cột nào cũng phải đọc được cùng lúc với cột số tiền bên phải. Trước đây chỗ này ép cứng một nghìn sáu trăm pixel; đổi sang đơn vị theo cỡ chữ để người để cỡ chữ lớn không bị bóp cột, còn con số quy ra pixel ở cỡ chữ mặc định thì vẫn đúng chừng ấy. */ .wv-bang-cuon > .wv-bang-chi { min-width: 100rem; } /* GHIM CỘT ĐẦU. Kéo ngang một bảng mười bốn cột mà cột đầu trôi mất thì người đọc không còn biết dòng tiền mình đang nhìn là của hạng mục nào. Ghim lại thì cột đầu đứng yên ở mép trái trong suốt lúc kéo. Ô ghim phải có nền đục của riêng nó, vì phần bảng trôi qua phía dưới nó. Nền này đè lên nền tô của dòng, nên bên dưới có mấy dòng tô riêng phải khai lại nền cho khớp. */ .wv-bang-ghim th:first-child, .wv-bang-ghim td:first-child { position: sticky; left: 0; z-index: 2; background: var(--wv-tam); box-shadow: 1px 0 0 var(--wv-vien); } .wv-bang-ghim thead th:first-child { z-index: 3; background: var(--wv-xam-100); } .wv-bang-ghim tfoot td:first-child { background: var(--wv-tam); } .wv-bang-ghim .wv-dong-ngoai-nuoc td:first-child { background: var(--wv-tin-nen); } .wv-bang-ghim .wv-dong-phu-gia td:first-child { background: var(--wv-tam-mo); } .wv-bang-ghim .wv-dong-canh-bao td:first-child { background: var(--wv-cam-50); } .wv-bang-ghim .wv-dong-loi > td:first-child { background: var(--wv-xau-nen); } .wv-bang-ghim .wv-dong-canh-bao-nhe > td:first-child { background: var(--wv-cam-50); } .wv-bang-ghim tbody tr:hover > td:first-child { background: var(--wv-xam-50); } /* ------------------------------------------------------------------ Phần bốn: biểu mẫu nhiều ô ------------------------------------------------------------------ */ /* Nhóm Danh mục nền mười ba màn và nhóm Tài chính mười ba màn phần lớn là biểu mẫu nhiều ô. Đây là chỗ chữ tràn nút hay xảy ra nhất mà ít ai để ý, vì trên máy tính để bàn thì không bao giờ thấy. */ /* MƯỜI DÒNG MÃ CHẾT ĐÃ DỌN KHỎI KHỐI NÀY ngày 26 tháng 8 năm 2026. Phép quét mới soát MỌI bộ chọn của cả mười một tệp kiểu dáng, và soát theo CẶP bộ chọn với thuộc tính chứ không chỉ theo bộ chọn: hai tệp khai cùng một bộ chọn nhưng hai thuộc tính khác nhau là lối chồng lớp bình thường, còn hai tệp khai cùng một bộ chọn VÀ cùng một thuộc tính mới là chỗ kết quả phụ thuộc thứ tự nạp. Quét ra 29 cặp như vậy. Ba cặp mang hai giá trị KHÁC nhau, đó là chỗ thật sự nguy; 26 cặp còn lại trùng nguyên si cả giá trị, tức mã chết, và mã chết ở đây nguy theo lối khác: ngày ai đó sửa giá trị ở tệp kia thì dòng chết này lặng lẽ thắng và không có gì đỏ lên. Những dòng bỏ đi khỏi khối này đều đã có sẵn ở tệp nạp TRƯỚC với ĐÚNG cùng giá trị: flex-wrap của ba lớp hàng nút, text-align của nút, trọn luật ô lọc, ô lọc rộng, ô chọn trong ô đôi, ô nhập giá theo thứ, và bề rộng tối thiểu của ô chọn chi nhánh. */ /* Hàng nút lọc phải xuống dòng được, chứ không đẩy nhau ra khỏi khung. Ba lớp hàng nút còn lại đã có luật này ở wvep-thanh-phan.css. */ .wv-loc-nut { flex-wrap: wrap; } /* Nút không được rộng hơn khung chứa nó, và chữ trong nút được phép xuống dòng. Chữ trong nút xuống dòng thì nút cao lên, xấu mà đọc được; chữ không xuống dòng thì nút tràn ra ngoài, vừa xấu vừa mất chữ. */ .wv-nut, .wv-nut-phu, .wv-nut-canh-bao { max-width: 100%; overflow-wrap: anywhere; } /* Ô đôi, ví dụ số tiền đi kèm ô chọn loại tiền, phải co được cả hai bên. */ .wv-o-doi { flex-wrap: nowrap; min-width: 0; } /* Ô chọn chi nhánh trên thanh trên: cắt bớt bằng dấu ba chấm khi hẹp. Bề rộng và các tấm chắn co giãn của ô này khai ở wvep-cong.css, đúng một chỗ. */ .wv-doi-chi-nhanh .wv-o-nhap { text-overflow: ellipsis; } /* ------------------------------------------------------------------ Mốc 1400: màn rộng ------------------------------------------------------------------ */ /* Trên màn rất rộng, thân trang vẫn dừng ở bề rộng đọc được chứ không kéo dài một dòng chữ ngang hai nghìn pixel. Chỗ trống hai bên là chỗ nghỉ mắt, không phải chỗ lãng phí. */ @media (min-width: 1400px) { .wv-than { max-width: 84rem; } } /* ------------------------------------------------------------------ Mốc 1200: máy tính xách tay hẹp ------------------------------------------------------------------ */ @media (max-width: 1200px) { .wv-than { padding-left: 1.25rem; padding-right: 1.25rem; } } /* ------------------------------------------------------------------ Mốc 1100: máy tính bảng nằm ngang ------------------------------------------------------------------ */ /* Lưới nhập và lưới xem về hai cột. Khối này đã có ở wvep.css, ở đây chỉ thêm những thứ cùng mốc mà tệp kia chưa nói tới. */ @media (max-width: 1100px) { /* Ô rộng ba cột trong một cái lưới chỉ còn hai cột thì phải hạ xuống cho vừa. */ .wv-luoi-nhap .wv-rong-ba, .wv-luoi-xem .wv-rong-ba { grid-column: 1 / -1; } .wv-luoi { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); } .wv-moc-duyet li { flex: 1 1 min(11.25rem, 100%); } } /* ------------------------------------------------------------------ Mốc 900: máy tính bảng dựng đứng, khung điều hướng thành ngăn trượt ------------------------------------------------------------------ */ /* Từ đây trở xuống khung điều hướng không còn chiếm một cột cố định bên trái nữa. Cách nó cư xử được tả ở wvep-cong.css. Ở đây chỉ lo phần nội dung: thân trang lấy lại chỗ của khung, và bảng dữ liệu bắt đầu giữ bề rộng tối thiểu để không bị bóp nát. */ @media (max-width: 900px) { /* BÓNG MÉP BẢNG: dấu hiệu kéo ngang được, dành cho màn hình cảm ứng. Thanh cuộn của khung bảng chiếm 10 điểm ảnh bố cục ở khổ máy tính nhưng chiếm 0 ở khổ điện thoại: trình duyệt điện thoại vẽ thanh cuộn PHỦ, và nó ẩn cho tới lúc người dùng đã kéo. Mà chính chú thích của .wv-bang-cuon nói thanh cuộn ấy là dấu hiệu duy nhất báo cho người dùng biết bên phải còn cột nữa. Tức là trên điện thoại không còn dấu hiệu nào. Bảng nào có cột nút ở cuối thì đã xếp chồng bằng wv-bang-xep, không còn gì nằm ngoài tầm tay. Còn lại là những bảng số của sổ sách và báo cáo: xếp chồng chúng là phá mất cái chúng sinh ra để làm, tức là để các con số thẳng cột mà so với nhau. Nên chúng vẫn cuộn ngang, và chỗ này lo phần dấu hiệu. Cách dựng: hai lớp nền trắng bám theo NỘI DUNG (background-attachment: local) làm nắp che, hai lớp bóng bám theo KHUNG NHÌN (scroll) nằm dưới. Cuộn tới sát mép nào thì nắp che của mép ấy trượt vào đúng chỗ bóng và bóng biến mất. Không cần một dòng JavaScript nào, và không đo đạc gì nên không có gì để sai. */ .wv-bang-cuon { background-image: linear-gradient(to right, var(--wv-tam) 40%, rgba(255, 255, 255, 0)), linear-gradient(to left, var(--wv-tam) 40%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0)), linear-gradient(to left, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0)); background-position: 0 0, 100% 0, 0 0, 100% 0; background-repeat: no-repeat; background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%; background-attachment: local, local, scroll, scroll; background-color: var(--wv-tam); } /* Bảng đã xếp chồng thì không cuộn ngang nữa, để lại bóng là bịa ra một dấu hiệu chỉ về chỗ không có gì. */ .wv-bang-cuon:has(> .wv-bang.wv-bang-xep) { background-image: none; } /* Bề rộng tối thiểu chung cho mọi bảng chưa mang lớp riêng. Ba mươi tư rem là chỗ đủ cho một bảng năm cột giữ được nghĩa của từng cột. Bảng nào ít cột hơn thì hơi thừa chỗ, nhưng thừa chỗ chỉ nhạt chứ không sai; bóp cột mới là sai. */ .wv-bang-cuon > .wv-bang { min-width: 34rem; } .wv-bang-cuon > .wv-bang-vua { min-width: 52rem; } .wv-bang-cuon > .wv-bang-rong { min-width: 76rem; } .wv-bang-cuon > .wv-bang-chi { min-width: 100rem; } /* BẢNG XẾP CHỒNG TRÊN MÀN HẸP. Một bảng nằm ngang trên điện thoại chỉ có hai đường đi, và cả hai đều hỏng. Bóp mọi cột cho vừa ba trăm chín mươi điểm ảnh thì ô nào cũng hẹp tới mức không gõ nổi và tên hạng mục vỡ thành mỗi dòng một chữ. Để nguyên bề ngang thì cột cuối, chỗ luôn đặt nút Bỏ và nút Xóa, nằm ngoài khung nhìn mà không có dấu nào cho biết là kéo ngang được. Đây đúng bài học cột Xóa của bảng chiết tính: máy tính và điện thoại phải xử lý khác nhau chứ không dùng chung một luật. Xếp chồng thì mỗi dòng thành một thẻ, mỗi ô một hàng mang nhãn của riêng nó, và không còn ô nào nằm ngoài tầm tay. Nhãn lấy từ data-nhan của chính ô ấy, nên bảng nào muốn xếp chồng thì gắn thêm lớp wv-bang-xep và ghi data-nhan cho từng ô. VÌ SAO VIẾT THEO LỚP CHỨ KHÔNG THEO SỐ HIỆU MỘT BẢNG. Bản đầu gắn cứng vào số hiệu bang-dong-gia, nên hai bảng còn lại của chính màn bảng giá vẫn tràn ra ngoài: người kiểm chứng đo được nút Bỏ của bảng chính sách hủy nằm ở toạ độ 621 trong khung rộng 341, tức hai trăm năm mươi lăm điểm ảnh ngoài tầm tay. Bỏ luôn bề rộng tối thiểu và sàn bề rộng ô chữ, vì hai luật ấy dựng cho bảng nằm ngang, giữ lại là bảng vẫn đòi rộng hơn khung dù đã xếp chồng. Cả hai phải viết đủ ba lớp cho nặng hơn luật nền, nếu không luật nền ở trên vẫn thắng. */ .wv-bang-cuon > .wv-bang.wv-bang-xep { min-width: 0; } .wv-bang-cuon > .wv-bang.wv-bang-xep thead { display: none; } .wv-bang-cuon > .wv-bang.wv-bang-xep tbody, .wv-bang-cuon > .wv-bang.wv-bang-xep tfoot, .wv-bang-cuon > .wv-bang.wv-bang-xep tr, .wv-bang-cuon > .wv-bang.wv-bang-xep td { display: block; width: auto; min-width: 0; } /* Gỡ sàn bề rộng ô chữ, và phải viết lại ĐÚNG chuỗi bảy tầng :not của luật đặt sàn ở đầu tệp. Mỗi tầng :not mang theo độ nặng của lớp nằm trong nó, nên luật kia nặng chín lớp; một dòng ngắn gọn hơn sẽ thua, ô nào cũng đòi tám rem, và bảng xếp chồng rồi vẫn rộng hơn khung chứa. Bản trước gắn cứng vào số hiệu bang-dong-gia nên thắng nhờ số hiệu, chuyển sang lớp thì mất chỗ dựa ấy. */ .wv-bang-cuon > .wv-bang.wv-bang-xep td:not(.wv-phai):not(.wv-cong):not(.wv-o-so):not(.wv-so):not(.wv-so-tinh):not(.wv-o-ngay):not(.wv-giua):not(.wv-cot-hep) { min-width: 0; } .wv-bang-cuon > .wv-bang.wv-bang-xep td { padding: .375rem .625rem; } /* Ô rỗng không được chiếm một hàng trống. Cột đệm và cột không có dữ liệu cho dòng này là chuyện thường ở bảng nằm ngang, nhưng khi xếp chồng thì mỗi ô rỗng là một khoảng trắng vô nghĩa kéo dài cái thẻ ra. */ .wv-bang-cuon > .wv-bang.wv-bang-xep td:empty { display: none; } /* Cột tiền căn phải là đúng khi các con số xếp thành một cột thẳng để so với nhau. Xếp chồng rồi thì mỗi số đứng một mình dưới nhãn của nó, căn phải chỉ tổ đẩy số ra xa nhãn và mắt phải nhảy ngang qua một khoảng trắng cho mỗi dòng. */ .wv-bang-cuon > .wv-bang.wv-bang-xep td.wv-phai, .wv-bang-cuon > .wv-bang.wv-bang-xep td.wv-cong, .wv-bang-cuon > .wv-bang.wv-bang-xep td.wv-giua { text-align: left; } .wv-bang-cuon > .wv-bang.wv-bang-xep td[data-nhan]::before { content: attr(data-nhan); display: block; margin-bottom: .25rem; font-size: var(--wv-cd-12); font-weight: 600; color: var(--wv-chu-mo); } /* Vạch ngăn giữa hai bản ghi. Xếp chồng rồi thì hàng ngang không còn nữa, không có vạch thì mười dòng dính lại thành một khối chữ liền và không ai biết chỗ nào hết một bản ghi. Vạch này phải NẶNG HƠN HẲN vạch giữa hai ô. Bản đầu để cả hai cùng một điểm ảnh, chỉ khác sắc độ, nên nhìn ảnh chụp khổ 390 thì mười một vạch giống hệt nhau và ranh giới giữa hai khách hàng biến mất. Ba điểm ảnh cộng một khoảng thở ở chân mỗi bản ghi thì mắt tách được ngay từ xa mà không phải đọc chữ. */ .wv-bang-cuon > .wv-bang.wv-bang-xep tbody tr { padding-bottom: .625rem; border-bottom: 3px solid var(--wv-vien); } /* Ô cuối của mỗi bản ghi bỏ vạch mảnh của riêng nó, để vạch nặng ngăn bản ghi đứng một mình chứ không thành hai vạch dính nhau. */ .wv-bang-cuon > .wv-bang.wv-bang-xep tbody tr > td:last-child { border-bottom: 0; } .wv-bang-cuon > .wv-bang.wv-bang-xep tbody tr:last-child { padding-bottom: 0; border-bottom: 0; } /* BẢNG DÒNG GIÁ CỦA MÀN BẢNG GIÁ: bốn cột số máy tính sẵn ẩn hẳn đi. Bốn số ấy KHÔNG mất: chúng nằm nguyên trong dòng phụ chạy hết bề ngang ngay dưới mỗi dòng giá, và phần cộng toàn bảng có dòng riêng ở chân bảng. Giữ chúng lại dưới dạng thẻ thì mỗi hạng mục dài thêm bốn hàng chỉ để đọc, đẩy ô Đơn giá nhập của hạng mục kế tiếp xuống quá một màn. */ #bang-dong-gia th.wv-cot-tinh, #bang-dong-gia td.wv-so-tinh { display: none; } #bang-dong-gia .wv-dong-cong-hep { display: block; } /* Ở bảng này một bản ghi là cả một tbody gồm hai dòng, dòng nhập và dòng phụ, và wvep.css đã kẻ vạch ở mức tbody. Kẻ thêm ở mức dòng thì cắt đôi ngay giữa một hạng mục. */ #bang-dong-gia tbody.wv-khoi-dong tr { border-bottom: 0; } /* Ô trong bảng thu lề lại, lấy chỗ cho chữ. */ .wv-bang th, .wv-bang td { padding: .5rem .625rem; } .wv-the-than { padding: .875rem; } .wv-loc { padding: .875rem; } .wv-tuoi-no { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ Mốc 760: điện thoại lớn ------------------------------------------------------------------ */ @media (max-width: 760px) { /* Lưới nhập và lưới xem về MỘT cột. Hai cột rộng tối thiểu 180 pixel cộng khoảng cách là 376 pixel, rộng hơn cả chỗ còn lại của một màn 390. Thừa ra chừng ấy là cả trang có thanh cuộn ngang, mà thanh cuộn ngang thì kéo mất luôn thanh trên. */ .wv-luoi-nhap, .wv-luoi-xem { grid-template-columns: minmax(0, 1fr); } .wv-luoi-nhap .wv-rong-doi, .wv-luoi-nhap .wv-rong-ba, .wv-luoi-xem .wv-rong-ba { grid-column: 1 / -1; } .wv-luoi { grid-template-columns: minmax(0, 1fr); } /* Thẻ chuyển bước của biểu mẫu nhiều bước: cuộn ngang trong hàng của nó. */ .wv-the-tab { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; } .wv-tab { flex: 0 0 auto; padding: .5625rem .875rem; font-size: .8125rem; } /* Năm mốc duyệt xếp dọc: năm ô nằm ngang trên màn này chỉ còn vài chữ mỗi ô. */ .wv-moc-duyet li { flex: 1 1 100%; } /* Ô chọn nhiều mục và ô chọn có lời giải thích: mỗi lựa chọn một hàng. */ .wv-o-chon { gap: .5rem .75rem; } .wv-chon { flex: 1 1 min(9rem, 100%); } /* Nút cuối biểu mẫu trải rộng, dễ bấm bằng ngón tay. */ .wv-cuoi-form .wv-nut { flex: 1 1 min(10rem, 100%); } /* Thẻ tệp đính kèm: tên tệp và nút xuống hai hàng thay vì chen nhau một hàng. */ .wv-the-tep { flex-wrap: wrap; } } /* ------------------------------------------------------------------ Mốc 560: điện thoại ------------------------------------------------------------------ */ @media (max-width: 560px) { .wv-than { padding-left: .875rem; padding-right: .875rem; } .wv-tieu-de { font-size: 1.3125rem; } /* Ô lọc chiếm trọn một hàng, không còn chen hai ô một hàng. */ .wv-loc-o, .wv-loc-rong { flex: 1 1 100%; min-width: 0; } .wv-loc-nut .wv-nut { flex: 1 1 min(8rem, 100%); } /* Bốn khoảng tuổi nợ xếp dọc, mỗi khoảng một hàng. */ .wv-tuoi-no { grid-template-columns: minmax(0, 1fr); } /* Số trang: ô nhỏ lại cho vừa một hàng. */ .wv-phan-trang > a, .wv-phan-trang > span:not(.wv-phan-trang-tin), .wv-so-dong > a, .wv-so-dong > span:not(.wv-so-dong-nhan) { min-width: 2rem; padding: .3125rem .5rem; } /* Hai ô ngoài cùng của cửa sổ quanh trang đang đứng. Chỉ những ô mà PHÍA NGOÀI nó là một dấu ba chấm mới mang lớp này, nên giấu đi là dấu ba chấm nuốt thêm một số chứ không đục lỗ vào dãy. Xem DaySoTrang.DanhDauODeGiau để biết vì sao không phải ô rìa nào cũng giấu được. Không đo bề rộng bằng JavaScript, không có cảnh nháy lên rồi co lại. HAI LỚP LIỀN NHAU chứ không một lớp trơn, đúng quy tắc 11. Đã đo được ngày 29 tháng 8 năm 2026 ở khổ 390 trên bản Debug: viết `.wv-trang-xa` một mình thì độ nặng là một lớp, thua luật `.wv-phan-trang > a` vốn nặng một lớp cộng một thẻ và đang đặt `display: inline-flex`. Khối vẫn bày đủ 11 nút và cao 94 điểm ảnh, tức HAI hàng, trong khi cả bộ kiểm lẫn mã HTML đều nói lớp ấy đã gắn đúng chỗ. Bộ kiểm đếm TÊN LỚP nên không bao giờ thấy được chuyện này; chỉ có phép đo hình trên trình duyệt mới thấy. Đó là quy tắc 1 viết ra bằng một lần trả giá nữa. */ .wv-phan-trang .wv-trang-xa { display: none; } .wv-the-dau, .wv-the-than { padding: .75rem; } /* Đầu thẻ XUỐNG DÒNG ở khổ này thay vì bóp nhau. Đầu thẻ là một hàng ngang không xuống dòng, nên thẻ nào có thêm nút bên phải thì ở khổ hẹp cả tên thẻ lẫn chữ trên nút cùng bị bóp thành hai ba dòng chữ chen nhau. Đo được trên màn phân quyền ở khổ 390: tên nhóm "Danh mục nền" tách hai dòng, hai nút Chọn cả nhóm với Bỏ cả nhóm mỗi nút tách hai dòng, tất cả nằm chung một hàng. Xuống dòng chỉ có tác dụng khi hàng ĐÃ chật, nên đầu thẻ nào đang vừa một dòng thì không đổi gì. */ .wv-the-dau { flex-wrap: wrap; } } /* ------------------------------------------------------------------ Mốc 400: điện thoại nhỏ ------------------------------------------------------------------ */ @media (max-width: 400px) { .wv-than { padding-left: .75rem; padding-right: .75rem; } .wv-tieu-de { font-size: 1.25rem; } .wv-chan-trang { padding-left: .75rem; padding-right: .75rem; } /* Ô nhập cao hơn một chút, ngón tay bấm trúng dễ hơn con trỏ chuột. */ .wv-o-nhap { padding: .625rem .6875rem; } } /* ================================================================== Phần năm: CÁI VỎ theo bề rộng màn hình ================================================================== */ /* VÌ SAO KHỐI NÀY NẰM Ở ĐÂY chứ không nằm cùng chỗ với kiểu dáng của cái vỏ. Một mốc bề rộng phải sửa đồng thời thanh điều hướng dọc, thanh điều hướng ngang, thân trang và chân trang. Bốn thứ ấy nằm ở hai tệp khác nhau. Gom luật co giãn về một chỗ thì mở đúng một tệp là thấy hết hành vi của hệ thống ở từng bề rộng; rải ra hai tệp thì mỗi lần đổi một mốc phải đi lùng khắp hai nghìn dòng và luôn sót một chỗ. Ở ĐÂY CHỈ ĐỔI BỀ RỘNG CỦA THANH DỌC, KHÔNG ĐỔI HÌNH DẠNG BÊN TRONG NÓ. Hình dạng của dạng dải biểu tượng viết một lần duy nhất ở wvep-cong.css, theo bề ngang thật của chính cái thanh. Nhờ vậy thanh co lại vì người dùng bấm nút hay vì cửa sổ hẹp thì bộ luật ấy đều tự động đúng, không phải chép lại lần thứ hai ở đây. Tệp này nạp SAU CÙNG nên mọi dòng ở đây đè lên dòng cùng tên ở wvep-cong.css. */ /* Bản sao ô chọn chi nhánh nằm trong thực đơn tài khoản. Ở màn rộng nó khuất đi vì thanh ngang đã có sẵn một ô chọn; chỉ ở màn dưới 560, khi thanh ngang rút còn ba thứ, nó mới hiện ra để người làm nhiều chi nhánh còn lối chuyển. */ .wv-tha-chi-nhanh { display: none; flex-direction: column; gap: var(--wv-k1); margin: 0; padding: var(--wv-k2) var(--wv-k3); } .wv-tha-chi-nhanh label { margin: 0; color: var(--wv-chu-nhat); font-size: var(--wv-cd-11); text-transform: uppercase; letter-spacing: .05em; } .wv-tha-chi-nhanh .wv-o-nhap { width: 100%; height: 2.125rem; font-size: var(--wv-cd-13); } /* ------------------------------------------------------------------ Mốc 1200: thanh dọc tự thu về dải biểu tượng ------------------------------------------------------------------ */ /* Máy tính xách tay 1280 và máy tính bảng nằm ngang chỉ còn khoảng 1000 điểm ảnh cho nội dung sau khi trừ thanh dọc mở rộng. Bảng chi phí của bảng chiết tính đòi gấp đôi chừng ấy, nên ở khoảng này thanh dọc tự thu về dải biểu tượng, trả lại gần mười một rem bề ngang. CHỈ TỰ THU KHI NGƯỜI DÙNG CHƯA TỪNG CHỌN. Hai lớp wv-canh-gon và wv-canh-rong là lựa chọn đặt tay của chính người ngồi máy, và lựa chọn ấy phải thắng luật tự động: người đã chủ động mở rộng thanh ra mà máy cứ thu lại thì nút bấm coi như hỏng. */ @media (min-width: 901px) and (max-width: 1200px) { html:not(.wv-canh-gon):not(.wv-canh-rong) { --wv-rong-canh: var(--wv-rong-canh-gon); } } /* ------------------------------------------------------------------ Mốc 1400: đường dẫn phân cấp nhường chỗ ------------------------------------------------------------------ */ /* Hai thứ cùng đòi chỗ ở giữa thanh ngang: đường dẫn phân cấp và ô tìm nhanh. Dưới 1200 chỗ chỉ đủ cho một, nên ô tìm nhanh ở lại. Đường dẫn phân cấp là thứ CHO BIẾT, mà điều nó cho biết thì mục đang sáng trên thanh dọc và tiêu đề ngay đầu màn cũng đang nói; ô tìm nhanh là thứ ĐỂ LÀM, mất nó là mất hẳn một lối đi. Bỏ đi cả khối chứ KHÔNG bóp cho vừa. Bóp lại thì ba đốt cùng cụt đều thành kiểu T.. rồi S.., một thứ vừa không đọc được vừa trông như giao diện đang hỏng. */ /* ĐÃ ĐO TRÊN MÁY THẬT, KHÔNG PHẢI ƯỚC LƯỢNG. Mốc cũ để 1200 là quá thấp: trong khoảng 1201 tới 1599 đường dẫn vẫn hiện nhưng đã bị bóp thành đúng cái kiểu cụt mà đoạn ghi chú trên vừa nói phải tránh. Số đo trên màn Địa lý, đối chiếu, chỗ đường dẫn sâu nhất với bốn đốt: 1220: "Danh mục nền" còn 1 trên 79 điểm ảnh, mất sạch chữ 1280: "Danh mục nền" còn 16 trên 79 1366: "Tổng quan" 32 trên 57, "Danh mục nền" 37 trên 79, "Địa lý" 10 trên 29 1440: vẫn còn cụt cả ba đốt 1600: mới hết cụt 1366 và 1440 là hai bề rộng máy tính xách tay hay gặp nhất trong công ty, nên lỗi này rơi thẳng vào máy của phần lớn người dùng. Sửa hai việc cùng lúc: Một, kéo mốc giấu đường dẫn từ 1200 lên 1400, để không còn bề rộng nào vẽ ra đốt cụt. Hai, từ 1400 tới 1700 bóp ô tìm nhanh từ 20rem xuống 11rem. Ở khoảng này chỗ vừa đủ cho cả hai NẾU ô tìm nhanh chịu nhường, mà ô tìm nhanh nhường được vì nó vẫn còn rộng hơn mười một rem, đủ gõ và đủ đọc. Nhờ vậy giữ được đường dẫn ở đúng khoảng bề rộng mà máy xách tay hay dùng, thay vì giấu nó đi tới tận 1600. Đo lại sau khi sửa: bốn màn có đường dẫn sâu nhất, sáu bề rộng từ 1400 tới 1920, hai mươi bốn lượt đo, không còn một đốt cụt nào và không màn nào trôi ngang. */ @media (max-width: 1399.98px) { .wv-duong-dan-thanh { display: none; } } /* Khoảng 1400 tới 1700 chỗ vừa đủ cho cả đường dẫn phân cấp lẫn ô tìm NẾU ô tìm chịu nhường. Nhường thì nhường, nhưng không xuống dưới sàn 15rem: dưới sàn là dòng gợi ý cụt chữ, mà một ô tìm không nói được nó tìm gì thì nhường chỗ cũng bằng thừa. Ở khoảng này người nhường tiếp theo là đường dẫn phân cấp: nó co lại và cắt bằng dấu ba chấm, vì nó là thứ CHO BIẾT, mà điều nó cho biết thì mục đang sáng trên thanh dọc và tiêu đề đầu màn cũng đang nói. */ @media (min-width: 1400px) and (max-width: 1699.98px) { .wv-tim-nhanh { flex: 0 1 18rem; } .wv-duong-dan-thanh { min-width: 0; overflow: hidden; } } /* ------------------------------------------------------------------ Mốc 900: thanh dọc thành ngăn trượt ------------------------------------------------------------------ */ /* Từ đây trở xuống thanh dọc không còn chiếm một cột cố định bên trái. Nó nằm khuất ngoài mép trái cho tới khi bấm nút ba gạch, rồi trượt vào và có tấm che phía sau. NGĂN TRƯỢT LUÔN HIỆN ĐỦ CHỮ, kể cả khi người dùng đang để chế độ dải biểu tượng trên máy tính của họ. Trên điện thoại một dải biểu tượng rộng bốn rem không lấy lại được chỗ đáng kể nào, mà lại bỏ mất nhãn của từng mục. Điều này KHÔNG phải khai lại ở đây: ngăn trượt rộng gần mười bảy rem, mà bộ luật dải biểu tượng ở wvep-cong.css chỉ ăn khi thanh hẹp dưới bảy rem, nên nó tự đứng ngoài. */ @media (max-width: 900px) { .wv-canh { width: min(17.5rem, 84vw); transform: translateX(-100%); transition: transform .18s ease; box-shadow: none; } body.wv-canh-mo .wv-canh { transform: translateX(0); box-shadow: 0 0 1.5rem rgba(0, 26, 43, .42); } body.wv-canh-mo .wv-man-che { display: block; } /* Thanh ngang và thân trang lấy lại trọn bề ngang màn hình. */ .wv-thanh-tren { left: 0; padding: 0 .75rem; } .wv-vo { padding-left: 0; } .wv-chan-trang { margin-left: 0; padding-left: 1rem; padding-right: 1rem; } .wv-than { padding-top: calc(var(--wv-cao-thanh) + 1.25rem); } /* Thanh dọc khuất hẳn nên logo và tên cửa trên đỉnh nó cũng khuất theo. Khối nhận diện trên thanh ngang hiện ra thế chỗ, để trên điện thoại người dùng vẫn biết mình đang ở đâu và vẫn có một lối bấm về trang chủ. */ .wv-nhan-cong { display: flex; } .wv-logo-thanh { display: block; } .wv-nhan-phu { display: none; } /* DẢI 761 ĐẾN 900 LÀ DẢI CHẬT NHẤT CỦA THANH NGANG, và tới ngày 8 tháng 9 năm 2026 mới có người đo đúng vào đó. Ở dưới 760 ô tìm nhanh rời xuống ngăn trượt và khối tên người dùng ẩn hẳn, nên thanh rộng rãi. Ở trên 900 thanh dọc trả lại chỗ. Đúng khoảng giữa thì cả hai thứ ấy còn nguyên trên thanh, mà cả hai đều KHÔNG CO ĐƯỢC: ô tìm khai min-width 15rem, khối tên người khai flex 0 0 auto với trần 11rem. Hai thứ cứng cạnh nhau trong một hộp hẹp thì thứ đứng cuối lòi ra ngoài, và thứ đứng cuối là thực đơn tài khoản. Đo được: bề rộng 768, tài khoản mang ba vai, thực đơn tài khoản chạm 764 trong khi thân trang chỉ tới 753. Chữa bằng cách cho CẢ HAI cùng nhường, chứ không phải kê riêng con số 11rem xuống cho vừa cái tên đang đo. Tên người dùng dài ngắn tùy công ty, và một hàng rào dựng quanh đúng cái tên hôm nay thì tên dài hơn một chữ là qua được. */ .wv-thanh-tren .wv-tim-nhanh { flex: 1 1 10rem; min-width: 0; } .wv-nguoi-dung { max-width: 8rem; } /* Nút đầu thanh đổi thành ba gạch: ở đây nó kéo ngăn trượt chứ không thu gọn. */ .wv-nut-menu .wv-hinh-thu, .wv-nut-menu .wv-hinh-mo, html.wv-canh-gon .wv-nut-menu .wv-hinh-mo { display: none; } .wv-nut-menu .wv-hinh-menu { display: block; } } /* ------------------------------------------------------------------ Mốc 760: điện thoại lớn, thanh ngang rút gọn ------------------------------------------------------------------ */ @media (max-width: 760px) { /* Ô tìm nhanh cần chừng hai mươi rem mới gõ được một cái tên đầy đủ, mà cả thanh ngang ở đây chỉ còn chừng ấy. Nên nó rời thanh ngang và CHUYỂN VÀO NGĂN TRƯỢT, nằm ngay trên danh sách thực đơn. Mở ngăn ra là gõ tìm được luôn. Trước đây chỗ này chỉ ẩn nó đi, kèm ghi chú rằng thực đơn trong ngăn trượt sẽ nhận lại việc của nó. Nhưng ngăn trượt chỉ có danh sách nhóm chứ không có ô tìm nào, nên trên điện thoại là mất hẳn đường tìm nhanh. Càng thêm màn thì càng khó tìm. */ .wv-thanh-tren .wv-tim-nhanh { display: none; } .wv-canh .wv-tim-nhanh { display: block; /* Ở thanh ngang nó khai flex 0 1 20rem, con số 20rem ấy là CHIỀU RỘNG. Ngăn trượt xếp dọc nên cũng con số ấy lại thành CHIỀU CAO, thành ra ô tìm chiếm một mảng ba trăm hai mươi điểm ảnh rỗng phía trên thực đơn. Trả nó về đúng chiều cao của nội dung. */ flex: 0 0 auto; /* Sàn 15rem của thanh ngang không áp ở đây: ngăn trượt tự nó đã hẹp, giữ sàn ấy là ô tìm chòi ra khỏi mép ngăn. Trong ngăn nó rộng bằng đúng ngăn. */ min-width: 0; max-width: none; margin: var(--wv-k3) var(--wv-k3) var(--wv-k2); } .wv-canh .wv-tim-nhanh .wv-o-nhap { width: 100%; height: 2.25rem; /* Bỏ khoảng chừa bên phải, vì gợi ý phím tắt đã ẩn đi rồi. Để nguyên thì chữ bị dồn sang trái và ô trông rỗng một mảng. */ padding-right: var(--wv-k3); font-size: var(--wv-cd-13); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #ffffff; } .wv-canh .wv-tim-nhanh .wv-o-nhap::placeholder { color: rgba(255, 255, 255, .62); } /* Hình kính lúp trong ô cũng phải nhạt theo nền tối, không thì nó chìm hẳn. */ .wv-canh .wv-tim-nhanh .wv-o-tim > .wv-bt { color: rgba(255, 255, 255, .62); } /* Gợi ý phím tắt ẩn đi: điện thoại không có bàn phím để bấm tổ hợp, mà nó lại chiếm mất một góc ô. */ .wv-canh .wv-tim-nhanh .wv-tim-phim { display: none; } /* Bảng kết quả tìm bung ra trong ngăn trượt, nền sáng để đọc được. */ .wv-canh .wv-tim-nhanh .wv-tim-ket-qua { max-height: 55vh; overflow-y: auto; } /* CỘT XÓA KHÔNG GHIM VÀO MÉP PHẢI. Đã thử ghim và đã bỏ. Ghim thì ô Xóa nổi đè lên bảng: nó mang nền riêng, có bóng một bên, và đứng yên trong khi mười một cột kia trôi qua dưới nó. Nhìn ra màn hình thì không đọc được đó là một cột, chỉ thấy một mảng trắng chặn ngang bảng, còn ô tiêu đề của nó thì là một mảng xám trống trơn. Người dùng đọc ra là giao diện hỏng chứ không đọc ra là tiện. Bảng chiết tính vốn phải cuộn ngang trên điện thoại vì nó có mười hai cột. Cột Xóa cứ trôi cùng mấy cột kia, cuộn tới đâu thấy tới đó, đúng như mọi cột còn lại. */ /* Tên người dùng và vai trò nhường chỗ, chỉ còn vòng tròn chữ cái đầu. Cả hai vẫn nằm nguyên trong thực đơn thả xuống nên không mất thông tin nào, và hai mục tài khoản còn được đặt lại một lần nữa ở cuối thanh điều hướng. */ .wv-nguoi-dung { display: none; } .wv-menu-nguoi > summary .wv-bt { display: none; } .wv-doi-chi-nhanh label { display: none; } .wv-thanh-tren { gap: .5rem; } } /* ------------------------------------------------------------------ Mốc 560: điện thoại, thanh ngang còn đúng ba thứ ------------------------------------------------------------------ */ /* Ba thứ ấy là nút ba gạch, logo công ty và nút tài khoản. Mọi thứ khác lui vào trong. Ô chọn chi nhánh KHÔNG bị bỏ đi, nó lui vào thực đơn tài khoản, vì đổi chi nhánh là một thao tác chứ không phải một mẩu tin. Chuông thông báo thì lui hẳn: mọi việc nó nhắc đều là một màn hình có thật, và trên điện thoại một con số nhỏ ở góc phải không đáng lấy đi chỗ của cái nút mở thực đơn. */ @media (max-width: 560px) { .wv-chi-nhanh, .wv-doi-chi-nhanh, .wv-chuong { display: none; } .wv-tha-chi-nhanh { display: flex; } /* Còn lại đúng phần hình của logo, tên cửa lui vào tiêu đề trang. */ .wv-nhan-chu { display: none; } .wv-logo-thanh { height: 1.625rem; } .wv-menu-tha { min-width: 15rem; } .wv-dau-trang { flex-wrap: wrap; } .wv-dau-trang > *:first-child { flex: 1 1 100%; } } /* ------------------------------------------------------------------ Người dùng tắt hiệu ứng chuyển động ------------------------------------------------------------------ */ /* Người đặt hệ thống ở chế độ giảm chuyển động thường là người bị chóng mặt vì thứ trôi qua mắt. Ngăn trượt vẫn mở ra đóng vào, thanh dọc vẫn thu vẫn mở, chỉ là xong ngay chứ không trượt qua mắt. */ @media (prefers-reduced-motion: reduce) { .wv-canh, .wv-thanh-tren, .wv-vo, .wv-chan-trang, .wv-bo-qua, .wv-nhom-mui { transition: none; } /* Vệt sáng chạy ngang của khung chờ tải đứng lại, chỉ còn nền xám. */ .wv-cho-tai { animation: none; } } /* ------------------------------------------------------------------ Dòng tóm tắt chỉ hiện ở màn hẹp, thêm ở lượt vá cuối lượt bốn ------------------------------------------------------------------ */ /* VÌ SAO CÓ. Quy tắc 15 nói bảng SỐ vẫn cuộn ngang ở màn hẹp, vì xếp chồng phá mất đúng cái chúng sinh ra để làm là để các con số thẳng cột mà so với nhau. Luật ấy đúng và không đổi. Nhưng quy tắc 28 nói cột nào nằm sau bề rộng khung nhìn thì chỉ dành cho thứ người dùng đi TRA, không dành cho thứ họ đi TÌM. Hai luật ấy đụng nhau ở bảng đối chiếu tạm ứng của đoàn. Đo được ngày 26 tháng 8 năm 2026 ở khổ 390: bảng đòi 898 điểm ảnh trong khung 340, và năm cột nằm ngoài khung nhìn gồm cả ba cột Xin ứng, Thực chi, Chênh lệch, tức đúng ba con số làm nên câu hỏi của cả màn ấy. Người dùng chỉ nhìn thấy mã phiếu và một phần cột việc. Cách chữa giữ được CẢ HAI luật: bảng vẫn cuộn ngang y như cũ, và ở màn hẹp mỗi dòng thêm một câu tóm tắt ba con số ấy nằm ngay trong ô đầu tiên, tức trong khung nhìn. Người lướt đọc được ngay; người cần so cột vẫn kéo ngang được. Mốc 900 chứ không phải 560: ở khổ 768 bảng cũng đã đòi 898 điểm ảnh trong khung 698. */ .wv-tom-tat-hep { display: none; } @media (max-width: 900px) { .wv-tom-tat-hep { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--wv-chu-phu, #5a5f6a); } }