/* ============================================================ 3SU — Dark theme Áp khi . JS (inline head + 10-core.js) resolve "system" → "dark"|"light" dựa trên prefers-color-scheme, nên file này KHÔNG cần @media riêng. Mẫu in / QR giữ nền trắng — không nằm trong scope override. ============================================================ */ html[data-theme="dark"]{ /* ---- Token tối (lật palette giấy ấm sang nền tối ấm) ---- */ --paper:#1A1816; --paper-2:#232020; --paper-3:#2C2826; --surface:#232020; --surface-2:#2C2826; --ink:#F2EEE5; --ink-2:#E5E0D6; --ink-3:#C9C3B8; --mute:#9A938A; --mute-2:#6E665E; --hair:#3A3531; --hair-2:#2E2A27; --up:#7FB98C; --down:#E08A7E; --gold:#D2A868; --warn:#F0B45A; --warn-bg:#3A2A12; --warn-line:#6B4A1F; /* Bộ --tb-* (bottom sheet / GR / picker) */ --tb-ink:#F2EEE5; --tb-paper:#1A1816; --tb-mute:#9A938A; --tb-line:rgba(242,238,229,.10); --tb-gold:#D2A868; --tb-up:#7FB98C; --tb-bad:#E08A7E; color-scheme:dark; } /* ---- Splash + meta theme-color ---- */ html[data-theme="dark"] .splash{background:#1A1816;color:#F2EEE5} /* ---- Nền noise: blend multiply làm tối nền → đổi sang screen nhẹ ---- */ html[data-theme="dark"] body::before{ mix-blend-mode:screen; opacity:.18; } /* ============================================================ Override các màu hardcode sáng (không dùng var) ============================================================ */ /* Nền trắng tổng quát */ html[data-theme="dark"] .ci, html[data-theme="dark"] .sale-srch-wrap, html[data-theme="dark"] .sale-products, html[data-theme="dark"] .sale-products-list, html[data-theme="dark"] .kho-action, html[data-theme="dark"] .kho-action.icon-only, html[data-theme="dark"] .seg, html[data-theme="dark"] .seg-b.sel, html[data-theme="dark"] .search-inline input, html[data-theme="dark"] .cat-chips.compact .cat-chip, html[data-theme="dark"] #productsList .row, html[data-theme="dark"] .settings-card, html[data-theme="dark"] .settings-profile-card, html[data-theme="dark"] .settings-info-grid button, html[data-theme="dark"] .settings-action-grid button, html[data-theme="dark"] .settings-action-row button, html[data-theme="dark"] .settings-inline-actions button, html[data-theme="dark"] .home-bell, html[data-theme="dark"] .home-bell.has, html[data-theme="dark"] .rpt-card, html[data-theme="dark"] .rpt-kpi, html[data-theme="dark"] .rpt-period, html[data-theme="dark"] .rpt-ms.sel, html[data-theme="dark"] .rpt-mini-seg button.sel, html[data-theme="dark"] .rpt-actions.modern button, html[data-theme="dark"] .local-insight-card, html[data-theme="dark"] .gr2-pickbtn, html[data-theme="dark"] .gr2-input, html[data-theme="dark"] .gr2-textarea, html[data-theme="dark"] .gr2-line, html[data-theme="dark"] .gr2pk-search input, html[data-theme="dark"] .gr2-ocr-btn, html[data-theme="dark"] .gr2-batch-hint, html[data-theme="dark"] .tbx-aichat input, html[data-theme="dark"] .nt-add input, html[data-theme="dark"] .nt-item, html[data-theme="dark"] .kx-card, html[data-theme="dark"] .pd-units .ur, html[data-theme="dark"] .pd-bc button, html[data-theme="dark"] .units-edit input, html[data-theme="dark"] .units-edit-mini input, html[data-theme="dark"] .gr-meta input, html[data-theme="dark"] .gr-meta textarea, html[data-theme="dark"] .pk-search input, html[data-theme="dark"] .tb-chip:not(.in), html[data-theme="dark"] .pm-row, html[data-theme="dark"] .ii-match.new, html[data-theme="dark"] .ii-loading-step{ background:var(--paper-2)!important; color:var(--ink); } /* Modal/sheet nền paper sáng → tối */ html[data-theme="dark"] .m, html[data-theme="dark"] .mbd.gr2 .m, html[data-theme="dark"] .mbd.gr2pk .m, html[data-theme="dark"] .mbd.gr2ai .m, html[data-theme="dark"] .gr2-ov .gr2pk, html[data-theme="dark"] .tm-sheet, html[data-theme="dark"] .tb-sheet-inner, html[data-theme="dark"] .tb-sheet-head, html[data-theme="dark"] .tb-sheet-foot, html[data-theme="dark"] .m-acts{ background:var(--paper)!important; color:var(--ink); } html[data-theme="dark"] .tbx-aichat-msg, html[data-theme="dark"] .tb-seed-modal .seed-cats .c, html[data-theme="dark"] .tbx-batch-row, html[data-theme="dark"] .units-edit-mini .ue-add, html[data-theme="dark"] .units-edit .ue-add{ background:var(--paper-2)!important; color:var(--ink); } /* Gradient mờ tham chiếu rgba(249,246,240,...) → nền tối */ html[data-theme="dark"] .sale-bottom{ background:linear-gradient(to top,var(--paper) 70%,rgba(26,24,22,0) 100%); } html[data-theme="dark"] .chk-confirm-wrap{ background:linear-gradient(to top,var(--paper) 80%,rgba(26,24,22,0) 100%); } html[data-theme="dark"] .sale-cart-panel{ background:rgba(26,24,22,.98); border-top-color:var(--hair); box-shadow:0 -10px 30px rgba(0,0,0,.4); } html[data-theme="dark"] .botnav{ background:rgba(26,24,22,.96); border-top-color:var(--hair); box-shadow:0 -1px 12px rgba(0,0,0,.35); } html[data-theme="dark"] .gr2pk-done{ background:linear-gradient(180deg,rgba(26,24,22,0) 0%,var(--paper) 35%); } /* ---- Border/line sáng hardcoded ---- */ html[data-theme="dark"] .gr2-hd, html[data-theme="dark"] .gr2pk-hd, html[data-theme="dark"] .gr2pk-search, html[data-theme="dark"] .gr2-ft, html[data-theme="dark"] .gr2-line, html[data-theme="dark"] .gr2-pickbtn, html[data-theme="dark"] .gr2-input, html[data-theme="dark"] .gr2-textarea, html[data-theme="dark"] .gr2-fld-mini input, html[data-theme="dark"] .gr2-fld-mini select, html[data-theme="dark"] .gr2-ocr-btn, html[data-theme="dark"] .gr2-empty, html[data-theme="dark"] .gr2-batch-hint, html[data-theme="dark"] .tbx-aichat, html[data-theme="dark"] .tbx-aichat input, html[data-theme="dark"] .nt-add input, html[data-theme="dark"] .nt-item, html[data-theme="dark"] .tm-item, html[data-theme="dark"] .kx-card, html[data-theme="dark"] .pd-units .ur, html[data-theme="dark"] .pd-bc button, html[data-theme="dark"] .units-edit input, html[data-theme="dark"] .units-edit-mini input, html[data-theme="dark"] .gr-meta input, html[data-theme="dark"] .gr-meta textarea, html[data-theme="dark"] .pk-search input, html[data-theme="dark"] .pk-row, html[data-theme="dark"] .gr-row{ border-color:var(--hair)!important; } /* ---- Text màu đen hardcode ---- */ html[data-theme="dark"] .gr2-hd h3, html[data-theme="dark"] .gr2-rowtit h4, html[data-theme="dark"] .gr2-line-name, html[data-theme="dark"] .gr2-tot .v, html[data-theme="dark"] .gr2pk-hd h3, html[data-theme="dark"] .gr2pk-row .nm, html[data-theme="dark"] .gr2ai-card .v, html[data-theme="dark"] .gr2ai-list li b, html[data-theme="dark"] .kho-ai-chip, html[data-theme="dark"] .kx-card .big, html[data-theme="dark"] .tm-item, html[data-theme="dark"] .nt-item .nt-txt, html[data-theme="dark"] .settings-card h3, html[data-theme="dark"] .sp-name, html[data-theme="dark"] .rpt-card-head h3{ color:var(--ink); } /* ---- Text xám mute hardcode (#86868b / #5b5651 / #86868b) ---- */ html[data-theme="dark"] .gr2-code, html[data-theme="dark"] .gr2-x, html[data-theme="dark"] .gr2-fld label, html[data-theme="dark"] .gr2-pickbtn .ph, html[data-theme="dark"] .gr2-pickbtn .ch, html[data-theme="dark"] .gr2-line-x, html[data-theme="dark"] .gr2-fld-mini label, html[data-theme="dark"] .gr2-tot .l, html[data-theme="dark"] .gr2-empty, html[data-theme="dark"] .gr2pk-row .sub, html[data-theme="dark"] .gr2pk-empty, html[data-theme="dark"] .gr2ai-card .t, html[data-theme="dark"] .gr2ai-card .d, html[data-theme="dark"] .gr2ai-list, html[data-theme="dark"] .kx-card .lbl, html[data-theme="dark"] .kx-card .sub, html[data-theme="dark"] .nt-item .nt-dt, html[data-theme="dark"] .nt-empty, html[data-theme="dark"] .exp-badge{ color:var(--mute); } /* ---- Nút đen nền trắng (#fff trên nút ink) vẫn ổn, chỉ lật disabled ---- */ html[data-theme="dark"] .gr2pk-done .dn:disabled{ background:#3A3531; } /* ---- Box đỏ/xanh/vàng cảnh báo (nền pastel sáng) ---- */ html[data-theme="dark"] .gr2ai-card.bad, html[data-theme="dark"] .kho-ai-chip.bad, html[data-theme="dark"] .kx-card.bad, html[data-theme="dark"] .exp-badge.bad, html[data-theme="dark"] .tbx-batch-row.bad, html[data-theme="dark"] .ii-match.none, html[data-theme="dark"] .settings-danger{ background:rgba(224,138,126,.12)!important; color:var(--down); border-color:rgba(224,138,126,.3)!important; } html[data-theme="dark"] .gr2ai-card.warn, html[data-theme="dark"] .kho-ai-chip.warn, html[data-theme="dark"] .kx-card.warn, html[data-theme="dark"] .exp-badge.warn, html[data-theme="dark"] .tbx-prilog, html[data-theme="dark"] .tbx-batch-row.warn, html[data-theme="dark"] .ii-match.sug{ background:rgba(240,180,90,.12)!important; color:var(--warn); border-color:rgba(240,180,90,.3)!important; } html[data-theme="dark"] .gr2ai-card.ok, html[data-theme="dark"] .kx-card.idea, html[data-theme="dark"] .gr2pk-row.added, html[data-theme="dark"] .ii-match.ok{ background:rgba(127,185,140,.12)!important; color:var(--up); border-color:rgba(127,185,140,.3)!important; } html[data-theme="dark"] .ii-match.new{ background:var(--paper-2)!important; color:var(--ink-3); border-color:var(--hair)!important; } /* ---- report delta pill (nền pastel sáng) ---- */ html[data-theme="dark"] .rpt-delta-pill.up{background:rgba(127,185,140,.14);color:var(--up)} html[data-theme="dark"] .rpt-delta-pill.down{background:rgba(224,138,126,.14);color:var(--down)} /* ---- wholesale brand xanh (giữ thương hiệu, chỉ giảm độ sáng) ---- */ html[data-theme="dark"] .sale-ws-toggle.on, html[data-theme="dark"] .ws-cfg-banner, html[data-theme="dark"] .cust-tag.ws, html[data-theme="dark"] .ws-tag, html[data-theme="dark"] .sr-price.ws, html[data-theme="dark"] .ii-ws-out, html[data-theme="dark"] .kho-action.ws{ color:#7BA8FF; } html[data-theme="dark"] .sale-ws-toggle.on, html[data-theme="dark"] .ws-cfg-banner, html[data-theme="dark"] .cust-tag.ws, html[data-theme="dark"] .ii-ws-out, html[data-theme="dark"] .kho-action.ws{ background:rgba(123,168,255,.12); border-color:rgba(123,168,255,.3); } html[data-theme="dark"] .kho-action.ws svg{stroke:#7BA8FF;} html[data-theme="dark"] .kho-action.ghost{color:var(--mute);} html[data-theme="dark"] .cust-stat{background:var(--surface);border-color:var(--hair);} html[data-theme="dark"] .cust-debt-banner{background:var(--surface);border-color:var(--hair);} /* ---- home CTA ---- */ html[data-theme="dark"] .cta:not(.cta-home):not(.cta-resume){ background:linear-gradient(168deg,#3d3935 0%,#242120 52%,#1a1816 100%); border-color:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.35),0 2px 5px rgba(0,0,0,.2); } html[data-theme="dark"] .cta:not(.cta-home):not(.cta-resume)::before{opacity:.45} html[data-theme="dark"] .cta.cta-home{ background:transparent;color:var(--ink); border:1.5px solid var(--ink); box-shadow:none; } html[data-theme="dark"] .cta.cta-home::before, html[data-theme="dark"] .cta.cta-home::after{display:none} @media (hover:hover){ html[data-theme="dark"] .cta.cta-home:hover{ background:var(--ink);color:var(--paper); box-shadow:0 8px 24px rgba(0,0,0,.28); } } html[data-theme="dark"] .cta.cta-home:active{ background:var(--ink);color:var(--paper); box-shadow:0 6px 20px rgba(0,0,0,.22); } html[data-theme="dark"] .cta-resume{background:var(--surface);border-color:var(--hair);color:var(--ink)} /* ---- celebration overlay (rgba(28,25,23,.92) nền tối → vẫn OK) ---- */ html[data-theme="dark"] .tb-celeb{background:rgba(0,0,0,.92)} /* ---- modal backdrop (rgba(28,25,23,.35) → vẫn OK trên nền tối) ---- */ html[data-theme="dark"] .mbd{background:rgba(0,0,0,.5)} html[data-theme="dark"] .voice-overlay{background:rgba(26,24,22,.92)} html[data-theme="dark"] .ai-cmd-overlay{background:rgba(0,0,0,.55)} html[data-theme="dark"] .gr2-ov{background:rgba(0,0,0,.55)} /* ---- II loading spinner ---- */ html[data-theme="dark"] .ii-spinner{ border-color:rgba(242,238,229,.14); border-top-color:var(--ink); } /* ---- Toast (nền ink) ---- */ html[data-theme="dark"] .toast, html[data-theme="dark"] .tb-toast{ background:var(--ink); color:var(--paper); box-shadow:0 12px 30px -8px rgba(0,0,0,.5); } html[data-theme="dark"] .toast.warn, html[data-theme="dark"] .tb-toast.bad{background:var(--down);color:var(--paper)} /* ---- QR / ảnh QR / preview: GIỮ NỀN TRẮNG (in/scan) ---- */ html[data-theme="dark"] .tb-qr, html[data-theme="dark"] .chk-transfer-img, html[data-theme="dark"] .transfer-qr-preview img{ background:#fff; } /* ---- Stock dot xanh dương (transfer) ---- */ html[data-theme="dark"] .order-dot.transfer{background:#7BA8FF!important;box-shadow:0 0 0 3px rgba(123,168,255,.12)} html[data-theme="dark"] .order-dot.cash{background:#9A938A!important;box-shadow:0 0 0 3px rgba(154,147,138,.12)} html[data-theme="dark"] .order-dot.debt{background:var(--down)!important;box-shadow:0 0 0 3px rgba(224,138,126,.12)} /* ----sale-row stock low/out (hardcoded amber/red) ---- */ html[data-theme="dark"] .sale-row .sr-stock.low{color:var(--warn)} html[data-theme="dark"] .sale-row .sr-stock.out{color:var(--down)} /* ---- print / receipt template: KHÔNG override (giữ nền trắng) ---- */ /* .rpt-print, .receipt, #receiptPrint, .printer-template vẫn sáng */