:root { --primary: #1a7f37; --primary-dark: #0f5c26; --border: #d9dfe6; --bg: #f4f6f8; --danger: #c0392b; --text: #1f2937; --text-muted: #6b7280; font-size: 16px; } /* ---------- Phân biệt màu theo luồng tiền: Bán hàng/Khách hàng/Hóa đơn (xanh lá, mặc định) vs Nhập hàng/NCC/Phiếu nhập (xanh dương) -- 2 luồng ngược chiều nhau (tiền vào / tiền ra), dễ thao tác nhầm nếu mở nhiều tab. Đặt class này lên của 3 trang thuộc luồng nhập hàng — toàn bộ nút/link/viền trong trang tự đổi màu theo (đều dùng var(--primary)), không cần sửa lại từng chỗ. Viền trên header giúp nhận ra ngay từ xa, không cần đọc chữ. ---------- */ body.theme-mua-hang { --primary: #1d4ed8; --primary-dark: #1e3a8a; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); } button { font: inherit; cursor: pointer; border: none; border-radius: 6px; padding: 0.6em 1em; background: var(--primary); color: #fff; } button:hover { background: var(--primary-dark); } button.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); } button.danger { background: var(--danger); } button:disabled { opacity: 0.5; cursor: not-allowed; } input, select { font: inherit; padding: 0.5em 0.6em; border: 1px solid var(--border); border-radius: 6px; width: 100%; } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.5em 0.4em; text-align: left; border-bottom: 1px solid var(--border); } th { font-size: 0.85em; color: var(--text-muted); font-weight: 600; } .error-box { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; padding: 0.75em 1em; border-radius: 6px; margin-bottom: 1em; white-space: pre-wrap; } /* ---------- Đăng nhập ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1em; } .login-card { background: #fff; border-radius: 10px; padding: 2em; width: 100%; max-width: 360px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .login-card h1 { font-size: 1.3em; margin-top: 0; text-align: center; } .login-card label { display: block; margin: 1em 0 0.3em; font-size: 0.9em; color: var(--text-muted); } .login-card button[type="submit"] { width: 100%; margin-top: 1.5em; } /* ---------- Layout POS ---------- */ .app-header { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 0.7em 1.2em; border-bottom: 1px solid var(--border); border-top: 4px solid var(--primary); } .app-header .who { font-size: 0.9em; color: var(--text-muted); display: flex; align-items: center; gap: 0.8em; } .app-header .who-name { margin-right: 0.4em; } .secondary-link { color: var(--primary); text-decoration: none; font-weight: 600; } .secondary-link:hover { text-decoration: underline; } .pos-layout { display: grid; grid-template-columns: 1fr 380px; gap: 1em; padding: 1em; max-width: 1400px; margin: 0 auto; } @media (max-width: 900px) { .pos-layout { grid-template-columns: 1fr; } } .panel { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1em; margin-bottom: 1em; } .panel h2 { font-size: 1em; margin: 0 0 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .panel label { display: block; margin: 0.8em 0 0.3em; font-size: 0.85em; color: var(--text-muted); } #search-results { max-height: 320px; overflow-y: auto; margin-top: 0.6em; } .search-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5em; border-bottom: 1px solid var(--border); cursor: pointer; } .search-item:hover { background: var(--bg); } .search-item .name { font-weight: 600; } .search-item .meta { font-size: 0.85em; color: var(--text-muted); } .cart-qty { width: 4.5em; text-align: center; } .cart-giam-gia { width: 4.5em; text-align: center; } .cart-dvt { width: 100%; } .cart-remove { background: transparent; color: var(--danger); padding: 0.2em 0.5em; } .qty-picker { margin-top: 0.6em; padding: 0.8em; background: var(--bg); border: 1px solid var(--primary); border-radius: 8px; } .qty-picker-name { font-weight: 600; margin-bottom: 0.5em; } .qty-picker-row { display: flex; gap: 0.5em; align-items: center; } .qty-picker-row select { flex: 1; } .qty-picker-row input { width: 6em; text-align: center; } .totals-row { display: flex; justify-content: space-between; padding: 0.3em 0; } .totals-row.grand { font-size: 1.2em; font-weight: 700; border-top: 1px solid var(--border); margin-top: 0.5em; padding-top: 0.6em; } .payment-line { display: flex; gap: 0.5em; margin-bottom: 0.5em; align-items: center; } .payment-line select { flex: 1; } .payment-line input { width: 8em; } .payment-fill-btn { width: 2em; height: 2em; padding: 0; flex-shrink: 0; font-weight: 700; line-height: 1; border-radius: 50%; } .payment-fill-btn[title] { cursor: help; } .checkout-buttons { display: flex; gap: 0.5em; margin-top: 0.5em; } .checkout-buttons #checkout-btn { flex: 1; font-size: 1.1em; padding: 0.8em; } .checkout-buttons #in-bao-gia-btn { padding: 0.8em 1em; } .checkbox-row label { display: flex; align-items: center; gap: 0.4em; font-weight: 400; color: var(--text); } .checkbox-row input[type="checkbox"] { width: auto; } .customer-selected { display: flex; justify-content: space-between; align-items: center; background: var(--bg); padding: 0.5em 0.7em; border-radius: 6px; margin-top: 0.5em; } .phan-loai-ban { display: flex; gap: 0.5em; margin-top: 0.8em; } .phan-loai-btn { flex: 1; background: #fff; color: var(--text); border: 1px solid var(--border); } .phan-loai-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } .phan-loai-btn:disabled { opacity: 0.4; cursor: not-allowed; } .thua-hoan-tra-chon { justify-content: flex-end; gap: 0.4em; margin: 0.3em 0 0.6em; } .thua-hoan-tra-chon .phan-loai-btn { flex: none; font-size: 0.85em; padding: 0.3em 0.8em; } /* ---------- Hóa đơn in 80mm ---------- */ #receipt { display: none; } @media print { body * { visibility: hidden; } #receipt, #receipt * { visibility: visible; } #receipt { display: block; position: absolute; top: 0; left: 0; width: 80mm; padding: 2mm; font-family: "Courier New", monospace; font-size: 12px; } #receipt table { width: 100%; } #receipt th, #receipt td { border: none; padding: 2px 0; } #receipt .line { border-top: 1px dashed #000; margin: 4px 0; } #receipt .center { text-align: center; } #receipt .right { text-align: right; } #receipt .bold { font-weight: 700; } } /* ---------- Tem mã vạch — cuộn 3 tem/hàng, mỗi tem 35x22mm ---------- */ #label-sheet { display: none; } .label-cell { width: 35mm; height: 22mm; padding: 1mm; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; } .label-cell .ten-hang { font-size: 7.5px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; line-height: 1.2; } .label-cell svg { display: block; } .label-cell .ma-hien-thi { font-family: "Courier New", monospace; font-size: 7px; letter-spacing: 0.5px; } .label-cell .gia-ban { font-size: 9px; font-weight: 700; } @media print { @page { size: 105mm auto; margin: 0; } body * { visibility: hidden; } #label-sheet, #label-sheet * { visibility: visible; } #label-sheet { display: grid; grid-template-columns: repeat(3, 35mm); position: absolute; top: 0; left: 0; } .label-cell { border: none; page-break-inside: avoid; } }