/* ═══════════════════════════════════════════════════════════════════════════ v3.61 · BIẾN MÀU NGỮ NGHĨA Mọi màu nền/viền/chữ phổ biến trong CSS và trong các màn hình đã được thay bằng các biến dưới đây. Giá trị hiện tại = đúng màu cũ, giao diện sáng không đổi. Chế độ tối sau này chỉ cần khai lại bộ giá trị này dưới [data-theme="dark"], không phải sửa từng màn hình. ═══════════════════════════════════════════════════════════════════════════ */ :root { --surface: #ffffff; /* nền thẻ, ô nhập, menu nổi */ --surface-2: #f6f8f7; /* nền phụ: hàng tiêu đề bảng, dải nhóm */ --surface-3: #fafbfa; /* nền rất nhạt: hàng chẵn, vùng trống */ --on-accent: #ffffff; /* chữ trên nền màu nhấn */ --ok-bg: #eef7f0; --ok-bg-strong: #dcf3e4; --warn-bg: #fff9f0; --warn-bg-strong: #fef3c7; --danger-bg: #fff7f7; --danger-bg-strong: #fee2e2; --info-bg: #e9eef7; --info-bg-soft: #eff6ff; --danger-ink: #a8341c; --ink-soft: #5d6b62; --ink-green: #14532d; /* chữ xanh đậm nhấn mạnh */ --warn-ink: #b45309; --glass-rgb: 255 255 255; /* lõi màu của các lớp kính mờ */ } :root{ --g900:#0B4A25; --g800:#12652F; --g700:#15803D; --g600:#1CA14C; --g500:#22C55E; --g100:#DCFCE7; --g50:#F0FDF4; --navy:#1E3A6E; --navy-d:#132747; --navy-l:#2E5296; --orange:#E08A2B; --orange-l:#FDF0DC; --red:#DC2626; --red-l:#FEE2E2; --bg:#F5F7F6; --card:#FFFFFF; --line:#E3E8E5; --ink:#111827; --ink2:#4B5563; --muted:#6B7280; --r:12px; --sh:0 1px 2px rgba(16,24,40,.05),0 4px 12px rgba(16,24,40,.05); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit;font-size:inherit} /* ---------- Prototype chrome ---------- */ /* ---------- Logo ---------- */ .logo{display:flex;align-items:center;gap:9px} .logo svg{display:block} .logo-txt{line-height:1.05} .logo-txt .l1{font-weight:800;font-size:15px;letter-spacing:.4px} .logo-txt .l2{font-size:9.5px;letter-spacing:2.6px;color:var(--orange);font-weight:600} /* ---------- Layout ---------- */ .app{display:flex;min-height:calc(100vh - 42px)} .side{width:238px;flex:0 0 238px;background:var(--navy-d);color:#C7D2E4;padding:16px 12px;display:flex;flex-direction:column;gap:2px} .side .brand{padding:6px 8px 18px;color:var(--on-accent)} .scrollnav{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px;display:flex;flex-direction:column;gap:2px} .scrollnav::-webkit-scrollbar{width:5px}.scrollnav::-webkit-scrollbar-thumb{background:rgb(var(--glass-rgb) / .18);border-radius:9px} .side .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:#7C8DAA;padding:16px 10px 6px} .side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:500;transition:.15s} .side a:hover{background:rgb(var(--glass-rgb) / .07);color:var(--on-accent)} .side a.on{background:var(--g700);color:var(--on-accent);font-weight:600} .side a .ic{width:17px;text-align:center;opacity:.9} .side .who{margin-top:auto;border-top:1px solid rgb(var(--glass-rgb) / .1);padding:12px 8px 2px;font-size:12px;color:#93A4BF} .side .who b{display:block;color:var(--on-accent);font-size:13px} .main{flex:1;min-width:0;display:flex;flex-direction:column} .top{background:var(--surface);border-bottom:1px solid var(--line);padding:14px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .top h1{font-size:19px;font-weight:700;letter-spacing:-.2px} .top .sub{color:var(--muted);font-size:12.5px} .top .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .content{padding:22px 24px 60px;max-width:1280px;width:100%} /* ---------- Atoms ---------- */ .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;border:1px solid transparent;background:var(--g700);color:var(--on-accent);font-weight:600;font-size:13px;cursor:pointer;transition:.15s} .btn:hover{background:var(--g800)} .btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line)} .btn.sec:hover{background:var(--surface-2)} /* v3.45 · Mục 4 — chip thẻ nhanh (Chất lượng sản phẩm) đang được chọn */ .btn.sec.tagchip.on{background:var(--g600,#16a34a);border-color:var(--g600,#16a34a);color:var(--on-accent)} /* v3.48 · Mục 5 — nút mở camera to, dễ nhận biết cho màn hình Chất lượng sản phẩm */ .qccambtn{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;width:100%;box-sizing:border-box;padding:36px 20px;border-radius:18px;cursor:pointer; background:linear-gradient(135deg,#1B8F4F 0%,#0F6B3A 100%);color:var(--on-accent);text-align:center; box-shadow:0 16px 34px -16px rgba(15,107,58,.55);transition:transform .15s} .qccambtn:active{transform:scale(.98)} .qccambtn input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .qccambtn .ico{font-size:44px;line-height:1} .qccambtn .tt{font-size:16px;font-weight:700} .qccambtn .ss{font-size:12px;opacity:.85;max-width:320px} /* v3.46 · Mục 6 — nâng cấp tự động cho bảng dài (>20 dòng), xem assets/js/tableenhance.js */ .tbltopbar{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0;margin-bottom:2px} .colf-row th{border-bottom:1px solid var(--line);text-align:left} .colf-inp::placeholder{color:var(--muted);opacity:.8} .btn.gho{background:transparent;color:var(--g700);border-color:var(--g600)} .btn.warn{background:var(--orange)} .btn.dan{background:var(--red)} .btn.sm{padding:5px 10px;font-size:12px;border-radius:7px} .btn.lg{padding:14px 22px;font-size:15.5px;border-radius:12px;font-weight:700} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)} .card .hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px} .card .hd h3{font-size:14.5px;font-weight:700} .card .hd .r{margin-left:auto;font-size:12.5px;color:var(--muted)} .card .bd{padding:16px} .grid{display:grid;gap:16px} .grid>*{min-width:0} .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap} .p-g{background:var(--g100);color:var(--g900)} .p-n{background:var(--info-bg);color:var(--navy)} .p-o{background:var(--orange-l);color:#8A5211} .p-r{background:var(--red-l);color:#991B1B} .p-s{background:#F1F3F2;color:var(--ink2)} .kpi{padding:16px} .kpi .lb{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.2px} .kpi .vl{font-size:29px;font-weight:800;letter-spacing:-1px;margin:6px 0 2px} .kpi .dt{font-size:12px;color:var(--muted)} .kpi .dt .up{color:var(--g700);font-weight:600} .kpi .dt .dn{color:var(--red);font-weight:600} table{width:100%;border-collapse:collapse;table-layout:auto} /* v3.41 · Bỏ "white-space:nowrap" khỏi tiêu đề cột — trên desktop đây là nguyên nhân chính khiến bảng nhiều cột buộc phải rộng hơn khung trang rồi hiện thanh trượt ngang dù còn thừa chỗ để NGẮT DÒNG (xem thêm .tblwrap > table ở khối responsive bên dưới, trước đây ép min-width:max-content cho MỌI kích thước màn hình, không chỉ điện thoại). */ th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-3)} td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;overflow-wrap:break-word} td.mono{white-space:nowrap} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--g50)} .num{font-variant-numeric:tabular-nums;text-align:right} label.f{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px} .inp{width:100%;padding:8px 11px;border:1px solid #D7DDD9;border-radius:9px;background:var(--surface);outline:none} .inp:focus{border-color:var(--g600);box-shadow:0 0 0 3px var(--g100)} .fr{margin-bottom:14px} .hint{font-size:12px;color:var(--muted);margin-top:5px} .note{padding:11px 13px;border-radius:10px;font-size:12.8px;display:flex;gap:9px;align-items:flex-start} .note.i{background:#EEF3FB;color:var(--navy)} .note.w{background:var(--orange-l);color:#7A4A0F} .note.d{background:var(--red-l);color:#8F1D1D} .note.s{background:var(--g100);color:var(--g900)} .sep{height:1px;background:var(--line);margin:16px 0} .chart-wrap{position:relative;height:250px} .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-top:10px} .legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px} /* ---------- Calendar ---------- */ .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px} .cal .dow{text-align:center;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;padding:4px 0} .day{background:var(--surface);border:1px solid var(--line);border-radius:10px;min-height:118px;padding:7px;display:flex;flex-direction:column;gap:4px;position:relative} .day.out{background:var(--surface-3);opacity:.5} .day.past{opacity:.55} .day.today{border-color:var(--g600);box-shadow:0 0 0 2px var(--g100)} .day.lock{background:#F7F8F8} .day .dn{font-size:12px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:4px} .day.today .dn{color:var(--g700)} .day .lk{margin-left:auto;font-size:10px;color:var(--muted)} .slot{font-size:10.5px;font-weight:600;padding:1px 5px;border-radius:5px;display:flex;justify-content:space-between;gap:4px} .s1{background:var(--g100);color:var(--g900)} .s2{background:var(--info-bg);color:var(--navy)} .soff{background:var(--orange-l);color:#8A5211} .slot.bad{background:var(--red-l);color:#991B1B} .day .mine{margin-top:auto;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-align:center;padding:3px;border-radius:6px} /* v3.53 · Mục "đăng ký ca" — ô ngày chỉ có số ngày + 1 select, không cần cao như lịch có tên nhân sự/nhiều ca; thu ngắn lại để trọn cả tháng vừa màn hình, đỡ phải kéo thanh trượt. */ .cal.compact .day{min-height:64px;padding:5px;gap:3px} .cal.compact .day .dn{font-size:11px} .cal.compact .day .regsel{margin-top:0} .m1{background:var(--g700);color:var(--on-accent)} .m2{background:var(--navy);color:var(--on-accent)} .mhc{background:#5FB98A;color:var(--on-accent)} .mg{background:var(--navy-l);color:var(--on-accent)} .shc{background:#E8F6EE;color:#0B4A25} .sg{background:var(--info-bg);color:var(--navy)} .moff{background:var(--orange);color:var(--on-accent)} /* v3.49 · Mục 1 — "Lịch chi tiết theo nhân sự": ô ma trận rất hẹp (31 cột ngày), mã ca ngắn (HC/OFF) vừa khít nhưng mã dài (REMOTE) từng bị NGẮT DÒNG vì .mini chưa có CSS riêng (chỉ ăn theo .m1/.m2/.moff ở trên, không có white-space/kích thước cố định). Cố định không ngắt dòng + tự thu cỡ chữ nhỏ hơn cho mã dài (lớp .long, gắn ở modules/schedule/ views/month.php theo độ dài mã) thay vì để tràn ra ngắt dòng xấu. */ /* v3.59 · Chỉ áp cho nhãn mã ca (span). Để trần ".mini" thì luật này ăn luôn vào khung .app.mini khi thu gọn menu trái: khung trang thành inline-block, nội dung rơi xuống dưới. */ span.mini{display:inline-block;white-space:nowrap;padding:2px 5px;border-radius:5px; font-size:10.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em} span.mini.long{font-size:8px;padding:2px 3px;letter-spacing:-.02em} .kc{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 10px;cursor:grab;transition:.15s;box-shadow:0 1px 2px rgba(16,24,40,.04)} .kc:hover{box-shadow:0 3px 10px rgba(16,24,40,.09);transform:translateY(-1px)} .kc .kt{font-size:12.5px;font-weight:600;line-height:1.35} .kc .km{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px} .kc .km .pill{font-size:9.5px;padding:2px 6px} .kc .kf{display:flex;gap:6px;align-items:center;margin-top:7px;font-size:11px;color:var(--muted)} .gantt-hd{display:grid;grid-template-columns:200px repeat(7,1fr);font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);padding-bottom:6px} .gantt-hd div{text-align:center}.gantt-hd div:first-child{text-align:left} .grow{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:8px} .gtrack{position:relative;height:26px;background:var(--surface-2);border-radius:6px} .gbar{position:absolute;height:100%;border-radius:6px;display:flex;align-items:center;padding:0 8px;color:var(--on-accent);font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden} .gms{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:11px;height:11px;background:var(--navy);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--navy)} .gpsmini{position:relative;height:150px;background:linear-gradient(180deg,#EDF3EF 0%,#E3EDE7 100%);border-radius:12px;overflow:hidden;border:1px solid var(--line)} .gpsmini:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:26px 26px} .gpsring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:104px;height:104px;border-radius:50%;background:rgba(28,161,76,.16);border:2px solid var(--g600)} .gpsdot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px #fff} .gpspin{position:absolute;left:57%;top:44%;transform:translate(-50%,-100%);font-size:26px;color:var(--g700);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))} .mapbox{position:relative;height:430px;background:linear-gradient(180deg,#EEF3F0 0%,#E4EDE8 100%);border-radius:12px;overflow:hidden;border:1px solid var(--line)} .mapbox:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);background-size:38px 38px} .mroad{position:absolute;background:var(--surface);opacity:.85} .mzone{position:absolute;border-radius:50%;background:rgba(28,161,76,.18);border:2px solid var(--g600);transform:translate(-50%,-50%)} .mcenter{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--navy);transform:translate(-50%,-50%);box-shadow:0 0 0 3px #fff} .mlabel{position:absolute;transform:translate(-50%,0);font-size:11px;font-weight:700;color:var(--navy);background:rgb(var(--glass-rgb) / .9);padding:2px 7px;border-radius:6px;white-space:nowrap} .mpt{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff;cursor:pointer} /* ---------- Login ---------- */ .login{min-height:calc(100vh - 42px);display:grid;place-items:center;background:linear-gradient(150deg,#0B4A25 0%,#132747 100%);padding:24px} .login .box{width:100%;max-width:390px;background:var(--surface);border-radius:16px;padding:30px 28px;box-shadow:0 20px 50px rgba(0,0,0,.25)} .login .box h2{font-size:19px;font-weight:700;margin:16px 0 3px;text-align:center} .login .box p.s{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:22px} .login .lg{display:flex;justify-content:center} .login .btn{width:100%;justify-content:center;padding:11px} .login .ft{text-align:center;font-size:11.5px;color:var(--muted);margin-top:16px} /* ---------- Tabs / misc ---------- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto} .tabs a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap} .tabs a.on{color:var(--g700);border-bottom-color:var(--g700)} .av{width:30px;height:30px;border-radius:50%;background:var(--g100);color:var(--g900);display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:0 0 auto} .av.n{background:var(--info-bg);color:var(--navy)} .stack{display:flex;align-items:center;gap:9px} .tl{position:relative;padding-left:22px;border-left:2px solid var(--line);margin-left:6px} .tl .it{position:relative;padding-bottom:16px} .tl .it:before{content:'';position:absolute;left:-27px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--g600);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--g100)} .tl .it .t{font-size:11.5px;color:var(--muted)} .tl .it .b{font-size:13px;margin-top:2px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px} .bar{height:7px;border-radius:99px;background:#EDF0EE;overflow:hidden} .bar i{display:block;height:100%;border-radius:99px;background:var(--g600)} @media(max-width:900px){ .side{position:fixed;left:0;top:42px;bottom:0;transform:translateX(-100%);transition:.2s;z-index:60} .side.open{transform:none} .content{padding:16px 14px 60px} .top{padding:12px 14px} .burger{display:inline-flex!important} .cal{gap:4px} .day{min-height:74px;padding:5px} .day .slot{font-size:9.5px;padding:1px 4px} } .burger{display:none;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 10px;cursor:pointer} .tblwrap{overflow-x:auto} /* ===== Bổ sung cho bản chạy thật ===== */ .app{min-height:100vh} .side .brand a.logo{display:flex;align-items:center;gap:9px;color:var(--on-accent)} .side .brand img{height:34px;width:auto;display:block} .side a .lb{flex:1} .side a .bdg{margin-left:auto;font-size:10px} .side .who .lo{color:#93A4BF;font-size:11.5px;text-decoration:underline} .sideveil{display:none;position:fixed;inset:0;background:rgba(19,39,71,.45);z-index:55} @media(max-width:900px){ .side.open ~ .sideveil{display:block} } .top .ttl h1{font-size:19px;font-weight:700;letter-spacing:-.2px} .loginpage{background:linear-gradient(150deg,#0B4A25 0%,#132747 100%);min-height:100vh} .loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px} .loginbox{width:100%;max-width:390px;background:var(--surface);border-radius:16px;padding:30px 28px;box-shadow:0 20px 50px rgba(0,0,0,.25)} .loginbox h2{font-size:19px;font-weight:700;margin:14px 0 3px;text-align:center} .loginbox p.s{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:22px} .loginbox .lg{display:flex;justify-content:center} .loginbox .lg img{height:46px} .loginbox .btn{width:100%;justify-content:center;padding:11px} .loginbox .ft{text-align:center;font-size:11.5px;color:var(--muted);margin-top:16px} .pager{display:flex;gap:6px;align-items:center} .empty{padding:44px 20px;text-align:center;color:var(--muted)} .empty .ico{font-size:34px;opacity:.4;margin-bottom:8px} a.rowlink{color:inherit;text-decoration:none;display:block} .tbl-actions{display:flex;gap:6px;white-space:nowrap} .req:after{content:' *';color:var(--red)} /* v3.123 · nhãn trường bắt buộc: cả chữ đỏ đậm (không chỉ dấu *) — nhân viên nhận ra ngay ô phải điền */ .f.req,label.req{color:#B91C1C;font-weight:700} .f.req:after,label.req:after{color:inherit} html[data-theme="dark"] .f.req,html[data-theme="dark"] label.req{color:#F87171} @media (prefers-color-scheme: dark){html[data-theme="auto"] .f.req,html[data-theme="auto"] label.req{color:#F87171}} .inp[readonly]{background:var(--surface-2);color:var(--ink2)} .chk{display:flex;gap:7px;align-items:center;font-size:13px;cursor:pointer} .filterbar{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px;align-items:flex-end} .filterbar .grow{margin-left:auto;display:flex;gap:8px} @media print{.side,.top,.burger,.btn{display:none!important}.content{padding:0}} /* ===== Responsive: gộp mọi lưới nhiều cột về 1 cột trên màn hình nhỏ ===== */ @media (max-width: 1100px) { .content .grid[style*="380px"], .content .grid[style*="360px"], .content .grid[style*="340px"], .content .grid[style*="330px"], .content .grid[style*="320px"], .content .grid[style*="420px"] { grid-template-columns: 1fr !important; } } @media (max-width: 900px) { .content .grid { grid-template-columns: 1fr !important; } .content .grid[style*="minmax"] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; } /* v3.117 · bố cục nội dung + cột phụ (minmax(0,1fr) minmax(280px,360px)…) về 1 cột — trước bị quy tắc lưới thẻ ở trên (và ≤620px) chia thành 2 cột ~167px */ .content .grid.grid[style*="minmax(0,1fr) minmax("] { grid-template-columns: minmax(0, 1fr) !important; } /* v3.121 · các bố cục 2 cột khác còn bị chia đôi trên điện thoại (Loại quan hệ KH, Trường tuỳ biến, Sảnh-phòng-bàn…) */ .content .grid.grid[style*="minmax(0,1.3fr) minmax("], .content .grid.grid[style*="minmax(0,1.4fr) minmax("], .content .grid.grid[style*="minmax(0,1.6fr) minmax("], .content .grid.grid[style*="minmax(0,2fr) minmax(0,1fr);"], .content .grid.grid[style*="minmax(0,1fr) 3"], /* v3.124 · cột phụ cố định 1xx / 2xx / 4xx px (Lên lịch họp…) */ .content .grid.grid[style*="minmax(0,1fr) 1"], .content .grid.grid[style*="minmax(0,1fr) 2"], .content .grid.grid[style*="minmax(0,1fr) 4"], /* v3.122 · dạng chung: cột tỉ lệ bất kỳ (1.1fr…) hoặc cột cố định px đứng trước minmax(…), và lưới chủ ý 1 cột (Trung tâm Kiểm soát, Họp đầu ca, Quan sát an toàn) — trước bị quy tắc lưới thẻ ở trên chia thành 2 cột ~169 px */ .content .grid.grid[style*="fr) minmax("], .content .grid.grid[style*="px) minmax("], .content .grid.grid[style*="columns:minmax(0,1fr);"] { grid-template-columns: minmax(0, 1fr) !important; } .card .hd { flex-wrap: wrap; } .filterbar > * { flex: 1 1 auto; min-width: 130px; } .filterbar .grow { margin-left: 0; width: 100%; } .tblwrap { -webkit-overflow-scrolling: touch; } .content { padding: 14px 12px 60px; } .top { padding: 12px 14px; } .kpi .vl { font-size: 25px; } } @media (max-width: 620px) { .content .grid[style*="minmax"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; } .tabs { gap: 2px; } .tabs a { padding: 8px 10px; font-size: 12.5px; } .btn { padding: 8px 12px; } .cal { gap: 3px; } .day { min-height: 68px; padding: 4px; } .day .slot { font-size: 9px; padding: 1px 3px; } .day .mine { font-size: 9.5px; } } html, body { max-width: 100%; overflow-x: hidden; } .content > * { max-width: 100%; } /* ===== Chặn tràn ngang trên điện thoại ===== Bảng rộng phải cuộn NGANG BÊN TRONG thẻ, không đẩy cả trang. */ .app, .content, .card, .grid > *, form.card { min-width: 0; } .tblwrap { max-width: 100%; overflow-x: auto; } /* v3.41 · SỬA LỖI: "min-width:max-content" trước đây áp dụng cho MỌI kích thước màn hình — trên máy tính, quy tắc này ép bảng luôn rộng bằng đúng nội dung dài nhất (coi như không dòng nào được ngắt), nên bảng nhiều cột luôn tràn ra ngoài khung dù màn hình còn thừa chỗ để ngắt dòng, kết quả là hiện thanh trượt ngang + cắt mất một phần bảng trên toàn trang. Trên điện thoại thì NGƯỢC LẠI cần giữ nguyên hành vi này (ép không co bảng lại, cuộn ngang bên trong thẻ) vì màn hình quá hẹp để ngắt dòng mà vẫn đọc được — nên chỉ còn áp dụng trong khối @media di động bên dưới. */ @media (max-width: 900px) { .tblwrap > table { min-width: max-content; } .content .grid[style] > * { min-width: 0; } textarea.inp, input.inp, select.inp { max-width: 100%; } } /* ===== Menu thu gọn ===== Bấm nút ở thanh trên hoặc phím [ . Trạng thái được nhớ trên từng máy. */ .minitog{display:inline-flex;align-items:center;justify-content:center; background:var(--surface);border:1px solid var(--line);border-radius:9px; padding:7px 11px;cursor:pointer;font-size:15px;color:var(--ink2);line-height:1;transition:.15s} .minitog:hover{border-color:var(--g600);color:var(--g700)} .app.mini .side{width:64px;flex:0 0 64px;padding:16px 8px} .app.mini .side .lb, .app.mini .side .logo-txt, .app.mini .side .who b, .app.mini .side .who span, .app.mini .side .brand > div:last-child{display:none} /* Nhóm chức năng vẫn phân tách được bằng một gạch mờ */ .app.mini .side .grp{height:1px;background:rgb(var(--glass-rgb) / .14);margin:10px 8px 8px; padding:0;text-indent:-9999px;overflow:hidden;white-space:nowrap} .app.mini .side .brand{padding:6px 0 14px;text-align:center} .app.mini .side .brand img{height:28px;margin:0 auto} .app.mini .side a{justify-content:center;padding:11px 0;position:relative} .app.mini .side a .ic{width:auto;font-size:16px} .app.mini .side a .bdg{position:absolute;top:3px;right:6px;margin:0;padding:1px 4px;font-size:9px} .app.mini .side .who{text-align:center;padding:12px 0 2px} .app.mini .side .who .lo{font-size:10.5px} /* Tên chức năng hiện ra khi rê chuột lúc menu đang thu gọn */ .app.mini .side a[data-tip]:hover::after{ content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%); background:var(--navy-d);color:var(--on-accent);font-size:12.5px;font-weight:500;white-space:nowrap; padding:6px 11px;border-radius:8px;box-shadow:0 6px 18px rgba(19,39,71,.28);z-index:80} @media (max-width: 900px){ .minitog{display:none} /* điện thoại đã có nút ba gạch riêng */ .app.mini .side{width:238px;flex:0 0 238px;padding:16px 12px} .app.mini .side .lb,.app.mini .side .grp,.app.mini .side .logo-txt{display:''} } /* ===== Nhóm menu thu gọn được ===== */ .side .grp{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;transition:.15s} .side .grp:hover{color:#B6C6DE} .side .grp .gtxt{flex:1} .side .grp .gcar{font-size:9px;opacity:.65;transition:transform .18s} .side .grp.closed .gcar{transform:rotate(-90deg)} .side .grp.active .gtxt{color:#A9BDDA} .side .gitems{display:flex;flex-direction:column;gap:2px;overflow:hidden; max-height:1200px;opacity:1;transition:max-height .22s ease, opacity .15s} .side .gitems.closed{max-height:0;opacity:0;pointer-events:none} .grpall{background:none;border:0;color:#6F82A0;font-size:10.5px;letter-spacing:.4px; cursor:pointer;padding:6px 10px 2px;text-align:left;font-family:inherit} .grpall:hover{color:#B6C6DE;text-decoration:underline} /* Khi menu đang thu gọn hẹp thì bỏ hết phần nhóm, chỉ còn icon */ .app.mini .side .grp{pointer-events:none} .app.mini .side .grp .gcar, .app.mini .side .grpall{display:none} .app.mini .side .gitems.closed{max-height:1200px;opacity:1;pointer-events:auto} /* Có logo thì ẩn chữ GIANGDANG RESTAURANT */ .side .brand a.logo.has-logo .logo-txt{display:none} .side .brand a.logo.has-logo img{height:40px;max-width:190px;object-fit:contain} .app.mini .side .brand a.logo.has-logo img{height:26px;max-width:46px} /* ===== Khối đính kèm link dùng chung ===== */ .linkbox .linkrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .linkbox .linkrow:last-of-type{border-bottom:0} .lchip{display:inline-block;color:var(--on-accent);font-size:10.5px;font-weight:700;letter-spacing:.3px; padding:3px 8px;border-radius:6px;white-space:nowrap} .linkbox .ltitle{flex:1;min-width:160px;font-size:13.5px;font-weight:600;word-break:break-word} .linkbox .ltitle:hover{text-decoration:underline} .linkbox .lmeta{font-size:11.5px;color:var(--muted);white-space:nowrap} .linkbox .lnote{font-size:12px;color:var(--ink2);padding:0 0 8px 78px} @media (max-width:620px){ .linkbox .lnote{padding-left:0} } /* ===== Chuông thông báo ===== */ .bell{position:relative;display:inline-flex;align-items:center;justify-content:center; width:36px;height:34px;border:1px solid var(--line);border-radius:9px;font-size:15px; background:var(--surface);text-decoration:none;transition:.15s} .bell:hover{border-color:var(--g600)} .bell.has{border-color:var(--orange)} .bell i{position:absolute;top:-6px;right:-6px;background:var(--red);color:var(--on-accent); font-style:normal;font-size:10px;font-weight:700;line-height:1; padding:3px 5px;border-radius:9px;border:2px solid var(--surface)} /* v3.45 · Mục 6 — pill chi nhánh gần nhất theo GPS, cạnh chuông thông báo — thu nhỏ lại theo yêu cầu Enzo: dạng icon nhỏ + chấm trạng thái xanh/vàng + nhãn gọn (tên · khoảng cách), không chiếm nhiều chỗ trên đầu trang như bản đầu. */ .branchpill{position:relative;display:inline-flex;align-items:center;gap:4px;height:30px; padding:0 8px 0 6px;border:1px solid var(--hair,var(--line));border-radius:8px; background:var(--surface);color:var(--ink2);font-size:11px;font-weight:600;white-space:nowrap; max-width:150px;overflow:hidden} .branchpill svg.i.sm{width:14px;height:14px;flex:0 0 auto} .branchpill::before{content:'';width:7px;height:7px;border-radius:50%;flex:0 0 auto; background:var(--g600,#16a34a);box-shadow:0 0 0 2px rgba(22,163,74,.18)} .branchpill.off::before{background:var(--orange,#f97316);box-shadow:0 0 0 2px rgba(249,115,22,.18)} .branchpill span{overflow:hidden;text-overflow:ellipsis} @media (max-width:760px){ .branchpill{max-width:90px} } /* ═══════════════════════════════════════════════════════════════════════ GIANGDANG v2.4 — SOFT GLASS (bản r2, Enzo duyệt 04/09/2026) Chồng lên phần trên, không xoá gì — mọi class cũ ở 55 màn hình vẫn chạy. Tông: cam đỏ hành động · xanh lá trạng thái tốt · kính mỏng, bóng mềm. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ---- Cam đỏ: hành động chính ---- */ --br-50:#FFF6F2; --br-100:#FFE9E0; --br-200:#FFD3C2; --br-400:#FF8A5B; --br-500:#F96E3A; --br-600:#EA5A2B; --br-700:#C9451C; --br-900:#7E2810; /* ---- Xanh lá: trạng thái tốt ---- */ --lf-50:#F1FBF5; --lf-100:#DBF6E5; --lf-200:#BCEBCE; --lf-400:#4CC97F; --lf-500:#2DB765; --lf-600:#1FA055; --lf-700:#158043; --lf-900:#0C4A28; /* ---- Giữ tên biến cũ để không phải sửa 55 màn hình ---- */ --g900:var(--lf-900); --g800:var(--lf-700); --g700:var(--lf-700); --g600:var(--lf-600); --g500:var(--lf-500); --g100:var(--lf-100); --g50:var(--lf-50); --orange:var(--br-600); --orange-l:var(--br-100); --red:#D6452A; --red-l:#FEE7E2; --navy:#31507F; --navy-d:#233A5E; --navy-l:#4A6CA3; --ink:#241C18; --ink2:#6B5D55; --muted:#9C8C82; --bg:#FDFAF7; --line:rgba(140,108,88,.11); --hair:rgba(255,255,255,.9); --glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.86); --glass-side:rgba(255,255,255,.5); --blur:saturate(165%) blur(22px); --card:var(--glass); --sh-xs:0 1px 2px rgba(120,80,60,.045); --sh:0 1px 2px rgba(120,80,60,.04), 0 10px 28px -14px rgba(120,80,60,.22); --sh-lift:0 1px 2px rgba(120,80,60,.05), 0 18px 40px -16px rgba(120,80,60,.3); --r-xs:10px; --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:30px; --tabbar-h:0px; } /* ═══ Chữ ═══ Máy Apple lấy đúng SF Pro qua -apple-system (đã có đủ dấu tiếng Việt). Máy Windows/Android rơi về Be Vietnam Pro — font thiết kế riêng cho tiếng Việt, dấu đặt cân ở những chữ hai dấu như "ế" "ợ" "ằ". */ body{ font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Be Vietnam Pro", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:14px; line-height:1.52; letter-spacing:-.006em; color:var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background:var(--bg); background-image: radial-gradient(62rem 44rem at 92% -12%, rgba(249,110,58,.13), transparent 60%), radial-gradient(50rem 38rem at -12% 8%, rgba(45,183,101,.10), transparent 58%), radial-gradient(44rem 40rem at 40% 112%, rgba(255,138,91,.09), transparent 62%); background-attachment:fixed; } /* ═══ Icon một nét ═══ */ svg.i{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block} svg.i.sm{width:17px;height:17px;stroke-width:1.75} svg.i.lg{width:24px;height:24px;stroke-width:1.6} svg.i.xl{width:30px;height:30px;stroke-width:1.5} /* ═══ Bề mặt kính ═══ */ .card{ background:var(--glass); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh); transition:box-shadow .3s cubic-bezier(.32,.72,0,1), transform .3s cubic-bezier(.32,.72,0,1); } .card:hover{box-shadow:var(--sh-lift);transform:translateY(-2px)} form.card:hover,.card.flat:hover{transform:none;box-shadow:var(--sh)} .card .hd{padding:14px 17px;border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0} .card .hd h3{font-size:14px;font-weight:650;letter-spacing:-.015em} .card .hd .r{font-size:12px;color:var(--muted);font-weight:450} .card .bd{padding:16px 17px} .kpi{padding:16px 17px} .kpi .lb{font-size:12px;font-weight:550;letter-spacing:-.005em;color:var(--muted)} .kpi .vl{font-size:clamp(23px,2vw,30px);font-weight:700;letter-spacing:-.038em;margin:7px 0 2px; color:var(--ink);font-variant-numeric:tabular-nums} .kpi .dt{font-size:11.5px;color:var(--muted);font-weight:450} .kpi .dt .up{color:var(--lf-600);font-weight:600} .kpi .dt .dn{color:var(--br-600);font-weight:600} /* ═══ Nút ═══ */ .btn{ display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--r-xs); border:0;font-weight:600;font-size:13.5px;letter-spacing:-.01em;cursor:pointer; background:linear-gradient(180deg,var(--br-500),var(--br-600));color:var(--on-accent); box-shadow:0 1px 2px rgba(126,40,16,.18), 0 8px 20px -8px rgba(234,90,43,.62), inset 0 1px 0 rgba(255,255,255,.3); transition:.24s cubic-bezier(.32,.72,0,1); } .btn:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(126,40,16,.2),0 14px 28px -10px rgba(234,90,43,.7),inset 0 1px 0 rgba(255,255,255,.32)} .btn:active{transform:translateY(0)} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none} .btn.sec{background:var(--glass-2);color:var(--ink);border:1px solid var(--hair); box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.85)} .btn.sec:hover{color:var(--br-700)} .btn.gho{background:transparent;color:var(--br-700);border:1px solid rgba(234,90,43,.4);box-shadow:none} .btn.gho:hover{background:var(--br-50);transform:none} .btn.ok{background:linear-gradient(180deg,var(--lf-500),var(--lf-700)); box-shadow:0 1px 2px rgba(12,74,40,.16),0 8px 20px -8px rgba(31,160,85,.55),inset 0 1px 0 rgba(255,255,255,.28)} .btn.warn{background:linear-gradient(180deg,#EFA33C,#D07E10)} .btn.dan{background:linear-gradient(180deg,#EA5A4A,#B32E1C)} .btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px} /* ═══ Ô nhập ═══ */ .inp{ background:rgb(var(--glass-rgb) / .8); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(140,108,88,.18);border-radius:var(--r-xs); padding:9px 12px;transition:.18s; } .inp:focus{background:var(--surface);border-color:var(--br-500);box-shadow:0 0 0 3.5px rgba(249,110,58,.15)} .inp[readonly]{background:rgba(253,250,247,.8);color:var(--ink2)} label.f{font-size:12.5px;font-weight:550;color:var(--ink2);letter-spacing:-.008em} .hint{font-size:11.5px;color:var(--muted);font-weight:450} /* ═══ Nhãn trạng thái ═══ */ .pill{padding:3.5px 10px;font-size:11.5px;font-weight:600;letter-spacing:-.005em; border:1px solid rgb(var(--glass-rgb) / .6)} .p-g{background:var(--lf-100);color:var(--lf-900)} .p-o{background:var(--br-100);color:var(--br-700)} .p-r{background:var(--danger-bg-strong);color:var(--danger-ink)} .p-n{background:var(--info-bg);color:#31507F} .p-s{background:rgb(var(--glass-rgb) / .72);color:var(--ink2)} /* ═══ Bảng ═══ */ th{background:transparent;border-bottom:1px solid var(--line);color:var(--muted); font-size:11px;font-weight:600;letter-spacing:.03em;padding:10px 15px} td{border-bottom:1px solid var(--line);padding:11px 15px;font-size:13px} tbody tr{transition:background .18s} tbody tr:hover{background:rgba(249,110,58,.038)} .num{font-variant-numeric:tabular-nums} /* ═══ Ghi chú ═══ */ .note{padding:11px 13px;border-radius:var(--r-sm);font-size:12.5px;font-weight:450; border:1px solid rgb(var(--glass-rgb) / .65)} .note.i{background:rgba(233,238,247,.78);color:#2C4874} .note.w{background:rgba(255,233,224,.78);color:#93401A} .note.d{background:rgba(254,231,226,.8);color:var(--danger-ink)} .note.s{background:rgba(219,246,229,.78);color:var(--lf-900)} /* ═══ Thanh tiêu đề ═══ */ .top{ background:rgb(var(--glass-rgb) / .66); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border-bottom:1px solid var(--hair);padding:13px 22px; position:sticky;top:0;z-index:40; } .top h1,.top .ttl h1{font-size:18.5px;font-weight:680;letter-spacing:-.028em} .top .sub{color:var(--muted);font-size:12px;font-weight:450} .tabs a{font-weight:550} .tabs a.on{color:var(--br-700);border-bottom-color:var(--br-600)} .bar i{background:linear-gradient(90deg,var(--lf-500),var(--lf-400))} .av{background:var(--br-100);color:var(--br-700);font-weight:650} .av.n{background:var(--info-bg);color:#31507F} .empty .ico{opacity:.35} /* ═══ Menu trái: kính SÁNG, co giãn theo màn hình ═══ Trước cố định 238px — màn 13" bị chiếm chỗ, màn 27" thì phí. clamp() cho tự co giãn, không cần media query cho từng cỡ. */ .side{ width:clamp(200px, 15.5vw, 264px); flex:0 0 clamp(200px, 15.5vw, 264px); background:var(--glass-side); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border-right:1px solid var(--hair); color:var(--ink2);padding:16px 12px; } .side .brand{padding:6px 8px 16px;color:var(--ink)} .side .brand > div:last-child{font-size:10.5px;color:var(--muted)} .logo-txt .l1{font-weight:700;font-size:14.5px;letter-spacing:-.02em;color:var(--ink)} .logo-txt .l2{font-size:9.5px;letter-spacing:.14em;color:var(--br-600);font-weight:600} .side a{ padding:8.5px 11px;border-radius:11px;font-size:13.5px;font-weight:500; color:var(--ink2);letter-spacing:-.012em;transition:.2s cubic-bezier(.32,.72,0,1); } .side a:hover{background:rgb(var(--glass-rgb) / .72);color:var(--ink)} .side a.on{ background:var(--glass-2);color:var(--br-700);font-weight:600; border:1px solid var(--hair);padding:7.5px 10px; box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.9); } .side a .ic{width:auto;opacity:1} .side a .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side a .bdg{background:var(--br-600);color:var(--on-accent);font-size:10px;font-weight:700; padding:1.5px 6px;border-radius:99px;letter-spacing:0;border:0} .side .grp{ font-size:10.5px;letter-spacing:.09em;color:var(--muted);font-weight:600; padding:15px 11px 6px; } .side .grp:hover{color:var(--ink2)} .side .grp.active,.side .grp.active .gtxt{color:var(--br-600)} .side .grp .gcar{font-size:0} .side .grp svg.i{width:13px;height:13px;opacity:.7; transition:transform .26s cubic-bezier(.32,.72,0,1)} .side .grp.closed svg.i{transform:rotate(-90deg)} .side .gitems{transition:max-height .3s cubic-bezier(.32,.72,0,1), opacity .2s} .grpall{color:var(--muted);font-size:10.5px;font-weight:500;padding:6px 11px 2px} .grpall:hover{color:var(--br-600);text-decoration:none} .side .who{border-top:1px solid var(--line);padding:12px 8px 2px;color:var(--muted);font-size:11px} .side .who b{color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:-.012em} .side .who .lo{color:var(--muted);font-size:11px} .side .who .lo:hover{color:var(--br-600)} /* ═══ Ẩn thanh trượt, vẫn cuộn được ═══ */ *{scrollbar-width:thin;scrollbar-color:rgba(140,108,88,.22) transparent} ::-webkit-scrollbar{width:7px;height:7px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(140,108,88,.18);border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:rgba(140,108,88,.34)} .scrollnav,.tblwrap,.tabs{scrollbar-width:none;-ms-overflow-style:none} .scrollnav::-webkit-scrollbar,.tblwrap::-webkit-scrollbar,.tabs::-webkit-scrollbar{width:0;height:0;display:none} /* ═══ Lưới tự lấp đầy màn hình ═══ */ .content{ max-width:min(1680px,100%); padding:20px clamp(12px,1.6vw,26px) calc(48px + var(--tabbar-h)); margin-inline:auto; } .grid{gap:clamp(10px,.9vw,15px)} .content .grid[style*="minmax(168px"], .content .grid[style*="minmax(160px"], .content .grid[style*="minmax(150px"]{ grid-template-columns:repeat(auto-fit,minmax(clamp(150px,13vw,215px),1fr)) !important; } @media (min-width:1101px){ .content .grid[style*="380px"]{grid-template-columns:minmax(0,1fr) clamp(300px,24vw,400px) !important} .content .grid[style*="360px"]{grid-template-columns:minmax(0,1fr) clamp(292px,23vw,380px) !important} .content .grid[style*="340px"]{grid-template-columns:minmax(0,1fr) clamp(284px,22vw,360px) !important} .content .grid[style*="330px"]{grid-template-columns:minmax(0,1fr) clamp(280px,21vw,350px) !important} .content .grid[style*="320px"]{grid-template-columns:minmax(0,1fr) clamp(276px,21vw,340px) !important} .content .grid[style*="420px"]{grid-template-columns:minmax(0,1fr) clamp(320px,26vw,440px) !important} } @media (min-width:1700px){ .content .grid[style*="minmax"]{grid-template-columns:repeat(auto-fit,minmax(205px,1fr)) !important} } /* ═══ Nút phụ trên thanh tiêu đề ═══ */ .minitog,.burger,.bell{ background:var(--glass-2);border:1px solid var(--hair);border-radius:var(--r-xs); box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.85); color:var(--ink2);width:37px;height:35px;padding:0; display:inline-flex;align-items:center;justify-content:center;transition:.22s; } .minitog:hover,.burger:hover,.bell:hover{color:var(--br-600);border-color:var(--hair)} .bell.has{color:var(--br-600);background:var(--br-50)} /* v3.123 · nút lùi / tiến trang (cạnh nút thu gọn menu) */ .histnav{display:inline-flex;gap:4px;flex:0 0 auto} .histbtn{background:var(--glass-2);border:1px solid var(--hair);border-radius:var(--r-xs); box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.85); color:var(--ink2);width:33px;height:35px;padding:0;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;transition:.22s} .histbtn:hover{color:var(--br-600)} .histbtn:disabled{opacity:.4;cursor:default} @media (max-width: 600px){ .histfwd{display:none} .histbtn{width:31px;height:33px} } .bell i{background:var(--br-600);color:var(--on-accent);font-size:9.5px;font-weight:700; padding:2px 5px;border-radius:99px;border:2px solid #FEFCFA;top:-5px;right:-5px} @keyframes bellpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}} .bell i{animation:bellpop .3s cubic-bezier(.34,1.56,.64,1)} .app.mini .side{width:66px;flex:0 0 66px;padding:16px 8px} .app.mini .side a[data-tip]:hover::after{ background:rgba(36,28,24,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 8px 22px rgba(120,80,60,.3);font-weight:500} /* ═══════════════════════════════════════════════════════════════ THANH MENU DƯỚI CHO ĐIỆN THOẠI Viên thuốc nổi kiểu Apple: kính mờ, bo lớn, cách mép. Ẩn hoàn toàn trên máy tính. ═══════════════════════════════════════════════════════════════ */ .tabbar{display:none} @media (max-width:900px){ :root{--tabbar-h:80px} .tabbar{ display:flex;position:fixed;left:50%;transform:translateX(-50%); bottom:calc(11px + env(safe-area-inset-bottom,0px)); width:min(calc(100vw - 22px),470px); z-index:70;padding:7px;gap:2px;border-radius:var(--r-xl); background:rgb(var(--glass-rgb) / .66); -webkit-backdrop-filter:saturate(190%) blur(28px);backdrop-filter:saturate(190%) blur(28px); border:1px solid rgb(var(--glass-rgb) / .92); box-shadow:0 1px 2px rgba(120,80,60,.06), 0 14px 38px -8px rgba(120,80,60,.3), inset 0 1px 0 rgba(255,255,255,.98); } .tabbar a{ flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;padding:9px 2px 7px;border-radius:22px;color:var(--muted); font-size:9.5px;font-weight:600;line-height:1.1;text-align:center;letter-spacing:-.005em; position:relative;transition:.26s cubic-bezier(.32,.72,0,1); -webkit-tap-highlight-color:transparent; } .tabbar a .lb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tabbar a:active{transform:scale(.94)} .tabbar a.on{background:rgb(var(--glass-rgb) / .94);color:var(--br-600); box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.95)} /* Nút giữa nổi hẳn — thao tác dùng nhiều nhất */ .tabbar a.mid{padding-top:6px} .tabbar a.mid .pl{ width:38px;height:38px;border-radius:14px;display:grid;place-items:center;margin-top:-4px; background:linear-gradient(180deg,var(--br-500),var(--br-600));color:var(--on-accent); box-shadow:0 2px 5px rgba(126,40,16,.24),0 10px 22px -8px rgba(234,90,43,.68), inset 0 1px 0 rgba(255,255,255,.34); } .tabbar a.mid.on{background:transparent;box-shadow:none;color:var(--br-600)} .tabbar a em{position:absolute;top:3px;right:calc(50% - 22px);background:var(--br-600);color:var(--on-accent); font-style:normal;font-size:8.5px;font-weight:700;padding:1.5px 5px;border-radius:99px; border:2px solid #FEFCFA;line-height:1.1} .content{padding:14px 12px calc(26px + var(--tabbar-h))} /* Menu trái trên điện thoại: trượt từ trái vào, kính đục hơn cho dễ đọc */ .side{ top:0;width:min(84vw,300px);flex-basis:auto; background:rgb(var(--glass-rgb) / .93); padding-top:calc(14px + env(safe-area-inset-top,0px)); box-shadow:14px 0 40px -12px rgba(120,80,60,.35); } .sideveil{background:rgba(36,28,24,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .top{padding:11px 13px} .top .ttl h1{font-size:17px} .card .hd{padding:13px 14px} .card .bd{padding:14px} .kpi{padding:14px} } /* v3.20 · Soạn thảo có định dạng (rich text) — dùng cho khu vực nội dung dài (bài viết Cơ sở tri thức/Sale Kit, và mọi nơi khác gắn class "rte" sau này). Tự viết bằng contenteditable + execCommand, không kéo thư viện ngoài nặng vài MB (đúng tinh thần "không phụ thuộc ngoài" đã áp dụng suốt hệ thống). */ .rte-wrap{border:1px solid var(--line);border-radius:var(--r-xs, 10px);overflow:hidden;background:var(--card)} .rte-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px;border-bottom:1px solid var(--line); background:rgba(0,0,0,.02)} .rte-btn{border:0;background:none;cursor:pointer;width:30px;height:30px;border-radius:7px; display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:13px;font-weight:600} .rte-btn:hover{background:rgba(0,0,0,.06)} .rte-btn.on{background:var(--g100);color:var(--g700)} .rte-sep{width:1px;background:var(--line);margin:4px 3px} .rte-sel{border:1px solid var(--line);border-radius:7px;background:var(--card);font-size:12px; padding:4px 6px;max-width:110px;color:var(--ink2)} .rte-body{min-height:220px;max-height:520px;overflow:auto;padding:12px 14px;font-size:13.5px; line-height:1.6;color:var(--ink)} .rte-body:focus{outline:none} .rte-body img{max-width:100%;border-radius:6px} .rte-body table{border-collapse:collapse;width:100%;margin:8px 0} .rte-body table td,.rte-body table th{border:1px solid var(--line);padding:6px 8px} .rte-body blockquote{border-left:3px solid var(--g600);margin:8px 0;padding:2px 12px;color:var(--muted)} .rte-src{width:100%;min-height:220px;border:0;padding:12px 14px;font-family:monospace;font-size:12.5px; resize:vertical;background:var(--card);color:var(--ink)} .rte-wrap.full{position:fixed;inset:14px;z-index:300;box-shadow:0 20px 60px rgba(0,0,0,.3)} .rte-wrap.full .rte-body{max-height:none;height:calc(100vh - 130px)} .rte-pop{position:absolute;z-index:40;background:var(--card);border:1px solid var(--line); border-radius:10px;box-shadow:var(--sh);padding:8px;display:grid;grid-template-columns:repeat(8,1fr); gap:2px;max-width:260px} .rte-pop button{border:0;background:none;cursor:pointer;padding:5px;border-radius:6px;font-size:15px} .rte-pop button:hover{background:rgba(0,0,0,.06)} .rte-content{font-size:13.5px;line-height:1.65} .rte-content img{max-width:100%;border-radius:6px} .rte-content table{border-collapse:collapse} .rte-content table td,.rte-content table th{border:1px solid var(--line);padding:6px 8px} .rte-content blockquote{border-left:3px solid var(--g600);margin:8px 0;padding:2px 12px;color:var(--muted)} .rte-content ul,.rte-content ol{padding-left:22px;margin:6px 0 10px} .rte-content li{margin:3px 0} .rte-content h3{font-size:14.5px;margin:16px 0 6px} .rte-content code{background:var(--surface-3);padding:1px 5px;border-radius:4px;font-size:12.5px} /* v3.20 · "Giao việc mới" + "Tải việc tuần này" (task/assign) xếp 2 cột trên màn rộng */ .assign-side{display:grid;grid-template-columns:1.3fr .9fr;gap:16px;align-items:start} @media (max-width:1100px){.assign-side{grid-template-columns:1fr}} /* v3.20 · nút "Gửi ticket hỗ trợ" nổi — trên máy tính đứng cố định ở góc dưới phải; trên điện thoại phải nhảy lên TRÊN thanh menu dưới (.tabbar, z-index 70, cao ~80px) chứ không được đứng nguyên bottom:78px như cũ, vì như vậy nó nằm lọt đúng dải mà .tabbar phủ lên (đè mất, chỉ thấy góc hoặc mất hẳn nút). */ .helpfab{position:fixed;right:18px;bottom:78px;z-index:40;width:48px;height:48px;border-radius:50%} @media (max-width:900px){ .helpfab{bottom:calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom,0px));z-index:65} } /* v3.22 · Nút cuộn lên đầu — cùng hàng với nút trợ giúp nổi, lệch sang trái 62px */ .scrolltopfab{right:80px;transition:opacity .15s} @media (max-width:900px){ .scrolltopfab{right:80px} } /* v3.22 · Bảng chat AI Copilot — bám theo cùng mốc bottom với nút nổi bên trái */ .aipanel{bottom:134px} @media (max-width:900px){ .aipanel{bottom:calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom,0px) + 64px)} } /* v3.22 · Cài đặt → Toàn bộ tính năng — masonry 2 cột (cột lớn/nhỏ, xem settings.php) */ .msettings-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} @media (max-width:860px){ .msettings-cols{flex-direction:column} } @media (max-width:640px){ .msettings-grid2{grid-template-columns:1fr} } @media (max-width:359px){ .tabbar a .lb{display:none} .tabbar a{padding:12px 2px} } @media (min-width:901px){ :root{--tabbar-h:0px} .tabbar{display:none !important} } /* Người dùng bật "giảm chuyển động" thì tắt hết hiệu ứng */ @media (prefers-reduced-motion:reduce){ *,*:before,*:after{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* Trình duyệt cũ không có backdrop-filter: nền đục để chữ vẫn đọc rõ */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .card,.top,.tabbar,.btn.sec,.bell,.minitog,.burger,.side,.inp{background:rgb(var(--glass-rgb) / .97)} .note.i{background:var(--info-bg)}.note.w{background:#FFE9E0} .note.d{background:var(--danger-bg-strong)}.note.s{background:var(--ok-bg-strong)} } /* ═══ Khối tiện ích mới cho v2.4 ═══ */ .qrow{display:flex;align-items:center;gap:12px;padding:13px 14px} .qico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:var(--on-accent)} .qt{flex:1;min-width:0} .qt b{font-size:13.5px;font-weight:600;letter-spacing:-.014em;display:block} .qt span{font-size:11px;color:var(--muted);font-weight:450} /* Nút chấm công lớn trên điện thoại */ .gpsbig{width:100%;padding:18px;border-radius:var(--r-lg);border:0;cursor:pointer;color:var(--on-accent); background:linear-gradient(155deg,var(--lf-500),var(--lf-700));font-family:inherit;text-align:left; box-shadow:0 2px 6px rgba(12,74,40,.2),0 18px 38px -14px rgba(31,160,85,.68),inset 0 1px 0 rgba(255,255,255,.28); display:flex;align-items:center;gap:14px;transition:.26s cubic-bezier(.32,.72,0,1)} .gpsbig:hover{transform:translateY(-2px)} .gpsbig:disabled{opacity:.6;transform:none} .gpsbig .t1{font-size:16.5px;font-weight:680;letter-spacing:-.024em;display:block} .gpsbig .t2{font-size:11.5px;opacity:.86;margin-top:2px;display:block;font-weight:450} .gpsbig.out{background:linear-gradient(155deg,var(--br-500),var(--br-700)); box-shadow:0 2px 6px rgba(126,40,16,.2),0 18px 38px -14px rgba(234,90,43,.68),inset 0 1px 0 rgba(255,255,255,.28)} /* Dải trạng thái mạng / hàng đợi offline */ .offbar{position:fixed;left:50%;transform:translateX(-50%);z-index:75; bottom:calc(14px + var(--tabbar-h));display:none;align-items:center;gap:9px; padding:9px 15px;border-radius:99px;font-size:12.5px;font-weight:550; background:rgba(255,233,224,.94);color:#93401A;border:1px solid rgb(var(--glass-rgb) / .9); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:0 10px 28px -8px rgba(120,80,60,.32)} .offbar.show{display:flex} @media (min-width:901px){.offbar{bottom:18px}} /* Nhắc cài lên màn hình chính (iPhone) */ .a2hs{display:none;margin-bottom:14px} .a2hs.show{display:flex} /* ═══════════════════════════════════════════════════════════════════════ SỬA LỖI: menu con không sổ ra được trên điện thoại ═══════════════════════════════════════════════════════════════════════ NGUYÊN NHÂN THẬT (đã dựng lại bằng trình duyệt thật, không phải suy đoán): .scrollnav là flex container theo chiều dọc. Mọi khối con của nó — kể cả .gitems — mặc định được phép CO LẠI khi thiếu chỗ (flex-shrink:1). Bình thường flex item không co nhỏ hơn nội dung, nhờ min-height:auto. NHƯNG .gitems có overflow:hidden (cần cho hiệu ứng trượt mở/đóng), mà theo chuẩn CSS, overflow khác visible sẽ ép min-height về 0. Kết quả: trên màn hình điện thoại, 11 nhóm menu cao hơn vùng chứa, nên mọi .gitems bị nén xuống ĐÚNG 0px — dù không hề mang class "closed", max-height vẫn 1200px, và các mục con bên trong vẫn cao 38px mỗi mục. Người dùng bấm vào tên nhóm, JavaScript chạy đúng, class đổi đúng, nhưng chiều cao vẫn là 0 nên trông như "bấm không có gì xảy ra". Màn hình máy tính cao hơn nên còn đủ chỗ, vì vậy lỗi chỉ lộ ra ở điện thoại. CÁCH SỬA: cấm co các khối trong menu, để .scrollnav cuộn thay vì nén. */ .scrollnav > *{flex:0 0 auto} .side .gitems{flex:0 0 auto;min-height:0} .side .gitems:not(.closed){max-height:none} .side .gitems.closed{max-height:0 !important;opacity:0;pointer-events:none} .scrollnav{overflow-y:auto} /* v3.9 · SỬA LỖI: trên máy tính, rê chuột vào khu vực menu thì không cuộn được trang, phải rê sang khu nội dung mới cuộn được ───────────────────── NGUYÊN NHÂN: overscroll-behavior:contain từng đặt thẳng vào .scrollnav (không giới hạn theo màn hình) để chặn hiệu ứng "kéo để làm mới" khi menu mở dạng ngăn kéo trên điện thoại. Nhưng .scrollnav vẫn LUÔN là overflow:auto — trên máy tính, .side không cố định vị trí, nó giãn theo chiều cao trang; khi trang dài hơn menu, .scrollnav không còn gì để tự cuộn bên trong, và overscroll-behavior:contain khoá luôn việc CUỘN TIẾP LÊN TRANG CHA (đúng việc nó sinh ra để làm) — kết quả là rê chuột đứng yên trên vùng menu thì lăn chuột không có tác dụng gì cả, dù trang thật sự còn dài hơn màn hình. CÁCH SỬA: chỉ khoá scroll-chaining khi menu đang ở dạng ngăn kéo cố định trên điện thoại (cùng ngưỡng với .side{position:fixed} bên dưới) — máy tính giữ hành vi mặc định để lăn chuột trên menu vẫn cuộn được cả trang. */ @media(max-width:900px){ .scrollnav{overscroll-behavior:contain;-webkit-overflow-scrolling:touch} } /* Lớp phủ khi mở menu trên điện thoại. Bộ chọn cũ (.side.open ~ .sideveil) không bao giờ khớp vì hai thẻ này không phải anh em: .side nằm trong .app, còn .sideveil nằm ngoài. */ .sideveil{display:none} body.navopen .sideveil{display:block} body.navopen{overflow:hidden} /* Nút ba gạch chỉ dành cho điện thoại — quy tắc gộp ở trên đã vô tình đặt display:inline-flex làm nó hiện cả trên máy tính. */ .burger{display:none} @media (max-width:900px){ .burger{display:inline-flex} .minitog{display:none} } /* v3.49 · Mục 5 — SỬA LỖI: "flex-wrap:nowrap" ép TOÀN BỘ thanh trên (tiêu đề + chuông + chi nhánh + tìm kiếm + MỌI nút hành động riêng của từng trang, số lượng nút này không cố định) vào ĐÚNG 1 HÀNG trên điện thoại — trang nào có vài nút hành động (vd "+ Thêm", "Excel"...) là tràn ra ngoài khung nhìn, nút bị đẩy khuất không thấy/không bấm được (đúng phản ánh "nút bị mất"). Đổi lại: hàng đầu (tiêu đề) vẫn 1 dòng, rút gọn bằng "…" như cũ; nếu nhóm nút bên phải không đủ chỗ thì tự XUỐNG HẲN 1 HÀNG RIÊNG bên dưới (không còn bị cắt/giấu mất), thay vì cố nhồi vào chung 1 hàng chật. */ @media (max-width:900px){ .top{flex-wrap:wrap;gap:8px 10px;align-items:center} .top .ttl{flex:1 1 auto;min-width:0} .top .ttl h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .top .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px} .top .right{margin-left:0;flex:1 1 auto;justify-content:flex-end;gap:6px} .top .right .btn{padding:8px 11px;font-size:12.5px} } /* Đang mở menu trái thì giấu thanh tab dưới — nếu không nó nằm đè lên phần tên người dùng và nút Đăng xuất ở đáy menu. */ @media (max-width:900px){ body.navopen .tabbar{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px)} .tabbar{transition:opacity .22s, transform .22s} .side{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} .side .who{padding-bottom:10px} } /* ═══════════════════════════════════════════════════════════════════════ GIANGDANG v2.5 — CÁC ĐIỂM HIỆU CHỈNH THEO YÊU CẦU VẬN HÀNH Chồng lên phần trên, không xoá gì. Mỗi khối ghi rõ mục yêu cầu tương ứng. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1.1 · Bảng rộng phải cuộn ngang được TRÊN CẢ MÁY TÍNH ── Trước đây .tblwrap bị ẩn hẳn thanh trượt (scrollbar-width:none) nên người dùng máy tính không biết bảng còn nội dung bên phải — nhìn như bị mất cột. Nay hiện thanh trượt mảnh + bóng mờ ở mép để báo còn nội dung. */ .tblwrap{scrollbar-width:thin;-ms-overflow-style:auto;position:relative} .tblwrap::-webkit-scrollbar{height:9px;width:9px;display:block} .tblwrap::-webkit-scrollbar-track{background:rgba(140,108,88,.06);border-radius:99px} .tblwrap::-webkit-scrollbar-thumb{background:rgba(140,108,88,.28);border-radius:99px} .tblwrap::-webkit-scrollbar-thumb:hover{background:rgba(140,108,88,.45)} /* Khung bọc do JS tạo: thêm bóng mờ hai mép khi còn nội dung ẩn */ .tblscroll{position:relative} .tblscroll::before,.tblscroll::after{ content:'';position:absolute;top:0;bottom:9px;width:26px;pointer-events:none; opacity:0;transition:opacity .2s;z-index:2} .tblscroll::before{left:0;background:linear-gradient(90deg,rgba(120,80,60,.13),transparent)} .tblscroll::after{right:0;background:linear-gradient(270deg,rgba(120,80,60,.13),transparent)} .tblscroll.can-l::before{opacity:1} .tblscroll.can-r::after{opacity:1} /* Gợi ý "vuốt để xem thêm" — chỉ hiện khi bảng thật sự tràn */ .tblhint{display:none;align-items:center;gap:6px;font-size:11.5px;color:var(--muted); padding:6px 15px 0;font-weight:500} .tblscroll.can-r > .tblhint,.tblscroll.can-l > .tblhint{display:flex} /* ── 1.1b · Cột thao tác (Duyệt) đưa về ĐẦU bảng và ghim lại khi cuộn ── */ th.act-first,td.act-first{position:sticky;left:0;z-index:3; background:rgb(var(--glass-rgb) / .94); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:1px 0 0 var(--line)} tbody tr:hover td.act-first{background:rgba(255,248,245,.97)} @media (max-width:620px){ th.act-first,td.act-first{position:static;box-shadow:none} } /* ── 1.2 · Danh mục chỉ có MỘT khối thì dàn hết chiều ngang ── */ .grid > :only-child{grid-column:1 / -1} .grid.solo{grid-template-columns:1fr !important} .card.full,form.card.full{width:100%} /* ── 1.6 · Nút xổ / thu gọn nhóm menu to hơn, dễ bấm ── */ .side .grp{padding:14px 11px 10px;min-height:42px;border-radius:11px; cursor:pointer;-webkit-tap-highlight-color:transparent} .side .grp:hover{background:rgb(var(--glass-rgb) / .55)} .side .grp svg.i{width:18px;height:18px;opacity:.85;stroke-width:2.2; padding:0;flex:0 0 auto;border-radius:7px} .side .grp:hover svg.i{background:rgba(234,90,43,.1);color:var(--br-600);opacity:1} /* v3.29 · Huy hiệu tròn cho icon danh mục cấp 1 (chỉ cấp 1 — cấp 2 giữ nguyên icon như cũ) — theo đúng ý Enzo, TẤT CẢ đều màu xanh lá thương hiệu, không phân biệt màu theo từng danh mục nữa (chỉ icon khác nhau). !important để không bị luật hover/active khác của .side .grp đè lên. */ .catbadge{ width:30px !important;height:30px !important;border-radius:50% !important;flex:0 0 auto; display:flex !important;align-items:center;justify-content:center; background:var(--br-100,var(--ok-bg-strong)) !important; } .catbadge svg.i{width:16px !important;height:16px !important;opacity:1 !important; background:none !important;color:var(--g700) !important} .side .grp .gtxt{font-weight:700} @media (max-width:900px){ .side .grp{min-height:48px;padding:15px 12px 11px} .side .grp svg.i{width:20px;height:20px} } /* ── 1.7 · Ô nhập tiền: canh phải, chữ số đều nhau ── */ input.inp[data-money]{text-align:right;font-variant-numeric:tabular-nums;font-weight:600} .money-wrap{position:relative;display:block} .money-wrap > .cur{position:absolute;right:12px;top:50%;transform:translateY(-50%); font-size:12px;color:var(--muted);pointer-events:none;font-weight:500} .money-wrap > input.inp{padding-right:30px} /* ── 10 · Nút ẩn / hiện mật khẩu ── */ .pw-wrap{position:relative;display:block} .pw-wrap > input{padding-right:44px !important} .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%); width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent; color:var(--muted);cursor:pointer;border-radius:8px;transition:.18s;padding:0} .pw-eye:hover{color:var(--br-600);background:rgba(234,90,43,.08)} .pw-eye svg{width:18px;height:18px} /* ── 11 · Hộp thoại xin quyền thông báo & vị trí lần đầu đăng nhập ── */ .shk-modal{position:fixed;inset:0;z-index:200;display:none; align-items:center;justify-content:center;padding:20px; background:rgba(36,28,24,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .shk-modal.show{display:flex} .shk-modal .box{width:100%;max-width:430px;background:var(--surface);border-radius:var(--r-lg); padding:26px 24px 20px;box-shadow:0 24px 60px -12px rgba(120,80,60,.5); animation:shkPop .32s cubic-bezier(.32,.72,0,1)} @keyframes shkPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}} .shk-modal h3{font-size:17px;font-weight:680;letter-spacing:-.025em;margin-bottom:6px} .shk-modal p{font-size:13px;color:var(--ink2);line-height:1.55} .shk-modal .perm{display:flex;gap:12px;align-items:flex-start;padding:12px 0; border-top:1px solid var(--line)} .shk-modal .perm .pico{width:38px;height:38px;border-radius:12px;flex:0 0 auto; display:grid;place-items:center;background:var(--br-50);color:var(--br-600)} .shk-modal .perm b{font-size:13.5px;font-weight:620;display:block} .shk-modal .perm span{font-size:11.5px;color:var(--muted)} .shk-modal .perm .st{margin-left:auto;font-size:11px;font-weight:600;white-space:nowrap; align-self:center;color:var(--muted)} .shk-modal .perm .st.ok{color:var(--lf-600)} .shk-modal .perm .st.no{color:var(--br-600)} .shk-modal .ft{display:flex;gap:9px;margin-top:16px} .shk-modal .ft .btn{flex:1;justify-content:center} /* ── 3 · Khối tải ảnh chứng từ (chuyển khoản / bằng chứng khiếu nại) ── .updrop là thẻ