/* GENERATED FILE — KHÔNG SỬA TRỰC TIẾP. Nguồn: styles/manifest.json · SHA-256 aa24a4bbf3f7d72ef4d855419e93cec1ac3181a2005a900ca119afd3d14a14a4 Tạo lại bằng: npm run build:styles */ /* ===== SOURCE: styles/foundation.css ===== */ /* ============================================================ VLXD THANH HIỀN — phần mềm bán hàng Bảng màu: xanh da trời (chủ đạo) · cam sáng (điểm nhấn) · trắng ============================================================ */ :root{ /* XÁM THAN trung tính (b105 — chủ tiệm chọn 05/08/2026): nền lùi lại để màu CAM một mình nổi bật. Tên biến giữ nguyên --sky-* cho đỡ phải sửa hàng trăm chỗ — hiểu là "thang màu chủ đạo". */ --sky-900:#181B20; --sky-800:#22262E; --sky-700:#2E333D; --sky-600:#3B424F; --sky-500:#4E5766; --sky-400:#8791A0; --sky-300:#BBC2CC; --sky-100:#E7EAEE; --sky-50:#F4F5F7; /* cam sáng — CHỈ cho hành động chính và số cần chú ý */ --or:#F97316; --or-6:#EA6A0B; --or-7:#C25706; --or-safe:#A94704; --or-safe-hover:#873801; --or-50:#FFF2E4; /* trung tính */ --ink:#1B1E24; --ink-2:#2C313A; --slate:#61697A; --slate-2:#61697A; --line:#D8DCE2; --line-2:#EBEDF1; --paper:#FFFFFF; --bg:#ECEEF1; --green:#0C7A57; --green-soft:#E1F4ED; --red:#C6342A; --red-soft:#FCEBE9; --r:8px; --r-lg:12px; --r-sm:6px; --shadow:0 1px 2px rgba(24,27,32,.05), 0 2px 8px rgba(24,27,32,.05); --shadow-md:0 2px 6px rgba(24,27,32,.07), 0 8px 24px rgba(24,27,32,.08); --shadow-lg:0 12px 48px rgba(24,27,32,.24); /* Nhịp giao diện b157: một nguồn duy nhất cho khoảng cách, chiều cao điều khiển và chuyển động. Giữ nguyên hệ font và thang chữ của app cũ. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --control-h:40px; --motion-fast:120ms; --motion-base:180ms; --focus-ring:0 0 0 3px rgba(249,115,22,.2); --f-ui:"Be Vietnam Pro", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --f-mono:"TH Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* b225 · font cho SỐ. Cùng bộ với --f-mono (mỗi chữ số một bề ngang nên số thẳng cột), nhưng số 0 KHÔNG có dấu chấm ở giữa — anh Đạt soi phiếu bán thấy chấm giữa số 0 rối mắt. Xem fonts/TH-MONO-GHI-CHU.txt. */ --f-num:var(--f-mono); --rail:56px; /* b242 · thanh bên CHỈ CÒN BIỂU TƯỢNG, chữ hiện khi rê chuột */ --head:56px; } *{box-sizing:border-box;touch-action:manipulation} /* touch-action: b146 — chạm đôi không phóng trang (xem khối b146 ở workflows.css) */ html,body{height:100%} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* b146 — chữ không tự phồng khi xoay ngang máy */ body{ margin:0; font-family:var(--f-ui); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow:hidden; font-feature-settings:"cv05","ss01"; } button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;border:0;background:none} input,select,textarea{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; width:100%; outline:none; transition:border-color .12s, box-shadow .12s; } input:focus,select:focus,textarea:focus{border-color:var(--sky-500);box-shadow:0 0 0 3px var(--sky-100)} input[readonly]{background:var(--sky-50);color:var(--slate)} /* b297 · anh Đạt 24/09 (ảnh iPhone 13 Pro Max): "mở phiếu thuê. Phần ngày tháng cũng bị dính. Và khung phiếu thuê bị xê dịch". iPhone vẽ ô ngày theo bề rộng RIÊNG của nó — "ngày 24 thg 9, 2026" cần ~212px — và bỏ qua cả width:100% lẫn min-width:0: hai ô chia đôi 396px (mỗi ô ~190px) đè lên nhau, ô phải thò ra ngoài khung ~20px, nên cả phiếu kéo ngang được. Chromium không vậy — bộ đo chạy Chromium nên không thấy. Chữa theo cách WebKit iOS cần: bỏ giao diện gốc (appearance:none) thì ô mới chịu co theo khung; bấm vào vẫn ra bánh xe chọn ngày. iPhone còn canh GIỮA ngày → canh trái cho thẳng hàng các ô khác; ô ngày rỗng không sụp chiều cao (min-height). Chỉ WebKit trên iPhone/iPad có -webkit-touch-callout ⇒ máy tính và Android không bị đụng một điểm ảnh nào. */ @supports (-webkit-touch-callout: none){ input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%} input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.5em} } /* b284 · CHỮ MỜ luôn là CHỮ, không phải SỐ. Ô nào dùng font số (ô quét mã, ô tiền, mã số thuế) thì chữ mờ cũng thành font số — đứng cạnh ô thường là thấy lệch nét (soi ảnh 21/09). Chữ ĐÃ GÕ giữ nguyên font số: đọc dãy mã vạch cần từng số đều bề ngang. */ input::placeholder,textarea::placeholder{font-family:var(--f-ui);letter-spacing:0} :focus-visible{outline:2.5px solid var(--or);outline-offset:2px;border-radius:4px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0} button:focus-visible,a:focus-visible,[tabindex]:focus-visible{box-shadow:var(--focus-ring)} .num{font-variant-numeric:tabular-nums;font-family:var(--f-mono)} .mut{color:var(--slate)} /* ---------- đăng nhập & tài khoản (b154) ---------- Giữ nguyên hệ font cũ: tất cả thành phần kế thừa --f-ui/--f-mono. */ .authgate{ position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px; background:radial-gradient(circle at 50% 15%,#3B424F 0,#22262E 42%,#181B20 100%); } .authgate[hidden]{display:none} .auth-card{width:min(410px,100%);background:var(--paper);border:1px solid rgba(255,255,255,.15); border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:28px} /* b294 · điện thoại: thẻ rộng ra để hàng "☐ Ghi nhớ đăng nhập · Quên mật khẩu?" (cần 287px) nằm MỘT hàng từ 360px trở lên — với đệm cũ (20 + 28px) iPhone 375px chỉ còn 277px và nhãn gãy đôi. */ @media (max-width:560px){ .authgate{padding:var(--space-3)} .auth-card{padding:var(--space-5) var(--space-4)} } .auth-logo{width:52px;height:52px;margin:0 auto 10px;border-radius:12px;background:var(--or); color:#fff;display:grid;place-items:center} .auth-logo svg{width:30px;height:30px} .auth-title{text-align:center;font-size:24px;font-weight:800;letter-spacing:-.3px;margin-bottom:var(--space-5)} /* b294 · chỉ hiện lúc MẤT KẾT NỐI — bình thường thẻ đăng nhập không có dòng chữ phụ nào (anh Đạt 24/09). */ .auth-canh{margin:calc(-1 * var(--space-2)) 0 var(--space-4);padding:var(--space-2) var(--space-3);border-radius:var(--r-sm); background:var(--red-soft);color:var(--red);font-size:12.5px;font-weight:600;line-height:1.45;text-align:center} .auth-card form{display:grid;gap:12px} /* b300 · thẻ Nhận tiệm (đường dẫn #ve=…) — một câu chào trên form */ .auth-chao{margin:calc(-1 * var(--space-3)) 0 var(--space-4);text-align:center;color:var(--ink-2);line-height:1.5} .auth-card .f input[readonly]{background:var(--sky-50);color:var(--ink-2)} .auth-go{width:100%;height:44px;margin-top:2px} /* b293 · ô đăng nhập theo chuẩn (web.dev sign-in form · NIST 800-63B-4 §3.1.1.2): ô và nút cao 44px để đủ vùng chạm; nút Hiện/Ẩn nằm TRONG ô mật khẩu bên phải, chữ --or-safe (5,31:1 trên trắng). */ .auth-card .f input{min-height:44px} .auth-pass{position:relative} .auth-pass input{width:100%;padding-right:64px} .auth-hien{position:absolute;right:2px;top:50%;transform:translateY(-50%);min-height:40px;min-width:56px; padding:0 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--or-safe); font:inherit;font-size:13px;font-weight:700;cursor:pointer} .auth-hien:hover{background:var(--or-50)} .auth-hien:focus-visible{outline:2px solid var(--or-safe);outline-offset:-2px} /* b294 · một hàng: "☐ Ghi nhớ đăng nhập" trái · "Quên mật khẩu?" phải (mẫu Microsoft/Google). Cả hai là vùng chạm ≥44px. Không có ô ghi nhớ (một máy / mất kết nối) thì nút Quên vẫn nằm phải. */ .auth-dong{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-2);min-height:44px} .auth-nho{display:flex;align-items:center;gap:var(--space-2);min-height:44px;cursor:pointer; font-weight:600;color:var(--ink);line-height:1.35;white-space:nowrap} .auth-nho input{width:20px;height:20px;margin:0;flex:0 0 20px;accent-color:var(--or-safe)} .auth-quen{margin-left:auto;min-height:44px;padding:0 var(--space-1);border:0;background:transparent; font:inherit;font-weight:600;color:var(--or-safe);cursor:pointer;white-space:nowrap} @media (hover:hover){.auth-quen:hover{text-decoration:underline}} /* điện thoại: chạm xong không dính gạch chân */ .auth-quen:focus-visible{outline:2px solid var(--or-safe);outline-offset:2px;border-radius:var(--r-sm)} .auth-quen-tb{margin-top:calc(-1 * var(--space-1));color:var(--slate);font-size:12.5px;text-align:right} .auth-quen-tb[hidden]{display:none} .auth-err{padding:9px 11px;border-radius:var(--r-sm);background:var(--red-soft);color:var(--red); font-size:12.5px;font-weight:600} .auth-err[hidden]{display:none} .auth-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border:1px solid var(--line); border-radius:var(--r);background:var(--sky-50)} .auth-who>span:not(.tag){color:var(--slate);font-size:12.5px} .auth-actions{display:grid;gap:8px;margin-top:14px} .auth-actions .btn{justify-content:center} .auth-table .mut{font-size:12px;margin-top:2px} .auth-user-chip{display:flex;align-items:center;gap:6px;max-width:180px} .auth-user-chip span{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.auth-locked>.app{filter:blur(2px);pointer-events:none;user-select:none} /* ---------- khung ---------- */ .app{display:grid;grid-template-columns:var(--rail) 1fr;height:100vh} .rail{ background:linear-gradient(180deg,#2E333D 0%,#1F232B 100%); display:flex; flex-direction:column; padding:10px 8px 8px; gap:1px; overflow-y:auto; box-shadow:inset -1px 0 0 rgba(255,255,255,.06); } .rail::-webkit-scrollbar{width:0} .brand{ display:flex;flex-direction:column;align-items:center;gap:7px; padding:8px 4px 16px; color:#fff; } .brand-mark{ width:40px;height:40px;border-radius:11px;background:#fff; display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px; letter-spacing:-.4px;box-shadow:0 3px 10px rgba(0,0,0,.22); } .brand-mark.logo{padding:4px} .brand-mark svg{width:100%;height:100%;display:block} .brand-name{ font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:#fff;text-align:center;line-height:1.4; } .brand-name .brand-sub{ font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--sky-300); } .navbtn{ position:relative;display:flex;flex-direction:column;align-items:center;gap:5px; padding:10px 4px;border-radius:var(--r);color:#9AA3B2; font-size:12px;font-weight:600;text-align:center;line-height:1.25;letter-spacing:.01em; transition:background .12s,color .12s; } .navbtn svg{width:20px;height:20px;stroke-width:1.75;opacity:.92} .navbtn:hover{background:rgba(255,255,255,.07);color:#fff} .navbtn.on{background:rgba(255,255,255,.12);color:#fff} .navbtn.on svg{opacity:1} .navbtn.on::before{ content:'';position:absolute;left:-8px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0; background:var(--or); } .rail-sp{flex:1} .rail-line{height:1px;background:var(--sky-600);margin:6px 14px 4px} .rail-ft{ color:#AEB8C6;font-size:11px;text-align:center;padding:8px 2px 2px; /* b323 · số bản ≥ 11px (anh cho), tương phản ≥ 4,5 trên thanh tối */ letter-spacing:.06em;line-height:1.4; display:flex;align-items:center;justify-content:space-between;gap:7px; /* huy hiệu trạng thái máy chủ (trang-thai.css) */ } /* ══════════ b242 · THANH BÊN GỌN — chỉ biểu tượng, chữ hiện khi rê chuột ══════════ Anh Đạt 16/09, gửi kèm ảnh thanh bên của app Claude: *"làm theo ảnh t gửi. V gọn app hơn, đỡ nguy cơ nhấn nhầm. Logo cũng để đúng kích thước lại"*. VÌ SAO GIỮ THANH chứ không giấu hẳn (anh hỏi 16/09, em đã đo và trả lời): thanh này là đường đi DUY NHẤT giữa các màn. Giấu đi thì mỗi lần đổi màn tốn 2 cú bấm thay vì 1, và người mới — nhất là tiệm lạ sắp mời dùng thử — mở app lên không thấy đường nào mà đi. Thu còn biểu tượng giữ nguyên MỘT cú bấm. ĐO ĐƯỢC (245 tên hàng thật, 16/09): 92px → 48px trả lại chỗ cho lưới hàng, tên vừa một dòng 78% → 82% ở màn 1920, và 30% → 39% ở màn 1600. Chọn 56px chứ không 48px: vùng bấm phải đủ 40px (token --control-h) cộng lề 8px mỗi bên. 48px thì nút chỉ còn 32px — nhỏ hơn ngưỡng bấm nhầm. CHỈ ÁP CHO MÁY TÍNH. Điện thoại (≤880px) thanh này nằm DƯỚI ĐÁY và VẪN CÓ CHỮ — `responsive-core.css` đặt --rail:0 rồi `mobile.css` dựng lại thành thanh đáy. Đụng vào đây mà quên chặn theo bề ngang là mất chữ ở đáy điện thoại, đúng cái tiệm đang dùng hằng ngày. */ @media (min-width:881px){ /* Ô chữ hiện khi rê chuột phải THOÁT ra ngoài thanh, nên thanh không được cắt. Chỉ bỏ cắt khi cửa sổ đủ cao để 9 nút + logo + chân nằm gọn — đo được 490px là đủ, lấy 640px cho rộng tay. Cửa sổ thấp hơn thì thanh cuộn lại như cũ và ô chữ bị cắt, nhưng đó là cảnh hiếm trên máy bàn. */ .rail{overflow:hidden} @media (min-height:600px){ .rail{overflow:visible} } /* ---- logo: ngang hàng với thanh tiêu đề ---- 🔴 Anh Đạt 16/09 (lần hai): "vẫn lệch mà", gửi kèm ảnh cắt logo đặt cạnh chữ "Bán hàng" trên thanh tiêu đề. Lần trước em chỉnh lệch MÉP NGANG, còn cái anh thấy là lệch DỌC: thanh tiêu đề cao 56px nên tâm chữ ở y=28, mà logo nằm ở y 16→56, tâm 36 — thấp hơn đúng 8px. Nhìn dọc xuống thì logo và dòng chữ đầu màn không cùng một đường. Vá: khối logo cao ĐÚNG bằng `--head` và căn giữa trong đó, nên tâm logo luôn bằng tâm thanh tiêu đề, kể cả khi đổi `--head` sau này. */ .rail{padding-top:0} .brand{height:var(--head);justify-content:center;margin-bottom:8px} /* ---- khung logo BẰNG ĐÚNG bề ngang nút ---- 🔴 Anh Đạt 16/09: "logo chỉnh cho cân với hàng ngang luôn, hiện tại lệch". Đo ra thì cả hai đều đúng tâm 28px — lệch không phải ở tâm mà ở MÉP: nút rộng 40px (x 8→48), khung logo 36px (x 10→46), thụt vào 2px mỗi bên. Ô trắng tương phản mạnh nên 2px đó nhìn ra ngay. Nay khung logo = 40px, mép trùng khít mép nền nút — cùng một cột thẳng từ trên xuống. */ .brand{padding:0;gap:0} .brand-mark{width:40px;height:40px;border-radius:11px} .brand-name{display:none} /* ---- nút: chỉ còn biểu tượng ---- */ .navbtn{padding:9px 4px;gap:0;min-height:40px;justify-content:center} .navbtn svg{width:21px;height:21px} /* ---- chữ thành ô chỉ dẫn nổi bên phải ---- Giữ nguyên thẻ làm tên đọc được của nút (trình đọc màn hình vẫn đọc đúng), chỉ đổi cách vẽ. Đừng thay bằng display:none — làm thế là nút mất tên, người khiếm thị nghe thành "nút" trống. */ .navbtn>span{ position:absolute;left:calc(100% + 9px);top:50%; transform:translateY(-50%) translateX(-4px); background:#1B1F26;color:#fff;padding:7px 11px;border-radius:9px; font-size:12.5px;font-weight:600;letter-spacing:0;line-height:1; white-space:nowrap;text-transform:none; opacity:0;pointer-events:none;z-index:90; box-shadow:0 8px 24px rgba(0,0,0,.30); transition:opacity .12s ease,transform .12s ease; } .navbtn:hover>span, .navbtn:focus-visible>span{opacity:1;transform:translateY(-50%) translateX(0)} @media (prefers-reduced-motion:reduce){ .navbtn>span{transition:none} } /* ---- chân thanh: xếp dọc cho vừa 56px ---- */ .rail-line{margin:6px 10px 4px} /* b284 · huy hiệu Online RỘNG 49px mà ô chân chỉ chừa 40px (padding 8px mỗi bên) → chữ xuống hai dòng, pill trườn ra khỏi cột (soi ảnh 21/09). Hạ đệm ngang còn 2px cho đủ 52px, và khóa nowrap để không bao giờ gãy dòng nữa. Số ms đã dọn sang tooltip. */ /* b293 · VẪN TRÀN — đo 22/09: `.rail` còn padding 8px mỗi bên nên lòng chân chỉ 36px, chữ "● Online 2" cần 54px ⇒ số "2" rơi ra ngoài nền (anh Đạt chụp ảnh). Bản vá b284 chỉ hạ đệm của .rail-ft, quên lớp ngoài (Sổ lỗi #93). Nay chân thanh THOÁT đệm của .rail (margin âm) để dùng trọn 56px, và huy hiệu bỏ giãn chữ + bớt đệm — giữ đủ chữ, giữ cỡ 8px (phương án C anh Đạt chọn 22/09). KHÔNG đụng padding của .rail: nó xếp các nút điều hướng. */ .rail-ft{display:flex;flex-direction:column;align-items:center;padding:8px 0 2px;margin:0 -8px} .rail-ft .server-mode{max-width:none;white-space:nowrap;letter-spacing:0;padding:3px 4px;gap:3px} } /* Cỡ chữ lớn: thanh rộng hơn một chút và biểu tượng to hơn — người dùng chế độ này nhìn kém, biểu tượng 21px là nhỏ. Chữ vẫn chỉ hiện khi rê chuột. */ @media (min-width:881px){ body.big{--rail:64px} body.big .navbtn{min-height:46px} body.big .brand-mark{width:48px;height:48px;border-radius:13px} /* = bề ngang nút ở cỡ chữ lớn */ body.big .navbtn>span{font-size:14px;padding:8px 12px} } .main{display:flex;flex-direction:column;min-width:0;overflow:hidden} .head{ height:var(--head);flex:0 0 var(--head);background:var(--paper); border-bottom:1px solid var(--line);display:flex;align-items:center; gap:10px;padding:0 16px; } .head h1{margin:0;font-size:16px;font-weight:750;letter-spacing:-.35px;white-space:nowrap;line-height:1.2} .head .sub{font-size:12px;color:var(--slate);font-weight:500;white-space:nowrap;line-height:1.2} /* Đầu màn Bán hàng (anh Đạt chốt 03/09): tên màn và số hóa đơn cùng độ cao chữ, không cái nào bị đẩy lên. Tên tiệm là thông tin PHỤ — chữ thường, nhạt, tách bằng một vạch đứng chứ không dính thành một chuỗi nặng. */ .pos-head-invoice{display:inline-flex;align-items:baseline;gap:9px;padding-left:2px} .pos-head-invoice b{font-family:var(--f-mono);font-size:13px;color:var(--ink-2);font-weight:700;letter-spacing:-.01em} .pos-head-shop{font-style:normal;font-size:12px;font-weight:500;color:var(--slate-2);letter-spacing:.01em; padding-left:9px;border-left:1px solid var(--line-2)} .head-sp{flex:1} @media (max-width:1240px){.pos-head-shop{display:none}} .pill{ display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px; font-size:12px;font-weight:600;background:var(--sky-50);color:var(--sky-700); white-space:nowrap; } .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green)} .pill.or{background:var(--or-50);color:var(--or-7)} .pill.or .dot{background:var(--or)} .pill.warn{background:var(--red-soft);color:var(--red)} .pill.warn .dot{background:var(--red)} .view{flex:1;overflow:auto;padding:18px} /* b300 · khung chờ trong index.html — hiện lúc gói giao diện còn đang tải/chạy; app vẽ màn đầu tiên là nó mất */ .kc{display:grid;gap:14px;max-width:1100px} .kc-chu{margin:0;color:var(--slate);font-size:14px;font-weight:600} .kc-o{height:56px;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow)} .kc-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px} .kc-luoi i{height:112px;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow);animation:kc-nhip 1.4s ease-in-out infinite} @keyframes kc-nhip{50%{opacity:.5}} @media (prefers-reduced-motion:reduce){.kc-luoi i{animation:none}} .view.pos{padding:0;overflow:hidden} /* ---------- nút ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:var(--control-h);padding:9px 15px;border-radius:var(--r);font-weight:600;font-size:13.5px; background:var(--paper);border:1px solid var(--line);color:var(--ink); white-space:nowrap;transition:background .08s ease-out,border-color .08s ease-out; -webkit-tap-highlight-color:transparent;touch-action:manipulation; } .btn:hover{background:var(--sky-50);border-color:var(--sky-300)} .btn:active{transform:translateY(1px)} .btn svg{width:16px;height:16px;stroke-width:2} .btn.pri{background:var(--sky-600);border-color:var(--sky-600);color:#fff} .btn.pri:hover{background:var(--sky-700);border-color:var(--sky-700)} .btn.acc{ background:var(--or-safe);border-color:var(--or-safe);color:#fff; box-shadow:0 1px 2px rgba(194,87,6,.2); } .btn.acc:hover{background:var(--or-safe-hover);border-color:var(--or-safe-hover)} .btn.dg{color:var(--red);border-color:#EDD3D0} .btn.dg:hover{background:var(--red-soft);border-color:#E3B9B4} .btn.sm{min-height:34px;padding:6px 11px;font-size:12.5px} .btn.big{padding:13px 20px;font-size:15px;font-weight:700;width:100%;letter-spacing:.01em} .btn[disabled]{opacity:1;cursor:not-allowed;box-shadow:none;background:#F1F3F5; border-color:#DEE1E6;color:#9097A2} .btn.pri[disabled]{background:#D9DDE2;border-color:#D9DDE2;color:#7D858F} .btn.acc[disabled]{background:#F6E7DA;border-color:#EED8C5;color:#A47D64} .btn[disabled]:hover{background:#F1F3F5;border-color:#DEE1E6;color:#9097A2} .btn.pri[disabled]:hover{background:#D9DDE2;border-color:#D9DDE2;color:#7D858F} .btn.acc[disabled]:hover{background:#F6E7DA;border-color:#EED8C5;color:#A47D64} .btn[disabled]:active{transform:none} /* Một hành động chính, các công cụ ít dùng nằm trong menu theo ngữ cảnh. */ .head-actions{position:relative;z-index:12} .head-actions>summary{list-style:none;cursor:pointer} .head-actions>summary::-webkit-details-marker{display:none} .head-actions[open]>summary{background:var(--sky-50);border-color:var(--sky-300)} .head-actions-menu{ position:absolute;right:0;top:calc(100% + 8px);width:300px;padding:6px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-md);display:grid;gap:2px } .head-actions-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px; border-radius:var(--r);text-align:left;color:var(--ink)} .head-actions-menu button:hover{background:var(--sky-50)} .head-actions-menu button>svg{width:18px;height:18px;flex:0 0 auto;color:var(--slate)} .head-actions-menu button>span{display:flex;flex-direction:column;min-width:0} .head-actions-menu strong{font-size:13px;font-weight:700} /* b296 · đường lui về màn cha — đứng TRƯỚC tiêu đề, không lẫn vào dãy nút việc (soát 24/09 mục 14) */ .head-back{display:inline-flex;align-items:center;gap:var(--space-1);min-height:40px;padding:0 var(--space-2) 0 var(--space-1); margin-left:calc(-1 * var(--space-1));border:0;border-radius:var(--r-sm);background:none;cursor:pointer; color:var(--slate);font:600 12.5px/1 var(--f-ui);white-space:nowrap} .head-back:hover{background:var(--sky-50);color:var(--ink)} .head-back svg{width:16px;height:16px} /* Nút icon 33px -> 40px cho đạt vùng bấm (sổ tay mục 1, đồng bộ .icobtn.lg b130). (Nút ✕ bỏ dòng trong phiếu b229 đã thôi ở b296 — dòng phiếu dùng nút ⋯, pos.css .dmenu.) */ /* 🔴 `display:grid` là KHỐI — hai nút icon cạnh nhau tự xếp CHỒNG DỌC, dù ô chứa đã khai `white-space:nowrap` (nowrap chỉ lo chữ, không lo khối). Bảng thiết bị cho thuê vì thế có bút chì nằm trên thùng rác, dòng cao gấp đôi và hai đích bấm dính nhau. `inline-grid` giữ nguyên cách xếp bên trong, chỉ đổi cách nút đứng với nút bên cạnh. */ .icobtn{ width:40px;height:40px;border-radius:var(--r);display:inline-grid;place-items:center;vertical-align:middle; color:var(--slate);transition:background .12s,color .12s; -webkit-tap-highlight-color:transparent;touch-action:manipulation; } .icobtn:hover{background:var(--sky-100);color:var(--sky-700)} .icobtn svg{width:18px;height:18px;stroke-width:2} .icobtn.xl{width:33px;height:33px} .icobtn.xl svg{width:16px;height:16px} .icobtn.dg:hover{background:var(--red-soft);color:var(--red)} /* ===== SOURCE: styles/pos.css ===== */ /* ---------- màn bán hàng ---------- */ /* Bố cục màn Bán hàng: tab hóa đơn trên cùng · thanh quét · phiếu bán hàng ở giữa · bán chạy bên phải Kết quả tìm chỉ bung ra khi gõ/nói, không chiếm chỗ thường trực. */ /* Bố cục màn Bán hàng: hàng hóa bên trái · phiếu bán hàng bên phải, cả hai cùng nhìn thấy. Cột trái là một vùng cuộn: gõ tìm thì kết quả chèn lên trên, hàng bán chạy tụt xuống. */ .pos3{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:18px;height:100%;min-height:0;padding:12px 14px 14px} .pos3-main{display:flex;flex-direction:column;min-width:0;min-height:0;gap:10px;overflow:hidden} /* Khu trên cuộn được (hàng trong kho / kết quả tìm), dải Hàng bán chạy ghim cứng ở đáy — không xê dịch khi tìm hàng. */ .pane{flex:1;min-height:0;display:flex;flex-direction:column;contain:layout paint; padding:9px 10px 10px;background:#EEF3F7;border:1px solid #C8D4DC;border-radius:var(--r-lg)} .results{overflow:auto;min-height:0;padding-right:2px} .results::-webkit-scrollbar{width:8px} .results::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} .tabsbar:empty{display:none} .results[hidden]{display:none} .results{display:block} .scanner{ background:var(--paper);border:1.5px solid var(--sky-600); border-radius:var(--r-lg);padding:11px 14px; display:flex;align-items:center;gap:12px;box-shadow:0 2px 12px rgba(24,27,32,.08); transition:border-color .12s, box-shadow .12s; } .led{ width:9px;height:9px;border-radius:50%;background:#42D39B;flex:0 0 auto; box-shadow:0 0 0 3px rgba(66,211,155,.22);animation:pulse 2.2s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} @media (prefers-reduced-motion:reduce){.led{animation:none}} .scan-field{flex:1;min-width:0} .scan-field input{ background:transparent;border:0;padding:0;color:var(--ink);font-family:var(--f-mono); font-size:19px;font-weight:700;letter-spacing:.04em; } .scan-field input:focus{box-shadow:none} /* Ô quét lúc nào cũng đang chờ gõ — vẽ khung cam quanh input thành cái hộp thô. Bỏ khung ở riêng ô này; thay bằng cả THANH QUÉT sáng nhẹ lên khi có con trỏ. */ #scan:focus-visible{outline:none} .scanner:focus-within{border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(59,66,79,.14), 0 2px 12px rgba(24,27,32,.08)} .scan-field input::placeholder{color:var(--slate);font-weight:400;letter-spacing:0} .scan-cam{ width:40px;height:40px;border-radius:var(--r);background:var(--sky-50);border:1px solid var(--line); display:grid;place-items:center;color:var(--sky-700);flex:0 0 auto;transition:background .12s,color .12s; } .scan-cam:hover{background:var(--or-safe);border-color:var(--or-safe);color:#fff} .scan-cam svg{width:19px;height:19px;stroke-width:1.8} /* thẻ sản phẩm → styles/the-hang.css (b298: mọi luật của thẻ hàng về MỘT tệp — gốc, chữ to, ảnh trong thẻ, điện thoại, màn ≥1600px). Ở đây chỉ còn dòng "Còn N kết quả" bên dưới lưới. */ .res-more{text-align:center;font-size:12px;color:var(--slate);padding:10px 0 4px} .res-more b{color:var(--ink-2)} /* b183 · Dải danh mục ở quầy (anh Đạt chốt 03/09): không tiêu đề, không khung bao, không nút Quản lý. Chỉ còn những ô LỚN tô đặc màu xanh than — khác hẳn thẻ hàng màu trắng bên trên nên nhìn một cái là biết đâu là bộ lọc, đâu là hàng. Ô đang chọn đổi sang cam, chữ đen (6,35:1). */ .pos-quick{flex:0 0 auto;padding:0;background:transparent;border:0} .pos-quick[hidden]{display:none} /* Máy tính: ô xuống dòng thay vì trốn sang phải — cuộn ngang bằng chuột khó, mà ô bị cắt nửa thì không ai bấm. */ /* b324 · anh Đạt 28/09: trả về y hệt b310 (flex-wrap) — anh chốt giữ dáng b310 "đang sử dụng tốt". Lưới auto-fill của b323 làm tiệm một nhóm bị cụt chữ ("Hay bán (mẫ…"); chữ lớn ra 4 ô + ô cuối dài hết hàng là ĐÚNG. */ .pos-qcats{display:flex;flex-wrap:wrap;gap:var(--space-3);padding:2px 2px 4px} .pos-qcat{flex:1 1 150px;min-width:0;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:2px; padding:var(--space-2) var(--space-4);text-align:left;background:#173247;border:2px solid #173247;border-radius:var(--r-lg);color:#fff; transition:background-color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)} .pos-qcat:hover{background:#071F31;border-color:#071F31} .pos-qcat:active{transform:scale(.98)} .pos-qcat.on{background:var(--or);border-color:var(--or-6);color:var(--ink)} .pos-qcat.on:hover{background:var(--or-6)} .pos-qcat strong,.pos-qcat small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pos-qcat strong{font-size:16px;font-weight:700;line-height:1.25} .pos-qcat small{font-size:12.5px;font-weight:400} /* Trình quản lý danh mục: chỉ sửa bản nháp. posQuickSave mới ghi cấu hình. */ .posq-manager{display:grid;grid-template-columns:290px minmax(0,1fr);gap:14px;min-height:430px} .posq-side,.posq-edit{min-width:0;border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--bg)} .posq-side{display:flex;flex-direction:column;gap:9px}.posq-side-hd{display:flex;justify-content:space-between;color:var(--slate);font-size:12px} .posq-catlist{display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:340px} .posq-catrow{display:grid;grid-template-columns:minmax(0,1fr) 40px 30px 30px 30px;gap:4px;align-items:center;padding:3px;border:1px solid transparent;border-radius:8px} .posq-catrow.off .posq-catpick strong{color:var(--slate);text-decoration:line-through} /* công tắc bật/tắt danh mục — xanh than = đang hiện ở quầy */ .posq-toggle{width:36px;height:20px;border-radius:999px;background:#AEBFCB;border:0;position:relative;justify-self:center; transition:background-color var(--motion-fast)} .posq-toggle i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left var(--motion-fast)} .posq-toggle.on{background:#173247}.posq-toggle.on i{left:18px} .posq-catrow.on{border-color:#173247;background:#EAF3F8}.posq-catpick{text-align:left;min-width:0;padding:5px} .posq-catpick strong,.posq-catpick small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .posq-catpick strong{font-size:12px}.posq-catpick small{font-size:12px;color:var(--slate)} .posq-edit{background:#fff}.posq-picked{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:12px;color:var(--slate);margin:7px 0} .posq-picked-act{display:flex;gap:var(--space-3)}.posq-picked-act .text-action{font-size:12px}.posq-picked-act .text-action.dgr{color:var(--red)} .posq-products{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:326px;overflow:auto;padding-right:3px} .posq-product{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:7px;text-align:left; padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff} .posq-product.on{border-color:#173247;background:#EAF3F8}.posq-check{width:20px;height:20px;display:grid;place-items:center; border:1px solid #9EB1BE;border-radius:5px;color:#fff;background:#fff;font-weight:800} .posq-product.on .posq-check{background:#173247;border-color:#173247} .posq-product strong,.posq-product small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .posq-product strong{font-size:12px}.posq-product small{font-size:12px;color:var(--slate)} .posq-none,.posq-empty{padding:20px;text-align:center;color:var(--slate);font-size:12px}.posq-products>.posq-none{grid-column:1/-1;padding:8px 4px 10px;text-align:left}.posq-empty{display:grid;place-content:center;gap:5px;height:100%} /* Một popup duy nhất, không nhận chuột, nên rê ảnh không bao giờ cướp cú bấm của thẻ sản phẩm. JavaScript tự đặt nó bên trái khi bên phải là phiếu. */ .pos-img-preview{position:fixed;z-index:120;width:270px;pointer-events:none;filter:drop-shadow(0 12px 25px rgba(7,31,49,.24))} .pos-img-preview[hidden]{display:none}.pos-img-frame{padding:10px;background:#fff;border:2px solid #173247;border-radius:12px} .pos-img-frame img{display:block;width:246px;height:222px;object-fit:contain;background:#F7FAFC;border-radius:8px} .pos-img-frame strong,.pos-img-frame small,.pos-img-frame b{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pos-img-frame strong{font-size:14px;color:var(--ink)}.pos-img-frame small{font-size:12px;color:var(--slate)} .pos-img-frame b{font-size:16px;color:#173247} /* ---------- hóa đơn đang bán ---------- */ .tape-col{position:relative;display:grid;grid-template-rows:1fr;min-height:0;min-width:0;overflow:hidden} /* Khung phiếu dùng lưới 3 hàng: răng cưa · ruột phiếu (co giãn) · răng cưa. Phần thanh toán nằm cuối ruột phiếu, luôn dính đáy, không bao giờ bị đẩy khỏi màn hình. */ .tape{ background:var(--paper);display:grid;grid-template-rows:auto 1fr auto;min-height:0; position:relative;border-radius:8px;overflow:hidden; /* Tách hẳn khỏi khu giữa: viền xanh đậm + bóng đổ sâu. Trước đây nền #F4F5F7 và phiếu #FFFFFF chỉ chênh 1,07 lần — mắt không tách được. */ border:2px solid var(--sky-600); box-shadow:0 4px 16px rgba(8,51,79,.14), 0 1px 3px rgba(8,51,79,.10); } .zig{height:7px;flex:0 0 7px;background-color:transparent; background-image: linear-gradient(45deg, var(--paper) 50%, transparent 50%), linear-gradient(-45deg, var(--paper) 50%, transparent 50%); background-size:10px 7px;background-repeat:repeat-x; } .zig.top{transform:rotate(180deg)} /* 4 hàng: đầu phiếu / khách / danh sách hàng / chân phiếu. b304 · ruột KHÔNG đệm ngang — mỗi khối tự đệm; dòng hàng và hai dải nền (đầu, chân) chạy trọn bề ngang, khỏi kéo lề âm như trước. */ .tape-in{display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);min-height:0;min-width:0;overflow:hidden} .tape-in>*{min-width:0} /* ═══ b304 · ĐẦU PHIẾU MỘT DÒNG: HĐ · số món · [Thuế · giảm giá] · [⋯] ═══ Bỏ thanh tối "PHIẾU BÁN HÀNG" + dòng tên tiệm + ngày giờ (b303: 42 + 34px): đầu màn đã có số HĐ và tên tiệm, phiếu in có ngày. Điện thoại dùng đúng các lớp này trong .gio-top (mobile-runtime.css). Sửa hóa đơn cũ: nền cam (hoa-don.css). */ .tape-bar{display:flex;align-items:center;gap:6px;min-height:42px;padding:0 6px 0 14px; border-bottom:1px solid var(--line)} .tape-td{flex:1 1 auto;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;color:var(--ink)} .tape-td b{font:700 14px var(--f-mono)} .tape-td svg{width:14px;height:14px;margin-right:6px;flex:0 0 auto} .tape-phu{margin-left:4px;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:500;color:var(--slate)} .tape-tg{flex:0 0 auto;position:relative;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:99px; background:#fff;font:600 12.5px var(--f-ui);color:var(--sky-700);white-space:nowrap} .tape-tg:hover{border-color:var(--sky-400)} .tape-tg.on{background:var(--sky-100);border-color:var(--sky-400);color:var(--sky-800)} .tape-tg:has(+ .tape-dots[hidden]){margin-right:6px} /* sửa hóa đơn cũ: ⋯ ẩn — nút không dính mép phải */ /* đã đặt thuế hoặc giảm giá mà bảng đang gấp → chấm cam, khỏi quên là phiếu có cộng / trừ */ .tape-tg.co::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%; background:var(--or);border:2px solid #fff} .tape-dots{flex:0 0 auto;width:32px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--slate)} .tape-dots:hover,.tape-dots[aria-expanded="true"]{background:var(--sky-100);color:var(--ink)} .tape-dots svg{width:18px;height:18px} .tape-dots[hidden]{display:none} /* ═══ b307 · ĐẦU PHIẾU DỄ NHÌN CHO NGƯỜI LỚN TUỔI — anh Đạt 25/09 đối chiếu ═══ Nền XANH THAN cùng biến --sky-900 đang dùng ở ô "Tiền mặt" đang chọn (.pseg.on) và thanh bên (.rail) — KHÔNG thêm mã màu mới. Chữ trắng / --sky-300 đạt tương phản 17,3:1 / 9,6:1 trên nền này (≥ 4.5:1 WCAG AA). Vòng focus mặc định (outline cam 2,5px, tương phản 6,2:1 trên nền tối) không cần sửa gì thêm — đã thấy rõ. .tape-bar.ed / .gio-top.ed (sửa hóa đơn cũ) GIỮ NGUYÊN nền cam đã có (hoa-don.css): máy tính tự thắng nhờ specificity 2 lớp; .gio-top trên điện thoại chưa có nền riêng cho lúc sửa nên loại tay bằng :not(.ed) ở đây, đừng bỏ — bỏ là chữ cam (--or-safe, 2,95:1) rơi lên nền xanh than, hỏng tương phản. */ .tape-bar:not(.ed),.gio-top:not(.ed){background:var(--sky-900)} .tape-bar:not(.ed) .tape-td,.gio-top:not(.ed) .tape-td{color:#fff} .tape-bar:not(.ed) .tape-phu,.gio-top:not(.ed) .tape-phu{color:var(--sky-300)} .tape-bar:not(.ed) .tape-dots,.gio-top:not(.ed) .tape-dots{color:var(--sky-300)} /* răng cưa đầu phiếu (7px, máy tính) nằm ngay trên thanh: nền trắng của nó thành một dải trắng lạc trên nền tối ⇒ tô cùng màu thanh (giữ nguyên chiều cao — không đổi số món thấy trọn). Sửa hóa đơn cũ (thanh cam) giữ răng cưa như cũ. */ .tape:has(> .tape-in > .tape-bar:not(.ed)) > .zig.top{background:var(--sky-900)} /* Khách: chưa chọn thì hai ô gõ (dải dưới); đã chọn thì MỘT THẺ (khach-hang.css .custline) — cùng nền, cùng vạch trái. */ .cust-band{padding:6px 7px;background:#EEF5F8;border-left:3px solid #315C73;border-radius:8px} .cust-row{display:grid;grid-template-columns:minmax(0,1fr) 134px 34px;gap:6px} .cust-row input{padding:7px 9px;font-size:13px;background:#fff;border-color:#C8D8E1} .cbtn{ display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r); background:#fff;color:var(--sky-700); } .cbtn svg{width:15px;height:15px;stroke-width:2} .cbtn:hover{background:var(--sky-100);border-color:var(--sky-400)} .cbtn.on{background:var(--sky-600);border-color:var(--sky-600);color:#fff} /* --giu-day: đệm đáy tạm sau khi bỏ dòng (xem GIU_DAY trong pos.js) */ .items{overflow-y:auto;overflow-x:hidden;min-height:0;padding:0 0 calc(4px + var(--giu-day, 0px))} .items::-webkit-scrollbar{width:7px} .items::-webkit-scrollbar-thumb{background:var(--line);border-radius:7px} /* ═══ b304 · DÒNG PHIẾU [tên] [ô SL] [thành tiền] [⋯] — đúng thứ tự hóa đơn in: Tên · SL · Thành tiền ═══ Lịch sử: b229 bốn cột [X][tên][giá][bút] → b296 ba cột [tên][tiền][⋯] + một hàng −/+ · đơn vị · ghi chú riêng bên dưới (b303 mỗi món 85–146px: 1366×768 chỉ thấy trọn 2/6 món). Nay MỘT hàng: ô SL là ô gõ luôn có sẵn; dải lẻ ⇄ nguyên · − · + · Xong chỉ mở dưới dòng đang sửa (.sl-dai). Tên sát mép trái (luật 24/09 giữ nguyên). Các cột canh DÒNG ĐẦU của tên (--dong1): tên dài hai dòng thì SL, tiền, ⋯ không trôi xuống giữa. --cot-but/--khe = cột ⋯ và khe cột: hàng pha màu (management.css .maurow) chừa đúng bằng đó để tiền màu thẳng cột thành tiền. */ .item{ --dong1:21px;--cot-but:22px;--khe:10px; /* b307 · theo cỡ chữ mới (tên 16 / tiền 18px) */ display:grid;grid-template-columns:minmax(0,1fr) 54px 116px var(--cot-but);column-gap:var(--khe);align-items:start; padding:8px 4px 8px 12px;border-bottom:1px solid var(--line-2);transition:background .12s; } .item:hover,.item:focus-within{background:var(--sky-50)} .item.mo{background:#FFF9F2} /* dòng đang mở dải số lượng — đứng SAU :hover để thắng nó */ /* b307 · tên hàng + thành tiền TO THÊM MỘT BẬC (thang chữ TO-NHAN-DIEN.md: tên t3→t4, tiền t4→t5 — người lớn tuổi đọc phiếu xa hơn). Cột tiền vẫn 96px cố định; chỉ số RẤT DÀI (.dai, ≥ 100 triệu) mới cần cỡ tự co để lọt cột — giữ nguyên các cỡ đó (đã tính khít, xem #187 số dài nhất có thật). */ .item .nm{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:2px; font-size:16px;font-weight:600;line-height:var(--dong1);overflow-wrap:anywhere} .item .ghi{display:flex;align-items:baseline;gap:4px;font-size:12px;font-weight:500;font-style:italic;line-height:16px;color:var(--sky-600)} .item .ghi svg{width:11px;height:11px;flex:0 0 auto;stroke-width:2;position:relative;top:1px} .item .vuot{font-size:12px;font-weight:600;line-height:16px;color:var(--or-safe)} /* Ô SỐ LƯỢNG: số to ở giữa, đơn vị nhỏ dưới đáy — bấm chỗ nào trong ô cũng là gõ. */ .slo{grid-column:2;grid-row:1;position:relative;display:block;height:40px;margin-top:-1px;cursor:text} .slo input{position:absolute;inset:0;width:100%;height:100%;padding:0 2px 12px;border-radius:8px; text-align:center;font:700 15px var(--f-mono);color:var(--ink)} .slo input:hover{border-color:var(--sky-400)} .slo input:focus,.item.mo .slo input{border-color:var(--or);box-shadow:var(--focus-ring)} .slo.dai input{font-size:13px} /* số lẻ dài ("12,375") vẫn lọt ô */ .dvi{position:absolute;left:2px;right:2px;bottom:4px;pointer-events:none;text-align:center;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:600;line-height:12px;color:var(--slate)} /* b223 · CỤM TIỀN: đúng MỘT con số (thành tiền); "đơn giá × số lượng" chỉ hiện khi số lượng khác 1 — bỏ hẳn là mất thông tin, để thường trực là lại thành hai số như trước b223. b229 · 16px: "giá tiền nhìn to hơn 1 chút". */ .item .tt{grid-column:3;grid-row:1;display:flex;flex-direction:column;align-items:flex-end;gap:1px; font:800 18px var(--f-mono);text-align:right;white-space:nowrap} .item .tt b{font-weight:800;line-height:var(--dong1)} /* Cột tiền rộng CỐ ĐỊNH để ô SL mọi dòng thẳng hàng — số dài phải tự thu vào cột, không được tràn sang trái (ô SL nằm đè lên phần tràn: kiểm độc lập 25/09 thấy "1.800.000 × 2,5" thành "800.000 × 2,5"). Thành tiền từ 100 triệu ("125.000.000", 11 ký tự) chữ nhỏ lại (.dai, pos-phieu.js) — tới 99 triệu vẫn 16px như luật b229; dòng "đơn giá × SL" được xuống dòng. */ .item .tt.dai b{font-size:14.5px} .item .tt.over b,.item .tt.over .ttin{color:var(--or-7)} /* Đang sửa đơn giá: ô nhập lấn sang chỗ ô SL (ẩn tạm) — giá cả triệu ("1.800.000 / tấn") gõ vẫn thấy đủ số trên điện thoại; số lượng vẫn đọc được ở dòng "đơn giá × SL" ngay dưới. */ .item .tt.dangsua{grid-column:2/4} .item:has(.tt.dangsua) .slo{display:none} /* Ô nhập đơn giá mở ra ĐÚNG chỗ con số vừa đứng — mắt không phải đi tìm. */ .item .ttin{ width:100%;height:24px;padding:0 5px;text-align:right; font-family:var(--f-mono);font-size:inherit;font-weight:800;color:var(--ink); border:1px solid var(--sky-400);border-radius:5px;background:var(--sky-50); } .item .ttin:focus{box-shadow:none;background:#fff} .item .ttx{font-size:12px;font-weight:500;line-height:15px;color:var(--slate-2);white-space:normal} .item .dmenu{ grid-column:4;grid-row:1;justify-self:end;width:26px;height:26px;margin:-3px -4px 0 0; display:grid;place-items:center;border-radius:5px; color:var(--slate-2);opacity:.5;transition:opacity .12s,color .12s,background .12s; } .item .dmenu svg{width:16px;height:16px} /* ⋯ MỜ THƯỜNG TRỰC chứ không ẩn hẳn (cùng lý do cây bút cũ, anh Đạt 10/09): ẩn đi thì không ai biết là bấm được. Rê vào / đang mở menu thì đậm. Máy cảm ứng: đậm luôn (management.css, mobile-runtime.css). */ .item:hover .dmenu,.item:focus-within .dmenu,.item .dmenu[aria-expanded="true"]{opacity:1} .item .dmenu:hover,.item .dmenu[aria-expanded="true"]{background:var(--sky-100);color:var(--sky-700)} /* menu ⋯ — gắn vào (ngoài danh sách cuộn nên không bị xén), vị trí đặt bằng JS */ .dmenu-pop{position:fixed;z-index:95;min-width:210px;padding:var(--space-1);display:grid;gap:2px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)} .dmenu-pop button{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:36px;padding:0 var(--space-3); border:0;border-radius:var(--r);background:none;text-align:left;cursor:pointer;font:600 13px/1.2 var(--f-ui);color:var(--ink)} .dmenu-pop button:hover,.dmenu-pop button:focus-visible{background:var(--sky-50)} .dmenu-pop button svg{width:16px;height:16px;flex:0 0 auto;color:var(--slate)} .dmenu-pop button b{font-family:var(--f-mono);font-weight:700} .dmenu-pop .dg,.dmenu-pop .dg svg{color:var(--red)} .dmenu-pop .dmenu-vach{height:1px;margin:2px var(--space-2);background:var(--line)} /* b304 · dòng đầu menu của một món: mã · tên — mã hàng rời khỏi dòng phiếu cho tên rộng chỗ, đối chiếu ở đây */ .dmenu-td{max-width:260px;padding:6px 12px 8px;margin-bottom:2px;border-bottom:1px solid var(--line); font-size:12.5px;line-height:1.35;color:var(--slate)} .dmenu-td b{display:block;margin-bottom:1px;font-size:12px;color:var(--ink)} /* ═══ b304 · DẢI SỬA SỐ LƯỢNG — chỉ dòng đang mở (pos.js slMo) ═══ Lẻ ⇄ nguyên là hai nút đoạn ghi rõ quy đổi ("Tấn = 20 bao") thay nút ⇄ phải đọc title mới biết đang bán theo gì. Cùng kiểu đoạn với ô Thuế GTGT trong bảng Thuế · giảm giá (.tg-doan). */ /* b309 · mã nhiều đơn vị (Mét · Cuộn 100m · Cuộn 50m): dải xuống hàng thay vì cắt mất nút cuối */ .sl-dai{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding:6px; border:1px solid #F3C9A2;border-radius:10px;background:#fff} .sl-cach{flex:1 1 auto} .sl-doan,.tg-doan{display:inline-flex;max-width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff} .sl-doan{flex-wrap:wrap} /* ba đơn vị trở lên: nhóm đơn vị một hàng, − + Xong cùng hàng dưới canh phải (không tách đôi) */ .sl-doan.nhieu+.sl-cach{flex:0 0 100%;height:0;margin:-3px 0} .sl-doan.nhieu+.sl-cach+.sl-b{margin-left:auto} .sl-doan button,.tg-doan button{height:32px;padding:0 12px;font:600 13px var(--f-ui);color:var(--ink-2);white-space:nowrap} .sl-doan button+button,.tg-doan button+button{border-left:1px solid var(--line)} .sl-doan button.on,.tg-doan button.on{background:var(--sky-900);color:#fff} .sl-doan i{font-style:normal;font-size:12px;font-weight:500;opacity:.8} .sl-b{width:40px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff; font:700 18px/1 var(--f-ui);color:var(--sky-700)} .sl-b:hover{background:var(--sky-100)} .sl-xong,.nt-xong{height:32px;padding:0 14px;border-radius:8px;background:var(--sky-900);color:#fff;font:700 13px var(--f-ui)} /* Ô ghi chú: CHỈ khi mở từ ⋯ → Ghi chú (một lối vào, b296). Đọc ghi chú thì ở dòng nghiêng dưới tên (.ghi). */ .item .ntrow{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin-top:8px} .item .ntrow svg{width:12px;height:12px;flex:0 0 auto;stroke:var(--slate-2);stroke-width:1.9} .item .ntin{flex:1;min-width:0;height:32px;padding:0 10px;border-color:var(--or);border-radius:8px;background:#fff;font-size:13px} .item .ntin::placeholder{color:var(--slate-2);font-style:italic} .item .ntin:focus{box-shadow:var(--focus-ring)} /* Dòng sơn pha: ô "? lít" + hàng mã màu (management.css .maurow) nằm ngay dưới dòng, thuộc về dòng đó. */ .item .son{grid-column:1/-1;display:flex;align-items:flex-start;gap:6px;margin-top:6px;min-width:0} .item .son .litsel{margin-top:2px} /* b225 · CHỌN DUNG TÍCH ngay trên dòng hàng sơn. Anh Đạt 10/09: "phần này chủ động thay đổi được số lít vì có sơn 15L, 17L". Dùng bên trong, lệch với khung bo tròn bên ngoài → hai hình chữ nhật lệch nhau. Nay KHUNG là ô nhập: input không viền, không vòng focus riêng; khung đổi viền cam khi có con trỏ (:focus-within). Một hình, một viền. */ .eqpick-q{display:flex;align-items:center;gap:10px;height:44px;background:var(--paper);border:1px solid var(--line); border-radius:10px;padding:0 12px;margin-bottom:8px;transition:border-color var(--m-1,120ms)} .eqpick-q:focus-within{border-color:var(--or);box-shadow:0 0 0 1px var(--or),0 0 0 4px var(--or-50)} .eqpick-q svg{width:18px;height:18px;flex:none;stroke:var(--slate);fill:none;stroke-width:2} .eqpick-q input{border:0;background:transparent;padding:0;height:100%;flex:1;min-width:0;font-size:16px;box-shadow:none} .eqpick-q input:focus,.eqpick-q input:focus-visible{outline:none;box-shadow:none;border:0} /* align-content:start — b295: không có nó, lưới giãn các dòng cho đầy chiều cao khung → thẻ hở 37px */ .eqpick-ds{display:grid;gap:5px;align-content:start;max-height:34vh;overflow:auto;overscroll-behavior:contain} /* b282 · anh Đạt 21/09 (ảnh phóng to dòng "Cây chống tăng"): *"chữ trong ô nên gọn gàng, cân bằng lại"*. Trước: tên + đơn vị chung dòng, giá chữ mono lẻ loi dòng dưới, ô tích treo góc trên. Nay HAI DÒNG CỐ ĐỊNH, hai cột thẳng hàng như danh sách món của Loyverse: dòng 1 = tên (đậm, một dòng cắt …) · giá (đậm, phải); dòng 2 = đơn vị · "mỗi ngày"; ô tích đứng giữa cả hai dòng. Số dùng tabular-nums, không đổi font mono. Cao 56px. */ .eqpick-i{display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-rows:20px 16px;align-items:center; column-gap:10px;row-gap:2px;width:100%;height:56px;padding:9px 12px;border:1px solid var(--line);border-radius:10px; background:var(--paper);cursor:pointer;text-align:left;font:inherit;color:var(--ink);line-height:1} .eqpick-i.on{border-color:var(--sky-700);background:var(--sky-100)} /* :hover chỉ trên máy có chuột — trên điện thoại nút vừa chạm giữ :hover mãi, viền mờ đi như mất viền (ảnh anh 21/09) */ @media (hover:hover){ .eqpick-i:hover{border-color:var(--line-2)} } .eqpick-tick{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px; border:1.5px solid var(--line-2);border-radius:6px;background:var(--paper)} .eqpick-i.on .eqpick-tick{background:var(--sky-700);border-color:var(--sky-700)} .eqpick-tick svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3} /* b295 · món ĐÃ có dòng trong phiếu: nút khóa, tích xám — nhìn là biết, chạm không làm gì. Trước b295 tích được, nút ghi "Thêm 1 thiết bị" mà bấm không thêm gì. (chữ xám trên --bg: 4,74:1) */ .eqpick-i.da-co{background:var(--bg);border-color:var(--line);cursor:default} .eqpick-i.da-co .eqpick-tick{background:var(--slate);border-color:var(--slate)} .eqpick-i.da-co .eqpick-dv b{color:var(--ink)} .eqpick-nm{grid-column:2;grid-row:1;min-width:0;font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .eqpick-gi{grid-column:3;grid-row:1;font-size:14px;line-height:20px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right} .eqpick-gi small{font-size:12.5px;font-weight:500;color:var(--slate)} .eqpick-dv{grid-column:2;grid-row:2;min-width:0;font-size:12.5px;line-height:16px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .eqpick-dv b{font-weight:600;color:var(--sky-700)} .eqpick-ng{grid-column:3;grid-row:2;font-size:12.5px;line-height:16px;color:var(--slate);white-space:nowrap;text-align:right} .eqpick-trong{padding:14px 4px;color:var(--slate);text-align:center} .eqpick-ft{display:flex;gap:8px;justify-content:flex-end;margin-top:9px} .eqpick-ft .btn{min-height:40px} /* b280 · điện thoại: màn chọn thiết bị CHIẾM TRỌN hộp — phiếu và chân Hủy/Lưu tạm ẩn, nháp giữ nguyên trong RTMP (không mở hộp thứ hai). b295: ẩn theo KHỐI của khung mới, không theo thứ tự con. */ @media (max-width:880px){ .modal.dang-chon .m-ft,.modal.dang-chon .pt-tin,.modal.dang-chon .pt-tien,.modal.dang-chon .pt-them, .modal.dang-chon .pt-hang>.sect,.modal.dang-chon #r_eqs,.modal.dang-chon #r_parts{display:none} .modal.dang-chon .m-bd{padding:0;overflow:hidden} /* MỘT thanh cuộn: chỉ danh sách cuộn, thân hộp đứng yên */ /* b295 · MỘT thanh tiêu đề: lúc chọn ẩn thanh "Lập phiếu cho thuê ✕" của hộp (trước hai thanh chồng nhau, 75px + 48px). Hộp phiếu chiếm trọn màn nên bộ chọn cao đúng 100dvh. */ .modal.dang-chon .m-hd{display:none} .modal.dang-chon .eqpick{display:flex;flex-direction:column;height:100dvh;padding:0;border:0;border-radius:0;background:var(--bg);margin:0} .eqpick-hd{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;min-height:56px; padding:max(var(--space-1),env(safe-area-inset-top)) var(--space-2) var(--space-1);background:var(--paper);border-bottom:1px solid var(--line)} .eqpick-hd b{text-align:center;font-size:16px;white-space:nowrap} .eqpick-back{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--or-safe); min-height:44px;padding:0 var(--space-1);white-space:nowrap} .eqpick-back svg{width:16px;height:16px} /* ô tìm dính đỉnh trên nền riêng, danh sách bắt đầu DƯỚI nó — cuộn lên không chui dưới ô tìm */ .modal.dang-chon .eqpick-q{margin:10px 12px} .modal.dang-chon .eqpick-hd+.eqpick-q{position:relative;z-index:1} .modal.dang-chon .eqpick-ds{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 10px;max-height:none;gap:8px;border-top:1px solid var(--line)} .modal.dang-chon .eqpick-ft{position:sticky;bottom:0;margin:0;padding:10px 12px max(10px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:8px} .modal.dang-chon .eqpick-ft .btn{width:100%;min-height:44px} } /* b295 · MÁY TÍNH đang chọn thiết bị: phần tiền và các dòng tạm ẩn, danh sách dùng chỗ đó; thân hộp KHÔNG cuộn. Trước: mở bộ chọn là thân hộp cuộn 185px, chỉ thấy 4/7 món ở 1366×768. Thẻ 48px (chuột, chuẩn 24px) vẫn hai dòng như b282. Trần danh sách = hộp (100vh − 48px) trừ phần cố định đo được, xem tests/browser/b295-regressions.js T19. */ @media (min-width:881px){ .modal:has(.phieuthue){max-height:calc(100vh - 48px)} .modal.dang-chon .pt-tien,.modal.dang-chon #r_eqs,.modal.dang-chon #r_parts, .modal.dang-chon .pt-hang>.sect-act>.btn{display:none} .eqpick-i{height:48px;padding-top:5px;padding-bottom:5px} .eqpick-ds{gap:4px} .modal.dang-chon .eqpick-ds{max-height:calc(100vh - 391px)} } /* ═══ b296 · HỘP "NHẬN LẠI HÀNG" (quyết toán phiếu thuê) — rentReturn · retCalc trong rentals.js ═══ Máy tính: bảng 6 cột như cũ. Điện thoại ≤ 560px: mỗi thiết bị một THẺ — tên một hàng; Đã giao · Trả lại · Thiếu/hỏng một hàng; Giá đền · Tiền đền một hàng. Trước b296 bảng làm thân hộp tràn ngang 234px ở 428px (302px ở 360px): cột Thiếu/hỏng, Giá đền, Tiền đền và dòng "trả lại khách …" bị cắt. */ .rt-bang{max-height:280px} .rt-bang input{text-align:right;padding:4px 6px} .rt-bang .rt-tra input{width:74px} .rt-bang .rt-gia input{width:96px} @media (max-width:560px){ .rt-bang{max-height:none;overflow:visible;border:0} .rt-bang table,.rt-bang tbody,.rt-bang tr,.rt-bang td{display:block} .rt-bang thead{display:none} .rt-bang tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:"ten ten ten" "giao tra thieu" "gia gia den";gap:var(--space-2) var(--space-3); padding:var(--space-3);border:1px solid var(--line);border-radius:var(--r);background:var(--paper)} .rt-bang tr+tr{margin-top:var(--space-2)} .rt-bang td{padding:0;border:0;text-align:left;min-width:0} .rt-bang td{align-self:start} .rt-bang td::before{content:attr(data-nhan);display:block;font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:0;color:var(--slate);margin-bottom:2px;line-height:16px} .rt-bang .rt-ten{grid-area:ten;font-weight:700} .rt-bang .rt-ten::before{content:none} .rt-bang .rt-giao{grid-area:giao;line-height:44px} .rt-bang .rt-tra{grid-area:tra} .rt-bang .rt-thieu{grid-area:thieu;line-height:44px} .rt-bang .rt-gia{grid-area:gia} .rt-bang .rt-den{grid-area:den;line-height:44px;text-align:right} .rt-bang .rt-den::before{text-align:right} .rt-bang .rt-tra input,.rt-bang .rt-gia input{width:100%;min-height:44px;font-size:16px} } /* ===== SOURCE: styles/khoa-nhanh.css ===== */ /* ============================================================ b300 · MÀN KHÓA NHANH 6 SỐ (frontend/khoa-nhanh.js) — b325 kiểu iPhone (mẫu anh duyệt: docs/thiet-ke/b325/khoa-mau.*) Nền tối TOÀN màn (bỏ thẻ trắng): tên người + "Nhập mật mã", 6 vòng rỗng tô dần, bàn phím 3×4 phím tròn 76px (số 32px) ở nửa dưới — đúng bàn phím mở khóa iPhone ai cũng quen tay; màn thấp / hẹp (320px, laptop 680px) phím 64px. Không ô nhập nào ⇒ điện thoại không bật bàn phím hệ thống. Máy tính gõ thẳng bằng bàn phím thật, bấm phím trên màn cũng được. Lúc khóa, app phía sau bị ẩn hẳn (visibility) chứ không làm mờ: mờ vẫn đọc được số to. ============================================================ */ body.khoa-on>.app,body.khoa-on>#ov,body.khoa-on>#saleFollow{visibility:hidden} .khoa{ position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden; padding:max(20px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,#2A303A 0,#1A1D23 55%,#121418 100%);color:#fff; } .khoa:focus{outline:0} .khoa button{font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .khoa button:focus-visible{outline:2px solid #fff;outline-offset:2px} /* b325 · anh 28/09 "làm cao lên chút, thuận một tay": khối chữ + bàn phím đứng giữa phần trên (hai lề auto chia đều), dòng dưới cùng dính đáy — như iPhone: phím đầu ~36% chiều cao màn, phím 0 ~78% ⇒ ngón cái một tay với tới cả 12 phím */ .khoa-tren{flex:0 0 auto;margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:360px;padding:8px 0 24px} .khoa-dau{display:flex;align-items:center;gap:6px;max-width:100%;font-size:13px;font-weight:600;color:rgba(255,255,255,.72)} .khoa-dau svg{flex:0 0 14px;width:14px;height:14px} .khoa-dau span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .khoa-ten{margin:6px 0 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:22px;font-weight:700;letter-spacing:-.2px;color:#fff} .khoa-nhap{margin:0;font-size:17px;font-weight:500;color:rgba(255,255,255,.9)} .khoa-cham{display:flex;gap:22px;margin-top:14px} .khoa-cham i{width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;box-sizing:border-box} .khoa-cham i.co{background:#fff} .khoa-cham.rung{animation:khoa-rung .4s ease-in-out} @keyframes khoa-rung{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}} .khoa-dem{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .khoa-loi{min-height:20px;margin:6px 0 0;text-align:center;font-size:14px;line-height:1.4;color:rgba(255,255,255,.8)} .khoa-loi.loi{color:#FFB4A9} .khoa-phim{flex:0 0 auto;margin-bottom:auto;display:grid;grid-template-columns:repeat(3,76px);grid-auto-rows:76px;gap:18px 24px;justify-content:center} .khoa-so{width:76px;height:76px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff; font-size:32px;font-weight:400;display:grid;place-items:center} .khoa-so:active{background:rgba(255,255,255,.34)} @media (hover:hover){.khoa-so:hover{background:rgba(255,255,255,.24)}} .khoa-so.khoa-xoa{background:transparent;font-size:16px;font-weight:500} .khoa-duoi{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:380px;margin-top:18px} .khoa-nguoi{display:flex;justify-content:center;gap:8px;max-width:100%;overflow-x:auto;scrollbar-width:none} .khoa-ng{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:44px;max-width:180px;padding:0 12px 0 6px;border:0;border-radius:22px; background:rgba(255,255,255,.1);color:rgba(255,255,255,.88);font-size:13px;font-weight:600} .khoa-ng b{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);font-size:13px} .khoa-ng span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .khoa-ng[aria-pressed="true"]{background:rgba(255,255,255,.24);color:#fff} .khoa-mk{min-height:44px;padding:0 12px;border:0;background:transparent;color:rgba(255,255,255,.8);font-size:13px;font-weight:600} @media (hover:hover){.khoa-mk:hover{text-decoration:underline}} /* 320px, điện thoại xoay ngang, laptop màn thấp: phím 64px, bỏ dòng tên tiệm cho đủ chỗ */ @media (max-width:359px),(max-height:680px){ .khoa-phim{grid-template-columns:repeat(3,64px);grid-auto-rows:64px;gap:12px 22px} .khoa-so{width:64px;height:64px;font-size:28px} .khoa-tren{gap:6px;padding:0 0 10px} .khoa-dau{display:none} .khoa-cham{margin-top:8px} .khoa-duoi{gap:2px;margin-top:10px} } /* chữ LỚN: phóng theo (styles/co-chu.css) */ body.big .khoa-ten{font-size:26px} body.big .khoa-nhap{font-size:20px} body.big .khoa-so{font-size:36px} body.big .khoa-so.khoa-xoa{font-size:18px} body.big .khoa-dau,body.big .khoa-ng,body.big .khoa-ng b,body.big .khoa-mk{font-size:15px} body.big .khoa-loi{font-size:16px} /* hộp đặt mã */ .khoa-giai{margin:0 0 var(--space-3);color:var(--ink-2);line-height:1.5} .khoa-o{letter-spacing:.35em;font-size:20px} .khoa-bo{margin-top:var(--space-3)} @media (prefers-reduced-motion:reduce){.khoa-cham.rung{animation:none}} /* ===== SOURCE: styles/dat-hang.css ===== */ /* ============================================================ b301 · ĐẶT HÀNG · BÁO GIÁ (frontend/dat-hang.js) + CA BÁN (frontend/ca-ban.js) Dựng trên khối sẵn có (kpis · panel · inv-tbl · mcard · trow · fchip · note) — chỉ thêm phần riêng. Cam chỉ cho số cần chú ý (tiền còn phải thu, cọc đang giữ, tổng báo giá); còn lại xám mực như các màn khác. ============================================================ */ /* ── danh sách ── */ .dh-bang .dh-so{white-space:nowrap} .dh-bang .dh-hang{max-width:280px;font-size:12.5px;line-height:1.45;color:var(--slate)} .dh-bang tr.clk{cursor:pointer} .dh-the{cursor:pointer} .dh-the-tt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px} .dh-coc{font-size:12.5px;font-weight:700;color:var(--or-safe)} .dh-loc .fchips{flex:1 1 auto;justify-content:flex-end} /* chữ phụ XUỐNG DÒNG được (khác .cell-sub của bảng: một dòng, cắt "…") — câu giải thích trong hộp không bao giờ bị cắt */ .dh-phu{margin:0;font-size:12.5px;line-height:1.5;color:var(--slate)} span.dh-phu{display:inline} .dh-chon-o span.dh-phu,.dh-dong .dh-phu{display:block} /* ── chi tiết một phiếu ── */ .dh-ct{display:flex;flex-direction:column;gap:var(--space-3)} .dh-so-nhanh{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--slate)} .dh-so-nhanh b{margin-left:4px;font-size:16px;color:var(--ink)} .dh-so-nhanh .dh-con-thu b{color:var(--or-safe)} .dh-acts{display:flex;flex-wrap:wrap;gap:var(--space-2)} .dh-acts .btn{min-height:40px} .dh-dau{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .dh-khach{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--sky-50);font-size:14px;line-height:1.5} .dh-khach>div{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:baseline} .dh-nhan{color:var(--slate);font-size:12.5px} .dh-dong td{vertical-align:top} .dh-dong-dt{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)} .dh-dong-dt li{padding:10px 0;border-bottom:1px solid var(--line-2)} .dh-dt-ten{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14.5px} .dh-dt-ten .num{flex:0 0 auto;font-weight:700} .dh-tien{display:grid;gap:2px;width:min(380px,100%);margin-left:auto} .dh-tien .trow{font-size:13.5px} .dh-tien .trow.tot{text-transform:none;letter-spacing:0;font-size:13px} .dh-tien .dh-giu .num{color:var(--or-safe);font-weight:700} .dh-tien .dh-con{padding-top:6px;margin-top:4px;border-top:1px dashed var(--line);color:var(--ink);font-weight:700} .dh-tien .dh-con .num{font-size:17px;color:var(--or-safe)} .dh-tien p{margin:4px 0 0} .dh-h{margin:6px 0 2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)} .dh-so-coc,.dh-hd{list-style:none;margin:0;padding:0;display:grid;gap:4px} .dh-so-coc li,.dh-hd li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:6px 0;border-bottom:1px solid var(--line-2);font-size:13.5px} .dh-so-coc .dh-am{color:var(--red)} .dh-link{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--sky-700);text-decoration:underline;cursor:pointer} /* ── hộp lưu từ phiếu bán: một khuôn, hai loại (báo giá / đơn đặt) ── */ .dh-form{display:flex;flex-direction:column;gap:var(--space-3)} .dh-form[data-loai="quote"] .dh-dd,.dh-form[data-loai="order"] .dh-bg{display:none} .dh-loai{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px} .dh-loai .fchip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 14px;border-radius:var(--r);text-align:left} .dh-loai .fchip .cell-sub{font-size:12.5px;white-space:normal;overflow:visible} .dh-loai .fchip.on .cell-sub{color:#E7EAEE} .dh-tomtat{font-size:14px} .dh-goi{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)} .dh-kh{display:block;padding:8px 0;font-size:14px} /* ── lựa chọn dạng thẻ (trả / giữ cọc, rút / nộp két) ── */ .dh-chon{display:grid;gap:8px} .dh-chon-o{display:flex;align-items:flex-start;justify-content:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;line-height:1.45;text-align:left} .dh-chon-o>span{flex:1 1 auto;min-width:0} /* ô tích / ô chọn: foundation.css cho MỌI input width:100% + viền + đệm — trả về đúng cỡ nút */ .dh-chon-o input,.dh-tick input{flex:0 0 18px;width:18px;height:18px;min-height:0;margin:3px 0 0;padding:0;border:0;box-shadow:none;accent-color:var(--sky-900)} .dh-chon-o:has(input:checked){border-color:var(--sky-700);background:var(--sky-50)} .dh-chon-o .cell-sub{display:block} /* ── giao một chuyến ── */ .dh-giao .dh-sl{width:110px;text-align:right;font-weight:700} .dh-giao-bar{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-2) 0} .dh-giao-duoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:var(--space-4);align-items:start;margin-top:var(--space-2)} .dh-giao-trai{display:flex;flex-direction:column;gap:var(--space-2)} .dh-giao-duoi .dh-tien{width:100%} .dh-tick{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;cursor:pointer} .dh-tick input{margin:0} /* (b304) nút "Báo giá · Đặt" dưới phiếu bán: chân phiếu còn hai nút phụ ("Xóa hết" vào ⋯ đầu phiếu) — hết lưới 3 cột. */ /* ── ca bán ── */ .ca-truoc{padding:10px 12px;border-radius:var(--r);background:var(--sky-50);font-size:13.5px;line-height:1.6} .ca-goi{display:block;min-height:22px;font-size:13px} .ca-ct{display:flex;flex-direction:column;gap:var(--space-3)} .ca-kpi{margin-bottom:0} .ca-hai{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .ca-hai .trow{font-size:13.5px} .ca-ck{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)} .ca-ds .inv-tbl td{vertical-align:top} .ca-chieu{grid-template-columns:1fr 1fr} @media (max-width:880px){ .dh-tien{width:100%} .dh-giao-duoi{grid-template-columns:1fr} .dh-loai{grid-template-columns:1fr 1fr} .dh-loc .fchips{justify-content:flex-start} .ca-hai{grid-template-columns:1fr} .dh-acts .btn{flex:1 1 auto} .dh-giao .dh-sl{width:88px} } /* ── in A4 (khuôn .p-inv của app) ── */ @media print{ .p-inv .dh-c{text-align:center} .p-inv .dh-r{text-align:right} .p-inv .dh-w6{width:6%} .p-inv .dh-w9{width:9%} .p-inv .dh-w15{width:15%} .p-inv .dh-w17{width:17%} .p-inv .dh-in-ten{font-size:14pt} .p-inv .dh-in-gc{font-size:8.5pt;font-style:italic;color:#333} .p-inv .dh-in-vat{margin-top:2mm;font-size:9.5pt} .p-inv .dh-in-gc2{margin-top:2mm;font-size:9.5pt} .p-inv .dh-in-nh{margin-top:3mm;padding:2mm 3mm;border:1px solid #000;font-size:10pt} .dh-in .p-sign em{font-size:9pt} } /* ===== SOURCE: styles/tich-hop.css ===== */ /* ============================================================ b306 · TÍCH HỢP — hóa đơn điện tử · tiền CK tự báo · sổ hộ kinh doanh (frontend/tich-hop.js, gói tải sau) + ba chỗ ở gói chính: huy hiệu HĐĐT trên dòng hóa đơn, dòng HĐĐT trong hộp hóa đơn, dải "HĐ cho …" dưới khách ở phiếu bán. Dựng trên khối sẵn có (tag · note · fgrid · btn) — chỉ thêm phần riêng. Chỗ bấm điện thoại 44px ở cham-dien-thoai.css đã phủ .btn / input trong hộp; dải người mua ở phiếu bán tự đặt 44px (mobile-runtime.css). ============================================================ */ /* ── huy hiệu + dòng HĐĐT ── */ .hd-tag{margin-left:6px;padding:0 6px;font-size:12px;font-style:normal;font-family:var(--f-ui);vertical-align:1px} .hd-o{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 14px;padding:8px 12px; border:1px solid var(--line);border-radius:var(--r);background:var(--sky-50);font-size:13.5px} .hd-o svg,.mua-chu svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px} .hd-dong{padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5} .hd-dau{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px} .hd-phu{font-size:12.5px;color:var(--slate);overflow-wrap:anywhere} .hd-loi{color:var(--red)} .hd-tay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px} .hd-tay input{flex:1 1 150px;min-width:0;height:34px} .hd-mua{margin-top:14px} .hd-in{margin-top:2mm;font-size:9.5pt} .th-chk{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;color:var(--ink-2)} /* ô tích 17px — luật chung input{width:100%} làm ô tích chiếm cả dòng, đẩy chữ ra ngoài hộp (ảnh b306 Cài đặt HĐĐT) */ .th-chk input{flex:0 0 auto;width:17px;height:17px;margin-top:2px;accent-color:var(--or-6);cursor:pointer} /* ── hộp QR: tiền về ── */ .qr-ck{margin-top:10px;font-size:13.5px} .qr-ck .btn{margin-top:6px} .ck-cho{color:var(--slate)} .ck-da{font-size:16px;font-weight:800;color:var(--green)} .ck-da svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px} /* ── dải người mua lấy hóa đơn (phiếu bán) ── */ .mua-hd{display:flex;align-items:center;gap:4px;margin-top:6px;padding:2px 2px 2px 10px;border-radius:var(--r-sm);background:var(--sky-50); font-size:12.5px;color:var(--slate)} .mua-chu{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mua-chu b{color:var(--ink)} .mua-nut{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:var(--slate-2)} .mua-nut:hover{background:#fff;color:var(--ink)} .mua-nut svg{width:14px;height:14px} /* điện thoại: nút sửa / bỏ người mua đủ 44px (luật chỗ bấm của phiếu bán) */ @media (max-width:880px){ .mua-nut{width:44px;height:44px} .hd-tay input{height:44px;font-size:16px} /* ô "Số hóa đơn đã lập" / "Số hóa đơn để gắn" */ } /* b319 · Cài đặt → Nhận tiền — QR: kiểu QR (hai nút chọn) + QR cố định đã đọc từ ảnh */ .qr-kieu-hang{display:flex;flex-wrap:wrap;gap:8px} .qr-kieu{min-height:44px;padding:8px 14px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-size:14px;font-weight:700} .qr-kieu.on{border-color:#173247;background:#173247;color:#fff} .qr-cd{display:flex;flex-direction:column;gap:8px;margin-top:10px} .qr-cd-xem{display:flex;align-items:center;gap:12px} .qr-cd-ma{flex:0 0 auto;width:120px;height:120px} .qr-cd-ma svg{width:100%;height:100%;display:block} .qr-cd-tt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14px} .qr-cd-tt b{font-size:16px} .qr-tai{align-self:flex-start;min-height:44px} .qr-loi{color:var(--red);font-size:14px;font-weight:600} /* ===== SOURCE: styles/nganh.css ===== */ /* ============================================================ nganh.css · b308 · HỒ SƠ NGÀNH — thẻ Ngành trong Cài đặt, bảng dòng (sỉ), bảng model (điện máy). Màu, cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md (thang t0–t6, biến màu có sẵn). Thẻ hàng .grid-p/.pcard ở the-hang.css. ============================================================ */ .ng-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 8px} .ng-the{position:relative;min-height:76px;padding:12px 12px 10px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff; text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer;font-family:var(--f-ui);color:var(--ink)} .ng-the b{font-size:14px;font-weight:800;line-height:1.3} .ng-the span{font-size:12.5px;color:var(--slate);line-height:1.35} .ng-the[aria-pressed="true"]{border:2.5px solid var(--sky-900);box-shadow:0 0 0 3px rgba(24,27,32,.08)} .ng-the[aria-pressed="true"] b{padding-right:28px} .ng-the[aria-pressed="true"]::after{content:"✓";position:absolute;top:9px;right:10px;width:22px;height:22px;border-radius:50%; background:var(--sky-900);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:800} .ng-sap{margin:0 0 6px;font-size:12.5px;color:var(--slate)} .ng-nhan{font:800 12px var(--f-ui);letter-spacing:.05em;color:var(--or-safe);background:var(--or-50);padding:2px 8px;border-radius:99px} .ng-h{margin:16px 0 6px;font-size:14px;font-weight:800} .ng-ds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} /* b310 · công tắc quán gấp một mục (ngành khác không thấy bày ra) */ .ng-quan{margin-top:10px} .ng-quan summary{min-height:44px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;cursor:pointer} .ng-quan .ng-ds{margin-top:6px} .ng-tn{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg); background:#fff;text-align:left;cursor:pointer;font-family:var(--f-ui);color:var(--ink)} .ng-cong{flex:0 0 auto;width:36px;height:20px;margin-top:1px;border-radius:99px;background:var(--line);position:relative;transition:background .12s} .ng-cong::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .12s} .ng-tn[aria-checked="true"] .ng-cong{background:var(--sky-900)} .ng-tn[aria-checked="true"] .ng-cong::after{left:18px} .ng-tn:focus-visible,.ng-the:focus-visible{outline:3px solid var(--or);outline-offset:2px} .ng-tn-c{display:flex;flex-direction:column;gap:2px;font-size:14px} .ng-mo{font-size:12.5px;color:var(--slate);line-height:1.35} .ng-luu{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .ng-bang{width:100%;border-collapse:collapse;background:#fff;font-size:14px} .ng-bang th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);text-align:left;padding:8px;border-bottom:1px solid var(--line)} .ng-bang td{padding:9px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle} .ng-bang .r{text-align:right} .ng-sl{width:9ch;height:36px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;text-align:right;font:inherit} .ng-sl:focus{outline:3px solid rgba(169,71,4,.25);border-color:var(--or)} /* nhập từ app khác (màn Dữ liệu, gói nhap-xuat) */ .nk-bd{padding-top:0} .nk-hang{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px} .nk-tom{margin:10px 0;font-size:14px} .nk-loi{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px} .nk-loi th,.nk-loi td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-2);vertical-align:top} .nk-loi th{font-size:12.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em} @media (max-width:880px){ .nk-hang .btn{flex:1 1 100%;min-height:44px} .ng-luoi{grid-template-columns:repeat(2,minmax(0,1fr))} .ng-ds{grid-template-columns:1fr} .ng-the{min-height:84px} .ng-sl{height:44px;font-size:16px} } /* b326 · Cài đặt → Dạy từ (frontend/nganh.js · dayTu…, chỉ chủ sổ Thanh Hiền): dòng "chữ → nghĩa" + Sửa / Xóa — điện thoại nút vẫn bên phải, chạm ≥ 44px (.modal .btn ở cham-dien-thoai.css). Hộp "Dạy từ mới" là lớp phủ thứ hai trên hộp Cài đặt, như #hoibo. */ #dt_hop{z-index:90} .dt-chu{margin:0;font-size:13.5px;line-height:1.5;color:var(--slate)} .dt-hop>label{margin-top:14px} .dt-o{width:100%;max-width:320px} .dt-go{max-width:260px} .dt-ra{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--slate);overflow-wrap:anywhere} .dt-ra b{color:var(--ink)} .dt-tim{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .dt-tim .dt-o{flex:1 1 180px} .dt-ds{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px} .dt-dong{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)} .dt-tt{flex:1;min-width:0} .dt-ten{font-size:14.5px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere} .dt-phu{margin-top:2px;font-size:12.5px;color:var(--slate)} .dt-rong{padding:12px;font-size:14px;color:var(--slate)} /* ===== SOURCE: styles/don-vi.css ===== */ /* ============================================================ don-vi.css · b309 · ĐỢT 3 — đơn vị quy đổi · kích thước · lô + hạn · bảng giá. Dòng phiếu: chữ kích thước (.kt-dong đi cùng .ghi) và nhãn lô (.lo-chip). Hộp dài × rộng, chọn lô, màn Bảng giá, báo hạn, form đơn vị: gói tải sau don-vi. Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md (biến có sẵn, không thêm mã màu). ============================================================ */ .item .nm .kt-dong{color:var(--slate)} .lo-chip{display:inline-block;max-width:100%;margin-top:3px;padding:1px 8px;border-radius:6px;background:var(--sky-50);border:1px solid var(--line); font-size:12px;font-weight:600;color:var(--slate);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top} .lo-chip.het{background:var(--red-soft);border-color:var(--red);color:var(--red)} /* hộp kích thước */ /* một hàng = dài × rộng × số tấm + nút bỏ; lưới co theo bề ngang hộp (320px không cuộn ngang · KĐL máy bán 13) */ .kt-ds{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px} .kt-hang{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,.8fr) 44px;align-items:center;gap:6px} .kt-hang.dai{grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr) 44px} .kt-hang input{width:100%;min-width:0;height:40px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;text-align:right;font:inherit} .kt-hang span{color:var(--slate);font-weight:700} .kt-dau{font-size:12px;letter-spacing:.02em} .kt-bo{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--slate)} .kt-bo svg{width:16px;height:16px} .dl-kt{font-size:8.5pt;font-style:italic} .kt-tong{margin:10px 0 0;font-size:16px;font-weight:800;color:var(--ink)} /* chọn lô */ .lo-ds{display:flex;flex-direction:column;gap:8px} .lo-the{display:flex;flex-direction:column;gap:2px;min-height:48px;padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--r-lg); background:#fff;text-align:left;cursor:pointer;font-family:var(--f-ui);color:var(--ink)} .lo-the b{font-size:14px;font-weight:800} .lo-the span{font-size:12.5px;color:var(--slate)} .lo-the.on{border:2.5px solid var(--sky-900)} .lo-the.sap span{color:var(--or-safe)} .lo-the.het{border-color:var(--red)} .lo-the.het span{color:var(--red)} .lo-the:focus-visible{outline:3px solid var(--or);outline-offset:2px} /* phiếu nhập kho: số lô ngắn — bề rộng theo chữ sẽ gõ */ .f input.w-lo{max-width:22ch} /* bảng giá · báo hạn */ .bg-ds{display:flex;flex-direction:column;gap:8px;margin:10px 0 12px} .bg-the{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .bg-the div{display:flex;flex-direction:column;gap:2px} .bg-bang{width:100%;border-collapse:collapse;background:#fff;font-size:14px} .bg-bang th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);text-align:left;padding:8px;border-bottom:1px solid var(--line)} .bg-bang td{padding:8px;border-bottom:1px solid var(--line-2);vertical-align:middle} .bg-bang .r{text-align:right} .bg-bang input,.bg-bang select{height:36px;border:1.5px solid var(--line);border-radius:8px;padding:0 8px;font:inherit} .bg-bang input{width:12ch;text-align:right} .bg-bang tr.het td{color:var(--red)} .bg-bang input.w-lo{text-align:left} .bg-bang input[type=date]{width:auto;text-align:left} .bg-bang .o-ngay-k{width:auto;max-width:none} /* b324 · khung ô ngày (ngayVN) ôm đúng ô rộng-theo-chữ */ .bg-them{display:flex;gap:8px;margin-top:8px} .bg-them input{flex:1;min-width:0;height:40px;border:1.5px solid var(--line);border-radius:8px;padding:0 10px;font:inherit} /* form hàng: đơn vị quy đổi thêm */ .dv-dong{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.2fr) auto 44px;align-items:end;gap:6px; margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line-2)} .dv-o{display:flex;flex-direction:column;gap:3px;min-width:0} .dv-o span{font-size:12px;font-weight:700;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dv-dong input{min-width:0;height:40px;border:1.5px solid var(--line);border-radius:8px;padding:0 8px;font:inherit} .dv-ban{display:flex;align-items:center;gap:6px;min-height:44px;font-size:13px;font-weight:600;color:var(--ink-2)} .f input.w-pct{max-width:10ch} @media (max-width:880px){ .kt-hang input{height:44px;font-size:16px} .bg-bang{table-layout:fixed} .bg-bang td{word-break:break-word} .bg-bang .bg-dv{width:28%} .bg-bang .bg-gia{width:30%} .bg-bang .bg-bo{width:52px} .bg-bang input,.bg-bang select{width:100%;min-width:0} .lo-the{min-height:52px} .bg-bang input,.bg-bang select{height:44px;font-size:16px} .bg-them input{height:44px;font-size:16px} .dv-dong{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} /* bảng giá trên điện thoại: mỗi dòng một thẻ — tên hàng trọn hàng trên, đơn vị · giá · bỏ hàng dưới */ .gia-bang thead{display:none} .gia-bang tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2)} .gia-bang td{padding:0;border:0} .gia-bang td.bg-ten{grid-column:1/-1} .dv-dong .kt-bo{justify-self:end} .dv-dong input{height:44px;font-size:16px} } /* ===== SOURCE: styles/quan.css ===== */ /* ============================================================ quan.css · b310 · QUÁN MANG ĐI + TIỆM BÁNH — hộp tùy chọn món, menu quán (dải nhóm món), cài tùy chọn, bánh cần làm, phiếu pha chế + tem ly (in). Dòng phiếu / phiếu in chỉ thêm một dòng chữ tùy chọn (.tc-dong, .p-tc) và số thứ tự (.stt). Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md (biến có sẵn, không thêm mã màu). Chỗ bấm ≥ 44px. ============================================================ */ .item .nm .tc-dong{color:var(--slate)} /* hộp chọn tùy chọn */ .qn-chon{display:flex;flex-direction:column;gap:12px} .qn-gia{margin:0;font-size:14px;color:var(--slate)} .qn-gia b{color:var(--ink);font-weight:800} .qn-nhom{margin:0;padding:0;border:0;min-width:0} .qn-nhom legend{padding:0;margin-bottom:6px;font-size:15px;font-weight:700;color:var(--ink)} .qn-luat{font-size:12.5px;font-weight:400;color:var(--slate)} .qn-luat b{color:var(--or-safe);font-weight:700} .qn-chips{display:flex;flex-wrap:wrap;gap:8px} .qn-chip{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:48px;min-width:88px;max-width:100%;padding:6px 12px; border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer} .qn-chip span{overflow-wrap:anywhere} .qn-chip small{font-size:12.5px;font-weight:700;color:var(--slate)} .qn-chip.on{border:2.5px solid var(--sky-900);background:var(--sky-50);padding:5px 11px} .qn-chip.on small{color:var(--sky-900)} .qn-chip:focus-visible,.qn-sl-b:focus-visible,.qn-tab:focus-visible{outline:3px solid var(--or);outline-offset:2px} .qn-dong{display:flex;align-items:center;justify-content:space-between;gap:12px} .qn-sl-nhan{font-size:15px;font-weight:700} .qn-sl{display:flex;align-items:center;gap:6px} .qn-sl b{min-width:36px;text-align:center;font-size:18px;font-weight:800} .qn-sl-b{width:48px;height:48px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff;font-size:22px;font-weight:700;color:var(--ink);cursor:pointer} /* menu quán: dải nhóm món cuộn ngang */ .qn-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none} .qn-tab{flex:0 0 auto;min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap} .qn-tab span{font-weight:400;color:var(--slate)} .qn-tab.on{background:var(--sky-900);border-color:var(--sky-900);color:#fff} .qn-tab.on span{color:#fff} /* cài tùy chọn món */ .qn-cai{display:flex;flex-direction:column;gap:16px} .qn-muc h4{margin:0 0 6px;font-size:16px} .qn-muc .f select{max-width:32ch} .qn-tick{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:600} .qn-tick input{width:22px;height:22px} .qn-g{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sky-50)} .qn-g .f input{max-width:30ch} .qn-g .f .qn-so{max-width:8ch} .qn-cds{display:flex;flex-direction:column;gap:6px} .qn-c{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 56px 44px;align-items:center;gap:6px} .qn-c input:not([type]){width:100%;min-width:0;height:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;font:inherit;background:#fff} .qn-md{display:flex;align-items:center;justify-content:center;width:44px;height:44px;justify-self:center;cursor:pointer} .qn-md input{width:24px;height:24px} .qn-c .icobtn{width:44px;height:44px} .qn-c-dau{font-size:12px;font-weight:600;color:var(--slate)} .qn-ap{display:flex;flex-direction:column;gap:6px} .qn-ap-t{font-size:13px;font-weight:600;color:var(--slate)} .qn-tim{max-width:30ch;height:44px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;font:inherit} .qn-goiy:empty{display:none} /* bánh cần làm */ .qn-banh-loc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px} .qn-banh-ngay{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600} .qn-banh-ngay input{height:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;font:inherit} .qn-tong{margin:12px;padding:12px;border-radius:var(--r-lg);background:var(--or-50)} .qn-tong h4{margin:0 0 6px;font-size:15px} .qn-tong ul,.qn-don-ds{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px} .qn-don{margin:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .qn-don-dau{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px} .qn-gio{font-size:20px;font-weight:800;color:var(--sky-900)} .qn-don-dau .dh-link{display:inline-flex;align-items:center;min-height:44px} /* tên tiệm trên phiếu K80 của tiệm KHÔNG phải VLXD: chữ thường xuống dòng được, tên dài không bị cắt (VLXD giữ khối logo cũ) */ .p-80 .lk-ten{font-size:14pt;font-weight:800;line-height:1.2;text-align:center;overflow-wrap:anywhere} .qn-chu,.dh-chu b{color:var(--or-safe)} .dh-tc{color:var(--slate)} /* in danh sách bánh cần làm */ .qn-in-phu{font-size:9pt;margin-bottom:4mm} /* phiếu in: số thứ tự to · dòng tùy chọn */ .p-80 .stt{margin:1mm 0 1.2mm;font-size:11pt;font-weight:700;letter-spacing:1pt} .p-80 .stt b{font-size:22pt;font-weight:800} .p-tc{font-size:8.5pt} /* phiếu pha chế — in liền sau phiếu tính tiền (vạch cắt) hoặc riêng */ .p-pc{padding-top:1mm} .p-pc.k58{width:48mm;padding:2mm 2.5mm} .p-pc .pc-cat{text-align:center;font-size:8pt;margin:2mm 0 3mm;letter-spacing:.5pt} .p-pc .pc-dau{display:flex;align-items:center;justify-content:space-between;font-size:13pt;font-weight:800;letter-spacing:1pt} .p-pc .pc-so{font-size:26pt;line-height:1} .p-pc .pc-mt{font-size:8.5pt} .p-pc .pc-mon{font-size:11pt;line-height:1.35;margin:1.2mm 0;break-inside:avoid;page-break-inside:avoid} .p-pc .pc-tc{font-size:10pt;padding-left:3mm} .p-pc .pc-ghi{font-size:9.5pt;font-style:italic;padding-left:3mm} /* tem ly: mỗi ly một tem; máy in tem 50×30 / 40×30 mỗi tem một trang, cuộn nhiệt thì xếp dọc có vạch cắt */ .tem{width:50mm;height:30mm;box-sizing:border-box;padding:1.2mm 1.8mm;display:flex;flex-direction:column;gap:.3mm;color:#000;font-size:7pt;line-height:1.15;overflow:hidden; break-after:page;page-break-after:always} .tem.t40{width:40mm} .tem.cuon{width:72mm;height:auto;padding:2mm 4mm;border-bottom:1px dashed #000;break-after:auto;page-break-after:auto} .tem-dau{display:flex;justify-content:space-between;align-items:baseline;gap:2mm;font-size:7pt} .tem-dau span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .tem-dau b{font-size:11pt;font-weight:800;line-height:1} .tem-ten{flex:none;font-size:8.5pt;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tem-tc{flex:none;font-size:7pt;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tem-ghi{font-size:7.5pt;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tem-chan{margin-top:auto;flex:none;display:flex;justify-content:space-between;font-size:7pt} @media (max-width:420px){ .qn-chip{min-width:0;flex:1 1 calc(50% - 8px)} .qn-c{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px 44px;gap:4px} } /* ===== SOURCE: styles/khuyen-mai.css ===== */ /* ============================================================ khuyen-mai.css · b311 · KHUYẾN MÃI · COMBO · TÍCH ĐIỂM · VOUCHER — hộp voucher · đổi điểm của phiếu, cài chương trình, tích điểm, đợt voucher (xem · in mã), phần combo của form hàng. Phiếu bán chỉ thêm một dòng nhắc voucher chưa dùng (.km-bo). Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md (biến có sẵn, không thêm mã màu). Chỗ bấm ≥ 44px. ============================================================ */ .trow.km-bo span{font-size:12.5px;color:var(--or-safe);white-space:normal} .km-hop{display:flex;flex-direction:column;gap:14px} .km-muc{display:flex;flex-direction:column;gap:10px} .km-muc h4{margin:0;font-size:16px} .km-dang{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:14.5px} .km-dang .btn{min-height:44px} .km-o-ma{max-width:24ch;text-transform:uppercase} .km-o-so{max-width:14ch} .km-o-ten{max-width:36ch} .km-nut{display:flex;flex-wrap:wrap;gap:8px} .km-nut .btn{min-height:44px} .km-canh{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--red)} /* danh sách chương trình */ .km-ds{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .km-dong{display:grid;grid-template-columns:52px minmax(0,1fr) auto 44px;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .km-dong.mo{border-color:var(--sky-900);background:var(--sky-50)} .km-dong .btn{min-height:44px} .km-dong .icobtn{width:44px;height:44px} .km-bat{min-height:44px;padding:0;border:0;background:none;justify-content:center} .km-ten{display:flex;flex-direction:column;min-width:0} .km-ten b{overflow-wrap:anywhere} .km-ten span{font-size:12.5px;color:var(--slate);overflow-wrap:anywhere} .km-form{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sky-50)} .km-gt{display:flex;gap:8px;align-items:center} .km-gt select{width:auto;min-width:88px;min-height:44px} .km-ap{display:flex;flex-direction:column;gap:6px} .km-ap-t{font-size:13px;font-weight:600;color:var(--slate)} .km-ap .fchips{flex-wrap:wrap;overflow:visible} .km-ap .fchip{min-height:44px;min-width:44px;justify-content:center} .km-tim{max-width:30ch;height:44px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;font:inherit} .km-goiy:empty{display:none} /* hạng thành viên */ .km-hang{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) 44px;gap:6px;align-items:center} .km-hang input{width:100%;min-width:0;height:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;font:inherit;background:#fff} .km-hang .icobtn{width:44px;height:44px} .km-hang-dau span{font-size:12px;font-weight:600;color:var(--slate)} /* bảng: sổ điểm, đợt voucher, danh sách mã */ .km-bang{width:100%;border-collapse:collapse;font-size:13.5px} .km-bang th,.km-bang td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .km-bang th{font-size:12.5px;color:var(--slate);font-weight:600} .km-bang .r{text-align:right} .km-bang .km-nut{justify-content:flex-end} .km-tat td{color:var(--slate)} /* combo trong form hàng */ .km-cb{display:flex;flex-direction:column;gap:8px;padding:4px 0} .km-cb-dong{display:grid;grid-template-columns:minmax(0,1fr) 72px 44px;gap:8px;align-items:center} .km-cb-dong span{overflow-wrap:anywhere} .km-cb-dong input{height:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;font:inherit;text-align:right} .km-cb-dong .icobtn{width:44px;height:44px} /* in danh sách mã voucher */ .km-in-phu{font-size:9pt;margin-bottom:4mm} .km-in-ma{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm} .km-in-o{display:flex;flex-direction:column;gap:1mm;padding:3mm;border:1px dashed #000;break-inside:avoid;page-break-inside:avoid} .km-in-o b{font-size:12pt;letter-spacing:.5pt} .km-in-o span{font-size:8pt} @media (max-width:420px){ .km-dong{grid-template-columns:52px minmax(0,1fr) 44px;grid-template-areas:"b t x" ". s s"} .km-dong .km-bat{grid-area:b} .km-dong .km-ten{grid-area:t} .km-dong .icobtn{grid-area:x} .km-dong .btn{grid-area:s;justify-self:start} /* bảng thành thẻ: mỗi dòng xuống hàng, nút xuống dòng riêng — không cuộn ngang trong hộp (KĐL máy bán 8) */ .km-bang thead{display:none} .km-bang tr{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--line)} .km-bang td{padding:0;border:0} .km-bang .km-nut{flex-basis:100%;justify-content:flex-start} .km-hang{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 56px 44px} .km-hang input{padding:0 6px} } /* ===== SOURCE: styles/bien-the.css ===== */ /* ============================================================ bien-the.css · b312 · BIẾN THỂ SIZE × MÀU · IMEI / SERIAL · PHIẾU SỬA — lưới chọn biến thể ở màn bán, chip số IMEI (dòng phiếu, hộp trả hàng, hộp chọn số), mẫu hàng + sửa giá hàng loạt, tra IMEI, màn Phiếu sửa. Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md (biến có sẵn, không thêm mã màu). Chỗ bấm ≥ 44px; không bảng nào rộng hơn hộp ở 320px (lưới chỉ dựng khi cột vừa màn). ============================================================ */ .bt-hop{display:flex;flex-direction:column;gap:12px} /* lưới chọn biến thể */ .bt-chip{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .bt-chip>span{font-size:13px;font-weight:600;color:var(--slate);margin-right:4px} .bt-chip .fchip{min-height:44px;min-width:44px;justify-content:center} .bt-luoi{width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed} .bt-truc{margin:0;font-size:13px;color:var(--slate)} .bt-luoi th{font-size:13px;color:var(--slate);font-weight:600;text-align:center;overflow-wrap:anywhere;text-transform:none;letter-spacing:0;white-space:normal;padding:4px 2px} .bt-luoi thead th:first-child{width:52px} .bt-luoi tbody th{text-align:left;font-size:15px;color:var(--ink)} .bt-luoi td{padding:0} .bt-o-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px} .bt-o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:60px;padding:6px 4px; border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff;font:inherit;color:var(--ink);cursor:pointer} .bt-o b{font-size:15px;overflow-wrap:anywhere} .bt-o small{font-size:12px;color:var(--green)} .bt-o.het{background:var(--paper);color:var(--slate)} .bt-o.het small{color:var(--red)} .bt-o.co{border-color:var(--sky-900);background:var(--sky-50)} .bt-o i{position:absolute;top:2px;right:4px;font-style:normal;font-size:12px;font-weight:700;color:var(--sky-900)} .bt-o.khong{cursor:default;border-style:dashed;color:var(--slate)} .bt-gia{font-size:12px;color:var(--slate)} /* mẫu hàng · giá hàng loạt */ .bt-mau-ds{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .bt-mau-ds>li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .bt-mau-t{display:flex;flex-direction:column;min-width:0} .bt-mau-t b{overflow-wrap:anywhere} .bt-mau-t span{font-size:12.5px;color:var(--slate);overflow-wrap:anywhere} .bt-tt{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sky-50)} .bt-tt-dau{display:flex;align-items:flex-end;gap:8px} .bt-tt-dau .icobtn{width:44px;height:44px} .bt-gt,.bt-ap{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px} .bt-gt .btn,.bt-ap .btn{min-height:44px} .bt-ap select{width:auto;min-height:44px} .bt-bien{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px} .bt-bien>li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff} .bt-bien>li.cu{background:var(--paper)} .bt-bien>li.bo{opacity:.6} .bt-bien .btn{min-height:44px} .bt-bien-t{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere} .bt-bien-t small{font-size:12px;color:var(--slate)} .bt-nhan{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--slate)} .bt-hop input.km-o-so,.bt-hop input.km-o-ten,.bt-hop select{min-height:44px} .bt-ap .btn{min-width:44px} .bt-so{width:12ch;height:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;font:inherit;text-align:right} .bt-ma{width:16ch;height:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;font:inherit} /* IMEI: chip số trên dòng phiếu, hộp trả hàng, hộp chọn số */ .sr-chip{display:inline-flex;align-items:center;gap:2px 6px;min-height:32px;margin:2px 4px 0 0;padding:2px 8px;border:1px solid var(--line);border-radius:12px; background:#fff;font:inherit;font-size:12.5px;font-family:var(--f-mono);color:var(--ink);cursor:pointer;flex-wrap:wrap;text-align:left} /* một số IMEI không bao giờ bị bẻ giữa chừng (15 chữ số đọc sai là bán nhầm máy) — chỉ xuống dòng giữa hai số */ .sr-so{white-space:nowrap;font-family:var(--f-mono)} .sr-dong{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:4px;font-size:12.5px;color:var(--slate)} button.sr-chip{min-height:44px} .sr-chip.het{border-color:var(--red);color:var(--red)} .sr-chip.on{border-color:var(--sky-900);background:var(--sky-50)} .sr-chip.la{border-style:dashed} .sr-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-6px -8px -6px 0;border:0;background:none;color:var(--slate);cursor:pointer} .sr-x svg{width:14px;height:14px} .sr-tra{display:flex;flex-wrap:wrap} .sr-da{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;font-size:13px} .sr-thieu{font-size:13px;font-weight:600;color:var(--red)} .sr-luoi{display:flex;flex-wrap:wrap;gap:6px} .sr-o{max-width:28ch;font-family:var(--f-mono);text-transform:uppercase} .sr-o-chon{min-height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:14px;cursor:pointer} .sr-nhap{width:100%;font-family:var(--f-mono);text-transform:uppercase} .sr-kq{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .sr-kq h4{margin:0 0 4px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;overflow-wrap:anywhere} .sr-kq p{margin:2px 0;font-size:13.5px;overflow-wrap:anywhere} .sr-con{color:var(--green);font-weight:600} .sr-het{color:var(--red);font-weight:600} .sr-lich{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--slate)} /* màn Phiếu sửa */ .sc-loc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:0 0 12px} .sc-loc .fchips,.sc-cach.fchips{flex-wrap:wrap;overflow:visible} .sc-loc .fchip,.sc-tim .btn{min-height:44px} .sc-tim{display:flex;gap:6px;flex:1 1 240px;max-width:420px} .sc-tim .km-tim{flex:1;min-width:0;max-width:none} .sc-ds{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .sc-the{display:flex;flex-direction:column;gap:3px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;font:inherit;text-align:left;cursor:pointer} .sc-l1{display:flex;justify-content:space-between;gap:8px;align-items:center} .sc-l1 b{overflow-wrap:anywhere} .sc-l2,.sc-l3{font-size:13px;color:var(--slate);overflow-wrap:anywhere} .sc-tre{color:var(--red);font-weight:600} .sc-dau{display:flex;flex-wrap:wrap;gap:6px} .sc-tt{display:grid;grid-template-columns:minmax(80px,max-content) minmax(0,1fr);gap:4px 12px;margin:0;font-size:14px} .sc-tt dt{color:var(--slate)} .sc-tt dd{margin:0;overflow-wrap:anywhere} .sc-anh{display:flex;flex-wrap:wrap;gap:6px} .sc-anh img{width:88px;height:66px;object-fit:cover;border-radius:6px;border:1px solid var(--line)} .sc-lk{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px} .sc-lk>li{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:14px} .sc-lk>li>span{flex:1;min-width:0;overflow-wrap:anywhere} .sc-lk small{color:var(--slate)} .sc-lk .icobtn{width:44px;height:44px} .sc-lk-them{position:relative;display:flex;flex-direction:column;gap:6px} .sc-lk-dong{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--sky-50)} .sc-lk-dong label{display:flex;align-items:center;gap:4px;font-size:13px} .sc-lk-dong .btn{min-height:44px} .sc-tong{margin:0;font-size:15px} .bt-hop a.btn{text-decoration:none} /* ===== SOURCE: styles/ban.css ===== */ /* ============================================================ ban.css · b313 · QUÁN CÓ BÀN PHỤC VỤ — sơ đồ bàn (màu theo trạng thái), sắp bàn kéo thả, gọi món tại bàn (thực đơn ô to + phiếu bàn), tính tiền, màn bếp ba cột, phiếu bếp in K80, đặt bàn, cài đặt quán, báo cáo quán. Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md (biến có sẵn, không thêm mã màu mới). Chỗ bấm ≥ 44px; ô nhập ≥ 16px trên điện thoại. Trạng thái bàn: trống = mặt trắng · có khách = than đậm chữ trắng · chờ tính tiền = cam chữ than (6,35:1) · đặt trước = cam nhạt chữ --or-safe. ============================================================ */ .ba-body{display:flex;flex-direction:column;gap:12px} .ba-lui{width:44px;height:44px} .ba-h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:880px){ .ba-sub{display:none} } .ba-loc{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center} .ba-loc .fchip{min-height:44px} .ba-tts .fchip::before{content:"";display:inline-block;flex:0 0 10px;width:10px;height:10px;border-radius:50%;margin-right:6px;border:1.5px solid var(--sky-400);background:#fff} .ba-tts .ba-tt-co::before{background:var(--sky-800);border-color:var(--sky-800)} .ba-tts .ba-tt-tam::before{background:var(--or);border-color:var(--or)} .ba-tts .ba-tt-dat::before{background:var(--or-50);border-color:var(--or-safe)} .ba-khu{display:flex;flex-direction:column;gap:8px} .ba-khu-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 0;font-size:16px;font-weight:700} .ba-khu-t .btn{min-height:44px} .ba-luoi{--cot:4;display:grid;grid-template-columns:repeat(var(--cot),minmax(120px,1fr));grid-auto-rows:minmax(112px,auto);gap:12px} /* thẻ bàn */ .ba-ban{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-width:0;min-height:112px;padding:10px 12px; border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation} .ba-ban.hinh-tron{border-radius:28px} .ba-ban.hinh-dai{border-left-width:6px} .ba-ban:focus-visible,.ba-mon:focus-visible,.bep-mon:focus-visible,.ba-o:focus-visible{outline:3px solid var(--or);outline-offset:2px} .ba-ten{font-size:18px;font-weight:800;line-height:1.2;overflow-wrap:anywhere} .ba-dong2{font-size:13px;color:var(--slate);overflow-wrap:anywhere} .ba-tt{font-size:13px;font-weight:600;color:var(--slate)} .ba-tien{margin-top:auto;font-size:16px;font-weight:800} .ba-hieu{display:inline-block;margin-top:2px;padding:1px 8px;border-radius:999px;background:var(--sky-50);color:var(--ink);font-size:12.5px;font-weight:600} .ba-hieu.am{background:var(--or-50);color:var(--or-safe)} .ba-hieu.gn{background:var(--green-soft);color:var(--green)} .ba-ban.tt-co{background:var(--sky-800);border-color:var(--sky-800);color:#fff} .ba-ban.tt-co .ba-dong2,.ba-ban.tt-co .ba-tt{color:var(--sky-100)} .ba-ban.tt-tam{background:var(--or);border-color:var(--or-6);color:var(--ink)} .ba-ban.tt-tam .ba-dong2{color:var(--ink)} .ba-ban.tt-dat{background:var(--or-50);border-color:var(--or-safe)} .ba-ban.tt-dat .ba-dong2{color:var(--or-safe);font-weight:600} /* sắp bàn */ .ba-dang-sua .ba-ban{cursor:grab;border-style:dashed;touch-action:none} /* KĐL máy bán 9: kéo bằng ngón tay (không để trình duyệt nuốt thành cuộn / lùi trang) */ .ba-dang-sua{overscroll-behavior:contain} .ba-dang-sua .ba-ban.chon{outline:3px solid var(--or);outline-offset:2px} .ba-ban.dang-keo{z-index:10;cursor:grabbing;box-shadow:var(--shadow-lg);opacity:.92} .ba-o{min-height:112px;border:1.5px dashed var(--sky-300);border-radius:var(--r-lg);background:transparent;cursor:pointer} .ba-sua-nut{position:sticky;bottom:0;padding:8px 0;background:var(--bg)} .ba-dat-sap ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px} .ba-dat-i{min-height:44px;padding:6px 12px;border:1.5px solid var(--or-safe);border-radius:var(--r-lg);background:var(--or-50);font:inherit;color:var(--ink);cursor:pointer} /* gọi món: thực đơn + phiếu bàn */ .ba-goi{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);grid-template-rows:auto 1fr;gap:12px;min-height:0;align-items:start} .ba-menu{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:8px;min-width:0} .ba-tim input{width:100%;height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--r);font:inherit;background:#fff} .ba-nhom{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .ba-nhom .fchip{flex:0 0 auto;min-height:44px;white-space:nowrap} .ba-mon-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;align-content:start} .ba-mon{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:72px;padding:8px 10px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff; font:inherit;color:var(--ink);text-align:left;cursor:pointer;min-width:0} .ba-mon img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)} .ba-mon b{font-size:14.5px;line-height:1.25;overflow-wrap:anywhere} .ba-mon span{font-size:13px;color:var(--slate)} .ba-mon span i{font-style:normal;color:var(--or-safe)} .ba-mon small{font-size:12px;font-weight:700;color:var(--red)} .ba-mon.het{background:var(--paper);border-style:dashed} .ba-phieu{grid-row:1;grid-column:2;display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .ba-p-dau{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px} .ba-p-dau b{font-size:18px} .ba-p-dau>span{font-size:13px;color:var(--slate)} .ba-phieu h3{margin:0 0 4px;font-size:14px;font-weight:700} .ba-phieu h3 small{font-weight:400;color:var(--slate)} .ba-phieu ul,.ba-tach,.ba-dat-ds,.ba-lich{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px} .ba-nhap{padding:8px;border:1.5px dashed var(--or-safe);border-radius:var(--r-lg);background:var(--or-50)} .ba-dong{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .ba-dong-b{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;padding:4px 6px;border:0;border-bottom:1px solid var(--line-2); background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer} .ba-dong-b:disabled{cursor:default;color:var(--slate)} .ba-dong-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;overflow-wrap:anywhere} .ba-dong-n{font-weight:600} .ba-dong-n>b{margin-right:4px} .ba-dong-t small{font-size:12.5px;color:var(--slate)} .ba-dong-p{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto} .ba-ghi{color:var(--or-safe);font-weight:600} .st-huy .ba-dong-t{text-decoration:line-through} .ba-cu summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--slate);font-size:13px} .ba-tong{display:flex;flex-direction:column;gap:2px;padding-top:6px;border-top:1px solid var(--line)} .ba-nhap-t{color:var(--or-safe)} .ba-day{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;gap:8px;position:sticky;bottom:0;padding:8px 0;background:var(--bg)} /* KĐL máy bán 8: phiếu dài vẫn thấy nút */ .ba-day .btn{flex:1 1 auto} .ba-day .btn{min-height:48px;font-size:15px} .ba-gui{flex:1 1 220px} /* điện thoại: một cột, hai thẻ Thực đơn / Phiếu bàn, thanh việc dính đáy */ .ba-tab{display:none} @media (max-width:880px){ .ba-luoi{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-auto-rows:auto} .ba-dang-sua{grid-template-columns:repeat(var(--cot),minmax(96px,1fr));overflow-x:auto} .ba-ban{min-height:96px} .ba-goi{display:flex;flex-direction:column;padding-bottom:72px} .ba-tab{display:flex;gap:8px} .ba-tab .fchip{flex:1 1 0;min-height:48px;justify-content:center;font-size:15px} .ba-goi[data-panel="menu"] .ba-phieu,.ba-goi[data-panel="phieu"] .ba-menu{display:none} .ba-mon-ds{grid-template-columns:repeat(2,minmax(0,1fr))} .ba-mon{min-height:76px} .ba-day{position:fixed;left:0;right:0;bottom:calc(var(--h-rail) + env(safe-area-inset-bottom,0px));z-index:55;padding:8px 16px;background:var(--paper);border-top:1px solid var(--line)} .ba-day:empty{display:none} .ba-tim input,.ba-thu input,.bt-hop input,.bt-hop select{font-size:16px} } /* chuyển / gộp / tách / chọn bàn */ .ba-viec-ds{display:flex;flex-direction:column;gap:8px} .ba-viec{justify-content:flex-start;min-height:48px} .ba-pick h4{margin:12px 0 6px;font-size:14px} .ba-pick-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px} .ba-pick-ds .ba-ban{min-height:72px} .ba-tach>li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--line-2)} .ba-lich>li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:6px 0;border-bottom:1px solid var(--line-2);font-size:13px} /* tính tiền */ .ba-thu-hang{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px} .ba-thu .fchip{min-height:44px} .ba-phan{margin:4px 0 0;font-size:14px} .ba-phan small{color:var(--slate)} .ba-qr{display:flex;flex-direction:column;align-items:center;gap:4px} .ba-qr svg{width:160px;height:160px} .ba-mua summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600} /* màn bếp */ .bep-body{display:flex;flex-direction:column;gap:12px} .bep-body>.fchips .fchip{min-height:44px} .bep-in-nhac{margin:0} .bep-huy{padding:8px 12px;border:2px solid var(--red);border-radius:var(--r-lg);background:var(--red-soft);color:var(--red)} .bep-huy p{margin:2px 0;font-size:15px} .bep-cot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start} .bep-c{display:flex;flex-direction:column;gap:8px;min-width:0} .bep-c h2{margin:0;font-size:16px;font-weight:800} .bep-c.st-cho h2{color:var(--or-safe)} .bep-c.st-xong h2{color:var(--green)} .bep-the{display:flex;flex-direction:column;gap:6px;padding:10px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff} .bep-the.tre{border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft)} .bep-the header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px} .bep-the header b{font-size:18px} .bep-the header>span{font-size:13px;color:var(--slate)} .bep-the ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px} .bep-mon{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--sky-50); font:inherit;color:var(--ink);text-align:left;cursor:pointer} .bep-mon>b{flex:0 0 auto;font-size:20px;min-width:2ch;text-align:right;white-space:nowrap} .bep-mon>span{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;font-size:16px;font-weight:700;overflow-wrap:anywhere} .bep-mon small{font-size:13px;font-weight:400;color:var(--slate)} .bep-mon i{font-style:normal;font-size:13px;font-weight:600;color:var(--slate);white-space:nowrap} .bep-mon small.bep-ghi{color:var(--or-safe);font-weight:700} .bep-ca{min-height:44px} @media (max-width:700px){ .bep-cot{grid-template-columns:minmax(0,1fr)} } /* máy tính bảng dọc 768 vẫn ba cột */ /* đặt bàn */ .ba-dat-ds>li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .ba-dat-ds>li.dat-huy,.ba-dat-ds>li.dat-vang{opacity:.7} .ba-dat-ds .km-nut{flex-basis:100%} .ba-dat-ds .btn{min-height:44px} /* cài đặt · báo cáo */ .ba-cai-nhom{width:100%;border-collapse:collapse} .ba-cai-nhom th{text-align:left;font-weight:600;padding:4px 8px 4px 0;overflow-wrap:anywhere} .ba-cai-nhom select{min-height:44px} .ba-cai-ten{flex:1 1 140px} .ba-bc-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px} .ba-bc-so>div{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .ba-bc-so span{font-size:12.5px;color:var(--slate)} .ba-bc-so b{font-size:18px;font-weight:800} .ba-bc-bang{width:100%;border-collapse:collapse} .ba-bc-bang th{text-align:left;font-weight:600;padding:6px 8px 6px 0;overflow-wrap:anywhere} .ba-bc-bang th small{display:block;font-weight:400;font-size:12.5px;color:var(--slate)} .ba-bc-bang td{text-align:right;padding:6px 0 6px 8px;white-space:nowrap;border-bottom:1px solid var(--line-2)} .ba-bc-gio{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px} .ba-bc-gio li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px} .ba-bc-gio i{display:block;height:14px;border-radius:4px;background:var(--sky-700)} /* phiếu bếp · phiếu tạm tính (in) */ @media print{ .bep-in h1{font-size:22pt;margin:2mm 0} .bep-in-khu{font-size:13pt;font-weight:800} .bep-in table{width:100%} .bep-in .bep-sl{min-width:12mm;padding-right:2mm;white-space:nowrap;font-size:16pt;font-weight:800;vertical-align:top} .bep-in .bep-ten{font-size:14pt} .bep-in .bep-ten div{font-size:11pt} .ba-in .stt{font-size:16pt} } .ba-thu-hang .qn-sl b{font-size:16px;font-weight:700;min-width:64px} .ba-thu-hang .bt-ap label.chk{display:flex;align-items:center;gap:6px;min-height:44px} /* b319 · ⑦ sơ đồ bàn phương án B (frontend/ban-so-do.js): sơ đồ | khung phải 340px (món của bàn đang chọn / "Cần chú ý"); bàn 2 ghế tròn; bàn đang chọn viền cam; "chờ bếp N'" đỏ (món gửi bếp chờ quá 15 phút). Chỉ máy tính — điện thoại giữ như b313. */ .ba-hai{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start} .ba-trai{min-width:0} .ba-ben{position:sticky;top:0;max-height:calc(100vh - 150px);overflow:auto;display:flex;flex-direction:column;gap:8px;padding:14px; background:var(--paper);border:1px solid var(--line);border-radius:12px} .ba-ben-t{margin:0;font-size:18px;font-weight:700} .ba-ben-t small{font-size:12.5px;font-weight:400;color:var(--slate)} .ba-ben-phu{margin:0;font-size:14px;color:var(--slate)} .ba-ben-ds ul{margin:0;padding:0;list-style:none} .ba-ben-nhap{margin:0 0 6px;padding:6px 10px;border-radius:8px;background:var(--or-50);color:#B34700;font-size:14px;font-weight:700} .ba-ben-tong{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:8px;border-top:1px solid var(--line);font-size:14px} .ba-ben-tong b{font-size:21px;font-weight:800;font-family:var(--f-mono)} .ba-ben-nut{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ba-ben-nut .btn,.ba-ben-mo{min-height:44px;justify-content:center} .ba-ben-thu{grid-column:1/-1} .ba-chu-y{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} .ba-cy{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 12px;text-align:left;font-size:14px; background:var(--paper);border:1px solid var(--line);border-radius:10px;color:var(--ink)} .ba-cy.m3{border-left:4px solid var(--red)} .ba-cy.m2{border-left:4px solid var(--or)} .ba-cy span{color:var(--slate)} .ba-hieu.rd{background:var(--red-soft);color:var(--red)} .ba-ban.xem{outline:3px solid var(--or);outline-offset:2px} .ba-luoi .ba-ban.hinh-tron{justify-self:center;width:100%;max-width:150px;aspect-ratio:1;border-radius:50%;align-items:center;justify-content:center;text-align:center} @media (max-width:1100px){ .ba-hai{grid-template-columns:minmax(0,1fr) 300px} } /* ===== SOURCE: styles/lich.css ===== */ /* ============================================================ lich.css · b314 · DỊCH VỤ CÓ LỊCH HẸN — lưới lịch theo KTV / giường (máy tính), danh sách theo giờ chữ to (điện thoại), hàng chờ + xếp tua, gói · điểm danh, chip KTV trên dòng phiếu bán, KTV · ca làm, hoa hồng, báo cáo dịch vụ. Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md (biến có sẵn, không thêm mã màu mới — màu KTV do chủ chọn, chỉ làm vạch trái). Chỗ bấm ≥ 44px. Trạng thái: đặt = trắng · đã đến = cam nhạt chữ --or-safe · đang làm = than chữ trắng · xong = xanh nhạt · đã thu = xám · không đến = đỏ nhạt. ============================================================ */ .lh-body{display:flex;flex-direction:column;gap:12px} .lh-thanh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px} .lh-thanh>.fchip{min-height:44px} .lh-ngay{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .lh-mui{width:44px;min-height:44px;padding:0;justify-content:center} .lh-mui svg{width:20px;height:20px} .lh-toi svg{transform:scaleX(-1)} .lh-ngay-o{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-weight:700;font-size:16px;cursor:pointer} .lh-ngay-o input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .lh-che .fchip,.lh-loc .fchip{min-height:44px} .lh-cham{display:inline-block;flex:0 0 10px;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--mau,var(--sky-400))} /* hàng chờ + xếp tua */ .lh-cho{display:flex;flex-direction:column;gap:8px;padding:12px;border:1.5px solid var(--or-safe);border-radius:var(--r-lg);background:var(--or-50)} .lh-cho-t{margin:0;font-size:16px;font-weight:700} .lh-cho-ds{display:flex;flex-wrap:wrap;gap:8px} .lh-cho-i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;min-width:0;max-width:100%;padding:8px 12px;border:1px solid var(--or-safe);border-radius:var(--r);background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer} .lh-cho-i span{font-size:13.5px;color:var(--slate);overflow-wrap:anywhere} .lh-cho-i .lh-cho-xep{color:var(--or-safe);font-weight:700} .lh-tua{display:flex;flex-wrap:wrap;gap:6px;margin:0;font-size:14px;align-items:center} .lh-tua-i{padding:2px 10px;border-radius:999px;background:#fff;border:1px solid var(--line)} .lh-tua-i.dau{border-color:var(--or-safe);color:var(--or-safe);font-weight:700} /* lưới giờ (máy tính) */ .lh-luoi-khung{overflow:auto;max-height:calc(100vh - 190px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .lh-luoi{--so:52;--cot:3;display:grid;grid-template-columns:56px repeat(var(--cot),minmax(160px,1fr));min-width:min-content} .lh-gio-cot,.lh-cot{display:flex;flex-direction:column;border-right:1px solid var(--line-2)} .lh-cot-dau{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:4px;height:44px;padding:0 8px;border-bottom:1px solid var(--line);background:var(--sky-50);font-weight:700;overflow:hidden;white-space:nowrap} .lh-cot-dau small{margin-left:4px;font-weight:500;color:var(--slate)} .lh-o-gio{height:24px;padding:0 6px;font-size:12px;color:var(--slate);text-align:right;border-top:1px solid transparent} .lh-o-gio.tron{border-top-color:var(--line-2)} .lh-cot-than{position:relative} .lh-o{display:block;width:100%;height:24px;border:0;border-top:1px dashed var(--line-2);background:transparent;cursor:pointer} .lh-o:hover{background:var(--sky-50)} .lh-dat,.lh-nghi{position:absolute;left:3px;right:3px;z-index:2} .lh-dat::after{content:"";position:absolute;left:4px;right:4px;top:100%;height:var(--don,0);background:repeating-linear-gradient(135deg,var(--line-2) 0 4px,transparent 4px 8px);border-radius:0 0 var(--r-sm) var(--r-sm)} .lh-dat.keo{z-index:5;opacity:.85;box-shadow:var(--shadow-md)} .lh-nghi{z-index:1;display:flex;align-items:flex-start;padding:4px 8px;border-radius:var(--r-sm);background:repeating-linear-gradient(135deg,var(--sky-100) 0 6px,var(--sky-50) 6px 12px);color:var(--slate);font-size:12.5px;pointer-events:none} .lh-bay-gio{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:4;pointer-events:none} /* b319 · vạch ĐỎ giờ hiện tại */ .lh-khoi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;height:100%;min-height:22px;overflow:hidden;padding:3px 8px;border:1px solid var(--line);border-left:4px solid var(--mau,var(--sky-400)); border-radius:var(--r-sm);background:#fff;color:var(--ink);font:inherit;font-size:13px;line-height:1.25;text-align:left;cursor:pointer;touch-action:none} .lh-khoi:focus-visible,.lh-the button:focus-visible,.lh-cho-i:focus-visible,.gd-the:focus-visible,.lh-xep-i:focus-visible{outline:3px solid var(--or);outline-offset:2px} .lh-k-gio{font-weight:700;font-size:12.5px} .lh-k-ten{font-weight:700;overflow-wrap:anywhere} .lh-k-dv,.lh-k-tt{color:var(--slate);overflow-wrap:anywhere} .lh-trong{margin:0} /* màu trạng thái (khối lưới · thẻ danh sách · nhãn) */ .st-den{background:var(--or-50);border-color:var(--or-safe)} .st-lam{background:var(--sky-800);border-color:var(--sky-800);color:#fff} .st-lam .lh-k-dv,.st-lam .lh-k-tt,.st-lam .lh-t-phu,.st-lam .lh-t-tt{color:var(--sky-100)} .st-xong{background:var(--green-soft);border-color:var(--green)} .st-thu{background:var(--sky-100);color:var(--slate)} .st-vang{background:var(--red-soft);border-color:var(--red);color:var(--red)} .st-huy{color:var(--slate);text-decoration:line-through} .lh-pill{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600} /* danh sách (điện thoại · tuần) — chữ to */ .lh-ngay-t{margin:8px 0 4px;font-size:16px;font-weight:700} .lh-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .lh-the{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .lh-the.st-den,.lh-the.st-xong,.lh-the.st-vang,.lh-the.st-lam,.lh-the.st-thu{border-width:1.5px} /* b321 · thẻ danh sách (điện thoại): `.lh-the{background:#fff}` đứng sau đè màu trạng thái ⇒ "Đang làm" chữ trắng trên nền trắng (có từ b314) */ .lh-the.st-den{background:var(--or-50)} .lh-the.st-lam{background:var(--sky-800)} .lh-the.st-xong{background:var(--green-soft)} .lh-the.st-thu{background:var(--sky-100)} .lh-the.st-vang{background:var(--red-soft)} .lh-the button{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;width:100%;min-height:64px;padding:10px 12px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer} .lh-t-gio{grid-row:1 / span 2;font-size:20px;font-weight:800;line-height:1.1} .lh-t-gio small{display:block;font-size:14px;font-weight:600;color:inherit;opacity:.75} .lh-t-than{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:16px} .lh-t-than b{font-size:17px;overflow-wrap:anywhere} .lh-t-phu{font-size:14px;color:var(--slate);overflow-wrap:anywhere} .lh-t-tt{grid-column:2;font-size:13.5px;font-weight:700;color:var(--slate)} /* chi tiết · form */ .lh-xem{display:flex;flex-direction:column;gap:10px} .lh-xem-tt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0} .lh-xem-tt a{min-height:44px;display:inline-flex;align-items:center} .lh-xem-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .lh-xem-ds li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--r);background:var(--sky-50)} .lh-xem-ds span{font-size:14px;color:var(--slate)} .lh-xem-nut .btn,.lh-f .btn{min-height:44px} .lh-ls{list-style:none;margin:0;padding:0;font-size:13.5px;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere} .lh-f-dong{display:flex;flex-direction:column;gap:8px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg)} .lh-f-hang{display:flex;flex-wrap:wrap;gap:8px 12px} .lh-f select,.lh-f input{min-height:44px} .lh-xep{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .lh-xep-i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:60px;padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer} .lh-xep-i span{font-size:13.5px;color:var(--slate)} .lh-xep-i.dau{border-color:var(--or-safe);background:var(--or-50)} .lh-xep-i:disabled{opacity:.5;cursor:not-allowed} .lh-vl-dv{display:flex;flex-direction:column;gap:4px} .lh-vl-i{min-height:44px;display:flex;align-items:center;gap:8px} /* chip KTV / trừ gói trên dòng phiếu bán */ .lh-chip{display:inline-flex;align-items:center;align-self:flex-start;min-height:30px;margin-top:3px;padding:2px 10px;border:1px dashed var(--sky-400);border-radius:999px;background:#fff;color:var(--slate);font:inherit;font-size:12.5px;cursor:pointer;max-width:100%;overflow-wrap:anywhere;text-align:left} .lh-chip.co{border-style:solid;border-color:var(--or-safe);color:var(--or-safe);font-weight:600} .lh-nv{display:flex;flex-wrap:wrap;gap:8px} .lh-nv .fchip{min-height:44px} .lh-tip{flex-direction:row;align-items:center;gap:8px} /* gói · điểm danh */ .gd-dd{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .gd-dd-f label{font-weight:700;font-size:16px} .gd-dd-hang{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .gd-dd-hang input{flex:1 1 180px;min-width:0;min-height:48px;font-size:20px} .gd-dd-nut{min-height:48px;font-size:16px} .gd-ok,.gd-loi{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r);font-size:16px} .gd-ok{background:var(--green-soft);color:var(--green)} .gd-ok span{font-size:14px;color:var(--ink)} .gd-loi{background:var(--red-soft);color:var(--red);font-weight:600} .gd-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .gd-the{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;min-height:60px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer} .gd-t-ten{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;min-width:0;overflow-wrap:anywhere} .gd-t-goi{grid-column:1;font-size:14px;color:var(--slate);overflow-wrap:anywhere} .gd-t-con{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;font-size:15px} .gd-t-tt{grid-column:1 / span 2;font-size:13px;font-weight:600;color:var(--slate)} .gd-t-tt.co{color:var(--red)} .gd-tt{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0} .gd-tt dt{color:var(--slate)} .gd-tt dd{margin:0;overflow-wrap:anywhere} /* quản lý · báo cáo */ .lh-ql{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .lh-ql li{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--line-2)} .lh-ql-t{display:flex;flex-direction:column;flex:1;min-width:0;overflow-wrap:anywhere} .lh-ql-t span{font-size:13.5px;color:var(--slate)} .lh-ql .btn{min-height:44px} .lh-ca{display:flex;flex-direction:column;gap:6px} .lh-ca-d{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .lh-ca-d .chk{min-width:110px;min-height:44px;display:flex;align-items:center;gap:6px} .lh-ca-d input[type=time]{min-height:44px} .lh-gdv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px} .lh-gdv .chk{min-height:44px;display:flex;align-items:center;gap:6px} .lh-hh-o{display:flex;gap:6px} .lh-hh-o select,.lh-hh-o input{min-height:44px} .lh-dm{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:4px} .lh-dm li{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .lh-dm li span:first-child{flex:1 1 160px;min-width:0;overflow-wrap:anywhere} .lh-dm-them{display:flex;gap:6px;flex-wrap:wrap} .lh-dm-them select{flex:1 1 200px;min-width:0;min-height:44px} .lh-bang td,.lh-bang th{white-space:nowrap} .lh-so-hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px} .lh-so{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .lh-so span{font-size:13.5px;color:var(--slate)} .lh-so b{font-size:20px} .lh-so small{font-size:12.5px;color:var(--slate);overflow-wrap:anywhere} .lh-kin{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .lh-kin li{display:grid;grid-template-columns:minmax(80px,140px) 1fr auto;gap:4px 10px;align-items:center} .lh-kin small{grid-column:2 / span 2;font-size:12.5px;color:var(--slate)} .lh-kin-thanh{height:10px;border-radius:999px;background:var(--sky-100);overflow:hidden} .lh-kin-thanh i{display:block;height:100%;background:var(--sky-700)} @media (max-width:600px){ .lh-the button{min-height:72px} .lh-chip,.gd-dd-hang .btn{min-height:44px} /* KĐL-R13: chỗ bấm ≥ 44px trên điện thoại */ .lh-t-gio{font-size:22px} .gd-the{grid-template-columns:1fr} .gd-t-con{grid-column:1;grid-row:auto;text-align:left} } /* bề rộng ô theo độ dài chữ sẽ gõ (luật form) */ .lh-f #lhf_dt,#lhv_dt,#kt_dt,#gd_the{max-width:220px} .lh-f #lhf_ten,#lhv_ten,#kt_ten{max-width:360px} .lh-f select,.lh-f #lhf_note{max-width:480px} .lh-f input[type=date],.lh-f input[type=time],.lh-f .o-ngay-k{max-width:200px} .fm-dv .num,.fm-goi .num,#fm_lh .lh-hh-o .num,#lc_lau,#lc_het,#lc_con{max-width:120px} #lh_dong .lh-tip input{max-width:160px} #lh_dong select{max-width:320px} .lh-body .fchips .fchip{min-height:44px} #gd_q{max-width:320px} /* b314 · KĐL-R1 · R8: phiếu đang thu lịch hẹn / có tip KTV */ .trow.dv-phieu{justify-content:flex-start;font-size:12.5px;color:var(--ink);padding:4px 0} /* b319 · ⑧ lịch hẹn phương án B (frontend/lich-ben.js): lưới | khung phải 340px (Khách chờ + gợi ý KTV rảnh · lịch đang chọn); nhãn giờ đỏ trên vạch; đầu cột KTV có số lịch; khối đang chọn viền cam. Chỉ máy tính, xem theo ngày. */ .lh-hai{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start} .lh-trai{min-width:0} .lh-ben{position:sticky;top:0;max-height:calc(100vh - 130px);overflow:auto;display:flex;flex-direction:column;gap:12px} .lh-ben-k{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:12px} .lh-ben-t{margin:0;font-size:16px;font-weight:700} .lh-ben-t b{display:inline-block;min-width:24px;padding:0 6px;border-radius:99px;background:var(--or);color:var(--ink);text-align:center;font-size:13px} .lh-ben-cho{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} .lh-ben-cho li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:var(--or-50)} .lh-ben-cho li div{display:flex;flex-direction:column;min-width:0;font-size:14px} .lh-ben-cho li span{font-size:12.5px;color:var(--slate)} .lh-ben-cho .lh-ben-goiy{color:#B34700;font-weight:700} .lh-ben-cho .btn{min-height:44px;flex:0 0 auto} .lh-ben-ten{margin:0;font-size:18px;font-weight:700} .lh-ben-dt{margin:0;font-size:14px} .lh-ben-nut{display:grid;grid-template-columns:1fr 1fr;gap:8px} .lh-ben-nut .btn{min-height:44px;justify-content:center} .lh-ben-thu{grid-column:1/-1} .lh-khoi.xem{outline:3px solid var(--or);outline-offset:1px;z-index:2} .lh-cot-so{margin-left:auto} .lh-gio-cot{position:relative} .lh-bay-nhan{position:absolute;left:2px;z-index:5;padding:1px 5px;border-radius:5px;background:var(--red);color:#fff;font-size:12px;font-weight:700;font-family:var(--f-mono);pointer-events:none} @media (max-width:1180px){ .lh-hai{grid-template-columns:minmax(0,1fr) 290px} } /* ===== SOURCE: styles/thuoc.css ===== */ /* ============================================================ thuoc.css · b315 · NHÀ THUỐC — màn Nhà thuốc (tab · ô tổng quan · bảng sổ GPP), hộp đơn thuốc, phiếu nhập / xuất theo lô, nhãn ra lẻ (in), chip lô cận hạn trên dòng phiếu bán. Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md — biến có sẵn, không thêm mã màu. Chỗ bấm ≥ 44px. Trạng thái: đỏ = hết hạn / thu hồi / lỗi · cam = cận hạn / chờ gửi · xanh = còn hạn / đã nhận · xám = bỏ qua. ============================================================ */ .nt-body{display:flex;flex-direction:column;gap:12px;min-width:0} .nt-tabs{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px} .nt-tabs .fchip{flex:none;min-height:44px;white-space:nowrap} .nt-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px} .nt-o{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:88px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer} .nt-o b{font-size:21px;font-weight:800} .nt-o span{font-weight:600} .nt-o small{font-size:12.5px;color:var(--slate)} .nt-o.rd{border-color:var(--red);background:var(--red-soft)} .nt-o.rd b{color:var(--red)} .nt-o.am{border-color:var(--or-safe);background:var(--or-50)} .nt-o.am b{color:var(--or-safe)} .nt-o:focus-visible{outline:3px solid var(--or);outline-offset:2px} .nt-khoi{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .nt-khoi h3,.nt-khoi p{margin:0} .nt-co{border-color:var(--red)} .nt-ds{list-style:none;margin:0;padding:0;width:100%} .nt-ds li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-2);overflow-wrap:anywhere} .nt-pill{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:600;white-space:nowrap} .nt-pill.rd{background:var(--red-soft);border-color:var(--red);color:var(--red)} .nt-pill.am{background:var(--or-50);border-color:var(--or-safe);color:var(--or-safe)} .nt-pill.gn{background:var(--green-soft);border-color:var(--green);color:var(--green)} .nt-pill.gy{background:var(--sky-50);color:var(--slate)} .nt-ky{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .nt-ky label{display:inline-flex;align-items:center;gap:4px;font-weight:600} .nt-ky input{min-height:44px} .nt-bang{max-width:100%;overflow-x:auto} .nt-bang td{vertical-align:top;overflow-wrap:anywhere} .nt-bang td small{color:var(--slate)} .nt-nut{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .nt-bang+.nt-nut,.nt-bang+p{margin-top:12px} .nt-nut .btn,.nt-nut .fchip,.nt-so .fchip,.nt-loai .fchip,.nt-khoi .btn,.nt-bang .btn{min-height:44px} .nt-gt{min-width:56px;min-height:44px;justify-content:center} .nt-cot{flex-direction:column;align-items:stretch} .nt-h{margin:12px 0 4px} .nt-nhap,.nt-don,.nt-form,.nt-cai{display:flex;flex-direction:column;gap:8px;min-width:0} .nn-d{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sky-50)} .nn-hang{display:flex;flex-wrap:wrap;gap:8px} .nn-hang .f{flex:0 1 auto;min-width:0} .nt-ma{display:flex;gap:8px;align-items:center} .nt-ma input{flex:1;min-width:0} .nt-loi{padding:8px 12px;border-radius:var(--r);background:var(--red-soft);color:var(--red);font-weight:600} .nt-nhom{display:inline-flex;align-items:center;gap:4px;min-height:44px} .nt-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0} .nt-dl dt{font-weight:600;color:var(--slate)} .nt-dl dd{margin:0;overflow-wrap:anywhere} .nt-in-phu{margin:0 0 3mm;font-size:9pt} /* dòng phiếu bán: lô cận hạn (thuốc — ngưỡng nhà thuốc) */ .lo-chip.can{background:var(--or-50);border-color:var(--or-safe);color:var(--or-safe)} /* nhãn ra lẻ — xem trước trong hộp + in (tem 50×30 / 40×30 hoặc cuộn 80 / 58) */ .nt-nhan-ds{display:flex;flex-direction:column;gap:8px} .nt-nhan-ds.xem .nt-nhan{border:1px dashed var(--line);border-radius:var(--r-sm);height:auto} .nt-nhan{width:50mm;height:30mm;box-sizing:border-box;padding:1.2mm 1.8mm;display:flex;flex-direction:column;gap:.3mm;color:#000;background:#fff;font-size:7pt;line-height:1.2;overflow:hidden;break-after:page;page-break-after:always} .nt-nhan-ds.cuon .nt-nhan{width:72mm;height:auto;padding:2mm 4mm;border-bottom:1px dashed #000;break-after:auto;page-break-after:auto} .nt-nhan-ds.k4030 .nt-nhan{width:40mm;padding:1mm 1.2mm} .nt-nhan-ds.cuon.k58 .nt-nhan{width:48mm;padding:2mm 1.5mm} .nt-nhan-ds.k4030 .nt-nh-chan,.nt-nhan-ds.k58 .nt-nh-chan{flex-wrap:wrap} .nt-nh-tiem{font-size:6.5pt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nt-nh-ten{font-size:9pt;font-weight:800;overflow-wrap:anywhere} .nt-nh-phu{font-size:7pt} .nt-nh-dung{font-size:8pt;font-weight:700;overflow-wrap:anywhere} .nt-nh-chan{margin-top:auto;display:flex;justify-content:space-between;gap:1mm;font-size:6.5pt} @media (max-width:880px){ .nt-ky input,.nt-nhap input,.nt-nhap select,.nt-don input,.nt-cai input,.nt-cai select,.nt-form input,.nt-form select{font-size:16px} .nn-hang .f{flex:1 1 40%} } /* ===== SOURCE: styles/web.css ===== */ /* ============================================================ web.css · b316 · ĐƠN ONLINE + GIAO QUA HÃNG trong app — hộp đơn online, cài đặt web, vận đơn, nhãn dán kiện (in A6 100×150). Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md — biến có sẵn, không thêm mã màu. Chỗ bấm ≥ 44px. Dùng lại khung .nt-* của nhà thuốc (thuoc.css). ============================================================ */ .wb-an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wb-lk{min-height:44px;padding:0;border:0;background:none;color:var(--or-safe);font:inherit;text-align:left;cursor:pointer} .wb-lk:focus-visible{outline:3px solid var(--or);outline-offset:2px} .wb-st{flex:1;min-width:0} .wb-tim input{max-width:100%;min-height:44px} #wb_hang .btn{min-height:44px} .wb-bang td.num,.wb-bang .wb-lk{white-space:nowrap;overflow-wrap:normal} .wb-cai{max-width:760px} .nt-cot>.nt-nhom{justify-content:flex-start;text-align:left} .nt-nhom>input[type=radio],.nt-nhom>input[type=checkbox]{flex:none;width:auto;padding:0;margin:0 6px 0 0} .wb-ct .nt-dl{margin-bottom:8px} /* nhãn dán kiện — khổ A6 100×150mm (cuộn 80mm in được, tự co) */ .gh-nhan{width:100mm;min-height:148mm;box-sizing:border-box;padding:4mm;color:#000;background:#fff;font-size:10pt;line-height:1.3;display:flex;flex-direction:column;gap:2.5mm} .gh-hang{font-size:12pt;border-bottom:1px solid #000;padding-bottom:1.5mm} .gh-ma svg{width:100%;height:24mm} .gh-o{display:flex;flex-direction:column;border:1px solid #000;padding:1.5mm 2mm;overflow-wrap:anywhere} .gh-o small,.gh-cod small{font-size:7.5pt;letter-spacing:.04em} .gh-o b{font-size:12pt} .gh-cod{display:flex;justify-content:space-between;align-items:baseline;border:2px solid #000;padding:2mm} .gh-cod b{font-size:16pt} .gh-chan{margin-top:auto;display:flex;justify-content:space-between;font-size:8.5pt} @media (max-width:880px){.wb-tim input,.nt-cai textarea{font-size:16px}} /* ===== SOURCE: styles/san.css ===== */ /* ============================================================ san.css · b317 · NỐI SÀN trong màn Đơn online — dòng "Liên kết hàng" (SKU sàn ↔ mã trong app). Các khung còn lại dùng lại .nt-* (thuoc.css) + .wb-* (web.css). Màu / cỡ chữ theo docs/thiet-ke/TO-NHAN-DIEN.md — không thêm mã màu. Chỗ bấm ≥ 44px. ============================================================ */ .nt-ds li.sn-lk{flex-wrap:wrap;align-items:flex-start} .sn-sp{flex:1 1 220px;min-width:0} .sn-lk .btn,.sn-kn .btn{min-height:44px} .sn-lk small{color:var(--slate)} @media (max-width:880px){.nt-ds li.sn-lk>span{flex:1 1 100%}} /* ===== SOURCE: styles/bang-hom-nay.css ===== */ /* ============================================================ bang-hom-nay.css · b319 · ⑤ QUẢN LÝ — "BẢNG HÔM NAY" (frontend/quan-ly.js vẽ vào #ql_bang; khung ở managementBody) Máy tính 1366×768 vừa MỘT màn không cuộn: [doanh thu + cột theo giờ] | [Cần làm · Bán chạy], dưới đáy 8 ô nhỏ + hàng "Khác". Điện thoại: xếp dọc, số hôm nay lên đầu. Biểu đồ MỘT trục triệu đồng; hôm nay than #173247 · hôm qua xám #7D8B99 (3,49:1 trên trắng) · giờ đang bán cam #EA6A0B (3,2:1) — màu luôn kèm chú giải chữ (BAO-CAO-BIEU-DO mục 1). ============================================================ */ .ql-bang{display:grid;gap:12px;margin-bottom:12px} .ql-so,.ql-khoi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0} .ql-dt small{display:block;font-size:14px;font-weight:700;color:var(--slate)} .ql-dt>b{display:block;font-size:44px;font-weight:800;font-family:var(--f-mono);letter-spacing:-.02em;line-height:1.1;color:var(--ink);overflow-wrap:anywhere} .ql-dt>b span{font-size:21px} .ql-phu{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;font-size:14px;color:var(--slate)} .ql-phu b{color:var(--ink);font-family:var(--f-mono)} .ql-phu .len{color:var(--green);font-weight:700} .ql-phu .xuong{color:var(--red);font-weight:700} .ql-loi{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:14px;color:var(--red)} .ql-bieu{display:flex;gap:6px;height:230px;margin-top:12px} .ql-truc{display:flex;flex-direction:column;justify-content:space-between;min-width:28px;padding-bottom:18px; font-size:12px;line-height:0;color:var(--slate);font-family:var(--f-mono);text-align:right} .ql-cots{flex:1;display:flex;gap:3px;min-width:0;background-image:linear-gradient(to bottom,var(--line-2) 1px,transparent 1px); background-size:100% calc((100% - 18px) / 3);background-repeat:repeat-y} .ql-cot{flex:1;display:flex;flex-direction:column;min-width:0} .ql-cot-t{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-bottom:1px solid var(--slate-2)} .ql-cot-t i{display:block;width:40%;max-width:14px;border-radius:2px 2px 0 0} .ql-nay{background:#173247} .ql-qua{background:#7D8B99} .ql-cot.dang .ql-nay{background:#EA6A0B} .ql-cot small{height:18px;line-height:18px;text-align:center;font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden} .ql-chu{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--slate)} .ql-chu i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px} .ql-chu .ql-dang{background:#EA6A0B} .ql-dv{margin-left:auto} .ql-ben{display:flex;flex-direction:column;gap:12px;min-width:0} .ql-khoi{padding:12px 14px} .ql-khoi h3{margin:0 0 8px;font-size:14px;font-weight:700} .ql-viec{display:flex;flex-direction:column;gap:4px} .ql-v{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px} .ql-v>b{min-width:32px;padding:3px 8px;border-radius:99px;text-align:center;font-size:14px;font-weight:800} .ql-v.rd>b{background:var(--red-soft);color:var(--red)} .ql-v.am>b{background:var(--or-50);color:#B34700} .ql-v span{font-size:14px} .ql-b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;margin-bottom:8px;font-size:14px} .ql-b-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ql-b b{font-family:var(--f-mono)} .ql-b i{grid-column:1/-1;display:block;height:6px;border-radius:3px;background:#173247} .ql-trong{margin:0;font-size:14px;color:var(--slate)} .mg-phu-hang .mg-h{margin-top:4px} @media (min-width:881px){ .ql-bang{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)} .ql-ben .ql-khoi{flex:1 1 0;overflow:auto} .mg-bang>.mg-ds{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:10px} .mg-bang>.mg-ds .mg-i{position:relative;grid-template-columns:1fr;justify-items:center;gap:4px;min-height:74px;padding:8px 6px;text-align:center} .mg-bang>.mg-ds .mg-i-t{font-size:13px;line-height:1.25} .mg-bang>.mg-ds .mg-i-n{position:absolute;top:6px;right:6px} .mg-bang .mg-i-ch{display:none} .mg-phu-hang{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .mg-phu-hang .mg-h{margin:0} .mg-bang .mg-phu{display:flex;flex-wrap:wrap;gap:6px;margin:0} .mg-bang .mg-phu .mg-i{width:auto;grid-template-columns:auto auto auto;gap:6px;min-height:40px;padding:4px 12px} .mg-bang .mg-phu .mg-i-ic{width:24px;height:24px;background:transparent} } @media (max-width:880px){ .ql-dt>b{font-size:36px} .ql-bieu{height:170px} /* b319 kiểm độc lập (người lớn tuổi): 16 cột chen nhau, nhãn 10,5px bị cắt ⇒ chỉ ghi mỗi 3 giờ, chữ 13px */ .ql-cot small{font-size:13px;overflow:visible} .ql-cot.le small{visibility:hidden} .ql-truc{font-size:13px;min-width:30px} /* thứ tự điện thoại: số hôm nay → Cần làm → các ô (đích của "Xem thêm") → biểu đồ → bán chạy — danh sách không bị đẩy xuống dưới bảng */ .mg-bang{display:flex;flex-direction:column;gap:12px} .mg-bang .ql-bang,.mg-bang .ql-ben,.mg-bang .ql-so{display:contents} .mg-bang .ql-dt,.mg-bang .ql-bieu{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px} .mg-bang .ql-dt,.mg-bang .ql-loi{order:1} .mg-bang .ql-khoi{order:2} .mg-bang>.mg-ds{order:3;margin:0} .mg-bang>.mg-phu-hang{order:4} .mg-bang .ql-bieu,.mg-bang .ql-chu{order:5;margin:0} .mg-bang .ql-khoi-ban{order:6} } /* việc chờ chủ (managementBody vẽ đồng bộ, cùng chữ b229) nằm trong "Cần làm" dưới dạng dòng: số · việc · bấm cả dòng là làm */ .ql-v.viec-chip{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:4px 0;border:0;border-radius:0;background:transparent; color:var(--ink);font-size:14px;font-weight:400;text-align:left;box-shadow:none} .ql-v.viec-chip:hover{background:var(--sky-50)} /* ===== SOURCE: styles/san-pham.css ===== */ /* ============================================================ san-pham.css · b319 · ⑥ SẢN PHẨM — danh sách + KHUNG CHI TIẾT (frontend/sp-chi-tiet.js vẽ vào #p_ct; điện thoại: hộp) Máy tính: [bảng hàng | khung 380px dính trên]. Dòng đang xem nền xanh nhạt + vạch trái. Màn hẹp hơn 1100px: khung ẩn, bấm dòng mở hộp. Điện thoại (danh sách Tra giá): MỌI dòng CAO BẰNG NHAU 84px (anh Đạt 27/09) — có ô ảnh hay không, có giá nguyên hay không. ============================================================ */ .p-hai{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start} .p-hai.co-ct{grid-template-columns:minmax(0,1fr) 380px} .p-hai:not(.co-ct) .p-ct{display:none} .spct-dau{position:relative} .spct-dong{position:absolute;top:-6px;right:-8px} .modal .spct-dong{display:none} .p-trai{min-width:0} .p-ct{position:sticky;top:0;max-height:calc(100vh - 170px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px} #ptbl tr[data-pid]{cursor:pointer} #ptbl tr.on td{background:var(--sky-50)} #ptbl tr.on td:first-child{box-shadow:inset 3px 0 0 #173247} .spct-dau{display:flex;align-items:center;gap:10px} .spct-dau h2{margin:0;font-size:18px;font-weight:700;line-height:1.3;overflow-wrap:anywhere} /* b324 · anh Đạt 28/09: ảnh hàng ở đầu khung chi tiết — 96×72 (ảnh 4:3), phủ kín ô, bo góc như ô ảnh form sửa (.pimg-cur). Chữ cái đầu tên nằm dưới ảnh, trong suốt; ảnh lỗi tải thì JS đổi ô về .ptimg.none (ô chữ cái). */ .spct-anh{position:relative;flex:0 0 96px;width:96px;height:72px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:transparent} .spct-anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .spct-dau>div{min-width:0} .spct-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-top:12px} .spct-o{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px} .spct-o small{font-size:12.5px;color:var(--slate)} .spct-o b{font-size:18px;font-weight:800;font-family:var(--f-mono);overflow-wrap:anywhere} .spct-o span{font-size:12.5px;color:var(--slate)} .spct-o em{font-style:normal;font-weight:700} .spct-o em.rd{color:var(--red)} .spct-o em.am{color:#B34700} .spct-gm{margin-top:8px;font-size:14px;font-weight:700;color:#B34700} .spct-gm span{font-weight:400;color:var(--slate)} .spct-nut{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px} .spct-nut .btn{min-height:44px;justify-content:center} .spct-khoi{margin-top:14px} .spct-khoi h3{margin:0 0 6px;font-size:14px;font-weight:700} .spct-d{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line-2);font-size:12.5px} .spct-d span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spct-d .nhap{color:var(--green)} .spct-d .xuat{color:var(--red)} .spct .text-action{margin-top:10px} .ph-row{cursor:pointer} .ph-sub .gia-moi{margin-left:6px;vertical-align:1px} @media (max-width:1100px){ .p-hai{grid-template-columns:minmax(0,1fr)} .p-ct{display:none} } @media (max-width:880px){ /* b319 · anh Đạt 27/09: "tên sản phẩm nên được nhìn rõ, bị chật quá" — tên chiếm TRỌN bề ngang cột chữ (không chia với cột giá), tối đa 2 dòng; giá · giá nguyên · tồn xuống một hàng ngang bên dưới. Mọi dòng vẫn CAO BẰNG NHAU; ô ảnh 25% sát mép trái (luật b290) giữ nguyên. */ .ph-row,.ph-row:has(.ph-cam){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:11px;row-gap:6px; height:104px;box-sizing:border-box;overflow:hidden;align-items:stretch;padding:10px 13px} .ph-row:has(.ph-cam){grid-template-columns:25% minmax(0,1fr);padding:0 13px 0 0} .ph-row:has(.ph-cam) .ph-cam{grid-row:1 / -1;height:100%;aspect-ratio:auto} .ph-row .ph-cam img{object-fit:contain} /* ô cao theo dòng, ảnh 4:3 hiện TRỌN (không cắt) — vẫn "chụp sao thấy vậy" (b290) */ .ph-row .ph-nm{grid-column:-2;align-self:end;display:block;overflow:visible} /* tên là phần tử RIÊNG, cắt ở dòng 2 — trước đây dòng mã nằm trong cùng khối cắt nên tên dài chỉ còn một dòng ("Bia lo…") */ .ph-row .ph-ten{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.3;font-weight:700} .ph-row .ph-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ph-row:has(.ph-cam) .ph-nm{padding-top:10px} .ph-row .ph-pr{grid-column:-2;flex-direction:row;flex-wrap:nowrap;align-items:baseline;justify-content:flex-start;gap:8px;text-align:left;min-width:0} .ph-row:has(.ph-cam) .ph-pr{padding-bottom:10px} .ph-row .ph-w{overflow:hidden;text-overflow:ellipsis;min-width:0} .ph-row .ph-pr .tag{margin-left:auto;flex:0 0 auto} /* b323 · anh Đạt 28/09: hàng CHƯA có ảnh không chừa cột ảnh / chữ cái 25% — chữ dùng trọn bề ngang; nút chụp thu về một nút máy ảnh 44px góc trên phải */ .ph-row:has(.ph-cam:not(.co)){grid-template-columns:minmax(0,1fr);padding:10px 13px;position:relative} .ph-row:has(.ph-cam:not(.co)) .ph-cam{position:absolute;top:4px;right:4px;width:44px;height:44px;border-radius:10px;background:transparent} .ph-row .ph-cam:not(.co) b{display:none} .ph-row .ph-cam:not(.co) .ph-cam-hh{position:static;width:30px;height:30px;border-radius:9px} .ph-row .ph-cam:not(.co) .ph-cam-hh svg{width:16px;height:16px} .ph-row:has(.ph-cam:not(.co)) .ph-nm{padding-right:44px;padding-top:0} .ph-row:has(.ph-cam:not(.co)) .ph-pr{padding-bottom:0} .spct-d{grid-template-columns:minmax(0,1fr) auto;row-gap:2px} .spct-d .d-luc{grid-column:1;grid-row:1} .spct-d .d-sl{grid-column:2;grid-row:1;text-align:right} .spct-d .d-nd{grid-column:1;grid-row:2} .spct-d .d-con{grid-column:2;grid-row:2;text-align:right} } /* ===== SOURCE: styles/dau-tien.css ===== */ /* ============================================================ dau-tien.css · b319 · ④ LẦN ĐẦU MỞ APP — 3 bước toàn màn (frontend/dau-tien.js). Nền than, thẻ trắng giữa màn, một cột, nút chính cuối thẻ (luật form), chỗ bấm ≥ 44px, điện thoại thẻ phủ cả màn. ============================================================ */ .dt-man{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;background:#101B26;overflow:auto} .dt-the{width:100%;max-width:640px;max-height:100%;display:flex;flex-direction:column;background:var(--paper);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden} .dt-dau{display:flex;align-items:center;gap:12px;padding:16px 20px 0} .dt-logo{font-size:14px;font-weight:800;color:var(--ink)} .dt-vach{display:flex;gap:6px;margin-left:auto} .dt-vach i{display:block;width:32px;height:5px;border-radius:3px;background:var(--line)} .dt-vach i.on{background:var(--or)} .dt-so{font-size:12.5px;color:var(--slate)} .dt-than{display:flex;flex-direction:column;gap:12px;padding:16px 20px;overflow:auto} .dt-than h1{margin:0;font-size:24px;font-weight:800;color:var(--ink)} .dt-than .f{display:flex;flex-direction:column;gap:4px} .dt-than label{font-size:14px;font-weight:700} .dt-than input{min-height:44px;font-size:16px} .dt-o-dt{max-width:220px} .dt-nganh{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px} .dt-ng,.dt-hang{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 12px;text-align:left; background:var(--paper);border:1.5px solid var(--line);border-radius:12px;color:var(--ink)} .dt-ng:hover,.dt-hang:hover{border-color:#173247} .dt-ng.on,.dt-hang.on{border-color:var(--or);background:var(--or-50);box-shadow:inset 0 0 0 1px var(--or)} .dt-ng b,.dt-hang b{font-size:15px;font-weight:700} .dt-ng span,.dt-hang span{font-size:12.5px;color:var(--slate)} .dt-hangs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .dt-hang{min-height:112px} .dt-hang svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;margin-bottom:4px} .dt-than .text-action{align-self:flex-start} .dt-nut{display:flex;justify-content:space-between;gap:12px;padding:12px 20px 18px;border-top:1px solid var(--line-2)} .dt-nut .btn{min-height:44px;padding:0 18px} .dt-loi{margin:10px 0 0;color:var(--red);font-weight:700;font-size:15px} .dt-dang{align-self:center;color:var(--slate);font-weight:600} @media (max-width:560px){ .dt-man{padding:0;align-items:stretch} .dt-the{max-width:none;border-radius:0} .dt-hangs{grid-template-columns:1fr} .dt-hang{min-height:64px} .dt-nganh{grid-template-columns:1fr 1fr} } /* ===== SOURCE: styles/co-chu.css ===== */ /* ═══════════════════════════════════════════════════════════════════════════ b323 · CỠ CHỮ TỐI THIỂU (anh Đạt 28/09, soi trên b322) · Mọi chữ ≥ 12px (nguồn CSS + chữ nội dòng đã nâng); chữ phụ quan trọng (mã hàng, tồn, "Khách trả", nhãn cột, thẻ) ≥ 12,5px — nâng ngay trong luật gốc. · Ngoại lệ anh cho: "Online · bNNN" ở chân thanh trái ≥ 11px (thanh 56px), tương phản ≥ 4,5. · Cỡ chữ LỚN phóng cả chữ phụ (trước đây chỉ tên hàng / giá to lên). Đo bằng docs/thiet-ke/b323/do-giao-dien.js (Chromium, chữ thật đang hiện trên màn). ═══════════════════════════════════════════════════════════════════════════ */ body.big .tag,body.big .cell-sub,body.big .tot-nhan,body.big th,body.big .ph-sub,body.big .ph-w, body.big .kbd,body.big .ilb,body.big .p-stat,body.big small{font-size:14px} /* b324 · anh Đạt 28/09: ô ngày TRẢ DÁNG b322 — MỘT ô (ngayVN — settings-ui.js). b323 thêm hộp nút lịch 44px ⇒ ô Hóa đơn điện thoại cao 70px. Nay: ô date gốc vẫn là cái hộp nhìn thấy, đúng mọi luật CSS cũ của từng màn — chỉ giấu chữ mm/dd/yyyy + biểu tượng gốc của nó. Ô chữ dd/mm/yyyy phủ trong suốt đúng lên hộp đó (viền trong suốt ⇒ lúc chọn thì viền xanh vẽ đúng chỗ viền ô gốc); biểu tượng lịch nhỏ nằm TRONG ô, bên phải, không nhận chạm (vùng bấm là .o-ngay-k::after). Khung .o-ngay-k đứng đúng vai ô gốc b322: nội dòng, rộng 100% như luật chung của input (chân chữ = chân chữ ô gốc) — màn nào đặt ô ngày rộng khác (width:auto / max-width) thì đặt y vậy cho khung (hoa-don · don-vi · lich · commerce; width nội dòng thì ngayVN chép sang). */ .o-ngay-k{position:relative;display:inline-flex;width:100%;min-width:0;max-width:100%} .o-ngay-k>input.o-ngay-goc{color:transparent} .o-ngay-k>input.o-ngay-goc::-webkit-datetime-edit,.o-ngay-k>input.o-ngay-goc::-webkit-calendar-picker-indicator{opacity:0} .o-ngay-k>input.o-ngay{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;padding-right:34px;background:transparent;border-color:transparent;box-shadow:none; font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:left} .o-ngay-k>input.o-ngay::placeholder{font-family:var(--f-mono)} .o-ngay-k>input.o-ngay:focus{border-color:var(--sky-500);box-shadow:0 0 0 3px var(--sky-100)} /* ô chữ readOnly lúc chạm tay (chặn bàn phím) giữ màu chữ thường; chỉ ô gốc readonly thật mới xám như input[readonly] */ .o-ngay-k>input.o-ngay[readonly]{color:inherit} .o-ngay-k:has(>input.o-ngay-goc[readonly])>input.o-ngay{color:var(--slate)} /* b324 · vùng bấm biểu tượng lịch: dải ~36px mép phải, cao hết ô (chuột bấm đây mới mở lịch; vùng chữ để gõ). Ô gốc khóa ⇒ không mời bấm. */ .o-ngay-k::after{content:'';position:absolute;top:0;right:0;bottom:0;width:36px;cursor:pointer} .o-ngay-k:has(>input.o-ngay-goc:disabled)::after,.o-ngay-k:has(>input.o-ngay-goc[readonly])::after{cursor:default} .o-ngay-ic{position:absolute;top:50%;right:10px;width:16px;height:16px;margin-top:-8px;color:var(--ink-2);pointer-events:none} .o-ngay-ic svg{display:block;width:16px;height:16px;stroke-width:2}