chỉ là gợi ý: ô nhập số tự bung ra gần 200px theo bề rộng mặc định của thẻ
input, và bóp nghẹt mấy cột chữ bên cạnh. Hồi năm cột thì còn chỗ để chịu;
thêm cột Danh mục vào là ô chọn teo còn 86px, không đọc nổi tên mục nào.
'fixed' làm mấy con phần trăm kia có hiệu lực thật. Nới min-width lên 760px
để sáu cột đều đủ thở; bảng vốn đã tự cuộn ngang trong .bang-boc nên không
tràn ra ngoài hộp, và bản điện thoại đã bỏ min-width ở cuối file này rồi. */
#bgBangDong table.bang,
#dBangDong table.bang,
#pxkBangDong table.bang,
#hdBangDong table.bang {
table-layout: fixed;
min-width: 760px;
}
#bgBangDong input, #dBangDong input, #pxkBangDong input, #hdBangDong input,
#bgBangDong select, #dBangDong select, #pxkBangDong select, #hdBangDong select {
min-width: 0; /* bề rộng mặc định của input không được phá bố cục fixed */
}
/* Ô tên hàng kèm ô tích 📦 "lấy từ hàng sẵn kho" — xem oTenHangDong() bên
ui.js. Ô tích co lại, ô chữ ăn hết phần còn lại của cột. */
.o-ten-hang { display: flex; align-items: center; gap: 4px; }
.o-ten-hang input[list] { flex: 1; min-width: 0; }
.o-ten-hang__kho {
margin: 0; display: flex; align-items: center; gap: 1px;
font-size: 12px; cursor: pointer; white-space: nowrap;
}
.o-ten-hang__kho input { width: auto; min-width: 0; min-height: 0; margin: 0; }
/* Tên dài tự xuống dòng: lớp chữ .o-ten-hang__chu giữ chỗ và hiện tên, ô nhập
thật phủ trong suốt lên trên, chỉ hiện ra lúc đang gõ (gợi ý datalist, máy
quét vẫn đi qua ô nhập như cũ). */
.o-ten-hang__o { position: relative; flex: 1; min-width: 0; }
.o-ten-hang__chu {
border: 1px solid #8f8f8f; border-radius: 2px; padding: 2px 4px;
min-height: 1.75em; line-height: 1.35; white-space: normal; overflow-wrap: anywhere;
background: Field; color: FieldText;
}
.o-ten-hang__chu.la-rong { color: var(--chu-nhat); }
.o-ten-hang__o input[list] {
position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; opacity: 0;
}
.o-ten-hang__o input[list]:focus { opacity: 1; }
/* Bảng hàng báo giá & đơn hàng rộng hơn: nút 🎁 🧩 ✕ nằm ngang một hàng */
#bgBangDong table.bang, #dBangDong table.bang { min-width: 1000px; }
#bgBangDong .kem__nut, #dBangDong .kem__nut { flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; }
#bgBangDong .kem__nut .nut, #dBangDong .kem__nut .nut { padding: 6px 8px; }
#bgBangDong tr:not(.dong-kem) > td:last-child, #dBangDong tr:not(.dong-kem) > td:last-child { padding-left: 4px; padding-right: 6px; }
/* 🎁 Sản phẩm đi kèm — hàng con ngay dưới dòng hàng, xem hangKem() bên ui.js.
Nút 🎁 và ✕ xếp dọc vì cột thao tác chỉ rộng ~7%. */
.kem__nut { display: flex; flex-direction: column; gap: 4px; align-items: center; }
tr.dong-kem > td { background: var(--nen-nhe); padding-top: 4px; }
.kem { display: flex; flex-direction: column; gap: 6px; padding-left: 24px; }
.kem__dau { font-size: 12.5px; font-weight: 700; }
.kem__mon { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Ô tên KHÔNG giãn hết hàng: bảng hàng rộng hơn hộp (min-width 760px, cuộn
ngang), giãn ra là đẩy ô số lượng và nút ✕ ra ngoài chỗ nhìn thấy. */
.kem__mon input[data-kem-ten] { flex: 0 1 240px; min-width: 0; }
.kem__mon input[data-kem-sl] { width: 80px; }
.kem__in { margin: 0; display: flex; align-items: center; gap: 3px; font-size: 12px; white-space: nowrap; }
.kem__in input { width: auto; min-height: 0; margin: 0; }
.kem > .nut { align-self: flex-start; }
/* Bảng hàng của hộp 📝 Hợp đồng — năm cột, không có Danh mục. Hộp chỉ rộng
~614px nên min-width 620px gốc của table.bang làm nó cuộn ngang vì đúng
6px; 540px vẫn đủ chỗ cho năm cột. */
#hdgHang table.bang { table-layout: fixed; min-width: 540px; }
#hdgHang input { min-width: 0; }
.nhan {
display: inline-block; padding: 3px 9px; border-radius: 20px;
font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.nhan--xanhduong { background: var(--xanhduong-mo); color: var(--xanhduong); }
.nhan--vang { background: var(--cam-mo); color: #9a5f11; }
.nhan--xanhla { background: var(--xanhla-mo); color: var(--xanhla); }
.nhan--do { background: var(--do-mo); color: var(--do); }
.nhan--tim { background: var(--tim-mo); color: var(--tim); }
.nhan--ngocbien { background: var(--ngocbien-mo); color: var(--ngocbien); }
.nhan--xam { background: var(--nen-nhe); color: var(--chu-nhat); }
/* ───────── Bảng Lịch sản xuất ─────────
Một đơn một dòng, công đoạn là cột tích — đúng kiểu tờ lịch giấy của xưởng.
Cột công đoạn phải HẸP và cố định bề ngang, nếu không bảy cột ấy giãn ra đẩy
hết cột "Nội dung công việc" ra ngoài màn hình. */
/* ───── .hop-lon--tran-man ĐÃ GỠ ─────
Nó từng là lối thoát riêng cho hai cái bảng xưởng: khung chung bó ở 1180px,
nên hai bảng ấy tự kéo mình ra bằng width:100vw cộng một lề trái ÂM tính từ
tâm khung.
Nay cả khu làm việc đã rộng hết màn hình — xem luật body.chi-bang-lam-viec
.boc ở mục 30 — nên cái lề âm ấy thành tai hoạ: nó tính theo giả định "cha
rộng đúng 1180px và đứng giữa trang", giả định đó vừa hết đúng. Để lại là
bảng bị đẩy hẳn ra ngoài mép trái màn hình.
Một chỗ nới thay cho hai chỗ tự nới. Mọi bảng trong khu làm việc nay rộng
bằng nhau, khỏi phải nhớ dán thêm class cho bảng mới. */
/* ───── Hai cột chữ CHIA NHAU phần thừa, không cột nào nuốt hết ─────
Trước đây "Nội dung công việc" lấy width:100%, nên cột Ghi chú bị ép còn
vài chục điểm ảnh: mỗi chữ rơi một dòng, một đơn cao vống lên đẩy đơn dưới
ra khỏi màn hình. Nay chia theo tỷ lệ, và min-width giữ sàn cho cả hai.
KHÔNG ép tỷ lệ cứng. Đã thử width:58%/22% và bỏ: bảng dàn trang tự động coi
% là mong muốn rồi vẫn chia lại theo lượng chữ, nên con số ép vào chỉ làm
khó đoán chứ không giữ được gì. Để trình duyệt tự giãn theo nội dung THẬT —
đơn ghi chú dài thì cột ghi chú rộng ra, đơn không ghi gì thì chỗ ấy trả
lại cho cột nội dung.
Chỉ giữ SÀN min-width: không có nó thì cột trống bị bóp còn vài chục điểm
ảnh và mỗi chữ rơi một dòng — đúng lỗi đã gặp. */
/* Sàn hạ từ 230 / 170 xuống 180 / 130 — tờ lịch phải vừa màn hình ~1100px
mà không kéo ngang; chữ dài vẫn cắt ở hai dòng, đọc đủ bằng title. */
.bang-sx th.sx-viec, .bang-sx td.sx-viec { min-width: 180px; }
.bang-sx th.sx-ghichu, .bang-sx td.sx-ghichu { min-width: 130px; }
/* ───── CHẶN TRẦN SỐ DÒNG ─────
Tờ lịch của xưởng phải liếc một cái thấy được nhiều đơn. Một đơn có yêu cầu
dài ba dòng là đẩy mấy đơn sau xuống dưới mép màn hình, và người ta cuộn
qua không thấy.
Cắt ở 2 dòng, phần còn lại nằm trong thuộc tính title — rê chuột vào là đọc
đủ, mà chiều cao mỗi dòng thì không bao giờ vượt khỏi tầm mắt. Dòng phụ
(tên khách · vật tư) cắt ở 1 dòng vì nó chỉ để đối chiếu nhanh.
Kẹp vào thẻ BÊN TRONG ô, không kẹp vào chính
: ô bảng buộc phải giữ
display:table-cell, đặt -webkit-box lên nó thì trình duyệt lờ đi và chữ vẫn
tràn xuống dòng thứ ba bị cắt ngang thân. */
.bang-sx td.sx-viec > b,
.bang-sx td.sx-ghichu > div {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden; overflow-wrap: anywhere;
}
.bang-sx td.sx-viec .chu-mo {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
overflow: hidden; overflow-wrap: anywhere;
}
/* Cột VẬT TƯ — MỘT DÒNG MỘT VẬT TƯ, tên bên trái số lượng bên phải.
Đúng cách xếp của hàng vật tư trong hộp nhập, nên người đọc trên tờ lịch và
người gõ trong hộp nhìn thấy cùng một hình.
Bản cũ rộng 150px và chặn hai hàng, nối cả danh sách thành một câu — đọc ra
"Mica trong 5 mm DL ×1, Mica trong 3…" rồi mất hẳn phần sau. Người duyệt
không biết đơn ăn những gì và bao nhiêu, mà đó đúng là thứ họ phải biết
trước khi cho chạy máy. Nay nới ra cho vừa một tên vật tư thật; cột chỉ có
mặt ở hai khu Chờ duyệt và Sản xuất xong nên không bóp chỗ suốt bảng, và
hẹp hơn nữa thì .bang-boc cuộn ngang như mọi cột khác. */
.bang-sx th.sx-vt, .bang-sx td.sx-vt { width: 232px; min-width: 200px; }
.bang-sx td.sx-vt .sx-vt__nhom + .sx-vt__nhom { margin-top: 6px; }
.sx-vt__nhan {
font-size: 10px; font-weight: 700; letter-spacing: .04em;
color: var(--chu-mo); text-transform: uppercase;
}
/* Tên chiếm phần thừa, con số neo bên phải và KHÔNG bao giờ bị cắt — cắt tên
thì còn đoán ra, cắt số thì dòng ấy thành vô nghĩa. Tên dài quá một hàng
thì ba chấm, đọc đủ bằng title. */
.sx-vt__dong { display: flex; gap: 6px; align-items: baseline; line-height: 1.4; }
.sx-vt__ten {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sx-vt__so { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Cột DUYỆT vừa đúng một cái nút, không rộng hơn. */
.bang-sx th.sx-duyet, .bang-sx td.sx-duyet { width: 96px; text-align: center; }
/* Cột VIỆC PHẢI LÀM của tab 📋 Báo cáo SX — bốn nút của chặng ghi vật tư.
Chốt bề rộng để hai nút "Cắt lại" xuống hàng thành khối 2×2 gọn gàng, thay
vì kéo cột dài ra rồi bóp mất chỗ của Nội dung công việc. Khoảng cách hẹp
hơn chip-hang mặc định: bốn nút xếp sát nhau vẫn bấm trúng, mà dòng không
cao lên thêm. */
.bang-sx th.sxx-viec, .bang-sx td.sxx-viec { width: 250px; min-width: 230px; }
/* Nút trong ô bảng bóp nhỏ lại để bốn cái xếp thành khối 2×2.
Cỡ nút mặc định thì mỗi cái chiếm trọn một hàng, dòng cao gấp đôi và cả
bảng chỉ còn chứa được ba bốn đơn — đúng thứ mà việc đổi từ thẻ sang bảng
sinh ra để tránh. */
.bang-sx td.sxx-viec .chip-hang { gap: 4px; }
.bang-sx td.sxx-viec .nut { padding: 6px 9px; font-size: 12px; gap: 5px; }
/* Cột THAO TÁC của tab 🏁 SX Đã Báo cáo — chỉ hai nút (🔓 Mở lại, 📒 Vào sổ)
nên xếp DỌC trong cột hẹp. Giữ nguyên 250px của cột bốn nút là cả bảng rộng
hơn màn hình, và nút Vào sổ nằm khuất sau mép phải. */
.bang-sx th.dsx-viec, .bang-sx td.dsx-viec { width: 130px; min-width: 120px; }
.bang-sx td.dsx-viec .chip-hang { flex-direction: column; align-items: stretch; }
.bang-sx td.dsx-viec .nut, .bang-sx td.dsx-viec .nhan { justify-content: center; white-space: nowrap; }
.bang-sx th.sx-cd, .bang-sx td.sx-cd { width: 62px; text-align: center; padding: 4px; }
.bang-sx th.sx-cd { font-size: 14px; line-height: 1.15; }
/* Tên công đoạn dưới biểu tượng — đọc được ngay, không phải rê chuột. */
.bang-sx th.sx-cd .sx-cd__ten {
font-size: 11px; font-weight: 600; margin-top: 2px; white-space: nowrap;
}
.bang-sx td { vertical-align: middle; }
/* DÒNG TRỄ HẸN GIAO — quá ngày giao mà xưởng chưa tích đủ công đoạn.
Nền đỏ nhạt cho cả hàng, cộng một vạch đỏ đậm ở đầu dòng: người đứng máy đọc
tờ lịch theo hàng ngang, nên dấu hiệu cũng phải chạy hết hàng. Nền nhạt chứ
không đậm — chữ trong dòng vẫn phải đọc được, và bảy ô tích vẫn phải bấm
trúng; tô đậm cả dòng là biến đúng những dòng gấp nhất thành khó dùng nhất.
Vạch đỏ đặt bằng box-shadow inset trên ô ĐẦU TIÊN vì
không nhận
border-left khi bảng ở chế độ border-collapse. */
.bang-sx tr.sx-tre > td { background: var(--do-mo); }
/* Ưu tiên sản xuất (⏳ Khách chờ / ⭐ Khách UT) — đỏ đậm hơn quá hạn, vạch trái dày
hơn, để giữa hai dòng đỏ vẫn nhận ra dòng nào là ưu tiên. Xem oUuTienSX(). */
.bang-sx tr.sx-uu-tien > td { background: color-mix(in srgb, var(--do) 16%, var(--nen-the)); }
.bang-sx tr.sx-uu-tien > td:first-child { box-shadow: inset 7px 0 0 var(--do); }
.bang-sx tr.sx-uu-tien .sx-viec > b { color: var(--do); }
.bang-sx tr.sx-uu-tien .o-tich, .bang-sx tr.sx-uu-tien .nut-cd { background: var(--nen-the); }
.bang-sx tr.sx-uu-tien .o-tich--xong { background: var(--ngoc); }
.bang-sx tr.sx-uu-tien .nut-cd--xong { background: var(--xanhla); }
.sx-ut-nhan { margin-top: 4px; color: var(--do); font-weight: 700; font-size: 12.5px; }
.sx-ut-nhan .sx-ut-phu { display: block; font-weight: 400; color: var(--chu-nhat); font-size: 11.5px; }
.sx-ut-nut { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.sx-ut-nut .nut { padding: 3px 8px; font-size: 12px; }
.bang-sx tr.sx-tre > td:first-child { box-shadow: inset 4px 0 0 var(--do); }
/* Ô tích giữ nền riêng của nó, đừng để nền đỏ ăn mất dấu ✓ đã tích. */
.bang-sx tr.sx-tre .o-tich { background: var(--nen-the); }
.bang-sx tr.sx-tre .o-tich--xong { background: var(--ngoc); }
/* ───── CỘT "CÔNG ĐOẠN" — một hàng nút có chữ ─────
Thay cho sáu cột ô tích trơn, vốn đẩy tờ lịch rộng quá màn hình. Nút tự
ghi tên tắt (CNC · LZ · UV · PP · GC · BH).
· Chưa xong: viền ĐẬM, nền thẻ — nhìn là biết còn việc.
· Đã xong: nền XANH LÁ, chữ trắng, dấu ✓ tròn đè lên góc trên phải.
Xanh lá là màu "hoàn thành" của cả app (--xanhla), tách khỏi màu chủ đạo. */
/* Cột ôm vừa khít lưới nút (width 1%) — bề rộng thật do min-width của
.nut-cd-hang ngay dưới giữ. */
.bang-sx th.sx-cds, .bang-sx td.sx-cds { width: 1%; }
/* Chừa chỗ trên và phải cho dấu ✓ đè ra ngoài nút — không thì khung cuộn
của bảng cắt mất nửa dấu ở dòng đầu. */
/* LƯỚI 3 NÚT MỘT HÀNG, đủ sáu thì xuống đúng hai hàng. min-width đặt trên
KHỐI NÚT chứ không trên
: trình duyệt coi min-width của ô bảng chỉ là
gợi ý, bảng chật là bóp cột lại và nút rơi xếp dọc từng cái — tốn dòng. Một
có min-width thì ô chứa nó không co nhỏ hơn được. */
.nut-cd-hang {
display: grid; grid-template-columns: repeat(3, max-content); gap: 8px;
min-width: 164px; padding: 7px 7px 0 0;
}
.nut-cd {
position: relative; min-width: 40px; height: 30px; padding: 0 8px;
border: 2px solid var(--chu); border-radius: 7px; background: var(--nen-the);
color: var(--chu); font: inherit; font-size: 12px; font-weight: 800;
letter-spacing: .02em; cursor: pointer; white-space: nowrap;
}
.nut-cd:hover:not(:disabled) { background: var(--xanhla-mo); border-color: var(--xanhla); }
.nut-cd--xong { background: var(--xanhla); border-color: var(--xanhla); color: #fff; }
.nut-cd--xong:hover:not(:disabled) { background: var(--xanhla); filter: brightness(.92); }
:root[data-theme="dark"] .nut-cd--xong { color: #1b2a0a; }
.nut-cd--xong::after {
content: '✓'; position: absolute; top: -8px; right: -7px;
width: 17px; height: 17px; border-radius: 50%;
background: #fff; color: var(--xanhla); border: 2px solid var(--xanhla);
font-size: 11px; font-weight: 900; line-height: 13px; text-align: center;
}
.nut-cd:disabled { cursor: default; opacity: .55; }
/* Dòng trễ hẹn tô đỏ cả hàng — nút giữ nền riêng, đừng để nền đỏ ăn mất nó. */
.bang-sx tr.sx-tre .nut-cd { background: var(--nen-the); }
.bang-sx tr.sx-tre .nut-cd--xong { background: var(--xanhla); }
/* Ô tích vuông, to đủ để bấm trúng bằng ngón tay trên máy tính bảng ngoài xưởng. */
.o-tich {
width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
border: 2px solid var(--vien-dam); background: var(--nen-the);
font-size: 15px; font-weight: 700; line-height: 1; color: var(--ngoc);
display: inline-flex; align-items: center; justify-content: center;
}
.o-tich:hover:not(:disabled) { border-color: var(--ngoc); background: var(--ngoc-mo); }
.o-tich--xong { background: var(--ngoc); border-color: var(--ngoc); color: #fff; }
.o-tich:disabled { cursor: default; opacity: .55; }
/* Ô "SX xong" — nền xanh chữ x, đúng kiểu tờ lịch giấy của xưởng. App tự tô
khi tích đủ công đoạn, không ai bấm vào đây cả. */
.bang-sx td.o-xong {
background: var(--ngoc); color: #fff; font-weight: 700; font-size: 15px;
}
/* Chặng "Hoàn thành sản xuất" — nằm giữa tím (đang ở xưởng) và ngọc biển
(đã giao). Cam ĐẬM, không dùng var(--cam-mo): nhãn "Đang chăm sóc"
(.nhan--vang) đã lấy đúng nền ấy rồi, hai chặng cách nhau nửa hành trình mà
trông y hệt nhau thì nhìn bảng không phân biệt nổi. */
.nhan--cam { background: #FBDCA8; color: #7A4712; }
:root[data-theme="dark"] .nhan--cam { background: #4a3416; color: #e8b46a; }
/* Hạng Đồng — màu nâu đồng, không đụng vào bộ màu trạng thái đang dùng */
.nhan--dong { background: #f1e2d3; color: #7a4a1d; }
:root[data-theme="dark"] .nhan--dong { background: #3a2a1c; color: #d9a877; }
/* Chặng "Chờ duyệt sản xuất" — nằm giữa chốt xong và tím (Đang sản xuất), hồng
nhạt để không trùng bất kỳ chặng nào khác trong hành trình. */
.nhan--hong { background: #F5D6E0; color: #8C2F52; }
:root[data-theme="dark"] .nhan--hong { background: #3A1F28; color: #E8A0BD; }
:root[data-theme="dark"] .nhan--vang { color: var(--cam); }
/* ================================ 11. Form ================================ */
.form-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.o { display: flex; flex-direction: column; gap: 5px; }
.o--rong { grid-column: 1 / -1; }
/* Tiêu đề nhóm ô trong hộp dài (07/10): chữ nhỏ viết hoa màu chủ đạo, gạch chân mảnh, trải hết hàng. */
.hop-nhom {
grid-column: 1 / -1; margin: 8px 0 -4px; padding-bottom: 6px; border-bottom: 1px solid var(--vien);
font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ngoc);
}
.hop-nhom:first-child { margin-top: 0; }
/* Tiêu đề nhóm đứng một mình giữa hộp (ngoài lưới ô), vd "Danh mục hàng hoá" của hộp đơn hàng. */
.hop-nhom--roi { margin: 24px 0 12px; }
/* Ô địa chỉ có gợi ý tỉnh / xã — xem ganODiaChi() bên ui.js */
.dg-goi-y { position: absolute; left: 0; right: 0; z-index: 40; max-height: 280px; overflow-y: auto;
background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--bo); box-shadow: var(--bong-cao); }
.dg-goi-y.an { display: none; }
.dg-muc { padding: 8px 12px; cursor: pointer; font-size: 13.5px; border-bottom: 1px solid var(--vien); }
.dg-muc:last-child { border-bottom: none; }
.dg-muc.dang, .dg-muc:hover { background: var(--nen-nhe); }
.dg-dong { margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dg-dong .nut { padding: 2px 8px; font-size: 11.5px; }
.o label { font-size: 13px; font-weight: 600; color: var(--chu-nhat); }
.o label .bb { color: var(--do); }
.o input, .o select, .o textarea {
padding: 10px 12px; font: inherit; font-size: 14px;
border: 1px solid var(--vien-dam); border-radius: var(--bo-nho);
background: var(--nen-the); color: var(--chu); width: 100%;
}
.o input:focus, .o select:focus, .o textarea:focus {
outline: none; border-color: var(--ngoc); box-shadow: 0 0 0 3px var(--ngoc-mo);
}
.o textarea { resize: vertical; min-height: 74px; }
.o__giup { font-size: 12px; color: var(--chu-mo); }
.o__loi { font-size: 12px; color: var(--do); font-weight: 600; }
.xemtruoc {
background: var(--ngoc-mo); border-left: 4px solid var(--ngoc);
border-radius: var(--bo-nho); padding: 13px 16px; font-size: 13.5px;
}
.xemtruoc b { color: var(--ngoc); }
.hang-nut { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.thanh-loc { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.thanh-loc input, .thanh-loc select {
padding: 8px 11px; font: inherit; font-size: 13.5px;
border: 1px solid var(--vien-dam); border-radius: var(--bo-nho);
background: var(--nen-the); color: var(--chu);
}
.thanh-loc input[type="search"] { min-width: 210px; flex: 1; max-width: 320px; }
/* ================================ 12. Thẻ số liệu ================================ */
/* Thẻ số liệu nói đúng một con số, nên nó chỉ cần chỗ cho một con số.
Bản cũ đệm 16/18px quanh cỡ chữ 27px: ba cái thẻ ăn gần hết chiều cao màn
hình laptop, đẩy cái bảng — thứ người ta thật sự vào để xem — xuống dưới
mép. Thẻ nào có dòng chú thích phụ còn kéo cả hàng cao theo nó, để lại hai
khoảng trắng trống trơn ở hai thẻ bên cạnh. */
.sl {
background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--bo);
padding: 9px 12px; border-left: 4px solid var(--ngoc);
/* Không kéo cao bằng thẻ cao nhất trong hàng nữa: thẻ có chú thích thì cao
hơn một dòng, mấy thẻ kia giữ nguyên chiều cao của mình. */
align-self: start;
}
.sl__ten { font-size: 12.3px; color: var(--chu-nhat); font-weight: 600; line-height: 1.35; }
.sl__so { font-size: 21px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sl__phu { font-size: 11.5px; color: var(--chu-mo); line-height: 1.35; }
.sl--do { border-left-color: var(--do); } .sl--do .sl__so { color: var(--do); }
.sl--cam { border-left-color: var(--cam); } .sl--cam .sl__so { color: var(--cam); }
.sl--xanhla { border-left-color: var(--xanhla); } .sl--xanhla .sl__so { color: var(--xanhla); }
.sl--tim { border-left-color: var(--tim); } .sl--tim .sl__so { color: var(--tim); }
.nhom-sl { margin-bottom: 26px; }
.nhom-sl__ten {
font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
color: var(--chu-mo); margin-bottom: 11px; display: flex; align-items: center; gap: 9px;
}
.nhom-sl__ten::after { content: ''; flex: 1; height: 1px; background: var(--vien); }
/* ================================ 13. Lịch hẹn ================================ */
.lh-nhom { margin-bottom: 26px; }
.lh-nhom__dau {
display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
font-weight: 700; font-size: 15px;
}
.lh-nhom__dem { font-size: 12px; padding: 2px 9px; border-radius: 12px; background: var(--nen-nhe); }
.lh {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
background: var(--nen-the); border: 1px solid var(--vien); border-left: 4px solid var(--vien-dam);
border-radius: var(--bo-nho); padding: 12px 15px; margin-bottom: 9px;
}
.lh--do { border-left-color: var(--do); background: linear-gradient(90deg, var(--do-mo), var(--nen-the) 42%); }
.lh--vang { border-left-color: var(--cam); background: linear-gradient(90deg, var(--cam-mo), var(--nen-the) 42%); }
.lh--xanhla { border-left-color: var(--xanhla); }
.lh__gio { font-weight: 800; font-size: 15px; min-width: 108px; font-variant-numeric: tabular-nums; }
.lh__ngay { font-size: 11.5px; color: var(--chu-nhat); font-weight: 500; }
.lh__ten { font-weight: 700; }
.lh__mo { font-size: 12.5px; color: var(--chu-nhat); }
.lh__than { flex: 1; min-width: 190px; }
.lh__nut { display: flex; gap: 6px; flex-wrap: wrap; }
.lich-thang { background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px; }
.lich-thang__dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; font-weight: 700; }
.lich-luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.lich-luoi__thu { text-align: center; font-size: 11px; font-weight: 700; color: var(--chu-mo); padding: 5px 0; }
.lich-o {
aspect-ratio: 1; border-radius: 7px; display: flex; flex-direction: column;
align-items: center; justify-content: center; font-size: 12.5px;
border: 1px solid transparent; position: relative;
}
.lich-o--ngoai { color: var(--chu-mo); opacity: .4; }
.lich-o--naydu { border-color: var(--ngoc); font-weight: 800; }
.lich-o--co { background: var(--ngoc-mo); font-weight: 700; cursor: pointer; }
.lich-o--qua { background: var(--do-mo); color: var(--do); font-weight: 800; cursor: pointer; }
.lich-o__cham { width: 5px; height: 5px; border-radius: 50%; background: var(--ngoc); margin-top: 2px; }
.lich-o--qua .lich-o__cham { background: var(--do); }
/* ================================ 14. Biểu đồ ================================ */
.bd { background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px; }
.bd__ten { font-weight: 700; font-size: 14.5px; margin-bottom: 13px; }
.bd svg { width: 100%; height: auto; display: block; overflow: visible; }
.chu-thich { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 13px; font-size: 12.5px; }
.chu-thich span { display: flex; align-items: center; gap: 6px; }
.chu-thich i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
/* ---------- 📅 Lịch làm việc: lưới Ngày / Tuần / Tháng / Năm ----------
Viền trái của khối việc là màu ô Eisenhower (--mau, đặt inline); nền đổi
theo thời hạn: sắp tới → viền cam, đang tới giờ → cam, quá giờ → đỏ. */
.llv-kieu { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.llv-cuon {
overflow-x: auto; overflow-y: hidden; border: 1px solid var(--vien); border-radius: var(--bo);
background: var(--nen-the);
}
/* Chừa chỗ dưới đáy cho nhãn 17:30 — nhãn nằm ngay dưới vạch cuối. */
.llv-gio { display: grid; padding-bottom: 14px; }
.llv-gio--tuan { min-width: 760px; }
.llv-gio__goc, .llv-gio__nhan { border-bottom: 1px solid var(--vien); }
.llv-gio__dau {
font: inherit; font-size: 13px; color: var(--chu); background: none; border: 0;
border-left: 1px solid var(--vien); border-bottom: 1px solid var(--vien);
padding: 8px 4px; cursor: pointer; text-align: center;
}
.llv-gio__dau:hover { background: var(--nen-nhe); }
.llv-gio__dau--nay { background: var(--ngoc-mo); color: var(--ngoc); }
.llv-gio__nhan { font-size: 10.5px; line-height: 1.25; color: var(--chu-mo); padding: 6px 6px 6px 0; text-align: right; }
.llv-gio__ngoai {
border-left: 1px solid var(--vien); border-bottom: 1px solid var(--vien);
padding: 3px; min-height: 30px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.llv-gio__truc { position: relative; }
.llv-gio__moc { position: absolute; right: 6px; font-size: 10.5px; color: var(--chu-mo); line-height: 1; margin-top: 2px; }
.llv-gio__cot { position: relative; border-left: 1px solid var(--vien); min-width: 0; }
.llv-gio__vach { position: absolute; left: 0; right: 0; border-top: 1px solid var(--vien); pointer-events: none; }
.llv-gio__vach--nua { border-top-style: dashed; opacity: .6; }
.llv-gio__nghi {
position: absolute; left: 0; right: 0; pointer-events: none;
display: flex; align-items: center; justify-content: center;
font-size: 10.5px; color: var(--chu-mo);
background: repeating-linear-gradient(45deg, var(--nen-nhe) 0 6px, transparent 6px 12px);
}
.llv-gio__bay-gio { position: absolute; left: 0; right: 0; border-top: 2px solid var(--do); z-index: 3; pointer-events: none; }
.llv-gio__bay-gio::before {
content: ''; position: absolute; left: -5px; top: -6px;
width: 10px; height: 10px; border-radius: 50%; background: var(--do);
}
.llv-them { cursor: cell; }
.llv-them:hover { background-color: color-mix(in srgb, var(--ngoc-mo) 45%, transparent); }
.llv-khoi {
position: absolute; box-sizing: border-box; z-index: 2; overflow: hidden;
border-left: 4px solid var(--mau); border-radius: 6px; padding: 2px 6px;
background: color-mix(in srgb, var(--mau) 15%, var(--nen-the)); color: var(--chu);
font-size: 12px; line-height: 1.3; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.08);
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.llv-khoi:focus-visible { outline: 2px solid var(--ngoc); outline-offset: 1px; }
.llv-khoi__gio { font-weight: 700; font-size: 11px; white-space: nowrap; }
.llv-khoi__ten { display: block; overflow-wrap: anywhere; }
.llv-khoi--dong { position: static; white-space: nowrap; text-overflow: ellipsis; flex: none; }
.llv-khoi--dong .llv-khoi__ten { display: inline; }
.llv-khoi--khoa { cursor: pointer; }
.llv-khoi--sap { box-shadow: inset 0 0 0 1.5px var(--cam); }
.llv-khoi--dang { background: color-mix(in srgb, var(--cam) 30%, var(--nen-the)); box-shadow: inset 0 0 0 1.5px var(--cam); }
.llv-khoi--qua { background: var(--do-mo); box-shadow: inset 0 0 0 1.5px var(--do); }
.llv-khoi--qua .llv-khoi__gio { color: var(--do); }
.llv-khoi--xong { opacity: .55; }
.llv-khoi--huy { opacity: .45; text-decoration: line-through; }
.llv-cham {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--cam); margin-right: 4px; vertical-align: 1px;
}
.llv-the--sap { box-shadow: inset 0 0 0 1.5px var(--cam); }
.llv-the--dang { background: var(--cam-mo); box-shadow: inset 0 0 0 1.5px var(--cam); }
.llv-the--qua { background: var(--do-mo); box-shadow: inset 0 0 0 1.5px var(--do); }
.llv-the[data-llv-keo] { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Hộp XEM MẪU IN (06/10): tờ in dựng trên nền trắng như giấy, cuộn trong hộp. */
.xem-mau-in { background: #fff; color: #000; padding: 16px 20px; border: 1px solid var(--vien);
border-radius: 6px; overflow: auto; }
.xem-mau-in .tbg { max-width: 780px; margin: 0 auto; }
.xem-mau-in--hd { font-family: "Times New Roman", Times, serif; font-size: 14px; line-height: 1.4;
max-width: 820px; margin: 0 auto; }
/* Thẻ việc GỌN ở màn Bốn ô (06/10): hai dòng, ba nút biểu tượng nằm góc phải dòng đầu. */
.llv-the--gon { padding: 6px 10px; margin-bottom: 5px; }
.llv-gon__dau { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.llv-gon__ten { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.llv-gon__ten .chip { padding: 1px 8px; font-size: 12px; margin-left: 4px; }
.llv-gon__nut { display: inline-flex; gap: 3px; }
.llv-gon__nut .nut { padding: 2px 6px; min-height: 26px; font-size: 12.5px; line-height: 1.2; }
@media (max-width: 699px) {
.llv-gon__nut { gap: 8px; }
.llv-gon__nut .nut { min-height: 40px; min-width: 40px; padding: 4px 10px; }
}
.llv-nhan--qua { color: var(--do); }
.llv-nhan--dang, .llv-nhan--sap { color: var(--cam); }
.llv-tay { color: var(--chu-mo); cursor: grab; }
.llv-mau { border: 1.5px solid; }
.llv-mau--sap { border-color: var(--cam); background: var(--nen-the); }
.llv-mau--dang { border-color: var(--cam); background: color-mix(in srgb, var(--cam) 30%, var(--nen-the)); }
.llv-mau--qua { border-color: var(--do); background: var(--do-mo); }
/* Kéo-thả */
.llv-keo-goc { opacity: .35; }
.llv-bong {
position: fixed !important; z-index: 9999; pointer-events: none; opacity: .92;
margin: 0; box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.llv-dich { background-color: var(--ngoc-mo) !important; outline: 2px dashed var(--ngoc); outline-offset: -2px; }
body.llv-dang-keo, body.llv-dang-keo * { cursor: grabbing !important; user-select: none; }
/* Tháng */
.llv-thang { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 560px; }
.llv-thang__thu {
text-align: center; font-size: 11.5px; font-weight: 700; color: var(--chu-mo);
padding: 7px 0; border-bottom: 1px solid var(--vien);
}
.llv-thang__o {
min-height: 104px; min-width: 0; padding: 4px; display: flex; flex-direction: column; gap: 3px;
border-left: 1px solid var(--vien); border-bottom: 1px solid var(--vien);
}
.llv-thang__o:nth-child(7n+1) { border-left: 0; }
.llv-thang__o--ngoai { background: var(--nen-nhe); }
.llv-thang__o--ngoai .llv-thang__so { color: var(--chu-mo); }
.llv-thang__so {
align-self: flex-start; font: inherit; font-size: 12.5px; font-weight: 700;
background: none; border: 0; color: var(--chu); cursor: pointer; border-radius: 999px; padding: 1px 7px;
}
.llv-thang__so:hover { background: var(--nen-nhe); }
/* 04/11: ngày âm lịch + ngày lễ trên lịch */
.llv-am { font-size: 10.5px; font-weight: 400; color: var(--chu-mo); margin-left: 4px; white-space: nowrap; }
.llv-am--moc { color: #b45309; font-weight: 700; }
.llv-le { display: block; font-size: 10.5px; font-weight: 600; color: #b91c1c; line-height: 1.25; margin: 1px 0 2px; }
.llv-thang__o--le { background: #fef2f2; }
.llv-nam__ngay--le { box-shadow: inset 0 -2px 0 #dc2626; }
.llv-nam__ngay--moc { box-shadow: inset 0 -2px 0 #d97706; }
.llv-gio__dau .llv-am { display: block; margin-left: 0; }
.llv-thang__o--nay .llv-thang__so { background: var(--ngoc); color: #fff; }
.llv-thang__them {
font: inherit; font-size: 11.5px; color: var(--ngoc); background: none; border: 0;
text-align: left; cursor: pointer; padding: 0 2px;
}
/* Năm */
.llv-nam { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.llv-nam__thang { border: 1px solid var(--vien); border-radius: var(--bo); padding: 10px 12px; background: var(--nen-the); }
.llv-nam__ten {
display: flex; justify-content: space-between; align-items: baseline; width: 100%;
font: inherit; font-weight: 700; background: none; border: 0; color: var(--chu);
cursor: pointer; padding: 0; margin-bottom: 6px;
}
.llv-nam__ten:hover span:first-child { color: var(--ngoc); }
.llv-nam__luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.llv-nam__thu { font-size: 10px; text-align: center; color: var(--chu-mo); }
.llv-nam__ngay {
aspect-ratio: 1; font: inherit; font-size: 11px; border: 0; border-radius: 5px; padding: 0;
background: transparent; color: var(--chu); cursor: pointer;
}
.llv-nam__ngay:hover { outline: 1px solid var(--vien-dam); }
.llv-nam__ngay--1 { background: var(--ngoc-mo); }
.llv-nam__ngay--2 { background: color-mix(in srgb, var(--ngoc-nhat) 45%, var(--nen-the)); font-weight: 700; }
.llv-nam__ngay--3 { background: var(--ngoc-nhat); color: #fff; font-weight: 700; }
.llv-nam__ngay--nay { outline: 2px solid var(--ngoc) !important; }
.llv-nam__ngay--qua { box-shadow: inset 0 -3px 0 var(--do); }
@media (max-width: 699px) {
.llv-thang { min-width: 0; }
.llv-thang__o { min-height: 70px; padding: 2px; }
.llv-thang .llv-khoi { font-size: 10.5px; padding: 1px 3px; border-left-width: 3px; }
.llv-thang .llv-khoi__gio { display: none; }
.llv-gio .llv-khoi { font-size: 11px; padding: 1px 4px; }
}
/* Tiêu đề phụ của từng khối trong một mục Cài đặt gộp nhiều khối
(vd. 🏭 Sản xuất = duyệt SX + công đoạn + file SX). */
.cd-khoi { margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid var(--vien); font-size: 15px; }
[data-cd-nhom] > .cd-khoi:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* ================================ 15. Accordion ================================ */
.acc { border: 1px solid var(--vien); border-radius: var(--bo); background: var(--nen-the); overflow: hidden; margin-bottom: 9px; }
.acc__dau {
width: 100%; text-align: left; font: inherit; font-weight: 700; font-size: 14.5px;
padding: 15px 18px; background: none; border: none; cursor: pointer; color: var(--chu);
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.acc__dau:hover { background: var(--nen-nhe); }
.acc__mui { transition: transform .2s; color: var(--chu-mo); flex-shrink: 0; }
.acc.mo .acc__mui { transform: rotate(180deg); }
.acc__than { display: none; padding: 0 18px 17px; }
.acc.mo .acc__than { display: block; }
.acc__than ol, .acc__than ul { margin: 0; padding-left: 20px; }
.acc__than li { margin-bottom: 7px; }
/* ================================ 16. Toast ================================ */
.khung-toast {
position: fixed; right: 18px; bottom: 18px; z-index: 200;
display: flex; flex-direction: column; gap: 10px; max-width: 380px;
}
.toast {
background: var(--nen-the); border: 1px solid var(--vien); border-left: 5px solid var(--ngoc);
border-radius: var(--bo); box-shadow: var(--bong-cao); padding: 13px 15px;
animation: truotVao .26s ease-out;
}
@keyframes truotVao { from { opacity: 0; transform: translateX(28px); } }
.toast--tat { opacity: 0; transform: translateX(28px); transition: .26s; }
.toast--do { border-left-color: var(--do); }
.toast--vang { border-left-color: var(--cam); }
.toast--xanhduong { border-left-color: var(--xanhduong); }
.toast--tim { border-left-color: var(--tim); }
.toast--tim .toast__tieude { font-size: 15px; letter-spacing: .3px; }
.toast__head { display: flex; align-items: flex-start; gap: 8px; }
.toast__icon { font-size: 16px; }
.toast__tieude{ font-weight: 700; font-size: 14px; flex: 1; }
.toast__dong { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--chu-mo); padding: 0 2px; }
.toast__than { font-size: 13px; color: var(--chu-nhat); margin-top: 4px; }
.toast__nut { margin-top: 10px; }
/* ================================ 17. Modal ================================ */
/* Khung hộp thoại (07/10 làm đẹp): nền mờ nhẹ, hộp bo lớn có viền mảnh + bóng, đầu hộp và chân hộp có nền
nhạt để tách khỏi phần nhập liệu, nút × to dễ bấm. Chỉ đổi giao diện — id, sự kiện và bố cục cuộn giữ nguyên. */
.man {
position: fixed; inset: 0; background: rgba(12,18,32,.55); z-index: 150;
display: none; align-items: flex-start; justify-content: center; padding: 26px 16px; overflow: auto;
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.man.mo { display: flex; animation: manHien .18s ease-out; }
@keyframes manHien { from { opacity: 0; } }
.hop {
background: var(--nen-the); border-radius: 16px; box-shadow: var(--bong-cao), 0 0 0 1px var(--vien);
width: 100%; max-width: 660px; animation: len .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes len { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes truotLenDay { from { transform: translateY(100%); } }
.hop__dau {
padding: 15px 18px 15px 24px; border-bottom: 1px solid var(--vien); background: var(--nen-nhe);
border-radius: 16px 16px 0 0;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.hop__dau h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.hop__dau .nut-tron { flex: none; width: 40px; height: 40px; font-size: 22px; line-height: 1; }
.hop__dau .nut-tron:hover { background: var(--do); border-color: var(--do); color: #fff; }
.hop__than { padding: 22px 24px; }
/* flex-wrap là bắt buộc: hộp đơn hàng có tới năm nút (Xoá · Huỷ · in hóa đơn ·
in phiếu kho · Lưu). Không cho xuống dòng thì chúng bị bóp chồng lên nhau và
chữ trên nút đọc thành một đống. */
.hop__chan {
padding: 14px 20px; border-top: 1px solid var(--vien); background: var(--nen-nhe);
border-radius: 0 0 16px 16px;
display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center;
}
.hop__chan .nut { min-height: 40px; padding-left: 20px; padding-right: 20px; }
/* Ô nhập bị khoá (người không có quyền sửa): nền xám nhạt để thấy ngay là không gõ được. */
.o input:disabled, .o select:disabled, .o textarea:disabled {
background: var(--nen-nhe); color: var(--chu-mo); cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) { .man.mo, .hop { animation: none !important; } }
/* Máy tính: hộp không cao quá màn hình. Đầu hộp và chân hộp (các nút Lưu / Huỷ…)
đứng yên, chỉ phần giữa cuộn — hộp dài bao nhiêu thì nút vẫn nằm trong màn
hình, không phải cuộn hết mới thấy. Điện thoại đã làm y vậy ở mục Responsive.
52px = hai lề 26px của .man. */
@media (min-width: 700px) {
.hop { display: flex; flex-direction: column; max-height: calc(100vh - 52px); }
.hop__dau, .hop__chan { flex: none; }
.hop__than { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Hộp nhiều thông tin — xem hopRong() bên ui.js. Nới tới 1100px (không quá
màn hình), lưới ô nhập tự chia thêm cột theo bề ngang: rộng đủ thì 4 cột. */
.hop.hop--rong { max-width: min(1100px, calc(100vw - 32px)); }
/* Nút đỏ (Xoá…) KHÔNG đứng cuối hàng nút thì tách sang TRÁI và đổi thành nút viền đỏ — xa nút Lưu, đỡ bấm nhầm.
Nút đỏ đứng cuối (hộp hỏi lại: "Xoá" / "Đồng ý") giữ nguyên là nút đặc ở bên phải. */
.hop__chan .nut--do:not(:last-child) { margin-right: auto; background: transparent; color: var(--do); border-color: var(--do); }
.hop__chan .nut--do:not(:last-child):hover { background: var(--do); color: #fff; filter: none; }
/* dense: ô rộng cả hàng (.o--rong) chen giữa thì hàng trước nó hổng mất hai
ô — cho các ô nhỏ phía sau lấp lên, đỡ những khoảng trắng nửa hàng. */
.hop--rong .form-luoi {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
grid-auto-flow: row dense;
}
/* Hộp có tiêu đề nhóm (.hop-nhom): KHÔNG dùng dense — ô của nhóm dưới sẽ chen lên lấp chỗ trống phía trên
tiêu đề nhóm, mất ý nghĩa chia nhóm. Chỗ trống nửa hàng cuối mỗi nhóm là đúng chỗ. */
.hop--rong .form-luoi:has(> .hop-nhom) { grid-auto-flow: row; }
/* Khối công ty của hộp khách hàng (hiện khi tích "Khách mua cho công ty"): trải hết hàng và tự chia cột như
lưới cha, thay vì bị nhốt trong MỘT ô lưới. [hidden] vẫn phải ẩn được nên khai riêng. */
#fKhoiCongTy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 15px; }
#fKhoiCongTy[hidden] { display: none; }
}
/* ================================ 18. Thông báo nhanh ================================ */
.tb-nhanh {
position: fixed; top: calc(var(--cao-dieu-huong, 62px) + 14px); left: 50%; transform: translateX(-50%);
z-index: 210; padding: 11px 20px; border-radius: 30px; font-size: 14px; font-weight: 600;
box-shadow: var(--bong-cao); animation: roi .25s; max-width: min(560px, calc(100vw - 32px));
}
@keyframes roi { from { opacity: 0; transform: translate(-50%, -14px); } }
.tb-nhanh--ok { background: var(--xanhla); color: #fff; }
.tb-nhanh--loi { background: var(--do); color: #fff; }
.tb-nhanh--canhbao { background: var(--cam); color: #fff; }
.tb-nhanh--tin { background: var(--ngoc); color: #fff; }
/* ================================ 19. Trạng thái đồng bộ ================================ */
.sync {
display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
padding: 5px 12px; border-radius: 20px; background: var(--nen-nhe); color: var(--chu-nhat);
}
.sync__cham { width: 8px; height: 8px; border-radius: 50%; background: var(--chu-mo); }
.sync--ok .sync__cham { background: var(--xanhla); }
.sync--dang .sync__cham { background: var(--cam); animation: dap 1s infinite; }
.sync--loi .sync__cham { background: var(--do); }
/* ================================ 20. Chân trang ================================ */
.chan { background: color-mix(in srgb, var(--ngoc) 88%, #000); color: rgba(255,255,255,.82); padding: 40px 0 26px; margin-top: 20px; }
:root[data-theme="dark"] .chan { background: #1C1408; }
.chan a { color: #fff; }
.chan__luoi { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; margin-bottom: 26px; }
.chan h4 { color: #fff; font-size: 14px; }
.chan ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.chan li { margin-bottom: 6px; }
/* Hai dòng cuối chân trang xếp CHỒNG và CĂN GIỮA, không còn dạt hai bên.
Dòng trạng thái ("Trần Văn A (Nhân viên) · 4 khách hàng · 2 lượt chăm sóc ·
3 việc cần xử lý") là thứ người dùng thật sự liếc vào — nó nói họ đang đăng
nhập bằng ai và còn bao nhiêu việc. Nấp ở góc phải với cỡ chữ 12.5px thì
chẳng ai thấy. Cho nó xuống dòng cuối cùng, giữa trang, chữ to hơn hẳn.
Số phiên bản thì ngược lại: chỉ dùng để đối chiếu sau mỗi lần deploy, nên
thu nhỏ và mờ đi, nhường chỗ cho dòng dưới. */
.chan__cuoi {
border-top: 1px solid rgba(255,255,255,.18); padding-top: 17px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
text-align: center;
}
.chan__cuoi > span:first-child { font-size: 12px; opacity: .72; }
#chanTrangThai {
font-size: 15.5px; font-weight: 600; line-height: 1.5;
max-width: 60ch; /* dòng dài thì ngắt cho dễ đọc, đừng kéo hết bề ngang */
}
@media (max-width: 640px) {
#chanTrangThai { font-size: 14.5px; }
}
/* ================================ 21. Khu vực làm việc ================================ */
.lamviec { background: var(--nen); }
/* Chín tab phải vừa một hàng cho tới cỡ màn hình laptop nhỏ. Tab cuối là
⚙️ Cài đặt — nơi chứa phần xuất/nhập dữ liệu — nên nó bị đẩy khuất là
người dùng tưởng app không có chức năng đó. */
/* Gạch chân và khoảng cách dưới chuyển lên hàng ngoài, để nút ☰ đứng chung
một đường kẻ với hàng tab thay vì lơ lửng bên cạnh. */
.lv-hang { display: flex; align-items: flex-end; gap: 6px; border-bottom: 2px solid var(--vien); margin-bottom: 26px; }
.lv-tab { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; min-width: 0; }
.lv-tab::-webkit-scrollbar { display: none; }
/* Tab đang được kéo: mờ đi để mắt bám được nó giữa hàng chục nút giống nhau. */
.lv-tab button.dang-keo { opacity: .4; }
.lv-tab button { -webkit-user-select: none; user-select: none; }
.lv-tab button {
padding: 11px 11px; font: inherit; font-size: 13.5px; font-weight: 600;
background: none; border: none; border-bottom: 3px solid transparent;
color: var(--chu-nhat); cursor: pointer; white-space: nowrap; margin-bottom: -2px;
/* Mỗi tab là một NÚT (người dùng chốt 30/09): rê chuột thì nổi lên, đổi màu. */
border-radius: var(--bo-nho) var(--bo-nho) 0 0;
transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.lv-tab button:hover {
color: var(--ngoc); background: var(--ngoc-mo);
transform: translateY(-2px); box-shadow: var(--bong);
}
.lv-tab button:active { transform: translateY(0); box-shadow: none; }
.lv-tab button:focus-visible { outline: 2px solid var(--ngoc); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
.lv-tab button { transition: none; }
.lv-tab button:hover { transform: none; }
}
.lv-tab button.dang-xem { color: var(--ngoc); border-bottom-color: var(--ngoc); }
.lv-tab button .dem {
display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px;
background: var(--do); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700;
}
/* ---- Menu thả ☰ ---- */
.lv-menu { position: relative; flex: 0 0 auto; }
.lv-menu__nut {
padding: 11px 12px; font: inherit; font-size: 15px; font-weight: 700;
background: none; border: none; border-bottom: 3px solid transparent;
color: var(--chu-nhat); cursor: pointer; margin-bottom: -2px; line-height: 1;
}
.lv-menu__nut:hover { color: var(--chu); }
.lv-menu__hop {
position: absolute; right: 0; top: 100%; z-index: 60; margin-top: 4px;
min-width: 250px; max-height: 70vh; overflow-y: auto; padding: 6px;
background: var(--nen-the); border: 1px solid var(--vien);
border-radius: var(--bo); box-shadow: var(--bong);
}
.lv-menu__muc {
display: block; width: 100%; text-align: left; padding: 9px 11px;
font: inherit; font-size: 13.5px; font-weight: 600; color: var(--chu-nhat);
background: none; border: none; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.lv-menu__muc:hover { background: var(--nen); color: var(--chu); }
.lv-menu__muc.dang-xem { color: var(--ngoc); }
.lv-menu__ngan { height: 1px; background: var(--vien); margin: 6px 4px; }
/* 23/10: ☰ mở thành bảng nhiều cột, hiện đủ mọi tab một lượt, không phải cuộn */
#hopMenuTab:not(.an) {
display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px;
width: min(960px, calc(100vw - 24px)); max-height: 88vh; padding: 10px;
}
#hopMenuTab .lv-menu__loc, #hopMenuTab .lv-menu__ngan { grid-column: 1 / -1; }
#hopMenuTab .lv-menu__ngan { margin: 4px 0; }
#hopMenuTab .lv-menu__muc { white-space: normal; border: 1px solid var(--vien); line-height: 1.3; }
#hopMenuTab .lv-menu__muc.dang-xem { border-color: var(--ngoc); background: var(--nen); }
#hopMenuTab .lv-menu__muc[draggable="true"] { cursor: grab; }
#hopMenuTab .lv-menu__muc.dang-keo { opacity: .45; }
#hopMenuTab #nutSapTab { grid-column: 1 / -1; text-align: center; }
@media (max-width: 600px) { #hopMenuTab:not(.an) { grid-template-columns: repeat(2, 1fr); } }
/* 22/10: ô tìm tab ở đầu menu ☰ */
.lv-menu__loc { display: block; width: 100%; margin: 0 0 6px; padding: 8px 10px; font: inherit; font-size: 13.5px; border: 1px solid var(--vien); border-radius: 7px; background: var(--nen-the); color: var(--chu); box-sizing: border-box; }
.lv-menu__loc:focus { outline: 2px solid var(--ngoc); outline-offset: 0; }
/* ---- Hộp sắp xếp thứ tự tab ---- */
.sap-tab { max-height: 56vh; overflow-y: auto; }
.sap-tab__dong {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 10px; border: 1px solid var(--vien); border-radius: 8px; margin-bottom: 6px;
font-size: 13.5px; font-weight: 600;
}
.sap-tab__so { color: var(--chu-mo); font-weight: 700; margin-right: 6px; }
.sap-tab__nut { display: flex; gap: 4px; flex: 0 0 auto; }
.sap-tab__nut button {
width: 32px; height: 32px; font: inherit; font-size: 15px; cursor: pointer;
background: var(--nen); border: 1px solid var(--vien); border-radius: 7px; color: var(--chu);
}
.sap-tab__nut button:disabled { opacity: .35; cursor: default; }
.lv-noi > div { display: none; }
.lv-noi > div.hien { display: block; }
.hop-lon { background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 24px; box-shadow: var(--bong); }
.hop-lon__dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; flex-wrap: wrap; margin-bottom: 18px; }
.hop-lon__dau h3 { margin: 0; }
/* ═══════════ ĐẦU TAB: BỎ CHỮ, GIỮ VIỆC ═══════════
Mỗi tab mở ra bằng một tiêu đề, một câu mô tả cách dùng và thường thêm vài
dải nhắc — người làm quen việc rồi thì đó là mấy dòng phải lướt qua mỗi lần
vào, trước khi thấy bảng. Tên tab đã nằm sẵn trên thanh tab nên tiêu đề chỉ
là nói lại lần hai.
Giấu bằng CSS chứ không đi xoá 35 chỗ dựng HTML: muốn bày lại thì gỡ đúng
khối này, không phải đi tìm lại từng câu chữ đã xoá.
CHỈ GIẤU CHỮ. Dải nào có nút, ô nhập hay đường dẫn bên trong thì nó đang
mang một VIỆC, không phải một lời giải thích — giấu là mất luôn cái nút, và
mất im lặng. :has() làm đúng việc phân biệt ấy; trình duyệt nào không hiểu
:has() thì bỏ qua cả dòng và dải hiện lại như cũ — hỏng về phía an toàn. */
.hop-lon__dau h3, .hop-lon__dau p { display: none; }
/* Đầu tab không còn gì ngoài chữ vừa giấu thì bỏ luôn cả khối, không thì còn
đọng lại 18px khoảng trắng chẳng của ai. */
.hop-lon__dau:not(:has(button)):not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(a)):not(:has(label)) { display: none; }
.dai--tin:not(:has(button)):not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(a)):not(:has(label)),
.dai--canhbao:not(:has(button)):not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(a)):not(:has(label)),
.dai--nguy:not(:has(button)):not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(a)):not(:has(label)) { display: none; }
/* ================================ 22. Responsive ================================ */
@media (max-width: 1024px) {
/* Dưới cỡ này chín tab không còn vừa một hàng dù đã rút gọn chữ. Cho xuống
hai hàng thay vì để tab cuối khuất ra ngoài — khuất thì không ai biết là
còn tab, còn hai hàng thì chỉ tốn thêm ít chiều cao. */
.giaidoan { grid-template-columns: repeat(3, 1fr); }
.hm-luoi { grid-template-columns: repeat(3, 1fr); }
.luoi--4 { grid-template-columns: repeat(2, 1fr); }
.chan__luoi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) {
.menu { display: none; }
.menu.mo {
display: flex; flex-direction: column; position: absolute; top: 62px; left: 0; right: 0;
background: var(--nen-the); border-bottom: 1px solid var(--vien); padding: 10px;
box-shadow: var(--bong-cao); max-height: 70vh; overflow: auto; z-index: 65;
}
.dongho { display: none; }
.hero { padding: 40px 0 52px; }
.hero h1 { font-size: 29px; }
.kpi { grid-template-columns: repeat(2, 1fr); }
.giaidoan, .hm-luoi, .luoi--2, .luoi--3, .luoi--4,
.luoi--lichhen { grid-template-columns: 1fr; }
.form-luoi { grid-template-columns: 1fr; }
.section { padding: 40px 0; }
h2 { font-size: 23px; }
.chan__luoi { grid-template-columns: 1fr; }
.khung-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
.panel { width: calc(100vw - 24px); right: -8px; }
.lh__gio { min-width: auto; }
.hop-lon { padding: 17px; }
}
@media (max-width: 900px) { #nutVaoLamViec { display: none; } }
@media (max-width: 1300px) { .menu a.menu--phu { display: none; } }
@media (min-width: 700px) { .nut-menu { display: none; } }
@media print {
.dieuhuong, .khung-toast, .lv-tab, .lv-hang, .hero__nut, .nut { display: none !important; }
body { background: #fff; }
/* Tờ in thì PHẢI có tiêu đề. inKho() in thẳng trang đang mở, nên luật giấu
tiêu đề ở trên đi theo luôn vào giấy — mà tờ giấy rời khỏi màn hình thì
không còn thanh tab nào nói nó là bảng gì. */
.hop-lon__dau { display: flex !important; }
.hop-lon__dau h3 { display: block !important; }
}
/* ================================ 23. Đăng nhập & người dùng ================================ */
.khoa {
max-width: 760px; margin: 0 auto;
background: var(--nen-the); border: 1px solid var(--vien);
border-radius: var(--bo); box-shadow: var(--bong); overflow: hidden;
}
.khoa__dau {
background: linear-gradient(135deg, var(--ngoc-nhat), var(--ngoc));
color: #fff; padding: 26px 28px;
}
.khoa__dau h3 { color: #fff; margin: 0 0 5px; font-size: 21px; }
.khoa__dau p { margin: 0; opacity: .88; font-size: 14px; }
.khoa__than { padding: 26px 28px; }
/* Trước có hai cột cách nhau bằng vách "hoặc" — cột kia là đăng nhập Google, đã gỡ */
.khoa__cot { display: block; }
.khoa__loi {
background: var(--do-mo); color: var(--do); border-left: 4px solid var(--do);
border-radius: var(--bo-nho); padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 14px;
}
.khoa__gc { font-size: 12.5px; color: var(--chu-mo); margin-top: 14px; line-height: 1.55; }
.khoa__gc b { color: var(--chu-nhat); }
.ghinho { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 4px 0 12px; }
.ghinho input { width: auto; }
.nguoidung {
display: flex; align-items: center; gap: 9px;
padding: 4px 11px 4px 4px; border: 1px solid var(--vien); border-radius: 24px;
background: var(--nen-the); cursor: pointer; font: inherit; color: var(--chu); max-width: 210px;
}
.nguoidung:hover { background: var(--nen-nhe); }
.nguoidung__avatar {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--ngoc), var(--ngoc-nhat));
color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.nguoidung__chu { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
.nguoidung__ten { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nguoidung__vaitro{ font-size: 10.5px; color: var(--chu-mo); }
.panel--hep { width: 250px; }
.panel__nguoi { padding: 14px 15px; border-bottom: 1px solid var(--vien); }
.panel__nut { display: flex; flex-direction: column; padding: 7px; gap: 2px; }
.panel__nut button {
text-align: left; padding: 9px 12px; border: none; background: none; border-radius: var(--bo-nho);
font: inherit; font-size: 13.5px; cursor: pointer; color: var(--chu);
}
.panel__nut button:hover { background: var(--nen-nhe); }
.panel__nut button.thoat { color: var(--do); font-weight: 600; }
/* Dải nhắc phải cho chữ chảy bình thường: trước đây dùng flex nên mọi và
bên trong biến thành flex-item riêng, câu bị ngắt vụn và dấu chấm rơi
xuống đầu dòng. Dùng block + float cho nút để chữ liền mạch mà nút vẫn nằm phải. */
.dai {
display: block;
padding: 11px 16px; border-radius: var(--bo); margin-bottom: 18px;
font-size: 13.5px; font-weight: 600; line-height: 1.65;
}
.dai::after { content: ""; display: block; clear: both; }
.dai--tin { background: var(--ngoc-mo); color: var(--ngoc); border-left: 4px solid var(--ngoc); }
.dai--canhbao { background: var(--cam-mo); color: #9A4310; border-left: 4px solid var(--cam); }
.dai--nguy { background: var(--do-mo); color: var(--do); border-left: 4px solid var(--do); }
:root[data-theme="dark"] .dai--canhbao { color: var(--cam); }
.dai .nut { float: right; margin: -2px 0 6px 14px; }
.nut[disabled], .nut:disabled { opacity: .4; cursor: not-allowed; pointer-events: auto; }
/* ================================ 24. Chip giờ hẹn ================================ */
.chip-hang { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.chip {
padding: 7px 14px; border: 1px solid var(--vien-dam); border-radius: 20px;
background: var(--nen-the); color: var(--chu-nhat);
font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--ngoc); color: var(--ngoc); }
.chip.chon { background: var(--ngoc); border-color: var(--ngoc); color: #fff; }
:root[data-theme="dark"] .chip.chon { color: #20180A; }
.chip--nhat { background: var(--nen-nhe); }
.chip-gc { font-size: 12.5px; color: var(--chu-mo); margin-top: 7px; }
/* Ô danh sách dạng nút (Cài đặt: đơn vị tính, danh mục, bộ phận). ✕ chỉ hiện
khi rê chuột — máy cảm ứng không có rê chuột thì ✕ luôn hiện. */
.chip-o { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 6px; }
.chip--xoa { position: relative; cursor: default; padding-right: 14px; }
.chip__x {
display: none; margin-left: 6px; border: 0; background: none; padding: 0 2px;
font: inherit; font-weight: 700; color: var(--do); cursor: pointer; line-height: 1;
}
.chip--xoa:hover .chip__x, .chip--xoa:focus-within .chip__x { display: inline; }
@media (hover: none) { .chip__x { display: inline; } }
.chip-o__them { width: auto; min-width: 150px; max-width: 220px; }
.nhan-hen {
display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
border-radius: 10px; background: var(--cam-mo); color: #9A4310; margin-left: 5px;
}
:root[data-theme="dark"] .nhan-hen { color: var(--cam); }
/* ================================ 25. Tab Biểu đồ ================================ */
.bd__dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.bd__mo { font-size: 12.5px; color: var(--chu-mo); margin-top: 2px; }
.bd__nut { display: flex; gap: 5px; flex-shrink: 0; }
.bd__ve { overflow-x: auto; }
.bd__bang{ margin-top: 13px; }
.bd__rong{ text-align: center; color: var(--chu-mo); padding: 32px 12px; font-size: 13.5px; }
.bd-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.bd-luoi > * { min-width: 0; }
.thanh-bd {
display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
padding: 13px 16px; background: var(--nen-the); border: 1px solid var(--vien);
border-radius: var(--bo); margin-bottom: 18px; position: sticky; top: calc(var(--cao-dieu-huong, 62px) + 4px); z-index: 20;
}
/* Vạch ngăn mảnh giữa hai cụm nút trên cùng một hàng (hành trình | Ưu tiên, Nợ xấu). */
.thanh-bd__vach { width: 1px; align-self: stretch; min-height: 24px; background: var(--vien-dam); margin: 0 2px; }
.thanh-bd select, .thanh-bd input {
padding: 7px 11px; font: inherit; font-size: 13.5px;
border: 1px solid var(--vien-dam); border-radius: var(--bo-nho);
background: var(--nen-the); color: var(--chu);
}
.kpi-hang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; }
@media (max-width: 900px) {
.bd-luoi { grid-template-columns: 1fr; }
.kpi-hang { grid-template-columns: repeat(2, 1fr); }
.nguoidung__chu { display: none; }
.nguoidung { padding: 4px; border-radius: 50%; }
.thanh-bd { position: static; }
}
@media print {
.thanh-bd, .bd__nut, .dai, .khoa { display: none !important; }
.bd-luoi { grid-template-columns: 1fr; }
.bd { break-inside: avoid; page-break-inside: avoid; border-color: #ccc; }
.lv-noi > div { display: block !important; }
}
/* ================================ 26. Màn hình đăng nhập toàn trang ================================ */
.man-dn {
display: none;
position: fixed; inset: 0; z-index: 300;
background:
radial-gradient(1100px 520px at 12% -10%, rgba(196,236,132,.34), transparent 60%),
radial-gradient(900px 460px at 100% 110%, rgba(124,179,66,.38), transparent 62%),
linear-gradient(150deg, var(--ngoc-nhat) 0%, var(--ngoc) 55%, color-mix(in srgb, var(--ngoc) 74%, #000) 100%);
overflow: auto; padding: 26px 16px;
}
.man-dn__hop {
max-width: 780px; margin: min(6vh, 60px) auto;
background: var(--nen-the); border-radius: 16px;
box-shadow: 0 24px 70px rgba(6,44,22,.42); overflow: hidden;
}
/* Trước khi đăng nhập: khoá toàn bộ nội dung bên trong */
body.chua-dang-nhap { overflow: hidden; }
body.chua-dang-nhap .man-dn { display: block; }
body.chua-dang-nhap > .dieuhuong,
body.chua-dang-nhap > section,
body.chua-dang-nhap > footer,
body.chua-dang-nhap > .khung-toast { display: none !important; }
/* ================================ 27. Thanh nav trên màn hình hẹp ================================ */
.dieuhuong__trong > .logo { min-width: 0; }
.logo__chu { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
.dieuhuong__trong { gap: 8px; padding: 0 12px; }
.logo__chu { max-width: 40vw; font-size: 14px; }
.logo__phu { display: none; }
.nut-tron { width: 34px; height: 34px; font-size: 15px; }
.dh-phai { gap: 5px; }
#nutTheme { display: none; } /* chuyển sáng/tối nằm trong menu người dùng */
.nguoidung__avatar { width: 28px; height: 28px; font-size: 11px; }
.boc { padding: 0 14px; }
}
/* ================================ 28. Phạm vi giao diện theo vai trò ================================ */
/* Tài khoản nhân viên chỉ thấy phần phục vụ công việc hàng ngày: không có tab Nhân sự
và Cài đặt, không có hướng dẫn hạ tầng, không có liên kết tới file dữ liệu gốc. */
body.vai-nhanvien #cai-dat-hd,
body.vai-nhanvien #chanTaiLieu,
/* ================================ 29. Sóng uốn lượn xanh lá – trắng ================================
Nền trắng ngả xanh, các dải sóng mềm ngăn giữa các phần. Sóng vẽ bằng SVG nhúng
thẳng trong CSS nên không cần file ảnh, không tải thêm gì từ mạng. */
/* Nền trang để trơn: các dải sóng nằm ở hero, ranh giới section và chân trang.
(Đã thử lát hoạ tiết sóng lặp lên toàn bộ body — trang cao ~10.000px nên trình duyệt
phải vẽ lại một ảnh nền rất lớn và có lúc mất khung hình; bỏ đi cho chắc.) */
body { background-color: var(--nen); }
/* Vệt xanh mềm ở đầu mỗi phần nền màu, cho đỡ phẳng */
.section:not(.section--nhe) {
background-image: radial-gradient(1100px 220px at 50% -60px, rgba(124,179,66,.10), transparent 70%);
}
/* --- Hai lớp sóng khép đáy khối hero: một lớp mờ phía sau, một lớp trắng phía trước --- */
.hero { padding-bottom: 130px; }
.hero::after { /* lớp sóng mờ, lệch pha để tạo chiều sâu */
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 132px;
background: rgba(255,255,255,.16); z-index: 1; pointer-events: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,96 C200,26 380,124 620,86 C880,44 1080,128 1440,64 L1440,140 L0,140 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,96 C200,26 380,124 620,86 C880,44 1080,128 1440,64 L1440,140 L0,140 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.hero::before { /* lớp sóng chính, cùng màu với phần nội dung bên dưới */
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 104px;
background: var(--nen-the); z-index: 2; pointer-events: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,74 C180,10 400,118 660,72 C920,26 1140,116 1440,52 L1440,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,74 C180,10 400,118 660,72 C920,26 1140,116 1440,52 L1440,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
/* Section ngay dưới hero đã được sóng của hero khép rồi, không cần sóng trên nữa */
.hero + .section--nhe::before { display: none; }
/* --- Các section trắng nổi lên trên nền sóng, mép trên/dưới uốn lượn nhẹ --- */
.section--nhe {
position: relative;
background: var(--nen-the);
border-top: 1px solid var(--vien);
border-bottom: 1px solid var(--vien);
}
.section--nhe::before,
.section--nhe::after {
content: ''; position: absolute; left: 0; right: 0; height: 26px;
background: var(--nen-the); pointer-events: none;
}
.section--nhe::before {
top: -25px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C260,-2 460,26 720,14 C980,2 1200,24 1440,10 L1440,26 L0,26 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C260,-2 460,26 720,14 C980,2 1200,24 1440,10 L1440,26 L0,26 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.section--nhe::after {
bottom: -25px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C260,28 460,0 720,12 C980,24 1200,2 1440,16 L1440,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C260,28 460,0 720,12 C980,24 1200,2 1440,16 L1440,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
/* --- Sóng dẫn vào chân trang --- */
.chan { position: relative; margin-top: 64px; }
.chan::before {
content: ''; position: absolute; left: 0; right: 0; top: -47px; height: 48px;
background: color-mix(in srgb, var(--ngoc) 88%, #000);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C240,2 460,46 720,26 C980,6 1220,44 1440,20 L1440,48 L0,48 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C240,2 460,46 720,26 C980,6 1220,44 1440,20 L1440,48 L0,48 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
:root[data-theme="dark"] .chan::before { background: #1C1408; }
/* --- Sóng trên màn hình đăng nhập --- */
.man-dn::before {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34vh;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.10' d='M0,176 C240,96 420,256 720,192 C1020,128 1200,256 1440,176 L1440,320 L0,320 Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.08' d='M0,240 C260,176 480,288 720,240 C960,192 1200,288 1440,232 L1440,320 L0,320 Z'/%3E%3C/svg%3E");
background-size: 100% 100%; background-repeat: no-repeat;
pointer-events: none;
}
.man-dn__hop { position: relative; z-index: 1; }
.khoa__dau { position: relative; overflow: hidden; }
.khoa__dau::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px;
background: var(--nen-the);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C120,-2 220,20 300,12 C380,4 500,20 600,8 L600,22 L0,22 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C120,-2 220,20 300,12 C380,4 500,20 600,8 L600,22 L0,22 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
/* Khu vực làm việc để nền trong suốt cho sóng lộ ra */
.lamviec { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
.hero__nhan { animation: noiLen .6s ease-out both; }
}
@keyframes noiLen { from { opacity: 0; transform: translateY(8px); } }
/* ================================ 30. Nhân viên: chỉ có bảng làm việc ================================
Đăng nhập xong là vào thẳng việc — phần giới thiệu quy trình, hero, tra cứu, FAQ đều
ẩn đi. Nhân viên cần chỗ nhập liệu, không cần đọc lại quy trình mỗi lần mở máy. */
/* Đăng nhập xong là vào thẳng bảng làm việc — đúng với MỌI vai trò, không riêng
nhân viên. Phần giới thiệu quy trình chỉ dành cho người chưa đăng nhập. */
body.chi-bang-lam-viec > .hero,
body.chi-bang-lam-viec > section:not(#lam-viec) { display: none !important; }
body.chi-bang-lam-viec .menu,
body.chi-bang-lam-viec .nut-menu,
body.chi-bang-lam-viec #nutVaoLamViec { display: none !important; }
body.chi-bang-lam-viec #lam-viec { padding-top: 26px; }
body.chi-bang-lam-viec .dieuhuong__trong .dh-phai { margin-left: auto; }
body.chi-bang-lam-viec .chan { margin-top: 32px; }
body.chi-bang-lam-viec .chan__luoi { grid-template-columns: 1fr; }
/* ───── ĐĂNG NHẬP RỒI THÌ DÙNG HẾT BỀ NGANG MÀN HÌNH ─────
Khung chung 1180px là bề rộng của một trang GIỚI THIỆU — dòng chữ dài quá
thì mắt mất dòng. Nhưng đăng nhập xong thì mọi section giới thiệu đã ẩn
(luật ngay trên), cái còn lại là BẢNG: đơn hàng, tờ lịch xưởng, danh sách
khách. Bảng thì càng rộng càng đọc được nhiều cột mà không phải cuộn ngang,
nên bó nó vào 1180px là bỏ không một phần ba màn hình PC.
Nới CẢ thanh điều hướng, không riêng phần thân: để một thanh 1180px nằm trên
một cái bảng 2500px thì logo trôi vào giữa trời, mép trái hai bên lệch nhau
trông như trang bị hỏng.
KHÔNG chạm .boc của người CHƯA đăng nhập — trang giới thiệu vẫn 1180px như
cũ, vì ở đó chữ mới là nội dung chính.
Điện thoại và máy tính bảng không đổi gì: max-width vốn đã không phải thứ bó
chúng (màn hẹp hơn 1180px rồi), phần lề hai bên vẫn do .boc giữ, và bảng nào
quá khổ thì .bang-boc cuộn ngang trong lòng nó như trước. */
body.chi-bang-lam-viec .boc,
body.chi-bang-lam-viec .dieuhuong__trong { max-width: none; }
/* Chữ mô tả đầu mỗi bảng vẫn phải giữ độ dài dòng đọc được — rộng ra là để
cho BẢNG, không phải để kéo một câu văn dài suốt 2500px. */
body.chi-bang-lam-viec .hop-lon__dau p { max-width: 96ch; }
/* ================================ 31. Ô tìm khách hàng ================================
Tên khách trùng nhau được, nên mỗi dòng gợi ý phải hiện kèm số điện thoại và mã KH
thì người nhập mới phân biệt nổi hai người cùng tên. */
.timkh { position: relative; min-width: 0; }
.timkh > input { width: 100%; }
.timkh__ds {
position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
max-height: 288px; overflow-y: auto;
background: var(--nen-the); border: 1px solid var(--vien-dam);
border-radius: var(--bo); box-shadow: var(--bong-cao);
}
.timkh__dong {
padding: 9px 12px; cursor: pointer;
border-bottom: 1px solid var(--vien);
}
.timkh__dong:last-child { border-bottom: 0; }
.timkh__dong:hover,
.timkh__dong--sang { background: var(--nen-nhe); }
.timkh__ten { font-weight: 600; color: var(--chu); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.timkh__phu { font-size: 12px; color: var(--chu-nhat); margin-top: 3px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.timkh__dong--moi { background: var(--xanhla-mo); }
.timkh__dong--moi:hover,
.timkh__dong--moi.timkh__dong--sang { background: var(--xanhla-mo); filter: brightness(.97); }
.timkh__trong { padding: 12px; font-size: 13px; color: var(--chu-mo); }
/* Dải trả lời ngay "khách này đã có chưa" khi gõ số điện thoại */
.timkh__bang {
padding: 8px 12px; font-size: 12.5px;
border-bottom: 1px solid var(--vien);
position: sticky; top: 0; z-index: 1;
}
.timkh__bang--cu { background: var(--xanhla-mo); color: var(--chu); }
.timkh__bang--moi { background: var(--cam-mo, var(--nen-nhe)); color: var(--chu); }
/* Danh sách năm trạng thái trong hộp đổi trạng thái */
.ds-tt { display: flex; flex-direction: column; gap: 6px; }
.ds-tt__dong {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px; cursor: pointer;
border: 1px solid var(--vien); border-radius: 10px;
background: var(--nen-the);
}
.ds-tt__dong:hover { border-color: var(--vien-dam); background: var(--nen-nhe); }
.ds-tt__dong input { width: auto; margin-top: 3px; flex: none; }
.ds-tt__dong--dang { background: var(--nen-nhe); border-color: var(--vien-dam); }
/* Chặng đi ngược: vẫn đọc được để biết nó tồn tại, nhưng không bấm được. */
.ds-tt__dong--khoa { opacity: .5; cursor: not-allowed; }
.ds-tt__dong--khoa:hover { border-color: var(--vien); background: transparent; }
.ds-tt__dong:has(input:checked) { border-color: var(--chinh, var(--vien-dam)); box-shadow: 0 0 0 2px var(--xanhla-mo); }
/* Ô hành động của bảng Danh sách KH: 5 nút, cho xuống 2-3 hàng thay vì xếp dọc 5 tầng */
.hang-nut--oviec {
display: flex; flex-wrap: wrap; gap: 6px;
min-width: 232px;
}
.hang-nut--oviec .nut { white-space: nowrap; }
/* ================================ 32. Bảng Danh sách KH gọn lại ================================
Gộp 10 cột thành 5 để bảng vừa bề ngang màn hình. Mọi thông tin phụ (mã, số điện thoại,
nguồn lead, số lần chăm sóc) xuống dòng nhỏ bên dưới giá trị chính của cùng ô. */
/* Dãy nút liên hệ một chạm dưới số điện thoại: gọi · Zalo · WhatsApp · SMS · Messenger.
KHÔNG đặt tên .lh — lớp đó đã là thẻ lịch hẹn ở mục 14 phía trên, đè lên nó thì
mọi thẻ lịch hẹn co lại thành ô vuông 26px và chồng lên nhau. */
/* Ô tích trên thẻ lịch hẹn. Thẻ không có cột đầu như bảng kẻ ô, nên ô tích
nằm sát lề trái và tự giãn hết chiều cao để bấm vào đâu trong dải đó cũng
được — thẻ cao gần 80px, một ô vuông 16px giữa lề là chỗ khó nhắm. */
.lh__tich {
display: flex; align-items: center; padding-right: 4px; cursor: pointer;
}
.lh__tich input { width: 16px; height: 16px; cursor: pointer; }
/* Đã chọn thì thẻ đổi nền — nhìn cả danh sách là thấy ngay mình đang cầm
những ai, không phải rà từng ô vuông. */
.lh--chon { background: var(--xanhla-mo); }
:root[data-theme="dark"] .lh--chon { background: rgba(74,124,16,.18); }
.lienhe { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.lienhe__nut {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 7px; font-size: 13px;
text-decoration: none; border: 1px solid var(--vien);
background: var(--nen-2); transition: transform .12s, border-color .12s;
}
/* Nút email lúc khách chưa có email là thẻ