/* ========================================================================= He thong giao dien Chu Gia Sale Khong dung Bootstrap: bang ke va bieu mau cua du an nay can kiem soat chat che ve mat do thong tin, khung luoi san co gay vuong hon la giup. ========================================================================= */ :root{ /* ------------------------------------------------------------ bang mau HAI bang mau khai o MOT cho, bang light-dark(). Truoc dot ra soat nay bang toi la mot khoi @media rieng: hai danh sach bien phai sua song song, va quen mot dong thi mot mau tu nhien dung nguyen ban sang tren nen toi — im lang, khong loi bien dich, khong loi console. light-dark() doc bien --color-scheme cua chinh phan tu, nen cong tac thu cong o duoi chi can dat color-scheme la ca bang mau doi theo. Doi lai, mau nao KHONG phai — nhu do bong, von la mot danh sach shadow — phai tach ra thanh bien mau rieng roi ghep lai. */ color-scheme:light dark; --paper: light-dark(#F3F5F1, #0C1312); --surface: light-dark(#FFFFFF, #141C1A); --surface-2: light-dark(#E9EEE9, #1B2523); --ink: light-dark(#12211F, #E5ECE8); --ink-2: light-dark(#3D4C49, #B0BEB9); --ink-3: light-dark(#6D7C78, #7F8F8A); --rule: light-dark(#D3DAD3, #2A3634); --rule-soft: light-dark(#E4E9E3, #1F2A28); --accent: light-dark(#0E5B5B, #5FB8AC); --accent-2: light-dark(#0A4444, #8FD4C9); --accent-tint: light-dark(#DFECE9, #13312D); --tot: light-dark(#2C6E45, #68B98A); --tot-tint: light-dark(#E1EFE6, #152C1F); --canh-bao: light-dark(#8A6410, #D2A94E); --canh-bao-tint:light-dark(#F4ECD8, #322913); --nguy: light-dark(#9E3524, #E28874); --nguy-tint: light-dark(#F6E4E0, #331914); /* Chu tren nen mau nhan: tren nen sang la chu trang, tren nen toi la chu rat sam — vi --accent cua ban toi la mot mau sang. */ --chu-tren-nhan:light-dark(#FFFFFF, #08201E); --bong-gan: light-dark(rgba(18,33,31,.05), rgba(0,0,0,.4)); --bong-xa: light-dark(rgba(18,33,31,.28), rgba(0,0,0,.7)); --bong:0 1px 2px var(--bong-gan), 0 10px 28px -16px var(--bong-xa); /* ------------------------------------------------------- thang khoang cach Truoc dot ra soat nay, "cach khoi tren mot chut" duoc viet thang trong view voi 13 gia tri khac nhau cho cung mot y dinh. Mot he thong khong co thang do thi tinh nhat quan phu thuoc vao tri nho cua nguoi dang go. Thang 4px: du min de xep mot bang ke day dac, du tho de khong ai phai can nhac giua 14 va 15 pixel. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* ------------------------------------------------------------- thang chu Neo o 15px cua body. --text-md la co chu THAN BANG KE: 14px, khong phai 13,8px — mot bang ba muoi cot doc ca ngay thi nua pixel co that. */ --text-xs:.72rem; --text-sm:.82rem; --text-md:.875rem; --text-base:1rem; --text-lg:1.15rem; --text-xl:1.35rem; --text-2xl:1.6rem; /* --------------------------------------------------------------- bo goc */ --r:9px; --radius-sm:5px; --radius:9px; --radius-lg:14px; --radius-tron:999px; /* ------------------------------------------------------- tang xep chong Khai o mot cho de khong ai phai doc nguoc ca tep tim z-index cua thanh dieu huong truoc khi viet mot cai bang xo xuong moi. */ --z-bang-ghim:2; --z-bang-dau:4; --z-thanh-gan:5; --z-thanh-tren:10; --z-dieu-huong:20; --z-bang-nhom:30; } /* Cong tac thu cong. Gia tri la "sang" / "toi" chu khong "light" / "dark": thuoc tinh nay do GiaoDien.TatCa sinh ra, va quy uoc dat ten cua du an la tieng Viet khong dau (CLAUDE.md muc 4). Khong dat thuoc tinh thi giu "light dark" o tren va he dieu hanh quyet dinh — dung hanh vi cu. */ :root[data-theme="sang"]{color-scheme:light} :root[data-theme="toi"]{color-scheme:dark} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.015em;text-wrap:balance} h1{font-size:1.6rem;font-weight:700} h2{font-size:1.2rem;font-weight:700} h3{font-size:1rem;font-weight:600} p{margin:0} a{color:var(--accent);text-underline-offset:3px} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} code,.mono,.so{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace} .so{font-variant-numeric:tabular-nums} /* ------------------------------------------------------------ khung ung dung Vo cao DUNG mot man hinh. Thanh tren, thanh dieu huong va vung noi dung la ba con cua mot cot flex cao 100dvh; chi vung noi dung cuon. Truoc dot ra soat nay vo cao theo NOI DUNG (min-height:100vh) va ca trang cuon. Hau qua nam o .bang-cuon: no phai doan chieu cao con lai bang calc(100vh - 14rem) — mot con so phong doan, va cuon trang mot chut la dinh khung troi len khoi man hinh mang theo ca tieu de dinh. Vo cao co dinh thi khong con con so nao phai doan. 100dvh chu khong 100vh: tren trinh duyet di dong, 100vh la chieu cao khi thanh dia chi DA thu lai, nen mot vo 100vh bi thanh dia chi cat mat phan duoi ngay khi mo trang. Duoi 820px, vo tra ve cuon trang binh thuong — xem khoi @media o cuoi muc. */ .khung{ height:100dvh;display:flex;flex-direction:column;overflow:hidden; } .khung > .thanh-tren, .khung > .dieu-huong{flex:0 0 auto} .khung > .noi-dung{flex:1 1 auto;min-height:0;overflow:auto} .thanh-tren{ display:flex;align-items:center;gap:1rem;flex-wrap:wrap; padding:.7rem clamp(.9rem,3vw,1.6rem); background:var(--surface);border-bottom:1px solid var(--rule); } .thuong-hieu{display:flex;flex-direction:column;line-height:1.2;margin-right:auto} .thuong-hieu .ten{font-weight:700;letter-spacing:-.01em} .thuong-hieu .cty{font-size:.76rem;color:var(--ink-3)} .nguoi-dung{display:flex;align-items:center;gap:.7rem;font-size:.85rem} .nguoi-dung .vai-tro{ font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); padding:.15rem .45rem;border-radius:999px; } .noi-dung{padding:clamp(1rem,3vw,2rem);max-width:1280px;width:100%;margin:0 auto} /* ---------------------------------------------------------------- nhip doc Moi khoi con TRUC TIEP cua .noi-dung tu cach khoi truoc no mot buoc. Truoc dot ra soat nay viec do do tung view tu khai bang style= viet thang: 341 lan tren 56 man hinh, va rieng "cach khoi tren" co 13 gia tri khac nhau. Cung mot y dinh o trong the: khoi trong the sit hon vi chung thuoc ve nhau. */ .noi-dung > * + *{margin-top:var(--space-5)} .the > * + *{margin-top:var(--space-3)} /* ------------------------------------------------------------- tien ich TOI THIEU, va co y de vay. Muc dich la de vai cho lech nhip khai duoc y dinh cua no, khong phai de dung mot he tien ich thu hai canh he thanh phan. Can mot bien the moi thi hoi: co phai no dang xin mot THANH PHAN khong? */ .cach-0{margin-top:0} .cach-1{margin-top:var(--space-2)} .cach-2{margin-top:var(--space-4)} .cach-3{margin-top:var(--space-6)} .mo{color:var(--ink-2)} .mo-2{color:var(--ink-3)} .nho{font-size:var(--text-sm)} .rat-nho{font-size:var(--text-xs)} .khong-xuong{white-space:nowrap} .hang{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:flex-end} .hang.giua{align-items:center} .hang.tren{align-items:flex-start} .hang.doi{justify-content:space-between;gap:var(--space-4)} .hang.rong{gap:var(--space-7);align-items:flex-start} .chu-canh-bao{color:var(--canh-bao)} .chu-nguy{color:var(--nguy)} .danh-sach{margin:0;padding-left:1.1rem} .the.vien-canh-bao{border-color:var(--canh-bao)} hr{border:none;border-top:1px solid var(--rule);margin:var(--space-1) 0} /* Be ngang co dinh cho vai o nhap. Khai o day chu khong viet thang trong view: "o nhap ngan" la mot quyet dinh giao dien, va no lap lai o nhieu man hinh. */ .o-hep{max-width:8rem} .o-vua{max-width:20rem} .o-rong{min-width:min(24rem,100%)} .hop-hep{max-width:560px} .co-1{flex:1} .day-phai{margin-right:auto} .nut-lien{display:inline} .can-phai{text-align:right} .con-so-nho{font-size:var(--text-lg)} /* Hop hep can giua trang — man hinh dang nhap cong quan tri, va bat cu man hinh mot viec nao khac ve sau. */ .hop-giua{max-width:390px;margin:var(--space-6) auto;display:flex;flex-direction:column;gap:var(--space-5)} /* ------------------------------------------------ man hinh bang ke toan cao Bat bang ViewData["BoCuc"] = "bang". Dau trang va thanh loc dung yen o tren, con .vung-bang an het cho con lai va tu cuon ben trong. Day la CACH SUA TRON VEN cho .bang-cuon: khong con calc(100vh - 14rem) nao phai doan, va dinh khung bang khong bao gio troi khoi man hinh — nen tieu de dinh va thanh cuon ngang o day khung LUON o trong tam mat. */ .noi-dung.man-bang{display:flex;flex-direction:column;overflow:hidden} .noi-dung.man-bang > *{flex:0 0 auto} .vung-bang{display:flex;flex-direction:column;min-height:0} .vung-bang > * + *{margin-top:var(--space-2)} .man-bang > .vung-bang{flex:1 1 auto} /* Trong vo cao co dinh, khung bang lay HET cho con lai — max-height cua .bang-cuon la con so du phong cho man hinh khong bat bo cuc nay. */ .man-bang > .vung-bang > .bang-cuon{flex:1 1 auto;min-height:0;max-height:none} /* ------------------------------------------------------------ the */ .the{ background:var(--surface);border:1px solid var(--rule);border-radius:var(--r); padding:1.1rem 1.25rem;box-shadow:var(--bong); } .luoi{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .nhan{ font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-3);font-weight:600; } /* ------------------------------------------------------------ bieu mau */ .bieu-mau{display:flex;flex-direction:column;gap:1rem} .truong{display:flex;flex-direction:column;gap:.35rem} .truong > label{font-size:.84rem;font-weight:500;color:var(--ink-2)} input[type=text],input[type=password],input[type=tel],input[type=number], input[type=date],select,textarea{ font:inherit;color:var(--ink);background:var(--surface); border:1px solid var(--rule);border-radius:7px;padding:.6rem .7rem;width:100%; } input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)} input[inputmode=numeric]{letter-spacing:.18em;font-family:"IBM Plex Mono",monospace} .tich{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink-2)} .tich input{width:auto} .nut{ font:inherit;font-weight:600;cursor:pointer; padding:.6rem 1.1rem;border-radius:7px;border:1px solid transparent; background:var(--accent);color:var(--chu-tren-nhan); } .nut:hover{background:var(--accent-2)} .nut.phu{background:transparent;color:var(--ink-2);border-color:var(--rule)} .nut.phu:hover{background:var(--surface-2)} .nut:disabled{opacity:.55;cursor:not-allowed} /* ------------------------------------------------------------ thong bao */ .thong-bao{ border-radius:7px;padding:.7rem .9rem;font-size:.88rem; border:1px solid transparent; } .thong-bao.loi{background:var(--nguy-tint);color:var(--nguy); border-color:color-mix(in srgb,var(--nguy) 30%,transparent)} .thong-bao.tot{background:var(--tot-tint);color:var(--tot); border-color:color-mix(in srgb,var(--tot) 30%,transparent)} .thong-bao.canh-bao{background:var(--canh-bao-tint);color:var(--canh-bao); border-color:color-mix(in srgb,var(--canh-bao) 32%,transparent)} .loi-truong{color:var(--nguy);font-size:.8rem} /* Tom tat loi cua ASP.NET van duoc dung ra khi khong co loi nao — no giu san cho de kiem tra phia trinh duyet do vao. Rong thi phai bien mat, khong duoc de lai mot khung do trong tren dau moi bieu mau. */ .validation-summary-valid{display:none} .field-validation-valid{display:none} /* ------------------------------------------------------------ bang ke Khung cuon PHAI co max-height. Truoc day no chi co overflow-x:auto, va theo dac ta CSS thi overflow-x khac visible se keo overflow-y thanh auto — khung thanh vung cuon ca hai chieu. Nhung khong gioi han chieu cao thi khung luon cao dung bang noi dung, tuc la KHONG BAO GIO cuon doc. Hau qua la ba thu chet cung mot luc, va da chet suot 12 sprint: 1. thead position:sticky khong co vung cuon de bam -> tieu de cot troi mat 2. tfoot .dong-tong cung vay -> dong tong troi mat 3. thanh cuon NGANG nam o day noi dung, cach dau bang 4,8 man hinh (do that: bang 4166px, khung 1214px, cao 4284px) -> khong voi toi duoc overscroll-behavior:contain de con lan chuot tren bang chi cuon BANG, khong day ca trang di — nho no ma tieu de dinh moi thuc su dung duoc. */ .bang-cuon{ overflow:auto; max-height:max(24rem,calc(100vh - 14rem)); overscroll-behavior:contain; border:1px solid var(--rule);border-radius:var(--r);background:var(--surface); } table{border-collapse:collapse;width:100%;font-size:var(--text-md)} /* Bang QUA RONG de vua khung — bang ke don hang, 38 cot tren mot khung 1200px. Voi width:100%, thuat toan bo cuc bang cua trinh duyet ep tung cot xuong het co roi cho chu XUONG DONG: mot dong don cao 86px, tuc la ba dong chu, va mot man hinh 768px chi con cho ba don. max-content cho moi cot lay be ngang tu nhien cua no. Do that: 86px -> 43px mot dong, doi lai bang rong them 405px tren mot khung von da cuon ngang san va da ghim cot dinh danh. min-width:100% de bang hep hon khung van phu het khung chu khong co lai mot cot ben trai. */ .bang-rong{width:max-content;min-width:100%} .bang-rong td{max-width:24rem} /* vertical-align:middle cho bang DE DOC. Bang de NHAP LIEU giu top — o nhap cao thap khac nhau, can theo giua thi ca hang nhay len xuong khi mot o hien them dong ly do. Xem .bang.nhap-lieu ben duoi. */ th,td{ text-align:left;padding:.55rem .75rem; border-bottom:1px solid var(--rule-soft);vertical-align:middle; } .bang.nhap-lieu th,.bang.nhap-lieu td{vertical-align:top} /* Nhan cot bang tien KHONG in hoa nua. .66rem in hoa la 9,5px — o co do, dau mu chong dau thanh cua tieng Viet ("Đã thu", "Cước gửi") nhoe thanh mot vet, va do la nhan cot cua mot bang tien. Nang len .72rem, bo text-transform, giu letter-spacing nhe de hang chu van doc ra la mot hang TIEU DE chu khong phai mot dong du lieu. */ thead th{ background:var(--surface-2);position:sticky;top:0;white-space:nowrap; font-family:"IBM Plex Mono",monospace;font-size:var(--text-xs); letter-spacing:.04em;font-weight:600;color:var(--ink-2); border-bottom:1px solid var(--rule); } tbody tr:last-child td{border-bottom:none} /* Trang thai dong. Tren mot bang 38 cot, mat lac dong ngay khi re ngang — mot vet nen chay suot chieu rong la thu giu duoc dong mat dang doc. Dat tren , KHONG tren : nen cua o van ve de len tren nen cua hang, nen .dong-chinh-tay va .dong-chua-xac-dinh giu nguyen mau canh bao cua chung khi re chuot qua. Cot ghim thi phai khai rieng — nen cua no la mau duc, co y, de chu ben duoi khong loi qua khi cuon ngang. */ tbody tr:hover,tbody tr:focus-within{background:var(--surface-2)} .bang-cuon tbody tr:hover .cot-ghim, .bang-cuon tbody tr:hover .cot-ghim-stt, .bang-cuon tbody tr:hover .cot-ghim-2, .bang-cuon tbody tr:focus-within .cot-ghim, .bang-cuon tbody tr:focus-within .cot-ghim-stt, .bang-cuon tbody tr:focus-within .cot-ghim-2{background:var(--surface-2)} td.tien,th.tien{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* Cot DEM — so luong don, so kien, so lan. Canh phai va chan deu nhu cot tien, nhung KHONG phai cot tien. Truoc day dung chung .tien, va mot cot ten "Tong dang cam" trong y het mot o tien COD la dieu muc 1 CLAUDE.md cam. */ td.dem,th.dem{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* ------------------------------------------------------------ cot ghim Bang ke don hang rong 4166px tren khung 1214px — cuon ngang gan 2,5 man hinh. Khong ghim cot dinh danh thi cuon sang phai xong khong con biet dang doc don nao. Chi bat khi man hinh goi dat CoGhimCot: bang hep ma ghim thi duong vien ghim thanh mot net doc vo nghia. --bu-ghim la be ngang cua cac cot co dinh dung truoc (o tich, STT), do _Bang.cshtml tinh va ghi bang InvariantCulture. */ .bang-cuon th.cot-ghim,.bang-cuon td.cot-ghim{position:sticky;left:0;z-index:2} .bang-cuon th.cot-ghim-stt,.bang-cuon td.cot-ghim-stt{ position:sticky;left:var(--bu-stt,0);z-index:2; } .bang-cuon th.cot-ghim-2,.bang-cuon td.cot-ghim-2{ position:sticky;left:var(--bu-ghim,0);z-index:2; box-shadow:1px 0 0 var(--rule); } .bang-cuon tbody .cot-ghim, .bang-cuon tbody .cot-ghim-stt, .bang-cuon tbody .cot-ghim-2{background:var(--surface)} .bang-cuon thead .cot-ghim, .bang-cuon thead .cot-ghim-stt, .bang-cuon thead .cot-ghim-2, .bang-cuon tfoot .cot-ghim, .bang-cuon tfoot .cot-ghim-stt, .bang-cuon tfoot .cot-ghim-2{background:var(--surface-2);z-index:4} /* Cot co dinh phai giu dung be ngang da khai, neu khong moc ghim lech vai pixel va cot no de lai mot khe ho khi cuon ngang. */ .cot-stt{min-width:3rem;max-width:3rem} .cot-chon{min-width:2.2rem;max-width:2.2rem} /* ------------------------------------------------------------ trang dang nhap */ .trang-dang-nhap{ min-height:100vh;display:grid;place-items:center;padding:1.5rem; } .hop-dang-nhap{width:100%;max-width:390px;display:flex;flex-direction:column;gap:1.4rem} .hop-dang-nhap .dau{display:flex;flex-direction:column;gap:.3rem;text-align:center} .hop-dang-nhap .dau .cty{font-size:.85rem;color:var(--ink-3)} .chan-trang{text-align:center;font-size:.76rem;color:var(--ink-3)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ------------------------------------------------------------ dieu huong Nam nhom theo moi quan tam, moi nhom la mot
. Bang xo xuong dat tuyet doi trong .nhom nen thanh nay KHONG duoc dat overflow — cat bang di la hong ca thuc don. */ .dieu-huong{ display:flex;gap:.1rem;flex-wrap:wrap;align-items:stretch; padding:0 clamp(.9rem,3vw,1.6rem); background:var(--surface);border-bottom:1px solid var(--rule); position:relative;z-index:20; } /* Muc goc: vua la phang, vua la cua mot nhom. Hai thu phai trong giong het nhau — nguoi dung khong can biet cai nao mo ra bang. */ .dieu-huong .muc-goc{ display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap; padding:.55rem .8rem;font-size:.87rem;font-weight:500; color:var(--ink-2);text-decoration:none;cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-1px; border-radius:5px 5px 0 0; } .dieu-huong .muc-goc:hover{color:var(--ink);background:var(--surface-2)} .dieu-huong .muc-goc.dang-o{ color:var(--accent);border-bottom-color:var(--accent);font-weight:600; } .dieu-huong .nhom{position:relative} /* Bo tam giac mac dinh cua — da co mui ten SVG rieng. */ .dieu-huong summary{list-style:none} .dieu-huong summary::-webkit-details-marker{display:none} .dieu-huong summary .mui{color:var(--ink-3);transition:transform .15s ease} .dieu-huong .nhom[open] > summary{background:var(--surface-2);color:var(--ink)} .dieu-huong .nhom[open] > summary .mui{transform:rotate(180deg)} .bang-nhom{ position:absolute;top:calc(100% + 1px);left:0;z-index:30; min-width:17rem;max-width:min(23rem,calc(100vw - 2rem)); display:flex;flex-direction:column;gap:.05rem;padding:.35rem; background:var(--surface);border:1px solid var(--rule); border-radius:var(--r);box-shadow:var(--bong); } /* Nhom cuoi cung sat mep phai cua thanh: neo bang theo mep phai de no khong tran ra ngoai man hinh. */ .dieu-huong .nhom:last-of-type .bang-nhom{left:auto;right:0} .bang-nhom a{ display:block;padding:.45rem .6rem;border-radius:6px; color:var(--ink);text-decoration:none; } .bang-nhom a:hover{background:var(--surface-2)} .bang-nhom a.dang-o{background:var(--accent-tint)} .bang-nhom a.dang-o .ten{color:var(--accent)} .bang-nhom .ten{display:block;font-size:.88rem;font-weight:500;line-height:1.35} .bang-nhom .mo-ta{ display:block;font-size:.74rem;line-height:1.35;color:var(--ink-3); text-wrap:pretty; } /* Man hinh hep: bang khong con neo theo NHOM ma neo theo CA THANH, trai va phai deu bam mep. Neo theo nhom o be ngang nay lam bang tran qua mep phai — do bang 272px, mep phai cua nhom "Tai chinh" o 221px tren mot man hinh 375px — va mot trang bi day truot ngang la dieu muc 9 CLAUDE.md cam. */ @media (max-width:780px){ .dieu-huong .nhom{position:static} .dieu-huong .nhom .bang-nhom, .dieu-huong .nhom:last-of-type .bang-nhom{ left:clamp(.5rem,3vw,1.2rem);right:clamp(.5rem,3vw,1.2rem); min-width:0;max-width:none; } } /* ------------------------------------------------------------ dau trang */ .dau-trang{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap} .dau-trang > div:first-child{margin-right:auto} .phu-de{margin-top:.35rem;font-size:.86rem;color:var(--ink-3);max-width:58ch} /* ------------------------------------------------------------ thanh loc */ .thanh-loc{ display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end; padding:.9rem 1rem; background:var(--surface);border:1px solid var(--rule);border-radius:var(--r); } .thanh-loc .truong{min-width:min(220px,100%)} .thanh-loc .tich{padding-bottom:.6rem} .hang-nut{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} .hang-tich{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.6rem} /* ------------------------------------------------------------ bang ke */ thead th a.sap-xep{ color:inherit;text-decoration:none;display:inline-flex;gap:.25rem;align-items:center; } thead th a.sap-xep:hover{color:var(--accent)} .cot-thao-tac{white-space:nowrap} .cot-thao-tac form{display:inline-block;margin-left:.35rem} .cot-thao-tac .nut{padding:.3rem .6rem;font-size:.8rem} .an-doc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .chip{ display:inline-block;font-size:.72rem;font-weight:600; padding:.12rem .45rem;border-radius:999px;margin-right:.25rem; color:var(--ink-2);background:var(--surface-2);border:1px solid var(--rule); } .chip-tot{color:var(--tot);background:var(--tot-tint); border-color:color-mix(in srgb,var(--tot) 30%,transparent)} .chip-tat{color:var(--ink-3);background:transparent} .chip-canh-bao{color:var(--canh-bao);background:var(--canh-bao-tint); border-color:color-mix(in srgb,var(--canh-bao) 30%,transparent)} .chip-nguy{color:var(--nguy);background:var(--nguy-tint); border-color:color-mix(in srgb,var(--nguy) 30%,transparent)} /* ------------------------------------------------------------ o so lieu Ba luong tien la BA con so rieng, khong bao gio cong voi nhau. Khoi nay co y KHONG co bien the "o tong": COD la tien giu ho, tien cong la chi phi, va mot o gop chung chung lai la dung cai loi nghiem trong nhat cua du an. */ .day-o-so{display:flex;gap:.9rem;flex-wrap:wrap} /* O so la mot O, khong phai mot cum chu troi trong khoang trang. Truoc day khoi nay khong co nen, khong vien, khong dem, khong hover — ma phan nua so o tren bang dieu khien lai la THE dan toi man hinh da loc san. Sau khong ai bam chung: chung khong trong nhu thu bam duoc. */ .o-so{ flex:1 1 12rem;max-width:22rem; padding:.85rem 1rem; background:var(--surface);border:1px solid var(--rule);border-radius:var(--r); } .o-so .con-so{ font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums; line-height:1.2;color:var(--ink); } .o-so .chu-thich{font-size:.8rem;color:var(--ink-2);margin-top:.15rem} .o-so.vuot .con-so{color:var(--canh-bao)} /* O bam duoc: bo mau chu cua the — mot con so tien mau xanh mong ket doc ra la mot lien ket, khong phai mot con so. Dau hieu bam duoc dat o VIEN. */ a.o-so{display:block;text-decoration:none;color:inherit} a.o-so:hover{border-color:var(--accent);box-shadow:var(--bong)} a.o-so .nhan{color:var(--accent)} .phan-trang{ display:flex;gap:.6rem;align-items:center;flex-wrap:wrap; font-size:.8rem;color:var(--ink-3); } .phan-trang .nut{padding:.35rem .7rem;font-size:.8rem} /* ------------------------------------------------------------ bieu mau dai */ .khung-form{max-width:960px} .luoi-form{ display:grid;gap:1rem;margin-top:.8rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .luoi-form .truong.rong{grid-column:1/-1} .goi-y{font-size:.78rem;color:var(--ink-3)} input:disabled,select:disabled,textarea:disabled{ background:var(--surface-2);color:var(--ink-3);cursor:not-allowed; } /* ------------------------------------------------------------ man hinh don */ /* Bieu mau don rong hon danh muc: hai ben gui/nhan dat canh nhau, bang dong hang can du cho de doc so lieu. */ .bieu-mau.khung-form{max-width:1180px} .luoi-doi{ display:grid;gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); } .luoi-doi .the{margin-top:0} /* Luoi nay om cac the co bang ben trong — chan luon min-content cua o luoi. */ .luoi-doi > *{min-width:0} /* Cap nhan - gia tri o man hinh xem don. Cot nhan hep va mo, cot gia tri dam hon: mat luot doc theo chieu doc cot gia tri. */ .cap-gia-tri{ display:grid;gap:.35rem 1rem;margin:.8rem 0 0; grid-template-columns:minmax(120px,auto) 1fr; } .cap-gia-tri dt{color:var(--ink-3);font-size:.82rem} .cap-gia-tri dd{margin:0;font-size:.9rem} /* O nhap so trong bang: khong vien, can phai, so co chan deu. */ table input.so,table input[type=text],table select{width:100%} table input.so{text-align:right;font-variant-numeric:tabular-nums} /* ------------------------------------------------------------ dieu phoi */ .cot-chon{width:2.2rem;text-align:center} .cot-chon input{margin:0} /* Thanh gan bam duoi khi cuon: dieu phoi tich don o tren roi moi chon shipper, khong phai cuon nguoc len tim nut. */ .thanh-gan{ position:sticky;bottom:0;z-index:2; display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap; margin-top:1rem;padding:.9rem 1rem; background:var(--surface);border:1px solid var(--accent);border-radius:var(--r); box-shadow:var(--bong); } /* PHAI khai rieng: quy tac [hidden]{display:none} cua trinh duyet co do uu tien thap hon .thanh-gan{display:flex}, nen dat thuoc tinh hidden bang JS se khong an duoc gi neu thieu dong nay. */ .thanh-gan[hidden]{display:none} .thanh-gan .truong{margin:0;min-width:240px} .thanh-gan .so-don-da-chon{ font-weight:600;color:var(--accent);white-space:nowrap; font-variant-numeric:tabular-nums; } /* Dong tong tam tinh tren bieu mau don: doi chieu voi to phieu giay. */ .tong-tam{ display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap; margin-top:1rem;padding:.7rem .9rem; background:var(--accent-tint);border-radius:var(--r); } .tong-tam strong{font-size:1.15rem;font-variant-numeric:tabular-nums} /* ---------------------------------------------------------------- bang ke Cot STT va dong tong cong. Dong tong la tong cua TOAN BO tap da loc, khong phai cua trang dang xem — nen no phai nhin ra ngay la mot dong khac han. */ .cot-stt{width:3rem;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums} tfoot .dong-tong td{ position:sticky;bottom:0; background:var(--surface-2); border-top:2px solid var(--rule); font-weight:600; font-variant-numeric:tabular-nums; } tfoot .dong-tong .nhan-tong{color:var(--ink-2);font-weight:700;text-transform:uppercase;letter-spacing:.04em} .ghi-chu-tong{margin:0;padding-left:1.1rem;color:var(--ink-3);font-size:.86rem;line-height:1.5} .ghi-chu-tong li{margin:.15rem 0} /* ------------------------------------------------------------- mau phieu in O soan HTML/CSS cua mau phieu. Font don cach va tab hai khoang de nguoi soan nhin ra cau truc the — day la thu ho go tay, khong phai thu sinh ra tu form. */ .luoi-truong{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem} .chu-thich{margin-top:.3rem;font-size:.8rem;color:var(--ink-3);line-height:1.5} .o-ma{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem;line-height:1.55;tab-size:2;white-space:pre;overflow-wrap:normal; overflow-x:auto; } details.the > summary{cursor:pointer;user-select:none} details.the code.chip{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem} /* ============================================================ Anh bang chung giao hang (POD) — sprint 5 ============================================================ */ .luoi-pod { display: flex; flex-wrap: wrap; gap: .35rem; } .o-pod { display: block; width: 72px; height: 72px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--rule-soft); } .o-pod img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Dong cam ket: may shipper noi da co tam anh nay, file chua len toi server. CO Y khong giong mot tam anh — o day khong co gi de xem. */ .o-pod.cho-tai-len { display: flex; align-items: center; justify-content: center; padding: .3rem; font-size: .62rem; line-height: 1.2; text-align: center; color: var(--ink-3); background: repeating-linear-gradient( 45deg, var(--rule-soft), var(--rule-soft) 5px, transparent 5px, transparent 10px); border-style: dashed; } /* ========================================================================== Sprint 7 — engine cong thuc ========================================================================== */ /* Dong bi chinh tay phai NHIN THAY DUOC ngay, khong phai tim. Dac ta muc 08 doi "dau hieu truc quan o o da chinh tay" — mot con so lech khoi bieu gia ma trong y het cac con so khac la mot con so khong ai kiem lai. */ .dong-chinh-tay > td { background: var(--canh-bao-tint); } .dong-chinh-tay > td:first-child { box-shadow: inset 3px 0 0 var(--canh-bao); } /* O nhap ly do chinh tay: hien ra ngay duoi o tien khi so lech khoi bieu gia. */ .o-ly-do { margin-top: .35rem; } .o-ly-do input { width: 100%; font-size: .86rem; } /* Chu phu duoi mot o nhap — dung chung cho goi y va canh bao nho. */ .goi-y.canh-bao { color: var(--canh-bao); font-weight: 600; } /* Bang de NHAP LIEU khac bang de DOC: o nhap tran vien o, mat do day hon, va cot so can phai nhu moi cot tien khac cua he thong. */ .bang.nhap-lieu td { padding: .25rem .35rem; } .bang.nhap-lieu input, .bang.nhap-lieu select { width: 100%; } .bang.nhap-lieu select + select { margin-top: .25rem; } /* Dong da tat trong danh sach bieu gia. */ tr.mo > td { opacity: .55; } /* O thao tac cuoi hang, khong keo gian cac cot con lai. */ td.cuoi { width: 1%; white-space: nowrap; } .danh-sach-buoc { margin: .6rem 0 0 1.1rem; } .danh-sach-buoc li { margin-bottom: .35rem; } /* ========================================================================== Sprint 10 — bao cao phan tich va dashboard ========================================================================== */ /* Dong "chua xac dinh chu hang" cua bang tuoi no. No la tien THAT cua mot chu hang that ma he thong chua biet la ai, nen no phai nhin thay duoc — chu khong bi mot menh de JOIN am tham nuot mat. Cung ngon ngu thi giac voi .dong-chinh-tay cua sprint 7. */ .dong-chua-xac-dinh > td { background: var(--canh-bao-tint); } .dong-chua-xac-dinh > td:first-child { box-shadow: inset 3px 0 0 var(--canh-bao); } /* O tien cua nhom qua han lau nhat. Doi mau chu chu khong doi nen: mot bang tuoi no co nam cot tien, to mau ca cot lam mat kha nang doc so. */ td.tien.qua-han-lau { color: var(--nguy); font-weight: 600; } /* Mau so cua mot so trung binh, in ngay canh no. Mot so trung binh khong kem mau so la mot so khong ai kiem chung duoc: "2 gio" tinh tu 1 trong 200 luot trong y het "2 gio" tinh tu ca 200 luot. */ .mau-so { color: var(--ink-3); font-size: .78rem; font-weight: 400; } /* Bieu do xu huong: SVG THUAN, khong thu vien nao. Ba muoi diem du lieu khong can mot goi npm, va trang in thi khong cho JS chay. Mau lay tu bien CSS nen no tu dung ca nen sang lan nen toi. */ .bieu-do { width: 100%; height: auto; display: block; } .bieu-do .duong { fill: none; stroke: var(--accent); stroke-width: 2; } .bieu-do .vung { fill: var(--accent); opacity: .12; } .bieu-do .luoi { stroke: var(--rule-soft); stroke-width: 1; } .bieu-do .nhan-truc { fill: var(--ink-3); font-size: 10px; } .bieu-do .cot { fill: var(--accent); opacity: .55; } /* ------------------------------------------------- chuong canh bao (S11) */ /* Chuong chi xuat hien khi CO canh bao chua doc. Mot cai chuong luon bang 0 la mot cai chuong nguoi ta hoc cach khong nhin — va no con goi y rang co mot man hinh dang bi giau khoi vai tro dang dang nhap. Xem Components/ChuongCanhBao. */ .chuong{ display:inline-flex;align-items:center;gap:.3rem;text-decoration:none; padding:.2rem .5rem;border-radius:999px; background:var(--canh-bao-tint);color:var(--canh-bao); border:1px solid color-mix(in srgb,var(--canh-bao) 32%,transparent); font-size:.78rem;font-weight:600; font-variant-numeric:tabular-nums; } .chuong:hover{background:color-mix(in srgb,var(--canh-bao) 18%,transparent)} .chuong .hinh-chuong{font-size:.9rem;line-height:1} /* Hang canh bao chua doc: gach dung ben trai, khong to mau ca hang. To ca hang lam bang canh bao thanh mot mang mau, va khi moi hang deu noi bat thi khong hang nao noi bat. */ .bang tr.chua-doc td:first-child{box-shadow:inset 3px 0 0 var(--canh-bao)} .bang tr.chua-doc td{font-weight:500} .the-nho{ display:inline-block;font-size:.72rem;font-weight:600; padding:.1rem .4rem;border-radius:4px; background:var(--surface-2);border:1px solid var(--rule);color:var(--ink-2); white-space:nowrap; } .bang .phu{font-size:.72rem;color:var(--ink-3);margin-left:.35rem} .nut.nho{padding:.22rem .5rem;font-size:.75rem;white-space:nowrap} .o-danh-dau{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem} /* ------------------------------------------------ doi ngon ngu (S11) */ /* Nam tren thanh dau trang, TRUOC khoi nguoi dung, va hien ca khi chua dang nhap — dac ta muc 15.2: "chuyen duoc ngay tren giao dien". Mot doi tac Trung Quoc chua dang nhap thi chua co claim ngon ngu nao de doc. */ /* KHONG dung margin-left:auto o day: .thuong-hieu da giu margin-right:auto, va .thuong-hieu dung CHUNG voi _LayoutQuanTri — cong quan tri khong co bo chuyen ngon ngu nen no khong co gi thay the neu ta go margin cua .thuong-hieu di. */ .doi-ngon-ngu,.doi-giao-dien{display:inline-flex;gap:0;margin-right:.7rem} .doi-ngon-ngu button,.doi-giao-dien button{ background:transparent;border:1px solid var(--rule);color:var(--ink-2); font-size:.75rem;font-weight:500;padding:.2rem .5rem;cursor:pointer; font-family:inherit; } .doi-ngon-ngu button:first-child,.doi-giao-dien button:first-child{border-radius:4px 0 0 4px} .doi-ngon-ngu button:last-child,.doi-giao-dien button:last-child{border-radius:0 4px 4px 0;border-left:none} /* Bo ba nut cua cong tac giao dien: chi nut DAU giu vien trai, hai nut sau dung chung mot net voi nut truoc no. */ .doi-giao-dien button + button{border-left:none} .doi-ngon-ngu button:hover,.doi-giao-dien button:hover{background:var(--surface-2)} .doi-ngon-ngu button.dang-o,.doi-giao-dien button.dang-o{ background:var(--accent-tint);color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,transparent); } /* Tren layout trong (trang dang nhap) khong co thanh dau trang de neo vao. */ .doi-ngon-ngu-goc{position:absolute;top:1rem;right:1rem;margin:0} /* ========================================================================== Man hinh hep — tra vo ve cuon trang binh thuong ========================================================================== Vo cao 100dvh dung cho man hinh de ban: ba thanh o tren chiem mot phan nho va bang duoc phan con lai. Duoi 820px thi khong con nhu vay — thanh dieu huong xuong hai ba dong, va mot khung bang cao 200px trong mot vo khong cuon la mot man hinh khong dung duoc. O be ngang nay, cuon trang la dung. */ @media (max-width:820px){ .khung{height:auto;min-height:100dvh;overflow:visible} .khung > .noi-dung{overflow:visible} .noi-dung.man-bang{display:block;overflow:visible} .vung-bang,.man-bang > .vung-bang{display:block} .man-bang > .vung-bang > .bang-cuon{max-height:min(70dvh,32rem)} .vung-bang > * + *{margin-top:var(--space-2)} } /* ========================================================================== Sprint 13 — thanh loc gon, chip loc, bang xo xuong ========================================================================== Do that truoc dot ra soat, bang ke don hang o 1366x768: 429px — 56% chieu cao man hinh — bi tieu truoc dong du lieu dau tien, con lai 9 dong trong mot trang 50 dong. Chin o loc nam phang tren ba hang la phan lon con so do. ========================================================================== */ /* Thanh loc mot hang: o tim keo dai, phan con lai la nut. Cac o loc chi tiet nam trong mot
— chung VAN o trong form khi dang dong, nen van duoc gui di binh thuong;
chi la mot cai vo. */ .thanh-loc-gon{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3)} /* Form GET (tim + bo loc) va form POST (bo chon cot) la HAI form khac nhau, nen chung nam CANH nhau trong thanh chu khong long vao nhau — form long form la HTML khong hop le, va trinh duyet xu ly no bang cach vut het phan sau dau tien ra ngoai form. */ .thanh-loc-gon > .hang-tim{ display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap; flex:1 1 22rem;min-width:0; } .thanh-loc-gon .o-tim{flex:1 1 14rem;min-width:10rem} .thanh-loc-gon .ket-qua{margin-left:auto;color:var(--ink-2);font-size:var(--text-sm)} .thanh-loc-gon .ket-qua strong{color:var(--ink);font-size:var(--text-base)} /* --------------------------------------------------------------- bang xo
lam bang xo xuong. Khong mot dong JS nao: trinh duyet lo viec mo dong, va tat JS thi no van chay. Bang dat TUYET DOI, nen no khong day bang ke xuong khi mo — day chinh la loi ma thanh loc cu mac phai, chi la o dang khac. */ .bang-xo{position:relative} .bang-xo > summary{list-style:none;display:inline-flex;align-items:center;gap:.35rem} .bang-xo > summary::-webkit-details-marker{display:none} .bang-xo > summary::after{ content:"";width:.42rem;height:.42rem; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:translateY(-.12em) rotate(45deg); } .bang-xo[open] > summary::after{transform:translateY(.1em) rotate(225deg)} .bang-xo-noi{ position:absolute;top:calc(100% + var(--space-1));left:0; z-index:var(--z-bang-nhom); min-width:16rem;max-width:min(40rem,calc(100vw - 2rem)); padding:var(--space-3); background:var(--surface);border:1px solid var(--rule); border-radius:var(--radius);box-shadow:var(--bong); } .bang-xo-noi > * + *{margin-top:var(--space-3)} /* Bang neo mep phai khi no la thu cuoi cua mot hang nut: neo trai thi no tran qua mep phai man hinh. */ .dau-trang .bang-xo .bang-xo-noi{left:auto;right:0} /* Ba che do xuat: moi che do mot dong co ten va MUC DICH. Ba cai ten khong noi ho tro cho ai — dong mo ta moi lam duoc viec do. */ .bang-xo-noi > a{ display:block;padding:.45rem .6rem;border-radius:var(--radius-sm); color:var(--ink);text-decoration:none;margin-top:var(--space-1); } .bang-xo-noi > a:hover{background:var(--surface-2)} .bang-xo-noi > a .ten{display:block;font-weight:600;font-size:var(--text-md)} .bang-xo-noi > a .mo-ta{ display:block;font-size:var(--text-xs);color:var(--ink-3); line-height:1.35;text-wrap:pretty; } .luoi-loc{ display:grid;gap:var(--space-3); grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); min-width:min(34rem,calc(100vw - 2rem)); } .luoi-loc > * + *{margin-top:0} .rong-het{grid-column:1/-1} /* So bo loc dang ap, hoac so cot dang hien tren tong so. Nam tren chinh cai nut mo bang: dong bang xong van phai biet ben trong dang co gi. */ .dem-chip{ display:inline-flex;align-items:center;justify-content:center; min-width:1.25rem;padding:0 .3rem;border-radius:var(--radius-tron); background:var(--accent);color:var(--chu-tren-nhan); font-size:var(--text-xs);font-weight:700;font-variant-numeric:tabular-nums; } /* ------------------------------------------------------------- chip loc Moi bo loc dang ap la mot chip, go duoc rieng. Nut go la mot LIEN KET GET chu khong phai nut JS — no phai chay khi tat JS. */ .day-chip-loc{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center} .day-chip-loc > .nhan{margin-right:var(--space-1)} .chip-loc{ display:inline-flex;align-items:center;gap:.3rem;margin-right:0; padding:.2rem .2rem .2rem .5rem;font-weight:500; background:var(--accent-tint);border-color:color-mix(in srgb,var(--accent) 30%,transparent); color:var(--ink); } .chip-loc .ten-loc{color:var(--ink-3);font-weight:600} .chip-loc .gia-tri-loc{font-weight:600} .chip-loc .go{ display:inline-flex;align-items:center;justify-content:center; width:1.1rem;height:1.1rem;border-radius:var(--radius-tron); color:var(--ink-2);text-decoration:none;font-size:.9rem;line-height:1; } .chip-loc .go:hover{background:var(--nguy-tint);color:var(--nguy)} /* ---------------------------------------------------------- bo chon cot */ .luoi-cot{ display:grid;gap:.2rem var(--space-3); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); min-width:min(30rem,calc(100vw - 2rem)); max-height:min(50dvh,26rem);overflow:auto; } .luoi-cot .tich{font-size:var(--text-md)} /* Man hinh hep: bang xo KHONG dat tuyet doi nua ma chay theo dong. Truoc do khoi nay chi go position:relative cua .bang-xo va neo bang theo hai mep — nhung bo mat than positioned duy nhat thi phan tram cua "top" tinh theo KHOI CHUA BAN DAU, tuc la top:100% roi xuong duoi day khung nhin. Bang van nam dung be ngang, chi la khong ai nhin thay no. Tren dien thoai, mot bang xo day noi dung xuong la hanh vi dung: khong co chuot de re, va khong co cho de dat mot lop noi len tren. */ @media (max-width:640px){ .bang-xo-noi, .dau-trang .bang-xo .bang-xo-noi{ position:static;min-width:0;max-width:none; margin-top:var(--space-2);box-shadow:none; } .luoi-loc,.luoi-cot{min-width:0} .thanh-loc-gon .ket-qua{margin-left:0} .bang-xo{flex-basis:100%} } /* ========================================================================== Sprint 13 — man hinh Dieu phoi ========================================================================== Cong viec that la mot vong lap bon nhip: nhin ai dang ranh -> tich don -> chon nguoi -> gan. Bo cuc cu xep bon bang chong doc, nen ba nhip dau khong bao gio nhin thay cung luc. ========================================================================== */ /* min-width:0 tren CA HAI con: be rong toi thieu tu dong cua mot o luoi la min-content cua no, va min-content cua mot bang 6 cot la ca 774px. Thieu dong nay thi o luoi phinh ra 833px trong mot khung nhin 390px, va CA TRANG truot ngang — dung dieu muc 9 CLAUDE.md cam. Do that o 390x844 truoc khi sua: document.scrollWidth = 833. */ .luoi-dieu-phoi{display:grid;gap:var(--space-5);align-items:start} .luoi-dieu-phoi > *{min-width:0} .luoi-dieu-phoi > * + *{margin-top:0} .cot-hang-doi > * + *{margin-top:var(--space-5)} @media (min-width:1100px){ .luoi-dieu-phoi{grid-template-columns:minmax(0,1fr) 20rem} /* Bang tai DUNG YEN trong khi dieu phoi tich don ben trai. Dinh o duoi day thanh loc — top phai lon hon 0, khong thi no dinh vao dinh vung cuon va de len chinh thanh loc. */ .cot-tai-shipper{position:sticky;top:0;max-height:100%;overflow:auto} } /* --------------------------------------------------------- danh sach tai */ .danh-sach-tai{list-style:none;margin:0;padding:0} .danh-sach-tai > li{ padding:var(--space-2) 0;border-bottom:1px solid var(--rule-soft); } .danh-sach-tai > li:last-child{border-bottom:none} .danh-sach-tai > li > * + *{margin-top:var(--space-1)} .danh-sach-tai .ten-shipper{font-weight:600} .danh-sach-tai .so-lieu{font-size:var(--text-sm)} /* Gach dung ben trai cho nguoi dang vuot / sap vuot nguong giu tien. To ca dong lam bang nay thanh mot mang mau, va khi moi dong deu noi bat thi khong dong nao noi bat — cung ngon ngu thi giac voi .dong-chinh-tay. */ .danh-sach-tai > li.vuot{box-shadow:inset 3px 0 0 var(--nguy);padding-left:var(--space-2)} .danh-sach-tai > li.sap-vuot{box-shadow:inset 3px 0 0 var(--canh-bao);padding-left:var(--space-2)} /* Thanh muc tai. So SANH TUONG DOI voi nguoi cam nhieu don nhat — he thong khong co han muc so don, chi co han muc giu TIEN, nen mot thanh day 100% theo nguong so don la bia ra mot quy tac nghiep vu ngay tren man hinh. */ .thanh-tai{ height:5px;border-radius:var(--radius-tron); background:var(--surface-2);overflow:hidden; } .thanh-tai > span{display:block;height:100%;background:var(--accent)} .danh-sach-tai > li.vuot .thanh-tai > span{background:var(--nguy)} .danh-sach-tai > li.sap-vuot .thanh-tai > span{background:var(--canh-bao)} /* --------------------------------------------------- khoi tra cuu gap lai "Dang tren duong" khong co nut nao bam duoc: no la thong tin tra cuu. Gap lai de no khong chiem mot man hinh cua chinh cai viec dieu phoi dang lam. */ .tab-tra-cuu > summary{ cursor:pointer;user-select:none;list-style:none; display:flex;align-items:center;gap:var(--space-2); font-weight:600; } .tab-tra-cuu > summary::-webkit-details-marker{display:none} .tab-tra-cuu > summary::after{ content:"";width:.42rem;height:.42rem;margin-left:auto; border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3); transform:translateY(-.12em) rotate(45deg); } .tab-tra-cuu[open] > summary::after{transform:translateY(.1em) rotate(225deg)} /* ========================================================================== Sprint 13 — bieu mau don va man hinh chi tiet don ========================================================================== */ /* ------------------------------------------------ bieu mau don: hai cot Dieu huong khoi DINH ben trai; bieu mau 673 dong, 8 khoi, ~40 truong. */ .khung-don{display:grid;gap:var(--space-5);align-items:start} .khung-don > * + *{margin-top:0} /* Cung ly do voi .luoi-dieu-phoi: be rong toi thieu tu dong cua mot o luoi la min-content cua no. Do that o 390x844 truoc khi sua: bieu mau don keo document.scrollWidth len 980px trong mot khung nhin 390px. */ .khung-don > *{min-width:0} .dieu-huong-khoi ol{list-style:none;margin:0;padding:0;counter-reset:khoi} .dieu-huong-khoi li{counter-increment:khoi} .dieu-huong-khoi a{ display:flex;gap:var(--space-2);align-items:baseline; padding:.35rem .5rem;border-radius:var(--radius-sm); color:var(--ink-2);text-decoration:none;font-size:var(--text-md); border-left:2px solid transparent; } .dieu-huong-khoi a::before{ content:counter(khoi); font-family:"IBM Plex Mono",monospace;font-size:var(--text-xs); color:var(--ink-3); } .dieu-huong-khoi a:hover{background:var(--surface-2);color:var(--ink)} /* :target to sang muc dang duoc nhay toi. Khong mot dong JS: neo thuan lo het, va tat JS thi thanh dieu huong nay van chay dung. */ .dieu-huong-khoi a:target, .dieu-huong-khoi li:has(a:active) a{border-left-color:var(--accent)} @media (min-width:1000px){ .khung-don{grid-template-columns:13rem minmax(0,1fr)} .dieu-huong-khoi{position:sticky;top:0;padding-top:var(--space-1)} } @media (max-width:999px){ /* Man hinh hep: thanh dieu huong thanh mot day ngang cuon duoc, khong an di — 8 khoi tren mot dien thoai lai cang can duong nhay. */ .dieu-huong-khoi ol{display:flex;gap:var(--space-1);overflow-x:auto;padding-bottom:var(--space-1)} .dieu-huong-khoi a{white-space:nowrap;border-left:none;border-bottom:2px solid transparent} } /* Bieu mau khong con tu gioi han be ngang: khung .khung-don da lo viec do, va 960px cong voi cot dieu huong 13rem thi tran ra ngoai vung noi dung. */ .khung-don > form.khung-form{max-width:none} /* --------------------------------------------------------- thanh day form Dong tong tam tinh va cac nut luu, bam day khung nhin. Truoc dot ra soat nay dong tong nam ket giua form (dong 401 cua 673) va nut Luu nam o tan cuoi. Ca hai deu la thu nguoi nhap can TRONG LUC nhap. */ .thanh-day{ position:sticky;bottom:0;z-index:var(--z-thanh-gan); display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap; padding:var(--space-3) var(--space-4); background:var(--surface);border:1px solid var(--accent); border-radius:var(--radius);box-shadow:var(--bong); } .thanh-day .tong-tam{margin:0;flex:1 1 20rem;background:transparent;padding:0} .thanh-day .hang-nut{margin-left:auto} /* --------------------------------------------------------- vung nguy hiem Viec khong quay dau duoc: khung rieng, vien do, nut do. Truoc dot ra soat nay chung nam chung mot hang nut phang voi "Phát hành đơn". */ .the.vung-nguy{ border-color:color-mix(in srgb,var(--nguy) 45%,transparent); background:color-mix(in srgb,var(--nguy-tint) 55%,var(--surface)); } .the.vung-nguy > h2{color:var(--nguy)} .nut.nguy{background:var(--nguy);color:var(--chu-tren-nhan);border-color:transparent} .nut.nguy:hover{background:color-mix(in srgb,var(--nguy) 82%,#000)} /* ------------------------------------------------- danh sach loai du lieu Man hinh /import. Moi muc: khoi chu ben trai, hai nut ben phai. VI SAO KHOI NAY PHAI TON TAI. la the INLINE, va padding DOC cua mot the inline khong lam cao line box — no tran ra ngoai va de len dong chu phia tren. O moi man hinh khac, .nut nam trong mot vung flex nen duoc blockify va khong ai thay dieu do; rieng .nut-muc cua man hinh nay khong co mot khai bao nao, nen hai nut de len dong "N cot, trong do M cot bat buoc". Do la mot lop lay ten trong view ma khong ai viet CSS cho no. Build khong canh bao, test khong do — dung hang loi ma CLAUDE.md muc 10 noi toi. */ /* display:flex tren
  • lam mat ::marker, ma so thu tu o man hinh nay CO NGHIA — khoi canh bao ngay duoi danh sach doc la "Nhap theo dung thu tu tren", va nhap nguoc thu tu thi moi dong deu bao "khong co doi tac nao ma ...". Danh so lai bang counter va gan vao tieu de tung muc. */ .danh-sach-import{ margin:0;padding-left:0;list-style:none;counter-reset:muc-import; display:flex;flex-direction:column;gap:var(--space-4); } .danh-sach-import > li{ display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:var(--space-3); } .danh-sach-import > li + li{border-top:1px solid var(--rule-soft);padding-top:var(--space-4)} /* Khoi chu co gian; 20rem la nguong de hai nut xuong hang o khung hep. */ .danh-sach-import .noi-dung-muc{flex:1 1 20rem;min-width:0} .danh-sach-import .noi-dung-muc > * + *{margin-top:var(--space-1)} .danh-sach-import .noi-dung-muc h2{font-size:var(--text-lg)} .danh-sach-import .noi-dung-muc h2::before{ counter-increment:muc-import; content:counter(muc-import) ". "; color:var(--ink-3); } .danh-sach-import .noi-dung-muc .phu{font-size:var(--text-sm);color:var(--ink-3)} .nut-muc{display:flex;flex:0 0 auto;gap:var(--space-2);align-items:center} /* Man hinh laptop 1366x768 — CHIEU CAO la thu hiem, chieu ngang thi khong. Do that o do phan giai nay: 331px, tuc 43% man hinh, bi tieu truoc dong du lieu dau tien. Khoi nay thu nhip doc lai chu khong bo mot khoi nao, va no chi chay o man hinh de ban thap — dien thoai da co khoi @media rieng. */ @media (min-width:821px) and (max-height:820px){ .noi-dung{padding-top:var(--space-3);padding-bottom:var(--space-3)} .noi-dung > * + *{margin-top:var(--space-3)} .thanh-tren{padding-top:.45rem;padding-bottom:.45rem} .thanh-loc-gon{padding-top:var(--space-1);padding-bottom:var(--space-1)} .ghi-chu-tong{font-size:var(--text-xs);line-height:1.4} .vung-bang > * + *{margin-top:var(--space-1)} } /* Dien thoai: thanh tren la thu duy nhat dung giua nguoi dung va viec cua ho. O 390px, ba thanh o dinh trang chiem 270px cua 844 — dung cai ty le ma dot ra soat nay ton tai de sua, chi la o be ngang khac. Thu nho, khong bo bot: ten tenant va ten nguoi dang dang nhap deu la thong tin can trong mot he thong da tenant. Rieng the vai tro thi an — no la chu IN HOA giay cach rong, xuong hai dong o be ngang nay, va van doc duoc o man hinh Nguoi dung. */ @media (max-width:520px){ .thanh-tren{gap:.45rem .6rem;padding:.5rem .8rem} .thanh-tren .nguoi-dung{gap:.5rem;font-size:.8rem} .doi-ngon-ngu,.doi-giao-dien{margin-right:.35rem} .doi-ngon-ngu button,.doi-giao-dien button{padding:.15rem .4rem;font-size:.7rem} .nguoi-dung .vai-tro{display:none} .nguoi-dung .nut{padding:.4rem .7rem;font-size:.8rem} .dieu-huong .muc-goc{padding:.5rem .6rem;font-size:.85rem} } /* ===================================================================== Ban in ========================================================================== Truoc dot ra soat nay, chugia.css co DUNG 0 khoi @media print — trong mot cong ty in giay hang ngay. Trang in la thu khach cam tren tay va dua cho khach hang cua ho; no khong duoc mang theo thanh dieu huong, o loc, hay mot day nut bam. Ba man hinh in RIENG — phieu in, bang luong, bien ban doi soat — co layout _LayoutBienBan va CSS cua rieng chung. Khoi nay danh cho viec in mot BANG KE thang tu man hinh lam viec, va do la viec nguoi ta lam nhieu nhat. */ @media print{ /* Vo cao co dinh va vung cuon deu vo nghia tren giay: ca hai deu cat noi dung o dung mot man hinh dau tien va vut phan con lai. */ .khung{height:auto;min-height:0;overflow:visible;display:block} .khung > .noi-dung{overflow:visible} .noi-dung{max-width:none;padding:0;overflow:visible} .noi-dung.man-bang{display:block;overflow:visible} .vung-bang,.man-bang > .vung-bang{display:block} .bang-cuon,.man-bang > .vung-bang > .bang-cuon{ max-height:none;overflow:visible;border:none;border-radius:0;background:none; } /* Khong in: dieu khien man hinh. Bo loc, nut bam va phan trang khong noi duoc gi tren giay, ma chung chiem het mot phan tu trang dau. */ .thanh-tren,.dieu-huong,.thanh-loc,.hang-nut,.phan-trang, .thanh-gan,.chuong,.doi-ngon-ngu,.doi-giao-dien,.cot-thao-tac, .bo-chon-cot,.chip-loc .go{display:none!important} body{background:#fff;color:#000;font-size:10pt} a{color:#000;text-decoration:none} /* Bang in den trang co vien. Nen mau in ra xam nham tren may in van phong, va mot bang tien xam nham la mot bang kho doc — vien ro hon nen. */ table{font-size:9pt;width:100%} th,td{border:1px solid #999;padding:2pt 4pt;color:#000} thead{display:table-header-group} tfoot{display:table-footer-group} thead th{ position:static;background:#EEE;color:#000; text-transform:none;letter-spacing:0;font-size:8.5pt; white-space:normal; } tfoot .dong-tong td{position:static;background:#EEE;color:#000} .bang-cuon th.cot-ghim,.bang-cuon td.cot-ghim, .bang-cuon th.cot-ghim-stt,.bang-cuon td.cot-ghim-stt, .bang-cuon th.cot-ghim-2,.bang-cuon td.cot-ghim-2{ position:static;background:none;box-shadow:none; } /* Bo .bang-rong khi in: tren man hinh, cot lay be ngang tu nhien va khung cuon ngang lo phan du. To giay khong cuon duoc — de nguyen thi phan vuot be ngang trang bi CAT, im lang. Ve lai theo be ngang trang va cho chu xuong dong. Bang ke 38 cot van nen chon mot bo cot truoc khi in. */ .bang-rong{width:100%} .bang-rong td{max-width:none} th,td{white-space:normal} tbody tr{page-break-inside:avoid} .the{border:1px solid #999;box-shadow:none;background:none;break-inside:avoid} .chip,.the-nho{border:1px solid #999;background:none;color:#000} @page{margin:12mm} }