/* ══════════════════════════════════════════════════════════════════════════════════════════════ * BỘ ÁO TRỘN — anh Thắng 14/09/2026 gửi hai tệp DESIGN.md, chọn *"Trộn hai bản"*, xem thử trên * trang tổng rồi bảo *"thay cho trang ghế và chi phí văn phòng và mtd đi em"*. * * 🔴 SỬA Ở ĐÂY LÀ SỬA CHO CẢ BỐN BẢN CHI PHÍ. Bản «vp» và «mtd» KHÔNG có bộ áo riêng — chúng * sinh ra từ chính thư mục này bằng `tools/tach-ban-vung.sh`. Muốn hai bản ấy đổi áo thì * phải đổi ở đây, và bản khu vui chơi đổi theo. Không có đường nào khác trừ khi dựng ba * bộ áo rời — mà ba bộ rời là ba chỗ phải nhớ sửa mỗi lần, tức sớm muộn chúng lệch nhau. * * Lấy gì của ai (hai tệp ấy mâu thuẫn nhau, nên phải nói rõ): * · Officevibe cho MÀU — nền kem ấm, viền KEM (nó cấm hẳn viền xám), chữ navy, nhấn cobalt. * · shadcn cho NHỊP — compact, đơn vị 4px, bóng gần như không thấy, và đỏ CHỈ cho xoá. * * ⚠️ BỐN TÔNG TRẠNG THÁI KHÔNG ĐỔI: cam = đang chờ · xanh dương = tiền đã ra khỏi két · * xanh lá = xong. Chúng mang nghĩa, không phải trang trí. * ⚠️ KHÔNG TẢI FONT NGOÀI — trang chạy ngoài internet; mạng chậm thì chữ nhảy một nhịp giữa * lúc người ta đang gõ số tiền. Dùng chồng font hệ thống. * ⚠️ Cùng đúng bộ tên biến với trang tổng (`vhcp-chi-phi-tong`), để hai trang kế toán mở cạnh * nhau không lệch tông. * ══════════════════════════════════════════════════════════════════════════════════════════════ */ :root{ --nen:#f9f8f6; --the:#ffffff; --nen-2:#f4f1ec; --vien:#f0e9e1; --vien-dam:#e2d6c7; --chu:#171417; --chu-dam:#0c1754; --chu-mo:#8c8781; --nhan:#2545ff; --nhan-dam:#1a34c9; --nhan-nhat:#eaebf8; --do:#e7000b; --d1:4px; --d2:8px; --d3:12px; --d4:16px; --d5:20px; --d6:24px; --bo-the:16px; --bo-nut:18px; --bo-o:10px; --bo-o-bang:6px; --bo-nho:8px; --bo-badge:16px; --bong:0 0 0 1px rgba(12,23,84,.03), 0 1px 3px rgba(12,23,84,.06), 0 1px 2px -1px rgba(12,23,84,.06); } /* GIAO DIỆN DÙNG CHUNG cho các trang của plugin (app chi phí và thư viện hợp đồng). Tách khỏi templates/*.html để hai trang luôn cùng một bộ style, sửa 1 chỗ ăn cả hai. */ /* Bản WordPress: không còn Google Sheet nên ẩn 2 nút mở sheet */ #daOpenSheet,#bpOpenSheet{display:none !important} *{box-sizing:border-box;margin:0;padding:0; font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif} body{background:var(--nen);color:var(--chu);font-size:14px;line-height:1.5} /* CANH THẲNG HÀNG VỚI NỘI DUNG. Thanh xanh trên cùng và các thanh trắng chạy hết bề rộng màn hình, còn thẻ nội dung thì canh giữa trong 1600px — nên trên màn rộng, chữ ở thanh nằm sát lề trái mà thẻ bên dưới lại thụt vào giữa, nhìn như lệch trang. Đệm hai bên của thanh được tính cho bằng đúng lề của khối nội dung. */ .top{background:var(--chu-dam);color:#fff;padding:14px max(22px, calc((100% - 1600px) / 2));display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .top h1{font-size:18px;display:flex;align-items:center;gap:8px} .top .sub{font-size:11px;color:#b9c0e8;margin-top:2px} .bar{background:#fff;border-bottom:1px solid #f0e9e1;padding:10px max(22px, calc((100% - 1600px) / 2));display:flex;gap:10px;align-items:center;flex-wrap:wrap} select,input,textarea{padding:8px 10px;border:1px solid var(--vien-dam);border-radius:var(--bo-o); font-size:14px;font-family:inherit;background:var(--the);color:var(--chu)} /* Ô nhập TRONG bảng bo nhỏ: chín ô bo tròn sát nhau ăn mất bề ngang và tạo một hàng sóng. */ td input,td select,td textarea{border-radius:var(--bo-o-bang)} select:focus,input:focus,textarea:focus{outline:none;border-color:#2545ff;box-shadow:0 0 0 3px rgba(37,69,255,.12)} .btn{padding:8px 16px;border:none;border-radius:var(--bo-nut);font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap} .btn:disabled{opacity:.5;cursor:not-allowed} .b-p{background:#2545ff;color:#fff}.b-p:hover{background:#1a34c9} .b-g{background:var(--chu-dam);color:#fff}.b-x{background:#f4f1ec;color:#171417}.b-d{background:#fdeaea;color:var(--do)} .b-s{background:var(--nhan-nhat);color:var(--chu-dam)} /* BỀ RỘNG TRANG THEO MÁY. Trước đây chốt 1250px: màn 24" thì bỏ trống hai bên gần 600px, còn điện thoại thì lề 22px ăn mất chỗ của bảng. Nay giãn tới 1600px trên màn rộng và bóp lề lại trên máy nhỏ. Các mốc dùng chung một hệ: 1200 · 900 · 820 · 560 · 420. */ .wrap{padding:16px 22px;width:100%;max-width:1600px;margin:0 auto} .card{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-the);box-shadow:var(--bong);margin-bottom:16px;overflow:hidden} .ch{padding:12px 16px;border-bottom:1px solid #f4f1ec;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .ch h2{font-size:14px;font-weight:700} .cb{padding:14px 16px} /* 🔴 KHỐI QUYẾT TOÁN NỔI HẲN LÊN — anh Thắng 26/08: *"Đóng nguyên ô này nổi màu lên cho kế toán thấy"*. Mục 3) là chỗ kế toán phải dừng lại: đối chiếu tạm ứng với thực mua rồi trả tiền. Trước đây nó mặc đúng bộ đồ trắng của mọi khối khác trên màn, nên trong một trang dài toàn khối trắng thì đúng cái khối cần dừng lại lại là cái khó thấy nhất. Khung vàng + dải tiêu đề vàng là để MẮT DỪNG LẠI, không phải để trang trí — cả trang chỉ có MỘT khối mang màu này, mất tính "một" là mất luôn tác dụng. */ /* Thanh đơn: hai hàng chia bằng tay — xem chú thích ở `#donBar` trong app.html. 🔴 CHỈ HÀNG NÚT DÍNH Ở ĐẦU MÀN. Trước 06/09/2026 cả `#donBar` sticky, mà hàng 2 (trạng thái + sổ chỉnh đơn) nằm trong đó nên thanh cao hơn khung nhìn — sticky khi ấy dính ngay và ở nguyên, nội dung dưới không cuộn lên tới được. Nay hàng 2 là khối riêng, không dính. */ .don-bar{display:block;position:sticky;top:0;z-index:40} /* Mở cụm "⋯" trên máy hẹp thì hàng nút cao lên hẳn — lúc ấy thôi dính, không thì lại đúng cái bẫy vừa gỡ, chỉ khác là nấp sau một cú bấm. ⚠️ Lớp `mo` do JS gắn thẳng lên thanh, KHÔNG dùng `:has()`: bộ chọn ấy chỉ có trên trình duyệt đời mới, và máy cũ thì lặng lẽ không áp — đúng kiểu hỏng không ai báo. */ .don-bar.mo{position:static} /* Hàng 2 đứng riêng: cùng lề với thanh trên để hai khối thẳng mép, nhưng KHÔNG dính. */ .don-hang2{padding:0 max(22px, calc((100% - 1600px) / 2));margin-top:10px} .db-hang1{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .db-day{flex:1;min-width:0} /* Hàng 2 chỉ chiếm chỗ khi có nội dung: đơn chưa mở thì cả hai ô đều rỗng/ẩn, và một khoảng trắng 14px treo lơ lửng dưới thanh trông y như lỗi. */ .db-hang2{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap} .db-hang2:not(:empty){margin-top:10px} .db-hang2>#donBadge{flex:1 1 420px;min-width:0} .db-hang2>#donSuBox{flex:0 1 460px;min-width:280px} @media(max-width:900px){.db-hang2>#donSuBox{flex:1 1 100%}} /* 🔴 MẤY NÚT PHỤ RÚT VÀO SAU NÚT "⋯" TRÊN MÁY HẸP — anh Thắng 06/09/2026 gửi ảnh màn điện thoại: sáu nút xếp ba hàng, chiếm gần nửa màn trước khi thấy dòng chi nào, và nút đỏ đậm "Xoá (admin)" là thứ nổi bật nhất trên đó. `display:contents` cho khối bọc nghĩa là TRÊN MÁY TÍNH KHÔNG CÓ GÌ ĐỔI: mấy nút vẫn là con trực tiếp của hàng flex, vẫn tự xuống dòng y như trước. Cả cơ chế này chỉ tồn tại dưới 820px. */ #btnMoreDon{display:none} .db-phu{display:contents} .db-vach{display:none} @media(max-width:560px){.don-hang2{padding:0 10px}} @media(max-width:820px){ #btnMoreDon{display:inline-block} .db-phu{display:none} .db-hang1.mo .db-phu{display:flex;flex-wrap:wrap;gap:8px;width:100%; margin-top:8px;padding-top:10px;border-top:1px dashed #e2d6c7} /* Hai nút một hàng: ngón tay cần bề rộng, và một cột nút dọc dài ngoằng thì cuộn lại y như cái đang muốn chữa. */ .db-hang1.mo .db-phu .btn{flex:1 1 46%} /* Vạch ngăn trước hai nút Xoá — chúng hại nhất nên phải tách khỏi đám nút thường, không nằm lẫn để bấm nhầm. */ .db-hang1.mo .db-vach{display:block;flex:1 1 100%;height:1px;background:#fecaca;margin:2px 0} } .card.qt-noi{border:2px solid #f59e0b;box-shadow:0 2px 10px rgba(245,158,11,.22)} .card.qt-noi>.ch{background:linear-gradient(180deg,#fffbeb,#fef3c7);border-bottom:1px solid #fde68a} .card.qt-noi>.ch h2{color:#92400e;font-size:15px} /* Cụm ba con số là KẾT LUẬN của cả cái đơn — tiền đã đưa · tiền đã tiêu · còn lại bao nhiêu. Đóng chung một khung để đọc như MỘT câu, chứ không phải ba ô rời cạnh nhau. */ /* Dòng ngăn giữa hai đơn vị trong cùng một bảng — xem `_tachDonVi()` trong app.html. */ tr.dv-ngan>td{background:#eef2ff;color:#3730a3;font-weight:800;font-size:12.5px; border-left:4px solid #6366f1;padding:8px 10px} .qt-cum{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end; background:#fffdf5;border:1px dashed #fcd34d;border-radius:10px;padding:12px 14px} @media(max-width:560px){.qt-cum{padding:10px}} .badge{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700} .st-nhap{background:#f4f1ec;color:#8c8781}.st-cho{background:#fef9c3;color:#854d0e}.st-cap{background:#dbeafe;color:#1e40af}.st-duyet{background:#dcfce7;color:#166534} .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px} @media(max-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.grid{grid-template-columns:1fr}} .fld{display:flex;flex-direction:column;gap:3px} .fld label{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.4px} .fld input,.fld select,.fld textarea{width:100%} table{width:100%;border-collapse:collapse;min-width:920px} thead th{background:#f9f8f6;color:#64748b;font-size:11px;font-weight:700;text-transform:uppercase;text-align:left;padding:9px 10px;border-bottom:1px solid #f0e9e1;white-space:nowrap} tbody td{padding:8px 10px;border-bottom:1px solid #f4f1ec;font-size:12.5px;vertical-align:middle} tbody tr:hover{background:#f9f8f6} .tw{overflow-x:auto} .money{text-align:right;font-family:Consolas,monospace;white-space:nowrap} .pos{color:#166534;font-weight:700}.neg{color:#dc2626;font-weight:700} .chip{display:inline-flex;align-items:center;gap:6px;background:#f0fdfa;border:1px solid #99f6e4;color:#2545ff;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;margin:3px} .chip b{color:#0c1754}.chip span{cursor:pointer;color:#8c8781;font-weight:700} .empty{text-align:center;color:#8c8781;padding:26px;font-size:13px} #toast{position:fixed;top:14px;right:14px;z-index:2000;display:flex;flex-direction:column;gap:8px} .t{background:#fff;border-left:4px solid #2545ff;border-radius:8px;padding:10px 15px;box-shadow:0 6px 20px rgba(0,0,0,.15);font-size:13px;min-width:220px} .t.err{border-left-color:#ef4444}.t.warn{border-left-color:#f59e0b} #lo{display:none;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:1500;align-items:center;justify-content:center} #lo.show{display:flex}.spin{width:40px;height:40px;border:4px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} .hide{display:none} .csw{position:relative} .cs-pop{position:absolute;z-index:60;left:0;top:100%;margin-top:2px;width:260px;max-height:240px;overflow:auto;background:#fff;border:1px solid #e2d6c7;border-radius:8px;box-shadow:0 12px 30px rgba(15,23,42,.18)} .cs-list label:hover{background:#f4f1ec} /* ---------- MÁY TÍNH BẢNG & ĐIỆN THOẠI ---------- */ @media(max-width:820px){ body{font-size:13.5px} /* chữ to hơn chút cho dễ đọc */ .top{padding:12px 12px} .top h1{font-size:16px} .bar{padding:8px 10px} .wrap{padding:12px 10px} .ch{padding:10px 12px} .cb{padding:12px 12px} /* THANH TAB: 14 tab thì trên điện thoại xuống 4-5 dòng, đẩy nội dung tụt hẳn xuống. Cho trượt ngang một dòng — quen tay hơn và giữ được chỗ cho nội dung. */ #tabbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} #tabbar::-webkit-scrollbar{display:none} #tabbar .btn{flex:0 0 auto} /* Ô nhập cao hơn cho vừa đầu ngón tay */ select,input,textarea{padding:9px 10px;font-size:13.5px} .btn{padding:9px 13px} #toast{left:10px;right:10px} .t{min-width:0} } @media(max-width:560px){ .wrap{padding:10px 8px} .ch{padding:10px} .cb{padding:10px} .ch h2{font-size:13px} /* Tiêu đề card và nút của nó xuống dòng riêng, khỏi chen nhau */ .ch{flex-direction:column;align-items:stretch} .ch>div{display:flex;flex-wrap:wrap;gap:6px} } @media(max-width:420px){ .top>div:last-child{width:100%;justify-content:flex-end} .btn{padding:8px 11px;font-size:12.5px} } /* Màn rất rộng: cho bảng dùng hết chỗ, khỏi phải trượt ngang vô ích */ @media(min-width:1700px){ .wrap{max-width:1800px} .top,.bar{padding-left:max(22px, calc((100% - 1800px) / 2));padding-right:max(22px, calc((100% - 1800px) / 2))} } /* ------------------------------------------------------------------ TRANG CẤU HÌNH DẠNG XỔ XUỐNG. 11 thẻ cấu hình mở hết một lượt thì phải cuộn cả màn hình mới thấy bảng cần sửa. Gập lại: chỉ mở đúng phần đang khai. Trạng thái gập/mở nhớ trong máy người dùng (localStorage) nên mở lại trang vẫn như cũ. Bấm vào tiêu đề để gập/mở — các nút Lưu, Thêm… trong tiêu đề vẫn bấm bình thường (JS bỏ qua click rơi vào nút/ô nhập). */ .card.xo > .ch{cursor:pointer;user-select:none} .card.xo > .ch h2::before{content:'▾';display:inline-block;width:14px;color:#8c8781;font-size:12px;transition:transform .12s} .card.xo.dong > .ch h2::before{transform:rotate(-90deg)} .card.xo.dong > .ch{border-bottom:none} .card.xo.dong > .ch ~ *{display:none !important} /* Cột "Cơ sở" của bảng dòng chi: một đơn = một cơ sở, đã chốt ở đầu form nên lặp lại ở từng dòng chỉ ăn chỗ. Ẩn CẢ CỘT bằng lớp này (đầu bảng + mọi dòng cùng lúc) thay vì bỏ ô ở dòng — bỏ lệch nhau là cả bảng trượt cột. Đơn cũ còn trộn cơ sở thì JS gỡ lớp này ra để cột hiện lại, kèm tô đỏ dòng lệch. */ #lineTable.anCoso .colCoso{display:none} /* NÚT XỔ "DÒNG CŨ HƠN" CỦA LỊCH SỬ CHỈNH ĐƠN. 🔴 Anh Thắng 28/08/2026: *"bấm nút xổ lịch sử chỉnh đơn, nó xổ ra và không tắt gọn lại được"*.
vẫn gập được — chỉ là cái mũi tên ▸ mặc định bé đến mức không ai đọc nó là một cái nút, nên mở ra rồi thì không còn manh mối nào bảo rằng bấm lại là đóng. Đổi hẳn CHỮ theo trạng thái thì không phải đoán nữa. */ .su-tt .su-dong{display:none} details[open] > .su-tt .su-mo{display:none} details[open] > .su-tt .su-dong{display:inline} /* ══════════════════════════════════════════════════════════════════════════════════════════ RÊ CHUỘT VÀO ẢNH BILL -> PHÓNG TO (anh Thắng 07/09/2026) Ảnh chứng từ trong bảng chỉ cao 28-34px — vừa đủ biết CÓ ảnh, không đủ đọc số tiền trên bill. Muốn xem thì phải bấm, mở thẻ mới, xem xong đóng lại, mất chỗ đang đứng trong bảng. Kế toán soát cả chục dòng một lượt thì đó là cả chục lần mở-đóng. 🔴 LỚP PHỦ NẰM Ở , KHÔNG NẰM TRONG Ô BẢNG. Bảng có `overflow-x:auto` để cuộn ngang; một ảnh phóng to bên trong ô sẽ bị chính khung cuộn ấy CẮT — hiện ra đúng phần nằm lọt trong ô, tức là chẳng to hơn bao nhiêu. `position:fixed` ở body thì thoát khỏi mọi khung cuộn. ⚠️ Không đụng tới thẻ : bấm vẫn mở ảnh gốc ở thẻ mới như cũ. Trên điện thoại không có "rê chuột", nên đường bấm ấy vẫn là đường chính. */ #billZoom{ display:none;position:fixed;z-index:9999;pointer-events:none; background:#fff;border:1px solid #e2d6c7;border-radius:10px;padding:4px; box-shadow:0 12px 34px rgba(15,23,42,.28) } #billZoom img{display:block;max-width:none;border-radius:7px} /* Ảnh nhỏ trong bảng: cho biết nó rê được. */ [data-bill]{cursor:zoom-in} /* ══════════════════════════════════════════════════════════════════════════════════════════ BẤM ẢNH BILL TRÊN MÁY CẢM ỨNG -> LỚP PHỦ NGAY TẠI TRANG (anh Thắng 17/09/2026) 🔴 Trước đây bấm ảnh là đi tới ``. Máy tính mở tab mới nên không sao, nhưng app điện thoại KHÔNG CÓ TAB: đó là một lượt rời trang, và quay lại thì đơn đang mở biến mất vì nó không nằm trong địa chỉ. Xem `_billTapInit()` trong app.html. ⚠️ `position:fixed` + `inset:0` — KHÔNG đặt trong ô bảng. Bảng có `overflow-x:auto`, một lớp phủ bên trong nó sẽ bị chính khung cuộn ấy CẮT, đúng lỗi mà `#billZoom` đã ghi. ⚠️ z-index 3000 — trên cả cổng PIN (`#gate` 3000) thì thôi, nhưng phải trên `#lo` (1500) và toast (2000): mở ảnh mà một cái toast nằm đè lên là bấm đóng trúng toast. ══════════════════════════════════════════════════════════════════════════════════════════ */ #billTap{display:none;position:fixed;inset:0;z-index:2900; background:rgba(12,23,84,.92); align-items:center;justify-content:center;padding:10px; -webkit-tap-highlight-color:transparent} #billTap.hien{display:flex} /* Ảnh vừa khung, KHÔNG phóng quá cỡ thật: bill chụp bằng điện thoại vốn đã 3000px, kéo to hơn chỉ làm nó nhoè. `object-fit:contain` giữ đúng tỉ lệ cho bill dọc. */ #billTap img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px; background:#fff} /* Nút ✕ chỉ là dấu hiệu — cả tấm màn đều bấm đóng được (xem chú thích ở `dung()`), vì ngón cái một tay khó với tới góc trên phải. */ #billTap button{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px; width:40px;height:40px;border:0;border-radius:50%; background:rgba(255,255,255,.18);color:#fff;font-size:17px;line-height:1;cursor:pointer} /* ══════════════════════════════════════════════════════════════════════════════════════════ DÒNG "CHÌM" TRONG BẢNG CHỜ QUYẾT TOÁN (anh Thắng 07/09/2026) Đơn đã cấp tiền mà chưa gửi quyết toán nằm chung bảng với đơn chờ, nhưng phải đọc ra ngay là KHÁC LOẠI: nhạt hơn, nền xám, chữ nghiêng ở cột trạng thái. Không làm mờ tới mức khó đọc — đây là mấy đơn đang treo tiền, thứ cần nhắc chứ không phải thứ cần giấu. */ tr.qt-chim > td{background:#fafafa;color:#64748b} tr.qt-chim > td .badge{opacity:.8} /* Ô GÕ THẲNG TRONG BẢNG DỰ ÁN — anh Thắng 18/09/2026: *"thay vì bấm sửa, thì cho sửa thẳng trong từng dòng đơn"*. Ô sửa được phải TRÔNG khác ô chỉ để đọc, không thì người ta không biết bấm vào được; nhưng cũng không được viền sẵn như ô nhập, kẻo bảng đọc thành một tờ khai. */ .o-sua{ cursor:text; border-radius:4px; } .o-sua:hover{ background:#eef2ff; box-shadow:inset 0 0 0 1px #c7d2fe; }