/* Inter tự chứa (web chạy mất mạng): Inter dùng cho màn và bản in */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }
/* Phông tự chứa: thư mục fonts/ đặt cạnh kn.css */
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* kn.css · Kim Nhung V2 · một file, không framework, không bước build.
Bản R1 (08/11/2026): theo PROMPT_CLAUDE_DESIGN (tỷ lệ vàng, ngân sách màn hình, một khuôn); prompt thắng bản vẽ cũ.
Thứ tự: (1) token · (2) nền chung · (3) thành phần · (4) khung · (5) in · (6) trạng thái ép (chỉ để vẽ bảng).
Mọi màu chỉ viết qua biến ở (1).
Khung (Quy-tac-V3): code gắn data-tb="dt|ipad|mt" lên theo chonKhung()
(điện thoại: cạnh ngắn < 700 · iPad: pointer coarse và cạnh ngắn ≥ 700 · máy tính: có chuột);
Cài đặt › Khung giao diện ghi đè. Bảng vẽ gắn thẳng class .kn-dt / .kn-ipad / .kn-mt lên gốc khung. */
/* ===== (1) TOKEN ===== */
:root {
color-scheme: light;
/* ===== R1 · 08/11/2026 · Hệ thống thiết kế mới: Tối giản vận hành, mật độ cảm ứng, tỷ lệ vàng =====
90% màn là trắng và xám ấm nhạt; màu nhấn chỉ ở việc chính và trạng thái. Chữ trên nền màu ≥ 4,5:1. */
/* Nền, chữ, viền */
--kn-nen: #F5EFE3; /* nền trang */
--kn-mat: #FBF8F1; /* thẻ, bảng, ô */
--kn-nen-2: #EEE7D9; /* đầu cột, dòng nhóm, rê, nút phụ */
--kn-nen-3: #E8DECB; /* nhấn */
--kn-vien: #DDD3C1; /* kẻ dòng, viền thẻ */
--kn-vien-o: #8B8170; /* viền ô nhập, ô chọn: 3,6:1 */
--kn-vien-dam: #6F6556;
--kn-chu: #2B2723; /* 12,9:1 trên nền kem */
--kn-chu-2: #4A433C; /* 8,5:1 */
--kn-chu-3: #645A4E; /* 5,9:1 (gợi ý, chú thích) */
--kn-chu-tat: #9A9182;
/* Mực và vàng (nhấn duy nhất) */
--kn-muc: #2B2723;
--kn-muc-hover: #34302B;
--kn-muc-nhan: #1E1A16;
--kn-vang: #D6A230; /* vạch: nút Đi tiếp, dòng đang làm, vòng focus */
--kn-vang-dam: #9A6A0C;
--kn-vang-nen: #F7EDD0;
--kn-vang-vien: #EAD9AE;
--kn-vang-chu: #6A4100; /* chữ trên nền vàng nhạt: 7,6:1 */
--kn-vang-nen-hover: #F3E5C0;
--kn-vang-nen-nhan: #EDDCAE;
/* Trạng thái: nền · chữ · viền (chữ trên nền ≥ 4,5:1) */
--kn-xong-nen: #DDEBDD; --kn-xong-chu: #24502A; --kn-xong-vien: #C3DBC3;
--kn-cho-nen: #F7E6C8; --kn-cho-chu: #6A4100; --kn-cho-vien: #EBD3A6;
--kn-loi-nen: #F4E0DC; --kn-loi-chu: #8A2823; --kn-loi-vien: #E8C4BD;
--kn-tin-nen: #E2E8F1; --kn-tin-chu: #264A78; --kn-tin-vien: #C6D2E3;
--kn-nhap-nen: #EAE3D6; --kn-nhap-chu: #453F37; --kn-nhap-vien: #DDD3C1;
/* Màu nhận diện loại chứng từ: chỉ chấm 8px hoặc vạch 3px, không tô nền */
--kn-loai-bao-gia: #8E9046;
--kn-loai-phieu-giao: #716EAF;
--kn-loai-bang-ke: #A3628E;
--kn-loai-gia-ke: #8C62BE;
--kn-loai-hoa-don: #A88B55;
--kn-loai-thu-tien: #5E9C80;
/* Số kê: CHỈ ô Giá kê, SL kê, Tiền kê trong bảng kê, giá kê. Tiền ở mọi nơi khác: --kn-chu, đậm 600 */
--kn-ke: #5A2F8E;
--kn-ke-dam: #45216F;
--kn-ke-nen: #EEE6F6;
/* Nút theo vai trò (bộ giao diện Kim Nhung): chữ trên nền nhạt ≥ 5,4:1 */
--kn-nut-sua: #2C5A85; --kn-nut-sua-nen: #E4ECF3;
--kn-nut-in: #46606C; --kn-nut-in-nen: #E5EAEB;
--kn-nut-chia-se: #1C625D; --kn-nut-chia-se-nen: #DEEBE8;
--kn-nut-them: #56504A; --kn-nut-them-nen: #ECE5D9;
--kn-nut-lui: #93571C; --kn-nut-lui-nen: #F4E5D5;
--kn-nut-xoa: #A12F29; --kn-nut-xoa-nen: #F7E2DE;
--kn-nut-hoan-tac: #A9D39E; /* trên nền tối của toast */
--kn-di-tiep: #EDBC3A; --kn-di-tiep-nhan: #D9A82C; /* vàng đặc, chữ than 8,4:1 */
--kn-dang: #2B2723; --kn-nen-dang: #E8DECB; /* chỗ đang đứng: dòng, mục menu, chip đang mở */
--kn-nen-dao: #34302B; --kn-chu-dao: #F3EDE3; /* toast */
--kn-vong: #2B2723; /* vòng focus */
/* Nền nhạt, chữ của màu chứng từ (chip loại, ô biểu tượng menu) */
--kn-loai-bao-gia-nen: #ECEBD5; --kn-loai-bao-gia-chu: #4C4E1F;
--kn-loai-phieu-giao-nen: #E7E6F3; --kn-loai-phieu-giao-chu: #3B3876;
--kn-loai-bang-ke-nen: #F2E4ED; --kn-loai-bang-ke-chu: #673155;
--kn-loai-gia-ke-nen: #EEE6F6; --kn-loai-gia-ke-chu: #5A2F8E;
--kn-loai-hoa-don-nen: #F1E9D6; --kn-loai-hoa-don-chu: #5B4620;
--kn-loai-thu-tien-nen: #E0EEE7; --kn-loai-thu-tien-chu: #28543F;
--kn-trang: #FBF8F1; /* chữ trên nền than */
--kn-trang-mo: rgba(255,255,255,.72);
--kn-quang: rgba(43,39,35,.16);
--kn-quang-loi: rgba(138,40,35,.16);
/* Bóng: chỉ popup, ngăn kéo, toast. Bảng và trang không bóng */
--kn-bong-1: none;
--kn-bong-2: 0 8px 24px rgba(30,26,21,.16), 0 2px 6px rgba(30,26,21,.08);
--kn-bong-3: 0 -8px 32px rgba(30,26,21,.18);
--kn-man-che: rgba(43,39,35,.40);
--kn-in-den: #000000;
--kn-in-trang: #FFFFFF;
/* Chữ: IBM Plex Sans tự chứa; mã hàng, số chứng từ: IBM Plex Mono */
--kn-font: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
--kn-font-ma: "IBM Plex Mono", ui-monospace, Consolas, monospace;
--kn-tl: 1;
--kn-tl-cot: calc(.4 + .6 * var(--kn-tl));
/* Nhịp khoảng cách theo dãy φ, làm tròn 4: 4 · 8 · 12 · 20 · 32 · 52 */
--kn-p1: 4px; --kn-p2: 8px; --kn-p3: 12px; --kn-p4: 20px; --kn-p5: 32px; --kn-p6: 52px;
/* tên cũ giữ để mã cũ chạy, trỏ vào nhịp mới */
--kn-k-1: 4px; --kn-k-2: 8px; --kn-k-3: 12px; --kn-k-4: 12px; --kn-k-5: 20px;
--kn-k-6: 20px; --kn-k-8: 32px; --kn-k-10: 32px; --kn-k-12: 52px;
/* Bo góc: chip 6 · ô và nút 10 · thẻ và popup 14 · ngăn kéo, hộp thoại 20 · huy hiệu tròn */
--kn-bo-6: 6px; --kn-bo-10: 10px; --kn-bo-14: 14px; --kn-bo-20: 20px; --kn-bo-tron: 999px; /* 09/11: tên = số px thật (trước bo-8 là 10px, bo-12 là 14px, bo-16 là 20px) */
/* Chuyển động: popup 150ms, ngăn kéo 300ms */
--kn-tg-nhan: 100ms; --kn-tg-hover: 150ms; --kn-tg-vao: 150ms; --kn-tg-ra: 150ms; --kn-tg-ngan: 300ms;
--kn-z-dinh: 10; --kn-z-thanh: 20; --kn-z-chon: 30; --kn-z-menu: 40;
--kn-z-hop: 50; --kn-z-thong-bao: 60; --kn-z-mat-mang: 70;
/* Khung cố định (ngân sách màn hình) */
--kn-cao-tren: 56px; /* thanh trên một hàng, chứa luôn chip đang mở */
--kn-cao-chan-man: 64px; /* chân màn: tổng trái, nút phải */
--kn-cao-duoi: 64px; /* thanh dưới iD, DT (chưa tính vùng an toàn) */
--kn-rong-trai: 240px; /* thanh bên MT */
--kn-rong-ray: 72px; /* thanh bên thu gọn iN */
/* Mật độ Rộng (cảm ứng) mặc định */
--kn-cao-nut: 48px; --kn-cao-chan: 48px; --kn-cao-o: 48px;
--kn-cao-dong: 48px; --kn-cao-dong-2: 64px; --kn-cao-dong-ds: 56px; --kn-cao-o-bang: 48px;
--kn-cao-tieu-de-cot: 44px; --kn-co-than: var(--kn-c3); --kn-dong-than: var(--kn-d3);
--kn-dem-nut: 20px; --kn-co-hinh-thanh: 24px; --kn-le: 20px;
/* Thang chữ √φ ≈ 1,272, gốc 16: 13 · 16 · 20 · 26 · 32 (c2 = c3 = chữ thân) */
--kn-c1: calc(14px * var(--kn-tl)); --kn-d1: calc(20px * var(--kn-tl));
--kn-c2: calc(16px * var(--kn-tl)); --kn-d2: calc(24px * var(--kn-tl));
--kn-c3: calc(16px * var(--kn-tl)); --kn-d3: calc(24px * var(--kn-tl));
--kn-c4: calc(20px * var(--kn-tl)); --kn-d4: calc(28px * var(--kn-tl));
--kn-c5: calc(26px * var(--kn-tl)); --kn-d5: calc(32px * var(--kn-tl));
--kn-c6: calc(32px * var(--kn-tl)); --kn-d6: calc(40px * var(--kn-tl));
--kn-co-o: 16px; /* chữ ô nhập luôn 16 để iPad không tự phóng to; nhân cỡ chữ nhưng không dưới 16 */
}
/* Cài đặt › Cỡ chữ (lưu theo máy). Mặc định: iPad Lớn, điện thoại và máy tính Vừa */
[data-co="vua"] { --kn-tl: 1; --kn-tl-cot: 1; }
[data-co="lon"] { --kn-tl: 1.125; --kn-tl-cot: 1.075; }
[data-co="rat-lon"] { --kn-tl: 1.25; --kn-tl-cot: 1.15; }
/* Bốn khung: .kn-dt (390) · .kn-ipad + .khung--in (1180 ngang) / .khung--id (820 dọc) · .kn-mt (1440) */
.kn-dt, [data-tb="dt"],
.kn-ipad, [data-tb="ipad"] {
--kn-cao-nut: 48px; --kn-cao-chan: 48px; --kn-cao-o: 48px;
--kn-cao-dong: 48px; --kn-cao-dong-2: 64px; --kn-cao-dong-ds: 56px; --kn-cao-o-bang: 48px;
--kn-cao-tieu-de-cot: 44px; --kn-co-than: var(--kn-c3); --kn-dong-than: var(--kn-d3); --kn-dem-nut: 20px;
--kn-co-hinh-thanh: 24px; --kn-le: 20px;
--kn-c1: calc(14px * var(--kn-tl)); --kn-d1: calc(20px * var(--kn-tl));
--kn-c2: calc(16px * var(--kn-tl)); --kn-d2: calc(24px * var(--kn-tl));
--kn-c3: calc(16px * var(--kn-tl)); --kn-d3: calc(24px * var(--kn-tl));
--kn-c4: calc(20px * var(--kn-tl)); --kn-d4: calc(28px * var(--kn-tl));
--kn-c5: calc(26px * var(--kn-tl)); --kn-d5: calc(32px * var(--kn-tl));
--kn-c6: calc(32px * var(--kn-tl)); --kn-d6: calc(40px * var(--kn-tl));
--kn-co-o: max(16px, calc(16px * var(--kn-tl)));
}
.kn-dt, [data-tb="dt"] { --kn-le: 12px; --kn-cao-dong-ds: 56px; }
/* Máy tính: hạ ô, nút xuống 40, dòng bảng 44–48; thang gốc 15: 12 · 15 · 19 · 24 · 30 */
.kn-mt, [data-tb="mt"] {
--kn-cao-nut: 40px; --kn-cao-chan: 40px; --kn-cao-o: 40px;
--kn-cao-dong: 40px; --kn-cao-dong-2: 52px; --kn-cao-dong-ds: 48px; --kn-cao-o-bang: 40px;
--kn-cao-tieu-de-cot: 40px; --kn-co-than: var(--kn-c3); --kn-dong-than: var(--kn-d3); --kn-dem-nut: 16px;
--kn-co-hinh-thanh: 20px; --kn-le: 20px;
--kn-c1: calc(13px * var(--kn-tl)); --kn-d1: calc(19px * var(--kn-tl));
--kn-c2: calc(15px * var(--kn-tl)); --kn-d2: calc(22px * var(--kn-tl));
--kn-c3: calc(15px * var(--kn-tl)); --kn-d3: calc(22px * var(--kn-tl));
--kn-c4: calc(19px * var(--kn-tl)); --kn-d4: calc(28px * var(--kn-tl));
--kn-c5: calc(24px * var(--kn-tl)); --kn-d5: calc(32px * var(--kn-tl));
--kn-c6: calc(30px * var(--kn-tl)); --kn-d6: calc(38px * var(--kn-tl));
--kn-co-o: 16px;
}
/* ===== (2) NỀN CHUNG ===== */
.kn, .kn *, .kn *::before, .kn *::after { box-sizing: border-box; }
.kn {
font-family: var(--kn-font);
font-size: var(--kn-co-than);
line-height: var(--kn-dong-than);
font-weight: 400;
color: var(--kn-chu);
background: var(--kn-nen);
font-variant-numeric: tabular-nums;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
:where(.kn) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(.kn) :where(ul, ol) { padding: 0; list-style: none; }
:where(.kn) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.kn) :focus { outline: none; }
:where(.kn) :focus-visible { outline: 2px solid var(--kn-vang-dam); outline-offset: 2px; }
.kn ::selection { background: var(--kn-vang-vien); color: var(--kn-chu); }
.kn [hidden] { display: none !important; }
.an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.so { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma { font-family: var(--kn-font-ma); font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.chu-do { color: var(--kn-loi-chu); }
.chu-xanh { color: var(--kn-xong-chu); }
.cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Bậc chữ */
.t-so-lon { font-size: var(--kn-c6); line-height: var(--kn-d6); font-weight: 600; }
.t-tieu-de-1 { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; }
.t-tieu-de-2 { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; }
.t-the-1 { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.t-the-2 { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.t-than { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 400; }
.t-than-dam { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.t-phu { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu-2); }
.t-nhan { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.t-chip { font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; }
.t-badge { font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; }
.t-goi-y { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-3); }
/* Biểu tượng: nét 2px, đầu tròn, khung 24, màu theo chữ */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic--14 { width: 14px; height: 14px; }
.ic--16 { width: 16px; height: 16px; }
.ic--24 { width: 24px; height: 24px; }
.ic--28 { width: 28px; height: 28px; }
.ic--40 { width: 40px; height: 40px; stroke-width: 1.5; }
/* Vòng quay */
.xoay { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kn-xoay .8s linear infinite; }
.xoay--nho { width: 12px; height: 12px; }
@keyframes kn-xoay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.kn *, .kn *::before, .kn *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
.kn .xoay { animation: kn-xoay 1.6s linear infinite !important; }
}
/* ===== (3) THÀNH PHẦN ===== */
/* --- 5.1 + 11.1 Nút --- */
.nut {
appearance: none; -webkit-appearance: none;
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: var(--kn-cao-nut); min-width: var(--kn-cao-nut);
padding: 0 var(--kn-dem-nut);
border: 1px solid transparent; border-radius: var(--kn-bo-10);
background: transparent; color: var(--kn-chu);
font-family: var(--kn-font); font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600;
white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--kn-tg-nhan), border-color var(--kn-tg-nhan), box-shadow var(--kn-tg-nhan), color var(--kn-tg-nhan);
}
.nut .ic { color: var(--kn-chu-2); }
/* Nhấn: nền đậm lên + viền ngoài, không co, không dịch */
.nut:active { box-shadow: 0 0 0 2px var(--kn-vien-dam); }
/* Nút chốt của màn: mực đặc, đúng một chỗ mỗi màn (chân màn, thanh chọn nhiều, Hộp In) */
.nut--chot { background: var(--kn-muc); color: var(--kn-trang); height: var(--kn-cao-chan); }
.nut--chot .ic { color: var(--kn-trang); }
.nut--chot:active { background: var(--kn-muc-nhan); }
/* Đi tiếp trên dòng và thẻ: nút nhạt */
.nut--di-tiep { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); color: var(--kn-chu); }
.nut--di-tiep .ic { color: var(--kn-chu); }
.nut--di-tiep:active { background: var(--kn-vang-nen-nhan); }
/* Tạo mới: nền trắng, viền 1,5px mực, dấu + vàng đậm */
.nut--tao-moi { background: var(--kn-mat); border: 1.5px solid var(--kn-muc); color: var(--kn-chu); }
.nut--tao-moi .ic { color: var(--kn-vang-dam); }
.nut--tao-moi:active { background: var(--kn-nen-3); }
/* Viền: Sửa · Xem · In · Chia sẻ · Thêm · Quay lại · Lưu */
.nut--vien { background: var(--kn-mat); border-color: var(--kn-vien-o); color: var(--kn-chu); font-size: var(--kn-c2); }
.nut--vien:active { background: var(--kn-nen-3); }
.nut--chan { height: var(--kn-cao-chan); min-width: var(--kn-cao-chan); font-size: var(--kn-c3); }
/* Lùi bước: Bỏ hóa đơn, Bỏ đánh dấu … */
.nut--lui { background: var(--kn-mat); border-color: var(--kn-loi-chu); color: var(--kn-loi-chu); font-size: var(--kn-c3); }
.nut--lui .ic { color: var(--kn-loi-chu); }
.nut--lui:active { background: var(--kn-loi-nen); }
/* Nút phụ: trên dòng, dải báo, thanh chọn nhiều, Hộp Chia sẻ (cao bằng vùng chạm của khung) */
.nut--phu { padding: 0 14px; background: var(--kn-mat); border-color: var(--kn-vien-o); color: var(--kn-chu); font-size: var(--kn-c2); }
.nut--phu:active { background: var(--kn-nen-3); }
/* Nút hình + chữ nhỏ (không có nút chỉ có hình): hình trên, chữ 12 dưới */
.nut--bieu-tuong { flex-direction: column; gap: 2px; padding: 4px 6px; min-width: var(--kn-cao-nut); color: var(--kn-chu-2); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; }
.nut--bieu-tuong .ic { width: var(--kn-co-hinh-thanh); height: var(--kn-co-hinh-thanh); }
.nut--bieu-tuong:active { background: var(--kn-nen-3); }
/* Ngoại lệ duy nhất (11.1): hàng bảng máy tính In · Chia sẻ · ⋯ chỉ hình, luôn hiện, có title + aria-label */
.nut--chi-hinh { width: 36px; min-width: 36px; height: 36px; padding: 0; color: var(--kn-chu-2); }
.nut--chi-hinh:active { background: var(--kn-nen-3); }
/* Dòng menu (muc_them) và Xóa (nhóm 6 menu ⋯) */
.nut--muc, .nut--xoa { width: 100%; height: var(--kn-cao-dong); justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: var(--kn-c3); font-weight: 400; }
.nut--muc > .cat, .nut--xoa > .cat { flex: 1; text-align: left; }
.nut--muc:active, .nut--xoa:active { box-shadow: none; background: var(--kn-nen-3); }
.nut--xoa { color: var(--kn-loi-chu); font-weight: 400; }
.nut--xoa .ic { color: var(--kn-loi-chu); }
/* Xóa dòng trong bảng soạn: chữ đỏ + hình, không viền; viền đỏ khi rê hoặc nhấn */
.nut--xoa-dong { color: var(--kn-loi-chu); font-size: var(--kn-c2); font-weight: 400; padding: 0 10px; }
.nut--xoa-dong .ic { color: var(--kn-loi-chu); }
.nut--xoa-dong:active { border-color: var(--kn-loi-chu); box-shadow: none; background: var(--kn-loi-nen); }
/* Nút chữ: Thử lại · Bỏ lọc · Xem hết · Chọn hết · Xóa chữ tìm */
.nut--chu { height: auto; min-width: 0; min-height: var(--kn-cao-nut); padding: 0 8px; font-size: var(--kn-c2); color: var(--kn-chu); text-decoration: underline; text-decoration-color: var(--kn-vien-dam); text-underline-offset: 3px; }
.nut--rong-het { width: 100%; }
@media (hover: hover) {
.nut--chot:hover { background: var(--kn-muc-hover); }
.nut--di-tiep:hover { background: var(--kn-vang-nen-hover); }
.nut--tao-moi:hover, .nut--vien:hover, .nut--phu:hover { background: var(--kn-nen-2); }
.nut--vien:hover, .nut--phu:hover { border-color: var(--kn-vien-dam); }
.nut--lui:hover { background: var(--kn-loi-nen); }
.nut--bieu-tuong:hover, .nut--chi-hinh:hover, .nut--muc:hover, .nut--xoa:hover { background: var(--kn-nen-2); }
.nut--xoa-dong:hover { border-color: var(--kn-loi-chu); }
.nut--chu:hover { text-decoration-color: var(--kn-chu); }
}
/* Đang làm: chữ "Đang làm…" + vòng quay, khóa bấm đúp */
.nut[aria-busy="true"], .nut.dang-lam { pointer-events: none; }
.nut--tao-moi .xoay { color: var(--kn-vang-dam); }
.nut--vien .xoay, .nut--phu .xoay { color: var(--kn-chu-2); }
/* Xong: ✓ 1 giây rồi về như cũ */
.nut.xong .ic { color: var(--kn-xong-chu); }
.nut--chot.xong .ic { color: var(--kn-trang); }
/* Vô hiệu */
.nut:disabled, .nut.tat { cursor: default; pointer-events: none; box-shadow: none; color: var(--kn-chu-tat); background: var(--kn-nen-2); border-color: var(--kn-vien); }
.nut:disabled .ic, .nut.tat .ic { color: var(--kn-chu-tat); }
.nut--muc:disabled, .nut--xoa:disabled, .nut--bieu-tuong:disabled, .nut--chu:disabled, .nut--xoa-dong:disabled { background: transparent; border-color: transparent; }
/* Cần mạng: xám, viền đứt, chữ "Cần mạng" + sóng gạch. Không ẩn */
.nut.can-mang { pointer-events: none; box-shadow: none; background: var(--kn-nen-2); border: 1px dashed var(--kn-vien-o); color: var(--kn-chu-2); }
.nut.can-mang .ic { color: var(--kn-chu-2); }
/* --- 5.2 Ô nhập --- */
.o-nhap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.o-nhap__nhan { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.o-nhap__cham { width: 6px; height: 6px; border-radius: 50%; background: var(--kn-vang-dam); flex: none; }
.o-nhap__o { position: relative; display: flex; align-items: center; gap: 8px; height: var(--kn-cao-o); padding: 0 14px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); transition: border-color var(--kn-tg-hover), box-shadow var(--kn-tg-hover); }
.o-nhap__o input, .o-nhap__o textarea { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font-family: var(--kn-font); font-size: var(--kn-co-o); line-height: 24px; color: var(--kn-chu); }
.o-nhap__o input::placeholder, .o-nhap__o textarea::placeholder { color: var(--kn-chu-3); opacity: 1; }
.o-nhap__o:focus-within { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); }
@media (hover: hover) { .o-nhap__o:hover:not(:focus-within) { border-color: var(--kn-vien-dam); } }
.o-nhap__o .ic { color: var(--kn-chu-2); }
.o-nhap__don-vi { flex: none; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-3); }
.o-nhap__duoi { display: flex; align-items: flex-start; gap: 6px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-3); }
.o-nhap__duoi .ic { width: 16px; height: 16px; margin-top: 2px; }
.o-nhap__dem { flex: none; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-3); }
.o-nhap__xoa { min-height: 0; height: calc(var(--kn-cao-o) - 6px); margin-right: -10px; font-size: var(--kn-c2); }
.o-nhap__mat-khau { margin-right: -12px; height: calc(var(--kn-cao-o) - 4px); min-width: 0; }
.o-nhap--so input { text-align: right; }
.o-nhap--tim .o-nhap__o { padding-left: 12px; gap: 12px; }
.o-nhap--nhieu-dong .o-nhap__o { height: auto; min-height: 96px; align-items: flex-start; padding: 12px 14px; }
.o-nhap--nhieu-dong textarea { height: auto; min-height: 72px; resize: vertical; field-sizing: content; }
.o-nhap--loi .o-nhap__o { border-color: var(--kn-loi-chu); box-shadow: 0 0 0 3px var(--kn-quang-loi); }
.o-nhap--loi .o-nhap__duoi { color: var(--kn-loi-chu); }
.o-nhap--tat .o-nhap__o { background: var(--kn-nen-2); border-color: var(--kn-vien); }
.o-nhap--tat input, .o-nhap--tat .o-nhap__o { color: var(--kn-chu-tat); }
.o-nhap--chi-doc .o-nhap__o { background: var(--kn-nen); border-color: transparent; box-shadow: none; }
.phim { flex: none; display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-6); background: var(--kn-nen); color: var(--kn-chu-2); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; }
.tu-luu { font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
.tu-luu--dang { color: var(--kn-chu-3); }
.tu-luu--da { color: var(--kn-xong-chu); }
.tu-luu--chua { color: var(--kn-loi-chu); }
.tu-luu--chua .nut--chu { min-height: 0; padding: 0; font-size: var(--kn-c1); color: var(--kn-loi-chu); text-decoration-color: currentColor; }
.tu-luu--chua .nut--chu::after { content: ""; position: absolute; inset: -14px -8px; }
/* Ô sửa trong bảng soạn: cao --kn-cao-o-bang */
.o-bang { display: flex; align-items: center; height: var(--kn-cao-o-bang); padding: 0 10px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); background: var(--kn-mat); }
.o-bang input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; background: transparent; font-family: var(--kn-font); font-size: var(--kn-co-o); color: var(--kn-chu); }
.o-bang--so input { text-align: right; }
.o-bang--giua { padding: 0 4px; } .o-bang--giua input { text-align: center; } /* ĐVT, SL luôn canh giữa (anh Kevin 06/11) */
.o-bang:focus-within { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); }
.o-bang--loi { border-color: var(--kn-loi-chu); background: var(--kn-loi-nen); }
.kn-mt .o-bang { border-color: transparent; background: transparent; }
.kn-mt .o-bang input { text-decoration: underline dotted var(--kn-vien-dam); text-underline-offset: 4px; }
.kn-mt .o-bang--loi { border-color: var(--kn-loi-chu); background: var(--kn-loi-nen); }
@media (hover: hover) { .kn-mt .o-bang:hover:not(:focus-within) { border-color: var(--kn-vien-dam); background: var(--kn-mat); } }
.kn-mt .o-bang:focus-within { background: var(--kn-mat); }
.kn-mt .o-bang:focus-within input { text-decoration: none; }
/* --- 5.3 + 11.3 Ô chọn --- */
.o-chon { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.o-chon__o { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; height: var(--kn-cao-o); padding: 0 12px 0 14px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-co-o); line-height: 24px; color: var(--kn-chu); text-align: left; cursor: pointer; transition: border-color var(--kn-tg-hover), box-shadow var(--kn-tg-hover); }
.o-chon__gia-tri { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-chon__trong { color: var(--kn-chu-3); }
.o-chon__o .ic { color: var(--kn-chu-2); }
.o-chon__o[aria-expanded="true"] { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); }
.o-chon__o[aria-expanded="true"] .ic--mo { transform: rotate(180deg); }
@media (hover: hover) { .o-chon__o:hover:not([aria-expanded="true"]) { border-color: var(--kn-vien-dam); } }
.o-chon__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-chon--chi-doc .o-chon__o { background: var(--kn-nen); border-color: transparent; cursor: default; }
/* Bảng xổ (iPad, máy tính): lớp nổi của khung; rộng = ô, tối thiểu 360; cao 160–520; dưới không đủ 320 thì xổ lên */
.bang-chon { width: 100%; min-width: 360px; display: flex; flex-direction: column; max-height: 520px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); box-shadow: var(--kn-bong-2); padding: 4px; z-index: var(--kn-z-menu); overflow: hidden; }
.bang-chon--noi { position: absolute; left: 0; top: calc(100% + 6px); }
.bang-chon--len { top: auto; bottom: calc(100% + 6px); }
.bang-chon__tieu-de { padding: 8px 12px 4px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); flex: none; }
.bang-chon__tim { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--kn-vien); margin: -4px -4px 4px; background: var(--kn-mat); flex: none; }
.bang-chon__tieu-de + .bang-chon__tim { margin-top: 0; border-top: 1px solid var(--kn-vien); }
.bang-chon__tim .ic { color: var(--kn-chu-2); }
.bang-chon__tim input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--kn-font); font-size: var(--kn-co-o); color: var(--kn-chu); }
.bang-chon__tim input::placeholder { color: var(--kn-chu-3); opacity: 1; }
.bang-chon__ds { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.bang-chon__nhom { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 12px; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu-2); flex: none; }
.bang-chon__dong { appearance: none; -webkit-appearance: none; border: 0; background: transparent; width: 100%; display: flex; align-items: center; gap: 12px; flex: none; min-height: var(--kn-cao-dong-2); padding: 6px 12px; border-radius: var(--kn-bo-10); font-family: var(--kn-font); text-align: left; color: var(--kn-chu); cursor: pointer; }
.bang-chon__dong--mot { min-height: var(--kn-cao-dong); }
.bang-chon__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bang-chon__t1 { font-size: var(--kn-co-o); line-height: 24px; font-weight: 400; color: var(--kn-chu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bang-chon__t1 b { font-weight: 700; }
.bang-chon__t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bang-chon__ben { flex: none; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); text-align: right; }
.bang-chon__dau { width: 20px; height: 20px; flex: none; color: var(--kn-vang-dam); visibility: hidden; }
.bang-chon__dong.dang-to { background: var(--kn-nen-2); }
.bang-chon__dong.dang-to .bang-chon__t2, .bang-chon__dong.dang-to .bang-chon__ben, .bang-chon__dong.dang-to .bang-loc__dem { color: var(--kn-chu-2); } /* chu-3 trên nen-2 chỉ 4,40:1 */
@media (hover: hover) { .bang-chon__dong:hover { background: var(--kn-nen-2); } .bang-chon__dong:hover .bang-chon__t2 { color: var(--kn-chu-2); } }
.bang-chon__dong[aria-selected="true"] { background: var(--kn-vang-nen); }
.bang-chon__dong[aria-selected="true"] .bang-chon__t1 { font-weight: 600; }
.bang-chon__dong[aria-selected="true"] .bang-chon__t2 { color: var(--kn-chu-2); } /* chu-3 trên vang-nen chỉ 4,49:1 */
.bang-chon__dong[aria-selected="true"] .bang-chon__dau { visibility: visible; }
.bang-chon__dong[aria-disabled="true"] { cursor: default; background: transparent; }
.bang-chon__dong[aria-disabled="true"] .bang-chon__t1, .bang-chon__dong[aria-disabled="true"] .bang-chon__t2 { color: var(--kn-chu-tat); }
.bang-chon__hang-khac { appearance: none; border: 0; background: transparent; padding: 0; position: relative; font: inherit; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); text-decoration: underline dotted var(--kn-vien-dam); text-underline-offset: 3px; text-align: left; cursor: pointer; }
.bang-chon__chan { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 4px 4px 12px; margin: 4px -4px -4px; border-top: 1px solid var(--kn-vien); font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-3); flex: none; }
.bang-chon__rong { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 12px; font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu); }
.bang-chon__rong p { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.bang-chon__xuong { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; height: var(--kn-cao-dong-2); justify-content: center; flex: none; }
.bang-chon__chip { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 10px; margin-top: -4px; background: var(--kn-nen-2); border-radius: 0 0 var(--kn-bo-10) var(--kn-bo-10); flex: none; }
.bang-chon__dong.dang-to.co-chip { border-radius: var(--kn-bo-10) var(--kn-bo-10) 0 0; }
.bang-chon__viec { display: flex; gap: 8px; overflow-x: auto; padding: 8px; margin: 4px -4px -4px; border-top: 1px solid var(--kn-vien); scrollbar-width: none; flex: none; }
.bang-chon__viec .nut { flex: none; }
.bang-chon__dong--con { padding-left: 28px; }
.bang-chon__mo-nhom { appearance: none; border: 0; background: transparent; width: var(--kn-cao-nut); height: var(--kn-cao-nut); display: grid; place-items: center; color: var(--kn-chu-2); cursor: pointer; }
/* Segmented: khung = vùng chạm của khung, nút trong khung cách 3 */
.phan-doan { display: inline-flex; align-items: center; gap: 2px; height: var(--kn-cao-nut); padding: 3px; background: var(--kn-nen-2); border-radius: 10px; max-width: 100%; }
.phan-doan__nut { appearance: none; -webkit-appearance: none; position: relative; border: 0; background: transparent; height: 100%; padding: 0 16px; border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-co-than); line-height: 20px; font-weight: 400; color: var(--kn-chu-2); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--kn-tg-nhan), color var(--kn-tg-nhan); }
.phan-doan__nut::after { content: ""; position: absolute; inset: -3px -1px; }
.phan-doan__nut[aria-pressed="true"], .phan-doan__nut[aria-selected="true"] { background: var(--kn-mat); color: var(--kn-chu); font-weight: 600; box-shadow: var(--kn-bong-1); }
.phan-doan--rong { display: flex; width: 100%; }
.phan-doan--rong .phan-doan__nut { flex: 1; justify-content: center; }
/* Radio thẻ */
.radio-the { display: flex; flex-direction: column; gap: 8px; }
.radio-the__dong { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-14); font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu); cursor: pointer; }
.radio-the__dong:has(input:checked), .radio-the__dong.dang-chon { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); font-weight: 600; }
/* Hàng chip cuộn ngang */
.hang-chip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.hang-chip::-webkit-scrollbar { display: none; }
.chip-chon { appearance: none; -webkit-appearance: none; flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--kn-cao-nut); padding: 0 14px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c2); font-weight: 400; color: var(--kn-chu); white-space: nowrap; cursor: pointer; }
.chip-chon[aria-pressed="true"] { background: var(--kn-muc); border-color: var(--kn-muc); color: var(--kn-trang); font-weight: 600; }
/* Tháng 4 × 3 · Ngày lịch tháng */
.chon-thang { width: 320px; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chon-thang__nam { display: flex; align-items: center; justify-content: space-between; font-size: var(--kn-c3); font-weight: 600; }
.chon-thang__luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.chon-thang__o { appearance: none; border: 0; background: transparent; height: 56px; border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c2); color: var(--kn-chu); cursor: pointer; }
.chon-thang__o[aria-selected="true"] { background: var(--kn-muc); color: var(--kn-trang); font-weight: 600; }
.chon-thang__o.hom-nay { box-shadow: inset 0 0 0 1px var(--kn-vang-dam); }
.chon-ngay { width: 380px; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chon-ngay__luoi { display: grid; grid-template-columns: repeat(7, var(--kn-cao-nut)); gap: 2px; justify-content: space-between; }
.chon-ngay__thu { min-height: 28px; display: grid; place-items: center; font-size: var(--kn-c1); font-weight: 600; color: var(--kn-chu-3); }
.chon-ngay__o { appearance: none; border: 0; background: transparent; width: var(--kn-cao-nut); height: var(--kn-cao-nut); border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c2); color: var(--kn-chu); cursor: pointer; }
.chon-ngay__o--ngoai { color: var(--kn-chu-tat); }
.chon-ngay__o.hom-nay { box-shadow: inset 0 0 0 1px var(--kn-vang-dam); font-weight: 600; }
.chon-ngay__o[aria-selected="true"] { background: var(--kn-muc); color: var(--kn-trang); font-weight: 600; }
.chon-ngay__nhanh { display: flex; gap: 8px; }
/* Kiểu C: Lọc nhiều mặt */
.loc { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 8px; height: var(--kn-cao-nut); padding: 0 12px; background: var(--kn-mat); border: 1px dashed var(--kn-vien-dam); border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c2); font-weight: 400; color: var(--kn-chu); white-space: nowrap; cursor: pointer; }
.loc .ic { color: var(--kn-chu-2); }
.loc__ke { width: 1px; align-self: stretch; margin: 10px 2px; background: var(--kn-vien-o); }
.loc__chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: var(--kn-bo-6); background: var(--kn-nen-2); font-size: var(--kn-c2); font-weight: 400; color: var(--kn-chu); }
@media (hover: hover) { .loc:hover { background: var(--kn-nen-2); } }
.hang-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bang-loc { width: 300px; min-width: 0; }
.bang-loc__dem { flex: none; font-size: var(--kn-c2); color: var(--kn-chu-3); }
.bang-loc__bo { justify-content: center; font-weight: 400; }
/* Kiểu D: Menu ⋯ */
.menu { width: 264px; padding: 4px; display: flex; flex-direction: column; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); box-shadow: var(--kn-bong-2); z-index: var(--kn-z-menu); }
.menu__ke { height: 1px; margin: 4px 0; background: var(--kn-vien); flex: none; }
.menu--truot { width: 100%; border: 0; box-shadow: none; padding: 0; }
.menu--truot .nut--muc, .menu--truot .nut--xoa { height: 56px; }
/* Chọn nhiều bằng vòng tick (Người nhận, tối đa 8) */
.chon-nguoi__dong { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 6px 12px; border-radius: var(--kn-bo-10); cursor: pointer; }
.chon-nguoi__ten { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; color: var(--kn-chu); }
.chon-nguoi__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.chon-nguoi__dong:has(input:checked), .chon-nguoi__dong.dang-chon { background: var(--kn-vang-nen); }
/* Cột in · In các mục */
.cot-in__dong { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--kn-vien); font-size: var(--kn-c3); }
.cot-in__dong:last-child { border-bottom: 0; }
/* Tấm trượt (điện thoại; riêng Ghép mã và Hộp In dùng cả ở iPad dọc): đỉnh cách màn 56 */
.man-che { position: absolute; inset: 0; background: var(--kn-man-che); z-index: var(--kn-z-hop); }
.khung-truot { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--kn-z-hop); display: flex; flex-direction: column; max-height: calc(100% - 56px); background: var(--kn-mat); border-radius: var(--kn-bo-20) var(--kn-bo-20) 0 0; box-shadow: var(--kn-bong-3); padding-bottom: env(safe-area-inset-bottom); }
.khung-truot--day { top: 56px; }
.khung-truot--in { max-height: 92%; }
.khung-truot__tay { width: 36px; height: 4px; border-radius: var(--kn-bo-tron); background: var(--kn-vien-o); margin: 8px auto 4px; flex: none; }
.khung-truot__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px 8px 16px; flex: none; }
.khung-truot__tieu-de { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.khung-truot__tim { padding: 0 12px 8px; flex: none; }
.khung-truot__than { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; }
.khung-truot__chan { flex: none; padding: 12px; border-top: 1px solid var(--kn-vien); background: var(--kn-mat); }
.khung-truot__chan .nut { width: 100%; }
.ban-phim { flex: none; height: 268px; background: var(--kn-nen-3); display: grid; place-items: center; font-size: var(--kn-c1); color: var(--kn-chu-2); }
/* --- 5.4 Tick, vòng tick, radio, gạt --- */
.tick, .vong-tick, .radio, .gat { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; }
.tick input, .vong-tick input, .radio input, .gat input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tick__o, .vong-tick__o, .radio__o { display: grid; place-items: center; background: var(--kn-mat); border: 1.5px solid var(--kn-vien-dam); transition: background-color var(--kn-tg-hover), border-color var(--kn-tg-hover); }
.tick__o { width: 22px; height: 22px; border-radius: var(--kn-bo-6); }
.tick--20 .tick__o { width: 20px; height: 20px; }
.vong-tick__o { width: 24px; height: 24px; border-radius: 50%; }
.radio__o { width: 22px; height: 22px; border-radius: 50%; }
.tick__o::after, .vong-tick__o::after {
content: ""; width: 16px; height: 16px; background: var(--kn-trang); opacity: 0;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vong-tick__o::after { width: 14px; height: 14px; }
.tick input:checked + .tick__o, .vong-tick input:checked + .vong-tick__o { background: var(--kn-muc); border-color: var(--kn-muc); }
.tick input:checked + .tick__o::after, .vong-tick input:checked + .vong-tick__o::after { opacity: 1; }
.tick--nua .tick__o { background: var(--kn-muc); border-color: var(--kn-muc); }
.tick--nua .tick__o::after { opacity: 1; width: 12px; height: 2px; -webkit-mask: none; mask: none; border-radius: 1px; }
.tick input:disabled + .tick__o, .vong-tick input:disabled + .vong-tick__o, .radio input:disabled + .radio__o { background: var(--kn-nen-2); border-color: var(--kn-vien); }
.radio__o::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--kn-muc); opacity: 0; }
.radio input:checked + .radio__o { border-color: var(--kn-muc); }
.radio input:checked + .radio__o::after { opacity: 1; }
.tick input:focus-visible + .tick__o, .vong-tick input:focus-visible + .vong-tick__o, .radio input:focus-visible + .radio__o { outline: 2px solid var(--kn-vang-dam); outline-offset: 2px; }
.gat__ray { width: 48px; height: 28px; border-radius: var(--kn-bo-tron); background: var(--kn-vien-o); position: relative; transition: background-color var(--kn-tg-hover); }
.gat__ray::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--kn-mat); box-shadow: var(--kn-bong-1); transition: transform var(--kn-tg-hover); }
.gat input:checked + .gat__ray { background: var(--kn-muc); }
.gat input:checked + .gat__ray::after { transform: translateX(20px); }
.gat input:disabled + .gat__ray { background: var(--kn-nen-3); }
.gat input:focus-visible + .gat__ray { outline: 2px solid var(--kn-vang-dam); outline-offset: 2px; }
.dong-chon { display: flex; align-items: center; gap: 12px; min-height: var(--kn-cao-nut); padding: 0 4px; cursor: pointer; font-size: var(--kn-c3); }
/* --- 5.5 Chip --- */
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; border-radius: var(--kn-bo-tron); border: 1px solid var(--kn-nhap-vien); background: var(--kn-nhap-nen); color: var(--kn-nhap-chu); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; }
.chip--xong { background: var(--kn-xong-nen); color: var(--kn-xong-chu); border-color: var(--kn-xong-vien); }
.chip--cho { background: var(--kn-cho-nen); color: var(--kn-cho-chu); border-color: var(--kn-cho-vien); }
.chip--loi { background: var(--kn-loi-nen); color: var(--kn-loi-chu); border-color: var(--kn-loi-vien); }
.chip--nhap { background: var(--kn-nhap-nen); color: var(--kn-nhap-chu); border-color: var(--kn-nhap-vien); }
.chip--huy { text-decoration: line-through; }
.chip-loc { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0 0 12px; border-radius: var(--kn-bo-10); background: var(--kn-nen-2); font-size: var(--kn-c2); color: var(--kn-chu); }
.chip-loc__xoa { appearance: none; border: 0; background: transparent; width: 36px; height: 36px; display: grid; place-items: center; color: var(--kn-chu-2); cursor: pointer; border-radius: var(--kn-bo-10); }
.chip-gia-tri { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; height: var(--kn-cao-nut); padding: 0 14px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c2); font-weight: 400; color: var(--kn-chu); white-space: nowrap; cursor: pointer; }
.chip-gia-tri .ic { width: 16px; height: 16px; color: var(--kn-vang-dam); }
.chip-gia-tri[aria-pressed="true"] { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); font-weight: 600; }
.chip-ten { display: inline-flex; align-items: center; height: 40px; padding: 0 0 0 12px; border-radius: var(--kn-bo-10); background: var(--kn-nen-2); font-size: var(--kn-c2); color: var(--kn-chu); white-space: nowrap; }
.chip-ten--khoa { padding-right: 12px; }
.chip-ten__xoa { appearance: none; border: 0; background: transparent; width: 40px; height: 40px; display: grid; place-items: center; color: var(--kn-chu-2); cursor: pointer; }
.chip-ten--them { appearance: none; background: var(--kn-mat); border: 1px dashed var(--kn-vien-dam); padding: 0 12px; font-family: var(--kn-font); color: var(--kn-chu); cursor: pointer; }
.chuoi { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.chuoi__noi { color: var(--kn-chu-3); font-size: var(--kn-c2); }
.chip-chuoi { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu); white-space: nowrap; cursor: pointer; text-decoration: none; }
.chip-chuoi__cham { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--loai, var(--kn-vien-dam)); }
.chip-chuoi[aria-current="page"] { background: var(--kn-muc); border-color: var(--kn-muc); color: var(--kn-trang); }
.chip-chuoi--chua { color: var(--kn-chu-tat); border-style: dashed; border-color: var(--kn-vien-o); cursor: default; pointer-events: none; }
.chip-chuoi--chua .chip-chuoi__cham { background: var(--kn-vien-o); }
.chip-chuoi .ic { width: 16px; height: 16px; }
.dem { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; min-width: 20px; padding: 0 6px; border-radius: var(--kn-bo-tron); background: var(--kn-nen-3); color: var(--kn-chu); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; }
.dem--viec { background: var(--kn-loi-chu); color: var(--kn-trang); }
/* Loại chứng từ: gắn class lên phần tử, dùng --loai cho biểu tượng menu, vạch đầu màn, chấm chip chuỗi */
.loai-bao-gia { --loai: var(--kn-loai-bao-gia); }
.loai-phieu-giao { --loai: var(--kn-loai-phieu-giao); }
.loai-bang-ke { --loai: var(--kn-loai-bang-ke); }
.loai-gia-ke { --loai: var(--kn-loai-gia-ke); }
.loai-hoa-don { --loai: var(--kn-loai-hoa-don); }
.loai-thu-tien { --loai: var(--kn-loai-thu-tien); }
/* Tiêu đề màn: vạch trái 3px màu loại chứng từ */
.tieu-de-man { display: flex; align-items: center; gap: 12px; padding-left: 12px; border-left: 3px solid var(--loai, var(--kn-vang)); font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; }
/* Số tiền ba tầng (chứng từ có giá kê): Giá kê · Giá thật · Chênh lệch */
.tien-ke { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.tien-ke__ke { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; color: var(--kn-chu); white-space: nowrap; }
.tien-ke__that { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); white-space: nowrap; }
.tien-ke__chenh { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-xong-chu); white-space: nowrap; }
/* --- 5.6 + 11.1 Thẻ (điện thoại): danh sách thẻ một cột, 5 nút nén một hàng --- */
.the { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); min-width: 0; min-height: 160px; }
.the__t1 { display: flex; align-items: center; gap: 12px; }
.the__ten { flex: 1; min-width: 0; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.the__tien { flex: none; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; white-space: nowrap; }
.the__t2 { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.the__t3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.the__t4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.the__nen { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 48px); gap: 2px; margin-top: 4px; align-items: center; }
.the__nen .nut { width: 100%; min-width: 0; padding: 0 4px; }
.the__nen .nut--di-tiep { justify-content: space-between; gap: 4px; margin-right: 4px; padding: 0 6px 0 10px; font-size: var(--kn-c2); line-height: var(--kn-d2); white-space: normal; text-align: left; }
.the__xong { display: flex; align-items: center; gap: 6px; min-height: var(--kn-cao-nut); padding-left: 4px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.the--viec { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.the--chon { background: var(--kn-vang-nen); border-color: var(--kn-vang-vien); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.the--chon .buoc--sau, .the--chon .thanh-buoc__noi { color: var(--kn-chu-2); }
.the--moi-doi { animation: kn-moi-doi 1s ease-out; }
@keyframes kn-moi-doi { from { background: var(--kn-vang-nen); } to { background: var(--kn-mat); } }
.the--huy .the__ten, .the--huy .the__tien, .the--huy .the__t2 { color: var(--kn-chu-2); }
.the--huy .the__tien { text-decoration: line-through; }
.nhan-viec { display: inline-flex; align-items: center; gap: 4px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-loi-chu); white-space: nowrap; }
.luoi-the { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
/* --- Dòng danh sách (iPad 58): nhóm Tháng → Khách, mỗi nhóm một khối dính --- */
.ds { background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.ds__thang { position: sticky; top: 0; z-index: var(--kn-z-dinh); display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; background: var(--kn-nen-2); border-bottom: 1px solid var(--kn-vien); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 700; }
.ds__khach { position: sticky; top: 40px; z-index: var(--kn-z-dinh); display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; background: var(--kn-vang-nen); border-bottom: 1px solid var(--kn-vang-vien); font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; }
.ds__khach .cat { flex: 1; }
.ds__ben { flex: none; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu-2); white-space: nowrap; }
.dong-ds { position: relative; display: flex; align-items: center; gap: 12px; height: var(--kn-cao-dong-ds); padding: 0 12px 0 16px; border-bottom: 1px solid var(--kn-vien); background: var(--kn-mat); cursor: pointer; }
.dong-ds:last-child { border-bottom: 0; }
.dong-ds__chinh { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dong-ds__nguoi { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dong-ds__phu { display: flex; align-items: center; gap: 8px; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); white-space: nowrap; overflow: hidden; }
.thue-hd { font-weight: 600; color: var(--kn-chu); } /* 10/11: hóa đơn đã lên Thuế số … (đậm, rõ đã xuất) */
.dong-ds__tien { flex: none; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; text-align: right; white-space: nowrap; }
.dong-ds .nut { flex: none; }
.dong-ds__xong { flex: none; width: 150px; text-align: center; font-size: var(--kn-c2); color: var(--kn-chu-2); }
.dong-ds--viec { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.dong-ds--chon { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
@media (hover: hover) { .dong-ds:hover { background: var(--kn-nen); } .dong-ds--chon:hover { background: var(--kn-vang-nen); } }
/* --- 5.7 Thanh bước --- */
.thanh-buoc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--kn-c2); line-height: var(--kn-d2); }
.buoc { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.buoc .ic { width: 14px; height: 14px; }
.buoc--xong { color: var(--kn-chu-2); }
.buoc--hien { color: var(--kn-chu); font-weight: 600; border-bottom-color: var(--kn-vang); }
.buoc--sau { color: var(--kn-chu-3); } /* kế hoạch ghi #A8A29E (2,52:1); dùng --kn-chu-3 để đạt luật tương phản */
.thanh-buoc__noi { color: var(--kn-chu-3); padding-bottom: 4px; }
.thanh-buoc__so { color: var(--kn-chu-2); margin-left: 4px; }
.dong-ds--chon .buoc--sau, .dong-ds--chon .thanh-buoc__noi { color: var(--kn-chu-2); }
/* --- 5.8 Đầu màn chi tiết --- */
.dau-man { display: flex; flex-direction: column; gap: 12px; }
.dau-man__t1 { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dau-man__t2 { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; margin-top: -8px; }
.dau-man__t3 { font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dau-man__so { appearance: none; border: 0; background: transparent; padding: 0; position: relative; font: inherit; color: var(--kn-chu); text-decoration: underline dotted var(--kn-vien-dam); text-underline-offset: 4px; cursor: pointer; }
.dau-man__so::after { content: ""; position: absolute; inset: -14px -6px; }
.dau-man__so--du-kien { color: var(--kn-chu-3); text-decoration: none; }
.dau-man__hang { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tim-dinh { position: sticky; top: 0; z-index: var(--kn-z-dinh); background: var(--kn-nen); padding: 8px 0; }
/* --- 5.9 Thanh công cụ --- */
.thanh-cong-cu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* --- 5.10 Bảng (máy tính: danh sách và bảng soạn; iPad: bảng soạn) --- */
.bang { background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: auto; }
.bang table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--kn-c3); line-height: var(--kn-d3); table-layout: fixed; }
.bang th { height: var(--kn-cao-tieu-de-cot); padding: 0 12px; text-align: left; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); background: var(--kn-mat); border-bottom: 1px solid var(--kn-vien-o); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; z-index: var(--kn-z-dinh); }
.bang th.sap { cursor: pointer; }
.bang th.sap .ic { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; }
.bang td { height: var(--kn-cao-dong-ds); padding: 0 12px; border-bottom: 1px solid var(--kn-vien); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bang td.co-o { padding: 4px 6px; }
.bang .so, .bang th.so { text-align: right; }
.bang .giua, .bang th.giua { text-align: center; }
.bang tbody tr { background: var(--kn-mat); }
@media (hover: hover) { .bang tbody tr:hover { background: var(--kn-nen); } }
.bang tbody tr.dang-chon { background: var(--kn-vang-nen); }
.bang tbody tr.dang-chon td:first-child { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.bang tbody tr.viec td:first-child { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.bang tbody tr.dong-loi { background: var(--kn-loi-nen); }
.bang__nhom-thang td { min-height: 36px; background: var(--kn-nen-2); font-size: var(--kn-c2); font-weight: 700; }
.bang__nhom-khach td { height: 40px; background: var(--kn-vang-nen); font-size: var(--kn-c2); font-weight: 700; border-bottom-color: var(--kn-vang-vien); position: sticky; top: var(--kn-cao-tieu-de-cot); z-index: 9; }
.bang__nhom-hang td { height: 40px; background: var(--kn-nen); font-size: var(--kn-c2); font-weight: 600; }
.bang__phi td { background: var(--kn-nen); }
.bang__tong td { font-size: var(--kn-c3); font-weight: 600; border-top: 1px solid var(--kn-vien-o); border-bottom: 0; }
.bang__ten { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bang__phu { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dang-chon .bang__phu { color: var(--kn-chu-2); }
.bang__them { padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--kn-vien); }
.nut-them-dong { flex: 1; justify-content: center; border: 1px dashed var(--kn-vien-o); background: var(--kn-mat); color: var(--kn-chu); font-weight: 600; }
.anh-hang { width: 40px; height: 40px; flex: none; border-radius: var(--kn-bo-6); border: 1px solid var(--kn-vien); background: var(--kn-nen-2); display: grid; place-items: center; color: var(--kn-chu-3); }
.o-ten-hang { display: flex; align-items: center; gap: 8px; min-width: 0; }
.thanh-tong { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 10px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); font-size: var(--kn-c2); }
.thanh-tong b { font-weight: 700; }
.nhay { animation: kn-nhay 1s ease-out; }
@keyframes kn-nhay { from { background: var(--kn-vang-vien); } to { background: transparent; } }
/* Điện thoại: dòng hàng là thẻ nhỏ "Dòng n" (SL − +, bàn phím số, phím Tiếp) */
.ds-dong { display: flex; flex-direction: column; gap: 8px; }
.dong-the { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.dong-the__dau { display: flex; align-items: center; justify-content: space-between; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); font-weight: 600; }
.dong-the__t1 { display: flex; align-items: center; gap: 10px; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.dong-the__t1 .cat { flex: 1; }
.dong-the__t2 { display: flex; align-items: center; gap: 6px; }
.dong-the__sl { display: flex; align-items: center; gap: 4px; }
.dong-the__sl .o-bang { width: 64px; }
.dong-the__sl .nut { width: 48px; min-width: 48px; height: 48px; padding: 0; font-size: var(--kn-c4); }
.dong-the__gia { flex: 1; min-width: 0; }
.dong-the__dvt { flex: none; font-size: var(--kn-c2); color: var(--kn-chu-2); }
.dong-the__t3 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-3); }
/* --- 5.11 Thanh chọn nhiều: nền trắng nổi, chứa nút chốt mực của màn --- */
.thanh-chon { position: sticky; top: 0; z-index: var(--kn-z-chon); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 8px 8px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vang-dam); border-radius: var(--kn-bo-14); box-shadow: var(--kn-bong-2); }
.thanh-chon__dem { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; white-space: nowrap; }
.thanh-chon__viec { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.thanh-chon .nut--chot { height: var(--kn-cao-nut); }
/* --- 5.12 Dải báo --- */
.dai { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border: 1px solid; border-radius: var(--kn-bo-14); font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 400; }
.dai > .ic { width: 20px; height: 20px; }
.dai__cau { flex: 1; min-width: 0; }
.dai__nut { display: flex; gap: 8px; flex: none; }
.dai--do { background: var(--kn-loi-nen); color: var(--kn-loi-chu); border-color: var(--kn-loi-vien); }
.dai--vang { background: var(--kn-cho-nen); color: var(--kn-cho-chu); border-color: var(--kn-cho-vien); }
.dai--xam { background: var(--kn-nhap-nen); color: var(--kn-nhap-chu); border-color: var(--kn-nhap-vien); }
.dai--xep { flex-wrap: wrap; align-items: flex-start; }
.dai--xep .dai__cau { flex-basis: calc(100% - 32px); }
.dai--xep .dai__nut { width: 100%; }
.dai--xep .dai__nut .nut { flex: 1; }
.dai-mat-mang { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px 4px 16px; background: var(--kn-nhap-nen); color: var(--kn-nhap-chu); border-bottom: 1px solid var(--kn-nhap-vien); font-size: var(--kn-c2); font-weight: 400; z-index: var(--kn-z-mat-mang); flex: none; }
.dai-mat-mang .dai__cau { flex: 1; }
/* --- 5.13 Thông báo Hoàn tác --- */
.lop-thong-bao { position: fixed; left: 12px; right: 12px; bottom: calc(16px + var(--kn-day-chiem, 0px)); display: flex; justify-content: center; z-index: var(--kn-z-thong-bao); pointer-events: none; }
.lop-thong-bao--trong-khung { position: absolute; }
.thong-bao { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 480px; min-height: 56px; padding: 4px 4px 4px 16px; background: var(--kn-muc); color: var(--kn-trang); border-radius: var(--kn-bo-14); box-shadow: var(--kn-bong-2); font-size: var(--kn-c3); line-height: var(--kn-d3); animation: kn-len var(--kn-tg-vao) ease-out; }
.thong-bao__cau { flex: 1; min-width: 0; padding: 12px 0; }
.thong-bao__hoan-tac { appearance: none; border: 0; background: transparent; height: 48px; padding: 0 14px; border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c3); font-weight: 600; color: var(--kn-vang-chu); cursor: pointer; white-space: nowrap; }
@media (hover: hover) { .thong-bao__hoan-tac:hover { background: var(--kn-muc-hover); } }
.thong-bao__vach { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--kn-vang); transform-origin: left; animation: kn-vach 10s linear forwards; }
.thong-bao:hover .thong-bao__vach, .thong-bao:focus-within .thong-bao__vach { animation-play-state: paused; }
@keyframes kn-vach { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes kn-len { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.thong-bao--canh { max-width: 360px; } /* "Đã xóa dòng 3 · Hoàn tác" ngay cạnh dòng vừa xóa */
/* --- 5.14 + 4 Trạng thái gửi (luôn ở thanh trên) --- */
.trang-thai-gui { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--kn-bo-tron); background: transparent; font-family: var(--kn-font); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu); white-space: nowrap; cursor: pointer; position: relative; flex: none; }
.trang-thai-gui::after { content: ""; position: absolute; inset: -8px -2px; }
.trang-thai-gui__cham { width: 8px; height: 8px; border-radius: 50%; background: var(--kn-xong-chu); flex: none; }
.trang-thai-gui--cho { background: var(--kn-cho-nen); color: var(--kn-cho-chu); border-color: var(--kn-cho-vien); }
.trang-thai-gui--loi { background: var(--kn-loi-nen); color: var(--kn-loi-chu); border-color: var(--kn-loi-chu); }
.trang-thai-gui--gui { color: var(--kn-chu-2); }
.trang-thai-gui--gui .xoay { width: 12px; height: 12px; }
/* --- 5.15 Hộp thoại, ngăn xem nhanh --- */
.hop { display: flex; flex-direction: column; width: 600px; max-width: calc(100% - 32px); max-height: 88%; background: var(--kn-mat); border-radius: var(--kn-bo-20); box-shadow: var(--kn-bong-3); z-index: var(--kn-z-hop); overflow: hidden; }
.hop--nho { width: 440px; }
.hop--lon { width: 880px; }
.hop__dau { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 24px; min-height: 64px; flex: none; }
.hop__tieu-de { flex: 1; min-width: 0; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.hop__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); font-weight: 400; }
.hop__than { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.hop__chan { flex: none; display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--kn-vien); }
.lop-hop { position: absolute; inset: 0; display: grid; place-items: center; z-index: var(--kn-z-hop); }
.ngan-xem { flex: none; display: flex; flex-direction: column; min-width: 0; background: var(--kn-mat); border-left: 1px solid var(--kn-vien); }
.ngan-xem__dau { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--kn-vien); flex: none; }
.ngan-xem__than { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
/* --- 5.16 Rỗng, đang tải, lỗi --- */
.rong { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 24px; text-align: center; }
.rong > .ic { color: var(--kn-chu-tat); margin-bottom: 8px; }
.rong__cau { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 400; color: var(--kn-chu); }
.rong__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.rong .nut { margin-top: 8px; }
.xuong { display: block; background: var(--kn-nen-3); border-radius: var(--kn-bo-6); animation: kn-nhap-nhay 1.2s ease-in-out infinite; }
@keyframes kn-nhap-nhay { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
/* --- 5.17 Thẻ số liệu (tab Đang làm, Báo cáo) --- */
.the-so { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); font-family: var(--kn-font); text-align: left; color: var(--kn-chu); cursor: pointer; min-width: 0; }
.the-so:active { background: var(--kn-nen-2); }
.the-so__nhan { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.the-so__so { font-size: var(--kn-c6); line-height: var(--kn-d6); font-weight: 600; }
.the-so__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xu-huong { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--kn-bo-tron); font-size: var(--kn-c1); font-weight: 400; }
.xu-huong--tang { background: var(--kn-xong-nen); color: var(--kn-xong-chu); }
.xu-huong--giam { background: var(--kn-loi-nen); color: var(--kn-loi-chu); }
.luoi-so { display: grid; gap: 12px; grid-template-columns: repeat(var(--kn-so-cot, 2), minmax(0, 1fr)); }
/* ===== (4) KHUNG (Quy-tac-V3) ===== */
.khung { position: relative; display: flex; flex-direction: column; background: var(--kn-nen); overflow: hidden; height: 100dvh; }
.khung--in, .khung--mt { flex-direction: row; }
.khung__giua { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
.khung__than { flex: 1; min-height: 0; display: flex; }
.noi-dung { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: var(--kn-le); display: flex; flex-direction: column; gap: 12px; }
/* Thanh trên: 64 chạm · 56 máy tính. Nhà · tên mục · trạng thái gửi · Nhập file · Tạo mới */
.thanh-tren { flex: none; display: flex; align-items: center; gap: 4px; height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 4px; background: var(--kn-mat); border-bottom: 1px solid var(--kn-vien); z-index: var(--kn-z-thanh); }
.thanh-tren__ten { flex: 1; min-width: 0; padding: 0 4px; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-ipad .thanh-tren { padding: 0 12px 0 6px; gap: 8px; }
.kn-ipad .thanh-tren__ten { font-size: var(--kn-c4); line-height: var(--kn-d4); flex: none; max-width: 220px; }
.kn-dt .thanh-tren { padding: 0 6px 0 4px; gap: 4px; }
.kn-dt .thanh-tren__ten { font-size: var(--kn-c3); line-height: var(--kn-d3); flex: 1; max-width: none; }
.thanh-tren__tim { width: 320px; flex: 0 1 320px; min-width: 200px; }
.thanh-tren__dem { flex: 1; }
.thanh-tren > .nut, .thanh-tren > .trang-thai-gui { flex: none; }
.kn-mt .thanh-tren { height: 56px; padding: 0 16px; gap: 8px; }
.kn-mt .thanh-tren__tim { width: 400px; flex: 0 1 400px; }
.thanh-tren .nut--tao-moi { height: var(--kn-cao-nut); padding: 0 14px; }
.kn-dt .thanh-tren .nut--tao-moi { flex-direction: column; gap: 0; height: 52px; min-width: 52px; padding: 2px 8px; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; }
.kn-dt .thanh-tren .nut--bieu-tuong { padding: 4px 4px; }
.kn-mt .thanh-tren .nut--tao-moi { height: 40px; }
/* Thanh dưới (điện thoại, iPad dọc): 64, 5 ô Báo giá · Phiếu giao · Bảng kê · Hóa đơn · Menu; ẩn khi đang gõ */
.thanh-duoi { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--kn-mat); border-top: 1px solid var(--kn-vien); z-index: var(--kn-z-thanh); }
.thanh-duoi__o { appearance: none; border: 0; background: transparent; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--kn-font); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; color: var(--kn-chu-2); cursor: pointer; text-decoration: none; }
.thanh-duoi__o .ic { width: 24px; height: 24px; color: var(--loai, var(--kn-chu-2)); }
.thanh-duoi__o:active { background: var(--kn-nen-2); }
.thanh-duoi__o[aria-current="page"] { color: var(--kn-chu); font-weight: 600; }
.thanh-duoi__o[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 3px; margin-left: -16px; border-radius: 0 0 3px 3px; background: var(--kn-vang); }
.thanh-duoi__dem { position: absolute; top: 4px; left: calc(50% + 6px); box-shadow: 0 0 0 2px var(--kn-mat); }
[data-dang-go] .thanh-duoi { display: none; }
/* Lưới menu (ô 5 Menu): 12 mục theo quy trình */
.luoi-menu { display: grid; grid-template-columns: repeat(var(--kn-so-cot, 3), minmax(0, 1fr)); gap: 8px; }
.luoi-menu__o { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 104px; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); background: var(--kn-mat); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu); text-decoration: none; }
.luoi-menu__o .ic { width: 28px; height: 28px; color: var(--loai, var(--kn-chu-2)); }
.luoi-menu__o .dem { position: absolute; top: 8px; right: 8px; }
/* Thanh ray (iPad ngang): 92, hình + chữ ngắn 13 */
.thanh-ray { flex: none; width: 92px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px; background: var(--kn-nen); border-right: 1px solid var(--kn-vien); overflow-y: auto; z-index: var(--kn-z-thanh); }
.thanh-ray__dau { display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px; font-size: var(--kn-c1); font-weight: 700; flex: none; }
.thanh-ray__o { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; padding: 4px 2px; border-radius: var(--kn-bo-10); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; color: var(--kn-chu-2); text-decoration: none; text-align: center; }
.thanh-ray__o .ic { width: 22px; height: 22px; color: var(--loai, var(--kn-chu-2)); }
.thanh-ray__o[aria-current="page"] { background: var(--kn-mat); color: var(--kn-chu); font-weight: 600; box-shadow: inset 0 0 0 1px var(--kn-vien), inset 3px 0 0 var(--kn-vang); }
.thanh-ray__o .dem { position: absolute; top: 2px; right: 6px; box-shadow: 0 0 0 2px var(--kn-nen); }
/* Thanh bên (máy tính): 232, 12 dòng 40 */
.thanh-trai { flex: none; width: 232px; display: flex; flex-direction: column; background: var(--kn-nen); border-right: 1px solid var(--kn-vien); z-index: var(--kn-z-thanh); }
.thanh-trai__dau { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; flex: none; }
.thanh-trai__cham { width: 8px; height: 8px; border-radius: 50%; background: var(--kn-vang); flex: none; }
.thanh-trai__ds { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; }
.thanh-trai__dong { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--kn-bo-10); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu-2); text-decoration: none; cursor: pointer; }
.thanh-trai__dong .ic { width: 20px; height: 20px; color: var(--loai, var(--kn-chu-2)); }
.thanh-trai__dong .dem { margin-left: auto; }
@media (hover: hover) { .thanh-trai__dong:hover { background: var(--kn-nen-2); } }
.thanh-trai__dong[aria-current="page"] { background: var(--kn-mat); border-color: var(--kn-vien); color: var(--kn-chu); font-weight: 600; }
.thanh-trai__dong[aria-current="page"]::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kn-vang); }
.thanh-trai__ke { height: 1px; margin: 6px 10px; background: var(--kn-vien); flex: none; }
.thanh-trai__cuoi { flex: none; padding: 12px 20px; border-top: 1px solid var(--kn-vien); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
/* Đầu mục danh sách: tên · tab · lọc · tìm (đứng yên khi cuộn) */
.dau-muc { flex: none; display: flex; flex-direction: column; gap: 12px; padding: var(--kn-le) var(--kn-le) 12px; background: var(--kn-nen); }
.dau-muc__hang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Thanh Đang mở (chứng từ đang mở, có ×) */
.thanh-dang-mo { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 var(--kn-le); background: var(--kn-mat); border-bottom: 1px solid var(--kn-vien); }
.thanh-dang-mo__ds { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chip-mo { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 0 0 12px; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-10); background: var(--kn-mat); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu); white-space: nowrap; }
.kn-mt .chip-mo { height: 40px; }
.chip-mo__ten { appearance: none; border: 0; background: transparent; padding: 0; align-self: stretch; display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; cursor: pointer; }
.chip-mo__dong { appearance: none; border: 0; background: transparent; width: 40px; height: 100%; display: grid; place-items: center; color: var(--kn-chu-2); cursor: pointer; }
.chip-mo[aria-current="page"] { background: var(--kn-muc); border-color: var(--kn-muc); color: var(--kn-trang); }
.chip-mo[aria-current="page"] .chip-mo__dong { color: var(--kn-trang-mo); }
/* Chân màn (chi tiết, soạn): thay thanh dưới; khe nút về ↔ nút chốt ≥ 24 */
.chan-man { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px var(--kn-le) calc(10px + env(safe-area-inset-bottom)); background: var(--kn-mat); border-top: 1px solid var(--kn-vien); z-index: var(--kn-z-thanh); }
.chan-man__khoang { flex: 1; min-width: 24px; }
.chan-man__tong { display: flex; flex-direction: column; align-items: flex-end; }
.chan-man__nhan { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.chan-man__so { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 700; white-space: nowrap; }
.chan-man__ghi { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.kn-dt .chan-man { flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.kn-dt .chan-man__tong { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
.kn-dt .chan-man .nut--vien { flex: 1; }
.kn-dt .chan-man .nut--chot { flex: 1.6; }
/* Xem cạnh */
.xem-canh { flex: 1; min-height: 0; display: flex; }
.xem-canh__khung { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--kn-nen); }
.xem-canh__chia { flex: none; width: 8px; background: var(--kn-vien); cursor: col-resize; position: relative; }
/* ===== (5) BẢN IN (theo V1, mục 7; vẽ đủ ở Đợt 5) ===== */
@page { margin: 0; }
.ban-in { color: var(--kn-in-den); background: var(--kn-in-trang); font-variant-numeric: tabular-nums; }
.ban-in thead { display: table-header-group; } /* tiêu đề cột lặp mỗi trang */
.ban-in tr { break-inside: avoid; page-break-inside: avoid; } /* không cắt ngang hàng */
.ban-in__dau-nhom { break-inside: avoid; } /* tbody: tên nhóm + hàng đầu của nhóm */
.ban-in__cuoi { break-inside: avoid; } /* 3 dòng cuối + TỔNG CỘNG + bằng chữ + chữ ký + lời cảm ơn */
@media print {
.thanh-tren, .thanh-duoi, .thanh-ray, .thanh-trai, .thanh-dang-mo, .chan-man, .dai-mat-mang, .lop-thong-bao, .thanh-chon, .man-che, .khung-truot, .lop-hop, .ngan-xem { display: none !important; }
.khung, .noi-dung { height: auto !important; overflow: visible !important; display: block !important; padding: 0 !important; }
}
/* ===== (6) TRẠNG THÁI ÉP: chỉ để vẽ bảng thành phần, code không dùng ===== */
.tt-hover.nut--chot { background: var(--kn-muc-hover); }
.tt-hover.nut--di-tiep { background: var(--kn-vang-nen-hover); }
.tt-hover.nut--tao-moi { background: var(--kn-nen-2); }
.tt-hover.nut--vien, .tt-hover.nut--phu { background: var(--kn-nen-2); border-color: var(--kn-vien-dam); }
.tt-hover.nut--lui { background: var(--kn-loi-nen); }
.tt-hover.nut--bieu-tuong, .tt-hover.nut--muc, .tt-hover.nut--xoa, .tt-hover.nut--chi-hinh { background: var(--kn-nen-2); }
.tt-hover.nut--xoa-dong { border-color: var(--kn-loi-chu); }
.tt-nhan { box-shadow: 0 0 0 2px var(--kn-vien-dam); }
.tt-nhan.nut--chot { background: var(--kn-muc-nhan); }
.tt-nhan.nut--di-tiep { background: var(--kn-vang-nen-nhan); }
.tt-nhan.nut--tao-moi, .tt-nhan.nut--vien, .tt-nhan.nut--phu, .tt-nhan.nut--bieu-tuong, .tt-nhan.nut--chi-hinh { background: var(--kn-nen-3); }
.tt-nhan.nut--lui { background: var(--kn-loi-nen); }
.tt-nhan.nut--muc, .tt-nhan.nut--xoa { box-shadow: none; background: var(--kn-nen-3); }
.tt-nhan.nut--xoa-dong { box-shadow: none; border-color: var(--kn-loi-chu); background: var(--kn-loi-nen); }
.tt-focus { outline: 2px solid var(--kn-vang-dam); outline-offset: 2px; }
.tt-hover .o-nhap__o, .o-chon__o.tt-hover { border-color: var(--kn-vien-dam); }
.tt-go .o-nhap__o, .o-bang.tt-go { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); background: var(--kn-mat); }
.bang tbody tr.tt-hover, .dong-ds.tt-hover { background: var(--kn-nen); }
.the.tt-moi-doi { background: var(--kn-vang-nen); }
/* --- Bảng: ô gọn --- */
.bang th.giua, .bang td.giua { padding-left: 4px; padding-right: 4px; }
.bang .o-bang { padding: 0 6px; }
.kn-ipad .bang td.co-o, .kn-dt .bang td.co-o { padding: 4px 3px; }
.kn-mt .bang td.co-o { padding: 2px 6px; }
.bang td.o-xoa { padding: 0 2px; }
.bang td.o-xoa .nut--bieu-tuong { width: 100%; min-width: 0; padding: 4px 0; }
.bang td.o-viec { padding: 2px; }
.bang td.co-o .o-ten-hang .anh-hang { margin-left: 2px; }
.nut--xoa-dong.nut--bieu-tuong, .nut--xoa-dong.nut--bieu-tuong .ic { color: var(--kn-loi-chu); }
.bang .thanh-buoc { flex-wrap: nowrap; white-space: nowrap; }
.noi-dung > * { flex: none; }
.thanh-duoi__o, .thanh-ray__o { white-space: nowrap; }
/* ==================== (6.1) Màn Đợt 1 · iPad của Mẹ ==================== */
/* ===== Đợt 1 · iPad của Mẹ (gộp vào kn.css khi bàn giao) ===== */
/* Đầu màn soạn: lưới ô, số dự kiến */
.soan-dau { display: flex; flex-direction: column; gap: 16px; padding-bottom: 4px; }
.soan-dau__tieu { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.luoi-o { display: grid; grid-template-columns: repeat(var(--kn-so-cot, 2), minmax(0, 1fr)); gap: 16px; align-items: start; }
.luoi-o__rong { grid-column: 1 / -1; }
.radio-the--ngang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.radio-the--ngang .radio-the__dong { min-height: var(--kn-cao-nut); padding: 8px 12px; font-size: var(--kn-c3); }
/* Bảng soạn: dòng phụ dưới tên hàng (HH trên Thuế, ghi chú, giá vốn) */
.o-ten-hang__cot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-ten-hang__phu { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 7px; }
.o-ten-hang__phu--do { color: var(--kn-loi-chu); font-weight: 600; }
.bang td.co-o:has(.o-ten-hang__cot) { padding-top: 6px; padding-bottom: 6px; }
.bang .dong-moi td { background: var(--kn-mat); }
.bang .o-bang--goi input { color: var(--kn-chu); }
/* Chân màn soạn trên bàn phím iPad (đáy theo visualViewport) */
.khung--ban-phim .chan-man { box-shadow: var(--kn-bong-2); }
.ban-phim--ipad { height: 320px; }
.chan-man__ghi--xam { display: flex; align-items: center; gap: 8px; }
/* Bảng xổ đặt trên màn (lớp nổi của khung) */
.lop-noi { position: absolute; z-index: var(--kn-z-chon); }
.bang-chon__buoc { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); flex: none; }
.bang-chon__buoc b { color: var(--kn-chu); font-weight: 600; }
/* Hộp In: tấm trượt 92% ở iPad dọc */
.khung-truot--in .khung-truot__than { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding: 0 16px 16px; }
.hop-in__chinh { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hop-in__nhom { display: flex; flex-direction: column; gap: 8px; }
.hop-in__nhan { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.hop-in__muc { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); background: var(--kn-mat); }
.hop-in__muc-dau { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; font-size: var(--kn-c2); font-weight: 600; border-bottom: 1px solid var(--kn-vien); }
.hop-in__muc-ds { display: flex; flex-wrap: wrap; gap: 0 12px; padding: 0 8px; }
.hop-in__muc-ds .dong-chon { min-height: var(--kn-cao-nut); font-size: var(--kn-c2); }
.hop-in__xem { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; background: var(--kn-nen-2); border-radius: var(--kn-bo-14); min-width: 0; }
.hop-in__trang { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.khung-truot__chan--in { display: flex; align-items: center; gap: 12px; }
.khung-truot__chan--in .nut { width: auto; }
.khung-truot__chan--in .nut--chot { min-width: 200px; }
/* Xem trước trang in (bản Đen trắng, đúng bố cục V1, chữ Inter) */
.trang-in { width: 100%; max-width: 420px; aspect-ratio: 148 / 210; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; font-family: Inter, var(--kn-font); font-size: 7px; line-height: 10px; color: var(--kn-chu); overflow: hidden; }
.trang-in__dau { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--kn-chu); }
.trang-in__ten { font-size: 13px; line-height: 16px; font-weight: 800; }
.trang-in__loai { font-size: 11px; line-height: 14px; font-weight: 700; text-align: right; }
.trang-in__phu { color: var(--kn-chu-2); }
.trang-in__don { font-size: 8.5px; line-height: 12px; font-weight: 700; }
.trang-in table { width: 100%; border-collapse: collapse; }
.trang-in th { text-align: left; font-weight: 700; padding: 3px 2px; background: var(--kn-nen-2); border-top: 1px solid var(--kn-chu); border-bottom: 1px solid var(--kn-chu); }
.trang-in td { padding: 2px; }
.trang-in .so { text-align: right; }
.trang-in__tong td { border-top: 1px solid var(--kn-chu); border-bottom: 1px solid var(--kn-chu); font-weight: 700; padding: 3px 2px; }
.trang-in__ky { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 8px; font-weight: 700; }
.trang-in__ky span span { display: block; font-weight: 400; font-style: italic; color: var(--kn-chu-2); }
.trang-in__cam-on { text-align: center; font-style: italic; color: var(--kn-chu-2); margin-top: auto; }
/* Thu tiền: hạn, dòng xong */
.dong-ds__han { color: var(--kn-chu-2); }
/* Khóa PIN 4 số (iPad, điện thoại) */
.khoa-pin { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--kn-nen); padding: 24px; }
.khoa-pin__logo { display: flex; align-items: center; gap: 10px; font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; }
.khoa-pin__ai { font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu-2); text-align: center; }
.khoa-pin__ai b { display: block; font-size: var(--kn-c5); line-height: var(--kn-d5); color: var(--kn-chu); font-weight: 600; }
.khoa-pin__cham { display: flex; gap: 20px; }
.khoa-pin__cham span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--kn-vien-dam); }
.khoa-pin__cham span.da-go { background: var(--kn-muc); border-color: var(--kn-muc); }
.khoa-pin__ban { display: grid; grid-template-columns: repeat(3, 72px); gap: 16px 28px; }
.khoa-pin__phim { appearance: none; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--kn-vien-o); background: var(--kn-mat); font-family: var(--kn-font); font-size: var(--kn-c6); line-height: 1; font-weight: 400; color: var(--kn-chu); cursor: pointer; display: grid; place-items: center; }
.khoa-pin__phim:active { background: var(--kn-nen-3); box-shadow: 0 0 0 2px var(--kn-vien-dam); }
.khoa-pin__phim--chu { border-color: transparent; background: transparent; font-size: var(--kn-c3); font-weight: 600; }
.khoa-pin__phim:disabled { color: var(--kn-chu-tat); background: var(--kn-nen-2); border-color: var(--kn-vien); }
.khoa-pin__bao { min-height: 24px; font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu-2); text-align: center; }
.khoa-pin__bao--loi { color: var(--kn-loi-chu); font-weight: 600; }
/* Bảng vẽ nhiều màn cạnh nhau */
/* ==================== (6.2) Màn Đợt 2 · điện thoại nhân viên ==================== */
/* ===== Đợt 2 · Điện thoại (gộp vào kn.css khi bàn giao) ===== */
/* Bàn phím số iOS vẽ giản lược, có phím Tiếp */
.bp-so { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 84px; gap: 6px; padding: 8px 6px 28px; background: var(--kn-nen-3); }
.bp-so__phim { display: grid; place-items: center; height: 46px; border-radius: var(--kn-bo-6); background: var(--kn-mat); font-size: var(--kn-c5); line-height: 1; color: var(--kn-chu); box-shadow: 0 1px 0 var(--kn-vien-dam); }
.bp-so__phim--phu { background: var(--kn-nen-2); font-size: var(--kn-c2); }
.bp-so__phim--tiep { grid-row: span 2; height: auto; background: var(--kn-muc); color: var(--kn-trang); font-size: var(--kn-c3); font-weight: 600; box-shadow: none; }
/* Thẻ dòng điện thoại: dòng phụ HH trên Thuế, ô đang gõ */
.dong-the__thue { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dong-the--dang-go { border-color: var(--kn-vang-dam); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.dong-the--loi { background: var(--kn-loi-nen); border-color: var(--kn-loi-chu); }
.dong-the__tong { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.dong-the__tong b { font-size: var(--kn-c3); color: var(--kn-chu); }
/* Lưới hai cột cho ô đầu phiếu trên điện thoại */
.o-doi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* Dòng chỉ đọc ở chi tiết */
.dong-doc { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--kn-vien); }
.dong-doc:last-child { border-bottom: 0; }
.dong-doc__t1 { display: flex; gap: 8px; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.dong-doc__t1 .cat { flex: 1; }
.dong-doc__t2 { display: flex; justify-content: space-between; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.khoi { background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.khoi--nen { background: var(--kn-nen); }
/* Hộp thư đi */
.thu-di { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; border-bottom: 1px solid var(--kn-vien); }
.thu-di:last-child { border-bottom: 0; }
.thu-di__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.thu-di__t1 { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thu-di__t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.thu-di__nhom { padding: 12px 12px 6px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
/* Hộp In: xem trước trang thật thu nhỏ */
.xem-in { display: flex; justify-content: center; padding: 12px; background: var(--kn-nen-2); border-radius: var(--kn-bo-14); }
.xem-in__trang { width: 132px; aspect-ratio: 148 / 210; background: var(--kn-mat); box-shadow: var(--kn-bong-1); padding: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 6px; line-height: 8px; color: var(--kn-chu); }
.xem-in__vach { height: 4px; border-radius: 2px; background: var(--kn-nen-3); }
.xem-in__vach--dam { background: var(--kn-chu-2); }
/* Khung nhiều màn trong một bảng vẽ */
/* ==================== (6.3) Màn Đợt 3 · máy tính ==================== */
/* ===== Đợt 3 · máy tính (gộp vào kn.css khi bàn giao) ===== */
/* Bảng cho phép xuống dòng (Ghép mã, Hóa đơn): dòng ≥ 44, mọi ô canh giữa */
.bang--gian td { white-space: normal; height: auto; min-height: var(--kn-cao-dong-ds); padding-top: 8px; padding-bottom: 8px; }
.bang tbody tr.can-xem td:first-child { box-shadow: inset 4px 0 0 var(--kn-cho-chu); }
.bang tbody tr.vua-lam { background: var(--kn-vang-nen); }
.bang tbody tr.dong-con td { background: var(--kn-nen); }
.bang tbody tr.dong-con td.thut { padding-left: 32px; }
.bang tbody tr.dong-gop-goc td { background: var(--kn-nen); font-size: var(--kn-c2); color: var(--kn-chu-2); }
/* Ghép mã: ô hàng bảng kê, ô mã trên Thuế, tồn, quy đổi */
.gm-ten { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--kn-c2); line-height: var(--kn-d2); }
.gm-ten__gop { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.gm-ma { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 44px; padding: 4px 10px; text-align: left; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); font-family: var(--kn-font); color: var(--kn-chu); cursor: pointer; }
.gm-ma__ma { font-family: var(--kn-font-ma); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; }
.gm-ma__ten { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.gm-ma__ly-do { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-cho-chu); font-weight: 400; }
.gm-ma--chua { border: 1.5px dashed var(--kn-loi-chu); background: var(--kn-loi-nen); color: var(--kn-loi-chu); font-weight: 600; font-size: var(--kn-c2); }
.gm-ma--goi-y { background: var(--kn-cho-nen); border-color: var(--kn-cho-vien); }
.gm-ma[aria-expanded="true"] { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); }
.gm-ton { display: inline-flex; white-space: nowrap; align-items: baseline; gap: 4px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; }
.gm-ton--du { color: var(--kn-xong-chu); }
.gm-ton--thieu { color: var(--kn-cho-chu); }
.gm-ton--het { color: var(--kn-loi-chu); }
.gm-ton__phu { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; color: var(--kn-chu-2); }
.gm-quy-doi { display: inline-block; white-space: normal; padding: 2px 8px; border-radius: var(--kn-bo-6); background: var(--kn-nen-2); color: var(--kn-chu); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; }
.gm-duyet { font-size: var(--kn-c2); color: var(--kn-chu-2); white-space: nowrap; }
.gm-loc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; background: var(--kn-nen); }
.gm-loc .o-nhap { width: 340px; margin-left: auto; }
.gm-dem { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.dau-hinh { flex: none; }
.chip .dau-hinh { width: 10px; height: 10px; }
.gm-ton .dau-hinh { margin-right: 2px; align-self: center; }
/* Bộ chọn mã: bảng nổi 520, mỗi gợi ý ba tầng */
.bang-chon--ma { width: 520px; min-width: 0; max-height: none; }
.bang-chon__goi-y { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--kn-bo-10); background: transparent; text-align: left; font-family: var(--kn-font); color: var(--kn-chu); cursor: pointer; }
.bang-chon__goi-y.dang-to { background: var(--kn-nen-2); }
.bang-chon__goi-y .gm-ma__ma { grid-column: 1; }
.bang-chon__goi-y .gm-ma__ten { grid-column: 1; }
.bang-chon__goi-y .gm-ton { grid-column: 2; grid-row: 1; justify-self: end; }
.bang-chon__goi-y .bang-chon__sl { grid-column: 2; grid-row: 2; justify-self: end; font-size: var(--kn-c1); color: var(--kn-chu-2); }
.bang-chon__goi-y.dang-to .gm-ma__ten, .bang-chon__goi-y.dang-to .bang-chon__sl { color: var(--kn-chu-2); }
.bang-chon__goi-y--het .gm-ma__ma, .bang-chon__goi-y--het .gm-ma__ten { color: var(--kn-chu-2); }
.bang-chon__nho { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px; font-size: var(--kn-c2); }
.bang-chon__viec-ma { display: flex; gap: 4px; padding: 0 8px; border-top: 1px solid var(--kn-vien); flex: none; }
.bang-chon__viec-ma .nut { flex: none; font-size: var(--kn-c2); padding: 0 5px; gap: 4px; }
.bang-chon__viec-ma .nut .ic { width: 18px; height: 18px; }
.bang-chon--ma .bang-chon__ds { min-height: 150px; }
.bang-chon--ma .bang-chon__nho { flex: none; padding: 6px 8px 6px 12px; border-top: 1px solid var(--kn-vien); }
/* Đầu màn gọn máy tính */
.dau-mt { display: flex; flex-direction: column; gap: 10px; padding: 12px var(--kn-le) 8px; background: var(--kn-nen); flex: none; }
.dau-mt__hang { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.dau-mt__ten { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; }
.dau-mt__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.dau-mt__khoang { flex: 1; }
.luoi-dau { display: grid; grid-template-columns: repeat(var(--kn-so-cot, 4), minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
.khoi-thu { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 8px 8px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.khoi-thu b { color: var(--kn-chu); font-weight: 600; }
.radio-the--ngang { flex-direction: row; }
.radio-the--ngang .radio-the__dong { min-height: var(--kn-cao-nut); padding: 0 12px; flex: 1; white-space: nowrap; }
.nang-deu { display: inline-flex; align-items: center; gap: 8px; font-size: var(--kn-c2); color: var(--kn-chu-2); }
.nang-deu .o-bang { width: 72px; border-color: var(--kn-vien-o); background: var(--kn-mat); }
.nang-deu .o-bang input { text-decoration: none; }
/* Thanh tổng chân màn máy tính */
.chan-man__lech { color: var(--kn-loi-chu); font-weight: 600; }
.chan-man__tong-ngang { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; font-size: var(--kn-c2); color: var(--kn-chu-2); }
.chan-man__tong-ngang b { color: var(--kn-chu); font-size: var(--kn-c4); font-weight: 700; }
.chan-man__tong-ngang .chan-man__so { color: var(--kn-chu); }
.chan-man__chenh { color: var(--kn-xong-chu); }
.chan-man__chenh b { color: var(--kn-xong-chu); }
.phim { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-6); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu-2); background: var(--kn-mat); }
/* Xem cạnh: hai chứng từ, đường chia */
.xem-canh { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.xem-canh__ngan { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--kn-nen); }
.xem-canh__ngan + .xem-canh__ngan { border-left: 2px solid var(--kn-vien-o); }
.xem-canh__dau { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--kn-mat); border-bottom: 1px solid var(--kn-vien); flex: none; }
/* Máy hiểu như sau: bảng trái + ảnh gốc phải */
.doc-file { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; min-height: 0; }
.anh-goc { display: flex; flex-direction: column; gap: 8px; }
.anh-goc__trang { flex: 1; min-height: 360px; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-10); background: var(--kn-mat); padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.anh-goc__vach { display: block; height: 6px; border-radius: 3px; background: var(--kn-nen-3); }
.bien-the { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* ==================== (6.4a) Màn Đợt 4a · chuỗi chứng từ còn lại ==================== */
/* ===== Đợt 4a · Báo giá, Bảng kê, Giá kê, Hóa đơn, Thu tiền, tab Đang làm, Hộp thư đi ===== */
.tong-loc { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu); white-space: nowrap; }
.radio-the__chu { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.radio-the__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); font-weight: 400; }
/* Cảnh báo trong tab Đang làm: một dòng một việc */
.ds-viec { background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.ds-viec__dau { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; background: var(--kn-nen-2); border-bottom: 1px solid var(--kn-vien); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 700; }
.dong-viec { display: flex; align-items: center; gap: 12px; min-height: var(--kn-cao-dong-2); padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--kn-vien); box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.dong-viec:last-child { border-bottom: 0; }
.dong-viec--vang { box-shadow: inset 4px 0 0 var(--kn-cho-chu); }
.dong-viec > .ic { flex: none; color: var(--kn-loi-chu); }
.dong-viec--vang > .ic { color: var(--kn-cho-chu); }
.dong-viec__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dong-viec__t1 { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; color: var(--kn-chu); }
.dong-viec__t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dong-viec__nut { display: flex; gap: 8px; flex: none; }
/* Hộp thư đi */
.thu-di-the { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.thu-di-the--loi { border-color: var(--kn-loi-chu); box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.thu-di-the__t1 { display: flex; align-items: center; gap: 12px; }
.thu-di-the__ten { flex: 1; min-width: 0; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thu-di-the__tien { flex: none; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; }
.thu-di-the__t2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.thu-di-the__ly-do { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-loi-chu); }
.thu-di-the__nut { display: flex; gap: 8px; flex-wrap: wrap; }
.dang-gui { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kn-c2); color: var(--kn-chu-2); }
/* Khối Thông tin báo giá thu gọn */
.khoi-gon { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.khoi-gon__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.khoi-gon__t1 { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.khoi-gon__t2 { font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dòng phụ dưới tên hàng trong bảng (Khách ghi, ghi chú) */
.bang__dong-phu { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bang tr.bang__nhom-phieu td { height: 44px; background: var(--kn-nen); font-size: var(--kn-c2); font-weight: 600; }
.bang td.so-nho { font-size: var(--kn-c2); color: var(--kn-chu-2); }
.chenh { color: var(--kn-xong-chu); }
/* Ô HH trên Thuế: 3 dạng */
.o-thue { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: var(--kn-bo-10); border: 1px solid transparent; white-space: normal; }
.o-thue__ma { font-family: var(--kn-font-ma); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu); }
.o-thue__ten { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.o-thue__ly-do { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-cho-chu); }
.o-thue--khop .o-thue__ma::before { content: "✓ "; color: var(--kn-xong-chu); }
.o-thue--xem { background: var(--kn-cho-nen); border-color: var(--kn-cho-vien); }
.o-thue--chua { border: 1.5px dashed var(--kn-loi-chu); color: var(--kn-loi-chu); font-size: var(--kn-c2); font-weight: 600; flex-direction: row; align-items: center; gap: 6px; min-height: 40px; }
.bang tbody tr.dong-con td.thut { padding-left: 32px; }
.bang tbody tr.dong-con td { background: var(--kn-nen); }
.bang td.o-goi { white-space: normal; }
/* Ghép mã · thẻ iPad dọc */
.the-ghep { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 160px; padding: 14px 14px 12px 18px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.the-ghep--xem { box-shadow: inset 5px 0 0 var(--kn-cho-chu); }
.the-ghep--chon { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); }
.the-ghep__t1 { display: flex; align-items: flex-start; gap: 12px; }
.the-ghep__ten { flex: 1; min-width: 0; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; }
.the-ghep__tien { flex: none; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; }
.the-ghep__hang { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.ton { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; white-space: nowrap; }
.ton--du { color: var(--kn-xong-chu); }
.ton--thieu { color: var(--kn-cho-chu); }
.ton--het { color: var(--kn-loi-chu); }
.quy-doi { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: var(--kn-bo-6); background: var(--kn-nen-2); color: var(--kn-chu); font-size: var(--kn-c2); font-weight: 400; }
.da-duyet { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.dem-ghep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); font-size: var(--kn-c2); line-height: var(--kn-d2); }
.goi-y { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--kn-bo-10); min-height: 64px; }
.goi-y[aria-selected="true"] { background: var(--kn-vang-nen); box-shadow: inset 0 0 0 1px var(--kn-vang-dam); }
.goi-y__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goi-y__ben { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.khung-truot--ghep { top: 220px; max-height: none; }
.khung-truot .bang-chon__nhom { padding: 0 4px; }
/* Thu tiền · Xem */
.khoan-thu .o-bang { width: 100%; }
/* Thanh tổng dính đáy màn chi tiết (Bảng kê, Giá kê, Hóa đơn) */
.thanh-tong--day { flex: none; justify-content: flex-end; border-radius: 0; border-width: 1px 0 0; min-height: 56px; padding: 8px var(--kn-le); }
/* ==================== (6.4b) Màn Đợt 4b · quản lý ==================== */
/* ===== Đợt 4b · Mua hàng · Kho · Báo cáo · Lịch sử · Danh mục · Cài đặt · Đăng nhập · Nhập file ===== */
/* Tab gạch dưới (Danh mục) · cao 48 · cuộn ngang */
.tab-gach { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--kn-vien); flex: none; }
.tab-gach__nut { appearance: none; border: 0; background: transparent; flex: none; height: var(--kn-cao-nut); padding: 0 14px; font-family: var(--kn-font); font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 400; color: var(--kn-chu-2); cursor: pointer; white-space: nowrap; }
.tab-gach__nut[aria-selected="true"] { color: var(--kn-chu); font-weight: 600; box-shadow: inset 0 -2px 0 var(--kn-muc); }
/* Khối form · thẻ trắng bo 12 */
.khoi-lon { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.khoi-lon__dau { display: flex; align-items: center; gap: 12px; }
.khoi-lon__tieu-de { flex: 1; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.khoi-lon .bang { border-radius: var(--kn-bo-10); }
.hang-chip-ten { display: flex; flex-wrap: wrap; gap: 8px; }
/* Cài đặt · dòng 56 · nhãn trái, giá trị hoặc ô phải · tự lưu */
.nhom-cai { background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.nhom-cai__tieu-de { padding: 0 4px 8px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.dong-cai { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 6px 16px; border-bottom: 1px solid var(--kn-vien); font-size: var(--kn-c3); line-height: var(--kn-d3); }
.dong-cai:last-child { border-bottom: 0; }
.dong-cai__nhan { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dong-cai__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.dong-cai__gia-tri { flex: none; max-width: 55%; text-align: right; color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dong-cai .o-nhap__o, .dong-cai .o-chon__o { width: 260px; }
/* Biểu đồ cột · một màu mực · tháng đang xem vàng đậm · trục 13 chu-2 */
.bieu-do { display: flex; align-items: flex-end; gap: 16px; height: 220px; padding: 0 8px; border-bottom: 1px solid var(--kn-vien-o); }
.bieu-do__cot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bieu-do__so { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); white-space: nowrap; }
.bieu-do__thanh { width: 100%; max-width: 56px; background: var(--kn-muc); border-radius: 4px 4px 0 0; }
.bieu-do__cot.dang-xem .bieu-do__thanh { background: var(--kn-vang-dam); }
.bieu-do__cot.dang-xem .bieu-do__so { color: var(--kn-chu); font-weight: 600; }
.bieu-do__truc { display: flex; gap: 16px; padding: 6px 8px 0; }
.bieu-do__truc span { flex: 1; text-align: center; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
/* Lịch sử · nhóm theo ngày · dòng 60 */
.ls__ngay { position: sticky; top: 0; z-index: var(--kn-z-dinh); display: flex; align-items: center; height: 40px; padding: 0 16px; background: var(--kn-nen-2); border-bottom: 1px solid var(--kn-vien); font-size: var(--kn-c2); font-weight: 700; }
.dong-ls { display: grid; grid-template-columns: 64px 120px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; min-height: 60px; padding: 6px 12px 6px 16px; border-bottom: 1px solid var(--kn-vien); background: var(--kn-mat); }
.dong-ls__gio { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.dong-ls__nguoi { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dong-ls__viec { font-size: var(--kn-c3); line-height: var(--kn-d3); min-width: 0; }
.dong-ls__viec .cu { color: var(--kn-chu-3); text-decoration: line-through; }
.dong-ls__viec .moi { color: var(--kn-chu); font-weight: 600; }
.dong-ls--vua { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
/* Nhật ký · khung trượt phải 480 */
.truot-phai { position: absolute; top: 0; right: 0; bottom: 0; width: 480px; display: flex; flex-direction: column; background: var(--kn-mat); box-shadow: var(--kn-bong-3); z-index: var(--kn-z-hop); }
.truot-phai__dau { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--kn-vien); flex: none; }
.truot-phai__than { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 20px; display: flex; flex-direction: column; }
.moc { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 0 12px 22px; border-left: 2px solid var(--kn-vien); margin-left: 5px; }
.moc::before { content: ""; position: absolute; left: -7px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--kn-mat); border: 2px solid var(--kn-vien-dam); }
.moc__dau { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.moc__viec { font-size: var(--kn-c3); line-height: var(--kn-d3); }
.moc__viec .cu { color: var(--kn-chu-3); text-decoration: line-through; }
.moc__viec .moi { font-weight: 600; }
/* Nhập file · 3 ô lớn 120 · kéo thả · tiến trình 4px */
.luoi-nhap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.o-lon { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 120px; padding: 12px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-14); font-family: var(--kn-font); font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; color: var(--kn-chu); cursor: pointer; text-align: center; }
.o-lon .ic { width: 28px; height: 28px; color: var(--kn-chu-2); }
.o-lon--tha { border: 2px dashed var(--kn-vien-dam); color: var(--kn-chu-2); font-weight: 400; }
.o-lon--dang-keo { border-color: var(--kn-vang-dam); background: var(--kn-vang-nen); color: var(--kn-chu); font-weight: 600; }
.tien-trinh { height: 4px; border-radius: 2px; background: var(--kn-nen-3); overflow: hidden; }
.tien-trinh__vach { height: 100%; background: var(--kn-muc); border-radius: 2px; }
/* Đăng nhập · thẻ giữa màn rộng 400 */
.man-dang-nhap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; background: var(--kn-nen); }
.the-dang-nhap { width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; padding: 32px 28px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-20); }
.the-dang-nhap__ten { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 700; }
.the-dang-nhap__ten .thanh-trai__cham { width: 10px; height: 10px; }
.the-dang-nhap .nut--chot { width: 100%; height: 52px; }
.o-nhap__loi { display: flex; align-items: flex-start; gap: 6px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-loi-chu); }
.o-nhap__loi .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--kn-loi-chu); }
/* Bảng: dòng chờ mã · dòng mở ra · số lệch */
.bang tbody tr.cho-ma { background: var(--kn-cho-nen); }
.bang tbody tr.cho-ma td:first-child { box-shadow: inset 4px 0 0 var(--kn-cho-chu); }
.bang tbody tr.mo-ra { background: var(--kn-vang-nen); }
.bang tbody tr.mo-ra td:first-child { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.bang tbody tr.dong-gop td { background: var(--kn-nen); height: 40px; font-size: var(--kn-c2); color: var(--kn-chu-2); }
.bang tbody tr.dong-gop td:first-child { box-shadow: inset 4px 0 0 var(--kn-vang-vien); }
/* anh 09/11: lọc Đã gộp — bản đã gộp thụt dưới bản giữ lại (iPad, điện thoại) */
.dong-ds--gop { background: var(--kn-nen); padding-left: 32px; box-shadow: inset 4px 0 0 var(--kn-vang-vien); cursor: pointer; }
.dong-ds--gop .dong-ds__nguoi { font-weight: 600; }
.luoi-the > .dong-ds--gop { grid-column: 1 / -1; border-radius: var(--kn-bo, 8px); }
.bang .am { color: var(--kn-loi-chu); font-weight: 600; }
.bang td.cot-dau-bang { white-space: normal; }
/* Báo cáo · thẻ khối kiểm */
.khoi-kiem { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.khoi-kiem__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.khoi-kiem__t1 { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.khoi-kiem__t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
/* Quét ảnh · lưới ảnh nhỏ */
.luoi-anh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.anh-nho { position: relative; aspect-ratio: 3 / 4; border-radius: var(--kn-bo-10); border: 1px solid var(--kn-vien); background: var(--kn-nen-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); text-align: center; padding: 4px; }
.anh-nho .ic { width: 24px; height: 24px; }
.anh-nho--xong { background: var(--kn-xong-nen); border-color: var(--kn-xong-vien); color: var(--kn-xong-chu); }
.anh-nho--dang { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); color: var(--kn-chu); font-weight: 600; }
.anh-nho--loi { background: var(--kn-loi-nen); border-color: var(--kn-loi-vien); color: var(--kn-loi-chu); }
/* Lưu hàng loạt · lý do ngay dưới dòng lỗi */
.bang tbody tr.ly-do td { height: auto; padding: 4px 12px 10px; background: var(--kn-loi-nen); white-space: normal; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-loi-chu); }
.bang tbody tr.dong-loi + tr.ly-do td:first-child, .bang tbody tr.dong-loi td:first-child { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
/* ==================== (6.4c) Màn Đợt 4c · màn còn thiếu ==================== */
/* ===== Đợt 4c: màn bổ sung (gộp vào kn.css khi bàn giao) ===== */
/* Nhiều màn cạnh nhau trên một bảng vẽ (chỉ dùng cho bảng vẽ) */
/* Hộp Chia sẻ: 3 nút lớn 120 × 96 */
.chia-lon { display: flex; gap: 12px; }
.chia-lon__nut { appearance: none; width: 120px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-14); font-family: var(--kn-font); font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; color: var(--kn-chu); cursor: pointer; }
.chia-lon__nut .ic { width: 28px; height: 28px; color: var(--kn-chu-2); }
.chia-lon__nut[aria-busy="true"] { background: var(--kn-nen-2); color: var(--kn-chu-2); }
.chia-lon__nut.xong { border-color: var(--kn-xong-vien); background: var(--kn-xong-nen); color: var(--kn-xong-chu); }
.chia-lon__nut.xong .ic { color: var(--kn-xong-chu); }
.nhom-o { display: flex; flex-direction: column; gap: 8px; }
.nhom-o__nhan { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu); }
.cot-gat { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.cot-gat .dong-chon { min-height: var(--kn-cao-nut); font-size: var(--kn-c2); }
/* Thanh Đang mở: bảng vẽ ba trạng thái */
.dai-mo { display: flex; flex-direction: column; border: 1px solid var(--kn-vien-o); border-radius: 12px; overflow: hidden; background: var(--kn-nen); }
.dai-mo__than { height: 96px; padding: 16px; display: flex; gap: 12px; }
.chip-mo .chip-chuoi__cham { margin-right: 2px; }
/* Ghép mã iPad ngang: hai ngăn */
.gm2 { display: flex; flex: 1; min-height: 0; }
.gm2__trai { width: 380px; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--kn-vien); background: var(--kn-mat); }
.gm2__ds { flex: 1; min-height: 0; overflow-y: auto; }
.gm2__dong { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; min-height: 58px; border-bottom: 1px solid var(--kn-vien); position: relative; }
.gm2__dong.dang-chon { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.gm2__dong-t1 { display: flex; align-items: center; gap: 8px; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.gm2__dong-t1 .cat { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm2__dong-t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm2__phai { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.gm2__than { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.gm2__goc { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.gm2__goc-t1 { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.gm2__goc-t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.gm2 .bang-chon { position: static; width: 100%; min-width: 0; max-height: none; box-shadow: none; }
.ai-dang { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--kn-nen-2); border-radius: var(--kn-bo-10); font-size: var(--kn-c3); line-height: var(--kn-d3); }
.ai-dang .tien-trinh { flex: 1; }
/* Đối chứng Thật | Kê */
.doi-chung { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1; min-height: 0; }
.doi-chung__khoi { display: flex; flex-direction: column; min-height: 0; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.doi-chung__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--kn-vien); font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.doi-chung__dau .ds__ben { font-size: var(--kn-c3); color: var(--kn-chu); font-weight: 700; }
.doi-chung__khoi .bang { border: 0; border-radius: 0; }
.doi-chung__khoi .bang tr.khac td { background: var(--kn-vang-nen); }
.doi-chung__khoi .bang tr.khac td:first-child { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
/* Đối chiếu báo giá: cột Khách ghi */
.khach-ghi { display: flex; flex-direction: column; }
.khach-ghi__chu { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; white-space: normal; }
.khach-ghi__phu { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.bang td.khop-ok { color: var(--kn-xong-chu); font-weight: 600; }
.bang td.khop-hoi { color: var(--kn-cho-chu); font-weight: 600; }
/* Báo cáo: khối 2 × 2, đường giá mua */
.luoi-khoi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duong-gia { width: 100%; height: 160px; display: block; }
.duong-gia__truc { stroke: var(--kn-vien); stroke-width: 1; }
.duong-gia__net { fill: none; stroke: var(--kn-muc); stroke-width: 2; }
.duong-gia__diem { fill: var(--kn-muc); }
.duong-gia__chu { font-size: var(--kn-c1); fill: var(--kn-chu-2); font-family: var(--kn-font); }
.hang-abc { display: inline-grid; place-items: center; width: 28px; min-height: 24px; border-radius: var(--kn-bo-6); background: var(--kn-nen-2); font-size: var(--kn-c1); font-weight: 700; color: var(--kn-chu); }
.khoi-kiem.khoi-kiem--mo { flex-direction: column; align-items: stretch; }
.khoi-kiem__hang { flex: 1; display: flex; align-items: center; gap: 16px; }
/* Cây loại hàng */
.cay { width: 320px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow-y: auto; }
.cay__dong { appearance: none; border: 0; background: transparent; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu); text-align: left; cursor: pointer; }
.cay__dong .ic { width: 16px; height: 16px; color: var(--kn-chu-2); }
.cay__dong--con { padding-left: 34px; }
.cay__dong--chau { padding-left: 58px; }
.cay__dong[aria-current="true"] { background: var(--kn-vang-nen); font-weight: 600; box-shadow: inset 3px 0 0 var(--kn-vang-dam); }
.cay__dem { margin-left: auto; font-size: var(--kn-c1); color: var(--kn-chu-2); }
/* Khung giao diện: 4 ô chọn */
.o-khung { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.o-khung__nut { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); background: var(--kn-mat); font-family: var(--kn-font); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu); cursor: pointer; }
.o-khung__nut .ic { width: 22px; height: 22px; color: var(--kn-chu-2); }
.o-khung__nut[aria-pressed="true"] { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); font-weight: 600; }
/* Ô trạng thái gộp (rỗng · đang tải) */
.luoi-tt { display: grid; grid-template-columns: 180px 1fr 1fr; gap: 16px; align-items: stretch; }
.luoi-tt__nhan { display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.luoi-tt__nhan span { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu-2); }
.luoi-tt__o { height: 320px; display: flex; flex-direction: column; background: var(--kn-nen); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; padding: 16px; gap: 12px; }
.luoi-tt__o .bang, .luoi-tt__o .rong { flex: 1; }
/* ==================== (6.5) Màn Đợt 5 · bản in, PDF, Excel ==================== */
/* kn_dot5.css · Đợt 5 · Bản in, PDF, Excel (mục 7 kế hoạch, bố cục V1 trong mau_chuan).
Màu bản in là riêng của bản in (không theo token màn hình) nên khai báo nhóm biến --kn-in-*.
Hai chế độ: .in-mau (Màu: PDF, Chia sẻ) và .in-den (Đen trắng: In ra Brother HL-2130).
Code thật: Inter tự chứa trong web (chạy mất mạng); @import trên chỉ để bảng vẽ hiện đúng phông. */
/* ===== (1) BIẾN BẢN IN ===== */
:root {
--kn-in-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--kn-in-font-hieu: Georgia, "Times New Roman", serif; /* chữ KIM NHUNG của logo V1 (code thật dùng SVG logo) */
--kn-in-giay: #FFFFFF;
--kn-in-ban: #E7E5E4; /* nền bàn quanh tờ giấy trên bảng vẽ */
--kn-in-le-mo: #C9A24A; /* đường lề mờ để kiểm, chỉ trên bảng vẽ */
/* Excel (giao diện bảng tính để làm hình mẫu) */
--kn-xl-nen-tieu-de: #F3F3F3;
--kn-xl-luoi: #D4D4D4;
--kn-xl-chu-tieu-de: #444444;
--kn-xl-chon: #217346;
--kn-xl-tab: #FFFFFF;
--kn-xl-chu: #000000;
--kn-xl-chu-xam: #595959;
}
.in-mau {
--kn-in-chu: #1C1917; /* chữ chính */
--kn-in-chu-2: #57534E; /* nhãn, địa chỉ */
--kn-in-chu-3: #78716C; /* lời cảm ơn nghiêng xám, Đơn vị tính */
--kn-in-vang: #C9A24A; /* nền ô logo KN */
--kn-in-nau: #9A6A0C; /* chữ KIM NHUNG, kẻ trên/dưới tiêu đề cột, vạch trái Ghi chú chung */
--kn-in-nen: #FBF5E6; /* nền tiêu đề cột, dòng TỔNG CỘNG */
--kn-in-ke: #E7E5E4; /* kẻ ngang mảnh giữa dòng */
--kn-in-ke-dam: #9A6A0C; /* kẻ đậm */
--kn-in-logo-chu: #1C1917; /* chữ KN trên ô vàng */
--kn-in-logo-nen: #C9A24A;
}
.in-den {
--kn-in-chu: #000000;
--kn-in-chu-2: #000000;
--kn-in-chu-3: #000000;
--kn-in-vang: #000000;
--kn-in-nau: #000000;
--kn-in-nen: #EDEDED; /* xám nhạt: tiêu đề cột, dòng tổng */
--kn-in-ke: #9E9E9E; /* kẻ đậm hơn bản màu */
--kn-in-ke-dam: #000000;
--kn-in-logo-chu: #FFFFFF; /* logo đen */
--kn-in-logo-nen: #000000;
}
/* ===== (2) BẢNG VẼ ===== */
.kn.kn-in { background: var(--kn-in-ban); font-family: var(--kn-in-font); }
.in-ban { display: flex; gap: 40px; align-items: flex-start; padding: 0; }
.in-ghi-bv { width: 320px; flex: none; display: flex; flex-direction: column; gap: 12px; padding: 24px 0 0; font-family: var(--kn-font); font-size: 14px; line-height: 20px; color: var(--kn-chu-2); }
.in-ghi-bv b { color: var(--kn-chu); font-weight: 600; }
.in-ghi-bv__muc { padding: 10px 12px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-10); }
/* ===== (3) TỜ GIẤY ===== */
.in-trang {
position: relative; flex: none; background: var(--kn-in-giay); color: var(--kn-in-chu);
font-family: var(--kn-in-font); font-variant-numeric: tabular-nums; overflow: hidden;
display: flex; flex-direction: column;
}
.in-a4 { width: 794px; height: 1123px; padding: 38px; font-size: 14px; line-height: 20px; }
/* A4 dọc, lề 10 mm, chữ vừa 14px */
.in-a4n { width: 1123px; height: 794px; padding: 38px; font-size: 16px; line-height: 22px; }
/* A4 ngang, lề 10 mm, chữ lớn 16px */
.in-a4.in-lon { font-size: 15px; line-height: 21px; }
/* Bảng kê A4 dọc chữ lớn */
.in-a5 { width: 559px; height: 794px; padding: 30px; font-size: 11.5px; line-height: 16px; }
/* A5, lề 8 mm, chữ 11,5 / 13,5 */
.in-a5 .in-bang { font-size: 11.5px; }
.in-a5 .in-dau__tieu-de { font-size: 19px; line-height: 24px; }
.in-a5 .in-khach__gia-tri--to { font-size: 13.5px; }
/* đường lề mờ để kiểm (chỉ bảng vẽ) */
.in-le::after { content: ""; position: absolute; inset: 38px; border: 1px dashed var(--kn-in-le-mo); opacity: .5; pointer-events: none; }
.in-a5.in-le::after { inset: 30px; }
/* một hàng trống đầu và cuối trang */
.in-than { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 0 0; }
.in-chan-trang { position: absolute; right: 38px; bottom: 14px; font-size: 10px; line-height: 14px; color: var(--kn-in-chu-3); }
.in-a5 .in-chan-trang { right: 30px; bottom: 10px; font-size: 9px; }
/* ===== (4) ĐẦU CHỨNG TỪ ===== */
.in-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 14px; border-bottom: 1.5px solid var(--kn-in-nau); }
.in-hieu { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.in-hieu__dong { display: flex; align-items: center; gap: 12px; }
.in-hieu__o { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--kn-in-logo-nen); color: var(--kn-in-logo-chu); font-family: var(--kn-in-font-hieu); font-size: 26px; font-weight: 700; letter-spacing: -1px; }
.in-hieu__chu { display: flex; flex-direction: column; gap: 2px; }
.in-hieu__ten { font-family: var(--kn-in-font-hieu); font-size: 32px; line-height: 34px; font-weight: 700; letter-spacing: 1.5px; color: var(--kn-in-nau); white-space: nowrap; }
.in-hieu__phu { display: flex; align-items: center; gap: 8px; font-family: var(--kn-in-font-hieu); font-size: 10px; letter-spacing: 2.4px; color: var(--kn-in-nau); white-space: nowrap; }
.in-hieu__phu::before, .in-hieu__phu::after { content: ""; flex: 1; height: 1px; background: var(--kn-in-nau); min-width: 28px; }
.in-hieu__tt { font-size: 0.78em; line-height: 1.45; color: var(--kn-in-chu-2); }
.in-hieu__tt b { color: var(--kn-in-chu); font-weight: 700; }
.in-dau__phai { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.in-dau__tieu-de { font-size: 26px; line-height: 30px; font-weight: 800; color: var(--kn-in-chu); white-space: nowrap; }
.in-dau__anh { margin: 2px 0 8px; font-size: 9.5px; line-height: 12px; letter-spacing: 3px; font-weight: 600; color: var(--kn-in-nau); }
.in-meta { display: grid; grid-template-columns: auto auto; gap: 2px 8px; font-size: 0.86em; line-height: 1.5; }
.in-meta dt { color: var(--kn-in-chu-2); }
.in-meta dd { margin: 0; font-weight: 700; color: var(--kn-in-chu); }
.in-meta dd.in-meta__tam { font-weight: 700; }
.in-a5 .in-hieu__o { width: 40px; height: 40px; font-size: 19px; }
.in-a5 .in-hieu__ten { font-size: 22px; line-height: 24px; }
.in-a5 .in-hieu__phu { font-size: 8px; letter-spacing: 1.6px; }
/* ===== (5) KHỐI KHÁCH ===== */
.in-khach { display: grid; gap: 10px 18px; padding: 14px 0 10px; }
.in-khach--4 { grid-template-columns: 1.5fr 1.5fr 1fr 1fr; }
.in-khach__nhan { display: block; font-size: 9.5px; line-height: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--kn-in-chu-2); }
.in-khach__gia-tri { display: block; font-weight: 700; color: var(--kn-in-chu); }
.in-khach__gia-tri--to { font-size: 1.15em; }
.in-khach__phu { display: block; font-size: .86em; line-height: 1.4; color: var(--kn-in-chu-2); }
.in-don-vi { padding: 16px 0 6px; display: flex; flex-direction: column; gap: 2px; }
.in-don-vi__ten { font-weight: 700; font-size: 1.05em; }
.in-don-vi p { margin: 0; }
.in-ghi-chung { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--kn-in-nau); background: var(--kn-in-giay); font-size: .93em; }
.in-ghi-chung b { font-weight: 700; }
.in-dvt { text-align: right; font-style: italic; font-size: .82em; color: var(--kn-in-chu-3); padding: 4px 0 4px; }
.in-tam { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1px dashed var(--kn-in-chu); font-size: .82em; font-weight: 600; }
/* ===== (6) BẢNG HÀNG ===== */
.in-bang { width: 100%; border-collapse: collapse; table-layout: fixed; }
.in-bang th { padding: 8px 6px; background: var(--kn-in-nen); border-top: 1.5px solid var(--kn-in-ke-dam); border-bottom: 1.5px solid var(--kn-in-ke-dam); font-size: .8em; line-height: 1.25; font-weight: 700; text-transform: uppercase; text-align: left; color: var(--kn-in-chu); }
.in-bang td { padding: 6px 6px; border-bottom: 1px solid var(--kn-in-ke); vertical-align: top; }
.in-bang .giua { text-align: center; }
.in-bang .so { text-align: right; white-space: nowrap; }
.in-bang .dam { font-weight: 700; }
.in-bang .nhat { color: var(--kn-in-chu-2); font-style: italic; }
.in-bang__nhom td { padding-top: 9px; font-weight: 700; border-bottom: 1px solid var(--kn-in-ke); }
.in-bang__phieu td { padding-top: 9px; font-weight: 700; background: var(--kn-in-giay); }
.in-bang__phieu td span { font-weight: 400; color: var(--kn-in-chu-2); }
.in-bang__cong td { font-weight: 600; border-bottom: 1px solid var(--kn-in-ke); }
.in-bang__phi td { color: var(--kn-in-chu); }
.in-bang__tong td { background: var(--kn-in-nen); border-top: 1.5px solid var(--kn-in-ke-dam); border-bottom: 1.5px solid var(--kn-in-ke-dam); font-weight: 800; font-size: 1.08em; padding: 9px 6px; }
.in-bang__tong td.in-bang__tong-nhan { text-align: right; }
.in-bang__tong small { font-size: .78em; font-weight: 500; }
.in-bang__cot-nhom th { text-align: center; border-bottom: 1px solid var(--kn-in-ke-dam); font-size: .74em; }
.in-bang th.so { text-align: right; }
.in-bang th.giua { text-align: center; }
.in-bang--ke td { border-left: 0; border-right: 0; }
/* ===== (7) CUỐI CHỨNG TỪ ===== */
.in-bang-chu { padding: 10px 0 2px; }
.in-bang-chu b { font-weight: 700; }
.in-dieu-khoan { padding-top: 10px; }
.in-dieu-khoan__nhan { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 4px; }
.in-dieu-khoan ol { margin: 0; padding-left: 20px; list-style: decimal; font-size: .93em; line-height: 1.6; }
.in-ky { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; padding-top: 18px; text-align: center; break-inside: avoid; }
.in-ky__tieu-de { display: block; font-weight: 700; text-transform: uppercase; font-size: .93em; }
.in-ky__phu { display: block; font-style: italic; font-size: .82em; color: var(--kn-in-chu-2); }
.in-ky__o { height: 72px; }
/* 17–20 mm cho chữ ký */
.in-ky__ten { display: block; font-weight: 700; }
.in-ky--phai { grid-auto-columns: 1fr 1fr; }
.in-ky--phai > :first-child { visibility: hidden; }
.in-cam-on { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--kn-in-ke); text-align: center; font-style: italic; font-size: .86em; color: var(--kn-in-chu-3); }
.in-tuoi-no { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--kn-in-ke-dam); margin-top: 10px; }
.in-tuoi-no > div { padding: 6px 8px; border-left: 1px solid var(--kn-in-ke); text-align: right; }
.in-tuoi-no > div:first-child { border-left: 0; }
.in-tuoi-no span { display: block; font-size: .78em; color: var(--kn-in-chu-2); text-align: left; }
.in-tuoi-no b { font-weight: 700; }
.in-hai-ben { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 14px 0 6px; }
.in-hai-ben p { margin: 0; }
.in-moc { position: absolute; z-index: 2; padding: 2px 8px; border-radius: 999px; background: var(--kn-muc); color: var(--kn-trang); font-family: var(--kn-font); font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; }
/* ===== (8) HÌNH MẪU EXCEL ===== */
.xl { display: inline-flex; flex-direction: column; background: var(--kn-in-giay); border: 1px solid var(--kn-xl-luoi); font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; font-size: 14px; color: var(--kn-xl-chu); }
.xl__cong-thuc { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-bottom: 1px solid var(--kn-xl-luoi); font-size: 12px; color: var(--kn-xl-chu-tieu-de); background: var(--kn-in-giay); }
.xl__cong-thuc b { min-width: 52px; padding-right: 8px; border-right: 1px solid var(--kn-xl-luoi); font-weight: 400; }
.xl table { border-collapse: collapse; table-layout: fixed; }
.xl th { height: 20px; background: var(--kn-xl-nen-tieu-de); border: 1px solid var(--kn-xl-luoi); font-size: 11px; font-weight: 400; color: var(--kn-xl-chu-tieu-de); text-align: center; padding: 0; }
.xl th.xl__so-dong { width: 34px; }
.xl td { height: 21px; padding: 0 4px; border: 1px solid var(--kn-xl-luoi); white-space: nowrap; overflow: hidden; text-overflow: clip; vertical-align: bottom; }
.xl td.xl__so-dong { background: var(--kn-xl-nen-tieu-de); color: var(--kn-xl-chu-tieu-de); font-size: 11px; text-align: center; vertical-align: middle; }
.xl .so { text-align: right; }
.xl .giua { text-align: center; }
.xl .dam { font-weight: 700; }
.xl .nghieng { font-style: italic; }
.xl .xl__hieu { font-family: "Arial Black", Arial, sans-serif; font-size: 21px; font-weight: 900; }
.xl .xl__tieu-de { font-size: 19px; font-weight: 700; }
.xl .xl__xam { color: var(--kn-xl-chu-xam); }
.xl .xl__vang { color: var(--kn-in-nau); }
.xl .xl__th td:not(.xl__so-dong) { background: var(--kn-in-nen); border-top: 1.5px solid var(--kn-in-ke-dam); border-bottom: 1.5px solid var(--kn-in-ke-dam); font-weight: 700; }
.xl .xl__tong td:not(.xl__so-dong) { background: var(--kn-in-nen); border-top: 1.5px solid var(--kn-in-ke-dam); border-bottom: 1.5px solid var(--kn-in-ke-dam); font-weight: 700; }
.xl .xl__ke-duoi td:not(.xl__so-dong) { border-bottom: 1.5px solid var(--kn-in-chu-2); }
.xl .xl__tieu-de-cot td:not(.xl__so-dong) { background: var(--kn-xl-nen-tieu-de); font-weight: 700; white-space: normal; height: 34px; vertical-align: middle; }
.xl .xl__gop { text-align: center; font-weight: 700; background: var(--kn-xl-nen-tieu-de); }
.xl .xl__an { background: var(--kn-xl-nen-tieu-de); color: var(--kn-xl-chu-tieu-de); text-align: center; font-size: 11px; }
.xl--khong-luoi td:not(.xl__so-dong) { border-color: transparent; }
.xl--khong-luoi td.xl__ke-phai { border-right-color: transparent; }
.xl__tab { display: flex; align-items: flex-end; gap: 2px; height: 30px; padding: 0 0 0 40px; border-top: 1px solid var(--kn-xl-luoi); background: var(--kn-xl-nen-tieu-de); font-size: 12px; }
.xl__tab span { padding: 5px 16px; color: var(--kn-xl-chu-tieu-de); }
.xl__tab span[aria-current] { background: var(--kn-xl-tab); color: var(--kn-xl-chon); font-weight: 700; border-bottom: 2px solid var(--kn-xl-chon); }
.xl-ghi { margin-top: 10px; font-family: var(--kn-font); font-size: 13px; line-height: 19px; color: var(--kn-chu-2); max-width: 1000px; }
/* ===== (9) @media print · đề xuất cho code mẫu in ===== */
@page { size: A4; margin: 0; }
/* trình duyệt không in ngày giờ, địa chỉ web */
@page ngang { size: A4 landscape; margin: 0; }
@page a5 { size: A5; margin: 0; }
@media print {
html, body { background: var(--kn-in-giay); }
.in-trang { width: auto; height: auto; overflow: visible; box-shadow: none; }
.in-a4, .in-a4n { padding: 10mm; }
.in-a5 { padding: 8mm; page: a5; }
.in-a4n { page: ngang; }
.in-le::after, .in-moc, .in-ghi-bv { display: none; }
.in-bang thead { display: table-header-group; } /* tiêu đề cột lặp mỗi trang */
.in-bang tfoot { display: table-footer-group; }
.in-bang tr { break-inside: avoid; } /* không cắt ngang một hàng */
.in-bang__nhom, .in-bang__phieu { break-after: avoid; } /* tên nhóm đi cùng hàng đầu */
.in-bang__cuoi-3, .in-bang__cong, .in-bang__phi, .in-bang__tong { break-before: avoid; break-inside: avoid; } /* 3 dòng cuối đi cùng TỔNG CỘNG */
.in-khoi-cuoi { break-inside: avoid; } /* tổng + bằng chữ + chữ ký + cảm ơn không tách */
.in-den * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.in-mau * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ===== (10) A4 NGANG CHỮ LỚN: gọn để 1 trang chứa được phiếu thường ===== */
.in-a4n .in-hieu { flex-direction: row; align-items: center; gap: 20px; }
.in-a4n .in-hieu__tt { padding-left: 16px; border-left: 1px solid var(--kn-in-ke); font-size: 12px; line-height: 17px; }
.in-a4n .in-dau { padding-bottom: 10px; }
.in-a4n .in-dau__anh { margin-bottom: 4px; }
.in-a4n .in-meta { font-size: 13px; line-height: 18px; }
.in-a4n .in-khach { padding: 8px 0 4px; }
.in-a4n .in-ghi-chung { padding: 3px 10px; }
.in-a4n .in-dvt { padding: 0 0 2px; }
.in-a4n .in-bang th { padding: 6px 6px; }
.in-a4n .in-bang td { padding: 3px 6px; }
.in-a4n .in-bang__nhom td { padding-top: 5px; }
.in-a4n .in-bang__tong td { padding: 5px 6px; }
.in-a4n .in-bang-chu { padding-top: 6px; }
.in-a4n .in-ky { padding-top: 6px; }
.in-a4n .in-ky__o { height: 64px; }
/* 17 mm */
.in-a4n .in-cam-on { padding-top: 6px; }
.in-a4n .in-dau__tieu-de { font-size: 24px; line-height: 26px; }
.in-a4n .in-meta { line-height: 17px; }
.in-a4n .in-bang { line-height: 20px; }
.in-a4n .in-khach__phu { line-height: 1.3; }
/* ===== (11) A5 gọn ===== */
.in-a5 .in-dau { padding-bottom: 8px; gap: 12px; }
.in-a5 .in-hieu { gap: 6px; }
.in-a5 .in-hieu__tt { font-size: 9.5px; line-height: 13px; }
.in-a5 .in-dau__anh { margin-bottom: 4px; letter-spacing: 2px; }
.in-a5 .in-meta { font-size: 10.5px; line-height: 15px; }
.in-a5 .in-khach { padding: 8px 0 4px; gap: 6px 12px; }
.in-a5 .in-ghi-chung { padding: 3px 8px; }
.in-a5 .in-dvt { padding: 2px 0; }
.in-a5 .in-bang th { padding: 5px 4px; font-size: 9px; }
.in-a5 .in-bang td { padding: 4px 4px; }
.in-a5 .in-bang__tong td { padding: 6px 4px; font-size: 13.5px; }
.in-a5 .in-bang-chu { padding-top: 6px; }
.in-a5 .in-ky { padding-top: 8px; }
.in-a5 .in-ky__o { height: 64px; }
.in-a5 .in-cam-on { padding-top: 6px; }
.in-bang td.ngay { white-space: nowrap; }
.dong-the--loi .dong-the__t3 { color: var(--kn-chu-2); } /* chu-3 trên nền lỗi chỉ 4,41:1 */
/* ==================== (6.6a) Màn Đợt 6a · N3 Lịch sử mua, N1 Ký nhận ==================== */
/* ==== Đợt 6a · N1 Ký nhận · N3 Lịch sử mua (gộp vào kn.css phần 6.6) ==== */
/* --- N1 · khối Ký nhận trên màn phiếu (luôn hiện, không gập) --- */
.ky-nhan { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.ky-nhan__dau { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.ky-nhan__tieu-de { flex: 1; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.ky-nhan__trong { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.ky-nhan__doi { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-cho-chu); }
.ky-nhan__ds { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.ky-nhan__muc { display: flex; flex-direction: column; gap: 4px; width: 132px; }
.ky-nhan__muc--ky { width: 232px; }
.ky-nhan__anh { appearance: none; position: relative; display: block; width: 132px; height: 168px; padding: 0; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); background: var(--kn-mat); overflow: hidden; cursor: zoom-in; }
.ky-nhan__anh--ky { width: 232px; height: 96px; display: grid; place-items: center; background: var(--kn-nen); }
.ky-nhan__anh--ky .chu-ky { width: 190px; height: auto; }
.ky-nhan__phong { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--kn-bo-tron); background: var(--kn-mat); border: 1px solid var(--kn-vien); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu); }
.ky-nhan__meta { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.ky-nhan__muc .nut--xoa-dong { align-self: flex-start; padding: 0 4px; min-height: var(--kn-cao-nut); }
.ky-nhan__nut { display: flex; gap: 8px; flex-wrap: wrap; }
.ky-nhan__nut .nut { flex: 1 1 0; min-width: 0; }
.kn-mt .ky-nhan__nut .nut { flex: 0 0 auto; }
/* ảnh phiếu giấy thu nhỏ (giả lập trên bảng vẽ; code thật là ![]()
) */
.anh-phieu { position: absolute; inset: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.anh-phieu__vach { height: 4px; border-radius: 2px; background: var(--kn-vien); }
.anh-phieu__vach--dam { height: 7px; background: var(--kn-chu-tat); }
.anh-phieu .chu-ky { margin-top: auto; width: 70%; height: auto; align-self: flex-start; }
/* chữ ký mẫu (SVG nét tay) */
.chu-ky { display: block; color: var(--kn-chu); }
.chu-ky path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* --- N1 · tấm ký toàn màn (điện thoại xoay ngang, iPad) --- */
.tam-ky { position: absolute; inset: 0; z-index: var(--kn-z-hop); display: flex; flex-direction: column; background: var(--kn-mat); }
.tam-ky__dau { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--kn-vien); }
.tam-ky__ten { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tam-ky__ten b { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tam-ky__ten span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.tam-ky__nguoi { flex: none; width: 260px; display: flex; align-items: center; gap: 8px; height: var(--kn-cao-o); padding: 0 12px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); cursor: text; }
.tam-ky__nguoi span { flex: none; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); white-space: nowrap; }
.tam-ky__nguoi input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; font-family: var(--kn-font); font-size: var(--kn-co-o); color: var(--kn-chu); }
.tam-ky__nguoi:focus-within { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); }
.tam-ky__vung { position: relative; flex: 1; min-height: 0; margin: 12px; border: 1.5px dashed var(--kn-vien-o); border-radius: var(--kn-bo-14); background: var(--kn-nen); touch-action: none; cursor: crosshair; }
.tam-ky__vach { position: absolute; left: 40px; right: 40px; bottom: 30%; border-top: 1px solid var(--kn-vien-dam); }
.tam-ky__x { position: absolute; left: 40px; bottom: calc(30% + 4px); font-size: var(--kn-c5); line-height: var(--kn-d5); color: var(--kn-chu-2); }
.tam-ky__goi { position: absolute; left: 40px; right: 40px; bottom: calc(30% - 30px); text-align: center; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tam-ky__vung .chu-ky { position: absolute; left: 14%; bottom: calc(30% - 14px); width: 62%; max-width: 560px; height: auto; }
.tam-ky__chan { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kn-vien); }
.tam-ky__chan .chan-man__khoang { flex: 1; min-width: 24px; }
.kn-ipad .tam-ky__dau { padding: 10px 16px; }
.kn-ipad .tam-ky__vung { margin: 16px; }
.kn-ipad .tam-ky__chan { padding: 12px 16px; }
/* --- N3 · chữ nguồn giá dưới ô Đơn giá (nút nhỏ, chạm mở Đã bán cho) --- */
.o-gia { display: flex; flex-direction: column; gap: 2px; }
.nguon-gia { appearance: none; position: relative; border: 0; background: transparent; padding: 0 2px; font-family: var(--kn-font); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; color: var(--kn-chu-2); text-align: right; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; white-space: normal; }
.nguon-gia::after { content: ""; position: absolute; inset: -17px -6px -17px; } /* vùng bấm ≥ 48 */
.nguon-gia[aria-expanded="true"] { color: var(--kn-chu); font-weight: 600; text-decoration-style: solid; }
.dong-the .nguon-gia { text-align: left; font-size: var(--kn-c1); line-height: var(--kn-d1); }
/* --- N3 · xem nhanh "Đã bán cho " --- */
.da-ban { width: 640px; max-height: 600px; }
.da-ban__mon { padding: 0 12px 6px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.da-ban__mon b { color: var(--kn-chu); font-weight: 600; }
.da-ban__loc { display: flex; align-items: center; gap: 8px; padding: 2px 12px 10px; flex-wrap: wrap; flex: none; }
.da-ban__loc-chu { flex: 1; min-width: 120px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.da-ban__loc .nut[aria-pressed="true"] { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); }
.da-ban__dong { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; padding: 8px 8px 8px 12px; border-top: 1px solid var(--kn-vien); }
.da-ban__dong--dang { background: var(--kn-vang-nen); }
.da-ban__chu { display: flex; flex-direction: column; min-width: 0; }
.da-ban__t1 { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-ban__so { appearance: none; border: 0; background: transparent; padding: 0; font-family: var(--kn-font-ma); font-size: var(--kn-c1); font-weight: 400; color: var(--kn-chu); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.da-ban__t2 { display: flex; align-items: center; gap: 6px; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-ban__tien { display: flex; flex-direction: column; align-items: flex-end; }
.da-ban__gia { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; color: var(--kn-chu); white-space: nowrap; }
.da-ban__ke { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-loai-gia-ke); white-space: nowrap; }
.da-ban__ky { display: inline-flex; align-items: center; gap: 3px; color: var(--kn-xong-chu); font-weight: 600; }
.da-ban__ky .ic { width: 14px; height: 14px; }
.da-ban__dong .nut { white-space: nowrap; }
.kn-dt .da-ban__loc-chu { flex-basis: 100%; }
.kn-dt .da-ban__loc .nut { flex: 1 1 0; }
.kn-dt .da-ban__dong { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 0; }
.kn-dt .da-ban__dong > .nut { grid-column: 1 / -1; justify-self: end; }
.kn-dt .da-ban__dong--dang { margin: 0 -12px; padding: 10px 12px; }
.ngan-xem .da-ban__dong { padding: 10px 0; }
.ngan-xem .da-ban__dong--dang { margin: 0 -16px; padding: 10px 16px; }
.ngan-xem .da-ban__loc { padding: 0 0 6px; }
/* --- N3 · khối "Đã mua" trong chi tiết khách --- */
.da-mua { display: flex; flex-direction: column; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: clip; }
.da-mua__dau { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.da-mua__tieu-de { flex: 1; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.da-mua__dem { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.da-mua__tim { position: sticky; top: 0; z-index: var(--kn-z-dinh); padding: 0 16px 12px; background: var(--kn-mat); border-bottom: 1px solid var(--kn-vien); }
.da-mua .bang { border: 0; border-radius: 0; }
.da-mua .bang tr.da-mua__lan td { background: var(--kn-nen); height: 44px; font-size: var(--kn-c2); color: var(--kn-chu-2); }
.da-mua .bang tr.da-mua__lan td.thut { padding-left: 64px; }
.da-mua__het { padding: 10px 16px; border-top: 1px solid var(--kn-vien); }
/* --- dòng xem chứng từ trên điện thoại (chi tiết phiếu) --- */
.dong-xem { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--kn-vien); }
.dong-xem:last-child { border-bottom: 0; }
.dong-xem__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dong-xem__t1 { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dong-xem__t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.dong-xem__tien { flex: none; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; }
/* --- bản in có chữ ký (Brother A5 đen trắng) --- */
.in-ky__o--ky { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.in-ky__o--ky .chu-ky { width: 150px; height: auto; color: var(--kn-in-den); }
.in-ky__luc { font-size: 9px; line-height: 12px; color: var(--kn-in-den); }
.in-ky__o--da-sua { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 9.5px; line-height: 13px; font-style: italic; color: var(--kn-in-den); }
@media print {
.in-ky__o--ky .chu-ky { color: var(--kn-in-den); }
}
/* ==================== (6.6b) Màn Đợt 6b · N2 Cần mua, Đơn đặt, N4 Dải nợ ==================== */
/* ==================== (6.6b) Màn Đợt 6 · N2 Cần mua, Đơn đặt NCC · N4 Dải nợ ==================== */
/* Số điện thoại NCC, khách: chữ chép được (không dùng tel:) */
.so-chep { user-select: all; -webkit-user-select: all; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kn-chu); white-space: nowrap; }
/* Cần mua: đầu nhóm nhà cung cấp, dòng hàng */
.can-mua__ncc { display: flex; align-items: center; gap: 12px; min-width: 0; }
.can-mua__ncc-ten { font-weight: 700; color: var(--kn-chu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-mua__ncc-phu { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu-2); white-space: nowrap; }
.can-mua__ncc .ic { width: 16px; height: 16px; color: var(--kn-chu-2); flex: none; }
.can-mua__ncc--khong .can-mua__ncc-ten { color: var(--kn-chu-2); }
.can-mua__ten { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-mua__phu { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-mua__gia { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.bang td .o-chon--gon .o-chon__o { height: var(--kn-cao-o-bang); padding: 0 8px 0 10px; }
.bang td .o-chon--gon .o-chon__gia-tri { font-size: var(--kn-c2); }
.bang--gon th, .bang--gon td { padding-left: 8px; padding-right: 8px; }
.bang--gon td.co-o { padding: 3px 4px; }
.can-mua__sl { display: flex; align-items: center; gap: 6px; }
.can-mua__sl .o-bang { width: 64px; flex: none; }
.can-mua__dvt { font-size: var(--kn-c2); color: var(--kn-chu-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ton-het { color: var(--kn-loi-chu); font-weight: 600; }
/* Cần mua · điện thoại: mỗi dòng là thẻ nhỏ */
.can-mua-nhom { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 0; }
.can-mua-nhom__ten { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; }
.can-mua-nhom__phu { display: flex; align-items: center; gap: 8px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.can-mua-the { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.can-mua-the.dang-chon { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.can-mua-the__t1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.can-mua-the__ten { flex: 1; min-width: 0; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-mua-the__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); padding-left: 34px; }
.can-mua-the__t3 { display: flex; align-items: center; gap: 8px; padding-left: 34px; }
.can-mua-the__t3 .dong-the__sl .o-bang { width: 60px; }
.can-mua-the__dvt { font-size: var(--kn-c2); color: var(--kn-chu-2); flex: none; }
.can-mua-the__t3 .o-chon { flex: 1; min-width: 0; }
.can-mua-the__t3 .o-chon__o { height: 48px; padding: 0 8px 0 10px; }
.can-mua-the__t3 .o-chon__gia-tri { font-size: var(--kn-c2); }
/* Đơn đặt: dòng chưa có mã có nút Đã về */
.don-dat__dong-tay td { background: var(--kn-nen); }
.don-dat__chu-nho { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); white-space: normal; }
.don-dat__tin { font-family: var(--kn-font); font-size: var(--kn-c3); line-height: var(--kn-d3); white-space: pre-wrap; }
.don-dat__sdt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--kn-c2); color: var(--kn-chu-2); }
/* Dải nợ (N4): dải vàng ngay dưới ô Khách, chỉ báo, không chặn */
.dai-no .dai__cau b { font-weight: 700; }
.dai-no__ngay { display: block; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu-2); }
.luoi-o__rong.dai-no { margin-top: -4px; }
.kn-dt .phan-doan--rong .phan-doan__nut { padding: 0 6px; white-space: nowrap; }
.kn-dt .thanh-chon { flex-wrap: nowrap; }
.da-ban__so { position: relative; } .da-ban__so::after { content: ""; position: absolute; inset: -13px -4px; } /* vùng bấm ≥ 48 */
/* ==================== (6.7a) Màn Đợt 7a · N8 Ảnh hàng, N7 Đề xuất giá ==================== */
/* kn_dot7a.css · Đợt 7a · N8 Ảnh hàng · N7 Đề xuất giá (gộp vào kn.css phần 6.7a). Mọi màu qua biến. */
/* --- N8 · ảnh hàng 40 px (ô Hàng, dòng phiếu, dòng báo giá) --- */
.anh-hang--anh { padding: 0; overflow: hidden; background: var(--kn-mat); }
.minh-hoa { display: block; width: 100%; height: 100%; }
.minh-hoa__nen { fill: var(--kn-nen-2); }
.minh-hoa__than { fill: var(--kn-nen-3); stroke: var(--kn-chu-2); stroke-width: 1.5; stroke-linejoin: round; }
.minh-hoa__sang { fill: var(--kn-mat); stroke: var(--kn-chu-2); stroke-width: 1.5; stroke-linejoin: round; }
.minh-hoa__net { fill: none; stroke: var(--kn-chu-2); stroke-width: 1.5; stroke-linecap: round; }
.minh-hoa__dam { fill: var(--kn-chu); }
.minh-hoa__nhan { fill: var(--kn-vang); }
.bang-chon__dong--anh { align-items: center; }
.bang-chon__dong--anh .anh-hang { flex: none; }
/* ảnh khách trên dòng báo giá */
.o-ten-hang--dau { align-items: flex-start; }
.anh-khach { position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.anh-hang--khach { border-color: var(--kn-vang-dam); }
.anh-khach__nhan { font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu-2); white-space: nowrap; }
.anh-khach__dung { align-self: flex-start; min-height: 36px; min-height: 36px; margin-top: 4px; padding: 0 10px; font-size: var(--kn-c2); gap: 6px; position: relative; }
.anh-khach__dung::after { content: ""; position: absolute; inset: -8px -2px; } /* vùng bấm ≥ 52 trên iPad */
.anh-khach__xong { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-xong-chu); }
.bang tr.dong-anh td { height: auto; padding-top: 8px; padding-bottom: 8px; vertical-align: top; }
.bang tr.dong-anh td.so, .bang tr.dong-anh td:not(.co-o) { padding-top: 20px; }
/* --- N8 · khối Ảnh trong form hàng (luôn hiện) --- */
.anh-khoi { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.kn-mt .anh-khoi { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.anh-khoi__dem { margin-left: auto; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.anh-khoi__chinh, .anh-khoi__rong { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--kn-bo-14); overflow: hidden; }
.anh-khoi__chinh { border: 1px solid var(--kn-vien); background: var(--kn-mat); }
.anh-khoi__rong { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--kn-vien-o); background: var(--kn-nen); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.anh-khoi__rong .ic { color: var(--kn-chu-2); }
.anh-khoi__ben { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.anh-khoi__phu-ds { display: grid; grid-template-columns: repeat(3, 116px); gap: 12px; }
.kn-mt .anh-khoi__phu-ds { grid-template-columns: repeat(3, 96px); }
.anh-khoi__o { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-10); overflow: hidden; background: var(--kn-mat); }
.anh-khoi__o--trong { display: grid; place-items: center; border: 1px dashed var(--kn-vien-o); background: var(--kn-nen); font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.anh-khoi__o--giu { box-shadow: 0 0 0 3px var(--kn-vang-dam); }
.anh-khoi__xem { appearance: none; border: 0; padding: 0; margin: 0; display: block; width: 100%; height: 100%; background: transparent; cursor: zoom-in; }
.anh-khoi__nhan { position: absolute; left: 8px; top: 8px; min-height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--kn-bo-tron); background: var(--kn-muc); color: var(--kn-trang); font-size: var(--kn-c1); font-weight: 600; }
.anh-khoi__xoa { appearance: none; position: absolute; right: 6px; bottom: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); background: var(--kn-mat); font-family: var(--kn-font); font-size: var(--kn-c2); font-weight: 600; color: var(--kn-loi-chu); cursor: pointer; }
.anh-khoi__xoa::after { content: ""; position: absolute; inset: -10px -6px; } /* vùng bấm ≥ 52 */
.anh-khoi__nut { display: flex; flex-wrap: wrap; gap: 8px; }
.anh-khoi__ghi { margin: 0; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.anh-khoi__menu { position: absolute; left: 128px; top: 58px; z-index: var(--kn-z-chon); width: 240px; }
.kn-mt .anh-khoi__menu { left: 108px; top: 48px; }
.dm-hai-cot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
/* --- N8 · đồng hồ dung lượng ảnh (Cài đặt) --- */
.dong-cai--cot { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 14px; padding-bottom: 16px; }
.dung-luong { display: flex; flex-direction: column; gap: 8px; }
.dung-luong__dau { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dung-luong__so { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.dung-luong__pt { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.dung-luong__ray { height: 10px; border-radius: var(--kn-bo-tron); background: var(--kn-nen-3); overflow: hidden; }
.dung-luong__vach { display: block; height: 100%; border-radius: inherit; background: var(--kn-muc); }
.dung-luong--day .dung-luong__vach { background: var(--kn-cho-chu); }
.dung-luong--day .dung-luong__pt { color: var(--kn-cho-chu); }
.dung-luong__chia { margin: 0; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
/* --- N7 · đề xuất giá --- */
.dau-dx__phu { margin: 4px 0 0; padding-left: 15px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.gia-doi { white-space: nowrap; }
.gia-doi b { font-weight: 700; }
.tang-pt { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-cho-chu); }
.lai { white-space: nowrap; }
.bang-dx tbody tr.co-anh-huong td { border-bottom-color: transparent; }
.bang-dx tbody tr.co-anh-huong td:first-child { box-shadow: none; }
.bang-dx tbody tr.dang-chon.co-anh-huong td:first-child, .bang-dx tbody tr.dang-chon.dong-anh-huong td:first-child { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.bang-dx tbody tr.dong-anh-huong td { height: auto; padding-top: 0; padding-bottom: 10px; white-space: normal; }
.anh-huong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-left: 52px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.anh-huong__muc { display: inline-flex; align-items: center; gap: 6px; color: var(--kn-cho-chu); font-weight: 400; }
.anh-huong__muc > .ic { color: var(--kn-cho-chu); }
.anh-huong__di { min-height: 36px; padding: 0 4px; font-size: var(--kn-c2); font-weight: 600; gap: 2px; position: relative; }
.anh-huong__di::after { content: ""; position: absolute; inset: -8px -2px; }
.kn-mt .anh-huong__di::after { inset: -2px -2px; }
/* thẻ đề xuất trên iPad */
.dx-the { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.dx-the--chon { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.dx-the--chon .bang__phu { color: var(--kn-chu-2); } /* chu-3 trên vàng nhạt chỉ 4,49:1 */
.dx-the__dau { display: flex; align-items: center; gap: 12px; }
.dx-the__ten { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; }
.dx-the__luoi { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.dx-the__o { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dx-the__nhan { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.dx-the__so { font-size: var(--kn-c3); line-height: var(--kn-d3); white-space: nowrap; }
.dx-the .gia-doi { font-size: var(--kn-c3); line-height: var(--kn-d3); }
.dx-the .anh-huong { padding-left: 0; }
/* --- N7 · dòng phiếu "Giá mua tăng" --- */
.bang tbody tr.co-gia-tang td { border-bottom-color: transparent; }
.bang tbody tr.dong-gia-tang td { height: auto; padding-top: 0; padding-bottom: 8px; white-space: normal; }
.gia-tang { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-cho-chu); }
.gia-tang > .ic { color: var(--kn-cho-chu); }
.gia-tang__cu { font-weight: 400; color: var(--kn-chu-2); }
.gia-tang .nut--phu { height: 40px; min-height: 40px; position: relative; }
.gia-tang .nut--phu::after { content: ""; position: absolute; inset: -6px -2px; } /* vùng bấm 52 */
.gia-tang--xong { color: var(--kn-xong-chu); }
.gia-tang--xong > .ic { color: var(--kn-xong-chu); }
.gia-tang--the { justify-content: flex-start; padding: 8px 10px; border-radius: var(--kn-bo-10); background: var(--kn-cho-nen); }
.gia-tang--the.gia-tang--xong { background: var(--kn-xong-nen); }
.gia-tang--the .nut--phu { height: 48px; min-height: 48px; width: 100%; justify-content: center; }
.gia-tang--the .nut--phu::after { display: none; }
/* ==================== (6.7b) Màn Đợt 7b · N5 Nhắc nợ, N6 Link cho khách ==================== */
/* kn_dot7b.css · Đợt 7b · N5 Nhắc nợ · N6 Link cho khách (gộp vào kn.css). Mọi màu qua biến. */
/* --- N5 · Tấm Nhắc nợ --- */
.nhac-no__than { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 16px; }
.nhac-no__chan { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.nhac-no__chan .nut { width: auto; }
.nhac-no__ds { display: flex; flex-direction: column; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.nhac-no__hd { display: flex; align-items: center; gap: 12px; min-height: var(--kn-cao-dong-2); padding: 6px 14px 6px 10px; border-bottom: 1px solid var(--kn-vien); cursor: pointer; }
.nhac-no__hd:last-child { border-bottom: 0; }
.nhac-no__hd .vong-tick { width: var(--kn-cao-nut); height: var(--kn-cao-nut); flex: none; }
.nhac-no__hd-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nhac-no__hd-ten { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; color: var(--kn-chu); font-variant-numeric: tabular-nums; }
.nhac-no__qua { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-loi-chu); }
.nhac-no__hd-tien { flex: none; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; font-variant-numeric: tabular-nums; }
.nhac-no__tin { font-family: var(--kn-font); font-size: var(--kn-co-o); line-height: 24px; white-space: pre-wrap; min-height: 168px; }
.nhac-no__gat-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 400; }
.nhac-no__gat-phu { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu-2); }
.hop--nn { width: 720px; }
/* Bảng chia sẻ của máy (iOS) — chỉ minh họa bước hai trên bảng vẽ, web không dựng */
/* --- N6 · Trang khách (mở bằng link, không menu tiệm) --- */
.trang-khach { position: relative; display: flex; flex-direction: column; background: var(--kn-nen); overflow: hidden; }
.trang-khach__cuon { flex: 1; min-height: 0; overflow-y: auto; padding: var(--kn-le); display: flex; flex-direction: column; gap: 14px; }
.trang-khach__cuon > * { flex: none; }
.tk-logo { display: flex; align-items: center; gap: 10px; }
.tk-logo__dau { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--kn-bo-10); background: var(--kn-muc); color: var(--kn-trang); font-size: var(--kn-c3); font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 -3px 0 var(--kn-vang); }
.tk-logo__chu { display: flex; flex-direction: column; }
.tk-logo__chu b { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; color: var(--kn-chu); }
.tk-logo__chu span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.tk-dau { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--kn-vien); }
.tk-dau__tieu h1 { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; color: var(--kn-chu); padding-left: 12px; border-left: 3px solid var(--kn-vang); }
.tk-dau__khach { margin-top: 6px; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; color: var(--kn-chu); }
.tk-dau__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tk-viec { display: flex; gap: 8px; flex-wrap: wrap; }
.kn-dt .tk-viec .nut { flex: 1; }
.tk-phieu { display: flex; flex-direction: column; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.tk-phieu__dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 6px 4px 14px; background: var(--kn-nen-2); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tk-phieu__dau b { color: var(--kn-chu); font-weight: 600; }
.tk-phieu__dau .nut--chu { font-size: var(--kn-c2); }
.tk-dong { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 4px; border-top: 1px solid var(--kn-vien); }
.tk-phieu__dau + .tk-dong { border-top: 0; }
.tk-dong--doi { background: var(--kn-cho-nen); }
.tk-dong__t1 { display: flex; align-items: baseline; gap: 12px; }
.tk-dong__ten { flex: 1; min-width: 0; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; color: var(--kn-chu); }
.tk-dong__tien { flex: none; font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-dong__t2 { display: flex; align-items: center; gap: 8px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.tk-dong__hoi { margin-left: auto; font-size: var(--kn-c2); }
.tk-hoi { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 8px; padding: 8px 10px; background: var(--kn-nen-2); border-radius: var(--kn-bo-10); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tk-hoi .ic { flex: none; margin-top: 2px; }
.tk-tong { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.tk-tong__hang { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu); }
.tk-tong__hang b { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-tong__hang--nho { font-size: var(--kn-c2); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.tk-tong__chu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tk-chan { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px var(--kn-le) calc(10px + env(safe-area-inset-bottom)); background: var(--kn-mat); border-top: 1px solid var(--kn-vien); }
.tk-chan__tong { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-chan__tong span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.tk-chan__tong b { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-chan .nut--chot { min-width: 156px; }
.tk-bat-buoc { font-weight: 400; color: var(--kn-loi-chu); }
.tk-dong-chon { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--kn-nen-2); border-radius: var(--kn-bo-10); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tk-dong-chon b { font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu); }
.tk-trang-thai { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid; border-radius: var(--kn-bo-14); font-size: var(--kn-c2); line-height: var(--kn-d2); }
.tk-trang-thai .ic { flex: none; margin-top: 1px; }
.tk-trang-thai--xong { background: var(--kn-xong-nen); border-color: var(--kn-xong-vien); color: var(--kn-xong-chu); }
.tk-trang-thai--xong .ic { color: var(--kn-xong-chu); }
.tk-het { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 100%; text-align: center; }
.tk-mt { width: 1040px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.tk-mt__dau { display: flex; flex-direction: column; gap: 14px; }
.tk-mt__dau .tk-viec { justify-content: flex-end; margin-top: -54px; }
.tk-mt__chan { display: flex; gap: 16px; align-items: stretch; }
.tk-mt__dy { width: 380px; flex: none; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.bang tr.tk-hoi-dong td { height: auto; padding-top: 0; padding-bottom: 6px; white-space: normal; }
.bang tr.tk-hoi-dong .tk-hoi { margin: 0; }
/* --- N6 · Phía tiệm: link, câu hỏi dưới dòng --- */
.lien-tin { padding: 10px 12px; background: var(--kn-nen-2); border-radius: var(--kn-bo-10); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu); word-break: break-all; }
.bang tr.cau-hoi td { height: auto; padding-top: 2px; padding-bottom: 8px; white-space: normal; border-bottom: 1px solid var(--kn-vien); }
.bang tr.cau-hoi td:first-child { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.bang tr.cau-hoi--xong td:first-child { box-shadow: none; }
.cau-hoi__o { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--kn-loi-nen); border: 1px solid var(--kn-loi-vien); border-radius: var(--kn-bo-10); }
.cau-hoi--xong .cau-hoi__o { background: var(--kn-nen-2); border-color: var(--kn-vien); }
.cau-hoi__o > .ic { flex: none; color: var(--kn-loi-chu); }
.cau-hoi--xong .cau-hoi__o > .ic { color: var(--kn-chu-2); }
.cau-hoi__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cau-hoi__ai { font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-loi-chu); }
.cau-hoi--xong .cau-hoi__ai { color: var(--kn-chu-2); }
.cau-hoi__cau { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu); }
.cau-hoi__nut { flex: none; }
.cau-hoi__xong { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--kn-c2); color: var(--kn-xong-chu); font-weight: 600; }
.tk-hai-dai { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-phieu__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-phieu__chu b { font-size: var(--kn-c2); }
.tk-phieu__dau .nut--chu { flex: none; }
/* --- Bảng soạn: mọi ô thẳng theo hàng ô nhập (anh Kevin 06/11: không chênh ô) ---
Dòng có dòng phụ dưới tên (trên Thuế, giá vốn, giá lần trước) cao hơn nhưng ĐVT, SL, Đơn giá,
Thành tiền, Xóa dòng vẫn ngang hàng với ô Tên hàng; dòng phụ chỉ đẩy phần dưới. */
.bang tr:has(.o-ten-hang) > td { vertical-align: top; }
.bang tr:has(.o-ten-hang) > td:not(.co-o) { padding-top: calc(4px + (var(--kn-cao-o-bang) - 24px) / 2); line-height: 24px; }
.kn-mt .bang tr:has(.o-ten-hang) > td:not(.co-o) { padding-top: calc(2px + (var(--kn-cao-o-bang) - 24px) / 2); }
.o-ten-hang { align-items: flex-start; }
.o-ten-hang > .anh-hang { margin-top: calc((var(--kn-cao-o-bang) - 40px) / 2); }
.kn-mt .o-ten-hang > .anh-hang { margin-top: 0; }
/* ==================== (6.8a) Màn Đợt 8a · N9 Kiểm kho ==================== */
/* kn_dot8a.css · Đợt 8a · N9 Kiểm kho (gộp vào kn.css phần 6.8a). Mọi màu qua biến. */
/* --- Số lệch: âm đỏ, dư mực, khớp xanh --- */
.lech-am { color: var(--kn-loi-chu); font-weight: 600; white-space: nowrap; }
.lech-du { color: var(--kn-chu); font-weight: 600; white-space: nowrap; }
.lech-khop { color: var(--kn-xong-chu); font-weight: 400; white-space: nowrap; }
/* --- Thẻ, dòng lần kiểm --- */
.kiem-kho__tien-trinh { width: 100%; margin-top: 2px; }
.kiem-kho__tien { display: inline-flex; flex-direction: column; align-items: flex-end; text-align: right; }
.kiem-kho__tien-nhan { font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; color: var(--kn-chu-2); }
.kiem-kho__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); padding-left: 15px; }
.kiem-kho__ghi { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
/* --- Màn đếm (điện thoại, đứng ở kệ) --- */
.dem-kho__dau { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 10px; background: var(--kn-nen); border-bottom: 1px solid var(--kn-vien); position: sticky; top: 0; z-index: var(--kn-z-dinh); }
.dem-kho__tieu { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dem-kho__tieu b { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dem-kho__tieu span { flex: none; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.dem-kho__ds { flex: 1; min-height: 0; overflow-y: auto; background: var(--kn-mat); }
.dem-kho__dong { display: flex; align-items: center; gap: 12px; min-height: 80px; padding: 10px 12px; border-bottom: 1px solid var(--kn-vien); background: var(--kn-mat); }
.dem-kho__dong--dang { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.dem-kho__dong--viec { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.dem-kho__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dem-kho__ten { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; color: var(--kn-chu); }
.dem-kho__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.dem-kho__may { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.dem-kho__dvt { flex: none; width: 40px; text-align: center; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.dem-kho__nhom { padding: 8px 12px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); background: var(--kn-nen-2); border-bottom: 1px solid var(--kn-vien); }
/* Ô số lớn: chạm mở bàn phím số, ≥ 52 px */
.o-so-lon { flex: none; display: flex; align-items: center; width: 96px; height: 56px; border: 1.5px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); background: var(--kn-mat); }
.o-so-lon input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 6px; text-align: center; font-family: var(--kn-font); font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kn-chu); }
.o-so-lon input::placeholder { color: var(--kn-chu-3); font-weight: 400; opacity: 1; }
.o-so-lon--dang { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); }
.o-so-lon--da { border-color: var(--kn-vien); background: var(--kn-nen); }
/* --- Hóa đơn mua quanh ngày đếm --- */
.hd-quanh { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 10px 16px; border-bottom: 1px solid var(--kn-vien); background: var(--kn-mat); }
.hd-quanh:last-child { border-bottom: 0; }
.hd-quanh__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hd-quanh__t1 { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; color: var(--kn-chu); }
.hd-quanh__t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.hd-quanh__tick { flex: none; display: flex; align-items: center; gap: 10px; min-height: var(--kn-cao-nut); padding: 0 12px 0 10px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 400; color: var(--kn-chu); cursor: pointer; }
.hd-quanh__tick:has(input:checked) { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); }
.hd-quanh--sau { background: var(--kn-nen); }
.kiem-kho__khoi { background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.kiem-kho__khoi-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 16px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; background: var(--kn-nen-2); border-bottom: 1px solid var(--kn-vien); }
.kiem-kho__khoi-dau span { font-weight: 400; color: var(--kn-chu-2); }
/* --- Tồn thực cạnh tồn trên Thuế --- */
.ton-thuc { white-space: nowrap; }
.ton-thuc__ngay { margin-left: 6px; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; color: var(--kn-chu-2); }
.ton-thuc--chua { font-size: var(--kn-c2); color: var(--kn-chu-2); font-style: italic; }
/* ==================== (6.8b) Màn Đợt 8b · N10 Hôm nay ==================== */
/* (6.8b) N10 Hôm nay · cột phải màn Nhà máy tính (≥ 1280). Điện thoại và iPad không có, chỉ giữ số đếm trên menu. */
.nha { flex: 1; min-height: 0; display: flex; }
.nha__chinh { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.nha__chao { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nha__ngay { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.nha .luoi-menu__o { min-height: 112px; font-size: var(--kn-c3); }
.cot-hom-nay { flex: none; width: 360px; display: flex; flex-direction: column; background: var(--kn-mat); border-left: 1px solid var(--kn-vien); min-height: 0; }
.cot-hom-nay--1920 { width: 420px; }
.cot-hom-nay__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; border-bottom: 1px solid var(--kn-vien); flex: none; }
.cot-hom-nay__tieu-de { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.cot-hom-nay__dem { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.cot-hom-nay__ds { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 8px; gap: 4px; }
.cot-hom-nay__dong { appearance: none; width: 100%; display: grid; grid-template-columns: 4px minmax(0, 1fr) auto 20px; align-items: center; column-gap: 12px; min-height: 64px; padding: 10px 10px 10px 0; border: 1px solid transparent; border-radius: var(--kn-bo-10); background: transparent; font-family: var(--kn-font); text-align: left; color: var(--kn-chu); cursor: pointer; }
.cot-hom-nay__dong:hover { background: var(--kn-nen); border-color: var(--kn-vien); }
.cot-hom-nay__dong:active { background: var(--kn-nen-2); }
.cot-hom-nay__vach { align-self: stretch; border-radius: 0 3px 3px 0; background: var(--kn-vien); }
.cot-hom-nay__dong--tre .cot-hom-nay__vach { background: var(--kn-loi-chu); }
.cot-hom-nay__dong--nay .cot-hom-nay__vach { background: var(--kn-cho-chu); }
.cot-hom-nay__dong--toi .cot-hom-nay__vach { background: var(--kn-xong-chu); }
.cot-hom-nay__chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cot-hom-nay__ten { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cot-hom-nay__phu { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.cot-hom-nay__phu .chip { min-height: 20px; padding: 0 8px; font-size: var(--kn-c1); }
.cot-hom-nay__so { display: flex; flex-direction: column; align-items: flex-end; }
.cot-hom-nay__so b { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 700; font-variant-numeric: tabular-nums; }
.cot-hom-nay__tien { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cot-hom-nay__dong .ic { width: 18px; height: 18px; color: var(--kn-chu-3); }
.cot-hom-nay__chan { flex: none; padding: 10px 16px; border-top: 1px solid var(--kn-vien); font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.cot-hom-nay .rong > .ic { color: var(--kn-xong-chu); }
.cot-hom-nay__phu .chip { flex: none; }
.cot-hom-nay__mo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ==================== (6.9a) Màn Đợt 9a · Ô chọn Hàng: Đã có (.da-co*), Tạm thay (.tam-thay*, .bang--mo) ==================== */
/* (6.9a) Đợt 9 · Ô chọn Hàng · Đã có và Tạm thay (O_chon_Hang_Da_co_*, O_chon_Hang_Tam_thay_*) */
/* Đã có: dải ngay dưới ô Hàng khi bấm Thêm hàng mới (O_chon_Hang_Da_co_iD/iN/DT) */
.bang tr.da-co-hang > td { height: auto; padding: 0 6px 8px; white-space: normal; overflow: visible; background: var(--kn-vang-nen); border-bottom: 1px solid var(--kn-vien); }
.da-co { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; background: var(--kn-mat); border: 1.5px solid var(--kn-vang-dam); border-radius: var(--kn-bo-14); box-shadow: var(--kn-bong-1); }
.da-co__anh { width: 48px; height: 48px; flex: none; }
.da-co__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.da-co__t1 { font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu); white-space: normal; }
.da-co__t1 b { font-weight: 700; }
.da-co__t2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-co__nut { display: flex; gap: 8px; flex: none; }
.da-co__nut .nut { height: var(--kn-cao-nut); }
.da-co__nhan { display: inline-flex; align-items: center; min-height: 22px; margin-left: 8px; padding: 0 8px; border-radius: var(--kn-bo-tron); background: var(--kn-nen-2); border: 1px solid var(--kn-vien); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu-2); vertical-align: 2px; }
.da-co--doc { flex-wrap: wrap; align-items: flex-start; }
.da-co--doc .da-co__chu { flex-basis: calc(100% - 60px); }
.da-co--doc .da-co__nut { width: 100%; flex-direction: column; }
.da-co--doc .da-co__nut .nut { width: 100%; }
/* Tạm thay: chip trên dòng hàng mở danh sách 3 mã kế tiếp (O_chon_Hang_Tam_thay_iD/iN/DT) */
.tam-thay-chip { appearance: none; position: relative; align-self: flex-start; cursor: pointer; font-family: var(--kn-font); margin: 4px 0 0 7px; max-width: calc(100% - 7px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tam-thay-chip .ic { width: 14px; height: 14px; flex: none; }
.tam-thay-chip::after { content: ""; position: absolute; inset: -14px -4px; } /* vùng bấm ≥ 52 */
.tam-thay-chip { overflow: visible; } /* để vùng bấm ::after không bị cắt */
.tam-thay-chip[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--kn-vang-dam); }
.tam-thay__o { display: flex; margin-top: 2px; }
.tam-thay__o .tam-thay-chip { margin-left: 0; }
.tam-thay { width: 560px; max-height: 520px; }
.tam-thay__phu { padding: 0 12px 8px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tam-thay__dong { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.tam-thay__dong .bang-chon__chu { gap: 2px; }
.tam-thay__ly-do { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu); }
.tam-thay__khac { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 10px; border-radius: var(--kn-bo-10); background: var(--kn-loi-nen); border: 1px solid var(--kn-loi-vien); color: var(--kn-loi-chu); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; }
.tam-thay__dang { flex: none; align-self: center; min-height: 24px; padding: 0 10px; border-radius: var(--kn-bo-tron); background: var(--kn-muc); color: var(--kn-trang); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; }
.tam-thay__dong[aria-selected="true"] .bang-chon__t2 { color: var(--kn-chu-2); }
.tam-thay__co-dung { margin-top: 6px; }
.bang tr.da-co-hang .tam-thay__co-dung { margin-top: 0; }
/* Bảng soạn đang mở ô xổ ở một dòng: lớp nổi gắn ngay dưới (hoặc trên) ô Tên hàng, không bị cắt */
.bang--mo, .bang--mo td { overflow: visible; }
.bang--mo .o-ten-hang__cot { position: relative; }
.bang tr.da-co-hang > td:first-child { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
/* ==================== (6.9c) Màn Đợt 9c · Ảnh hàng nạp dần (.anh-hang--nap, .anh-khoi__khach), Đề xuất giá Áp/Bỏ/Sửa tay (.dx-gia*, .dx-sua, .dx-viec, .o-bang--sua) ==================== */
/* ===== Đợt 9c · sửa màn Ảnh hàng (N8) và Đề xuất giá (N7) theo bản yêu cầu 07/11 ===== */
/* Ảnh 40 trong ô Hàng: đang nạp dần (khung xương mờ, đổi nhẹ, không nhấp nháy mạnh) */
.anh-hang--nap { padding: 0; overflow: hidden; background: var(--kn-nen-2); }
.anh-hang__xuong { display: block; width: 100%; height: 100%; background: var(--kn-nen-3); opacity: .55; animation: kn-nhap-nhay 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .anh-hang__xuong { animation: none; } }
/* Khối Ảnh: gợi ý ảnh khách từ báo giá, đi cùng nút Dùng ảnh khách */
.anh-khoi__khach { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--kn-vang-vien); border-radius: var(--kn-bo-10); background: var(--kn-vang-nen); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
/* Đề xuất giá: giá bán đang dùng → đề xuất, ba việc trên từng dòng */
.dx-th-phu { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; color: var(--kn-chu-2); }
.dx-gia { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dx-gia__ban { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--kn-chu-2); }
.dx-gia__mui { color: var(--kn-chu-2); }
.dx-gia .o-bang { width: 120px; flex: none; }
.o-bang--sua { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); background: var(--kn-mat); }
.kn-mt .o-bang--sua { border-color: var(--kn-vang-dam); background: var(--kn-mat); }
.kn-mt .o-bang--sua input { text-decoration: none; }
.dx-sua { display: block; margin-top: 2px; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-cho-chu); text-align: right; white-space: nowrap; }
.dx-viec { display: flex; gap: 6px; justify-content: flex-end; }
.dx-viec .nut { padding: 0 10px; }
.dx-viec .nut[aria-pressed="true"] { border-color: var(--kn-vang-dam); background: var(--kn-vang-nen); }
.dx-the .dx-viec { justify-content: flex-start; }
.dx-the .dx-viec .nut { flex: 1; }
.dx-the .dx-sua { text-align: left; }
/* ==================== (6.10) Màn Đợt 10 · Kiểm kho tồn sổ, lọc chỉ dòng chênh (.dem-kho__ben, .dem-kho__so, .loc-chenh*), Cần mua làm tròn, Hay phải tạm thay (.can-mua__tron, .can-mua__tam, .can-mua__muon, .can-mua-the--tam) ==================== */
/* Đợt 10 · Kiểm kho: tồn sổ mờ cạnh ô đếm, lọc chỉ dòng chênh */
.dem-kho__ben { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dem-kho__ben .dem-kho__dvt { width: auto; }
.dem-kho__so { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dem-kho__dong--dang .dem-kho__so { color: var(--kn-chu-2); } /* chu-3 trên vàng nhạt chỉ 4,49:1 */
.loc-chenh { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.loc-chenh__ghi { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
/* Đợt 10 · Cần mua: chữ làm tròn dưới SL đề xuất, nhóm "Hay phải tạm thay" chỉ để xem */
.can-mua__tron { display: block; margin-top: 2px; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); white-space: nowrap; }
.can-mua-the__t3:has(.can-mua__tron) { flex-wrap: wrap; row-gap: 2px; }
.can-mua-the__t3 .can-mua__tron { flex-basis: 100%; margin: 0; }
.bang tbody tr.can-mua__tam td { background: var(--kn-nen); }
.can-mua__muon { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.can-mua__muon .ma { color: var(--kn-chu); }
.can-mua-the--tam { background: var(--kn-nen); gap: 4px; }
/* ==================== (6.11a) Màn Đợt 11a · Cây phân loại (.cay-nhom*, .duong-nhom*, .cay-giua*, .cot-du*, .chip--chua-duyet, .xem-tt*, .xem-ten-goi, .tang-ds*) ==================== */
/* Đợt 11a · Danh mục › Cây phân loại (N11). Chỉ class mới, mọi màu qua biến token. */
/* Cây nhóm (MT, iPad ngang): cột trái 260 */
.cay-nhom { flex: none; width: 260px; display: flex; flex-direction: column; min-height: 0; background: var(--kn-mat); border-right: 1px solid var(--kn-vien); }
.cay-nhom__dau { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--kn-vien); }
.cay-nhom__tong { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.cay-nhom__muc { display: flex; flex-wrap: wrap; gap: 6px; }
.cay-nhom__ds { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.cay-nhom__dong { appearance: none; border: 0; background: transparent; width: 100%; display: flex; align-items: center; gap: 6px; flex: none; min-height: var(--kn-cao-nut); padding: 0 8px 0 4px; border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu); text-align: left; cursor: pointer; }
.cay-nhom__dong > .ic { width: 16px; height: 16px; flex: none; color: var(--kn-chu-2); }
.cay-nhom__dong--loai { padding-left: 26px; }
.cay-nhom__dong--la { padding-left: 26px; }
.cay-nhom__dong[aria-current="true"] { background: var(--kn-vang-nen); font-weight: 600; box-shadow: inset 3px 0 0 var(--kn-vang-dam); }
.cay-nhom__dong[aria-expanded="true"] { font-weight: 600; }
.cay-nhom__ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cay-nhom__so { flex: none; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.cay-nhom__hieu { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.cay-nhom__cham { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cay-nhom__cham--sua { background: var(--kn-cho-chu); }
.cay-nhom__cham--duyet { background: var(--kn-vang); box-shadow: 0 0 0 1px var(--kn-vang-dam); }
.cay-nhom__chu-giai { flex: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px; border-top: 1px solid var(--kn-vien); font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.cay-nhom__chu-giai > span { display: inline-flex; align-items: center; gap: 5px; }
.kn-ipad .cay-nhom { width: 240px; }
/* Đường nhóm: "Điện › Dây cáp điện"; bản dính đầu có nút Quay lại (iPad dọc, điện thoại) */
.duong-nhom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.duong-nhom b { color: var(--kn-chu); font-weight: 600; }
.duong-nhom__noi { color: var(--kn-chu-3); }
.duong-nhom--dinh { position: sticky; top: 0; z-index: var(--kn-z-dinh); flex-wrap: nowrap; gap: 8px; padding: 6px 0; background: var(--kn-nen); }
.duong-nhom--dinh .nut { flex: none; }
.duong-nhom__chu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cột danh sách (MT, iPad ngang) */
.cay-giua { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px var(--kn-le); overflow: hidden; }
.cay-giua__dau { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cay-giua__dem { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.cay-giua .bang { flex: 1; min-height: 0; }
.cot-du { font-size: var(--kn-c1); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.cot-du--thieu { color: var(--kn-cho-chu); font-weight: 600; }
/* Chip mức "Chưa duyệt" (N13): viền vàng, nền trắng */
.chip.chip--chua-duyet { background: var(--kn-mat); border-color: var(--kn-vang-dam); color: var(--kn-chu); }
/* Xem nhanh một món: thuộc tính, tên gọi */
.xem-tt { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; background: var(--kn-mat); }
.xem-tt__nhan, .xem-tt__gt { padding: 9px 12px; font-size: var(--kn-c2); line-height: var(--kn-d2); border-bottom: 1px solid var(--kn-vien); }
.xem-tt__nhan { color: var(--kn-chu-2); background: var(--kn-nen); }
.xem-tt__gt { color: var(--kn-chu); font-weight: 400; overflow-wrap: anywhere; }
.xem-tt__gt--thieu { color: var(--kn-cho-chu); font-weight: 600; }
.xem-tt > :nth-last-child(-n+2) { border-bottom: 0; }
.xem-tt__dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xem-ten-goi { display: flex; flex-wrap: wrap; gap: 6px; }
/* Đi từng tầng (iPad dọc, điện thoại): danh sách nhóm / loại / món */
.tang-ds { flex: none; display: flex; flex-direction: column; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.tang-ds__nhom { padding: 10px 16px 6px; font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); background: var(--kn-nen); border-bottom: 1px solid var(--kn-vien); display: flex; justify-content: space-between; gap: 8px; }
.tang-ds__dong { appearance: none; border: 0; border-bottom: 1px solid var(--kn-vien); background: transparent; width: 100%; display: flex; align-items: center; gap: 12px; min-height: var(--kn-cao-dong-2); padding: 8px 12px 8px 16px; font-family: var(--kn-font); text-align: left; color: var(--kn-chu); cursor: pointer; }
.tang-ds__dong:last-child { border-bottom: 0; }
.tang-ds__dong--chon { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.tang-ds__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tang-ds__ten { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tang-ds__phu { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tang-ds__ben { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tang-ds__so { flex: none; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.tang-ds__dong > .ic { flex: none; width: 20px; height: 20px; color: var(--kn-chu-2); }
.tang-ds__dong .chip { flex: none; }
.tang-ds__dong--mon { align-items: flex-start; }
.tang-ds__dong--mon .vong-tick { margin-top: 2px; }
.cay-nhom__muc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cay-nhom__muc .chip-gia-tri { justify-content: center; padding: 0 6px; font-size: var(--kn-c2); min-width: 0; white-space: nowrap; }
.kn-ipad .cay-nhom--hep .cay-nhom__muc .chip-gia-tri { font-size: var(--kn-c1); padding: 0 4px; }
.duong-nhom__chu .duong-nhom__noi { margin: 0 4px; }
/* ==================== (6.11b) Màn Đợt 11b · Hàng mới cần duyệt (.duyet-hang*), Kiểm 30 món (.kiem-30*), Tra trên mạng (.tra-mang*) ==================== */
/* (6.11b) Hàng mới cần duyệt (.duyet-hang*, .kiem-30*) · Cài đặt › Tra trên mạng (.tra-mang*) */
/* Hàng mới cần duyệt · khối đầu Danh mục › Hàng */
.duyet-hang { gap: 12px; }
.duyet-hang__phu { flex: 1; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.duyet-hang .khoi-lon__tieu-de { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.duyet-hang .thanh-chon { position: static; }
.duyet-hang .bang td { white-space: normal; vertical-align: top; padding-top: 10px; padding-bottom: 10px; height: auto; }
.duyet-hang .bang td.co-o { padding-top: 6px; padding-bottom: 6px; }
.duyet-hang__dong.dang-chon td { background: var(--kn-vang-nen); }
.duyet-hang__dong.dang-chon td:first-child { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.duyet-hang__ten { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--kn-c3); line-height: var(--kn-d3); }
.duyet-hang__nguon { display: inline-flex; align-items: center; gap: 4px; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); white-space: nowrap; }
.duyet-hang__nguon .ic { color: var(--kn-chu-2); }
.duyet-hang__doan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.duyet-hang__doan .ic { color: var(--kn-vang-dam); flex: none; }
.duyet-hang__viec { display: flex; align-items: center; gap: 6px; }
.duyet-hang__viec .nut { flex: none; }
.duyet-hang__duoi { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); padding: 4px 4px 0; }
/* iPad: thẻ */
.duyet-hang__the { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); background: var(--kn-mat); }
.duyet-hang__the--chon { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.duyet-hang__dau { display: flex; align-items: flex-start; gap: 12px; }
.duyet-hang__dau .vong-tick { width: var(--kn-cao-nut); height: var(--kn-cao-nut); margin: -12px -8px -12px -12px; }
.duyet-hang__chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duyet-hang__ten-to { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; }
.duyet-hang__phu2 { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.duyet-hang__the .duyet-hang__doan { margin-top: 0; padding-left: 36px; }
.duyet-hang__nut { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 8px; }
.duyet-hang__nut .nut { width: 100%; min-width: 0; padding: 0 8px; }
/* Kiểm 30 món · mỗi thẻ một màn */
.kiem-30 { display: flex; flex-direction: column; gap: 16px; max-width: 640px; width: 100%; margin: 0 auto; }
.kiem-30__tien { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; padding-right: 8px; }
.kiem-30__tien-trinh { display: flex; flex-direction: column; gap: 8px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.kiem-30__tien-trinh .tien-trinh { height: 6px; }
.kiem-30__the { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-20); background: var(--kn-mat); }
.kiem-30__the--sua { border-color: var(--kn-vang-dam); }
.kiem-30__nhan { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.kiem-30__ten { font-size: var(--kn-c6); line-height: var(--kn-d6); font-weight: 700; }
.kiem-30__nguon { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.kiem-30__mui { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding-top: 12px; border-top: 1px dashed var(--kn-vien-o); font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); }
.kiem-30__loai { display: flex; flex-direction: column; gap: 2px; }
.kiem-30__loai b { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.kiem-30__luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.kiem-30__tt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--kn-bo-10); background: var(--kn-nen); }
.kiem-30__tt span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.kiem-30__tt b { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.kiem-30__ghi { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.kiem-30__chan { justify-content: center; gap: 16px; }
.kiem-30__chan .nut--chan { flex: 1; max-width: 300px; height: 64px; font-size: var(--kn-c4); }
.kiem-30__sai { color: var(--kn-loi-chu); }
.kiem-30__sai .ic { color: var(--kn-loi-chu); }
/* Cài đặt › Tra trên mạng */
.tra-mang__ai { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: var(--kn-bo-10); background: var(--kn-nen-2); font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu); }
.tra-mang__ai .ic { color: var(--kn-vang-dam); }
.tra-mang { gap: 0; min-height: 0; }
.tra-mang__trai { flex: none; width: 440px; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; border-right: 1px solid var(--kn-vien); min-height: 0; overflow: hidden; }
.tra-mang__phai { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; overflow: hidden; }
.tra-mang__loc { display: flex; flex-direction: column; gap: 8px; }
.tra-mang__hang { display: flex; align-items: flex-end; gap: 8px; }
.tra-mang__hang .o-chon { flex: 1; min-width: 0; }
.tra-mang__ds { display: flex; flex-direction: column; border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); background: var(--kn-mat); overflow: hidden; }
.tra-mang__dong { appearance: none; border: 0; border-bottom: 1px solid var(--kn-vien); background: transparent; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 12px; text-align: left; font-family: var(--kn-font); color: var(--kn-chu); cursor: pointer; }
.kn-mt .tra-mang__dong { min-height: 52px; }
.tra-mang__dong:last-child { border-bottom: 0; }
.tra-mang__dong[aria-current="true"] { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.tra-mang__dong .ic { color: var(--kn-chu-2); flex: none; }
.tra-mang__dong-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tra-mang__dong-chu b { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tra-mang__dong-chu span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.tra-mang__tiep { display: flex; flex-direction: column; gap: 6px; }
.tra-mang__tiep .nut { width: 100%; }
.tra-mang__phu { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.tra-mang__ct-dau { display: flex; align-items: center; gap: 12px; }
.tra-mang__ct-ten { font-size: var(--kn-c5); line-height: var(--kn-d5); font-weight: 600; }
.tra-mang__khoi { gap: 8px; padding: 12px 16px; }
.tra-mang__khoi .khoi-lon__tieu-de { font-size: var(--kn-c3); line-height: var(--kn-d3); }
.tra-mang__ss { display: flex; gap: 14px; }
.tra-mang__xoa { color: var(--kn-loi-chu); }
.tra-mang__la-gi { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 400; }
.tra-mang__thuoc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tra-mang__thuoc > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--kn-bo-10); background: var(--kn-nen); min-width: 0; }
.tra-mang__thuoc span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.tra-mang__thuoc b { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; }
.tra-mang__thieu { color: var(--kn-cho-chu); }
.tra-mang__ten-ds { display: flex; flex-wrap: wrap; gap: 8px; }
.tra-mang__ten { display: inline-flex; flex-direction: column; gap: 0; padding: 6px 12px; border-radius: var(--kn-bo-10); background: var(--kn-nen-2); }
.tra-mang__ten b { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; }
.tra-mang__ten span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.tra-mang__khoi .bang td { white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; }
.tra-mang__xuong { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tra-mang__nguon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tra-mang__nguon li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu-2); }
.tra-mang__ct { gap: 12px; }
.tra-mang__hai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.kn-ipad .tra-mang__hai { grid-template-columns: minmax(0, 1fr); }
.tra-mang__phai { overflow-y: auto; }
.tra-mang__khoi .bang__phu { white-space: normal; }
/* ==================== (6.11c) Màn Đợt 11c · Bảng đối chiếu hợp nhất mã: giấy in (.dchn*), màn xem máy tính (.dchn-man, .dchn-ds, .dchn-cap, .dchn-xem) ==================== */
/* Đợt 11c · Bảng đối chiếu hợp nhất mã hàng (In_Doi_chieu_hop_nhat_ma_*, Bao_cao_Doi_chieu_hop_nhat_ma_MT)
Giấy trình cơ quan thuế: A4 dọc, đen trắng, lề 8 mm, không trang trí. Màu chỉ qua biến --kn-in-* và token. */
.dchn.in-a4 { padding: 30px; font-size: 12px; line-height: 17px; }
.dchn.in-le::after { inset: 30px; }
.dchn .in-chan-trang { right: 30px; bottom: 10px; }
.dchn .in-than { gap: 0; }
.dchn-dau { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 8px; border-bottom: 1.5px solid var(--kn-in-ke-dam); }
.dchn-dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 0; font-size: 11.5px; line-height: 16px; }
.dchn-dl dt { color: var(--kn-in-chu-2); }
.dchn-dl dd { margin: 0; font-weight: 700; color: var(--kn-in-chu); }
.dchn-dl--phai { flex: none; }
.dchn-tieu-de { margin: 10px 0 0; text-align: center; font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: .02em; color: var(--kn-in-chu); }
.dchn-tieu-phu { margin: 0 0 4px; text-align: center; font-size: 11.5px; color: var(--kn-in-chu-2); }
.dchn-muc { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 3px; font-size: 12.5px; line-height: 17px; font-weight: 800; color: var(--kn-in-chu); break-after: avoid; }
.dchn-muc small { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--kn-in-chu-2); }
.dchn-ma { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid var(--kn-in-ke-dam); }
.dchn-ma th, .dchn-ma td { padding: 4px 7px; border: 1px solid var(--kn-in-ke); text-align: left; vertical-align: top; }
.dchn-ma thead th { background: var(--kn-in-nen); font-size: 10.5px; font-weight: 700; }
.dchn-ma tbody th { background: var(--kn-in-nen); font-weight: 700; white-space: nowrap; }
.dchn-ma .giua { text-align: center; }
.dchn-ma__ma { font-weight: 800; white-space: nowrap; }
.dchn-hop { margin-top: 8px; padding: 7px 10px; border: 2.5px solid var(--kn-in-ke-dam); font-size: 11.5px; line-height: 16px; color: var(--kn-in-chu); break-inside: avoid; }
.dchn-hop__nhan { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.dchn .in-bang { font-size: 10.5px; line-height: 14px; }
.dchn .in-bang th { padding: 4px 4px; font-size: 9.5px; }
.dchn .in-bang td { padding: 3px 4px; }
.dchn .in-bang tr { break-inside: avoid; }
.dchn .in-bang thead { display: table-header-group; }
.dchn .in-bang__nhom td { padding-top: 4px; font-weight: 800; }
.dchn .in-bang__tong td { font-size: 11px; padding: 4px 4px; }
.dchn-trung td { text-decoration: line-through; text-decoration-thickness: 1px; }
.dchn-trung-ghi td { padding: 2px 4px 4px; font-size: 10px; font-style: italic; font-weight: 600; border-bottom: 1px solid var(--kn-in-ke); }
.dchn-tru td { font-style: italic; }
.dchn-ghi { margin: 6px 0 0; font-size: 10.5px; line-height: 15px; color: var(--kn-in-chu-2); }
.dchn-con-tiep { margin: auto 0 0; text-align: center; font-size: 11px; font-style: italic; color: var(--kn-in-chu-3); }
.dchn-cuoi { padding-top: 4px; }
.dchn-ngay-ky { margin: 6px 0 0; text-align: right; font-size: 11.5px; font-style: italic; }
.dchn-ky { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 4px; text-align: center; break-inside: avoid; }
.dchn-ky > div { display: flex; flex-direction: column; }
.dchn .in-ky__o { height: 48px; }
/* Xem trên máy tính */
.dchn-duong { margin: 0; font-size: 13px; line-height: 18px; color: var(--kn-chu-2); }
.dchn-viec { display: flex; gap: 8px; align-items: center; }
.dchn-man { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; padding: 0 16px 16px; }
.dchn-ds { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 12px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.dchn-ds__dau { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 4px; }
.dchn-ds__tieu-de { font-size: calc(15px * var(--kn-tl)); line-height: calc(20px * var(--kn-tl)); font-weight: 600; }
.dchn-ds__dem { font-size: calc(13px * var(--kn-tl)); color: var(--kn-chu-2); }
.dchn-ds__ghi { margin: 4px 4px 0; font-size: calc(13px * var(--kn-tl)); line-height: calc(18px * var(--kn-tl)); color: var(--kn-chu-2); }
.dchn-cap { appearance: none; display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 40px; padding: 8px 10px; text-align: left; font-family: var(--kn-font); color: var(--kn-chu); background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-10); cursor: pointer; }
.dchn-cap--chon { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); box-shadow: inset 3px 0 0 var(--kn-vang-dam); }
.dchn-cap__ma { font-family: var(--kn-font-ma); font-size: calc(13px * var(--kn-tl)); line-height: calc(18px * var(--kn-tl)); font-weight: 600; }
.dchn-cap__ten { font-size: calc(14px * var(--kn-tl)); line-height: calc(20px * var(--kn-tl)); color: var(--kn-chu-2); }
.dchn-cap--chon .dchn-cap__ten { color: var(--kn-chu); }
.dchn-cap__duoi { display: flex; padding-top: 2px; }
.dchn-man__giua { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: var(--kn-nen-2); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.dchn-xem { width: calc(794px * .62); height: calc(1123px * .62); flex: none; }
.dchn-xem__giay { width: 794px; height: 1123px; transform: scale(.62); transform-origin: 0 0; box-shadow: var(--kn-bong-2); }
.dchn-man__ghi { margin: 0; font-size: calc(13px * var(--kn-tl)); line-height: calc(18px * var(--kn-tl)); color: var(--kn-chu-2); text-align: center; }
.dchn-tra { font-size: 9.5px; color: var(--kn-in-chu-2); }
/* ==================== (6.12) Đợt 12 · Chữ, đậm nhạt, khoảng cách (07/11) ====================
Đậm 600 chỉ cho thứ mắt phải tìm: tên khách / tên hàng của dòng, tiêu đề nhóm, tab và menu đang chọn, nút chốt, tổng.
Còn lại thường 400: nhãn cột, nhãn ô, ngày, ĐVT, SL, đơn giá, mã, trạng thái, nút phụ, lọc. 700 chỉ tiêu đề màn và số tổng lớn. */
.ma { font-family: var(--kn-font); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; color: var(--kn-chu-2); letter-spacing: 0; }
.tieu-de-man, .t-tieu-de-1, .t-so-lon { font-weight: 700; }
.t-tieu-de-2, .t-the-1, .t-the-2 { font-weight: 600; }
.t-nhan, .o-nhap__nhan, .nhom-o__nhan { font-weight: 400; color: var(--kn-chu-2); }
.t-chip { font-weight: 400; }
.bang th { background: var(--kn-nen-2); }
.bang__nhom-thang td { font-weight: 600; background: var(--kn-nen-3); }
.bang__nhom-khach td, .bang__nhom-hang td { font-weight: 600; }
.bang__tong td { font-weight: 700; }
.the__ten, .the__tien { font-weight: 600; }
.the__t2 { font-weight: 400; color: var(--kn-chu); }
.dau-man__t1 { font-weight: 700; }
.dau-man__t2 { font-weight: 400; }
.tab-gach__nut, .phan-doan__nut, .thanh-trai__dong { font-weight: 400; }
.tab-gach__nut[aria-selected="true"], .phan-doan__nut[aria-pressed="true"], .phan-doan__nut[aria-selected="true"], .thanh-trai__dong[aria-current="page"] { font-weight: 600; }
.nut--vien, .nut--phu, .nut--chu, .nut--bieu-tuong, .chip-loc, .loc { font-weight: 400; }
.nhom-cai__tieu-de { font-weight: 600; color: var(--kn-chu); }
/* Khoảng cách: không để ô, chip, nút sát nhau */
.hang-chip, .hang-chip-ten, .hang-loc { gap: 10px; }
.hang-loc { row-gap: 10px; }
.chip-loc { min-height: 40px; padding-left: 14px; }
.kn-ipad .chip-loc, .kn-dt .chip-loc { min-height: 44px; }
.o-nhap, .o-chon { gap: 8px; }
.dau-man { gap: 16px; }
.dau-man__hang { gap: 12px 16px; }
.bang th, .bang td { padding-left: 14px; padding-right: 14px; }
.kn-mt { --kn-cao-dong-ds: 48px; }
.the { gap: 8px; padding: 16px 16px 14px; }
.dong-the { gap: 10px; padding: 12px 14px; }
/* Mọi hàng nút: cách nhau 8–12, không dính */
:is(.hang-nut, .chan-man, .hop__chan, .the__t4) { gap: 12px; }
/* Thẻ, bảng nổi trên nền trang xám */
.the, .dong-the, .nhom-cai, .bang-boc, .bang-chon { border-color: var(--kn-vien); }
/* Dòng danh sách: chữ lớn thì dòng cao theo, không cắt */
.dong-ds { height: auto; min-height: var(--kn-cao-dong-ds); padding-top: 8px; padding-bottom: 8px; }
.dong-ds__nguoi, .dong-ds__tien { font-weight: 600; }
.dong-ds__xong { width: calc(150px * var(--kn-tl)); }
.bang td.o-xoa .nut--xoa-dong { font-size: 0; line-height: 0; padding: 0; gap: 0; } /* trong bảng chỉ hình thùng rác, vùng chạm giữ nguyên */
.bang td.o-xoa .nut--xoa-dong .ic { width: 22px; height: 22px; }
/* Nhãn cột nhỏ, thường; chữ trong dòng to hơn nhãn */
.dong-ds .nut--di-tiep { white-space: normal; text-align: left; line-height: var(--kn-d1); }
/* Đậm trong dòng bảng (07/11 tối): chữ trong ô = 600; tiền mỗi dòng = 400, chỉ dòng tổng 700 */
.bang td b { font-weight: 600; }
.bang tbody tr:not(.bang__tong) td.so b { font-weight: 400; }
/* ==================== (6.13) Đợt 14 · Sửa theo ảnh anh Kevin 07/11 tối ====================
Tiêu đề cột và dòng nhóm: đậm, to hơn chữ thường một nấc nhỏ. Mọi ô canh giữa theo chiều dọc.
Bước: chữ và số cùng đường chân chữ. Hàng lọc: mọi ô cùng cao, một dòng, không chữ phụ bên dưới. Chênh lệch có màu. */
:root, .kn-dt, .kn-ipad, .kn-mt, [data-tb] { --kn-c-tieu: calc(var(--kn-c3) + 1px * var(--kn-tl)); --kn-d-tieu: var(--kn-d3); }
.bang th { font-size: var(--kn-c-tieu); line-height: var(--kn-d-tieu); font-weight: 600; color: var(--kn-chu); background: var(--kn-nen-2); vertical-align: middle; }
.bang__nhom-thang td, .bang__nhom-khach td, .bang__nhom-hang td { font-size: var(--kn-c-tieu); line-height: var(--kn-d-tieu); vertical-align: middle; }
.bang__nhom-thang td { font-weight: 700; }
.bang__nhom-khach td, .bang__nhom-hang td { font-weight: 600; }
.bang__nhom-thang td.so, .bang__nhom-khach td.so { font-weight: 600; }
.bang td { vertical-align: middle; }
.ds__thang, .ds__khach { align-items: center; font-size: var(--kn-c-tieu); line-height: var(--kn-d-tieu); }
/* Bước: gạch chân bằng text-decoration, không dùng viền dưới nên chữ và số "2/3" thẳng hàng */
.thanh-buoc { align-items: baseline; }
.buoc { padding-bottom: 0; border-bottom: 0; text-decoration: none; }
.buoc--hien { text-decoration: underline 2px var(--kn-vang); text-underline-offset: 5px; }
.thanh-buoc__noi { padding-bottom: 0; }
/* Hàng lọc đầu màn: mọi ô cùng cao --kn-cao-o, cùng một dòng, giá trị một dòng cắt "…", không nhãn trên, không chữ phụ dưới */
.dau-muc__hang { align-items: center; }
.dau-muc__hang > .o-chon { gap: 0; }
.dau-muc__hang > .o-chon > .o-nhap__nhan, .dau-muc__hang > .o-chon > .o-chon__phu { display: none; }
.dau-muc__hang .o-chon__o { height: var(--kn-cao-o); }
.dau-muc__hang .o-chon__gia-tri { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.o-loc--khach { width: calc(220px * var(--kn-tl-cot)); flex: none; }
.o-loc { width: calc(160px * var(--kn-tl-cot)); flex: none; }
.o-loc--thang { width: calc(140px * var(--kn-tl-cot)); flex: none; }
.dau-muc__tieu { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.o-chon__o.co-gia-tri { border-color: var(--kn-muc); }
.o-chon__o.co-gia-tri .o-chon__gia-tri { color: var(--kn-chu); font-weight: 600; }
.o-chon__xoa { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-right: -4px; border-radius: var(--kn-bo-tron); color: var(--kn-chu-2); position: relative; }
.o-chon__xoa::after { content: ""; position: absolute; inset: -8px; }
/* Chênh lệch: + xanh, − đỏ, 0 nhạt. "Lệch" (hóa đơn khác bảng kê) luôn đỏ đậm vì phải sửa */
.chenh--duong { color: var(--kn-xong-chu); }
.chenh--am { color: var(--kn-loi-chu); }
.chenh--0 { color: var(--kn-chu-3); }
.lech { color: var(--kn-loi-chu); font-weight: 600; }
.lech--0 { color: var(--kn-xong-chu); font-weight: 600; }
/* Ghép mã gọn: vừa 1440 không cuộn ngang */
.gm-gon td.o-ma { white-space: normal; }
.the-ma { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); background: var(--kn-mat); line-height: var(--kn-d1); }
.the-ma--goi-y { background: var(--kn-vang-nen); border-color: var(--kn-vang-vien); }
.the-ma__ma { font-size: var(--kn-c1); color: var(--kn-chu-2); }
.the-ma__ten { font-size: var(--kn-c2); line-height: var(--kn-d2); color: var(--kn-chu); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.gm-gon td.so { white-space: normal; }
.viec-hang { display: flex; gap: 8px; }
.viec-hang .nut { flex: 1; padding: 0 8px; }
.the-ma__phu { font-size: var(--kn-c1); color: var(--kn-chu-2); display: flex; gap: 8px; flex-wrap: wrap; }
.tien-2 { display: flex; flex-direction: column; align-items: flex-end; line-height: var(--kn-d2); }
.tien-2__phu { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.viec-2 { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
/* ==================== (6.14) Đợt 15 · Bảng soạn khi hẹp (iPad dọc, cỡ chữ Lớn): Tên hàng không bao giờ bị bóp ====================
Bảng soạn gắn .bang--soan. Khi khung bảng hẹp hơn 900 px, mỗi dòng hàng thành hai tầng:
tầng 1 = STT · Tên hàng (gần hết bề ngang) · Xóa; tầng 2 = ĐVT · SL · Đơn giá · Thành tiền.
Thứ tự ô trong dòng giữ nguyên: STT, Tên hàng, ĐVT, SL, Đơn giá, Thành tiền, Xóa. */
.bang--soan { container-type: inline-size; }
@container (max-width: 900px) {
.bang--soan table, .bang--soan thead, .bang--soan tbody { display: block; width: 100%; }
.bang--soan colgroup { display: none; }
.bang--soan tr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--kn-vien); }
.bang--soan tr > td, .bang--soan tr > th { display: block; height: auto; padding: 0; border: 0; overflow: visible; white-space: normal; min-width: 0; box-shadow: none !important; }
.bang--soan tr > td:empty { display: none; }
.bang.bang--soan tr:has(.o-ten-hang) > td, .bang.bang--soan tr > td.co-o { padding: 0; line-height: var(--kn-d3); vertical-align: middle; }
.bang--soan tr:has(> :nth-child(7)) {
display: grid; align-items: center; column-gap: 8px; row-gap: 8px; padding: 10px 8px 12px;
grid-template-columns: calc(48px * var(--kn-tl)) calc(96px * var(--kn-tl-cot)) calc(80px * var(--kn-tl-cot)) minmax(0, 1fr) minmax(0, 1fr) 48px;
grid-template-areas: "stt ten ten ten ten xoa" ". dvt sl gia tien .";
}
.bang--soan tr:has(> :nth-child(7)) > :nth-child(1) { grid-area: stt; text-align: center; color: var(--kn-chu-2); }
.bang--soan tr:has(> :nth-child(7)) > :nth-child(2) { grid-area: ten; }
.bang--soan tr:has(> :nth-child(7)) > :nth-child(3) { grid-area: dvt; }
.bang--soan tr:has(> :nth-child(7)) > :nth-child(4) { grid-area: sl; }
.bang--soan tr:has(> :nth-child(7)) > :nth-child(5) { grid-area: gia; }
.bang--soan tr:has(> :nth-child(7)) > :nth-child(6) { grid-area: tien; text-align: right; font-weight: 600; }
.bang--soan tr:has(> :nth-child(7)) > :nth-child(7) { grid-area: xoa; display: flex; justify-content: center; }
.bang--soan tr:has(> :nth-child(7)) > td:empty { display: block; }
/* Tiêu đề cột cũng hai tầng: tầng 1 STT · Tên hàng, tầng 2 ĐVT · SL · Đơn giá · Thành tiền */
.bang--soan thead tr:has(> :nth-child(7)) { background: var(--kn-nen-2); row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.bang--soan thead th:nth-child(3), .bang--soan thead th:nth-child(4) { text-align: center; }
.bang--soan thead th:nth-child(5), .bang--soan thead th:nth-child(6) { text-align: right; }
/* Thanh màu bên trái dòng chuyển từ ô đầu sang cả dòng */
.bang--soan tbody tr.dang-chon { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.bang--soan tbody tr.dong-loi, .bang--soan tbody tr.viec { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.bang--soan .o-ten-hang { align-items: center; }
.bang--soan .o-ten-hang > .anh-hang { margin-top: 0; }
.bang--soan tr.bang__nhom-hang { background: var(--kn-nen); font-weight: 600; }
.bang--soan tr.bang__phi { background: var(--kn-nen); }
.bang--soan tr.bang__tong { justify-content: space-between; border-bottom: 0; border-top: 1px solid var(--kn-vien-o); font-weight: 700; }
.bang--soan tr.bang__tong > td { flex: none; }
}
/* ==================== (6.15) Đợt 15 · Ô chọn đọc rõ (07–08/11) ====================
Tên chính (khách, khu vực, hàng) đậm 600; mỗi dòng có vạch chia; nhóm Gần đây / Tất cả canh trái, nền xám, dính trên;
"Vừa chọn" là nhãn nhỏ bên phải, không phải dòng chữ dưới; ô một tầng (Khu vực, Tháng) chỉ một dòng.
Máy tính: không có hàng tiêu đề "Khách × Đóng" (bấm ra ngoài hoặc Esc là đóng); không khung lồng trong khung. */
.bang-chon__t1 { font-weight: 600; }
.bang-chon__dong { border-radius: 0; padding: 10px 14px; border-bottom: 1px solid var(--kn-vien); }
.bang-chon__ds > .bang-chon__dong:last-child { border-bottom: 0; }
.bang-chon__dong--mot { padding-top: 0; padding-bottom: 0; }
.bang-chon__t2 { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.bang-chon__nhom { justify-content: flex-start; gap: 6px; min-height: 30px; margin: 0; padding: 0 14px; background: var(--kn-nen-2); border-bottom: 1px solid var(--kn-vien); position: sticky; top: 0; z-index: 1; }
.bang-chon__the { flex: none; margin-left: auto; padding: 2px 8px; border-radius: var(--kn-bo-tron); background: var(--kn-nen-2); color: var(--kn-chu-2); font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 400; }
.bang-chon__dong[aria-selected="true"] .bang-chon__the { background: var(--kn-mat); }
.bang-chon .bang-chon__ds { border: 0; }
/* Tên công ty (tên pháp lý) ở mọi nơi trên web: đậm 600, màu chữ chính; MST và phần còn lại giữ thường */
.ten-cty { font-weight: 600; color: var(--kn-chu); }
/* Ô In · Chia sẻ · ⋯ cuối dòng: không bao giờ bị cắt thành "…", ba nút canh giữa dọc, cột đủ 3 × 36 */
.bang td.o-viec { overflow: visible; text-overflow: clip; white-space: nowrap; padding-left: 2px; padding-right: 2px; text-align: center; }
.bang td.o-viec .nut { vertical-align: middle; }
.bang td.o-viec .ic { display: block; }
/* Bảng soạn Báo giá (8 ô: Chọn · STT · Hàng · ĐVT · SL · Giá · Thành tiền · Tồn) khi hẹp: cũng hai tầng */
.bang--soan-bg { container-type: inline-size; }
@container (max-width: 900px) {
.bang--soan-bg table, .bang--soan-bg thead, .bang--soan-bg tbody { display: block; width: 100%; }
.bang--soan-bg colgroup { display: none; }
.bang--soan-bg tr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--kn-vien); }
.bang--soan-bg tr > td, .bang--soan-bg tr > th { display: block; height: auto; padding: 0; border: 0; overflow: visible; white-space: normal; min-width: 0; box-shadow: none !important; }
.bang.bang--soan-bg tr:has(.o-ten-hang) > td, .bang.bang--soan-bg tr > td.co-o { padding: 0; line-height: var(--kn-d3); }
.bang--soan-bg tr > td:empty { display: none; }
.bang--soan-bg tr:has(> :nth-child(8)) {
display: grid; align-items: center; column-gap: 8px; row-gap: 8px; padding: 10px 8px 12px;
grid-template-columns: 36px calc(48px * var(--kn-tl)) calc(96px * var(--kn-tl-cot)) calc(80px * var(--kn-tl-cot)) minmax(0, 1fr) minmax(0, 1fr) calc(88px * var(--kn-tl));
grid-template-areas: "chon stt ten ten ten ten ton" ". . dvt sl gia tien .";
}
.bang--soan-bg tr:has(> :nth-child(8)) > td:empty { display: block; }
.bang--soan-bg tr:has(> :nth-child(8)) > :nth-child(1) { grid-area: chon; }
.bang--soan-bg tr:has(> :nth-child(8)) > :nth-child(2) { grid-area: stt; color: var(--kn-chu-2); }
.bang--soan-bg tr:has(> :nth-child(8)) > :nth-child(3) { grid-area: ten; }
.bang--soan-bg tr:has(> :nth-child(8)) > :nth-child(4) { grid-area: dvt; text-align: center; }
.bang--soan-bg tr:has(> :nth-child(8)) > :nth-child(5) { grid-area: sl; }
.bang--soan-bg tr:has(> :nth-child(8)) > :nth-child(6) { grid-area: gia; }
.bang--soan-bg tr:has(> :nth-child(8)) > :nth-child(7) { grid-area: tien; text-align: right; font-weight: 600; }
.bang--soan-bg tr:has(> :nth-child(8)) > :nth-child(8) { grid-area: ton; text-align: right; font-size: var(--kn-c1); color: var(--kn-chu-2); }
.bang--soan-bg thead tr:has(> :nth-child(8)) { background: var(--kn-nen-2); row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.bang--soan-bg tbody tr.dang-chon { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.bang--soan-bg tbody tr.dong-loi, .bang--soan-bg tbody tr.viec { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.bang--soan-bg .o-ten-hang { align-items: center; }
.bang--soan-bg tr.bang__nhom-hang, .bang--soan tr.bang__nhom-hang { background: var(--kn-nen-2); }
.bang--soan-bg tr.bang__nhom-hang > td, .bang--soan tr.bang__nhom-hang > td, .bang--soan-bg tr.bang__phi > td, .bang--soan tr.bang__phi > td { background: transparent; }
.bang--soan-bg .o-ten-hang > .anh-hang { margin-top: 0; }
}
@container (max-width: 900px) {
/* Báo giá 7 ô (không cột Tồn): Chọn · STT · Hàng · ĐVT · SL · Giá · Thành tiền */
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) {
display: grid; align-items: center; column-gap: 8px; row-gap: 8px; padding: 10px 8px 12px;
grid-template-columns: 36px calc(48px * var(--kn-tl)) calc(96px * var(--kn-tl-cot)) calc(80px * var(--kn-tl-cot)) minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "chon stt ten ten ten ten" ". . dvt sl gia tien";
}
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) > td:empty { display: block; }
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(1) { grid-area: chon; }
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(2) { grid-area: stt; color: var(--kn-chu-2); }
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(3) { grid-area: ten; }
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(4) { grid-area: dvt; text-align: center; }
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(5) { grid-area: sl; }
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(6) { grid-area: gia; }
.bang--soan-bg tr:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(7) { grid-area: tien; text-align: right; font-weight: 600; }
.bang--soan-bg thead tr:has(> :nth-child(7)) { background: var(--kn-nen-2); row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
}
/* ==================== (6.16) Đợt 15b · Số tổng in đậm (08/11) ====================
Mọi số tổng đậm: Thành tiền mỗi dòng, Tiền của mỗi chứng từ trong danh sách, tổng nhóm = 600; Tổng cuối = 700 và to hơn một bậc. */
.bang td.so b, .bang tbody tr:not(.bang__tong) td.so b { font-weight: 600; }
.bang--soan tr > :nth-child(6), .bang--soan-bg tr > :nth-child(7) { font-weight: 600; }
.bang__phi td.so { font-weight: 600; }
.bang__tong td { font-weight: 700; }
.bang__tong td.so { font-size: var(--kn-c4); line-height: var(--kn-d4); }
@container (max-width: 900px) {
.bang--soan tr.bang__tong > td:last-of-type, .bang--soan tr.bang__tong > td.so, .bang--soan-bg tr.bang__tong > td.so { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; }
}
.dong-ds__tien, .the__tien, .tien-2 > span:first-child { font-weight: 600; }
/* Thẻ dòng điện thoại: SL canh giữa; Đơn giá xuống hàng riêng, đủ rộng để hiện hết số; ĐVT đứng cạnh SL */
.dong-the__t2 { flex-wrap: wrap; row-gap: 8px; }
.dong-the__sl .o-bang input, .bang--soan .o-bang--so input[aria-label="Số lượng"], .o-bang--giua input { text-align: center; }
.dong-the__dvt { order: 1; font-size: var(--kn-c3); color: var(--kn-chu); }
.dong-the__gia { order: 2; flex: 1 0 100%; }
.dong-the__gia .o-bang { width: 100%; }
.dong-the__gia .o-bang::before { content: "Đơn giá"; flex: none; margin-right: 12px; font-size: var(--kn-c2); color: var(--kn-chu-2); }
/* Tên hàng ở mọi nơi đậm 600 (ô nhập tên hàng, thẻ mã trên Thuế, dòng thẻ, bảng); Thành tiền đậm 600; dòng phụ "gốc · chênh" một dòng */
.the-ma__ten, .o-ten-hang input, .dong-the__t1 .cat, .ten-hang { font-weight: 600; }
.tien-2 > span:first-child { font-weight: 600; color: var(--kn-chu); }
.tien-2__phu { white-space: nowrap; }
/* ==================== (6.17) Đợt 15d · Số kê khác màu (08/11) ====================
Thành tiền chuẩn: luôn đen, đậm 600. Giá kê, SL kê: xanh --kn-ke. Thành tiền kê: xanh đậm hơn --kn-ke-dam, đậm 600.
Tiêu đề cột kê cũng xanh để nhìn cột là biết. Áp cho mọi nơi có số kê: bảng kê, giá kê, hóa đơn, danh sách, thẻ, bản xem khách. */
.so-gia-ke, .so-gia-ke input, .o-bang--ke input { color: var(--kn-ke); }
.so-ke, .so-ke b { color: var(--kn-ke-dam); font-weight: 600; }
.so-chuan, .so-chuan b { color: var(--kn-chu); font-weight: 600; }
.bang th.cot-ke { color: var(--kn-ke); }
.bang td.so-gia-ke b { color: var(--kn-ke); }
.o-bang--ke { border-color: color-mix(in srgb, var(--kn-ke) 45%, var(--kn-vien-o)); }
.dong-ds__tien.so-ke, .the__tien.so-ke { color: var(--kn-ke-dam); }
.so-ke .tien-2 > span:first-child { color: var(--kn-ke-dam); }
/* Khối tiền ba tầng có sẵn (.tien-ke__*): số kê xanh đậm, số thật đen đậm */
.tien-ke__ke { color: var(--kn-ke-dam); }
.tien-ke__that { color: var(--kn-chu); font-weight: 600; }
/* Cột số thẳng hàng: tiêu đề và số trong cột cùng canh phải, cùng lề phải; cột chữ canh trái; mọi ô canh giữa dọc */
.bang th.so, .bang td.so { text-align: right; }
.bang th.giua, .bang td.giua { text-align: center; }
.bang td { vertical-align: middle; }
/* ==================== (6.18) Đợt 16 · Chặn lỗi trình bày gốc (08/11) ====================
Lớp dành cho phần tử con không được làm hỏng ô bảng; tên lớp trùng không được biến ô thành khối. */
.bang td.bang__ten, .bang th.bang__ten { display: table-cell; white-space: normal; overflow: visible; }
.bang th.s, .bang td.s { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.loc:has(> .o-chon), .loc:has(> .o-nhap) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; height: auto; padding: 0; border: 0; background: none; }
.loc:has(> .o-chon) .o-chon__phu, .loc:has(> .o-nhap) .o-chon__phu { display: none; }
.bang-chon__ds { overflow-x: hidden; }
/* Nút Đi tiếp trong ô bảng: không bao giờ tràn ra khỏi ô */
.bang td.co-o .nut--di-tiep { max-width: 100%; min-width: 0; overflow: hidden; }
.bang td.co-o .nut--di-tiep { white-space: nowrap; }
/* Không chữ nào bị cắt trong tiêu đề cột: tiêu đề được xuống dòng */
.bang th { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
/* Số, ngày, mã trong ô không bao giờ bị cắt (cột đủ rộng theo bản vẽ) */
.bang td.so, .bang td.s { text-overflow: clip; }
/* Trong bảng, nút Xóa dòng chỉ hiện hình thùng rác (chữ vẫn đọc được cho máy đọc màn) */
.bang td .nut--xoa-dong { font-size: 0; gap: 0; padding: 0; min-width: 40px; }
.bang td .nut--xoa-dong .ic { width: 22px; height: 22px; }
/* Dòng nhóm và nhãn việc được xuống dòng thay vì tràn ô */
.bang tr[class*="bang__nhom"] td { white-space: normal; }
.bang td .nhan-viec { white-space: normal; }
.bang td .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; }
/* Dòng danh sách iPad: phần cuối dòng (nút Đi tiếp hoặc chữ Xong) luôn cùng bề rộng nên số tiền thẳng cột */
.dong-ds > .nut--di-tiep, .dong-ds > .dong-ds__xong { flex: none; width: calc(188px * var(--kn-tl-cot)); }
.dong-ds__xong { text-align: center; }
.dong-ds__tien { min-width: calc(120px * var(--kn-tl-cot)); text-align: right; }
/* Số và mã trong ô: thà lấn vào lề trong của ô còn hơn bị cắt */
.bang td.so, .bang td.s, .bang td:has(> .ma:only-child) { overflow: visible; text-overflow: clip; }
/* (6.19) Cấm chữ đè, cấm cắt chữ "…": cột tự giãn theo nội dung, chữ dài xuống dòng, tiêu đề cột một dòng */
.bang table { table-layout: auto; }
.bang th { white-space: nowrap; overflow: visible; text-overflow: clip; }
.bang td { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.bang td.so, .bang td.s, .bang th.so, .bang th.s, .bang td .ma, .bang td .ngay, .bang td .so-ke, .bang td .so-chuan, .bang td .tien-2 > * { white-space: nowrap; }
.bang td .nut, .bang td .chip, .bang td .nhan-viec, .bang td .buoc { white-space: nowrap; min-width: max-content; max-width: none; }
.bang__ten, .bang__phu, .bang__dong-phu, .cat, .o-chon__phu, .bang-chon__t1, .bang-chon__t2, .the__ten, .the__t2, .dong-ds__nguoi,
.dau-man__t1, .thanh-tren__ten, .o-ten-hang__phu, .dong-the__thue, .thu-di__t1, .dong-viec__t2, .thu-di-the__ten, .khoi-gon__t2,
.dong-cai__gia-tri, .dong-ls__nguoi, .gm2__dong-t1 .cat, .gm2__dong-t2, .tam-ky__ten b, .da-ban__t1, .da-ban__t2, .dong-xem__t1,
.can-mua__ncc-ten, .can-mua__ten, .can-mua__phu, .can-mua__dvt, .can-mua-the__ten, .dem-kho__tieu b, .cot-hom-nay__ten, .cot-hom-nay__mo,
.da-co__t2, .tam-thay-chip, .cay-nhom__ten, .duong-nhom__chu, .tang-ds__ten, .tang-ds__phu, .tra-mang__dong-chu b, .bang td .chip {
white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.da-ban__t2 { flex-wrap: wrap; }
/* Ô chọn, nút, chip: không bao giờ hẹp hơn chữ bên trong */
.nut, .chip, .tab-gach > *, .phan-doan > *, .dau-muc__hang .o-chon, .loc .o-chon { min-width: max-content; }
/* Ô chọn trong lưới form: chữ dài xuống dòng trong ô, ô cao theo chữ; không lấn sang ô bên cạnh */
.o-chon { min-width: 0; }
.o-chon__o { height: auto; min-height: var(--kn-cao-o); }
.o-chon__gia-tri { text-align: left; white-space: normal; overflow-wrap: break-word; padding-top: 6px; padding-bottom: 6px; }
.dau-muc__hang .o-chon__gia-tri, .loc .o-chon__gia-tri { white-space: nowrap; padding: 0; }
.o-chon__gia-tri, .dau-muc__hang .o-chon__gia-tri { overflow: visible; text-overflow: clip; }
.dong-ds__phu { flex-wrap: wrap; row-gap: 0; white-space: normal; overflow: visible; }
.dong-ds__phu > * { white-space: nowrap; }
/* Mã, số phiếu, số hóa đơn không bị bẻ đôi khi xuống dòng */
.ma, .so-phieu, .so-hd { white-space: nowrap; overflow-wrap: normal; }
.bang--soan thead th:first-child, .bang--soan-bg thead th:nth-child(2) { white-space: nowrap; }
.ma-chu { white-space: nowrap; }
/* Ô ghi chú: chữ dài xuống dòng, ô tự cao theo chữ (Safari: tự đặt chiều cao theo scrollHeight khi gõ) */
.o-bang:has(> textarea.o-ghi) { height: auto; min-height: var(--kn-cao-o-bang); }
textarea.o-ghi { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 6px 0; background: transparent; resize: none; overflow: hidden; field-sizing: content;
font-family: var(--kn-font); font-size: var(--kn-co-o); line-height: 1.4; color: var(--kn-chu); white-space: pre-wrap; overflow-wrap: break-word; }
.kn-mt textarea.o-ghi { text-decoration: underline dotted var(--kn-vien-dam); text-underline-offset: 4px; }
.chia-may__tep span { overflow-wrap: anywhere; white-space: normal; }
/* Điện thoại: thanh trên chỉ giữ chấm trạng thái lưu (giờ lưu xem ở Hộp thư đi), tên màn không bao giờ bị đè */
.kn-dt .thanh-tren .trang-thai-gui { font-size: 0; gap: 0; padding: 0 10px; min-width: 36px; justify-content: center; }
.kn-dt .thanh-tren__ten { min-width: min-content; white-space: normal; }
.kn-dt .thanh-tren__ten .ma-chu { font-size: var(--kn-c2); }
.thanh-tren__tim { min-width: 150px; }
/* Ô nhập trong bảng không hẹp hơn chữ thường gặp */
.o-bang:has(input[aria-label="ĐVT"]) { min-width: calc(64px * var(--kn-tl)); }
.o-bang:has(input[aria-label="SL"]), .o-bang:has(input[aria-label="Số lượng"]) { min-width: calc(56px * var(--kn-tl)); }
.chia-may__tep span { overflow: visible; text-overflow: clip; }
.thanh-tren__tim { min-width: calc(200px * var(--kn-tl)); }
.o-nhap__o:has(input[aria-label="Số chứng từ"]), .o-nhap__o:has(input[aria-label="Số hóa đơn"]) { min-width: calc(190px * var(--kn-tl)); }
/* (6.20) Lọc Tháng: chọn năm rồi tháng, mỗi tháng ghi số chứng từ; giá trị ô luôn mm/yyyy */
.chon-thang--loc { width: calc(400px * var(--kn-tl-cot)); min-width: 0; max-height: none; padding: 12px 14px 14px; gap: 12px; }
.chon-thang__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chon-thang__dau b { font-size: var(--kn-c-tieu); line-height: var(--kn-d-tieu); font-weight: 600; }
.chon-thang__gan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chon-thang__nhan { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); margin-right: 4px; }
.chon-thang__nam { padding-top: 10px; border-top: 1px solid var(--kn-vien); }
.chon-thang__nam > span { font-size: var(--kn-c3); font-weight: 700; }
.chon-thang--loc .chon-thang__luoi { gap: 6px; }
.chon-thang--loc .chon-thang__o { height: auto; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--kn-vien); }
.chon-thang--loc .chon-thang__o b { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.chon-thang__dem { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); white-space: nowrap; }
.chon-thang__o--trong b, .chon-thang__o--trong .chon-thang__dem { color: var(--kn-chu-3); font-weight: 400; }
.chon-thang--loc .chon-thang__o[aria-selected="true"] { border-color: var(--kn-muc); }
.chon-thang--loc .chon-thang__o[aria-selected="true"] .chon-thang__dem { color: var(--kn-trang); }
.kn-ipad .chon-thang--loc .chon-thang__o, .kn-dt .chon-thang--loc .chon-thang__o { min-height: 64px; }
.khung-truot__than.chon-thang--loc { padding: 4px 16px 24px; }
.o-chon__o.dang-mo { border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); }
/* Tên hàng trong bảng soạn: không bao giờ cắt, tên dài xuống dòng, ô tự cao */
textarea.o-ten { font-weight: 600; }
.o-ten-hang .o-bang:has(> textarea) { height: auto; min-height: var(--kn-cao-o-bang); }
textarea.o-ghi { line-height: 24px; padding: calc((var(--kn-cao-o-bang) - 26px) / 2) 0; }
.o-bang:has(> textarea) { align-items: stretch; }
.kn .bang tr:has(.o-ten-hang__cot) > td:not(.co-o), .kn-mt .bang tr:has(.o-ten-hang__cot) > td:not(.co-o) { padding-top: calc(6px + (var(--kn-cao-o-bang) - 24px) / 2); }
/* (6.21) Hóa đơn · Ghép mã theo bố cục V1: phần 1 Ghép mã (Hàng bảng kê | Hàng trên Thuế | Đúng), phần 2 Hóa đơn gom theo mã */
.phan-hd { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.phan-hd__dau { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.phan-hd__so { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--kn-muc); color: var(--kn-trang); font-size: var(--kn-c2); font-weight: 700; }
.phan-hd__ten { margin: 0; font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 700; }
.phan-hd__dau > .hang-chip { flex: 1; min-width: 0; }
.chip-chon b { font-weight: 700; }
.tt-hd { margin-top: 10px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.tt-hd__dau { list-style: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 52px; padding: 8px 16px; cursor: pointer; }
.tt-hd__dau::-webkit-details-marker { display: none; }
.tt-hd__ten { font-size: var(--kn-c2); line-height: var(--kn-d2); font-weight: 600; color: var(--kn-chu-2); flex: none; }
.tt-hd__tom { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: var(--kn-c3); line-height: var(--kn-d3); }
.tt-hd__tom > span { color: var(--kn-chu-2); }
.tt-hd__mo { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* bảng Ghép mã (máy tính) */
.bang-ghep .ghep-nhom-cot th { height: 34px; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 700; letter-spacing: .02em; color: var(--kn-chu-2); border-bottom: 1px solid var(--kn-vien); }
.bang-ghep .ghep-nhom-cot__thue { border-left: 1px solid var(--kn-vien-o); border-right: 1px solid var(--kn-vien-o); }
.bang-ghep tbody td:nth-child(3), .bang-ghep thead tr:last-child th:nth-child(3) { border-left: 1px solid var(--kn-vien-o); }
.bang-ghep tbody td:nth-child(9), .bang-ghep thead tr:last-child th:nth-child(9) { border-left: 1px solid var(--kn-vien-o); }
.bang-ghep tbody td { padding-top: 8px; padding-bottom: 8px; }
.ghep-bk { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ghep-bk__ten { font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 600; }
.ghep-bk__phu { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.o-ma-ten, .o-ma-chon { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--kn-cao-o-bang); padding: 4px 10px; text-align: left;
background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu); cursor: pointer; }
.o-ma-ten__chu { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.o-ma-ten .ma { flex: none; }
.o-ma-chon { border: 1.5px dashed var(--kn-loi-chu); color: var(--kn-loi-chu); font-weight: 600; justify-content: flex-start; }
.o-ma-chon .ic:last-child, .o-ma-ten .ic:last-child { margin-left: auto; flex: none; }
.nhan-tt { display: inline-flex; align-items: center; margin-top: 4px; padding: 0 8px; height: 22px; border-radius: var(--kn-bo-tron); font-size: var(--kn-c1); font-weight: 600; white-space: nowrap; }
.nhan-tt--goi { background: var(--kn-cho-nen); color: var(--kn-cho-chu); }
.ghep-dvt-khac { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-cho-chu); white-space: nowrap; }
.ton { font-variant-numeric: tabular-nums; }
.ton--thieu { color: var(--kn-cho-chu); font-weight: 600; }
.ton--het { color: var(--kn-loi-chu); font-weight: 600; }
.chu-nhat { color: var(--kn-chu-3); }
.dong-ghep--chua > td:first-child { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.dong-ghep--goi > td:first-child { box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.dong-ghep--goi > td { background: var(--kn-cho-nen); }
/* ô Đúng: ô vuông 28, đánh dấu xanh khi xác nhận */
.o-dung { position: relative; display: inline-grid; place-items: center; width: var(--kn-cao-nut); height: var(--kn-cao-nut); cursor: pointer; }
.o-dung input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.o-dung__o, .o-dung--tat { width: 28px; height: 28px; border-radius: var(--kn-bo-6); border: 1.5px solid var(--kn-vien-dam); background: var(--kn-mat); display: grid; place-items: center; }
.o-dung__o::after { content: ""; width: 16px; height: 16px; opacity: 0; background: var(--kn-trang);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.o-dung input:checked + .o-dung__o { background: var(--kn-xong-chu); border-color: var(--kn-xong-chu); }
.o-dung input:checked + .o-dung__o::after { opacity: 1; }
.o-dung--tat { display: inline-block; background: var(--kn-nen-2); border-color: var(--kn-vien); }
/* iPad, điện thoại: thẻ hai tầng */
.ds-ghep2 { display: flex; flex-direction: column; gap: 10px; }
.the-ghep2 { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); box-shadow: inset 4px 0 0 transparent; }
.the-ghep2--chua { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.the-ghep2--goi { box-shadow: inset 4px 0 0 var(--kn-vang-dam); background: var(--kn-cho-nen); }
.the-ghep2__tren { display: flex; align-items: flex-start; gap: 10px; }
.the-ghep2__bk { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.the-ghep2__bk .vong-tick { flex: none; margin-top: 0; }
.the-ghep2__dung { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0; font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu-2); }
.the-ghep2__dung .o-dung { height: 40px; }
.the-ghep2__thue { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.the-ghep2__so { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1.3fr); gap: 8px; align-items: end; }
.the-ghep2__o { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.the-ghep2__o > span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.the-ghep2__o > b { min-height: var(--kn-cao-o-bang); display: flex; align-items: center; font-size: var(--kn-c3); }
.kn-dt .the-ghep2__so { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ds-hd2 { background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.dong-hd2 { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--kn-vien); }
.dong-hd2:last-child { border-bottom: 0; }
.dong-hd2__stt { color: var(--kn-chu-2); text-align: center; }
.dong-hd2__ten { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dong-hd2__ten > span { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.dong-hd2__tien { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dong-hd2--tong { background: var(--kn-nen-2); }
.dem-ghep--hep { gap: 6px 16px; }
.nut--xoa-chu { color: var(--kn-loi-chu); border-color: var(--kn-loi-chu); }
.nut--rong-het { width: 100%; justify-content: center; }
/* Tổng ở chân màn: nhãn, số, dòng phụ cùng canh trái, một khối */
.chan-man__tong { align-items: flex-start; text-align: left; }
.phan-hd > .hang-chip { flex-wrap: wrap; overflow: visible; }
.kn-dt .tt-hd__dau { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.kn-dt .tt-hd__tom { grid-column: 1 / -1; grid-row: 2; gap: 2px 12px; }
.kn-dt .o-ma-ten { flex-wrap: wrap; }
/* ===== (7) GHÉP VÀO WEB (Claude Code, 06/11/2026) =====
Bố cục các vùng của ứng dụng mà bảng vẽ vẽ từng màn riêng: cột danh sách · cột chi tiết · xem cạnh, theo data-man
(ds · ct · soan · canh) và khung (.khung--dt / --id / --in / --mt). Chỉ bố cục, chỉ biến --kn-*; không thêm màu. */
#khung.kn { height: 100dvh; overflow: hidden; }
.khung.ung-dung { flex-direction: row; height: 100dvh; }
.khung > [hidden], .khung__giua > [hidden], .thanh-duoi[hidden] { display: none !important; }
.khung__than.vung { flex: 1; min-height: 0; display: flex; position: relative; }
.vung > .cot-ds { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.vung > .cot-ds > .noi-dung { flex: 1; }
.vung > .cot-ct { flex: 1; min-width: 0; min-height: 0; display: none; flex-direction: column; background: var(--kn-nen); }
.vung > .canh { display: none; flex: 1; min-width: 0; min-height: 0; flex-direction: column; border-left: 1px solid var(--kn-vien); }
.cot-ct > .cuon, .canh > .cuon { flex: 1; min-height: 0; overflow-y: auto; }
/* điện thoại, iPad dọc: một cột — mở chứng từ thì cột chi tiết thay danh sách */
.ung-dung[data-man="ct"] .vung > .cot-ds, .ung-dung[data-man="soan"] .vung > .cot-ds, .ung-dung[data-man="canh"] .vung > .cot-ds { display: none; }
.ung-dung[data-man="ct"] .vung > .cot-ct, .ung-dung[data-man="soan"] .vung > .cot-ct, .ung-dung[data-man="canh"] .vung > .cot-ct { display: flex; }
.ung-dung[data-man="canh"] .vung > .canh { display: flex; }
/* iPad ngang, máy tính: danh sách bên trái (380 iPad · 560–620 máy tính xem nhanh), chi tiết bên phải; soạn mở toàn khung */
.khung--in.ung-dung[data-man="ct"] .vung > .cot-ds { display: flex; flex: none; width: 380px; border-right: 1px solid var(--kn-vien); }
.khung--mt.ung-dung[data-man="ct"] .vung > .cot-ds { display: flex; flex: 1; border-right: 1px solid var(--kn-vien); }
.khung--mt.ung-dung[data-man="ct"] .vung > .cot-ct { flex: none; width: clamp(600px, 40vw, 800px); }
.ung-dung[data-ds-rong][data-man="ds"] .vung > .cot-ct { display: none; }
.cot-ct .rong-ct { flex: 1; display: grid; place-items: center; color: var(--kn-chu-3); }
/* thông báo nằm trong khung (thanh dưới, chân màn không bị che) */
.khung > .lop-thong-bao { bottom: calc(16px + var(--kn-day-chiem, 0px)); }
.khung--dt > .lop-thong-bao, .khung--id > .lop-thong-bao { --kn-day-chiem: 72px; }
/* Lớp phủ: lớp bọc cũ giữ lớp man-che (bộ thử tìm theo lớp này). Tấm trượt: lớp bọc là nền che, tấm trượt dính đáy;
ô xổ: lớp bọc không che, bộ chọn nằm ngay dưới ô (.bang-chon--noi); hộp thoại: lớp bọc là nền che canh giữa (.lop-hop) */
.man-che > .phu-mo { position: absolute; inset: 0; }
.lop-hop.man-che { display: grid; place-items: center; }
.lop-hop.man-che > .hop { position: relative; }
/* lớp bọc ô xổ ôm đúng bảng xổ (có kích thước: bộ thử, trình đọc màn hình thấy được); gần đáy thì xổ lên */
.lop-chon--xo.man-che { position: absolute; inset: auto; left: 0; top: calc(100% + 6px); width: 100%; background: none; z-index: var(--kn-z-menu); } /* R1: bề rộng do .bang-chon (≥ 420) */
.lop-chon--xo.man-che:has(> .bang-chon--len) { top: auto; bottom: calc(100% + 6px); }
.lop-chon--xo > .bang-chon { position: relative; top: auto; bottom: auto; left: auto; }
.lop-chon--xo > .phu-mo { display: none; }
/* 10/11: hộp chọn không có ô neo trên máy tính, iPad ngang — nổi giữa màn */
.lop-chon--giua.man-che { display: grid; place-items: center; padding: 16px; }
.lop-chon--giua > .khung-truot { position: relative; inset: auto; width: min(600px, 100%); max-height: min(80dvh, 760px); border-radius: var(--kn-bo-20); animation: kn-noi var(--kn-tg-ngan) ease-out; }
.lop-chon--giua > .khung-truot .khung-truot__tay { display: none; }
.lop-chon--xo > .bang-chon { min-width: max(100%, 420px); max-height: 520px; }
.lop-chon--xo > .bang-chon--hep, .lop-chon--xo > .bang-chon--thang { min-width: 100%; width: max-content; }
.bang-chon > .bang-chon__ds, .khung-truot > .bang-chon__ds { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.khung-truot > .bang-chon__tim { margin: 0 12px 8px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); }
.khung-truot > .bang-chon__ds { padding: 0 8px 8px; }
.bang-chon__tim .dem { background: transparent; color: var(--kn-chu-3); font-weight: 500; }
/* Lưới menu theo Khung_Menu_iD / _DT: ô iPad cao 132, chữ 17 */
.kn-ipad .luoi-menu__o { min-height: 132px; font-size: var(--kn-c3); }
/* Đầu danh sách: các ô lọc nằm cùng hàng (ô chọn rộng 200 iPad · 180 máy tính); thanh tổng máy tính canh phải */
.k3-cuon { flex: 1; min-height: 0; }
/* (7b) Thành phần chung dùng nút/aria thay ô tick ẩn — trạng thái lấy theo aria-checked */
.vong-tick[aria-checked="true"] > .vong-tick__o, [aria-checked="true"] > .vong-tick > .vong-tick__o { background: var(--kn-muc); border-color: var(--kn-muc); }
.vong-tick[aria-checked="true"] > .vong-tick__o::after, [aria-checked="true"] > .vong-tick > .vong-tick__o::after { opacity: 1; }
button.vong-tick { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; min-width: 48px; min-height: 48px; cursor: pointer; }
.kn-ipad button.vong-tick { min-width: 58px; min-height: 58px; }
button.gat { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; min-width: 48px; min-height: 48px; cursor: pointer; }
.gat[aria-checked="true"] > .gat__ray { background: var(--kn-muc); }
.gat[aria-checked="true"] > .gat__ray::after { transform: translateX(20px); }
.gat:disabled > .gat__ray { background: var(--kn-nen-3); }
.gat:focus-visible { outline: 2px solid var(--kn-vang-dam); outline-offset: 2px; border-radius: var(--kn-bo-tron); }
.cong-tac-nhan { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; font-size: var(--kn-c3); color: var(--kn-chu); }
.cong-tac-nhan.khoa { color: var(--kn-chu-tat); }
/* Mã còn tạo dải, chip bằng lớp cũ (doc_file, soan, ds…): cùng hình dải, chip của bộ bàn giao */
.dai-do, .dai-vang, .dai-loi { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px 10px 16px; border: 1px solid; border-radius: var(--kn-bo-14); font-size: var(--kn-c3); line-height: var(--kn-d3); font-weight: 500; margin: 0; }
.dai-do, .dai-loi { background: var(--kn-loi-nen); color: var(--kn-loi-chu); border-color: var(--kn-loi-vien); }
.dai-vang { background: var(--kn-cho-nen); color: var(--kn-cho-chu); border-color: var(--kn-cho-vien); }
.dai-do > .chu-dai, .dai-vang > .chu, .dai-loi > .chu { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.dai-do .ic, .dai-vang .ic, .dai-loi .ic { width: 20px; height: 20px; flex: none; }
.dai .dai__cau { display: block; }
.chip.het, .chip.huy { background: var(--kn-nhap-nen); color: var(--kn-nhap-chu); border-color: var(--kn-nhap-vien); }
.chip.cho:not([class*="chip--"]) { background: var(--kn-cho-nen); color: var(--kn-cho-chu); border-color: var(--kn-cho-vien); }
.chip.tin:not([class*="chip--"]) { background: var(--kn-xong-nen); color: var(--kn-xong-chu); border-color: var(--kn-xong-vien); }
.xuong-ca { margin-bottom: 8px; }
.khoi-lon + .khoi-lon { margin-top: 16px; }
/* (7c) Màn chi tiết / soạn: vùng cuộn có lề như .noi-dung; bảng cũ (table.bang trong khung-bang) mang hình .bang của bộ */
.cot-ct > .cuon, .canh > .cuon { display: flex; flex-direction: column; }
.dinh-ct { position: sticky; top: 0; z-index: var(--kn-z-dinh); background: var(--kn-nen); display: flex; flex-direction: column; gap: 8px; padding: 12px var(--kn-le) 8px; }
.dinh-ct:empty { display: none; }
.noi-ct { display: flex; flex-direction: column; gap: 16px; padding: 16px var(--kn-le) 24px; }
.noi-ct > * { flex: none; min-width: 0; }
.dinh-ct + .noi-ct { padding-top: 4px; }
.tim-dinh > .o-tim { flex: 1; min-width: 0; }
.noi-ct > .tim-dinh { margin-bottom: -4px; }
.tim-dinh .phim { display: none; }
.kn-mt .tim-dinh .phim { display: inline-flex; flex: none; font-size: var(--kn-c1); color: var(--kn-chu-3); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-6); padding: 0 6px; }
.xoa-tim { appearance: none; border: 0; background: transparent; width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: var(--kn-chu-2); cursor: pointer; margin-right: -8px; }
.khung-bang:not(.bang) { background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: auto; }
.bang > table.bang { border: 0; border-radius: 0; background: none; overflow: visible; }
table.bang { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--kn-co-than); line-height: var(--kn-dong-than); }
table.bang-sua { table-layout: fixed; }
.bang .c-tien, .bang th.s { text-align: right; }
.bang .c-giua { text-align: center; }
.bang td.stt { color: var(--kn-chu-2); }
.bang td.chon, .bang th.chon { width: 58px; padding: 0 4px; text-align: center; }
.bang tbody tr.chon { background: var(--kn-vang-nen); }
.bang-sua td.co-o[data-cot="Hàng"] { white-space: normal; }
.o-bang--nut { appearance: none; -webkit-appearance: none; width: 100%; gap: 8px; font-family: var(--kn-font); font-size: var(--kn-co-o); color: var(--kn-chu); text-align: left; cursor: pointer; }
.o-bang--nut .gt-o { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-bang--nut .gt-o.trong { color: var(--kn-chu-3); }
.o-bang--nut .ic { width: 16px; height: 16px; flex: none; color: var(--kn-chu-2); }
.o-bang--nut:focus-visible { outline: 0; border-color: var(--kn-vang-dam); box-shadow: 0 0 0 3px var(--kn-quang); }
.o-bang:has(.gia-can-xem), .o-bang:has(.sl-can-xem), .o-bang:has([aria-invalid="true"]), .o-bang[aria-invalid="true"] { border-color: var(--kn-loi-chu); background: var(--kn-loi-nen); }
.o-bang input.so { text-align: right; }
.anh-hang img, .anh-hang .anh-khach { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.canh-dong-phieu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; white-space: normal; }
.canh-dong-phieu:empty { display: none; }
.canh-dong-phieu small { font-size: var(--kn-c1); line-height: var(--kn-d1); }
.canh-dong-phieu .gia-can-xem, .canh-dong-phieu .sl-can-xem { color: var(--kn-loi-chu); font-weight: 600; }
.canh-dong-phieu .nut { min-height: 32px; height: 32px; padding: 0 8px; font-size: var(--kn-c1); }
.k3-buocsl, .k3-dvtsl, .k3-tt-dong, .goi-y-phim { display: none; }
.kn-mt .goi-y-phim { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: var(--kn-c1); color: var(--kn-chu-2); border-bottom: 1px solid var(--kn-vien); }
.goi-y-phim kbd { font-family: var(--kn-font); font-size: var(--kn-c1); padding: 0 5px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-6); background: var(--kn-nen); }
/* Đầu phiếu soạn: lưới ô 2 cột iPad dọc · 4 cột iPad ngang, máy tính · 1 cột điện thoại (bảng vẽ Phieu_giao_Soan_iD / _iN / _DT) */
.truong-sua { --kn-so-cot: 2; }
.khung--in .truong-sua, .kn-mt .truong-sua { --kn-so-cot: 4; }
.kn-dt .truong-sua { --kn-so-cot: 1; }
.canh-ngay-o { display: flex; align-items: center; gap: 8px; font-size: var(--kn-c2); color: var(--kn-cho-chu); }
.canh-ngay-o .ic { width: 18px; height: 18px; }
.radio-the__dong[aria-checked="true"] .radio__o { border-color: var(--kn-muc); }
.radio-the__dong[aria-checked="true"] .radio__o::after { opacity: 1; }
.radio-the__dong:focus-visible { outline: 2px solid var(--kn-vang-dam); outline-offset: 2px; }
.dai-vang[hidden], .dai-do[hidden], .dai[hidden] { display: none; }
/* iPad dọc (bảng vẽ Phieu_giao_Soan_iD): cột hẹp hơn để tên hàng đủ chỗ; Ghi chú dòng giữ (hẹp) để không mất việc sửa ghi chú */
.o-chon .o-chon__o > .ic:first-child { color: var(--kn-chu-2); }
.cong-cu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bang-sua td[data-cot="Thành tiền"] { font-weight: 700; }
/* Chuỗi chứng từ, đầu màn chi tiết, lưới trường chỉ đọc */
.chip-chuoi small { font-size: inherit; font-weight: 500; }
.chip-chuoi b { font-weight: 600; }
.dau-man__t3 .cham-noi { color: var(--kn-chu-3); }
.dau-man__t3 .ma { font-size: var(--kn-c2); color: var(--kn-chu-2); }
.dau-man__hang.t4 { gap: 8px 16px; }
.luoi-truong { display: grid; grid-template-columns: repeat(var(--kn-so-cot, 2), minmax(0, 1fr)); gap: 12px 24px; padding: 16px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.luoi-truong.bon { --kn-so-cot: 2; }
.khung--in .luoi-truong.bon, .kn-mt .luoi-truong.bon { --kn-so-cot: 4; }
.kn-dt .luoi-truong.bon { --kn-so-cot: 2; padding: 12px 14px; gap: 10px 16px; } /* 10/11: điện thoại hai cột cho gọn (trước một cột rất dài) */
.kn-dt .luoi-truong.bon .truong.rong-2 { grid-column: 1 / -1; }
.truong { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.truong .nhan-o { font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu-2); }
.truong .gt { font-size: var(--kn-c3); line-height: var(--kn-d3); color: var(--kn-chu); overflow-wrap: anywhere; }
.truong .gt.dam { font-weight: 600; }
.truong .dong2 { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-3); }
.truong .mo { color: var(--kn-chu-3); }
.truong.rong-2 { grid-column: span 2; }
.kn-dt .truong.rong-2 { grid-column: auto; }
/* Điện thoại (Phieu_giao_Chi_tiet_DT): chuỗi một hàng cuộn ngang · bước sau ẩn · công cụ 4 ô đứng · chân chỉ nút chốt (Quay lại ở thanh trên) */
.kn-dt .chuoi { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--kn-le)); padding: 0 var(--kn-le); }
.kn-dt .chuoi > * { flex: none; }
.kn-dt .thanh-buoc .buoc--sau, .kn-dt .thanh-buoc .thanh-buoc__noi:has(+ .buoc--sau) { display: none; }
.kn-dt .cong-cu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kn-dt .cong-cu > .nut { flex-direction: column; gap: 2px; height: 56px; padding: 0 4px; font-size: var(--kn-c1); line-height: var(--kn-d1); min-width: 0; }
.kn-dt .cong-cu > .phan-doan { grid-column: 1 / -1; }
.kn-dt .chan-man [data-nut="khung.quay_lai"], .kn-dt .chan-man__khoang, .kn-dt .chan-man > span[aria-hidden="true"] { display: none; }
/* BAN_GIAO: iPad dọc bảng soạn 7 cột — bỏ cột Ghi chú, Xóa dòng 68 hình trên chữ dưới */
.khung--id .bang-sua td.o-xoa .nut--xoa-dong { flex-direction: column; gap: 0; font-size: var(--kn-c1); line-height: var(--kn-d1); height: 52px; }
.bang tbody tr.thieu-gia, .bang tbody tr.thieu-gia td { background: var(--kn-loi-nen); }
.bang tbody tr.dong-phi td { background: var(--kn-nen); }
/* Bảng danh sách máy tính (Phieu_giao_Danh_sach_MT): dòng 44 · nhóm Tháng xám · nhóm Khách vàng nhạt dính dưới tên cột · vòng tick 48 */
.k3-cuon { overflow-y: auto; }
.bang tr.bang__nhom-khach > th { position: sticky; top: var(--kn-cao-tieu-de-cot); z-index: 9; height: 40px; background: var(--kn-vang-nen); border-bottom-color: var(--kn-vang-vien); }
.am { color: var(--kn-loi-chu); }
/* Xem nhanh mở (máy tính, ngăn 600): ẩn cột Chi nhánh (BAN_GIAO) */
/* Mục trong thanh bên / thanh ray / thanh dưới / lưới menu là button: bỏ nền mặc định của trình duyệt */
button.thanh-trai__dong, button.thanh-ray__o, button.thanh-duoi__o { appearance: none; -webkit-appearance: none; background: transparent; font-family: var(--kn-font); }
button.thanh-trai__dong { width: 100%; text-align: left; }
.hang-dau .gian, .dau-muc__hang .gian { flex: 1; }
/* (R1 08/11: bỏ luật ẩn tên màn trên thanh trên máy tính — R1 tên màn chỉ ở thanh trên) */
/* Thẻ điện thoại / Đang làm (Phieu_giao_Danh_sach_DT) */
.the .the__t1 .vong-tick { margin: -8px 0 -8px -8px; }
.the .dai { width: 100%; }
.the .tien-goc-ke { display: flex; gap: 8px; font-size: var(--kn-c1); color: var(--kn-chu-2); }
.the .tien-goc-ke .chenh { color: var(--kn-xong-chu); font-weight: 600; }
.the__nen > .o-nut.trong, .the__nen > .o1-trong { display: block; }
.the__nen .nut--bieu-tuong { height: 48px; font-size: var(--kn-c1); }
.the__nen > .nut:first-child:not(.nut--bieu-tuong) { height: 48px; }
.the .dong-ghi, .the .dong-xong { display: flex; align-items: center; gap: 6px; font-size: var(--kn-c1); color: var(--kn-chu-2); }
.the .dong-xong { color: var(--kn-xong-chu); font-weight: 600; }
.the .dong-ghi .ic, .the .dong-xong .ic { width: 16px; height: 16px; }
.kn-dt .dau-muc > .tieu-de-man, .kn-dt .dau-muc > h1 { display: none; }
.kn-dt .dau-muc .hang-dau { flex-wrap: nowrap; }
.kn-dt .dau-muc .hang-dau .phan-doan { flex: 1; }
.kn-dt .dau-muc .hang-dau .phan-doan__nut { flex: 1; justify-content: center; }
/* Điện thoại · bảng soạn thành thẻ "Dòng n" (Phieu_giao_Soan_DT): Xóa dòng góc phải · ảnh + tên · − SL + · giá · ĐVT · Thành tiền */
.kn-dt .bang.bang-boc { border: 0; background: none; overflow: visible; border-radius: 0; }
.kn-dt table.bang-sua, .kn-dt table.bang-sua > tbody { display: block; }
.kn-dt table.bang-sua > thead, .kn-dt table.bang-sua > colgroup { display: none; }
.kn-dt .bang-sua > tbody > tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; grid-template-areas: "stt stt xoa" "hang hang hang" "sl gia dvt" "tt tt tt" "them them them" "gc gc gc"; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--kn-mat); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.kn-dt .bang-sua > tbody > tr > td { display: block; grid-column: 1 / -1; height: auto; padding: 0; border: 0; white-space: normal; overflow: visible; background: none; }
.kn-dt .bang-sua > tbody > tr.thieu-gia { background: var(--kn-loi-nen); border-color: var(--kn-loi-vien); }
.kn-dt .bang-sua > tbody > tr.dong-phi { background: var(--kn-nen); }
.kn-dt .bang-sua > tbody > tr:focus-within { border-color: var(--kn-vang-dam); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.kn-dt .bang-sua td.stt { grid-area: stt; text-align: left; font-size: var(--kn-c1); font-weight: 600; color: var(--kn-chu-2); }
.kn-dt .bang-sua td.stt::before { content: "Dòng "; }
.kn-dt .bang-sua tr.dong-phi td.stt::before { content: "Phí vận chuyển"; }
.kn-dt .bang-sua td.o-xoa { grid-area: xoa; justify-self: end; }
.kn-dt .bang-sua td.o-xoa .nut--xoa-dong { flex-direction: row; gap: 6px; height: 40px; font-size: var(--kn-c2); }
.kn-dt .bang-sua td[data-cot="Hàng"] { grid-area: hang; }
.kn-dt .bang-sua td[data-cot="SL"] { grid-area: sl; display: flex; align-items: center; gap: 4px; }
.kn-dt .bang-sua td[data-cot="SL"] .o-bang { flex: 1; min-width: 0; height: 48px; }
.kn-dt .bang-sua td[data-cot="SL"] .o-bang input { text-align: center; }
.kn-dt .k3-buocsl { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 48px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-10); background: var(--kn-mat); font-family: var(--kn-font); font-size: var(--kn-c4); color: var(--kn-chu); cursor: pointer; }
.kn-dt .bang-sua td[data-cot="Giá"], .kn-dt .bang-sua td[data-cot="Đơn giá"] { grid-area: gia; }
.kn-dt .bang-sua td[data-cot="Giá"] .o-bang { height: 48px; }
.kn-dt .bang-sua td[data-cot="ĐVT"] { grid-area: dvt; }
.kn-dt .bang-sua td[data-cot="ĐVT"] .o-bang--nut { border-color: transparent; background: none; padding: 0 2px; min-width: 40px; color: var(--kn-chu-2); font-size: var(--kn-c2); }
.kn-dt .bang-sua td[data-cot="Thành tiền"] { grid-area: tt; display: flex; justify-content: space-between; align-items: baseline; text-align: right; font-size: var(--kn-c3); }
.kn-dt .bang-sua td[data-cot="Thành tiền"]::before { content: "Thành tiền"; font-size: var(--kn-c1); font-weight: 400; color: var(--kn-chu-2); }
.kn-dt .bang-sua td.k3-tt-dong { display: block; grid-area: them; }
.kn-dt .bang-sua td[data-cot="Ghi chú"] { display: none; grid-area: gc; }
.kn-dt .bang-sua tr.mo-tt td[data-cot="Ghi chú"] { display: block; }
.kn-dt .bang-sua td.co-o .o-ten-hang .anh-hang { margin-left: 0; }
.kn-dt .bang__them { border-top: 0; padding: 0; }
.kn-dt .bang__them .nut { flex: 1; }
/* Đầu phiếu điện thoại: lưới 2 cột, Khách · Chi nhánh · Người nhận · Thanh toán cả hàng; thẻ thanh toán xếp dọc */
.kn-dt .truong-sua { --kn-so-cot: 2; }
.kn-dt .truong-sua > [data-o="khach"], .kn-dt .truong-sua > [data-o="chi_nhanh"], .kn-dt .truong-sua > [data-o="nguoi_nhan"], .kn-dt .truong-sua > [data-o="giu_ngay"] { grid-column: 1 / -1; }
.kn-dt .radio-the--ngang { display: flex; flex-direction: column; }
.kn-dt .hang-dau .phan-doan { min-width: 0; }
.kn-dt .hang-dau > .nut { flex: none; }
/* Hộp In (Hop_In_iD / _DT): iPad, điện thoại tấm trượt cao 92% từ đáy; trái chọn 300 · phải xem trước nền xám; chân chip trang · Đóng · nút chốt */
.kn-ipad .lop-hop-in, .kn-dt .lop-hop-in { place-items: end stretch; }
.kn-ipad .hop-in, .kn-dt .hop-in { width: 100%; max-width: none; height: 92%; max-height: 92%; border-radius: var(--kn-bo-20) var(--kn-bo-20) 0 0; align-self: end; }
.kn-mt .hop-in { width: 1040px; height: 88%; }
.hop-in > .khung-truot__tay { flex: none; }
.hop-in .hop__dau { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 8px 16px 12px; }
.hop-in .hop__tieu-de { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.hop-in .hop__than.hai-cot { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding: 0 16px 16px; overflow: hidden; }
.kn-dt .hop-in .hop__than.hai-cot, [data-tb="dt"] .hop-in .hop__than.hai-cot { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
.k3-xemin > .tieu-de-mau { order: 3; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); text-align: center; }
.nhom-chon { display: flex; flex-direction: column; gap: 6px; }
.khoi-in { border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); background: var(--kn-mat); }
.khoi-in + .khoi-in { margin-top: 8px; }
.khoi-in__dau { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 4px; border-bottom: 1px solid var(--kn-vien); }
.khoi-in__dau .tick-chu { font-weight: 600; }
.khoi-in__dem { font-size: var(--kn-c1); color: var(--kn-chu-2); }
.khoi-in__luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; }
.tick-chu { appearance: none; -webkit-appearance: none; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px; font-family: var(--kn-font); font-size: var(--kn-c3); line-height: var(--kn-d2); color: var(--kn-chu); text-align: left; cursor: pointer; }
.tick-chu .vong-tick { min-width: 0; min-height: 0; }
.tick-chu:disabled { color: var(--kn-chu-tat); cursor: default; }
.tick-chu:focus-visible { outline: 2px solid var(--kn-vang-dam); outline-offset: -2px; border-radius: var(--kn-bo-10); }
.hang-mau { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; }
.hop__chan .gian { flex: 1; }
.hop-in .hop__chan { justify-content: flex-start; flex-wrap: wrap; }
/* Tấm trượt menu ⋯ (mo_to) và danh sách việc trong đó */
.lop-to.man-che { position: absolute; inset: 0; z-index: var(--kn-z-hop); background: var(--kn-man-che); }
.kn-mt .lop-to.man-che { display: grid; place-items: center; }
.kn-mt .lop-to > .khung-truot { position: relative; width: 560px; max-height: 80%; border-radius: var(--kn-bo-20); }
.menu-them { display: flex; flex-direction: column; }
.menu-them .nhom { display: flex; flex-direction: column; padding: 4px 0; }
.menu-them .nhom + .nhom { border-top: 1px solid var(--kn-vien); }
.menu-them .muc { appearance: none; -webkit-appearance: none; border: 0; background: transparent; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: var(--kn-bo-10); font-family: var(--kn-font); font-size: var(--kn-c3); color: var(--kn-chu); text-align: left; cursor: pointer; }
.menu-them .muc .ic { color: var(--kn-chu-2); }
@media (hover: hover) { .menu-them .muc:hover { background: var(--kn-nen-2); } }
.menu-them .muc:disabled, .menu-them .muc[aria-disabled="true"] { color: var(--kn-chu-tat); }
/* Khóa PIN (Khoa_PIN_iD) phủ cả khung */
.khoa-pin-lop.man-che { background: var(--kn-nen); z-index: var(--kn-z-hop); }
.khoa-pin-lop > .khoa-pin { position: absolute; inset: 0; }
.khoa-pin__ghi { max-width: 360px; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); text-align: center; }
/* Đổi hàng loạt (Kế hoạch 11.5 · Phieu_giao_Doi_hang_loat_MT / _iD): thanh chọn nhiều + hộp đổi 440 (điện thoại: tấm trượt) */
.cot-ds > .thanh-chon { margin: 0 0 8px; }
.thanh-chon .nut--chu { height: 40px; }
.thanh-doi-loat__ghi { flex-basis: 100%; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.menu-them .muc__chu { display: flex; flex-direction: column; }
.menu-them .muc__phu { font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-3); }
.menu-them .muc[aria-disabled="true"] { color: var(--kn-chu-tat); cursor: default; }
.hop-doi { width: 440px; }
.hop-doi .hop__dau { min-height: 56px; }
.hop-doi .hop__tieu-de { font-size: var(--kn-c4); line-height: var(--kn-d4); font-weight: 600; }
.hop-doi__ds { font-family: var(--kn-font-ma); font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); overflow-wrap: anywhere; }
.khoi-xem-truoc { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--kn-nen); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); }
.khoi-xem-truoc__t1 { font-size: var(--kn-c1); line-height: var(--kn-d1); font-weight: 600; color: var(--kn-chu-2); }
.khoi-xem-truoc__ds { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--kn-c3); line-height: var(--kn-d2); color: var(--kn-chu); }
.khoi-xem-truoc__rong { font-size: var(--kn-c2); color: var(--kn-chu-3); }
.kn-dt .lop-hop-doi { place-items: end stretch; }
.kn-dt .hop-doi { width: 100%; max-width: none; border-radius: var(--kn-bo-20) var(--kn-bo-20) 0 0; align-self: end; }
.kn-dt .hop-doi .hop__chan .nut { flex: 1; }
.dong-ds.dong-ds--chon { background: var(--kn-vang-nen); box-shadow: inset 4px 0 0 var(--kn-vang-dam); }
.dong-ds .vong-tick { flex: none; }
/* Ghép mã (Hoa_don_Ghep_ma_MT / _iD / _iN): bảng gian dòng cao, ô mã gm-ma, tồn, quy đổi, bộ chọn mã dạng bang-chon nổi */
.tick[aria-checked="true"] > .tick__o { background: var(--kn-muc); border-color: var(--kn-muc); }
.tick[aria-checked="true"] > .tick__o::after { opacity: 1; }
button.tick { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; min-width: 40px; min-height: 40px; cursor: pointer; }
.duoi-von, .duoi-von input { color: var(--kn-loi-chu); }
.k3-gmcon .tong { border-top: 1px solid var(--kn-vien); padding-top: 4px; font-weight: 600; }
.k3-gmthe.dang { border-color: var(--kn-vang-dam); background: var(--kn-vang-nen); }
.k3-gmthe .t1 { display: flex; gap: 8px; align-items: baseline; font-size: var(--kn-c3); }
.k3-gmthe .t2 .nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.k3-gmthe .t3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--kn-c2); }
/* Thanh dính Bảng kê · Hóa đơn · Chênh lệch (Kế hoạch 11.5): một hàng gọn như thanh-tong */
/* Ghép mã máy tính, iPad ngang (Hoa_don_Ghep_ma_MT): đầu màn một hàng — tên · mã · tháng · thanh bước bên phải; lưới trường chỉ đọc gọn */
.khung--mt .ung-dung[data-man="soan"] .dau-man[data-loai="hoa_don"], .ung-dung.khung--mt[data-man="soan"] .dau-man[data-loai="hoa_don"],
.ung-dung.khung--in[data-man="soan"] .dau-man[data-loai="hoa_don"] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ung-dung[data-man="soan"] .dau-man[data-loai="hoa_don"] .dau-man__t1 { font-size: var(--kn-c5); line-height: var(--kn-d4); }
.ung-dung.khung--mt[data-man="soan"] .dau-man[data-loai="hoa_don"] .dau-man__t2, .ung-dung.khung--in[data-man="soan"] .dau-man[data-loai="hoa_don"] .dau-man__t2 { margin: 0; font-size: var(--kn-c3); color: var(--kn-chu-2); font-weight: 500; }
.ung-dung.khung--mt[data-man="soan"] .dau-man[data-loai="hoa_don"] .t4, .ung-dung.khung--in[data-man="soan"] .dau-man[data-loai="hoa_don"] .t4 { margin-left: auto; }
.ung-dung[data-man="soan"] .noi-ct .luoi-truong { padding: 8px 16px; gap: 4px 24px; }
.ung-dung[data-man="soan"] .noi-ct .luoi-truong .truong { flex-direction: row; gap: 8px; align-items: baseline; }
/* Báo giá soạn (Bao_gia_Soan_iD): khối Thông tin báo giá gọn; iPad dọc, điện thoại ẩn cột Khách ghi (đã ở dòng phụ dưới Hàng), Khách cần, Ghi chú, Tên nhóm */
.tt-bao-gia + .luoi-o { margin-top: -4px; }
.bang tr.bang__nhom-hang td { font-weight: 600; }
/* (iPad dọc báo giá: cột Khách ghi, Khách cần, Ghi chú, Nhóm không vẽ — soan.js bang_sua an_id) */
.kn-dt table[data-luoi="bao_gia"] td[data-cot="Khách ghi"], .kn-dt table[data-luoi="bao_gia"] td[data-cot="Khách cần"], .kn-dt table[data-luoi="bao_gia"] td[data-cot="Tên nhóm"] { display: none; }
.kn-dt table[data-luoi="bao_gia"] td[data-cot="Tồn"] { grid-area: them; font-size: var(--kn-c1); color: var(--kn-chu-2); }
.bang tbody tr.chua-chon td { background: var(--kn-loi-nen); }
/* Cài đặt (Cai_dat_iD / _MT): cột rộng tối đa 760, nhóm cách nhau 20 */
.cot-mau.cai-dat { display: flex; flex-direction: column; gap: 0; max-width: 760px; width: 100%; }
.cot-mau.cai-dat > .nhom-cai { margin-bottom: 20px; }
.cot-mau.cai-dat > .nhom-cai__tieu-de { display: block; }
.dong-cai .phan-doan { flex: none; }
.dong-cai > .o-nhap { width: 260px; flex: none; }
.kn-dt .dong-cai { flex-wrap: wrap; }
.kn-dt .dong-cai > .phan-doan, .kn-dt .dong-cai > .o-nhap { width: 100%; }
.luoi-o.hai { --kn-so-cot: 2; }
.kn-dt .luoi-o.hai { --kn-so-cot: 1; }
.luoi-o > .rong, .luoi-o > .luoi-o__rong { grid-column: 1 / -1; }
/* A5: khối Đã bỏ khỏi hóa đơn (gập mở) */
.khoi-bo-khoi > summary { list-style: none; cursor: pointer; }
.khoi-bo-khoi > summary::-webkit-details-marker { display: none; }
.khoi-bo-khoi__dong { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--kn-vien); }
.khoi-bo-khoi__ten { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--kn-c2); }
.khoi-bo-khoi__ten small { font-size: var(--kn-c1); color: var(--kn-chu-2); }
.cac-trang__dong { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .cac-trang__dong .o-chon { width: 200px; }
/* Lịch sử: dòng giờ · việc · Hoàn tác; có vòng tick chọn phiếu (E1) thì thêm cột 48 đầu dòng */
.dong-ls:has(> .vong-tick) { grid-template-columns: 48px 64px 120px minmax(0, 1fr) auto auto; }
/* Điện thoại: giờ lên dòng trên, việc + Hoàn tác dòng dưới (không bóp cột việc); vòng tick đứng bên trái cả hai dòng */
.khung--dt .dong-ls { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 12px; }
.khung--dt .dong-ls > .dong-ls__gio, .khung--dt .dong-ls > .dong-ls__nguoi { grid-column: 1 / -1; }
.khung--dt .dong-ls:has(> .vong-tick) { grid-template-columns: 44px minmax(0, 1fr) auto; }
.khung--dt .dong-ls:has(> .vong-tick) > .vong-tick { grid-row: 1 / span 2; align-self: start; }
.khung--dt .dong-ls:has(> .vong-tick) > .dong-ls__gio, .khung--dt .dong-ls:has(> .vong-tick) > .dong-ls__nguoi { grid-column: 2 / -1; }
.dong-ls .gio { font-size: var(--kn-c1); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.dong-ls .noi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dong-ls .noi > span { font-size: var(--kn-c1); color: var(--kn-chu-2); }
.dong-ls .doi-o { font-size: var(--kn-c1); color: var(--kn-chu-3); }
.ngay-ls { padding: 12px 4px 6px; font-size: var(--kn-c1); font-weight: 600; color: var(--kn-chu-2); }
.ds-nhat-ky .ds-cai { border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); overflow: hidden; }
.vung-chon-ls:empty { display: none; }
.vung-chon-ls { position: sticky; top: 0; z-index: var(--kn-z-chon); }
/* B1 Máy quầy nhận in: chip thanh trên · hàng chờ in ở Cài đặt */
.trang-thai-gui--in { cursor: default; }
.dong-cai--cho-in { flex-wrap: wrap; align-items: flex-start; }
.ds-cho-in { flex-basis: 100%; display: flex; flex-direction: column; border-top: 1px solid var(--kn-vien); margin-top: 8px; }
.dong-cho-in { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--kn-vien); }
.dong-cho-in__ten { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--kn-c2); font-weight: 600; }
.dong-cho-in__ten small { font-size: var(--kn-c1); font-weight: 400; color: var(--kn-chu-2); }
.dong-cho-in--loi .dong-cho-in__ten small { color: var(--kn-loi-chu); }
/* B5 + Hóa đơn từ phiếu giao: danh sách phiếu chưa có hóa đơn (vòng tick) */
.ds-phieu-hd { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ds-phieu-hd__dau { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ds-phieu-hd__dem { font-size: var(--kn-c1); color: var(--kn-chu-2); font-variant-numeric: tabular-nums; }
.dong-phieu-hd { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; border-bottom: 1px solid var(--kn-vien); background: var(--kn-mat); }
.dong-phieu-hd__ten { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; font-size: var(--kn-c3); }
.dong-phieu-hd__ten small { font-size: var(--kn-c1); font-weight: 400; color: var(--kn-chu-2); }
.dong-phieu-hd__tien { font-variant-numeric: tabular-nums; }
/* Đang làm: dải tóm tắt việc trên danh sách (bảng vẽ Phieu_giao_Danh_sach_iD) */
/* N1 · ảnh thật trong ô Ký nhận (bảng vẽ dùng .anh-phieu giả lập): ảnh phiếu phủ kín ô, chữ ký vừa ô */
.ky-nhan__anh > img:not(.chu-ky) { display: block; width: 100%; height: 100%; object-fit: cover; }
.ky-nhan__anh--ky > img.chu-ky { max-height: 80px; object-fit: contain; }
/* B4b.5 (KIEM_CHUNG): vuốt quá tay ở đầu màn không tải lại trang, không mất phiếu đang soạn (Safari iOS 16+) */
html, body { overscroll-behavior-y: none; }
/* B4b.6 (KIEM_CHUNG): bàn phím ảo mở — khung cao đúng phần màn còn thấy (visualViewport.height, main.js --vv-cao), không theo 100vh / 100dvh */
html.ban-phim-mo #khung.kn, html.ban-phim-mo .khung.ung-dung { height: var(--vv-cao, 100dvh); }
/* B3 (KIEM_CHUNG, kiem_giao_dien 07/11): */
/* - chip trạng thái lưu ở thanh trên: vùng chạm đủ 48 / 52 px trên máy chạm (nền trong, không đổi dáng) */
[data-tb="dt"] .trang-thai-gui, [data-tb="ipad"] .trang-thai-gui { height: var(--kn-cao-nut); }
/* - ô gõ chữ không dưới 16 px ở mọi khung (iOS phóng to khi < 16; máy tính token thân 15 px) */
.o-tim input, .khung-nhap input, input.o-o, textarea.o-o, select.o-o { font-size: max(16px, var(--kn-co-o, 16px)); }
/* - đầu danh sách điện thoại hẹp: tab và nút xuống hàng / cuộn ngang trong chính nó, không đẩy tràn màn */
[data-tb="dt"] .dau-ds, [data-tb="dt"] .dau-ds .hang-dau, [data-tb="dt"] .dau-muc__hang { flex-wrap: wrap; min-width: 0; }
.dau-ds .tab-ds { max-width: 100%; overflow-x: auto; }
/* - nút Xóa dòng trong cột hẹp của bảng soạn: bớt đệm để chữ vừa nút */
.bang .nut--xoa-dong { padding: 0 4px; gap: 4px; }
/* - vùng chạm trên máy chạm theo luật (≥ 48 px điện thoại, ≥ 52 px iPad; bản vẽ nhỏ hơn thì giữ luật): tab phân đoạn, chip Đang mở,
chip chuỗi chứng từ, nút trong ô bảng */
[data-tb="dt"] :is(.phan-doan, .phan-doan__nut, .chip-mo__ten, .chip-chuoi, .o-bang--nut),
[data-tb="ipad"] :is(.phan-doan, .phan-doan__nut, .chip-mo__ten, .chip-chuoi, .o-bang--nut) { min-height: var(--kn-cao-nut); }
/* - B3 (KIEM_CHUNG 07/11): lịch chọn ngày và chip lọc chip-co chưa có kiểu (hiện như nút trần 26×32) */
.lich { display: flex; flex-direction: column; gap: 12px; }
.lich .dau-lich { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lich .luoi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lich .luoi .th { text-align: center; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); padding: 4px 0; }
.lich .luoi button { appearance: none; -webkit-appearance: none; min-width: 0; min-height: var(--kn-cao-nut); border: 1px solid transparent; border-radius: var(--kn-bo-10); background: var(--kn-mat); font-family: var(--kn-font); font-size: var(--kn-c3); font-variant-numeric: tabular-nums; color: var(--kn-chu); cursor: pointer; }
.lich .luoi button.ngoai { color: var(--kn-chu-3); }
.lich .luoi button.hom-nay { border-color: var(--kn-vang-dam); font-weight: 600; }
.lich .luoi button[aria-selected="true"] { background: var(--kn-muc); border-color: var(--kn-muc); color: var(--kn-trang); font-weight: 600; }
.lich .luoi button:focus-visible { outline: 2px solid var(--kn-vang-dam); outline-offset: 1px; }
.lich .nhanh { display: flex; gap: 8px; flex-wrap: wrap; }
[data-tb="dt"] .lich .luoi { gap: 0; }
[data-tb="ipad"] .lich .luoi { gap: 0; }
[data-tb="ipad"] .lich { min-width: 364px; } /* iPad: 7 ô × 52 px */
[data-tb="ipad"] .bang-chon:has(.lich) { min-width: 372px; } /* bộ chọn ngày chứa đủ lịch + đệm, không tràn khung soạn */
.lich .nhanh { flex-wrap: wrap; }
.chip-co { appearance: none; -webkit-appearance: none; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; background: var(--kn-mat); border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-tron); font-family: var(--kn-font); font-size: var(--kn-c2); color: var(--kn-chu); cursor: pointer; white-space: nowrap; }
.chip-co[aria-pressed="true"] { background: var(--kn-vang-nen); border-color: var(--kn-vang-dam); font-weight: 600; }
/* - vùng chạm còn nhỏ trên máy chạm: nút đóng chip Đang mở, ô tick chữ, nút −/+ SL, ô ĐVT trong bảng, nút Xóa dòng, chip lọc */
[data-tb="dt"] :is(.chip-mo__dong, .chip-co, .tick-chu, .lich .luoi button),
[data-tb="ipad"] :is(.chip-mo__dong, .chip-co, .tick-chu, .lich .luoi button) { min-height: var(--kn-cao-nut); }
[data-tb="dt"] .chip-mo__dong, [data-tb="ipad"] .chip-mo__dong { width: var(--kn-cao-nut); }
.kn-dt .k3-buocsl { width: 48px; }
.kn-dt .bang-sua td[data-cot="ĐVT"] .o-bang--nut { min-width: 48px; }
.kn-dt .bang-sua td.o-xoa .nut--xoa-dong, [data-tb="dt"] .bang td.o-xoa .nut--xoa-dong { height: auto; min-height: 48px; white-space: nowrap; }
.khung--id .bang-sua td.o-xoa .nut--xoa-dong { min-width: 64px; }
/* - tràn ngang còn lại: đầu Mua hàng (điện thoại) và Kho (iPad dọc) — tab phân đoạn cuộn trong chính nó; Hộp In một cột tới 412 */
.dau-ds .phan-doan, .dau-muc .phan-doan { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dau-ds .phan-doan::-webkit-scrollbar { display: none; }
.dau-ds .phan-doan__nut { flex: none; }
@media (max-width: 600px) { .hop-in .hop__than.hai-cot { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } }
.hop-in .phan-doan { flex-wrap: wrap; height: auto; }
.nut--vien.nut_phu, .nut.di_tiep.nut--chan, .nut.quay_lai { white-space: nowrap; flex: none; }
/* - B4.2 (KIEM_CHUNG 07/11): lúc in bản in (#ban-in có nội dung) chỉ in bản in — trước đây màn web đang mở in ra trước bản in (thêm trang thừa) */
@media print {
body:has(#ban-in > *) > :not(#ban-in) { display: none !important; }
body:has(#ban-in > *) { background: #fff !important; }
}
/* - Bộ chọn mã trên Thuế (ghép mã): chân có Nhớ cho lần sau · Đúng rồi · câu "Chọn một mã…" — bảng hẹp thì xuống dòng, không chồng chữ */
/* - B3 đo lại (07/11 06:40): tab đầu danh sách chia đều, chữ xuống dòng (Mua hàng điện thoại, Kho iPad dọc) thay vì tràn ngang */
/* chỉ Mua hàng (3 tab: Cần mua · Đơn đặt · Hóa đơn mua) và Kho (4 tab) — tab Đang làm / Đã xong của mục khác giữ cỡ theo chữ */
:is([data-tb="dt"], [data-tb="ipad"]) .dau-ds:is([data-loai="mua_hang"], [data-loai="kho"]) .phan-doan { width: 100%; overflow: visible; }
:is([data-tb="dt"], [data-tb="ipad"]) .dau-ds:is([data-loai="mua_hang"], [data-loai="kho"]) .phan-doan__nut { flex: 1 1 0; min-width: 0; white-space: normal; padding: 0 6px; line-height: 1.15; text-align: center; }
/* - chân màn ở ngăn hẹp (Xem cạnh, ngăn kéo dòng): nút xuống hàng, không tràn */
/* - vùng chạm: liên kết số chứng từ trong thẻ / bảng, cột tick, nút trong hàng radio ngang */
[data-tb="dt"] :is(.bang, .the, .ds-dong, .k3-cuon, .cot-ct) a, [data-tb="ipad"] :is(.bang, .the, .ds-dong, .k3-cuon, .cot-ct) a { display: inline-flex; align-items: center; min-height: var(--kn-cao-nut); }
[data-tb="dt"] .vong-tick.tick, [data-tb="ipad"] .vong-tick.tick { min-width: var(--kn-cao-nut); min-height: var(--kn-cao-nut); }
/* - chữ nút: Xóa dòng trong cột hẹp, Chép dòng từ… */
.bang-sua td.o-xoa .nut--xoa-dong { font-size: var(--kn-c1); padding: 0 2px; }
[data-nut="khung.chep_dong"] { max-width: none; white-space: nowrap; flex: none; }
/* - cột Xóa dòng (bảng soạn iPad): chữ nhỏ thêm một bậc cho vừa nút; nút Chép dòng từ… không bị co */
.bang-sua td.o-xoa .nut--xoa-dong { font-size: var(--kn-c1); letter-spacing: -0.2px; }
.thanh-cong-cu [data-nut="khung.chep_dong"], .cc [data-nut="khung.chep_dong"], [data-nut="khung.chep_dong"] { min-width: max-content; }
/* - B3 lượt 3: Chép dòng từ… trên điện thoại (thanh công cụ lưới 4 cột) chiếm cả hàng; nút chốt dài trong hộp xuống dòng; công tắc, ô mã */
.kn-dt .cong-cu [data-nut="khung.chep_dong"], [data-tb="dt"] .cong-cu [data-nut="khung.chep_dong"] { grid-column: 1 / -1; }
.hop__chan [data-nut^="doc_file.nhan"], .chan-hop [data-nut^="doc_file.nhan"] { white-space: normal; line-height: 1.2; text-align: center; }
[data-tb="ipad"] .cong-tac.gat { min-width: 52px; min-height: 52px; }
[data-tb="dt"] .gm-ma { min-height: 48px; }
/* - B3 lượt 4: vùng chạm còn nhỏ — thanh nhảy nhóm báo giá, "Đã bán cho khách", ô chọn vai cột (Máy hiểu), ô mã ghép (iPad), nút Hiện mật khẩu,
nút Xem ảnh khách ghi */
:is([data-tb="dt"], [data-tb="ipad"]) :is(.thanh-nhay button, .nguon-gia, select.vai-cot, .anh-khach, .gm-ma) { min-height: var(--kn-cao-nut); }
:is([data-tb="dt"], [data-tb="ipad"]) .nguon-gia { display: inline-flex; align-items: center; }
:is([data-tb="dt"], [data-tb="ipad"]) .o-nhap__mat-khau { min-width: var(--kn-cao-nut); }
/* nút Hiện mật khẩu: màn đăng nhập chưa có data-tb */
/* GHEP_MA 3a: ghi chú xuất thay trên ô mã của dòng hóa đơn */
.gm-thay { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-cho-chu); margin-top: 4px; }
.gm-thay.dai-vang, .gm-thay.dai-do { display: block; padding: 4px 8px; font-size: var(--kn-c1); line-height: var(--kn-d1); border-radius: 8px; }
/* N11: thẻ món (đường nhóm, tên chuẩn, Đủ x/y) */
.the-nhom { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.the-nhom .ten-chuan { color: var(--kn-chu-3); }
.chip-du--du { background: var(--kn-xong-nen); } .chip-du--vua { background: var(--kn-vang-nen); } .chip-du--thieu { background: var(--kn-loi-nen); }
.chip-chua-duyet { border: 1px solid var(--kn-vang); }
.gm-kieu-ghep { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gm-ke-tiep summary { cursor: pointer; font-size: var(--kn-c1); }
/* Bảng soạn: ĐVT là ô chọn (nút) cũng canh giữa như ô gõ (bảng vẽ O_chon_Hang_*: o-bang--giua) */
.o-bang--nut.o-bang--giua { justify-content: center; text-align: center; }
.o-bang--nut.o-bang--giua .gt-o { text-align: center; }
/* N11 màn Cây phân loại (cay_phan_loai.js): khung đầy vùng nội dung; máy rộng 3 cột trong .khung__than, cột giữa cuộn riêng */
.cay-man { display: flex; flex-direction: column; min-height: 0; gap: 0; }
.cay-man .dau-muc { padding: 8px var(--kn-le) 10px; }
.cay-man .dau-muc__hang { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cay-man__than { min-height: 420px; border-top: 1px solid var(--kn-vien); }
.cay-man .cay-giua .bang { overflow: auto; }
.cay-man .bang__phu { display: block; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); }
.cay-man .thanh-chon__nhan { font-size: var(--kn-c1); font-weight: 600; color: var(--kn-chu-2); }
.cay-man .thanh-chon__viec { display: flex; align-items: center; gap: 10px; }
.cay-man > .thanh-chon { position: sticky; bottom: 0; }
.cay-man .noi-dung { display: flex; flex-direction: column; gap: 12px; }
/* GHEP_MA 9.3 màn xem đối chiếu trong hộp: đầy chiều cao, danh sách cặp + giấy cuộn riêng */
.dchn-trang { display: flex; flex-direction: column; gap: 8px; height: calc(100dvh - 150px); min-height: 480px; }
.dchn-trang .dchn-man { padding: 0; }
/* Giữ các luật web đã chốt trước bản bàn giao 07/11 (bản mới không có; mất thì vỡ bố cục):
B4b.4 KIEM_CHUNG chữ thân iPad 18–20 px · bảng đọc chung ct.js bang_doc (iPad, máy tính bảng; điện thoại, Xem cạnh dòng hai tầng)
· cột lưới hộp không giãn theo hộp 600 px · dòng được khách hỏi (N6) */
[data-tb="dt"] .bang-doc > .khung-bang, .canh .bang-doc > .khung-bang { display: none; }
[data-tb="ipad"] .bang-doc > .ds-dong:not(.canh *), [data-tb="mt"] .bang-doc > .ds-dong:not(.canh *) { display: none; }
.bang tr.co-cau-hoi td:first-child { box-shadow: inset 4px 0 0 var(--kn-loi-chu); }
.dong-the.cau-hoi { padding-top: 0; }
/* Hộp Phím tắt (soan.js, nút "?" chân bảng soạn máy tính): phím vẽ như phím bấm */
.lop-hop kbd { font-family: var(--kn-font); font-size: var(--kn-c1); padding: 1px 6px; border: 1px solid var(--kn-vien-o); border-radius: var(--kn-bo-6); background: var(--kn-nen); }
/* Cây phân loại máy hẹp: ô tìm trên cả danh mục một dòng riêng, đủ rộng (bảng vẽ Danh_muc_Cay_phan_loai_iD · _DT) */
/* Thanh chọn nhiều trên điện thoại (danh sách thẻ): dòng đếm một hàng riêng, các nút một hàng cuộn ngang — không cắt chữ, không chồng nút
(bản bàn giao ép .kn-dt .thanh-chon một hàng cho thanh chọn ngắn của Cần mua) */
/* 07/11 · Danh mục, Kho: dải nhắc việc đúng tab, bấm được (ds.js viec_do_el chon_nhom) */
button.dai { width: 100%; min-height: 48px; text-align: left; font-family: inherit; cursor: pointer; }
button.dai .dai__cau { flex: 1; }
button.dai .dai__nut { font-weight: 600; text-decoration: underline; }
/* 07/11 · Thẻ hàng (Danh mục, Kho — b5.js dong_dm): luật bị rơi khi thay bộ CSS, chữ dính liền thành một dòng. Lấy lại theo bộ cũ, biến màu mới */
.the-hang { background: var(--kn-trang); border: 1px solid var(--kn-vien); border-radius: var(--kn-bo-14); padding: 14px 16px;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; cursor: pointer; min-height: 72px; }
.the-hang:hover { border-color: var(--kn-vien-dam); }
.the-hang:active { background: var(--kn-nen-2); }
.the-hang:focus-visible { outline: 3px solid var(--kn-quang); outline-offset: 2px; }
.the-hang .ten { font-size: var(--kn-c4); line-height: var(--kn-d3); font-weight: 700; color: var(--kn-chu); min-width: 0; overflow-wrap: anywhere; }
.the-hang .ton { text-align: right; }
.the-hang .ton .so { font-size: var(--kn-c5); line-height: var(--kn-d4); font-weight: 700; display: block; font-variant-numeric: tabular-nums; }
.the-hang .ton .dv, .the-hang .ton .mo { font-size: var(--kn-c1); color: var(--kn-chu-3); }
.the-hang .ton.thap .so { color: var(--kn-loi-chu); }
.the-hang .phu { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--kn-c1); line-height: var(--kn-d1); color: var(--kn-chu-2); align-items: center; }
.the-hang .phu .ma { font-family: var(--kn-font-ma); }
.the-hang .phu .nut { margin-left: auto; min-height: 48px; }
/* 07/11 · nhãn việc đỏ (Ngày sau hôm nay, Thiếu đơn giá…) xuống dòng dưới số chứng từ trên bảng máy tính */
/* 07/11 · bộ xổ của ô chọn nằm trong hộp (o.js trong_hop): đặt cố định trên tầng ứng dụng, nổi trên hộp, không bị thân hộp cắt */
.lop-chon--xo.lop-chon--noi-hop.man-che { position: fixed; min-width: 420px; z-index: calc(var(--kn-z-hop) + 2); }
.lop-chon--noi-hop > .bang-chon { min-width: 100%; }
/* 07/11 · Thanh toán (radio-the ngang) ở khung hẹp (Xem cạnh): hai ô đầu co còn vòng tròn, mất chữ → xuống hàng khi không đủ chỗ */
/* SUA_GIAO_DIEN 8 (O_chon_Khach_iD / _DT): tên pháp lý viết hoa dài không cắt cụt — dòng chọn hai tầng xuống hàng; ô Khách đã chọn cao theo chữ */
.bang-chon__t1, .bang-chon__t2 { white-space: normal; overflow-wrap: anywhere; }
/* Hộp trên điện thoại tràn phải (390_nhac_no): lưới canh giữa của lớp hộp có cột tự giãn theo hộp 600/880 nên max-width không ăn → cột bằng khung */
.lop-hop { grid-template-columns: minmax(0, 1fr); justify-items: center; }
/* Soát 07/11 · Đề xuất giá: bảng 6 cột cần màn rộng (Mua_hang_De_xuat_gia_MT) — hộp 880 bóp cột Tên hàng về 0 */
.hop--rong-het { width: min(1280px, calc(100vw - 48px)); }
.hop--rong-het .bang col:nth-child(2) { min-width: 300px; }
/* điện thoại: lưới thẻ 2 cột (4 cột làm số chồng nhau, ô đề xuất cắt còn "24.(") */
html[data-tb="dt"] .dx-the__luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-tb="dt"] .dx-the__so, html[data-tb="dt"] .dx-the .gia-doi { white-space: normal; overflow-wrap: anywhere; }
html[data-tb="dt"] .dx-the .o-bang { width: 100%; }
.thanh-chon__dem + .nut--chu { margin-left: 4px; }
.nhac-no__tin { width: 100%; box-sizing: border-box; } /* soát 07/11: bỏ style cứng 16px trong nhac_no.js — cỡ theo data-co */
/* Soát 07/11 · thanh ray iPad ngang: ô là