/* Xưởng In An Bình — bản chạy thật. Màu theo bản demo đã duyệt: thanh trên xanh lá, nền xanh rất nhạt, đỏ cho nhấn và lỗi. */
:root {
  --bg: #e3f4e8; --surface: #ffffff; --ink: #14231a; --muted: #51625a; --line: #bfdcc8;
  --accent: #188a48; --accent-ink: #ffffff; --soft: #d3eedb; --hdr: #1b9645; --red: #d7262b;
  --c: #00a3d7; --m: #d6247a; --y: #f2c200;
  --font: system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ───────── Thanh công cụ (theo bản demo): tên xưởng, lời chào, tài khoản, hàng tab và menu thả xuống ───────── */
header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--hdr); color: #fff; border-top: 4px solid var(--red);
  background-image: radial-gradient(circle at 12% -40%, rgb(255 255 255 / .16) 0 120px, transparent 121px), radial-gradient(circle at 58% 160%, rgb(255 255 255 / .10) 0 150px, transparent 151px),
    radial-gradient(circle at 96% -20%, rgb(255 255 255 / .12) 0 90px, transparent 91px); }
.dau { max-width: 1680px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.ten-xuong { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.ten-xuong:focus-visible, .dau-tin button:focus-visible, .tai-khoan button:focus-visible, nav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dau-tin { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; font-size: 13px; }
#dau-dem { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; }
.dau-tin button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 11px; border-radius: 999px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .32); font-size: 13px; }
.dau-tin button:hover { background: rgb(255 255 255 / .28); }
.dau-tin button b { font-size: 15px; }
.dau-tin button.nong { background: var(--red); border-color: rgb(255 255 255 / .5); }
.dau-tin button.chuong { background: var(--note); color: #3d2f00; border-color: transparent; font-weight: 600; }
/* Hộp "Việc còn dở hôm nay" */
.tb-nen { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .45); display: grid; place-items: center; padding: 16px; }
.tb-hop { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 20px; width: min(640px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .3); }
.tb-hop h2 { font-size: 18px; }
.tb-hop h3 { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tb-nhom { display: grid; gap: 6px; }
.tb-bp { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 10px; font-size: 12px; }
.tb-muc { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.tb-muc:hover { background: var(--soft); }
.tb-muc:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tb-han { flex: none; text-align: right; }
@media print { .tb-nen, .hop-nen { display: none; } }
.tai-khoan { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.tai-khoan button { all: unset; box-sizing: border-box; cursor: pointer; padding: 3px 11px; border-radius: 999px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .32); font-size: 13px; }
.tai-khoan button:hover { background: rgb(255 255 255 / .28); }
nav { max-width: 1680px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; }
nav button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; font-weight: 600; color: #fff; cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0; }
nav button:hover { background: rgb(255 255 255 / .18); }
nav button[aria-current="page"], nav button[aria-current="page"]:hover { background: var(--bg); color: var(--accent); border-bottom-color: var(--red); }
/* Nút "← Quay lại" ở góc trái hàng tab (chủ xưởng yêu cầu): viền trắng bo tròn cho khác các tab; luôn nằm yên ở mép trái kể cả khi hàng tab phải cuộn ngang trên điện thoại. */
nav button.lui { position: sticky; left: 0; z-index: 1; flex: none; align-self: center; margin: 4px 8px 6px 0; padding: 4px 14px; border: 1px solid rgb(255 255 255 / .75); border-radius: 999px; background: var(--hdr); }
nav button.lui:hover { background: var(--accent); }
nav button.lui:disabled, nav button.lui:disabled:hover { opacity: .45; cursor: default; background: var(--hdr); }
.menu { position: absolute; top: 100%; width: 240px; max-width: calc(100% - 16px); z-index: 6; display: flex; flex-direction: column; padding: 6px 0;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.menu button { background: none; border: 0; text-align: left; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.menu button:hover, .menu button[aria-current="page"] { background: var(--soft); }
@media (max-width: 820px) { .dau-tin { order: 3; flex-basis: 100%; justify-content: flex-start; } }
@media print { header { display: none; } }

/* Bóng nước trang trí (chủ xưởng chốt: 5 quả to, mờ 0,08, kiểu bong bóng xà phòng). Nằm trên nội dung, dưới thanh công cụ, không bắt chuột. */
.bong { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.bong i { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; opacity: .08; will-change: transform;
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .95) 0 5%, rgb(255 255 255 / .35) 13%, rgb(var(--mau) / .08) 46%, rgb(var(--mau) / .22) 74%, rgb(var(--mau) / .05) 100%);
  box-shadow: inset 0 0 28px rgb(255 255 255 / .6), inset -14px -18px 34px rgb(var(--mau) / .16), 0 0 0 1px rgb(var(--mau) / .14);
  animation: bong-tho var(--tho, 5s) ease-in-out infinite alternate; transition: filter .45s; }
.bong i::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(255 0 128 / .6), rgb(255 200 0 / .55), rgb(0 220 140 / .55), rgb(0 160 255 / .6), rgb(170 80 255 / .55), rgb(255 0 128 / .6));
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 69%, #000 100%); mask: radial-gradient(circle, transparent 60%, #000 69%, #000 100%); animation: bong-xoay var(--xoay, 14s) linear infinite; }
.bong i::after { content: ''; position: absolute; left: 16%; top: 11%; width: 32%; height: 17%; border-radius: 50%; background: radial-gradient(ellipse, rgb(255 255 255 / .95), transparent 70%); transform: rotate(-28deg); }
.bong i.cham { filter: brightness(1.3) saturate(1.9); transition: filter .05s; }
@keyframes bong-tho { from { scale: 1 1; } to { scale: 1.05 .96; } }
@keyframes bong-xoay { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .bong i, .bong i::before { animation: none; } }
@media print { .bong { display: none; } }

/* Logo xưởng trên thanh tiêu đề (tải lên ở Cài đặt → Thông tin công ty): nền trắng bo góc để logo màu nào cũng nổi trên nền xanh. */
.logo-dau { height: 36px; width: auto; max-width: 150px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
.cham-muc { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 5px; border-radius: 9px; background: #fff; }
.cham-muc i { width: 9px; height: 9px; border-radius: 50%; }
.cham-muc i:nth-child(1) { background: var(--c); } .cham-muc i:nth-child(2) { background: var(--m); }
.cham-muc i:nth-child(3) { background: var(--y); } .cham-muc i:nth-child(4) { background: #16181d; }

.giua { max-width: 460px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 16px; }
.the { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: grid; gap: 12px; }
h1 { font-size: 20px; margin: 0; }
p { margin: 0; }
.mo { color: var(--muted); font-size: 13px; }
label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
input { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; font-weight: 400; }
.nut { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 11px 16px; font-weight: 600; cursor: pointer; }
.nut:disabled { opacity: .55; cursor: wait; }
.nut.phu { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
/* Nút đang chờ bấm lần hai để ghi một việc không sửa lại được (ví dụ khách nạp tiền trả trước). */
.nut.nguy-nen { background: var(--red); }
.loi { color: var(--red); font-weight: 600; min-height: 1.5em; }
.ok { color: var(--accent); font-weight: 600; }
.hang { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.hang span:first-child { color: var(--muted); }
.pill { display: inline-block; background: var(--soft); border-radius: 999px; padding: 1px 10px; font-size: 13px; }

/* ───────── Trang Cài đặt: rộng hơn trang đăng nhập, có bảng và thanh "Lưu thay đổi" dính ở cuối màn hình ───────── */
:root { --ok: #0b6e47; --ok-bg: #dff3e8; --vang: #7a5200; --vang-bg: #fdecb8; --do: #a8231c; --do-bg: #fcdcd8; }
select { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; font-weight: 400; }
input[type=checkbox] { width: 18px; height: 18px; padding: 0; accent-color: var(--accent); cursor: pointer; }
h2 { font-size: 16px; margin: 0; }
code { font: 600 15px ui-monospace, Consolas, monospace; background: var(--bg); border-radius: 6px; padding: 2px 8px; user-select: all; }
.giua.rong { max-width: 1680px; display: block; }
.trang, .khoi, .sp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.khoi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.sp { border-top: 1px solid var(--line); padding-top: 12px; gap: 8px; }
.nhan { font-size: 13px; font-weight: 600; }
.luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.day { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bang-o { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: break-word; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
.can-giua { text-align: center; }
td select { width: auto; min-width: 110px; padding: 6px 8px; }
td input[type=date] { width: auto; padding: 6px 8px; }
/* Bảng danh mục trong Cài đặt: ô tên rộng theo chỗ còn lại; dòng mới thêm (chưa lưu) có vạch xanh bên trái. */
.bang-dm td:first-child input[type=text] { width: 100%; min-width: 180px; }
.bang-dm tr.doi td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cty-o { display: grid; gap: 10px; }
.logo-xem { max-height: 90px; max-width: 260px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
td input[type=text] { width: auto; min-width: 210px; padding: 6px 8px; }
td input[type=number] { width: 72px; padding: 6px 8px; }
td .chip, td .pill { white-space: nowrap; }
#tk-bang td:first-child { min-width: 130px; }
tr.nhom td { background: var(--soft); font-weight: 700; color: var(--accent); }
tr.doi td { background: #fff8e0; }
.chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.vang { background: var(--vang-bg); color: var(--vang); }
.pill.do { background: var(--do-bg); color: var(--do); }
.hop-mk { border: 2px solid var(--vang); }
.duoi { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.thanh-luu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; box-shadow: 0 -2px 12px rgb(0 0 0 / .1); }
.thanh-luu span { margin-right: auto; font-weight: 600; color: var(--muted); }
.thanh-luu.sua { border-color: var(--red); }
.thanh-luu.sua span { color: var(--red); }
.thanh-luu .nut:disabled { cursor: default; }
/* ───────── Đơn hàng (theo bản demo): ô đếm, bộ lọc, bảng đơn, chi tiết, form tạo đơn ───────── */
:root { --tim: #4338a8; --tim-bg: #e3e0fa; --note: #fff6d1; }
textarea { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0; resize: vertical; font-weight: 400; }
input:disabled, input[readonly] { background: var(--bg); }
.pill.tim { background: var(--tim-bg); color: var(--tim); }
.chip.nguy { color: var(--red); border-color: var(--red); }
.chip:disabled { opacity: .5; cursor: default; }
.nhan-do { color: var(--do); } .nhan-xanh { color: var(--ok); }
.tong { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tong div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.tong b { display: block; font-size: 22px; line-height: 1.2; }
.tong span { font-size: 13px; color: var(--muted); }
.loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.loc select, .loc input[type=date] { width: auto; flex: 0 1 auto; }
.loc input[type=search] { flex: 1 1 200px; width: auto; }
.dau-ds, .dau-sp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.dau-sp { border-top: 1px solid var(--line); padding-top: 12px; }
td.so, th.so { text-align: right; white-space: nowrap; }
.bang-don td { vertical-align: top; }
tr.huy td { opacity: .55; }
/* Đơn đã hủy: chữ mờ đi, nhưng các nút thao tác (Chi tiết, In, Xóa đơn…) vẫn rõ để bấm; chỉ 4 ô tích đã khóa là mờ. */
tr.huy td.thao-tac { opacity: 1; }
tr.huy td.thao-tac .tich { opacity: .55; }
.bang-don td.thao-tac { min-width: 230px; }
.tich { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.tich label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; }
.tich input[type=checkbox] { width: 15px; height: 15px; }
tr.ghi-chu .day { gap: 8px; }
tr.ghi-chu input[type=text] { flex: 1 1 220px; }
tr.ghi-chu td { background: var(--note); }
.hai { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
/* Hộp chọn trạng thái đơn */
.hop-nen { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .45); display: grid; place-items: center; padding: 16px; }
.hop { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 20px; width: min(420px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 10px; box-shadow: 0 12px 40px rgb(0 0 0 / .3); }
.hop h2 { font-size: 18px; }
.hop-ds { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.hop-ds button { all: unset; box-sizing: border-box; padding: 9px 12px; cursor: pointer; font: inherit; }
.hop-ds button + button { border-top: 1px solid var(--line); }
.hop-ds button:hover { background: var(--soft); }
.hop-ds button.chon { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.hop-ds button.chon .mo { color: inherit; }
.hop-ds button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hop .loi:empty { display: none; }
/* Khung nhắc màu vàng (lời cảnh báo trong hộp Xóa đơn, dòng nhắc đang xem mục "Đơn đã xóa") và ô tích xác nhận một dòng. */
.ghi-nho { margin: 0; background: var(--note); border: 1px solid var(--vang-bg); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.tich-1 { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tich-1 input { width: 18px; height: 18px; flex: none; }
.bang-don td.thao-tac p.mo { margin: 6px 0 0; }
/* Hộp "Chi tiết đơn hàng" theo ảnh mẫu web tham khảo: tiêu đề + nút Đóng, mỗi thông tin một ô viền bo tròn (nhãn nhỏ mờ, giá trị đậm), rồi bảng sản phẩm. */
.hop.ct { width: min(900px, 100%); gap: 12px; }
.ct-dau { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ct-dau h2 b { color: var(--red); }
.ct-dau h2 > span { color: var(--accent); }
.ct-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ct-luoi.bon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ct-o { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.ct-o.ca { grid-column: 1 / -1; }
.ct-o span { display: block; font-size: 13px; color: var(--muted); }
.ct-o b { overflow-wrap: anywhere; }
.ct-sp th { background: var(--bg); }
.ct-sp td b { color: var(--red); }
@media (max-width: 560px) { .ct-luoi, .ct-luoi.bon { grid-template-columns: 1fr 1fr; } }
.dong { display: flex; justify-content: space-between; gap: 16px; }
.dong.dam { font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px; }
.sp:first-of-type { border-top: 0; padding-top: 0; }
.sp-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.buoc-ds { display: flex; flex-wrap: wrap; gap: 8px; }
.buoc { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 12px; min-width: 96px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.buoc:disabled { cursor: default; }
.buoc:disabled:not(.x) { opacity: .55; }
.buoc small { display: block; color: var(--muted); font-size: 11px; }
.buoc.x { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.buoc.x small { color: var(--ok); }
.buoc.toi { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Thẻ sản phẩm trong form: thông tin chính ở trên, gia công là hàng nút nhỏ ở dưới, quy cách một dòng. */
.sp-the { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.sp-the .sp-dau { color: var(--accent); }
.sp-chinh { display: grid; grid-template-columns: minmax(170px, 2.2fr) minmax(110px, 1.2fr) minmax(76px, .8fr) minmax(86px, .9fr) minmax(110px, 1.2fr) minmax(110px, 1fr); gap: 10px; align-items: end; }
.sp-the label, .sp-the .nhan { font-size: 12px; color: var(--muted); }
.o-tt { display: grid; gap: 4px; min-width: 0; }
.o-tt .nhan { color: var(--accent); font-weight: 700; }
/* Thành tiền của từng sản phẩm: đóng khung nền xanh nhạt, chữ đậm, để không bị lẫn mất ở mép phải. */
.tt { display: block; font-size: 16px; text-align: right; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--soft); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.gc-dau { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gc-nhom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.gc-ten { font-size: 12px; color: var(--muted); margin-right: 1px; }
.sp-the label.gc-chip { display: inline-flex; cursor: pointer; position: relative; }
.gc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gc-chip span { font-size: 12.5px; line-height: 1.3; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 400; }
.gc-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.gc-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.gc-chip:hover span { border-color: var(--accent); }
/* Ô nhập nằm trong nhãn không ăn theo cỡ chữ, màu chữ của nhãn. */
label input, label select, label textarea { font-size: 15px; color: var(--ink); }
.sp-the label.qc { display: flex; align-items: center; gap: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sp-the .qc textarea { flex: 1 1 auto; min-height: 36px; padding-block: 6px; text-transform: none; letter-spacing: 0; }
.luoi.tren { align-items: start; }
.them { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 14px; }
.them summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: 14px; }
.them[open] summary { margin-bottom: 10px; }
.them .luoi + .luoi { margin-top: 10px; }
.p-tong { align-self: flex-end; width: min(420px, 100%); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 820px) { .sp-chinh { grid-template-columns: 1fr 1fr; } .sp-chinh > label:first-child { grid-column: 1 / -1; } .sp-the label.qc { flex-direction: column; align-items: stretch; gap: 4px; } }

/* ───────── Phiếu in (đơn hàng…): tờ giấy trắng mực đen, đúng khổ A4 dọc 210 × 297 mm, lề 12 mm ───────── */
.phieu { background: #fff; color: #16181d; border: 1px solid #b9c0ca; width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; padding: 12mm; box-shadow: 0 2px 12px rgb(0 0 0 / .12); display: flex; flex-direction: column; gap: 16px; font-size: 14px; position: relative; z-index: 3; }
.p-dau2 { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.p-dau2 img { height: 68px; width: auto; }
.p-cty2 { text-align: right; font-size: 13px; line-height: 1.45; min-width: 0; }
.p-so { text-align: center; font-weight: 700; font-size: 15px; }
.p-so span { font-weight: 400; font-size: 13px; }
.p-luuy { border: 2px solid #16181d; padding: 6px 10px; font-weight: 700; text-align: center; }
.p-ten-khoi { font-weight: 700; margin-bottom: 4px; }
.phieu .p-bang tr.p-dam td { font-weight: 700; }
.phieu .p-bang td.p-o-ky { min-width: 90px; height: 30px; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.phieu .p-bang { font-size: 14px; }
.phieu .p-bang th, .phieu .p-bang td { border: 1px solid #16181d; padding: 5px 7px; color: #16181d; }
.phieu .p-bang th { text-align: center; font-size: 13px; font-weight: 700; }
.p-qc { font-size: 12px; }
.p-2khoi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; line-height: 1.6; }
.p-2khoi hr { border: 0; border-top: 1px solid #16181d; margin: 6px 0; }
.p-ky2 { display: flex; justify-content: space-around; gap: 16px; text-align: center; padding-block: 8px 96px; }
@media (max-width: 820px) { .phieu { padding: 16px; min-height: 0; } }
/* Điện thoại: bảng nhiều cột (đơn hàng, lệnh sản xuất) rộng hơn màn hình thì cuộn ngang BÊN TRONG tờ phiếu, không kéo cả trang. Chỉ áp cho màn hình, bản in không đổi. */
@media screen and (max-width: 820px) { .phieu { overflow-x: auto; } }
/* In thẳng ra máy in: chỉ in tờ phiếu, mỗi phiếu bắt đầu ở một trang mới; ẩn thanh công cụ, nút bấm, bóng nước. */
@page { size: A4 portrait; margin: 0; }
@media print {
  header, .loc, .bong, #hop-viec, #bao { display: none !important; }
  html, body { background: #fff; }
  .giua, .giua.rong { max-width: none; padding: 0; margin: 0; }
  .trang { gap: 0; }
  .phieu { width: 210mm; max-width: none; min-height: 0; margin: 0; padding: 12mm; border: 0; box-shadow: none; break-after: page; }
  .phieu:last-child { break-after: auto; }
  .phieu .p-bang tr { break-inside: avoid; }
}

/* ───────── Chấm công và lương (theo bản demo): bảng chấm công mỗi ngày một ô bấm, bảng mức lương, bảng lương ───────── */
.bang-cc { table-layout: fixed; }
.bang-cc th, .bang-cc td { padding: 3px 1px; text-align: center; font-size: 12px; }
.bang-cc th:first-child { width: 132px; text-align: left; } .bang-cc th:last-child { width: 46px; }
.bang-cc td.ten-nv { text-align: left; font-size: 13px; padding-right: 6px; }
.bang-cc .cn { background: var(--soft); }
.cc { width: 100%; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: inherit; font: 700 12px/1 inherit; cursor: pointer; }
.cc.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.cc.vang { background: var(--vang-bg); color: var(--vang); border-color: transparent; }
.cc.tim { background: var(--tim-bg); color: var(--tim); border-color: transparent; }
.cc.do { background: var(--do-bg); color: var(--do); border-color: transparent; }
.cc.phep, .pill.phep { background: var(--soft); color: var(--accent); border-color: transparent; }
.cc:disabled { opacity: .35; cursor: default; }
.bang-luong td { vertical-align: top; } .bang-luong .pill { white-space: normal; }
.bang-luong td input[type=text] { width: 124px; min-width: 0; }
.bang-luong td input[type=number] { width: 76px; }
.bang-luong td.bh { font-size: 13px; }
.bang-luong td .tich-1 { font-size: 13px; margin-bottom: 4px; }
.bang-luong tr.tong-dong td { background: var(--soft); }
.bang-luong tr.tong-dong.lon td { background: var(--accent); color: var(--accent-ink); font-size: 15px; }
#cc-thang { width: auto; }
/* Ô chấm công do nhân viên tự chấm: gạch xanh ở đáy. */
.cc.tu { box-shadow: inset 0 -3px 0 var(--accent); }
/* Chấm công của tôi: đồng hồ to ở giữa, hai nút to dễ bấm trên điện thoại. */
.tucc { max-width: 720px; margin-inline: auto; }
.dong-ho { display: grid; gap: 2px; text-align: center; }
.dong-ho b { font-size: 46px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--accent); }
.tucc-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tucc-nut .nut { padding: 22px 10px; font-size: 18px; }
.tucc-nut .nut small { display: block; font-size: 13px; font-weight: 400; }
.tucc-nut .nut:disabled { opacity: .5; cursor: default; }
/* Bảng nhập tỷ lệ % bán hàng: mỗi sản phẩm một dòng, mỗi loại in một cột. */
.bang-tl th { text-align: left; } .bang-tl thead tr:first-child th { border-bottom: 0; }
.bang-tl td { white-space: nowrap; } .bang-tl td:first-child { white-space: normal; min-width: 150px; font-weight: 600; }
.bang-tl td input[type=number] { width: 68px; }
@media (max-width: 820px) { .bang-cc { min-width: 980px; } }

#bao { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-weight: 600; min-height: 0; box-shadow: 0 -2px 12px rgb(0 0 0 / .1); }
#bao:empty { display: none; }
#bao.loi { border-color: var(--red); }

/* Chứng từ hợp đồng: văn bản hành chính, chữ có chân */
/* Lề theo thể thức văn bản: trên 25 mm, dưới 25 mm, trái 30 mm, phải 20 mm */
.phieu.ct { font-family: 'Times New Roman', Times, serif; font-size: 15px; --le-doc: 25mm; --dan: 1.4; line-height: var(--dan); padding: var(--le-doc) 20mm var(--le-doc) 30mm; page: chungtu; display: block; }
/* Chủ xưởng chốt: toàn bộ chữ trong chứng từ dãn dòng 1,4 (kể cả bảng, tiêu đề, phần ký). */
.phieu.ct :is(p, h3, table, th, td, div) { line-height: var(--dan); }
@page chungtu { size: A4 portrait; margin: 25mm 20mm 25mm 30mm; }
/* Riêng hợp đồng có số trang ở giữa chân trang (chỉ hiện khi in). */
.phieu.ct[data-ctu-loai="hd"] { page: hopdong; --le-doc: 20mm; --dan: 1.3; }
/* Biên bản thanh lý: lề trên dưới 15 mm, dãn dòng 1,25 để gọn trong một trang (chủ xưởng yêu cầu). */
.phieu.ct[data-ctu-loai="tl"] { page: thanhly; --le-doc: 15mm; --dan: 1.25; }
@page thanhly { size: A4 portrait; margin: 15mm 20mm 15mm 30mm; }
@page hopdong { size: A4 portrait; margin: 20mm 20mm 20mm 30mm; @bottom-center { content: counter(page); font-family: 'Times New Roman', Times, serif; font-size: 13px; } }
@media (max-width: 820px) { .phieu.ct { padding: 16px; } }
/* Khi in, lề do trang giấy giữ (để trang 2, 3 của hợp đồng cũng đủ lề), nên tờ phiếu không cần đệm nữa. */
@media print { .phieu.ct { width: auto; padding: 0; } }
.phieu.ct p { margin: 6px 0; text-align: justify; }
.phieu.ct p.giua { text-align: center; }
.phieu.ct p.phai { text-align: right; }
.phieu.ct p.dieu { font-weight: 700; margin-top: 12px; }
/* Khi in: tên điều khoản đi cùng đoạn ngay sau nó, phần ký đi cùng đoạn văn cuối. */
.phieu.ct p.dieu, .phieu.ct h3, .phieu.ct p:has(+ .ct-ky) { break-after: avoid; }
/* Các dòng tổng tiền (thành tiền, VAT, tổng cộng, bằng chữ) đi liền với dòng hàng cuối, không bị tách sang trang sau. */
.phieu.ct .p-bang tr.tk { break-before: avoid; }
.phieu.ct h3 { text-align: center; font-size: 19px; margin: 14px 0 4px; color: #16181d; }
.phieu.ct .p-bang { margin: 8px 0; font-size: 14px; }
.ct-qh { text-align: center; }
.ct-2dau { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.ct-ky { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; margin-top: 22px; break-inside: avoid; }
/* Phần ký: mỗi dòng (ngày tháng, "ĐẠI DIỆN …", họ tên) nằm trọn trên một dòng, không tự xuống dòng. */
.ct-ky > div { white-space: nowrap; }
.ct-ky.mot { grid-template-columns: 1fr auto; }
/* Trang lập chứng từ: ô chọn đơn hàng có gợi ý, và dòng xem trước tiền cọc. */
.ctu-don { display: flex; gap: 8px; align-items: end; }
.ctu-don > label { flex: 1 1 auto; }
.ctu-don .nut { white-space: nowrap; }
/* Trong chứng từ, lớp "giua" là CĂN GIỮA chữ (theo bản demo) — không phải khung trang .giua của ứng dụng: bỏ khung, đệm, lưới của khung trang. */
.phieu.ct p.giua { max-width: none; padding: 0; margin: 6px 0; display: block; }
.phieu.ct .p-bang td.giua { max-width: none; display: table-cell; padding: 5px 7px; margin: 0; text-align: center; }
/* Danh sách đơn hàng: hai nút đỏ "Hủy đơn", "Xóa đơn" nhỏ hơn các nút thao tác khác (chủ xưởng yêu cầu), để ít bấm nhầm và đỡ nổi. */
.bang-don td.thao-tac .chip.nguy { font-size: 11px; padding: 3px 8px; }