/* ============================================================ TAB "GHI CHÚ" — CSS độc lập (prefix gc-) — KHÔNG đè tab cũ. Scoped trong #page-ghi-chu; overlay/lightbox/toast gắn body (class gc-*). Brand Mimosa: navy #0D1B33 · gold #E1A146 · kem #F6F2EA. Font Roboto. KHÔNG tím. ============================================================ */ #page-ghi-chu{ --gc-gold:#E1A146; --gc-gold-l:#EDB96A; --gc-gold-cream:#FBF1DC; --gc-gold-ink:#9C6A16; --gc-navy:#0D1B33; --gc-bg:#F6F2EA; --gc-panel:#fff; --gc-text:#26221B; --gc-soft:#8A8170; --gc-line:#ECE5D8; --gc-red:#C0392B; --gc-red-bg:#FCEDEA; --gc-amber:#B9791C; --gc-amber-bg:#FBF1DC; --gc-green:#2E7D5B; --gc-green-bg:#E8F3ED; --gc-blue:#2F5FA8; font-family:'Roboto',-apple-system,sans-serif; } #page-ghi-chu *{ box-sizing:border-box; } /* FIX (24/06): modal/lightbox/toast/FAB của Ghi chú gắn vào — NGOÀI #page-ghi-chu — nên KHÔNG kế thừa biến --gc-* → nút gold (background:var(--gc-gold) + chữ trắng) thành "trắng trên trắng" = VÔ HÌNH (vd nút "Lưu ghi chú" / "Lưu công việc"). Cấp lại biến cho các gốc gắn body. */ .gc-overlay, .gc-fab, .gc-rtoast, .gc-lb, .gc-toast{ --gc-gold:#E1A146; --gc-gold-l:#EDB96A; --gc-gold-cream:#FBF1DC; --gc-gold-ink:#9C6A16; --gc-navy:#0D1B33; --gc-bg:#F6F2EA; --gc-panel:#fff; --gc-text:#26221B; --gc-soft:#8A8170; --gc-line:#ECE5D8; --gc-red:#C0392B; --gc-red-bg:#FCEDEA; --gc-amber:#B9791C; --gc-amber-bg:#FBF1DC; --gc-green:#2E7D5B; --gc-green-bg:#E8F3ED; --gc-blue:#2F5FA8; } /* thanh chú thích đầu tab Ghi chú */ .gc-introbar{ background:#FEF9EE; border:1px solid #ECDCB6; border-radius:12px; padding:11px 13px; margin:2px 0 12px; } .gc-intro1{ font-size:13px; font-weight:700; color:#0D1B33; line-height:1.45; } .gc-intro2{ font-size:12px; color:#8A8170; line-height:1.5; margin-top:3px; } /* sub-tabs Ghi chú / Công việc */ .gc-subs{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:2px 0 14px; } .gc-subs button{ font-family:inherit; border:none; cursor:pointer; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--gc-line); color:var(--gc-soft); } .gc-subs button.on{ background:var(--gc-navy); color:#fff; border-color:var(--gc-navy); } .gc-subs .gc-soon{ color:#b8ad97; cursor:default; font-weight:500; font-size:12.5px; background:transparent; border:1px dashed var(--gc-line); } /* toolbar: search + add */ .gc-toolbar{ display:flex; gap:9px; align-items:center; margin-bottom:11px; } .gc-search{ flex:1; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--gc-line); border-radius:10px; padding:9px 12px; color:var(--gc-soft); font-size:13px; min-width:0; } .gc-search input{ border:none; outline:none; flex:1; min-width:0; font-family:inherit; font-size:13.5px; color:var(--gc-text); background:transparent; } .gc-btn-gold{ background:var(--gc-gold); color:#fff; border:none; font-family:inherit; font-weight:700; font-size:13px; padding:10px 15px; border-radius:10px; cursor:pointer; white-space:nowrap; } .gc-btn-gold:hover{ background:var(--gc-gold-l); } /* filter chips */ .gc-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; } .gc-chips button{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--gc-line); color:var(--gc-soft); cursor:pointer; font-family:inherit; } .gc-chips button.on{ background:var(--gc-gold-cream); border-color:#e7cf9f; color:var(--gc-gold-ink); } .gc-chips.gc-time button.on{ background:var(--gc-navy); color:#fff; border-color:var(--gc-navy); } .gc-rangewrap{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:-2px 0 12px; } .gc-rangewrap input[type=date]{ border:1px solid var(--gc-line); border-radius:8px; padding:6px 9px; font-family:inherit; font-size:12.5px; color:var(--gc-text); } /* reminder bar (riêng — KHÔNG đụng chuông tổng) */ .gc-rembar{ display:flex; align-items:center; gap:10px; background:var(--gc-amber-bg); border:1px solid #e7cf9f; border-left:4px solid var(--gc-amber); border-radius:11px; padding:11px 13px; font-size:13px; color:var(--gc-gold-ink); font-weight:600; margin-bottom:13px; cursor:pointer; } .gc-rembar.gc-hide{ display:none; } /* notes grid */ .gc-notes{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .gc-note{ border-radius:13px; padding:13px 13px 11px; border:1px solid rgba(13,27,51,.08); position:relative; box-shadow:0 1px 2px rgba(13,27,51,.04); } .gc-note h4{ font-size:14px; font-weight:700; color:var(--gc-navy); padding-right:54px; line-height:1.35; word-break:break-word; } .gc-note p{ font-size:12.5px; color:#46423a; margin-top:5px; line-height:1.45; white-space:pre-wrap; word-break:break-word; } .gc-note .gc-acts{ position:absolute; top:9px; right:9px; display:flex; gap:3px; } .gc-note .gc-acts button{ background:rgba(255,255,255,.62); border:none; width:25px; height:25px; border-radius:7px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; color:var(--gc-text); } .gc-note .gc-acts button:hover{ background:#fff; } .gc-note .gc-acts button.on{ background:var(--gc-gold); color:#fff; } .gc-note .gc-scope{ display:inline-block; margin-top:9px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:6px; background:rgba(13,27,51,.07); color:var(--gc-soft); } .gc-note .gc-scope.share{ background:rgba(47,95,168,.14); color:var(--gc-blue); } .gc-note .gc-scope.house{ background:rgba(225,161,70,.2); color:var(--gc-gold-ink); margin-left:5px; } .gc-note .gc-meta{ margin-top:8px; font-size:10.5px; color:var(--gc-soft); display:flex; gap:6px; align-items:center; } .gc-ava{ width:17px; height:17px; border-radius:50%; background:var(--gc-navy); color:var(--gc-gold); font-size:8.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; } /* 9 màu giấy pastel — bộ duy nhất */ .gc-c-kem{ background:#FBF1DC; } .gc-c-dao{ background:#FBEADB; } .gc-c-sanho{ background:#FBE6DF; } .gc-c-hong{ background:#F7E6EC; } .gc-c-xanhduong{ background:#EAF0F9; } .gc-c-xanhngoc{ background:#E4F1F0; } .gc-c-xanhla{ background:#E8F3ED; } .gc-c-xamam{ background:#EFEAE1; } .gc-c-trang{ background:#FFFFFF; } /* thumbnails ảnh trong thẻ */ .gc-thumbs{ display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; } .gc-thumb{ width:56px; height:56px; border-radius:9px; overflow:hidden; cursor:pointer; border:1px solid rgba(13,27,51,.1); position:relative; background:#fff; flex:none; } .gc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .gc-thumb .gc-more{ position:absolute; inset:0; background:rgba(13,27,51,.55); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; } .gc-files{ margin-top:10px; display:grid; gap:7px; } .gc-file{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--gc-line); border-radius:10px; padding:7px 11px; } .gc-file .gc-ic{ width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; flex:none; background:var(--gc-soft); } .gc-file .gc-ic.pdf{ background:var(--gc-red); } .gc-file .gc-ic.doc{ background:var(--gc-blue); } .gc-file .gc-ic.xls{ background:var(--gc-green); } .gc-file .gc-ic.zip{ background:#7a6a48; } .gc-file .gc-fn{ flex:1; min-width:0; font-size:12px; font-weight:600; color:var(--gc-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gc-file .gc-fs{ font-size:10.5px; color:var(--gc-soft); } .gc-file .gc-dl{ background:none; border:none; cursor:pointer; font-size:14px; color:var(--gc-soft); } /* tasks */ .gc-tasks{ display:grid; gap:9px; } .gc-task{ display:flex; gap:11px; align-items:flex-start; background:#fff; border:1px solid var(--gc-line); border-radius:12px; padding:11px 13px; border-left:4px solid var(--gc-line); } .gc-task.over{ border-left-color:var(--gc-red); background:var(--gc-red-bg); } .gc-task.today{ border-left-color:var(--gc-amber); } .gc-task.done{ opacity:.6; } .gc-cbox{ width:20px; height:20px; border-radius:6px; border:2px solid var(--gc-soft); flex:none; cursor:pointer; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; background:#fff; } .gc-task.done .gc-cbox{ background:var(--gc-green); border-color:var(--gc-green); } .gc-tbody{ flex:1; min-width:0; } .gc-ttext{ font-size:13.5px; font-weight:600; color:var(--gc-text); line-height:1.35; word-break:break-word; } .gc-task.done .gc-ttext{ text-decoration:line-through; color:var(--gc-soft); } .gc-tsub{ margin-top:6px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; } .gc-due{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:#eef0f3; color:var(--gc-soft); } .gc-due.r{ background:var(--gc-red); color:#fff; } .gc-due.a{ background:var(--gc-amber); color:#fff; } .gc-tag{ font-size:10.5px; font-weight:700; color:var(--gc-soft); display:flex; align-items:center; gap:4px; } .gc-tag.rem{ color:var(--gc-gold-ink); } .gc-pdot{ width:7px; height:7px; border-radius:50%; background:var(--gc-soft); } .gc-pdot.hi{ background:var(--gc-red); } .gc-pdot.mid{ background:var(--gc-amber); } .gc-tacts{ display:flex; gap:4px; margin-left:auto; } .gc-tacts button{ background:rgba(13,27,51,.05); border:none; width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:12.5px; color:var(--gc-soft); } .gc-tacts button:hover{ background:rgba(13,27,51,.1); } .gc-empty{ text-align:center; color:var(--gc-soft); font-size:13px; padding:34px 10px; } .gc-loadmore{ display:flex; justify-content:center; margin-top:14px; } .gc-loadmore button{ background:#fff; border:1px solid var(--gc-line); color:var(--gc-navy); font-weight:600; font-size:13px; padding:9px 20px; border-radius:10px; cursor:pointer; font-family:inherit; } .gc-saved{ font-size:11px; color:var(--gc-green); font-weight:600; display:flex; align-items:center; gap:5px; margin-top:14px; justify-content:flex-end; } .gc-saved::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gc-green); } .gc-saved.saving{ color:var(--gc-soft); } .gc-saved.saving::before{ background:var(--gc-amber); } /* FAB (mobile thêm nhanh) */ .gc-fab{ position:fixed; right:22px; bottom:84px; width:56px; height:56px; border-radius:50%; background:var(--gc-gold); color:#fff; font-size:28px; font-weight:300; display:none; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(225,161,70,.5); cursor:pointer; border:none; z-index:1200; } /* ============ OVERLAY + MODAL (gắn body, prefix gc-) ============ */ .gc-overlay{ position:fixed; inset:0; background:rgba(13,27,51,.5); display:none; align-items:center; justify-content:center; z-index:13000; padding:16px; font-family:'Roboto',-apple-system,sans-serif; } .gc-overlay.show{ display:flex; } .gc-modal{ background:#fff; border-radius:16px; width:100%; max-width:440px; max-height:92vh; overflow:auto; box-shadow:0 24px 60px rgba(13,27,51,.35); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* ⚡ khóa cuộn nền khi modal Ghi chú/Công việc mở (mobile hết giật khi gõ) */ body.gc-modal-open{ overflow:hidden; } .gc-mhead{ padding:15px 18px 12px; border-bottom:1px solid #ECE5D8; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:2; } .gc-mhead h3{ font-size:16px; font-weight:700; color:#0D1B33; } .gc-mx{ background:none; border:none; font-size:22px; color:#8A8170; cursor:pointer; line-height:1; } .gc-mbody{ padding:15px 18px; } .gc-fld{ margin-bottom:14px; } .gc-fld>label{ display:block; font-size:11.5px; font-weight:700; color:#8A8170; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; } .gc-fld input[type=text], .gc-fld textarea{ width:100%; border:1.5px solid #ECE5D8; border-radius:10px; padding:10px 12px; font-family:inherit; font-size:14px; color:#26221B; outline:none; } .gc-fld input[type=text]:focus, .gc-fld textarea:focus{ border-color:#E1A146; } .gc-fld textarea{ resize:vertical; min-height:80px; } .gc-opts{ display:flex; gap:7px; flex-wrap:wrap; } .gc-opts button{ border:1.5px solid #ECE5D8; background:#fff; color:#8A8170; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:9px; cursor:pointer; font-family:inherit; } .gc-opts button.sel{ border-color:#E1A146; background:#FBF1DC; color:#9C6A16; } .gc-opts.gc-buoi button{ flex:1; min-width:84px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 8px; } .gc-opts.gc-buoi .e{ font-size:18px; } .gc-times{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; } .gc-times.gc-hide{ display:none; } .gc-times button{ border:1.5px solid #ECE5D8; background:#fff; color:#26221B; font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:9px; cursor:pointer; font-family:inherit; } .gc-times button.sel{ border-color:#0D1B33; background:#0D1B33; color:#fff; } .gc-sw{ display:flex; gap:8px; flex-wrap:wrap; } .gc-sw button{ width:30px; height:30px; border-radius:50%; border:2px solid rgba(13,27,51,.12); cursor:pointer; } .gc-sw button.sel{ border-color:#0D1B33; box-shadow:0 0 0 2px #fff,0 0 0 4px #E1A146; } .gc-hint{ font-size:11.5px; color:#8A8170; margin:-4px 0 12px; line-height:1.4; } .gc-mfoot{ padding:12px 18px 16px; display:flex; gap:9px; justify-content:flex-end; border-top:1px solid #ECE5D8; position:sticky; bottom:0; background:#fff; } .gc-btn-ghost{ background:#fff; border:1.5px solid #ECE5D8; color:#8A8170; font-weight:600; font-size:13px; padding:9px 15px; border-radius:10px; cursor:pointer; font-family:inherit; } /* mini lịch (chọn ngày) */ .gc-cal{ margin-top:10px; border:1.5px solid #ECE5D8; border-radius:12px; padding:11px 11px 8px; display:none; } .gc-cal.show{ display:block; } .gc-cal-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; } .gc-cal-h b{ font-size:13.5px; color:#0D1B33; font-weight:700; } .gc-cal-h button{ background:#F6F2EA; border:1px solid #ECE5D8; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px; color:#0D1B33; } .gc-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .gc-cal-dow{ font-size:10.5px; font-weight:700; color:#8A8170; text-align:center; padding:3px 0; } .gc-cal-d{ text-align:center; padding:7px 0; font-size:12.5px; border-radius:8px; cursor:pointer; color:#26221B; } .gc-cal-d:hover{ background:#FBF1DC; } .gc-cal-d.muted{ color:#cfc7b6; cursor:default; } .gc-cal-d.muted:hover{ background:none; } .gc-cal-d.today{ outline:1.5px solid #E1A146; outline-offset:-1px; font-weight:700; } .gc-cal-d.sel{ background:#E1A146; color:#fff; font-weight:700; } .gc-result{ margin-top:6px; background:#E8F3ED; border:1px solid #cfe6da; border-left:4px solid #2E7D5B; border-radius:11px; padding:10px 13px; font-size:13px; color:#22624a; font-weight:600; } .gc-result.empty{ background:#F6F2EA; border-color:#ECE5D8; border-left-color:#8A8170; color:#8A8170; } /* khu thêm ảnh / tệp trong form */ .gc-addbtns{ display:flex; gap:8px; flex-wrap:wrap; } .gc-addbtns label{ flex:1; min-width:108px; display:flex; align-items:center; justify-content:center; gap:6px; border:1.5px dashed #ECE5D8; background:#F6F2EA; color:#9C6A16; font-size:12.5px; font-weight:600; padding:11px 8px; border-radius:11px; cursor:pointer; } .gc-addbtns label:hover{ border-color:#E1A146; background:#FBF1DC; } .gc-addbtns input{ display:none; } .gc-prelabel{ font-size:11px; font-weight:700; color:#8A8170; text-transform:uppercase; letter-spacing:.04em; margin:12px 0 7px; display:flex; justify-content:space-between; } .gc-prelabel .cnt{ color:#9C6A16; } .gc-prethumbs{ display:flex; gap:9px; flex-wrap:wrap; } .gc-pt{ width:72px; height:72px; border-radius:11px; overflow:hidden; position:relative; border:1px solid #ECE5D8; background:#F6F2EA; flex:none; } .gc-pt img{ width:100%; height:100%; object-fit:cover; } .gc-pt .gc-ptx{ position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:rgba(13,27,51,.7); color:#fff; border:none; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; } .gc-pt .gc-ptsz{ position:absolute; left:0; right:0; bottom:0; background:rgba(13,27,51,.6); color:#fff; font-size:8.5px; text-align:center; padding:2px 0; font-weight:600; } .gc-pt.up{ display:flex; align-items:center; justify-content:center; color:#9C6A16; font-size:11px; font-weight:600; } .gc-emptyhint{ font-size:12px; color:#8A8170; padding:4px 0; } /* ============ LIGHTBOX (gắn body) ============ */ .gc-lb{ position:fixed; inset:0; background:rgba(7,12,24,.95); z-index:14000; display:none; flex-direction:column; font-family:'Roboto',sans-serif; } .gc-lb.show{ display:flex; } .gc-lb-top{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; color:#fff; } .gc-lb-count{ font-size:14px; font-weight:600; background:rgba(255,255,255,.12); padding:5px 12px; border-radius:999px; } .gc-lb-x{ background:rgba(255,255,255,.12); border:none; color:#fff; width:38px; height:38px; border-radius:50%; font-size:20px; cursor:pointer; } .gc-lb-stage{ flex:1; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; touch-action:none; } .gc-lb-img{ max-width:100%; max-height:100%; transform-origin:center center; transition:transform .08s linear; user-select:none; -webkit-user-drag:none; cursor:grab; } .gc-lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); border:none; color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .gc-lb-nav.prev{ left:12px; } .gc-lb-nav.next{ right:12px; } .gc-lb-bot{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px 18px; } .gc-lb-bot button{ background:rgba(255,255,255,.14); border:none; color:#fff; font-size:13.5px; font-weight:700; padding:9px 15px; border-radius:10px; cursor:pointer; } .gc-lb-dots{ display:flex; gap:6px; justify-content:center; padding-bottom:2px; } .gc-lb-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); display:block; } .gc-lb-dots i.on{ background:#E1A146; } /* ============ REMINDER TOAST (gắn body, riêng — KHÔNG đụng chuông tổng) ============ */ .gc-rtoast{ position:fixed; left:50%; top:18px; transform:translateX(-50%) translateY(-160%); width:min(420px,92%); background:#fff; border-radius:14px; border-left:5px solid #B9791C; box-shadow:0 16px 40px rgba(13,27,51,.28); padding:14px 16px; z-index:13500; transition:transform .35s cubic-bezier(.2,.8,.2,1); font-family:'Roboto',sans-serif; } .gc-rtoast.show{ transform:translateX(-50%) translateY(0); } .gc-rtoast h5{ font-size:13.5px; color:#0D1B33; font-weight:700; display:flex; align-items:center; gap:7px; } .gc-rtoast ul{ list-style:none; margin:9px 0 0; padding:0; display:grid; gap:6px; max-height:42vh; overflow:auto; } .gc-rtoast li{ font-size:12.5px; color:#26221B; display:flex; gap:7px; align-items:center; } .gc-rtoast li b{ font-weight:700; } .gc-rt-dot{ width:7px; height:7px; border-radius:50%; flex:none; } .gc-rt-act{ margin-top:11px; display:flex; gap:8px; justify-content:flex-end; } .gc-rt-act button{ font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:9px; cursor:pointer; border:none; font-family:inherit; } .gc-rt-go{ background:#E1A146; color:#fff; } .gc-rt-close{ background:#fff; border:1.5px solid #ECE5D8 !important; color:#8A8170; } /* mini toast */ .gc-toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(10px); background:#0D1B33; color:#fff; font-size:13px; font-weight:600; padding:10px 16px; border-radius:999px; box-shadow:0 8px 24px rgba(13,27,51,.3); z-index:13800; opacity:0; transition:.2s; pointer-events:none; } .gc-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* nav badge riêng (đỏ) — cộng vào mục Ghi chú, KHÔNG đụng chuông tổng */ #gc-nav-badge{ background:var(--danger,#C0392B); color:#fff; } /* ============ RESPONSIVE ============ */ @media(max-width:860px){ #page-ghi-chu .gc-notes{ grid-template-columns:1fr; } .gc-fab{ display:flex; } .gc-toolbar .gc-btn-gold{ display:none; } /* mobile dùng FAB */ .gc-overlay{ align-items:flex-end; padding:0; } .gc-modal{ max-width:100%; border-radius:18px 18px 0 0; max-height:90vh; box-shadow:0 -6px 20px rgba(13,27,51,.18); } /* ⚡ bóng nhẹ hơn (blur 60->20px) → mobile repaint rẻ hơn khi gõ, hết giật */ .gc-lb-nav{ width:40px; height:40px; } } /* ============================================================ ĐỢT 2 — KHU "BẢNG TÍNH" (prefix gcbt-) — scoped #page-ghi-chu; overlay/phiếu gắn body ============================================================ */ #page-ghi-chu #gc-panel-sheet{ max-width:600px; } #page-ghi-chu .gcbt-subs{ display:flex; gap:6px; border-bottom:1.5px solid #ECE5D8; margin-bottom:14px; } #page-ghi-chu .gcbt-subs button{ border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:600; color:#8A8170; padding:9px 14px; border-bottom:2.5px solid transparent; margin-bottom:-1.5px; } #page-ghi-chu .gcbt-subs button.on{ color:#0D1B33; border-bottom-color:#E1A146; } /* máy tính */ #page-ghi-chu .gcbt-calc{ max-width:360px; margin:0 auto; } #page-ghi-chu .gcbt-histhead{ display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; color:#8A8170; text-transform:uppercase; letter-spacing:.04em; padding:0 6px 4px; } #page-ghi-chu .gcbt-histhead button{ background:none; border:none; color:#C0392B; font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer; } #page-ghi-chu .gcbt-hist{ min-height:0; text-align:right; font-size:12.5px; color:#8A8170; padding:0 6px; line-height:1.6; max-height:88px; overflow:auto; } #page-ghi-chu .gcbt-screen{ background:#fff; border:1px solid #ECE5D8; border-radius:14px; padding:14px 16px; text-align:right; margin:6px 0 12px; } #page-ghi-chu .gcbt-op{ font-size:13px; color:#9C6A16; min-height:18px; font-weight:600; } #page-ghi-chu .gcbt-now{ font-size:34px; font-weight:700; color:#0D1B33; word-break:break-all; line-height:1.2; } #page-ghi-chu .gcbt-keys{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; } #page-ghi-chu .gcbt-keys button{ border:1px solid #ECE5D8; border-radius:13px; font-family:inherit; font-size:19px; font-weight:600; padding:16px 0; cursor:pointer; background:#fff; color:#0D1B33; } #page-ghi-chu .gcbt-keys button:active{ transform:scale(.97); } #page-ghi-chu .gcbt-keys .gcbt-op{ background:#FBF1DC; color:#9C6A16; border-color:#e7cf9f; } #page-ghi-chu .gcbt-keys .gcbt-fn{ background:#eef0f3; color:#8A8170; } #page-ghi-chu .gcbt-keys .gcbt-eq{ background:#E1A146; color:#fff; border-color:#E1A146; } #page-ghi-chu .gcbt-keys .gcbt-span2{ grid-column:span 2; } #page-ghi-chu .gcbt-calcnote{ font-size:11.5px; color:#8A8170; text-align:center; margin-top:12px; } /* bảng tính tiền */ #page-ghi-chu .gcbt-sheetbar{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:12px; } #page-ghi-chu .gcbt-chip{ font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid #ECE5D8; color:#8A8170; cursor:pointer; font-family:inherit; } #page-ghi-chu .gcbt-chip.on{ background:#FBF1DC; border-color:#e7cf9f; color:#9C6A16; } #page-ghi-chu .gcbt-chip.gcbt-add{ background:#0D1B33; color:#fff; border-color:#0D1B33; } #page-ghi-chu .gcbt-namerow{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; } #page-ghi-chu .gcbt-sheetname{ flex:1; min-width:150px; border:none; background:transparent; font-size:17px; font-weight:700; color:#0D1B33; outline:none; border-bottom:1.5px dashed #ECE5D8; padding:4px 2px; font-family:inherit; } #page-ghi-chu .gcbt-sheetname:focus{ border-color:#E1A146; } #page-ghi-chu .gcbt-mbtn{ background:#fff; border:1px solid #ECE5D8; color:#0D1B33; font-family:inherit; font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:9px; cursor:pointer; white-space:nowrap; } #page-ghi-chu .gcbt-mbtn.del{ background:#FCEDEA; border-color:#f0bcb6; color:#C0392B; } #page-ghi-chu #gcbt-demonote{ background:#FEF9EE; border:1px solid #ecdcb6; border-radius:10px; padding:9px 12px; font-size:12px; color:#9C6A16; margin-bottom:10px; line-height:1.45; } #page-ghi-chu .gcbt-scrollx{ overflow-x:auto; } #page-ghi-chu .gcbt-tbl{ width:100%; border-collapse:collapse; background:#fff; border:1px solid #ECE5D8; border-radius:12px; overflow:hidden; } #page-ghi-chu .gcbt-tbl thead th{ background:#0D1B33; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:9px 8px; text-align:left; } #page-ghi-chu .gcbt-tbl th.num, #page-ghi-chu .gcbt-tbl td.num{ text-align:right; } #page-ghi-chu .gcbt-tbl td{ border-top:1px solid #ECE5D8; padding:6px 8px; vertical-align:middle; } #page-ghi-chu .gcbt-tbl tr.minus td{ background:#FCEDEA; } #page-ghi-chu .gcbt-cell{ width:100%; border:none; background:transparent; font-family:inherit; font-size:13px; color:#26221B; outline:none; padding:5px 4px; } #page-ghi-chu .gcbt-cell:focus{ background:#FEF9EE; border-radius:6px; } #page-ghi-chu .gcbt-cell.num{ text-align:right; } #page-ghi-chu .gcbt-cell.name{ font-weight:500; } #page-ghi-chu .gcbt-linetotal{ font-weight:700; color:#0D1B33; font-size:13px; white-space:nowrap; } #page-ghi-chu .gcbt-tbl tr.minus .gcbt-linetotal{ color:#C0392B; } #page-ghi-chu .gcbt-rowact{ display:flex; gap:5px; justify-content:flex-end; align-items:center; } #page-ghi-chu .gcbt-rowact button{ cursor:pointer; font-family:inherit; } #page-ghi-chu .gcbt-m{ width:28px; height:28px; border-radius:50%; border:1.6px solid #ECE5D8; background:#fff; color:#8A8170; font-size:19px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; } #page-ghi-chu .gcbt-m.on{ background:#C0392B; color:#fff; border-color:#C0392B; } #page-ghi-chu .gcbt-rdel{ background:none; border:none; font-size:14px; width:28px; height:27px; border-radius:7px; color:#8A8170; } #page-ghi-chu .gcbt-rdel:hover{ background:#F6F2EA; } #page-ghi-chu .gcbt-addrow{ margin-top:10px; display:flex; gap:8px; } #page-ghi-chu .gcbt-addrow button{ background:#fff; border:1.5px dashed #ECE5D8; color:#9C6A16; font-family:inherit; font-size:13px; font-weight:600; padding:10px 14px; border-radius:11px; cursor:pointer; flex:1; } #page-ghi-chu .gcbt-addrow button:hover{ border-color:#E1A146; background:#FBF1DC; } #page-ghi-chu .gcbt-sumbox{ margin-top:14px; background:#fff; border:1px solid #ECE5D8; border-radius:13px; overflow:hidden; } #page-ghi-chu .gcbt-sumrow{ display:flex; justify-content:space-between; align-items:center; padding:10px 15px; font-size:13.5px; } #page-ghi-chu .gcbt-sumrow.grand{ background:#FBF1DC; } #page-ghi-chu .gcbt-sumrow.grand span:first-child{ color:#9C6A16; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:13px; } #page-ghi-chu .gcbt-sumrow.grand span:last-child{ font-size:23px; font-weight:900; color:#0D1B33; } #page-ghi-chu .gcbt-exportbtn{ margin-top:12px; width:100%; background:#0D1B33; color:#fff; border:none; font-family:inherit; font-weight:700; font-size:14px; padding:12px; border-radius:11px; cursor:pointer; } #page-ghi-chu .gcbt-saved{ font-size:11px; color:#2E7D5B; font-weight:600; display:flex; align-items:center; gap:5px; margin-top:12px; justify-content:flex-end; } #page-ghi-chu .gcbt-saved::before{ content:""; width:7px; height:7px; border-radius:50%; background:#2E7D5B; } #page-ghi-chu .gcbt-saved.saving{ color:#8A8170; } #page-ghi-chu .gcbt-saved.saving::before{ background:#B9791C; } #page-ghi-chu .gcbt-mininote{ font-size:11.5px; color:#8A8170; margin-top:10px; line-height:1.45; } #page-ghi-chu .gcbt-miniwrap{ margin-top:16px; border-top:1px dashed #ECE5D8; padding-top:14px; } #page-ghi-chu .gcbt-miniwrap summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:#9C6A16; list-style:none; } #page-ghi-chu .gcbt-miniwrap summary::-webkit-details-marker{ display:none; } /* ===== Phiếu xuất gửi khách (gắn body, prefix gcbt-) ===== */ .gcbt-ovl{ position:fixed; inset:0; background:rgba(13,27,51,.55); display:none; align-items:flex-start; justify-content:center; z-index:13200; padding:18px; overflow:auto; font-family:'Roboto',sans-serif; } .gcbt-ovl.show{ display:flex; } .gcbt-expbox{ background:#fff; border-radius:16px; max-width:520px; width:100%; box-shadow:0 24px 60px rgba(13,27,51,.4); overflow:hidden; } .gcbt-exphead{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #ECE5D8; } .gcbt-exphead h3{ font-size:15px; color:#0D1B33; font-weight:700; } .gcbt-expx{ background:none; border:none; font-size:20px; color:#8A8170; cursor:pointer; } .gcbt-expbtns{ display:flex; gap:9px; padding:13px 16px; border-top:1px solid #ECE5D8; } .gcbt-expbtns button{ flex:1; font-family:inherit; font-weight:700; font-size:13.5px; padding:11px; border-radius:11px; cursor:pointer; border:none; } .gcbt-bprint{ background:#0D1B33; color:#fff; } .gcbt-bimg{ background:#E1A146; color:#fff; } #gcbt-invoice{ padding:22px 22px 18px; background:#fff; color:#26221B; } .gcbt-invtop{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #E1A146; padding-bottom:12px; margin-bottom:14px; } .gcbt-invbrand{ font-weight:900; letter-spacing:.2em; color:#9C6A16; font-size:18px; } .gcbt-invbrand small{ display:block; letter-spacing:.04em; font-size:10.5px; color:#8A8170; font-weight:500; margin-top:3px; } .gcbt-invh{ text-align:right; } .gcbt-invh .t{ font-size:16px; font-weight:800; color:#0D1B33; text-transform:uppercase; letter-spacing:.06em; } .gcbt-invh .d{ font-size:11.5px; color:#8A8170; margin-top:3px; } .gcbt-invtitle{ font-size:14px; font-weight:700; color:#0D1B33; margin-bottom:10px; } table.gcbt-inv{ width:100%; border-collapse:collapse; } table.gcbt-inv th{ background:#0D1B33; color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:.03em; padding:8px 9px; text-align:left; } table.gcbt-inv th.r, table.gcbt-inv td.r{ text-align:right; } table.gcbt-inv td{ border-bottom:1px solid #ECE5D8; padding:8px 9px; font-size:12.5px; } table.gcbt-inv tr.mn td{ color:#C0392B; } .gcbt-invtotal{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; background:#FBF1DC; border-radius:11px; padding:12px 15px; } .gcbt-invtotal .l{ font-size:13px; font-weight:700; color:#9C6A16; text-transform:uppercase; letter-spacing:.04em; } .gcbt-invtotal .v{ font-size:22px; font-weight:900; color:#0D1B33; } .gcbt-invwords{ margin-top:8px; font-size:12px; color:#26221B; } .gcbt-invwords i{ color:#9C6A16; font-weight:600; } .gcbt-invfoot{ margin-top:14px; font-size:11.5px; color:#8A8170; text-align:center; line-height:1.5; } @media(max-width:480px){ #page-ghi-chu .gcbt-tbl{ min-width:470px; } } /* IN: chỉ in phiếu (#gcbt-invoice), ẩn mọi thứ khác — bật bằng class body.gcbt-printing */ @media print{ body.gcbt-printing *{ visibility:hidden; } body.gcbt-printing #gcbt-invoice, body.gcbt-printing #gcbt-invoice *{ visibility:visible; } body.gcbt-printing #gcbt-invoice{ position:absolute; left:0; top:0; width:100%; padding:0; } body.gcbt-printing .gcbt-ovl{ background:none; position:static; display:block; padding:0; overflow:visible; } body.gcbt-printing .gcbt-exphead, body.gcbt-printing .gcbt-expbtns{ display:none; } body.gcbt-printing .gcbt-expbox{ box-shadow:none; max-width:100%; } } /* ============================================================ KHU "BẢNG TÍNH TỰ DO" (prefix gcbx-) — khung brand quanh lưới Jspreadsheet ============================================================ */ #page-ghi-chu #gc-panel-excel{ max-width:100%; } #page-ghi-chu .gcbx-sheetbar{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:10px; } #page-ghi-chu .gcbx-chip{ font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid #ECE5D8; color:#8A8170; cursor:pointer; font-family:inherit; white-space:nowrap; } #page-ghi-chu .gcbx-chip.on{ background:#FBF1DC; border-color:#e7cf9f; color:#9C6A16; } #page-ghi-chu .gcbx-chip.gcbx-add{ background:#0D1B33; color:#fff; border-color:#0D1B33; } #page-ghi-chu .gcbx-namerow{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; } #page-ghi-chu .gcbx-name{ flex:1; min-width:150px; border:none; background:transparent; font-size:17px; font-weight:700; color:#0D1B33; outline:none; border-bottom:1.5px dashed #ECE5D8; padding:4px 2px; font-family:inherit; } #page-ghi-chu .gcbx-name:focus{ border-color:#E1A146; } #page-ghi-chu .gcbx-mbtn{ background:#fff; border:1px solid #ECE5D8; color:#0D1B33; font-family:inherit; font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:9px; cursor:pointer; white-space:nowrap; } #page-ghi-chu .gcbx-mbtn.del{ background:#FCEDEA; border-color:#f0bcb6; color:#C0392B; } #page-ghi-chu .gcbx-toolbar{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; background:#fff; border:1px solid #ECE5D8; border-radius:11px; padding:8px; margin-bottom:10px; } #page-ghi-chu .gcbx-tb{ min-width:34px; height:32px; border:1px solid #ECE5D8; background:#fff; border-radius:8px; cursor:pointer; font-size:14px; color:#0D1B33; display:flex; align-items:center; justify-content:center; font-family:inherit; padding:0 6px; } #page-ghi-chu .gcbx-tb:hover{ background:#FEF9EE; } #page-ghi-chu .gcbx-tb.b{ font-weight:900; } #page-ghi-chu .gcbx-tb.i{ font-style:italic; font-weight:700; } #page-ghi-chu .gcbx-tb.wide{ font-size:12px; font-weight:600; } #page-ghi-chu .gcbx-sep{ width:1px; height:24px; background:#ECE5D8; margin:0 3px; flex:0 0 auto; } #page-ghi-chu .gcbx-swlbl{ font-size:11px; color:#8A8170; font-weight:600; } #page-ghi-chu .gcbx-swatch{ width:22px; height:22px; border-radius:6px; border:1px solid rgba(0,0,0,.12); cursor:pointer; flex:0 0 auto; } #page-ghi-chu .gcbx-swatch.fg{ border-radius:50%; } #page-ghi-chu .gcbx-swatch.x{ background:#fff !important; position:relative; } #page-ghi-chu .gcbx-swatch.x::after{ content:"∅"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#8A8170; font-size:12px; } #page-ghi-chu .gcbx-search{ flex:1; min-width:120px; display:flex; align-items:center; gap:6px; border:1px solid #ECE5D8; border-radius:8px; padding:0 10px; height:32px; background:#fff; } #page-ghi-chu .gcbx-search input{ border:none; outline:none; font-family:inherit; font-size:12.5px; width:100%; background:transparent; color:#26221B; } #page-ghi-chu .gcbx-msg{ font-size:11.5px; color:#C0392B; min-height:14px; font-weight:600; margin-bottom:4px; } #page-ghi-chu .gcbx-gridhost{ border:1px solid #ECE5D8; border-radius:11px; background:#fff; overflow:auto; } #page-ghi-chu .gcbx-gridhost .jexcel, #page-ghi-chu .gcbx-gridhost table.jexcel{ font-family:'Roboto',sans-serif; } #page-ghi-chu .gcbx-gridhost td.gcbx-hit{ background:#FFF4C9 !important; } /* FIX mobile: CSS global "@media(max-width:860px){table{display:block}}" phá layout table-layout:fixed của Jspreadsheet → lưới co về ~0 (ô trắng rỗng). Ép lại đúng cho lưới jexcel; host tự cuộn ngang. */ #page-ghi-chu .gcbx-gridhost table{ display:table !important; overflow:visible !important; } #page-ghi-chu .gcbx-gridhost .jexcel_content{ width:auto !important; } #page-ghi-chu .gcbx-gridhost{ overflow:auto; -webkit-overflow-scrolling:touch; } #page-ghi-chu .gcbx-loading{ padding:26px 14px; text-align:center; color:#8A8170; font-size:13px; } #page-ghi-chu .gcbx-barinfo{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; } #page-ghi-chu .gcbx-statsel{ font-size:12px; color:#26221B; background:#FBF1DC; border:1px solid #e7cf9f; border-radius:8px; padding:5px 11px; } #page-ghi-chu .gcbx-statsel b{ color:#9C6A16; } #page-ghi-chu .gcbx-zoombox{ display:flex; align-items:center; gap:6px; } #page-ghi-chu .gcbx-zoombox button{ width:30px; height:30px; border:1px solid #ECE5D8; background:#fff; border-radius:8px; font-size:16px; font-weight:700; color:#0D1B33; cursor:pointer; line-height:1; } #page-ghi-chu .gcbx-zoombox span{ font-size:12px; font-weight:700; color:#8A8170; min-width:42px; text-align:center; } #page-ghi-chu .gcbx-saved{ font-size:11px; color:#2E7D5B; font-weight:600; display:flex; align-items:center; gap:5px; } #page-ghi-chu .gcbx-saved::before{ content:""; width:7px; height:7px; border-radius:50%; background:#2E7D5B; } #page-ghi-chu .gcbx-saved.saving{ color:#8A8170; } #page-ghi-chu .gcbx-saved.saving::before{ background:#B9791C; } #page-ghi-chu .gcbx-note{ background:#FEF9EE; border:1px solid #ecdcb6; border-radius:10px; padding:9px 12px; font-size:11.5px; color:#9C6A16; margin-top:10px; line-height:1.5; } /* popover "Tạo từ mẫu" (gắn body) */ .gcbx-tplmenu{ position:fixed; z-index:13600; background:#fff; border:1px solid #ECE5D8; border-radius:11px; box-shadow:0 14px 40px rgba(13,27,51,.25); padding:6px; display:flex; flex-direction:column; gap:3px; min-width:200px; font-family:'Roboto',sans-serif; } .gcbx-tplmenu button{ text-align:left; background:#fff; border:none; font-family:inherit; font-size:13px; color:#26221B; padding:9px 11px; border-radius:8px; cursor:pointer; } .gcbx-tplmenu button:hover{ background:#FBF1DC; color:#9C6A16; } @media(max-width:860px){ #page-ghi-chu .gcbx-sheetbar{ flex-wrap:nowrap; overflow-x:auto; } #page-ghi-chu .gcbx-toolbar{ flex-wrap:nowrap; overflow-x:auto; } #page-ghi-chu .gcbx-sheetbar > *, #page-ghi-chu .gcbx-toolbar > *{ flex:0 0 auto; } #page-ghi-chu .gcbx-search{ min-width:160px; } } /* IN bảng tính tự do */ @media print{ body.gcbx-printing *{ visibility:hidden; } body.gcbx-printing #gcbx-printhost, body.gcbx-printing #gcbx-printhost *{ visibility:visible; } body.gcbx-printing #gcbx-printhost{ position:absolute; left:0; top:0; width:100%; padding:0; } }