/* ════════════════════════════════════════════════════════════════════════════════ GPAcc — GIAO DIỆN FLUENT 2026 (viết lại 2026-07-07, bản gốc: _backup_ui_2026-07-07/style.css) Nguyên tắc: GIỮ NGUYÊN mọi tên class + hằng số bố cục (topbar 48px, sidebar 200/56px, dock 252px) + màu QUY ƯỚC (tiêu đề bảng #d2e3df & các biến thể h-blue/h-grn/h-red, tab dữ liệu teal #0b6b5e, tab phần hành xanh, tile pastel, nút cam "về chỗ đang làm"). Chỉ thay DA: token màu/bo góc/bóng lớp Fluent, nền mica, menu acrylic (blur), chuyển động tinh tế, focus ring, thanh cuộn mảnh, số tabular. KHÔNG đổi DOM/JS. ════════════════════════════════════════════════════════════════════════════════ */ :root{ /* Thương hiệu (giữ họ xanh cũ) */ --blue:#0d47a1; /* xanh đậm thương hiệu — tiêu đề, nền đậm */ --blue2:#1565c0; /* xanh tương tác cũ — nút, link */ --accent:#1f5fbf; /* xanh tương tác chính (đồng bộ các component mới) */ --accent-2:#2b7be4; /* đầu sáng của gradient */ --accent-soft:#eef4fd; /* nền accent nhạt (hover, active nhẹ) */ /* Nền & bề mặt (mica / acrylic) */ --bg:#eef1f8; --surface:#fff; --surface-2:#f7f9fd; --acrylic:rgba(255,255,255,.96); /* menu/panel nổi — ĐỤC hơn cho dễ đọc (2026-07-07: user báo hơi trong) */ --acrylic-strong:rgba(252,253,255,.985); --line:#e3e8f1; --line-strong:#cfd9e8; --text:#1b2536; --muted:#64748b; /* Bo góc */ --r-s:8px; --r-m:11px; --r-l:14px; --r-xl:18px; --r-pill:999px; /* Bóng lớp kiểu Fluent (mềm, 2 tầng) */ --sh-1:0 1px 2px rgba(16,35,68,.05),0 2px 8px rgba(16,35,68,.05); --sh-2:0 2px 6px rgba(16,35,68,.06),0 12px 28px rgba(16,35,68,.09); --sh-3:0 10px 24px rgba(12,32,74,.14),0 28px 64px rgba(12,32,74,.16); /* Chuyển động */ --ease:cubic-bezier(.2,.7,.3,1); --fast:.14s; --med:.22s; /* Vòng focus (bàn phím + ô nhập) */ --ring:0 0 0 3px rgba(43,123,228,.20); accent-color:var(--accent); /* checkbox/radio ăn màu thương hiệu */ } *{box-sizing:border-box} html{scrollbar-color:#b7c4d9 transparent} body{margin:0;color:var(--text);background:var(--bg); font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* Nền MICA: lớp gradient cố định vẽ 1 lần (pseudo fixed, không repaint khi cuộn bảng lớn) */ body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(1100px 720px at 88% -12%, rgba(43,123,228,.09), transparent 60%), radial-gradient(880px 640px at -8% 108%, rgba(11,107,94,.06), transparent 55%), linear-gradient(180deg,#f6f8fc 0%,#edf1f8 100%)} ::selection{background:rgba(43,123,228,.22)} /* Thanh cuộn mảnh, bo tròn (toàn app) */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#c2cddf;border-radius:8px;border:3px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:#9fb0ca;border:2px solid transparent;background-clip:padding-box} /* Focus bàn phím rõ ràng (a11y) — ô nhập có ring riêng ở dưới */ :focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px} a{color:var(--blue2);text-decoration:none;transition:color var(--fast) var(--ease)} a:hover{text-decoration:underline} /* Bung menu/panel nổi: hiệu ứng nảy nhẹ kiểu Fluent */ @keyframes gpPop{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}} @keyframes gpRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} } /* ── Thanh .nav cũ (một số trang đứng/legacy) ── */ .nav{display:flex;align-items:center;gap:22px;color:#fff;padding:0 22px;height:54px; background:linear-gradient(100deg,#0a3c8e,#1565c0)} .nav .brand{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px} .nav .brand-logo{width:26px;height:26px;border-radius:6px} .nav nav{display:flex;gap:16px;flex:1} .nav nav a{color:#dfe8f5;font-size:15px} .nav nav a:hover{color:#fff;text-decoration:none} .nav .user{display:flex;align-items:center;gap:14px;font-size:13px;color:#cdd9ee} .nav .user a{color:#fff} .nav .logout{background:rgba(255,255,255,.15);padding:5px 12px;border-radius:8px} /* Toolbar nhóm dropdown: Khách hàng / Nhân viên / Công cụ */ .mainnav{display:flex;gap:2px;flex:1} .mainnav .navgroup{position:relative} .mainnav .navtop{display:inline-block;color:#dfe8f5;font-size:15px;padding:0 14px;height:54px;line-height:54px;cursor:pointer;white-space:nowrap;font-weight:600;border-radius:9px;transition:background var(--fast) var(--ease)} .mainnav .navtop:hover{color:#fff;background:rgba(255,255,255,.12);text-decoration:none} .mainnav .navmenu{display:none;position:absolute;top:54px;left:0;min-width:218px;border-radius:14px; background:var(--acrylic);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(199,212,232,.7);box-shadow:var(--sh-3);padding:6px;z-index:60;animation:gpPop var(--fast) var(--ease)} .mainnav .navgroup:hover .navmenu{display:block} .mainnav .navmenu a{display:block;color:#1f2430;font-size:14px;padding:9px 14px;white-space:nowrap;border-radius:9px} .mainnav .navmenu a:hover{background:var(--accent-soft);color:var(--blue);text-decoration:none} /* Ô chọn file Việt hóa */ .vh-file{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap} .vh-file-hidden{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none} .vh-file-btn{background:#eef2f8;border:1px solid var(--line-strong);color:var(--accent);border-radius:10px; padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--fast) var(--ease)} .vh-file-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 3px 10px rgba(31,95,191,.3)} .vh-file-name{color:var(--muted);font-size:13px} /* ═════ Layout SIDEBAR (top bar + menu dọc trái) — hằng số 48px/200px/56px GIỮ NGUYÊN ═════ */ .topbar{position:fixed;top:0;left:0;right:0;height:48px;color:#fff;display:flex;align-items:center; justify-content:space-between;padding:0 12px;z-index:100; background:linear-gradient(100deg,rgba(8,45,110,.93),rgba(21,101,192,.90)); backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6); box-shadow:inset 0 -1px 0 rgba(255,255,255,.09),0 4px 20px rgba(9,35,84,.20)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .topbar{background:linear-gradient(100deg,#0a3c8e,#1565c0)} } .topbar .tb-left{display:flex;align-items:center;gap:9px} .topbar .tb-burger{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:15px;width:30px;height:30px;border-radius:9px;cursor:pointer;padding:0;line-height:1;transition:background var(--fast) var(--ease)} .topbar .tb-burger:hover{background:rgba(255,255,255,.25)} .topbar .brand-logo{width:23px;height:23px;border-radius:6px} .topbar .tb-title{font-weight:600;font-size:14.5px;letter-spacing:.2px;white-space:nowrap} .topbar .tb-title .tb-sub{font-weight:400;opacity:.82;font-size:13px} .topbar .tb-right{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#dfe8f5;flex:0 0 auto} .topbar .tb-search-btn{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:9px; border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.12);color:#dfe8f5;font-size:12.5px; font-weight:700;cursor:pointer;transition:background var(--fast) var(--ease)} .topbar .tb-search-btn:hover{background:rgba(255,255,255,.22)} .topbar .tb-search-btn .kbd{font-size:10.5px;border:1px solid rgba(255,255,255,.45);border-radius:5px;padding:1px 6px;color:#fff} @media (max-width:1160px){.topbar .tb-search-btn .kbd{display:none}} @media (max-width:900px){.topbar .tb-search-btn{display:none}} /* 2026-07-05: hộp tên dài -> AVATAR TRÒN + menu xổ (hết đè menu ngang ở màn 1280–1366) */ .topbar .tb-userbox{position:relative;display:flex;align-items:center} .topbar .tb-ava{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:800;line-height:1; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0; transition:all var(--fast) var(--ease)} .topbar .tb-ava:hover,.topbar .tb-ava[aria-expanded="true"]{background:#fff;color:var(--blue);border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)} .topbar .tb-umenu{position:absolute;top:calc(100% + 9px);right:0;z-index:130;min-width:210px; background:var(--acrylic);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(199,212,232,.7);border-radius:14px;box-shadow:var(--sh-3); padding:6px;display:flex;flex-direction:column;animation:gpPop var(--fast) var(--ease)} .topbar .tb-umenu[hidden]{display:none} .topbar .tb-uname{padding:8px 10px 9px;border-bottom:1px solid #edf1f7;margin-bottom:5px; font-weight:700;color:#22314a;font-size:13.5px;line-height:1.25;display:flex;flex-direction:column;gap:1px} .topbar .tb-uname small{font-weight:600;color:#7c8aa3;font-size:11.5px} .topbar .tb-umenu a{color:#2b3950;text-decoration:none;padding:8px 10px;border-radius:9px;font-size:13px;font-weight:600} .topbar .tb-umenu a:hover{background:var(--accent-soft);color:var(--accent)} .topbar .tb-umenu .tb-logout{display:block;width:100%;border:0;background:transparent;color:#2b3950; text-align:left;padding:8px 10px;border-radius:9px;font:600 13px 'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;cursor:pointer} .topbar .tb-umenu .tb-logout:hover{background:var(--accent-soft);color:var(--accent)} .topbar .tb-right>a{color:#fff} .sidebar{position:fixed;top:48px;left:0;bottom:0;width:200px;background:rgba(255,255,255,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-right:1px solid var(--line);overflow-y:auto;z-index:90;padding:8px 0;transition:transform .18s var(--ease)} .sbnav{display:flex;flex-direction:column} .sb-head{display:flex;align-items:center;justify-content:flex-start;width:100%;background:none;border:0;padding:8px 12px;font-size:12px;font-weight:700;color:#2a3340;cursor:pointer;text-transform:uppercase;letter-spacing:.2px;text-align:left;border-radius:9px;transition:background var(--fast) var(--ease)} .sb-head:hover{background:#f3f6fb} .sb-arrow{transition:transform .15s;color:#9aa3af;font-size:11px;margin-left:auto} .sb-group:not(.open) .sb-arrow{transform:rotate(-90deg)} .sb-group:not(.open) .sb-sub{display:none} .sb-sub{display:flex;flex-direction:column;padding-bottom:4px} .sb-sub a{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 14px;font-size:12px;line-height:1.25;color:#46505e;border-radius:0 9px 9px 0;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)} .sb-subico{width:21px;height:21px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:#9aa8bf} .sb-subico svg{width:19px;height:19px;display:block} .sb-sub a:hover{background:var(--accent-soft);color:var(--blue);text-decoration:none} .sb-sub a:hover .sb-subico,.sb-sub a.active .sb-subico{color:var(--blue)} .sb-sub a.active{background:#e8f0fc;color:var(--blue);font-weight:600;border-left:3px solid var(--blue);padding-left:11px} main.with-sidebar{margin:48px 0 0 200px;max-width:none;padding:12px clamp(16px,2.4vw,44px) 20px} body.sb-hidden .sidebar{transform:translateX(-200px)} body.sb-hidden main.with-sidebar{margin-left:0} /* ===== Sidebar thu gọn còn ICON ===== */ .sb-ico{font-size:19px;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;color:var(--blue2)} .sb-ico svg{width:24px;height:24px;display:block} .sb-phanhanh .sb-ico{color:#fff} .sb-head:hover .sb-ico{color:var(--blue)} .sb-txt{margin-left:8px} .topbar .brand-logo{box-shadow:0 1px 2px rgba(0,0,0,.18)} body.sb-mini .sidebar{width:56px;overflow:visible} body.sb-mini main.with-sidebar{margin-left:56px} body.sb-mini .sb-txt,body.sb-mini .sb-arrow{display:none} body.sb-mini .sb-head{justify-content:center;padding:12px 0} body.sb-mini .sb-phanhanh{padding:10px 0;justify-content:center} body.sb-mini .sb-phanhanh .sb-ico{width:auto} body.sb-mini .sb-group{position:relative} body.sb-mini .sb-sub{display:none} body.sb-mini .sb-group:hover .sb-head{background:var(--accent-soft)} body.sb-mini .sb-group:hover .sb-sub{display:flex;position:absolute;left:56px;top:0;min-width:212px; background:var(--acrylic);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(199,212,232,.7);border-radius:0 14px 14px 0; box-shadow:var(--sh-3);padding:6px 0;z-index:120;animation:gpPop var(--fast) var(--ease)} body.sb-mini .sb-group:hover .sb-sub a{padding-left:16px} @media(max-width:1100px){ main.with-sidebar{margin-left:0} /* ≤1100px (đồng bộ với chỗ ẩn menu ngang): sidebar trượt ra khi body.sb-show; LUÔN full 200px */ .sidebar{transform:translateX(-200px);width:200px;z-index:95;box-shadow:2px 0 16px rgba(0,0,0,.25)} body.sb-show .sidebar{transform:none} body.sb-mini .sidebar{width:200px;overflow-y:auto} body.sb-mini main.with-sidebar{margin-left:0} body.sb-mini .sb-txt,body.sb-mini .sb-arrow{display:inline} body.sb-mini .sb-head{justify-content:flex-start;padding:8px 12px} /* Nền mờ phía sau sidebar khi mở (bấm ra ngoài để đóng) */ body.sb-show::before{content:'';position:fixed;inset:48px 0 0 0;background:rgba(10,22,44,.42);backdrop-filter:blur(3px);z-index:90} } main{max-width:2400px;margin:0 auto;padding:24px clamp(20px,3vw,56px)} /* QUY ƯỚC BỐ CỤC (toàn hệ thống): nút TRỞ VỀ + các lệnh nằm BÊN TRÁI, TIÊU ĐỀ phần hành nằm bên PHẢI. Cấu trúc HTML giữ nguyên (tiêu đề

đầu, nhóm lệnh
sau) — đảo hiển thị bằng row-reverse: nhóm lệnh dồn trái, tiêu đề dồn phải. Trong nhóm lệnh cũng đảo để nút "← Trở về" (đặt CUỐI theo quy ước) hiện ngoài cùng bên TRÁI. Áp cho mọi .page-head. */ .page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; flex-direction:row-reverse;gap:12px} .page-head>div{flex-direction:row-reverse} h1{font-size:21px;color:var(--blue);margin:8px 0;letter-spacing:-.2px;font-weight:700} /* Tiêu đề trang phần hành: icon thương hiệu cân với chữ */ h1.h1-ph{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .h1-ph .ph-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; border-radius:10px;background:linear-gradient(135deg,#1f6fe0,#0d47a1);color:#fff;box-shadow:0 3px 9px rgba(13,71,161,.28)} .h1-ph .ph-ico svg{width:19px;height:19px;display:block} h2{font-size:16px;margin:0 0 12px;letter-spacing:-.1px} h3{font-size:15px;margin:0 0 6px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 18px;margin-bottom:12px;box-shadow:var(--sh-1)} .card.narrow,.form.narrow{max-width:440px} .btn{display:inline-block;background:var(--blue2);color:#fff;padding:8px 14px;border-radius:9px;font-size:14px;font-weight:600; transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease)} .btn:hover{background:var(--blue);text-decoration:none;box-shadow:0 3px 12px rgba(13,71,161,.30)} .btn.ghost{background:#eef1f7;color:#2c3a52;border:1px solid transparent} .btn.ghost:hover{background:#e2e8f3;color:#16335c;box-shadow:none} button{background:var(--blue2);color:#fff;border:0;padding:9px 18px;border-radius:9px;font-size:14px;cursor:pointer;font-family:inherit;font-weight:600; transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease)} button:hover{background:var(--blue)} input,select,textarea{width:100%;padding:8px 10px;border:1px solid #ccd5e3;border-radius:9px;font-size:14px;font-family:inherit;background:#fff;color:var(--text); transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)} input:hover,select:hover,textarea:hover{border-color:#aebdd4} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-2);box-shadow:var(--ring)} input::placeholder,textarea::placeholder{color:#9aa7bc} label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px} table{width:100%;border-collapse:collapse;font-size:14px} /* CỠ CHỮ NỘI DUNG = 14px đồng nhất toàn hệ thống (như Hệ thống tài khoản), 2026-06-29. - body 14px: chữ thường/đoạn văn. Tiêu đề H1/H2/H3, KPI, badge GIỮ cỡ riêng (khai px riêng). - Ô bảng (td/th) + ô NHẬP trong bảng ép 14px (đè cỡ nhỏ khai ở cấp bảng/ô). - Badge/nhãn nhỏ (span) NẰM TRONG ô vẫn giữ cỡ của chúng: luật riêng của span con đè giá trị kế thừa. */ body{font-size:14px} table td, table th{font-size:14px !important} table td input, table td select, table td textarea{font-size:14px !important} th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)} th{background:#f3f6fb;color:#445;font-weight:600} /* Tiêu đề bảng CHUẨN mọi nơi (2026-06-29): nền xám-xanh #d2e3df, chữ #33415c, CANH GIỮA (kể cả cột số). Header có MÀU phân biệt nhóm cột (.h-blue/.h-grn/.h-red, tờ khai .doc .form-tk) tự đè nhờ specificity cao hơn. FLUENT 2026: màu GIỮ NGUYÊN theo yêu cầu user — chỉ tinh chỉnh chữ đậm hơn chút. */ thead th, thead th.r{background:#d2e3df;color:#33415c;text-align:center} td.r,th.r{text-align:right} /* Số liệu kế toán: chữ số đều cột (tabular) — đọc bảng tiền thẳng hàng như Excel */ td.r,th.r,td.num,th.num,.valcol,.kpi-v{font-variant-numeric:tabular-nums lining-nums} /* Danh sách ĐỒNG BỘ mọi nơi: kẻ sọc nhẹ + sáng dòng khi rê chuột (bỏ qua bảng key-value .kv). Thuần CSS nên KHÔNG ảnh hưởng tốc độ hiển thị. */ table:not(.kv) tbody tr:nth-child(even){background:#f7fafd} table:not(.kv) tbody tr:hover{background:#ecf3fe} .empty{color:var(--muted);text-align:center;padding:22px} .muted{color:var(--muted);font-size:13px} .err{background:#fdecea;color:#b3261e;padding:10px 12px;border-radius:10px;font-size:14px;border:1px solid #f5c9c4} .ok{background:#e6f4ea;color:#1e6b34;padding:10px 12px;border-radius:10px;font-size:14px;border:1px solid #c4e3cd} .search{display:flex;gap:8px;margin-bottom:14px;max-width:460px} .search input{flex:1} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px} .grid2 .full{grid-column:1 / -1} .actions{margin-top:16px;display:flex;gap:10px;align-items:center} .kv td:first-child{color:var(--muted);width:210px} .grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .card.stub{background:#fafbfc;border-style:dashed} .grid2 .sub{grid-column:1/-1;font-weight:600;color:var(--blue);font-size:13px;margin-top:12px;border-top:1px solid var(--line);padding-top:10px} /* Form tải tệp: loại + chọn tệp + nút TRÊN 1 HÀNG (xuống dòng khi màn hẹp). */ .upload{display:flex;flex-flow:row wrap;align-items:center;gap:10px;margin-bottom:14px} .upload select,.upload input[type=file]{width:auto} .upload>button[type=submit],.upload .actions{margin-top:0} .link-danger{background:none;color:#b3261e;border:0;padding:0 0 0 10px;cursor:pointer;font-size:14px;font-weight:400} .link-danger:hover{background:none;text-decoration:underline} .link-btn{background:none;color:var(--blue2);border:0;padding:0 0 0 8px;cursor:pointer;font-size:13px;font-weight:400} .link-btn:hover{background:none;text-decoration:underline} .pw{letter-spacing:1px} .kpis{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px} .kpi{flex:1;min-width:190px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px;box-shadow:var(--sh-1);position:relative;overflow:hidden} .kpi::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent-2),var(--blue));opacity:.85} .kpi-l{font-size:13px;color:var(--muted)} .kpi-v{font-size:22px;font-weight:800;color:var(--blue);margin:4px 0;letter-spacing:-.3px} .kpi-s{font-size:12px;color:#999} .up{color:#1e6b34;font-weight:600}.down{color:#b3261e;font-weight:600} .tbl-wrap{overflow-x:auto} tr.grp td{background:#eef2f7;font-weight:600;color:var(--blue)} td.lbl{text-align:left} /* ── Khối VĂN BẢN/TỜ KHAI (.doc): giữ dáng GIẤY pháp lý để in — không fluent hóa ── */ .doc{max-width:940px;margin:0 auto;background:#fff;border:1px solid #333;padding:26px 32px} .doc-head{text-align:center;position:relative;margin-bottom:12px} .doc-mau{position:absolute;right:0;top:0;text-align:right;font-size:12px} .doc-mau span{color:#666;font-size:11px} .doc-title{font-weight:700;font-size:17px;text-transform:uppercase;margin:0 96px;line-height:1.35} .doc-sub{font-size:13px;color:#444;margin-top:6px} .doc-info{width:100%;margin:14px 0;font-size:13px;border-collapse:collapse} .doc-info td{padding:4px 8px;vertical-align:top} .doc-info td:nth-child(odd){color:#555;width:118px} .doc-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px} .doc-table th,.doc-table td{border:1px solid #888;padding:6px 10px} .doc-table th{background:#f0f4fa;text-align:center} .doc-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* Bảng tờ khai dạng bố cục HTKK: mỗi cột tiền = ô MÃ (hẹp) + ô SỐ (rộng) */ .doc-table.form-tk th.stt,.doc-table.form-tk td.stt{text-align:center;width:38px;font-weight:600} .doc-table.form-tk th.moneycol{text-align:center} .doc-table.form-tk td.codecol,.doc-table.form-tk th.codecol{text-align:center;color:#555;font-size:12px;width:46px;white-space:nowrap;background:#fbfcfe} .doc-table.form-tk th.codecol,.doc-table.form-tk th.dvtcol{color:#445} .doc-table.form-tk td.dvtcol,.doc-table.form-tk th.dvtcol{text-align:center;color:#555;font-size:12px;width:64px;white-space:nowrap} .doc-table.form-tk.tncn td.valcol{background:#fbfcfe} .doc-table.form-tk td.valcol{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:96px} .doc-table.form-tk td.valcol .chk{display:block;text-align:center;font-size:15px} .doc-table.form-tk tr.sec td{background:#eef2f7;font-weight:700;color:var(--blue)} .doc-table.form-tk tr.b td{font-weight:700} .bctc-title{font-size:15px;color:var(--blue);margin:18px 0 6px;border-bottom:2px solid var(--blue);padding-bottom:3px} /* Kho tờ khai: thanh công cụ (lọc + kết xuất) */ .tax-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between; background:linear-gradient(#f8fafd,#eef3fb);border:1px solid var(--line);border-radius:var(--r-l);padding:10px 14px;margin-bottom:16px;box-shadow:var(--sh-1)} .tt-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pill-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-pill); padding:6px 14px;font-size:13px;font-weight:600;color:#445;text-decoration:none;transition:all var(--fast) var(--ease)} .pill-btn:hover{background:var(--accent-soft);text-decoration:none;border-color:#9bb4dc;color:var(--accent)} .pill-btn.pill-warn{border-color:#f0c987;background:#fff7ea;color:#8a5a00} .pill-btn.pill-warn b{background:#ef6c00;color:#fff;border-radius:10px;padding:0 7px;margin-left:2px;font-size:12px} .amber-tag{color:#c77700;font-weight:600;font-size:13px} .export-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:7px 12px} .export-label{font-weight:700;color:var(--blue);font-size:13px} .yr-chips{display:inline-flex;flex-wrap:wrap;gap:4px} .yr-chk{position:relative;cursor:pointer;line-height:1} .yr-chk input{position:absolute;opacity:0;width:0;height:0} .yr-chk span{display:inline-block;padding:4px 11px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:12.5px;background:#f5f7fa;color:#445;user-select:none;transition:all var(--fast) var(--ease)} .yr-chk:hover span{border-color:var(--accent-2)} .yr-chk input:checked + span{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600;box-shadow:0 2px 8px rgba(13,71,161,.28)} .fmt-sel{font-size:13px;padding:5px 8px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;flex:none;width:auto;max-width:200px} .btn-go{background:var(--blue);color:#fff;border:0;border-radius:9px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer} .btn-go:hover{background:var(--blue2)} .year-tools{display:flex;gap:10px;margin-bottom:10px} .year-head{cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;margin:0} .year-head:hover{color:var(--blue2)} .year-arrow{display:inline-block;width:16px;color:var(--blue2);font-size:12px} .year-body{margin-top:12px} .year-body.collapsed{display:none} /* Tab năm + panel */ .year-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;border-bottom:2px solid var(--line);padding-bottom:8px} .ytab{background:#eef2f7;border:1px solid var(--line-strong);border-radius:9px 9px 0 0;padding:7px 16px;cursor:pointer;font-size:14px;font-weight:600;color:#445;transition:all var(--fast) var(--ease)} .ytab:hover{background:#e2e9f3} .ytab.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 3px 10px rgba(13,71,161,.25)} .year-panel{display:none} .year-panel.show{display:block} /* Ma trận tổng quan sắc thuế × năm */ .ov-matrix{font-size:13px;border-collapse:collapse} .ov-matrix th,.ov-matrix td{border:1px solid var(--line);padding:6px 12px;text-align:center} .ov-matrix thead th{background:#eef3fb;color:#334} .ov-matrix thead th a{color:var(--blue2);font-weight:700} .ov-matrix td.ind-col{text-align:left;font-weight:600;white-space:nowrap;background:#fbfcfe} .ov-matrix td.num{font-variant-numeric:tabular-nums} .ov-cell{display:inline-block;min-width:22px;font-weight:600} .ov-cell.has-pending{color:#c77700} .dot-warn{color:#ef6c00;font-size:11px;vertical-align:middle} .ov-sub{font-weight:700;color:var(--blue);margin:16px 0 6px;border-top:1px solid var(--line);padding-top:12px} .pivot-wrap{margin:6px 0 14px} .pivot-cap{font-size:12px;color:var(--muted);margin-bottom:4px} .pivot-box{margin:6px 0 12px} .pivot-toggle{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#f3f6fb;border:1px solid var(--line);border-radius:9px;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:600;color:#334;transition:background var(--fast) var(--ease)} .pivot-toggle:hover{background:#e9f0fa} .pivot-arrow{color:var(--blue2);font-size:11px;width:14px} .pivot-body{margin-top:8px} .pivot-body.collapsed{display:none} /* So sánh các lần kê khai */ .rev-link{font-size:11.5px;white-space:nowrap} .rev-tbl thead th{vertical-align:bottom} .rev-tag{font-size:11px;color:#666;font-weight:600} .rev-tbl .rev-chg{background:#fff6d6} .rev-tbl td.rev-final,.rev-tbl th.rev-final{background:#e8f1fb} .rev-tbl td.rev-final.rev-chg{background:#fdeeb0} .rev-tbl th.rev-final{background:#d6e6f7} .rev-tbl th.rev-final .rev-tag{color:var(--blue)} .rev-chg{display:inline-block;background:#fff6d6;padding:0 5px;border-radius:4px} .pivot-tbl{font-size:13px;border-collapse:collapse} .pivot-tbl th,.pivot-tbl td{border:1px solid var(--line);padding:5px 9px} .pivot-tbl thead th{background:#eef3fb;color:#334;text-align:center;font-weight:600} .pivot-tbl th.num,.pivot-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:96px} .pivot-tbl th.codecol,.pivot-tbl td.codecol{text-align:center;color:#556;width:48px;white-space:nowrap;background:#fbfcfe} .pivot-tbl th.ind-col,.pivot-tbl td.ind-col{text-align:left;min-width:220px;max-width:420px} .pivot-tbl tbody tr:hover td{background:#f3f7fd} .ly-do{font-size:12px;color:#8a6d00;margin-top:3px} .lydo-link{font-size:12px} .lydo-form{display:none;margin-top:5px;gap:5px} .lydo-form.show{display:flex} .lydo-form input{font-size:13px;padding:3px 6px;min-width:230px} .lydo-form button{font-size:12px;padding:3px 10px} .doc-table.form-tk.bctc td.valcol{min-width:120px} .doc-note{font-size:13px;margin-top:10px} .doc-sign{display:flex;justify-content:space-between;margin-top:24px;font-size:13px;text-align:center} .doc-sign>div{width:48%}.doc-sign .b{font-weight:700;margin:6px 0 2px} .doc-sign .sign-name{margin-top:42px;font-weight:700} @media print{ .nav,.no-print,.actions,.link-danger{display:none !important} main{max-width:none;padding:0} .card{box-shadow:none;border:0;margin:0} body{background:#fff} body::before{display:none} } /* Tabs DỮ LIỆU dùng chung (kho tờ khai, tab sổ, phiếu…) — 2026-07-05 QUY ƯỚC MÀU TAB: xanh dương #1f5fbf = tab PHẦN HÀNH (.ws-tabs); TEAL #0b6b5e = tab DỮ LIỆU trong phần hành. Cỡ CỐ ĐỊNH 12.5px mọi nơi (không co theo màn/loại — tránh chữ nhảy to nhỏ). MÀU GIỮ NGUYÊN. */ .tabs{display:flex;gap:6px;flex-wrap:wrap;background:#e7f3f0;border:1px solid #cbe2db; border-radius:var(--r-l);padding:8px 10px;margin-bottom:14px} .tab-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#2e5248; border:1px solid #c8ded7;border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:600; cursor:pointer;white-space:nowrap;text-decoration:none;transition:all var(--fast) var(--ease)} .tab-btn:hover{border-color:#6fb3a4;color:#0b6b5e;background:#fff;box-shadow:0 2px 8px rgba(11,107,94,.14)} .tab-btn.active{background:#0b6b5e;color:#fff;border-color:#0b6b5e;box-shadow:0 2px 10px rgba(11,107,94,.35)} .tabpanel{display:none} .tabpanel.show{display:block} /* Danh sách tờ khai theo năm / sắc thuế / kỳ (gộp các lần nộp) */ .warn-banner{background:#fff4e5;border:1px solid #f0c987;color:#8a5a00;padding:11px 14px;border-radius:var(--r-m);margin-bottom:14px;font-size:14px} .sac-block{margin-top:16px} .sac-block:first-of-type{margin-top:6px} .sac-head{font-weight:700;color:var(--blue);font-size:14px;background:#eef4fb;border-left:3px solid var(--blue2);padding:7px 12px;border-radius:8px;margin-bottom:6px} .tax-tbl td{vertical-align:top} .tax-tbl td.ky-cell{font-weight:600;background:#fafbfd;white-space:nowrap} .badge{display:inline-block;background:var(--blue2);color:#fff;font-size:11px;font-weight:600;padding:1px 8px;border-radius:var(--r-pill);margin-left:6px} .badge.ok{background:#2e7d32;color:#fff;margin-left:0} .badge.warn{background:#ef6c00;color:#fff;margin-left:0} .badge.err{background:#c62828;color:#fff;margin-left:0;padding:1px 8px;font-size:11px} .tag{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:var(--r-pill);margin-left:6px} .tag-c{background:#e6f4ea;color:#1e6b34} .tag-bs{background:#fdeecf;color:#9a6a00} .warn{color:#b3261e;font-weight:600} .warn-amber{color:#c77700;font-weight:600} tr.row-pending td{background:#fff8f4} tr.row-pending td.ky-cell{background:#fdf0e8} .row-act{display:flex;gap:14px;align-items:center;justify-content:flex-end;white-space:nowrap} .row-act form{display:inline} /* ── ĐĂNG NHẬP: màn chào Fluent — thẻ acrylic nổi trên nền mica ── */ .login-wrap{display:flex;justify-content:center;align-items:flex-start;padding-top:10vh;min-height:82vh} .login{max-width:380px;width:100%;background:var(--acrylic-strong); backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5); border:1px solid rgba(255,255,255,.85);border-radius:20px;box-shadow:var(--sh-3); padding:26px 28px 28px;animation:gpRise .34s var(--ease)} .login h1{text-align:center;font-size:22px;margin:2px 0 14px} .login label{margin-top:12px} .login input{padding:11px 13px;border-radius:11px;font-size:14.5px} .login button{width:100%;margin-top:18px;padding:12px 18px;border-radius:11px;font-size:15px;font-weight:700; background:linear-gradient(135deg,var(--accent-2),var(--blue));box-shadow:0 6px 18px rgba(21,101,192,.35)} .login button:hover{filter:brightness(1.07);background:linear-gradient(135deg,var(--accent-2),var(--blue))} .login-logo{display:block;width:78px;height:78px;margin:4px auto 12px;border-radius:20px;box-shadow:0 8px 24px rgba(13,71,161,.30)} /* ── MENU NGANG kiểu cổng thuế trên topbar (2026-07-03, user muốn giao diện như thuedientu) ── */ .tb-menu{display:flex;align-items:center;gap:2px;flex:1;min-width:0;margin:0 14px;overflow:hidden} .tb-menu a{color:#eaf2fe;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.2px; padding:7px 12px;border-radius:9px;white-space:nowrap;text-decoration:none;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)} .tb-menu a:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none} .tb-menu a.on{background:rgba(5,29,66,.62);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} /* Co dần cho 8 mục + avatar KHÔNG chạm/chồng nhau khi kéo hẹp; dưới 1100px chuyển hamburger (đồng bộ với breakpoint sidebar off-canvas bên dưới) — item 8, 2026-07-05. */ @media (max-width:1400px){.tb-menu{margin:0 10px}.tb-menu a{padding:7px 9px;font-size:11.8px}} @media (max-width:1260px){.tb-menu{gap:1px}.tb-menu a{padding:6px 7px;font-size:11.3px;letter-spacing:0} .tb-mi:has(.tb-dd)>a::after{margin-left:3px}} @media (max-width:1160px){.tb-menu{margin:0 6px}.tb-menu a{padding:6px 6px;font-size:11px} .tb-mi:has(.tb-dd)>a::after{content:'';margin:0}} @media (max-width:1100px){.tb-menu{display:none}} /* ════ KHUNG FORM CÔNG CỤ DÙNG CHUNG (2026-07-04): tải HĐ / tra cứu MST-NCC-BHXH / tờ khai… — tiêu đề canh khung, ô gọn, mục đánh số, nút/chip nổi bật. Dùng class .hdf trên thẻ form. ════ */ .hd-head{max-width:1180px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px} .hd-head h1{margin:0;font-size:22px;color:#13315c} .hd-head-btns{display:flex;gap:8px;flex-wrap:wrap} .hdf{max-width:920px} .hdf.hdf-modern{max-width:1180px;padding:16px;border:1px solid #d9e5f2;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 14px 34px rgba(31,56,88,.08)} .hdf-modern .hdf-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:12px} .hdf-modern .hdf-panel{border:1px solid #dbe6f3;border-radius:8px;background:#fff;padding:13px;box-shadow:0 8px 20px rgba(31,56,88,.06)} .hdf-modern .hdf-panel.full{grid-column:1/-1} .hdf-modern .hdf-panel .sec{margin:0 0 10px;padding:0;border:0;letter-spacing:0;color:#52627a} .hdf-modern .hdf-account{background:#fffdf8} .hdf-modern .hdf-period{background:#f9fcff} .hdf-modern .hdf-save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:end} .hdf-modern .hdf-save .sec,.hdf-modern .hdf-save .save-row,.hdf-modern .hdf-save .save-hint{grid-column:1/2} .hdf-modern .hdf-save .actions{grid-column:2/3;grid-row:2/4;margin:0;align-self:center} .hdf-modern .seg{width:100%} .hdf-modern .seg-b{flex:1 1 180px;text-align:center} .hdf-modern .chips{gap:8px;margin-top:10px} .hdf-modern .chip span{width:100%;justify-content:center;box-sizing:border-box} .hdf-modern .pw-row{gap:10px;margin-top:8px} .hdf-modern .pw-field{flex:1 1 280px} .hdf-modern .save-row{margin:0} @media(max-width:820px){ .hdf-modern .hdf-grid{grid-template-columns:1fr} .hdf-modern .hdf-save{display:block} .hdf-modern .hdf-save .actions{margin-top:12px} } .hdf .sec{font-size:12.5px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.4px;margin:18px 0 9px;padding-bottom:5px;border-bottom:1px solid #e6ebf3} .hdf .sec:first-child{margin-top:2px} .hdf .lb{display:block;font-size:12.5px;font-weight:600;color:#4a5568;margin:0 0 3px} .hdf .lb .muted{font-weight:400} .hdf .sm{font-size:11.5px;margin:3px 0 0;color:#8a93a0} .hdf input[type=text],.hdf input[type=password],.hdf input[type=number],.hdf input[type=date],.hdf input:not([type]),.hdf select,.hdf textarea{ padding:7px 10px;font-size:13.5px;border:1px solid #ccd5e3;border-radius:9px;background:#fff;box-sizing:border-box} .hdf .acc-inp{width:100%;font-size:14px;background:#fffdf4} .hdf .pw-row{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-top:10px} .hdf .pw-field{flex:0 1 360px;min-width:230px} .hdf .pw-inp{display:flex;gap:6px} .hdf .pw-inp input{flex:1;min-width:0} .hdf .ket-ck{display:flex;gap:7px;align-items:center;font-size:13.5px;color:#333;white-space:nowrap;padding-bottom:7px;cursor:pointer} .hdf .ket-ck input{width:auto} /* Segmented (chọn 1 trong ít) — kiểu iOS: khay lõm, nút chọn nổi trắng/xanh */ .hdf .seg{display:inline-flex;border:1px solid #ccd6e4;border-radius:12px;overflow:hidden;background:#eef2f8;flex-wrap:wrap;padding:3px;gap:3px} .hdf .seg-b{position:relative;margin:0} .hdf .seg-b input{position:absolute;opacity:0;pointer-events:none} .hdf .seg-b span{display:block;padding:8px 20px;font-size:14px;font-weight:700;color:#5a6b86;cursor:pointer;transition:all var(--fast) var(--ease);border-radius:9px} .hdf .seg-b + .seg-b span{border-left:0} .hdf .seg-b.on span{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(13,71,161,.30)} /* Chip (bật/tắt tùy chọn) */ .hdf .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .hdf .chip{margin:0} .hdf .chip input{position:absolute;opacity:0;pointer-events:none} .hdf .chip span{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1.5px solid #d3dae5;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:#5a6b86;cursor:pointer;background:#fff;transition:all var(--fast) var(--ease)} .hdf .chip span em{font-style:normal;font-weight:400;color:#9aa7bd} .hdf .chip.on span{border-color:#1f9e4f;background:#effaf1;color:#1e7a34;box-shadow:0 2px 8px rgba(31,158,79,.16)} .hdf .chip.on span em{color:#5bab77} /* Danh sách lựa chọn dạng THẺ (radio nhiều dòng, vd nguồn tra cứu) */ .hdf .opt-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 0} .hdf .opt{display:flex;gap:9px;align-items:flex-start;padding:10px 13px;border:1.5px solid #d9e0ea;border-radius:12px;cursor:pointer;background:#fff;transition:all var(--fast) var(--ease);font-weight:400;width:auto} .hdf .opt input{width:auto;margin-top:2px} .hdf .opt:hover{border-color:#b9c8de;background:#fafcff;box-shadow:var(--sh-1)} .hdf .opt.on{border-color:var(--accent);background:#eef4fd;box-shadow:0 0 0 1px var(--accent) inset} .hdf .opt b{color:#13315c} .hdf .ky-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .hdf .ky-grid select,.hdf .ky-grid input{width:100%} @media(max-width:640px){.hdf .ky-grid{grid-template-columns:1fr}} .hdf .save-row{display:flex;gap:8px} .hdf .save-row input{flex:1} .hdf .save-hint.warn{color:#c2410c;font-weight:600} .hdf textarea{width:100%} .hdf .actions{margin-top:18px} .hdf .btn-scan{font-size:15px;font-weight:700;padding:11px 28px;background:linear-gradient(135deg,var(--accent-2),var(--blue));color:#fff;border:none;border-radius:11px;cursor:pointer;box-shadow:0 5px 16px rgba(21,101,192,.32);transition:all var(--fast) var(--ease)} .hdf .btn-scan:hover{filter:brightness(1.07);background:linear-gradient(135deg,var(--accent-2),var(--blue))} /* Combo tìm tài khoản (gõ tên/MST xổ danh sách) */ .combo{position:relative} .combo-list{position:absolute;z-index:30;left:0;right:0;background:var(--acrylic);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5); border:1px solid rgba(199,212,232,.7);border-radius:12px;margin-top:4px;max-height:280px;overflow:auto;box-shadow:var(--sh-2);animation:gpPop var(--fast) var(--ease)} .combo-item{padding:8px 11px;cursor:pointer;font-size:14px;border-bottom:1px solid #f0f2f5} .combo-item:last-child{border-bottom:0} .combo-item:hover,.combo-item.hl{background:var(--accent-soft)} .combo-item .mst{color:#6b7280;font-size:12px} .combo-empty{padding:10px;color:#6b7280;font-size:13px} /* ── BỘ KHUNG PORTAL KIỂU CỔNG THUẾ (2026-07-03): thẻ trắng + hàng tab xanh + ô icon pastel. Dùng chung: /trang-chu, khu Công cụ, các trang chọn (/phan-hanh, /ho, /hrm). ── */ .pt-sec{display:flex;align-items:center;gap:10px;color:var(--blue);font-size:24px;font-weight:800; text-transform:uppercase;letter-spacing:.3px;margin:6px 0 12px} .pt-sec-ic{font-size:26px} .pt-dang{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px;font-size:13px;color:#44557a} .pt-dang-lb{font-weight:700;color:#8a99b5;text-transform:uppercase;font-size:11.5px;letter-spacing:.3px} .pt-dang a{display:inline-block;background:#eaf2fe;border:1px solid #cfe0f8;border-radius:var(--r-pill); padding:3px 12px;font-weight:600;color:#1f5fbf;text-decoration:none;margin:2px 4px 2px 0;transition:all var(--fast) var(--ease)} .pt-dang a:hover{background:#dcebfd;box-shadow:0 2px 6px rgba(31,95,191,.15)} .pt-card{background:var(--surface);border:1px solid #cfd9ea;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)} .pt-tabs{display:flex;align-items:flex-end;gap:2px;background:linear-gradient(180deg,var(--blue2),var(--blue)); padding:8px 10px 0;overflow-x:auto;scrollbar-width:thin} .pt-tab{flex:0 0 auto;border:none;background:transparent;color:#eaf2fe;cursor:pointer; font-size:15px;font-weight:700;padding:10px 20px 11px;border-radius:12px 12px 0 0;line-height:1.2;text-decoration:none;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)} .pt-tab:hover:not(.on){background:rgba(255,255,255,.14);color:#fff} .pt-tab.on{background:#fff;color:var(--blue)} span.pt-tab{cursor:default} .pt-body{padding:16px 20px 20px} .pt-pane{display:none;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:8px 14px;padding:18px 20px 22px} .pt-pane.on{display:grid} .pt-tile{display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:14px; text-decoration:none;color:inherit;transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease)} .pt-tile:hover{background:#f0f6ff;box-shadow:var(--sh-1);transform:translateY(-1px)} .pt-ic{flex:0 0 52px;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center; font-size:28px;background:#eef4fd;box-shadow:inset 0 0 0 1px rgba(31,95,191,.08)} .pt-tile:nth-child(5n+2) .pt-ic{background:#eafaf0} .pt-tile:nth-child(5n+3) .pt-ic{background:#fef4e6} .pt-tile:nth-child(5n+4) .pt-ic{background:#fdeef0} .pt-tile:nth-child(5n) .pt-ic{background:#f3effd} .pt-nm{font-size:15px;font-weight:700;color:#16335c;line-height:1.35} .pt-tile:hover .pt-nm{color:var(--blue)} @media (max-width:640px){.pt-pane{grid-template-columns:1fr}} /* ── NGOÀI KHÁCH = KHÔNG SIDEBAR (2026-07-03, user chốt): trang chọn/portal toàn màn hình như trang thuế; vào TRONG 1 khách (/clients/{id}/...) sidebar 5 bước mới hiện. Toggle ở base.html. ── */ body.no-sb .sidebar{display:none} body.no-sb main.with-sidebar{margin-left:0} body.no-sb .tb-burger{display:none} /* ≤1100px: menu ngang đã ẩn nên NGOÀI KHÁCH vẫn giữ nút ☰ + sidebar trượt ra (sidebar mobile mặc định ẩn bằng transform, .sb-show mới trượt vào) — kẻo không còn menu nào. */ @media (max-width:1100px){ body.no-sb .tb-burger{display:inline-flex} body.no-sb .sidebar{display:block} } /* ── MENU NGANG: rê chuột xổ DROPDOWN tính năng của phần hành (2026-07-03) ── */ .tb-menu{overflow:visible} .tb-mi{position:relative;display:flex;align-items:center;height:48px} .tb-mi:has(.tb-dd)>a::after{content:'▾';font-size:8px;margin-left:5px;opacity:.75;vertical-align:1px} .tb-dd{display:none;position:absolute;top:100%;left:0;min-width:245px; background:var(--acrylic);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6); border:1px solid rgba(199,212,232,.7);border-radius:14px;box-shadow:var(--sh-3);padding:6px 0;z-index:300; animation:gpPop var(--fast) var(--ease)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .tb-dd,.mainnav .navmenu,.topbar .tb-umenu,.combo-list,.gp-dock,.hv-pop{background:#fff} } .tb-mi:hover>.tb-dd{display:block} .tb-dd a{display:flex;align-items:center;gap:9px;padding:8px 16px;font-size:13px;font-weight:600; color:#23324a;text-transform:none;letter-spacing:0;border-radius:0;white-space:nowrap} .tb-dd a:hover{background:var(--accent-soft);color:#1f5fbf} /* ── NÚT "↩ VỀ CHỖ ĐANG LÀM" — màu CAM nổi bật trên thanh Đang làm (2026-07-03) ── */ .gt-back{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(90deg,#f59e0b,#f97316); color:#fff !important;font-weight:700;font-size:12.5px;padding:5px 13px;border-radius:9px;text-decoration:none; white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px rgba(249,115,22,.38); transition:filter var(--fast) var(--ease),box-shadow var(--fast) var(--ease)} .gt-back:hover{filter:brightness(1.08);text-decoration:none;box-shadow:0 4px 12px rgba(249,115,22,.45)} /* chỗ đang làm THỨ 2-3 (gần nhất trước đó): nút trắng viền cam, nhẹ hơn nút chính (2026-07-03) */ .gt-back.gt-back2{background:#fff;color:#c2540a !important;border:1px solid #f7b26b;box-shadow:none; font-weight:600;max-width:230px} .gt-back.gt-back2:hover{background:#fff7ed;filter:none} /* ── DROPDOWN menu ngang PHÓNG TO kiểu ô icon (2026-07-03, user: list nhỏ phải căng mắt): mục to như tile ngoài màn hình — ô emoji pastel 38px + nhãn 14px đậm; Công cụ 2 cột ── */ .tb-mi:hover>.tb-dd{display:grid} .tb-dd{grid-template-columns:1fr;min-width:295px;padding:8px;gap:2px} .tb-dd.tb-dd-2col{grid-template-columns:1fr 1fr;min-width:600px} .tb-dd.tb-dd-tools{position:fixed;top:48px;left:50%;transform:translateX(-50%); grid-template-columns:minmax(280px,1.25fr) minmax(220px,1fr) minmax(220px,1fr); width:min(880px,calc(100vw - 24px));min-width:0;padding:10px;gap:10px;align-items:start} .tb-dd-tools .dd-toolgrp{min-width:0;padding:6px;border:1px solid #e4eaf3;border-radius:12px;background:#fbfcff} .tb-dd-tools .dd-toolhead{display:flex;align-items:center;gap:7px;padding:3px 7px 7px;margin-bottom:2px; border-bottom:1px solid #e8edf5;color:#52647f;font-size:10.5px;font-weight:800;letter-spacing:.45px; text-transform:uppercase;white-space:nowrap} .tb-dd-tools .dd-toolhead span{font-size:14px} .tb-dd-tools a{gap:9px;padding:6px 8px;font-size:12.5px;border-radius:9px;white-space:normal;line-height:1.25} .tb-dd-tools .dd-ic{flex-basis:32px;width:32px;height:32px;border-radius:9px;font-size:17px} .tb-dd-tools .dd-tool-data .dd-ic{background:#edf4ff} .tb-dd-tools .dd-tool-tax .dd-ic{background:#fff3e4} .tb-dd-tools .dd-tool-lookup .dd-ic{background:#eaf8f1} .tb-mi:focus-within>.tb-dd-tools{display:grid} .tb-dd a{gap:12px;padding:8px 12px;font-size:14px;font-weight:700;color:#16335c;border-radius:11px;transition:background var(--fast) var(--ease)} .tb-dd a:hover{background:#f0f6ff;color:#1f5fbf} .dd-ic{flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:#eef4fd;display:inline-flex; align-items:center;justify-content:center;font-size:20px;box-shadow:inset 0 0 0 1px rgba(31,95,191,.08)} .tb-dd a:nth-child(5n+2) .dd-ic{background:#eafaf0} .tb-dd a:nth-child(5n+3) .dd-ic{background:#fef4e6} .tb-dd a:nth-child(5n+4) .dd-ic{background:#fdeef0} .tb-dd a:nth-child(5n) .dd-ic{background:#f3effd} /* Danh sách CÔNG TY xổ thẳng trong dropdown "Doanh nghiệp" (chọn vào làm ngay) — 2026-07-05 */ .tb-dd .dd-colwrap{grid-column:1/-1;margin-top:5px;border-top:1px solid #e6edf7;padding-top:6px} .tb-dd .dd-cosearch{width:100%;box-sizing:border-box;border:1px solid #cfd9ea;border-radius:9px; padding:6px 10px;font-size:13px;font-weight:600;color:#16335c;margin-bottom:4px;background:rgba(255,255,255,.8)} .tb-dd .dd-cosearch:focus{outline:none;border-color:#1f5fbf;box-shadow:var(--ring)} .tb-dd .dd-colist{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:1px} .tb-dd a.dd-co{gap:8px;padding:6px 10px;font-size:13px;font-weight:600;color:#23324a;border-radius:9px} .tb-dd a.dd-co:hover{background:var(--accent-soft);color:#1f5fbf} .dd-co-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dd-co-m{font-size:11px;color:#8595ab;font-weight:500} .dd-comsg{padding:8px 10px;font-size:12.5px;color:#8595ab} /* ── Danh sách CÔNG TY: menu con xổ SANG PHẢI — 2026-07-06 ── Mặc định ẨN. Chỉ hiện khi rê chuột vào "Chọn khách làm sổ" hoặc "Danh sách khách hàng" (2 mục đầu), ghim vào cột phải trải hết chiều cao, danh sách tự cuộn. Giữ mở khi con trỏ ở trong panel; ngoài ra dropdown vẫn gọn 1 cột. */ .tb-dd .dd-colwrap{display:none;position:absolute;top:8px;right:8px;bottom:8px;width:300px; margin:0;border-top:none;border-left:1px solid #e6edf7;padding:0 0 0 12px; flex-direction:column;grid-column:auto} .tb-dd .dd-colist{flex:1;min-height:0;max-height:none} .tb-dd:has(.dd-colwrap)>a:nth-child(-n+2):hover~.dd-colwrap, .tb-dd .dd-colwrap:hover{display:flex} .tb-dd:has(.dd-colwrap):has(>a:nth-child(-n+2):hover), .tb-dd:has(.dd-colwrap:hover){min-width:610px;padding-right:308px} /* 2026-07-11 — Fluent toolbar menus: một hệ panel gọn cho toàn bộ menu trên topbar. */ .tb-mi>.tb-dd{ --dd-accent:#2167c7;min-width:278px;padding:7px;gap:1px;border:1px solid rgba(112,142,178,.28); border-radius:17px;background:rgba(250,252,255,.96);box-shadow:0 20px 55px rgba(17,44,79,.2),inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35) } .tb-mi:nth-last-child(1)>.tb-dd,.tb-mi:nth-last-child(2)>.tb-dd{left:auto;right:0} .tb-mi>.tb-dd::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,var(--dd-accent),#0a8c7c);opacity:.85;pointer-events:none} .tb-mi>.tb-dd,.tb-mi>.tb-dd>a,.tb-mi>.tb-dd button{pointer-events:auto} .tb-mi>.tb-dd>a{position:relative;min-height:42px;gap:10px;padding:5px 8px;border:1px solid transparent;border-radius:11px;color:#19375f;font-size:13px;font-weight:700;line-height:1.25;white-space:normal} .tb-mi>.tb-dd>a:hover,.tb-mi>.tb-dd>a:focus-visible{transform:translateX(2px);border-color:rgba(63,119,185,.16);background:linear-gradient(100deg,rgba(234,243,255,.95),rgba(239,250,247,.82));color:#1659ab;outline:0;box-shadow:0 5px 14px rgba(34,72,116,.07)} .tb-mi>.tb-dd>a .dd-ic{flex:0 0 32px;width:32px;height:32px;border-radius:9px;font-size:17px;box-shadow:inset 0 0 0 1px rgba(45,99,163,.08)} .tb-mi>.tb-dd .dd-ph{margin:4px 6px 1px;padding:7px 5px 4px;border-top:1px solid rgba(112,142,178,.15);color:#708198;font-size:9.5px;letter-spacing:.55px} .tb-mi>.tb-dd .dd-ph:first-of-type{margin-top:1px} .tb-mi>.tb-dd .dd-cosearch{height:36px;border-color:rgba(90,129,177,.24);border-radius:10px;background:#fff} .tb-mi>.tb-dd.tb-dd-tools{--dd-accent:#08766a;padding:7px;gap:7px;border-radius:17px;background:rgba(248,252,253,.97)} .tb-dd-tools .dd-toolgrp{padding:4px;border-color:rgba(83,133,157,.16);border-radius:12px;background:rgba(255,255,255,.72)} .tb-dd-tools .dd-toolhead{padding:3px 6px 5px;margin-bottom:0;border-bottom-color:rgba(112,142,178,.14);color:#5b6f88;font-size:10px} .tb-dd-tools a{min-height:35px!important;gap:8px!important;padding:2px 6px!important;font-size:14.5px!important;line-height:1.2!important} .tb-dd-tools .dd-ic{flex-basis:27px!important;width:27px!important;height:27px!important;border-radius:8px!important;font-size:15px!important} .tb-mi:hover>a,.tb-mi:focus-within>a{background:rgba(255,255,255,.16);color:#fff} @media(max-height:720px){.tb-mi>.tb-dd:not(.tb-dd-tools){max-height:calc(100vh - 58px);overflow-y:auto}.tb-mi>.tb-dd>a{min-height:38px}.tb-mi>.tb-dd>a .dd-ic{width:29px;height:29px;flex-basis:29px}} /* ══════════ LƯỚI HV (kiểu Huvisoft, user 2026-07-06) — opt-in bằng class "hv" trên ══════════ Giữ NGUYÊN màu tiêu đề sẵn có của từng bảng (d2e3df/eef3fb...) — chỉ đổi: hàng lọc trắng với ô bo tròn + phễu, dòng kẻ mảnh, hàng thoáng hơn, hover nhấn nhẹ. Không đụng sticky/kéo cột/Ctrl+D. */ table.hv{font-size:13.5px} table.hv thead tr:first-child th{padding:10px 10px;letter-spacing:.1px} table.hv td{padding:8px 10px;border-bottom:1px solid #eef1f6;color:#3b4256} table.hv tbody tr:nth-child(even){background:#fafbfd} table.hv tbody tr:hover{background:#f0f5ff} /* Hàng lọc kiểu Huvisoft (user 2026-07-06, đợt 2): MẶC ĐỊNH chỉ hiện PHỄU dưới mỗi cột; bấm phễu mới xổ hộp lọc của cột đó. Cột TIỀN: lọc so sánh kiểu Excel (= > ≥ < ≤ + nhập số). */ table.hv tr.ld-fltrow th{background:#fff !important;padding:3px 4px 6px;border-bottom:1px solid var(--line);text-align:center} table.hv tr.ld-fltrow input{display:none} /* ô lọc gốc GIẤU đi — giữ trong DOM làm kho trạng thái cho máy lọc chữ sẵn có */ .hv-fbtn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px; border:0;background:transparent;border-radius:7px;color:#b6c1d4;cursor:pointer;padding:0;position:relative; transition:background var(--fast) var(--ease),color var(--fast) var(--ease)} .hv-fbtn:hover{background:var(--accent-soft);color:#1f5fbf} .hv-fbtn.on{color:#1f5fbf} .hv-fbtn.on::after{content:'';position:absolute;top:1px;right:1px;width:6px;height:6px;border-radius:50%;background:#1f5fbf} .hv-fbtn svg{width:14px;height:14px} /* Hộp lọc nổi của 1 cột */ .hv-pop{position:fixed;z-index:10000;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none; border:1px solid rgba(199,212,232,.7);border-radius:14px; box-shadow:var(--sh-3);padding:10px;display:flex;flex-direction:column;gap:8px; min-width:280px;width:min(520px,calc(100vw - 24px));max-width:none;animation:gpPop var(--fast) var(--ease); color:#14243d;-webkit-text-fill-color:#14243d;text-shadow:none;mix-blend-mode:normal;isolation:isolate} .hv-pop *{font-family:inherit;text-shadow:none;mix-blend-mode:normal;-webkit-text-fill-color:currentColor} .hv-pop .row{display:flex;gap:8px;align-items:center} .hv-pop select.hv-op{border:1px solid #dde3ee;border-radius:10px;background:#f5f6f8;padding:7px 8px; font-size:14px;font-weight:600;color:#3b4256;width:64px;-webkit-text-fill-color:#3b4256} .hv-pop input{flex:1;min-width:0;border:1px solid #dde3ee;border-radius:10px;padding:7px 11px; font-size:13px;color:#3b4256;background:#fff;-webkit-text-fill-color:#3b4256} .hv-pop input:focus{outline:none;border-color:#9bb4dc;box-shadow:0 0 0 2px rgba(31,95,191,.10)} .hv-pop input::placeholder{color:#a7b2c5;-webkit-text-fill-color:#a7b2c5} .hv-count{font-size:11.5px;font-weight:700;color:#6b7b91;-webkit-text-fill-color:#6b7b91;line-height:1.25} .hv-vals{max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;border-top:1px solid #f0f2f7;padding-top:6px} .hv-vals .hv-val{display:block;width:100%;min-height:28px;border:0;padding:6px 9px;border-radius:8px;font-size:13px;line-height:1.35; font-family:inherit!important;font-weight:700;color:#111827!important;background:#fff;cursor:pointer; white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;text-decoration:none;text-align:left;-webkit-text-fill-color:#111827!important; opacity:1!important;filter:none!important;text-shadow:none!important;mix-blend-mode:normal!important} .hv-vals .hv-val:hover{background:#f0f5ff;color:#1f5fbf!important;-webkit-text-fill-color:#1f5fbf!important} .hv-clear{font-size:12px;color:#8595ab;cursor:pointer;padding:2px 4px;border-radius:7px;align-self:flex-start;text-decoration:none;-webkit-text-fill-color:#8595ab} .hv-clear:hover{color:#c62828;background:#fdeef0;-webkit-text-fill-color:#c62828} /* ══════════ NGĂN BÊN PHẢI thu gọn (gp-dock) — màn hình tối giản, tính năng gom về 1 mép ══════════ */ .gp-dock{position:fixed;top:48px;right:0;bottom:0;width:252px;z-index:60; background:var(--acrylic-strong);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5); border-left:1px solid rgba(210,220,236,.8);box-shadow:-10px 0 28px rgba(16,38,80,.12); transform:translateX(100%);transition:transform .2s var(--ease);display:flex;flex-direction:column} body.gp-dock-open .gp-dock{transform:translateX(0)} .gp-dock-handle{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:61; display:flex;align-items:center;gap:4px;padding:10px 6px 10px 8px;cursor:pointer; background:var(--acrylic-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(210,220,236,.9);border-right:0;border-radius:14px 0 0 14px; box-shadow:-4px 3px 14px rgba(16,38,80,.16);color:#5b6b85;font-size:15px;user-select:none; transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)} .gp-dock-handle:hover{color:#1f5fbf;border-color:#9bb4dc} body.gp-dock-pin .gp-dock-handle{color:#1f5fbf;border-color:#9bb4dc;background:#eef4fd} body.gp-dock-open .gp-dock-handle{right:0} .gp-dock-handle .chev{transition:transform .18s} body.gp-dock-open .gp-dock-handle .chev{transform:rotate(180deg)} .gp-dock h4{margin:0;padding:10px 12px 6px;font-size:11.5px;text-transform:uppercase; letter-spacing:.5px;color:#8595ab;font-weight:700} .gp-dock-body{overflow-y:auto;flex:1;padding-bottom:12px} /* Vệt đường đi: đang ở đâu + các trang vừa qua (bấm là quay về đúng chỗ) */ .gp-here{margin:0 10px;padding:8px 10px;background:#eef4fd;border:1px solid #d7e3f5;border-radius:11px; font-size:12.5px;font-weight:700;color:#16335c;line-height:1.45;word-break:break-word} .gp-here .sub{display:block;font-weight:600;color:#5b6b85;font-size:11.5px} .gp-trail{display:flex;flex-direction:column;gap:2px;margin:0 10px} .gp-trail a{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px; font-size:12.5px;font-weight:600;color:#3b4256;text-decoration:none;line-height:1.3;transition:background var(--fast) var(--ease)} .gp-trail a:hover{background:#f0f5ff;color:#1f5fbf} .gp-trail a .tno{flex:0 0 auto;width:17px;height:17px;border-radius:50%;background:#eef3fb; color:#8595ab;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;font-weight:700} .gp-trail a span.tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Tab phần hành dựng dọc trong ngăn */ .gp-dock-tabs{display:flex;flex-direction:column;gap:2px;margin:0 10px} .gp-dock-tabs a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px; font-size:13px;font-weight:600;color:#3a475c;text-decoration:none;transition:background var(--fast) var(--ease)} .gp-dock-tabs a:hover{background:#f0f5ff;color:#1f5fbf} .gp-dock-tabs a.active{background:#1f5fbf;color:#fff;box-shadow:0 2px 8px rgba(31,95,191,.30)} /* Chế độ GỌN: giấu thanh tab ngang trong trang (điều hướng nằm ở ngăn bên) */ .gp-dock-opt{display:flex;align-items:center;gap:7px;margin:8px 12px 0;font-size:12px;color:#5b6b85;cursor:pointer} body.gp-hidetabs .ws-tabs, body.gp-hidetabs .hk-tabs{display:none} /* NÚT THOÁT HIỂM (2026-07-07): khi ẩn thanh tab, LUÔN hiện nút "Hiện thanh tab" ở đầu nội dung để không bao giờ kẹt (không phải mò nút tích trong ngăn 🧭). base.html chèn/gỡ theo trạng thái. */ .gp-showtabs{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:6px 13px;cursor:pointer; background:#fff;color:#1f5fbf;border:1px dashed #9bb4dc;border-radius:9px;font-weight:600;font-size:13px; box-shadow:var(--sh-1);transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)} .gp-showtabs:hover{background:var(--accent-soft);border-style:solid;border-color:#1f5fbf} /* Mục "Trang này" trong dock — trang khai