/* Bộ da ĐVP — chép NGUYÊN từ giao-don-web/mockup/mockup-da-chot-2210.html (Sếp chốt 22/10/2026). Cấm sửa; lớp mới của GIAOVIEC để ở file mockup, tiền tố gv- */
:root{
--t900:#062b33;--t800:#07414c;--t700:#045864;--t600:#067686;--t500:#0b8fa1;
--t100:#d9ebee;--t50:#eef6f8;--cam:#f9a41c;--cam-dam:#dd8b05;--cam-nhat:#fff6e6;
--xanh:#12855a;--xanh-nhat:#e6f5ee;--do:#c93b3b;--do-nhat:#fdedec;
--muc:#16262e;--muc2:#5c7079;--muc3:#8b9ba3;--vien:#e5ecee;--vien-dam:#d3dfe2;
--nen:#f6f9fa;--trang:#fff;--r-lg:16px;--r-md:12px;--r-sm:9px;
--b1:0 1px 2px rgba(16,38,46,.05),0 1px 3px rgba(16,38,46,.05);
--b2:0 2px 4px -1px rgba(16,38,46,.05),0 14px 28px -10px rgba(6,118,134,.26);
--b3:0 24px 60px -18px rgba(6,43,51,.45);--nhip:cubic-bezier(.22,.61,.36,1);
--teal:var(--t600);--teal-dam:var(--t700);--teal-toi:var(--t900);--kem:var(--nen);--xam:var(--muc2)
}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--nen);color:var(--muc);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit}input,select,textarea{font-family:inherit;font-size:inherit;min-width:0}a{color:inherit;text-decoration:none}
::selection{background:var(--t600);color:#fff}:focus-visible{outline:2.5px solid var(--t500);outline-offset:2px;border-radius:4px}
*{scrollbar-width:thin;scrollbar-color:var(--vien-dam) transparent}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--vien-dam);border-radius:9px;border:2px solid var(--nen)}
.an{display:none!important}.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block}.ic-sm{width:17px;height:17px;stroke-width:1.9}
.ds-mockbar{background:#e9eff1;border-bottom:1px solid var(--vien-dam)}.mockwrap{max-width:1140px;margin:auto;padding:8px 16px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.grow{flex:1}.lab{font-size:11px;font-weight:800;color:var(--muc2)}
.gd-btn,.nut-phu,.nut-loc{background:var(--trang);color:var(--t700);border:1.5px solid var(--vien-dam);padding:8px 13px;border-radius:10px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:border-color .18s,color .18s,background .18s,transform .18s var(--nhip)}
.gd-btn:hover,.nut-phu:hover,.nut-loc:hover{border-color:var(--t500);background:var(--t50);transform:translateY(-1px)}.gd-btn.on,.nut-loc.chon{background:var(--t600);border-color:var(--t600);color:#fff}.gd-btn.danger{color:var(--do);border-color:#efcaca}
header,.darkhead{background:radial-gradient(1100px 320px at 15% -40%,rgba(11,143,161,.55),transparent 70%),radial-gradient(680px 300px at 92% 0%,rgba(249,164,28,.20),transparent 68%),linear-gradient(140deg,#062b33 0%,#07414c 52%,#065c69 100%);color:#fff;position:relative;overflow:hidden}
header{padding:20px 16px 22px}header::before,.darkhead::before,.khoang::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
header::before{-webkit-mask-image:linear-gradient(to bottom,#000,transparent 78%);mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.hwrap{max-width:1140px;margin:auto;display:flex;align-items:center;gap:15px;position:relative;z-index:1}.logo-badge{background:#fff;border-radius:12px;padding:7px 12px;display:flex;align-items:center;box-shadow:0 6px 18px rgba(0,0,0,.22);flex:none}.logo-badge img{height:34px;display:block}
.htitle{flex:1;min-width:0}.htitle h1{margin:0;font-size:21px;font-weight:800;letter-spacing:-.35px;line-height:1.2}.htitle .sub{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}.sub .cham{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}
.hme{display:flex;align-items:center;gap:8px;flex:none;min-height:42px;flex-wrap:wrap;justify-content:flex-end}.chip-me{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);border-radius:26px;padding:4px 14px 4px 4px;font-size:13px}.tk-ava{width:32px;height:32px;border-radius:50%;background:linear-gradient(150deg,var(--cam),#f5872a);color:#40260a;font-weight:800;font-size:12.5px;display:grid;place-items:center}.tk-txt b,.tk-txt .vt{white-space:nowrap;display:block;line-height:1.25}.tk-txt .vt{font-size:11px;color:rgba(255,255,255,.68)}
.nut-header{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:8px 13px;font-size:12.5px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.nut-header:hover{background:rgba(255,255,255,.24)}
.thanh{position:sticky;top:0;z-index:30;background:rgba(246,249,250,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;padding:10px 16px}.thanh.dinh{border-bottom-color:var(--vien);box-shadow:0 8px 22px -14px rgba(6,43,51,.4)}.twrap{max-width:1140px;margin:auto;width:100%}
.chips{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:6px 2px 16px;margin:-6px -2px -16px}.chips::-webkit-scrollbar{display:none}
.chip,.formpills button{background:var(--trang);border:1px solid var(--vien);border-radius:24px;padding:7px 10px 7px 6px;font-size:12px;font-weight:600;color:var(--muc);white-space:nowrap;display:flex;align-items:center;gap:7px;box-shadow:var(--b1);transition:transform .18s var(--nhip),box-shadow .18s var(--nhip),border-color .18s,background .18s var(--nhip)}
.chip .ic,.formpills button .ic{width:12px;height:12px;stroke-width:2.2;color:#fff;background:linear-gradient(145deg,var(--m,var(--t600)),var(--m2,var(--t700)));border-radius:50%;padding:4px;box-sizing:content-box}
.chip:hover{transform:translateY(-2px);border-color:var(--mn,var(--t100));box-shadow:0 12px 22px -12px var(--m,var(--t600))}
.chip.chon,.formpills button.on{background:linear-gradient(145deg,var(--m,var(--t600)),var(--m2,var(--t700)));border-color:var(--m2,var(--t700));color:#fff;font-weight:700;box-shadow:0 6px 16px -6px var(--m,var(--t600))}
.chip.chon .ic,.formpills button.on .ic{background:rgba(255,255,255,.22)}.count{padding:1px 7px;border-radius:11px;background:var(--mn);color:var(--m2);font-size:11px;font-weight:800}.chip.chon .count{background:rgba(255,255,255,.22);color:#fff}
.thanh-loc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.thanh-loc .nhom{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.thanh-loc .day{flex:1}.gd-day strong{font-size:13px;white-space:nowrap}.gd-ngay-ngan{display:none}
.gd-filters{display:flex;gap:5px;align-items:center;flex-wrap:wrap;flex:1 0 100%;order:3}.gd-filters select,.gd-filters input{border:1.5px solid var(--vien-dam);border-radius:10px;padding:6px 9px;font-size:13px;background:#fff;color:var(--muc);outline:none}.gd-filters input{flex:1;min-width:208px}
.gd-filters select:focus,.gd-filters input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--t500);box-shadow:0 0 0 4px rgba(11,143,161,.13);outline:0}
.nut-excel{background:var(--cam);color:#40260a;border:0;padding:9px 15px;border-radius:10px;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;box-shadow:0 4px 14px -4px rgba(249,164,28,.7);transition:transform .18s var(--nhip),background .18s}.nut-excel:hover{background:var(--cam-dam);transform:translateY(-1px)}
main{padding:2px 16px 46px}.wrap{max-width:1140px;margin:auto}.canh-bao{background:var(--cam-nhat);border-left:3px solid var(--cam);padding:11px 13px;border-radius:0 11px 11px 0;margin:0 0 13px;font-size:13.5px}.ghi-chu{background:var(--t50);border-left:3px solid var(--t500);padding:10px 13px;border-radius:0 11px 11px 0;font-size:12.8px;color:#325058;margin-top:12px}.loi-to{background:var(--do-nhat);border-left:3px solid var(--do);padding:11px 13px;border-radius:0 11px 11px 0;margin-bottom:13px;color:#a02222}
.khoang{--k-vet:rgba(11,143,161,.5);--k-bong:rgba(6,43,51,.9);background:radial-gradient(760px 220px at 12% -10%,var(--k-vet),transparent 68%),linear-gradient(150deg,#062b33 0%,#07414c 60%,#065c69 100%);border-radius:22px;padding:18px 20px 22px;margin-top:5px;position:relative;box-shadow:0 20px 46px -24px var(--k-bong);border-left:3px solid var(--mk);transition:border-color .25s}
.khoang::before{opacity:.42;border-radius:inherit;-webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 72%)}.khoang>*{position:relative;z-index:1}
h2.nhom{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;color:#fff;margin:0 0 12px;display:flex;align-items:center;gap:9px}h2.nhom .ic,.ic-k,.headicon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;color:#fff;background:linear-gradient(145deg,var(--mk),var(--mk2));border-radius:50%;padding:4px;box-sizing:content-box}h2.nhom .vet{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--mkn),transparent)}
.card,.the{background:#fff;border:1px solid var(--vien);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:13px;box-shadow:var(--b1)}.khoang .card{border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.16),0 8px 18px -10px rgba(0,0,0,.5)}
.gd-kpi-hang{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.so-lon{background:#fff;border:1px solid var(--vien);border-left:3px solid var(--mk);border-radius:15px;padding:13px 16px;box-shadow:var(--b1);min-width:0}.so-lon .nhan{font-size:11px;color:var(--muc2);font-weight:700;text-transform:uppercase;letter-spacing:.55px;display:flex;align-items:center;gap:8px}.so-lon .nhan .ic{width:12px;height:12px;padding:4px;box-sizing:content-box;border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--mk),var(--mk2))}.so-lon .gt{font-size:25px;font-weight:800;color:var(--mk2);margin:5px 0 2px;letter-spacing:-.5px;font-variant-numeric:tabular-nums;white-space:nowrap}.kpifoot,.footer-note{font-size:12px}.footer-note{color:rgba(255,255,255,.6);margin-top:8px}.footer-note b{color:rgba(255,255,255,.85)}.kpisummary{display:none}
.the.km{border-left:3px solid var(--mk)}.the.km>h2,.kh h3{color:var(--mk2);display:flex;align-items:center;gap:9px;margin:0 0 13px;font-size:16px;font-weight:800;letter-spacing:-.25px}.the.km>h2::after,.kh h3::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--mkn),transparent)}.gd-table-note{margin:-7px 0 11px;font-size:12px;color:var(--muc2)}
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px}th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--t50)}th{background:var(--mk2,var(--t600));color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.55px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}thead th:first-child{border-radius:9px 0 0}thead th:last-child{border-radius:0 9px 0 0}td{overflow-wrap:break-word;font-variant-numeric:tabular-nums;height:58px;vertical-align:middle}.the.km tbody tr:hover{background:var(--mkn)}tr[data-open]{cursor:pointer}.right{text-align:right!important}.nowrap{white-space:nowrap}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.name{font-weight:700;line-height:1.3}.minor{font-size:11.5px;color:var(--muc2)}.mono{font:600 12px/1.35 ui-monospace,Consolas,monospace}.status-chip,.step-chip{display:inline-flex;padding:2px 7px;border-radius:11px;font-size:11px;font-weight:800;background:var(--mn);color:var(--m2)}.step-chip{margin-top:5px}.progress{display:flex;align-items:center;gap:2px}.dot{width:8px;height:8px;border-radius:50%;background:#d7e0e2;flex:none}.pline{height:2px;min-width:5px;flex:1;background:#d7e0e2}.flagged-row{border-left:3px solid var(--do)}.flags{display:flex;gap:3px;flex-wrap:wrap}.flag{width:18px;height:18px;border-radius:50%;background:var(--do-nhat);color:var(--do);display:grid;place-items:center}.flag .ic{width:12px;height:12px}.clockchip{display:inline-flex;color:var(--cam-dam)}.clockchip .ic{width:12px;height:12px}.gd-cards{display:none}.gd-empty{text-align:center;padding:32px;color:var(--muc2)}.skel{display:block;height:16px;width:100%;border-radius:7px;background:linear-gradient(90deg,#eef2f5,#d3dfe2,#eef2f5);background-size:200% 100%;animation:sk 1.2s linear infinite}@keyframes sk{to{background-position:-200% 0}}
.overlay{position:fixed;inset:0;background:rgba(6,43,51,.62);z-index:70}.gd-drawer{position:absolute;right:0;inset-block:0;width:min(560px,100%);background:#fff;display:flex;flex-direction:column;box-shadow:var(--b3);animation:hop .26s var(--nhip)}.gd-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,calc(100% - 32px));max-height:calc(100% - 32px);background:#fff;border-radius:20px;display:flex;flex-direction:column;animation:hopModal .26s var(--nhip)}.gd-modal.small{width:min(560px,calc(100% - 32px))}
.ve-lai{animation:none!important}@keyframes hop{from{transform:translateY(14px);opacity:0}}@keyframes hopModal{from{transform:translate(-50%,calc(-50% + 14px)) scale(.97);opacity:0}}
.darkhead{padding:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:radial-gradient(520px 180px at 8% -30%,var(--headvet),transparent 70%),radial-gradient(360px 160px at 96% 0%,rgba(249,164,28,.2),transparent 68%),linear-gradient(140deg,#062b33,#07414c 55%,#065c69)}.darkhead>*{position:relative;z-index:1}.darktitle{display:flex;align-items:center;gap:9px}.darktitle b{font-size:16px}.darkhead .minor{color:rgba(255,255,255,.72)}.closewhite{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);color:#fff;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}.dbody,.mbody{padding:16px;overflow:auto;flex:1}.actions{padding:12px 16px;border-top:1px solid var(--vien);background:#fff;display:flex;gap:8px;flex-wrap:wrap}.action-main{background:linear-gradient(145deg,var(--am),var(--am2));color:#fff;border:0;border-radius:11px;padding:11px 22px;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px;transition:transform .18s var(--nhip)}.action-main:hover{transform:translateY(-1px)}.action-outline{background:#fff;color:var(--am2);border:1.5px solid var(--am);border-radius:10px;padding:9px 13px;font-weight:700}.action-outline[data-action="huy"]{color:var(--do);border-color:var(--do)}
.detail-progress{display:flex;align-items:flex-start;gap:4px;margin-top:12px}.detail-step{display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(255,255,255,.56);font-size:10px;text-align:center;min-width:50px}.detail-step i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3)}.detail-step.on{color:#fff}.detail-step.on i{background:var(--step)}.detail-line{height:2px;flex:1;background:rgba(255,255,255,.3);margin-top:4px}.detail-line.on{background:var(--step)}
.kh{--mk:var(--t500);--mk2:var(--t700);--mkn:var(--t50);border-left:3px solid var(--mk);padding:12px;margin-bottom:12px;background:#fff;border-top:1px solid var(--vien);border-right:1px solid var(--vien);border-bottom:1px solid var(--vien);border-radius:0 12px 12px 0}.info{display:grid;grid-template-columns:1fr 1fr;gap:8px}.info>div,.eventvals div{background:var(--mkn,var(--t50));border-radius:9px;padding:8px;min-width:0}.wide{grid-column:1/-1}.info span,.money span{display:block;color:var(--muc2);font-size:11px;margin-bottom:4px}.moneygrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--vien);border-radius:9px;overflow:hidden}.money{padding:8px;border-right:1px solid var(--vien)}.money:last-child{border:0}
.timeline{border-left:2px solid var(--t100);margin-left:8px;padding-left:16px}.event{position:relative;margin-bottom:12px;border-left:3px solid var(--em);background:#fff;border-radius:0 9px 9px 0;padding:9px;box-shadow:var(--b1)}.event::before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--em);left:-23px;top:12px}.eventvals{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px}.images{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.img{width:72px;height:72px;border:0;border-radius:9px;color:#fff;font-size:10px;font-weight:700;background:linear-gradient(145deg,var(--em),var(--em2))}.history{font-size:11px}.history td{height:auto;padding:6px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.field{margin-bottom:12px;min-height:70px}.field label,.field-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muc2);margin-bottom:4px}.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--vien-dam);border-radius:13px;background:#fff;padding:7px 9px}.field textarea{resize:vertical}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.formpills{display:flex;flex-wrap:wrap;gap:5px;min-height:36px}.formpills button{box-shadow:none}.formpills button:hover{transform:none}.locked{opacity:.45}.locked input,.locked textarea,.locked button{cursor:not-allowed}.lockchip{display:inline-flex;padding:1px 7px;border-radius:9px;background:var(--vien);color:var(--muc2);font-size:10px}.servicebox{min-height:43px}.carrierbox{min-height:210px}.paybox{min-height:80px}.reasonbox{min-height:80px}.error{color:var(--do);font-size:11.5px;margin-top:4px;min-height:16px}.drop{border:2px dashed var(--vien-dam);border-radius:12px;padding:12px;text-align:center;background:#fafcfc;margin-bottom:16px;min-height:96px}.previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.upload{width:72px}.uploadpic{position:relative;width:72px;height:58px;border-radius:9px;overflow:hidden;background:var(--t100);display:grid;place-items:center}.uploadpic img{width:100%;height:100%;object-fit:cover}.uploadpic button{position:absolute;right:2px;top:2px;border:0;border-radius:50%;background:var(--t900);color:#fff;width:22px;height:22px}.checkrow{display:flex;align-items:center;gap:8px;min-height:36px;margin-bottom:12px}.readonly{background:#eef2f3!important}.suffix{display:flex}.suffix input{border-radius:13px 0 0 13px}.suffix span{display:grid;place-items:center;padding:0 10px;border:1.5px solid var(--vien-dam);border-left:0;border-radius:0 13px 13px 0}.errorband{background:var(--do-nhat);border-left:3px solid var(--do);padding:8px;border-radius:0 7px 7px 0;margin:8px 0;color:#9f2424}.toast{position:fixed;right:24px;bottom:24px;background:var(--t900);color:#fff;border-radius:9px;padding:10px 16px;z-index:100;animation:toast 2.2s var(--nhip) both}@keyframes toast{0%{opacity:0;transform:translateY(8px)}12%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}.filtertoggle{display:none}
.image-modal{background:rgba(3,20,24,.94)}.imagebox{width:min(920px,calc(100% - 32px));height:min(720px,calc(100% - 32px))}.imagebody{min-height:0;display:grid;place-items:center;background:#071e23;color:#fff}.image-placeholder{width:min(700px,90%);aspect-ratio:4/3;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:radial-gradient(circle at 35% 30%,var(--headvet),transparent 45%),linear-gradient(145deg,#123841,#071e23);display:grid;place-items:center;text-align:center;padding:24px}
.anim{opacity:0;transform:translateY(10px);animation:len .45s var(--nhip) backwards}@keyframes len{to{opacity:1;transform:none}}
@media(max-width:1199px) and (min-width:701px){.c-address,.c-owner{display:none}.km-bang{font-size:11.5px}.km-bang td,.km-bang th{padding-inline:4px}}
@media(max-width:700px){
header{padding:13px}.logo-badge{padding:5px 8px;border-radius:10px}.logo-badge img{height:19px}.htitle h1{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.htitle .sub{display:none}.hwrap{gap:6px;flex-wrap:nowrap}.hme{display:contents}.tk-txt{display:none}.chip-me{padding:2px;border-radius:50%}.tk-ava{width:30px;height:30px;font-size:11.5px}.nut-header{width:34px;height:34px;padding:6px}.nut-header span{display:none}
.thanh,.twrap{display:contents}.chips{position:sticky;top:0;z-index:30;margin:8px 12px 0;padding:8px 8px 12px;border-radius:16px;background:rgba(246,249,250,.9);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);box-shadow:0 6px 18px -10px rgba(6,43,51,.45)}.chip{padding:6px 10px 6px 6px}.thanh-loc{margin:8px 12px 0}.gd-day{display:grid!important;grid-template-columns:34px minmax(0,1fr) 34px auto;gap:5px;width:100%}.gd-day strong{text-align:center;overflow:hidden;text-overflow:ellipsis}.gd-ngay-dai{display:none}.gd-ngay-ngan{display:inline}.filtertoggle{display:inline-flex;width:100%}.gd-filters{display:none;width:100%;grid-template-columns:1fr}.gd-filters.open{display:grid}.gd-filters select,.gd-filters input{width:100%}.thanh-loc .day{display:none}.nut-excel{width:100%;order:4}
main{padding:2px 12px 40px}.khoang{border-radius:16px;padding:9px}.gd-kpi-hang{display:none}.kpisummary{display:flex;align-items:center;justify-content:space-between;gap:8px}.gd-kpi-hang.open{display:grid;grid-template-columns:1fr 1fr}.gd-kpi-hang.open .so-lon:last-child{grid-column:1/-1}.so-lon .gt{font-size:18px}.card,.the{padding:14px;border-radius:14px}.cuon{display:none}.gd-cards{display:block}.mobilecard{--mk:var(--t600);background:#fff;border:1px solid var(--vien);border-left:3px solid var(--mk);border-radius:12px;padding:12px;margin-bottom:8px}.mobilecard.flagged{box-shadow:inset 3px 0 var(--do)}.mtop,.mrow,.mactions{display:flex;justify-content:space-between;align-items:center;gap:8px}.maddress{margin:8px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muc2)}.mactions{margin-top:9px;flex-wrap:wrap}.mactions .progress{flex:1;min-width:110px}.actiongroup{display:flex;gap:6px;margin-left:auto}.actiongroup .gd-btn{width:36px;height:36px;padding:0}.actiongroup .gd-btn span{display:none}
.gd-drawer{width:100%}.darkhead{padding:12px}.info{grid-template-columns:1fr}.info>div,.wide{grid-column:1/-1}.moneygrid{grid-template-columns:1fr 1fr}.money:nth-child(2){border-right:0}.money:nth-child(-n+2){border-bottom:1px solid var(--vien)}.gd-modal,.gd-modal.small{inset:0;width:100%;height:100%;max-height:none;border-radius:0;transform:none;animation:none}.formgrid{grid-template-columns:1fr;gap:16px}.actions{position:sticky;bottom:0;z-index:3}.actions .action-main,.actions .nut-excel{flex:1}.imagebox{height:100%}.toast{left:12px;right:12px;bottom:12px;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.anim{opacity:1;transform:none}html{scroll-behavior:auto}}
.km-bang td.fee{white-space:normal;overflow-wrap:anywhere}
.km-bang th.c-co{padding-inline:4px;text-overflow:clip}.km-bang td.c-ship{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:12px}.detail-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(255,255,255,.62);font-size:11px;line-height:1.25;text-align:center;min-width:0}.detail-step::after{content:"";position:absolute;z-index:0;top:4px;left:calc(50% + 6px);right:calc(-50% + 6px);height:2px;background:var(--noi)}.detail-step:last-child::after{display:none}.detail-step i{position:relative;z-index:1;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3)}.detail-step.on{color:#fff}.detail-step.on i{background:var(--step)}.detail-step.current i{width:12px;height:12px;margin-top:-1px;border:2px solid #fff}.detail-step span{position:relative;z-index:1;width:100%;padding-inline:2px}.detail-line{display:none}
.gd-modal>.darkhead,.gd-drawer>.darkhead{height:auto;min-height:0;padding-block:16px;flex:none}.formsection>h3{display:flex;align-items:center;gap:8px}.formsection>h3:not(:first-child){margin-top:24px}.field{margin-bottom:12px;min-height:0}.field label,.field-label{margin-bottom:4px}.error{height:16px;min-height:16px;line-height:16px;margin-top:4px;overflow:hidden}.drop{min-height:0;max-height:120px;padding:12px;margin-bottom:16px;overflow:hidden}.drop:has(.previews:not(:empty)){height:88px;max-height:88px;padding:8px;text-align:left}.drop:has(.previews:not(:empty))>b,.drop:has(.previews:not(:empty))>.minor,.drop:has(.previews:not(:empty))>label{display:none}.drop:has(.previews:not(:empty)) .previews{margin-top:0}.drop:has(.previews:not(:empty)) .uploadpic{height:72px}.drop:has(.previews:not(:empty))>.error{display:none}
@media(max-width:700px){.gd-modal>.darkhead,.gd-drawer>.darkhead{padding-block:16px}}
.lockchip{visibility:hidden}.locked .lockchip{visibility:visible}.field{margin-bottom:8px}
/* v9 22/10 — hộp Lên đơn gọn (Sếp 12:13: «nhiều khoảng trống, có chỗ chữ chèn lên nhau»): 3 cột · ô đôi · một nhãn mỗi ô ·
   dòng báo lỗi chừa sẵn 16px làm luôn khoảng cách giữa các ô (không nhảy, không hở 28px) */
.gd-modal.formhop{width:min(1180px,calc(100% - 32px))}
.formhop .mbody{padding:16px 20px}
.formgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;align-items:start}
.formsection{min-width:0}
.formsection>h3{color:var(--mk2);font-size:14px;font-weight:800;letter-spacing:-.2px;line-height:24px;margin:0 0 8px}
.formsection>h3::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--mkn),transparent)}
.formsection>h3:not(:first-child){margin-top:8px}
.field{margin:0 0 4px;min-height:0}
#previewError{margin-bottom:4px}
.field label,.field-label{height:16px;line-height:16px;margin:0 0 4px;white-space:nowrap;overflow:hidden}
.field input:not([type=checkbox]),.field select{height:36px}
.field textarea{height:56px;min-height:56px;display:block}
.error{height:16px;min-height:16px;line-height:16px;margin-top:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.row.row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.servicebox,.carrierbox,.paybox{min-height:0}
.field .lockchip{height:16px;line-height:16px;padding:0 7px;box-sizing:border-box;align-items:center;flex:none}
.pillnone{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1.5px dashed var(--vien-dam);border-radius:24px;background:#f4f7f8;color:var(--muc2);font-size:12px;font-weight:600;white-space:nowrap}
.field .checkrow{display:flex;align-items:center;gap:8px;height:36px;margin:0;padding:0 10px;border:1.5px solid var(--vien-dam);border-radius:13px;background:#fff;font-size:12.5px;font-weight:600;color:var(--muc);cursor:pointer}
.field .checkrow input{width:16px;height:16px;margin:0;padding:0;flex:none;accent-color:var(--t600)}
.drop,.drop:has(.previews:not(:empty)){--mk:var(--t600);--mk2:var(--t700);display:flex;align-items:center;gap:12px;height:68px;max-height:68px;min-height:0;padding:8px 12px;margin:0 0 12px;text-align:left;overflow:hidden}
.drop .drop-ic{flex:none;width:16px;height:16px;padding:8px}
.drop-chu{flex:1;min-width:0}
.drop-chu b{display:block;font-size:13px;line-height:18px}
.drop .minor{color:var(--muc2);line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop .error{margin-top:0;height:14px;min-height:14px;line-height:14px}
.drop .previews,.drop:has(.previews:not(:empty)) .previews{flex:none;display:flex;flex-wrap:nowrap;gap:6px;margin:0;max-width:45%;overflow-x:auto}
.drop .previews:empty{display:none}
.drop:has(.previews:not(:empty))>label{display:inline-flex}
.drop>label.gd-btn{flex:none}
.drop .upload{width:48px;flex:none}
.drop .uploadpic,.drop:has(.previews:not(:empty)) .uploadpic{width:48px;height:48px;font-size:10px}
.drop .uploadpic button{width:18px;height:18px;padding:0;font-size:11px;line-height:18px}
@media(max-width:999px){.formgrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.gd-modal.formhop{width:100%}.formhop .mbody{padding:12px 16px}.drop .minor{display:none}}
/* v10 22/10 — đối soát chéo chỉ vai qt (SPEC §13b): dòng phụ dưới ô + khối trong khung chi tiết */
.ds-line{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;line-height:16px;font-weight:700;color:var(--dm);white-space:nowrap}
.ds-line i{width:6px;height:6px;border-radius:50%;background:var(--dm);flex:none;box-shadow:0 0 0 3px var(--dn)}
.right .ds-line{justify-content:flex-end}
td .ds-line{margin-top:2px;line-height:14px}
.ds-trong{height:14px}
.eventvals>div:last-child:nth-child(odd){grid-column:1/-1}
.mds{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--vien)}
.mds .ds-line{margin-top:0}
.ds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ds-row{border:1px solid var(--vien);border-radius:12px;padding:8px 12px;min-width:0;background:#fff}
.ds-row>span{display:block;font-size:11px;font-weight:700;line-height:16px;color:var(--muc2)}
.ds-row .ds-line{font-size:12.5px;line-height:18px}
.ds-row small{display:block;margin-top:4px;font-size:11.5px;line-height:16px;color:var(--muc);overflow-wrap:anywhere}
.ds-vai{display:inline-flex;align-items:center;height:20px;margin-left:8px;padding:0 8px;border-radius:10px;background:var(--mkn);color:var(--mk2);font-size:10.5px;font-weight:700;letter-spacing:0;white-space:nowrap}
.ds-nguon{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:11px;line-height:16px;color:var(--muc2)}
@media(max-width:700px){.ds-grid{grid-template-columns:minmax(0,1fr)}}
.darkhead>:first-child{flex:1;min-width:0}.detail-step.on i{background:#fff}.detail-step.current i{width:10px;height:10px;margin-top:0;border:0;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}