/* Khu quản trị (/admin) và CRM (/crm) */ :root{ --chinh:#12395F; --chinh-dam:#0C2740; --nhan:#C8922F; --nen:#F4F5F7; --trang:#FFFFFF; --nen-2:#F7F9FC; --chu:#1B1D21; --chu-mo:#646B78; --vien:#DFE3E9; --vien-dam:#C9CDD4; --r:9px; --bong:0 1px 2px rgba(16,32,52,.05), 0 6px 18px rgba(16,32,52,.05); --cao-tren:52px; --rong-ben:246px; --rong-ben-thu:62px; } /* ---- GIAO DIEN TOI ---- Chi doi BIEN MAU, khong dung toi mot dong bo cuc nao. Nguoi dung chon o cuoi cot trai; lua chon nho theo TAI KHOAN nen may nao dang nhap cung giu nguyen. */ :root[data-giao-dien="toi"]{ --chinh:#7FB2E8; --chinh-dam:#CFE2F7; --nhan:#E3B45C; --nen:#12161C; --trang:#1A2029; --nen-2:#222A35; --chu:#E6E9EE; --chu-mo:#9AA4B2; --vien:#2E3743; --vien-dam:#3C4855; --bong:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3); color-scheme: dark; } *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--nen);color:var(--chu); font:15px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif} a{color:var(--chinh);text-decoration:none} a:hover{text-decoration:underline} h1{font-size:1.5rem;margin:0 0 4px;color:var(--chinh-dam)} h2{font-size:1.12rem;margin:0 0 14px;color:var(--chinh-dam)} h3{font-size:1rem;margin:0 0 10px;color:var(--chinh-dam)} img{max-width:100%} .vo{display:grid;grid-template-columns:var(--rong-ben) 1fr;min-height:100vh;padding-top:var(--cao-tren)} /* ---- thanh trên cùng ---- */ .tren-cung{position:fixed;top:0;left:0;right:0;height:var(--cao-tren);z-index:40;background:var(--trang); border-bottom:1px solid var(--vien);display:flex;align-items:center;gap:12px;padding:0 14px} .tren-cung .hieu{display:flex;align-items:center;gap:9px;min-width:0} .tren-cung .hieu img{height:26px;width:auto;flex-shrink:0} .tren-cung .hieu b{color:var(--chinh-dam);font-size:.98rem;letter-spacing:.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tren-cung .vien-nho{background:var(--chinh-dam);color:var(--trang);border-radius:99px;padding:4px 13px; font-size:.8rem;font-weight:600;white-space:nowrap;flex-shrink:0} .tren-cung .phai{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:.88rem;flex-shrink:0} .tren-cung .phai b{color:var(--chinh-dam)} .tren-cung .phai small{color:var(--chu-mo);display:block;line-height:1.2} /* ---- nut chuyen ngon ngu VI | EN, goc tren ben phai ---- */ /* Mot cap nut lien nhau, ben dang dung to dam - nhin la biet minh o ngon ngu nao. */ .doi-nn{display:inline-flex;align-items:center;border:1px solid var(--vien);border-radius:8px; overflow:hidden;background:var(--trang);flex-shrink:0} .doi-nn button{background:none;border:0;cursor:pointer;font:inherit;font-size:.78rem;font-weight:600; letter-spacing:.03em;color:var(--chu-mo);padding:6px 10px;line-height:1.1;transition:background .12s} .doi-nn button:hover{background:var(--nen-2);color:var(--chinh-dam)} .doi-nn button.dang{background:var(--chinh-dam);color:var(--trang);cursor:default} .doi-nn button.dang:hover{background:var(--chinh-dam)} .doi-nn .ngan-nn{width:1px;align-self:stretch;background:var(--vien)} /* o chon hop thu tren thanh dau (thay cho danh sach da bo khoi menu trai) */ /* o chon hop thu — dung DAU cot trai. Le va be ngang khop y het nut "Soan thu" ngay duoi no (margin 2px 6px, width calc(100% - 12px)) cho thang hang. */ .ben .chon-hop{width:calc(100% - 12px);height:36px;margin:2px 6px 10px;padding:0 9px; font-size:.86rem;border:1px solid var(--vien);border-radius:9px;background:var(--trang); color:var(--chinh-dam);cursor:pointer;flex-shrink:0} /* thu menu lai thi giau di — luc do cot chi con be bang bieu tuong */ .vo.thu .chon-hop{display:none} /* tren nhung trang khong co thanh dau (cua dang nhap, cong khach): dat thang vao goc man hinh */ .doi-nn-goc{position:fixed;top:14px;right:16px;z-index:60;box-shadow:0 1px 3px rgba(12,39,64,.08)} .nut-thu{background:none;border:1px solid var(--vien);border-radius:7px;cursor:pointer; width:34px;height:34px;flex-shrink:0;color:var(--chinh-dam);font-size:1.05rem;line-height:1; display:flex;align-items:center;justify-content:center;padding:0} .nut-thu:hover{background:var(--nen-2)} /* ---- cột trái ---- */ .ben{background:var(--trang);border-right:1px solid var(--vien);padding:14px 10px 24px; display:flex;flex-direction:column;gap:1px;overflow-y:auto;overflow-x:hidden; position:sticky;top:var(--cao-tren);height:calc(100vh - var(--cao-tren));z-index:30} .ben .nhom{font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;color:var(--chu-mo); margin:18px 12px 5px;font-weight:700;white-space:nowrap} .ben a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px; color:var(--chu);font-size:.9rem;white-space:nowrap} .ben a:hover{background:var(--nen-2);text-decoration:none;color:var(--chinh-dam)} .ben a.dang{background:var(--nen-2);color:var(--chinh);font-weight:600} .ben .bieu{width:18px;text-align:center;opacity:.75;flex-shrink:0} .ben .duoi{margin-top:auto;border-top:1px solid var(--vien);padding-top:10px;font-size:.84rem} .ben .duoi a{padding:5px 12px;font-size:.84rem} /* ---- cột trái khi THU lại: chỉ còn biểu tượng ---- */ .vo.thu{grid-template-columns:var(--rong-ben-thu) 1fr} .vo.thu .ben{padding-left:6px;padding-right:6px} .vo.thu .ben .chu{display:none} .vo.thu .ben .nhom{height:1px;margin:12px 8px;padding:0;overflow:hidden; background:var(--vien);color:transparent} .vo.thu .ben a{justify-content:center;padding:9px 0;gap:0} .vo.thu .ben .bieu{width:auto} /* màn che khi ngăn kéo menu mở đè lên nội dung (màn hình hẹp) */ .man-che{display:none;position:fixed;inset:var(--cao-tren) 0 0 0;background:rgba(12,39,64,.42);z-index:25} /* ---- phần chính ---- */ .chinh{padding:24px 28px 60px;min-width:0;background:var(--nen)} .tren{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px} .tren .mo{color:var(--chu-mo);font-size:.93rem} .o{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r);padding:22px;box-shadow:var(--bong);margin-bottom:20px} .o.mong{padding:0;overflow:hidden} .the-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:16px;margin-bottom:22px} .the-so .o{margin:0;padding:18px 20px} .the-so b{display:block;font-size:1.8rem;color:var(--chinh);line-height:1.2} .the-so span{color:var(--chu-mo);font-size:.87rem} table{width:100%;border-collapse:collapse;font-size:.93rem} th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--vien);vertical-align:middle} th{background:var(--nen-2);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--chu-mo);font-weight:600} tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--nen-2)} td.phai,th.phai{text-align:right} label{display:block;font-weight:600;font-size:.86rem;margin:0 0 5px;color:var(--chinh-dam)} input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input:not([type]),select,textarea{ width:100%;padding:9px 11px;border:1px solid var(--vien);border-radius:7px;font:inherit;background:var(--trang);color:var(--chu)} input:focus,select:focus,textarea:focus{outline:2px solid rgba(18,57,95,.3);outline-offset:1px;border-color:var(--chinh)} textarea{min-height:90px;resize:vertical} .truong{margin-bottom:15px} .hang{display:grid;grid-template-columns:1fr 1fr;gap:15px} .hang-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px} /* Một cột: cho những nhóm ô phải khai theo đúng thứ tự. Chặn bề ngang lại vì ô nhập kéo dài hết màn 27 inch thì vừa xấu vừa khó nhắm chuột. */ .hang.mot-cot{grid-template-columns:1fr;max-width:620px} input[type=checkbox]{width:auto;transform:scale(1.15);margin-right:6px} .cung-dong{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .nut{display:inline-block;padding:9px 17px;border-radius:7px;font-weight:600;font-size:.9rem; background:var(--chinh);color:var(--trang);border:1px solid var(--chinh);cursor:pointer} .nut:hover{background:var(--chinh-dam);text-decoration:none;color:var(--trang)} .nut.vien{background:var(--trang);color:var(--chinh)} .nut.vien:hover{background:var(--nen-2);color:var(--chinh)} .nut.do{background:#A33636;border-color:#A33636} .nut.do:hover{background:#8A2B2B} .nut.nho{padding:6px 12px;font-size:.83rem} .bao{padding:12px 15px;border-radius:8px;margin-bottom:18px;font-size:.93rem} .bao.ok{background:#E8F3EC;border:1px solid #BBD9C6;color:#1E5233} .bao.loi{background:#FCECEC;border:1px solid #F0C4C4;color:#8A2B2B} .bao.nhac{background:#FDF5E4;border:1px solid #EBD9AE;color:#6D5417} .nhan{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:600;border:1px solid} .nhan.xam{background:var(--nen-2);border-color:var(--vien);color:var(--chu-mo)} .nhan.xanh{background:#E8F3EC;border-color:#BBD9C6;color:#1E5233} .nhan.vang{background:#FDF5E4;border-color:#EBD9AE;color:#6D5417} .nhan.do{background:#FCECEC;border-color:#F0C4C4;color:#8A2B2B} .nhan.duong{background:var(--nen-2);border-color:var(--vien-dam);color:#1B4C7D} /* CRM-27 — dải màu tình trạng dịch vụ. Cố ý KHÔNG dùng đỏ cho "đã ngừng": đỏ trong bảng này đang mang nghĩa "khách từ chối", mà khách ngừng dịch vụ thì vẫn là khách cũ — thường là người đáng gọi lại nhất. Cam = cần chú ý, không phải hỏng. */ .nhan.lam{background:#E9F0F8;border-color:#C2D4E8;color:#1B4C7D} .nhan.cam{background:#FBEFE6;border-color:#EDCDB2;color:#8A4B16} .o-dv{white-space:nowrap} .o-dv .nhan{margin-right:4px} :root[data-giao-dien="toi"] .nhan.lam{background:#16263A;border-color:#2F4D6E;color:#9EC6EE} :root[data-giao-dien="toi"] .nhan.cam{background:#32241A;border-color:#6A4A2E;color:#EBB98C} .mo{color:var(--chu-mo)} .nho{font-size:.85rem} .trong{padding:40px 20px;text-align:center;color:var(--chu-mo)} /* dòng thời gian trong hồ sơ khách */ .dong-tg{list-style:none;padding:0;margin:0} .dong-tg li{padding:13px 0 13px 20px;border-left:2px solid var(--vien);position:relative} .dong-tg li::before{content:"";position:absolute;left:-6px;top:19px;width:10px;height:10px;border-radius:50%;background:var(--chinh);border:2px solid var(--trang)} .dong-tg .khi{font-size:.8rem;color:var(--chu-mo)} /* trình soạn richtext */ #soan,#soan-en{background:var(--trang);min-height:420px} .ql-toolbar.ql-snow,.ql-container.ql-snow{border-color:var(--vien)} .ql-toolbar.ql-snow{border-radius:7px 7px 0 0;background:var(--nen-2)} .ql-container.ql-snow{border-radius:0 0 7px 7px;font-size:15px;font-family:inherit} /* trang đăng nhập */ .vo-dn{min-height:100vh;display:grid;place-items:center;padding:24px; background:linear-gradient(160deg,#0C2740,#12395F 60%,#1B4C7D)} .the-dn{background:var(--trang);border-radius:14px;padding:34px 32px;width:100%;max-width:400px;box-shadow:0 18px 50px rgba(6,20,36,.32)} .the-dn .hieu{text-align:center;margin-bottom:22px} .the-dn .hieu img{height:44px;width:auto} .the-dn .hieu p{color:var(--chu-mo);font-size:.86rem;margin:10px 0 0} /* thẻ tab */ /* overflow-y PHAI la hidden: the co margin-bottom:-1px nen noi dung cao hon khung dung 1px, du de trinh duyet ve mot THANH CUON DOC — nhin ra hai cai mui ten len/xuong o goc phai hang the (ong chu bao 23/09/2026). */ .tab{display:flex;gap:2px;border-bottom:1px solid var(--vien);margin-bottom:20px; overflow-x:auto;overflow-y:hidden} .tab a{padding:10px 18px;color:var(--chu-mo);font-size:.92rem;font-weight:600; border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap} .tab a:hover{color:var(--chinh);text-decoration:none} .tab a.dang{color:var(--chinh);border-bottom-color:var(--chinh)} /* v256.2: 2 tab Cập nhật phần mềm — điện thoại: chia đều bề ngang, chữ xuống dòng (tab "Kho tính năng chờ bạn cập nhật" dài) — khỏi bị khuất */ @media (max-width:600px){.tab-cnpm a{flex:1 1 0;min-width:0;white-space:normal;text-align:center;padding:8px 8px;line-height:1.35}} /* trang tài khoản: trái thông tin · phải phân quyền */ .hai-cot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:20px;align-items:start} /* v247: cột con (cả div bọc không lớp) được co — bảng trong .cuon-ngang không đẩy trang tràn ngang trên điện thoại */ .hai-cot > *{min-width:0} /* v248 (#56): CRM › Tổng quan — mỗi người tự sắp xếp khối (public/js/xep-khoi.js) */ .tq-xep-thanh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .tq-xep-thanh[hidden],[data-xep-bat][hidden]{display:none} .tq-xep.dang-xep .cot-xep{outline:2px dashed var(--vien-dam);outline-offset:6px;border-radius:var(--r);min-height:140px} .tq-xep.dang-xep .o[data-khoi]{position:relative;padding-top:54px} .tq-xep-nut{position:absolute;top:10px;right:10px;display:flex;gap:4px;z-index:2} .tq-xep-nut button{border:1px solid var(--vien);background:var(--trang);color:var(--chu);border-radius:8px;min-width:36px;height:34px; cursor:pointer;font:inherit;font-weight:700;line-height:1} .tq-xep-nut button:hover,.tq-xep-nut button:focus-visible{border-color:var(--chinh);color:var(--chinh)} .tq-xep-nut [data-xep-keo]{cursor:grab;touch-action:none;letter-spacing:-3px;padding-right:6px} .tq-dang-keo{position:fixed !important;z-index:80;pointer-events:none;margin:0;box-shadow:0 14px 34px rgba(12,39,64,.28);opacity:.96} .tq-dang-keo [data-xep-keo]{cursor:grabbing} .tq-cho{border:2px dashed var(--chinh);border-radius:var(--r);margin-bottom:20px;background:var(--nen-2)} .o-quyen{border:1px solid var(--vien);border-radius:8px;padding:13px 15px;margin-bottom:10px;background:var(--nen-2)} .o-quyen.bat{background:var(--nen-2);border-color:var(--vien-dam)} .o-quyen .ten{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--chinh-dam);flex-wrap:wrap} .o-quyen .mo-ta{color:var(--chu-mo);font-size:.84rem;margin:5px 0 0 26px} .o-quyen .pham-vi{margin:10px 0 0 26px;display:flex;gap:16px;flex-wrap:wrap;font-size:.87rem} .o-quyen .pham-vi label{font-weight:500;display:flex;align-items:center;gap:6px;margin:0;color:var(--chu)} .o-quyen.tat .pham-vi{display:none} /* ================= MÀN HÌNH HẸP ================= */ @media (max-width:1100px){ .hai-cot{grid-template-columns:minmax(0,1fr)} } @media (max-width:860px){ /* Cột trái thành ngăn kéo trượt ra, không chiếm chỗ của nội dung */ .vo,.vo.thu{grid-template-columns:1fr} .ben{position:fixed;top:var(--cao-tren);left:0;bottom:0;width:var(--rong-ben);height:auto; transform:translateX(-100%);transition:transform .18s ease;box-shadow:0 12px 40px rgba(12,39,64,.18)} .vo.mo .ben{transform:translateX(0)} .vo.mo .man-che{display:block} /* màn hẹp thì nút này là nút mở ngăn kéo — bỏ kiểu "chỉ còn biểu tượng" */ .vo.thu .ben .chu{display:inline} .vo.thu .ben a{justify-content:flex-start;padding:8px 12px;gap:10px} .vo.thu .ben .nhom{height:auto;margin:18px 12px 5px;background:none;color:var(--chu-mo)} .tren-cung{gap:9px;padding:0 10px} .tren-cung .hieu b{font-size:.86rem;max-width:34vw} .tren-cung .vien-nho{display:none} .tren-cung .phai{gap:10px;font-size:.82rem} .tren-cung .phai .ai{display:none} .doi-nn button{padding:5px 8px;font-size:.74rem} .chinh{padding:16px 13px 50px} .hang,.hang-3{grid-template-columns:1fr} .o{padding:15px} .o.mong{overflow-x:auto} .o.mong table{min-width:620px} h1{font-size:1.24rem} table{font-size:.87rem} th,td{padding:9px 10px} .the-so{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:11px} .the-so b{font-size:1.45rem} .tren{margin-bottom:16px} } @media (max-width:480px){ .tren-cung .hieu b{max-width:26vw} .the-so{grid-template-columns:1fr 1fr} .nut{padding:8px 14px} .chinh{padding:14px 10px 46px} } /* hàng việc "Xem · Sửa" nằm ngay dưới tiêu đề trong danh sách */ .viec-dong{margin-top:5px;font-size:.84rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .viec-dong a{color:var(--chinh);font-weight:600} .viec-dong a:hover{text-decoration:underline} /* ---- ô lọc gọn: nhãn chữ thường, nhỏ, nút cùng hàng ---- */ .o-loc{padding:14px 16px} .hang-loc{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0} .hang-loc .o-nho{flex:1 1 180px;min-width:150px} .hang-loc label{font-size:.76rem;font-weight:500;text-transform:lowercase;letter-spacing:.02em; color:var(--chu-mo);margin:0 0 3px} .hang-loc input,.hang-loc select{padding:7px 10px;font-size:.9rem} .hang-loc .nut-loc{display:flex;gap:8px;flex:0 0 auto} .hang-loc .nut-loc .nut{padding:7px 16px;font-size:.88rem;line-height:1.4} /* ---- chân bảng: phân trang ---- */ .chan-bang{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:11px 15px;border-top:1px solid var(--vien);background:var(--nen-2)} .chan-bang select{padding:5px 8px;font-size:.86rem} .trang-so{display:inline-flex;gap:3px;align-items:center} .trang-so a{min-width:30px;text-align:center;padding:5px 8px;border-radius:6px;font-size:.86rem; border:1px solid var(--vien);background:var(--trang);color:var(--chu)} .trang-so a:hover{background:var(--nen-2);text-decoration:none} .trang-so a.dang{background:var(--chinh);border-color:var(--chinh);color:var(--trang);font-weight:600} /* ---- hàng khách bấm được để gán màu ---- */ .bang-khach tbody tr{cursor:pointer} .bang-khach tbody tr:hover{filter:brightness(.975)} .bang-khach tbody tr a{cursor:pointer} .bang-mau-chon{position:absolute;z-index:60;background:var(--trang);border:1px solid var(--vien); border-radius:10px;box-shadow:0 14px 40px rgba(12,39,64,.22);padding:8px;min-width:190px} .bang-mau-chon .dong{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px; cursor:pointer;font-size:.88rem} .bang-mau-chon .dong:hover{background:var(--nen-2)} .bang-mau-chon .o-mau{width:18px;height:18px;border-radius:5px;border:1px solid var(--vien-dam);flex-shrink:0} .bang-mau-chon .dau-dang{margin-left:auto;color:var(--chinh);font-weight:700} /* ---- popup ---- */ .lop-phu{position:fixed;inset:0;z-index:70;background:rgba(12,39,64,.45); display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 20px;overflow-y:auto} .lop-phu[hidden]{display:none} .lop-phu .hop{background:var(--trang);border-radius:12px;width:100%;max-width:760px; box-shadow:0 22px 60px rgba(6,20,36,.32);overflow:hidden} .hop-dau{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 20px;border-bottom:1px solid var(--vien)} .hop-than{padding:20px} .hop-chan{display:flex;justify-content:flex-end;gap:9px;padding:14px 20px; border-top:1px solid var(--vien);background:var(--nen-2)} .nut-dong{background:none;border:none;font-size:1.15rem;cursor:pointer;color:var(--chu-mo); width:32px;height:32px;border-radius:7px;line-height:1} .nut-dong:hover{background:var(--nen-2);color:var(--chinh-dam)} @media (max-width:640px){ .lop-phu{padding:0} .lop-phu .hop{border-radius:0;min-height:100vh;max-width:none} } /* nút trông như chữ (dùng trong hàng việc Xem · Sửa · Xoá) */ .nhu-chu{background:none;border:none;padding:0;font:inherit;font-weight:600;font-size:.84rem; color:#A33636;cursor:pointer} .nhu-chu:hover{text-decoration:underline} .viec-dong form{display:inline} /* dịch vụ sắp hết hạn */ .gap-han{color:#A33636;font-weight:600} /* ---- khu thư ---- */ .bang-thu tbody tr.chua-doc td{font-weight:600;background:var(--nen-2)} .bang-thu tbody tr.chua-doc td a{color:var(--chinh-dam)} .khung-thu{width:100%;min-height:420px;border:1px solid var(--vien);border-radius:8px;background:var(--trang)} .chu-thu{white-space:pre-wrap;word-break:break-word;font:inherit;margin:0; background:var(--nen-2);border:1px solid var(--vien);border-radius:8px;padding:16px} .ds-kem{display:flex;flex-direction:column;gap:6px;margin-top:10px} .ds-kem .tep{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--vien); border-radius:7px;background:var(--nen-2);font-size:.88rem} .ds-kem .tep .bo{margin-left:auto;background:none;border:none;color:#A33636;cursor:pointer;font-weight:700} /* ---- hộp soạn thư: nhỏ gọn, nổi lên như Gmail ---- */ /* Popup it o thi dung khung hep, khong de o keo dai het 760px cho trong */ .lop-phu .hop.hop-hep{max-width:520px} .lop-phu .hop.hop-soan{max-width:620px;margin-top:2vh} .hop-soan .hop-than{padding:0} .hop-soan .dong-soan{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--vien); padding:0 16px} .hop-soan .dong-soan label{width:60px;flex-shrink:0;margin:0;font-size:.82rem;font-weight:500; color:var(--chu-mo);text-transform:lowercase} .hop-soan .dong-soan input,.hop-soan .dong-soan select{border:none;border-radius:0;padding:10px 0; font-size:.92rem;background:transparent} .hop-soan .dong-soan input:focus,.hop-soan .dong-soan select:focus{outline:none;box-shadow:none} .hop-soan .o-soan{width:100%;border:none;border-radius:0;padding:14px 16px;min-height:220px; font-size:.94rem;resize:vertical} .hop-soan .o-soan:focus{outline:none} .hop-soan .ds-kem{padding:0 16px 10px} .hop-chan-soan{align-items:center;gap:10px;justify-content:flex-start} /* nút Soạn thư ở cột trái: cho ra dáng nút, đừng lẫn vào các mục menu */ .ben .nut-soan{display:flex;align-items:center;justify-content:center;gap:8px; margin:2px 6px 12px;padding:11px 14px;border-radius:9px;background:var(--chinh);color:var(--trang); font-weight:600;font-size:.92rem;border:none;cursor:pointer;width:calc(100% - 12px)} .ben .nut-soan:hover{background:var(--chinh-dam);color:var(--trang);text-decoration:none} .vo.thu .ben .nut-soan{padding:11px 0;margin:2px 2px 12px;width:calc(100% - 4px)} .vo.thu .ben .nut-soan .chu{display:none} /* ---- danh sách thư kiểu hòm thư: một dòng, có ô tích và dấu sao ---- */ .bang-thu td{padding:9px 10px} .bang-thu .o-tich{width:34px;text-align:center} .bang-thu .o-sao{width:30px;text-align:center;cursor:pointer;font-size:1rem;color:var(--vien-dam); background:none;border:none;padding:0;line-height:1} .bang-thu .o-sao.sang{color:#E0A33E} .bang-thu .trich{color:var(--chu-mo);font-weight:400} .thanh-viec{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px; border-bottom:1px solid var(--vien);background:var(--nen-2)} .thanh-viec .dem{margin-left:auto;font-size:.85rem;color:var(--chu-mo)} .thanh-viec[hidden]{display:none} /* ---- thanh công cụ của hòm thư: một hàng, giống hòm thư quen thuộc ---- */ .thanh-hom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px; border-bottom:1px solid var(--vien);background:var(--trang)} .thanh-hom .o-tim-hom{max-width:260px;padding:6px 10px;font-size:.88rem} .thanh-hom .viec-chon{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap; padding-left:8px;margin-left:2px;border-left:1px solid var(--vien)} .thanh-hom .viec-chon[hidden]{display:none} .thanh-hom .phan-trang-hom{margin-left:auto;display:flex;align-items:center;gap:6px} .nut-tron{width:30px;height:30px;border-radius:50%;border:none;background:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;color:var(--chu-mo); font-size:1.05rem;line-height:1;text-decoration:none;flex-shrink:0} .nut-tron:hover{background:var(--nen-2);color:var(--chinh-dam);text-decoration:none} .nut-tron.tat{color:var(--vien-dam);cursor:default} .nut-tron.tat:hover{background:none;color:var(--vien-dam)} @media (max-width:760px){ .thanh-hom .phan-trang-hom{margin-left:0;width:100%;justify-content:flex-end} .thanh-hom .o-tim-hom{max-width:none;flex:1 1 140px} } /* cột người gửi trong danh sách thư: một dòng, tràn thì cắt bằng ba chấm */ .bang-thu .cot-nguoi a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- nút chọn có menu thả xuống (kiểu hòm thư quen thuộc) ---- */ .chon-nhom{position:relative;display:inline-flex;align-items:center;gap:2px} .nut-xo{background:none;border:none;cursor:pointer;color:var(--chu-mo);font-size:.7rem; padding:4px 3px;line-height:1;border-radius:5px} .nut-xo:hover{background:var(--nen-2);color:var(--chinh-dam)} .menu-xo{position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:170px; background:var(--trang);border:1px solid var(--vien);border-radius:9px;padding:5px; box-shadow:0 12px 34px rgba(12,39,64,.18)} .menu-xo[hidden]{display:none} .menu-xo button{display:block;width:100%;text-align:left;background:none;border:none; padding:8px 12px;border-radius:6px;font:inherit;font-size:.89rem;color:var(--chu);cursor:pointer} .menu-xo button:hover{background:var(--nen-2);color:var(--chinh-dam)} .menu-xo .ngan{height:1px;background:var(--vien);margin:4px 6px} /* ---- biểu tượng nét: canh cho thẳng hàng với chữ ---- */ .bt{display:inline-block;vertical-align:-3px;flex-shrink:0} .ben .bieu{display:inline-flex;align-items:center;justify-content:center;width:22px} .nut-tron .bt{vertical-align:0} .menu-xo button .bt{margin-right:8px;vertical-align:-4px;opacity:.7} /* ---- thanh công cụ đứng riêng, ngoài khung danh sách ---- */ .thanh-hom{border:none;background:none;padding:0 2px 10px;border-radius:0} .o.mong .bang-thu thead th{background:var(--nen-2);font-size:.74rem;letter-spacing:.06em; text-transform:uppercase;color:var(--chu-mo);font-weight:600;padding:8px 10px} .bang-thu thead th.o-tich{width:34px} /* ---- nhãn gắn trên thư ---- */ .the-nhan{display:inline-block;background:var(--nen-2);border:1px solid var(--vien);color:var(--chu-mo); border-radius:5px;padding:1px 7px;font-size:.75rem;font-weight:600;margin-right:6px; vertical-align:1px} .o-nhan-moi{display:flex;gap:6px;align-items:center;padding:6px 8px} .o-nhan-moi input{padding:6px 9px;font-size:.87rem} /* ---- soạn thư có định dạng ---- */ .khung-soan{border-top:1px solid var(--vien)} .khung-soan .ql-toolbar.ql-snow{border:none;border-bottom:1px solid var(--vien);padding:6px 10px;background:var(--nen-2)} .khung-soan .ql-container.ql-snow{border:none;font-size:.94rem;font-family:inherit} .khung-soan .ql-editor{min-height:210px;padding:14px 16px} .khung-soan .ql-editor.ql-blank::before{left:16px;right:16px;font-style:normal;color:var(--chu-mo)} .hop-soan .o-soan[hidden]{display:none} /* ================= MÀN HÌNH ĐỌC THƯ — một khung duy nhất ================= */ .o-doc-thu{padding:0;overflow:hidden} .dau-thu{padding:22px 26px 14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .tieu-de-thu{font-size:1.45rem;font-weight:400;color:var(--chu);margin:0;line-height:1.35; flex:1 1 320px;min-width:0;word-break:break-word} .hang-nguoi-gui{display:flex;align-items:flex-start;gap:13px;padding:0 26px 16px} .anh-dai-dien{width:38px;height:38px;border-radius:50%;background:var(--nen-2);color:var(--chinh); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.02rem;flex-shrink:0} .ai-gui{flex:1 1 auto;min-width:0;line-height:1.45} .ai-gui strong{font-size:.97rem;color:var(--chu)} .ben-phai-thu{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-top:3px} /* thân thư đặt thẳng trên nền trắng, không bọc hộp xám */ .than-thu{padding:4px 26px 20px} .than-thu .chu-thu{white-space:pre-wrap;word-break:break-word;background:none;border:none; padding:0;margin:0;font:inherit;line-height:1.75;color:var(--chu)} .than-thu .khung-thu{border:none;min-height:340px} .khoi-kem{padding:0 26px 18px;border-top:1px solid var(--vien);padding-top:16px;margin-top:4px} .khoi-kem .ds-kem{flex-direction:row;flex-wrap:wrap;gap:8px} .khoi-kem .tep{min-width:230px;max-width:340px;color:var(--chu);text-decoration:none} .khoi-kem .tep:hover{background:var(--nen-2);text-decoration:none} .khoi-kem .tep span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chan-doc-thu{display:flex;gap:10px;flex-wrap:wrap;padding:4px 26px 24px} .nut-tron-vien{display:inline-flex;align-items:center;gap:8px;background:var(--trang); border:1px solid var(--vien);border-radius:99px;padding:8px 20px;font:inherit;font-size:.92rem; color:var(--chu);cursor:pointer} .nut-tron-vien:hover{background:var(--nen-2);border-color:var(--vien-dam)} @media (max-width:760px){ .dau-thu{padding:16px 15px 10px} .tieu-de-thu{font-size:1.2rem} .hang-nguoi-gui,.than-thu,.khoi-kem,.chan-doc-thu{padding-left:15px;padding-right:15px} .ben-phai-thu{flex-wrap:wrap;justify-content:flex-end} } /* ---- dau hieu khach hang trong khu thu (bat/tat o Cai dat -> Noi voi CRM) ---- */ .cham-khach{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0; box-shadow:0 0 0 1px rgba(12,39,64,.18)} .dau-khach{display:inline-flex;align-items:center;gap:6px;text-decoration:none} .dau-khach:hover{text-decoration:underline} .dai-khach{display:flex;align-items:center;gap:9px;margin-top:8px;padding:7px 11px; border:1px solid var(--vien);border-left:3px solid var(--chinh);border-radius:8px; background:var(--nen-2);text-decoration:none;color:var(--chu);font-size:.88rem;flex-wrap:wrap} .dai-khach:hover{background:var(--nen-2)} /* o chon kieu dau hieu (Cai dat -> Noi voi CRM) */ .o-kieu{display:block;border:1px solid var(--vien);border-radius:9px;padding:12px 13px;cursor:pointer; background:var(--trang);transition:border-color .12s,background .12s} .o-kieu:hover{border-color:var(--vien-dam)} .o-kieu.dang{border-color:var(--chinh);background:var(--nen-2)} .o-kieu .ten-kieu{font-weight:600;margin-left:6px} .o-kieu .vi-du{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:9px; border-top:1px dashed var(--vien);color:var(--chinh-dam);font-size:.88rem;min-height:26px} /* nut mui ten quay ra khoi trang cai dat, ve dung hop thu dang mo */ .nut-ra{flex-shrink:0;margin-top:3px;text-decoration:none} /* ---- Giao dien toi: nhung mau bao/nhan phai dịu lai, khong thi choi mat ---- */ :root[data-giao-dien="toi"] .bao.ok {background:#14301F;border-color:#2C5A3C;color:#9ADCB4} :root[data-giao-dien="toi"] .bao.loi {background:#32191A;border-color:#6A3236;color:#F0A8A8} :root[data-giao-dien="toi"] .bao.nhac{background:#2E2718;border-color:#5C4E2C;color:#E5CE8E} :root[data-giao-dien="toi"] .nhan.xanh{background:#14301F;border-color:#2C5A3C;color:#9ADCB4} :root[data-giao-dien="toi"] .nhan.vang{background:#2E2718;border-color:#5C4E2C;color:#E5CE8E} :root[data-giao-dien="toi"] .nhan.do {background:#32191A;border-color:#6A3236;color:#F0A8A8} :root[data-giao-dien="toi"] .nhan.duong{background:#16273A;border-color:#2E4A6B;color:#A8C9EC} :root[data-giao-dien="toi"] .nut.do{background:#8C3030;border-color:#8C3030} :root[data-giao-dien="toi"] .gap-han{color:#F0A8A8} /* Thu cua nguoi la nam trong khung cach ly, nen giu khung sang de doc dung nhu nguoi gui soan */ :root[data-giao-dien="toi"] .khung-thu{background:#fff;border-radius:6px} /* ---- cụm ngôn ngữ + sáng/tối trên THANH ĐẦU, bên phải (ông chủ chốt 30/09/2026) ---- Trước để ở đáy cột trái (23/09). Dùng thật thì đáy là chỗ mắt không nhìn tới, mà đổi ngôn ngữ lại là việc bấm thường xuyên vì nhân sự Việt và Mỹ dùng chung màn hình. */ .tren-cung .cum-chon-tren{display:flex;align-items:center;gap:8px;margin-right:4px} .tren-cung .cum-chon-tren svg{display:block} .tren-cung .cum-chon-tren .doi-nn button{padding:5px 9px} /* Màn hẹp: giấu cụm này đi cho thanh đầu khỏi chật — tên người dùng quan trọng hơn. Người dùng điện thoại đổi ngôn ngữ ở trang đăng nhập hoặc xoay ngang máy. */ /* 03/10/2026: KHONG giau ca cum nua — o ngon ngu nay chi con mot chu (VI/EN) nen man hep van du cho. Chi giau DAY PHAN HE (xem duoi), dien thoai dung ngan keo. */ /* ---- cum cuoi cot trai: mot ben ngon ngu, mot ben giao dien ---- */ .khoi-duoi{margin-top:auto;display:flex;flex-direction:column;gap:1px} .duoi-chon{margin-top:12px;padding:12px 2px 2px;display:flex;gap:8px;align-items:center; border-top:1px solid var(--vien)} .duoi-chon .doi-nn{flex:1;justify-content:center} .duoi-chon .doi-nn button{flex:1;display:flex;align-items:center;justify-content:center;padding:7px 0} .duoi-chon svg{width:16px;height:16px;display:block} /* thu menu lai thi cum nut xep doc cho vua be ngang */ .vo.thu .duoi-chon{flex-direction:column;padding:10px 6px;gap:6px} .vo.thu .duoi-chon .doi-nn{width:100%} /* ---- menu nho khi bam vao ten minh tren thanh dau ---- */ .ai-nut{display:flex;align-items:center;gap:7px;background:none;border:1px solid transparent; border-radius:8px;padding:4px 8px;cursor:pointer;font:inherit;color:inherit;text-align:left} .ai-nut:hover{border-color:var(--vien);background:var(--nen-2)} .ai-nut .mui-xuong{color:var(--chu-mo);font-size:.7rem} .menu-toi{right:0;left:auto;min-width:190px} .menu-toi a{display:block;padding:9px 13px;color:var(--chu);text-decoration:none;font-size:.9rem} .menu-toi a:hover{background:var(--nen-2);text-decoration:none} /* Hai nut ngang hang trong khoi tai khoan cua ho so nhan vien */ .hang-nut-nv { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; } /* `hidden` chi la display:none o muc trinh duyet, nen display cua `.nut` thang no. Khong co dong nay thi dat hidden ma nut van hien — da dinh that 23/09/2026. */ .nut[hidden] { display: none; } /* Muc menu de DO cho biet co chuc nang ay, nhung chua bam duoc. */ .muc-tat{opacity:.4;cursor:default} .muc-tat:hover{background:none} /* v114b (ông chủ: "format cho thẳng thắn đẹp vào"): mục cột trái CHƯA BẤM ĐƯỢC (khu Thư khi chưa có hộp thư) là , không phải — trước đây không ăn kiểu của .ben a nên lệch lề, biểu tượng nhỏ. Nay cùng khuôn, cùng lề, cùng cỡ với mục thường. */ .ben .muc{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px;color:var(--chu);font-size:.9rem;white-space:nowrap} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .muc{color:var(--mm-chu);border-radius:999px;font-weight:500} .vo.thu .ben .muc{justify-content:center;padding:9px 0;gap:0} @media (max-width:860px){ .vo.thu .ben .muc{justify-content:flex-start;padding:8px 12px;gap:10px} } /* Nut dang TAT phai TRONG NHU dang tat. Khong co dong nay thi nut disabled nhin y het nut bam duoc — nguoi dung bam mai khong thay gi, tuong phan mem hong. Ong chu dinh dung loi nay 23/09/2026. */ .nut:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .nut:disabled:hover{filter:none} /* Nhan vua de DOC vua BAM duoc — dung cho cong tac bat/tat ngay trong dong du lieu. Trong giong `.nhan` nhung co con tro tay va sang len khi ro chuot. */ .nhan-nut{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px; font-size:.74rem;font-weight:500;border:1px solid transparent;cursor:pointer; font-family:inherit;line-height:1.5} .nhan-nut.xanh{background:var(--xanh-nhat,#e8f5ec);color:var(--xanh-dam,#1b6b3a)} .nhan-nut.xam{background:var(--nen-2);color:var(--chu-mo)} .nhan-nut:hover{filter:brightness(.95)} .hang-nut-nv form { margin: 0; } /* ---- Cum "Phan he khac" gap lai ---- Ong chu 23/09/2026: sat lai cho do ton dien tich, mac dinh an, bam moi mo. */ .nhom-gap{margin-top:2px} .nhom-gap>summary{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:8px;padding:7px 12px;border-radius:8px; font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--chu-mo);user-select:none} .nhom-gap>summary::-webkit-details-marker{display:none} .nhom-gap>summary:hover{background:var(--nen-2);color:var(--chu)} .nhom-gap .mui-gap{font-size:.75rem;transition:transform .15s} .nhom-gap[open] .mui-gap{transform:rotate(90deg)} /* Cac muc ben trong sat nhau hon muc thuong */ .nhom-gap .trong-gap{display:flex;flex-direction:column;gap:1px;padding-bottom:2px} .nhom-gap .trong-gap .muc{padding-top:6px;padding-bottom:6px} /* Man hinh "Cai dat phan he": trai chon phan he, phai la cai dat cua no. */ .hai-cot-lech{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start} /* v175: hồ sơ khách — Tổng quan hai cột bằng nhau; cột trái hai thẻ hồ sơ xếp chồng; cột phải người liên hệ + dịch vụ sử dụng (màu theo trạng thái) */ .ho-so-tq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .cot-xep{display:grid;gap:0} .dv-nhom-tt{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px} .dv-nhom-tt a.nhan{text-decoration:none} .ds-dv-tq{list-style:none;margin:0;padding:0;display:grid;gap:6px} .ds-dv-tq li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--vien);border-left:4px solid #94A3B8;border-radius:8px;min-width:0} .ds-dv-tq li .giua{min-width:0;flex:1} .ds-dv-tq li.tt-xanh{border-left-color:#1E8E3E} .ds-dv-tq li.tt-lam{border-left-color:#1A73E8} .ds-dv-tq li.tt-vang{border-left-color:#E8A317} .ds-dv-tq li.tt-cam{border-left-color:#E8710A} .ds-dv-tq li.tt-do{border-left-color:#D93025} .cam-chu{color:#C2410C} /* v177: LOẠI KHÁCH — ô theo loại (form-khach[data-loai]); chưa chọn thì như cá nhân */ .form-khach[data-loai="cong_ty"] [data-chi-loai="ca_nhan"], .form-khach:not([data-loai="cong_ty"]) [data-chi-loai="cong_ty"]{display:none} .chon-loai-kh{display:flex;gap:8px;flex-wrap:wrap} .kd-goi-y{margin-top:4px;color:#B45309} /* v184: gợi ý "có vẻ là MST" */ .kd-goi-y[hidden]{display:none} /* v179: phần module trong ô "Bán gì" (tên miền QC) + nhãn nhỏ 2/3, không đậm */ .o-khe-ban{margin-top:3px} .o-khe-ban .qctm-tm::before{content:'🌐 ';font-size:.8em} .nhan.nhan-nho23{font-size:.52rem;font-weight:400;padding:1px 7px} /* v185: nhãn "＋ Khai báo tên miền" là NÚT — bấm nhảy tới ô khai ở chi tiết dịch vụ */ a.nhan.qctm-khai{text-decoration:none;cursor:pointer} a.nhan.qctm-khai:hover{filter:brightness(.94);text-decoration:underline} /* v185 (ông chủ): sổ Bán hàng & dịch vụ — tên khách nhỏ 1 cỡ, không đậm; tên dịch vụ (Bán gì) đậm */ .dv-ten-khach{font-size:.92em;font-weight:400} .dv-ten-ban{font-weight:700} /* v186: tài khoản ngân hàng (CRM › Cài đặt) + trang Gửi QR */ .tknh-dong{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .tknh-dong .giua{flex:1 1 260px;min-width:0} .tknh-dong .anh-qr{width:120px;height:auto;flex:0 0 120px;border:1px solid var(--vien);border-radius:8px;background:#fff} .tknh-an{opacity:.62} @media (max-width:640px){.tknh-dong .cum-thao-tac{width:100%}} /* v185: ô NHẬP NHANH TẠI CHỖ (admin.js [data-nhap-nhanh]) — mở ngay dưới nhãn */ form.nhap-nhanh{display:grid;gap:6px;margin-top:6px;padding:10px;min-width:220px;max-width:340px;background:var(--nen-the,#fff); border:1px solid var(--vien);border-radius:10px;box-shadow:0 6px 18px rgba(15,35,60,.12);text-align:left;white-space:normal} form.nhap-nhanh textarea{width:100%;font-size:.88rem;min-height:52px} form.nhap-nhanh .cung-dong{gap:6px} /* v178 (ông chủ: "box thiếu người liên hệ nhỏ lại = 1/2 hiện tại, không cần bold") */ .nhan.nhan-thieu-lh{font-size:.62rem;font-weight:400;padding:0 6px;line-height:1.5;text-decoration:none} .khoi-lh-moi{margin-top:14px;padding:14px;border:1px dashed var(--vien);border-radius:10px;background:var(--nen-2)} .khoi-lh-moi h3{margin:0 0 8px;font-size:.95rem} @media (max-width:1100px){ .ho-so-tq{grid-template-columns:1fr} } .ds-ben{display:flex;flex-direction:column} .ds-ben a{display:block;padding:11px 14px;color:var(--chu);text-decoration:none; border-left:3px solid transparent} .ds-ben a+a{border-top:1px solid var(--vien)} .ds-ben a:hover{background:var(--nen-2);text-decoration:none} .ds-ben a.dang{background:var(--nen-2);border-left-color:var(--chinh);font-weight:600} .ds-ben .chu{display:block;font-size:.92rem} .ds-ben code{font-size:.72rem} @media (max-width:820px){ .hai-cot-lech{grid-template-columns:1fr} } /* ============================ KHU LỊCH /calendar ============================ Dùng lại toàn bộ biến màu đã có nên giao diện tối tự chạy theo, không phải khai thêm bộ màu nào. Màu riêng của từng lịch đi qua biến --mau-sk đặt ngay trên thẻ, vì đó là DỮ LIỆU (chủ lịch tự chọn), không phải màu giao diện. */ .lich-tren{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin-bottom:12px} .lich-tren .cum{display:flex;align-items:center;gap:8px} .lich-tren .lich-thang{font-size:1.25rem;margin:0 0 0 6px;white-space:nowrap} @media (max-width:480px){ .lich-tren .cum{flex-wrap:wrap;row-gap:6px} .lich-tren .lich-thang{font-size:1.05rem;white-space:normal;flex-basis:100%;margin:2px 0 0} } /* v259.3: tiêu đề khoảng ngày (lịch ngày / Lịch làm việc khách) xuống dòng thay vì tràn ngang 375px */ .lich-tren .nut-tron.xoay svg{transform:rotate(180deg)} .doi-kieu{display:inline-flex;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden} .doi-kieu a{padding:7px 14px;color:var(--chu);font-size:.9rem} .doi-kieu a+a{border-left:1px solid var(--vien)} .doi-kieu a:hover{background:var(--nen-2);text-decoration:none} .doi-kieu a.dang{background:var(--chinh);color:var(--trang);font-weight:600} /* ---- lưới tháng ---- */ .lich-luoi{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--vien); border:1px solid var(--vien);border-radius:var(--r);overflow:hidden} .lich-luoi .o-thu{background:var(--nen-2);padding:8px 10px;font-size:.8rem;font-weight:600; color:var(--chu-mo);text-align:center} .lich-luoi .o-ngay{background:var(--trang);min-height:104px;padding:5px 6px 7px;cursor:pointer} .lich-luoi .o-ngay:hover{background:var(--nen-2)} .lich-luoi .o-ngay.ngoai{background:var(--nen);color:var(--chu-mo)} .lich-luoi .o-ngay.ngoai .so-ngay a{color:var(--chu-mo)} .lich-luoi .so-ngay{text-align:right;font-size:.85rem;margin-bottom:3px} .lich-luoi .so-ngay a{color:var(--chu);padding:2px 5px;border-radius:99px} .lich-luoi .o-ngay.nay .so-ngay a{background:var(--chinh);color:var(--trang);font-weight:700} .buoi{display:flex;align-items:center;gap:5px;width:100%;border:0;background:transparent; padding:2px 4px;border-radius:5px;cursor:pointer;text-align:left;font:inherit;font-size:.82rem; color:var(--chu);overflow:hidden;white-space:nowrap} .buoi:hover{background:var(--vien)} .buoi .cham{width:7px;height:7px;border-radius:99px;background:var(--mau-sk,var(--chinh));flex-shrink:0} .buoi .gio{color:var(--chu-mo);font-size:.76rem;flex-shrink:0} .buoi .ten{overflow:hidden;text-overflow:ellipsis} .buoi.che .ten{font-style:italic;color:var(--chu-mo)} .them-nua{display:block;font-size:.76rem;color:var(--chu-mo);padding:1px 4px} /* ---- lưới giờ (tuần / ngày) ---- */ .lich-gio{border:1px solid var(--vien);border-radius:var(--r);background:var(--trang);overflow:hidden} .lich-gio .dau-cot{display:grid;grid-template-columns:58px repeat(auto-fit,minmax(0,1fr)); border-bottom:1px solid var(--vien);background:var(--nen-2)} .lich-gio .dau-ngay{padding:7px 4px;text-align:center;border-left:1px solid var(--vien)} .lich-gio .dau-ngay .thu{display:block;font-size:.74rem;color:var(--chu-mo)} .lich-gio .dau-ngay .so{font-size:1rem;font-weight:600;color:var(--chu)} .lich-gio .than-gio{display:grid;grid-template-columns:58px repeat(auto-fit,minmax(0,1fr)); max-height:calc(100vh - 230px);overflow-y:auto} .lich-gio .cot-gio .vach{height:var(--cao-gio);position:relative} .lich-gio .cot-gio span{position:absolute;top:-8px;right:7px;font-size:.72rem;color:var(--chu-mo)} .lich-gio .cot-ngay{position:relative;border-left:1px solid var(--vien)} .lich-gio .o-gio{height:var(--cao-gio);border-top:1px solid var(--vien);cursor:pointer} .lich-gio .o-gio:hover{background:var(--nen-2)} .buoi-gio{position:absolute;left:3px;right:3px;border:0;border-radius:6px;cursor:pointer; padding:3px 6px;overflow:hidden;text-align:left;font:inherit;font-size:.8rem;line-height:1.25; background:var(--mau-sk,var(--chinh));color:#fff;box-shadow:0 1px 2px rgba(16,32,52,.18)} .buoi-gio .ten{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .buoi-gio .gio{display:block;font-size:.72rem;opacity:.92} .buoi-gio.che{background:var(--vien-dam);color:var(--chu)} /* ---- danh sách lịch ở cột trái ---- */ .ds-lich{padding:2px 10px 6px} .ds-lich .mot-lich{display:flex;align-items:center;gap:8px;padding:5px 4px;cursor:pointer; font-size:.88rem;margin:0} .ds-lich .mot-lich:hover{background:var(--nen-2);border-radius:6px} .ds-lich .cham-lich{width:11px;height:11px;border-radius:3px;flex-shrink:0} .ds-lich .chu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---- hộp thêm / sửa sự kiện ---- */ .lop-phu .hop.hop-sk{max-width:640px} .hop-sk .hang{margin-bottom:12px} .hop-sk .hang.doi{display:grid;grid-template-columns:1fr 1fr;gap:12px} .hop-sk .hang.tich{display:flex;gap:18px} .hop-sk .hang.tich label{display:flex;align-items:center;gap:7px;margin:0;font-weight:400} .hop-sk label{display:block;font-size:.82rem;color:var(--chu-mo);margin-bottom:4px} .hop-sk input[type=text],.hop-sk input[type=date],.hop-sk input[type=time], .hop-sk select,.hop-sk textarea{width:100%} .hop-sk .ngay-gio{display:flex;gap:8px;align-items:center} .hop-sk .khoi-lap{background:var(--nen-2);border:1px solid var(--vien);border-radius:var(--r); padding:11px 12px;display:flex;flex-direction:column;gap:9px} .hop-sk .thu-tuan{display:flex;flex-wrap:wrap;gap:8px} .hop-sk .o-thu-chon{display:flex;align-items:center;gap:5px;margin:0;font-size:.82rem;color:var(--chu)} @media (max-width:820px){ .lich-luoi .o-ngay{min-height:76px} .hop-sk .hang.doi{grid-template-columns:1fr} .lich-tren{gap:8px} } /* ========================================================================== 03/10/2026 — ÔNG CHỦ CHỐT LẠI THANH ĐẦU [ phân hệ khác ] [ ngôn ngữ một chữ ] [ tên người dùng ] · sáng/tối xuống đáy cột trái ========================================================================== */ /* ---- nút ô vuông mở danh sách phân hệ (ông chủ chốt 03/10, lần hai) ---- */ .nut-phan-he{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px; background:none;border:1px solid transparent;border-radius:8px;cursor:pointer;color:var(--chu-mo)} .nut-phan-he:hover,.nut-phan-he[aria-expanded="true"]{background:var(--nen-2);border-color:var(--vien);color:var(--chinh-dam)} .nut-phan-he svg{display:block} .menu-phan-he{right:0;left:auto;width:300px;padding:10px} .menu-phan-he .tieu-de-menu{font-size:.69rem;letter-spacing:.11em;text-transform:uppercase; color:var(--chu-mo);font-weight:600;padding:2px 6px 8px} .luoi-phan-he{display:grid;grid-template-columns:repeat(3,1fr);gap:4px} .luoi-phan-he a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px; border-radius:10px;color:var(--chu);text-decoration:none;font-size:.78rem;text-align:center;line-height:1.25} .luoi-phan-he a:hover{background:var(--nen-2);color:var(--chinh-dam);text-decoration:none} .luoi-phan-he .o-bieu{display:flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:12px;background:var(--nen-2);color:var(--chinh-dam)} .luoi-phan-he a:hover .o-bieu{background:var(--trang);box-shadow:0 1px 3px rgba(12,39,64,.12)} /* v169 (ông chủ: "không thấy crm" trên điện thoại): menu bám mép phải nút ô vuông nên ở màn hẹp tràn ra ngoài mép TRÁI, che mất cột đầu (CRM, Tài chính). Màn ≤ 640px: menu neo theo màn hình (cách hai mép 12px), lưới tự xuống dòng. */ @media (max-width:640px){ .menu-phan-he{position:fixed;left:12px;right:12px;top:62px;width:auto;max-height:calc(100vh - 80px);overflow-y:auto} .luoi-phan-he{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))} } /* ---- ngôn ngữ: hiện MỘT chữ, bấm ra lựa chọn ---- */ .nut-nn{display:inline-flex;align-items:center;gap:5px;background:var(--trang);cursor:pointer; border:1px solid var(--vien);border-radius:8px;padding:5px 10px;font:inherit;font-size:.8rem; font-weight:700;color:var(--chinh-dam);letter-spacing:.03em} .nut-nn:hover{background:var(--nen-2)} .nut-nn .mui-xuong{color:var(--chu-mo);font-size:.68rem;font-weight:400} .menu-nn{right:0;left:auto;min-width:170px} .menu-nn form{margin:0} .menu-nn button{display:flex;align-items:center;gap:9px} .menu-nn button b{display:inline-block;min-width:24px;font-size:.76rem;color:var(--chu-mo)} .menu-nn button.dang{color:var(--chinh-dam);font-weight:600} .menu-nn .dau-dang{margin-left:auto;color:var(--chinh)} /* ---- sáng/tối ở đáy cột trái ---- */ .ben .duoi-chon{margin-top:auto} .ben .khoi-duoi + .duoi-chon{margin-top:12px} /* ========================================================================== 03/10/2026 — VÒNG NÂNG GIAO DIỆN TOÀN BỘ (ông chủ giao). Mỗi luật dưới đây có một màn hình thật làm lý do — đã soi tận mắt trên bản chạy thử localhost. ========================================================================== */ /* ---- Ô chọn hộp thư: gọn, có biểu tượng, mũi tên riêng ---- Trước là ô chọn mặc định của trình duyệt, cao, chữ đậm, còn in địa chỉ hai lần nên bị cắt cụt "anh@ttpjsc.com — anh@tt". */ .ben .chon-hop{width:calc(100% - 12px);height:34px;margin:2px 6px 12px;padding:0 28px 0 33px; font:inherit;font-size:.83rem;font-weight:600;color:var(--chinh-dam);cursor:pointer; border:1px solid var(--vien);border-radius:10px;background-color:var(--nen-2); -webkit-appearance:none;appearance:none;text-overflow:ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8899' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l1.5 2.5h5L16 13h4'/%3E%3Cpath d='M4 13 6.2 5.6A2 2 0 0 1 8.1 4h7.8a2 2 0 0 1 1.9 1.6L20 13v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8899' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat,no-repeat;background-position:10px center,right 9px center;background-size:16px,13px} .ben .chon-hop:hover{border-color:var(--vien-dam)} .ben .chon-hop:focus{outline:none;border-color:var(--chinh);box-shadow:0 0 0 3px rgba(18,57,95,.12)} /* ---- Thư CHƯA ĐỌC phải nổi bật hẳn ---- Trước chỉ khác thư đã đọc một chút độ đậm, nhìn lướt không phân biệt được. */ .bang-thu tbody tr.chua-doc td:first-child{box-shadow:inset 3px 0 0 var(--chinh)} .bang-thu tbody tr.chua-doc .cot-nguoi a, .bang-thu tbody tr.chua-doc .cot-noi-dung > a{font-weight:700;color:var(--chu)} .bang-thu tbody tr:not(.chua-doc) td{font-weight:400} .bang-thu tbody tr:not(.chua-doc) .cot-nguoi a{color:var(--chu-mo)} /* ---- MỌI bảng: tiêu đề cột, nhãn, số tiền, ngày không gãy dòng ---- Đã thấy: "Đang trao đổi" gãy hai dòng, "150.000.000" một dòng còn "đ" rơi xuống dòng dưới, "CẬP NHẬT" và "HẠN MỨC / GIỜ" bẻ đôi ở tiêu đề cột. */ th{white-space:nowrap} td .nhan,.nhan{white-space:nowrap} td.phai,th.phai{white-space:nowrap} td.so,td .so{white-space:nowrap;font-variant-numeric:tabular-nums} /* Ô nhập/ô chọn đặt trong bảng (cổng API, nhóm màu…) từng bị bóp còn vài chữ */ td > input[type=text],td > input:not([type]){min-width:105px;width:100%} td > select{min-width:115px;max-width:100%} td > input[type=number]{min-width:70px} /* ---- Danh sách khách: tên khách và người phụ trách không bị bẻ đôi ---- Sau khi nhãn và số tiền thôi gãy dòng, chỗ chật dồn sang cột tên: "Hoàng Minh / Châu". */ /* v104: tên khách là cột quan trọng nhất — rộng tối thiểu 210px (tên ngắn không bị bẻ đôi); liên lạc không xuống dòng giữa số; "Quan tâm" hẹp lại (tối đa 170px, xuống dòng được) — trước cột này giành chỗ khiến tên khách bị ép thành 2–3 dòng */ .bang-khach .o-ten-kh{min-width:210px} .bang-khach .o-lien-lac{white-space:nowrap} .bang-khach .o-quan-tam{max-width:170px;min-width:110px;white-space:normal} /* ---- Giao diện TỐI: hàng khách mang nhóm màu ---- Màu nhóm là màu pastel người dùng tự chọn, gắn thẳng vào hàng. Sang giao diện tối, chữ đổi sang màu sáng mà nền vẫn pastel sáng ⇒ chữ gần như biến mất (thấy tận mắt 03/10). Phủ lên mỗi ô một lớp nền tối gần đục: màu nhóm vẫn ánh lên đủ để nhận ra, chữ đọc được. Không sửa màu người dùng đã chọn — giao diện sáng vẫn y nguyên. */ :root[data-giao-dien="toi"] .bang-khach tbody tr[style*="background"] > td{background:rgba(18,22,28,.80)} /* ---- Nút tài khoản trên điện thoại: hiện biểu tượng người thay cho tên đã giấu ---- */ .ai-nut .ai-bieu{display:none;color:var(--chinh-dam)} .ai-nut .ai-bieu svg{display:block} @media (max-width:860px){ .ai-nut .ai-bieu{display:inline-flex} } /* ========================================================================== 03/10/2026 — BÁN HÀNG & DỊCH VỤ · KHÁCH HÀNG 360° · NHIỀU NGƯỜI PHỤ TRÁCH ========================================================================== */ /* ---- dải ô số liệu đầu trang (dùng chung: bán hàng, hồ sơ khách, bảng điều khiển) ---- */ .the-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px} .o-so{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--trang); border:1px solid var(--vien);border-radius:10px;color:inherit;text-decoration:none;min-width:0; transition:border-color .15s ease,box-shadow .15s ease} a.o-so:hover{border-color:var(--chinh);box-shadow:0 4px 14px rgba(12,39,64,.08);text-decoration:none} .o-so .nhan-so{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--chu-mo);font-weight:600} .o-so b{font-size:1.32rem;color:var(--chinh-dam);font-variant-numeric:tabular-nums;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .o-so .phu{font-size:.8rem;color:var(--chu-mo)} .o-so.canh-bao{border-left:3px solid #C8922F} .xanh-chu{color:#1E6B3E !important} .do-chu{color:#A33636 !important} :root[data-giao-dien="toi"] .xanh-chu{color:#9ADCB4 !important} :root[data-giao-dien="toi"] .do-chu{color:#F0A8A8 !important} /* ---- nhãn ba nhóm bán ---- */ .loai-ban{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:1px 7px;border-radius:5px;margin-bottom:3px} .loai-san_pham{background:#E9F0F8;color:#1B4C7D} .loai-dich_vu{background:#FBEFE6;color:#8A4B16} .loai-co_han{background:#E8F3EC;color:#1E5233} :root[data-giao-dien="toi"] .loai-san_pham{background:#16263A;color:#9EC6EE} :root[data-giao-dien="toi"] .loai-dich_vu{background:#32241A;color:#EBB98C} :root[data-giao-dien="toi"] .loai-co_han{background:#14301F;color:#9ADCB4} /* ---- bảng bán hàng ---- */ .cum-thao-tac{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:nowrap} .cum-thao-tac form{margin:0} tr.dong-huy td{opacity:.55} tr.dong-huy td:first-child{text-decoration:line-through} .bang-ban tfoot td,.o.mong tfoot td{background:var(--nen-2);border-top:1px solid var(--vien)} .bang-gon td{padding:10px 8px;vertical-align:top} .bang-gon tr:first-child td{border-top:none} /* ---- popup bán hàng ---- */ .lop-phu .hop.hop-rong{max-width:820px} .lop-phu .hop.hop-rat-rong{max-width:1040px} .o-tinh{padding:10px 12px;border:1px dashed var(--vien-dam);border-radius:8px;background:var(--nen-2); font-weight:700;color:var(--chinh-dam);font-variant-numeric:tabular-nums} .nut-chu{background:none;border:none;padding:4px 0 0;color:var(--chinh);font:inherit;font-size:.8rem; font-weight:600;cursor:pointer} .nut-chu:hover{text-decoration:underline} [data-chi][hidden]{display:none !important} /* ---- KHUNG HỒ SƠ KHÁCH DÙNG CHUNG: dạng XEM và dạng SỬA trên cùng một bố cục ---- */ .dau-the{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} .dau-the h2{margin:0} .form-khach .gia-tri{padding:7px 0 2px;min-height:34px;color:var(--chu);word-break:break-word} .form-khach .giu-dong{white-space:pre-wrap} .form-khach.dang-xem .o-sua{display:none !important} .form-khach.dang-sua .gia-tri{display:none !important} .form-khach.dang-xem .thanh-luu{display:none} .form-khach.dang-xem .truong{margin-bottom:10px} .form-khach.dang-xem .truong > label{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase; color:var(--chu-mo);font-weight:600;margin-bottom:0} .thanh-luu{display:flex;justify-content:flex-end;gap:9px;padding:12px 0 4px;position:sticky;bottom:0; background:linear-gradient(transparent,var(--nen) 30%)} .hop .thanh-luu{background:none;padding-top:4px} /* ---- người phụ trách: chip ở dạng xem, danh sách tích ở dạng sửa ---- */ .chip-nguoi{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;margin:0 6px 6px 0;border-radius:99px; background:var(--nen-2);border:1px solid var(--vien);font-size:.86rem} .chip-nguoi small{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--chu-mo);font-weight:700} .chip-nguoi.chinh{background:#E9F0F8;border-color:#C2D4E8;color:#1B4C7D;font-weight:600} .chip-nguoi.chinh small{color:#1B4C7D} :root[data-giao-dien="toi"] .chip-nguoi.chinh{background:#16263A;border-color:#2F4D6E;color:#9EC6EE} .ds-phu-trach{border:1px solid var(--vien);border-radius:9px;padding:6px 10px;max-height:240px;overflow:auto; background:var(--trang)} .dong-phu-trach{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0; border-bottom:1px dashed var(--vien)} .dong-phu-trach:last-of-type{border-bottom:none} .dong-phu-trach label{display:flex;align-items:center;gap:7px;margin:0;font-weight:500;cursor:pointer} .chon-chinh{font-size:.78rem;color:var(--chu-mo);font-weight:600 !important;white-space:nowrap} .chon-chinh.khoa{opacity:.55;cursor:not-allowed} /* bảng bán hàng 8 cột: giữ tên khách một dòng, gom bớt khoảng trống */ .bang-ban td,.bang-ban th{padding-left:10px;padding-right:10px} .bang-ban td:first-child{min-width:150px} .bang-ban td:first-child strong{white-space:nowrap} .bang-ban td:nth-child(2){min-width:170px} /* đang sửa thì nút "Sửa" không còn nghĩa — giấu đi */ .form-khach.dang-sua [data-bat-sua]{display:none} /* ===== CRM vòng 2-4 (03/10/2026): việc tiếp theo · phễu · danh sách việc ===== */ .nhan-han{display:inline-block;padding:1px 8px;border-radius:10px;font-size:.74rem;font-weight:600;white-space:nowrap; background:var(--nen-2);color:var(--chu-mo)} .nhan-han.qua{background:#FBE3E3;color:#A33636} .nhan-han.nay{background:#FFF1D6;color:#8A5A00} .nhan-han.sap{background:#E3F0FB;color:#1F5C8F} :root[data-giao-dien="toi"] .nhan-han.qua{background:#4A2323;color:#F0A8A8} :root[data-giao-dien="toi"] .nhan-han.nay{background:#45381B;color:#F2D08A} :root[data-giao-dien="toi"] .nhan-han.sap{background:#1E3448;color:#A8CDEB} .o-viec-tiep{max-width:220px} .cat-dong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px} .the-viec-tiep{scroll-margin-top:84px} .the-viec-tiep.den-han{border-left:3px solid #C8922F} .viec-hien{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center} .viec-hien > div{flex-basis:100%;font-size:.95rem} .hang-hen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px} .hang-hen input[type=date]{width:auto;flex:0 0 auto} .hang-hen input[type=text]{flex:1 1 180px;min-width:0} .the-viec-tiep details summary{cursor:pointer;color:var(--chinh);margin-top:6px} .pheu{display:flex;flex-direction:column;gap:10px;margin-top:6px} .tang-pheu{display:grid;grid-template-columns:120px 1fr 110px;gap:10px;align-items:center;color:inherit;text-decoration:none} .tang-pheu:hover{text-decoration:none} .tang-pheu:hover .ten-tang{color:var(--chinh)} .tang-pheu .ten-tang{font-size:.88rem} .tang-pheu .thanh{height:22px;background:var(--nen-2);border-radius:6px;overflow:hidden} .tang-pheu .thanh i{display:block;height:100%;border-radius:6px;background:var(--chinh)} .tang-pheu .thanh i.buoc-0{opacity:.4} .tang-pheu .thanh i.buoc-1{opacity:.6} .tang-pheu .thanh i.buoc-2{opacity:.8} .tang-pheu .thanh i.buoc-3{background:#2E8B57} .tang-pheu .so-tang{text-align:right;font-variant-numeric:tabular-nums;line-height:1.15} .tang-pheu .so-tang small{display:block;color:var(--chu-mo);font-size:.74rem} .chan-pheu{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:10px; border-top:1px solid var(--vien);font-size:.88rem;font-weight:600} .chip-phu{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .chip-phu a{font-size:.8rem;padding:3px 10px;border-radius:12px;background:var(--nen-2);color:var(--chu-mo)} .ds-viec{list-style:none;margin:0;padding:0} .ds-viec li{padding:9px 0;border-bottom:1px solid var(--vien)} .ds-viec li:last-child{border-bottom:none} .ds-viec li .nhan-han{margin-right:6px} @media (max-width:640px){ .tang-pheu{grid-template-columns:92px 1fr 84px} } /* ===== CRM vòng 5 (03/10/2026): báo cáo bán hàng ===== */ .bieu-do-cot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:end;height:220px;padding-top:6px} .cot-thang{display:flex;flex-direction:column;align-items:center;height:100%;min-width:0} .cot-thang .gia-tri-cot{font-size:.7rem;color:var(--chu-mo);height:16px;white-space:nowrap;font-variant-numeric:tabular-nums} .cot-thang .ong{flex:1;width:100%;max-width:46px;display:flex;align-items:flex-end;border-bottom:1px solid var(--vien)} .cot-thang .phan-ban{width:100%;background:rgba(18,57,95,.22);border-radius:5px 5px 0 0;display:flex;align-items:flex-end;overflow:hidden} .cot-thang .phan-thu{width:100%;background:var(--chinh)} .cot-thang .nhan-thang{font-size:.74rem;color:var(--chu-mo);margin-top:5px} .cot-thang:hover .phan-ban{background:rgba(18,57,95,.32)} :root[data-giao-dien="toi"] .cot-thang .phan-ban{background:rgba(160,195,230,.22)} .chu-giai{display:inline-flex;align-items:center;gap:6px;font-weight:400} .o-mau{display:inline-block;width:11px;height:11px;border-radius:3px;margin-left:8px} .o-mau.ban{background:rgba(18,57,95,.22)} .o-mau.thu{background:var(--chinh)} .thanh-ty-le{height:4px;background:var(--nen-2);border-radius:3px;margin-top:4px;overflow:hidden} .thanh-ty-le i{display:block;height:100%;background:var(--chinh);margin-left:auto} .cham-mau{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle} .ds-top{margin:0;padding-left:22px} .ds-top li{padding:7px 0;border-bottom:1px solid var(--vien);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px} .ds-top li:last-child{border-bottom:none} .ds-top .so-top{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums} @media (max-width:640px){ .bieu-do-cot{gap:3px;height:180px} .cot-thang .gia-tri-cot{font-size:.6rem} } /* ===== CRM đợt 1 (03/10/2026): chi tiết lần bán, mốc việc, báo cáo khách, cổng khách ===== */ .bang-thong-tin th{width:34%;font-weight:500;color:var(--chu-mo);text-align:left;vertical-align:top;padding-right:12px} .bang-thong-tin td,.bang-thong-tin th{padding:7px 0;border-bottom:1px solid var(--vien)} /* v247: điện thoại — nhãn TRÊN giá trị (hàng nút yêu cầu gia hạn, ô chọn người phụ trách… không đẩy bảng tràn khỏi hộp) */ @media (max-width:640px){.bang-thong-tin th,.bang-thong-tin td{display:block;width:auto}.bang-thong-tin th{border-bottom:0;padding-bottom:0}} .ds-moc{list-style:none;margin:0 0 10px;padding:0} .ds-moc li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--vien)} .ds-moc li:last-child{border-bottom:none} .ds-moc .noi-moc{flex:1;min-width:0} .ds-moc li.xong strong{text-decoration:line-through;color:var(--chu-mo)} .o-tick{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--chu-mo);background:var(--trang); color:#fff;font-size:.8rem;line-height:1;cursor:pointer;padding:0;flex-shrink:0;margin-top:1px} .ds-moc li.xong .o-tick{background:#2E8B57;border-color:#2E8B57} .the-bao-cao{border:1px solid var(--vien);border-radius:8px;padding:9px 12px;margin-bottom:8px;background:var(--trang)} .the-bao-cao summary{cursor:pointer} .the-thanh-toan{border-left:3px solid #C8922F} .hang-thanh-toan{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--vien)} .hang-thanh-toan:last-of-type{border-bottom:none} .hang-thanh-toan > div{flex:1 1 280px;min-width:0} .anh-qr{width:220px;height:auto;border-radius:10px;border:1px solid var(--vien);background:#fff} @media (max-width:640px){ .anh-qr{width:180px} } /* ===== Tài chính (đợt 2, 03/10/2026): giấy in phiếu / hoá đơn / đối chiếu, biểu đồ thu–chi ===== */ .giay-in{background:var(--trang);border:1px solid var(--vien);border-radius:10px;padding:26px 30px;max-width:860px} .dau-giay{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--vien);padding-bottom:12px} .ten-giay{text-align:center;letter-spacing:.06em;text-transform:uppercase;margin:18px 0 14px;font-size:1.25rem} .bang-giay{width:100%;border-collapse:collapse} .bang-giay th,.bang-giay td{padding:7px 8px;border-bottom:1px solid var(--vien);vertical-align:top} .bang-giay tbody th{width:28%;text-align:left;font-weight:500;color:var(--chu-mo)} .bang-giay tfoot td{border-bottom:none} .ky-ten{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:34px;text-align:center} .ky-ten > div{display:flex;flex-direction:column;gap:56px} .bieu-do-cot.doi .ong.doi{gap:3px;justify-content:center;border-bottom:1px solid var(--vien)} .ong.doi .cot-thu,.ong.doi .cot-chi{width:42%;border-radius:4px 4px 0 0;align-self:flex-end} .ong.doi .cot-thu{background:#2E8B57} .ong.doi .cot-chi{background:#C0504D} .o-mau.chi{background:#C0504D} .chu-giai .o-mau.thu{background:#2E8B57} @media print { header.tren-cung, nav.ben, .man-che, .khong-in, .bao, .chinh > .tren { display:none !important } .vo, .chinh { display:block !important; margin:0 !important; padding:0 !important; max-width:none !important } body { background:#fff !important; color:#000 !important } .giay-in { border:none; border-radius:0; padding:0; max-width:none } a.khong-in-lien-ket { color:inherit; text-decoration:none } } /* ===== CRM đợt 3 (03/10/2026): báo giá nhiều dòng, hợp đồng, trang khách mở từ link ===== */ .bang-dong-bg td{padding:6px 6px;vertical-align:middle} .bang-dong-bg input,.bang-dong-bg select{width:100%;min-width:0} .the-buoc{border-left:3px solid var(--chinh)} .the-buoc .cung-dong{flex-wrap:wrap} .noi-dung-hd{white-space:pre-line;line-height:1.65;font-size:.98rem} body.trang-khach-xem{background:var(--nen);padding:28px 16px 60px} .khung-xem{max-width:880px;margin:0 auto} .khung-xem .giay-in{max-width:none} @media (max-width:640px){ body.trang-khach-xem{padding:12px 8px 40px} .khung-xem .giay-in{padding:16px} } @media print { body.trang-khach-xem{padding:0;background:#fff} } /* ===== CRM đợt 4 (03/10/2026): lịch thuê tài sản ===== */ .lich-thue{border-collapse:collapse;font-size:.76rem;width:auto} .lich-thue th,.lich-thue td{padding:0;border:1px solid var(--vien);text-align:center;min-width:24px;height:32px} .lich-thue thead th{font-weight:500;color:var(--chu-mo);padding:4px 0} .lich-thue .cot-ts{position:sticky;left:0;background:var(--trang);text-align:left;padding:4px 10px;min-width:160px;z-index:1} .lich-thue .hom-nay{box-shadow:inset 0 0 0 2px rgba(200,146,47,.6)} .o-thue{display:block;width:100%;height:100%;min-height:30px} .o-thue.dat_truoc{background:rgba(31,92,143,.38)} .o-thue.dang_thue{background:#2E8B57} .o-thue.da_tra{background:#9AA5B1;opacity:.45} .o-thue.qua-han{background:#C0504D} .o-thue.khoa{background:repeating-linear-gradient(45deg,var(--nen-2),var(--nen-2) 4px,transparent 4px,transparent 8px)} .o-thue.o-trong:hover{background:rgba(31,92,143,.12)} .o-mau.dat{background:rgba(31,92,143,.38)} .o-mau.thue{background:#2E8B57} .o-mau.qua{background:#C0504D} .o-mau.tra{background:#9AA5B1} /* ===== Khách QUAN TÂM nhiều danh mục dịch vụ (03/10/2026): ô tích dạng viên thuốc ===== */ .ds-quan-tam{border:1px solid var(--vien);border-radius:9px;padding:8px 10px;background:var(--trang);max-height:260px;overflow:auto} .nhom-quan-tam{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--chu-mo);font-weight:700;margin:6px 0 4px} .nhom-quan-tam:first-of-type{margin-top:0} .cac-quan-tam{display:flex;flex-wrap:wrap;gap:6px} .chon-quan-tam{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 11px;border:1px solid var(--vien); border-radius:99px;font-weight:500;font-size:.86rem;cursor:pointer;background:var(--nen-2);user-select:none} .chon-quan-tam input{margin:0;accent-color:#1B4C7D} .chon-quan-tam:has(input:checked){background:#E9F0F8;border-color:#C2D4E8;color:#1B4C7D;font-weight:600} :root[data-giao-dien="toi"] .chon-quan-tam:has(input:checked){background:#16263A;border-color:#2F4D6E;color:#9EC6EE} /* ===== Khung cuộn ngang (03/10/2026, ông chủ: "cho scroll trong phạm vi giao diện") ===== Bảng rộng hơn màn hình (lịch thuê 31 ngày, bảng báo cáo, công nợ…) cuộn NGANG ngay trong khung của nó — trước đây lớp này chưa có luật nên bảng tràn ra, kéo giãn cả trang trên điện thoại. */ .cuon-ngang{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .o{min-width:0} .lich-thue .cot-ts{box-shadow:1px 0 0 var(--vien)} @media (max-width:640px){ .lich-thue .cot-ts{min-width:118px;max-width:150px;white-space:normal} } /* chuỗi dài không có chỗ ngắt (vân tay hợp đồng, mã) tự xuống dòng thay vì đẩy tràn trang */ .chinh code,.khung-xem code{overflow-wrap:anywhere;word-break:break-all} .noi-dung-hd{overflow-x:auto;max-width:100%} /* ===== HỢP ĐỒNG KIỂU WORD + KÝ BẰNG CÁCH VẼ (03/10/2026) ===== */ .noi-dung-hd.dang-html{white-space:normal;font-family:"Times New Roman",Times,serif;font-size:13pt;line-height:1.5} .noi-dung-hd.dang-html p{margin:0 0 6pt} .noi-dung-hd.dang-html h1{font-size:16pt;margin:6pt 0} .noi-dung-hd.dang-html h2{font-size:15pt;margin:6pt 0} .noi-dung-hd.dang-html h3{font-size:13.5pt;margin:6pt 0} .noi-dung-hd.dang-html h1,.noi-dung-hd.dang-html h2,.noi-dung-hd.dang-html h3,.noi-dung-hd.dang-html h4{color:inherit} .noi-dung-hd.dang-html ul,.noi-dung-hd.dang-html ol{margin:0 0 6pt 24px;padding:0} .noi-dung-hd.dang-html table{border-collapse:collapse;width:100%;margin:4pt 0 8pt} .noi-dung-hd.dang-html td,.noi-dung-hd.dang-html th{border:1px solid #8A8F96;padding:4px 7px;vertical-align:top} .noi-dung-hd.dang-html th{background:rgba(0,0,0,.04)} .noi-dung-hd.dang-html table.bang-ky td,.noi-dung-hd.dang-html table.khong-vien td, .noi-dung-hd.dang-html table.bang-ky th,.noi-dung-hd.dang-html table.khong-vien th{border:none} .trang-a4 table.bang-ky td,.trang-a4 table.khong-vien td{outline:1px dashed #D5DAE0} .ma-truong{background:#FFF3D6;border:1px solid #E7C873;border-radius:4px;padding:0 3px;font-family:ui-monospace,Consolas,monospace; font-size:.8em;color:#7A5300;white-space:nowrap} .o-chu-ky{display:inline-flex;flex-direction:column;align-items:center;min-width:180px;gap:1px;margin-top:2px;vertical-align:top} .o-chu-ky img{width:200px;max-width:100%;height:auto} .o-chu-ky .cho-ky{display:block;width:180px;height:84px} .o-chu-ky.trong .cho-ky{border-bottom:1px dotted #9AA0A6} .o-chu-ky .cho-ky.da-ky{height:auto;font-size:22pt;color:#2E8B57} .o-chu-ky .ten-ky{font-size:12pt} .o-chu-ky .chuc-ky{font-size:11pt} .o-chu-ky .luc-ky{font:8.5pt Arial,sans-serif;color:#6B7280} /* trình soạn */ .thanh-soan{position:sticky;top:var(--cao-tren);z-index:6;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--trang); border:1px solid var(--vien);border-radius:10px;padding:6px 8px;margin-bottom:10px} .thanh-soan .nhom-nut{display:inline-flex;border:1px solid var(--vien);border-radius:7px;overflow:hidden} .thanh-soan .nhom-nut button{border:none;background:var(--trang);color:var(--chu);min-width:32px;height:30px;cursor:pointer;font-size:.92rem;padding:0 6px} .thanh-soan .nhom-nut button+button{border-left:1px solid var(--vien)} .thanh-soan .nhom-nut button:hover{background:var(--nen-2)} .thanh-soan select{height:32px;width:auto;max-width:200px;padding:0 8px} .thanh-soan .chi-hep{display:none} .ban-soan{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-items:start} .nen-giay{background:#DDE2E7;border-radius:10px;padding:22px 12px;overflow-x:auto} .trang-a4{background:#fff;color:#111;width:210mm;max-width:100%;min-height:297mm;margin:0 auto;padding:20mm 18mm 20mm 25mm; box-shadow:0 2px 14px rgba(0,0,0,.16);outline:none;box-sizing:border-box} .trang-a4[contenteditable=true]:focus{box-shadow:0 0 0 2px rgba(31,92,143,.35),0 2px 14px rgba(0,0,0,.16)} .ds-ma{position:sticky;top:calc(var(--cao-tren) + 58px);background:var(--trang);border:1px solid var(--vien);border-radius:10px;padding:12px; max-height:calc(100vh - 150px);overflow:auto} .ds-ma h3{margin-bottom:4px} .ds-ma ul{list-style:none;padding:0;margin:10px 0 0} .ds-ma .ma-nut{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:1px solid var(--vien); border-radius:7px;background:var(--trang);color:var(--chu);padding:5px 8px;margin-bottom:5px;cursor:pointer} .ds-ma .ma-nut:hover{border-color:#C2D4E8;background:var(--nen-2)} .ds-ma .ma-nut code{font-size:.76rem;color:#9A6A00;background:none;padding:0} .ds-ma .ma-nut span{font-size:.8rem;color:var(--chu-mo)} .ds-ma .ma-nut.ma-ky{border-color:#E7C873} @media (max-width:1060px){ .ban-soan{grid-template-columns:minmax(0,1fr)} .ds-ma{display:none} .thanh-soan .chi-hep{display:inline-block} } @media (max-width:640px){ .trang-a4{padding:14px 12px;min-height:0;font-size:12pt} .nen-giay{padding:8px 4px} .thanh-soan{position:static} } /* ô vẽ chữ ký */ .o-ve-ky{margin-top:6px;max-width:520px} .o-ve-ky .nhan-ve{font-weight:600;font-size:.86rem;margin-bottom:4px} .o-ve-ky canvas{display:block;width:100%;height:180px;background:#fff;border:1.5px dashed #9FB3C8;border-radius:10px;touch-action:none;cursor:crosshair} .o-ve-ky.da-ve canvas{border-style:solid;border-color:#1F5C8F} .o-ve-ky.thieu canvas{border-color:#C0504D} .o-ve-ky .ve-ky-duoi{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px} .nhap-word label.nut{cursor:pointer} @media print{ .noi-dung-hd.dang-html{font-size:12.5pt;color:#000} .thanh-soan,.ds-ma{display:none} .nen-giay{background:none;padding:0} .trang-a4{box-shadow:none;width:auto;min-height:0;padding:0} } @media (max-width:640px){ .noi-dung-hd.dang-html{font-size:11.5pt} .o-chu-ky{min-width:130px} .o-chu-ky img{width:150px} } /* ===== TOÀ NHÀ NHIỀU PHÒNG (03/10/2026): lọc tình trạng, sơ đồ phòng, nhóm toà · tầng ===== */ .loc-tt{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .chip-tt{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid var(--vien);border-radius:99px; font-size:.84rem;color:var(--chu);background:var(--trang);text-decoration:none} .chip-tt b{font-weight:700} .chip-tt i{width:10px;height:10px;border-radius:3px;display:inline-block;border:1px solid var(--vien)} .chip-tt.dang{border-color:var(--chinh);box-shadow:inset 0 0 0 1px var(--chinh);font-weight:600} .chip-tt.tt-trong i{background:#fff} .chip-tt.tt-dat_truoc i{background:rgba(31,92,143,.38)} .chip-tt.tt-dang_thue i{background:#2E8B57} .chip-tt.tt-qua_han i{background:#C0504D} .chip-tt.tt-bao_tri i{background:repeating-linear-gradient(45deg,#C9CED4,#C9CED4 3px,#fff 3px,#fff 6px)} .nhom-phong{padding:12px 14px} .dau-nhom-phong{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px} .luoi-phong{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px} .o-phong{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:52px;padding:5px 7px;border-radius:8px; border:1px solid var(--vien);background:var(--trang);color:var(--chu);text-decoration:none;overflow:hidden} .o-phong b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .o-phong span{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85} .o-phong:hover{box-shadow:0 0 0 2px rgba(31,92,143,.35)} .o-phong.tt-trong{border-style:dashed} .o-phong.tt-dang_thue{background:#2E8B57;border-color:#2E8B57;color:#fff} .o-phong.tt-qua_han{background:#C0504D;border-color:#C0504D;color:#fff} .o-phong.tt-dat_truoc{background:rgba(31,92,143,.18);border-color:rgba(31,92,143,.45)} .o-phong.tt-bao_tri{background:repeating-linear-gradient(45deg,var(--nen-2),var(--nen-2) 5px,transparent 5px,transparent 10px)} .lich-thue .hang-nhom td{background:var(--nen-2);height:auto;padding:6px 10px;font-weight:600;font-size:.8rem;text-align:left} .lich-thue .hang-nhom .cot-ts{background:var(--nen-2)} .cac-khu{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px} .the-khu{display:flex;flex-direction:column;gap:3px;border:1px solid var(--vien);border-radius:10px;padding:10px 12px;background:var(--trang)} @media (max-width:640px){ .luoi-phong{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))} .o-phong{min-height:46px;padding:4px 6px} } /* Lịch thuê: mỗi lần thuê một THANH liền có tên khách (03/10/2026) */ .lich-thue td.o-gop{padding:2px 1px} .thanh-thue{display:block;height:28px;line-height:28px;padding:0 7px;border-radius:7px;color:#fff;font-size:.74rem;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;text-align:left} .thanh-thue.dang_thue{background:#2E8B57} .thanh-thue.dat_truoc{background:#5B86B0} .thanh-thue.da_tra{background:#9AA5B1} .thanh-thue.qua-han{background:#C0504D} .thanh-thue.noi-truoc{border-top-left-radius:0;border-bottom-left-radius:0} .thanh-thue.noi-sau{border-top-right-radius:0;border-bottom-right-radius:0} .thanh-thue:hover{filter:brightness(1.08);box-shadow:0 0 0 2px rgba(31,92,143,.35)} /* cột cố định: mọi ngày rộng bằng nhau dù có thanh gộp nhiều ngày; mỗi tài sản một dòng gọn */ .lich-thue{table-layout:fixed;width:calc(170px + var(--so-ngay, 31) * 32px)} .lich-thue .o-thue{height:30px;min-height:0} .lich-thue thead th{width:32px} .lich-thue thead th.cot-ts{width:170px} .lich-thue tbody td.cot-ts{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;padding:4px 10px} .lich-thue tbody td.cot-ts .ten-ts{font-weight:400} .lich-thue td,.lich-thue th{height:32px} @media (max-width:640px){ .lich-thue{width:calc(118px + var(--so-ngay, 31) * 28px)} .lich-thue thead th.cot-ts{width:118px} .lich-thue tbody td.cot-ts{max-width:118px} .lich-thue thead th{width:28px} } .the-khu.tom-tat{text-decoration:none;color:var(--chu)} .the-khu.tom-tat:hover{border-color:#C2D4E8} .thanh-lap{display:block;height:6px;border-radius:99px;background:var(--nen-2);overflow:hidden} .thanh-lap i{display:block;height:100%;background:#2E8B57} /* Gập / mở theo cấp con */ .lich-thue tr.hang-khu,.lich-thue tr.hang-cap{cursor:pointer;user-select:none} .lich-thue tr.hang-khu td.cot-ts{background:#E3EAF2} .lich-thue tr.hang-cap td.cot-ts{background:var(--nen-2);padding-left:20px} .lich-thue tr.hang-khu:hover td.cot-ts,.lich-thue tr.hang-cap:hover td.cot-ts{background:#D9E6F3} .lich-thue td.o-dem{padding:0;text-align:center;font-size:.7rem;font-weight:700;color:#1E5A3A; background:rgba(46,139,87,calc(var(--day, 0) * .75))} .lich-thue tr.hang-khu td.o-dem{border-top:1px solid #C9D5E2} .lich-thue td.o-dem.dam{color:#fff} .mui-gap{display:inline-block;transition:transform .15s;color:var(--chu-mo)} .lich-thue tr.hang-khu:not(.gap) .mui-gap,.lich-thue tr.hang-cap:not(.gap) .mui-gap,details.nhom-phong[open] .mui-gap{transform:rotate(90deg)} details.nhom-phong > summary{list-style:none;cursor:pointer} details.nhom-phong > summary::-webkit-details-marker{display:none} details.nhom-phong:not([open]) .dau-nhom-phong{margin-bottom:0} /* Bảng tài sản cho thuê: tên không bị bóp, cột số / loại / tình trạng một dòng (03/10/2026) */ .bang-tai-san td.cot-ten-ts{min-width:190px} .bang-tai-san td.cot-ten-ts strong{white-space:nowrap} .bang-tai-san td:nth-child(2){min-width:150px} .bang-tai-san td:nth-child(n+3),.bang-tai-san th{white-space:nowrap} .o.mong:has(.bang-tai-san){overflow-x:auto} /* ===== ĐẶT THUÊ (đợt B): các bước bên trái, xem trước dính bên phải ===== */ .dat-thue [hidden]{display:none !important} .dat-thue{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start} .dat-thue-phai{position:sticky;top:calc(var(--cao-tren) + 12px);display:flex;flex-direction:column;gap:10px} .so-buoc{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--chinh);color:#fff; font-size:.8rem;margin-right:4px} .chon-kieu{display:grid;grid-template-columns:1fr 1fr;gap:10px} .the-kieu{display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--vien);border-radius:10px;padding:10px 12px 10px 34px;position:relative;cursor:pointer;margin:0} .the-kieu input{position:absolute;left:11px;top:13px} .the-kieu:has(input:checked){border-color:var(--chinh);background:#F4F8FC} :root[data-giao-dien="toi"] .the-kieu:has(input:checked){background:#16263A} .nut-chon{display:flex;flex-wrap:wrap;gap:6px} .nut-chon label{display:inline-flex;align-items:center;gap:6px;margin:0;border:1px solid var(--vien);border-radius:99px;padding:5px 12px;font-weight:500;cursor:pointer} .nut-chon label:has(input:checked){border-color:var(--chinh);background:#E9F0F8;color:#1B4C7D;font-weight:600} .ds-don-vi{max-height:460px;overflow:auto;border:1px solid var(--vien);border-radius:10px;padding:4px 8px;background:var(--trang)} .nhom-don-vi > summary{list-style:none;cursor:pointer;padding:7px 2px;border-bottom:1px dashed var(--vien)} .nhom-don-vi > summary::-webkit-details-marker{display:none} .nhom-don-vi[open] .mui-gap{transform:rotate(90deg)} .dong-don-vi{display:flex;align-items:center;gap:8px;padding:5px 2px 5px 18px;margin:0;font-weight:400;cursor:pointer;border-bottom:1px solid var(--nen-2)} .dong-don-vi .ten-don-vi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dong-don-vi .gia-don-vi{width:130px;flex:none;padding:4px 8px;font-size:.84rem} .dong-don-vi:has(input[type=checkbox]:checked){background:#F4F8FC} :root[data-giao-dien="toi"] .dong-don-vi:has(input[type=checkbox]:checked){background:#16263A} .xem-truoc-thue h2{margin-bottom:8px} .tong-xem-truoc{margin-top:8px;padding-top:8px;border-top:1px solid var(--vien);font-size:1rem} .nut.nut-lon{width:100%;padding:12px;font-size:1rem} .ds-viec-thue{list-style:none;padding:0;margin:0} .ds-viec-thue li{padding:6px 0;border-bottom:1px dashed var(--vien)} .ds-viec-thue li:last-child{border-bottom:none} .ds-gon{padding-left:18px;margin:0} .ds-gon li{margin:3px 0} tr.dong-sap-toi td{background:var(--nen-2)} @media (max-width:900px){ .dat-thue{grid-template-columns:minmax(0,1fr)} .dat-thue-phai{position:static} .chon-kieu{grid-template-columns:1fr} } /* Menu của tôi */ .ds-xep-menu{list-style:none;padding:0;margin:0;counter-reset:mn} .ds-xep-menu li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--vien);border-radius:10px; padding:9px 12px;margin-bottom:8px;background:var(--trang);counter-increment:mn} .ds-xep-menu li .ten-nhom-menu::before{content:counter(mn) ". ";color:var(--chu-mo)} .ds-xep-menu li .ten-nhom-menu{font-weight:600} /* ===== KHÁCH SẠN (v81, 03/10/2026): lễ tân · lịch theo giờ · buồng phòng · bảng giá ===== */ .chon-ks{margin:0 0 14px} .trong-ks{text-align:center;padding:26px 12px} .trong-ks h2{margin:0 0 6px} .the-so-ks{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} .cham-ks{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;border:1px solid var(--vien-dam);vertical-align:-1px} .cham-ks.tt-trong{background:var(--trang);border-style:dashed} .cham-ks.tt-sap_den{background:rgba(31,92,143,.38)} .cham-ks.tt-co_khach{background:#2E8B57;border-color:#2E8B57} .cham-ks.tt-qua_gio{background:#C0504D;border-color:#C0504D} .cham-ks.tt-cho_don{background:#E0A43A;border-color:#E0A43A} .cham-ks.tt-dang_don{background:repeating-linear-gradient(45deg,#E0A43A,#E0A43A 3px,transparent 3px,transparent 6px)} .cham-ks.tt-bao_tri{background:repeating-linear-gradient(45deg,#C9CED4,#C9CED4 3px,transparent 3px,transparent 6px)} .ds-ks li{display:flex;align-items:center;justify-content:space-between;gap:10px} .ds-ks li form{flex-shrink:0;margin:0} .nhom-phong-ks{padding:12px 14px} button.o-phong{font:inherit;text-align:left;cursor:pointer;width:100%} .luoi-ks{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))} .luoi-ks .o-phong{min-height:62px} .o-phong .gio-ks{font-weight:600;opacity:1} .o-phong.tt-sap_den{background:rgba(31,92,143,.16);border-color:rgba(31,92,143,.5)} .o-phong.tt-co_khach{background:#2E8B57;border-color:#2E8B57;color:#fff} .o-phong.tt-qua_gio{background:#C0504D;border-color:#C0504D;color:#fff} .o-phong.tt-cho_don{background:rgba(224,164,58,.18);border-color:#E0A43A} .ks-tt{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0} .ks-tt dt{color:var(--chu-mo);font-size:.86rem} .ks-tt dd{margin:0;font-weight:600} .nhan.tt-ks-trong{background:var(--nen-2)} .nhan.tt-ks-sap_den{background:rgba(31,92,143,.16);border-color:rgba(31,92,143,.4)} .nhan.tt-ks-co_khach{background:#2E8B57;border-color:#2E8B57;color:#fff} .nhan.tt-ks-qua_gio{background:#C0504D;border-color:#C0504D;color:#fff} .nhan.tt-ks-cho_don{background:rgba(224,164,58,.2);border-color:#E0A43A} .nut-chon label{display:inline-flex;align-items:center;gap:6px;margin-right:12px;font-weight:500} /* Lịch theo giờ: hàng = phòng, 24 cột giờ vẽ bằng nền; thanh lượt khách định vị theo % ngày */ .dieu-huong-ngay{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dieu-huong-ngay form{margin:0} .lich-gio{min-width:calc(120px + 24 * 38px)} .hang-gio{display:flex;border-bottom:1px solid var(--vien)} .ten-gio{flex:0 0 120px;padding:5px 8px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--vien); position:sticky;left:0;background:var(--trang);z-index:2;min-height:36px} .ten-gio b{font-size:.86rem} .ten-gio small{font-size:.7rem;color:var(--chu-mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dai-gio{position:relative;flex:1;min-height:36px;cursor:copy; background-image:repeating-linear-gradient(to right,var(--vien) 0 1px,transparent 1px calc(100% / 24))} .dai-gio.bao-tri{cursor:not-allowed;background-color:var(--nen-2)} .dau-gio .ten-gio{font-weight:600;font-size:.78rem;color:var(--chu-mo)} .dau-gio .dai-gio{cursor:default;background-image:none} .dau-gio .dai-gio span{position:absolute;top:50%;transform:translate(3px,-50%);font-size:.72rem;color:var(--chu-mo)} .nhom-gio{padding:6px 10px;background:var(--nen-2);font-weight:600;font-size:.8rem;border-bottom:1px solid var(--vien);position:sticky;left:0} .vach-nay{position:absolute;top:0;bottom:0;width:2px;background:#C0504D;z-index:1;pointer-events:none} .thanh-gio{position:absolute;top:4px;bottom:4px;border-radius:6px;padding:0 6px;display:flex;align-items:center;overflow:hidden; font-size:.72rem;text-decoration:none;color:var(--chu);border:1px solid transparent;z-index:1;min-width:6px} .thanh-gio span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .thanh-gio.cat-trai{border-top-left-radius:0;border-bottom-left-radius:0} .thanh-gio.cat-phai{border-top-right-radius:0;border-bottom-right-radius:0} .thanh-gio.tt-dat_truoc,.thanh-mau.tt-dat_truoc{background:rgba(31,92,143,.2);border-color:rgba(31,92,143,.5)} .thanh-gio.tt-dang_thue,.thanh-mau.tt-dang_thue{background:#2E8B57;color:#fff} .thanh-gio.tt-qua_gio,.thanh-mau.tt-qua_gio{background:#C0504D;color:#fff} .thanh-gio.tt-da_tra,.thanh-mau.tt-da_tra{background:var(--nen-2);border-color:var(--vien-dam);color:var(--chu-mo)} .chip-tt i.thanh-mau{width:18px;border-radius:4px} /* Buồng phòng */ .ba-cot-ks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start} .the-buong{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--vien)} .the-buong form{margin:0} @media (max-width:900px){ .ba-cot-ks{grid-template-columns:1fr} } /* Bảng giá phòng */ .hang-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px} @media (max-width:640px){ .hang-4{grid-template-columns:1fr 1fr} } .bang-hang-phong td,.bang-hang-phong th{vertical-align:top} .bang-hang-phong{min-width:880px} .bang-hang-phong td:first-child{min-width:150px} .bang-hang-phong td:nth-child(2){min-width:220px} .bang-hang-phong .cung-dong{flex-wrap:nowrap} .bang-hang-phong form{margin:0} .tang-gan{border-top:1px solid var(--vien);padding:10px 0} .dau-tang-gan{justify-content:space-between;margin-bottom:8px} .dau-tang-gan label{display:inline-flex;align-items:center;gap:6px;font-weight:500} .luoi-gan{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px} .o-gan{display:flex;align-items:center;gap:6px;border:1px solid var(--vien);border-radius:8px;padding:4px 6px;font-weight:500} .o-gan b{flex:0 0 auto;font-size:.84rem} .o-gan select{flex:1;min-width:0;padding:4px 6px} /* Menu CRM: ẩn / hiện nhóm, mục trong nhóm */ .ds-xep-menu li.nhom-an{opacity:.55} .ds-xep-menu li.nhom-an .ten-nhom-menu{text-decoration:line-through} .hien-nhom{display:inline-flex;align-items:center;gap:4px;font-weight:500;margin-right:4px} .ds-xep-cty > li{display:block} .ds-xep-cty .dau-xep{display:flex;align-items:center;justify-content:space-between;gap:10px} .ds-xep-muc{list-style:none;margin:8px 0 0;padding:0 0 0 14px;border-left:2px solid var(--vien)} .ds-xep-muc li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;border:0;border-top:1px dashed var(--vien); border-radius:0;margin:0;background:transparent;counter-increment:none} .ds-xep-muc li:first-child{border-top:0} .ds-xep-muc li.nhom-an > span:first-child{text-decoration:line-through;opacity:.6} .bieu-muc{display:inline-flex;vertical-align:-2px;color:var(--chu-mo)} .ds-co-dinh{padding:6px 12px;border:1px dashed var(--vien);border-radius:10px;margin:8px 0} /* ===== CƠ HỘI BÁN HÀNG · NGƯỜI LIÊN HỆ · MÃ SỐ THUẾ (v82, 03/10/2026) ===== */ .bang-ch{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr)) repeat(2,minmax(130px,.55fr));gap:10px;align-items:start;min-width:1180px} .cot-ch{background:var(--nen-2);border:1px solid var(--vien);border-radius:12px;padding:8px;min-height:180px;transition:box-shadow .12s} .cot-ch.tha-vao{box-shadow:0 0 0 2px var(--chinh) inset;background:rgba(31,92,143,.07)} .dau-cot-ch{padding:2px 4px 8px} .dau-cot-ch b{margin-left:4px} .ds-the-ch{display:flex;flex-direction:column;gap:7px} .trong-cot{padding:8px 4px;margin:0} .the-ch{background:var(--trang);border:1px solid var(--vien);border-radius:10px;padding:8px 10px;cursor:grab;display:flex;flex-direction:column;gap:3px} .the-ch:hover{box-shadow:0 1px 6px rgba(12,39,64,.12)} .the-ch.dang-keo{opacity:.45} .the-ch.tre{border-left:3px solid #C0504D} .the-ch .ten-ch{font-weight:600;color:var(--chu);text-decoration:none;line-height:1.3} .the-ch .khach-ch{text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .the-ch .so-ch{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .the-ch .chan-ch{display:flex;align-items:center;gap:6px;justify-content:space-between} .nut-tien-ch{margin:0} .nut-tien-ch .nut{padding:1px 8px;line-height:1.4} .cot-chot{min-height:140px;border-style:dashed} .chot-thang.tha-vao{box-shadow:0 0 0 2px #2E8B57 inset;background:rgba(46,139,87,.08)} .chot-thua.tha-vao{box-shadow:0 0 0 2px #C0504D inset;background:rgba(192,80,77,.08)} .thanh-gd-ch{display:flex;flex-wrap:wrap;gap:6px;padding:10px} .buoc-gd-ch{margin:0;flex:1 1 120px} .buoc-gd-ch button{width:100%;font:inherit;font-size:.86rem;padding:8px 6px;border-radius:8px;border:1px solid var(--vien);background:var(--trang);color:var(--chu);cursor:pointer} .buoc-gd-ch button:hover:not(:disabled){border-color:var(--chinh)} .buoc-gd-ch.qua button{background:rgba(31,92,143,.10)} .buoc-gd-ch.dang button{background:var(--chinh);color:#fff;border-color:var(--chinh);font-weight:600;cursor:default} .buoc-gd-ch.gd-thang.dang button{background:#2E8B57;border-color:#2E8B57} .buoc-gd-ch.gd-thua.dang button{background:#C0504D;border-color:#C0504D} .buoc-gd-ch button:disabled{cursor:default} .the-co-hoi-bdk{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 6px;padding:8px 10px;border:1px dashed var(--vien-dam); border-radius:10px;text-decoration:none;color:var(--chu);font-size:.88rem} .the-co-hoi-bdk:hover{border-color:var(--chinh)} .ds-lien-he{list-style:none;margin:0;padding:0} .ds-lien-he li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--vien)} .ds-lien-he li:first-child{border-top:0} .ds-lien-he form{margin:0} .o-mst{display:flex;gap:6px;align-items:center} .o-mst input{flex:1;min-width:0} .form-khach.dang-sua .o-mst{display:flex !important} .kq-mst{margin-top:4px;min-height:1em} /* ===== GỘP KHÁCH TRÙNG · BÁO CÁO THEO NGUỒN (v83, 03/10/2026) ===== */ .nhom-trung{padding:12px 14px} .bang-trung{min-width:760px} .bang-trung td{vertical-align:top} .thanh-trung{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .thanh-trung form{margin:0} .bang-gop{min-width:620px} .bang-gop th,.bang-gop td{vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--vien)} .bang-gop thead th{text-align:left;min-width:200px} .bang-gop tbody th{text-align:left;white-space:nowrap;color:var(--chu-mo);font-weight:500} .bang-gop .cot-giu{background:rgba(46,139,87,.09)} .bang-gop tr.dong-khac td{background:rgba(224,164,58,.12)} .bang-gop tr.dong-khac td.cot-giu{background:rgba(46,139,87,.16)} .chon-giu,.chon-bo{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:4px} .chon-bo{font-weight:500} .luat-gop{margin:12px 0;padding-left:18px} .luat-gop li{margin-bottom:4px} .bang-nguon{min-width:760px} /* ===== PHIẾU TRẢ HÀNG · HẠN MỨC CÔNG NỢ (v84, 03/10/2026) ===== */ .phieu-tra .chon-kieu{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px} .xem-tra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0;padding:10px 12px;border:1px dashed var(--vien-dam);border-radius:10px} .xem-tra b{font-size:1.1rem} .o-hoan{border:1px solid var(--vien);border-radius:10px;padding:10px 12px;background:var(--nen-2)} .bang-tra{min-width:860px} .bang-tra td{vertical-align:top} .the-han-muc.vuot{border-color:#C0504D;box-shadow:0 0 0 1px rgba(192,80,77,.25) inset} @media (max-width:640px){ .xem-tra{grid-template-columns:1fr} } /* ========================================================================== MÀU MENU TRÁI CỦA TỪNG NGƯỜI (v85, 03/10/2026 — ông chủ: "màu sắc tươi sinh động theo style của chúng ta"). Mỗi bộ màu chỉ khai biến --mm-*; luật dùng chung bên dưới. Cùng biến tô ô xem trước ở "Menu của tôi". ĐẬM: nền chuyển màu, chữ trắng · SÁNG: nền nhạt tươi, nhấn màu · CẦU VỒNG: mỗi nhóm menu một màu. ========================================================================== */ [data-mau-menu]{--mm-nen1:var(--trang);--mm-nen2:var(--trang);--mm-chu:var(--chu);--mm-nhom:var(--chu-mo);--mm-bieu:var(--chu-mo); --mm-hover:var(--nen-2);--mm-dang-nen:var(--nen-2);--mm-dang-chu:var(--chinh);--mm-vien:var(--vien);--mm-dang-vach:transparent} /* ---- đậm: chữ trắng ---- */ [data-mau-menu="thuong_hieu"],[data-mau-menu="bien"],[data-mau-menu="ngoc"],[data-mau-menu="hoang_hon"],[data-mau-menu="tim"],[data-mau-menu="dem"]{ --mm-chu:rgba(255,255,255,.92);--mm-bieu:rgba(255,255,255,.85);--mm-nhom:rgba(255,255,255,.62);--mm-hover:rgba(255,255,255,.12); --mm-dang-nen:rgba(255,255,255,.22);--mm-dang-chu:#fff;--mm-vien:rgba(255,255,255,.16)} :root{--th-chinh:#12395F;--th-nhan:#C8922F} /* v137: màu thương hiệu công ty — vo-dau.ejs đặt lại theo Cài đặt › Thương hiệu */ [data-mau-menu="thuong_hieu"]{--mm-dang-vach:var(--th-nhan)} [data-mau-menu="bien"]{--mm-nen1:#0B57C4;--mm-nen2:#1E90E8;--mm-nhom:#BFE3FF} [data-mau-menu="ngoc"]{--mm-nen1:#0B6E5F;--mm-nen2:#14A88C;--mm-nhom:#C7F5E8} [data-mau-menu="hoang_hon"]{--mm-nen1:#E2553A;--mm-nen2:#D63F7A;--mm-nhom:#FFE0C7} [data-mau-menu="tim"]{--mm-nen1:#4E33B8;--mm-nen2:#8B5CF6;--mm-nhom:#E3D7FF} [data-mau-menu="dem"]{--mm-nen1:#0E131C;--mm-nen2:#243048;--mm-nhom:#8FB4E8;--mm-bieu:#8FB4E8;--mm-dang-vach:#8FB4E8} /* ---- sáng tươi: nền nhạt, mục đang mở tô đặc màu nhấn ---- */ [data-mau-menu="nang"]{--mm-nen1:#FFF3D1;--mm-nen2:#FFFCF4;--mm-nhom:#B7791F;--mm-bieu:#C8922F;--mm-hover:rgba(200,146,47,.14); --mm-dang-nen:#F2B53C;--mm-dang-chu:#3D2A00;--mm-vien:#F1DFB0} [data-mau-menu="troi"]{--mm-nen1:#E3F0FF;--mm-nen2:#F8FBFF;--mm-nhom:#1E6FD9;--mm-bieu:#1E6FD9;--mm-hover:rgba(30,111,217,.10); --mm-dang-nen:#1E6FD9;--mm-dang-chu:#fff;--mm-vien:#CFE3FB} [data-mau-menu="la"]{--mm-nen1:#E1F5E8;--mm-nen2:#F7FCF8;--mm-nhom:#23854D;--mm-bieu:#2E8B57;--mm-hover:rgba(46,139,87,.12); --mm-dang-nen:#2E8B57;--mm-dang-chu:#fff;--mm-vien:#C9EAD5} [data-mau-menu="dao"]{--mm-nen1:#FFE6EE;--mm-nen2:#FFF8FA;--mm-nhom:#C93767;--mm-bieu:#E0497A;--mm-hover:rgba(224,73,122,.11); --mm-dang-nen:#E0497A;--mm-dang-chu:#fff;--mm-vien:#F8D3DF} /* ---- cầu vồng: nền trắng, mỗi nhóm một màu nhấn ---- */ [data-mau-menu="cau_vong"]{--mm-ac:#12395F;--mm-nen1:#FFFFFF;--mm-nen2:#F6F8FC;--mm-nhom:var(--mm-ac);--mm-bieu:var(--mm-ac); --mm-hover:rgba(18,57,95,.07);--mm-dang-nen:var(--mm-ac);--mm-dang-chu:#fff} [data-mau-menu="cau_vong"] .nhom-menu,[data-mau-menu="cau_vong"] .xm-2,[data-mau-menu="cau_vong"] .xm-3{--mm-nhom:var(--mm-ac);--mm-bieu:var(--mm-ac); --mm-dang-nen:var(--mm-ac);--mm-hover:color-mix(in srgb, var(--mm-ac) 12%, transparent)} [data-mau-menu="cau_vong"] .nm-0{--mm-ac:#1E6FD9} [data-mau-menu="cau_vong"] .nm-1,[data-mau-menu="cau_vong"] .xm-2{--mm-ac:#2E8B57} [data-mau-menu="cau_vong"] .nm-2,[data-mau-menu="cau_vong"] .xm-3{--mm-ac:#E2553A} [data-mau-menu="cau_vong"] .nm-3{--mm-ac:#8B5CF6} [data-mau-menu="cau_vong"] .nm-4{--mm-ac:#D63F7A} [data-mau-menu="cau_vong"] .nm-5{--mm-ac:#C8922F} /* ---- chế độ TỐI: bộ sáng đổi sang nền tối pha màu, giữ màu nhấn ---- */ :root[data-giao-dien="toi"] [data-mau-menu="nang"]{--mm-nen1:#2A2214;--mm-nen2:#1A2029;--mm-nhom:#E3B45C;--mm-bieu:#E3B45C;--mm-vien:#3A3122;--mm-dang-nen:#E3B45C;--mm-dang-chu:#2A1C00} :root[data-giao-dien="toi"] [data-mau-menu="troi"]{--mm-nen1:#132338;--mm-nen2:#1A2029;--mm-nhom:#7FB2E8;--mm-bieu:#7FB2E8;--mm-vien:#22344B;--mm-dang-nen:#3C82D8} :root[data-giao-dien="toi"] [data-mau-menu="la"]{--mm-nen1:#13291D;--mm-nen2:#1A2029;--mm-nhom:#7FD3A2;--mm-bieu:#7FD3A2;--mm-vien:#21402F;--mm-dang-nen:#2E8B57} :root[data-giao-dien="toi"] [data-mau-menu="dao"]{--mm-nen1:#2E1720;--mm-nen2:#1A2029;--mm-nhom:#F29BB8;--mm-bieu:#F29BB8;--mm-vien:#47242F;--mm-dang-nen:#D63F7A} :root[data-giao-dien="toi"] [data-mau-menu="cau_vong"]{--mm-nen1:#1A2029;--mm-nen2:#161B23;--mm-chu:var(--chu);--mm-hover:rgba(255,255,255,.06)} /* ---- luật dùng chung cho cột trái ---- */ .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]){background:linear-gradient(180deg,var(--mm-nen1),var(--mm-nen2));border-right-color:var(--mm-vien)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .nhom{color:var(--mm-nhom)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) a{color:var(--mm-chu)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .bieu{color:var(--mm-bieu);opacity:1} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) a:hover{background:var(--mm-hover);color:var(--mm-chu)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) a.dang{background:var(--mm-dang-nen);color:var(--mm-dang-chu); box-shadow:inset 3px 0 0 var(--mm-dang-vach)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) a.dang .bieu{color:var(--mm-dang-chu)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .duoi{border-top-color:var(--mm-vien)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .doi-nn{border-color:var(--mm-vien);background:transparent} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .doi-nn button{color:var(--mm-chu)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .doi-nn button.dang{background:var(--mm-dang-nen);color:var(--mm-dang-chu)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .ngan-nn{background:var(--mm-vien)} .vo.thu .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .nhom{background:var(--mm-vien);color:transparent} .ben .nhom-menu{display:flex;flex-direction:column;gap:1px} /* ---- ô xem trước trong "Menu của tôi" ---- */ .luoi-mau-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px} .o-mau-menu{display:flex;flex-direction:column;gap:6px;cursor:pointer;font-weight:500} .o-mau-menu input{position:absolute;opacity:0;pointer-events:none} .xem-mau-menu{display:flex;flex-direction:column;gap:5px;height:96px;padding:10px 9px;border-radius:12px;border:1px solid var(--vien); background:linear-gradient(180deg,var(--mm-nen1),var(--mm-nen2));transition:transform .1s, box-shadow .1s} .xem-mau-menu i{display:block;border-radius:4px} .xem-mau-menu .xm-nhom{height:5px;width:45%;background:var(--mm-nhom);opacity:.9;margin-top:2px} .xem-mau-menu .xm-dong{height:9px;width:88%;background:var(--mm-hover);box-shadow:inset 10px 0 0 var(--mm-bieu)} .xem-mau-menu .xm-dong.dang{background:var(--mm-dang-nen);box-shadow:inset 3px 0 0 var(--mm-dang-vach)} .o-mau-menu:hover .xem-mau-menu{transform:translateY(-1px);box-shadow:0 2px 8px rgba(12,39,64,.12)} .o-mau-menu input:checked + .xem-mau-menu{box-shadow:0 0 0 3px var(--chinh);border-color:var(--chinh)} .o-mau-menu input:focus-visible + .xem-mau-menu{outline:2px solid var(--chinh);outline-offset:2px} .ten-mau-menu{font-size:.84rem;text-align:center} .o-mau-menu input:checked ~ .ten-mau-menu{font-weight:700;color:var(--chinh)} /* ========================================================================== MÀU RIÊNG TỪNG NHÓM MENU (v86, 03/10/2026). Nhóm có màu: biểu tượng các mục thành Ô VUÔNG TÔ MÀU (nét trắng) — đọc rõ trên mọi bộ màu nền (trắng, đậm, tối); tên nhóm có chấm màu; mục đang mở có vạch + nền pha màu nhóm. ========================================================================== */ .ben .nhom-menu.co-mau .bieu{background:var(--mn-mau);color:#fff !important;border-radius:7px;width:24px;height:24px;opacity:1;flex-shrink:0} .ben .nhom-menu.co-mau .nhom{display:flex;align-items:center;gap:6px} .ben .nhom-menu.co-mau .nhom::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mn-mau);flex-shrink:0} .ben .nhom-menu.co-mau a,.ben .nhom-menu.co-mau .muc{padding-top:6px;padding-bottom:6px} .ben .nhom-menu.co-mau a:hover{background:color-mix(in srgb, var(--mn-mau) 12%, transparent)} .ben .nhom-menu.co-mau a.dang{background:color-mix(in srgb, var(--mn-mau) 16%, transparent);box-shadow:inset 3px 0 0 var(--mn-mau);font-weight:700} .ben[data-mau-menu="mac_dinh"] .nhom-menu.co-mau a.dang,.ben[data-mau-menu="nang"] .nhom-menu.co-mau a.dang, .ben[data-mau-menu="troi"] .nhom-menu.co-mau a.dang,.ben[data-mau-menu="la"] .nhom-menu.co-mau a.dang, .ben[data-mau-menu="dao"] .nhom-menu.co-mau a.dang,.ben[data-mau-menu="cau_vong"] .nhom-menu.co-mau a.dang{color:var(--mn-mau)} .ben[data-mau-menu="mac_dinh"] .nhom-menu.co-mau .nhom,.ben[data-mau-menu="nang"] .nhom-menu.co-mau .nhom, .ben[data-mau-menu="troi"] .nhom-menu.co-mau .nhom,.ben[data-mau-menu="la"] .nhom-menu.co-mau .nhom, .ben[data-mau-menu="dao"] .nhom-menu.co-mau .nhom,.ben[data-mau-menu="cau_vong"] .nhom-menu.co-mau .nhom{color:var(--mn-mau)} :root[data-giao-dien="toi"] .ben .nhom-menu.co-mau a.dang{color:#fff} .vo.thu .ben .nhom-menu.co-mau .nhom::before{display:none} .vo.thu .ben .nhom-menu.co-mau a{justify-content:center} /* ô chọn màu trên dòng nhóm ở "Menu của tôi" */ .chon-mau-nhom{position:relative} .chon-mau-nhom summary{list-style:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:3px 8px;border:1px solid var(--vien); border-radius:8px;background:var(--trang);user-select:none} .chon-mau-nhom summary::-webkit-details-marker{display:none} .chon-mau-nhom[open] summary{border-color:var(--chinh)} .cham-mau-nhom{display:inline-block;width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.08);vertical-align:middle} .cham-mau-nhom.khong-mau{background:linear-gradient(to top right,transparent calc(50% - 1.5px),#C0504D calc(50% - 1.5px),#C0504D calc(50% + 1.5px),transparent calc(50% + 1.5px)),var(--trang);border-color:var(--vien-dam)} .bang-mau-nhom{position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:grid;grid-template-columns:repeat(7,26px);gap:6px;padding:10px; background:var(--trang);border:1px solid var(--vien);border-radius:12px;box-shadow:0 8px 24px rgba(12,39,64,.16)} .bang-mau-nhom label{display:flex;cursor:pointer} .bang-mau-nhom input{position:absolute;opacity:0;pointer-events:none} .bang-mau-nhom .cham-mau-nhom{width:26px;height:26px;border-radius:8px} .bang-mau-nhom input:checked + .cham-mau-nhom{box-shadow:0 0 0 2px var(--trang),0 0 0 4px var(--chinh)} .bang-mau-nhom label:hover .cham-mau-nhom{transform:scale(1.08)} @media (max-width:640px){ .ds-xep-menu li{flex-wrap:wrap} .bang-mau-nhom{right:auto;left:0} } /* v88: ô "Theo công ty" trong bảng màu riêng — chữ CT trên màu công ty */ .bang-mau-nhom .o-theo-cty .cham-mau-nhom{display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;font-style:normal; color:#fff;letter-spacing:.02em} .bang-mau-nhom .o-theo-cty .cham-mau-nhom.khong-mau{color:var(--chu-mo)} /* ========================================================================== DẢI MÀU TRẠNG THÁI (v89, 04/10/2026 — ông chủ: "những trạng thái → sử dụng dải màu cho đẹp"). Thanh lọc trạng thái = viên thuốc, MỖI trạng thái MỘT tông (cùng tông với nhãn .nhan trong bảng): đang chọn = tô đặc; số 0 = mờ đi (vẫn bấm được). Tông: xam lam troi ngoc xanh vang cam do hong tim nau navy. Một biến --c cho mỗi tông; nền / viền pha từ --c nên chế độ tối tự đúng. ========================================================================== */ .day-tt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px} .day-tt .nhan-day{font-size:.84rem;color:var(--chu-mo);margin-right:2px} .chip-tt{--c:#5B6878;display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;font-size:.84rem;font-weight:600; line-height:1.3;white-space:nowrap;text-decoration:none;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,#fff); background:color-mix(in srgb,var(--c) 8%,#fff);transition:background .12s,border-color .12s,box-shadow .12s,transform .1s} .chip-tt b{font-weight:700;font-variant-numeric:tabular-nums} .chip-tt:hover{background:color-mix(in srgb,var(--c) 16%,#fff);border-color:var(--c);color:var(--c);text-decoration:none;transform:translateY(-1px)} .chip-tt.dang,.chip-tt.dang:hover{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--c) 38%,transparent)} .chip-tt.rong:not(.dang){opacity:.45} .chip-tt.rong:not(.dang):hover{opacity:.8} .chip-tt:focus-visible{outline:2px solid var(--c);outline-offset:2px} .chip-tt.xam{--c:#5B6878}.chip-tt.lam{--c:#1E6FD9}.chip-tt.troi{--c:#0E8AC4}.chip-tt.ngoc{--c:#0F9F87}.chip-tt.xanh{--c:#2E8B57} .chip-tt.vang{--c:#B7791F}.chip-tt.cam{--c:#E2553A}.chip-tt.do{--c:#C0392B}.chip-tt.hong{--c:#D63F7A}.chip-tt.tim{--c:#7C4DEB} .chip-tt.nau{--c:#8B5E3C}.chip-tt.navy{--c:#12395F} :root[data-giao-dien="toi"] .chip-tt{background:color-mix(in srgb,var(--c) 16%,transparent);border-color:color-mix(in srgb,var(--c) 55%,transparent); color:color-mix(in srgb,var(--c) 45%,#fff)} :root[data-giao-dien="toi"] .chip-tt:hover{background:color-mix(in srgb,var(--c) 26%,transparent);color:color-mix(in srgb,var(--c) 35%,#fff)} :root[data-giao-dien="toi"] .chip-tt.dang{background:var(--c);color:#fff} :root[data-giao-dien="toi"] .chip-tt.navy{--c:#4C7DB8} :root[data-giao-dien="toi"] .chip-tt.xam{--c:#7D8A9B} /* nhãn trạng thái trong bảng — thêm tông cho đủ dải */ .nhan.troi{background:#E3F4FC;border-color:#B3DDF2;color:#0B5F87} .nhan.ngoc{background:#E2F6F1;border-color:#B2E2D7;color:#0B6E5F} .nhan.tim{background:#F1ECFE;border-color:#D8CBFA;color:#5631B8} .nhan.hong{background:#FDEBF2;border-color:#F4C5D7;color:#A3285A} :root[data-giao-dien="toi"] .nhan.troi{background:#12303F;border-color:#245A73;color:#9CD6F2} :root[data-giao-dien="toi"] .nhan.ngoc{background:#11302A;border-color:#22594D;color:#8FDCCB} :root[data-giao-dien="toi"] .nhan.tim{background:#251C3E;border-color:#46377A;color:#C9B8FA} :root[data-giao-dien="toi"] .nhan.hong{background:#35192A;border-color:#6A2F4C;color:#F2A9C6} /* ========================================================================== VÒNG 1 NÂNG GIAO DIỆN (v92, 04/10/2026 — ông chủ: "dễ sử dụng · thông minh khoa học · đẹp mặt"). Nền chung cho MỌI trang mọi phân hệ: bảng không bị cắt cột, thông báo nổi tự tắt, nút gửi chống bấm hai lần, avatar chữ cái, ô bắt buộc có dấu *, trang trống có hình, thanh cuộn mảnh, viền focus rõ cho người dùng bàn phím. ========================================================================== */ /* ---- bảng: rộng hơn khung thì cuộn ngang (trước bị cắt mất cột bên phải), dòng sáng khi rê chuột ---- */ .o.mong{overflow-x:auto;overflow-y:hidden} .o.mong > table{min-width:100%} tbody tr{transition:background-color .12s} tbody tr:hover > td{background:color-mix(in srgb,var(--chinh) 4%,transparent)} tbody tr:last-child > td{border-bottom:0} :root[data-giao-dien="toi"] tbody tr:hover > td{background:rgba(255,255,255,.035)} /* ---- thông báo nổi (sau khi lưu / lỗi): góc trên phải, có nút đóng; báo thành công tự tắt ---- */ .bao-noi{position:fixed;top:calc(var(--cao-tren) + 12px);right:16px;z-index:60;display:flex;flex-direction:column;gap:8px; max-width:min(460px,calc(100vw - 32px));pointer-events:none} .bao-noi .bao{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 12px 12px 16px; box-shadow:0 12px 32px rgba(12,39,64,.18);border-radius:12px;animation:bao-vao .25s ease-out;line-height:1.45} .bao-noi .bao::before{content:'';flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:currentColor; -webkit-mask:var(--bao-hinh) center/14px no-repeat;mask:var(--bao-hinh) center/14px no-repeat} .bao-noi .bao.ok{--bao-hinh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")} .bao-noi .bao.loi{--bao-hinh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M12 6v8M12 18v.5'/%3E%3C/svg%3E")} .bao-noi .bao.nhac{--bao-hinh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M12 11v7M12 6v.5'/%3E%3C/svg%3E")} .bao-noi .bao .bao-chu{flex:1;min-width:0} .bao-noi .dong-bao{flex:none;border:0;background:transparent;color:inherit;opacity:.55;font-size:1.2rem;line-height:1;cursor:pointer;padding:0 4px} .bao-noi .dong-bao:hover{opacity:1} .bao-noi .bao.tat{animation:bao-ra .3s ease-in forwards} @keyframes bao-vao{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} @keyframes bao-ra{to{opacity:0;transform:translateX(24px)}} /* ---- nút gửi đang chạy: vòng xoay + không bấm lần hai (đơn / phiếu không bị lập đôi) ---- */ .dang-gui{position:relative;pointer-events:none;opacity:.8} .dang-gui::after{content:'';display:inline-block;width:.9em;height:.9em;margin-left:8px;vertical-align:-.12em;border-radius:50%; border:2px solid currentColor;border-right-color:transparent;animation:xoay .7s linear infinite} @keyframes xoay{to{transform:rotate(360deg)}} /* ---- avatar chữ cái (khách hàng, nhân viên, tài khoản) — màu cố định theo tên ---- */ .co-anh{display:flex;align-items:center;gap:10px;min-width:0} .co-anh > div{min-width:0} td:has(> .co-anh){min-width:220px} .anh-chu{--ac:#12395F;flex:none;width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center; font-size:.8rem;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#fff)); box-shadow:0 1px 3px rgba(12,39,64,.18)} .anh-chu.lon{width:52px;height:52px;font-size:1.1rem} /* ---- ô bắt buộc: dấu * đỏ cạnh nhãn (biết ngay phải điền gì trước khi bấm Lưu) ---- */ .truong > label:has(+ input[required]:not([type=hidden])),.truong > label:has(+ select[required]),.truong > label:has(+ textarea[required]){} .truong > label:has(+ input[required]:not([type=hidden]))::after,.truong > label:has(+ select[required])::after, .truong > label:has(+ textarea[required])::after{content:' *';color:#C0392B;font-weight:700} /* ---- trang / bảng trống: có hình, không còn một dòng chữ xám trơ trọi ---- */ .trong::before{content:'';display:block;width:52px;height:52px;margin:0 auto 12px;border-radius:16px; background:color-mix(in srgb,var(--chinh) 10%,transparent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5L16 13h5'/%3E%3Cpath d='M5.5 5h13L21 13v6H3v-6z'/%3E%3C/svg%3E") center/30px no-repeat,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude} .trong{color:var(--chu-mo);line-height:1.5} /* ---- thanh cuộn mảnh, hợp tông; viền focus rõ khi dùng bàn phím (Tab) ---- */ *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--chu-mo) 35%,transparent) transparent} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--chu-mo) 30%,transparent);border-radius:9px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--chu-mo) 55%,transparent)} a:focus-visible,button:focus-visible,.nut:focus-visible,summary:focus-visible{outline:2px solid var(--chinh);outline-offset:2px;border-radius:6px} /* ---- thẻ số liệu: nhấc nhẹ khi rê chuột (thẻ bấm được) ---- */ a.o-so{transition:transform .12s,box-shadow .12s,border-color .12s} a.o-so:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(12,39,64,.1);text-decoration:none} /* ---- trang hiện ra mượt (tắt khi người dùng chọn giảm chuyển động) ---- */ .chinh > *{animation:trang-vao .22s ease-out both} @keyframes trang-vao{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.chinh > *,.bao-noi .bao,tbody tr{animation:none !important;transition:none !important}} /* ---- NÚT GỌN (ông chủ 04/10/2026: "mấy cái nút đừng để to đùng 1 cục, nhìn ghê lắm") ---- Một cỡ chuẩn 36px (nhỏ 30px), chữ gọn, bo nhẹ; nút chính nổi bằng MÀU chứ không bằng kích thước. Bỏ kiểu nút kéo kín cả khung (đăng nhập, đổi mật khẩu, PIN, lập phiếu thuê…). */ .nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border-radius:8px; font-size:.87rem;line-height:1.2;white-space:nowrap;vertical-align:middle;transition:background-color .12s,border-color .12s,box-shadow .12s} .nut:not(.vien):not(:disabled){box-shadow:0 1px 2px rgba(12,39,64,.14)} .nut.vien{border-color:var(--vien-dam)} .nut.vien:hover{border-color:var(--chinh)} .nut.nho{min-height:30px;padding:0 10px;font-size:.8rem;border-radius:7px} .nut svg{flex:none} .nut.nut-lon{width:auto;min-height:40px;padding:0 22px;font-size:.92rem} .the-dn form > .nut[type=submit],.the-dn > .nut,.the-dn p > .nut{display:flex;width:auto !important;min-width:150px;margin:6px 0 0 auto} .ben .nut-soan{width:auto;margin:4px 8px 14px;padding:8px 18px 8px 14px;border-radius:999px;font-size:.88rem; box-shadow:0 2px 8px rgba(12,39,64,.16);justify-content:flex-start} @media (max-width:760px){.nut{min-height:38px}} /* ========================================================================== TÌM NHANH TOÀN HỆ THỐNG — Ctrl+K (v93, vòng 2 nâng giao diện). Nút trên thanh đầu + hộp tìm giữa màn. ========================================================================== */ .nut-tim-nhanh{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 12px;min-width:220px;border-radius:9px; border:1px solid var(--vien);background:var(--nen-2);color:var(--chu-mo);font:inherit;font-size:.86rem;cursor:pointer;margin-right:4px} .nut-tim-nhanh:hover{border-color:var(--chinh);color:var(--chinh)} .nut-tim-nhanh .chu{flex:1;text-align:left} kbd{display:inline-block;min-width:18px;padding:1px 5px;border-radius:5px;border:1px solid var(--vien);border-bottom-width:2px;background:var(--trang); color:var(--chu-mo);font:600 .7rem/1.4 ui-monospace,Consolas,monospace;text-align:center} @media (max-width:1100px){.nut-tim-nhanh{min-width:0}.nut-tim-nhanh .chu,.nut-tim-nhanh kbd{display:none}} .tim-nhanh{border:0;padding:0;border-radius:16px;width:min(640px,calc(100vw - 24px));max-height:min(620px,calc(100vh - 80px));margin-top:9vh; background:var(--trang);color:var(--chu);box-shadow:0 30px 90px rgba(6,20,36,.45);overflow:hidden} .tim-nhanh[open]{display:flex;flex-direction:column} .tim-nhanh::backdrop{background:rgba(6,20,36,.5);backdrop-filter:blur(2px)} .tn-o{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--vien);color:var(--chu-mo)} .tn-o input{flex:1;border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent;font-size:1.05rem;padding:4px 0;color:var(--chu)} .tn-kq{overflow-y:auto;padding:6px 8px 10px;flex:1} .tn-nhom{padding:10px 10px 4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--chu-mo)} .tn-muc{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--chu);cursor:pointer;text-decoration:none} .tn-muc:hover{text-decoration:none;color:var(--chu)} .tn-muc.dang{background:color-mix(in srgb,var(--chinh) 10%,transparent)} .tn-muc .tn-bieu{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--nen-2);color:var(--chinh)} .tn-muc.dang .tn-bieu{background:var(--chinh);color:#fff} .tn-muc .tn-chu{flex:1;min-width:0} .tn-muc .tn-ten{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tn-muc .tn-phu{display:block;font-size:.8rem;color:var(--chu-mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tn-muc mark{background:color-mix(in srgb,#C8922F 30%,transparent);color:inherit;border-radius:3px;padding:0 1px} .tn-trong{padding:28px 10px;text-align:center;color:var(--chu-mo)} .tn-chan{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--vien);background:var(--nen-2);font-size:.76rem;color:var(--chu-mo)} .hop-phim-tat{width:min(440px,calc(100vw - 24px))} .tn-phim{padding:20px 22px} .tn-phim dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;align-items:center} .tn-phim dt{white-space:nowrap} .tn-phim dd{margin:0;color:var(--chu-mo);font-size:.9rem} /* ---- CỘT TRÁI THU GỌN (v96, 04/10/2026 — ông chủ chụp: "cái gì thế này") ---- v92 đổi nút Soạn thư thành viên thuốc nhưng quên chế độ thu gọn → thành khối tròn to; tên nhóm có màu lòi nửa chữ; biểu tượng nhóm tô màu thành một cột ô đặc nặng nề. Thu gọn: nút soạn = ô vuông 40px gọn, tên nhóm = một vạch mảnh, biểu tượng màu nhóm nhạt (nền pha màu), mục đang mở mới tô đặc. */ .vo.thu .ben .nut-soan{width:40px;height:40px;min-height:0;padding:0;margin:4px auto 12px;border-radius:12px;justify-content:center;gap:0} .vo.thu .ben .nut-soan .bieu{margin:0} .vo.thu .ben .nhom-menu .nhom,.vo.thu .ben[data-mau-menu] .nhom-menu.co-mau .nhom{display:block;height:1px;min-height:0;margin:10px 10px;padding:0; overflow:hidden;font-size:0;line-height:0;color:transparent !important;background:var(--vien)} .vo.thu .ben .nhom-menu.co-mau .nhom{background:color-mix(in srgb,var(--mn-mau) 45%,transparent)} .vo.thu .ben .nhom-menu.co-mau a,.vo.thu .ben .nhom-menu.co-mau .muc{padding:5px 0} .vo.thu .ben .nhom-menu.co-mau .bieu{width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--mn-mau) 14%,transparent);color:var(--mn-mau) !important} .vo.thu .ben .nhom-menu.co-mau a:hover .bieu{background:color-mix(in srgb,var(--mn-mau) 24%,transparent)} .vo.thu .ben .nhom-menu.co-mau a.dang{background:transparent;box-shadow:none} .vo.thu .ben .nhom-menu.co-mau a.dang .bieu{background:var(--mn-mau);color:#fff !important;box-shadow:0 2px 8px color-mix(in srgb,var(--mn-mau) 40%,transparent)} :root[data-giao-dien="toi"] .vo.thu .ben .nhom-menu.co-mau .bieu{background:color-mix(in srgb,var(--mn-mau) 28%,transparent);color:#fff !important} /* ========================================================================== BỘ MÀU MENU KIỂU GOOGLE (v98, 04/10/2026 — ông chủ: "style này xấu quá → học kiểu Google cho màu sắc tinh tế"). Material 3 như Gmail / Drive: nền PHẲNG tông rất nhạt, chữ + biểu tượng xám đậm dịu, mục đang mở là VIÊN THUỐC nền tông nhạt + chữ đậm cùng tông. Bỏ nền chuyển màu, bỏ chữ trắng trên nền gắt. Mã bộ màu giữ nguyên (đã lưu theo người / công ty) — các luật dưới đè dáng cũ của v85 (đứng sau, cùng độ ưu tiên). ========================================================================== */ [data-mau-menu]:not([data-mau-menu="mac_dinh"]){--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06);--mm-dang-vach:transparent} [data-mau-menu="bien"]{--mm-nen1:#F8FAFD;--mm-nen2:#F8FAFD;--mm-nhom:#1A73E8;--mm-dang-nen:#D3E3FD;--mm-dang-chu:#041E49;--mm-bieu:#444746;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="troi"]{--mm-nen1:#F3F9FD;--mm-nen2:#F3F9FD;--mm-nhom:#00639B;--mm-dang-nen:#C2E7FF;--mm-dang-chu:#001D35;--mm-bieu:#41474D;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="ngoc"]{--mm-nen1:#F4FBF9;--mm-nen2:#F4FBF9;--mm-nhom:#00796B;--mm-dang-nen:#BDEFE1;--mm-dang-chu:#00382D;--mm-bieu:#3F4946;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="la"]{--mm-nen1:#F5FAF3;--mm-nen2:#F5FAF3;--mm-nhom:#2E7D32;--mm-dang-nen:#C8EDBD;--mm-dang-chu:#0D3A0B;--mm-bieu:#424940;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="nang"]{--mm-nen1:#FFFBF0;--mm-nen2:#FFFBF0;--mm-nhom:#8A6D00;--mm-dang-nen:#FFE18A;--mm-dang-chu:#3B2F00;--mm-bieu:#4A4639;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="hoang_hon"]{--mm-nen1:#FFF8F5;--mm-nen2:#FFF8F5;--mm-nhom:#B3541E;--mm-dang-nen:#FFDBCB;--mm-dang-chu:#3A1300;--mm-bieu:#52443D;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="dao"]{--mm-nen1:#FFF7F8;--mm-nen2:#FFF7F8;--mm-nhom:#B0275A;--mm-dang-nen:#FFD9E1;--mm-dang-chu:#3F0019;--mm-bieu:#524345;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="tim"]{--mm-nen1:#FAF7FF;--mm-nen2:#FAF7FF;--mm-nhom:#6750A4;--mm-dang-nen:#E8DEF8;--mm-dang-chu:#21005D;--mm-bieu:#49454F;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} /* v137 "Thương hiệu công ty": pha từ màu chính / màu nhấn của CHÍNH công ty đang dùng (mặc định navy + vàng đồng như trước) */ [data-mau-menu="thuong_hieu"]{--mm-nen1:color-mix(in srgb,var(--th-chinh) 4%,#fff);--mm-nen2:color-mix(in srgb,var(--th-chinh) 4%,#fff); --mm-nhom:color-mix(in srgb,var(--th-nhan) 76%,#000);--mm-dang-nen:color-mix(in srgb,var(--th-chinh) 15%,#fff); --mm-dang-chu:color-mix(in srgb,var(--th-chinh) 70%,#000);--mm-bieu:color-mix(in srgb,var(--th-chinh) 45%,#4A4A4A);--mm-chu:#1F1F1F; --mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="cau_vong"]{--mm-nen1:#FAFAFB;--mm-nen2:#FAFAFB;--mm-nhom:#5F6368;--mm-dang-nen:#E8EAED;--mm-dang-chu:#1F1F1F;--mm-bieu:#444746;--mm-chu:#1F1F1F;--mm-hover:rgba(68,71,70,.08);--mm-vien:rgba(0,0,0,.06)} [data-mau-menu="dem"]{--mm-nen1:#1F2023;--mm-nen2:#1F2023;--mm-chu:#E3E3E3;--mm-nhom:#9AA0A6;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.08);--mm-dang-nen:#004A77;--mm-dang-chu:#C2E7FF;--mm-vien:rgba(255,255,255,.08)} :root[data-giao-dien="toi"] [data-mau-menu="bien"]{--mm-nen1:#1B1C1F;--mm-nen2:#1B1C1F;--mm-nhom:#A8C7FA;--mm-dang-nen:#004A77;--mm-dang-chu:#D3E3FD;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="troi"]{--mm-nen1:#191C1E;--mm-nen2:#191C1E;--mm-nhom:#8ECDFF;--mm-dang-nen:#004B73;--mm-dang-chu:#C2E7FF;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="ngoc"]{--mm-nen1:#191C1B;--mm-nen2:#191C1B;--mm-nhom:#80D5C4;--mm-dang-nen:#005142;--mm-dang-chu:#BDEFE1;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="la"]{--mm-nen1:#1A1C19;--mm-nen2:#1A1C19;--mm-nhom:#9AD58A;--mm-dang-nen:#22501E;--mm-dang-chu:#C8EDBD;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="nang"]{--mm-nen1:#1E1B16;--mm-nen2:#1E1B16;--mm-nhom:#E9C349;--mm-dang-nen:#574500;--mm-dang-chu:#FFE18A;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="hoang_hon"]{--mm-nen1:#201A17;--mm-nen2:#201A17;--mm-nhom:#FFB68F;--mm-dang-nen:#6E2E0B;--mm-dang-chu:#FFDBCB;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="dao"]{--mm-nen1:#201A1B;--mm-nen2:#201A1B;--mm-nhom:#FFB1C5;--mm-dang-nen:#6F1F3B;--mm-dang-chu:#FFD9E1;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="tim"]{--mm-nen1:#1D1B20;--mm-nen2:#1D1B20;--mm-nhom:#D0BCFF;--mm-dang-nen:#4F378B;--mm-dang-chu:#E8DEF8;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="thuong_hieu"]{--mm-nen1:#1A1D22;--mm-nen2:#1A1D22;--mm-nhom:color-mix(in srgb,var(--th-nhan) 80%,#fff); --mm-dang-nen:color-mix(in srgb,var(--th-chinh) 60%,#1A1D22);--mm-dang-chu:color-mix(in srgb,var(--th-chinh) 12%,#fff);--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5; --mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="cau_vong"]{--mm-nen1:#1B1C1F;--mm-nen2:#1B1C1F;--mm-nhom:#9AA0A6;--mm-dang-nen:#3C4043;--mm-dang-chu:#E8EAED;--mm-chu:#E3E3E3;--mm-bieu:#C4C7C5;--mm-hover:rgba(255,255,255,.07);--mm-vien:rgba(255,255,255,.07)} :root[data-giao-dien="toi"] [data-mau-menu="dem"]{--mm-nen1:#131314;--mm-nen2:#131314} /* dáng chung: nền phẳng, mục là viên thuốc, mục mở chữ đậm (không vạch trái, không bóng) */ .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]){background:var(--mm-nen1)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) a{border-radius:999px;font-weight:500} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) a.dang{font-weight:700;box-shadow:none} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .nhom{font-weight:600} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .nut-soan{background:var(--mm-dang-nen);color:var(--mm-dang-chu);box-shadow:0 1px 3px rgba(60,64,67,.15),0 4px 8px rgba(60,64,67,.1)} .ben[data-mau-menu]:not([data-mau-menu="mac_dinh"]) .nut-soan:hover{filter:brightness(.97);box-shadow:0 2px 4px rgba(60,64,67,.2),0 6px 12px rgba(60,64,67,.12)} /* Đa sắc: mỗi nhóm một tông nhạt riêng (xanh · lá · cam · tím · hồng · ngọc) */ [data-mau-menu="cau_vong"] .nhom-menu{--mm-nhom:var(--mm-ac);--mm-bieu:var(--mm-ac);--mm-dang-nen:color-mix(in srgb,var(--mm-ac) 17%,#fff); --mm-dang-chu:color-mix(in srgb,var(--mm-ac) 75%,#000);--mm-hover:color-mix(in srgb,var(--mm-ac) 8%,transparent)} [data-mau-menu="cau_vong"] .nm-0{--mm-ac:#1A73E8}[data-mau-menu="cau_vong"] .nm-1,[data-mau-menu="cau_vong"] .xm-2{--mm-ac:#188038} [data-mau-menu="cau_vong"] .nm-2,[data-mau-menu="cau_vong"] .xm-3{--mm-ac:#E37400}[data-mau-menu="cau_vong"] .nm-3{--mm-ac:#9334E6} [data-mau-menu="cau_vong"] .nm-4{--mm-ac:#D01884}[data-mau-menu="cau_vong"] .nm-5{--mm-ac:#129EAF} :root[data-giao-dien="toi"] [data-mau-menu="cau_vong"] .nhom-menu{--mm-dang-nen:color-mix(in srgb,var(--mm-ac) 32%,#1B1C1F);--mm-dang-chu:#fff} /* ô xem trước trong "Menu của tôi": giống một cột Gmail thu nhỏ */ .xem-mau-menu{background:var(--mm-nen1);border:1px solid var(--vien);border-radius:14px;gap:6px;padding:12px 10px} .xem-mau-menu .xm-nhom{height:4px;width:38%;border-radius:4px;background:var(--mm-nhom);opacity:.8;margin:2px 0 0 4px} .xem-mau-menu .xm-dong{height:12px;width:92%;border-radius:999px;background:transparent; box-shadow:inset 22px 0 0 transparent,inset 30px 0 0 color-mix(in srgb,var(--mm-bieu) 22%,transparent)} .xem-mau-menu .xm-dong.dang{background:var(--mm-dang-nen);box-shadow:inset 30px 0 0 color-mix(in srgb,var(--mm-dang-chu) 35%,transparent)} /* v101: chọn hàng loạt trong bảng (cột ô tick) + thanh thao tác nổi phía trên bảng */ .cot-tick{width:34px;text-align:center;padding-left:10px!important;padding-right:4px!important} .bang-khach .o-bp{white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis} .cot-tick input{margin:0;width:16px;height:16px;accent-color:#1B4C7D;cursor:pointer} .thanh-hang-loat{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 4px;margin:-4px 0 6px;min-height:40px} .thanh-hang-loat [data-dem-chon]{font-size:13px;color:var(--chu-mo);margin-right:4px} .thanh-hang-loat.co-chon [data-dem-chon]{color:var(--chu);font-weight:600} .thanh-hang-loat select{width:auto;min-width:180px;height:30px;padding-top:0;padding-bottom:0;font-size:13px} /* v102: tab hồ sơ khách — dùng chung kiểu .tab; số đếm nhỏ + chấm đỏ "có việc đến hạn" */ .tab-ho-so{margin:2px 0 18px} .tab-ho-so a{display:inline-flex;align-items:center;gap:6px} .tab-ho-so .dem-tab{font-size:11.5px;font-weight:600;line-height:1;padding:3px 7px;border-radius:10px;background:var(--vien);color:var(--chu-mo)} .tab-ho-so a.dang .dem-tab{background:#E8F0FE;color:var(--chinh)} .tab-ho-so .cham-tab{width:7px;height:7px;border-radius:50%;background:#D93025;flex-shrink:0} [data-tab-noi][hidden]{display:none!important} /* ===== v106: KHU LỌC GỌN trên danh sách (ông chủ: "nhỏ lại và gọn lại cho đẹp") — kiểu Google: ô tìm bo tròn, ô chọn dạng viên thuốc không nhãn (đang lọc thì tô màu), chip nhỏ 26px, Hiển thị + Việc tiếp theo chung một hàng ===== */ .loc-gon-khung{margin:2px 0 12px} .loc-gon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px} .loc-gon .o-tim-gon{flex:1 1 260px;max-width:400px;display:flex;align-items:center;gap:7px;height:36px;margin:0;padding:0 14px; border:1px solid var(--vien);border-radius:18px;background:var(--trang);color:var(--chu-mo);cursor:text;font-weight:400} .loc-gon .o-tim-gon:focus-within{border-color:var(--chinh);box-shadow:0 0 0 3px rgba(26,115,232,.12)} .loc-gon .o-tim-gon input{flex:1;min-width:0;width:auto;height:34px;margin:0;padding:0;border:0!important;outline:0; background:transparent!important;box-shadow:none!important;font-size:13.5px;color:var(--chu)} .loc-gon select{width:auto;max-width:230px;height:36px;margin:0;padding:0 30px 0 14px;border-radius:18px;font-size:13px; background-color:var(--trang);color:var(--chu)} .loc-gon select.dang{border-color:var(--chinh);background-color:#E8F0FE;color:var(--chinh);font-weight:600} :root[data-giao-dien="toi"] .loc-gon select.dang{background-color:rgba(138,180,248,.16)} .loc-gon .bo-loc-gon{font-size:13px;color:var(--chu-mo);padding:0 6px;white-space:nowrap} .loc-gon .bo-loc-gon:hover{color:var(--chinh);text-decoration:none} .loc-gon-khung .day-tt{margin:0 0 7px;gap:6px} .loc-gon-khung .nhan-day{font-size:12px;color:var(--chu-mo);min-width:84px;margin-right:0;font-weight:500} .loc-gon-khung .chip-tt{padding:2px 10px;font-size:12.5px;line-height:20px;gap:5px} .loc-gon-khung .hai-day{display:flex;flex-wrap:wrap;column-gap:28px} .loc-gon-khung .hai-day .day-tt{margin-bottom:7px} .loc-gon-khung + .thanh-hang-loat{margin-top:0} @media (max-width:640px){ .loc-gon .o-tim-gon{max-width:none;flex-basis:100%} .loc-gon select{flex:1 1 140px;max-width:none} .loc-gon-khung .nhan-day{min-width:0;width:100%} } /* ===== v107: khu lọc gọn cho MỌI màn danh sách — ô ngày / ô tick dạng viên; chip trạng thái của mọi màn quản trị nhỏ lại (chỉ trong .chinh — máy bán hàng POS giữ chip to cho ngón tay) ===== */ .loc-gon .o-ngay-gon,.loc-gon .chon-gon{display:inline-flex;align-items:center;gap:6px;height:36px;margin:0;padding:0 8px 0 14px; border:1px solid var(--vien);border-radius:18px;background:var(--trang);font-size:12.5px;color:var(--chu-mo);font-weight:500;cursor:pointer} .loc-gon .chon-gon{padding-right:14px} .loc-gon .o-ngay-gon input{width:auto;height:32px;margin:0;padding:0 4px;border:0!important;outline:0;background:transparent!important; box-shadow:none!important;font-size:13px;color:var(--chu)} .loc-gon .chon-gon input{margin:0;accent-color:var(--chinh)} .loc-gon .o-ngay-gon.dang,.loc-gon .chon-gon.dang{border-color:var(--chinh)} .loc-gon .chon-gon.dang{background:#E8F0FE;color:var(--chinh)} :root[data-giao-dien="toi"] .loc-gon .chon-gon.dang{background:rgba(138,180,248,.16)} .chinh .day-tt{gap:6px;margin-bottom:8px} .chinh .day-tt .chip-tt{padding:2px 10px;font-size:12.5px;line-height:20px;gap:5px} .chinh .day-tt .nhan-day{font-size:12px;font-weight:500} @media (max-width:640px){ .loc-gon .o-ngay-gon{flex:1 1 150px} } /* ===== v107: ĐẦU TRANG GỌN (ông chủ: "giữa tiêu đề và bộ lọc vẫn còn khoảng cách, cho xích lại, và sử dụng bộ nút cỡ nhỏ") — nút hành động trên đầu mọi màn quản trị dùng cỡ nhỏ 32px; tiêu đề → bộ lọc chỉ cách 12px ===== */ .chinh .tren{margin-bottom:12px;align-items:center} .chinh .tren h1{margin-bottom:2px} .chinh .tren .cung-dong{gap:6px} .chinh .tren .nut{min-height:32px;padding:0 12px;font-size:.82rem;border-radius:7px} .chinh .tren .nut.nho{min-height:28px;padding:0 10px} .chinh .tren + .loc-gon-khung,.chinh .tren + .tab + .loc-gon-khung{margin-top:0} .loc-gon .o-tim-gon{flex:1 1 220px;max-width:340px} .loc-gon .o-ngay-gon input{max-width:132px} /* ---- v109 LỊCH LÀM VIỆC KHÁCH HÀNG (/crm/agenda) — danh sách theo ngày + dòng thời gian giao tiếp ---- */ .lkh-tren{margin:0 0 10px} .lkh-tren .lich-thang{font-size:1.05rem} .lkh-tren .nut.nho{min-width:32px;justify-content:center} .lkh-ds{padding:0} .lkh-ngay{display:flex;align-items:center;gap:8px;padding:9px 16px;background:var(--nen-2);border-top:1px solid var(--vien);font-size:.9rem} .lkh-ngay:first-child{border-top:0;border-radius:var(--r) var(--r) 0 0} .lkh-ngay.nay b{color:var(--chinh)} .lkh-ngay.qua-han{background:#FCE8E6;color:#B3261E} :root[data-giao-dien="toi"] .lkh-ngay.qua-han{background:rgba(242,139,130,.14);color:#F28B82} .lkh-ngay .nut-chu{margin-left:auto;padding:0 6px;font-size:1rem;line-height:1} .lkh-dong{display:grid;grid-template-columns:104px 12px minmax(0,1fr) auto;align-items:start;gap:10px;padding:9px 16px; border-top:1px solid var(--vien);color:var(--chu)} .lkh-dong.gt{grid-template-columns:52px 88px minmax(0,1fr) auto} .lkh-dong:hover{background:var(--nen-2);text-decoration:none} .lkh-dong.trong-ngay{display:block;padding:8px 16px 8px 142px} .lkh-gio{font-size:.86rem;font-weight:600;white-space:nowrap;padding-top:1px} .lkh-cham{display:inline-block;width:9px;height:9px;border-radius:99px;margin-top:6px;background:var(--mau-sk,var(--chinh))} .lkh-dong.viec .lkh-cham,.lkh-cham.viec{background:#E37400} .lkh-than{display:flex;flex-direction:column;gap:2px;min-width:0} .lkh-td{font-weight:600;overflow-wrap:anywhere} .lkh-kh{color:var(--chu-mo);overflow-wrap:anywhere} .lkh-dong.gt .lkh-kh{color:var(--chu)} .lkh-nd{white-space:pre-line;overflow-wrap:anywhere;color:var(--chu);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .lkh-nguoi{white-space:nowrap;padding-top:2px} .lkh-dong.che .lkh-td{font-weight:400} .lkh-chu-giai{margin:8px 2px 0;display:flex;align-items:center;gap:6px} .lkh-chu-giai .lkh-cham{margin:0} /* lưới tháng: mỗi ô là tên khách; việc tiếp theo chấm cam, quá hạn chữ đỏ; số ngày bấm = thêm lịch hẹn ngày đó */ .lkh-luoi{grid-template-columns:repeat(7,minmax(0,1fr))} .lkh-luoi .o-ngay{cursor:default;min-height:96px;min-width:0} .lkh-luoi .o-ngay:hover{background:var(--trang)} .lkh-luoi .o-ngay.ngoai:hover{background:var(--nen)} .lkh-luoi a.buoi{text-decoration:none} .lkh-luoi .buoi.viec .cham{background:#E37400} .lkh-luoi .buoi.qua-han .ten{color:#B3261E} .lkh-luoi .nut-ngay{border:0;background:none;padding:0;font:inherit;cursor:pointer;color:inherit} .lkh-luoi .nut-ngay span{display:inline-block;padding:2px 6px;border-radius:99px;color:var(--chu)} .lkh-luoi .o-ngay.ngoai .nut-ngay span{color:var(--chu-mo)} .lkh-luoi .nut-ngay:hover span{background:var(--vien)} .lkh-luoi .o-ngay.nay .nut-ngay span{background:var(--chinh);color:var(--trang);font-weight:700} @media (max-width:720px){ .lkh-dong{grid-template-columns:62px 10px minmax(0,1fr);padding:9px 12px;gap:8px} .lkh-dong .lkh-gio .mo{display:none} .lkh-dong.gt{grid-template-columns:44px minmax(0,1fr)} .lkh-dong.gt .lkh-loai{display:none} .lkh-nguoi{display:none} .lkh-dong.trong-ngay{padding-left:92px} .lkh-luoi .o-ngay{min-height:64px;padding:3px} .lkh-luoi .buoi .gio{display:none} } /* ---- v110 BÁO CÁO TÀI CHÍNH (/finance/reports) — bảng 12 tháng cuộn ngang trong khung, cột tên dính trái ---- */ .bctc-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch} table.bctc{width:100%;min-width:980px;border-collapse:separate;border-spacing:0;font-size:12.5px} table.bctc th,table.bctc td{padding:7px 9px;white-space:nowrap;border-bottom:1px solid var(--vien)} table.bctc th{font-size:11.5px;color:var(--chu-mo);font-weight:600;background:var(--nen-2)} table.bctc .ten-khoan{position:sticky;left:0;z-index:1;background:var(--trang);min-width:200px;max-width:260px;white-space:normal} table.bctc th.ten-khoan{background:var(--nen-2)} table.bctc td.so{font-variant-numeric:tabular-nums} table.bctc th:not(.ten-khoan),table.bctc td.so{min-width:96px} table.bctc .cot-nam{font-weight:600;background:rgba(26,115,232,.05)} table.bctc .cot-truoc{color:var(--chu-mo)} table.bctc .cot-truoc .nho{display:block;font-size:10.5px} table.bctc th.tuong-lai{opacity:.55} table.bctc tr.cap-0 td{font-weight:600} table.bctc tr.cap-1 td.ten-khoan{padding-left:24px;color:var(--chu-mo);font-weight:400} table.bctc tr.cap-1 td{color:var(--chu-mo)} table.bctc tr.kieu-gop td,table.bctc tr.kieu-gop td.ten-khoan{background:#F1F6FE} table.bctc tr.kieu-rong td,table.bctc tr.kieu-rong td.ten-khoan{background:#E8F0FE;font-weight:700;border-top:2px solid var(--chinh)} table.bctc tr.dong-ton td,table.bctc tr.dong-ton td.ten-khoan{background:var(--nen-2);font-weight:600} table.bctc tr.dong-ton.cuoi td{border-top:2px solid var(--vien-dam)} :root[data-giao-dien="toi"] table.bctc tr.kieu-gop td,:root[data-giao-dien="toi"] table.bctc tr.kieu-gop td.ten-khoan{background:rgba(138,180,248,.08)} :root[data-giao-dien="toi"] table.bctc tr.kieu-rong td,:root[data-giao-dien="toi"] table.bctc tr.kieu-rong td.ten-khoan{background:rgba(138,180,248,.16)} .bctc-ghi ul{margin:6px 0 0;padding-left:18px} .bctc-ghi li{margin:2px 0} .bctc-tuoi{display:flex;flex-direction:column;gap:9px;margin-top:6px} .bctc-tuoi .dong-tuoi{display:grid;grid-template-columns:110px minmax(0,1fr) 120px;align-items:center;gap:10px} .bctc-tuoi b{text-align:right;font-variant-numeric:tabular-nums} .bctc-tuoi .ong-tuoi{height:10px;border-radius:99px;background:var(--nen-2);overflow:hidden} .bctc-tuoi .ong-tuoi i{display:block;height:100%;border-radius:99px} .bctc-tuoi i.xanh{background:#1E8E3E}.bctc-tuoi i.vang{background:#F9AB00}.bctc-tuoi i.cam{background:#E37400}.bctc-tuoi i.do{background:#D93025} @media (max-width:720px){ .bctc-tuoi .dong-tuoi{grid-template-columns:92px minmax(0,1fr) 96px} table.bctc .ten-khoan{min-width:128px;max-width:150px} } /* ---- v111 Ô CHỌN KHÁCH (crm/_chon-khach.ejs) — link "Chọn khách" ở nhãn, ô hiện mã + tên, popup tìm ---- */ .truong-chon-khach > label{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .truong-chon-khach .sao-buoc{color:#C0392B;font-weight:700;margin-left:-6px} .link-chon-khach{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font:inherit;font-size:12.5px; font-weight:600;color:var(--chinh);cursor:pointer} .link-chon-khach:hover{text-decoration:underline} .o-chon-khach{position:relative} .o-chon-khach .hien-khach{cursor:pointer;caret-color:transparent;padding-right:32px;background:var(--trang)} .o-chon-khach .hien-khach:placeholder-shown{color:var(--chu-mo)} .o-chon-khach .xoa-khach{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--chu-mo); cursor:pointer;font-size:13px;padding:4px 6px;border-radius:6px} .o-chon-khach .xoa-khach:hover{background:var(--nen-2);color:var(--chu)} .lop-phu.lop-chon-khach{z-index:85} .lop-chon-khach .hop{max-width:560px} .ck-tim{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--vien);border-radius:20px;color:var(--chu-mo); background:var(--trang)} .ck-tim:focus-within{border-color:var(--chinh);box-shadow:0 0 0 3px rgba(26,115,232,.12)} .ck-tim input{flex:1;min-width:0;height:38px;border:0!important;outline:0;padding:0;margin:0;background:transparent;box-shadow:none!important} .ck-ds{margin-top:10px;max-height:min(52vh,420px);overflow-y:auto;border:1px solid var(--vien);border-radius:10px} .ck-dong{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--vien);background:var(--trang); padding:9px 12px;font:inherit;cursor:pointer;color:var(--chu)} .ck-dong:last-child{border-bottom:0} .ck-dong:hover,.ck-dong.sang{background:#E8F0FE} :root[data-giao-dien="toi"] .ck-dong:hover,:root[data-giao-dien="toi"] .ck-dong.sang{background:rgba(138,180,248,.14)} .ck-dong.dang .ck-ten::after{content:' ✓';color:var(--chinh);font-weight:700} .ck-ten{overflow-wrap:anywhere} .ck-ma{display:inline-block;min-width:66px;margin-right:6px;font-size:12px;color:var(--chinh);font-variant-numeric:tabular-nums} .ck-phu{padding-left:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ck-trong{padding:18px 12px;text-align:center;color:var(--chu-mo);font-size:13px} .ck-chan{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px} .ck-chan .nut[hidden]+a{margin-left:auto} .ma-kh{font-size:11.5px;color:var(--chu-mo);font-variant-numeric:tabular-nums;letter-spacing:.02em} .ma-kh-lon{font-size:.9rem;font-weight:500;vertical-align:middle} @media (max-width:720px){ .ck-phu{padding-left:0} .ck-ma{min-width:0} } /* ---- v112 CHUÔNG THÔNG BÁO (thanh đầu) + trang Tất cả thông báo ---- */ .chuong-tb{position:relative} .nut-chuong{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%; background:transparent;color:var(--chu);cursor:pointer} .nut-chuong:hover{background:var(--nen-2)} .nut-chuong .so-tb{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#D93025;color:#fff; font-size:10.5px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--trang)} .nut-chuong.rung svg{animation:rung-chuong .9s ease} @keyframes rung-chuong{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}} .menu-xo.menu-tb{width:min(380px,calc(100vw - 24px));padding:0;right:0;left:auto;overflow:hidden} .menu-tb .dau-tb{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--vien)} .menu-tb .dau-tb b{white-space:nowrap;font-size:14px} .menu-tb .dau-tb .nut-chu{padding:0;font-size:12.5px;white-space:nowrap} .menu-tb .ds-tb{max-height:min(60vh,440px);overflow-y:auto} .menu-tb .chan-tb{display:block;padding:10px 14px;text-align:center;font-size:13px;font-weight:600;border-top:1px solid var(--vien)} .tb-muc{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:10px 14px;border-bottom:1px solid var(--vien);color:var(--chu)} .tb-muc:hover{background:var(--nen-2);text-decoration:none} .tb-muc .tb-td{font-weight:600;font-size:13px;overflow-wrap:anywhere} .tb-muc .tb-nd{font-size:12px;color:var(--chu-mo);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tb-muc .tb-khi{font-size:11px;color:var(--chinh);margin-top:2px} .tb-trong{padding:26px 14px;text-align:center;color:var(--chu-mo);font-size:13px} .tb-bieu{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#E8F0FE;color:var(--chinh)} /* thông báo nổi góc dưới phải — có thông báo mới khi đang ở bất kỳ màn nào */ .tb-noi-khung{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 24px))} .tb-noi{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 14px;border-radius:12px;background:var(--trang); border:1px solid var(--vien);box-shadow:0 8px 28px rgba(12,39,64,.18);color:var(--chu);animation:tb-vao .25s ease} .tb-noi:hover{text-decoration:none;border-color:var(--chinh)} .tb-noi .tb-td{font-weight:600;font-size:13px}.tb-noi .tb-nd{font-size:12px;color:var(--chu-mo)} .tb-noi .tb-dong-x{border:0;background:none;color:var(--chu-mo);cursor:pointer;font-size:13px;padding:0 2px} @keyframes tb-vao{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media (max-width:600px){ .tb-noi-khung{right:8px;bottom:8px} .tb-noi:not(:last-child){display:none} } /* điện thoại: chỉ cái mới nhất */ /* cột trái khu Thư: mục Tất cả thông báo + số chưa đọc */ .muc-tb{position:relative} .dem-muc{margin-left:auto;min-width:20px;padding:1px 7px;border-radius:10px;background:#D93025;color:#fff;font-size:11px;font-weight:700;text-align:center} /* trang Tất cả thông báo */ .tb-trang{padding:0} .tb-dong{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 16px;border-top:1px solid var(--vien);color:var(--chu)} .tb-dong:hover{background:var(--nen-2);text-decoration:none} .tb-dong .tb-td{display:block;overflow-wrap:anywhere} .tb-dong.chua .tb-td{font-weight:700} .tb-dong .tb-nd{display:block;margin-top:2px;overflow-wrap:anywhere} .tb-dong .tb-gio{display:flex;align-items:center;gap:6px;white-space:nowrap} .tb-cham{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1A73E8} .tb-cai-dat summary{cursor:pointer} .tb-chon{display:flex;flex-wrap:wrap;gap:8px 18px} /* ---- v113 TRANG CHỦ + BẢNG TIN CÔNG TY (/home) ---- */ .home-luoi{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start} .home-trai{display:flex;flex-direction:column;gap:0;min-width:0} .home-viet input,.home-viet textarea{margin-bottom:8px} .home-viet textarea{min-height:70px} .bai{position:relative} .bai.chua-doc{border-left:3px solid var(--chinh)} .bai.ghim{background:linear-gradient(0deg,var(--trang),var(--trang)),#FFF8E1} .bai.chuc-mung{background:#FFFBEA} :root[data-giao-dien="toi"] .bai.chuc-mung{background:rgba(249,171,0,.08)} .bai-dau{display:flex;align-items:center;gap:10px;margin-bottom:8px} .bai-anh{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#E8F0FE;color:var(--chinh); font-weight:700;flex-shrink:0;font-size:15px} .chuc-mung .bai-anh{background:#FEF7E0;font-size:18px} .bai-ai{display:flex;flex-direction:column;min-width:0;flex:1} .bai-td{margin:0 0 6px;font-size:1.02rem} .bai-nd{margin:0 0 8px;white-space:pre-line;overflow-wrap:anywhere} .bai-chan{display:flex;align-items:center;gap:14px} .nut-vo-tay{border:1px solid var(--vien);background:var(--trang);border-radius:16px;padding:3px 10px;font:inherit;font-size:13px;cursor:pointer} .nut-vo-tay.da{border-color:#F9AB00;background:#FEF7E0} .bai-menu{margin-left:auto;position:relative} .bai-menu summary{list-style:none;cursor:pointer;padding:2px 8px;border-radius:8px;color:var(--chu-mo);font-size:18px;line-height:1} .bai-menu summary::-webkit-details-marker{display:none} .bai-menu-ds{position:absolute;right:0;top:28px;z-index:5;background:var(--trang);border:1px solid var(--vien);border-radius:10px; box-shadow:0 6px 20px rgba(12,39,64,.12);min-width:150px;padding:4px} .bai-menu-ds form{margin:0} .bai-menu-ds button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;font:inherit;cursor:pointer} .bai-menu-ds button:hover{background:var(--nen-2)} .home-phai .o{margin-bottom:16px} .home-h3{margin:14px 0 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em} .home-viec{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--vien);color:var(--chu);font-size:13.5px} .home-viec:last-child{border-bottom:0} .home-viec.khoi{display:block;line-height:1.45} .home-viec:hover{color:var(--chinh);text-decoration:none} .home-viec.canh{background:#FCE8E6;border-radius:8px;padding:9px 10px;border:0;margin-bottom:6px;color:#B3261E} @media (max-width:900px){ .home-luoi{grid-template-columns:minmax(0,1fr)} } /* v252.3 (phiếu YC-0013 — ông chủ 23:40: "Đề nghị duyệt và việc của tôi trên mobile cần ở trên đầu, trên cả tin nhé chỉ dưới chúc mừng"): màn hình hẹp trải phẳng 2 cột (display:contents) rồi xếp lại: Chúc mừng → Đề nghị & duyệt → Việc của tôi → ô đăng bài + bảng tin → phần còn lại. Máy tính không đổi. Khung nạp lại bằng data-home-song giữ thuộc tính nên giữ chỗ. */ @media (max-width:900px){ .home-luoi{display:flex;flex-direction:column;gap:0} .home-trai,.home-phai{display:contents} .home-trai > *,.home-phai > *{order:10} .home-luoi #cm-gop{order:1} .home-luoi [data-home-song="de-nghi"]{order:2} .home-luoi [data-home-song="viec"]{order:3} .home-luoi [data-home-song="de-nghi"],.home-luoi [data-home-song="viec"]{margin-bottom:16px} } /* ---- v114 ĐỀ NGHỊ & DUYỆT (/requests) ---- */ .dn-chuoi{list-style:none;margin:0;padding:0;counter-reset:cap} .dn-chuoi li{position:relative;padding:8px 0 8px 30px;border-left:2px solid var(--vien);margin-left:9px} .dn-chuoi li::before{content:'';position:absolute;left:-8px;top:10px;width:14px;height:14px;border-radius:50%;background:var(--trang);border:2px solid var(--vien-dam)} .dn-chuoi li.xong::before{background:#1E8E3E;border-color:#1E8E3E} .dn-chuoi li.dang::before{background:#F9AB00;border-color:#F9AB00} .dn-chuoi li.hong::before{background:#D93025;border-color:#D93025} .dn-chuoi li:last-child{border-left-color:transparent} .dn-bl{padding:8px 0;border-bottom:1px solid var(--vien)} .dn-bl:last-of-type{border-bottom:0} .dn-duyet{border:1px solid #F9AB00;background:#FFFBEA} :root[data-giao-dien="toi"] .dn-duyet{background:rgba(249,171,0,.08)} .dn-them td{background:var(--nen-2)} /* ---- v116 TIN NHẮN NỘI BỘ (/messages) — hai cột: hội thoại | khung chat ---- */ .tn-luoi{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;height:calc(100vh - var(--cao-tren, 60px) - 48px);min-height:460px} .tn-luoi > .o{margin:0;padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden} .tn-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 8px} .tn-dau h1{margin:0;font-size:1.25rem} .tn-tim{margin:0 14px 8px;height:36px} .tn-ds{overflow-y:auto;flex:1;min-height:0;padding:0 6px 8px} /* v254 (YC-0012): 3 tab Nội bộ · Web & Messenger · Cuộc gọi — dính đầu danh sách khi cuộn; số tin mới cạnh tên tab */ .tn-tab{display:flex;gap:4px;padding:2px 2px 8px;position:sticky;top:0;z-index:1;background:var(--trang)} .tn-tab button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:34px;padding:4px 5px;border:1px solid var(--vien); border-radius:9px;background:var(--trang);color:var(--chu-mo);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;line-height:1.15;text-align:center} /* chật thì chữ xuống dòng, 3 tab chia đều */ .tn-tab button.dang{background:var(--chinh);border-color:var(--chinh);color:#fff} .tn-tab .dem-muc{margin-left:0;flex:none} .tn-ht{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 8px;border-radius:10px;color:var(--chu)} .tn-ht[hidden]{display:none} /* v255: display:grid ở trên đè thuộc tính hidden ⇒ tab Nội bộ / Web / Cuộc gọi (YC-0012) và ô tìm không ẩn được dòng */ .tn-ht:hover{background:var(--nen-2);text-decoration:none} .tn-ht.dang{background:#E8F0FE} :root[data-giao-dien="toi"] .tn-ht.dang{background:rgba(138,180,248,.14)} .tn-ht.chua b,.tn-ht.chua .tn-cuoi{font-weight:700;color:var(--chu)} .tn-anh{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#E8F0FE;color:var(--chinh);font-weight:700;flex-shrink:0} .tn-anh.nhom{background:#FEF7E0;color:#B06000} .tn-giua{display:flex;flex-direction:column;min-width:0} .tn-giua b,.tn-cuoi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tn-phai{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .tn-trong{margin:auto;text-align:center;color:var(--chu-mo);padding:30px} .tn-trong-bieu{display:inline-flex;color:var(--vien-dam);margin-bottom:6px} .tn-dau-ht{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--vien)} .tn-dau-ht .tn-giua{flex:1} .tn-ve{display:none} .tn-tin{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:2px;background:var(--nen)} .tn-ngay{align-self:center;margin:12px 0 6px;padding:2px 10px;border-radius:10px;background:var(--nen-2);color:var(--chu-mo);font-size:11.5px} .tn-he-thong{align-self:center;margin:6px 0;color:var(--chu-mo);font-size:12px;font-style:italic} .tn-dong{display:flex;flex-direction:column;max-width:72%;margin-top:8px;position:relative} .tn-dong.lien{margin-top:2px} .tn-dong.toi{align-self:flex-end;align-items:flex-end} .tn-dong.ban{align-self:flex-start;align-items:flex-start} .tn-ten{font-size:11.5px;color:var(--chu-mo);margin:0 0 2px 10px} .tn-bong{padding:8px 12px 6px;border-radius:16px;background:var(--trang);border:1px solid var(--vien);color:var(--chu);overflow-wrap:anywhere} .tn-dong.toi .tn-bong{background:#12395F;border-color:#12395F;color:#FFFFFF} .tn-dong.toi .tn-bong a{color:#FFE7B0} .tn-dong.dong-nghiep .tn-bong{background:#DCE8F5;border-color:#C5D7EA;color:var(--chu)} .tn-dong.dong-nghiep .tn-bong a{color:var(--chinh)} .tn-dong.toi .tn-ten{margin:0 10px 2px 0} :root[data-giao-dien="toi"] .tn-dong.dong-nghiep .tn-bong{background:#23384F;border-color:#2E4A68;color:var(--chu)} .tn-bong.thu-hoi{background:transparent!important;color:var(--chu-mo)!important;border-style:dashed!important;font-style:italic} .tn-chu{white-space:pre-wrap} .tn-gio{display:block;font-size:10.5px;opacity:.65;text-align:right;margin-top:2px} .tn-anh-gui{display:block;max-width:260px;max-height:260px;border-radius:10px;margin-bottom:4px} .tn-tep{display:inline-block;margin-bottom:4px;font-weight:600} .tn-thu-hoi{display:none;border:0;background:none;color:var(--chu-mo);font-size:11px;cursor:pointer;padding:2px 4px} /* v182: CHUYỂN TIẾP — nút (rê chuột / chạm bong bóng) + nhãn người gửi gốc + hộp chọn người */ .tn-dong.toi.hien-nut .tn-thu-hoi{display:inline-block} .tn-ct-nhan{font-size:.72rem;font-style:italic;opacity:.8;margin-bottom:3px} /* v183: "Đã xem" — nhóm: chấm chữ cái dưới tin cuối mỗi người đọc tới; khung nhỏ: dòng nhỏ; bảng tin: danh sách */ .tn-xem-nhom{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-end;margin-top:2px} .tn-dong.ban .tn-xem-nhom{align-items:flex-start} .tn-xem-nut{display:inline-flex;gap:2px;align-items:center;border:0;background:none;padding:0;cursor:pointer} .tn-xem-anh{width:16px;height:16px;border-radius:50%;background:var(--nen-2);border:1px solid var(--vien);font-size:9px;font-weight:700;color:var(--chu-mo);display:inline-flex;align-items:center;justify-content:center} .tn-xem-them{font-size:10px;color:var(--chu-mo);margin-left:2px} .tn-xem-ds{display:none;font-size:.72rem;color:var(--chu-mo);background:var(--trang);border:1px solid var(--vien);border-radius:8px;padding:6px 8px;margin-top:3px} .tn-xem-nhom.mo .tn-xem-ds{display:block} .cn-da-xem{font-size:.66rem;color:var(--chu-mo);margin:1px 4px 0;text-align:right} .cn-tin.cua-ho .cn-da-xem{text-align:left} .bai-xem{color:var(--chu-mo)} .bai-xem-ds{display:flex;gap:24px;flex-wrap:wrap;font-size:.82rem;padding:8px 2px 2px;border-top:1px dashed var(--vien);margin-top:6px} .bai-xem-ds[hidden]{display:none} .bai-xem-cot{min-width:180px;display:grid;gap:2px} .bai-xem-td{font-weight:600;margin-bottom:2px} .cn-ct-nhan{font-size:.7rem;font-style:italic;opacity:.8;margin-bottom:2px;white-space:normal} .ct-nen{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px} .ct-hop{background:var(--trang);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.25);width:min(440px,100%);max-height:min(620px,calc(100vh - 32px));display:flex;flex-direction:column;gap:10px;padding:16px} .ct-dau{display:flex;justify-content:space-between;align-items:center} .ct-dong{border:0;background:none;font-size:1rem;cursor:pointer;color:var(--chu-mo)} .ct-tim,.ct-nhan{width:100%;margin:0} .ct-ds{overflow-y:auto;flex:1;min-height:120px;border:1px solid var(--vien);border-radius:10px;padding:6px} .ct-nhom{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--chu-mo);margin:6px 4px 2px} .ct-muc{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-weight:400;margin:0} .ct-muc:hover{background:var(--nen-2)} .ct-trong{padding:14px;text-align:center;color:var(--chu-mo)} .ct-bao{font-size:.85rem;color:var(--chinh);min-height:1em} .ct-chan{display:flex;justify-content:flex-end;gap:8px} .tn-dong.toi:hover .tn-thu-hoi{display:inline-block} /* v152: nút Xoá của quản trị — hiện khi rê chuột vào tin (điện thoại: luôn hiện mờ) */ .tn-xoa{display:none;border:0;background:none;color:#B3261E;font-size:11px;cursor:pointer;padding:2px 4px} .tn-dong:hover .tn-xoa{display:inline-block} @media (hover:none){ .tn-xoa{display:inline-block;opacity:.7} } .nut.do-chu{color:#B3261E;border-color:#E8B4B0} .tn-da-xem{font-size:11px;color:var(--chu-mo);margin-top:2px} .tn-viet{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--vien);background:var(--trang)} .tn-o-viet{flex:1;display:flex;flex-direction:column;gap:4px} .tn-o-viet [data-ten-tep][hidden]{display:none} .tn-o-viet [data-ten-tep]{align-self:flex-start} .tn-o-viet textarea{margin:0;resize:none;min-height:40px;max-height:160px;border-radius:20px;padding:9px 14px} .tn-kem{display:inline-flex;align-items:center;justify-content:center;width:38px;height:40px;cursor:pointer;color:var(--chu-mo);border-radius:50%} .tn-kem:hover{background:var(--nen-2);color:var(--chinh)} .tn-viet .nut{height:40px;border-radius:20px;padding:0 14px} .tn-chon-nguoi .ck-dong{cursor:pointer} .nut-tin{text-decoration:none;color:var(--chu)} @media (max-width:860px){ .tn-luoi{grid-template-columns:minmax(0,1fr);height:calc(100vh - var(--cao-tren, 60px) - 24px)} .tn-luoi.co-ht .tn-trai{display:none} .tn-luoi:not(.co-ht) .tn-phai-khung{display:none} .tn-ve{display:inline-flex} .tn-dong{max-width:86%} } /* v116: tiêu đề nhóm trên trang Cài đặt Trang chủ */ .khoi-cd{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chu-mo);margin:18px 2px 8px} /* v116: chữ cam — sắp đến hạn */ .cam-chu{color:#C26401} :root[data-giao-dien="toi"] .cam-chu{color:#F9A65A} /* ---- v116 SINH NHẬT TRONG TUẦN (Trang chủ) ---- */ .sinh-nhat{background:linear-gradient(180deg,#FFF8E6,var(--trang) 60%)} :root[data-giao-dien="toi"] .sinh-nhat{background:var(--trang)} .sn-dong{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--vien)} .sn-dong:last-of-type{border-bottom:0} .sn-dong.da-qua{opacity:.6} .sn-dong.hom-nay{background:#FEF7E0;border-radius:10px;padding:8px;border-bottom:0;margin:4px 0} :root[data-giao-dien="toi"] .sn-dong.hom-nay{background:rgba(249,171,0,.12)} .sn-ngay{display:flex;flex-direction:column;align-items:center;line-height:1.2;color:var(--chinh)} .sn-ten{display:flex;flex-direction:column;min-width:0} .sn-ten b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sn-dong.hom-nay .sn-ten .nho{color:#B06000;font-weight:600} .sn-khai{margin-top:10px;padding-top:10px;border-top:1px dashed var(--vien)} /* ===================== v117 — LỊCH ↔ CRM + sửa lỗi lịch (B1–B6) ===================== */ /* B1: cột lưới tháng ĐỀU nhau — 1fr cũ = minmax(auto,1fr) nên tên dài kéo giãn cột (thứ Sáu 269px); chữ dài cắt "…" + rê chuột xem đủ */ .lich-luoi{grid-template-columns:repeat(7,minmax(0,1fr))} .lich-luoi .o-ngay{min-width:0} .buoi .ten{min-width:0;flex:1 1 auto;white-space:nowrap} .buoi.ca-ngay{background:var(--mau-sk,var(--chinh));color:#fff;margin-bottom:2px} .buoi.ca-ngay:hover{background:var(--mau-sk,var(--chinh));filter:brightness(.93)} /* được mời, chưa trả lời: viền (kiểu Google) */ .buoi.cho-tra-loi{background:var(--trang);box-shadow:inset 0 0 0 1px var(--mau-sk)} .buoi.ca-ngay.cho-tra-loi{color:var(--mau-sk)} /* tuần / ngày: cột theo số ngày thật (auto-fit cũ chỉ tạo 1 cột, các cột sau tự co giãn lệch nhau) + hàng "Cả ngày" */ .lich-gio.lich-tuan{min-width:0} .lich-gio.lich-tuan .dau-cot,.lich-gio.lich-tuan .than-gio,.lich-tuan .hang-ca-ngay{grid-template-columns:58px repeat(var(--so-cot,7),minmax(0,1fr))} .lich-tuan .hang-ca-ngay{display:grid;border-bottom:1px solid var(--vien);background:var(--trang)} /* thân lưới có thanh cuộn dọc → đầu cột + hàng cả ngày chừa đúng chỗ đó (khỏi lệch ~2px mỗi cột) */ .lich-tuan .dau-cot,.lich-tuan .hang-ca-ngay{overflow-y:hidden;scrollbar-gutter:stable} .lich-tuan .nhan-ca-ngay{font-size:.72rem;color:var(--chu-mo);text-align:right;padding:7px 7px 0 0} .lich-tuan .o-ca-ngay{border-left:1px solid var(--vien);padding:3px;min-width:0;max-height:104px;overflow-y:auto} .buoi-gio{min-width:0} .buoi-gio.cho-tra-loi{background:var(--trang);color:var(--mau-sk);box-shadow:inset 0 0 0 1.5px var(--mau-sk)} /* B3: chấm màu ở cột trái là ô chọn màu */ .ds-lich input[type=color].cham-lich{-webkit-appearance:none;appearance:none;width:13px;height:13px;padding:0;margin:0;border:0;border-radius:3px;background:none;cursor:pointer;flex-shrink:0} .ds-lich input[type=color].cham-lich::-webkit-color-swatch-wrapper{padding:0} .ds-lich input[type=color].cham-lich::-webkit-color-swatch{border:0;border-radius:3px} .ds-lich input[type=color].cham-lich::-moz-color-swatch{border:0;border-radius:3px} /* B4: hộp xem nhanh */ .lop-phu .hop.hop-xem-sk{max-width:460px} .hop-xem-sk .hop-dau{align-items:flex-start} .hop-xem-sk .cham-xem{width:14px;height:14px;border-radius:4px;flex-shrink:0;margin-top:5px} .hop-xem-sk h2{margin:0;font-size:1.08rem;flex:1;min-width:0;overflow-wrap:anywhere} .dong-xem{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:6px 0;font-size:.9rem} .dong-xem[hidden]{display:none} .dong-xem .bieu{color:var(--chu-mo);display:flex;padding-top:1px} .xem-mo-ta{white-space:pre-wrap;overflow-wrap:anywhere} .ds-du{list-style:none;margin:4px 0 0;padding:0} .ds-du li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;border-bottom:1px dashed var(--vien)} .tt-du{font-size:.74rem;padding:1px 8px;border-radius:99px;background:var(--nen-2);color:var(--chu-mo);white-space:nowrap} .tt-du.tt-nhan{background:#E6F4EA;color:#188038}.tt-du.tt-tu_choi{background:#FCE8E6;color:#C5221F}.tt-du.tt-co_the{background:#FEF7E0;color:#B06000} .hop-xem-sk .hop-chan{flex-wrap:wrap;gap:8px} .tra-loi-moi{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0} .tra-loi-moi[hidden]{display:none} .nut-xoa-sk{color:#C5221F} /* B5: [hidden] thắng mọi luật display trong hộp sửa (trước đây .hang{display:grid} đè `hidden` → khối lặp luôn hiện) */ .hop-sk [hidden]{display:none!important} /* B5: mọi dòng một ô của hộp sửa: nhãn NẰM TRÊN ô (luật chung .hang là lưới 2 cột → nhãn trái, ô phải, lệch với các dòng đôi) */ .hop-sk .hang:not(.doi):not(.tich):not(.khoi-lap){display:block} .hop-sk .khoi-lap{gap:10px} .dong-lap{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px} .nhan-lap{font-size:.82rem;color:var(--chu-mo)} .hop-sk input.o-so-nho{width:76px} .hop-sk input.o-ngay-lap{width:auto;flex:1 1 140px} .hop-sk .ngay-gio{flex-wrap:wrap} /* B6: mời người dự */ .chon-nguoi-du{position:relative} .chip-moi-du{display:flex;flex-wrap:wrap;gap:6px} .chip-moi-du:not(:empty){margin-bottom:6px} .chip-moi-du .chip{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border-radius:99px;background:var(--nen-2);border:1px solid var(--vien);font-size:.82rem} .chip-moi-du .chip button{border:0;background:none;cursor:pointer;color:var(--chu-mo);font-size:.72rem;padding:0 5px} .ds-nguoi-du{position:absolute;left:0;right:0;top:100%;z-index:5;margin-top:4px;max-height:210px;overflow-y:auto;background:var(--trang); border:1px solid var(--vien);border-radius:var(--r);box-shadow:0 6px 18px rgba(16,32,52,.14);padding:4px} .hop-sk .ds-nguoi-du .mot-nguoi{display:flex;align-items:center;gap:8px;margin:0;padding:6px 8px;border-radius:6px;cursor:pointer;color:var(--chu);font-size:.88rem} .hop-sk .ds-nguoi-du .mot-nguoi:hover{background:var(--nen-2)} .trong-nguoi{padding:8px} /* dải lời mời chờ trả lời */ .loi-moi{border:1px solid #F3D58A;background:#FEF7E0;border-radius:var(--r);padding:10px 14px;margin:0 0 12px} .loi-moi-dau{display:flex;align-items:center;gap:6px;margin-bottom:4px;color:#8A5A00} .mot-moi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0 2px;border-top:1px dashed #F3D58A} .mot-moi .tra-loi-nhanh{margin:0 0 0 auto;display:flex;gap:6px} :root[data-giao-dien="toi"] .loi-moi{background:rgba(253,214,99,.08);border-color:rgba(253,214,99,.3)} :root[data-giao-dien="toi"] .loi-moi-dau{color:#FDD663} @media (max-width:640px){ .dong-lap{grid-template-columns:1fr;gap:4px} .lich-luoi .buoi .gio{display:none} .lich-luoi .o-ngay{padding:4px 3px} } /* v118: tên khách trên sự kiện (kết nối lịch ↔ CRM) · việc tiếp theo của khách (cả ngày, viền đứt) */ .buoi .khach-sk{opacity:.78;font-weight:400} .buoi.viec-crm{background:var(--trang);color:var(--chu);box-shadow:inset 0 0 0 1px var(--mau-sk);border-left:3px solid var(--mau-sk)} .buoi.viec-crm:hover{background:var(--nen-2);filter:none} /* v118: bình luận bảng tin */ .bai-bl{border-top:1px solid var(--vien);margin-top:10px;padding-top:8px;display:flex;flex-direction:column;gap:8px} .bai-bl.thu-gon .mot-bl.cu{display:none} .bl-xem-cu{align-self:flex-start} .mot-bl{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start} .bl-anh{width:28px;height:28px;border-radius:50%;background:var(--nen-2);border:1px solid var(--vien);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--chu-mo)} .bl-than{background:var(--nen-2);border-radius:10px;padding:6px 10px;min-width:0} .bl-dau{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.86rem} .bl-xoa{margin:0 0 0 auto} .bl-xoa .nut-chu{font-size:.74rem;color:var(--chu-mo)} .bl-nd{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;margin-top:2px} .bl-viet{display:flex;gap:8px;align-items:flex-end;margin:0} .bl-viet textarea{flex:1;min-height:36px;resize:none;margin:0;border-radius:18px;padding:8px 14px} /* v118: hướng dẫn nội bộ + chọn người nhận tiền của đề nghị */ .hd-nd{overflow-wrap:anywhere;line-height:1.7;font-size:.95rem;color:var(--chu)} .hd-bai{min-width:0} .hd-soan .hd-o-nd{min-height:360px;font-family:inherit;line-height:1.6} .chon-nhan{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 0 8px} .chon-nhan label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400} [data-dnk-them-o][hidden],[data-nhan-o][hidden],[data-o-nhan][hidden],[data-o-dm][hidden],[data-o-ngay][hidden]{display:none} /* .hang{display:grid} đè hidden — ô Từ/Đến ngày hiện cả với đề nghị thanh toán */ /* v119: trả lại lớp CRM ở lịch (ông chủ chốt giữ như v117) */ /* mốc CRM (ảo, chỉ xem — bấm mở chứng từ): nền nhạt cùng màu lớp + vạch trái */ .buoi.ao{text-decoration:none;background:color-mix(in srgb,var(--mau-sk) 13%,transparent);box-shadow:inset 3px 0 0 var(--mau-sk);margin-bottom:2px;padding-left:7px} .buoi.ao:hover{background:color-mix(in srgb,var(--mau-sk) 24%,transparent);text-decoration:none} .buoi.ao .gio{color:inherit;opacity:.75} .buoi-gio.ao{text-decoration:none;color:var(--chu);background:color-mix(in srgb,var(--mau-sk) 16%,var(--trang));box-shadow:inset 3px 0 0 var(--mau-sk)} .buoi-gio.ao:hover{text-decoration:none;background:color-mix(in srgb,var(--mau-sk) 26%,var(--trang))} .ds-lich .cham-lich.lop-crm{border-radius:50%} .ds-lich .nhom-lop-crm{margin:16px 4px 4px} /* thẻ Lịch vào CRM */ .ds-lop-crm{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 18px;margin:4px 0 16px} .mot-lop-crm{display:grid;grid-template-columns:18px 12px minmax(0,1fr);gap:8px;align-items:start;margin:0;padding:8px 10px;border:1px solid var(--vien);border-radius:var(--r);cursor:pointer;font-weight:400} .mot-lop-crm input{margin:2px 0 0} .mot-lop-crm .cham-lop{width:12px;height:12px;border-radius:50%;margin-top:3px} /* v119: Cài đặt Trang chủ hai cột — trái danh sách mục, phải chi tiết */ .cd-2cot{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start} .cd-menu{display:flex;flex-direction:column;gap:4px;background:var(--trang);border:1px solid var(--vien);border-radius:var(--r);padding:6px;position:sticky;top:12px} .cd-menu a{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;color:var(--chu);text-decoration:none} .cd-menu a:hover{background:var(--nen-2);text-decoration:none} .cd-menu a.dang{background:color-mix(in srgb,var(--chinh) 12%,transparent);color:var(--chinh)} .cd-menu .bieu{display:flex;padding-top:2px;color:var(--chu-mo)} .cd-menu a.dang .bieu{color:var(--chinh)} .cd-menu b{display:block;font-size:.92rem} .cd-menu small{display:block;font-size:.76rem;color:var(--chu-mo);margin-top:1px} .cd-chi-tiet{min-width:0} .cd-chi-tiet .cuon-ngang{overflow-x:auto} @media (max-width:820px){ .cd-2cot{grid-template-columns:1fr} .cd-menu{position:static;flex-direction:row;overflow-x:auto} .cd-menu a{flex:0 0 auto} .cd-menu small{display:none} } /* v120: khung chat nhỏ nội bộ (views/partials/chat-noi-bo.ejs) — góc dưới phải; thông báo nổi đẩy lên trên nút */ .cn{position:fixed;right:18px;bottom:18px;z-index:90} .cn-nut{width:52px;height:52px;border-radius:50%;border:0;background:var(--chinh);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:0 6px 18px rgba(16,32,52,.26);position:relative;margin-left:auto} .cn-nut:hover{filter:brightness(1.08)} .cn.dang-mo .cn-nut{display:none} .cn-so{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#D93025;color:#fff;font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center;border:2px solid var(--trang)} .cn-so[hidden]{display:none} body:has(.cn) .tb-noi-khung{bottom:82px} body.cn-dang-mo .tb-noi-khung{right:400px} .cn-hop{width:min(370px,calc(100vw - 24px));height:min(520px,calc(100vh - 90px));background:var(--trang);border:1px solid var(--vien);border-radius:14px; box-shadow:0 14px 40px rgba(16,32,52,.22);display:flex;flex-direction:column;overflow:hidden} .cn-hop[hidden]{display:none} .cn-dau{display:flex;align-items:center;gap:4px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--vien)} .cn-tieu{flex:1;min-width:0} .cn-tieu b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cn-tieu small{display:block;font-size:.72rem;color:var(--chu-mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cn-tieu small:empty{display:none} .cn-nut-nho{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--chu-mo);cursor:pointer;display:flex;align-items:center;justify-content:center} .cn-nut-nho:hover{background:var(--nen-2);color:var(--chu)} .cn-nut-nho[hidden]{display:none} .cn-tim{padding:8px 10px;border-bottom:1px solid var(--vien)} .cn-tim[hidden]{display:none} .cn-tim input{width:100%;margin:0;height:34px} /* v254 (YC-0012): 3 tab trong khung chat nhỏ */ .cn-tab{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--vien)} .cn-tab[hidden]{display:none} .cn-tab button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:5px 4px;border:1px solid var(--vien);border-radius:8px; background:var(--trang);color:var(--chu-mo);font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;line-height:1.15;text-align:center} .cn-tab button.dang{background:var(--chinh);border-color:var(--chinh);color:#fff} .cn-tab .cn-dem{position:static;margin:0;flex:none;min-width:18px;height:18px;padding:0 5px;background:#C62828} .cn-tab .cn-dem[hidden]{display:none} .cn-than{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px} .cn-trong{padding:28px 10px;text-align:center;color:var(--chu-mo);font-size:.88rem} .cn-ht{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:8px;border-radius:10px;cursor:pointer;font:inherit;color:var(--chu)} .cn-ht:hover{background:var(--nen-2)} .cn-ht.chua b{font-weight:700} .cn-anh{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--nen-2);border:1px solid var(--vien);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--chu-mo)} .cn-anh.nhom{background:#E8F0FE;color:#1A73E8} .cn-anh.web{background:#E6F4EA} .cn-giua{flex:1;min-width:0} .cn-giua b{display:block;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cn-giua small{display:block;font-size:.78rem;color:var(--chu-mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cn-dem{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--chinh);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center} .cn-tin{display:flex;flex-direction:column;max-width:82%;margin:3px 4px} .cn-tin.cua-toi{align-self:flex-end;align-items:flex-end} .cn-tin.cua-ho{align-self:flex-start} .cn-ai{font-size:.72rem;color:var(--chu-mo);margin:0 0 2px 4px} .cn-bong{padding:7px 11px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;line-height:1.42} .cua-toi .cn-bong{background:var(--chinh);color:#fff;border-bottom-right-radius:4px} .cua-toi .cn-bong .cn-tep{color:#fff} .dong-nghiep .cn-bong{background:#DCE8F5;color:var(--chu)} .dong-nghiep .cn-bong .cn-tep{color:var(--chinh)} :root[data-giao-dien="toi"] .dong-nghiep .cn-bong{background:#23384F} .cua-ho .cn-bong{background:var(--nen-2);border-bottom-left-radius:4px} .cn-bong.thu-hoi{font-style:italic;opacity:.7} .cn-gio{font-size:.68rem;color:var(--chu-mo);margin:1px 4px 0} .cn-he{align-self:center;font-size:.74rem;color:var(--chu-mo);padding:4px 8px} .cn-he.loi{color:#C5221F} .cn-hop{position:relative} .cn-moi{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;border:0;border-radius:99px;background:var(--chinh);color:#fff;font:inherit;font-size:.78rem;font-weight:600;padding:5px 12px;box-shadow:0 4px 12px rgba(16,32,52,.25);cursor:pointer;z-index:2} .cn-moi[hidden]{display:none} .cn-viet{display:flex;gap:6px;align-items:flex-end;padding:8px;border-top:1px solid var(--vien);margin:0} .cn-viet[hidden]{display:none} .cn-viet textarea{flex:1;margin:0;resize:none;min-height:38px;max-height:110px;border-radius:18px;padding:8px 12px;line-height:1.4} .cn-gui{width:38px;height:38px;border-radius:50%;border:0;background:var(--chinh);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} .tn-anh.web{background:#E6F4EA} /* v150: hội thoại kênh (Messenger) — ảnh đại diện khách + dải trạng thái 24 giờ */ .tn-anh{overflow:hidden} .tn-anh img,.cn-anh img{width:100%;height:100%;object-fit:cover;display:block} .cn-anh{overflow:hidden} .tn-anh.kenh-facebook,.cn-anh.kenh-facebook{background:#E7F0FF;color:#0866FF;font-family:Arial,sans-serif} .tn-kenh{padding:6px 16px;font-size:13px;background:#E7F0FF;color:#0B3D91;border-bottom:1px solid var(--vien)} .tn-kenh.het{background:#FEF7E0;color:#7A4B00} :root[data-giao-dien="toi"] .tn-kenh{background:#1B2A44;color:#C6DAFF} :root[data-giao-dien="toi"] .tn-kenh.het{background:#3A2E12;color:#FFE1A3} .hd-kenh ol{margin:0;padding-left:22px} .hd-kenh li{margin:0 0 14px} .hd-kenh li p{margin:2px 0 6px} .hd-kenh .truong{max-width:640px} .ds-truc{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px} @media (max-width:640px){ .cn{right:12px;bottom:12px} .cn-hop{height:calc(100vh - 80px)} body.cn-dang-mo .tb-noi-khung{display:none} } @media print{ .cn{display:none} } /* v122: người quản lý chat website — ô 🔔 nhận chuông cạnh tên */ .mot-quan-ly{display:flex;align-items:center;justify-content:space-between;gap:8px} .mot-quan-ly .chuong-ql{display:inline-flex;align-items:center;gap:4px;margin:0;cursor:pointer} /* ===================== v124 — THÔNG BÁO CÓ SỨC SỐNG (ông chủ: "phân loại màu sắc đẹp chút, cho nó sinh động… tất cả mọi chỗ đều phải có sức sống") — MỖI LOẠI MỘT MÀU, dùng thống nhất ở: biểu tượng tròn · nhãn loại · chip lọc · dòng trang Thông báo · chuông thả xuống · thông báo nổi · khung "Thông báo" Trang chủ. Nhóm màu theo ý nghĩa: tiền vào / bán = xanh lá · thư, tin nhắn, liên hệ = xanh dương – lam – ngọc · chờ duyệt / đề nghị / hết hạn = cam – hồng – đỏ · lịch = tím · bảng tin = vàng đồng TTP. Chế độ Tối pha sáng màu chữ, nền là màu loại pha trong suốt. ===================== */ .tb-bieu{--c:#5B6878} .loai-thu_moi{--c:#1A73E8} /* Thư mới — xanh Google */ .loai-nhan_tin{--c:#0891B2} /* Tin nhắn nội bộ — xanh lơ */ .loai-tin_nhan{--c:#0F9F87} /* Tin nhắn khách (Zalo / Messenger) — ngọc */ .loai-lien_he{--c:#4F46E5} /* Liên hệ mới — chàm */ .loai-don_moi{--c:#4D8B12} /* Đơn hàng mới — xanh lá non */ .loai-khach_tra{--c:#188038} /* Khách trả tiền — xanh lá tiền vào */ .loai-cho_duyet{--c:#E8710A} /* Chờ duyệt — cam */ .loai-de_nghi{--c:#D63F7A} /* Đề nghị — hồng */ .loai-het_han{--c:#C5221F} /* Sắp hết hạn — đỏ */ .loai-nhac_lich{--c:#8430CE} /* Nhắc lịch — tím */ .loai-moi_hop{--c:#B0279B} /* Lời mời lịch — tím hồng */ .loai-bang_tin{--c:#B07F24} /* Bảng tin — vàng đồng TTP */ .loai-chi_dinh_ky{--c:#D9480F} /* v135 Khoản chi định kỳ — cam đất (tiền ra, có hạn) */ .loai-khac{--c:#5B6878} /* Khác — xám */ /* biểu tượng tròn */ .tb-bieu[class*="loai-"]{background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)} /* nhãn loại trong dòng thông báo */ .nhan-loai{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.72rem;font-weight:600;line-height:1.6; color:var(--c);background:color-mix(in srgb,var(--c) 11%,#fff);border:1px solid color-mix(in srgb,var(--c) 26%,transparent)} /* trang Thông báo: CHƯA ĐỌC nổi hẳn — nền nhạt màu loại + vạch màu bên trái + chấm màu; đã đọc lùi lại */ .tb-dong{position:relative} .tb-dong.chua{background:color-mix(in srgb,var(--c,#1A73E8) 7%,var(--trang));box-shadow:inset 3px 0 0 var(--c,#1A73E8)} .tb-dong.chua:hover{background:color-mix(in srgb,var(--c,#1A73E8) 12%,var(--trang))} .tb-dong:not(.chua) .tb-bieu{filter:saturate(.55);opacity:.8} .tb-dong:not(.chua) .tb-td{color:var(--chu-mo)} .tb-dong .tb-cham{background:var(--c,#1A73E8);box-shadow:0 0 0 3px color-mix(in srgb,var(--c,#1A73E8) 20%,transparent)} /* chuông thả xuống + thông báo nổi + khung Trang chủ: vạch màu loại */ .tb-muc[class*="loai-"]{box-shadow:inset 3px 0 0 var(--c)} .tb-muc[class*="loai-"]:hover{background:color-mix(in srgb,var(--c) 8%,var(--trang))} .tb-muc .tb-khi{color:var(--c,var(--chinh))} .tb-noi[class*="loai-"]{border-left:4px solid var(--c)} .home-viec.tb-home{box-shadow:inset 3px 0 0 var(--c);padding-left:9px;border-radius:6px} .home-viec.tb-home:hover{background:color-mix(in srgb,var(--c) 8%,var(--trang))} /* chip lọc đầu trang theo loại (chip-tt dùng sẵn biến --c) */ .chip-tt.chip-loai:not(.dang){background:color-mix(in srgb,var(--c) 8%,#fff);border-color:color-mix(in srgb,var(--c) 35%,transparent);color:var(--c)} .chip-tt.chip-loai .cham-loai{width:8px;height:8px;border-radius:50%;background:var(--c);display:inline-block} .chip-tt.chip-loai.dang .cham-loai{background:#fff} /* ---- chế độ Tối ---- */ :root[data-giao-dien="toi"] .tb-bieu[class*="loai-"]{background:color-mix(in srgb,var(--c) 24%,transparent);color:color-mix(in srgb,var(--c) 55%,#fff);box-shadow:none} :root[data-giao-dien="toi"] .nhan-loai{background:color-mix(in srgb,var(--c) 20%,transparent);color:color-mix(in srgb,var(--c) 55%,#fff);border-color:color-mix(in srgb,var(--c) 45%,transparent)} :root[data-giao-dien="toi"] .tb-dong.chua{background:color-mix(in srgb,var(--c,#1A73E8) 13%,transparent)} :root[data-giao-dien="toi"] .tb-dong.chua:hover{background:color-mix(in srgb,var(--c,#1A73E8) 19%,transparent)} :root[data-giao-dien="toi"] .tb-muc[class*="loai-"]:hover,:root[data-giao-dien="toi"] .home-viec.tb-home:hover{background:color-mix(in srgb,var(--c) 15%,transparent)} :root[data-giao-dien="toi"] .tb-muc .tb-khi{color:color-mix(in srgb,var(--c,#7FB2E8) 55%,#fff)} :root[data-giao-dien="toi"] .chip-tt.chip-loai:not(.dang){background:color-mix(in srgb,var(--c) 16%,transparent);color:color-mix(in srgb,var(--c) 55%,#fff)} /* v125: ô thứ tự + nút ▲▼ sắp xếp nhanh */ .o-thu-tu{display:flex;align-items:center;gap:6px} .o-thu-tu input{width:62px;min-width:0} .nut-len-xuong{display:inline-flex;flex-direction:column;gap:2px} .nut-len-xuong button{width:28px;height:18px;padding:0;border:1px solid var(--vien);border-radius:5px;background:var(--trang);color:var(--chinh); font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .nut-len-xuong button:hover:not(:disabled){background:var(--chinh);color:#fff;border-color:var(--chinh)} .nut-len-xuong button:disabled{opacity:.3;cursor:default} tr.vua-doi td{animation:vua-doi 1s ease} @keyframes vua-doi{from{background:color-mix(in srgb,var(--nhan) 22%,transparent)}to{background:transparent}} /* ===================== v128 — HƯỚNG DẪN NỘI BỘ "TƯƠI và NĂNG LƯỢNG" — màu theo nhóm (--m / --c), nhãn loại bài ===================== */ .chip-tt.chip-nhom:not(.dang){background:color-mix(in srgb,var(--c) 8%,#fff);border-color:color-mix(in srgb,var(--c) 35%,transparent);color:var(--c)} .chip-tt.chip-nhom .cham-loai{width:8px;height:8px;border-radius:50%;background:var(--c);display:inline-block} .chip-tt.chip-nhom.dang .cham-loai{background:#fff} .hd-ds{display:flex;flex-direction:column;gap:22px} .hd-nhom-khoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px} .hd-nhom{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0;font-size:1.02rem;color:var(--m)} .hd-vach{width:6px;height:22px;border-radius:4px;background:var(--m)} .hd-the{display:flex;flex-direction:column;gap:6px;background:var(--trang);border:1px solid var(--vien);border-radius:12px;padding:14px 16px 12px 18px; color:var(--chu);box-shadow:inset 4px 0 0 var(--m);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease} .hd-the:hover{text-decoration:none;transform:translateY(-2px);border-color:color-mix(in srgb,var(--m) 45%,transparent); box-shadow:inset 4px 0 0 var(--m),0 10px 22px color-mix(in srgb,var(--m) 16%,transparent);background:color-mix(in srgb,var(--m) 4%,var(--trang))} .hd-the-dau{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .hd-the-dau b{font-size:.98rem;line-height:1.35} .hd-tom{font-size:.86rem;color:var(--chu-mo);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hd-ghim{font-size:.85rem} .hd-loai{--l:#5B6878;display:inline-block;padding:1px 8px;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.02em;white-space:nowrap; color:var(--l);background:color-mix(in srgb,var(--l) 12%,#fff);border:1px solid color-mix(in srgb,var(--l) 30%,transparent)} .loai-bai-cach_dung{--l:#1C7ED6}.loai-bai-quy_trinh{--l:#E8590C}.loai-bai-quy_tac{--l:#C92A2A} .hd-xem-phu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px} .hd-bai{box-shadow:inset 4px 0 0 var(--m);padding:22px 26px} .hd-nd p{margin:0 0 .9em} .hd-nd .hd-muc{font-size:.86rem;letter-spacing:.06em;color:var(--m);margin:1.4em 0 .5em;padding-left:10px;border-left:3px solid var(--m)} .hd-nd .hd-muc:first-child{margin-top:0} .hd-nd .hd-ke{border:0;border-top:1px solid color-mix(in srgb,var(--m) 30%,var(--vien));margin:1.2em 0} .hd-cung-nhom h2{color:var(--m)} :root[data-giao-dien="toi"] .chip-tt.chip-nhom:not(.dang){background:color-mix(in srgb,var(--c) 16%,transparent);color:color-mix(in srgb,var(--c) 55%,#fff)} :root[data-giao-dien="toi"] .hd-nhom,:root[data-giao-dien="toi"] .hd-nd .hd-muc,:root[data-giao-dien="toi"] .hd-cung-nhom h2{color:color-mix(in srgb,var(--m) 60%,#fff)} :root[data-giao-dien="toi"] .hd-the:hover{background:color-mix(in srgb,var(--m) 10%,var(--trang))} :root[data-giao-dien="toi"] .hd-loai{background:color-mix(in srgb,var(--l) 20%,transparent);color:color-mix(in srgb,var(--l) 55%,#fff)} @media (max-width:640px){ .hd-nhom-khoi{grid-template-columns:1fr} .hd-bai{padding:16px 16px} } /* ---- v131 CPLATFORM-APP: dải nhắc trong app (mời bật thông báo · có bản APK mới) + khối Thông báo đẩy ---- */ .app-dai{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px 10px 14px;border-radius:var(--r); --c:#0E7C66;background:color-mix(in srgb,var(--c) 9%,var(--trang));border:1px solid color-mix(in srgb,var(--c) 30%,var(--vien)); color:var(--chu);font-size:.9rem;box-shadow:var(--bong)} .app-dai[hidden]{display:none} .app-dai > span{flex:1 1 auto;min-width:0} @media (max-width:640px){ .app-dai{flex-wrap:nowrap;gap:8px;font-size:.86rem;padding:8px 6px 8px 12px} .app-dai .nut{white-space:nowrap} } .app-dai::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);flex:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)} .app-dai-moi{--c:var(--nhan)} .app-dai .nut{min-height:32px} .app-dai .nut-x{border:0;background:transparent;color:var(--chu-mo);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px} .app-dai .nut-x:hover{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--chu)} .tb-day{margin-top:14px;--c:#0E7C66} .tb-day-dau{display:flex;gap:12px;align-items:flex-start} .tb-day-bieu{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--c); background:color-mix(in srgb,var(--c) 13%,var(--trang))} .tb-day-tt{margin:12px 0 10px;font-size:.88rem;font-weight:600;color:var(--c)} .tb-day-tt:empty{display:none} .tb-day-tt[data-tt="chua"]{color:var(--chu-mo)} .tb-day-tt[data-tt="chan"],.tb-day-tt[data-tt="loi"],.tb-day-tt[data-tt="khong"]{color:#C2410C} .tb-day-nut{gap:8px;flex-wrap:wrap;align-items:center} .tb-day-nut [hidden]{display:none} .tb-day-tai{margin-left:auto;font-weight:600} .tb-day-ds{margin-top:14px;border-top:1px dashed var(--vien);padding-top:10px;display:grid;gap:6px} .tb-day-may{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:6px 8px;border-radius:8px;background:var(--nen-2)} .tb-day-ten{flex:1 1 140px;min-width:0;font-weight:500} .nhan-nen{--m:#5B6B7F;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;color:var(--m); background:color-mix(in srgb,var(--m) 14%,var(--trang))} .nhan-nen.nen-android{--m:#2E8B3E} .nhan-nen.nen-pwa{--m:#7A4BD0} :root[data-giao-dien="toi"] .app-dai,:root[data-giao-dien="toi"] .tb-day{--c:#4CC9A6} /* Trong app điện thoại: bỏ khoảng thừa cho màn hẹp */ html[data-app] .chinh{padding-top:16px} /* ==== v133 HỘP THƯ CÓ SỨC SỐNG (QT-1: "đẹp nhất — hiện xám, thiếu sức sống") ==== Mỗi thư mục một màu (--hm) dùng chung cho cột trái, đầu trang, hộp rỗng, nhãn thư mục khi đọc thư. Người gửi có ảnh chữ cái màu (anhChu), nhãn thư màu theo tên (mauTheoChu), khách hàng thành chip màu nhóm CRM. */ .hop-inbox{--hm:#1A73E8}.hop-starred{--hm:#E0A33E}.hop-sent{--hm:#0E7C66}.hop-drafts{--hm:#8B5CF6}.hop-spam{--hm:#E8590C}.hop-trash{--hm:#C92A2A} :root[data-giao-dien="toi"] .hop-inbox{--hm:#6EA8FE} :root[data-giao-dien="toi"] .hop-sent{--hm:#4CC9A6} :root[data-giao-dien="toi"] .hop-drafts{--hm:#B197FC} :root[data-giao-dien="toi"] .hop-trash{--hm:#FF8787} /* cột trái */ .ben a.hop-muc .bieu,.ben .nhom-menu a.hop-muc .bieu,.ben .nhom-menu.co-mau a.hop-muc .bieu{width:26px;height:26px;border-radius:8px;opacity:1; color:#fff !important;background:var(--hm);box-shadow:0 2px 6px color-mix(in srgb,var(--hm) 35%,transparent);transition:transform .15s} .ben .nhom-menu a.hop-muc:hover .bieu{transform:scale(1.06)} .ben a.hop-muc.dang,.ben .nhom-menu.co-mau a.hop-muc.dang{background:color-mix(in srgb,var(--hm) 12%,var(--trang));box-shadow:inset 3px 0 0 var(--hm);color:var(--chu);font-weight:700} .ben .nhom-menu.co-mau a.hop-muc:hover{background:color-mix(in srgb,var(--hm) 9%,transparent)} .ben .nhom-menu a.hop-muc.dang .bieu{box-shadow:0 0 0 3px color-mix(in srgb,var(--hm) 25%,transparent)} .so-hop{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:99px;background:var(--hm);color:#fff; font-size:.72rem;font-weight:800;line-height:18px;text-align:center} .vo.thu .ben a.hop-muc{position:relative} .vo.thu .ben .so-hop{position:absolute;top:2px;right:6px;min-width:16px;padding:0 4px;font-size:.62rem;line-height:15px} /* nút Soạn thư */ .ben .nut-soan{background:linear-gradient(135deg,#1A73E8,#12395F);box-shadow:0 6px 16px rgba(26,115,232,.28)} .ben .nut-soan:hover{background:linear-gradient(135deg,#1866CF,#0C2740)} /* đầu trang hộp thư */ .dau-hom{display:flex;align-items:center;gap:12px;margin:0 0 12px} .dau-hom h1{margin:0;font-size:1.25rem} .dau-hom-bieu{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff; background:linear-gradient(135deg,var(--hm),color-mix(in srgb,var(--hm) 60%,#fff));box-shadow:0 6px 14px color-mix(in srgb,var(--hm) 30%,transparent)} /* thanh công cụ */ .thanh-hom .o-tim-hom{border-radius:99px;padding:7px 14px 7px 34px;background:var(--trang) no-repeat 12px 50%/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a99' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")} .thanh-hom .viec-chon{background:color-mix(in srgb,#1A73E8 8%,var(--trang));border:1px solid color-mix(in srgb,#1A73E8 25%,transparent); border-radius:99px;padding:2px 10px 2px 6px} .thanh-hom .viec-chon .nut-tron[data-action="trash"]:hover{color:#C92A2A;background:color-mix(in srgb,#C92A2A 12%,transparent)} .thanh-hom .viec-chon .nut-tron[data-action="spam"]:hover{color:#E8590C;background:color-mix(in srgb,#E8590C 12%,transparent)} /* danh sách thư */ .o.mong:has(.bang-thu){border-radius:14px;overflow:hidden} .bang-thu tbody tr{transition:background .12s} .bang-thu tbody tr:hover td{background:color-mix(in srgb,#1A73E8 5%,var(--trang))} .bang-thu tbody tr.chua-doc td{background:color-mix(in srgb,#1A73E8 6%,var(--trang))} .bang-thu tbody tr.chua-doc:hover td{background:color-mix(in srgb,#1A73E8 10%,var(--trang))} .bang-thu tbody tr.chua-doc td:first-child{box-shadow:inset 4px 0 0 #1A73E8} .nguoi-thu{display:flex;align-items:center;gap:10px;min-width:0} .nguoi-thu .anh-chu{width:32px;height:32px;font-size:.74rem} .nguoi-thu-chu{min-width:0;display:flex;flex-direction:column} .nguoi-thu-chu a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nguoi-thu-chu .nho{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.74rem} .bang-thu tbody tr:not(.chua-doc) .nguoi-thu .anh-chu{opacity:.82} .cot-gio{white-space:nowrap} .cham-moi{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1A73E8;margin-right:6px;vertical-align:1px; box-shadow:0 0 0 3px color-mix(in srgb,#1A73E8 20%,transparent)} .bang-thu tbody tr.chua-doc .cot-gio{color:#1A73E8;font-weight:700} .bang-thu .o-sao{font-size:1.1rem;transition:transform .12s} .bang-thu .o-sao:hover{transform:scale(1.2);color:#E0A33E} .bang-thu .o-sao.sang{color:#F2B200;text-shadow:0 1px 4px rgba(242,178,0,.35)} .bang-thu td:nth-last-child(2) .bt{color:#8B5CF6} /* nhãn thư có màu */ .the-nhan.co-mau{--nm:#5F6B7A;background:color-mix(in srgb,var(--nm) 13%,var(--trang));border-color:color-mix(in srgb,var(--nm) 30%,transparent);color:var(--nm)} :root[data-giao-dien="toi"] .the-nhan.co-mau{color:color-mix(in srgb,var(--nm) 55%,#fff)} /* chip khách hàng (màu nhóm khách trong CRM) */ .chip-khach{--kh:#12395F;display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px 3px 6px;border-radius:99px; background:color-mix(in srgb,var(--kh) 10%,var(--trang));border:1px solid color-mix(in srgb,var(--kh) 28%,transparent); color:var(--chu);font-weight:600;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chip-khach:hover{text-decoration:none;background:color-mix(in srgb,var(--kh) 18%,var(--trang))} .chip-khach .cham-khach{box-shadow:0 0 0 2px color-mix(in srgb,var(--kh) 25%,transparent)} /* hộp rỗng có minh hoạ */ .trong-thu{display:flex;flex-direction:column;align-items:center;gap:8px;padding:46px 16px 50px;text-align:center;color:var(--hm,#1A73E8)} .trong-thu b{color:var(--chu);font-size:1.02rem} /* ---- đọc thư ---- */ .o-doc-thu{border-radius:16px} .o-doc-thu .dau-thu{background:linear-gradient(180deg,color-mix(in srgb,var(--hm,#1A73E8) 8%,var(--trang)),var(--trang));border-top:4px solid var(--hm,#1A73E8)} .the-nhan.the-hop{background:color-mix(in srgb,var(--hm) 14%,var(--trang));border-color:color-mix(in srgb,var(--hm) 30%,transparent);color:var(--hm)} .the-nhan.the-hop .bt{vertical-align:-2px} .hang-nguoi-gui .anh-chu.lon{width:46px;height:46px;font-size:1rem} .dai-khach{border-radius:99px;background:color-mix(in srgb,#0E7C66 8%,var(--trang));border-color:color-mix(in srgb,#0E7C66 25%,transparent)} .chu-thu{background:var(--trang);border-color:var(--vien);border-radius:12px;line-height:1.65} .khoi-kem .tep{--tp:#5F6B7A;border-radius:12px;background:var(--trang);border:1px solid color-mix(in srgb,var(--tp) 25%,var(--vien));padding:8px 12px 8px 8px} .khoi-kem .tep:hover{background:color-mix(in srgb,var(--tp) 7%,var(--trang));border-color:var(--tp)} .tep-loai{flex:none;display:grid;place-items:center;min-width:40px;height:34px;padding:0 5px;border-radius:8px;background:var(--tp);color:#fff; font-size:.66rem;font-weight:800;letter-spacing:.03em} .nut-tron-vien.nut-tra-loi{background:#1A73E8;border-color:#1A73E8;color:#fff;box-shadow:0 6px 14px rgba(26,115,232,.25)} .nut-tron-vien.nut-tra-loi:hover{background:#1866CF;border-color:#1866CF;color:#fff} .nut-tron-vien.nut-chuyen-tiep{color:#0E7C66;border-color:color-mix(in srgb,#0E7C66 40%,transparent)} .nut-tron-vien.nut-chuyen-tiep:hover{background:color-mix(in srgb,#0E7C66 9%,var(--trang));border-color:#0E7C66} /* ---- soạn thư ---- */ .hop-soan .dau-soan{background:linear-gradient(135deg,#12395F,#1A73E8);color:#fff;border-bottom:none} .hop-soan .dau-soan h2{color:#fff;display:flex;align-items:center;gap:9px} .dau-soan-bieu{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.18)} .hop-soan .dau-soan .nut-dong{color:rgba(255,255,255,.85)} .hop-soan .dau-soan .nut-dong:hover{background:rgba(255,255,255,.15);color:#fff} .hop-soan .dong-soan label{color:#1A73E8;font-weight:700} .nut-gui-thu{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#1A73E8,#12395F);border:none; box-shadow:0 6px 14px rgba(26,115,232,.28)} .hop-soan .ds-kem .tep{border-radius:99px;background:color-mix(in srgb,#8B5CF6 9%,var(--trang));border-color:color-mix(in srgb,#8B5CF6 28%,transparent)} /* ---- điện thoại: mỗi thư một thẻ (ảnh chữ · tên · giờ / tiêu đề / trích đoạn) ---- */ @media (max-width:760px){ .bang-thu thead{display:none} .bang-thu,.bang-thu tbody{display:block} .bang-thu tbody tr{display:grid;grid-template-columns:30px minmax(0,1fr) auto 26px;grid-template-areas:"tich nguoi gio sao" "tich noi noi noi" "tich khach khach kem"; align-items:center;column-gap:8px;padding:10px 12px 10px 8px;border-bottom:1px solid var(--vien)} .bang-thu tbody tr td{display:block;padding:0;border:0;background:none !important;box-shadow:none !important} .bang-thu tbody tr.chua-doc{background:color-mix(in srgb,#1A73E8 6%,var(--trang));box-shadow:inset 4px 0 0 #1A73E8} .bang-thu tbody tr td:nth-child(1){grid-area:tich;align-self:start;padding-top:8px} .bang-thu tbody tr td:nth-child(2){grid-area:sao;text-align:right} .bang-thu tbody tr td:nth-child(3){grid-area:nguoi} .bang-thu tbody tr td:nth-child(4){grid-area:noi;padding:4px 0 0 42px;font-size:.9rem} .bang-thu tbody tr td:nth-child(5){grid-area:khach;padding:4px 0 0 42px} .bang-thu tbody tr td:nth-child(5) > .mo{display:none} .bang-thu tbody tr td:nth-child(6){grid-area:kem;text-align:right} .bang-thu tbody tr td:nth-child(7){grid-area:gio;text-align:right} .bang-thu tbody tr td[colspan]{grid-column:1/-1} .bang-thu .cot-noi-dung .trich{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nguoi-thu-chu .nho{display:none} .dau-hom{margin-bottom:8px} .thanh-hom .viec-chon{border-radius:12px} } /* ==== v135 KHOẢN CHI ĐỊNH KỲ (/finance/recurring) — màu theo danh mục (--m, mauTheoChu), trạng thái theo nhãn màu chung ==== */ .cdk-so .o-so{border-top:3px solid var(--m,var(--chinh))} .o-so-chi{border-top:3px solid #D9480F} .o-so-thu{border-top:3px solid #188038} .cdk-h2{display:flex;align-items:center;gap:8px;padding:14px 16px 4px;margin:0} .cdk-h2 .bt{color:#D9480F} /* thẻ khoản */ .cdk-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin:4px 0 20px} .cdk-the{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:14px;background:var(--trang);color:var(--chu); border:1px solid color-mix(in srgb,var(--m) 22%,var(--vien));border-left:4px solid var(--m);box-shadow:var(--bong);transition:transform .14s,box-shadow .14s} .cdk-the:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 26px color-mix(in srgb,var(--m) 16%,transparent)} .cdk-the.tt-ket_thuc,.cdk-the.tt-tu_choi{opacity:.72} .cdk-luoi > *{min-width:0} .cdk-the-chan > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cdk-the-dau .nhan{flex:none} .cdk-the-dau{display:flex;align-items:center;gap:10px;min-width:0} .cdk-the-ten{flex:1;min-width:0;display:flex;flex-direction:column} .cdk-the-ten b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--chinh-dam)} .cdk-the-ten .nho{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cdk-the-so{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .cdk-the-so b{font-size:1.3rem;color:var(--chu);font-variant-numeric:tabular-nums} .cdk-the-chan{display:flex;justify-content:space-between;gap:8px;font-size:.82rem;border-top:1px dashed var(--vien);padding-top:8px} .cdk-ky-toi{display:inline-flex;align-items:center;gap:5px;color:var(--chu-mo)} .cdk-ky-toi.gan{color:#D9480F;font-weight:700} /* trống */ .cdk-trong{text-align:center;padding:40px 18px} .cdk-trong-bieu{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:18px;margin-bottom:10px;color:#fff; background:linear-gradient(135deg,#D9480F,#F59F00);box-shadow:0 10px 24px rgba(217,72,15,.28)} .cdk-trong b{display:block;font-size:1.05rem;margin-bottom:4px} .cdk-trong p{max-width:56ch;margin:0 auto 14px} /* lịch chi 30 ngày */ .cdk-lich td{vertical-align:middle} .cdk-ngay{width:64px} .cdk-lich-ngay{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:48px;border-radius:12px; background:color-mix(in srgb,#D9480F 9%,var(--trang));border:1px solid color-mix(in srgb,#D9480F 25%,transparent);color:#D9480F;line-height:1.05} .cdk-lich-ngay b{font-size:1.15rem} .cdk-lich-ngay small{font-size:.7rem;font-weight:700;opacity:.85} .cdk-lich tr.gan .cdk-lich-ngay{background:#D9480F;color:#fff} .cdk-lich tr.qua-han .cdk-lich-ngay{background:#C5221F;border-color:#C5221F;color:#fff} .cdk-lich tr.qua-han td{background:color-mix(in srgb,#C5221F 5%,var(--trang))} /* form 3 khối */ .cdk-form{max-width:980px} .cdk-khoi{border-top:4px solid var(--m)} .cdk-khoi h2{display:flex;align-items:center;gap:10px;font-size:1.02rem} .cdk-so-khoi{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--m);color:#fff;font-size:.85rem;font-weight:800} .cdk-chon-chu-ky{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px} .cdk-chon-chu-ky label{margin:0;cursor:pointer} .cdk-chon-chu-ky input{position:absolute;opacity:0;pointer-events:none} .cdk-chon-chu-ky span{display:inline-block;padding:8px 16px;border-radius:99px;border:1.5px solid var(--vien);font-weight:600;font-size:.9rem;background:var(--trang)} .cdk-chon-chu-ky input:checked + span{background:#D9480F;border-color:#D9480F;color:#fff;box-shadow:0 4px 12px rgba(217,72,15,.25)} .cdk-chon-chu-ky input:focus-visible + span{outline:2px solid #D9480F;outline-offset:2px} .cdk-tich{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;cursor:pointer;margin:0; background:color-mix(in srgb,#D9480F 6%,var(--trang));border:1px dashed color-mix(in srgb,#D9480F 35%,transparent)} .cdk-tich input{margin-top:3px} .cdk-tich span{display:flex;flex-direction:column;gap:2px;font-weight:400} .cdk-luu{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 30px} /* xem khoản */ .cdk-dau{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;padding:18px 20px;border-radius:16px; background:linear-gradient(120deg,color-mix(in srgb,var(--m) 12%,var(--trang)),var(--trang) 70%);border:1px solid color-mix(in srgb,var(--m) 25%,var(--vien))} .cdk-dau h1{margin:0} .cdk-dau-chu{flex:1 1 300px;min-width:0} .cdk-dau-so{margin-top:4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .cdk-dau-so b{font-size:1.5rem;color:var(--chinh-dam);font-variant-numeric:tabular-nums} .cdk-dau-viec{gap:8px;flex-wrap:wrap} .cdk-duyet{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1.5px solid color-mix(in srgb,#E8710A 45%,var(--vien)); background:color-mix(in srgb,#E8710A 7%,var(--trang))} .cdk-duyet-bieu{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#E8710A;color:#fff;flex:none} .cdk-duyet-chu{flex:1 1 280px} .cdk-duyet-chu p{margin:3px 0 0} .cdk-duyet-nut{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap} .cdk-tu-choi summary,.cdk-chi-tiet summary{list-style:none;cursor:pointer} .cdk-tu-choi summary::-webkit-details-marker,.cdk-chi-tiet summary::-webkit-details-marker{display:none} .cdk-o-ly-do,.cdk-o-so{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px} .cdk-o-ly-do input,.cdk-o-so input{flex:1 1 140px;min-width:120px;padding:7px 10px;font-size:.88rem} .cdk-o-so input[name="so_tien"]{flex:0 1 130px;font-variant-numeric:tabular-nums} .cdk-hai-cot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px} .cdk-dl{display:grid;grid-template-columns:max-content 1fr;gap:9px 16px;margin:0;font-size:.92rem} .cdk-dl dt{color:var(--chu-mo)} .cdk-dl dd{margin:0;font-weight:500} .cdk-cham{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px} .cdk-buoc{margin:0;padding:0;list-style:none;counter-reset:b;display:grid;gap:12px} .cdk-buoc li{counter-increment:b;display:grid;grid-template-columns:30px 1fr;column-gap:10px;font-size:.9rem} .cdk-buoc li::before{content:counter(b);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%; background:#D9480F;color:#fff;font-weight:800;font-size:.82rem} .cdk-buoc li:nth-child(2)::before{background:#188038} .cdk-buoc li:nth-child(3)::before{background:#8430CE} .cdk-buoc li span{color:var(--chu-mo)} .cdk-ky td{vertical-align:top} .cdk-ky tr.cdk-sap-toi td{background:var(--nen-2);color:var(--chu-mo)} .cdk-ky tr.tt-can_nhap td:first-child{box-shadow:inset 3px 0 0 #E8710A} .cdk-ky tr.tt-vuot_cho_duyet td:first-child,.cdk-ky tr.tt-phieu_huy td:first-child{box-shadow:inset 3px 0 0 #C5221F} .cdk-ky tr.tt-da_chi td:first-child{box-shadow:inset 3px 0 0 #188038} .cdk-ky tr:target td{background:color-mix(in srgb,#E8710A 9%,var(--trang))} .cdk-viec{min-width:230px} .cdk-viec .cdk-chi-tiet{margin-top:4px} .cdk-link{text-decoration:underline dotted} @media (max-width:860px){ .cdk-hai-cot{grid-template-columns:1fr} } @media (max-width:640px){ .cdk-luoi{grid-template-columns:1fr} .cdk-the-chan{flex-direction:column;gap:3px} .cdk-the-dau .nhan{font-size:.7rem;padding:1px 7px} .cdk-dau{padding:14px} .cdk-ky thead{display:none} .cdk-ky,.cdk-ky tbody,.cdk-ky tr,.cdk-ky td{display:block} .cdk-ky tr{padding:10px 12px;border-bottom:1px solid var(--vien)} .cdk-ky td{border:0;padding:2px 0;text-align:left !important} .cdk-viec{min-width:0} } /* v137: ô chọn màu thương hiệu (Cài đặt hệ thống › Thương hiệu) */ .o-chon-mau-th{display:inline-flex;align-items:center;gap:10px} .o-chon-mau-th input[type=color]{width:56px;height:38px;padding:3px;border-radius:10px;border:1px solid var(--vien);background:var(--trang);cursor:pointer} .o-chon-mau-th code{font-size:.9rem} /* v140: trình sửa KHỐI của mẫu trang (Quản trị › Trang — public/js/khoi-trang.js) */ .kt-chung{margin-top:14px;padding:14px 16px;border:1px dashed var(--vien);border-radius:12px} .kt-chung-td{margin:0 0 10px;font-size:1rem} .kt-dau-en{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .kt-dau-en h2{margin:0} .kt-khoi-ds{display:flex;flex-direction:column;gap:10px;margin-top:12px} .kt-khoi{border:1px solid var(--vien);border-radius:12px;background:var(--trang)} .kt-khoi>summary{cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:10px;list-style:none} .kt-khoi>summary::-webkit-details-marker{display:none} .kt-khoi>summary::before{content:'▸';color:var(--mo, #6b7280);transition:transform .15s} .kt-khoi[open]>summary::before{transform:rotate(90deg)} .kt-khoi.trong>summary b{color:var(--mo, #6b7280);font-weight:500} .kt-trang-thai{font-size:.82rem;color:var(--mo, #6b7280)} .kt-khoi>.kt-nhom{padding:4px 16px 16px} .kt-nhom{display:flex;flex-direction:column;gap:12px} .kt-nhom-ngang{flex-direction:row;flex-wrap:wrap} .kt-nhom-ngang>.kt-truong{flex:1 1 220px} .kt-truong{display:flex;flex-direction:column;gap:5px;min-width:0} .kt-nhan{font-weight:500;font-size:.9rem} .kt-truong-bat .kt-nhan{display:flex;align-items:center;gap:8px;font-weight:400;cursor:pointer} .kt-truong input[type=text],.kt-truong textarea,.kt-truong select{width:100%;box-sizing:border-box} .kt-goi{margin:0} .kt-ds{display:flex;flex-direction:column;gap:8px;counter-reset:kt-muc} .kt-muc{display:flex;gap:8px;align-items:flex-start;counter-increment:kt-muc} .kt-muc-than{flex:1;min-width:0} .kt-ds-the>.kt-muc>.kt-muc-than,.kt-ds-nut>.kt-muc>.kt-muc-than{border:1px solid var(--vien);border-radius:10px;padding:10px 12px;position:relative} .kt-ds-the>.kt-muc>.kt-muc-than::before{content:'#' counter(kt-muc);position:absolute;top:-9px;left:10px;padding:0 6px;font-size:.75rem;background:var(--trang);color:var(--mo, #6b7280)} .kt-ds-nut>.kt-muc>.kt-muc-than>.kt-nhom{flex-direction:row;flex-wrap:wrap} .kt-ds-nut>.kt-muc>.kt-muc-than>.kt-nhom>.kt-truong{flex:1 1 200px} .kt-muc-nut{display:flex;gap:4px;flex:none;padding-top:2px} .kt-nut-nho{width:30px;height:30px;border:1px solid var(--vien);border-radius:8px;background:var(--trang);cursor:pointer;line-height:1;color:inherit} .kt-nut-nho:hover{background:rgba(0,0,0,.05)} .kt-them{align-self:flex-start} .kt-hang{display:flex;gap:8px;flex-wrap:wrap} .kt-o{display:flex;flex-direction:column;gap:3px;flex:1 1 160px;min-width:0} .kt-o-d{flex:3 1 280px} .kt-o-bieu,.kt-o-m{flex:0 1 auto} .kt-o-nhan{font-size:.75rem;color:var(--mo, #6b7280)} .kt-o textarea{width:100%;box-sizing:border-box} .kt-bieu{display:inline-flex;align-items:center;gap:6px} .kt-bieu-xem{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center} .kt-mau{display:inline-flex;align-items:center;gap:6px} .kt-mau input[type=color]{width:40px;height:34px;padding:2px;border-radius:8px;border:1px solid var(--vien);background:var(--trang);cursor:pointer} .kt-mau .kt-mau-ma{width:96px !important} .kt-anh{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .kt-anh img{width:84px;height:52px;object-fit:cover;border-radius:6px;border:1px solid var(--vien);background:#f3f4f6} .kt-anh input[type=text]{flex:1 1 180px;width:auto} @media (max-width:640px){.kt-muc{flex-direction:column}.kt-muc-nut{align-self:flex-end}} /* v142: bản demo — dải trên đầu khu nội bộ + hộp tài khoản ở trang đăng nhập */ .dai-demo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:12px; background:linear-gradient(90deg,#FFF4E5,#FFFBF2);border:1px solid #F5C77E;color:#7A4A00;font-size:.9rem} .dai-demo b{color:#B35C00;letter-spacing:.04em} :root[data-giao-dien="toi"] .dai-demo{background:#3A2A12;border-color:#7A5420;color:#F5D9A8} .dn-demo{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#FFF4E5;border:1px solid #F5C77E;color:#7A4A00;font-size:.88rem;line-height:1.5} .dn-demo b{color:#B35C00} .dn-demo-tk{margin-top:6px} /* v252 "bấm là vào": nút vào thẳng ở trang đăng nhập + nút nổi Đăng ký dùng thử trên mọi trang demo */ .dn-demo-vao{display:inline-flex;margin-top:10px;background:#B35C00;border-color:#B35C00} .dn-demo-vao:hover{background:#8F4900;border-color:#8F4900} .demo-noi{position:fixed;left:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:999px; background:#B35C00;color:#fff;font-weight:700;font-size:.92rem;text-decoration:none;box-shadow:0 8px 24px rgba(179,92,0,.35)} .demo-noi:hover{background:#8F4900;color:#fff} @media (max-width:640px){.demo-noi{left:12px;bottom:12px;padding:9px 14px;font-size:.85rem}} @media print{.demo-noi{display:none}} .dn-demo code{background:#fff;padding:1px 6px;border-radius:6px;border:1px solid #F0D3A2;color:#1F1F1F} /* v142: Quản trị › Hệ thống › Bộ nhớ Agent */ .am-luoi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start} .am-luoi>.o{margin:0} .am-khoa-moi{border:2px solid #0E7C66;background:color-mix(in srgb,#0E7C66 6%,var(--trang,#fff))} .am-khoa-moi h2{margin-top:0} .am-khoa-chu{display:block;padding:12px 14px;border-radius:10px;background:var(--trang,#fff);border:1px dashed #0E7C66;font-size:1rem;word-break:break-all;user-select:all} .am-bang{width:100%} .am-tat{opacity:.55} .am-tao{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;align-items:end;margin:6px 0 16px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--th-chinh,#12395F) 4%,transparent);border:1px solid var(--vien)} /* v146: cảnh báo trang menu CẢ CÔNG TY (quản trị viên dễ tưởng là cài đặt riêng) */ .bao-cty-ca{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#FFF4E5;border:1px solid #F5C77E;color:#7A4A00;font-size:.92rem;line-height:1.55} .bao-cty-ca b{color:#B35C00} .bao-cty-ca a{font-weight:600;white-space:nowrap} :root[data-giao-dien="toi"] .bao-cty-ca{background:#3A2A12;border-color:#7A5420;color:#F5D9A8} /* v143: dung lượng bộ nhớ — giới hạn cứng theo giấy phép */ .am-dung-luong{margin-bottom:16px} .am-dl-dau{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .am-dl-dau h2{margin:0 auto 0 0} .am-thanh{height:10px;border-radius:999px;background:color-mix(in srgb,var(--th-chinh,#12395F) 10%,transparent);overflow:hidden;margin:10px 0 8px} .am-thanh span{display:block;height:100%;border-radius:999px;background:#0E7C66;min-width:2px} .am-thanh.vang span{background:#E8A317} .am-thanh.do span{background:#D64545} .am-tao .truong{margin:0} .am-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 12px} .am-dl dt{font-weight:600} .am-dl dd{margin:0;word-break:break-all} .am-api td{vertical-align:top} .am-api code{word-break:break-all} .am-pre{background:#0F172A;color:#E2E8F0;padding:12px 14px;border-radius:10px;overflow:auto;font-size:.82rem;line-height:1.5;white-space:pre} .am-noi-dung{white-space:pre-wrap;word-break:break-word;max-height:none;font-size:.88rem} .am-vung{display:flex;flex-wrap:wrap;gap:10px} .am-vung-the{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--vien);border-radius:12px;text-decoration:none;color:inherit;min-width:180px} .am-vung-the.dang{border-color:var(--th-chinh,#12395F);box-shadow:0 0 0 2px color-mix(in srgb,var(--th-chinh,#12395F) 25%,transparent)} .am-vung-the span{font-size:.82rem} .am-loc{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .am-loc input[type=search]{flex:1 1 240px} .am-the{margin:2px 4px 0 0;font-size:.72rem} .am-mo-ta{max-width:420px} .am-trang{justify-content:flex-end;gap:8px;margin-top:10px} @media (max-width:1000px){.am-luoi{grid-template-columns:1fr}} /* v155: Quản trị › Dọn dẹp */ .dd-dl-dau{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .dd-dl-dau h2{margin:0} .dd-bang{display:grid;gap:6px;margin-top:12px} .dd-dong{display:grid;grid-template-columns:minmax(120px,200px) 1fr 80px 90px;gap:10px;align-items:center} .dd-thanh{height:8px;border-radius:99px;background:var(--nen-2);overflow:hidden} .dd-thanh span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--chinh),#5B8FD0)} .dd-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;align-items:start} .dd-muc{margin:0} .dd-muc-dau{display:flex;gap:12px;align-items:flex-start} .dd-muc-dau h2{margin:0 0 2px;font-size:1.05rem} .dd-muc-dau p{margin:0} .dd-chu{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--nen-2);font-weight:800;text-transform:uppercase;color:var(--chinh)} .dd-ngay{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0} .dd-ngay label{display:flex;align-items:center;gap:6px;margin:0} .dd-ngay input{width:90px;margin:0} .dd-ket{margin:12px 0 8px} .dd-mau{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px;font-size:.88rem;max-height:220px;overflow:auto} .dd-mau li{padding:6px 8px;border:1px solid var(--vien);border-radius:8px} .dd-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px} .dd-anh{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:0 0 12px;max-height:520px;overflow:auto} .dd-anh-o{display:flex;flex-direction:column;gap:3px;padding:6px;border:1px solid var(--vien);border-radius:10px;cursor:pointer;margin:0;position:relative} .dd-anh-o input{position:absolute;top:10px;left:10px;width:auto;margin:0} .dd-anh-o img{width:100%;height:90px;object-fit:cover;border-radius:6px;background:var(--nen-2)} .dd-anh-o:has(input:checked){border-color:#B3261E;box-shadow:0 0 0 2px rgba(179,38,30,.2)} .dd-anh-o span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:640px){ .dd-dong{grid-template-columns:1fr 70px} .dd-dong .dd-thanh,.dd-dong .mo{display:none} } /* v156: Quản trị › Xuất toàn bộ dữ liệu */ .xd-luoi{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start} .xd-ds{margin:0 0 12px;padding-left:1.2em;display:grid;gap:6px} .xd-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 6px} .xd-form .truong{margin:0;min-width:240px} .xd-dl{display:grid;grid-template-columns:1fr;gap:2px;margin:0} .xd-dl dt{color:var(--chu-mo);font-size:.85rem;margin-top:8px} .xd-dl dd{margin:0;overflow-wrap:anywhere} @media (max-width:900px){ .xd-luoi{grid-template-columns:1fr} } /* v158: hành trình khách trên web */ .hj{margin-top:6px;font-size:.85rem;color:var(--chu)} .hj summary{cursor:pointer;color:var(--chinh);font-weight:600;list-style:none} .hj summary::-webkit-details-marker{display:none} .hj-ds{margin:6px 0 4px;padding-left:1.4em;display:grid;gap:3px} .hj-ds code{background:none;padding:0} /* v159: Trợ lý AI */ .ai-luat{margin:0 0 12px;padding-left:1.2em;display:grid;gap:3px} .ai-ngay{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0 10px} .ai-gio .truong{max-width:160px} .ai-tra{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--nen-2);border:1px solid var(--vien)} .ai-tra.loi{background:#FDECEA;border-color:#F3B8B2;color:#8C1D18} /* v161 — KHÁCH NÓNG (crm/lien-he.ejs, src/khach-nong.js): ô "Gọi trước", nhãn điểm + vì sao, đã gọi, cài đặt */ .kn-goi{border-left:4px solid #C0392B} .kn-goi h2{display:flex;align-items:center;gap:8px;margin:0 0 4px} .kn-ds{list-style:none;margin:10px 0 0;padding:0} .kn-dong{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--vien)} .kn-dong:first-child{border-top:0} .kn-dong>.nhan{flex:0 0 auto;min-width:92px;text-align:center} .kn-ai{flex:1 1 auto;min-width:0} .kn-lien{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} .kn-lien form{margin:0} .kn-tre{color:#B03A2E;font-weight:600} :root[data-giao-dien="toi"] .kn-tre{color:#F0A8A8} .kn-vi-sao{margin-top:4px} .kn-vi-sao summary{cursor:pointer;list-style:none;display:inline-block} .kn-vi-sao summary::-webkit-details-marker{display:none} .kn-vi-sao ul{list-style:none;margin:6px 0 0;padding:6px 8px;background:var(--nen-2);border-radius:6px;font-size:.82rem;min-width:220px} .kn-vi-sao li{display:flex;justify-content:space-between;gap:10px} .kn-da-goi{margin-top:4px;color:var(--chu-mo)} .kn-da-goi form{display:inline;margin:0} .kn-bo{background:none;border:0;padding:0 0 0 4px;color:var(--chu-mo);text-decoration:underline;cursor:pointer;font:inherit} .kn-cai-dat>summary{cursor:pointer} .kn-luat{max-width:520px;margin-bottom:14px} .kn-luat td{padding:3px 8px} @media (max-width:640px){.kn-dong{flex-wrap:wrap}.kn-lien{width:100%;justify-content:flex-start}} /* v162 — AI ĐÃ CÀI CPLATFORM-APP (views/cai-app.ejs) */ .ca-dem{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px} .ca-o{display:flex;flex-direction:column;gap:2px;padding:12px 14px;margin:0} .ca-o b{font-size:1.5rem;line-height:1.2} .ca-o span{font-size:.85rem;color:var(--chu-mo)} .ca-o.do b{color:#B03A2E} :root[data-giao-dien="toi"] .ca-o.do b{color:#F0A8A8} .ca-bang td{vertical-align:top} @media (max-width:760px){.ca-dem{grid-template-columns:1fr 1fr}} /* v164 — HỖ TRỢ TTP (tin-nhan.ejs, admin.js veThe): thẻ phương án / đã cập nhật */ .tn-anh.ho-tro{background:#FDF5E4;color:#6D5417} .tn-the{margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--nen-2);border:1px solid var(--vien);color:var(--chu);min-width:min(240px,100%)} .tn-the.the-cap-nhat{background:#E8F3EC;border-color:#BBD9C6;color:#1E5233} .tn-the-dau{font-weight:700;margin-bottom:4px} .tn-the-mo{white-space:pre-line;font-size:.92rem} .tn-the-meta{font-size:.82rem;color:var(--chu-mo);margin-top:6px} .tn-the-nut{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .tn-the-kq{margin-top:8px;font-weight:600;font-size:.88rem} .tn-the-kq.xanh{color:#1E5233} .tn-the-kq.do{color:#8A2B2B} :root[data-giao-dien="toi"] .tn-the.the-cap-nhat{background:#14301F;border-color:#2C5A3C;color:#9ADCB4} :root[data-giao-dien="toi"] .tn-the-kq.xanh{color:#9ADCB4} :root[data-giao-dien="toi"] .tn-the-kq.do{color:#F0A8A8} /* v167 — KHUNG CHÚC MỪNG GỘP trên Trang chủ (views/home.ejs) */ .cm-ds{list-style:none;margin:8px 0 0;padding:0} .cm-ds li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--vien)} .cm-ds li:first-child{border-top:0} .cm-ds li.moi .cm-chu strong{color:#12395F} .cm-ds .cm-chu{flex:1;min-width:0} .cm-ds form{margin:0} :root[data-giao-dien="toi"] .cm-ds li.moi .cm-chu strong{color:#9EC6EE} /* v189: nút chọn tài khoản trên QR — khối tài khoản đang ẩn không bị luật display của khung đè */ [data-tk-o][hidden]{display:none !important} .chon-tk-nut{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px} .chon-tk-nut button{border:1px solid var(--vien,#cfd8e3);background:transparent;color:inherit;border-radius:999px;padding:6px 14px;font:inherit;font-size:.9rem;cursor:pointer} .chon-tk-nut button[aria-pressed="true"]{background:#12395F;border-color:#12395F;color:#fff;font-weight:600} /* v190: hộp tạo yêu cầu thanh toán — mỗi lựa chọn (còn nợ / gia hạn) một thẻ bấm được */ .the-chon-yctt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 8px;border:1px solid var(--vien);border-radius:10px;cursor:pointer;font-weight:400} .the-chon-yctt:has(input:checked){border-color:#12395F;background:rgba(18,57,95,.05)} .the-chon-yctt input{margin-top:3px} /* v192 (chị Huệ, Android: khung chuông tràn mép trái — chữ bị cắt): ở màn ≤ 640px mọi khung thả xuống của thanh đầu (chuông, ngôn ngữ, tài khoản) bám theo MÀN HÌNH, cách 2 mép 12px — cùng cách sửa bảng Phân hệ v169 */ @media (max-width:640px){ .menu-xo.menu-tb,.menu-xo.menu-nn,.menu-xo.menu-toi{position:fixed;left:12px;right:12px;top:62px;width:auto;min-width:0;max-width:none; max-height:calc(100vh - 80px);overflow-y:auto} .menu-tb .ds-tb{max-height:calc(100vh - 190px)} } /* v201: đề nghị có khách — khối thông tin khách trong hộp tạo + trang xem */ .dnk-o{border:1px dashed var(--vien);border-radius:10px;padding:10px 12px;margin:0 0 12px;background:var(--nen-2)} .dnk-o[hidden]{display:none} .dnk-xem{border:1px solid var(--vien);border-radius:10px;padding:10px 12px;margin:0 0 12px} /* v200: yêu cầu gia hạn — ô trạng thái + nút nhanh ở sổ Bán hàng */ .yc-o{min-width:170px} /* v204 (ông chủ 16:49): 4 nút gia hạn ĐỒNG CỠ — lưới 2×2, mỗi nút cùng khổ, có chữ, cách nhau 8px (điện thoại: cao 44px, cách 10px) */ /* v205 (ông chủ 17:16): ✉ · Zalo · 📞 MỘT HÀNG, nút vuông cao bằng nút Gia hạn (máy tính 30px, điện thoại 40px) — không bao giờ xuống dòng */ .yc-nut{display:flex;flex-wrap:nowrap;gap:6px;margin-top:6px} .yc-nut form,.yc-nut details{margin:0;min-width:0} .yc-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:30px;height:30px;flex:none;margin:0;padding:0;box-sizing:border-box; border:1px solid var(--vien-dam);border-radius:7px;background:var(--trang);color:var(--chinh);font:inherit;font-size:.8rem;font-weight:600; line-height:1.15;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap} .yc-btn:hover{border-color:var(--chinh);text-decoration:none} .yc-btn:active{transform:translateY(1px)} .yc-btn-do{color:#B3261E;border-color:#E8B4B0} .yc-zalo{font-size:10.5px;font-weight:800;letter-spacing:-.2px;color:#0068FF} :root[data-giao-dien="toi"] .yc-zalo{color:#6FA8FF} /* ô nhập lý do "Không gia hạn" cạnh nút Gia hạn: nhãn · ô · nút xếp dọc, không tràn */ .dv-thao-tac .xoa-nham-o{display:grid;gap:6px;text-align:left} .dv-thao-tac .xoa-nham-o input{width:100%;margin:0} .dv-thao-tac .xoa-nham-o .nut{margin-top:2px!important;justify-self:end} summary.yc-btn{list-style:none} summary.yc-btn::-webkit-details-marker{display:none} /* v205 (ông chủ 17:10–17:12): nút VUÔNG cùng cao nút Gia hạn — ✕ Không gia hạn / ↺ Mở lại / ✎ Sửa */ .nut.nut-vuong{width:30px;min-width:30px;padding:0;justify-content:center;font-size:.95rem;line-height:1} summary.nut{list-style:none;cursor:pointer} summary.nut::-webkit-details-marker{display:none} .dv-thao-tac{flex-wrap:nowrap} @media (pointer:coarse){ .dv-thao-tac .nut.nho{min-height:40px} .dv-thao-tac .nut.nut-vuong{width:40px;min-width:40px;font-size:1.05rem} } .han-sua{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin-left:2px;border-radius:8px; color:var(--chu-mo);text-decoration:none;vertical-align:middle} .han-sua:hover{background:var(--nen-2);color:var(--chinh);text-decoration:none} @media (pointer:coarse){ .yc-nut{gap:8px} .yc-btn{width:40px;height:40px} .han-sua{min-width:44px;min-height:44px;font-size:1.15rem} .yc-nut-ct .nut{min-height:44px;font-size:.88rem;padding:0 14px} } .yc-day{flex-wrap:wrap;align-items:center} .yc-ngay{display:inline-flex;gap:4px;align-items:center;margin:0 0 0 auto} .yc-ngay input{width:64px;padding:3px 6px} /* v203 → v204 (ông chủ 16:51 "nút loa XẤU" · 16:53 ảnh mẫu · 16:55 "cạnh tên người gửi"): ĐỌC TO — biểu tượng nét ▷ cùng bộ menu, không viền, xám nhạt (luôn hiện), đậm khi rê; đang đọc → ■ màu chính. Màu theo token nên chế độ tối tự dịu. */ .tn-doc,.cn-doc{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;margin:0;border:0; border-radius:50%;background:none;color:inherit;opacity:.5;cursor:pointer;vertical-align:middle;line-height:1;transition:opacity .12s,background-color .12s} .tn-doc::after,.cn-doc::after{content:"";position:absolute;inset:-8px} /* vùng chạm rộng hơn hình (điện thoại) mà không đẩy dòng */ .tn-doc:hover,.cn-doc:hover{opacity:1;background:var(--nen-2)} .tn-doc.dang-doc,.cn-doc.dang-doc{opacity:1;color:var(--chinh)} .tn-dong.toi .tn-doc.dang-doc{color:#fff} .tn-ten{display:flex;align-items:center;gap:2px} .tn-ten .tn-doc{margin-left:2px;color:var(--chu-mo)} .tn-gio .tn-doc{width:18px;height:18px;margin:-2px 3px 0 0} .tn-gio .tn-doc svg{width:13px;height:13px} .cn-ai{display:flex;align-items:center;gap:2px} .cn-ai .cn-doc{width:18px;height:18px;margin-left:2px} .cn-ai .cn-doc svg,.cn-gio .cn-doc svg{width:13px;height:13px} .cn-gio{display:flex;align-items:center;gap:2px;min-height:18px} .cua-toi .cn-gio{justify-content:flex-end} .cn-gio .cn-doc{width:18px;height:18px} /* Hàng thao tác: Sao chép · Chuyển tiếp · Thu hồi · Xoá — nổi ngay dưới bong bóng khi rê chuột / chạm tin (không thêm dòng dưới mỗi tin) */ .tn-tin{padding-bottom:36px} .tn-tt{position:absolute;top:calc(100% - 4px);z-index:6;display:none;align-items:center;gap:1px;padding:2px;background:var(--trang); border:1px solid var(--vien);border-radius:999px;box-shadow:0 4px 14px rgba(15,35,60,.12)} .tn-dong.ban .tn-tt{left:8px} .tn-dong.toi .tn-tt{right:8px} .tn-dong:hover .tn-tt,.tn-dong.hien-nut .tn-tt,.tn-tt:focus-within{display:inline-flex} .tn-tt-nut,.cn-tt-nut{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;margin:0;border:0;border-radius:50%; background:none;color:var(--chu-mo);cursor:pointer;line-height:1} .tn-tt-nut:hover,.cn-tt-nut:hover{background:var(--nen-2);color:var(--chu)} .tn-tt-nut.da-chep,.cn-tt-nut.da-chep{color:#1E7B3A} .tn-tt .tn-thu-hoi,.tn-tt .tn-xoa{display:inline-flex;align-items:center;height:28px;padding:0 9px;border-radius:999px;font-size:11.5px;opacity:1} .tn-tt .tn-thu-hoi:hover,.tn-tt .tn-xoa:hover{background:var(--nen-2)} .cn-tt-nut{display:none;width:22px;height:22px} .cn-tt-nut svg{width:13px;height:13px} .cn-tin:hover .cn-tt-nut,.cn-tin.hien-nut .cn-tt-nut{display:inline-flex} /* "Đọc tin chưa đọc" (thanh đầu hội thoại) · "Đọc thông báo mới" (trang Thông báo) · ▷ trong chuông — nút ma, không viền */ .doc-nut-ma{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:0;border-radius:999px;background:none; color:var(--chu-mo);font:inherit;font-size:.8rem;font-weight:500;cursor:pointer;white-space:nowrap} .doc-nut-ma:hover{background:var(--nen-2);color:var(--chu)} .doc-nut-ma.dang-doc{color:var(--chinh)} .doc-nut-ma[hidden]{display:none} .doc-nut-ma [data-bieu-doc],.doc-nut-tron [data-bieu-doc]{display:inline-flex} .doc-nut-tron{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:50%; background:none;color:var(--chu-mo);cursor:pointer;flex:none} .doc-nut-tron:hover{background:var(--nen-2);color:var(--chu)} .doc-nut-tron.dang-doc{color:var(--chinh)} @media (max-width:1280px){ .tn-dau-ht .doc-nut-ma .chu{display:none} .tn-dau-ht .doc-nut-ma{width:32px;padding:0;justify-content:center;flex:none} } @media (pointer:coarse){ .tn-dau-ht .doc-nut-ma{width:40px;height:40px} } /* v204: thanh đầu hội thoại trên điện thoại — tên + số thành viên một hàng, các nút xuống hàng dưới (trước bị bóp chữ từng dòng) */ @media (max-width:640px){ .tn-dau-ht{flex-wrap:wrap;row-gap:6px} .tn-dau-ht .tn-giua{flex:1 1 calc(100% - 96px);min-width:0} } /* Thanh điều khiển khi đọc nhiều tin — gọn, nền theo token (sáng / tối), vạch tiến trình mảnh */ .doc-tin-thanh{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;display:flex;gap:4px;align-items:center;overflow:hidden; background:var(--trang);color:var(--chu);border:1px solid var(--vien);padding:5px 6px 7px 12px;border-radius:999px;box-shadow:0 8px 24px rgba(15,35,60,.16);font-size:.84rem} .doc-tin-thanh[hidden]{display:none} .doc-tin-thanh .dtt-bieu{display:inline-flex;color:var(--chinh)} .doc-tin-thanh .dtt-chu{margin:0 6px 0 4px;white-space:nowrap;color:var(--chu-mo)} .doc-tin-thanh .dtt-nut{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--chu);cursor:pointer;padding:0} .doc-tin-thanh .dtt-nut:hover{background:var(--nen-2)} .doc-tin-thanh .dtt-vach{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--vien)} .doc-tin-thanh .dtt-vach i{display:block;height:100%;width:0;background:var(--chinh);transition:width .25s} /* v198: nhắc tên "@" trong nhóm — gợi ý nổi trên ô soạn; tên được nhắc tô màu, nhắc tới mình nền vàng */ .tn-o-viet,.cn-viet{position:relative} .nt-goi-y{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:40;background:var(--trang);border:1px solid var(--vien);border-radius:10px;box-shadow:0 8px 24px rgba(15,35,60,.16);max-height:240px;overflow-y:auto;padding:4px} .nt-goi-y[hidden]{display:none} .nt-muc{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:.92rem} .nt-muc.chon,.nt-muc:hover{background:var(--nen-2);color:var(--chinh)} .nt-ten{color:var(--chinh);font-weight:600} .nt-ten.toi{background:#FFF0B8;color:#5A4500;border-radius:4px;padding:0 3px} /* v248 #58 (ông chủ 16:36: "tin anh tag em vào sao không thấy tiêu đề em đâu"): trong bong bóng CỦA MÌNH (nền --chinh) chữ @tên màu --chinh bị vô hình ⇒ theo màu chữ bong bóng + nền trắng mờ. Nhãn vàng .toi (nhắc tới chính mình / @tất cả) có nền riêng — giữ. */ .cua-toi .cn-bong .nt-ten:not(.toi){color:inherit;font-weight:700;background:rgba(255,255,255,.2);border-radius:4px;padding:0 3px} /* v197: xoá nhập nhầm — ô lý do mở dưới nút */ .xoa-nham{position:relative} .xoa-nham > summary{list-style:none} .xoa-nham > summary::-webkit-details-marker{display:none} .xoa-nham-o{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(340px,86vw);background:var(--trang);border:1px solid var(--vien);border-radius:10px;padding:12px;box-shadow:0 8px 24px rgba(15,35,60,.16)} /* v195: dán / kéo-thả / chụp ảnh vào ô soạn tin — ảnh xem trước nhỏ, ✕ bỏ */ .da-xem{display:flex;flex-wrap:wrap;gap:6px} .da-xem[hidden]{display:none} .da-the{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--vien);background:var(--nen-2);display:flex;align-items:center;justify-content:center;flex-shrink:0} .da-the img{width:100%;height:100%;object-fit:cover;display:block} .da-tep{font-size:11px;padding:4px;word-break:break-all;line-height:1.2;max-height:100%;overflow:hidden} .da-bo{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:11px;line-height:20px;padding:0;cursor:pointer} .da-keo{outline:2px dashed var(--chinh);outline-offset:-4px} .tn-anh{font-size:18px} .cn-xem{padding:8px 8px 0;border-top:1px solid var(--vien)} .cn-anh{cursor:pointer;font-size:16px;align-self:center} .cn-tep-anh{display:block;margin-top:4px} .cn-anh-gui{display:block;max-width:100%;max-height:180px;border-radius:8px} /* v192: nút "↻ Có thông báo mới" trên trang Thông báo */ .tb-co-moi{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:60;box-shadow:0 6px 18px rgba(15,35,60,.18)} /* v207 (ông chủ): TRIỂN KHAI — số trên mục menu, dòng đang mở, ô ghi chú, hộp nút thao tác */ .dem-muc{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#C62828;color:#fff;font-size:.7rem;font-weight:700; display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none} .bang-tk td{vertical-align:top} .tk-dang-mo td{background:var(--nen-2)} .tk-ghi{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere} .tk-nut{flex-wrap:wrap;justify-content:flex-end;margin-top:4px} .tk-nut form{margin:0} .xoa-nham-o.tk-hop{display:grid;gap:6px;text-align:left} .xoa-nham-o.tk-hop textarea,.xoa-nham-o.tk-hop select{width:100%;margin:0} .xoa-nham-o.tk-hop .nut{justify-self:end} .nut.tk-chua{color:#B26A00;border-color:#E9C27A} a.tk-dong{color:var(--chu-mo)} /* v209 (ông chủ): TIÊU CHÍ KPI THEO BỘ PHẬN — cây bộ phận, chip tiêu chí đang áp dụng, khung chọn tiêu chí */ .kpi-bp{padding:12px 14px;margin-bottom:10px} .kpi-chip{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0} .kpi-sua{margin-top:10px} .kpi-sua > summary{list-style:none;display:inline-flex} .kpi-sua > summary::-webkit-details-marker{display:none} .kpi-sua form{margin-top:10px} .kpi-ds{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin:10px 0} .kpi-ds fieldset{border:1px solid var(--vien);border-radius:10px;padding:8px 12px;margin:0} .kpi-ds legend{font-weight:700;font-size:.85rem;padding:0 4px} .kpi-tc{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:6px 0} .kpi-tc input{margin-top:3px;flex:none} .kpi-ky{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px} .kpi-ky label{display:inline-flex;align-items:center;gap:4px;font-weight:500;font-size:.82rem;margin:0} .kpi-ky input{margin:0} .kpi-so{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px} .kpi-so label{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:.82rem;margin:0} .kpi-so input{width:86px;margin:0;padding:4px 8px} .kpi-ls{margin-top:8px} .kpi-ls > summary{cursor:pointer} .kpi-ct input{width:130px;text-align:right;margin:0} .kpi-ct th{white-space:nowrap} .kpi-bang td,.kpi-bang th{vertical-align:top} .kpi-bang th{min-width:110px} /* v213 CHẤM ĐIỂM KPI (phương án B — máy chấm, trưởng bộ phận chấm lại): ô tổng điểm, màu xếp loại, ý kiến nhân viên, nhật ký, thang điểm */ .kpi-tom{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0 0} .kpi-tom > div{border:1px solid var(--vien);border-radius:10px;padding:8px 12px} .kpi-tom strong{font-size:1.35rem} .kpi-d{font-weight:700;margin-top:2px} .kpi-tong{min-width:96px} .kpi-xl.xl-A{color:#1E6B3E}.kpi-xl.xl-B{color:#1B4C7D}.kpi-xl.xl-C{color:#8A6514}.kpi-xl.xl-D{color:#A33636} :root[data-giao-dien="toi"] .kpi-xl.xl-A{color:#9ADCB4}:root[data-giao-dien="toi"] .kpi-xl.xl-B{color:#9CC3EC} :root[data-giao-dien="toi"] .kpi-xl.xl-C{color:#E8C877}:root[data-giao-dien="toi"] .kpi-xl.xl-D{color:#F0A3A3} .kpi-yk{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start} @media (max-width:640px){.kpi-yk{grid-template-columns:1fr}} .kpi-nk{margin:0;padding-left:18px} .kpi-nk li{margin:4px 0} .kpi-thang input{width:100px;text-align:right;margin:0;padding:4px 8px} .kpi-thang td{vertical-align:top} @media (max-width:640px){ .kpi-thang thead{display:none} .kpi-thang tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--vien)} .kpi-thang td{display:block;padding:0;border:0;text-align:left} .kpi-thang td:nth-child(1),.kpi-thang td:nth-child(2){grid-column:1/-1} .kpi-thang td[data-nhan]::before{content:attr(data-nhan);display:block;font-size:.75rem;color:var(--chu-mo);margin:4px 0 2px} .kpi-thang input{width:100%;text-align:left} } /* v214 KHAI BÁO TIÊU CHÍ KPI GỌN (ông chủ: "nhìn anh loạn hết cả lên"): tóm tắt theo nhóm · mỗi tiêu chí một dòng · trọng số hai tầng */ .kpi-tom-nhom{display:flex;flex-direction:column;gap:6px;margin:10px 0 0} .kpi-tom-nhom > div{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .kpi-tn{font-weight:700;font-size:.85rem;margin-right:4px} .kpi-tc-tom{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--vien);border-radius:999px;padding:2px 10px;font-size:.8rem;background:var(--nen-2)} .kpi-kieu{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px} .kpi-kieu label{font-weight:500;margin:0} .kpi-nhom-ds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:12px} .kpi-nhom{border:1px solid var(--vien);border-radius:10px;padding:10px 12px} .kpi-nhom-dau{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--vien);padding-bottom:8px;margin-bottom:4px} .kpi-o-tn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;margin:0} .kpi-o-tn[hidden]{display:none} .kpi-o-tn input,.kpi-o-ts input,.kpi-o-md input{width:78px;margin:0;padding:4px 8px} .kpi-dong{padding:7px 0;border-bottom:1px dashed var(--vien)} .kpi-dong:last-of-type{border-bottom:0} .kpi-dong-ten{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:0;cursor:pointer} .kpi-dong-ten input{margin-top:3px;flex:none} .kpi-mo{display:block;font-size:.76rem;color:var(--chu-mo);line-height:1.35} .kpi-co-js .kpi-dong.tat .kpi-mo{display:none} .kpi-co-js .kpi-dong.tat b{font-weight:500;color:var(--chu-mo)} .kpi-dong-so{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:6px 0 0 26px} .kpi-co-js .kpi-dong.tat .kpi-dong-so{display:none} .kpi-o-ts,.kpi-o-md{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;margin:0} .kpi-co-js:not(.hien-md) .kpi-o-md{display:none} .kpi-ky-chip{display:inline-flex;flex-wrap:wrap;gap:4px} .kpi-ky-chip label{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--vien);border-radius:999px;padding:2px 9px;font-size:.78rem;font-weight:500;margin:0;cursor:pointer} .kpi-ky-chip label:has(input:checked){background:#E9F0F8;border-color:#C2D4E8;color:#1B4C7D} :root[data-giao-dien="toi"] .kpi-ky-chip label:has(input:checked){background:#1B3550;border-color:#2F5276;color:#CFE0F2} .kpi-ky-chip input{margin:0} .kpi-tong{margin-top:6px;color:#1E6B3E} .kpi-tong:empty,.kpi-tong-nhom:empty{display:none} .kpi-tong-nhom{margin-top:10px;font-weight:600;color:#1E6B3E} .kpi-ct-nho{text-decoration:none} .kpi-mo{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} /* v215 ĐẶT LẠI MẬT KHẨU ngay đầu trang tài khoản + hộp copy tài khoản / mật khẩu (ông chủ) */ .mk-khung{margin-bottom:14px} .mk-dong{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center} .mk-dong label{font-weight:500;margin:0;display:inline-flex;align-items:center;gap:5px} .mk-dong input[type=text]{width:220px;margin:0} .mk-moi{margin:0 0 12px} .mk-moi-luoi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;align-items:center;margin:10px 0} .mk-moi-luoi code{font-size:1rem;word-break:break-all;background:var(--trang);border:1px solid var(--vien);border-radius:6px;padding:4px 8px} .mk-moi-mk{font-weight:700;letter-spacing:.03em} /* v216 (ông chủ): SỐ LẦN ĐÃ GỬI trên biểu tượng ✉ / Zalo / 📞 ở cột Yêu cầu gia hạn */ .yc-btn{position:relative} .yc-dem{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:#C8922F;color:#fff; font-size:.66rem;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--trang);pointer-events:none} /* v216 (ông chủ): trạng thái thanh toán nằm dưới số tiền trong ô Thành tiền (bỏ cột Thanh toán) */ .dv-tt{margin-top:6px} /* v217 ô "Ghi nhớ đăng nhập (30 ngày)" ở trang đăng nhập */ .dn-nho{display:flex;align-items:center;gap:8px;font-weight:500;margin:0 0 14px;cursor:pointer} .dn-nho input{margin:0} /* v219 Cài đặt phân hệ: ô NHIỀU lựa chọn (vd lớp lịch khách hàng) */ .cd-nhieu{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px} .cd-nhieu-the{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--vien);border-radius:10px;padding:10px 12px;font-weight:400;margin:0;cursor:pointer} .cd-nhieu-the input{margin-top:3px;flex:none} .cd-nhieu-the b{display:inline;margin-right:4px} .cd-nhieu-the .nho{display:block;margin-top:2px} .cd-cham{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle} /* v219 popup ghi tóm tắt giao tiếp (📞 / Zalo) */ .yc-gt-hop{border:1px solid var(--vien);border-radius:14px;padding:18px;width:min(460px,calc(100vw - 32px));background:var(--trang);color:var(--chu);box-shadow:0 18px 50px rgba(0,0,0,.18)} .yc-gt-hop::backdrop{background:rgba(12,39,64,.35)} .yc-gt-hop textarea{width:100%;box-sizing:border-box} /* v221 Triển khai: hệ nút dàn HÀNG NGANG phía dưới mỗi việc */ .bang-tk tr.tk-dong > td{border-bottom:0;padding-bottom:6px} .bang-tk tr.tk-hang-nut > td{padding-top:0} .tk-nut-ngang{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .tk-nut-ngang .tk-nut{display:contents} .tk-nut-ngang .xoa-nham-o{left:0;right:auto} .tk-nut-ngang .tk-nk{margin-left:auto} /* v222 Dọn dẹp: ô Giữ lại + Xem lại + Lưu cùng một hàng */ .dd-ngay form{margin:0} .dd-ngay-o{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dd-ngay select{width:auto} .dd-chua-luu{margin:6px 0 0} /* v224 popup chọn nhân sự lọc sổ Bán hàng */ .loc-nv-hop input[type=search]{width:100%;box-sizing:border-box;margin:0} .loc-nv-ds{max-height:min(52vh,420px);overflow:auto;display:grid;gap:2px;margin-top:8px;border:1px solid var(--vien);border-radius:10px;padding:6px} .loc-nv-dong{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:8px;cursor:pointer;margin:0;font-weight:400} .loc-nv-dong:hover{background:var(--nen-2)} .loc-nv-dong input{margin:0;flex:none} .loc-nv-dong[hidden]{display:none} button.chip-tt{font:inherit;cursor:pointer} /* v217 NÃO AGENT 2 THẺ (ông chủ): khoá nhiều phạm vi + sửa khoá · "Cách kết nối" hai cột: phân khu | endpoint */ .am-tao2{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;align-items:end;margin:6px 0 16px;padding:12px;border-radius:12px;border:1px solid var(--vien)} .am-tao2 .truong{margin:0} .am-tao2 .am-pv{grid-column:1/-1} .am-pv{border:1px solid var(--vien);border-radius:10px;padding:8px 12px;margin:0} .am-pv legend{font-weight:700;font-size:.85rem;padding:0 4px} .am-pv label{display:inline-flex;align-items:center;gap:6px;margin:2px 16px 2px 0;font-weight:500} .am-pv p{margin:6px 0 0} .am-sua{display:inline-block;text-align:left} .am-sua > summary{list-style:none} .am-sua > summary::-webkit-details-marker{display:none} .am-sua-o{margin-top:8px;padding:10px;border:1px solid var(--vien);border-radius:10px;min-width:280px;background:var(--trang)} .am-sua-o .truong{margin:8px 0} .am-kn{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start} .am-kn-trai{position:sticky;top:70px;display:flex;flex-direction:column;gap:2px;padding:10px} .am-kn-trai a{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--chu)} .am-kn-trai a:hover{background:var(--nen-2)} .am-kn-trai a.dang{background:var(--nen-2);font-weight:700;color:var(--chinh)} .am-kn-nhom{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--chu-mo);margin:10px 10px 4px} .am-kn-nhom:first-child{margin-top:0} .am-kn-phai section{margin-bottom:14px} .am-kn.co-js .am-kn-phai section[hidden]{display:none} .am-kn-tim{width:240px;margin:0} .am-pt{font-weight:700} .am-pt-get{color:#1E6B3E}.am-pt-post{color:#1B4C7D}.am-pt-put{color:#8A6514}.am-pt-delete{color:#A33636} :root[data-giao-dien="toi"] .am-pt-get{color:#9ADCB4}:root[data-giao-dien="toi"] .am-pt-post{color:#9CC3EC} .am-luat{margin:6px 0;padding-left:18px} .am-luat li{margin:4px 0} @media (max-width:860px){.am-kn{grid-template-columns:1fr}.am-kn-trai{position:static;flex-direction:row;flex-wrap:wrap}.am-kn-nhom{width:100%}} /* v225 Não Agent › Cách kết nối: endpoint web = một ô (phương thức + đường / mô tả bên dưới) — trước đây 3 cột + break-all làm cột đường co về một ký tự mỗi dòng ở màn vừa */ .am-api code.am-duong{word-break:normal;overflow-wrap:anywhere} .am-api .am-mt{margin-top:3px} /* v226 thư bị trả lại — lý do dưới nhãn ⚠ ở cột Tương tác / chi tiết dịch vụ */ .yc-tra-lai{margin-top:2px;max-width:280px;overflow-wrap:anywhere} /* v227 Lịch: ô tìm lịch nhân sự + kết quả (＋ Thêm) + nút ✕ bỏ khỏi danh sách */ .lich-tim{margin:6px 0 4px} .lich-tim input[type=search]{width:100%;box-sizing:border-box;margin:0;font-size:.85rem;padding:6px 10px} .lich-kq{display:grid;gap:2px;margin:4px 0 8px} .lich-kq-dong{display:flex;align-items:center;gap:6px;margin:0;padding:3px 4px;border-radius:6px} .lich-kq-dong:hover{background:var(--nen-2)} .lich-kq-dong .chu{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem} .lich-kq-dong .cham-lich{flex:none} .mot-lich .lich-bo-ghim{margin-left:auto;border:0;background:transparent;color:var(--chu-mo);cursor:pointer;padding:0 4px;font-size:.8rem;opacity:.55} .mot-lich:hover .lich-bo-ghim{opacity:1} /* v229 sổ Bán hàng: MÃ PHIẾU BÁN HÀNG — ô xám bạc nhạt trên cùng cột "Bán gì", bấm là chép */ .ma-phieu-dong{margin:0 0 5px} .ma-phieu-ban{display:inline-block;padding:1px 9px;border:1px solid #D3D9E0;border-radius:6px;background:#EEF1F4;color:#3D4A5C; font:600 .78rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em;cursor:copy;user-select:all} .ma-phieu-ban:hover{background:#E3E8EE;border-color:#BCC5CF} :root[data-giao-dien="toi"] .ma-phieu-ban{background:#2A3340;border-color:#3A4656;color:#C9D3DF} /* v232 (#33) Kết nối Facebook 1 chạm — Cài đặt CRM › Kênh nhắn tin */ .fbk-khoi{border:1px solid var(--vien);border-radius:10px;padding:12px 14px;margin:10px 0;background:var(--nen-2)} .fbk-khoi h3{margin:0 0 8px} .fbk-trang{width:100%} .fbk-trang td{vertical-align:top} .fbk-trang .nho{overflow-wrap:anywhere} @media (max-width:600px){.fbk-trang th:nth-child(3),.fbk-trang td:nth-child(3){display:none}} .fbk-trang th,.fbk-trang td{padding-left:6px;padding-right:6px} .fbk-bao{margin-top:12px} .fbk-bao summary,.fbk-tay summary{cursor:pointer;font-weight:600} .fbk-bao ul{margin:6px 0 0;padding-left:4px;list-style:none} .fbk-bao li{margin:3px 0;overflow-wrap:anywhere} .fbk-bao li.ok{color:#1E5233} .fbk-bao li.loi{color:#8A2B2B} .fbk-tay{margin-top:14px} .fbk-chon{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--vien);cursor:pointer} .fbk-chon input{margin-top:3px} /* v239 (#41) TỔNG ĐÀI WEB — hộp "Khách đang gọi", thanh đang nói, hộp tóm tắt (public/js/tong-dai.js — mọi trang nội bộ) + trang phân hệ */ .tdw-hop{position:fixed;right:20px;bottom:20px;z-index:1000;width:300px;max-width:calc(100vw - 24px);background:var(--trang);color:var(--chu);border:1px solid var(--vien);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:14px} .tdw-hop-tieu{font-weight:700;margin-bottom:4px} .tdw-hop-ten{font-weight:600} .tdw-hop-phu{font-size:13px;color:var(--chu-mo);margin-top:2px;overflow-wrap:anywhere} .tdw-hop-nut{display:flex;gap:8px;margin-top:12px} .tdw-hop textarea{width:100%;box-sizing:border-box;margin-top:8px} .tdw-thanh{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:1000;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#14532D;color:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 24px)} .tdw-thanh .nut.vien{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .tdw-thanh .tdw-cup{background:#C2372D;border-color:#C2372D;color:#fff} .tdw-gio{font-variant-numeric:tabular-nums} .tdw-bao{position:fixed;right:20px;bottom:20px;z-index:1001;background:var(--trang);border:1px solid var(--vien);border-radius:10px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18)} .tdw-so{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px} /* v243: 4 ô số MỘT hàng gọn */ .tdw-so .o{margin:0;padding:8px 10px} .tdw-so .mo{line-height:1.25} .tdw-so strong{font-size:20px} /* v243 (ông chủ ~14:50): trang chính 2 CỘT — 2/5 (số · nhân viên · nhỡ · gần đây) | 3/5 (khách đang ở web) */ .tdw-hai-cot{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;align-items:start} .tdw-cot-1 > .o,.tdw-cot-2 > .o{margin-top:0;margin-bottom:14px} .tdw-kdx-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--vien)} .tdw-kdx-tong{text-align:right;line-height:1.1} .tdw-kdx-tong b{display:block;font-size:40px;font-weight:800;color:#16A34A} .tdw-kdx-tong span{font-size:.8rem;color:var(--chu-mo)} .tdw-gan{flex-wrap:nowrap;align-items:flex-start} .tdw-gan-chu{flex:1;min-width:0} @media (max-width:1100px){.tdw-hai-cot{grid-template-columns:1fr}.tdw-cot-2{order:-1}} @media (max-width:560px){.tdw-so{grid-template-columns:repeat(2,minmax(0,1fr))}} /* v243: bảng khách đang ở web trên ĐIỆN THOẠI ⇒ mỗi khách một thẻ (bảng 5 cột không co dưới ~500px, đẩy rộng cả trang) */ @media (max-width:640px){ .tdw-kdx thead{display:none} .tdw-kdx,.tdw-kdx tbody,.tdw-kdx tr{display:block;width:100%} .tdw-kdx tr{padding:10px 12px;border-bottom:1px solid var(--vien)} .tdw-kdx td{display:block;padding:2px 0;border:0} .tdw-kdx td:nth-child(2),.tdw-kdx td:nth-child(3),.tdw-kdx td:nth-child(4){display:inline-block;vertical-align:top;margin-right:14px;font-size:.88rem} .tdw-kdx td.phai{text-align:left;margin-top:6px} .tdw-kdx-tong b{font-size:32px} } .tdw-dong{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--vien)} .tdw-dong.dang-mo,.bang-gon tr.dang-mo{background:var(--nen-2)} /* v243 (#47): Tổng đài web › Nhân viên trực tuyến */ /* v253 (YC-0008): danh sách đơn gộp thêm trong hộp Đề nghị xuất HĐ */ .dnk-them{display:grid;gap:4px;max-height:200px;overflow:auto;padding:8px 10px;border:1px solid var(--vien);border-radius:8px;background:var(--nen-2)} .dnk-them label{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;cursor:pointer} .tdw-nv{display:grid;gap:8px} /* v252.4 (ông chủ 07/10, ảnh /tong-dai-web): nhãn dài "Bật trực nhưng đang tắt — không nghe chuông" ở cột `auto` của lưới ăn hết chỗ ⇒ tên + trạng thái bị ép thành cột 1 chữ. Đổi sang flex xuống dòng: tên giữ ≥ 200px, thiếu chỗ thì nhãn xuống dòng dưới (canh phải). */ .tdw-nv-dong{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:flex-start;padding:9px 10px;border:1px solid var(--vien);border-radius:12px} .tdw-nv-dong .tdw-nv-cham{margin-top:6px;flex:0 0 12px} .tdw-nv-ten{min-width:0;flex:1 1 200px;overflow-wrap:anywhere} .tdw-nv-dong > .nhan{margin-left:auto;max-width:100%} .tdw-nv-dong.tat{opacity:.72} .tdw-nv-cham{width:12px;height:12px;border-radius:50%;background:#9CA3AF} .tdw-nv-dong.bat .tdw-nv-cham{background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)} /* v253 (#87): khung giữ cuộc gọi (mục 8) — trang mở bên trong, thanh cuộc gọi + hộp nổi vẫn ở trên */ .tdw-khung{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:900;background:var(--nen,#fff)} html.tdw-co-khung,html.tdw-co-khung body{overflow:hidden} .tdw-thanh .nut.dang{background:#fff;color:#14532D} .tdw-hop-nhan{display:block;font-size:13px;font-weight:600;margin-top:10px} .tdw-hop input{width:100%;box-sizing:border-box;margin-top:4px} .tdw-hop-hen{display:flex;align-items:center;gap:8px;margin-top:6px} .tdw-hop-hen input{width:auto;margin:0} /* cần gọi lại (mục 3) */ .tdw-gl{padding:9px 0;border-bottom:1px solid var(--vien)} .tdw-gl:last-child{border-bottom:0} .tdw-gl.qua-han{box-shadow:inset 3px 0 0 #C2372D;padding-left:9px} .tdw-gl.da-xong{opacity:.8} .tdw-gl-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px} .tdw-gl-viec{font-size:.92rem;margin:2px 0} .tdw-gl-nut{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px} .tdw-gl-nut form{margin:0} .tdw-gl-kq{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .tdw-gl-kq input{min-width:180px;flex:1} /* v258.1 (ông chủ 08/10 kèm ảnh: "khi link dài quá sẽ bị đẩy như này … tự ẩn phần vượt quá đi"): danh sách khách — link website dài tự cắt "…" (rê chuột thấy đủ qua title có sẵn), giữ "+N"; cột Liên lạc không bị kéo giãn đẩy cả bảng */ .o-web{display:flex;align-items:baseline;gap:4px;max-width:240px;min-width:0} .o-web a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .o-web .mo{flex:none} /* v258: khung thông tin đăng nhập cổng khách (hồ sơ khách › Tài khoản đăng nhập) */ .tkg-hop{border:1px solid color-mix(in srgb,var(--chinh) 30%,var(--vien));background:color-mix(in srgb,var(--chinh) 5%,var(--trang));border-radius:10px;padding:12px 14px;margin:0 0 14px} .tkg-ds{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:10px 0 12px} .tkg-ds dt{color:var(--chu-mo);font-size:.88rem} .tkg-ds dd{margin:0;word-break:break-all} .tkg-mk{font-size:1.05rem;font-weight:700;letter-spacing:.5px} /* v256 (#90): khối mã nhúng nút gọi (Cài đặt › Gọi thoại qua web) */ .ma-nhung{margin:8px 0;padding:10px 12px;background:var(--nen-2);border:1px solid var(--vien);border-radius:8px;white-space:pre-wrap;word-break:break-all;font-size:.85rem} /* v255 (YC-0011 mục 5): báo cáo tổng đài — 8 ô số (2 hàng), thanh ngang theo giờ / ngày */ .tdw-bc-so{grid-template-columns:repeat(4,minmax(0,1fr))} .tdw-bc-hang{display:grid;grid-template-columns:48px minmax(0,1fr) 90px;gap:8px;align-items:center;padding:3px 0} .tdw-bc-nhan{font-size:.82rem;color:var(--chu-mo);font-variant-numeric:tabular-nums} .tdw-bc-thanh{display:flex;height:14px;border-radius:7px;background:var(--nen-2);overflow:hidden} .tdw-bc-thanh span,.tdw-bc-chu{display:inline-block;height:100%} .tdw-bc-thanh .nghe,.tdw-bc-chu.nghe{background:#22C55E} .tdw-bc-thanh .nho-c,.tdw-bc-chu.nho-c{background:#F59E0B} .tdw-bc-chu{width:10px;height:10px;border-radius:3px;vertical-align:middle} /* v255 (YC-0011 mục 2): hồ sơ khách — trong hộp gọi đến + khung nhỏ trên thanh đang nói */ .tdw-hs{margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:var(--nen-2);display:grid;gap:4px;font-size:13px} .tdw-hs-dong{display:flex;gap:6px;align-items:flex-start;overflow-wrap:anywhere} .tdw-hs-bieu{flex:none;width:18px;text-align:center} .tdw-hs-noi{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:1000;width:min(460px,calc(100vw - 24px));margin:0; background:var(--trang);border:1px solid var(--vien);box-shadow:0 10px 30px rgba(0,0,0,.18);padding-right:30px} .tdw-hs-dong-nut{position:absolute;top:4px;right:6px;border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--chu-mo)} /* v254 (YC-0015): bản demo — website mẫu nhúng cạnh màn hình người trực để tự gọi thử */ .tdw-demo-thu{border:1px dashed var(--chinh)} .tdw-demo-khung{display:block;width:100%;height:420px;border:1px solid var(--vien);border-radius:10px;background:#fff} /* sao khách chấm (mục 7) · khách nóng (mục 5) */ .tdw-sao{color:#B7791F;letter-spacing:1px} .bang-gon tr.tdw-nong{background:color-mix(in srgb,#F97316 8%,transparent)} /* hộp thử máy + lịch trực (mục 1, 2) */ .tdw-trang-hop{width:min(520px,calc(100vw - 32px))} .tdw-trang-hop h2{margin:0 0 4px} .tdw-tm{display:grid;gap:8px;margin:12px 0} .tdw-tm-dong{display:grid;grid-template-columns:150px 1fr;gap:4px 10px;align-items:start;padding:8px 10px;border:1px solid var(--vien);border-radius:10px} .tdw-tm-muc{grid-column:2;height:8px;border-radius:4px;background:var(--nen-2);overflow:hidden} .tdw-tm-muc span{display:block;height:100%;width:0;background:#22C55E;transition:width .1s} .tdw-tm-hoi{grid-column:2;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .tdw-tm-hoi[hidden],.tdw-tm-muc[hidden]{display:none} /* display:flex / block đè thuộc tính hidden */ .tdw-tm-ket{font-weight:700;margin:4px 0 12px} .tdw-lt{display:grid;gap:10px;margin:12px 0 8px} .tdw-lt-ca{padding:10px;border:1px solid var(--vien);border-radius:10px;display:grid;gap:8px} .tdw-lt-ngay{display:flex;flex-wrap:wrap;gap:4px 10px} .tdw-lt-ca input[type=time]{width:auto} @media (max-width:560px){.tdw-tm-dong{grid-template-columns:1fr}.tdw-tm-muc,.tdw-tm-hoi{grid-column:1}} /* v242 (#46): HOÁ ĐƠN của đơn bán (views/crm/_hd-don.ejs) — nút "Đề nghị xuất HĐ" / trạng thái + "Xem đề nghị HĐ" */ .hd-don{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px} .hd-don.gon{justify-content:flex-end} .hd-nut{white-space:nowrap} .hd-xem{font-size:.82rem;white-space:nowrap} /* v246 (#52): trang chi tiết đơn — HỘP 3 THẺ (Thu tiền · Mốc việc & đợt thu · Liên quan): tiêu đề cũ trong thẻ ẩn (đã có trên thẻ), giữ nhãn phụ */ .hop-the-don .tab-don{margin:-4px 0 12px} .hop-the-don .the-don-noi > h2.cung-dong > span:first-child,.hop-the-don #lien-quan > h2{display:none} .hop-the-don .the-don-noi > h2.cung-dong{justify-content:flex-end !important;margin:0 0 6px;font-size:.95rem} .hop-the-don .the-don-noi > h2.cung-dong:empty{display:none} /* v251 Cập nhật phần mềm (views/cap-nhat/) */ .cnpm-the.cnpm-loi{border-left:4px solid #D93025} .cnpm-kn summary{cursor:pointer} .cnpm-kn-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end} .cnpm-kn-form .truong{margin:0} @media (max-width:900px){.cnpm-kn-form{grid-template-columns:minmax(0,1fr)}} .cnpm-dau{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-start} .cnpm-dau > div:first-child{flex:1 1 260px;min-width:0} .cnpm-nd{white-space:pre-line;overflow-wrap:anywhere;margin-top:8px} /* v254 (#88): Tính năng mới của nhà cung cấp — mỗi dòng một tính năng, nút "Xin cập nhật" bên phải */ .cnpm-tn{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--vien)} .cnpm-tn:first-of-type{border-top:0} .cnpm-tn-chu{flex:1 1 280px;min-width:0} .cnpm-anh{display:block;max-width:min(100%,420px);max-height:260px;border-radius:8px;border:1px solid var(--vien);margin-top:8px} .cnpm-bo summary,.cnpm-sua summary{list-style:none;cursor:pointer} .cnpm-sua{margin-top:10px} .cnpm-sua summary::-webkit-details-marker{display:none} .cnpm-sua-form{margin-top:10px;padding:12px;border:1px dashed var(--vien-dam);border-radius:10px;background:var(--nen-2)} .cnpm-bo summary::-webkit-details-marker{display:none} .cnpm-ds li{padding:10px 0}