/* FQFVN — nền xanh lạnh (kho đông), điểm nhấn xanh rêu cho sổ chi phí,
nâu hổ phách (vỏ sầu) cho sổ vật tư. Chữ Be Vietnam Pro làm riêng cho
tiếng Việt; số và mã dùng JetBrains Mono cho thẳng cột. */
:root{
/* CHỈ giao diện SÁNG — Tấn Phú chốt 15/09/2026, bỏ hẳn nền tối.
`color-scheme: light` không phải thừa: thiếu nó, điện thoại đang bật nền
tối sẽ tự vẽ ô nhập, ô chọn và thanh cuộn theo kiểu tối, trong khi trang
đã cố định sáng — chữ đen trên nền đen ở đúng mấy ô người ta phải gõ. */
color-scheme: light;
/* NỀN TRANG #faf9f8 — cùng màu với --nen của hệ Nocturne (16/09/2026).
Trước đây bộ token cũ dùng #eef1ee (trắng ngả xanh lạnh, ý là kho đông) còn
màn Nocturne dùng #faf9f8 (trắng ngả ấm, theo quyết định "đỏ trên trắng
giống cờ Nhật Bản" ngày 14/09). Đi từ Tồn kho sang Phiên duyệt là cả tấm
nền đổi sắc — thấy rõ khi hai tab mở cạnh nhau.
Đây là đổi ĐÚNG MỘT token nền, không phải đổ cả bảng màu Nocturne vào
:root: viền, nền lún, chữ mờ vẫn y như cũ. Không thích thì sửa lại một
dòng này. Chữ trên nút đỏ lấy màu này (.btn-primary) nên tương phản nhúc
lên chút: 4,3:1 → 4,55:1 trên #DF301C. */
--luu:#1f77d0; --bg:#faf9f8; --surface:#fff; --ink:#151d1a; --muted:#5d6b65; --line:#d3dad5; --sunken:#e7ebe8;
/* TRẮNG — khai Ở ĐÂY dù `nocturne.css` cũng có (18/09/2026). Không phải trùng
lặp thừa: `fqfvn.css` dùng nó ở năm chỗ (chữ trên nền tối của hộp xem ảnh,
chip nhà máy đọc), mà màn duyệt chạy bộ token cũ thì KHÔNG nạp nocturne.css
— nên `var(--trang)` ở đó là giá trị không hợp lệ, `color` bị bỏ, chữ rơi về
màu thừa hưởng. Chữ trắng hoá chữ ĐEN trên nền tối: nhìn thì như cái nút
hỏng. Đúng cú `--do` đã ghi ở § "MỌI THỨ MÁY ĐỌC NÓI", lần thứ hai.
LUẬT: luật trong fqfvn.css chỉ được dùng token khai trong fqfvn.css. */
--trang:#fff;
--expense:#DF301C; --expense-soft:#e3efeb; --supply:#8a5a11; --supply-soft:#f6ece0;
--danger:#a8401c; --danger-soft:#f9e8e2; --warn:#96700a; --warn-soft:#f7eed6;
/* VÀNG LỢT của dòng ĐÃ GHI SỔ — Tấn Phú chốt 22/09/2026: *"với dòng hoàn
thành đổi qua màu vàng lợt"*. Phải là một token riêng, không mượn
`--warn-soft`: cái đó đang làm màu RÊ CHUỘT của mọi bảng, mà hai thứ dùng
chung một màu thì rê qua một dòng đã ghi sổ là không thấy gì đổi.
Đo: ΔE 20,3 với màu rê chuột và 33,9 với nền trắng của dòng thường — xa cả
hai bên. Chữ `--ink` trên nền này được 13,8:1. */
--xong-vang:#f6e7a8;
/* Bậc ĐẬM của thang cảnh báo — nền đặc, cho nút chứ không cho khối chữ.
Trùng hex với --tt-canh-nen là cố ý và không phải chỗ để gộp: thang
--tt-* nói "một việc đang ra sao" (huy hiệu), thang này là màu vẽ giao
diện. --supply và --giay-dongthung từng là cặp thứ hai như vậy, tới
18/09/2026 thì thôi — thang loại giấy sáng lên, --supply đứng yên. Chính
vì hai token RỜI NHAU mà một thang đổi không kéo thang kia đi theo. */
--warn-manh:#ffc045;
--shadow:0 1px 2px rgba(21,29,26,.06), 0 8px 24px -16px rgba(21,29,26,.28);
/* Thang TRẠNG THÁI — Tấn Phú chốt 14/09/2026, đổi sang NỀN ĐẶC 15/09/2026.
Năm màu nền lấy đúng từ ảnh mẫu anh gửi (trích pixel, không đoán bằng mắt).
Khác hẳn thang nhận diện: đỏ/trắng là thương hiệu, còn năm màu này chỉ để
nói MỘT việc đang ra sao. Đừng dùng chúng cho nhãn dữ liệu, và đừng dùng
nhãn dữ liệu làm trạng thái.
CHỮ TRẮNG CẢ NĂM — Tấn Phú chốt 15/09/2026, đúng như ảnh mẫu.
Ghi lại con số để người sau đừng "sửa giúp": chữ trắng trên hổ phách chỉ
được 1,61:1 và trên ngọc 2,03:1 (đo trên chính ảnh mẫu), dưới chuẩn 4,5:1
khá xa. Anh biết và vẫn chọn trắng cho đồng bộ — đây là quyết định, không
phải sót. Đừng đổi lại mà không hỏi. Muốn chữ đen cho hai nền sáng thì đặt
--tt-ok và --tt-canh về #14181a, khi đó được 8,66:1 và 10,96:1. */
--tt-ok:#ffffff; --tt-ok-nen:#17cab8; /* thành công — ngọc */
--tt-loi:#ffffff; --tt-loi-nen:#fd3995; /* thất bại — hồng sen */
--tt-tin:#ffffff; --tt-tin-nen:#1f97f4; /* thông báo — xanh da trời */
--tt-canh:#ffffff; --tt-canh-nen:#ffc045; /* cảnh báo — hổ phách */
--tt-suco:#ffffff; --tt-suco-nen:#505050; /* sự cố — than chì */
/* Thang LOẠI GIẤY — Tấn Phú chốt 15/09/2026, khi app tự nhận ra mình đang đọc
tờ gì. Tám màu này KHÔNG phải trạng thái (đó là thang --tt-* ở trên) và
không phải nhận diện (đó là đỏ/trắng): chúng chỉ nói "anh đang ở màn nào".
Vì sao cần: hai màn dễ nhầm nhau nhất là Sản lượng và Đóng thùng — cùng
nhãn A/B/C/D/CC/Bi ở cột trái, nên nhìn lướt qua không biết máy đọc tấm ảnh
thành cái nào. Phân bằng SẮC (xanh dương ≠ cam) chứ không bằng độ sáng, để
người phân biệt màu kém vẫn tách được.
SÁNG, KHÔNG ÂM — Tấn Phú chốt 18/09/2026, kèm ảnh mẫu: *"các tag màu sắc
đang quá âm… tôi cần kiểu sáng"*. Bản cũ là tám màu ĐỤC (bão hoà 40–78%,
sáng 25–43%), mà hàng thẻ lọc còn phủ thêm opacity .55 nữa nên ra pastel
xám — trích pixel ảnh anh gửi đo được #9991bb · #95a2c8 · #baa170. Nay bão
hoà 63–100%, và hàng thẻ bỏ hẳn lớp opacity kia (xem .loc-tag). Đổi Ở ĐÂY
nên nhãn, dải đầu màn duyệt và vạch trên lưới Chụp giấy đổi cùng một lượt —
ba chỗ, một bộ màu, không chỗ nào tự pha màu riêng.
ĐI BA NẤC MỚI TỚI, ghi lại để người sau đừng kéo ngược:
① đục — bão hoà 40–78%, anh nói "quá âm";
② chói — 73–91%, anh nói *"màu giờ quá sáng rồi. giảm lại chút"*;
③ hạ một nấc, RỒI TRẢI RA BẢY SẮC — *"đang có 2 màu tím luôn. sửa lại.
đỏ cam vàng lục lam chàm tím. có rất nhiều màu mà"*.
Nấc ③ là chỗ bài học nằm: hạ độ chói xong thì tám màu vẫn SAI, vì chúng
dồn cục. Đo mới thấy rõ — khoảng cách Lab (ΔE) của cặp gần nhau nhất chỉ
25,5 (tím #ae2fcc ↔ chàm #7352e8), và bốn màu chen trong quãng lam–lục
176°–220° trong khi cả vùng đỏ–cam–vàng bỏ trống. Nay tám màu rải đều
vòng màu — góc 0 · 29 · 45 · 146 · 205 · 235 · 289 · 326 — và cặp gần
nhau nhất lên ΔE 35,8. Thêm màu thì ĐO ΔE với bảy màu kia trước, đừng
chọn bằng mắt: hai màu cách nhau 36° góc vẫn có thể cùng đọc ra "tím".
CHỮ THEO TỪNG NỀN, không phải trắng hết — đây là chỗ dễ sửa hỏng nhất.
Bảy nền kia chữ trắng (4,58 · 4,69 · 4,71 · 4,93 · 5,14 · 5,15 · 5,55:1,
đều qua chuẩn 4,5:1), riêng VÀNG thì không: chữ trắng trên #edb100 chỉ
được 1,93:1, không đọc nổi. Nó dùng --ink và được 8,91:1. Muốn vàng mà
vẫn chữ trắng thì phải dìm nền xuống thành nâu mù tạt — tức quay lại đúng
cái "âm" đã bị chê. Nên: đổi nền nào thì đổi --giay-*-chu của nền ấy theo,
và .dai-giay đã bỏ color:#fff ở luật gốc để ăn theo cặp token này.
Và nhãn LÚC NÀO CŨNG ghi tên loại bằng chữ — màu chỉ là thứ nhắc thêm, bỏ
màu đi vẫn đọc được.
MÀU THỨ CHÍN (quỹ tạm ứng) chọn bằng phép ĐO, đúng lời dặn ngay trên. Quãng
45°–146° là chỗ trống rộng nhất của vòng màu, nhưng mọi màu trong đó đọc ra
"vàng ám" hay "lục ám" — cùng họ với hai màu đã có. Quãng 146°–205° hẹp hơn
mà tách bạch hơn: #107f84 cách màu gần nhất ΔE 42,1, rộng hơn cả cặp gần
nhau nhất của tám màu cũ (35,8 — đỏ ↔ cam). Chữ trắng được 4,78:1. */
--giay-bangluong:#db2f2f; --giay-bangluong-chu:#fff; /* đỏ · 0° */
--giay-dongthung:#b45c08; --giay-dongthung-chu:#fff; /* cam · 29° */
--giay-valot:#edb100; --giay-valot-chu:#151d1a; /* vàng · 45° — chữ MỰC */
--giay-thumui:#158746; --giay-thumui-chu:#fff; /* lục · 146° */
--giay-sanluong:#0a6cb0; --giay-sanluong-chu:#fff; /* lam · 205° */
--giay-nhaphang:#5560db; --giay-nhaphang-chu:#fff; /* chàm · 235° */
--giay-chungtu:#ae2fcc; --giay-chungtu-chu:#fff; /* tím · 289° */
--giay-phieuchi:#cc2b86; --giay-phieuchi-chu:#fff; /* hồng · 326° */
--giay-quytamung:#107f84; --giay-quytamung-chu:#fff; /* lục lam · 183° */
/* Ô ĐÃ SỬA SỐ ở chế độ soi chia đôi — nền xanh nhạt (Tấn Phú chốt 15/09/2026).
Khác hẳn ô ĐÃ TICK, và phải khác: tick nói "tôi đã soi số này", sửa nói
"con số này do người gõ, không phải từ tờ giấy". Hai việc khác nhau nên
tách hẳn KÊNH — tick đổi VIỀN, sửa đổi NỀN. Một ô vừa sửa vừa tick thì đọc
được cả hai, chứ tô nền cả hai là hai nghĩa nhập làm một.
Đo rồi mới chọn: --sua-chu trên --sua-nen được 6,35:1, --ink được 15,1:1.
Ở chế độ cũ, ô đã sửa vẫn là NỀN VÀNG như trước — không đụng. */
--sua-nen:#e2f2fb; --sua-vien:#1f97f4; --sua-chu:#0b5c86;
/* Ô NGƯỜI GÕ của bảng kiểu sổ (màn Duyệt chi lương) — vàng #FFF2CC của Lark
dẹt trên nền trắng ở độ đục 0,5, tức ĐÚNG màu ô nhập của màn Sổ. Khai ĐỤC
chứ không rgba: cột họ tên dính, và ô dính nền trong suốt thì chữ chạy bên
dưới hiện xuyên qua. */
--o-nhap:#fff9e6;
/* KHUNG CỦA MỌI MÀN — một bề rộng, một lề, một chiều cao thanh trên, dùng
cho CẢ HAI hệ thiết kế (bộ token cũ và Nocturne).
Khai ở `:root` của file này chứ không ở `nocturne.css` vì `fqfvn.css` LUÔN
được nạp: màn Nocturne mà file kia không tới được máy người dùng — đã xảy
ra hai lần, xem cms/CLAUDE.md § "Giao diện" — thì cái vỏ trang vẫn đúng.
1400px và 51px là số của hệ Nocturne, nay áp cho mọi màn: trước đây
`.page` khai 1020px nên đi từ Tồn kho sang Phiên duyệt là mép nội dung
nhảy 380px, và thanh trên bó trong 1020px thì mười hai mục chữ không đủ
chỗ, vỡ thành ba hàng. */
--khung-rong:1400px; --khung-le:20px; --cao-thanh-tren:51px;
/* Đệm trên–dưới của thanh. Là token vì menu con treo theo nó: mép trên của
menu = mép dưới của thanh, tính bằng chính con số này. Đổi đệm mà menu
không theo là menu lơ lửng giữa thanh. */
--dem-thanh:8px;
}
/* Lề hẹp lại trên điện thoại. Khai một chỗ nên thanh trên, nội dung và thanh
dính co cùng nhau — 20px hai bên ở màn 390px là ăn mất một phần mười bề ngang. */
@media (max-width:560px){ :root{--khung-le:12px} }
/* [hidden] PHẢI THẮNG — một luật cho cả app (15/09/2026).
Luật `[hidden]{display:none}` nằm trong bảng kiểu của TRÌNH DUYỆT, mà bảng
đó thua mọi luật của trang. Nên bất cứ lớp nào khai `display` — `flex`,
`grid`, `inline-block` — là phần tử ấy hiện ra kể cả khi đang mang `hidden`,
và JS bật tắt `el.hidden` thì nhìn không thấy gì đổi. Từ ghế người dùng thì
đó là "cái nút không ăn".
Repo này đã dính năm lần và vá tay năm chỗ rời nhau (`.commitbar-error`,
`.day`, `.day-toggle`, `.row`, `.tran-noi`), lần thứ năm là khối nút của bộ
soi ảnh. Theo đúng luật đếm ở CLAUDE.md § "Chống rác" — bản thứ ba thì dừng
lại gộp — nay chỉ còn MỘT luật, và mọi chỗ dùng `hidden` sau này tự đúng.
`!important` ở đây là cố ý và là chỗ DUY NHẤT trong file được dùng nó: ẩn thì
phải là ẩn, không có ngoại lệ nào đáng để một lớp đè lại. Muốn một phần tử
hiện thì bỏ thuộc tính `hidden`, đừng chữa bằng CSS. */
[hidden]{display:none !important}
*{box-sizing:border-box}
/* iOS TỰ PHÓNG CHỮ — tắt đi, đây là lỗi "chữ siêu to" ngày 16/09/2026.
Safari trên iPhone có một phép tên là Text Autosizing: gặp một khối rộng hơn
màn hình, nó TỰ NHÂN cỡ chữ bên trong lên cho "dễ đọc". Bảng duyệt chi lương
có mười một cột nowrap nằm trong vùng cuộn ngang — đúng cái nó nhắm tới — nên
Safari thổi cột Họ tên lên gấp đôi trong khi CSS vẫn ghi 13,5px. Nhìn từ ghế
người dùng: chữ to đến mức không thấy được cột nào khác, mà không có luật CSS
nào giải thích được.
Mấy bảng khác hẹp hơn nên chưa bao giờ chạm ngưỡng — đó là lý do chỉ một màn
bị, và vì sao nhìn bằng mắt không ra.
100% KHÔNG phải cấm phóng to: người dùng vẫn chụm hai ngón phóng được như
thường (cấm là `user-scalable=no`, và ta không dùng). Nó chỉ tắt phần TỰ
ĐỘNG. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink);
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.55}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.02em; text-wrap:balance}
/* Tiêu đề trang LUÔN cách phần dưới 20px — Tấn Phú chốt 15/09/2026. Trước đó
h1 margin:0 nên câu mô tả dính sát tiêu đề. Đặt ở h1 chứ không ở .page-head
để màn nào cũng được, kể cả màn đăng nhập không có .page-head. */
h1{font-size:clamp(24px,4vw,34px); line-height:1.15; margin-bottom:20px} h2{font-size:19px} h3{font-size:15px; font-weight:600}
p{margin:0; max-width:66ch}
a{color:var(--expense)}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--expense); outline-offset:2px}
.muted{color:var(--muted)} .small{font-size:12.5px}
.eyebrow{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
/* KHUNG NỘI DUNG — `.page` là màn bộ token cũ, `.noi-dung` là màn Nocturne.
Vẫn hai lớp vì mật độ BÊN TRONG khác nhau (thẻ Nocturne theo thang 0,70×),
nhưng cái KHUNG thì một: cùng bề rộng, cùng lề, cùng khoảng hở trên và dưới.
Trước 16/09/2026 hai lớp này khai hai bề rộng (1020 và 1400) và hai lề (20
và 12), nên chuyển màn là cả trang xê dịch. */
.page,.noi-dung{max-width:var(--khung-rong); margin-inline:auto;
padding-inline:var(--khung-le); padding-block:20px 64px}
.page{display:flex; flex-direction:column; gap:22px}
.page.narrow{max-width:720px}
/* Chế độ NHÚNG — trang đang nằm trong iframe của hộp "+" ở báo cáo Sản xuất
theo ngày (?embed=1, xem Views/Shared/_Layout.cshtml). Không có thanh trên
nên phần đệm 32px/80px của .page chỉ còn là khoảng trắng ăn mất chiều cao
hộp; và nền phải TRONG SUỐT để mặt hộp không bị hai lớp nền chồng nhau. */
body.nhung{background:transparent}
body.nhung .page{padding-block:4px 20px; padding-inline:2px; max-width:none}
body.nhung h1{font-size:20px; margin-bottom:12px}
body.nhung .page-head .eyebrow{display:none}
.page-head{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.page-head > div:first-child{flex:1; min-width:min(100%,300px)}
/* ── THANH TRÊN — MỘT bản cho MỌI màn ──────────────────────────────────────
Trước 16/09/2026 có HAI bản: bản này (bộ token cũ) và một bản đè lại trong
`nocturne.css`. Hai bản là hai chỗ để lệch nhau, và đã lệch hẳn:
- màn Nocturne (Tồn kho, bốn báo cáo, Tính giá mua, Lương): thanh 51px, tràn
cả bề ngang, mười hai mục chữ 13px nằm gọn MỘT hàng;
- màn còn lại (Phiên duyệt, Duyệt chi phí, Nhập liệu bằng AI, Người dùng,
Nhật ký, Đồng bộ): thanh bó trong 1020px với chữ 14px — không đủ chỗ nên
nav bị co, nhãn vỡ hai dòng ("Tồn / kho", "Nhập liệu bằng / AI") và khối
người dùng tụt xuống hàng thứ ba. Thanh cao gấp ba, nội dung tụt theo.
Nay bản DUY NHẤT nằm ở đây — `nocturne.css` không đè một dòng nào nữa. Ở đây
chứ không ở file kia vì `fqfvn.css` luôn được nạp: vỏ trang không được phụ
thuộc vào một file CSS thứ hai, thứ đã hai lần không tới được iPhone của Tấn
Phú (xem cms/CLAUDE.md § "Giao diện").
Thanh KHÔNG dính đỉnh (Tấn Phú chốt 14/09/2026) — đừng thêm position:sticky. */
/* Thanh khai ĐỦ nền chữ của chính nó — phông, cỡ, dòng, màu, cách vẽ nét — chứ
không thừa hưởng từ body. `body.nocturne` đặt body sang Inter 14px/1,55, màu
#241f1e và -webkit-font-smoothing:antialiased; bộ token cũ thì Be Vietnam Pro
15px/1,55 màu #151d1a. Để inherit là hai màn ra hai cái thanh hơi khác nhau ở
đúng những chỗ khó chỉ tên: chữ đậm hơn một chút, tên người sẫm hơn một chút.
Đo bằng getComputedStyle chứ không bằng mắt — xem phần kiểm ở cuối commit. */
.topbar{background:var(--surface); border-bottom:1px solid var(--line);
font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:13px; line-height:1.4; color:var(--ink);
-webkit-font-smoothing:antialiased}
/* Thanh TRÀN cả bề ngang cửa sổ, không thụt vào bằng --khung-rong như nội dung:
mười hai mục chữ cần trọn chỗ, và bó nó lại chính là cái đã làm nav vỡ hàng. */
.topbar-inner{min-height:var(--cao-thanh-tren); padding:var(--dem-thanh) var(--khung-le);
display:flex; align-items:center; gap:18px; flex-wrap:nowrap}
/* MỌI luật màu chữ của thanh phải ĐÈ ĐƯỢC `body.nocturne a` và
`body.nocturne a:hover` trong nocturne.css — đó là màu link của cả trang, và
file đó nạp SAU file này. `.brand` trần (một lớp) thua nó; `.topbar nav a`
BẰNG ĐIỂM nên cũng thua vì nạp sau. Hậu quả đã thấy thật: tên app, tên người
và cả mười hai mục trên thanh hoá ĐỎ ở màn Nocturne.
Nên: thêm `.topbar` cho con mang lớp, và mục nav mang lớp `nav-item` riêng
(xem Views/Shared/_NavLink.cshtml). Đừng gỡ mấy tiền tố này ra cho gọn. */
/* Chấm đỏ + chữ hoa giãn: bản nhận diện của hệ Nocturne, nay dùng cho mọi màn. */
.topbar .brand{flex:none; display:flex; align-items:center; gap:8px; white-space:nowrap;
font-weight:500; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink); text-decoration:none}
.topbar .brand::before{content:""; width:7px; height:7px; flex:none; border-radius:50%;
background:var(--expense)}
/* nav ăn HẾT chỗ còn lại (flex:1) chứ không chỉ rộng bằng nội dung. Hai việc:
mép mờ ở dưới rơi vào chỗ TRỐNG khi mọi mục còn vừa, nên không màn nào bị mờ
đuôi chữ; và min-width:0 cho phép nav co lại để CUỘN, thay vì đẩy khối người
dùng ra khỏi thanh. */
/* gap 12px, không phải 16px: đo ở Chromium với đủ mười hai mục — 16px thì nav
cần 1095px, laptop 1366px chừa đúng 1095px nên mục cuối dính mép mờ; 12px thì
cần 1051px, còn thừa 44px, và màn 1280px cũng vừa. Rộng hơn nữa thì đẹp hơn
một chút mà hai khổ laptop phổ biến nhất phải cuộn — không đáng. */
.topbar nav{flex:1 1 auto; min-width:0; display:flex; gap:12px; font-size:13px;
overflow-x:auto; overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
/* Mờ dần mép phải: dấu hiệu duy nhất nói "còn nữa, kéo tiếp" khi đã giấu
thanh cuộn. Không có nó thì mục ngoài khung coi như không tồn tại. Cửa sổ
hẹp trên máy tính cũng cần, không riêng điện thoại — nên luật này nằm
NGOÀI khối @media, khai một lần cho cả hai khổ máy. */
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.topbar nav::-webkit-scrollbar{display:none}
/* nowrap: nhãn thà bị cuộn ra ngoài chứ KHÔNG vỡ hai dòng. */
.topbar a.nav-item{flex:0 0 auto; color:var(--muted); text-decoration:none; white-space:nowrap}
.topbar a.nav-item:hover{color:var(--expense)}
/* Đứng ở mục con thì mục CHA cũng sáng — hai bộ chọn một luật, không chép đôi
cặp màu ra hai chỗ. `.cum-dang-o` do `_Layout` gắn khi màn đang xem là một
trong sáu mục con; menu con đóng lại khi rời chuột, nên thiếu nó thì cả thanh
không có mục nào sáng và màn Chi phí trông như một trang ngoài menu. */
.topbar a.nav-item.dang-o,
.topbar .nav-cha.cum-dang-o a.nav-item{color:var(--expense); font-weight:600}
/* Máy tính KHÔNG hiện icon — thanh chữ đọc nhanh hơn. Icon chỉ bật ở bản điện
thoại, xem @media bên dưới. */
.topbar a.nav-item .ic{display:none}
.topbar .who{flex:none; margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12.5px}
.topbar .who-name{font-weight:600; color:inherit; text-decoration:none; white-space:nowrap}
.topbar .who-name:hover{color:var(--expense)}
.topbar .who-role{color:var(--muted); font-size:11.5px; white-space:nowrap}
/* MÁY TÍNH HẸP (laptop 1366px) — bỏ nhãn vai, giữ cả thanh trên MỘT hàng.
Đo ở 1366px: mười hai mục cần 1035px, thanh chỉ chừa 993px — thiếu 42px, nên
mục "Người dùng" nằm sau mép mờ và phải kéo mới thấy. Nhãn vai ("Chủ / điều
hành") rộng chừng 105px và là thứ ít cần nhất trên thanh: tên người đã nói ai
đang đăng nhập, còn vai thì mở màn Người dùng là thấy. Bỏ nó ra là đủ chỗ.
Dưới 860px nhãn vai vốn đã bị ẩn, xem khối @media của bản điện thoại. */
@media (max-width:1439px){ .topbar .who-role{display:none} }
/* Bo 4px như hệ Nocturne, nhưng GIỮ hover đỏ của bản cũ: bấm là mất phiên, mà
đỏ là màu duy nhất trong app nói "việc này có hậu quả". */
.topbar .signout{background:none; border:1px solid var(--line); border-radius:4px;
padding:4px 10px; color:var(--muted); font-size:12px}
.topbar .signout:hover{border-color:var(--danger); color:var(--danger)}
/* In ra giấy thì bỏ thanh điều hướng — giấy không bấm được. Trước đây chỉ màn
Nocturne có luật này; thanh đã dùng chung thì luật in cũng dùng chung. */
@media print{ .topbar{display:none} }
/* ── MỤC CÓ MENU CON ────────────────────────────────────────────────────────
Hiện có ĐÚNG MỘT cụm, và nó đứng ĐẦU dải: Báo cáo → Tổng hợp · Tồn kho ·
Lương · Chi phí · Bán hàng · Trái tươi (xem _Layout.cshtml).
MẶC ĐỊNH là PHẲNG: cả cụm `display:contents` nên mục cha và mục con thành hai
mục thường, đứng cạnh nhau trong dải. Đó là kiểu dùng trên điện thoại VÀ trên
máy tính cửa sổ hẹp — vì dải nav cuộn ngang, và một khối cuộn thì CẮT MẤT mọi
thứ đổ ra ngoài nó (`overflow-x:auto` kéo theo `overflow-y`, không có cách
nào xin riêng trục dọc). Menu rê chuột đặt trong đó là menu không bao giờ
thấy — đúng cái bẫy `overflow` đã ghi trong cms/CLAUDE.md § Giao diện.
TỪ 1440px TRỞ LÊN mới thành menu rê chuột, và đó là khổ nav KHÔNG cần cuộn.
Hết cuộn thì hết cắt, nên menu con đổ ra ngoài được. Cùng một mốc 1440px với
luật ẩn nhãn vai ở trên — một mốc "máy tính rộng" cho cả thanh, đừng thêm mốc
thứ hai.
ĐO LẠI MỖI KHI THÊM MỤC: ở đúng 1440px thanh chừa 1055px cho nav, và mười một
mục hiện tại ăn hết đúng 1055px — hết chỗ trống. Đo bằng
`nav.scrollWidth - nav.clientWidth` trên màn thật; ra 0 là còn vừa. Vượt là mục cuối đè lên khối
người dùng, và menu con bị cắt mà không có gì báo. Đó là lý do cụm Báo cáo có
mặt: trước khi gom, nav cần 1190px và ba mục cuối tràn ra ngoài. Thêm mục nữa
thì gom tiếp, đừng nới. */
.topbar .nav-group,.topbar .nav-sub{display:contents}
/* MỤC CHA CHỈ CÓ NGHĨA KHI CÓ MENU. Dưới 1440px cụm dàn phẳng và mọi mục con
nằm thẳng trong dải — lúc đó cái cha là một link THỨ HAI trỏ vào đúng chỗ một
mục con đã trỏ, tức một mục chiếm chỗ mà không dẫn đi đâu mới. Ẩn nó đi.
Cụm nào lấy một MÀN THẬT làm cha thì đừng đặt lớp này — cha của nó là một mục
dẫn đi đâu đó ở mọi khổ. */
.topbar .nav-cha{display:none}
/* Cha KHÔNG có lớp `dang-o` của riêng nó khi ta đứng ở một mục con — luật "đang
ở đây" của _NavLink chỉ biết mục nó đang vẽ. `_Layout` gắn `cum-dang-o` khi
màn đang xem nằm trong danh sách mục con; luật màu ở § trên nhận cả hai bộ
chọn nên không có cặp màu thứ hai để trôi. */
@media (min-width:1440px){
.topbar .nav-cha{display:flex; align-items:center; align-self:stretch}
.topbar nav{overflow:visible; -webkit-mask-image:none; mask-image:none;
align-self:stretch; align-items:center}
.topbar .nav-group{display:flex; align-items:center; align-self:stretch;
position:relative; flex:0 0 auto}
/* Treo đúng MÉP DƯỚI của thanh: cụm đã cao bằng phần ruột (align-self:stretch),
cộng thêm đệm dưới là tới mép. Thiếu phép cộng đó thì menu phủ lên 8px cuối
của thanh và che luôn đường kẻ dưới. */
.topbar .nav-sub{
display:none; position:absolute; top:calc(100% + var(--dem-thanh)); left:-6px; z-index:40;
flex-direction:column; min-width:180px; padding:6px;
background:var(--surface); border:1px solid var(--line); border-radius:9px;
box-shadow:var(--shadow);
}
/* NHỊP CẦU QUA DẢI HỞ — không có nó thì menu con KHÔNG TỚI ĐƯỢC BẰNG CHUỘT.
Tấn Phú 19/09/2026: *"rê chuột khỏi cái Trái tươi là nó đóng luôn. k kịp rê
chuột vào menu con"*.
Dòng `top` ở trên treo menu thấp hơn đáy cụm đúng --dem-thanh (8px), và 8px
ấy KHÔNG thuộc cụm lẫn menu. Chuột đi thẳng xuống là rơi vào đó, `:hover`
tắt, menu `display:none` — mà đã none thì nó không còn hit-test được nữa,
nên tới chỗ menu đáng lẽ nằm thì chuột chạm vào TRANG chứ không chạm menu.
Đo ở 1600px trước khi sửa: cụm đáy y=43, menu đỉnh y=51, và mọi điểm
y=43..50 đều làm menu biến mất. Không phải "không kịp" — là không có đường.
(Vẩy chuột thật nhanh thì thỉnh thoảng qua được, vì con trỏ nhảy cóc qua cả
dải. Đó là lý do lỗi này trông như lúc được lúc không.)
Cầu là ::before của chính .nav-sub nên nó nằm TRONG .nav-group — chạm vào
cầu thì `.nav-group:hover` vẫn đúng. Nó chỉ tồn tại khi menu đang mở, vì
::before của một khối display:none thì không dựng ra, nên lúc menu đóng nó
không chắn cái gì. Rộng bằng menu (left/right:0) nên đi thẳng xuống từ bất
kỳ đâu trên mục cha đều rơi vào cầu.
ĐỪNG bỏ cầu này để "cho gọn" khi sửa `top`: hễ menu còn treo cách đáy cụm
một khoảng thì khoảng đó còn là vùng chết. Bỏ hở (top:100%) thì menu phủ
lên 8px cuối của thanh và che đường kẻ dưới — xem ghi chú ở `top` trên.
CAO HƠN DẢI HỞ MỘT CHÚT, cố ý. `bottom:100%` của một khối absolute đo theo
PADDING BOX của .nav-sub, tức đã trừ viền 1px — nên đúng bằng --dem-thanh
thì cầu phủ y=44..52 mà vùng chết bắt đầu từ y=43, hụt 1px và hỏng y như
không có cầu (đo thật, 19/09/2026). Phần dôi ra chỉ chồng lên phần ĐỆM dưới
của cụm, không chồng lên thẻ của mục cha, nên không cướp cú bấm nào. */
.topbar .nav-sub::before{
content:""; position:absolute; left:0; right:0; bottom:100%;
height:calc(var(--dem-thanh) + 4px);
}
/* :focus-within chứ không chỉ :hover — thiếu nó thì người đi bằng bàn phím
không có đường nào mở menu, mà mục con là màn duy nhất sau nó. */
.topbar .nav-group:hover .nav-sub,
.topbar .nav-group:focus-within .nav-sub{display:flex}
.topbar .nav-sub a.nav-item{padding:6px 8px; border-radius:6px}
.topbar .nav-sub a.nav-item:hover{background:var(--sunken)}
}
/* ── Thanh điều hướng trên ĐIỆN THOẠI — thu về một dải ICON cuộn ngang ──────
Mười ba mục chữ ở 390px xuống dòng ba lần, chiếm gần một phần ba màn hình và
đẩy nội dung tụt hẳn xuống. Thu thành icon + chữ nhỏ thì cả mười hai nằm trong
một dải cao 48px, cuộn ngang tới mục cuối.
Cùng MỘT thẻ với bản máy tính, chỉ khác CSS — hai bản menu riêng là hai
chỗ để lệch nhau khi thêm màn mới. Phần cuộn và mép mờ đã khai ở trên, khối
này chỉ còn phần KHÁC: xếp dọc icon trên chữ. */
@media (max-width:860px){
/* Cho xuống hàng trở lại: nav thành một dải riêng chiếm trọn hàng dưới. */
.topbar-inner{flex-wrap:wrap; gap:10px}
.topbar nav{order:3; width:100%; gap:2px}
.topbar a.nav-item{min-width:58px;
display:flex; flex-direction:column; align-items:center; gap:3px;
padding:6px 7px 5px; border-radius:8px;
font-size:10px; line-height:1.15; text-align:center}
.topbar a.nav-item .ic{
display:block; width:21px; height:21px;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
/* Đang ở màn nào thì tô nền — chữ 10px mà chỉ đổi màu thì nhìn không ra. */
.topbar a.nav-item.dang-o{background:var(--sunken); font-weight:600}
.topbar .who{gap:7px; font-size:12px}
.topbar .who-role{display:none}
}
/* ── MENU ĐIỆN THOẠI — danh sách CHA – CON ───────────────────────────────────
Dải icon cuộn ngang giấu mục cuối sau mép mờ, và dàn phẳng cụm Báo cáo nên
sáu màn đọc nằm lẫn với mấy màn nhập liệu. Tấn Phú 20/09/2026: *"Cấu trúc lại
menu cho mobile. Giống cấu trúc desktop cha con."*
Nút `.nav-nut` mở một PANEL DỌC ngay dưới thanh, giữ nguyên hình cha–con của
khổ ≥1440px. Không phải `