:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); --co:1; --xanh:#185FA5; --xanh-dam:#0F4478; --xanh-nhat:#EAF2FA; --nen:#F1F4F8; --the:#FFFFFF; --chu:#16202B; --chu-phu:#5A6573; --vien:#D3DBE4; --vang:#8A6100; --vang-nen:#FDF4E0; --luc:#1A6E3F; --luc-nen:#E6F4EC; --do:#B42318; --do-nen:#FCEDEC; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --xanh:#4D9BE0; --xanh-dam:#9FCBF0; --xanh-nhat:#15304A; --nen:#10151B; --the:#1A222B; --chu:#E8EDF3; --chu-phu:#9AA6B4; --vien:#2D3844; --vang:#E0B354; --vang-nen:#33290F; --luc:#5FC98A; --luc-nen:#12301F; --do:#F09A92; --do-nen:#3A1A18; } } :root[data-theme="dark"]{ --xanh:#4D9BE0; --xanh-dam:#9FCBF0; --xanh-nhat:#15304A; --nen:#10151B; --the:#1A222B; --chu:#E8EDF3; --chu-phu:#9AA6B4; --vien:#2D3844; --vang:#E0B354; --vang-nen:#33290F; --luc:#5FC98A; --luc-nen:#12301F; --do:#F09A92; --do-nen:#3A1A18; } *,*::before,*::after{box-sizing:inherit} html,body{height:100%} html{scroll-padding-top:env(safe-area-inset-top,0px)} body{margin:0;background:var(--nen);color:var(--chu); font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:calc(15px * var(--co));line-height:1.45;-webkit-text-size-adjust:100%} .khung{max-width:430px;margin:0 auto;min-height:100%} .cot-trai{min-width:0} /* VÙNG 1 */ .dau{background:var(--xanh);color:#fff;padding:11px 14px 10px; padding-top:calc(11px + env(safe-area-inset-top,0px));position:sticky; top:env(safe-area-inset-top,0px);z-index:20} :root[data-theme="dark"] .dau{background:#12293E} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dau{background:#12293E}} .dau-hang{display:flex;align-items:center;gap:9px} .logo{width:31px;height:31px;border-radius:9px;background:#fff;color:#185FA5; display:grid;place-items:center;font-weight:700;font-size:calc(14px*var(--co));flex:0 0 auto} .ten-app{font-size:calc(16.5px*var(--co));font-weight:700;line-height:1.2} .dong-phu{font-size:calc(11.5px*var(--co));color:#CFE0F1} .gio{margin-left:auto;text-align:right;font-size:calc(11px*var(--co));color:#CFE0F1;line-height:1.25} .gio b{display:block;color:#fff;font-size:calc(14px*var(--co));font-weight:600} .nut-cd{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4); color:#fff;border-radius:10px;width:34px;height:34px;font-size:calc(15px*var(--co)); cursor:pointer;flex:0 0 auto;margin-left:6px} .tim{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:9px 12px;margin-top:9px} .tim input{border:none;outline:none;font:inherit;font-size:calc(14px*var(--co)); flex:1;background:transparent;color:#fff;min-width:0} .tim input::placeholder{color:#C3D8EC} .xoa{color:#C3D8EC;cursor:pointer;font-size:calc(15px*var(--co));padding:0 4px} .ngan{display:flex;gap:4px;padding:9px 8px 0;background:var(--xanh); overflow-x:auto;scrollbar-width:none} .ngan::-webkit-scrollbar{display:none} :root[data-theme="dark"] .ngan{background:#12293E} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ngan{background:#12293E}} .ngan button{flex:0 0 auto;border:none;cursor:pointer;font-family:inherit; font-size:calc(11.5px*var(--co));font-weight:600;padding:9px 11px; border-radius:10px 10px 0 0;background:rgba(255,255,255,.16); color:#DCE9F6;min-height:38px;white-space:nowrap} .ngan button.chon{background:var(--nen);color:var(--xanh-dam)} /* VÙNG 3 */ .than{padding:12px 12px 78px} .trang{display:none}.trang.hien{display:block} .nhan-nhom{font-size:calc(12px*var(--co));color:var(--chu-phu);margin:14px 2px 8px; display:flex;align-items:center;gap:8px} .nhan-nhom::after{content:"";flex:1;height:1px;background:var(--vien)} .rong{text-align:center;color:var(--chu-phu);font-size:calc(12.5px*var(--co)); padding:26px 14px;line-height:1.6} .the-loc{border:1.3px solid var(--vien);background:var(--the);color:var(--chu-phu); border-radius:999px;padding:7px 13px;font-size:calc(12.5px*var(--co));cursor:pointer; min-height:36px;display:inline-flex;align-items:center} .the-loc.bat{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam);font-weight:600} .lg-the .the-loc.ca{font-weight:700;border-width:1.6px;border-style:dashed} .lg-the .the-loc:not(.ca){font-size:calc(11.5px*var(--co));padding:5px 10px;min-height:29px} .goi-y{display:flex;flex-wrap:wrap;gap:7px} /* form khai 3.4 */ .so-ten{background:var(--xanh-nhat);border:1.3px dashed var(--xanh);border-radius:11px; padding:9px 11px;margin:6px 0 12px;font-size:calc(12.5px*var(--co));line-height:1.45} .so-ten>div{display:flex;gap:8px;align-items:baseline} .so-ten .nhan{flex:0 0 58px;color:var(--chu-phu);font-size:calc(11px*var(--co))} .so-ten .gt{flex:1;min-width:0;word-break:normal;overflow-wrap:anywhere;font-weight:600;color:var(--xanh-dam)} .so-ten .gt.cu{font-weight:400;color:var(--chu)} .so-ten .phu{display:block;padding-left:66px;color:var(--chu-phu);font-size:calc(11px*var(--co))} .cot2{display:block} .cot2 .o label{display:block;text-align:left} .so-ten,.so-ten *{text-align:left} .kh-form{border:1.3px solid var(--vien);border-radius:12px;padding:8px 12px 2px;margin-bottom:10px} .kh-form>.kh-tit{font-size:calc(10.5px*var(--co));font-weight:700;letter-spacing:.4px;text-transform:uppercase; margin:0 0 6px;opacity:.85} .kh-form.k-nd{background:var(--xanh-nhat);border-color:#C7D8EC} .kh-form.k-nd>.kh-tit{color:var(--xanh-dam)} .kh-form.k-pl{background:var(--luc-nen);border-color:#C4E3D0} .kh-form.k-pl>.kh-tit{color:var(--luc)} .kh-form.k-qh{background:var(--vang-nen);border-color:#EED9A8} .kh-form.k-qh>.kh-tit{color:var(--vang)} .kh-form.k-lt{background:var(--nen)} .kh-form.k-lt>.kh-tit{color:var(--chu-phu)} :root[data-theme="dark"] .kh-form{border-color:var(--vien)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .kh-form{border-color:var(--vien)} } .kh-form .o{margin-bottom:7px} .kh-form>.kh-tit{text-align:left} .kh-form .o label{margin-bottom:3px} .kh-form .o input,.kh-form .o select{min-height:36px;padding-top:6px;padding-bottom:6px} .kh-form .nho{min-height:34px;padding-top:5px;padding-bottom:5px} .kh-form .huong-dan{margin-top:3px} .kh-form .co-chu.nhom-gon button{min-height:30px;padding:4px 12px;font-size:calc(12px*var(--co))} .nhan-lk{float:right;font-weight:400;cursor:pointer;text-decoration:underline;color:var(--xanh-dam)} .kh-form .o textarea{min-height:44px;height:44px} .cot2 .chip-gon .the-loc{padding:4px 9px;min-height:28px;font-size:calc(11.5px*var(--co));background:var(--the)} .cot2 .chip-gon .the-loc.bat{background:var(--xanh-nhat)} .ten-ct{font-size:calc(11.5px*var(--co));color:var(--xanh-dam);font-style:italic;font-weight:500} .ten-ct::before{content:'— '} .hang-mo{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .hang-mo button{flex:0 0 auto} .day-form .xoa-nho{flex:0 0 auto;align-self:center;color:var(--do);cursor:pointer; font-size:calc(12px*var(--co));text-decoration:underline;margin-right:auto;padding:0 6px} .bc-dong{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--vien)} .bc-ten{flex:1;min-width:0;word-break:break-all;font-size:calc(12.5px*var(--co))} .bc-ten small{display:block;color:var(--chu-phu);font-size:calc(11px*var(--co))} @media (min-width:900px){ .hop-in.rong:has(.cot2){max-width:1180px;display:flex;flex-direction:column;overflow:hidden;max-height:94vh} .cot2{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:16px; flex:1;min-height:0} .cot2 .cot-a,.cot2 .cot-b{overflow:auto;min-height:0;padding-right:3px} .hop-in.rong:has(.cot2) .day-form{position:static} .day-form button{flex:0 0 200px} } .ba{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:9px} @media (max-width:560px){ .ba{grid-template-columns:1fr 1fr} .ba>.o:first-child{grid-column:1/-1} } .chip-gon{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .chip-gon .the-loc{font-size:calc(12px*var(--co));padding:5px 11px;min-height:31px} .chip-gon .ten-day{display:none;color:var(--chu-phu);font-weight:400} .chip-gon.mo .ten-day{display:inline} .chip-gon .them-n{display:none;cursor:pointer;font-size:calc(12px*var(--co));color:var(--xanh-dam); padding:5px 10px;border-radius:999px;border:1.3px dashed var(--xanh);min-height:31px; align-items:center} details.them-tt{margin:12px 0 6px;border:1.3px solid var(--vien);border-radius:12px;padding:0 12px} details.them-tt>summary{cursor:pointer;padding:11px 0;font-weight:600;color:var(--xanh-dam); font-size:calc(13px*var(--co));list-style:none} details.them-tt>summary::before{content:'▸ '} details.them-tt[open]>summary::before{content:'▾ '} details.them-tt[open]{padding-bottom:10px} .day-form{position:sticky;bottom:-1px;background:var(--the);display:flex;gap:8px; padding:10px 0 4px;margin-top:8px;border-top:1px solid var(--vien);z-index:3} .day-form button{flex:1;min-height:42px} .day-form{align-items:center} /* ---- LỊCH (tab Hôm nay) ---- */ #lich{background:var(--the);border:1.3px solid var(--vien);border-radius:14px;padding:10px 10px 8px;margin-bottom:12px} .lc-dau{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px} .lc-ten{font-size:calc(14px*var(--co));min-width:110px;text-align:center} .lc-gian{flex:1} .lc-mui,.lc-nut{border:1.3px solid var(--vien);background:var(--the);color:var(--chu);border-radius:9px; min-height:32px;padding:3px 10px;font-size:calc(12.5px*var(--co));cursor:pointer} .lc-mui{min-width:32px;padding:3px 0;font-weight:700} .lc-nut.chinh{border-color:var(--xanh);color:var(--xanh-dam);font-weight:600} .lc-nut.xau{color:var(--do);border-color:#EBC5C2} .lc-nut:disabled{opacity:.45;cursor:default} .lc-luoi{display:grid;grid-template-columns:34px repeat(7,1fr);gap:2px;border:1px solid var(--vien); border-radius:10px;padding:4px;background:var(--nen)} .lc-th{text-align:center;font-size:calc(11.5px*var(--co));color:var(--chu-phu);padding:3px 0;font-weight:600} .lc-th.tuan{font-weight:400;font-size:calc(10px*var(--co))} .lc-th.cuoi{color:var(--do)} .lc-tuan{display:flex;align-items:center;justify-content:center;font-size:calc(10.5px*var(--co));color:var(--chu-phu)} .lc-o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0; min-height:44px;border:1.3px solid transparent;border-radius:8px;background:var(--the);cursor:pointer;padding:2px 0;color:var(--chu)} .lc-o .dl{font-size:calc(14px*var(--co));font-weight:600;line-height:1.15} .lc-o .al{font-size:calc(10.5px*var(--co));color:var(--chu-phu);line-height:1.1} .lc-o.cuoi .dl,.lc-o.cuoi .al{color:var(--do)} .lc-o.ngoai{opacity:.38} .lc-o.chon{border-color:var(--xanh)} .lc-o.hom{background:var(--xanh);border-color:var(--xanh)} .lc-o.hom .dl,.lc-o.hom .al{color:#fff} .lc-o:hover{border-color:var(--xanh)} .lc-cham{position:absolute;top:4px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--xanh)} .lc-cham.cam{background:#E8910C} .lc-o.hom .lc-cham{background:#fff} .lc-chon{margin:9px 2px 6px;font-weight:600;font-size:calc(13px*var(--co))} .lc-ds{border:1px solid var(--vien);border-radius:10px;min-height:64px;padding:5px;background:var(--the)} .lc-rong{text-align:center;color:var(--chu-phu);font-size:calc(12px*var(--co));padding:18px 0} .lc-viec{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;cursor:pointer;border:1.3px solid transparent} .lc-viec:hover{background:var(--nen)} .lc-viec.chon{border-color:var(--xanh);background:var(--xanh-nhat)} .lc-viec.luuy .lc-vten{color:#B86E00;font-weight:600} .lc-viec.xong .lc-vten{text-decoration:line-through;color:var(--chu-phu);font-weight:400} .lc-viec small{margin-left:auto;color:var(--chu-phu);font-size:calc(10.5px*var(--co));white-space:nowrap} .lc-vten{flex:1;min-width:0;font-size:calc(13px*var(--co))} .lc-tick{flex:0 0 20px;height:20px;border:1.5px solid var(--vien);border-radius:6px;display:flex;align-items:center; justify-content:center;font-size:13px;color:#fff;background:var(--the)} .lc-viec.xong .lc-tick{background:var(--luc);border-color:var(--luc)} .lc-them{display:flex;gap:6px;margin-top:8px} .lc-them input{flex:1;min-width:0;min-height:36px} .lc-them select{flex:0 0 auto;min-height:36px} .lc-hanh{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:6px} .lc-sap{margin-top:8px;font-size:calc(12px*var(--co));display:flex;gap:8px;align-items:center;flex-wrap:wrap} .lc-nhan-sap{background:var(--vang-nen);color:var(--vang);border:1px solid #EED9A8;border-radius:7px;padding:2px 8px;font-weight:600} .lc-sap a{color:var(--xanh-dam);cursor:pointer;text-decoration:underline} .lc-sap span:not(.lc-nhan-sap){color:var(--chu-phu)} .lc-dsn{border-bottom:1px solid var(--vien);padding:6px 0} .lc-dsn-dau{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-bottom:3px} .lc-dsn.qua .lc-dsn-dau b{color:var(--do)} .lc-dsn.nay .lc-dsn-dau b{color:var(--xanh-dam)} .lc-dsn-v{padding:4px 6px;border-radius:7px;cursor:pointer;font-size:calc(13px*var(--co))} .lc-dsn-v:hover{background:var(--nen)} .lc-dsn-v.xong{text-decoration:line-through;color:var(--chu-phu)} .lc-dsn-v small{color:var(--chu-phu)} .lc-tn{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .lc-tn input{min-height:36px;width:130px} .lc-tn select{min-height:36px} .lc-kq{margin:8px 0 12px;font-size:calc(13.5px*var(--co))} /* ---- 3.11: thanh trên, bàn làm việc, nhật ký, chờ khai ---- */ .ban-goc{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:7px; background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);font-size:calc(11px*var(--co)); font-weight:600;cursor:pointer;line-height:1.5} .dau-hang{flex-wrap:wrap} .dau-hang .tim-bao{order:10;flex:1 1 100%} @media (min-width:900px){ .dau-hang{flex-wrap:nowrap} .dau-hang .tim-bao{order:0;flex:1 1 auto;max-width:640px;margin:0 auto 0 28px} .dau-hang .tim{margin-top:0;padding:7px 12px} .dau-hang .gio{margin-left:0} } .blv{display:grid;grid-template-columns:1fr;gap:12px} .blv-trai{display:flex;flex-direction:column;gap:12px;min-width:0} .blv-duoi{display:flex;flex-direction:column;gap:12px;min-width:0} .cxl-gon{font-size:calc(12px*var(--co));color:var(--luc);background:var(--luc-nen);border:1px solid #C4E3D0; border-radius:9px;padding:5px 10px;display:inline-block} .blv-viec .nhan-nhom:first-child,.blv-gan .nhan-nhom:first-child{margin-top:0} @media (min-width:900px){ .than.ban-lv{grid-template-columns:1fr !important} .than.ban-lv .keo-cot,.than.ban-lv .cot-phai{display:none !important} .blv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start} .blv-nk{position:sticky;top:12px} /* 3.18: cột trái — lịch đứng yên trên cùng, phần dưới cuộn riêng khi dài quá màn */ .blv-trai{height:var(--cao-so, calc(100vh - 200px));min-height:0} .blv-duoi{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:4px} } .nk-trang{position:relative;border-radius:6px 14px 14px 6px;padding:16px 18px 14px 34px; background:#F5EACB;background-image:linear-gradient(90deg,rgba(0,0,0,.035) 0,rgba(0,0,0,0) 8%,rgba(0,0,0,0) 92%,rgba(0,0,0,.05) 100%); border:1px solid #D9C79C;box-shadow:0 1px 2px rgba(80,60,20,.18),3px 4px 12px rgba(80,60,20,.12); color:#40331A;font-family:var(--font-so,"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Cambria,"Times New Roman",serif); font-weight:400;letter-spacing:.008em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} .nk-trang b,.nk-trang strong{font-weight:600} .nk-trang::before{content:'';position:absolute;top:0;bottom:0;left:22px;border-left:1.5px solid rgba(190,70,55,.45)} .nk-dau{border-bottom:1.5px solid rgba(120,90,40,.35);padding-bottom:8px;margin-bottom:10px; display:flex;gap:14px;align-items:flex-start} .nk-dau-trai{flex:0 0 auto} .oq{margin-left:auto;text-align:right;max-width:52%;border-left:2px solid rgba(120,90,40,.28);padding-left:10px} .oq-d1{font-size:calc(11px*var(--co));color:#7A6232;line-height:1.45} .oq-d1 b{color:#8A6A2E} .oq-d2{font-size:calc(12px*var(--co));font-style:italic;color:#4A3A1E;line-height:1.5;margin-top:3px} .oq-tg{color:#8A7A52;font-style:normal;font-size:calc(10.5px*var(--co))} .oq-nut{display:inline-block;border:1px solid #D4BF8E;border-radius:7px;padding:0 6px;cursor:pointer; font-style:normal;color:#7A6232;background:rgba(255,255,255,.5)} @media (max-width:899px){ .oq{max-width:100%;margin:8px 0 0;border-left:0;padding-left:0;text-align:left} .nk-dau{flex-direction:column} .oq-d1{display:none} } .thao-tac{margin-left:auto;display:inline-flex;gap:5px} .thao-tac button{border:1px solid #D4BF8E;background:rgba(255,255,255,.6);border-radius:7px;padding:2px 9px; font:inherit;font-size:calc(11px*var(--co));color:#5A4520;cursor:pointer;text-transform:none;letter-spacing:0} .thao-tac button.xau{color:var(--do);border-color:#E5C3BD} .nk-goi{margin-left:auto;font-size:calc(10.5px*var(--co));color:#9A8458;font-style:italic; text-transform:none;letter-spacing:0;font-weight:400} .nk-thu{font-size:calc(13px*var(--co));letter-spacing:.5px;text-transform:uppercase;color:#8A6A2E} .nk-hn{font-size:calc(10.5px*var(--co));background:#B8452F;color:#fff;border-radius:6px;padding:1px 6px;letter-spacing:0;text-transform:none;vertical-align:2px} .nk-ngay{font-size:calc(24px*var(--co));font-weight:700;line-height:1.2} .nk-am{font-size:calc(12.5px*var(--co));font-style:italic;color:#7A6232} .nk-muc{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 5px; font-size:calc(12px*var(--co));font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#8A6A2E} .nk-luu{font-weight:400;text-transform:none;letter-spacing:0;font-style:italic;color:#9A8458} .nk-trang .lc-ds{background:transparent;border:1px dashed rgba(120,90,40,.35)} .nk-trang .lc-viec:hover{background:rgba(255,255,255,.35)} .nk-trang .lc-viec.chon{background:rgba(255,255,255,.55);border-color:#B98B3E} .nk-trang .lc-vten{font-family:inherit;color:#3E3018} .nk-trang .lc-tick{background:#FFFBEF;border-color:#C9B07A} .nk-trang .lc-rong{color:#9A8458;font-style:italic} .nk-trang .lc-them input,.nk-trang .lc-them select{background:#FFFBEF;border-color:#D4BF8E} .nk-trang .lc-nut{background:#FFFBEF;border-color:#D4BF8E;color:#5A4520} .nk-trang .lc-nut.chinh{border-color:#B98B3E;color:#7A4E12} .nk-giay{width:100%;min-height:230px;resize:vertical;border:none;outline:none;background:transparent; font:inherit;font-size:calc(14.5px*var(--co));color:#3E3018;line-height:28px;padding:2px 2px 0; background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,rgba(120,90,40,.28) 27px,rgba(120,90,40,.28) 28px); background-attachment:local} .nk-giay::placeholder{color:#A8966C;font-style:italic} .lc-cham.nau{background:#A37A3A} /* 3.36: sổ luôn là giấy vàng dù máy để chế độ tối (anh Nhân: đổi sang nâu sậm rất khó coi — nền tối mà chữ, ô bên trong vẫn màu giấy vàng). color-scheme:light để ô gõ, thanh cuộn trong sổ cũng giữ kiểu sáng */ .nk-trang{color-scheme:light} /* 3.38: nền tối thì giấy vàng dịu lại một chút (vàng sẫm nhẹ) cho đỡ chói — vẫn là giấy vàng, không đổi sang nâu sậm */ :root[data-theme="dark"] .nk-trang{background-color:#D8CBA6;border-color:#A89868;box-shadow:0 1px 3px rgba(0,0,0,.4)} :root[data-theme="dark"] .nk-trang .lc-viec:not(.xong) .lc-tick,:root[data-theme="dark"] .nk-trang .lc-them input,:root[data-theme="dark"] .nk-trang .lc-them select,:root[data-theme="dark"] .nk-trang .lc-nut{background:#E6DBBE} :root[data-theme="dark"] .nk-trang .thao-tac button,:root[data-theme="dark"] .nk-trang .oq-nut{background:rgba(255,255,255,.28)} :root[data-theme="dark"] .nk-trang .lc-viec.chon{background:rgba(255,255,255,.3)} :root[data-theme="dark"] .nk-trang .o-go{background:#E6DBBE} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nk-trang{background-color:#D8CBA6;border-color:#A89868;box-shadow:0 1px 3px rgba(0,0,0,.4)} :root:not([data-theme="light"]) .nk-trang .lc-viec:not(.xong) .lc-tick,:root:not([data-theme="light"]) .nk-trang .lc-them input,:root:not([data-theme="light"]) .nk-trang .lc-them select,:root:not([data-theme="light"]) .nk-trang .lc-nut{background:#E6DBBE} :root:not([data-theme="light"]) .nk-trang .thao-tac button,:root:not([data-theme="light"]) .nk-trang .oq-nut{background:rgba(255,255,255,.28)} :root:not([data-theme="light"]) .nk-trang .lc-viec.chon{background:rgba(255,255,255,.3)} :root:not([data-theme="light"]) .nk-trang .o-go{background:#E6DBBE} } .dai-ck{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 12px;margin-bottom:10px;border-radius:12px; background:var(--vang-nen);border:1.3px solid #EED9A8;color:var(--vang);cursor:pointer;font-size:calc(12.5px*var(--co))} .dai-ck span{background:rgba(255,255,255,.6);border-radius:7px;padding:1px 8px} .dai-ck em{margin-left:auto;font-style:normal;font-weight:600} .ck-dau{display:flex;gap:10px;align-items:center;margin-bottom:6px;flex-wrap:wrap} .ck-nhom{margin-bottom:12px} .ck-dong{display:flex;gap:10px;align-items:center;padding:8px 10px;margin-bottom:6px;border:1px solid var(--vien); border-radius:10px;background:var(--the)} .ck-ten{flex:1;min-width:0;overflow-wrap:anywhere;font-size:calc(13px*var(--co))} .ck-ten small{display:block;color:var(--chu-phu);font-size:calc(11.5px*var(--co));margin-top:2px} .ck-thieu{color:var(--vang);font-weight:600} .ck-dong .nho{flex:0 0 auto} /* ---- 3.10: thùng rác, quét dọn, sơ đồ lưu trữ ---- */ .nut-rac{position:relative} .dem-rac{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:#E24B3B;color:#fff; font-size:10.5px;font-weight:700;line-height:17px;text-align:center;padding:0 4px} .rac-chonnhanh{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px;font-size:calc(12px*var(--co))} .rac-ds{max-height:52vh;overflow:auto;border:1px solid var(--vien);border-radius:10px;padding:2px 8px} .rac-dong{display:flex;gap:9px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--vien);cursor:pointer} .rac-dong:last-child{border-bottom:0} .rac-dong input{flex:0 0 auto;width:18px;height:18px} .rac-ten{flex:1;min-width:0;overflow-wrap:anywhere;font-size:calc(12.5px*var(--co))} .rac-ten small{display:block;color:var(--chu-phu);font-size:calc(11px*var(--co))} .rac-dong .nho{flex:0 0 auto} .rac-chan{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px} .rac-chan span{flex:1;color:var(--chu-phu);font-size:calc(12px*var(--co))} .canh-lk{background:var(--vang-nen);border:1px solid #EED9A8;border-radius:10px;padding:8px 10px;margin:8px 0; font-size:calc(12.5px*var(--co));line-height:1.55} .canh-lk small{color:var(--chu-phu)} .qd-nhom{border:1px solid var(--vien);border-radius:10px;padding:4px 8px;margin-bottom:8px} .qd-tit{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:4px 0;font-weight:600} .qd-tit small{color:var(--chu-phu);font-weight:400} .hd-nav{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 10px} .hd-nav button{border:1.3px solid var(--vien);background:var(--the);color:var(--chu);border-radius:9px;padding:5px 10px;font:inherit;font-size:calc(12px*var(--co));cursor:pointer} .hd-nav button.bat{background:var(--xanh);border-color:var(--xanh);color:#fff;font-weight:700} .hd-than{max-height:62vh;overflow:auto;font-size:calc(13px*var(--co));line-height:1.6;text-align:left} .hd-than h3{margin:12px 0 6px;font-size:calc(14px*var(--co))} .hd-than p{margin:0 0 8px} .hd-buoc{margin:0 0 8px;padding-left:22px} .hd-buoc li{margin:0 0 6px} .hd-nut{display:inline-block;border:1.3px solid var(--vien);background:var(--the);border-radius:7px;padding:0 7px;margin:0 2px;font-size:.92em;white-space:nowrap;line-height:1.6} .hd-nut.chinh{background:var(--xanh);color:#fff;border-color:var(--xanh)} .hd-nut.xau{border-color:var(--do);color:var(--do)} .hd-luong{display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;margin:6px 0 10px} .hd-o{flex:1 1 110px;border:1.5px solid var(--xanh);background:var(--xanh-nhat);border-radius:10px;padding:7px 8px;text-align:center;font-size:.92em} .hd-o small{color:var(--chu-phu)} .hd-mui{align-self:center;color:var(--xanh);font-weight:700} .hd-bang td{padding:4px 8px;border-bottom:1px solid var(--vien);vertical-align:top} .hd-moi{display:flex;flex-direction:column;gap:6px;margin:0 0 10px} .hd-moi-dong{display:flex;justify-content:space-between;gap:8px;text-align:left;border:1.3px solid var(--vien);background:var(--the);color:var(--chu);border-radius:10px;padding:8px 11px;font:inherit;cursor:pointer} .hd-moi-dong:hover{border-color:var(--xanh)} .hd-moi-dong span{color:var(--xanh);font-weight:700} @media (max-width:699px){ .hd-luong{flex-direction:column} .hd-mui{transform:rotate(90deg)} } .xl-ten{font-weight:700;font-size:12px;margin:8px 4px 4px} .xl-bang{overflow:auto;background:#fff;color:#111;border:1px solid var(--vien);border-radius:8px;max-height:70vh} .xl-bang table{border-collapse:collapse;font-size:11.5px} .xl-bang td{border:1px solid #ddd;padding:2px 6px;white-space:nowrap} .word-xem{background:#fff;color:#111;padding:16px 20px;border-radius:8px;line-height:1.55;font-size:13px} .word-xem p{margin:0 0 6px} .bhs-khung{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:12px;align-items:start} @media (max-width:699px){ .bhs-khung{grid-template-columns:1fr} } .bhs-cay{border:1px solid var(--vien);border-radius:11px;padding:8px 9px;background:var(--the);max-height:70vh;overflow:auto;font-size:calc(12px*var(--co))} .bhs-cay-dau{font-weight:700;color:var(--chu-phu);font-size:calc(11px*var(--co));text-transform:uppercase;margin:0 0 4px} .bhs-cay details{margin:0} .bhs-cay summary{list-style:none;cursor:pointer} .bhs-cay summary::-webkit-details-marker{display:none} .bhs-con{padding-left:12px;border-left:1px dashed var(--vien);margin-left:6px} .bhs-nut{display:inline-block;padding:3px 7px;border-radius:7px;cursor:pointer;margin:1px 0} .bhs-nut:hover{background:var(--xanh-nhat)} .bhs-nut.bat{background:var(--xanh);color:#fff} .bhs-nut b{font-size:.9em;background:var(--xanh-nhat);color:var(--xanh-dam);border-radius:8px;padding:0 5px} .bhs-nut.bat b{background:#fff} .bhs-nut:not(.co){color:var(--chu-phu)} .bhs-nut.xa{font-weight:700} .bhs-ds{display:flex;flex-direction:column;gap:8px} .bhs-the{border:1.3px solid var(--vien);border-radius:11px;padding:9px 12px;background:var(--the);cursor:pointer} .bhs-the:hover{border-color:var(--xanh)} .bhs-the-dau{display:flex;gap:8px;align-items:center} .bhs-the small{display:block;color:var(--chu-phu);font-size:calc(11.5px*var(--co));margin-top:2px} .bhs-trich{font-size:calc(12px*var(--co));margin-top:4px;color:var(--chu);white-space:pre-wrap} .bhs-o{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 8px} .bhs-o label{display:flex;flex-direction:column;font-size:calc(11.5px*var(--co));color:var(--chu-phu);gap:3px;min-width:140px;flex:1} .bhs-o select,.bhs-o input{font:inherit;font-size:calc(13px*var(--co));padding:6px 8px;border:1.3px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu)} .bhs-duong{font-size:calc(12px*var(--co));margin:0 0 8px;color:var(--xanh-dam)} .bhs-ghi{width:100%;font:inherit;font-size:calc(13px*var(--co));line-height:1.5;padding:9px;border:1.3px solid var(--vien);border-radius:9px;background:var(--the);color:var(--chu);box-sizing:border-box} .gan-ds{max-height:50vh;overflow:auto;border:1px solid var(--vien);border-radius:10px;padding:2px 8px;margin:0 0 8px} #ds-gc .dk-dong button,#ds-gc .dk-dau button{flex:0 0 auto !important;width:auto !important} .duong-dong{display:block;font-size:calc(11px*var(--co));color:var(--chu-phu);margin:2px 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} .duong-dong:hover{color:var(--xanh-dam);text-decoration:underline} .ka-ten .duong-dong{margin:1px 0 0} .dk-dau{display:flex;align-items:center;gap:10px;margin:0 0 8px} .dk-dau b{font-size:calc(15px*var(--co));flex:1} .dk-dau button,.dk-dau button.nho{flex:0 0 auto !important;width:auto !important} #ds-vb .rac-ds{column-count:1 !important;max-height:none;border:0;padding:0;overflow:visible} #ds-vb .dk-dong button,#ds-vb .dk-chan-ngan button,#ds-vb .dk-hang button,#ds-vb .rac-chan button,#ds-vb .qd-sua button{flex:0 0 auto !important;width:auto !important;min-height:30px;padding:4px 11px} #ds-vb .rac-chan{position:sticky;bottom:0;background:var(--nen,var(--the));padding:8px 0;z-index:3} .dk-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px} .dk-nav button{border:1.3px solid var(--vien);background:var(--the);color:var(--chu);border-radius:10px;padding:6px 12px;font:inherit;font-size:calc(12.5px*var(--co));cursor:pointer} .dk-nav button.bat{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam);font-weight:700} .dk-mo-ta{font-size:calc(12px*var(--co));color:var(--chu-phu);margin:0 0 8px;line-height:1.5} .dk-tong{font-size:calc(12.5px*var(--co));margin:0 0 8px} .dk-hang{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px} .dk-bat{display:inline-flex;gap:6px;align-items:center;font-size:calc(12px*var(--co));cursor:pointer} .dk-ngan{border:1px solid var(--vien);border-radius:11px;margin:0 0 8px;background:var(--the)} .dk-ngan summary{padding:8px 11px;cursor:pointer;font-size:calc(12.5px*var(--co))} .dk-ngan summary span{color:var(--chu-phu);font-size:calc(11.5px*var(--co))} .dk-dong{display:flex;gap:9px;align-items:center;padding:7px 11px;border-top:1px solid var(--vien)} .dk-ten{flex:1;min-width:0;cursor:pointer} .dk-ten b{display:block;font-size:calc(12.5px*var(--co));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dk-ten small{display:block;color:var(--chu-phu);font-size:calc(11px*var(--co));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dk-ten:hover b{color:var(--xanh-dam);text-decoration:underline} .dk-chan-ngan{display:flex;gap:6px;justify-content:flex-end;padding:7px 11px;border-top:1px solid var(--vien)} .dk-khoi{border:1px solid var(--vien);border-radius:11px;padding:10px 12px;margin:0 0 10px;background:var(--the)} .dk-khoi h4{margin:0 0 4px;font-size:calc(13px*var(--co))} .cn-cho{display:contents} .cn-cho button.mo-nhat{opacity:.42} .day-p .cn-cho button,.xem-day .cn-cho button{flex:0 1 auto !important;padding-left:10px !important;padding-right:10px !important;white-space:nowrap} .cn-meo{font-size:calc(11px*var(--co));color:var(--chu-phu);padding:0 14px 8px;display:flex;gap:8px;align-items:center} .cn-meo:empty{display:none} .cn-meo a{color:var(--xanh-dam);cursor:pointer;text-decoration:underline} .cn-meo b.x{margin-left:auto;cursor:pointer;font-weight:400} .ln-cai{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin:6px 0 2px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center} .ln-cai a{color:var(--xanh-dam);cursor:pointer;text-decoration:underline} .ln-cai label{display:inline-flex;gap:4px;align-items:center;cursor:pointer} .qd-sua{margin-left:auto;display:inline-flex;gap:5px;flex:0 0 auto} .qd-muc{border:1.3px solid var(--vien);border-radius:10px;padding:8px 11px;margin-top:8px;font-size:calc(12px*var(--co));display:flex;flex-wrap:wrap;gap:6px 14px} .qd-muc small{flex-basis:100%;color:var(--chu-phu)} #qd-ds{max-height:56vh;overflow:auto} details.vung-nguy{margin-top:16px;border:1.3px dashed #E2A39C;border-radius:10px;padding:0 10px} details.vung-nguy>summary{cursor:pointer;padding:9px 0;color:var(--do);font-weight:600} .dt-dong{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0;font-size:calc(13px*var(--co))} .dt-o{display:inline-flex;gap:4px;align-items:center;margin-right:8px} .dt-kq{margin:10px 0;padding:8px 10px;background:var(--nen);border-radius:9px;font-size:calc(13px*var(--co))} .ban-app{font-size:calc(12px*var(--co));color:var(--chu-phu);margin-bottom:8px} .ban-app.nho-gon{margin:14px 6px 4px;line-height:1.5;font-size:calc(11px*var(--co))} .so-do{border:1px solid var(--vien);border-radius:14px;padding:12px;margin:6px 0 16px;background:var(--nen)} .sd-tam{text-align:center;font-weight:700;font-size:calc(15px*var(--co));margin-bottom:10px} .sd-tam small{display:block;font-weight:400;color:var(--chu-phu);font-size:calc(11.5px*var(--co))} .sd-ba{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media (max-width:760px){ .sd-ba{grid-template-columns:1fr} } .sd-nhanh{border-radius:12px;padding:8px;border:1.3px solid var(--vien);background:var(--the)} .sd-nhanh.sd-may{border-color:#C7D8EC} .sd-nhanh.sd-drive{border-color:#C4E3D0} .sd-nhanh.sd-xoa{border-color:#EED9A8} .sd-nut{font-size:calc(12px*var(--co));line-height:1.5;padding:6px 8px;border-radius:8px;background:var(--nen);margin-top:6px; position:relative;margin-left:14px} .sd-nut::before{content:'';position:absolute;left:-10px;top:14px;width:8px;border-top:1.5px solid var(--vien)} .sd-nut.sd-goc{margin-left:0;font-weight:700;font-size:calc(13px*var(--co));margin-top:0} .sd-nut.sd-goc::before{display:none} .sd-nhanh.sd-may .sd-nut.sd-goc{background:var(--xanh-nhat);color:var(--xanh-dam)} .sd-nhanh.sd-drive .sd-nut.sd-goc{background:var(--luc-nen);color:var(--luc)} .sd-nhanh.sd-xoa .sd-nut.sd-goc{background:var(--vang-nen);color:var(--vang)} .sd-con{border-left:1.5px solid var(--vien);margin-left:4px} .sd-nut.sd-nhat{opacity:.75} .so-do,.so-do *{text-align:left} .sd-tam,.sd-tam *{text-align:center} .sd-nhanh{color:var(--chu)} .rac-ds,.rac-ds *,.rac-chan,.qd-nhom,.qd-nhom *{text-align:left} .rac-chonnhanh button,.rac-chan button,.rac-dong .nho{flex:0 0 auto;min-height:32px;padding:4px 12px} .hop-in .rac-ds + .rac-chan{justify-content:flex-end} /* 3.11: ô lưới bàn làm việc được co theo màn (thiếu min-width:0 thì tràn ngang trên iPhone) */ .blv>*{min-width:0} .lc-luoi{grid-template-columns:30px repeat(7,minmax(0,1fr))} .lc-dau{min-width:0} .ck-dau{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .ck-dau>button{flex:0 0 auto} .lc-o.chay .al{color:#B8860B;font-weight:700} .lc-o.chay .al::after{content:'·';margin-left:1px} .lc-o.hom.chay .al{color:#FFE2A0} .lc-o.le .dl{color:#B8860B} .lc-o.hom.le .dl{color:#fff} .lc-nhan-am{display:block;font-weight:400;font-size:calc(11.5px*var(--co));color:#B8860B;margin-top:2px} .lc-chay-nho{color:#B8860B;margin-left:auto} @media (min-width:900px){ .blv{grid-template-columns:minmax(0,38fr) minmax(0,62fr)} #lich .lc-o{min-height:34px;padding:1px 0} #lich .lc-o .dl{font-size:calc(13px*var(--co))} #lich .lc-o .al{font-size:calc(9.5px*var(--co))} #lich .lc-luoi{gap:1px;padding:3px} #lich .lc-th{padding:1px 0;font-size:calc(11px*var(--co))} #lich .lc-ten{font-size:calc(13px*var(--co));min-width:96px} #lich .lc-nut,#lich .lc-mui{min-height:28px;padding:2px 8px;font-size:calc(11.5px*var(--co))} } /* mẩu ghi chú (3.12) */ .nt-che{margin-left:8px;border:1.3px solid var(--vien);background:var(--the);border-radius:8px;padding:2px 9px; font-size:calc(11.5px*var(--co));cursor:pointer;color:var(--chu)} .nt-them-hang{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 8px} .nt-them{width:26px;height:26px;border-radius:8px;border:1.3px solid rgba(0,0,0,.18);cursor:pointer;font-weight:700;color:#7a5b12} .nt-goi{font-size:calc(11px*var(--co));color:var(--chu-phu)} .nt-luoi{display:grid;grid-template-columns:1fr;gap:8px} @media (min-width:700px){ .nt-luoi{grid-template-columns:1fr 1fr} } @media (min-width:1250px){ .nt-luoi{grid-template-columns:1fr 1fr 1fr} } .nt-o{border:1.3px solid rgba(0,0,0,.14);border-radius:10px;padding:5px 7px 7px;box-shadow:0 1px 3px rgba(0,0,0,.09)} .nt-o.ghim{box-shadow:0 2px 8px rgba(0,0,0,.16)} .nt-o textarea{width:100%;border:0;background:transparent;resize:vertical;min-height:70px;outline:none; font-size:calc(12.5px*var(--co));line-height:1.55;color:#3a3016;font-family:inherit} .nt-dau{display:flex;align-items:center;gap:4px;margin-bottom:3px} .nt-ngay{font-size:calc(10.5px*var(--co));color:#7a5b12;font-weight:700;margin-right:4px} .nt-mau{display:flex;gap:3px;margin-right:auto} .nt-cham{width:12px;height:12px;border-radius:50%;border:1.3px solid rgba(0,0,0,.25);cursor:pointer;display:inline-block} .nt-cham.chon{outline:2px solid rgba(0,0,0,.35);outline-offset:1px} .nt-luu{font-size:calc(10px*var(--co));color:#8a7a52;margin-right:3px} .nt-nut{border:0;background:transparent;cursor:pointer;font-size:12px;opacity:.6;padding:1px 3px;border-radius:6px} .nt-nut:hover{opacity:1;background:rgba(0,0,0,.07)} .nt-nut.bat{opacity:1} .nt-nut.xau{color:#B42318} .nt-vang,.nt-cham.nt-vang{background:#FBF3DC} .nt-do,.nt-cham.nt-do{background:#FADCD7} .nt-cam,.nt-cham.nt-cam{background:#FBE7C6} .nt-xanh,.nt-cham.nt-xanh{background:#DCEBDD} .nt-trang,.nt-cham.nt-trang{background:#FFFDF5} .nt-ghim-hang{margin:6px 0 10px;padding:6px 8px;border:1.3px dashed #E0C98A;border-radius:11px;background:rgba(255,255,255,.45)} .nt-ghim-nhan{font-size:calc(10.5px*var(--co));font-weight:700;color:#8a6b12;margin-bottom:5px;letter-spacing:.3px} .nt-khac{margin-top:7px;font-size:calc(11.5px*var(--co));color:#6b5a2a} .nt-khac a{color:var(--xanh-dam);cursor:pointer;text-decoration:underline} /* 3.12 — máy bàn: dàn 2 cột cho danh sách dài trong hộp; iPhone: vuốt một mạch */ @media (min-width:900px){ .rac-ds{column-count:2;column-gap:18px;max-height:46vh} .rac-ds .rac-dong{break-inside:avoid;page-break-inside:avoid} #qd-ds .qd-nhom{break-inside:avoid} #qd-ds{column-count:2;column-gap:18px;max-height:52vh} .dt-2cot{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} } @media (max-width:899px){ .rac-ds,#qd-ds,.cd-noi{max-height:none;overflow:visible} .hop-in{max-height:92vh;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .hop-in .day-form,.hop-in .rac-chan{position:sticky;bottom:0;background:var(--the);padding-bottom:6px;z-index:4} } /* 3.13: cột trái (lịch) đứng yên, cột phải (sổ ghi chú) cuộn riêng */ @media (min-width:900px){ .blv{align-items:start} .blv-lich{position:sticky;top:8px} .blv-nk{min-height:0} .blv-nk .nk-trang{height:var(--cao-so, calc(100vh - 200px));max-height:var(--cao-so, calc(100vh - 200px));display:flex;flex-direction:column} .blv-nk .nk-than{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:4px} .blv-nk .nt-luoi{align-content:start} } .nt-doi{margin-left:auto;display:inline-flex;gap:4px;background:rgba(0,0,0,.05);border-radius:9px;padding:2px} .nt-che{border:0;background:transparent;border-radius:7px;padding:3px 9px;font-size:calc(11.5px*var(--co)); cursor:pointer;color:#6b5a2a;opacity:.7} .nt-che.bat{background:#fff;color:#3a3016;font-weight:700;opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.15)} .nk-muc{display:flex;align-items:center;gap:6px} .tgc-dong{display:flex;gap:8px;align-items:baseline;padding:6px 9px;border-radius:9px;margin-bottom:5px;cursor:pointer; border:1px solid rgba(0,0,0,.12);font-size:calc(12.5px*var(--co))} .tgc-dong:hover{filter:brightness(.97)} .tgc-ngay{font-weight:700;color:#6b5a2a;flex:0 0 auto} .tgc-chu{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3a3016} .tgc-dong small{color:var(--chu-phu);flex:0 0 auto} .mau-json{display:block;background:var(--nen);border:1px solid var(--vien);border-radius:9px;padding:9px 11px; margin:6px 0;font-family:Consolas,"Courier New",monospace;font-size:calc(11.5px*var(--co));line-height:1.55;color:var(--xanh-dam)} /* ---- 3.18: sổ gạch dòng · nhãn Anh–Việt · chip xanh lá ---- */ .nk-viet{font-weight:400;text-transform:none;letter-spacing:0;font-style:italic; font-size:calc(11px*var(--co));color:#8A7A52;margin-left:7px} .nk-muc{color:#2E2410} /* chữ nhãn đậm màu hơn */ .nk-thu,.nk-ngay{color:#2E2410} .nk-am{color:#6B5730} .nk-tot{margin-top:4px;font-size:calc(11.5px*var(--co));color:#7A6232;cursor:pointer;display:inline-block;border-bottom:0} .nk-tot:hover{color:#5A4520;background:rgba(255,255,255,.45);border-radius:6px} .nk-tot.hd{color:#1A6E3F} .nk-tot .nk-gio{color:#8A7A52} .nk-nhac{display:flex;align-items:center;gap:9px;background:var(--luc-nen);border:1px solid #BFE0CB; border-radius:10px;padding:6px 10px;margin-bottom:8px;font-size:calc(12.5px*var(--co));color:var(--luc)} .nk-nhac .nho{border-color:#9FD0B3;color:var(--luc);background:#fff} .dong-ds{display:flex;flex-direction:column;gap:4px} .dong-o{display:flex;align-items:flex-start;gap:8px;border:1px solid rgba(0,0,0,.12);border-radius:9px; padding:5px 8px;background:rgba(255,255,255,.55)} .dong-o.nt-do{background:#FADCD7}.dong-o.nt-cam{background:#FBE7C6} .dong-o.nt-xanh{background:#DCEBDD}.dong-o.nt-vang{background:#FBF3DC} .dong-tick{flex:0 0 auto;width:19px;height:19px;border:1.5px solid #C9B07A;border-radius:6px;background:#FFFBEF; display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;cursor:pointer;margin-top:1px} .dong-tick.trong{border-style:dashed;color:#B5A075;background:transparent;cursor:default} .dong-o.xong .dong-tick{background:var(--luc);border-color:var(--luc)} .dong-chu{flex:1;min-width:0;border:0;background:transparent;resize:none;overflow:hidden;outline:none; font:inherit;font-size:calc(13px*var(--co));line-height:1.5;color:#3A2E14;padding:1px 0} .dong-o.xong .dong-chu{text-decoration:line-through;color:#8A7A52} .dong-gio{flex:0 0 auto;font-size:calc(10.5px*var(--co));color:#9A8458;margin-top:2px} .dong-menu{flex:0 0 auto;cursor:pointer;color:#8A7A52;padding:0 3px;font-size:15px;line-height:1} .dong-menu:hover{color:#3A2E14} .dong-moi{display:flex;align-items:center;gap:8px;border:1.3px dashed #D4BF8E;border-radius:9px; padding:5px 8px;margin-top:6px;background:rgba(255,255,255,.4)} .dong-moi input{flex:1;border:0;background:transparent;outline:none;font:inherit; font-size:calc(13px*var(--co));color:#3A2E14} .dong-dem{margin-top:6px;font-size:calc(11px*var(--co));color:#8A7A52;text-align:right} .nt-phong{margin-left:6px} .nt-phong .nt-che{padding:3px 8px;font-size:calc(13px*var(--co));line-height:1} .tot-o{border:1px solid var(--vien);border-radius:10px;padding:8px 10px;font-size:calc(12.5px*var(--co));line-height:1.55} .tot-o.hd{background:var(--luc-nen);border-color:#BFE0CB} .tot-gio{display:flex;flex-wrap:wrap;gap:6px} .tot-gio span{border:1px solid var(--vien);border-radius:9px;padding:4px 9px;font-size:calc(12px*var(--co));background:var(--the)} .tot-gio b{color:var(--xanh-dam);margin-right:5px} /* chip thông báo dạng xanh lá */ .chip.luc,.chip-bao{background:var(--luc-nen);color:var(--luc)} /* 3.19 — thao tác trực quan trên dòng, chọn nhiều, ô gõ đáy sổ, danh sách phông */ .dong-o{position:relative} .dong-thaotac{display:flex;align-items:center;gap:3px;opacity:0;transition:opacity .12s;flex:0 0 auto} .dong-o:hover .dong-thaotac,.dong-o:focus-within .dong-thaotac,.dong-o.dang-chon .dong-thaotac{opacity:1} @media (max-width:899px){ .dong-thaotac{opacity:.85} } .dcham{width:12px;height:12px;border-radius:50%;border:1.2px solid rgba(0,0,0,.28);display:inline-block;cursor:pointer} .dcham.bat{outline:2px solid rgba(0,0,0,.4);outline-offset:1px} .dong-thaotac button{border:0;background:transparent;cursor:pointer;font-size:12.5px;opacity:.7;padding:1px 3px;border-radius:6px;color:#5A4520} .dong-thaotac button:hover{opacity:1;background:rgba(0,0,0,.08)} .dong-thaotac button.xau{color:var(--do)} .dong-chon{flex:0 0 auto;width:17px;height:17px;border:1.3px solid #C3AE79;border-radius:5px;background:rgba(255,255,255,.6); cursor:pointer;font-size:12px;line-height:15px;text-align:center;color:var(--luc);font-weight:700} .dong-chon.bat{background:var(--luc-nen);border-color:var(--luc)} .dong-o.dang-chon{background:var(--luc-nen) !important;outline:1.5px solid #9CC9AE} .dong-o.xong .dong-chu{color:#6E8A76} .dong-nhom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:6px 10px;border-radius:10px; background:var(--luc-nen);border:1px solid #BFE0CC;font-size:calc(12.5px*var(--co));color:#1A5C36} .dn-mau{display:flex;gap:5px;margin-left:4px} .dong-nhom .nho{flex:0 0 auto;min-height:30px;padding:3px 12px} .dong-nhom b{margin:0 2px} .dong-dem{display:flex;align-items:center;gap:10px} .dong-dem .ht{margin-left:auto} .sch-gon{font-size:calc(11.5px*var(--co));color:#8A7A52;font-style:italic;padding:2px 0} .o-go{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 10px;border-radius:12px; background:rgba(255,255,255,.72);border:1.4px solid #D4BF8E;box-shadow:0 -1px 6px rgba(120,90,40,.08)} .o-go .og-but{color:#9A8458;flex:0 0 auto} .o-go input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:calc(13.5px*var(--co));color:#40331A} .o-go .og-them{flex:0 0 auto;background:var(--xanh);color:#fff;border:0;border-radius:9px;padding:5px 13px; font-size:calc(12px*var(--co));font-weight:600;cursor:pointer;font-family:'Segoe UI',system-ui,sans-serif} /* 3.52 — ảnh / file đính kèm ở tab Hôm nay */ .o-go .og-cam{flex:0 0 auto;border:0;background:transparent;cursor:pointer;font-size:18px;line-height:1;padding:2px 4px;border-radius:8px} .o-go .og-cam:hover{background:rgba(0,0,0,.07)} .nk-dinh{display:flex;flex-wrap:wrap;gap:6px;margin:3px 0 4px 27px} .nt-o .nk-dinh{margin:4px 0 0} .nk-anh{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;cursor:zoom-in; background:#EFE6CC;border:1px solid rgba(0,0,0,.14);flex:0 0 auto} .nk-anh img{width:100%;height:100%;object-fit:cover;display:block} .nk-anh.mat::after{content:'☁';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9A8458;font-size:20px} .nk-tep{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 8px;border-radius:8px;cursor:pointer; background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.14);font-size:calc(12px*var(--co));color:#3A2E14} .nk-tep span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px} .nk-tep small{color:#8A7A52} .nk-go{border:0;background:rgba(0,0,0,.45);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;line-height:18px; padding:0;cursor:pointer;flex:0 0 auto} .nk-anh .nk-go{position:absolute;top:3px;right:3px;opacity:0;transition:opacity .12s} .nk-tep .nk-go{background:transparent;color:#9A8458;opacity:0} .nk-anh:hover .nk-go,.nk-tep:hover .nk-go{opacity:1} @media (max-width:899px){ .nk-anh .nk-go,.nk-tep .nk-go{opacity:.9} } .nk-cam-nho{font-size:14px;width:auto;padding:0 8px} .nk-chon3{display:grid;gap:8px;margin:10px 0} .nk-chon3 .nho{min-height:42px;font-size:14px} .nk-tich{display:flex;align-items:center;gap:8px;margin:6px 0 10px;font-size:13px} .nk-lb{position:relative;display:flex;align-items:center;justify-content:center;background:#111;border-radius:10px; min-height:50vh;max-height:72vh;overflow:hidden;touch-action:pan-y} .nk-lb img{max-width:100%;max-height:72vh;object-fit:contain;display:block} .nk-lb-nut{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.18);color:#fff; font-size:28px;width:40px;height:56px;border-radius:8px;cursor:pointer} .nk-lb-nut.trai{left:6px}.nk-lb-nut.phai{right:6px} @media (max-width:899px){ .o-go .og-cam{font-size:24px;padding:4px 8px} } /* 3.52b: bỏ nút nổi (dễ chạm nhầm) — nút 📷 ở ô gõ to hơn */ /* 3.53 — dòng To-do 1 dòng; chạm / rê vào mới hiện chấm màu (dòng 2), các nút khác hiện sẵn */ .dong-o{flex-wrap:wrap;row-gap:3px} .dong-o .dong-thaotac{opacity:1} .dong-mau{display:none;order:9;flex:1 1 100%;align-items:center;gap:7px;padding:2px 0 1px 27px} .dong-mau small{color:#9A8458;font-size:calc(10.5px*var(--co))} .dong-o:focus-within .dong-mau,.dong-o.dang-chon .dong-mau{display:flex} @media (hover:hover){ .dong-o:hover .dong-mau{display:flex} } .dong-o:not(:focus-within) .dong-chu{white-space:nowrap;text-overflow:ellipsis} @media (max-width:899px){ .dong-o:not(:focus-within) .dong-gio{display:none} } /* 3.53 — Cần xử lý / Vừa xem gần đây: một dòng, bấm mở ra */ .gon-dong{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:8px 0 6px;border:1px solid var(--vien);border-radius:10px; background:var(--the);cursor:pointer;font-size:calc(12.5px*var(--co));min-width:0} .gon-dong.tat{cursor:default;opacity:.75} .gon-dong b{flex:0 0 auto;font-weight:600;color:var(--chu)} .gon-ds{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0} .gon-ds::-webkit-scrollbar{display:none} .gon-chip{flex:0 0 auto;white-space:nowrap;padding:2px 8px;border-radius:7px;background:var(--nen);color:var(--chu-phu);font-size:calc(11.5px*var(--co))} .gon-chip.gap{background:var(--vang-nen);color:var(--vang)} .gon-phu{color:var(--chu-phu);font-size:calc(11.5px*var(--co));white-space:nowrap} .gon-mui{flex:0 0 auto;color:var(--chu-phu)} .nk-nhac{padding:3px 4px 3px 10px !important;margin-bottom:6px !important;gap:6px !important} .nk-nhac span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nk-nhac .nho{flex:0 0 auto;min-height:26px !important;padding:2px 10px !important;font-size:calc(11.5px*var(--co)) !important;white-space:nowrap} /* 3.53 — số đếm của tab cùng dòng nút Thêm file */ .dem-tab{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-size:calc(11.5px*var(--co));color:var(--chu-phu);padding:0 4px} .dem-tab b{color:var(--chu)} /* 3.53 — thanh đáy: một dòng thấp, chỉ chip hệ thống, nhiều thì vuốt ngang */ .day{padding-top:3px !important;padding-bottom:calc(3px + env(safe-area-inset-bottom,0px)) !important;min-height:0} .day .so-lieu{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;flex:0 1 auto;white-space:nowrap} .tac-gia{color:#2e8b57;font-size:calc(10.5px*var(--co));font-weight:600;white-space:nowrap}.day .tac-gia{flex:1 1 auto;margin-left:8px} /* 3.104: tên tác giả (anh chốt — chỉ tên, không số điện thoại) */ .day .so-lieu::-webkit-scrollbar{display:none} .day .so-lieu .chip{margin:0;flex:0 0 auto;padding:3px 8px} .chip.an{display:none !important} .bn-thanh{height:10px;border-radius:6px;background:var(--nen);overflow:hidden;margin:6px 0 8px} .bn-thanh i{display:block;height:100%} .bn-thanh i.luc{background:var(--luc)}.bn-thanh i.vang{background:#D9A21B}.bn-thanh i.do{background:var(--do)} .bn-bang{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 10px} .bn-bang td{padding:5px 4px;border-bottom:1px solid var(--vien)} .bn-bang td:last-child{text-align:right;white-space:nowrap;font-weight:600} .bn-canh{background:var(--vang-nen);color:var(--vang);border-radius:9px;padding:8px 10px;margin:6px 0;font-size:13px} .bn-canh .nho{margin-left:6px} /* 3.54 — bên phải dòng "+ Thêm file": chip chờ khai + số đếm; nút tab Văn bản cùng cỡ các tab khác */ .dau-phai{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;align-self:center} .dau-phai .dem-tab{margin-left:0} .chip-ck{border:1.3px solid #E8D29A !important;background:var(--vang-nen) !important;color:var(--vang) !important;border-radius:999px !important; padding:3px 11px !important;min-height:28px !important;font-weight:600;font-size:calc(12px*var(--co)) !important;cursor:pointer;white-space:nowrap} .chip-ck:hover{filter:brightness(.97)} #nam-vb .dau-tab button{min-height:var(--nut-cao);line-height:1.2;padding:5px 13px;font-weight:600;color:var(--chu)} #nam-vb .dau-tab .nut-them{padding:5px 13px} @media (max-width:899px){ .dau-phai{position:sticky;right:0;background:var(--nen);padding-left:6px;box-shadow:-8px 0 8px -6px rgba(0,0,0,.12);z-index:1} .dau-phai .dem-tab{display:none} } /* 3.55 — nút ↶ Hoàn tác kiểu Word ở dòng tiêu đề sổ */ .nk-ht{border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.7);color:#5A4520;border-radius:8px;cursor:pointer; font-size:16px;line-height:1;padding:3px 8px;margin-left:8px;min-height:26px;position:relative} .nk-ht:hover:not(:disabled){background:#fff;border-color:#C9B07A} .nk-ht:disabled{opacity:.35;cursor:default} .nk-ht sup{font-size:9.5px;font-weight:700;margin-left:1px;color:#8A6A2A} @media (max-width:899px){ .nk-muc{flex-wrap:wrap;row-gap:6px;white-space:nowrap} .nk-muc .nk-viet{white-space:nowrap} .nk-muc .nt-doi{margin-left:auto} } .ck-nut{display:flex;gap:6px;flex:0 0 auto;align-items:center} /* 3.57 — in ghép CCCD cho đủ 4 người / A4 */ .ghep-in{margin-top:10px;border-top:1px dashed var(--vien);padding-top:8px} /* 3.58 — ô tích chọn ở dòng Scan + thanh In dính trên cùng */ .o-chon{flex:0 0 auto;width:20px;height:20px;border:1.6px solid var(--vien);border-radius:5px;display:inline-flex;align-items:center; justify-content:center;cursor:pointer;background:var(--the);color:#fff;font-size:13px;font-weight:700;margin-right:6px} .o-chon:hover{border-color:var(--xanh)} .o-chon.bat{background:var(--xanh);border-color:var(--xanh)} .thanh-in{position:sticky;top:6px;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.08)} .thanh-in .in-chinh{background:var(--xanh) !important;color:#fff !important;border-color:var(--xanh) !important;font-weight:700} .ghep-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between} /* 3.61 — Scan: 2 dòng / bản, trạng thái, cách xem, cây địa bàn */ .sc-xem{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 4px} .nhom-nut{display:inline-flex;border:1px solid var(--vien);border-radius:9px;overflow:hidden} .nhom-nut button{border:0;background:var(--the);padding:4px 10px;font:inherit;font-size:calc(12px*var(--co));cursor:pointer;color:var(--chu-phu)} .nhom-nut button+button{border-left:1px solid var(--vien)} .nhom-nut button.bat{background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:700} .chip-cd{border:1px solid #E8D29A;background:var(--vang-nen);color:var(--vang);border-radius:999px;padding:3px 10px;font:inherit;font-size:calc(12px*var(--co));font-weight:600;cursor:pointer} .chip-cd.bat{background:var(--vang);color:#fff} .chip-dat{color:var(--luc);font-size:calc(12px*var(--co));font-weight:600} .sc-dem{margin-left:auto;font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .nhan-nhom .cd,.sc-cay .cd{color:var(--vang)} .sc-loc-cay{font-size:calc(12px*var(--co));margin:4px 0 6px;color:var(--chu-phu)} .sc-cay{border:1px solid var(--vien);border-radius:10px;padding:6px 8px;margin:4px 0 8px;background:var(--the);max-height:40vh;overflow:auto} .sc-cay summary{cursor:pointer;list-style:none;padding:2px 0} .sc-cay summary::-webkit-details-marker{display:none} .sc-cay summary::before{content:'▸ ';color:var(--chu-phu)} .sc-cay details[open]>summary::before{content:'▾ '} .sc-cay .c2{margin-left:14px}.sc-cay .c3{margin-left:14px}.sc-cay .c4{margin-left:22px;display:flex;flex-wrap:wrap;gap:4px;padding:2px 0 4px} .cay-nut{cursor:pointer;padding:1px 6px;border-radius:6px;font-size:calc(12.5px*var(--co))} .cay-nut:hover{background:var(--xanh-nhat)} .cay-nut.bat{background:var(--xanh);color:#fff} .cay-nut.bat small,.cay-nut.bat .cd{color:#fff} .cay-nut small{color:var(--chu-phu);margin-left:3px} .c4 .cay-nut{border:1px solid var(--vien)} .sc-d .h1{align-items:center} .sc-d .h1 .ten{flex:0 1 auto} .sc-d .sc-ngay{margin-left:auto;flex:0 0 auto;font-size:calc(11px*var(--co));color:var(--chu-phu);padding-left:8px} .sc-d .nut{margin-left:6px} .sc-d .nut button{width:28px;height:28px} .sc-tt{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;font-size:calc(11.5px*var(--co));margin-top:3px} .sc-tt .duong-dong{display:inline;margin:0;flex:0 1 auto;min-width:0} .sc-tt .tg{flex:0 0 auto} .tt-dat{color:var(--luc);font-weight:700;flex:0 0 auto} .tt-thieu{color:var(--vang);font-weight:600;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sc-sep{color:var(--chu-phu)} /* 3.61 — việc Q: danh sách gọn — nút dòng 28px, Chờ khai 2 dòng, thanh Sắp xếp một hàng */ .d2 .nut button{width:28px;height:28px} .ck-dong small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ck-duong{color:var(--chu-phu)} @media (min-width:900px){ .sap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin} .sap button{min-height:30px;padding:4px 10px;flex:0 0 auto} } .sc-d.dang-xem{outline:2px solid var(--xanh);outline-offset:-1px} /* 3.61 — hộp sửa có khung xem văn bản bên cạnh */ .hop-in.co-xem-ben{max-width:min(1360px,97vw) !important;width:97vw} @media (min-width:900px){ .hop-in.co-xem-ben{display:grid !important;grid-template-columns:minmax(380px,1fr) minmax(0,1.15fr);gap:16px;align-items:start;max-width:min(1360px,97vw) !important;overflow:hidden} .co-xem-ben .sua-trai{min-width:0;max-height:84vh;overflow:auto;padding-right:4px} .co-xem-ben .cot2{display:block !important;grid-template-columns:1fr !important;column-count:1 !important} .co-xem-ben .cot2>*{width:auto !important;max-width:none !important;margin-bottom:10px} .co-xem-ben .sua-xem{position:sticky;top:0;max-height:84vh;display:flex;flex-direction:column;background:var(--nen);border-radius:12px;padding:6px} .co-xem-ben .sua-xem .than-p{flex:1 1 auto;overflow:auto;min-height:60vh} } .co-xem-ben details.sua-xem{margin-bottom:10px;background:var(--nen);border-radius:10px;padding:6px} .co-xem-ben details.sua-xem summary{cursor:pointer;font-weight:600;padding:2px 4px} .co-xem-ben details.sua-xem .than-p{max-height:45vh;overflow:auto} /* 3.61 — dòng hướng dẫn dưới ô nhập, hiện khi bấm vào ô */ .goi-y-o{display:none;font-size:calc(11px*var(--co));color:var(--chu-phu);margin:3px 2px 0;line-height:1.35} input:focus+.goi-y-o,textarea:focus+.goi-y-o{display:block} .ds-phong{max-height:60vh;overflow:auto;display:grid;gap:9px} .mot-phong{border:1.3px solid var(--vien);border-radius:11px;padding:9px 12px;cursor:pointer;background:var(--the);text-align:left} .mot-phong:hover{border-color:var(--xanh)} .mot-phong.bat{border-color:var(--luc);background:var(--luc-nen)} .mp-ten{font-size:calc(15px*var(--co));font-weight:600} .mp-dang{font-size:calc(10.5px*var(--co));color:var(--luc);border:1px solid #BFE0CC;border-radius:6px;padding:0 6px;font-weight:400} .mp-mota{font-size:calc(12px*var(--co));color:var(--chu-phu);margin:1px 0 4px;font-family:'Segoe UI',system-ui,sans-serif} .mp-thu{font-size:calc(13px*var(--co))} .nt-che.mui{font-weight:700} /* câu trích + ngày này năm xưa: luôn Constantia, không đổi theo kiểu chữ đang chọn */ .oq,.oq *{font-family:Constantia,'Hoefler Text','Palatino Linotype',serif !important} /* 3.21 — ma trận tháng: màn chính của tab Tháng */ .bdc{border:1.3px solid var(--vien);border-radius:14px;background:var(--the);padding:9px 11px;margin-bottom:12px} .bdc-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:calc(13px*var(--co))} .bdc-dau .nho{flex:0 0 auto;min-height:28px;padding:2px 10px;font-size:calc(11.5px*var(--co))} .bdc-dau .nho.bat{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam);font-weight:600} .bdc-dau>button:last-child{margin-left:auto;width:34px;padding:2px 0;flex:0 0 34px} .bdc-dau{flex-wrap:nowrap;overflow:auto} @media (max-width:899px){ .bdc-dau{flex-wrap:wrap} } .bdc-dau > b:first-child{white-space:nowrap} /* 3.31: chữ "Bộ dữ liệu" không gãy dòng */ .bdc-ky-chon{display:flex;align-items:center;gap:5px} .bdc-ky-ten{min-width:74px;text-align:center;font-size:calc(13.5px*var(--co))} .bdc-cuon{overflow:auto;max-height:52vh} .hd-tt{display:inline-block;margin-top:2px;color:var(--chu-phu)} .hd-tt.dang{color:var(--xanh-dam)} .hd-tt.loi{color:var(--do)} /* 3.47: khai hàng loạt, gợi ý tên, Zalo máy tính */ .kl-dau{display:flex;align-items:center;justify-content:space-between;margin:4px 0 6px;font-size:calc(12.5px*var(--co))} .kl-dong{display:flex;gap:10px;align-items:center} .kl-chon{display:flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer} .kl-chon input{width:20px;height:20px} .kl-chon img{width:74px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--vien);background:var(--nen)} .kl-o{flex:1;min-width:0} .kl-o input{width:100%;box-sizing:border-box;margin-top:5px} .goi-y-moi{border-color:var(--xanh) !important;box-shadow:0 0 0 2px rgba(46,139,255,.25)} .zalo-pc{margin:2px 0 0} .zalo-pc a{color:var(--xanh-dam);text-decoration:underline;cursor:pointer} /* 3.47: dải nhắc nối Drive */ #dai-drive{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 6px);z-index:9000;background:var(--vang-nen);color:var(--vang); border:1.3px solid var(--vang);border-radius:12px;padding:8px 14px;font-size:calc(13px*var(--co));box-shadow:0 3px 12px rgba(0,0,0,.18);cursor:pointer;max-width:92vw} /* 3.48: bảng so sánh gợi ý tên */ .ss-bang{width:100%;border-collapse:collapse;font-size:calc(12.5px*var(--co));margin:6px 0} .ss-bang th,.ss-bang td{border-bottom:1px solid var(--vien);padding:6px 6px;vertical-align:top;text-align:left} .ss-bang thead th{font-size:calc(11px*var(--co));color:var(--chu-phu);font-weight:600} .ss-bang tbody th{width:22%;font-weight:600} .ss-bang th small{display:block;font-weight:400;color:var(--chu-phu);font-size:calc(10.5px*var(--co))} .ss-bang td.ss-cu{color:var(--chu-phu);width:28%;word-break:break-word} .ss-bang td input,.ss-bang td textarea{width:100%;box-sizing:border-box;font:inherit} .ss-bang tr.ss-khac td:nth-child(3) input,.ss-bang tr.ss-khac td:nth-child(3) textarea{border-color:var(--xanh);background:var(--xanh-nhat)} .ss-bang td.ss-chon{width:56px;text-align:center} .ss-chon input{width:20px;height:20px} .ss-chon small{display:block;color:var(--chu-phu)} .ss-bang tr.ss-ten td b{color:var(--luc);word-break:break-word} .ss-chu textarea{width:100%;box-sizing:border-box;font-family:ui-monospace,monospace;font-size:calc(11.5px*var(--co))} @media (max-width:699px){ .ss-bang{font-size:calc(11.5px*var(--co))} .ss-bang tbody th{width:18%} .ss-bang td.ss-cu{width:24%} } /* 3.46: đọc chữ OCR */ .ocr-hai{display:flex;gap:12px;flex-wrap:wrap} .ocr-chu{flex:1 1 280px;display:flex;flex-direction:column;gap:6px} .ocr-chu textarea{width:100%;box-sizing:border-box;font-size:calc(12px*var(--co));font-family:ui-monospace,monospace} .ocr-o{flex:1 1 240px} .ocr-chu button{align-self:flex-start;flex:0 0 auto} /* 3.46: luồng 3 bước, chạm đổi chỗ */ .buoc{display:flex;align-items:center;justify-content:center;gap:4px;margin:0 0 8px;font-size:calc(11.5px*var(--co));color:var(--chu-phu);flex-wrap:wrap} .buoc span{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px} .buoc span b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--vien);color:var(--chu);font-size:11px} .buoc span.dang{background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:700} .buoc span.dang b{background:var(--xanh);color:#fff} .buoc span.qua b{background:var(--luc);color:#fff} .buoc i{font-style:normal;opacity:.6} .buoc .b-cac{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center} .buoc span.nhay{cursor:pointer;text-decoration:underline dotted} .buoc .b-lui{margin-right:auto} .buoc .b-tiep{margin-left:auto} .buoc button,.hop-in .buoc button.nho{flex:0 0 auto !important;width:auto !important;min-height:30px;padding:3px 12px} @media (max-width:699px){ .buoc{flex-wrap:nowrap;gap:2px} .buoc span:not(.dang){font-size:0;padding:2px 3px} .buoc span:not(.dang) b{font-size:11px} .buoc i{display:none} } .hc-o.hc-chon{border-color:var(--xanh);box-shadow:0 0 0 3px rgba(46,139,255,.35)} .hc-chon-chu{color:var(--xanh-dam)} .hc-o.hc-tha{border-style:dashed;border-color:var(--xanh);background:var(--xanh-nhat)} .hc-o.hc-dangkeo{opacity:.5} .hc-o[draggable="true"]{cursor:grab} .hc-kq,.hc-o>img{cursor:pointer} .hc-cap{display:flex;align-items:center;gap:8px} .hc-cap-nut{display:inline-flex;gap:4px} .hc-cap-nut button{border:1px solid var(--vien);background:var(--the);border-radius:7px;min-width:30px;height:26px;cursor:pointer;color:var(--chu)} .hc-cap-nut button:disabled{opacity:.35;cursor:default} .hc-o .hc-lech{color:var(--do);font-weight:700} .ka-lon{background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/14px 14px;border:1px solid var(--vien);border-radius:10px;padding:6px;margin:6px 0} .ka-lon img{width:100%;display:block;max-height:52vh;object-fit:contain} .sc-xong:disabled{opacity:.5} /* 3.45: camera trong app */ #cam{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;color:#fff;touch-action:none} .cam-tren{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px} .cam-tren button{background:rgba(255,255,255,.15);border:0;color:#fff;font-size:20px;width:40px;height:40px;border-radius:20px;cursor:pointer} .cam-tren span{flex:1;font-weight:600;font-size:15px} .cam-tren select{max-width:45%;background:#222;color:#fff;border:1px solid #555;border-radius:8px;padding:5px} .cam-khung{position:relative;flex:1;min-height:0} .cam-khung video,.cam-khung canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} #cam-loe{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none} #cam-loe.loe{animation:camLoe .35s ease-out} @keyframes camLoe{from{opacity:.85}to{opacity:0}} .cam-goi{text-align:center;font-size:14px;padding:6px 12px;min-height:22px;color:#E8F7EE} .cam-duoi{display:flex;align-items:center;justify-content:space-between;padding:8px 22px calc(env(safe-area-inset-bottom) + 14px)} .cam-chup{width:72px;height:72px;border-radius:50%;border:5px solid #fff;background:rgba(255,255,255,.25);cursor:pointer} .cam-chup:active{background:#fff} .cam-xong{min-width:84px;height:44px;border-radius:22px;border:0;background:#2ECC71;color:#06351b;font-weight:700;font-size:15px;cursor:pointer} .cam-nho{width:84px;height:56px;position:relative} .cam-nho img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:2px solid #fff} .cam-nho b{position:absolute;left:44px;top:-6px;background:#2ECC71;color:#06351b;border-radius:10px;padding:0 6px;font-size:12px} .cam-kieu{display:flex;gap:6px;align-items:center;font-size:calc(12px*var(--co));color:var(--chu-phu);margin:0 0 8px;flex-wrap:wrap} .cam-kieu button{border:1.3px solid var(--vien);background:var(--the);color:var(--chu);border-radius:14px;padding:4px 11px;font:inherit;font-size:calc(12px*var(--co));cursor:pointer} .cam-kieu button.bat{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam);font-weight:600} #cam .cam-kieu-tren{justify-content:center;margin:0 0 6px;color:#ccc} #cam .cam-kieu-tren button{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)} #cam .cam-kieu-tren button.bat{background:#2ECC71;color:#06351b;border-color:#2ECC71} /* 3.44: chữ ký · ảnh khách hàng */ .ka-nut{display:flex;gap:8px} .ka-nut button{flex:1;min-height:64px;font-size:calc(14px*var(--co))} .ka-nut small{font-weight:400;opacity:.85} .ka-dong{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--vien)} .ka-ic{font-size:18px} .ka-ten{flex:1;min-width:0;font-size:calc(12.5px*var(--co));word-break:break-all} .ka-ten small{display:block;color:var(--chu-phu);font-size:calc(11px*var(--co))} .ka-dong button{border:1px solid var(--vien);background:var(--the);border-radius:8px;min-width:34px;min-height:32px;cursor:pointer} .ka-dong button.xau{color:var(--do)} .ka-khung{background:#222;border-radius:10px;display:flex;justify-content:center;padding:6px;touch-action:none} .ka-khung canvas{max-width:100%;touch-action:none;cursor:crosshair} .ka-cong{margin-top:8px;flex-wrap:wrap} .ka-cong .bat{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam);font-weight:600} .ka-muc{display:inline-flex;gap:4px} .ka-kq{display:flex;gap:10px;align-items:center;margin:10px 0} .ka-ten-o{margin:0 0 8px} .ka-ten-o input{width:100%;box-sizing:border-box;font-size:calc(15px*var(--co));padding:9px 12px;border:1.3px solid var(--vien);border-radius:10px;background:var(--the);color:var(--chu)} .ka-ten-o span{display:block;font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-top:3px} .ka-kq-anh{flex:0 0 34%;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/12px 12px;border:1px solid var(--vien);border-radius:8px;padding:4px} .ka-kq-anh img{width:100%;display:block} .ka-co{font-size:calc(13px*var(--co))} .ka-dat{color:var(--luc);font-weight:600} .ka-qua{color:var(--do);font-weight:600} /* 3.43: Scan điện thoại kiểu Lens */ .sc-dt{display:flex;gap:7px;align-items:stretch;margin:2px 0 10px} .sc-quet{flex:1 1 auto;min-height:50px;border:0;border-radius:14px;background:var(--xanh);color:#fff; font-size:calc(17px*var(--co));font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(26,95,168,.25)} .sc-che{display:flex;border:1.3px solid var(--vien);border-radius:12px;overflow:hidden;background:var(--the)} .sc-che button{border:0;background:transparent;padding:0 10px;font:inherit;font-size:calc(12.5px*var(--co));color:var(--chu-phu);cursor:pointer} .sc-che button.bat{background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:700} .sc-nho{flex:0 0 44px;border:1.3px solid var(--vien);border-radius:12px;background:var(--the);font-size:18px;position:relative;cursor:pointer;color:var(--chu)} .sc-nho.co{border-color:var(--xanh)} .sc-nho i{position:absolute;top:-5px;right:-5px;background:var(--xanh);color:#fff;font-style:normal;font-size:10px;border-radius:9px;padding:0 5px} .sc-xong-hang{flex-direction:column;align-items:stretch;position:sticky;bottom:-1px;z-index:6;background:var(--the); padding:8px 0 10px;margin:6px 0 0;box-shadow:0 -6px 10px -6px rgba(0,0,0,.18)} .sc-xong,.hang-nut .sc-xong{min-height:48px;font-size:calc(15px*var(--co));background:var(--xanh);color:#fff;border-color:var(--xanh);font-weight:700} .xp-ten input{font-size:calc(15px*var(--co))} .xp-trang{max-height:58vh;overflow:auto;background:var(--nen);border-radius:12px;padding:8px;margin:8px 0} .xp-o{margin-bottom:10px} .xp-cho{background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.12)} .xp-o canvas{width:100%;height:auto;display:block;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.18)} .xp-so{font-size:calc(11px*var(--co));color:var(--chu-phu);margin:0 0 4px} .xp-nut{display:flex;flex-direction:column;gap:8px;position:sticky;bottom:-1px;z-index:6;background:var(--the);padding:8px 0 10px;box-shadow:0 -6px 10px -6px rgba(0,0,0,.18)} .xp-trang{max-height:none} .xp-nut>.chinh{min-height:48px;font-size:calc(15px*var(--co))} /* 3.59 — khung Lưu & gửi gọn: 1 dòng đầu, vùng xem lớn, 1 hàng nút; việc ít dùng trong ⋯ */ .xp-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 6px} .xp-tit{font-size:calc(14px*var(--co));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%} .xp-dr{font-size:calc(11.5px*var(--co));color:var(--chu-phu);flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .xp-ten{display:flex;align-items:center;gap:6px;font-size:calc(11.5px*var(--co));color:var(--chu-phu);flex:1 1 260px;margin:0} .xp-ten input{flex:1 1 auto;min-width:0;padding:5px 9px;min-height:32px;font-size:calc(13px*var(--co)) !important} .xp-gon{padding:6px 0 8px !important;gap:6px !important} .xp-hang{display:flex;gap:6px;align-items:center} .xp-hang .nho{flex:1 1 0;min-height:40px;white-space:nowrap} .xp-hang .xp-them-nut{flex:0 0 44px;font-size:18px;font-weight:700} .xp-them{display:none} .xp-them.mo{display:block} .xp-them .hang-nut{flex-wrap:wrap} .xp-them .hang-nut .nho{flex:1 1 auto} .xp-hang .xp-dong{flex:0 0 auto;padding-left:14px;padding-right:14px} .ka-xem{display:flex;align-items:center;justify-content:center;min-height:40vh} .ka-xem img{max-width:100%;max-height:60vh;object-fit:contain;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.18)} @media (max-width:699px){ .xp-dau{gap:4px 8px;margin-bottom:4px} .xp-tit{max-width:none;flex:1 1 auto;min-width:0} .xp-dr{flex:1 1 100%;order:3;text-align:left;font-size:calc(11px*var(--co))} .xp-ten{flex:1 1 100%;order:2} .xp-hang{gap:4px} .xp-hang .nho{min-width:0;padding:4px 6px;font-size:calc(12px*var(--co));overflow:hidden;text-overflow:ellipsis} .xp-hang .xp-them-nut{flex:0 0 38px} } @media (max-width:699px){ #tr4 .tab-ghi-chu-scan{display:none} #tr4 .d2 .nut button:not(.xoa-dt){display:none} #tr4 .d2{padding-top:8px;padding-bottom:8px} } /* 3.43: bảng canh trái, rộng vừa nội dung — trước bị table{width:100%} kéo giãn cột tên, ô dữ liệu dồn sát lề phải */ .bdc-bang{width:auto;min-width:0} .bdc-bang .bdc-ten{width:230px;min-width:150px;max-width:230px} .bdc-chuaky{font-size:calc(10px*var(--co));color:var(--chu-phu);background:var(--nen);border:1px dashed var(--vien);border-radius:6px;padding:0 5px;white-space:nowrap} .bdc-bang .bdc-o.khong-ap{font-weight:600} .bdc-o.khong-ap .o-diem,.bdc-o.thieu .o-diem{opacity:.85} @media (max-width:699px){ .bdc-bang .bdc-ten{width:40vw;min-width:0;max-width:40vw} } .bdc-bang{border-collapse:separate;border-spacing:3px;font-size:calc(12px*var(--co))} .bdc-bang th{font-weight:600;color:var(--chu-phu);font-size:calc(11px*var(--co));padding:3px 6px;text-align:center;white-space:nowrap} .bdc-bang th.xa,.bdc-bang th.diem{cursor:pointer;border-radius:7px} .bdc-bang th.xa:hover{background:var(--xanh-nhat);color:var(--xanh-dam)} .bdc-bang th.xa.mo{background:var(--xanh-nhat);color:var(--xanh-dam)} .bdc-bang th.pgd{color:var(--xanh-dam);font-weight:700} .bdc-bang th.diem{font-weight:400;font-size:calc(10.5px*var(--co));color:#6B7A8C;background:var(--nen);border-radius:7px} .bdc-o.diem{background-clip:padding-box} .bdc-bang th.xa.mo,.bdc-bang th.diem{box-shadow:inset 0 -2px 0 var(--xanh)} .bdc-bang th.bdc-cu{color:#8A7A52;border-left:2px solid var(--vien)} .bdc-bang th.dau-cu,.bdc-o.cu.dau-cu{border-left:2px solid var(--vien)} .bdc-goc{text-align:left !important;position:sticky;left:0;background:var(--the);z-index:3} .bdc-ten{text-align:left;padding-right:10px;position:sticky;left:0;background:var(--the);z-index:2; font-size:calc(12.5px*var(--co));white-space:normal;min-width:190px;max-width:260px;line-height:1.35} .bdc-ten-o{width:100%;box-sizing:border-box} .bdc-khoi td{background:var(--nen);font-weight:700;font-size:calc(12px*var(--co));padding:5px 9px; border-radius:8px;cursor:pointer;color:var(--xanh-dam)} .bdc-khoi small{font-weight:400;color:var(--chu-phu)} .bdc-o.chua-ky{background:var(--nen);color:var(--chu-phu);border:1px dashed var(--vien);font-weight:400; font-size:calc(11px*var(--co));cursor:default} .bdc-o.xls-thuan{text-align:left;padding:0 10px;font-weight:400;font-size:calc(11.5px*var(--co))} .bdc-o.du.phien{font-size:calc(11px*var(--co))} .bdc-o{width:36px;height:28px;text-align:center;border-radius:8px;cursor:pointer;font-weight:700;position:relative} .bdc-o.du{background:var(--luc-nen);color:var(--luc);border:1px solid #BFE0CC} .bdc-o.phu{background:var(--vang-nen);color:var(--vang);border:1px solid #EED9A8} .bdc-xls .bdc-ten-xls{font-size:calc(11.5px*var(--co));color:#1A6E3F;padding-left:14px} .xls-nhan{background:var(--luc-nen);color:var(--luc);border:1px solid #BFE0CC;border-radius:6px; padding:0 5px;font-size:calc(10px*var(--co));font-weight:700} .bdc-o.xls{height:24px;font-size:calc(11px*var(--co))} .bdc-o.xls.du{background:#F0F7F2} .xls-ai{position:absolute;right:2px;bottom:0;font-size:10px;font-style:normal;cursor:pointer;opacity:.75} .xls-ai:hover{opacity:1} .bdc-sua button.bat{background:var(--luc-nen);border-color:var(--luc);color:var(--luc);font-weight:700} .bo-ds{display:grid;gap:9px;max-height:52vh;overflow:auto} .bo-o{border:1.3px solid var(--vien);border-radius:11px;padding:9px 11px} .bo-ten{font-weight:600;display:flex;gap:8px;align-items:baseline} .bo-ten small{color:var(--chu-phu);font-weight:400;font-size:calc(11px*var(--co))} .bo-mau{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0} .bo-mau span{background:var(--nen);border-radius:7px;padding:2px 8px;font-size:calc(11.5px*var(--co))} .bo-chon{max-height:38vh;overflow:auto;border:1px solid var(--vien);border-radius:10px;padding:4px 9px} .bo-chon small{margin-left:auto;color:var(--chu-phu);font-size:calc(11px*var(--co))} .sap button,.dau-tab button{transition:background .12s,border-color .12s,transform .06s} .sap button:hover,.dau-tab button:hover{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam)} .sap button:active,.dau-tab button:active{transform:translateY(1px)} .ck-dich{background:var(--xanh-nhat);color:var(--xanh-dam);border-radius:6px;padding:1px 7px;font-weight:600} .o-diem{display:inline-block;margin-left:3px;font-style:normal;font-size:calc(9.5px*var(--co)); padding:0 3px;border-radius:5px;background:#EAF2FA;color:var(--xanh-dam);border:1px solid #C7D8EC;cursor:pointer} .o-diem.du{background:var(--luc-nen);color:var(--luc);border-color:#BFE0CC} .o-diem.mot{background:var(--vang-nen);color:var(--vang);border-color:#EED9A8} .bdc-o.co-diem{white-space:nowrap} .bdc-an{color:var(--xanh-dam);cursor:pointer;text-decoration:underline} /* nút trong khung xem trước dùng chung phong cách với mọi nơi */ .cot-phai .day-p button,.xem-lon .day-p button{background:var(--the);color:var(--chu); border:1.3px solid var(--vien);border-radius:10px;font-weight:600} .cot-phai .day-p button.chinh,.xem-lon .day-p button.chinh{background:var(--the);color:var(--xanh-dam);border-color:var(--xanh)} .cot-phai button:hover,.xem-lon button:hover,.hop button:hover{background:var(--xanh-nhat); border-color:var(--xanh);color:var(--xanh-dam)} .cot-phai button,.xem-lon button,.hop button{transition:background .12s,border-color .12s,transform .06s} .cot-phai button:active,.xem-lon button:active,.hop button:active{transform:translateY(1px)} .cb-lech{background:#FCEDEC;color:var(--do);border:1px solid #E5B4AE;border-radius:8px; padding:4px 9px;margin:5px 0;font-size:calc(11.5px*var(--co))} .dang-loc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px;font-size:calc(12px*var(--co));color:var(--chu-phu)} .dl-chip{background:var(--xanh-nhat);color:var(--xanh-dam);border:1px solid #C7D8EC;border-radius:8px; padding:2px 9px;cursor:pointer} .dl-chip:hover{background:#DCE9F7} .dang-loc .nho{min-height:26px;padding:1px 10px} .sap-ngan{width:1px;height:18px;background:var(--vien);margin:0 6px} .qdt-nut{display:flex;gap:6px;align-items:center;margin:6px 0} .qdt-ds{max-height:48vh;overflow:auto;border:1px solid var(--vien);border-radius:10px;padding:2px 8px} .qdt-ds s{color:var(--chu-phu)} .qdt-ds small{display:block;color:var(--chu)} .ca-kiem{border-radius:9px;padding:6px 10px;margin:6px 0;font-size:calc(12.5px*var(--co))} .ca-kiem.dat{background:var(--luc-nen);color:var(--luc);border:1px solid #BFE0CC} .ca-kiem.canh{background:#FCEDEC;color:var(--do);border:1px solid #E5B4AE} .ca-kiem.thuong{background:var(--nen);color:var(--chu-phu);border:1px solid var(--vien)} #ca-xem{font-family:Consolas,'Courier New',monospace;font-size:calc(11.5px*var(--co));white-space:pre} .bm-cach{font-size:calc(11.5px*var(--co));color:#7A6232;background:var(--vang-nen);border-radius:8px; padding:4px 9px;margin:5px 0 0} .bm-cu{font-size:calc(11.5px*var(--co));color:var(--do);background:#FCEDEC;border-radius:8px;padding:4px 9px;margin:5px 0 0} .d2 .tg.cam{background:var(--vang-nen);color:var(--vang)} .bdc-o.mot-phan{background:#EAF2FA;color:var(--xanh-dam);border:1px solid #C7D8EC;font-size:calc(11px*var(--co))} .bdc-o.thieu{background:#FCEDEC;color:var(--do);border:1px dashed #E5B4AE} .bdc-o.pgd{outline:1px solid #C7D8EC} .bdc-o.diem{opacity:.92;width:32px} .bdc-o.cu{opacity:.75} .bdc-o:hover{filter:brightness(.95)} .bdc-o i{position:absolute;top:0;right:3px;font-size:9px;font-style:normal;opacity:.75} .bdc-sua{white-space:nowrap;text-align:center} .bdc-sua button{border:1px solid var(--vien);background:var(--the);border-radius:7px;cursor:pointer; padding:1px 6px;font-size:11.5px;margin:0 1px} .bdc-sua button:disabled{opacity:.35;cursor:default} .bdc-sua button.xau{color:var(--do);border-color:#E5C3BD} .bdc-them-hang td{padding-top:8px} .bdc-them-hang input{border:1.3px solid var(--vien);border-radius:9px;padding:5px 10px;min-width:220px; font:inherit;font-size:calc(12.5px*var(--co));margin-right:6px} .bdc-ten-o{border:1.3px solid var(--vien);border-radius:8px;padding:3px 8px;font:inherit; font-size:calc(12.5px*var(--co));width:170px;background:var(--the)} .bdc-ten-o:focus{border-color:var(--xanh);outline:none} .bdc-kieu{display:flex;gap:4px;margin-left:4px} /* 3.31: ô không tính thiếu (ngoài địa bàn quản lý / không áp dụng cấp) · cột xã ngoài địa bàn · dòng chi tiết thiếu */ .bdc-o.khong-ap{background:transparent;color:var(--chu-phu);border:1px dashed var(--vien);font-weight:400;opacity:.7} .bdc-bang th.ngoai-db{opacity:.6;font-style:italic} .bdc-thieu-ct{color:var(--do);font-size:calc(11.5px*var(--co))} /* 3.31: hàng lọc hiện sẵn */ .loc-nhanh{display:flex;flex-direction:column;gap:5px;margin:0 0 8px} .ln-hang{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .ln-nhan{font-size:calc(11px*var(--co));color:var(--chu-phu);min-width:80px;font-weight:600} .loc-nhanh .the-loc{padding:2px 10px;min-height:0;font-size:calc(11.5px*var(--co))} @media (max-width:899px){ .loc-nhanh{display:none} } .chon-xa{display:grid;gap:4px;margin:6px 0} .chon-xa small{margin-left:auto;color:var(--chu-phu);font-size:calc(11px*var(--co))} .bdc-chan{margin-top:7px;font-size:calc(12px*var(--co));display:flex;gap:8px;align-items:center;flex-wrap:wrap} .bdc-du{color:var(--luc)} .bdc-phu{color:var(--vang)} .bdc-thieu{color:var(--do)} .bdc-chu{margin-left:auto;color:var(--chu-phu);font-size:calc(11px*var(--co))} .bdc-gon{border:1.3px dashed var(--vien);border-radius:12px;padding:7px 11px;margin-bottom:12px; font-size:calc(12.5px*var(--co));color:var(--chu-phu);display:flex;gap:9px;align-items:center} /* dạng cây */ .cay-nhanh{margin:2px 0} .cay-nhanh.c2{margin-left:14px} .cay-nhanh.c3{margin-left:28px} .cay-dau{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:9px;cursor:pointer; font-size:calc(12.5px*var(--co));font-weight:600} .cay-dau:hover{background:var(--nen)} .cay-dau small{margin-left:auto;font-weight:400;color:var(--chu-phu);font-size:calc(11px*var(--co))} .cay-mui{width:12px;color:var(--chu-phu)} .cay-la{margin-left:12px} /* 3.23: dải đáy mỏng lại, tự ẩn khi cuộn xuống — lấy thêm chỗ màn hình, nhất là iPhone */ .day{padding-top:5px;padding-bottom:5px;min-height:0;transition:transform .2s} .day.an-di{transform:translateY(110%)} @media (max-width:899px){ .day{padding:4px 10px;font-size:calc(11.5px*var(--co))} } /* 3.23: nút Thêm file thống nhất + lớp phủ kéo thả */ .nut-them.keo{background:var(--luc-nen);border-color:var(--luc);color:var(--luc);border-style:dashed} .phu-keo{position:fixed;inset:0;z-index:120;background:rgba(15,68,120,.28);backdrop-filter:blur(2px); display:none;align-items:center;justify-content:center;pointer-events:none} .phu-keo.hien{display:flex} .pk-hop{background:var(--the);border:2.5px dashed var(--xanh);border-radius:18px;padding:26px 40px;text-align:center; box-shadow:0 10px 32px rgba(0,0,0,.22)} .pk-ic{font-size:40px;line-height:1} .pk-chu{margin-top:8px;font-size:calc(15px*var(--co));font-weight:600;color:var(--xanh-dam)} .pk-chu small{display:block;margin-top:3px;font-weight:400;font-size:calc(12.5px*var(--co));color:var(--chu-phu)} .chi-may{display:none} @media (min-width:760px){ .chi-may{display:inline-flex} } /* 3.14: cửa sổ hẹp (760–899px) vẫn xem được — khung xem nằm dưới danh sách, không bị mất */ @media (min-width:760px) and (max-width:899px){ .cot-phai{display:block !important;margin-top:12px;border:1.3px solid var(--vien);border-radius:14px; background:var(--the);max-height:70vh;overflow:hidden} .than.an-preview .cot-phai{display:none !important} .than .keo-cot{display:none} } /* thanh báo đang xử lý (3.12) */ .dang-lam{position:fixed;top:0;left:50%;transform:translate(-50%,-140%);z-index:95;display:flex;align-items:center;gap:9px; background:var(--xanh-dam);color:#fff;border-radius:0 0 12px 12px;padding:7px 14px;font-size:calc(12.5px*var(--co)); box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .22s;max-width:92vw} .dang-lam.hien{transform:translate(-50%,0)} .dang-lam .dl-xoay{width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%; animation:xoay .8s linear infinite;flex:0 0 auto} @keyframes xoay{to{transform:rotate(360deg)}} .dang-lam button{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px; padding:2px 10px;font-size:calc(11.5px*var(--co));cursor:pointer} /* ---- 3.8: hộp sửa gọn, vừa màn laptop 125% ---- */ .dau-sua{display:flex;gap:10px;align-items:stretch;margin:0 0 10px} .dau-sua .so-ten{flex:1;min-width:0;margin:0;padding:6px 10px} .dau-nhom{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:4px; padding:6px 10px;border:1.3px solid var(--vien);border-radius:11px;background:var(--nen)} .dau-nhom>span{font-size:calc(10.5px*var(--co));font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--chu-phu)} .dau-nhom .co-chu button{min-height:28px;padding:3px 10px;font-size:calc(12px*var(--co))} @media (max-width:700px){ .dau-sua{flex-direction:column} } .kh-form{padding:6px 11px 1px;margin-bottom:8px} .kh-form>.kh-tit{margin-bottom:4px} .kh-form .o{margin-bottom:6px} .kh-form .o label{margin-bottom:2px} .kh-form .o input,.kh-form .o select{min-height:34px;padding-top:5px;padding-bottom:5px} .kh-form .o textarea{min-height:36px;height:36px;transition:height .15s} .kh-form .o textarea:focus{height:84px} .kh-form .chip-gon{gap:5px} .cot2 .chip-gon .the-loc,.kh-form .chip-gon .the-loc{min-height:26px;padding:3px 9px} .kh-form .nho.ico{flex:0 0 auto;min-width:36px;padding-left:8px;padding-right:8px} .hop-in .day-form{padding:8px 0 2px;margin-top:6px;justify-content:flex-end} .hop-in .day-form button{flex:0 0 130px;min-height:36px} @media (max-width:560px){ .hop-in .day-form button{flex:1 1 0} } .tg.canh{background:var(--vang-nen);color:var(--vang)} .tg.chinh{background:var(--xanh);color:#fff} .d2.con{margin-left:22px;border-left:3px solid var(--xanh-nhat)} .lien-quan{margin-top:6px;font-size:calc(11.5px*var(--co));line-height:1.6;color:var(--chu-phu)} .lien-quan .lk{color:var(--xanh-dam);cursor:pointer;text-decoration:underline} .lien-quan .het{color:var(--do)} /* 3.31: chuỗi hiệu lực văn bản */ .cl-dai{margin:6px 0;padding:7px 10px;border-radius:8px;background:var(--do-nen);color:var(--do); border-left:4px solid var(--do);font-weight:600;font-size:calc(12px*var(--co))} .cl-dai .lk{color:var(--do)} .cl-cay{margin-top:6px;padding:6px 9px;border:1px solid var(--vien);border-radius:8px;font-size:calc(11.5px*var(--co));line-height:1.7} .cl-tit{font-weight:700;color:var(--chu-phu);font-size:calc(10.5px*var(--co));text-transform:uppercase;letter-spacing:.3px} .cl-dong .lk{color:var(--xanh-dam);cursor:pointer;text-decoration:underline} .cl-dong.cl-het{color:var(--chu-phu);opacity:.75} .cl-dong.cl-het .lk,.cl-dong.cl-het b{text-decoration:line-through} .cl-ngan{border-top:1px dashed var(--vien);margin:4px 0} .cl-dong.cl-dang{background:var(--xanh-nhat);border-radius:5px;padding:0 4px} .lq-ds{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0 2px} .lq-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 4px 2px 9px;border:1.3px solid var(--vien);border-radius:14px;background:var(--xanh-nhat);font-size:calc(12px*var(--co))} .lq-chip small{color:var(--chu-phu)}.lq-chip.het{text-decoration:line-through;opacity:.75} .lq-chip button{border:0;background:none;cursor:pointer;color:var(--chu-phu);font-size:13px;padding:0 4px;min-height:0 !important;min-width:0 !important;width:auto !important} .viec{background:var(--the);border:1.3px solid var(--vien);border-radius:13px; padding:12px 13px;margin-bottom:9px;display:flex;align-items:center;gap:11px;cursor:pointer} .viec.gap{border-color:var(--vang);background:var(--vang-nen)} .viec .so{width:34px;height:34px;border-radius:10px;background:var(--xanh-nhat); color:var(--xanh-dam);display:grid;place-items:center;font-weight:700; font-size:calc(15px*var(--co));flex:0 0 auto} .viec.gap .so{background:var(--the);color:var(--vang)} .viec .nd{flex:1;min-width:0} .viec .tit{font-size:calc(13.5px*var(--co));font-weight:600} .viec .p{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-top:2px} .viec .mui{color:var(--chu-phu)} .the-vb{background:var(--the);border:1.3px solid var(--vien);border-radius:14px; padding:12px 13px;margin-bottom:9px;cursor:pointer} .the-vb.goc{border-left:4px solid var(--xanh)} .the-vb.mo{opacity:.6}.the-vb.mo .tieu{text-decoration:line-through} .so-vb{font-weight:700;font-size:calc(14px*var(--co));color:var(--xanh-dam)} .ngay-vb{font-size:calc(12px*var(--co));color:var(--chu-phu);margin-left:6px;font-weight:400} .tieu{margin:5px 0 6px;font-size:calc(14px*var(--co));line-height:1.4} .tom{font-size:calc(12.5px*var(--co));color:var(--chu-phu);margin-bottom:8px;line-height:1.45} .mini{font-size:calc(11px*var(--co));padding:4px 9px;border-radius:7px; background:var(--xanh-nhat);color:var(--xanh-dam);display:inline-block} .mini.ct{background:var(--luc-nen);color:var(--luc)} .mini.phu{background:var(--vang-nen);color:var(--vang)} .noi{margin-top:9px;padding-top:9px;border-top:1px dashed var(--vien); font-size:calc(12px*var(--co));color:var(--chu-phu)} .noi b{color:var(--xanh-dam);font-weight:600} .ghi-rieng{margin-top:8px;background:var(--vang-nen);border-radius:9px;padding:8px 10px; font-size:calc(12.5px*var(--co));color:var(--vang)} mark{background:#FFE9A8;color:#5A4200;border-radius:3px;padding:0 2px} :root[data-theme="dark"] mark{background:#4A3A10;color:#F0D89A} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) mark{background:#4A3A10;color:#F0D89A}} .cuon{overflow-x:auto;background:var(--the);border:1.3px solid var(--vien);border-radius:14px; -webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;font-size:calc(12.5px*var(--co));min-width:340px} th,td{padding:11px 8px;border-bottom:1px solid var(--vien);text-align:center} th{background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:600;font-size:calc(12px*var(--co))} td:first-child,th:first-child{text-align:left;position:sticky;left:0;background:var(--the); min-width:150px;border-right:1px solid var(--vien)} th:first-child{background:var(--xanh-nhat)} tr:last-child td{border-bottom:none} .co{color:var(--luc);font-weight:700;cursor:pointer;font-size:calc(15px*var(--co))} .trong{color:var(--vien)} .moc{display:flex;align-items:center;gap:9px;margin:15px 0 9px} .moc .cham{width:9px;height:9px;border-radius:50%;background:var(--xanh);flex:0 0 auto} .moc .ngay{font-size:calc(13px*var(--co));font-weight:600;color:var(--xanh-dam)} .moc .p{font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .doc{border-left:2px solid var(--vien);margin-left:4px;padding-left:15px} .anh{background:var(--the);border:1.3px solid var(--vien);border-radius:13px; overflow:hidden;margin-bottom:10px;cursor:pointer} .anh img{width:100%;display:block;max-height:220px;object-fit:cover} .anh .duoi{padding:10px 12px} .anh .mo-ta{font-size:calc(13px*var(--co));margin-bottom:7px} .thanh-tt{background:var(--luc-nen);border:1.3px solid var(--luc);border-radius:12px; padding:11px 13px;font-size:calc(12.5px*var(--co));color:var(--luc);margin-bottom:12px} .thanh-tt.cho{background:var(--vang-nen);border-color:var(--vang);color:var(--vang)} .tha{border:2px dashed var(--vien);border-radius:14px;padding:20px 14px;text-align:center; color:var(--chu-phu);font-size:calc(12.5px*var(--co));margin-bottom:13px;cursor:pointer;line-height:1.6} .tha.keo{border-color:var(--xanh);background:var(--xanh-nhat);color:var(--xanh-dam)} .hang-file{background:var(--the);border:1.3px solid var(--vien);border-radius:13px; padding:11px 12px;margin-bottom:9px} .hang-file.hoi{border-color:var(--vang);background:var(--vang-nen)} .cu{font-size:calc(11.5px*var(--co));color:var(--chu-phu);text-decoration:line-through;word-break:break-all} .moi{font-size:calc(13px*var(--co));font-weight:600;color:var(--xanh-dam); word-break:break-all;margin:4px 0 2px} .duong{font-size:calc(11px*var(--co));color:var(--chu-phu);opacity:.85; word-break:break-all;margin-bottom:5px} .can-cu{font-size:calc(11.5px*var(--co));color:var(--chu-phu);line-height:1.5} .hang-nut{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap} .nho{flex:1;min-width:76px;border:1.3px solid var(--vien);background:var(--the);color:var(--chu); border-radius:10px;padding:9px 6px;font:inherit;font-size:calc(12.5px*var(--co)); cursor:pointer;min-height:40px} .nho.chinh{background:var(--xanh);border-color:var(--xanh);color:#fff;font-weight:600} .nho.xau{color:var(--do);border-color:var(--do)} .o{margin-bottom:12px} .o label{display:block;font-size:calc(12px*var(--co));color:var(--chu-phu);margin-bottom:5px} .o input,.o select,.o textarea{width:100%;font:inherit;font-size:calc(14px*var(--co)); padding:11px 12px;border-radius:11px;border:1.6px solid var(--vien); background:var(--the);color:var(--chu);outline:none;min-height:46px} .o textarea{min-height:70px;resize:vertical;line-height:1.5} .o input:focus,.o select:focus,.o textarea:focus{border-color:var(--xanh)} .hai{display:grid;grid-template-columns:1fr 1fr;gap:9px} .huong-dan{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-top:4px;line-height:1.5} .ten-sinh{background:var(--xanh-nhat);border:1.6px dashed var(--xanh);border-radius:12px; padding:11px 13px;margin-top:13px} .ten-sinh .nhan{font-size:calc(11.5px*var(--co));color:var(--xanh-dam);margin-bottom:4px} .ten-sinh .gia-tri{font-size:calc(13px*var(--co));font-weight:600;color:var(--xanh-dam);word-break:break-all} /* Xem trước */ .xem{position:fixed;inset:0;background:rgba(10,16,22,.6);z-index:50;display:none} .xem.hien{display:block} .xem-hop{position:absolute;left:0;right:0;bottom:0;top:34px;max-width:430px;margin:0 auto; background:var(--the);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden} .xem-dau{padding:11px 15px 10px;border-bottom:1px solid var(--vien);flex:0 0 auto; display:flex;align-items:flex-start;gap:10px} .xem-dau .tt{flex:1;min-width:0} .zoom{display:flex;gap:5px;flex:0 0 auto} .zoom button{width:34px;height:34px;border-radius:9px;border:1.3px solid var(--vien); background:var(--the);color:var(--chu);font:inherit;font-size:calc(14px*var(--co)); cursor:pointer;padding:0} .xem.to .xem-hop{top:0;bottom:0;left:0;right:0;max-width:100%;border-radius:0} .keo{width:38px;height:4px;border-radius:2px;background:var(--vien);margin:0 auto 9px} .xem-ten{font-size:calc(13.5px*var(--co));font-weight:600;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .xem-phu{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-top:2px} .xem-than{flex:1;overflow:auto;padding:12px;background:var(--nen); font-size:calc(12.5px*var(--co));color:var(--chu-phu);-webkit-overflow-scrolling:touch} .xem-than canvas,.xem-than img{width:100%;display:block;margin-bottom:9px;border-radius:8px; background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)} .xem-day{display:flex;gap:7px;padding:10px 12px;border-top:1px solid var(--vien);flex:0 0 auto; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))} .xem-day button{flex:1;border-radius:11px;padding:11px 3px;font:inherit; font-size:calc(12.5px*var(--co));font-weight:600;cursor:pointer;min-height:46px; border:1.6px solid var(--xanh);background:var(--the);color:var(--xanh-dam)} .xem-day button.chinh{background:var(--xanh);color:#fff} /* Hộp thoại */ .hop{position:fixed;inset:0;background:rgba(10,16,22,.6);z-index:60;display:none; align-items:flex-end;justify-content:center} .hop.hien{display:flex} .hop-in{background:var(--the);border-radius:18px 18px 0 0;width:100%;max-width:430px; max-height:90%;overflow:auto;padding:16px 15px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch} /* Cài đặt mở thành TRANG RIÊNG chiếm trọn màn hình */ .hop.trang{align-items:stretch} .hop.trang .hop-in{max-width:100%;max-height:100%;height:100%;border-radius:0; padding:0;display:flex;flex-direction:column} .cd-dau{position:sticky;top:0;z-index:5;background:var(--xanh);color:#fff; padding:13px 16px;padding-top:calc(13px + env(safe-area-inset-top,0px)); display:flex;align-items:center;gap:11px;flex:0 0 auto} :root[data-theme="dark"] .cd-dau{background:#12293E} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cd-dau{background:#12293E}} .cd-dau .t{flex:1;font-size:calc(16px*var(--co));font-weight:700} .cd-dau button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45); color:#fff;border-radius:10px;padding:8px 13px;font:inherit; font-size:calc(12.5px*var(--co));cursor:pointer;min-height:38px} .cd-khung{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden} .cd-ben{width:100%;max-width:100%;overflow:auto;padding:10px 8px; border-right:1px solid var(--vien);background:var(--nen);flex:0 0 auto; display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto} .cd-ben .cd-nhan{display:none} .cd-ben button{flex:0 0 auto;border:1.3px solid var(--vien);background:var(--the); color:var(--chu);border-radius:10px;padding:9px 13px;font:inherit; font-size:calc(12.5px*var(--co));cursor:pointer;white-space:nowrap;min-height:40px; display:flex;align-items:center;gap:6px} .cd-ben button.bat{border-color:var(--xanh);background:var(--xanh-nhat); color:var(--xanh-dam);font-weight:600} .cd-than{flex:1;overflow:auto;padding:14px 16px 40px;-webkit-overflow-scrolling:touch} .cd-than h3{font-size:calc(13.5px*var(--co));color:var(--xanh-dam); margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--vien)} .cd-than h3:first-child{margin-top:0} /* 3.39: Cài đặt căn trái (trước bị căn giữa theo hộp chung); ô tick không bị kéo rộng hết dòng */ .cd-khung{text-align:left} .o input[type=checkbox],.o input[type=radio]{width:auto;flex:0 0 auto;min-height:0} @media (min-width:900px){ .cd-khung{flex-direction:row} .cd-ben{width:230px;max-width:230px;flex-direction:column;flex-wrap:nowrap; overflow-x:hidden;padding:14px 10px} .cd-ben .cd-nhan{display:block;font-size:calc(11px*var(--co));color:var(--chu-phu); padding:10px 6px 5px;text-transform:uppercase;letter-spacing:.4px} .cd-ben button{width:100%} .cd-than{max-width:960px} } .hop-tit{font-size:calc(15.5px*var(--co));font-weight:700;margin-bottom:4px} .hop-phu{font-size:calc(12px*var(--co));color:var(--chu-phu);margin-bottom:14px;line-height:1.5} /* VÙNG 4 */ .day{position:fixed;left:0;right:0;bottom:0;max-width:430px;margin:0 auto; background:var(--the);border-top:1.3px solid var(--vien);z-index:30; padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px)); display:flex;align-items:center;gap:9px} .so-lieu{font-size:calc(11px*var(--co));color:var(--chu-phu);line-height:1.35;min-width:0} .so-lieu b{color:var(--chu);font-size:calc(12.5px*var(--co))} .chip{display:inline-flex;align-items:center;gap:4px;font-size:calc(10.5px*var(--co)); padding:2px 7px;border-radius:6px;background:var(--nen);color:var(--chu-phu);margin-top:2px} .chip.vang{background:var(--vang-nen);color:var(--vang)} .chip.do{background:var(--do-nen);color:var(--do)} .nut-chinh{margin-left:auto;background:var(--xanh);color:#fff;border:none;border-radius:12px; padding:12px 15px;font:inherit;font-weight:600;font-size:calc(13.5px*var(--co)); cursor:pointer;min-height:46px;flex:0 0 auto} .nut-phu{background:var(--the);color:var(--xanh-dam);border:1.6px solid var(--xanh); border-radius:12px;padding:12px 12px;font:inherit;font-weight:600; font-size:calc(12.5px*var(--co));cursor:pointer;min-height:46px;flex:0 0 auto} .co-chu{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .co-chu button{border:1.3px solid var(--vien);background:var(--the);color:var(--chu); border-radius:9px;padding:8px 14px;font:inherit;font-size:calc(12.5px*var(--co)); cursor:pointer;min-height:40px} .co-chu button.bat{border-color:var(--xanh);background:var(--xanh-nhat); color:var(--xanh-dam);font-weight:600} .ghi{margin:12px 2px 0;font-size:calc(11.5px*var(--co));color:var(--chu-phu);line-height:1.55} .bao{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:70; background:var(--chu);color:var(--the);padding:11px 17px;border-radius:12px; font-size:calc(12.5px*var(--co));max-width:340px;text-align:center;display:none; box-shadow:0 4px 16px rgba(0,0,0,.28)} .bao.hien{display:block} .bao .bao-ht{margin-left:10px;border:1px solid rgba(255,255,255,.6);background:transparent;color:inherit;border-radius:8px;padding:3px 10px;font:inherit;cursor:pointer;pointer-events:auto} .bao.hien{pointer-events:auto} .tien{height:5px;background:var(--vien);border-radius:3px;overflow:hidden;margin-top:9px} .tien i{display:block;height:100%;background:var(--xanh);width:0;transition:width .25s} /* MÀN RỘNG */ @media (min-width:900px){ .khung{max-width:100%;padding:0 12px} .than{display:grid; grid-template-columns:minmax(0,1fr) minmax(320px, var(--rong-pv, 1.25fr)); gap:18px;padding:16px 8px 78px;align-items:start} .than.an-preview{grid-template-columns:minmax(0,1fr) !important} .than.an-preview .cot-phai{display:none !important} .cot-phai{display:flex !important;flex-direction:column;position:sticky;top:96px; background:var(--the);border:1.3px solid var(--vien);border-radius:16px;overflow:hidden; /* 3.16: cao đúng phần màn còn lại (trừ thanh trên + dải đáy) để không bị ngắn */ height:calc(100vh - 178px);max-height:calc(100vh - 178px);min-height:320px} .cot-phai .dau-p{padding:12px 15px;border-bottom:1px solid var(--vien);flex:0 0 auto} .cot-phai .than-p{padding:12px;overflow:auto;flex:1 1 auto;min-height:0;background:var(--nen);-webkit-overflow-scrolling:touch} .cot-phai .than-p canvas,.cot-phai .than-p img{width:100%;display:block;margin-bottom:9px; border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)} .cot-phai .day-p{display:flex;gap:7px;padding:11px 14px;border-top:1px solid var(--vien);flex:0 0 auto} .cot-phai .day-p button{flex:1;border-radius:11px;padding:11px 3px;font:inherit; font-size:calc(12.5px*var(--co));font-weight:600;cursor:pointer; border:1.6px solid var(--xanh);background:var(--the);color:var(--xanh-dam)} .cot-phai .day-p button.chinh{background:var(--xanh);color:#fff} .day{max-width:100%;padding-left:20px;padding-right:20px} .ngan button{font-size:calc(13px*var(--co));flex:1} .dau{padding-left:20px;padding-right:20px} .tha{padding:36px 20px} .xem-hop{max-width:900px;top:34px;border-radius:18px;bottom:34px} .hop{align-items:center} .hop-in{border-radius:18px;max-width:640px;max-height:88vh} .hop-in.rong{max-width:1000px} } .cot-phai{display:none} .keo-cot{display:none} .cot-phai.pv-trong .day-p button{opacity:.38;pointer-events:none} .cot-phai.pv-trong .zoom button:first-child{opacity:.38;pointer-events:none} @media (min-width:900px){ .than{grid-template-columns:minmax(0,var(--rong-trai,1.5fr)) 6px minmax(340px,var(--rong-phai,1fr))} .keo-cot{display:block;align-self:stretch;background:var(--vien); border-radius:3px;cursor:col-resize;min-height:200px;position:sticky;top:150px; height:calc(100vh - 260px);position:relative} .keo-cot::after{content:'⠿';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);color:var(--chu-phu);font-size:13px; background:var(--vien);border-radius:8px;padding:6px 1px;line-height:1} .keo-cot:hover{background:var(--xanh)} .keo-cot:hover::after{background:var(--xanh);color:#fff} .than.an-preview .keo-cot{display:none} } @media (min-width:1500px){ .than{grid-template-columns:minmax(0,var(--rong-trai,1.5fr)) 6px minmax(340px,var(--rong-phai,1fr))} } /* vuốt ngang */ .vuot-bao{position:relative;overflow:hidden;border-radius:14px;margin-bottom:9px} .vuot-bao .the-vb{margin-bottom:0;transition:transform .18s;position:relative;z-index:2} .vuot-nut{position:absolute;inset:0;display:flex;z-index:1} .vuot-nut button{border:none;font:inherit;font-size:calc(12.5px*var(--co)); font-weight:600;color:#fff;cursor:pointer;width:50%;padding:0} .vuot-nut .b-sua{background:var(--chu-phu)} .vuot-nut .b-gui{background:var(--luc);margin-left:auto} /* chip năm */ .nam{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:4px} .nam button{flex:0 0 auto;border:1.3px solid var(--vien);background:var(--the); color:var(--chu-phu);border-radius:9px;padding:7px 13px;font:inherit; font-size:calc(12.5px*var(--co));cursor:pointer;min-height:38px} .nam button.bat{border-color:var(--xanh);background:var(--xanh-nhat); color:var(--xanh-dam);font-weight:600} /* chọn trang trong xem trước */ .o-trang{position:relative} .o-trang .tick{position:absolute;top:8px;left:8px;width:28px;height:28px; border-radius:8px;background:rgba(255,255,255,.92);border:2px solid var(--xanh); display:grid;place-items:center;font-size:16px;color:transparent;cursor:pointer;z-index:2} .o-trang.chon .tick{background:var(--xanh);color:#fff} .o-trang .stt{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55); color:#fff;font-size:11px;padding:2px 8px;border-radius:7px} .thanh-chon{background:var(--xanh-nhat);border:1.3px solid var(--xanh);border-radius:11px; padding:9px 12px;margin-bottom:10px;font-size:calc(12px*var(--co));color:var(--xanh-dam); display:flex;align-items:center;gap:9px;flex-wrap:wrap} .thanh-chon button{border:1.3px solid var(--xanh);background:var(--the); color:var(--xanh-dam);border-radius:8px;padding:6px 11px;font:inherit; font-size:calc(11.5px*var(--co));cursor:pointer} /* 3.49: − Bớt file — chế độ chọn dòng ở mọi tab */ .nut-bot{flex:0 0 auto;background:var(--the);color:var(--chu);border:1.3px solid var(--vien);border-radius:10px; padding:0 12px;min-height:34px;font:inherit;font-size:calc(12.5px*var(--co));font-weight:600;cursor:pointer} .nut-bot.bat{background:var(--do-nen);border-color:var(--do);color:var(--do)} .thanh-bot{background:var(--do-nen);border:1.3px solid var(--do);border-radius:11px;padding:8px 11px;margin-bottom:10px; font-size:calc(12px*var(--co));color:var(--do);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .thanh-bot button{border:1.3px solid var(--do);background:var(--the);color:var(--do);border-radius:8px;padding:5px 10px; font:inherit;font-size:calc(11.5px*var(--co));cursor:pointer} .thanh-bot button.xau{background:var(--do);color:#fff} .thanh-bot button:disabled{opacity:.45;cursor:default} .thanh-bot input{width:104px;padding:4px 6px;border:1px solid var(--vien);border-radius:7px;font:inherit} .thanh-bot .tb-nhom{display:inline-flex;align-items:center;gap:5px} body.dang-bot [data-bot]{position:relative;cursor:pointer} body.dang-bot [data-bot]::after{content:'';position:absolute;top:7px;left:7px;width:20px;height:20px;border-radius:6px; border:2px solid var(--do);background:var(--the);z-index:3;box-sizing:border-box} body.dang-bot [data-bot][data-botc]::after{content:'✓';background:var(--do);color:#fff;font-size:14px;line-height:16px;text-align:center} body.dang-bot [data-bot][data-botc]{outline:2px solid var(--do);outline-offset:-2px} body.dang-bot .d2[data-bot], body.dang-bot .ka-dong[data-bot]{padding-left:36px} .bot-ds{max-height:180px;overflow:auto;font-size:calc(12px*var(--co));border:1px solid var(--vien);border-radius:9px;padding:6px 9px;margin:6px 0 10px} .bot-ds div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bot-muc{display:block;border:1.3px solid var(--vien);border-radius:10px;padding:9px 11px;margin:0 0 8px;cursor:pointer} .bot-muc b{display:block} .bot-muc small{color:var(--chu-phu)} .bot-canh{background:var(--do-nen);border:1.3px solid var(--do);color:var(--do);border-radius:10px;padding:8px 11px;margin:0 0 10px;font-size:calc(12px*var(--co))} .trung{background:var(--do-nen);border:1.3px solid var(--do);color:var(--do); border-radius:9px;padding:8px 11px;margin-top:7px;font-size:calc(11.5px*var(--co))} .quet{background:var(--the);border:1.3px solid var(--xanh);border-radius:12px; padding:12px 13px;margin-bottom:12px} .quet .dong{font-size:calc(12.5px*var(--co));margin-bottom:4px} .quet .nho-chu{font-size:calc(11.5px*var(--co));color:var(--chu-phu); word-break:break-all;min-height:1.5em} /* ---- dòng văn bản gọn 2 hàng ---- */ .d2{background:var(--the);border:1.3px solid var(--vien);border-radius:11px; padding:8px 10px;margin-bottom:6px;cursor:pointer;position:relative} .d2:hover{border-color:var(--xanh)} .d2.chon{background:var(--xanh-nhat);border-color:var(--xanh)} .d2.mo{opacity:.55} .d2 .h1{display:flex;align-items:baseline;gap:7px;min-width:0} .d2 .ico{flex:0 0 auto;opacity:.65;font-size:calc(12px*var(--co))} .d2 .ten{font-weight:600;font-size:calc(13px*var(--co));color:var(--xanh-dam); white-space:nowrap;flex:0 0 auto;max-width:56%;overflow:hidden;text-overflow:ellipsis} .d2.mo .ten{text-decoration:line-through} .d2 .ty{font-size:calc(12px*var(--co));color:var(--chu-phu); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0} .d2 .h2{display:flex;align-items:center;gap:5px;margin-top:4px;min-width:0} .d2 .the{display:flex;gap:4px;flex:1;min-width:0;overflow:hidden} .d2 .tg{font-size:calc(10.5px*var(--co));padding:2px 7px;border-radius:6px; background:var(--xanh-nhat);color:var(--xanh-dam);white-space:nowrap} .d2 .tg.ct{background:var(--luc-nen);color:var(--luc)} .d2 .tg.phu{background:var(--vang-nen);color:var(--vang)} .d2 .tg.xam{background:var(--nen);color:var(--chu-phu)} .d2 .nut{display:flex;gap:3px;flex:0 0 auto} .d2 .nut button{width:30px;height:30px;border-radius:8px;border:1px solid var(--vien); background:var(--the);color:var(--chu-phu);font:inherit;font-size:calc(13px*var(--co)); cursor:pointer;padding:0;line-height:1} .d2 .nut button:hover{border-color:var(--xanh);color:var(--xanh-dam)} /* ---- menu ⋯ ---- */ .menu{position:fixed;z-index:80;background:var(--the);border:1.3px solid var(--vien); border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.22);padding:5px;display:none; min-width:186px} .menu.hien{display:block} .menu button{display:block;width:100%;text-align:left;border:none;background:none; color:var(--chu);font:inherit;font-size:calc(12.5px*var(--co));padding:10px 12px; border-radius:8px;cursor:pointer} .menu button:hover{background:var(--xanh-nhat);color:var(--xanh-dam)} .menu button.xau{color:var(--do)} .menu .vach{height:1px;background:var(--vien);margin:4px 6px} /* ---- nhóm năm > tháng kiểu Explorer ---- */ .g1>.g-dau{background:var(--xanh-nhat);color:var(--xanh-dam)} .g-dau{display:flex;align-items:center;gap:8px;padding:8px 11px;cursor:pointer; border-radius:9px;margin:8px 0 5px;background:var(--nen)} .g-dau .mui{transition:transform .15s;color:var(--chu-phu)} .g.mo>.g-dau .mui{transform:rotate(90deg)} .g-dau .ten{flex:1;font-size:calc(12.5px*var(--co));font-weight:600} .g-dau .dem{font-size:calc(11px*var(--co));color:var(--chu-phu)} .g-than{display:none;padding-left:11px;border-left:2px solid var(--vien);margin-left:6px} .g.mo>.g-than{display:block} /* ---- thanh trạng thái khi app đang chạy việc gì ---- */ .tt-chay{position:fixed;left:0;right:0;top:0;z-index:90;height:3px;background:transparent} .tt-chay i{display:block;height:100%;width:0;background:var(--xanh); transition:width .3s;box-shadow:0 0 8px var(--xanh)} .tt-chay.lap i{width:40%;animation:chay 1.1s linear infinite} @keyframes chay{0%{margin-left:-40%}100%{margin-left:100%}} .chip{cursor:pointer} .chip.luc{background:var(--luc-nen);color:var(--luc)} .dk{display:flex;align-items:center;gap:4px;padding:7px 10px; border-bottom:1px solid var(--vien);background:var(--the);flex:0 0 auto; flex-wrap:wrap} .dk:empty{display:none} .dk button{min-width:32px;height:32px;border-radius:8px;border:1px solid var(--vien); background:var(--the);color:var(--chu);font:inherit;font-size:calc(13px*var(--co)); cursor:pointer;padding:0 7px;line-height:1} .dk button:hover{border-color:var(--xanh);color:var(--xanh-dam)} .dk .so-trang{font-size:calc(12px*var(--co));color:var(--chu-phu); display:flex;align-items:center;gap:4px;margin:0 3px} .dk .so-trang input{width:42px;text-align:center;font:inherit; font-size:calc(12px*var(--co));padding:5px 3px;border-radius:7px; border:1.3px solid var(--vien);background:var(--nen);color:var(--chu);outline:none} .dk .ngan-cach{width:1px;height:20px;background:var(--vien);margin:0 4px} .dk .tl{font-size:calc(11.5px*var(--co));color:var(--chu-phu);min-width:40px;text-align:center} .dk button.bat{border-color:var(--xanh);background:var(--xanh-nhat);color:var(--xanh-dam)} .nam .nhan-loc{flex:0 0 auto;font-size:calc(11.5px*var(--co));color:var(--chu-phu); align-self:center;margin-right:2px} .the-loc.ctr.bat{background:var(--luc-nen);border-color:var(--luc);color:var(--luc)} .xoa-loc{color:var(--do);cursor:pointer;text-decoration:underline;margin-left:4px} table.ss{width:100%;border-collapse:collapse;margin:8px 0;font-size:calc(11.5px*var(--co))} table.ss th{background:var(--nen);color:var(--chu-phu);font-weight:600; padding:6px 8px;text-align:left;border-bottom:1px solid var(--vien)} table.ss td{padding:6px 8px;border-bottom:1px solid var(--vien); vertical-align:top;word-break:break-word} table.ss td.nh{color:var(--chu-phu);white-space:nowrap;width:74px} table.ss td.khac{background:var(--vang-nen);color:var(--vang)} table.ss tr:last-child td{border-bottom:none} .dau-tab{display:flex;gap:7px;margin-bottom:9px;flex-wrap:wrap} .nut-them{flex:0 0 auto;min-width:0;background:var(--the);color:var(--chu);border:1.3px solid var(--vien); border-radius:10px;padding:6px 14px;font:inherit;font-weight:600; font-size:calc(12.5px*var(--co));cursor:pointer;min-height:34px; display:flex;align-items:center;justify-content:center;gap:7px} .nut-them .cong{font-size:calc(15px*var(--co));line-height:1;color:var(--xanh)} .nut-them:hover{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam)} .nut-them.keo{background:var(--xanh-nhat);border-color:var(--xanh);border-style:dashed} .dau-tab .phu{background:var(--the);color:var(--xanh-dam);border:1.6px solid var(--xanh); border-radius:12px;padding:12px 14px;font:inherit;font-weight:600; font-size:calc(12.5px*var(--co));cursor:pointer;min-height:46px} .loc3{background:var(--the);border:1.3px solid var(--vien);border-radius:13px; padding:8px 10px;margin-bottom:10px} .loc3 .nam{margin-bottom:5px} .loc3 .nam:last-child{margin-bottom:0} .so-tag{flex:0 0 auto;border:1.3px solid var(--vien);background:var(--the); color:var(--chu-phu);border-radius:9px;padding:7px 9px;font:inherit; font-size:calc(12px*var(--co));cursor:pointer;min-height:38px;max-width:140px} .sua-tag{flex:0 0 auto;width:34px;height:38px;border:1.3px solid var(--vien); background:var(--the);color:var(--chu-phu);border-radius:9px;cursor:pointer; font:inherit;padding:0} .tim-bao{position:relative} .goiy{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40; background:var(--the);border:1.3px solid var(--vien);border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.24);padding:5px;display:none; max-height:52vh;overflow:auto} .goiy.hien{display:block} .goiy .gy-dau{font-size:calc(11px*var(--co));color:var(--chu-phu);padding:6px 10px 4px} .goiy button{display:block;width:100%;text-align:left;border:none;background:none; color:var(--chu);font:inherit;font-size:calc(12.5px*var(--co));padding:9px 11px; border-radius:8px;cursor:pointer} .goiy button:hover{background:var(--xanh-nhat);color:var(--xanh-dam)} .the-hang{display:flex;flex-wrap:wrap;gap:5px;padding:7px 2px 0} .the-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px; padding:4px 6px 4px 11px;font-size:calc(11.5px*var(--co))} .the-chip b{cursor:pointer;opacity:.85;padding:0 4px;font-weight:400} .the-chip.xoa{background:rgba(0,0,0,.18);padding:4px 11px;cursor:pointer} .sap{display:flex;align-items:center;gap:5px;margin-bottom:8px;flex-wrap:wrap} .sap button{border:1.3px solid var(--vien);background:var(--the);color:var(--chu-phu); border-radius:9px;padding:6px 11px;font:inherit;font-size:calc(11.5px*var(--co)); cursor:pointer;min-height:34px} .sap button.bat{border-color:var(--xanh);background:var(--xanh-nhat); color:var(--xanh-dam);font-weight:600} .nguon{display:flex;gap:8px;flex-wrap:wrap} .nguon button{flex:1;min-width:98px;border:1.6px solid var(--vien);background:var(--the); border-radius:14px;padding:15px 8px;cursor:pointer;font:inherit;color:var(--chu); display:flex;flex-direction:column;align-items:center;gap:4px} .nguon button.bat{border-color:var(--xanh);background:var(--xanh-nhat)} .nguon .ic{font-size:calc(26px*var(--co));line-height:1} .nguon .tn{font-weight:600;font-size:calc(13.5px*var(--co));color:var(--xanh-dam)} .nguon .mo-ta{font-size:calc(10.5px*var(--co));color:var(--chu-phu);text-align:center} .dau-tab .phu.co-loc{background:var(--xanh);color:#fff;border-color:var(--xanh)} .lo-khoi{margin-bottom:13px} .lo-nhan{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-bottom:6px} .the-hang.mau-app .the-chip{background:var(--xanh-nhat);border-color:var(--xanh); color:var(--xanh-dam)} .the-hang.mau-app .the-chip.xoa{background:var(--do-nen);border-color:var(--do); color:var(--do)} .dau-tab .phu.bat{background:var(--xanh-nhat);border-color:var(--xanh)} .the-hang.hep{padding:0 0 9px} .the-chip2{display:inline-block;background:var(--xanh-nhat);color:var(--xanh-dam); border:1px solid var(--xanh);border-radius:999px;padding:4px 11px; font-size:calc(11.5px*var(--co))} .the-chip2.xoa{background:var(--do-nen);color:var(--do);border-color:var(--do);cursor:pointer} .panel-loc{background:var(--the);border:1.3px solid var(--xanh);border-radius:13px; padding:11px 12px;margin-bottom:10px} .muc-loc{margin-bottom:9px} .muc-loc:last-of-type{margin-bottom:0} .muc-loc .nl{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-bottom:5px; display:flex;align-items:center;gap:7px} .muc-loc .chips{display:flex;flex-wrap:wrap;gap:6px} .goi-y.mot .the-loc.bat{background:var(--xanh);border-color:var(--xanh);color:#fff} .dau-tab .phu.co{background:var(--xanh-nhat);border-color:var(--xanh)} .chip-hang{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px} .chip-loc{display:inline-flex;align-items:center;gap:5px;background:var(--xanh-nhat); border:1px solid var(--xanh);color:var(--xanh-dam);border-radius:999px; padding:4px 6px 4px 11px;font-size:calc(11.5px*var(--co))} .chip-loc b{cursor:pointer;padding:0 4px;font-weight:400;opacity:.75} .chip-loc.xoa{background:var(--do-nen);border-color:var(--do);color:var(--do); padding:4px 11px;cursor:pointer} .lg{margin-bottom:13px} .lg-nhan{font-size:calc(12px*var(--co));color:var(--chu-phu);margin-bottom:6px} .lg-the{display:flex;flex-wrap:wrap;gap:6px} .kieu{display:flex;gap:6px;margin-bottom:9px} .kieu button{flex:1;border:1.3px solid var(--vien);background:var(--the);color:var(--chu-phu); border-radius:10px;padding:8px;font:inherit;font-size:calc(12.5px*var(--co)); cursor:pointer;min-height:40px} .kieu button.bat{border-color:var(--xanh);background:var(--xanh-nhat); color:var(--xanh-dam);font-weight:600} .tm{background:var(--the);border:1.3px solid var(--vien);border-radius:12px; margin-bottom:8px;overflow:hidden} .tm-dau{padding:11px 13px;display:flex;align-items:center;gap:9px;cursor:pointer} .tm-dau .ten{flex:1;font-size:calc(13px*var(--co));font-weight:600; color:var(--xanh-dam);min-width:0;word-break:break-word} .tm-dau .dem{font-size:calc(11px*var(--co));color:var(--chu-phu); background:var(--nen);padding:2px 8px;border-radius:7px;flex:0 0 auto} .tm-dau .mui{color:var(--chu-phu);transition:transform .15s;flex:0 0 auto} .tm.mo > .tm-dau .mui{transform:rotate(90deg)} /* 3.31: chỉ nhánh được mở, không lan xuống cấp con */ .tm-than{display:none;border-top:1px solid var(--vien);padding:4px 10px 8px} .tm.mo > .tm-than{display:block} .tm-file{padding:9px 4px;border-bottom:1px solid var(--vien);cursor:pointer; font-size:calc(12.5px*var(--co));word-break:break-all;display:flex;gap:8px;align-items:center} .tm-file:last-child{border-bottom:none} .tm-file .ico{flex:0 0 auto;opacity:.6} .muc{border:1.3px solid var(--vien);border-radius:12px;margin-bottom:8px;overflow:hidden} .muc-dau{padding:13px 14px;display:flex;align-items:center;gap:10px;cursor:pointer; background:var(--the)} .muc-dau .ten{flex:1;font-size:calc(13.5px*var(--co));font-weight:600} .muc-dau .p{font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .muc-dau .mui{color:var(--chu-phu);transition:transform .15s} .muc.mo .muc-dau{background:var(--xanh-nhat);color:var(--xanh-dam)} .muc.mo .muc-dau .mui{transform:rotate(90deg)} .muc-than{display:none;padding:12px 14px;border-top:1px solid var(--vien)} .muc.mo .muc-than{display:block} .cay{background:var(--nen);border:1px solid var(--vien);border-radius:10px; padding:11px 13px;font-size:calc(12px*var(--co));line-height:1.7; white-space:pre;overflow-x:auto;color:var(--chu)} /* ========================================================== 3.32 — CHUẨN HÓA NÚT & BỐ CỤC (một hệ thống cho mọi thanh công cụ) Cỡ: nút thanh công cụ cao 34px · bo góc 10px · viền 1.3px · chữ 12.5px đậm Màu: thường = nền thẻ + viền xám · đang bật/đang lọc = nền xanh nhạt + viền xanh · nút chính (.chinh) = nền xanh chữ trắng · nguy hiểm (.xau) = chữ + viền đỏ Khối này đặt cuối để thắng các quy tắc cũ; bỏ khối là trở về như 3.31. ========================================================== */ :root{--nut-cao:34px;--nut-bo:10px} .nut-them,.dau-tab .nut-them,.dau-tab .phu,.nut-phu,.sap button,.bdc-dau .nho{ min-height:var(--nut-cao);padding:5px 13px;border-radius:var(--nut-bo);border:1.3px solid var(--vien); background:var(--the);color:var(--chu);font-weight:600;font-size:calc(12.5px*var(--co));line-height:1.2} .nut-them:hover,.dau-tab .nut-them:hover,.dau-tab .phu:hover,.nut-phu:hover,.sap button:hover,.bdc-dau .nho:hover{ background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam)} .dau-tab .phu.co,.dau-tab .phu.bat,.sap button.bat,.bdc-dau .nho.bat{ background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam)} .dau-tab .phu.co-loc{background:var(--xanh);border-color:var(--xanh);color:#fff} .nho{border-radius:var(--nut-bo);min-height:36px} .sap .nhan-loc,.nam .nhan-loc{font-size:calc(11.5px*var(--co));color:var(--chu-phu);font-weight:600} /* tab Văn bản: dải chờ khai + hàng nút + hàng lọc xếp DỌC (trước chen chung một hàng, chữ "Tag" đè nút) */ #nam-vb{display:block;overflow:visible} #nam-vb .dai-ck{margin-bottom:8px} /* thẻ "còn thiếu báo cáo" ở Hôm nay: tối đa 3 dòng, bấm vào để xem đủ trên ma trận */ .viec .p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* điện thoại: ẩn đồng hồ ở thanh trên để nút ⚙ không rớt xuống dòng riêng */ @media (max-width:520px){ .dau-hang .gio{display:none} } /* điện thoại: thanh Sắp xếp/Xem một hàng, vuốt ngang — trước chiếm 3 hàng */ @media (max-width:899px){ .sap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .sap > *{flex:0 0 auto} .sap span[style*="flex:1"]{display:none} } /* ========================================================== 3.34 — THANH NÚT MA TRẬN 2 DÒNG · NÚT GỌN · HÀNG LỌC NHANH MỌI TAB ========================================================== */ /* ma trận: 2 dòng, được xuống dòng, không cuộn ngang (trước nowrap + nút 34px nên bị che) */ .bdc-dau{display:flex;flex-direction:column;align-items:stretch;gap:5px;flex-wrap:nowrap;overflow:visible} .bdc-hang{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0} .bdc-dau .nho{min-height:28px;min-width:0;padding:3px 9px;font-size:calc(11.5px*var(--co));flex:0 0 auto} .bdc-ky-chon .nho{width:28px;padding:3px 0} .bdc-dau .bdc-gon-nut{margin-left:auto;width:30px;padding:3px 0} .ln-an{margin-left:auto;position:sticky;right:0;background:var(--nen);padding-left:8px!important;color:var(--chu-phu);font-size:calc(10.5px*var(--co));cursor:pointer;padding:0 4px;white-space:nowrap} .ln-an:hover{color:var(--xanh-dam);text-decoration:underline} .bdc-dau .bdc-kieu{margin-left:0} /* thanh Sắp xếp/Xem trên máy tính: nút gọn, được xuống dòng */ @media (min-width:900px){ .sap button{min-height:28px;padding:3px 10px;font-size:calc(11.5px*var(--co))} } /* hàng lọc nhanh: mỗi nhóm một dòng, chip 22px, dòng dài thì vuốt ngang */ .loc-nhanh{display:flex;flex-direction:column;gap:3px;margin:0 0 8px} .ln-hang{flex-wrap:nowrap;overflow-x:auto;gap:4px;scrollbar-width:thin;padding-bottom:1px} .ln-hang > *{flex:0 0 auto} .ln-nhan{min-width:64px;font-size:calc(10.5px*var(--co))} .loc-nhanh .the-loc{padding:1px 9px;min-height:22px;line-height:20px;font-size:calc(11px*var(--co));white-space:nowrap} @media (max-width:899px){ .loc-nhanh{display:flex} .ln-hang{scrollbar-width:none} .ln-nhan{min-width:48px} } /* hộp file trùng · hộp thiết lập báo cáo */ .trung-dong{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap; padding:8px 0;border-bottom:1px solid var(--vien)} .trung-chu{min-width:0;flex:1 1 220px;overflow-wrap:anywhere} .trung-dong .hang-nut{margin:0} .tl-hang{display:flex;gap:14px;flex-wrap:wrap} .tl-chon{display:inline-flex;align-items:center;gap:6px;font-size:calc(13px*var(--co));cursor:pointer;margin:4px 0} /* ========================================================== 3.35 — HÀNG CHỜ SCAN (lưới ảnh + nút chỉnh) · MÀN KÉO 4 GÓC ========================================================== */ .hc-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px} .hc-luoi.the{grid-template-columns:1fr 1fr} .hc-cap{grid-column:1/-1;font-size:calc(12px*var(--co));font-weight:700;color:var(--chu-phu);margin-top:4px} .hc-o{border:1.3px solid var(--vien);border-radius:10px;padding:6px;background:var(--the);min-width:0;display:flex;flex-direction:column;gap:5px} .hc-o.hc-canxem{border-color:var(--vang);background:var(--vang-nen)} .hc-o img{width:100%;border-radius:7px;border:1px solid var(--vien);background:#fff;display:block} .hc-nhan{font-size:calc(11.5px*var(--co));font-weight:600;color:var(--chu-phu)} .hc-o.hc-canxem .hc-nhan{color:var(--vang)} .hc-lech{color:var(--vang);font-weight:600} .hc-cu{display:flex;flex-wrap:wrap;gap:4px;align-items:center} .hc-cu button{min-height:28px;min-width:30px;padding:2px 7px;border-radius:8px;border:1.3px solid var(--vien); background:var(--the);color:var(--chu);font-size:calc(12.5px*var(--co));cursor:pointer} .hc-cu button:hover:not([disabled]){background:var(--xanh-nhat);border-color:var(--xanh)} .hc-cu button[disabled]{opacity:.35;cursor:default} .hc-cu button.xau{color:var(--do);border-color:var(--do-nen);margin-left:auto} /* 3.37: kết quả + ảnh gốc có viền cạnh nhau; nút kiểu màu hiện sẵn */ .hc-hai{display:flex;gap:6px;align-items:flex-start} .hc-kq{flex:3 1 0;min-width:0} .hc-goc{flex:2 1 0;min-width:0;cursor:pointer} .hc-kq img,.hc-goc canvas{width:100%;display:block;border-radius:7px;border:1px solid var(--vien);background:#fff} .hc-goc canvas{background:#222} .hc-goc:hover canvas{outline:2px solid var(--xanh)} .hc-hai small{display:block;font-size:calc(10.5px*var(--co));color:var(--chu-phu);margin-top:2px;text-align:center} .hc-loc{display:flex;flex-wrap:wrap;gap:3px} .hc-loc button{min-height:26px;padding:1px 9px;border-radius:13px;border:1.3px solid var(--vien);background:var(--the);color:var(--chu-phu); font-size:calc(11.5px*var(--co));cursor:pointer} .hc-loc button.bat{background:var(--xanh);border-color:var(--xanh);color:#fff;font-weight:600} @media (max-width:700px){ .hc-luoi.the{grid-template-columns:1fr} } @media (max-width:520px){ .hc-luoi{grid-template-columns:1fr;gap:8px} .hc-cu button{min-width:28px;padding:2px 6px} } #cg{position:fixed;inset:0;z-index:9000;background:#0d1117;display:none;flex-direction:column;color:#fff} #cg.hien{display:flex} .cg-dau{padding:12px 16px;font-weight:600;font-size:14px} .cg-khung{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0} #cg-c{touch-action:none;cursor:crosshair;max-width:100%;max-height:100%} #cg-lup{position:absolute;top:8px;display:none;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:none} .cg-nut{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom))} .cg-nut .nho{flex:0 1 auto;min-width:0} /* ========================================================== 3.39 — ĐIỆN THOẠI TỐI GIẢN (anh Nhân: điện thoại để xem và vuốt, thu nhỏ tối đa tùy chọn, nhường màn cho nội dung chính; máy tính giữ đủ chi tiết). Chỉ áp dưới 700px. ========================================================== */ /* hàng lọc nhanh: chữ "ẩn" có chỗ riêng, không đè chip cuối */ .loc-nhanh{position:relative} .loc-nhanh .ln-hang:first-child{margin-right:44px} .loc-nhanh .ln-an{position:absolute;top:2px;right:0;margin:0;background:none} @media (max-width:699px){ .dau{padding:7px 12px 6px;padding-top:calc(7px + env(safe-area-inset-top,0px))} .dong-phu{display:none} .logo{width:28px;height:28px} .nut-cd{width:32px;height:32px} .tim{margin-top:6px;padding:6px 10px} .ngan{padding-top:6px} .ngan button{min-height:32px;padding:6px 10px} .than{padding:8px 8px 58px} /* dải chờ khai: một dòng */ .dai-ck{flex-wrap:nowrap;padding:6px 10px;margin-bottom:6px;white-space:nowrap} .dai-ck span{display:none} .dai-ck b{overflow:hidden;text-overflow:ellipsis;min-width:0} /* hàng nút đầu tab: một dòng, nút thấp */ .dau-tab{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;margin-bottom:6px} .dau-tab::-webkit-scrollbar{display:none} .dau-tab > *{flex:0 0 auto} .dau-tab .phu,.nut-them{min-height:32px;padding:4px 11px;font-size:calc(12px*var(--co));border-radius:9px} .sap button{min-height:30px;padding:3px 10px;font-size:calc(11.5px*var(--co))} .nhan-nhom{margin:8px 2px 6px} .tab-ghi-chu-scan{display:none} /* thanh dưới: một dòng */ .day{padding:5px 10px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))} .so-lieu br{display:none} .so-lieu .chip{margin:0 0 0 6px} /* thanh nút ma trận tab Tháng: 2 dòng, mỗi dòng vuốt ngang (trước xuống 5 dòng) */ .bdc-hang{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .bdc-hang::-webkit-scrollbar{display:none} .bdc-hang > *{flex:0 0 auto} .bdc-dau .nho{min-height:30px} } /* ========================================================== 3.40 — CÀI ĐẶT: BỘ SỬA DANH MỤC (sửa thẳng trong ô, tự lưu) ========================================================== */ .cd-tuluu{font-size:calc(11px*var(--co));color:#CFE0F1;margin-left:auto;margin-right:6px} .cd-than h3 small{font-weight:400;color:var(--chu-phu);font-size:calc(11px*var(--co))} .dm{border:1.3px solid var(--vien);border-radius:12px;background:var(--the);padding:6px 8px;margin-bottom:8px} .dm-dau,.dm-dong{display:flex;gap:6px;align-items:center} .dm-dau{font-size:calc(10.5px*var(--co));color:var(--chu-phu);padding:2px 2px 4px;border-bottom:1px solid var(--vien)} .dm-dong{padding:4px 0;border-bottom:1px dashed var(--vien)} .dm-dong:last-of-type{border-bottom:0} .dm input{font:inherit;font-size:calc(13px*var(--co));border:1px solid transparent;background:transparent;border-radius:7px; padding:4px 6px;min-width:0;color:var(--chu)} .dm input:hover{border-color:var(--vien)} .dm input:focus{border-color:var(--xanh);background:var(--nen);outline:none} .dm .dm-ten,.dm-dau > span:first-child{flex:1 1 150px} .dm .dm-phu,.dm-dau .dm-phu{flex:2 1 200px} .dm .dm-hep,.dm-dau .dm-hep{flex:0 0 120px} .dm .dm-tk,.dm-dau .dm-tk{flex:2 1 220px;color:var(--chu-phu)} .dm-cuoi{flex:0 0 auto;display:flex;align-items:center;gap:3px;margin-left:auto;min-width:118px;justify-content:flex-end} .dm-so{font-size:calc(10.5px*var(--co));color:var(--chu-phu);margin-right:4px;white-space:nowrap} .dm-n{border:1px solid var(--vien);background:var(--the);color:var(--chu);border-radius:7px;width:28px;height:28px;cursor:pointer; font-size:calc(12px*var(--co));padding:0;flex:0 0 auto} .dm-n:hover{border-color:var(--xanh);color:var(--xanh-dam)} .dm-n.xau:hover{border-color:var(--do);color:var(--do)} .dm-n:disabled{opacity:.3;cursor:default} .dm-hoi:empty{display:none} .dm-hoi{background:var(--vang-nen);border-radius:9px;padding:8px 10px;margin:4px 0;font-size:calc(12px*var(--co))} .dm-hoi select{font:inherit;padding:3px 6px;border-radius:7px;border:1px solid var(--vien);background:var(--the);color:var(--chu)} .dm-them{display:flex;gap:6px;align-items:center;padding-top:6px;margin-top:2px;border-top:1px solid var(--vien);flex-wrap:wrap} .dm-them input{flex:1 1 180px;border:1px solid var(--vien);background:var(--nen)} .dm-them .nho{flex:0 0 auto;min-height:30px;padding:3px 10px} .dm-ten-chu{flex:1;min-width:0;font-size:calc(13px*var(--co))} .dm-ten-chu small{display:block;color:var(--chu-phu);font-size:calc(10.5px*var(--co))} /* điện thoại: tên một dòng, các ô phụ xuống dòng dưới */ @media (max-width:699px){ .dm-dau{display:none} .dm-dong{flex-wrap:wrap} .dm .dm-ten{flex:1 1 60%} .dm .dm-phu,.dm .dm-tk,.dm .dm-hep{flex:1 1 100%;order:3;font-size:calc(12px*var(--co))} .dm-cuoi{min-width:0} .cd-tuluu{display:none} } /* 3.42 — Bảo trì kho */ /* 3.43: tab Thư viện */ .tv-chon{display:flex;gap:0;border:1.3px solid var(--vien);border-radius:12px;overflow:hidden;background:var(--the);margin:0 0 10px;width:max-content;max-width:100%} .tv-chon button{border:0;background:transparent;padding:8px 16px;font:inherit;font-size:calc(13px*var(--co));font-weight:600;color:var(--chu-phu);cursor:pointer} .tv-chon button.bat{background:var(--xanh-nhat);color:var(--xanh-dam)} .tv-chon small{font-weight:400;opacity:.8} .tv-suckhoe{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .tv-suckhoe span{background:var(--the);border:1px solid var(--vien);border-radius:9px;padding:4px 10px;font-size:calc(12px*var(--co))} .tv-suckhoe .vang{background:var(--vang-nen);color:var(--vang);border-color:#EED9A8} .tv-suckhoe .luc{background:var(--luc-nen);color:var(--luc);border-color:#BFE0CC} .tv-bt h3{font-size:calc(13.5px*var(--co));margin:12px 0 6px} .bt-the{border:1.3px solid var(--vien);border-radius:12px;background:var(--the);padding:10px 12px;margin-bottom:8px} .bt-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bt-ic{font-size:calc(16px*var(--co))} .bt-lam{font-size:calc(12px*var(--co));color:var(--chu-phu);margin:4px 0 6px;line-height:1.5} .bt-the .hang-nut{margin:0} .bt-the .nho:disabled{opacity:.45;cursor:default} .bt-nhan{margin-left:auto;font-size:calc(10.5px*var(--co));border-radius:6px;padding:1px 7px;white-space:nowrap} .bt-nhan.doc{background:var(--luc-nen);color:var(--luc)} .bt-nhan.cm{background:var(--xanh-nhat);color:var(--xanh-dam)} .bt-nhan.duyet{background:var(--vang-nen);color:var(--vang)} .bt-nhan.rac{background:var(--do-nen);color:var(--do)} /* ===== 3.62 — việc U: khung xem rộng tối đa, nút gọn ===== */ .the-xem{display:flex;flex-direction:column;gap:10px} .the-xem figure{margin:0;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.12);padding:6px} .the-xem img{width:100%;display:block;border-radius:6px;margin:0 !important;box-shadow:none !important} .the-xem figcaption{font-size:calc(10.5px*var(--co));color:var(--chu-phu);text-align:center;margin-top:3px} @media (min-width:900px){ /* khung phải kéo sát dải trạng thái dưới cùng */ .cot-phai{height:calc(100vh - 156px);max-height:calc(100vh - 156px)} .cot-phai .dau-p{padding:8px 12px} .cot-phai .xem-phu{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cot-phai .than-p{padding:8px} .cot-phai .day-p{padding:6px 10px;gap:6px} .cot-phai .day-p button{padding:6px 3px;border-radius:9px} .cot-phai .zoom button{width:30px;height:30px} .xem-day{padding:6px 10px;gap:6px} .xem-day button{padding:7px 3px;border-radius:9px} .xem-dau{padding-top:8px !important;padding-bottom:8px !important} .xem-than{padding:8px} } .dk{padding:4px 8px;gap:3px} .dk button{min-width:28px;height:28px;padding:0 6px;font-size:calc(12.5px*var(--co))} .dk .so-trang input{padding:3px 3px;width:38px} /* ===== 3.62 — việc V: dòng danh sách mỏng hơn (không bớt chữ) ===== */ /* rà lại 3.61 (việc Q): thanh Sắp xếp · Danh sách/Nhóm · Khung xem · Ổ G · Drive vẫn xuống 2 hàng ở khổ 1366 do quy tắc khác đè → ép 1 hàng, hẹp thì vuốt ngang */ @media (min-width:900px){ .sap{flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin} .sap>*{flex:0 0 auto} .sap button{min-height:28px;padding:3px 9px} } /* không còn chữ mờ trích yếu bên cạnh → tên được dùng hết dòng 1, không bị cắt sớm ở 56% */ .d2 .h1 .ten:last-child{max-width:none;flex:1 1 auto;min-width:0} @media (min-width:900px){ .d2{padding:4px 9px;margin-bottom:3px;border-radius:9px} .d2 .h2{margin-top:2px} .d2 .nut{gap:2px} .d2 .nut button,.sc-d .nut button{width:22px;height:22px;border-radius:6px;font-size:calc(11.5px*var(--co))} .d2 .tg{padding:1px 6px} .sc-d .h1 .o-chon{width:17px;height:17px} .sc-tt{margin-top:1px} .d2 .h1{line-height:1.3} } /* ===== 3.62 — việc W: lịch 70% + cột 🧰 Công cụ ===== */ .lc-ben{display:flex;gap:8px;align-items:stretch} .lc-ben .lc-luoi{flex:0 0 70%;min-width:0} .cc-cot{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px} .cc-nut{flex:1 1 0;display:flex;align-items:center;gap:6px;min-height:30px;padding:3px 8px;border:1.3px solid var(--vien);border-radius:9px; background:var(--the);color:var(--xanh-dam);font:inherit;font-size:calc(12px*var(--co));font-weight:600;cursor:pointer;text-align:left;min-width:0} .cc-nut i{font-style:normal;font-size:15px;flex:0 0 auto} .cc-nut span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cc-nut:hover{border-color:var(--xanh)} .cc-nut.bat{background:var(--xanh);border-color:var(--xanh);color:#fff} .cc-nut.cho{color:var(--chu-phu);font-weight:500;border-style:dashed} @media (max-width:899px){ .lc-ben{flex-direction:column} .lc-ben .lc-luoi{flex:1 1 auto} .cc-cot{order:-1;flex:0 0 auto;flex-direction:row;overflow-x:auto;gap:5px;scrollbar-width:none} .hs-nhap{grid-template-columns:1fr 1fr} .hs-hoc{flex-wrap:wrap} .hs-seg{flex-wrap:wrap} .cc-nut{flex:0 0 auto;min-height:32px} .cc-nut.cho{display:none} } #cc-o:empty{display:none} #cc-o{background:var(--the);border:1.5px solid var(--xanh);border-radius:12px;padding:8px 10px;margin:-4px 0 12px; overflow:auto} .cc-dau{display:flex;align-items:center;gap:8px;margin-bottom:6px} .cc-dau b{color:var(--xanh-dam);font-size:calc(13px*var(--co));flex:1} .cc-dau .nho{flex:0 0 auto;min-height:26px;padding:2px 9px;margin:0} .cc-dau{gap:5px} .hs-nhap{display:grid;grid-template-columns:1fr 1fr .55fr .75fr;gap:4px 7px}.hs-nhap.hs-nhap2{grid-template-columns:1fr 1fr .8fr} .hs-khoi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:6px 0}.hs-k{grid-column:span 2}.hs-k.phu{grid-column:span 3;border-color:#b9c8d6;background:#f1f5f9;padding:3px 8px}.hs-k.phu b{font-size:calc(15px*var(--co));color:#33506b}.hs-k i b{display:inline;font-size:inherit;color:#1e6a33}#hs-goiy,#hs-vgy{color:#1e6a33;font-weight:600}.hs-nhap.hs-nhap2{align-items:end}.hs-k{border:1px solid #9cc3a4;background:#eef8f0;border-radius:8px;padding:5px 8px;cursor:pointer;text-align:center}.hs-k small{display:block;font-size:calc(10.5px*var(--co));color:var(--chu-phu)}.hs-k b{display:block;font-size:calc(19px*var(--co));color:#1e6a33;line-height:1.25}.hs-k i{display:block;font-style:normal;font-size:calc(10.5px*var(--co));color:var(--chu-phu)}@media(max-width:600px){.hs-k{padding:4px 4px}.hs-k b{font-size:calc(14px*var(--co))}.hs-k.phu b{font-size:calc(13px*var(--co))}.hs-k small,.hs-k i{font-size:calc(9.5px*var(--co))}} /* 3.103: khối HSSV ở nền tối */ :root[data-theme="dark"] .hs-k{background:#163a24;border-color:#3faf6a}:root[data-theme="dark"] .hs-k b,:root[data-theme="dark"] .hs-k i b,:root[data-theme="dark"] #hs-goiy,:root[data-theme="dark"] #hs-vgy{color:#9be3b4}:root[data-theme="dark"] .hs-k.phu{background:#1c2e44;border-color:#4f78a6}:root[data-theme="dark"] .hs-k.phu b{color:#b7d3f2} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hs-k{background:#163a24;border-color:#3faf6a}:root:not([data-theme="light"]) .hs-k b,:root:not([data-theme="light"]) .hs-k i b,:root:not([data-theme="light"]) #hs-goiy,:root:not([data-theme="light"]) #hs-vgy{color:#9be3b4}:root:not([data-theme="light"]) .hs-k.phu{background:#1c2e44;border-color:#4f78a6}:root:not([data-theme="light"]) .hs-k.phu b{color:#b7d3f2}} .hs-dau{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.hs-o-gon{display:inline-flex;align-items:center;gap:3px;font-size:calc(11px*var(--co));color:var(--chu-phu);margin:0}.hs-o-gon input{height:26px;min-height:26px;padding:1px 5px;font-size:calc(12.5px*var(--co))}#hs-gdx{width:44px} .hs-hoc{grid-column:1 / -1;display:flex;align-items:center;gap:8px} .hs-hoc label{margin:0;flex:0 0 auto} .hs-hoc .hs-seg{flex:1} .hs-seg button.tu{flex:0 0 auto;padding:4px 10px} .hs-o label{display:block;font-size:calc(10.5px*var(--co));color:var(--chu-phu);margin-bottom:1px} .hs-o input{width:100%;box-sizing:border-box;min-height:28px;height:28px;padding:2px 7px;font-size:calc(13px*var(--co))} .hs-seg{display:flex;border:1.3px solid var(--vien);border-radius:8px;overflow:hidden} .hs-seg button{flex:1 1 auto;border:0;background:var(--the);color:var(--chu);font:inherit;font-size:calc(11.5px*var(--co));padding:4px 4px;cursor:pointer;white-space:nowrap} .hs-seg button+button{border-left:1px solid var(--vien)} .hs-seg button.bat{background:var(--xanh);color:#fff} .hs-bang,.hs-ky{width:100%;border-collapse:collapse;margin-top:7px;font-size:calc(11.5px*var(--co))} .hs-bang th,.hs-ky th{background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:600;font-size:calc(10.5px*var(--co));padding:3px;border:1px solid var(--vien)} .hs-bang td,.hs-ky td{padding:3px;border:1px solid var(--vien);text-align:center} .hs-bang td small{display:block;color:var(--chu-phu);font-size:calc(10px*var(--co))} .hs-bang td.dam{background:#1d6b2c;color:#fff;font-weight:700;cursor:pointer} .hs-ky tr.dau td{background:var(--vang-nen);font-weight:700} .hs-cau{margin-top:6px;padding:5px 9px;border-radius:8px;background:var(--luc-nen);color:var(--luc);font-weight:700;font-size:calc(12.5px*var(--co));cursor:pointer;line-height:1.4} .hs-cau:hover{outline:1.5px solid var(--luc)} .hs-ct{margin-top:6px} .hs-ct summary{cursor:pointer;font-size:calc(12px*var(--co));color:var(--xanh-dam);font-weight:600} .hs-buoc{margin:4px 0 0 18px;padding:0;font-size:calc(11.5px*var(--co));line-height:1.5} .hs-loi{margin-top:8px;color:var(--vang);font-weight:600;font-size:calc(12px*var(--co))} .db-tren{display:flex;gap:6px;align-items:center;margin-bottom:6px} .db-tren input{flex:1;min-width:0;min-height:30px;padding:3px 8px} .db-tren .nho{flex:0 0 auto;min-height:30px;padding:2px 9px} .db-cay{font-size:calc(12.5px*var(--co))} .db-cay details summary{cursor:pointer;list-style:none;padding:2px 0} .db-cay details summary::-webkit-details-marker{display:none} .db-cay details summary::before{content:'▸ ';color:var(--chu-phu)} .db-cay details[open]>summary::before{content:'▾ '} .db-d{margin-left:14px} .db-ap{margin-left:32px;padding:1px 0} .db-ma{font-family:ui-monospace,Consolas,monospace;font-size:calc(11.5px*var(--co));background:var(--nen);border:1px solid var(--vien);border-radius:5px;padding:0 4px;cursor:pointer;color:var(--xanh-dam)} .db-ma:hover{border-color:var(--xanh)} .db-ma.trong{color:var(--chu-phu);opacity:.7;cursor:default;font-family:inherit} .db-gd{color:var(--luc);font-size:calc(11px*var(--co))} .db-cay small{color:var(--chu-phu)} .cc-hop .cc-than{max-height:none} /* 3.63 — việc X: ô chọn thời gian học trên dòng tiêu đề */ .cc-dau{flex-wrap:wrap} .cc-dau b{flex:0 1 auto !important} .cc-gian{flex:1} .cc-dau .nho{min-width:0 !important;width:auto !important} .hs-loai{max-width:134px !important} .hs-loai{min-height:26px;height:26px;padding:1px 4px;font-size:calc(11.5px*var(--co));border:1.3px solid var(--vien);border-radius:7px;background:var(--the);color:var(--chu);max-width:170px} .hs-loai.cam{background:var(--vang-nen);border-color:var(--vang);color:var(--vang);font-weight:700} .hs-luuy{color:var(--vang);font-size:calc(11.5px*var(--co));margin:2px 0 4px;line-height:1.35} .hs-luuy:empty{display:none} /* ===== 3.64 — ⚠ Theo dõi nợ (Thư viện) ===== */ .tdn-3{display:flex;gap:6px;margin:0 0 8px} .tdn-o{flex:1;min-width:0;text-align:left;padding:7px 10px;border:1.5px solid var(--vien);border-radius:10px;background:var(--the);font:inherit;cursor:pointer;color:var(--chu)} .tdn-o b{display:block;font-size:calc(13px*var(--co))} .tdn-o small{display:block;color:var(--chu-phu);font-size:calc(11px*var(--co));margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tdn-o.bat{border-color:var(--xanh);background:var(--xanh-nhat)} .tdn-o.tdn-nqh.bat{border-color:#c0392b;background:var(--do-nen)} .tdn-thanh{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px} .tdn-thanh .nho{flex:0 0 auto;margin:0} .tdn-seg{display:inline-flex;border:1.3px solid var(--vien);border-radius:8px;overflow:hidden} .tdn-seg button{border:0;background:var(--the);color:var(--chu);font:inherit;font-size:calc(12px*var(--co));padding:4px 9px;cursor:pointer;white-space:nowrap} .tdn-seg button+button{border-left:1px solid var(--vien)} .tdn-seg button.bat{background:var(--xanh);color:#fff} .tdn-tim{flex:1 1 180px;min-width:140px;min-height:30px;padding:3px 9px} .tdn-d .tdn-tien{font-weight:700;color:var(--chu);font-size:calc(12.5px*var(--co))} .tg.tdn-do{background:var(--do-nen) !important;color:var(--do) !important} .tdn-duong{font-size:calc(12px*var(--co));color:var(--chu-phu);margin:2px 0 6px} .tdn-nut{margin:0 0 6px} .tdn-bang{width:100%;border-collapse:collapse;font-size:calc(12.5px*var(--co))} .tdn-bang td{padding:3px 6px;border-bottom:1px dashed var(--vien);vertical-align:top} .tdn-bang td:first-child{color:var(--chu-phu);width:34%} .tdn-ls{font-size:calc(12px*var(--co));color:var(--chu-phu);margin:5px 0;line-height:1.6} .tdn-muc{border:1.3px solid var(--vien);border-radius:9px;padding:6px 9px;margin-bottom:5px;background:var(--the)} .tdn-muc.chua-co{border-style:dashed} .tdn-bang td{text-align:left !important} .tdn-lan-dau .nho,.tdn-muc-dau .nho,.tdn-nut .nho{min-width:0 !important;width:auto !important;flex:0 0 auto !important} .tdn-muc-dau{display:flex;align-items:center;gap:8px} .tdn-muc-dau b{font-size:calc(12.5px*var(--co))} .tdn-muc-dau small{color:var(--chu-phu);font-size:calc(11px*var(--co))} .tdn-muc-dau .nho{margin-left:auto;flex:0 0 auto;min-height:26px;padding:2px 9px} .tdn-muc-nd{font-size:calc(12.5px*var(--co));margin-top:3px;white-space:pre-wrap} .tdn-lsm{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-top:3px} .tdn-lsm summary{cursor:pointer} .tdn-chip{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 8px} .tdn-chip span{padding:4px 10px;border:1.3px solid var(--vien);border-radius:14px;cursor:pointer;font-size:calc(12.5px*var(--co));background:var(--the)} .tdn-chip span.bat{background:var(--xanh);border-color:var(--xanh);color:#fff} .tdn-lan{border-left:3px solid var(--xanh);background:var(--nen);border-radius:0 9px 9px 0;padding:5px 9px;margin-bottom:5px} .tdn-lan-dau{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .tdn-lan-dau .nho{flex:0 0 auto;margin:0;min-height:26px;padding:2px 8px} .tdn-lan-dau small{color:var(--chu-phu)} .tdn-lan-nd{font-size:calc(12.5px*var(--co));margin-top:3px} .tdn-lan-nd i{color:var(--chu-phu);font-style:normal} .tdn-xt{border:1.3px solid var(--vien);border-radius:10px;padding:8px 10px;margin:8px 0} .tdn-xt-dau{font-size:calc(13px*var(--co))} .tdn-xt-so{font-weight:700;margin:4px 0} .tdn-xt-ds{display:flex;flex-wrap:wrap;gap:4px} .tdn-xt-ds .tg{font-size:calc(11.5px*var(--co));padding:2px 7px;border-radius:6px;background:var(--xanh-nhat);color:var(--xanh-dam)} .tdn-xt-ds .tg.ct{background:var(--luc-nen);color:var(--luc)}.tdn-xt-ds .tg.phu{background:var(--vang-nen);color:var(--vang)}.tdn-xt-ds .tg.xam{background:var(--nen);color:var(--chu-phu)} @media (max-width:699px){ .tdn-3{flex-direction:column} .tdn-o small{white-space:normal} } /* ===== 3.73 — chế độ gọn 1 dòng / file ===== */ .sap button.sap-ico{padding-left:8px !important;padding-right:8px !important;min-width:0 !important;font-size:15px} .dong-gon .d2:not(.tdn-d){display:flex;align-items:center;gap:6px} .dong-gon .d2:not(.tdn-d) .h1{flex:1;min-width:0} .dong-gon .d2:not(.tdn-d) .h1 .ten{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dong-gon .d2:not(.tdn-d) .h2{flex:0 0 auto;margin-top:0} .dong-gon .d2:not(.tdn-d) .h2 .the{display:none} /* ===== 3.72 — tag chip hiện sẵn · gợi ý trên ô ===== */ .sua-gon .tg-hang{display:flex;flex-wrap:wrap;gap:4px;align-items:center;max-height:108px;overflow:auto;padding:1px 0} .sua-gon .tg-hang .tg-c{padding:0 8px !important;min-height:22px !important;line-height:20px;font-size:calc(11.5px*var(--co)) !important;margin:0 !important} .sua-gon .tg-hang .tg-c.goi{border-style:dashed;border-color:#6BB88A;color:var(--luc)} .sua-gon .tg-hang input{flex:0 0 110px;width:110px;min-height:22px !important;height:22px !important;padding:0 6px !important;font-size:calc(11.5px*var(--co)) !important;border-radius:11px} .sua-gon .sua-trai{position:relative} .sg-bong{position:absolute;z-index:8;max-width:min(520px,92%);background:var(--chu);color:var(--the);font-size:calc(11.5px*var(--co));line-height:1.35; padding:4px 9px;border-radius:7px;box-shadow:0 4px 12px rgba(0,0,0,.25);pointer-events:none} .sg-bong::after{content:"";position:absolute;left:16px;bottom:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--chu)} .sg-bong .sg-vd{color:#9FCBF0} /* ===== 3.71 — 📋 Chương trình vay ===== */ .ctv{display:flex;flex-direction:column;gap:6px} .ctv-tim{min-height:30px;padding:3px 9px} .ctv-seg button{padding:3px 9px} .ctv-the{border:1.3px solid var(--vien);border-radius:9px;background:var(--the)} .ctv-the.mo{border-color:var(--xanh)} .ctv-dau{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:5px 9px;cursor:pointer} .ctv-dau b{font-size:calc(12.5px*var(--co))} .ctv-vt{font-size:calc(11px*var(--co));color:var(--xanh-dam);background:var(--xanh-nhat);border-radius:5px;padding:0 5px} .ctv-so{margin-left:auto;display:flex;gap:6px;font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .ctv-so span:first-child{color:var(--luc);font-weight:700} .ctv-ct{width:100%;border-collapse:collapse;font-size:calc(12px*var(--co));border-top:1px dashed var(--vien)} .ctv-ct td{padding:4px 9px;vertical-align:top;border-bottom:1px dashed var(--vien);text-align:left} .ctv-ct td:first-child{width:28%;color:var(--chu-phu)} .ctv-ct ol{margin:0;padding-left:18px} .ctv-nhom{margin-bottom:4px} .ctv-the .hang-nut{padding:4px 9px} .ctv-bang{width:100%;border-collapse:collapse;font-size:calc(12px*var(--co))} .ctv-bang th,.ctv-bang td{border-bottom:1px solid var(--vien);padding:3px 6px;text-align:left;vertical-align:top} .ctv-bang th{color:var(--chu-phu);font-weight:600;position:sticky;top:0;background:var(--the)} .ctv-bang tr.dang td{background:var(--luc-nen)} .ctv-ma{font-weight:700;color:var(--xanh-dam);cursor:pointer;text-decoration:underline dotted} .ctv-nhan{font-size:10.5px;color:var(--luc);border:1px solid #C4E3D0;border-radius:8px;padding:0 5px;white-space:nowrap} .ctv-nguon{font-size:calc(11px*var(--co));color:var(--chu-phu)} /* ===== 3.79 — hộp sửa gọn trong 1 khung: chip tag nhỏ, hàng nút đáy thấp ===== */ .sua-gon .tg-hang{max-height:64px !important;gap:3px !important} .sua-gon .tg-hang input{order:-1} /* ô ＋ tag / lọc đứng đầu — không bị khuất khi nhiều tag */ .sua-gon .tg-hang .tg-c{min-height:19px !important;line-height:17px !important;padding:0 6px !important;font-size:calc(11px*var(--co)) !important;border-width:1px !important} .sua-gon .tg-hang input{min-height:19px !important;height:19px !important;font-size:calc(11px*var(--co)) !important} .sua-gon .sg-khoi textarea{min-height:30px !important;height:30px} .sua-gon .sg-hd{height:calc(30px*var(--co)) !important;margin:1px 0 4px !important} .hop-in.sua-gon .day-form{padding:5px 0 2px !important;margin-top:2px !important;min-height:0} .hop-in.sua-gon .day-form button{min-height:32px !important;height:32px;padding:2px 14px !important;flex:0 0 auto !important;min-width:96px} .hop-in.sua-gon .day-form .chinh{min-width:128px} .sua-gon .q-chip .the-loc{min-height:19px !important;line-height:17px !important;padding:0 6px !important;font-size:calc(11px*var(--co)) !important} .sua-gon .q-chip .goi-y{max-height:68px !important;gap:3px !important} /* ===== 3.96 — KTGS: 🗓 Kế hoạch năm 01/KH (lịch tháng ↔ ấp / tổ) ===== */ .kt-kh-bang select{font:inherit;padding:1px 4px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu)} .kt-kh-bang tr.kt-kh-ap td{background:var(--nen-phu,rgba(127,127,127,.08))}.kt-kh-bang td{white-space:nowrap}#kt-the .kt-kh-bang td:first-child{width:auto;min-width:0;text-align:left} /* ===== 3.95 — KTGS: 📋 Mẫu 04/BC-TH + ⚙ Khai báo Hội ===== */ .kt-bc-bang input[type=checkbox]{width:18px;height:18px;margin:0}#kt-the .kt-bc-bang td:first-child,#kt-the .kt-bc-bang th:first-child{width:auto;min-width:0} .kt-bc-bang input[type=date]{font:inherit;padding:1px 4px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu)} .kt-bc-bang small.vang{color:#a86f00}.kt-bc-bang td.kt-bc-tach{background:var(--nen,transparent);color:var(--chu-phu)} .kt-hkb-bang input,.kt-hkb-bang textarea{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);width:100%;box-sizing:border-box;min-width:90px}.kt-hkb-bang .kt-hkb-ten input{min-width:150px}.kt-hkb-bang .kt-hkb-doan textarea{min-width:190px;resize:vertical}.kt-hkb-bang .kt-hkb-ky input{min-width:130px}.kt-hkb-bang .kt-hkb-khNgay input,.kt-hkb-bang .kt-hkb-hdNgay input{min-width:84px}.kt-hkb-bang td{vertical-align:top} .kt-suy{max-height:320px;overflow:auto;margin:6px 0}.kt-suy table{border-collapse:collapse;font-size:12.5px;width:100%}.kt-suy th,.kt-suy td{border:1px solid var(--vien);padding:3px 6px;text-align:left;vertical-align:top}.kt-suy th{position:sticky;top:0;background:var(--the)}.kt-suy td.s{text-align:right} .kt-kb-khung{border:1px solid var(--vien);border-radius:8px;padding:6px 10px;margin:8px 0;background:var(--the)}.kt-kb-khung>summary{cursor:pointer;font-weight:600}.kt-kb-khung>summary small{font-weight:normal;color:#6b7480}.kt-kb-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2px 18px} .kt-hkb .kt-kb textarea{font:inherit;padding:4px 8px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);width:100%;box-sizing:border-box;resize:vertical} .kt-hkb-ds{max-height:64vh;overflow:auto} .kt-hdt-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:10px}.kt-hdt-the{border:1px solid var(--vien);border-radius:8px;padding:8px 12px;background:var(--the)}.kt-hdt-dau small{color:var(--chu-phu)} .kt-hdt-nhom{font-weight:600;font-size:calc(12px*var(--co));margin:8px 0 2px;color:var(--chu-phu)}.kt-hdt-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 12px} .kt-hdt-o{display:flex;flex-direction:column;gap:1px;min-width:0}.kt-hdt-o>span{font-size:calc(11.5px*var(--co));color:var(--chu-phu)}.kt-hdt-o.kt-hdt-day{grid-column:1/-1} .kt-hdt-o input{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);width:100%;box-sizing:border-box}.kt-hdt-o .hkb-in{max-width:none;min-width:0} .kt-in-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:6px 20px}.kt-in-phan .kt-kb select,.kt-in-khac .kt-kb input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}.kt-in-phan{min-width:0}.kt-in-phan{border:1px solid var(--vien);border-radius:8px;padding:6px 10px}.kt-in-cam{color:#b45309}.kt-in-khac{margin:8px 0}.kt-in-khac>summary{cursor:pointer} .kt-ngay-in{display:inline-flex;gap:6px;align-items:center;margin-right:8px}.kt-ngay-in input{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu)} /* 3.114 */ .kt-pc-ap{display:flex;flex-wrap:wrap;gap:4px 10px}.kt-pc-chip{display:inline-flex;gap:3px;align-items:center;white-space:nowrap}.kt-pc-bang td{vertical-align:top} /* 3.117 */ .sl-giu-ds{font-size:12px;color:var(--chu-phu)} .sl-giu{font-size:12px;display:inline-flex;gap:4px;align-items:center}.sl-giu select{font:inherit;padding:2px 4px} .sl-san{position:fixed;right:10px;bottom:44px;z-index:50;background:var(--the);color:var(--chu);border:1px solid var(--vien);border-radius:14px;padding:3px 10px;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.2);pointer-events:none} /* 3.125 */ .kt-hai-mat{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;margin:8px 0;text-align:left} /* 3.124 */ .kt-kh-cach{display:inline-flex;gap:4px}.kt-kh-chip{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end;margin:6px 0}.kt-kh-th{display:flex;flex-direction:column;align-items:center;min-width:44px;padding:3px 6px;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu);cursor:pointer;font:inherit;font-size:12px}.kt-kh-th small{font-size:10.5px;color:var(--chu-phu)}.kt-kh-th.bat{background:var(--xanh-nhat);border-color:var(--xanh);font-weight:600}.kt-kh-nhanh{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;margin-left:6px;font-size:12px}.kt-kh-nhanh button{white-space:nowrap} /* 3.123 */ .kt-pc-vt{margin:4px 0;font-size:13px;text-align:left}.kt-pc-vt select{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);max-width:100%}.kt-pc-vt .do-chu{color:var(--do)} .kt-pc-kiem{margin:8px 0;padding:6px 10px;text-align:left;border:1px solid var(--vien);border-radius:8px;font-size:12.5px}.kt-pc-kiem.vang{background:var(--vang-nen)}.kt-pc-kiem ul{margin:4px 0 0;padding-left:18px} /* 3.123 */ .kt-ten-loi{font-size:11.5px;color:var(--vang);margin-top:2px}.kt-ten-loi button{font-size:11px;padding:1px 6px;margin-left:4px} /* 3.123: rà tên */ .kt-hdt-dung{margin-top:6px}.kt-hdt-nhac{margin:6px 0}.kt-chuan-o{display:flex;gap:3px;align-items:center}.kt-chuan-o input{flex:1;min-width:170px}.kt-chuan input.da{border-color:#2e7d4f;background:rgba(46,125,79,.08)} /* 3.113 */ @media(max-width:600px){ .kt-hdt-ds{grid-template-columns:1fr} } @media(max-width:600px){ .kt-hkb .kt-kb{grid-template-columns:1fr;gap:2px} } /* ===== 3.94 — 👤 Tra cứu KH gọn: danh sách 2 dòng · kiểm trùng 2 ô · thẻ chia nhóm · bấm giá trị để chép (tiền tố .tc394 / .tc-the để thắng khối cũ) ===== */ @media(min-width:900px){ .tc394.tc-2cot{grid-template-columns:minmax(320px,2fr) minmax(0,3fr)} } /* 3.103 (anh chốt): trái / phải 40 / 60 — cột trái không còn mất chữ */ .tc394 .tc-hang{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.tc394 .tc-hang .sl-tra-o{flex:1 1 220px;margin:0}.tc394 .tc-pv{margin:0;flex:0 1 auto}.tc394 .tc-pv>summary{font-size:calc(12px*var(--co))} .tc394 .tc-pv[open]{flex-basis:100%} .tc394 .sl-kq-dong{padding:3px 8px;margin:2px 0;border-radius:7px}.tc394 .sl-kq-dong small{font-size:calc(11px*var(--co));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tc-d1{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}.tc-d1 b{font-size:calc(13.5px*var(--co))} .tc-nh{font-size:calc(10.5px*var(--co));border:1px solid var(--vien);border-radius:9px;padding:0 6px;color:var(--chu-phu);white-space:nowrap} .tc-nh.xanh{background:var(--luc-nen);color:var(--luc);border-color:#bfe3cb}.tc-nh.vang{background:var(--vang-nen);color:var(--vang);border-color:#e0b84a}.tc-nh.do{background:var(--do-nen);color:var(--do);border-color:#e39a8f} .tc-kt{border:1px solid var(--vien);border-radius:9px;padding:4px 8px;margin:6px 0;background:var(--the)}.tc-kt>summary{cursor:pointer;font-weight:600;font-size:calc(13px*var(--co))} .tc-kt-o{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.tc-kt-o input{flex:1 1 140px;font:inherit;padding:5px 8px;border:1px solid var(--vien);border-radius:7px;background:var(--the);color:var(--chu)} .tc-tr-nhom{border-left:3px solid var(--vien);padding-left:8px;margin:6px 0}#tc-ct .tc-tr-nhom{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:0 8px}#tc-ct .tc-tr-tit{grid-column:1/-1} .tc394 .tc-trai{min-width:0}.tc394 .sl-kq-dong{overflow:hidden}.tc-the .hang-nut button{flex:0 0 auto;width:auto;min-height:28px;padding:2px 10px}.tc-tr-nhom.do{border-color:#e39a8f}.tc-tr-nhom.cam{border-color:#e8a15a}.tc-tr-nhom.vang{border-color:#e0b84a} .tc-tr-tit{font-weight:600;font-size:calc(12.5px*var(--co));margin:2px 0} .tc-tr-the{border:1px solid var(--vien);border-radius:8px;padding:4px 8px;margin:4px 0;font-size:calc(12px*var(--co))}.tc-tr-ct{color:var(--chu-phu);margin-top:2px}.tc-tr-ct b.do,.tc-the b.do{color:var(--do)} .tc-tr-the .hang-nut{margin:3px 0 0}.tc-tr-the .hang-nut button,.tc-nut button{flex:0 0 auto;width:auto;min-height:28px;padding:2px 10px} .tc-chep{cursor:copy;border-bottom:1px dotted var(--chu-phu);font-weight:600}.tc-chep:hover{color:var(--xanh);border-bottom-color:var(--xanh)}.tc-chep:hover::after{content:' 📋';font-size:.8em}.tc-thieu{color:var(--chu-phu)} .tc-the .tc-ct-tit,.tc-the .hop-tit{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:calc(16px*var(--co));font-weight:700}.tc-the .tc-ct-tit small,.tc-the .hop-tit small{font-size:calc(12px*var(--co));font-weight:400;color:var(--chu-phu)} #tc-nhan{display:inline-flex;gap:4px;flex-wrap:wrap} .tc-so{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:6px 0}.tc-o{border:1px solid var(--vien);border-radius:8px;padding:3px 7px;background:var(--nen)} .tc-o span{display:block;font-size:calc(10.5px*var(--co));color:var(--chu-phu)}.tc-o b{font-size:calc(13.5px*var(--co));font-variant-numeric:tabular-nums}.tc-o.do b{color:var(--do)}.tc-o.vang b{color:#a86f00} @media(max-width:560px){ .tc-so{grid-template-columns:repeat(3,minmax(0,1fr))} } .tc-the{text-align:left}.tc-the .tc-nhom-tit{text-align:left} .tc-nhom{margin:6px 0}.tc-nhom-tit{font-size:calc(11px*var(--co));text-transform:uppercase;letter-spacing:.04em;color:var(--chu-phu);font-weight:600;border-bottom:1px solid var(--vien);margin-bottom:3px} .tc-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 14px} .tc-dl{display:flex;gap:8px;font-size:calc(12.5px*var(--co));padding:1px 0;min-width:0}.tc-dl>span{flex:0 0 92px;color:var(--chu-phu)}.tc-dl>div{flex:1;min-width:0;word-break:break-word} .tc-dl b.xanh{color:var(--luc)}.tc-dl b.vang{color:#a86f00}.tc-dl b.do{color:var(--do)} .tc-mon-cuon{overflow-x:auto}.tc-the table.tc-mon{font-size:calc(12px*var(--co));width:100%}.tc-the table.tc-mon td,.tc-the table.tc-mon th{padding:3px 6px;vertical-align:top} .tc-the table.tc-mon small{display:block;color:var(--chu-phu)}.tc-mon tr.tc-hs td{background:var(--nen);font-size:calc(11.5px*var(--co));padding-left:14px}.tc-hs .hs-truong{color:#1f5c99}.tc-hs .hs-khoa{color:#9a4a00;background:#fff1dc;border:1px solid #f0c48a;border-radius:5px;padding:0 5px;white-space:nowrap}:root[data-theme="dark"] .tc-hs .hs-truong{color:#8cc4f5}:root[data-theme="dark"] .tc-hs .hs-khoa{color:#ffc27a;background:#3a2a16;border-color:#7a5320}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tc-hs .hs-truong{color:#8cc4f5}:root:not([data-theme="light"]) .tc-hs .hs-khoa{color:#ffc27a;background:#3a2a16;border-color:#7a5320}}.tc-mon tr.tc-xong td{color:var(--chu-phu)}.tc-mon tr.tc-cong td{font-weight:600;border-top:1px solid var(--vien)} /* ===== 3.93 — 🛡 KTGS Hội đoàn thể: thanh BC0437 / BC0438 · bảng tổ có xếp loại · chọn hộ Mẫu 06 · hộp khai báo khi in ===== */ #tr7 .kt-dau{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} .ky-chip{font-size:calc(12px*var(--co));border:1px solid #7cc49a;background:var(--luc-nen);color:var(--luc);border-radius:11px;padding:1px 9px}.ky-chip.lech{border-color:#e0a800;background:#fff4d6;color:var(--vang)} .kt-bc{font-size:calc(12px*var(--co));border:1px dashed var(--vien);border-radius:11px;padding:1px 9px;color:var(--chu-phu)}.kt-bc.co{border-style:solid;border-color:#7cc49a;background:var(--luc-nen);color:var(--luc)} .kt-hoi{margin-top:4px;font-size:calc(12px*var(--co));color:var(--chu-phu)}.kt-hoi .nhan-nhom{display:block;margin:2px 0}.kt-hoi b{color:var(--chu)} .to-bang td.xanh,.to-the-so b.xanh{color:var(--luc);font-weight:600}.to-bang td.vang,.to-the-so b.vang{color:#a86f00;font-weight:600}.to-bang td.do,.to-the-so b.do{color:var(--do);font-weight:600} .kt-chon{margin-top:8px}.kt-chon .nhan-nhom{margin:0 0 4px} .kt-kieu,.kt-loc{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:4px 0} .kt-so{display:inline-flex;align-items:center;gap:4px;font-size:calc(12.5px*var(--co))}.kt-so b{min-width:22px;text-align:center} .kt-bang td{vertical-align:top}.kt-bang td:nth-child(5),.kt-bang td:nth-child(8){white-space:normal;min-width:180px} .kt-bang tr.kt-co td{background:#eef7f0}.kt-bang tr.kt-loai td{color:var(--chu-phu)} .kt-nh{font-size:calc(11px*var(--co));border-radius:9px;padding:0 6px;border:1px solid var(--vien);white-space:nowrap} .kt-nh.xanh{background:var(--luc-nen);color:var(--luc);border-color:#bfe3cb}.kt-nh.vang{background:var(--vang-nen);color:var(--vang);border-color:#e0b84a}.kt-nh.do{background:var(--do-nen);color:var(--do);border-color:#e39a8f} .kt-ku{color:#77808a;font-size:.88em}.kt-mon+.kt-mon{border-top:1px dotted var(--vien)} .kt-bang small.vang{color:#a86f00} .kt-in{margin-top:8px} .kt-hdt-pc{margin-left:6px;vertical-align:middle} .kt-pc-kb{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px 10px;margin:6px 0}.kt-pc-kb label{display:flex;flex-direction:column;font-size:12px;gap:2px}.kt-pc-kb input{font:inherit;padding:4px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu)} #tr7 .kt-dau button,#tr7 .kt-kieu button,#tr7 .kt-loc button,#tr7 .kt-in button{flex:0 0 auto;width:auto} #tr7 .kt-so button{min-width:30px;min-height:28px;padding:0 8px} .kt-bang input[type=checkbox]{width:18px;height:18px;margin:0}#kt-the .to-bang td:first-child,#kt-the .to-bang th:first-child{width:36px;min-width:36px;text-align:center;position:static;border-right:0} @media(max-width:600px){ #kt-cay .to-cap{grid-template-columns:84px 1fr} #kt-cay .to-cap .to-chips{grid-column:1/-1} } .kt-kb{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;margin:5px 0;font-size:calc(13px*var(--co))} .kt-kb input{font:inherit;padding:4px 8px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);width:100%;box-sizing:border-box} #tr7 .kt-nap{margin:6px 0}#tr7 .kt-nap>summary b.xanh{color:var(--luc)}#tr7 .kt-nap>summary b.do{color:var(--do)}#tr7 .kt-nap>summary b.vang{color:#a86f00} #tr7 .kt-nap .hang-nut button{flex:0 0 auto;width:auto;min-height:30px;padding:3px 12px}.kt-kt{margin-top:6px}#tr7 .kt-nap .hang-nut{align-items:center;gap:8px} .kt-muc{border:1px solid var(--vien);border-radius:8px;margin:4px 0;padding:3px 8px;background:var(--the)}.kt-muc>summary{cursor:pointer;font-size:calc(12.5px*var(--co))}.kt-muc>summary small{color:var(--chu-phu)} .kt-muc.c>summary b{color:var(--luc)}.kt-muc.k{border-color:#e39a8f}.kt-muc.k>summary b{color:var(--do)}.kt-muc.v{border-color:#e0b84a}.kt-muc.v>summary b{color:#a86f00}.kt-muc .to-bang-cuon{margin:4px 0;max-height:320px;overflow:auto} .kt-ng{max-height:62vh;overflow:auto}.kt-ng td{white-space:normal;vertical-align:top}.kt-ng td.kt-ng-goc{color:var(--chu-phu);min-width:200px}.kt-ng input{font:inherit;width:100%;min-width:180px;box-sizing:border-box;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu)} .kt-che{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}#tr7 .kt-che button{flex:0 0 auto} .kt-gn-dau{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:4px 0 6px;font-size:calc(13px*var(--co))}.kt-gn-dau select{font:inherit;padding:2px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu)} .kt-gn-bang input[type=checkbox]{width:18px;height:18px;margin:0}#kt-the .kt-gn-bang td:first-child,#kt-the .kt-gn-bang th:first-child{width:auto;min-width:0}.kt-gn-bang small.vang{color:#a86f00} .kt-kq div{padding:3px 0;font-size:calc(13px*var(--co))}.kt-kq .xanh{color:var(--luc)}.kt-kq .do{color:var(--do)} /* ===== 3.92 — Tra cứu KH 2 cột (≥ 900 px): trái tìm + danh sách gọn, phải chi tiết ===== */ .tc-2cot{display:block} @media(min-width:900px){ .tc-2cot{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:12px;align-items:start} .tc-phai{display:block;position:sticky;top:6px;max-height:calc(100vh - 120px);overflow:auto;border:1px solid var(--vien);border-radius:10px;padding:8px 12px;background:var(--the)} .tc-trai #sl-kq{max-height:calc(100vh - 260px);overflow:auto} } @media(max-width:899px){ .tc-phai{display:none} } .tc-trai .sl-kq-dong{padding:4px 8px;margin:2px 0}.tc-trai .sl-kq-dong b{font-size:calc(13.5px*var(--co))}.tc-trai .sl-kq-dong .tc-tt{font-size:calc(11.5px*var(--co))}.tc-trai .sl-kq-dong small{font-size:calc(11px*var(--co))} .sl-kq-dong.chon{border-color:var(--xanh);background:var(--nen);box-shadow:inset 3px 0 0 var(--xanh)} .tc-ct-tit{font-size:calc(16px*var(--co));font-weight:700} .hkb-in{font-size:calc(10.5px*var(--co));line-height:1.3;margin-top:2px;max-width:260px;min-width:170px;display:flex;gap:4px;align-items:flex-start;white-space:normal}.hkb-in>span{min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.hkb-in .tu{color:var(--chu-phu)}.hkb-in .da{color:#2e7d4f;font-weight:600}.hkb-in .cam{color:#b45309;font-weight:600}.hkb-ve{flex:0 0 auto;min-height:0;padding:0 5px;font-size:11px;line-height:16px} /* 3.106 */ /* 3.103 (anh chốt): tên hộ vay + mã KH luôn nổi bật khi tra cứu */ .tc-ten{color:var(--xanh-dam)}.tc-ten.to{font-size:calc(19px*var(--co));font-weight:800;letter-spacing:.2px}.tc-ten.to *{color:inherit}.tc-ma{display:inline-block;background:var(--xanh-nhat);color:var(--xanh-dam);border:1px solid var(--xanh);border-radius:6px;padding:0 6px;font-weight:700;font-size:calc(12.5px*var(--co));font-variant-numeric:tabular-nums;white-space:nowrap}.tc-ma.to{font-size:calc(15px*var(--co));padding:1px 8px}.tc-ma.to *{color:inherit}.tc-ct-phu{color:var(--chu-phu);font-size:calc(12px*var(--co));margin-bottom:6px} .tc-phai .kh-luoi{gap:4px 10px}.tc-phai table.kh-mon{font-size:calc(12px*var(--co))} /* ===== 3.92 — Sao kê: thanh trên (số liệu · khổ · Xem) · chọn 1 báo cáo, nhóm 2 cột · khung xem trước rộng ===== */ .sk-thanh{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;position:sticky;top:0;z-index:3;background:var(--nen);padding:6px 0;border-bottom:1px solid var(--vien);margin-bottom:6px} .sk-thanh select{font:inherit;font-size:calc(13px*var(--co));padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu)} .sk-kho{display:inline-flex;align-items:center;gap:4px;font-size:calc(12.5px*var(--co));color:var(--chu-phu)}.sk-kho button.bat{background:var(--xanh);border-color:var(--xanh);color:#fff} .sk-thanh .sk-xem{margin-left:auto;min-width:120px} .sk-luoi{display:grid;grid-template-columns:1fr;gap:8px}@media(min-width:900px){.sk-luoi{grid-template-columns:1fr 1fr}} .sk-nhom{border:1px solid var(--vien);border-radius:8px;padding:6px 10px;background:var(--the);min-width:0} .sk-nhom-ten{font-size:calc(11px*var(--co));text-transform:uppercase;letter-spacing:.04em;color:var(--chu-phu);font-weight:600;margin-bottom:2px} .sk-bc{display:flex;gap:6px;align-items:flex-start;padding:2px 4px;border-radius:6px;cursor:pointer;font-size:calc(13px*var(--co))}.sk-bc:hover{background:var(--nen)}.sk-bc input{margin-top:3px}.sk-bc small{color:var(--chu-phu)} #tr7 .sk-ngay1{margin:6px 0;padding:5px 8px;border-radius:8px;background:var(--nen)} #hop-in.xem-rong{max-width:min(1600px,97vw);width:97vw}#hop-in.xem-rong .to-khung{height:80vh} /* ===== 3.92 — Tổ TK&VV gọn: ô tìm cùng hàng · chip nhỏ · thẻ tổ 2 dòng · danh sách tổ viên có lọc · bảng các tổ (tiền tố #tr7 để thắng khối 3.88 phía sau) ===== */ #tr7 .to-dau{gap:8px;margin-bottom:6px}#tr7 .to-dau .to-tim{flex:1;min-width:220px;padding:3px 10px;border-width:1px;border-radius:8px} #tr7 .to-dau .to-tim input{font-size:calc(13.5px*var(--co))} #tr7 .to-cay{gap:3px;margin:6px 0}#tr7 .to-cap{grid-template-columns:90px minmax(0,240px) 1fr;gap:6px} #tr7 .to-cap label{font-size:calc(12.5px*var(--co));padding-top:3px}#tr7 .to-cap select{font-size:calc(12px*var(--co));padding:2px 6px;border-radius:6px} #tr7 .to-chips{gap:3px}#tr7 .to-chip{font-size:calc(11.5px*var(--co));padding:1px 8px;border-radius:11px;line-height:1.5} #tr7 .to-the{border-width:1px;border-radius:8px;padding:5px 10px;margin:6px 0} #tr7 .to-the-ten{font-size:calc(13.5px*var(--co))}#tr7 .to-the-ten .to-the-phu{font-size:calc(12px*var(--co));margin:0} .to-the-so{font-size:calc(12px*var(--co));color:var(--chu-phu);margin-top:2px;font-variant-numeric:tabular-nums}.to-the-so b{color:var(--chu)} .to-the-so b.do,.to-bang b.do,.to-bang .do{color:var(--do)} .to-loc-hang{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0} .to-loc{border:1px solid var(--vien);background:var(--the);color:var(--chu);border-radius:11px;padding:1px 9px;font:inherit;font-size:calc(11.5px*var(--co));cursor:pointer} .to-loc.vang{border-color:#e0b84a;background:var(--vang-nen)}.to-loc.do{border-color:#e39a8f;background:var(--do-nen)}.to-loc.bat{outline:2px solid var(--xanh);font-weight:600} .to-bang-cuon{overflow-x:auto;border:1px solid var(--vien);border-radius:8px;background:var(--the)} .to-bang{border-collapse:collapse;width:100%;font-size:calc(12px*var(--co));font-variant-numeric:tabular-nums} .to-bang th,.to-bang td{padding:3px 7px;border-bottom:1px solid var(--vien);white-space:nowrap;text-align:left} .to-bang th{font-size:calc(11px*var(--co));color:var(--chu-phu);background:var(--nen);position:sticky;top:0} .to-bang td.s{text-align:right}.to-bang td.c{text-align:center;width:1%}.to-bang tr.to-ra td{background:var(--do-nen)}.to-bang tr.to-xen td{background:var(--nen)}.to-bang tr.tong td{font-weight:600;background:var(--nen)}.to-bang tr.nhom td{font-weight:600;background:var(--xanh-nhat)}.to-bang-pgd tr.diem td{font-size:.95em} .to-bang.chon tbody tr:not(.tong){cursor:pointer}.to-bang.chon tbody tr:not(.tong):hover td{background:var(--nen)} .to-cc{border-radius:9px;padding:0 6px;font-size:calc(11px*var(--co))}.to-cc.ok{background:var(--luc-nen);color:var(--luc)}.to-cc.het{background:var(--do-nen);color:var(--do)} #tr7 .to-bc{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:8px}#tr7 .to-bc .to-bc-dong{display:inline-block;padding:2px} #tr7 .to-bc .nhan-nhom{margin:0} /* ===== 3.91 — nhóm ma trận sổ / gọn · chọn tháng chữ Việt · 2 khung · kiểm tra & chốt · nợ đến hạn ===== */ .sl-thang-ten{min-width:92px;font-weight:700} .sl-nam{display:flex;gap:10px;align-items:center;justify-content:center;margin:6px 0} .sl-luoi-thang{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .sl-luoi-thang button{border:1px solid var(--vien);background:var(--nen);color:var(--chu);border-radius:9px;padding:8px 4px;font:inherit;cursor:pointer} .sl-luoi-thang button.co{border-color:var(--luc)}.sl-luoi-thang button.bat{background:var(--xanh);border-color:var(--xanh);color:#fff;font-weight:700} .sl-bang tr.sl-nh-dong td{background:var(--nen);cursor:pointer} .sl-bang tr.sl-nh-dong td.bdc-ten{font-weight:700;color:var(--xanh-dam)} .sl-bang tr.sl-nh-dong td.bdc-ten::after{content:" ▸";color:var(--chu-phu)}.sl-bang tr.sl-nh-dong.mo td.bdc-ten::after{content:" ▾"} .sl-bang td.sl-nh-o{text-align:center} .sl-bang td.sl-con-ten{padding-left:26px !important} .sl-chipn{display:inline-block;border-radius:12px;padding:1px 8px;font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .sl-chipn.du{background:var(--luc-nen);color:var(--luc);font-weight:700}.sl-chipn.thieu{background:var(--do-nen);color:var(--do);font-weight:700}.sl-chipn.co{background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:700} .sl-bang th.khoa{color:#5b4bb7} .sl-mt-cuon .sl-bang .bdc-o.sl-o.khoa{background:#ece9fb;color:#5b4bb7;border:1px solid #cfc8f3;cursor:default} .sl-mt-cuon .sl-bang .bdc-o.sl-o.du.khoa{cursor:pointer} .sl-pill.khoa,.sl-bao.khoa{background:#ece9fb;color:#3f3290;border-color:#5b4bb7} .sl-bao.khoa small{display:block;color:inherit;opacity:.85} .sl-kt-thang{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:var(--xanh-nhat);border-radius:10px;padding:8px 10px;text-align:left} .sl-kt-thang b{font-size:calc(16px*var(--co));color:var(--xanh-dam)}.sl-kt-thang-nut{margin-left:auto;display:flex;gap:4px} .sl-kt-thang .nho{min-height:0 !important;padding:4px 10px !important;flex:0 0 auto !important} .sl-4buoc{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0} .sl-4buoc span{border:1px solid var(--vien);border-radius:9px;padding:5px 4px;font-size:calc(12px*var(--co));font-weight:600;text-align:center;color:var(--chu-phu);background:var(--the)} .sl-4buoc span.xong{border-color:var(--luc);background:var(--luc-nen);color:var(--luc)}.sl-4buoc span.dang{border-color:var(--xanh);background:var(--xanh-nhat);color:var(--xanh-dam)} .sl-4buoc span.khoa{border-color:#5b4bb7;background:#ece9fb;color:#5b4bb7} .sl-nut-khoa{background:#5b4bb7 !important;border-color:#5b4bb7 !important} .sl-hai-chon{display:none;gap:6px;margin:6px 0} .sl-hai-chon button{flex:1;border:1px solid var(--vien);background:var(--the);color:var(--chu);border-radius:20px;padding:6px;font:inherit;font-weight:600;cursor:pointer} .sl-hai-chon button.bat{background:var(--xanh);color:#fff;border-color:var(--xanh)} .sl-k{min-width:0} @media(min-width:1100px){ .sl-hai{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start} } @media(max-width:899px){ .sl-hai-chon{display:flex} .sl-hai{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none} .sl-hai::-webkit-scrollbar{display:none} .sl-hai > .sl-k{flex:0 0 100%;scroll-snap-align:start} } /* ===== 3.90.1 — ma trận gọn · ① 1 dòng · bảng đối chiếu chéo · file rác ===== */ .sl-tt{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;text-align:left;border:1px solid var(--vien);border-radius:12px;padding:8px 12px;background:var(--the);margin:8px 0} .sl-pill{border-radius:20px;padding:2px 10px;font-weight:600;font-size:calc(12.5px*var(--co))} .sl-pill.xanh{background:var(--luc-nen);color:var(--luc)}.sl-pill.do{background:var(--do-nen);color:var(--do)}.sl-pill.vang{background:var(--vang-nen);color:var(--vang)} .sl-tt-thieu{color:var(--do);font-size:calc(12.5px*var(--co))} .sl-lk{border:0;background:none;padding:0;font:inherit;color:var(--do);text-decoration:underline;cursor:pointer} .sl-tt-nut{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px} @media(max-width:420px){ .ban-goc{font-size:10px !important;padding:1px 4px !important;margin-left:3px !important} } /* số bản dài (3.90.1) không đẩy nút ⚙ xuống dòng */ .sl-mt-cuon{max-height:none}.sl-mt-cuon .bdc-ten{white-space:nowrap} .sl-mt-cuon .sl-bang .bdc-o.sl-o{min-width:76px;padding:3px 5px} .sl-mt-dau{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;text-align:left;margin:6px 0 4px}.sl-mt-dau .sl-phu{font-size:calc(12px*var(--co))}.sl-mt-dau .sl-tq-nut{margin-left:auto} .sl-nh{display:inline-block;width:17px;height:17px;border-radius:50%;font-size:10.5px;line-height:17px;text-align:center;margin-right:5px;font-weight:700;color:#fff;background:var(--chu-phu);vertical-align:1px} .sl-nh.A{background:var(--xanh)}.sl-nh.B{background:var(--luc)}.sl-nh.C{background:var(--vang)}.sl-nh.X{background:var(--do)} .sl-dc{text-align:left;margin:4px 0 8px} .sl-dc-pv{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px} .sl-dc-bang{border-collapse:collapse;font-variant-numeric:tabular-nums} .sl-dc-bang th,.sl-dc-bang td{border:1px solid var(--vien);padding:4px 7px;font-size:calc(12.5px*var(--co))} .sl-dc-bang th{background:var(--xanh-nhat);color:var(--xanh-dam)}.sl-dc-bang th small{display:block;font-weight:400;font-size:.8em;color:var(--chu-phu)} .sl-dc-bang td.ct{font-weight:600;white-space:nowrap} .sl-dc-bang td.o{text-align:right;white-space:nowrap}.sl-dc-bang td.o em{display:block;font-style:normal;font-size:.8em;font-weight:700} .sl-dc-bang td.c{font-weight:700}.sl-dc-bang td.c em{color:var(--xanh-dam);font-weight:400} .sl-dc-bang td.k{background:var(--luc-nen)}.sl-dc-bang td.k em{color:var(--luc)} .sl-dc-bang td.l{background:var(--do-nen);cursor:pointer}.sl-dc-bang td.l em{color:var(--do)} .sl-dc-bang td.v{background:var(--vang-nen);cursor:pointer}.sl-dc-bang td.v em{color:var(--vang)} .sl-dc-bang td.x{color:var(--chu-phu);text-align:center} .sl-dc-chu{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-top:4px} .sl-dc-chu .k::before,.sl-dc-chu .l::before,.sl-dc-chu .v::before{content:"";display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px} .sl-dc-chu .k::before{background:var(--luc-nen);border:1px solid var(--luc)}.sl-dc-chu .l::before{background:var(--do-nen);border:1px solid var(--do)}.sl-dc-chu .v::before{background:var(--vang-nen);border:1px solid var(--vang)} #sl-dc-chi{margin-top:6px} .sl-rac{display:grid;gap:5px;max-height:55vh;overflow:auto;text-align:left} .sl-rac label{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;border:1px solid var(--vien);border-radius:9px;padding:6px 10px;cursor:pointer} .sl-rac label small{display:block;color:var(--chu-phu)} /* ===== 3.90 — Số liệu: nhóm file Ⓐ Ⓑ Ⓒ Ⓓ · Tổng hợp ===== */ .sl-nhom-dong td{background:var(--xanh-nhat) !important;font-weight:700;text-align:left;font-size:calc(12px*var(--co))} .sl-ft-nhom{font-weight:700;text-align:left;margin:10px 0 4px;color:var(--xanh-dam)}.sl-ft-nhom .xanh{color:var(--luc)}.sl-ft-nhom .do{color:var(--do)} .sl-ft-xoa{justify-content:flex-start;margin-top:6px} .sl-qldl{text-align:left;margin-top:10px}.sl-qldl summary{cursor:pointer;font-weight:600} .th-bo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;text-align:left} .th-cot{min-width:0}.th-mo{opacity:.55} .th-loc{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0}.th-loc label{display:flex;flex-direction:column;gap:3px;font-weight:600} .th-loc select{font:inherit;font-weight:400;font-size:calc(13px*var(--co));padding:5px 8px;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu);max-width:100%} @media(max-width:899px){ .th-bo{grid-template-columns:1fr} } /* ===== 3.89 — Tra cứu kiểm trùng · Sao kê ===== */ .sl-con{overflow-x:auto;scrollbar-width:none}.sl-con button{white-space:nowrap;flex:0 0 auto} /* 4 tab con trên 1 hàng, điện thoại vuốt ngang */ .sl-bao.xanh{border-color:var(--luc);background:var(--luc-nen)} .sl-bao ul{margin:4px 0 2px 18px;padding:0}.sl-bao small{display:block;color:var(--chu-phu);margin-top:3px} .sl-kq-dong .tc-tt{font-size:calc(12px*var(--co));color:var(--xanh-dam)}.sl-kq-dong.tat .tc-tt{color:var(--chu-phu)} .sl-kq-dong.phu{border-style:dashed} .tc-pv{margin:0 0 8px}.tc-pv summary b{color:var(--chu)} .sk-ngay{margin:0 0 6px 26px;font-size:calc(13px*var(--co))}.sk-ngay input{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:7px;background:var(--the);color:var(--chu)} /* ===== 3.88 — Tổ TK&VV ===== */ .to-dau,.to-tim,#to-gy,.to-cay,#to-the{text-align:left} .to-dau{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px} .to-dau select,.to-cap select{font:inherit;font-size:calc(13px*var(--co));padding:5px 8px;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu);max-width:100%} .to-tim{display:flex;align-items:center;gap:8px;border:1.5px solid var(--xanh);border-radius:12px;padding:6px 12px;background:var(--the)} .to-tim input{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:calc(15px*var(--co));color:var(--chu);min-width:0} #to-gy{display:grid;gap:3px;margin:4px 0} #to-gy button{text-align:left;border:1px solid var(--vien);border-radius:9px;padding:5px 10px;background:var(--the);font:inherit;color:var(--chu);cursor:pointer} #to-gy button:hover{border-color:var(--xanh)} #to-gy small{color:var(--chu-phu)} .to-cay{display:grid;gap:6px;margin:10px 0} .to-cap{display:grid;grid-template-columns:110px minmax(0,320px) 1fr;gap:8px;align-items:start} .to-cap label{font-weight:600;padding-top:6px}.to-cap.mo{opacity:.5} .to-chips{display:flex;flex-wrap:wrap;gap:4px} .to-chip{border:1px solid var(--vien);background:var(--the);color:var(--chu);border-radius:14px;padding:3px 10px;font:inherit;font-size:calc(12.5px*var(--co));cursor:pointer} .to-chip:hover{border-color:var(--xanh)}.to-chip.bat{background:var(--xanh);border-color:var(--xanh);color:#fff} .to-the{border:1.5px solid var(--xanh);border-radius:12px;padding:8px 12px;background:var(--the);margin-top:6px} .to-the-ten{font-size:calc(15px*var(--co))}.to-the-phu{color:var(--chu-phu);font-size:calc(12.5px*var(--co));margin:2px 0 6px} .to-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px} .to-kpi div{border:1px solid var(--vien);border-radius:8px;padding:4px 8px;background:var(--nen)}.to-kpi small{display:block;color:var(--chu-phu);font-size:calc(11px*var(--co))} .to-bc{margin-top:8px}.to-bc-dong{display:block;padding:4px 2px;cursor:pointer} .to-khung{width:100%;height:70vh;border:1px solid var(--vien);border-radius:8px;background:#fff} @media(max-width:699px){ .to-cap{grid-template-columns:1fr} .to-cap label{padding-top:0} } /* ===== 3.88 — Số liệu: luồng theo tháng + kiểm tra ===== */ .sl-thang{display:inline-flex;gap:4px;align-items:center} .sl-thang input{font:inherit;font-size:calc(13px*var(--co));padding:4px 6px;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu)} .sl-buoc{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0} .sl-buoc span{border:1px solid var(--vien);border-radius:10px;padding:6px 10px;background:var(--the);font-weight:600;text-align:left} .sl-buoc span small{display:block;font-weight:400;color:var(--chu-phu);font-size:calc(11.5px*var(--co))} .sl-buoc .xong{border-color:var(--luc);background:var(--luc-nen)}.sl-buoc .vang{border-color:var(--vang);background:var(--vang-nen)}.sl-buoc .do{border-color:var(--do);background:var(--do-nen)}.sl-buoc .mo{opacity:.55} .sl-ft,.sl-ft-ngay{display:grid;gap:4px;text-align:left} .sl-ft-ngay{margin-top:8px} .sl-ft-dong{display:grid;grid-template-columns:minmax(150px,240px) 1fr auto;gap:8px;align-items:center;border:1px solid var(--vien);border-radius:9px;padding:5px 10px;background:var(--the)} .sl-ft-dong.thieu{border-color:var(--do)} .sl-ft-ten{font-weight:600}.sl-ft-tt{font-size:calc(12.5px*var(--co))} .sl-ft .xanh{color:var(--luc)}.sl-ft .do{color:var(--do)}.sl-ft .vang{color:var(--vang)}.sl-phu{color:var(--chu-phu)} .sl-chip-ngay{border:1px solid var(--xanh);background:var(--xanh-nhat);color:var(--chu);border-radius:12px;padding:2px 9px;margin:1px 3px 1px 0;font:inherit;font-size:calc(12px*var(--co));cursor:pointer} .sl-chip-ngay.vang{border-color:var(--vang);background:var(--vang-nen)} .sl-kt-dau{display:flex;gap:10px;align-items:center;flex-wrap:wrap;text-align:left;margin-bottom:6px} .sl-kt-nhom{font-weight:700;margin:8px 0 3px;text-align:left;color:var(--xanh-dam)} .sl-kt-muc{border:1px solid var(--vien);border-radius:9px;padding:5px 10px;background:var(--the);margin-bottom:3px;text-align:left;font-size:calc(13px*var(--co))} .sl-kt-muc summary{cursor:pointer}.sl-kt-muc .ic{display:inline-block;width:1.4em} .sl-kt-muc.lech{border-color:var(--do)}.sl-kt-muc.canh{border-color:var(--vang)}.sl-kt-muc.bo{opacity:.65} .sl-kt-chi{color:var(--chu-phu);margin:4px 0} .sl-kt-bang{overflow:auto;max-height:320px;margin-top:4px} .sl-kt-bang table{border-collapse:collapse;width:100%;font-size:calc(12px*var(--co))} .sl-kt-bang th,.sl-kt-bang td{border:1px solid var(--vien);padding:2px 6px;text-align:left}.sl-kt-bang td.so{text-align:right;white-space:nowrap} .sl-tq{margin:10px 0;text-align:left}.sl-tq summary{cursor:pointer;font-weight:700;color:var(--xanh-dam)} .sl-tq-nut{display:flex;gap:4px;justify-content:flex-end;margin:4px 0} @media(max-width:699px){ .sl-buoc{grid-template-columns:1fr} .sl-ft-dong{grid-template-columns:1fr auto} .sl-ft-tt{grid-column:1/-1;grid-row:2} } /* ===== 3.87 — Số liệu: Mẫu 10 theo ngày ===== */ .sl-ngay-dong{cursor:pointer} .sl-ngay-dong:hover .sl-tom-dong{border-color:var(--xanh)} /* ===== 3.86 — Số liệu: tab con, tra cứu KH ===== */ .sl-con{display:flex;gap:4px;margin:2px 0 10px;border-bottom:1px solid var(--vien)} .sl-con-nap{align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:4px 2px 8px}.sl-con-nap b{font-size:calc(14px*var(--co))}.sl-con-nap span{font-size:calc(11.5px*var(--co));color:var(--chu-phu)} /* 3.144: tab Nạp & KT riêng */ .sl-ktgs-nap{margin-top:12px}.sl-ktgs-tit{display:block;margin:0 0 4px;font-size:calc(13px*var(--co))}.kt-nap-chuyen{margin:6px 0} .sl-con button{border:none;background:none;font:inherit;font-size:calc(13px*var(--co));font-weight:600;color:var(--chu-phu);padding:7px 12px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px} .sl-con button.bat{color:var(--xanh-dam);border-bottom-color:var(--xanh)} .sl-tra{text-align:left} .sl-tra-o{display:flex;align-items:center;gap:8px;border:1.5px solid var(--xanh);border-radius:12px;padding:6px 12px;background:var(--the)} .sl-tra-o input{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:calc(15px*var(--co));color:var(--chu);min-width:0} #sl-kq{display:grid;gap:4px;margin-top:8px} .sl-kq-dong{border:1px solid var(--vien);border-radius:10px;padding:7px 11px;background:var(--the);cursor:pointer} .sl-kq-dong:hover{border-color:var(--xanh);background:var(--xanh-nhat)} .sl-kq-dong small{display:block;color:var(--chu-phu);font-size:calc(11.5px*var(--co));margin-top:1px} /* ===== 3.85 — 📈 Số liệu ===== */ .sl-dau{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 8px} .sl-dau>b{font-size:calc(14px*var(--co));color:var(--xanh-dam);margin-right:4px} .sl-dau button{flex:0 0 auto !important;width:auto !important} .sl-xt td,.sl-xt th,.sl-tom-dong,.sl-dc-dong,.kh-o,.kh-mon td,.kh-mon th{text-align:left !important} .kh-mon td.so{text-align:right !important} .sl-ky-chon{display:inline-flex;gap:3px} .sl-db{font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-left:auto} .sl-bang .bdc-o.sl-o{width:auto;min-width:92px;height:auto;padding:4px 6px;line-height:1.2;background:var(--nen);color:var(--chu-phu);border:1px dashed var(--vien);font-weight:400} .sl-bang .bdc-o.sl-o.du{background:var(--luc-nen);color:var(--luc);border:1px solid #BFE0CC;font-weight:700} .sl-bang .bdc-o.sl-o.du.cho{box-shadow:inset 0 -2px 0 var(--vang)} .sl-bang .bdc-o.sl-o.cu{background:var(--vang-nen);color:var(--vang);border:1px solid #EED9A8} .sl-bang .bdc-o.sl-o small{display:block;font-weight:400;font-size:calc(10.5px*var(--co));white-space:nowrap} .sl-bang th{cursor:pointer} .sl-bang th.sl-chon{background:var(--xanh-nhat);color:var(--xanh-dam);border-radius:7px} .sl-ky{margin-top:6px} .sl-tom{display:grid;gap:4px} .sl-tom-dong{border:1px solid var(--vien);border-radius:9px;padding:6px 10px;background:var(--the);text-align:left} .sl-tom-dong span{color:var(--chu-phu);font-size:calc(11.5px*var(--co))} .sl-tom-dong small{display:block;color:var(--chu-phu);font-size:calc(11.5px*var(--co));margin-top:2px} .sl-dc{display:grid;gap:4px} .sl-dc-dong{display:flex;gap:8px;align-items:flex-start;border-radius:9px;padding:6px 10px;text-align:left;font-size:calc(12.5px*var(--co))} .sl-dc-dong.ok{background:var(--luc-nen)} .sl-dc-dong.lech{background:var(--vang-nen)} .sl-dc-dong small{display:block;color:var(--chu-phu);font-size:calc(11.5px*var(--co));margin-top:2px;word-break:break-word} .sl-dm{margin-top:10px;text-align:left;font-size:calc(12.5px*var(--co))} .sl-dm summary{cursor:pointer;color:var(--xanh-dam);font-weight:600} .sl-dm-khoi{margin:7px 0;display:flex;flex-wrap:wrap;gap:4px;align-items:center} .sl-dm-khoi>b{flex:0 0 100%} .sl-dm-khoi>div{flex:0 0 100%} .sl-chip{border:1px solid var(--vien);border-radius:999px;padding:1px 8px;font-size:calc(11.5px*var(--co));background:var(--the)} .sl-ndt input{width:120px;font-size:calc(11.5px*var(--co));padding:1px 5px} .sl-xt-cuon{overflow:auto;max-height:58vh;margin:8px 0} .sl-xt{border-collapse:collapse;width:100%;font-size:calc(12px*var(--co));text-align:left} .sl-xt th{position:sticky;top:0;background:var(--the);font-weight:600;color:var(--chu-phu);padding:4px 6px;border-bottom:1px solid var(--vien)} .sl-xt td{padding:5px 6px;border-bottom:1px solid var(--vien);vertical-align:top} .sl-xt td small{display:block;color:var(--chu-phu);font-size:calc(10.5px*var(--co))} .sl-xt-ten{max-width:220px;word-break:break-word} .sl-xt select,.sl-xt input[type=month]{font-size:calc(12px*var(--co));max-width:170px} .sl-xt-loi .sl-xt-tt{color:var(--do)} .sl-xt-vang .sl-xt-tt{color:var(--vang)} .sl-xt-ok .sl-xt-tt{color:var(--luc)} .sl-goi-y{display:block;margin-top:3px;font-size:11px;padding:1px 6px;min-height:0;line-height:18px;white-space:nowrap} /* 3.143: gợi ý ngày theo tên file — anh bấm mới dùng */ .sl-bao{border-radius:9px;padding:7px 10px;margin:7px 0;text-align:left;font-size:calc(12.5px*var(--co))} .sl-bao.do{background:var(--do-nen);color:var(--do)} .sl-bao.vang{background:var(--vang-nen);color:var(--vang)} .kh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:5px;margin:8px 0;text-align:left} .kh-o{display:flex;align-items:center;gap:6px;border:1px solid var(--vien);border-radius:9px;padding:5px 8px;background:var(--the)} .kh-o label{flex:0 0 72px;color:var(--chu-phu);font-size:calc(11.5px*var(--co))} .kh-o span{flex:1;font-weight:600;word-break:break-word;font-size:calc(13px*var(--co))} .kh-to{text-align:left;color:var(--chu-phu);font-size:calc(12px*var(--co));margin:4px 0} .kh-mon{border-collapse:collapse;width:100%;font-size:calc(12px*var(--co));text-align:left} .kh-mon th{color:var(--chu-phu);font-weight:600;border-bottom:1px solid var(--vien);padding:3px 5px} .kh-mon td{border-bottom:1px solid var(--vien);padding:4px 5px;vertical-align:top} .kh-mon td small{display:block;color:var(--chu-phu);font-size:calc(10.5px*var(--co))} .kh-mon td.so{text-align:right;white-space:nowrap} .kh-mon b.do{color:var(--do)} .kh-mon b.vang{color:var(--vang)} .bdc-o.xls.trong{background:var(--nen);color:var(--chu-phu);border:1px dashed var(--vien);font-weight:400} /* dòng XLS: không bắt buộc, không tính thiếu */ @media (max-width:699px){ .sl-bang .bdc-o.sl-o{min-width:74px} .kh-o label{flex-basis:62px} } /* ===== 3.84 — việc nhỏ ===== */ @media (max-width:699px){ .chip-ck .ck-chu{display:none} .chip-ck{padding:2px 8px !important} } /* điện thoại: chỉ 📥 n — không đè nút */ .ten-dau-ds{display:grid;gap:4px;max-height:55vh;overflow:auto;margin:8px 0} .ten-dau-ds label{display:flex;gap:8px;align-items:center;border:1px solid var(--vien);border-radius:8px;padding:5px 9px;font-size:calc(12.5px*var(--co));cursor:pointer} .ten-dau-ds label:has(input:checked){border-color:var(--xanh);background:var(--xanh-nhat)} .ten-dau-ds s{color:var(--chu-phu)} /* ===== 3.83 — giao ban · buổi giao dịch ===== */ .gb-khoi{margin-bottom:12px;text-align:left} .cc-hop .gb-nd,.cc-hop .gb-to,.cc-hop .bgd-dong,.cc-hop .hop-phu{text-align:left} .gb-nd{background:var(--luc-nen);color:var(--luc);border-radius:8px;padding:6px 10px;margin:4px 0 6px;font-size:calc(12.5px*var(--co));line-height:1.45} .gb-bang{width:100%;border-collapse:collapse;font-size:calc(12px*var(--co))} .gb-bang th,.gb-bang td{border:1px solid var(--vien);padding:3px 6px;text-align:left} .gb-bang th{background:var(--nen);font-weight:600} .gb-bang td.s{text-align:right;white-space:nowrap} .gb-bang tr.x td{background:var(--xanh-nhat);font-weight:600} .gb-bang tr.d td:first-child{padding-left:18px} .gb-bang tr.tong td{font-weight:700;border-top:2px solid var(--chu-phu)} .gb-tang{color:var(--do);font-weight:600} .gb-giam{color:var(--luc);font-weight:600} .gb-0{color:var(--chu-phu)} .gb-to,.bgd-dong{font-size:calc(12px*var(--co));margin:4px 0;line-height:1.5} .cc-chon{max-width:260px;min-height:28px;font-size:calc(12px*var(--co))} /* ===== 3.82 — hồ sơ hộ một trang ===== */ .h1-luoi{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} @media (max-width:899px){ .h1-luoi{grid-template-columns:1fr} } .h1-cot{min-width:0;text-align:left} .h1-dong,.h1-muc,.h1-cot .huong-dan{text-align:left} #hop-in:has(.h1-luoi) .day-form button{flex:0 0 auto !important;white-space:nowrap;padding-left:14px;padding-right:14px} .h1-cot .nhan-nhom{margin:8px 2px 5px} .h1-the{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .h1-the figure{margin:0;cursor:pointer;border:1px solid var(--vien);border-radius:8px;padding:4px;background:var(--the)} .h1-the img{width:100%;aspect-ratio:1.58;object-fit:contain;background:#fff;border-radius:5px;display:block} .h1-the figcaption{font-size:calc(11px*var(--co));color:var(--chu-phu);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .h1-khong{aspect-ratio:1.58;display:grid;place-items:center;font-size:11px;color:var(--chu-phu);background:var(--nen);border-radius:5px} .h1-dong{display:flex;gap:8px;align-items:flex-start;padding:5px 7px;border-radius:8px;border:1px solid var(--vien);margin-bottom:4px;font-size:calc(12.5px*var(--co))} .h1-dong[onclick]{cursor:pointer} .h1-dong[onclick]:hover{border-color:var(--xanh);background:var(--xanh-nhat)} .h1-dong > div{min-width:0;display:grid} .h1-dong small{color:var(--chu-phu);font-size:calc(11.5px*var(--co))} .h1-muc{font-size:calc(12px*var(--co));margin:3px 0;line-height:1.4} #goiy button small{color:var(--chu-phu);font-weight:400} /* ===== 3.81 — sao lưu & khôi phục ===== */ .sl-ds{display:grid;gap:5px;margin:4px 0 10px} .sl-dong{display:flex;align-items:center;gap:10px;border:1px solid var(--vien);border-radius:9px;padding:5px 10px;font-size:calc(12.5px*var(--co))} .sl-dong .sl-so{flex:1;color:var(--chu-phu)} .sl-thieu{color:var(--do)} .sl-du{color:var(--luc)} .sl-ct{border:1.3px solid var(--xanh);border-radius:10px;padding:9px 12px;background:var(--xanh-nhat);font-size:calc(12.5px*var(--co))} .sl-kho{margin-top:5px} /* ===== 3.80 — văn bản liên quan gọn ===== */ .sua-gon .sg-2{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;align-items:start} .sua-gon .sg-2 .o{margin-bottom:0 !important;min-width:0} .sua-gon .sg-2 .chip-o{flex-wrap:nowrap;overflow:hidden} .sua-gon .sg-2 .chip-o .lq-ds{display:flex;flex-wrap:nowrap;gap:3px;overflow-x:auto;scrollbar-width:none;flex:0 1 auto;min-width:0} .sua-gon .sg-2 .chip-o input{flex:1 0 70px;min-width:70px} .sua-gon .lq-chip{white-space:nowrap;flex:0 0 auto;padding:0 2px 0 7px !important;min-height:20px;font-size:calc(11.5px*var(--co))} .sua-gon .sg-khoi textarea#s-tom{min-height:29px !important;height:29px !important;resize:vertical;padding-top:4px} .sua-gon .sg-hd{line-height:1.25 !important;font-size:calc(11px*var(--co)) !important} @media (max-width:899px){ .sua-gon .sg-2{grid-template-columns:1fr} } /* ===== 3.77 — lọc không sót + văn bản trùng ===== */ .the-loc.loc-trong{font-style:italic;border-style:dashed !important} @media (min-width:900px){ .loc-nhanh.gon .ln-hang:first-child{flex-wrap:wrap;overflow:visible;row-gap:3px} } /* nhóm ngắn được xuống dòng — không nhóm nào bị che */ .the-loc.loc-trung{color:var(--do);border-color:#E5B4AE !important} .the-loc.loc-trung.bat{background:#FCEDEC;color:var(--do)} .tg.trung{background:#FCEDEC;color:var(--do);font-weight:600} .tg.trung a{color:inherit;cursor:pointer;text-decoration:underline dotted} .gop-ds{display:grid;gap:6px;margin:8px 0} .gop-dong{display:flex;gap:9px;align-items:flex-start;border:1.3px solid var(--vien);border-radius:9px;padding:7px 9px;cursor:pointer} .gop-dong:has(input:checked){border-color:var(--xanh);background:var(--xanh-nhat)} .gop-dong input{margin-top:3px} .gop-nd{flex:1;min-width:0;display:grid;gap:2px} .gop-nd b{font-size:calc(12.5px*var(--co));word-break:break-word} .gop-nd small{color:var(--chu-phu);font-size:calc(11.5px*var(--co))} /* ===== 3.75 — AP hộp sửa bản quét gọn 1 màn hình + khung xem bên cạnh ===== */ .quet-gon .hop-tit{text-align:left;margin-bottom:4px;cursor:help} .quet-gon .q-db{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px} .quet-gon .q-db .o{margin-bottom:0 !important} .quet-gon .q-db .huong-dan,.quet-gon .q-chip .huong-dan{display:none} .quet-gon .sg-khoi select{width:100%} .quet-gon .q-chip .goi-y{display:flex;flex-wrap:wrap;gap:4px;max-height:84px;overflow:auto;margin:0} .quet-gon .q-chip .the-loc{padding:0 8px !important;min-height:22px !important;line-height:20px;font-size:calc(11.5px*var(--co)) !important;margin:0 !important} .quet-gon .q-chip label .lk{font-weight:400;font-size:calc(11px*var(--co));margin-left:6px;cursor:pointer} .quet-gon .q-chup > div{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .quet-gon .q-chup .q-mat{flex:0 0 132px;font-size:calc(12px*var(--co));font-weight:600;color:var(--chu-phu)} .quet-gon .q-chup .nho.sg-ico{font-size:calc(12px*var(--co))} .quet-gon .q-xem-tit{font-weight:600;font-size:calc(12.5px*var(--co));padding:2px 4px 6px;color:var(--chu-phu)} .quet-gon .q-xem #k-xem{margin:0 !important;overflow:auto;flex:1 1 auto;min-height:0} .quet-gon.q-the .q-xem #k-xem img{max-height:36vh;object-fit:contain;background:#fff} .quet-gon.q-tl .q-xem #k-xem{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;align-content:start} .quet-gon.q-tl .q-xem #k-xem > div{margin:0 !important} .quet-gon .q-xem .rong{grid-column:1/-1;padding:40px 10px} .sua-gon .sg-thieu{outline:2px solid var(--do) !important;outline-offset:1px} @media (min-width:900px){ .hop-in.quet-gon{max-width:min(1180px,96vw) !important;grid-template-columns:minmax(380px,.9fr) minmax(0,1.1fr) !important} .quet-gon .q-xem{min-height:60vh} } @media (max-width:899px){ .hop-in.quet-gon{display:flex;flex-direction:column} .quet-gon > *{flex:0 0 auto} .quet-gon .q-xem{order:-1;height:26vh;overflow:auto;background:var(--nen);border-radius:10px;padding:6px;margin-bottom:8px} .quet-gon.q-the .q-xem #k-xem{display:grid;grid-template-columns:1fr 1fr;gap:6px} .quet-gon.q-the .q-xem #k-xem img{max-height:22vh} .quet-gon.q-tl .q-xem #k-xem{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} .quet-gon .q-chup .q-mat{flex:0 0 auto;min-width:118px} .sua-gon .sg-hd .sg-phim{display:none} } /* ===== 3.74 — AL lớp chữ PDF: bôi đen / chép được ===== */ .o-trang .lop-chu{position:absolute;overflow:hidden;line-height:1;text-align:initial;opacity:1;z-index:1;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none} .o-trang .lop-chu span,.o-trang .lop-chu br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0} .o-trang .lop-chu span.markedContent{top:0;height:0} .o-trang .lop-chu ::selection{background:rgba(0,100,255,.28)} .o-trang .lop-chu br::selection{background:transparent} .o-trang .lop-chu .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:-1;cursor:default;user-select:none} .o-trang .lop-chu .endOfContent.active{top:0} .o-trang .tick,.o-trang .stt{z-index:2} .o-trang .trang-anh{position:absolute;left:8px;bottom:14px;z-index:2;background:rgba(255,255,255,.93);border:1px solid var(--vien);border-radius:7px;padding:2px 8px;font-size:11px;color:var(--chu-phu)} .o-trang .trang-anh a{color:var(--xanh-dam);cursor:pointer;font-weight:600} /* ===== 3.74 — H cảnh báo dữ liệu khách khi Chép sang AI ===== */ .ca-khach{line-height:1.45} .ca-khach .ca-che{display:flex;gap:6px;align-items:flex-start;margin-top:5px;font-weight:600;cursor:pointer} .ca-khach .ca-che input{margin-top:2px} /* ===== 3.74 — AK-2: số kết quả đầu hàng Sắp xếp, bỏ khoảng trống dưới hàng lọc ===== */ .sap .sap-dem{flex:0 0 auto;white-space:nowrap;font-size:calc(11.5px*var(--co));color:var(--chu-phu);margin-right:4px;padding-right:7px;border-right:1px solid var(--vien)} .sap .sap-dem b{color:var(--chu)} .sap .sap-dem .xoa-loc{margin-left:0} #dem-vb:empty,#tit-thang:empty{display:none} @media (min-width:900px){ .sap{gap:3px} .sap button{padding-left:6px !important;padding-right:6px !important} .sap button.sap-ico{padding-left:6px !important;padding-right:6px !important;font-size:14px} .sap .nhan-loc{margin-right:1px} } .loc-nhanh.gon{margin-bottom:6px !important} #nam-vb{margin-bottom:0} /* ===== 3.70 — AM văn bản liên quan: số hiệu bấm đi tới ===== */ .tg.lq-tg{max-width:320px;overflow:hidden;text-overflow:ellipsis} .lq-lk{color:inherit;text-decoration:underline;text-decoration-style:dotted;cursor:pointer;font-weight:600} .lq-lk:hover{text-decoration-style:solid;color:var(--xanh-dam)} .lq-lui{margin:4px 0 2px;font-size:calc(12px*var(--co))} .lq-chip button + button{margin-left:-2px} .sua-lq-bao{background:var(--vang-nen);border:1px solid var(--vien);border-radius:8px;padding:4px 9px;margin-bottom:5px;font-size:calc(12px*var(--co))} /* ===== 3.69 — AJ hàng lọc gọn ===== */ .loc-nhanh.gon{gap:3px} .loc-nhanh.gon .ln-hang{margin-right:0 !important;align-items:center} .loc-nhanh.gon .ln-nhan{min-width:0 !important;margin:0 3px 0 0;font-size:calc(10px*var(--co));text-transform:uppercase;letter-spacing:.3px} .loc-nhanh.gon .ln-gach{flex:0 0 1px !important;width:1px;height:16px;background:var(--vien);margin:0 7px} .loc-nhanh.gon .the-loc small{opacity:.7;font-size:.9em;margin-left:4px} .loc-nhanh.gon .the-loc.bat::after{content:" ✕";font-size:.85em;opacity:.85} .loc-nhanh.gon .the-loc.rong{opacity:.45} .loc-nhanh.gon .ln-phai{margin-left:auto;display:inline-flex;gap:8px;align-items:center;position:sticky;right:0;background:var(--nen);padding-left:8px} .loc-nhanh.gon .ln-phai .ln-an{position:static !important;margin:0 !important;padding:0 !important} .loc-nhanh.gon .ln-bo{color:var(--do);font-size:calc(11px*var(--co));cursor:pointer;white-space:nowrap} .loc-nhanh.gon .ln-bo:hover{text-decoration:underline} .loc-nhanh.gon .ln-hang:first-child{margin-right:0} /* ===== 3.69 — AJ hộp sửa gọn 1 màn hình ===== */ .sua-gon .goi-y-o{display:none !important} .sua-gon .sg-dau{display:flex;gap:6px;align-items:center;min-width:0} .sua-gon .sg-ten{flex:1;min-width:0;display:grid;gap:1px;text-align:left} .sua-gon .sg-ten > div{display:flex;gap:6px;align-items:baseline;min-width:0} .sua-gon .sg-ten .ic{flex:0 0 62px;white-space:nowrap;color:var(--chu-phu);font-size:calc(10px*var(--co));text-transform:uppercase;letter-spacing:.4px;font-weight:700} .sua-gon .sg-ten i,.sua-gon .sg-ten b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(12.5px*var(--co))} .sua-gon .sg-ten i{font-style:normal;color:var(--chu-phu);text-decoration:line-through} .sua-gon .sg-ten b{color:var(--xanh-dam)} .sua-gon .sg-ten small{flex:0 0 auto;color:var(--chu-phu);font-size:calc(11px*var(--co));white-space:nowrap} .sua-gon .nho.sg-ico{flex:0 0 auto !important;width:auto !important;min-width:32px !important;min-height:28px !important;padding:2px 8px !important;margin:0} .sua-gon .sg-nhom{margin:3px 0 1px !important} .sua-gon .sg-buoc{display:flex;gap:6px;margin:1px 0 4px} .sua-gon .sg-buoc span{flex:1;text-align:center;font-size:calc(11.5px*var(--co));padding:2px 0;border-radius:6px;color:var(--chu-phu);background:var(--nen);font-weight:600} .sua-gon .sg-buoc span.bat{background:var(--xanh);color:#fff} .sua-gon .sg-buoc span.xong{color:var(--luc)} .sua-gon .sg-khoi{padding:5px 10px 6px !important;margin-bottom:5px !important;display:grid;gap:3px} .sua-gon .sg-khoi.dang{outline:2px solid var(--xanh);outline-offset:1px} .sua-gon .sg-khoi .o{margin-bottom:0 !important} .sua-gon .sg-3{display:grid;grid-template-columns:1.25fr .85fr 1fr;gap:8px} .sua-gon .o label{font-size:calc(11px*var(--co));margin:0 0 1px;text-align:left !important;display:block;line-height:1.3} .sua-gon .o label small{font-weight:400;color:var(--chu-phu)} .sua-gon .o label kbd{font-size:10px;border:1px solid var(--vien);border-radius:3px;padding:0 3px} .sua-gon .sg-khoi input,.sua-gon .sg-khoi select,.sua-gon .sg-khoi textarea{min-height:29px;height:29px;padding:3px 8px;font-size:calc(13px*var(--co))} .sua-gon .sg-khoi textarea{min-height:42px;height:42px;resize:vertical} .sua-gon #canh-trung:empty{display:none} .sua-gon .chip-o{display:flex;flex-wrap:wrap;gap:4px;align-items:center;border:1.3px solid var(--vien);border-radius:8px;background:var(--the);padding:2px 5px;min-height:30px;position:relative} .sua-gon .chip-o:focus-within{border-color:var(--xanh)} .sua-gon .chip-o input{border:0 !important;box-shadow:none !important;outline:none;min-height:24px !important;padding:1px 3px !important;flex:1 1 120px;width:auto;background:transparent} .sua-gon .chip-o .lq-ds{display:contents} .sua-gon .sg-chip{display:inline-flex;align-items:center;gap:2px;padding:0 3px 0 8px !important;min-height:22px;font-size:calc(12px*var(--co))} .sua-gon .sg-chip button{border:0;background:none;color:inherit;opacity:.75;cursor:pointer;font-size:11px;padding:0 3px;min-height:0 !important;min-width:0 !important;width:auto !important} .sua-gon .chip-o .tvb-ds{top:100%} .tvb-dong.chon{background:var(--xanh-nhat)} .sua-gon .sg-luu{display:flex;gap:5px;align-items:center;font-size:calc(12px*var(--co));min-width:0} .sua-gon .sg-luu input{flex:1;min-width:0;min-height:28px !important;border-color:transparent !important;background:transparent !important;padding:2px 4px !important;color:var(--chu);text-overflow:ellipsis} .sua-gon .sg-luu input:not([readonly]){border-color:var(--xanh) !important;background:var(--the) !important} .sua-gon .sg-luu .nho{flex:0 0 auto !important;width:auto !important;min-width:0 !important;min-height:28px !important;padding:2px 8px !important;margin:0} .sua-gon .sg-hd{border-top:1px dashed var(--vien);padding:5px 2px 0;font-size:calc(12px*var(--co));color:var(--chu-phu);min-height:30px;line-height:1.4} /* 3.78: dải chip xanh cố định đầu hộp — hướng dẫn ô đang gõ, không che ô nào */ .sua-gon .sg-hd{border:1px solid #BFE0CC !important;background:var(--luc-nen);color:var(--luc);border-radius:9px;padding:3px 9px !important;margin:2px 0 6px; min-height:0;height:calc(36px*var(--co));overflow:hidden;display:flex;gap:4px 10px;align-items:center;flex-wrap:wrap;font-size:calc(11.5px*var(--co));line-height:1.3} .sua-gon .sg-hd .sg-goi{flex:1 1 auto;min-width:0;text-align:left} .sua-gon .sg-hd{text-align:left;justify-content:flex-start} .sua-gon .sg-hd .sg-goi b{color:var(--luc)} .sua-gon .sg-hd .sg-vd{color:#2F6E4B;font-style:italic} .sua-gon .sg-hd .sg-phim{flex:0 0 auto;margin-left:auto;color:var(--chu-phu);font-size:calc(10.5px*var(--co));white-space:nowrap} .sua-gon .sg-hd .sg-goi-nhanh{font-size:calc(11px*var(--co))} .sua-gon .sg-hd b{color:var(--chu)} .sua-gon .sg-vd{color:var(--xanh-dam)} .sua-gon .sg-hd kbd{font-size:10px;border:1px solid var(--vien);border-radius:3px;padding:0 3px} .sg-goi-nhanh{border:1px solid #C4E3D0;background:var(--luc-nen);color:var(--luc);border-radius:12px;padding:1px 8px;font:inherit;font-size:calc(12px*var(--co));cursor:pointer;margin:0 2px 2px 0} .sua-gon .day-form .chinh small{font-weight:400;opacity:.8} @media (max-width:899px){ .sua-gon .sg-buoc{display:none} .sua-gon .sg-3{grid-template-columns:1fr 1fr} .sua-gon .sg-3 > .o:first-child{grid-column:1/-1} .sua-gon .sg-ten small{display:none} } /* ===== 3.68 — AD nút Lưu / Đóng dính đáy hộp · AG nút đầu lịch ===== */ .hop-in > .hang-nut:last-child,.hop-in > .day-form,.hop-in .sua-trai > .day-form,.hop-in.co-xem-ben .sua-trai > .day-form{position:sticky;bottom:-16px;z-index:5;background:var(--the); margin-bottom:-16px;padding:8px 0 12px;box-shadow:0 -6px 10px -8px rgba(0,0,0,.25)} .hop-in.co-xem-ben .sua-trai > .day-form,.hop-in .sua-trai > .day-form{bottom:0;margin-bottom:0} .cot-phai .xem-phu:has(.cl-cay,.cl-dai,.lien-quan,.lq-mot){display:block;-webkit-line-clamp:unset;overflow:visible} /* 3.68: dòng thời gian không bị cắt 2 dòng */ .cl-cay{max-height:30vh;overflow:auto} /* 3.78: văn bản liên quan 1 dòng chip dưới tên */ .lq-mot{display:flex;flex-wrap:wrap;gap:3px 6px;align-items:center;margin-top:3px;font-size:calc(11.5px*var(--co));line-height:1.5} .lq-mot .lq-c{background:var(--luc-nen);color:var(--luc);border-radius:7px;padding:0 7px;text-decoration:none;cursor:pointer;font-weight:600;white-space:nowrap} .lq-mot .lq-c:hover{text-decoration:underline} .lq-mot .lq-c.het{text-decoration:line-through;opacity:.7} .lq-mot .lq-lui{color:var(--xanh-dam);cursor:pointer;white-space:nowrap;margin-right:4px} .nhay{animation:nhayNut .9s ease 2} @keyframes nhayNut{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 4px var(--xanh-nhat);border-color:var(--xanh)}} .lc-mui:hover,.lc-nut:not(:disabled):hover{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam)} .lc-nut.chinh:not(:disabled):hover{background:var(--xanh);color:#fff} .nk-trang .lc-mui:hover,.nk-trang .lc-nut:not(:disabled):hover{background:#F3E4BF;border-color:#B98B3E;color:#5A4520} .lc-nut.hn-noi{border-color:var(--xanh);color:var(--xanh-dam);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.18)} .bao.goc{left:auto;right:18px;transform:none;bottom:18px;padding:7px 12px;text-align:left} /* ===== 3.66 — AI phiếu thông tin món vay · kết quả cam kết ===== */ .phieu-xem{width:100%;height:min(62vh,760px);border:1.3px solid var(--vien);border-radius:8px;background:#fff;margin:6px 0} .tdn-in-chon{margin:4px 0 !important}.tdn-in-chon .tdn-seg button{padding:5px 11px} .tdn-kq{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:calc(12px*var(--co))} .tdn-kq i{color:var(--chu-phu);font-style:normal}.tdn-kq small{color:var(--chu-phu)} .tdn-kq .nho{flex:0 0 auto !important;min-width:0 !important;width:auto !important;margin:0;min-height:24px;padding:1px 8px} .tdn-kq .nho.giu{background:var(--luc-nen);border-color:var(--luc);color:var(--luc);font-weight:600} .tdn-kq .nho.that{background:var(--do-nen);border-color:#c0392b;color:var(--do);font-weight:600} /* ===== 3.65 — AA ô tìm văn bản theo số hiệu · AC dấu sao ===== */ .tvb{position:relative} .tvb-o{display:flex;gap:6px}.tvb-o input{flex:1;min-width:0}.tvb-o .nho{flex:0 0 auto;min-width:0;width:auto;margin:0} .tvb-ds{position:absolute;left:0;right:0;z-index:30;background:var(--the);border:1.3px solid var(--vien);border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.18);max-height:260px;overflow:auto} .tvb-ds:empty{display:none} .tvb-dong{padding:6px 9px;cursor:pointer;font-size:calc(12.5px*var(--co));border-bottom:1px solid var(--vien)} .tvb-dong:hover{background:var(--xanh-nhat)} .tvb-dong small{color:var(--chu-phu)} .tvb-dong.rong-tvb{cursor:default;color:var(--chu-phu)} /* 3.65 — AB: ô Nhóm gọn 1 dòng dưới tên, không chiếm cả khung */ .dau-sua{flex-direction:column !important;gap:6px !important} .dau-nhom{flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;gap:8px !important;padding:0 !important;border:0 !important;background:none !important} .dau-nhom .co-chu{display:flex;flex-wrap:wrap;gap:4px} .dau-nhom .co-chu button{min-height:26px !important;padding:2px 10px !important} .sao{flex:0 0 auto;cursor:pointer;color:var(--chu-phu);font-size:calc(14px*var(--co));line-height:1;opacity:.45;padding:0 1px} .sao:hover{opacity:1;color:#d99a00} .sao.bat{color:#e0a800;opacity:1} .sao-nut.bat{color:#b07d00;border-color:#e0a800} .dau-sua .so-ten>div[style*="margin-top"]{display:inline-block;margin-right:6px} .dau-sua .so-ten .nho{width:auto !important;min-width:0 !important} .sl-ngay-th{min-width:92px} .sl-o-ngay{text-align:left;white-space:normal} .sl-ngay-chip{font-size:11px;padding:1px 5px;margin:1px;border:1px solid #9bc59d;background:#eaf6ea;border-radius:10px;cursor:pointer} .sl-ngay-chip.cho{border-style:dashed} .sl-ngay-chip.them{background:#fff;border-color:#bbb;color:#666} .sl-nguon{font-size:12px;color:#444;margin:4px 0 6px;line-height:1.5} .sl-nguon .muon{color:var(--vang);background:#fff3cd;border-radius:3px;padding:0 3px} .ngay-gy{display:inline-block;font-size:11px;color:#555;margin:0 4px;white-space:nowrap;vertical-align:middle} .ngay-gy b{color:#0b5394} /* 3.145: tổ dư nợ 0 còn trên DSTO / LEN_31 → cần đóng tổ */ .to-dong0{display:inline-block;padding:1px 8px;border-radius:10px;background:var(--do-nen);color:var(--do);font-size:calc(12px*var(--co));font-weight:600;cursor:pointer} .to-dong0-ds{display:inline-block;margin-left:6px;font-size:calc(12.5px*var(--co))}.to-dong0-ds[open]{display:block;margin:4px 0 0}.to-dong0-ds a{color:var(--chu)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .to-dong0{background:#4a1e1b;color:#ffb4ab} } :root[data-theme="dark"] .to-dong0{background:#4a1e1b;color:#ffb4ab} /* 3.145: ô ma trận — số chính + mũi tên so tháng trước; bảng file cần xuất */ .sl-bang .bdc-o.sl-o .sl-o-so{display:block;white-space:nowrap} .sl-bang .bdc-o.sl-o .sl-mt{font-weight:700}.sl-mt.xanh{color:#1b7f3b}.sl-mt.do{color:#c62828}.sl-mt.bang{color:var(--chu-phu);font-weight:400} :root[data-theme="dark"] .sl-mt.xanh{color:#7fd29a}:root[data-theme="dark"] .sl-mt.do{color:#ff8a80} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sl-mt.xanh{color:#7fd29a} :root:not([data-theme="light"]) .sl-mt.do{color:#ff8a80} } .hang-nut.sl-o-phu{margin-top:4px;opacity:.9;justify-content:center}.hang-nut.sl-o-phu .nho{flex:0 0 auto;width:auto;min-height:0;padding:4px 10px;font-size:calc(12px*var(--co))} .sl-fx{border-collapse:collapse;width:100%;font-size:calc(13px*var(--co))}.sl-fx th,.sl-fx td{border-bottom:1px solid var(--vien);padding:4px 6px;text-align:left;vertical-align:top} .sl-fx td.c{text-align:center;width:24px}.sl-fx .sl-fx-nhom td{background:var(--nen-phu,var(--nen));font-weight:700;padding-top:8px}.sl-fx .xanh{color:#1b7f3b} /* 3.146: Kiểm tra kỳ — Đạt / ghi nhận chênh lệch */ .sl-bang thead th.dat{color:#1b7f3b;font-weight:700} :root[data-theme="dark"] .sl-bang thead th.dat{color:#7fd29a} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sl-bang thead th.dat{color:#7fd29a} } .sl-bc-can{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.sl-luu-y{margin:4px 0} .sl-kt-ghi{margin:10px 0 2px;font-weight:700;color:var(--chu-phu);font-size:calc(12.5px*var(--co))} .sl-dat{font-size:calc(14px*var(--co))} .sl-kt-muc.lech{border-color:var(--xanh);border-left-width:4px} /* 3.146: chênh lệch chỉ ghi nhận — không tô đỏ như lỗi */ /* ===== 3.147 (đợt F): THANH BÊN ĐIỀU HƯỚNG — chỉ máy tính ≥ 1100 px; nhỏ hơn giữ thanh tab ngang như cũ ===== */ #thanh-ben{display:none} @media (min-width:1100px){ body.co-tb{--tbw:216px;padding-left:var(--tbw)} body.co-tb.tb-gon{--tbw:60px} #thanh-ben{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--tbw);z-index:40;background:var(--xanh);color:#fff;overflow:hidden;font-size:calc(14px*var(--co));box-shadow:1px 0 0 rgba(0,0,0,.08)} body.co-tb #hangngan, body.co-tb .dau .logo, body.co-tb .dau .logo + div, body.co-tb .dau .nut-cd{display:none !important} body.co-tb .dau{padding-top:7px;padding-bottom:7px} body.co-tb #tr7 .sl-con:not(.sl-con-nap){display:none} /* 5 màn Số liệu là 5 mục trên thanh bên */ body.co-tb .day{left:var(--tbw)} #thanh-ben .tb-dau{display:flex;align-items:center;gap:9px;padding:11px 10px 9px 12px;border-bottom:1px solid rgba(255,255,255,.14)} #thanh-ben .tb-logo{width:34px;height:34px;border-radius:9px;background:#fff;color:var(--xanh);font-weight:800;display:grid;place-items:center;flex:0 0 34px;cursor:pointer} #thanh-ben .tb-ten{font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;min-width:0} #thanh-ben .tb-ten small{display:block;font-weight:400;opacity:.75;font-size:calc(11px*var(--co));overflow:hidden;text-overflow:ellipsis} #thanh-ben .tb-gon-nut{margin-left:auto;background:none;border:0;color:#fff;opacity:.85;font-size:18px;cursor:pointer;padding:2px 4px;min-height:0;box-shadow:none} #thanh-ben .tb-ds{flex:1;overflow:hidden auto;padding-bottom:6px} #thanh-ben .tb-nhom{font-size:calc(10.5px*var(--co));letter-spacing:.06em;text-transform:uppercase;opacity:.6;padding:9px 16px 2px;white-space:nowrap} #thanh-ben a{display:flex;align-items:center;gap:10px;padding:5px 12px;margin:1px 8px;border-radius:9px;color:#fff;text-decoration:none;white-space:nowrap;cursor:pointer;position:relative} #thanh-ben a:hover{background:rgba(255,255,255,.12)} #thanh-ben a.bat{background:#fff;color:var(--xanh);font-weight:700} #thanh-ben a .bt{width:22px;text-align:center;flex:0 0 22px;font-size:16px} #thanh-ben a .so{margin-left:auto;font-size:calc(11px*var(--co));background:rgba(255,255,255,.22);border-radius:9px;padding:0 7px;font-weight:600} #thanh-ben a.bat .so{background:var(--xanh);color:#fff} #thanh-ben a .so.do{background:#e5484d;color:#fff} #thanh-ben .tb-cc{display:flex;gap:4px;padding:2px 8px} #thanh-ben .tb-cc a{flex:1;flex-direction:column;justify-content:center;gap:0;margin:0;padding:4px 2px;background:rgba(255,255,255,.08);font-size:calc(11.5px*var(--co))} #thanh-ben .tb-cc a .bt{flex:0 0 auto} #thanh-ben .tb-chan{display:flex;gap:4px;padding:6px 8px 8px;border-top:1px solid rgba(255,255,255,.14)} #thanh-ben .tb-chan a{flex:1;justify-content:center;margin:0;padding:7px 0} #thanh-ben .tb-chan a .so{position:absolute;top:0;right:4px;margin:0;padding:0 5px} /* thu gọn 60 px: chỉ biểu tượng (rê chuột hiện tên qua title) */ body.tb-gon #thanh-ben .tb-ten, body.tb-gon #thanh-ben .tb-nhom, body.tb-gon #thanh-ben a .chu{display:none} body.tb-gon #thanh-ben .tb-dau{flex-direction:column;padding:10px 4px 6px;gap:4px} body.tb-gon #thanh-ben .tb-gon-nut{margin:0} body.tb-gon #thanh-ben a{justify-content:center;margin:2px 6px;padding:8px 0} body.tb-gon #thanh-ben a .so{position:absolute;top:0;right:0;margin:0;padding:0 4px;font-size:10px} body.tb-gon #thanh-ben .tb-ds > a:nth-of-type(4){margin-top:10px} body.tb-gon #thanh-ben .tb-cc{flex-direction:column;padding:6px 0 0;border-top:1px solid rgba(255,255,255,.14);margin-top:8px} body.tb-gon #thanh-ben .tb-cc a{background:none;margin:2px 6px} body.tb-gon #thanh-ben .tb-chan{flex-direction:column;padding:6px 6px 8px} } :root[data-theme="dark"] #thanh-ben{background:#12293E} :root[data-theme="dark"] #thanh-ben a.bat{background:#2b4a68;color:#fff} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #thanh-ben{background:#12293E} :root:not([data-theme="light"]) #thanh-ben a.bat{background:#2b4a68;color:#fff} } @media print{ #thanh-ben{display:none !important} body.co-tb{padding-left:0 !important} } /* ===== 3.148: nút vừa chữ · thứ tự nút hộp thoại · nút Thêm xanh · 1 nơi trạng thái ===== */ .nho{flex:0 0 auto;padding:9px 14px} /* sửa gốc: trước mặc định giãn đầy hàng (flex:1) → nút dài như lỗi */ @media (min-width:700px){ .nho{min-height:32px;padding:5px 14px} } @media (max-width:699px){ .hop-in .hang-nut .nho{flex:1 1 auto} } /* điện thoại: nút trong hộp thoại dàn đều cho dễ bấm */ /* hộp thoại: Đóng / Thôi luôn bên trái (kiểu trơn), nút chính luôn ngoài cùng bên phải */ .hop-in .hang-nut{justify-content:flex-end} .hop-in .hang-nut > button.chinh{order:9} .hop-in .hang-nut > button[onclick="dongHop()"]{order:-1;margin-right:auto;background:var(--the);color:var(--chu);border-color:var(--vien);font-weight:400} /* nút Thêm (nút chính của tab) có màu xanh */ .nut-them,.dau-tab .nut-them{background:var(--xanh-nhat);border-color:var(--xanh);color:var(--xanh-dam)} .nut-them:hover,.dau-tab .nut-them:hover{background:var(--xanh);color:#fff} /* ô trạng thái */ #tt-khoi{display:flex;flex-direction:column;gap:3px;min-width:0} #tt-khoi .tt-dong{display:flex;align-items:center;gap:7px;min-width:0} #tt-khoi .tt-den{width:10px;height:10px;border-radius:50%;flex:0 0 10px;cursor:pointer;background:#9aa4ae;box-shadow:0 0 0 2px rgba(255,255,255,.25)} #tt-khoi .tt-den.xanh{background:#2fbf71}#tt-khoi .tt-den.vang{background:#f5a524;animation:tt-nhay 1s infinite alternate}#tt-khoi .tt-den.do{background:#e5484d} @keyframes tt-nhay{from{opacity:1}to{opacity:.45}} #tt-khoi .tt-chu{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:calc(12px*var(--co))} #tt-khoi .tt-thanh{height:3px;border-radius:2px;background:transparent;overflow:hidden} #tt-khoi .tt-thanh.chay{background:rgba(127,127,127,.25)} #tt-khoi .tt-thanh i{display:block;height:100%;width:0;background:#f5a524;transition:width .3s} #tt-khoi .tt-thanh.chay i{width:8%} #tt-khoi .tt-thanh.lap i{width:35% !important;animation:tt-lap 1.2s linear infinite} @keyframes tt-lap{from{transform:translateX(-100%)}to{transform:translateX(300%)}} .tt-ds{max-height:60vh;overflow:auto;font-size:calc(13px*var(--co));text-align:left}.tt-ds > div{padding:4px 0;border-bottom:1px solid var(--vien)}.tt-ds small{color:var(--chu-phu)}.tt-ds .do{color:var(--do)} .day #tt-khoi{flex:1 1 auto;margin-right:8px} .day #tt-khoi + #so-lieu{flex:0 1 auto} #danglam.tt-an{display:none !important} @media (min-width:1100px){ #thanh-ben #tb-tt{padding:8px 12px 4px;border-top:1px solid rgba(255,255,255,.14);color:#fff} #thanh-ben #tb-tt #so-lieu{margin-top:5px;font-size:calc(11px*var(--co));line-height:1.9} #thanh-ben #tb-tt #so-lieu .chip{display:inline-block;margin:0 3px 0 0;padding:0 6px;border-radius:9px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer} #thanh-ben #tb-tt #so-lieu .chip.an{display:none} body.co-tb .day{display:none} body.co-tb.day-can .day{display:flex} body.co-tb .than{padding-bottom:16px} body.co-tb.day-can .than{padding-bottom:78px} body.co-tb .tt-chay{display:none} body.co-tb .day .tac-gia{display:none} #thanh-ben .tb-ban{font-size:calc(10.5px*var(--co));font-weight:600;opacity:.8;cursor:pointer;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:0 5px;margin-left:3px} #thanh-ben .tb-tg{color:#9be3b5 !important;font-weight:600} body.tb-gon #thanh-ben #tb-tt{padding:6px 0;display:flex;justify-content:center} body.tb-gon #thanh-ben #tt-khoi .tt-chu, body.tb-gon #thanh-ben #tb-tt #so-lieu{display:none} body.tb-gon #thanh-ben #tt-khoi{width:40px} } #tt-khoi .tt-thanh:not(.chay) i{display:none} /* ===== 3.149: kỳ chung ở đầu trang · cây chọn 2 hàng dùng chung ===== */ .ky-chung{display:flex;align-items:center;gap:4px;flex:0 0 auto;color:#fff} .ky-chung:empty{display:none} .ky-chung label{display:flex;align-items:center;gap:4px;font-size:calc(13px*var(--co))} .ky-chung select{font:inherit;font-size:calc(13px*var(--co));padding:4px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.95);color:#123;max-width:230px} .ky-chung .ky-chung-lm{background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:8px;padding:3px 8px;cursor:pointer} @media (max-width:699px){ .ky-chung select{max-width:150px} .ky-chung .ky-chung-lm{display:none} } .ky-ghi{margin:4px 0;padding:4px 10px;border-radius:8px;background:var(--vang-nen);color:var(--vang);font-size:calc(12.5px*var(--co))} .pv-hang1{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0} .pv-hang1 .pv-ghim{font-size:15px} .pv-hang1 .pv-sep{color:var(--chu-phu);font-weight:700} .pv-hang1 select.pv-o{font:inherit;font-size:calc(12.5px*var(--co));padding:3px 6px;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu);max-width:250px} .pv-hang1 select.pv-o.co{border-color:var(--xanh);background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:600} .pv-hang1 select.pv-hoi{margin-left:8px} .pv-hang2{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px 22px} .kt-bc-nap{border:1px solid var(--vien);background:var(--the);color:var(--chu);border-radius:10px;padding:1px 8px;cursor:pointer;font-size:calc(11.5px*var(--co))} /* ===== 3.150: tab Nạp & KT gọn ===== */ .sl-thanh-nap{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px;padding:0;border:0;background:none} .sl-thanh-nap .sl-thang{display:flex;gap:2px} .sl-thanh-nap .sl-gian{flex:1 1 auto} .sl-thanh-nap .sl-db{font-size:calc(12px*var(--co));color:var(--chu-phu)} .sl-tt-1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 10px;border-radius:10px;margin:0 0 8px;font-size:calc(13px*var(--co));border:1px solid var(--vien);background:var(--the)} .sl-tt-1 .sl-tt-chu{flex:1 1 300px;min-width:0} .sl-tt-1.vang{background:var(--vang-nen);border-color:#EED9A8}.sl-tt-1.xanh{background:var(--luc-nen);border-color:#BFE0CC}.sl-tt-1.xam{color:var(--chu-phu)} .sl-tt-1 .sl-lk{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit} .sl-bang thead th.bdc-goc .sl-tq-nut{display:inline-flex;gap:2px;margin-left:6px} .sl-bang thead th.bdc-goc .sl-tq-nut .nho{min-height:22px !important;padding:0 7px !important;font-size:calc(11px*var(--co))} details.sl-kq,details.sl-ktgs-nap{margin:10px 0;border:1px solid var(--vien);border-radius:10px;background:var(--the);padding:6px 10px} details.sl-kq > summary,details.sl-ktgs-nap > summary{cursor:pointer;font-weight:600;padding:2px 0} details.sl-kq > summary small,details.sl-ktgs-nap > summary small{font-weight:400;color:var(--chu-phu)} .sl-them-ds{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:8px 0} .sl-them-ds .sl-giu{display:flex;align-items:center;gap:6px;font-size:calc(13px*var(--co))} .sl-mt-cuon{max-width:100%} .nho{min-width:0} /* 3.150: nút vừa chữ — nút biểu tượng (‹ › ⋯ ❓) không bị kéo rộng 76 px */ @media (min-width:700px){ .sl-mt-cuon .sl-bang{width:100%} .sl-mt-cuon .sl-bang .bdc-o.sl-o{min-width:84px} } /* ma trận trọn chiều ngang */ /* 3.151 — thanh lọc chung tab file + kiểu xem ▦ Bảng */ .tl-thanh{flex-wrap:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none} .tl-thanh::-webkit-scrollbar{display:none} .tl-thanh > button{flex:0 0 auto;white-space:nowrap} .tl-chips{display:flex;gap:5px;align-items:center;flex:0 0 auto} .tl-chip{white-space:nowrap;cursor:pointer;border-radius:999px;padding:3px 10px;font-size:calc(12px*var(--co));font-weight:600; background:var(--xanh-nhat);color:var(--xanh-dam);border:1.3px solid var(--xanh)} .tl-chip:hover{filter:brightness(.96)} .tl-chip.bo{background:var(--the);color:var(--chu-phu);border-color:var(--vien)} .tl-thanh .nut-them,.tl-thanh .phu,.tl-thanh .nut-bot{padding:5px 10px} .dau-tab .tl-them,.dau-tab .nut-hd{padding:5px 9px} .menu .menu-nhan{font-size:calc(11px*var(--co));color:var(--chu-phu);padding:4px 12px 2px;text-transform:uppercase;letter-spacing:.03em} .menu .menu-ghi{font-size:calc(11px*var(--co));color:var(--chu-phu);padding:4px 12px;max-width:230px} .menu button.bat{color:var(--xanh-dam);font-weight:700} .bang-tab-cuon{overflow-x:auto;border:1.3px solid var(--vien);border-radius:10px;background:var(--the)} .bang-tab{width:100%;border-collapse:collapse;font-size:calc(12.5px*var(--co));table-layout:auto} .bang-tab th{position:sticky;top:0;background:var(--nen);text-align:left;font-weight:700;padding:6px 8px;border-bottom:1.3px solid var(--vien); white-space:nowrap;cursor:pointer;user-select:none;color:var(--chu-phu);z-index:1} .bang-tab th:hover,.bang-tab th.dang{color:var(--xanh-dam)} .bang-tab td{padding:0 8px;height:30px;border-bottom:1px solid var(--vien);white-space:nowrap;vertical-align:middle;text-align:left} .bang-tab th,.bang-tab td{width:1%} .bang-tab th.bt-ten,.bang-tab td.bt-ten{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis} .bang-tab td.s,.bang-tab th.s{text-align:right} .bang-tab .bt-o{width:1%;padding:0 4px 0 8px} .bang-tab .bt-n{width:1%;padding:0 4px;text-align:right} .bang-tab .bt-n button{border:none;background:none;cursor:pointer;font-size:15px;color:var(--chu-phu);padding:2px 6px;border-radius:6px} .bang-tab .bt-n button:hover{background:var(--xanh-nhat);color:var(--xanh-dam)} .bang-tab tr.bt-d{cursor:pointer} .bang-tab tr.bt-d:hover td{background:var(--xanh-nhat)} .bang-tab tr.bt-d.dang-xem td{background:var(--xanh-nhat);box-shadow:inset 0 -1px 0 var(--xanh)} .bang-tab tr.bt-d.chon td,.bang-tab tr[data-botc] td{background:var(--vang-nen)} .bang-tab tr.bt-d.mo td{color:var(--chu-phu)} .bang-tab .bt-tt{display:inline-block;margin-right:4px;cursor:help;color:var(--vang)} .bang-tab .bt-tt.dat{color:var(--xanh-dam)} .bang-tab td:first-child,.bang-tab th:first-child{min-width:0;border-right:none;position:static;background:inherit} .bang-tab thead th{background:var(--nen)} .bang-tab th:first-child{background:var(--nen)} /* 3.154 — Khai báo Hội: 1 bảng như Excel */ .hkb-dau{align-items:center} .hkb-cuon{overflow:auto;max-height:calc(100vh - 260px);border:1.3px solid var(--vien);border-radius:10px;background:var(--the)} .hkb-xls{border-collapse:collapse;width:max-content;min-width:100%;font-size:calc(12.5px*var(--co))} .hkb-xls th{position:sticky;top:0;z-index:2;background:var(--nen);color:var(--chu-phu);font-weight:700;text-align:left;padding:6px 6px;border-bottom:1.3px solid var(--vien);white-space:nowrap;min-width:0} .hkb-xls td{padding:0;border-bottom:1px solid var(--vien);border-right:1px solid var(--vien);height:30px;vertical-align:middle;text-align:left;min-width:0;position:static;background:transparent} .hkb-xls td:first-child,.hkb-xls th:first-child{position:sticky;left:0;z-index:1;background:var(--the);min-width:0;border-right:1px solid var(--vien)} .hkb-xls th:first-child{z-index:3;background:var(--nen)} .hkb-xls td.hkb-xa,.hkb-xls td.hkb-hoi{padding:0 8px;white-space:nowrap} .hkb-xls td.hkb-hoi small{color:var(--chu-phu)} .hkb-xls .hkb-du{cursor:help;color:var(--xanh-dam)} .hkb-xls input.hkb-o{font:inherit;border:none;background:transparent;width:100%;min-width:110px;height:30px;padding:0 6px;box-sizing:border-box;color:var(--chu);border-radius:0} .hkb-xls input.hkb-o:placeholder-shown{background:rgba(127,127,127,.06)} .hkb-xls input.hkb-o:focus{outline:2px solid var(--xanh);outline-offset:-2px;background:var(--the)} .hkb-xls input.hkb-o.sai{background:var(--do-nen);color:var(--do)} .hkb-xls input.hkb-o.canh{background:var(--vang-nen)} .hkb-xls input[id$="-ten"]{min-width:190px} .hkb-xls input[id$="Ngay"],.hkb-xls input[id$="-nk"]{min-width:96px} .hkb-xls .hkb-pc{border:none;background:none;min-height:0;padding:2px 8px} /* 3.155 — Scan: hộp Xong (Lưu máy · Gửi · Copy ảnh · Lưu tủ) + chọn khách */ .sx-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:10px 0} .sx-o{display:flex;gap:10px;align-items:center;text-align:left;padding:12px 14px;border:1.3px solid var(--vien);border-radius:12px;background:var(--the);cursor:pointer;font:inherit;color:var(--chu)} .sx-o:hover{border-color:var(--xanh);background:var(--xanh-nhat)} .sx-o>b{font-size:24px;line-height:1} .sx-o span{display:flex;flex-direction:column;font-weight:700} .sx-o small{font-weight:400;color:var(--chu-phu);font-size:calc(11.5px*var(--co))} .sx-o.da{border-color:var(--xanh);background:var(--xanh-nhat)} .sx-kh{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--vien)} .sx-kh img{width:96px;max-height:64px;object-fit:contain;border-radius:6px;background:#f4f4f4;flex:0 0 auto} .sx-kh-o{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .sx-kh-o input{font:inherit;padding:6px 8px;border:1.3px solid var(--vien);border-radius:8px} .sx-gy{display:flex;flex-direction:column} .sx-gy button{text-align:left;border:none;background:none;padding:5px 6px;border-radius:6px;cursor:pointer;font:inherit;color:var(--chu)} .sx-gy button:hover{background:var(--xanh-nhat)} .sx-gy small{color:var(--chu-phu)} /* 3.156 — tab Nạp & KT: ma trận kẻ ô rõ, cột tháng chọn sáng, 3 kiểu ma trận, dấu ✓ / ⚠ trên ô */ .sl-mt-cuon .sl-bang.sl-luoi{border-collapse:collapse;border-spacing:0;width:auto;min-width:0} .sl-mt-cuon.tq .sl-bang.sl-luoi{width:100%} .sl-bang.sl-luoi th,.sl-bang.sl-luoi td{border:1px solid var(--vien) !important;border-radius:0 !important} .sl-bang.sl-luoi thead th{background:var(--nen);padding:5px 8px;height:30px} .sl-bang.sl-luoi thead th.sl-chon{border-radius:0;background:var(--xanh-nhat)} .sl-bang.sl-luoi .bdc-o.sl-o{border:1px solid var(--vien) !important;border-radius:0;min-width:120px;height:28px;padding:2px 8px;position:relative;text-align:center;line-height:1.15} .sl-mt-cuon.tq .sl-bang.sl-luoi .bdc-o.sl-o{min-width:78px} .sl-mt-cuon.tq .sl-bang.sl-luoi .bdc-o.sl-o small{display:none} .sl-bang.sl-luoi .bdc-o.sl-o.du{border-color:var(--vien) !important} .sl-bang.sl-luoi .bdc-o.sl-o .sl-o-so{display:inline} .sl-bang.sl-luoi .bdc-o.sl-o small{display:inline;margin-left:5px} .sl-bang.sl-luoi td.bdc-ten{padding:3px 10px;white-space:nowrap} .sl-bang.sl-luoi td.sl-con-ten.dai{white-space:normal;font-size:calc(11.5px*var(--co));line-height:1.2;max-width:190px} .sl-bang.sl-luoi .sl-cot{box-shadow:inset 2px 0 0 var(--xanh),inset -2px 0 0 var(--xanh)} .sl-bang.sl-luoi td.sl-cot:not(.du):not(.cu){background:var(--xanh-nhat)} .sl-bang.sl-luoi thead th.sl-cot{box-shadow:inset 2px 0 0 var(--xanh),inset -2px 0 0 var(--xanh),inset 0 2px 0 var(--xanh)} .sl-bang .sl-dau{position:absolute;top:1px;right:3px;font-style:normal;font-size:11px;font-weight:800;line-height:1;cursor:help} .sl-bang .sl-dau.ok{color:#1b7f3b} .sl-bang .sl-dau.lech{color:var(--vang)} .sl-thanh-nap .sl-thang .nho{font-weight:700} .sl-thanh-nap .sl-thang .sl-thang-ten{min-width:110px} .sl-mt-nhom{display:inline-flex;border:1.3px solid var(--vien);border-radius:9px;overflow:hidden} .sl-mt-nhom .sl-mt-k{border:none;background:var(--the);padding:5px 10px;font:inherit;font-size:calc(12.5px*var(--co));font-weight:600;color:var(--chu);cursor:pointer;border-right:1px solid var(--vien)} .sl-mt-nhom .sl-mt-k:last-child{border-right:none} .sl-mt-nhom .sl-mt-k.bat{background:var(--xanh);color:#fff} .sl-mt-thu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border:1.3px solid var(--vien);border-radius:10px;background:var(--the);cursor:pointer;margin:6px 0} .sl-mt-thu:hover{border-color:var(--xanh)} details.sl-kq > summary{padding:6px 10px} .sl-bang.sl-luoi .bdc-o.sl-o{padding-right:16px;padding-left:16px} .sl-bang.sl-luoi td.sl-nh-o{padding:2px 6px;height:28px} .sl-bang.sl-luoi tr.sl-nh-dong td.bdc-ten{padding-top:2px;padding-bottom:2px} .sl-bang.sl-luoi .sl-chipn{padding:0 8px;line-height:20px} /* 3.157 — khung xem bên phải: sát trên dưới, đầu 1 dòng, ⊡ Vừa trang trọn 1 trang A4 / lần */ @media (min-width:900px){ body.co-tb .cot-phai{top:60px;height:calc(100vh - 72px);max-height:calc(100vh - 72px)} body.co-tb .than{padding-bottom:12px} .cot-phai #cp-ten{display:none} .cot-phai .dau-p{padding:6px 10px 6px 14px;align-items:center !important} .cot-phai .xem-phu{display:block !important;-webkit-line-clamp:unset !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:calc(12.5px*var(--co));color:var(--chu)} .cot-phai .xem-phu > :not(.cp-dong){display:none !important} .cot-phai .zoom button{min-height:28px;padding:2px 8px} } .than-p.vua-trang{scroll-snap-type:y mandatory} .than-p.vua-trang .o-trang{scroll-snap-align:start;display:flex;justify-content:center;align-items:flex-start;margin-bottom:8px} .cot-phai .than-p.vua-trang canvas,.than-p.vua-trang canvas{width:auto !important;max-width:100%;margin:0 auto} /* 3.157 — kiểu lọc SỐ LIỆU chung: hàng chip có nhãn + 🔎 tìm nhanh cuối hàng ô chọn */ .pv-cay .pv-hang1{flex-wrap:wrap;align-items:center} .pv-tim.to-tim{position:relative;flex:0 1 260px;min-width:200px;margin-left:auto;padding:3px 10px;border-width:1px;border-radius:8px} .pv-tim.to-tim input{font-size:calc(13px*var(--co))} .pv-gy{position:absolute;top:100%;left:0;right:0;z-index:30;display:grid;gap:2px;margin-top:3px;background:var(--the);border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.14)} .pv-gy:empty{display:none} .pv-gy button{text-align:left;border:1px solid var(--vien);border-radius:8px;padding:5px 10px;background:var(--the);font:inherit;font-size:calc(13px*var(--co));color:var(--chu);cursor:pointer} .pv-gy button:hover{border-color:var(--xanh);background:var(--xanh-nhat)} .pv-gy small{color:var(--chu-phu)} .pv-gy .rong{padding:6px 10px} .pv-cay .pv-hang2{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:4px} .pv-cay .pv-nhan{flex:0 0 64px;font-size:calc(11.5px*var(--co));color:var(--chu-phu);font-weight:600} .pv-cay .to-chip small{color:var(--chu-phu);font-weight:400;margin-left:2px} .pv-cay .to-chip.bat small{color:inherit} @media (max-width:699px){ .pv-cay .pv-hang2{flex-wrap:nowrap;overflow-x:auto} .pv-tim.to-tim{flex-basis:100%;margin-left:0} } .pv-cay .pv-hang2.to-chips{margin:3px 0 0;padding:0;min-height:0} .pv-cay .pv-hang2 .to-chip{padding:2px 9px;min-height:24px;line-height:1.2} .th-loc.th-nguon,.th-loc.th-ct{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0} .th-loc .pv-nhan{flex:0 0 64px;font-size:calc(11.5px*var(--co));color:var(--chu-phu);font-weight:600} .th-bc-gon .to-bc-dong{padding:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .th-bc-gon .to-bc-dong.th-mo{color:var(--chu-phu)} .th-bc-gon .th-thieu{color:var(--vang);cursor:help} .th-bc-gon{display:flex !important;flex-direction:column;gap:2px} .th-loc .pv-nhan,.th-bo .pv-cay .pv-nhan{flex-basis:88px} /* 3.157 — kiểu lọc FILE: chip kiểu xem, tấm lọc dưới thanh, dòng Đang lọc */ .tl-kx{display:inline-flex;flex:0 0 auto;border:1.3px solid var(--vien);border-radius:var(--nut-bo,10px);overflow:hidden} .tl-kx button{border:none;border-right:1px solid var(--vien);background:var(--the);padding:5px 10px;font:inherit;font-size:calc(12.5px*var(--co));font-weight:600;color:var(--chu);cursor:pointer;white-space:nowrap;min-height:var(--nut-cao,34px)} .tl-kx button:last-child{border-right:none} .tl-kx button.bat{background:var(--xanh);color:#fff} .than:not(.an-preview) .tl-kx .tl-chu{display:none} .tl-thanh .tl-pv.bat{background:var(--xanh-nhat);border-color:var(--xanh)} .tl-panel{border:1.3px solid var(--xanh);border-radius:12px;background:var(--the);padding:8px 12px 6px;margin:-2px 0 9px} .tl-panel .lg{margin:4px 0} .tl-panel .tl-panel-nut{margin-top:6px} .tl-dang{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:-3px 0 8px} .tl-dang-nhan{font-size:calc(12px*var(--co));color:var(--chu-phu);font-weight:600} .tl-panel .lg{display:flex;align-items:flex-start;gap:8px;margin:3px 0} .tl-panel .lg-nhan{flex:0 0 78px;padding-top:4px;font-size:calc(11.5px*var(--co));color:var(--chu-phu);font-weight:600;margin:0} .tl-panel .lg-the{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0} .tl-panel .the-loc{padding:2px 9px;font-size:calc(12px*var(--co));margin:0} .tl-panel .the-loc small{margin-left:3px;opacity:.75} .tl-panel .tl-panel-nut .nho{min-height:26px;padding:2px 10px;font-size:calc(12px*var(--co))} /* 3.158: Khai báo Hội vừa 1 trang — dòng nhóm xã, 📋 phân công cạnh tên Hội; ngoại lệ riêng xã ở Chuẩn hóa */ .hkb-xls tr.hkb-nhom td{background:var(--nen);font-weight:700;padding:4px 8px;height:auto;color:var(--chu);position:static} .hkb-xls tr.hkb-nhom td small{font-weight:400;color:var(--chu-phu)} .hkb-xls:not(.kt-rieng){width:100%} .hkb-xls:not(.kt-rieng) input.hkb-o{min-width:0;width:100%} .hkb-xls:not(.kt-rieng) td.hkb-hoi{width:1%} .hkb-xls td.hkb-hoi .hkb-pc{padding:0 4px;margin-right:2px} .kt-rieng-dau{margin:14px 0 6px;font-size:calc(14px*var(--co))} .kt-rieng-dau small{font-weight:400;color:var(--chu-phu)} .hkb-xls.kt-rieng input[id$="-ten"]{min-width:240px} /* 3.159: chân thanh bên hiện đủ chữ — dòng trạng thái tối đa 3 dòng, chip xuống dòng khi dài */ @media (min-width:1100px){ #thanh-ben #tt-khoi .tt-chu{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35} #thanh-ben #tt-khoi .tt-dong{align-items:flex-start} #thanh-ben #tt-khoi .tt-den{margin-top:3px} #thanh-ben #tb-tt #so-lieu .chip{white-space:normal;line-height:1.4;padding:1px 7px;margin:0 3px 3px 0} } /* 3.159: chế độ tối — bản in / khung xem trang file giữ nền trắng */ :root[data-theme="dark"] .o-trang canvas,:root[data-theme="dark"] .than-p img{background:#fff} /* 3.160: lọc số liệu chung — dòng 📍 (đường đang chọn) + hàng chip đánh số ① ② ③ */ .pv-dan{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0} .pv-dan-goc{font-size:calc(13px*var(--co))} .pv-dan-o{display:inline-flex;align-items:center;border:1px solid var(--xanh);background:var(--xanh-nhat);border-radius:14px;overflow:hidden} .pv-dan-o.mo{outline:2px solid var(--xanh)} .pv-dan-o button{border:none;background:none;min-height:0;font:inherit;font-size:calc(12.5px*var(--co));color:var(--xanh-dam);cursor:pointer} .pv-dan-ten{padding:2px 4px 2px 10px;font-weight:600} .pv-dan-x{padding:2px 8px 2px 4px;opacity:.7}.pv-dan-x:hover{opacity:1;color:var(--do)} .pv-dem{color:var(--chu-phu);margin-left:6px} .pv-cay .pv-nhan i{display:inline-block;width:16px;font-style:normal;color:var(--xanh)} .pv-them{font-size:calc(11.5px*var(--co));color:var(--chu-phu)} @media (min-width:700px){ .pv-hang1 .pv-sel{display:none} } @media (max-width:699px){ .pv-hang1 .pv-dan{display:none} .pv-hang1 .pv-sel{display:contents} } #tc-cay{margin:4px 0 6px} /* 3.160: chế độ tối — ô nhập / ô thả xuống theo giao diện (trình duyệt tự tô nền tối) */ :root[data-theme="dark"]{color-scheme:dark} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){color-scheme:dark} } :root[data-theme="dark"] .kt-chuan input.da{color:var(--chu);background:rgba(95,201,138,.16)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .kt-chuan input.da{color:var(--chu);background:rgba(95,201,138,.16)} } .pv-cay .pv-hang2 .pv-nhan{flex:0 0 86px;white-space:nowrap} .pv-hang1 .pv-dan{flex:1 1 0;min-width:180px} /* 3.161: tab Tổ — chip gom nhóm, nút ở đầu bảng, bảng cuộn trong khung, kẻ ô mờ, cột vừa số liệu, dòng cảnh báo */ .to-chip-khung{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px} .to-nhom{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px} .to-nhom-ten{font-size:calc(11px*var(--co));color:var(--chu-phu);font-weight:600;margin-right:2px} .to-loc.mo0{opacity:.5} .to-them{position:relative;display:inline-block}.to-them>summary{list-style:none;cursor:pointer}.to-them>summary::-webkit-details-marker{display:none} .to-them-ds{position:absolute;z-index:20;top:100%;left:0;margin-top:4px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px;background:var(--the);border:1px solid var(--vien);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.15)} .to-bang-dau{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:8px 0 4px} .to-bang-tieu{flex:1 1 300px;min-width:0}.to-bang-tieu .to-the-so{margin:2px 0 0} .to-bang-nut{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto} .to-dv{color:var(--chu-phu)} .to-cuon-khung{max-height:calc(100vh - 330px);min-height:180px;overflow:auto} .to-cuon-khung thead th{position:sticky;top:0;z-index:2;background:var(--nen)} .to-cuon-khung tr.tong:last-child td{position:sticky;bottom:0;z-index:1;background:var(--nen)} .to-bang.luoi{border-collapse:collapse} .to-bang.luoi th,.to-bang.luoi td{border:1px solid var(--vien);padding:3px 7px} .to-bang.luoi th{white-space:normal;text-align:center;vertical-align:middle;font-size:calc(12px*var(--co))} .to-bang.luoi td{white-space:nowrap;width:1%} .to-bang.luoi td.to-ten{width:auto;white-space:normal;min-width:160px} .to-bang.luoi td.s{text-align:right} .to-bang tr.to-canh td{background:var(--vang-nen)} .to-bang td.to-lu{white-space:normal;min-width:120px;font-size:calc(11.5px*var(--co));color:var(--vang);font-weight:600} .to-cc.sap{background:var(--vang-nen);color:var(--vang)} .to-cot-ds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin:8px 0} .to-bang.luoi td:first-child,.to-bang.luoi th:first-child{min-width:0} .to-bang.luoi.to-bang-pgd td:first-child{min-width:200px;white-space:nowrap} /* 3.162: lọc số liệu — hàng 1 Xã (luôn hiện) + 📍 đường dẫn chỉ báo bên phải; hàng 2 Điểm GD │ Hội; hàng 3 Tổ chip + ô sổ xuống */ .pv-cay .pv-nhom{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px} .pv-cay .pv-hang1 .pv-nhan,.pv-cay .pv-nhom .pv-nhan{flex:0 0 auto;margin-right:4px} .pv-cay .pv-hang2 > .pv-nhan{flex:0 0 auto;margin-right:4px} .pv-cay .pv-hang1 > .pv-nhom > .to-chip,.pv-cay .pv-nhom .to-chip{padding:2px 9px;min-height:24px;line-height:1.2} .pv-vach{color:var(--vien);margin:0 6px;font-weight:300} .pv-hang1 .pv-dan{flex:0 1 auto;min-width:0;margin-left:auto;gap:3px} .pv-dan-o{display:inline-block;border:1px solid var(--xanh);background:var(--xanh-nhat);color:var(--xanh-dam);border-radius:12px;padding:1px 9px;font-size:calc(12px*var(--co));font-weight:600} .pv-hang1 .pv-tim.to-tim{margin-left:6px;flex:0 1 230px} .pv-to-ds{font:inherit;font-size:calc(12px*var(--co));padding:2px 6px;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu);max-width:220px} .pv-to-ds.co{border-color:var(--xanh);color:var(--xanh-dam);font-weight:600} @media (max-width:699px){ .pv-hang1 .pv-nhom{display:none} } /* ===== 3.163 — Nạp & KT: dải lịch tháng, cột chốt / cột ngày, màu nền tối ===== */ .sl-dai{display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap} .sl-dl{display:inline-flex;flex-direction:column;align-items:center;min-width:40px;padding:2px 6px 1px;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu);font:inherit;font-size:calc(12.5px*var(--co));font-weight:700;cursor:pointer;line-height:1.1} .sl-dl small{font-weight:400;font-size:.8em;color:var(--chu-phu)} .sl-dl.bat{background:var(--xanh);border-color:var(--xanh);color:#fff} .sl-dl.bat small{color:inherit} .sl-dl-dau{font-style:normal;font-size:.8em;line-height:1} .sl-dl-dau.dat{color:var(--luc)} .sl-dl-dau.thieu{color:var(--vang)} .sl-dl-dau.chua{color:var(--chu-phu)} .sl-dl.bat .sl-dl-dau{color:#fff} .sl-gan-nhat{font-weight:700} .sl-bang.sl-luoi th.sl-cot-chot{border-left:2px solid var(--xanh);line-height:1.15;white-space:nowrap} .sl-bang.sl-luoi th.sl-cot-chot b{display:block} .sl-bang.sl-luoi th.sl-cot-chot small{display:block;font-weight:400;font-size:calc(10.5px*var(--co))} .sl-bang.sl-luoi th.sl-cot-ngay{font-weight:600;white-space:nowrap;background:var(--nen)} .sl-bang.sl-luoi td.sl-cot-chot{border-left:2px solid var(--xanh) !important} .sl-bang .bdc-o.sl-o.sl-o-nt{opacity:.55} .sl-ngay-chip{background:var(--luc-nen);color:var(--luc);border-color:var(--vien)} .sl-ngay-chip.them{background:var(--nen);color:var(--chu-phu);border-color:var(--vien)} /* 3.163 — Tab Tổ: cột vừa nội dung, cột Tự động (ẩn sẵn, bật dần khi còn chỗ), ⚙ Cột 3 chế độ */ .to-bang .tu{display:none} .to-bang .tu.tu-hien{display:table-cell} .to-bang.luoi td.to-ten{min-width:0;white-space:nowrap} .to-bang.luoi th{min-width:0} .to-bang.luoi td.to-lu{min-width:0;white-space:normal} .to-cot-dong{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed var(--vien)} .to-cot-dong span{flex:1;min-width:0}.to-cot-dong small{color:var(--chu-phu)} .to-cot-dong select{font-size:calc(12px*var(--co));padding:2px 4px} #to-the .to-bang.luoi{width:auto;max-width:none} .pv-ap{font-size:.8em;color:var(--chu-phu);font-weight:400;margin-left:2px}.to-chip.bat .pv-ap{color:inherit;opacity:.8} /* 3.163 — chip báo trạng thái số liệu (cuối hàng Xã, trước 📍) */ .pv-chip-o{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center}.pv-chip-o:empty{display:none} .sl-chip{display:inline-flex;align-items:center;gap:3px;font-size:calc(11px*var(--co));padding:1px 7px;border-radius:10px;border:1px solid var(--vien);background:var(--the);color:var(--chu-phu);cursor:pointer;white-space:nowrap;line-height:1.6} span.sl-chip{cursor:help} .sl-chip.vang{background:var(--vang-nen);color:var(--vang);border-color:var(--vang)} .sl-chip.cam{background:var(--vang-nen);color:var(--do);border-color:var(--do)} .sl-chip.xanh{background:var(--luc-nen);color:var(--luc);border-color:var(--luc)} .sl-chip-hang{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0} .ky-canh{color:var(--vang);font-weight:700;margin-right:3px;cursor:help} #to-the .to-bang.luoi td.to-ten{width:1%} /* 3.164 — Tổng hợp: 3 nhóm báo cáo · chọn 1 · xem ngay ở khung phải */ .th-loc-hang{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px} .th-bo2{grid-template-columns:minmax(260px,320px) minmax(0,1fr)} .th-nhom-ten{font-size:calc(11px*var(--co));font-weight:700;color:var(--chu-phu);text-transform:uppercase;letter-spacing:.03em;margin:8px 0 2px} .th-nhom-ten:first-child{margin-top:0} .th-bc-gon .to-bc-dong{border-radius:6px;padding:3px 6px;cursor:pointer} .th-bc-gon .to-bc-dong.bat{background:var(--xanh-nhat);font-weight:600} .th-bc-gon .to-bc-dong.th-mo2{opacity:.6} .th-cap{font-size:calc(10.5px*var(--co));color:var(--chu-phu);font-weight:400} .th-xem .xuat-hang{margin:0 0 6px} .th-khung{width:100%;height:calc(100vh - 300px);min-height:420px;border:1px solid var(--vien);border-radius:8px;background:#fff} @media(max-width:899px){ .th-bo2{grid-template-columns:1fr} } .th-bo.th-bo2{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:14px;text-align:left;align-items:start} .th-bo2>.th-cot{min-width:0;overflow:hidden} .th-bo2 .th-bc-gon{align-items:stretch;text-align:left} .th-bo2 .th-bc-gon .to-bc-dong{display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .th-bo2 .th-nhom-ten{text-align:left} @media(max-width:899px){ .th-bo.th-bo2{grid-template-columns:1fr} } #tr7 #th-ds{display:block !important;text-align:left;margin-top:0} #tr7 #th-ds .to-bc-dong{display:block;text-align:left;font-size:calc(13px*var(--co));margin:0} #tr7 #th-ds .th-nhom-ten{text-align:left} /* 3.165 — Kết quả kiểm tra theo file (cùng thứ tự ma trận) */ .sl-kt-loc{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:6px 0} .sl-kt-tim{display:inline-flex;align-items:center;gap:3px;margin-left:auto}.sl-kt-tim input{width:180px;font-size:calc(12px*var(--co));padding:2px 6px} .sl-kt-file{border:1px solid var(--vien);border-radius:8px;margin:4px 0;background:var(--the)} .sl-kt-file>summary{cursor:pointer;padding:5px 9px;display:flex;gap:10px;align-items:center} .sl-kt-file>.sl-kt-muc{margin:2px 8px 2px 20px} .sl-kt-dem{display:inline-flex;gap:8px;font-size:calc(12px*var(--co))}.sl-kt-dem .ok{color:var(--luc)}.sl-kt-dem .lech{color:var(--do)}.sl-kt-dem .canh{color:var(--vang)} .sl-kt-ref{color:var(--chu-phu);font-size:.95em} .sl-kt-nhay{outline:2px solid var(--xanh);outline-offset:1px} .sl-dau.lech{cursor:pointer} /* 3.167 (anh chốt 11/10) — KHỐI LỌC ĐỊA BÀN đồng bộ mọi tab: khung + nhãn "LỌC ĐỊA BÀN", mỗi dòng 1 thanh nổi, mỗi cấp 1 màu (Xã xanh dương · Điểm GD xanh lá · Hội cam · Tổ tím — nhãn + chip đang chọn cùng màu), tên dòng chữ to và đậm hơn chip con */ :root{--c-xa:#185FA5;--c-xa-n:#EAF2FA;--c-diem:#1A6E3F;--c-diem-n:#E6F4EC;--c-hoi:#9A4D00;--c-hoi-n:#FDEEDC;--c-to:#6B3FA0;--c-to-n:#F1EAFA} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-xa:#7DB8EE;--c-xa-n:#15304A;--c-diem:#6FD39A;--c-diem-n:#12301F;--c-hoi:#F0B070;--c-hoi-n:#3A2810;--c-to:#C6A6F0;--c-to-n:#2C2140}} :root[data-theme="dark"]{--c-xa:#7DB8EE;--c-xa-n:#15304A;--c-diem:#6FD39A;--c-diem-n:#12301F;--c-hoi:#F0B070;--c-hoi-n:#3A2810;--c-to:#C6A6F0;--c-to-n:#2C2140} .pv-cay .loc-khoi{position:relative;display:flex;flex-direction:column;gap:5px;background:var(--xanh-nhat);border:2px solid var(--xanh);border-radius:10px;padding:14px 8px 7px;margin:12px 0 6px} .pv-cay .loc-khoi::before{content:"LỌC ĐỊA BÀN";position:absolute;top:-10px;left:12px;background:var(--xanh);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:1px 8px;border-radius:5px} .pv-cay .loc-khoi .pv-hang1,.pv-cay .loc-khoi .pv-hang2.cap-to,.pv-cay .loc-khoi .pv-nhom.cap-diem,.pv-cay .loc-khoi .pv-nhom.cap-hoi{background:var(--the);border-radius:7px;padding:4px 8px;margin:0;box-shadow:inset 4px 0 0 var(--c, var(--c-xa)),0 1px 2px rgba(0,0,0,.12)} .pv-cay .loc-khoi .pv-hang2[data-cap="diem-hoi"]{background:none;box-shadow:none;padding:0;margin:0;gap:6px;flex-wrap:wrap} .pv-cay .loc-khoi .pv-nhom.cap-diem,.pv-cay .loc-khoi .pv-nhom.cap-hoi{flex:1 1 auto} .pv-cay .cap-xa{--c:var(--c-xa);--n:var(--c-xa-n)} .pv-cay .cap-diem{--c:var(--c-diem);--n:var(--c-diem-n)} .pv-cay .cap-hoi{--c:var(--c-hoi);--n:var(--c-hoi-n)} .pv-cay .cap-to{--c:var(--c-to);--n:var(--c-to-n)} .pv-cay .loc-khoi .pv-nhan{display:inline-block;background:var(--n, var(--xanh-nhat));color:var(--c, var(--xanh-dam));border:1px solid var(--c, var(--xanh));border-radius:6px;padding:1px 9px;min-width:78px;text-align:center;font-size:calc(14px*var(--co));font-weight:800;letter-spacing:.01em;flex:0 0 auto} .pv-cay .loc-khoi .cap-xa .to-chip.bat,.pv-cay .loc-khoi .cap-diem .to-chip.bat,.pv-cay .loc-khoi .cap-hoi .to-chip.bat,.pv-cay .loc-khoi .cap-to .to-chip.bat{background:var(--c);border-color:var(--c);color:var(--the)} .pv-cay .loc-khoi .cap-to .pv-to-ds.co{border-color:var(--c-to);color:var(--c-to)} @media (max-width:699px){ .pv-cay .loc-khoi{padding:12px 6px 6px} .pv-cay .loc-khoi .pv-nhan{min-width:0} } /* 3.168 (anh 11/10) — Tổng hợp gọn 1 cửa sổ: Nguồn vốn + Chương trình 1 dòng, bớt khoảng trống, khung xem vừa cửa sổ (cuộn bên trong) */ .th-loc-1{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px} .th-loc-1 .th-loc{margin:0} .th-loc-hang{gap:2px;margin:0 0 4px} .th-loc-hang .pv-cay .loc-khoi{margin:10px 0 2px} .th-bo.th-bo2{gap:10px;margin-top:4px} #tr7 #th-ds .th-nhom-ten{margin:6px 0 1px} #tr7 #th-ds .to-bc-dong{padding:2px 6px} .th-xem .xuat-hang{margin:0 0 4px;gap:4px} .th-khung{min-height:320px} @media (min-width:900px){ .th-bo2>.th-cot:first-child{position:sticky;top:0;align-self:start} } /* 3.168 (anh 11/10) — tab Số liệu gọn trong 1 cửa sổ: dồn sát lên trên; khối LỌC ĐỊA BÀN đứng cố định dưới thanh trên khi cuộn; bảng tab Tổ cuộn vừa phần còn lại */ @media (min-width:900px){ body.ngan7 .than{padding-top:4px} body.ngan7 #tr7 .pv-cay{position:sticky;top:var(--dau-cao,52px);z-index:6;background:var(--nen);padding:1px 0 3px} body.ngan7 #tr7 .pv-cay .loc-khoi{margin:10px 0 2px} body.ngan7 #tr7 .sk-thanh{position:static} } #tr7 .to-bc.to-bc-dau{margin:2px 0 6px;padding:4px 10px;background:var(--the);border:1px solid var(--vien);border-radius:8px} /* 3.170 — 📝 Hồ sơ Tổ · 📄 Hồ sơ vay (js/25-ho-so.js): cột trái = danh sách mẫu + tùy chọn; khung phải = A4 xem ngay */ .th-bo.th-bo2.hso-bo{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} /* 3.208 (anh chốt): bố cục như tab Giao dịch xã — nhập liệu rộng 60 %, xem trước 40 % */ @media(max-width:899px){ .th-bo.th-bo2.hso-bo{grid-template-columns:1fr} } @media(min-width:900px){ #tr7 .hso-bo>.hso-trai{max-height:calc(100vh - var(--dau-cao,52px) - var(--loc-cao,0px) - 24px);overflow:auto;padding-right:4px} } .hso-dau-ds{display:flex;align-items:center;justify-content:space-between;gap:6px} .hso-dau-ds button{text-transform:none;letter-spacing:0;font-weight:600} #hso-ds .to-bc-dong b{color:var(--xanh)} .hso-chu{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px;font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .hso-chu span{padding:0 6px;border-radius:4px} .hso-chu .hso-chu-sl{background:#d9f0d3;color:#1d4d1a}.hso-chu .hso-chu-kb{background:#fff0b3;color:#5c4600}.hso-chu .hso-chu-tay{border:1px dashed var(--vien)} .hso-tuy{border-top:1px solid var(--vien);margin-top:8px;padding-top:6px} .hso-tuy .kt-kb{grid-template-columns:118px minmax(0,1fr);margin:4px 0} .hso-tuy .kt-kb select{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);width:100%;min-width:0;box-sizing:border-box} .hso-tuy .sl-phu{margin:2px 0 4px;font-size:calc(12px*var(--co))} .hso-tuy .hso-canh{color:var(--vang)} .hso-nhac{margin:4px 0 8px} .hso-o2{display:block;margin:6px 0;font-size:calc(13px*var(--co))} .hso-tick{border:1px solid var(--vien);border-radius:8px;padding:4px 8px;margin:6px 0;background:var(--the)} .hso-tick>summary{cursor:pointer;font-weight:600;font-size:calc(13px*var(--co))} .hso-tick-ds{display:flex;flex-direction:column;gap:1px;max-height:260px;overflow:auto;margin-top:4px} .hso-tick-ds label{display:block;font-size:calc(13px*var(--co));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hso-tick-ds small{color:var(--chu-phu)} .hso-kb-nhom{border:1px solid var(--vien);border-radius:8px;padding:6px 10px;margin:8px 0;background:var(--the)} .hso-kb-nhom>summary{cursor:pointer;font-weight:600} .hso-kb-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:2px 18px} .hso-kb-luoi .kt-kb{grid-template-columns:minmax(120px,46%) minmax(0,1fr)} #tr7 #hso-ds{display:block !important;text-align:left;margin-top:0} #tr7 #hso-ds .to-bc-dong{display:block;text-align:left;font-size:calc(13px*var(--co));margin:0;padding:3px 6px;white-space:normal;line-height:1.3} #tr7 #hso-ds .hso-dau-ds{margin:0 0 4px;flex-wrap:wrap} #tr7 #hso-ds .hso-dau-ds button{font-size:calc(12px*var(--co))} /* 3.172: 🏢 Giao dịch xã — điều khiển bên trái, khung xem mẫu (iframe, CSS gốc của mẫu) bên phải */ .th-bo.th-bo2.gdx-bo{grid-template-columns:minmax(320px,420px) minmax(0,1fr)} @media(max-width:899px){ .th-bo.th-bo2.gdx-bo{grid-template-columns:1fr} } @media(min-width:900px){ #tr7 .gdx-bo>.gdx-trai{max-height:calc(100vh - var(--dau-cao,52px) - 24px);overflow:auto;padding-right:4px} } .gdx-trai{text-align:left;font-size:calc(13px*var(--co))} .gdx-mau,.gdx-tab{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px} .gdx-mau button,.gdx-tab button{flex:1 1 auto;padding:6px 10px;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chu);font:inherit;font-weight:600;cursor:pointer} .gdx-mau button.bat,.gdx-tab button.bat{background:var(--xanh);border-color:var(--xanh);color:#fff} .gdx-o{display:block;margin:6px 0} .gdx-o>span:first-child{display:block;font-weight:600;margin-bottom:2px} .gdx-o input,.gdx-o select,.gdx-hang input,.gdx-kt input,.gdx-kt select{font:inherit;padding:5px 8px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);width:100%;min-width:0;box-sizing:border-box} .gdx-o small{display:block;color:var(--chu-phu);margin-top:2px} .gdx-lon{font-size:calc(15px*var(--co)) !important;font-weight:700} .gdx-hang{display:flex;gap:6px;align-items:center} .gdx-hang input{flex:1} .gdx-nh{font-weight:600;margin:8px 0 3px} .gdx-nh small{font-weight:400;color:var(--chu-phu)} .gdx-chips{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px} .gdx-mh{display:inline-flex;gap:1px} .gdx-mh button{padding:3px 7px} .gdx-the{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:14px;background:var(--the);border:1px solid var(--vien)} .gdx-the a{cursor:pointer;color:#d32f2f;font-weight:700} .gdx-trong{color:var(--chu-phu)} .gdx-chu{border:1.5px dashed #7cb342;border-radius:6px;padding:8px 12px;font-weight:700;color:#2e7d32;min-height:38px} .gdx-nut{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px} .gdx-in{padding:10px !important;font-size:calc(14px*var(--co)) !important} .gdx-nho{font-size:calc(11px*var(--co)) !important;padding:1px 7px !important;margin-left:4px} .gdx-gqvl2,.gdx-r{display:block;margin:5px 0} .gdx-gqvl2{padding:6px 10px;border:1.5px solid #22c55e;border-radius:8px;font-weight:600} .gdx-nhom{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0} .gdx-nhom .gdx-nh{margin:0} .gdx-dot{padding:6px 10px;border-radius:8px;background:var(--the);border:1px solid var(--vien);margin:0 0 6px;line-height:1.45} .gdx-dot.chua{border-color:var(--vang)} .gdx-khoi{border-top:1px solid var(--vien);margin-top:8px;padding-top:4px} .gdx-khoi>summary{cursor:pointer;font-weight:600;margin:6px 0} .gdx-dong{display:flex;gap:4px;align-items:center;margin:2px 0} .gdx-dong span{flex:1} .gdx-o2{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0} .gdx-thanh{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px;font-size:calc(12.5px*var(--co))} .gdx-thanh .gdx-nhan{flex:1 1 auto;font-weight:600} .gdx-zoom{display:inline-flex;gap:2px} .gdx-gqvl{display:inline-flex;gap:5px;align-items:center;padding:3px 10px;border:1.5px solid #22c55e;border-radius:16px;font-weight:600} .gdx-kt{width:100%;border-collapse:collapse;margin:6px 0;font-size:calc(13px*var(--co))} .gdx-kt th,.gdx-kt td{border:1px solid var(--vien);padding:4px 6px;text-align:left;vertical-align:middle} .gdx-kt td:first-child{font-weight:600;white-space:nowrap} .gdx-kt .gdx-cc{color:var(--chu-phu);font-size:calc(12px*var(--co))} .gdx-n3{margin-right:8px;white-space:nowrap} .gdx-kt input[type=date]{width:auto} .gdx-canh{color:#d32f2f;font-weight:600;margin:6px 0} #hop-in .gdx-kt input[type=radio],#hop-in .gdx-kt input[type=checkbox],.gdx-trai input[type=radio],.gdx-trai input[type=checkbox]{width:auto;display:inline-block;margin:0 5px 0 0;vertical-align:middle} #hop-in .gdx-kt label{display:inline-flex;align-items:center;margin-right:12px;white-space:nowrap} /* 3.174 (anh chốt 12/10) — bố cục mới tab Giao dịch xã: khung chọn ~60 % trái (chip / nút chọn / ô sổ xuống) + khung xem ~40 % phải, bật / tắt; Tóm tắt bản in ghim đáy khung trái; mẫu cấp Điểm GD ẩn hàng Hội / Tổ của khối LỌC ĐỊA BÀN */ .gdx-cap-diem .cap-hoi,.gdx-cap-diem [data-cap="to"],.gdx-cap-diem .pv-hoi,.gdx-cap-diem .pv-to{display:none !important} #gdx-cay.gdx-cap-khong{display:none} /* 3.193: 🧾 Bảng kê (mẫu trắng) không cần lọc địa bàn */ .gdx2-bo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start;margin-top:4px;text-align:left} .gdx2-bo.an-xem{grid-template-columns:1fr}.gdx2-bo.an-xem .gdx2-xem{display:none} @media(max-width:899px){ .gdx2-bo{grid-template-columns:1fr} } .gdx2-trai{display:flex;flex-direction:column;min-width:0;font-size:calc(13px*var(--co));border:1px solid var(--vien);border-radius:10px;background:var(--the)} @media(min-width:900px){ #tr7 .gdx2-trai{max-height:calc(100vh - var(--dau-cao,52px) - var(--loc-cao,0px) - 20px)} #tr7 .gdx2-ruot{overflow:auto} } .gdx2-xem{min-width:0} .gdx2-dau{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--vien)} .gdx2-mau,.gdx2-nut{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .gdx2-nhom{font-size:calc(11px*var(--co));color:var(--chu-phu);margin-left:4px} .gdx2-ruot{padding:4px 10px 8px;flex:1 1 auto;min-height:0} .gdx2-tieu{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;font-size:calc(14px*var(--co));margin:6px 0 4px} .gdx2-diem{padding:5px 9px;border-radius:8px;background:var(--luc-nen);color:var(--chu);margin:4px 0} .gdx2-hang{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--vien);transition:background .3s} .gdx2-hang.nhay,.gdx-kbr-dong.nhay{background:var(--vang-nen)} @media(max-width:560px){ .gdx2-hang{grid-template-columns:1fr} } .gdx2-nh{font-weight:600;color:var(--chu-phu)} .gdx2-gt{display:flex;flex-wrap:wrap;gap:5px 6px;align-items:center;min-width:0} .gdx-c{border:1px solid var(--vien);background:var(--nen,#fff);color:var(--chu);border-radius:16px;padding:3px 11px;font:inherit;cursor:pointer;white-space:nowrap} .gdx-c.bat{background:var(--xanh);border-color:var(--xanh);color:#fff} .gdx-c.khac{border-style:dashed;color:var(--chu-phu)} .gdx-c small{opacity:.8} .gdx-x{border:none;background:none;color:#d32f2f;font-weight:700;cursor:pointer;padding:0 3px} .gdx-hien{color:var(--xanh);margin-left:4px} .gdx-vang{color:var(--vang)} .gdx-ghi{display:block;width:100%;color:var(--chu-phu)} .gdx-i{font:inherit;padding:4px 8px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu);min-width:0;box-sizing:border-box} .gdx-ngay{font:inherit;padding:2px 6px;border:1px dashed var(--vien);border-radius:14px;background:var(--nen,#fff);color:var(--chu)} .gdx-so{width:64px}.gdx-tien{width:150px;font-weight:700}.gdx-ngan{width:150px} .gdx-ra{display:inline-flex;flex-wrap:wrap;gap:4px 14px} #tr7 .gdx-ra input[type=radio],#hop-in .gdx-ra input[type=radio],#hop-in .gdx-kbr-nhanh input{width:auto;display:inline-block;margin:0 3px 0 0} .gdx-nhap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;width:100%} .gdx-chu-tien{width:100%;color:var(--luc);font-style:italic} .gdx-chips{display:flex;flex-wrap:wrap;gap:5px;width:100%}.gdx-phu{opacity:.9}.gdx-nho2{color:var(--chu-phu);align-self:center} .gdx-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 10px;width:100%} .gdx-luoi label{display:flex;flex-direction:column;gap:2px}.gdx-luoi label>span{font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .gdx-ba{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%} .gdx-ba label{display:flex;flex-direction:column;gap:2px;min-width:0}.gdx-ba label>span{font-size:calc(11.5px*var(--co));color:var(--chu-phu)} @media(max-width:560px){ .gdx-ba{grid-template-columns:1fr} } .gdx-l1{display:flex;gap:6px;align-items:center;margin:4px 0} .gdx-tim{position:relative;width:100%}.gdx-tim>input{width:100%} .gdx-gy{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--the);border:1px solid var(--vien);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.18);max-height:300px;overflow:auto} .gdx-gy:empty{display:none}.gdx-gy button{display:block;width:100%;text-align:left;border:none;border-bottom:1px solid var(--vien);background:none;color:var(--chu);padding:6px 10px;font:inherit;cursor:pointer} .gdx-gy button:hover{background:var(--xanh-nhat)}.gdx-gy small{color:var(--chu-phu)}.gdx-gy .rong{padding:8px 10px} .gdx-nguoi{width:100%;padding:5px 9px;border-radius:8px;background:var(--xanh-nhat);line-height:1.5} .gdx-nh3{width:100%;color:var(--chu-phu)} .gdx2-tom{position:sticky;bottom:0;border-top:2px solid var(--xanh);background:var(--xanh-nhat);padding:5px 8px;border-radius:0 0 10px 10px;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0} .gdx-tc{border:1px solid var(--vien);background:var(--the);border-radius:12px;padding:1px 9px;font-size:calc(12px*var(--co));cursor:pointer;white-space:nowrap} .gdx-tc.vang{background:var(--vang-nen);border-color:var(--vang)}.gdx-tc.do{background:var(--do-nen);border-color:var(--do);color:var(--do)} .gdx2-canh{margin-top:4px;font-size:calc(12.5px*var(--co))}.gdx2-canh>div{cursor:pointer}.gdx2-canh .vang{color:var(--vang)}.gdx2-canh .do{color:var(--do);font-weight:600} .gdx2-in{display:flex;justify-content:flex-end;gap:5px;flex:none;margin-left:auto}.gdx2-in button{white-space:nowrap} .gdx2-canh1{flex:0 1 auto;max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:calc(12px*var(--co))}.gdx2-canh1.vang{color:var(--vang)}.gdx2-canh1.do{color:var(--do);font-weight:600} @media(max-width:700px){.gdx2-tom{flex-wrap:wrap}.gdx2-canh1{max-width:100%}} .gdx-kbr{display:flex;flex-direction:column} .gdx-kbr-dong{display:grid;grid-template-columns:170px minmax(0,1fr) 110px;gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--vien)} @media(max-width:700px){ .gdx-kbr-dong{grid-template-columns:1fr} } .gdx-kbr-ten{font-weight:600}.gdx-kbr-gt{display:flex;flex-wrap:wrap;gap:5px 6px;align-items:center;min-width:0} .gdx-kbr-nhom{margin:12px 0 2px;padding:5px 8px;font-weight:700;background:var(--xanh-nhat);border-left:4px solid var(--xanh);border-radius:4px} /* 3.192: tiêu đề nhóm Giấy lĩnh / Bảng kê trong ⚙ Khai báo riêng */ .gdx-kbr-nhanh{white-space:nowrap;font-size:calc(12px*var(--co))} .gdx-bang{max-height:60vh;overflow:auto}.gdx-bang table{width:100%;border-collapse:collapse;font-size:calc(12.5px*var(--co))} .gdx-bang th,.gdx-bang td{border:1px solid var(--vien);padding:4px 6px;text-align:left;vertical-align:top}.gdx-nk-nut{white-space:nowrap} .gdx-ds{margin:6px 0 6px 18px} #hop-in .gdx-kbr,#hop-in .gdx-khoi,#hop-in .gdx-bang,#hop-in .gdx-ds{text-align:left} #hop-in .gdx-khoi .hang-nut{justify-content:flex-start} .gdx-kbr-gt>.gdx-i,.gdx2-gt>.gdx-i{flex:1 1 220px} .gdx-kbr-gt>select.gdx-i,.gdx2-gt>select.gdx-i{flex:0 1 auto} /* 3.175: Giấy lĩnh — form gõ tay như mẫu thật; ô ngày gõ nhanh + 📅; ▲▼ số hộ / số tiền 04/TD; khối 📚 danh mục tổ ở Nạp & KT */ .gl-form{width:100%;border:1px dashed var(--vien);border-radius:8px;padding:6px 8px;margin-top:4px} .gl-form-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px} .gl-form-luoi label{display:flex;flex-direction:column;gap:2px;min-width:0}.gl-form-luoi label>span{font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .gl-form-luoi .gl-f2{grid-column:1 / -1} .gdx-ngay2{display:inline-flex;align-items:center;gap:2px} .gdx-ngay2 .ngay-gy{display:none !important} .gdx-ngay2 .gdx-ngay{width:128px;border-style:solid;border-radius:14px;padding:3px 9px} .gdx-lich{width:30px;min-width:30px;padding:2px;border:1px dashed var(--vien);border-radius:14px;background:var(--nen,#fff);color:transparent;cursor:pointer} .gdx-lich::-webkit-datetime-edit{display:none} .gdx-buoc{display:inline-flex;flex-direction:column;margin-left:-4px} .gdx-buoc button{border:1px solid var(--vien);background:var(--the);color:var(--chu);font-size:9px;line-height:1;padding:2px 6px;cursor:pointer} .gdx-buoc button:first-child{border-radius:5px 5px 0 0}.gdx-buoc button:last-child{border-radius:0 0 5px 5px;border-top:none} .dm-khoi .dm-ds{margin:3px 0}.dm-khoi .dm-ds summary,.dm-hop .dm-ds summary{cursor:pointer}.dm-ds.vang summary{color:var(--vang)}.dm-ds.do summary{color:var(--do)} .dm-ds>div{max-height:220px;overflow:auto;font-size:calc(12px*var(--co));padding:2px 8px} #hop-in .dm-hop{text-align:left} /* 3.176: Giấy lĩnh — khung "Người lĩnh · số tiền" gọn (lưới 6 cột như mẫu thật) */ .gl-khung{width:100%;border:1px solid var(--vien);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:5px;background:var(--the)} .gl-k1{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:center} @media(max-width:700px){ .gl-k1{grid-template-columns:1fr} } .gl-k2 select{width:100%}.gl-k3{display:flex;gap:6px;justify-content:flex-end} .gl-khung .gl-form-luoi{grid-template-columns:repeat(12,minmax(0,1fr));gap:4px 8px} .gl-khung .gl-form-luoi .gl-c3{grid-column:span 3}.gl-khung .gl-form-luoi .gl-c4{grid-column:span 4}.gl-khung .gl-form-luoi .gl-c5{grid-column:span 5}.gl-khung .gl-form-luoi .gl-c8{grid-column:span 8}.gl-khung .gl-form-luoi .gl-c12{grid-column:1 / -1} @media(max-width:700px){.gl-khung .gl-form-luoi .gl-c3,.gl-khung .gl-form-luoi .gl-c4,.gl-khung .gl-form-luoi .gl-c5{grid-column:span 6}.gl-khung .gl-form-luoi .gl-c8{grid-column:1 / -1}} .gl-khung .gl-form-luoi input{padding:3px 7px} .gl-tien{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.gl-tien label{display:flex;gap:5px;align-items:center;font-weight:600} .gdx-gy button.bat{background:var(--xanh-nhat);outline:2px solid var(--xanh)} .gdx-moi{border-color:var(--xanh) !important;color:var(--xanh) !important;font-weight:600} .gdx-gy-pham{font-size:12px;color:#546e7a;padding:3px 6px;background:#f5f7f8}.gdx-gy-pham .lk{margin-left:6px} .pv-gon{flex:none;white-space:nowrap} /* 3.227: 📌 Ghim khối lọc · ⬆ Lên 1 cấp · mắt đường dẫn bấm được gạch chân */ .pv-len,.pv-ghim-nut{flex:none;white-space:nowrap}.pv-ghim-nut{opacity:.6}.pv-ghim-nut.bat{opacity:1;border-color:var(--xanh);background:var(--xanh-nhat);color:var(--xanh-dam)} button.pv-dan-o.pv-ve{text-decoration:underline dotted;text-underline-offset:2px} .pv-cay .loc-khoi.gon .pv-nhom.cap-xa,.pv-cay .loc-khoi.gon .pv-hang2{display:none} @media (min-width:700px){ .pv-cay .loc-khoi.gon .pv-sel{display:none} } /* 3.206: gọn = 1 dòng đường dẫn (điện thoại giữ ô chọn) */ button.pv-dan-o.pv-ve{cursor:pointer;font:inherit;font-size:calc(12px*var(--co));font-weight:600;min-height:0;line-height:1.4}button.pv-dan-o.pv-ve:hover{background:var(--xanh);color:#fff}.pv-cay .loc-khoi.gon{padding-top:12px;padding-bottom:4px} .gdx2-dau{flex-wrap:nowrap;padding:5px 8px}.gdx2-mau{flex-wrap:nowrap;overflow-x:auto;min-width:0}.gdx2-nut{flex:none;flex-wrap:nowrap} .gdx-menu{position:relative;display:inline-block}.gdx-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}.gdx-menu>summary::-webkit-details-marker{display:none} .gdx-menu>div{position:absolute;right:0;top:calc(100% + 3px);z-index:30;display:flex;flex-direction:column;gap:3px;padding:5px;background:var(--the);border:1px solid var(--vien);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);min-width:190px} .gdx-menu>div button{text-align:left;white-space:nowrap}.gdx-menu.len>div{top:auto;bottom:calc(100% + 3px)} .gdx-menu>summary{border:1px solid var(--vien);border-radius:6px;padding:3px 10px;background:var(--the);white-space:nowrap;font-size:calc(13px*var(--co))}.gdx-menu[open]>summary{background:var(--xanh-nhat)} .gdx-1dong{display:flex;flex-wrap:nowrap;gap:5px;align-items:center;white-space:nowrap;overflow-x:auto} .gdx-tien-to{width:165px;font-size:calc(17px*var(--co));font-weight:800;color:var(--xanh-dam,#0d47a1);border:2px solid var(--xanh)!important;background:var(--vang-nen,#fff8e1);padding:5px 9px} .gl-nhan2{display:flex;justify-content:space-between;gap:8px;min-width:0}.gl-nhan2>span{flex:none;font-size:calc(11.5px*var(--co));color:var(--chu-phu)} .gl-noicap{font-style:normal;font-size:calc(11px*var(--co));color:var(--chu-phu);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0}.gl-noicap:hover{opacity:1;text-decoration:underline} .gdx-seg{display:inline-flex;gap:3px;flex:none} /* 3.206: Hồ sơ Tổ / Hồ sơ vay — thanh tab mẫu như Giao dịch xã */ .hso-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 6px}.hso-dau .gdx2-mau{flex:1 1 auto;min-width:0}.hso-ky{font-size:calc(12.5px*var(--co));color:var(--chu-phu);white-space:nowrap} .hso-dau .gdx-c{font-size:calc(13px*var(--co));padding:3px 12px} .hso-cham{border:1px solid var(--vien);border-radius:8px;padding:6px 8px;margin:8px 0;background:var(--the)}.hso-cham-dau{font-size:calc(12.5px*var(--co));color:var(--chu-phu);margin-bottom:4px} .hso-cham-o{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 6px;align-items:center;padding:4px 0;border-top:1px dashed var(--vien)}.hso-cham-o:first-of-type{border-top:none} .hso-cham-nhan{font-size:calc(13px*var(--co));font-weight:600}.hso-cham-gt{grid-column:1 / -1;display:flex;flex-direction:column;gap:4px}.hso-cham-gt input,.hso-cham-gt select{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu);width:100%;box-sizing:border-box} .hso-cham-ly{display:flex;gap:4px}.hso-cham-tay{color:var(--chu-phu);font-size:calc(12px*var(--co))} .hso-sw{display:inline-flex;border:1px solid var(--vien);border-radius:14px;overflow:hidden}.hso-sw button{border:none;background:none;padding:2px 9px;min-height:0;cursor:pointer;font:inherit}.hso-sw button.bat{background:var(--xanh);color:#fff} /* 3.207: 🏠 Hộ vay mới */ .hm-tim{flex:1;min-width:120px;font:inherit;padding:3px 8px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu)} .hm-nut{display:flex;gap:3px;flex:none}.hm-m31{color:var(--xanh);font-size:calc(11.5px*var(--co));font-weight:600} .hm-dc{display:flex;flex-wrap:wrap;gap:6px}.hm-dc select,.hm-dc input{font:inherit;padding:4px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu);flex:1 1 180px;min-width:0} .hm-nguoi{border:1px solid var(--vien);border-radius:8px;padding:6px 8px;margin:6px 0}.hm-nguoi.dung{border-color:var(--xanh);box-shadow:0 0 0 1px var(--xanh) inset} .hm-hang{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0}.hm-hang input{font:inherit;padding:4px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu);min-width:0;box-sizing:border-box} .hm-hang label{font-size:calc(13px*var(--co));white-space:nowrap}.hm-qh{font-size:calc(12.5px*var(--co));color:var(--chu-phu)} /* 3.208 — ⚙ Khai báo chung (tab con) · thẻ chương trình vay · khai báo riêng mẫu */ .hso-kb-tab{position:sticky;top:0;z-index:2;background:var(--nen,var(--the));padding:4px 0;border-bottom:1px solid var(--vien);margin-bottom:6px} .hso-kb-tab .hso-kbt.bat{background:var(--xanh);color:#fff;border-color:transparent} .hso-kb-loc{margin:4px 0}.hso-kb-loc select{max-width:100%} .hso-ctv .kt-kb textarea{font:inherit;padding:4px 8px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);width:100%;box-sizing:border-box;resize:vertical} .hso-ctv .kt-kb select{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);width:100%;min-width:0} .hso-so{width:70px;font:inherit;padding:2px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu)} .hso-nho{font-weight:400;font-size:calc(12px*var(--co));margin-left:6px} .hso-kbr{color:var(--xanh-dam)} @media(min-width:1100px){ .hso-tuy .kt-kb{grid-template-columns:170px minmax(0,1fr)} } .hm-moi{color:var(--vang);font-size:calc(11.5px*var(--co));font-weight:600} /* 3.209 sổ hộ vay: hộ mới chưa mã KH */ .hso-d03-dong{border:1px solid var(--vien);border-radius:8px;padding:4px 8px;margin:4px 0;background:var(--the)}.hso-d03-dong input,.hso-d03-dong select{font:inherit;padding:2px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--the);color:var(--chu);margin:2px 1%} /* 3.209 03/TD nhiều hộ */ .hso-ld{display:inline-flex;align-items:center;gap:3px;margin:2px 6px 2px 0;font-size:calc(12px*var(--co))}.hso-chon{margin:2px 0} /* 3.211 GQVL */ /* 3.214 (anh 15/10): form hộ vay dạng lưới có tiêu đề cột · tab 📒 Sổ hộ vay (bảng sửa thẳng, lọc, sắp xếp) */ .hm-luoi{display:grid;grid-template-columns:22px minmax(140px,2.2fr) minmax(88px,1fr) minmax(112px,1.25fr) minmax(88px,1fr) minmax(96px,1fr) minmax(70px,.85fr) 54px 44px 30px;gap:5px;align-items:center} .hm-luoi>input{font:inherit;min-width:0;width:100%;padding:4px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu)} .hm-luoi>input:focus{border-color:var(--xanh);outline:none;box-shadow:0 0 0 1px var(--xanh) inset} .hm-luoi-dau{padding:0 9px;margin-top:4px;font-size:calc(12px*var(--co));font-weight:600;color:var(--chu-phu)}.hm-luoi-dau span:nth-child(8),.hm-luoi-dau span:nth-child(9){text-align:center} .hm-o-c{display:flex;justify-content:center}.hm-suy{margin-top:3px}.hm-suy:empty{display:none}.hm-phim{margin:4px 0 2px} @media(max-width:899px){ .hm-luoi{grid-template-columns:22px 1fr 1fr} .hm-luoi-dau{display:none} } .hso-bo.hso-rong{grid-template-columns:minmax(0,1fr) !important}.hso-bo.hso-rong>.th-xem{order:-1}.hso-bo.hso-rong #hso-xem-khung{display:none} .hm-so-loc select{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu)} .hm-so-khung{overflow:auto;max-height:calc(100vh - 330px);margin-top:6px;border:1px solid var(--vien);border-radius:8px} table.hm-so{border-collapse:collapse;table-layout:fixed;width:100%;font-size:calc(13px*var(--co))} .hm-so th{position:sticky;top:0;z-index:1;background:var(--nen);color:var(--chu-phu);text-align:left;padding:5px 6px;white-space:nowrap;font-weight:600;border-bottom:1px solid var(--vien)} .hm-so th.hm-so-sx{cursor:pointer}.hm-so th.hm-so-sx:hover,.hm-so th.on{color:var(--xanh)} .hm-so td{padding:2px 6px;border-bottom:1px solid var(--vien);vertical-align:middle;overflow:hidden;text-overflow:ellipsis} .hm-so td input{font:inherit;width:100%;min-width:0;padding:3px 5px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--chu)} .hm-so td input:hover{border-color:var(--vien)}.hm-so td input:focus{border-color:var(--xanh);background:var(--nen,#fff);outline:none} .hm-so-m31{color:var(--chu-phu);white-space:nowrap}.hm-so-han{white-space:nowrap}.hm-so-lt{font-size:calc(12px*var(--co))} .hm-so tr.hm-so-thieu .hm-so-lt{color:var(--do);font-weight:600}.hm-so td.hm-nut{display:table-cell;white-space:nowrap}.hm-so td.hm-nut .nho{margin-right:3px}.hm-so td input[type=checkbox]{width:auto} .hm-luoi-dau{text-align:left;white-space:nowrap}.hm-so td,.hm-so th{text-align:left}.hm-so td.c{text-align:center} .hm-luoi{grid-template-columns:22px minmax(140px,2.2fr) minmax(88px,1fr) minmax(112px,1.25fr) minmax(88px,1fr) minmax(96px,1fr) minmax(70px,.85fr) 62px 44px 30px} table.hm-so{min-width:1476px} /* 3.227: sổ hộ vay — dòng tháng (gập / mở), ô ngày nhập từ / đến, nút lập 03/TD */ .hm-so tr.hm-so-thang td{background:var(--xanh-nhat);color:var(--xanh-dam);cursor:pointer;font-size:calc(12.5px*var(--co));padding:4px 6px} .hm-so-ngay{font:inherit;width:96px;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu)}.hm-so-chon{display:inline-flex;gap:4px;align-items:center} /* 3.215 (anh 15/10): ⚙ Khai báo riêng từng mẫu Hồ sơ vay — nhóm ô theo vị trí trên mẫu, ô tự lấy */ .hso-cham-nhom{margin:7px 0 2px;font-weight:600;font-size:calc(12px*var(--co));color:var(--chu-phu);border-bottom:1px dashed var(--vien)}.hso-cham-tu{color:var(--chu-phu)} /* 3.221: 📝 bản ghi mẫu */ .hso-cham-che{display:flex;gap:6px;margin-bottom:4px}.hso-cham.hso-gm{border-color:var(--vang);box-shadow:0 0 0 1px var(--vang) inset} /* 3.222: ⚙ Khai báo riêng thu gọn được · 📎 nguồn ô 🖨 · ⚠ nhắc thiếu trước khi in · tên đơn vị từng mẫu Giao dịch xã */ .hso-kbr-d{margin-top:8px;border-top:1px solid var(--vien)}.hso-kbr-d>summary{cursor:pointer;list-style:none}.hso-kbr-d>summary::-webkit-details-marker{display:none} .hso-kbr-d>summary::after{content:'▸ Mở';margin-left:8px;padding:1px 10px;border:1px solid var(--vien);border-radius:6px;font-size:12px;font-weight:600;color:var(--xanh);background:var(--the);white-space:nowrap}.hso-kbr-d[open]>summary::after{content:'▾ Tắt'} /* 3.240: nút mở / tắt rõ ràng */.hso-cham-ng{display:block;color:var(--chu-phu);font-weight:400} .hso-thieu ul{margin:3px 0 0;padding-left:18px}.kb-tenm{margin:4px 0}.kb-tenm>i{display:block;color:var(--chu-phu);margin-bottom:2px} /* 3.223 M2: ➕ thông tin thêm người trong hộ · thiếu theo mẫu */ .hm-them{margin-top:4px}.hm-them>summary{cursor:pointer;color:var(--xanh-dam);font-size:calc(12.5px*var(--co))}.hm-them-nhom{margin:6px 0 2px}.hm-them-nhom>i{display:block;color:var(--chu-phu);margin-bottom:3px} .hm-them-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:5px 10px}.hm-them-o{display:flex;flex-direction:column;gap:2px;font-size:calc(12px*var(--co))}.hm-them-o.rong{grid-column:1/-1} .hm-them-o>input,.hm-them-o>select{font:inherit;padding:3px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu)}.hm-them-nhieu{display:flex;flex-wrap:wrap;gap:4px 12px} .hm-so-mau{color:var(--chu-phu);font-size:calc(11.5px*var(--co));margin-top:2px} /* 3.223 M3: nền ô — kiểu in, mức điền, khai báo trực quan */ .om-kieu{margin:4px 0 6px;padding:5px 7px;border:1px solid var(--vien);border-radius:8px}.om-kieu-trang{border-color:#8a96a3;background:rgba(138,150,163,.08)}.om-kieu-mau{border-color:#9b59b6;background:rgba(155,89,182,.07)} .om-muc{margin-top:4px}.om-muc-ph{display:flex;flex-wrap:wrap;gap:2px 12px;margin:3px 0} .om-kbt{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);gap:12px;text-align:left}.om-kbt-trai iframe{width:100%;height:72vh;border:1px solid var(--vien);border-radius:6px;background:#e9edf2} .om-kbt-phai{max-height:76vh;overflow:auto;padding-right:4px}.om-kbt-thanh{flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:6px}.om-kbt-thanh select{max-width:260px} .om-o-ten{padding:6px 8px;border-left:3px solid var(--xanh);background:rgba(26,95,180,.06);margin-bottom:6px}.om-phan{display:flex;align-items:center;gap:6px;margin:3px 0}.om-phan span{flex:1} .om-chu{padding:0 4px;border-radius:3px}.om-chu.om-tu{background:#d9f0d3}.om-chu.om-kb{background:#fff0b3}.om-chu.om-go{background:#dbeafe}.om-chu.om-cham{background:#eef0f3} @media(max-width:899px){ .om-kbt{grid-template-columns:1fr} } /* 3.224 scan: ① chọn loại */ .sc-loai{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sc-loai button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--vien);border-radius:10px;background:var(--the);text-align:left;cursor:pointer}.sc-loai button b{font-size:calc(15px*var(--co))}.sc-loai button small{color:var(--chu-phu);font-size:calc(12px*var(--co))}.sc-loai button.bat{border-color:var(--xanh);box-shadow:0 0 0 2px var(--xanh) inset} /* 3.228: 🔎 Kiểm tra hộ vay — dòng cảnh báo theo mức (form nhập hộ), ô lưới sổ, Khai báo luật */ .hm-kiem{display:flex;flex-direction:column;gap:3px;margin:2px 0 6px} .kh-dong{font-size:calc(12.5px*var(--co));padding:3px 8px;border-radius:6px;border-left:3px solid var(--vien);background:var(--the)} .kh-dong.kh-chan,.kh-dong.kh-do{border-left-color:var(--do);background:rgba(220,38,38,.07)}.kh-dong.kh-cam{border-left-color:#ea580c;background:rgba(234,88,12,.07)} .kh-dong.kh-vang{border-left-color:var(--vang);background:rgba(234,179,8,.08)}.kh-dong.kh-ok{border-left-color:#16a34a}.kh-dong.da{opacity:.6}.kh-dong .nho{margin-left:6px;padding:0 6px;min-height:0} .kh-so{margin-top:2px;cursor:pointer;font-size:calc(12px*var(--co));white-space:nowrap} .kh-kb-dong{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:2px 0;border-bottom:1px dashed var(--vien)}.kh-kb-dong.tat{opacity:.55}.kh-kb-dong label{flex:1 1 320px} .kh-kb-dong select,.kh-ng{font:inherit;padding:2px 6px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu)}.kh-ng{width:52px;text-align:right} /* 3.230 (anh 17/10: tắt khung xem thì nút / hộp không bung): thanh lọc 📒 Sổ hộ vay — ô vừa nội dung, chữ cùng cỡ nút */ .hm-so-loc{align-items:center}.hm-so-loc .hm-tim{flex:0 1 280px;max-width:340px;font-size:calc(12.5px*var(--co))} .hm-so-loc select,.hm-so-loc .hm-so-ngay,.hm-so-loc .hso-o2{font-size:calc(12.5px*var(--co));max-width:240px;margin:0} .gdx-c.hm-so-chip{font-size:calc(12.5px*var(--co));padding:2px 9px} /* 3.234 (R2): mảnh giao diện chung — nút vừa chữ, ô rộng theo loại, hàng nút không giãn; nút lùi / tiến đầu trang */ :root{--o-ngay:112px;--o-so:140px;--o-ten:260px;--o-tim:300px;--o-chu:480px;--form-rong:960px} .gd-nut,.xuat-hang .nho,.hso-kb-tab .hso-kbt,.hop-in .hang-nut .gd-nut,.hop-in .xuat-hang .nho,.hop-in .hso-kb-tab .hso-kbt{flex:0 0 auto;width:auto} /* thắng luật "dàn đều" của hộp trên điện thoại */ .gd-hang{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.gd-hang.gd-phai{justify-content:flex-end} .gd-o{font:inherit;font-size:calc(12.5px*var(--co));padding:4px 8px;border:1px solid var(--vien);border-radius:6px;background:var(--nen,#fff);color:var(--chu);box-sizing:border-box;max-width:100%} .gd-o-ngay{width:var(--o-ngay)}.gd-o-so{width:var(--o-so)}.gd-o-ten{width:var(--o-ten)}.gd-o-tim{width:var(--o-tim)}.gd-o-chu{width:100%;max-width:var(--o-chu)} .gd-kv{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:4px 10px;align-items:center;max-width:var(--form-rong)} .xuat-hang .nho[disabled]{opacity:.38;cursor:default} .hm-so-trong{padding:14px 8px!important}.hm-so-trong .nho{margin-left:8px} .dh-nut{display:inline-flex;gap:2px;flex:none}.dh-nut .nho{padding:2px 7px;min-height:0;background:transparent;border-color:transparent;color:inherit;font-size:15px}.dh-nut .nho:hover{background:rgba(255,255,255,.15)} .hso-kb-tab{flex-wrap:wrap} /* 3.242: form lập 01/TD theo thứ tự tờ giấy */ .l01-thanh{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--vien);margin-bottom:6px;position:sticky;top:0;z-index:2;background:var(--nen)} .l01-ban{font-size:13px}.l01-phan{margin:2px 0 6px}.l01 .l01-o{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:center;margin:3px 0} .l01 .l01-o>span:first-child{color:var(--chu-phu);font-size:13px}.l01 .l01-o input,.l01 .l01-o select{max-width:420px}.l01-tu{color:var(--chu)} .l01-tinh{margin:4px 0}.l01-ds{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto} .l01-dong{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:3px 6px;border-radius:6px}.l01-dong.bat{background:var(--xanh-nhat)}.l01-dong small{color:var(--chu-phu)} @media (max-width:699px){.l01 .l01-o{grid-template-columns:1fr}} .l01 .hso-o{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:center;margin:3px 0}.l01 .hso-o>span{color:var(--chu-phu);font-size:13px}.l01 .hso-o input,.l01 .hso-o select{max-width:420px} .l01 .hso-ho label{font-size:13px}.l01 .hang-nut .hso-o2{display:inline-block;margin:4px 12px 4px 0} @media (max-width:699px){.l01 .hso-o{grid-template-columns:1fr}}