/* ZodyHunt — khung giao diện kiểu app macOS (đen / cam), dùng chung cho mọi tool (gg làm trước, 10/2026).
   Nạp SAU css/zh.css, gắn class "mx" vào <body>. Hành vi (thanh bên, menu tài khoản, bộ lọc, ngăn trượt): js/macshell.js.
   Quy tắc màu: cam CHỈ cho mục đang chọn, tool đang mở, bộ lọc đang bật, số thông báo, 1 nút chính mỗi màn (.pri).
   Nút phụ (Xuất CSV…) đen (.p / .d). Còn lại trắng / xám. Màu dữ liệu (điểm, biểu đồ, nhãn TM…) giữ nguyên. */
body.mx{
  --mx-bar:#141414;--mx-bar2:#242424;--mx-bar-line:#2c2c2c;--mx-bar-fg:#ECECEC;--mx-bar-mut:#9B9B9B;
  --mx-acc:#FF6A00;--mx-acc-t:#E25500;--mx-acc-w:rgba(255,106,0,.12);
  --bg:#F3F3F4;--side:#ECECEE;--surface:#FFFFFF;--fg:#1D1D1F;--fg2:#3A3A3C;--mut:#6E6E73;--line:#E2E2E5;--line2:#F2F2F4;--hover:rgba(0,0,0,.04);
  --acc:#FF6A00;--acc2:#E25500;--acct:#E25500;--accw:rgba(255,106,0,.12);--ink:#1D1D1F;
  --mx-dark:#1D1D1F;--mx-dark-fg:#FFFFFF;
  --mx-warn:#FFF7D6;--mx-warn-line:#F1E2A2;--mx-warn-fg:#5B4A00;
  --mx-side-w:232px;
  margin:0;background:var(--bg);color:var(--fg);
  font:400 13.5px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Be Vietnam Pro",sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  body.mx{--bg:#1C1C1E;--side:#232325;--surface:#2A2A2C;--fg:#F2F2F7;--fg2:#D1D1D6;--mut:#98989D;--line:#3A3A3C;--line2:#313133;--hover:rgba(255,255,255,.05);
    --accw:rgba(255,106,0,.16);--mx-acc-w:rgba(255,106,0,.16);--acct:#FF8A3D;--mx-acc-t:#FF8A3D;--mx-dark:#E5E5EA;--mx-dark-fg:#1D1D1F;
    --mx-warn:#3A3214;--mx-warn-line:#5A4C1A;--mx-warn-fg:#F3E3A2;--ok:#4ADE80;--okw:#052E16;--bad:#F87171}
}
/* chỉ 2 độ đậm: 400 / 600 */
.mx b,.mx strong,.mx th,.mx h1,.mx h2,.mx h3,.mx h4,.mx .chip,.mx .lk,.mx .gscore,.mx .bdg span,.mx .sc,.mx .gcls,.mx .st,.mx .livebadge,.mx .gt,.mx .kpi b,.mx .btn,.mx .gtm,.mx .gsp,.mx .sgb{font-weight:600}
.mx :where(button,input,select,textarea){font:inherit;font-size:13px}
.mx :where(a){color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px}
.mx :where(a):hover{color:var(--fg);text-decoration-color:currentColor}

/* ---------- nút ---------- */
.mx :where(button),.mx .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:4px 12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:7px;font-weight:400;cursor:pointer;text-decoration:none;line-height:1.2;white-space:nowrap}
.mx :where(button):hover,.mx .btn:hover{border-color:color-mix(in srgb,var(--fg) 30%,var(--line));color:var(--fg)}
.mx button.p,.mx .btn.p,.mx button.d,.mx .btn.d{background:var(--mx-dark);border-color:var(--mx-dark);color:var(--mx-dark-fg);font-weight:600}
.mx button.p:hover,.mx .btn.p:hover,.mx button.d:hover,.mx .btn.d:hover{background:color-mix(in srgb,var(--mx-dark) 85%,var(--mx-acc));color:var(--mx-dark-fg)}
.mx button.pri,.mx .btn.pri{background:var(--mx-acc);border-color:var(--mx-acc);color:#fff;font-weight:600}
.mx button.pri:hover,.mx .btn.pri:hover{background:var(--mx-acc-t);border-color:var(--mx-acc-t);color:#fff}
.mx button:disabled{opacity:.5;cursor:default}
.mx :where(input,select,textarea){min-height:30px;padding:4px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--fg)}
.mx textarea{min-height:60px}
.mx input:focus-visible,.mx select:focus-visible,.mx textarea:focus-visible,.mx button:focus-visible,.mx a:focus-visible{outline:2px solid color-mix(in srgb,var(--mx-acc) 55%,transparent);outline-offset:1px}
.mx .chip{font-size:11px;letter-spacing:.02em;border-radius:5px;padding:2px 7px;background:var(--line);color:var(--fg2)}
.mx .chip.pro{background:var(--line);color:var(--fg)}

/* ---------- thanh công cụ (đen) ---------- */
.mx-bar{position:sticky;top:0;z-index:50;height:48px;background:var(--mx-bar);color:var(--mx-bar-fg);display:flex;align-items:center;gap:14px;padding:0 14px 0 12px;border-bottom:1px solid #000}
.mx-bar a{text-decoration:none;color:inherit}
/* logo THẬT (img/logo-dark.png — bản cho nền tối, dùng cả light lẫn dark mode vì thanh luôn đen); màn rất hẹp: favicon */
.mx-logo{display:inline-flex;align-items:center;flex:none;line-height:0}
.mx-logo img.full{height:27px;width:auto;display:block}
.mx-logo img.mini{height:26px;width:26px;display:none;border-radius:6px}
.mx-tools{display:flex;gap:2px;background:var(--mx-bar2);border:1px solid var(--mx-bar-line);border-radius:8px;padding:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.mx-tools::-webkit-scrollbar{display:none}
.mx-tools a{padding:3px 11px;border-radius:6px;font-size:12.5px;color:var(--mx-bar-mut);white-space:nowrap;line-height:20px}
.mx-tools a:hover{color:#fff;background:#303030}
.mx-tools a.on{background:var(--mx-acc);color:#fff;font-weight:600}
.mx-sp{flex:1}
.mx-search{display:flex;align-items:center;gap:6px;background:var(--mx-bar2);border:1px solid var(--mx-bar-line);border-radius:7px;padding:0 8px;height:30px;width:min(300px,28vw);color:var(--mx-bar-mut)}
.mx-search input{all:unset;flex:1;min-width:0;color:#fff;font-size:13px}
.mx-search input::placeholder{color:#8a8a8a}
.mx-search:focus-within{border-color:#555}
.mx-ib{all:unset;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;color:var(--mx-bar-fg);cursor:pointer}
.mx-ib:hover{background:#2a2a2a}
.mx-ib:focus-visible{outline:2px solid var(--mx-acc)}
#mxMenuBtn{display:none}
.mx-acct{position:relative}
.mx-avbtn{all:unset;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:2px 4px 2px 2px;border-radius:99px}
.mx-avbtn:hover{background:#2a2a2a}
.mx-avbtn:focus-visible{outline:2px solid var(--mx-acc)}
.mx-av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#3A3A3C;color:#fff;font-style:normal;font-weight:600;font-size:13px;text-transform:uppercase;flex:none}
.mx-caret{font-size:10px;color:var(--mx-bar-mut)}
.mx-menu{position:absolute;right:0;top:40px;width:280px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:6px;z-index:60}
.mx-mhead{display:flex;gap:10px;align-items:center;padding:8px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.mx-mhead .mx-av{width:36px;height:36px;font-size:15px}
.mx-mhead #who{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.mx-mhead .chip{margin-top:3px}
.mx-menu a:not(.btn),.mx-menu button.mi{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:6px;font-size:13px;cursor:pointer;color:var(--fg)}
.mx-menu a:hover,.mx-menu button.mi:hover{background:var(--hover)}
.mx-menu a:focus-visible,.mx-menu button.mi:focus-visible{outline:2px solid var(--mx-acc)}
.mx-menu .ic{width:16px;text-align:center;color:var(--mut)}
.mx-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.mx-lang{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;font-size:13px}
.mx-lang span{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.mx-lang button{all:unset;padding:3px 9px;font-size:12px;cursor:pointer;color:var(--fg2)}
.mx-lang button.on{background:var(--mx-acc);color:#fff;font-weight:600}

/* ---------- cửa sổ: thanh bên + nội dung ---------- */
.mx-win{display:grid;grid-template-columns:var(--mx-side-w) minmax(0,1fr);min-height:calc(100vh - 48px)}
.mx-side{position:sticky;top:48px;height:calc(100vh - 48px);overflow-y:auto;background:var(--side);border-right:1px solid var(--line);padding:8px 8px 12px;display:flex;flex-direction:column;gap:1px}
.mx-gt{font-size:11px;font-weight:600;color:var(--mut);padding:12px 10px 4px;white-space:nowrap;overflow:hidden}
.mx-gt:first-child{padding-top:4px}
.mx-it{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;padding:5px 10px;border-radius:6px;font-size:13px;color:var(--fg);cursor:pointer;white-space:nowrap}
.mx-it:hover{background:var(--hover)}
.mx-it:focus-visible{outline:2px solid color-mix(in srgb,var(--mx-acc) 60%,transparent)}
.mx-it .mx-ic{flex:none;width:16px;height:16px;color:var(--mut)}
.mx-it .l{flex:1;overflow:hidden;text-overflow:ellipsis}
.mx-it .c{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.mx-it .c.bdg{background:var(--mx-acc);color:#fff;border-radius:99px;padding:0 6px;min-width:18px;text-align:center;font-weight:600;line-height:17px}
.mx-it.on{background:var(--mx-acc);color:#fff}
.mx-it.on .mx-ic,.mx-it.on .c{color:#fff}
.mx-it.on .c.bdg{background:#fff;color:var(--mx-acc-t)}
.mx-sidefoot{margin-top:auto;padding-top:10px}
.mx-collapse{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;padding:5px 10px;border-radius:6px;font-size:12px;color:var(--mut);cursor:pointer}
.mx-collapse:hover{background:var(--hover);color:var(--fg)}
.mx-collapse svg{width:16px;height:16px;flex:none;transition:transform .15s}
body.mx-collapsed{--mx-side-w:56px}
body.mx-collapsed .mx-gt{height:1px;padding:6px 0;margin:4px 10px;font-size:0;border-top:1px solid var(--line)}
body.mx-collapsed .mx-gt:first-child{border-top:0;padding:0}
body.mx-collapsed .mx-it{justify-content:center;padding:7px 0;position:relative}
body.mx-collapsed .mx-it .l,body.mx-collapsed .mx-it .c:not(.bdg),body.mx-collapsed .mx-collapse span{display:none}
body.mx-collapsed .mx-it .c.bdg{position:absolute;top:1px;right:4px;font-size:10px;padding:0 4px;min-width:14px;line-height:14px}
body.mx-collapsed .mx-collapse{justify-content:center}
body.mx-collapsed .mx-collapse svg{transform:rotate(180deg)}
.mx-main{min-width:0;padding:18px 26px 40px}
.mx-scrim{display:none}

/* ---------- đầu trang nội dung: tiêu đề + ô số liệu nhỏ ---------- */
.mx-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.mx-head h1{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.mx-head .mx-sub{margin:2px 0 0;color:var(--mut);font-size:12.5px;max-width:720px}
.mx-head .mx-ht{flex:1;min-width:220px}
.mx-kpis{display:flex;gap:8px;flex-wrap:wrap}
.mx-kpi{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 12px;min-width:92px}
.mx-kpi b{display:block;font-size:18px;line-height:1.25;font-variant-numeric:tabular-nums}
.mx-kpi span{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap}

/* ---------- dòng cảnh báo mảnh (vàng nhạt) + dòng ghi chú ---------- */
.mx-warn{display:flex;align-items:center;gap:10px;background:var(--mx-warn);border:1px solid var(--mx-warn-line);color:var(--mx-warn-fg);border-radius:8px;padding:4px 6px 4px 12px;font-size:12.5px;margin:0 0 10px;min-height:34px}
.mx-warn>span{flex:1;min-width:0}
.mx-warn button,.mx-warn .btn{min-height:26px;padding:2px 10px;font-size:12px;background:var(--mx-dark);border-color:var(--mx-dark);color:var(--mx-dark-fg)}
.mx .mx-warn button:hover,.mx .mx-warn .btn:hover,.mx .mx-warn button:active,.mx .mx-warn .btn:active{background:color-mix(in srgb,var(--mx-dark) 85%,var(--mx-acc));border-color:var(--mx-dark);color:var(--mx-dark-fg)}
.mx-warn.ok{background:var(--surface);border-color:var(--line);color:var(--mut)}
.mx-note{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 6px 4px 12px;font-size:12.5px;color:var(--fg2);margin:0 0 10px;min-height:34px}
.mx-note>span{flex:1;min-width:0}
.mx-note .btn,.mx-note button{min-height:26px;padding:2px 10px;font-size:12px}
/* khung "upsell" cũ (trong hộp chi tiết, cuối danh sách): thành dòng mảnh trung tính */
.mx .upsell{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 6px 6px 12px;margin:10px 0;font-size:12.5px}
.mx .upsell span{flex:1;min-width:200px}
.mx .upsell .btn.p{min-height:26px;padding:2px 10px;font-size:12px}

/* ---------- thanh lọc: tối đa 5 điều khiển + "⚙ Bộ lọc (n)" ---------- */
.mx-filters{margin:0 0 12px}
.mx-fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mx-fbar label.f,.mx-adv label.f{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);white-space:nowrap}
.mx-fbar label.f.grow{flex:1;min-width:170px}
.mx-fbar label.f.grow input{flex:1;min-width:0}
.mx-fbar label.f.grow.mx-q{max-width:270px}
.mx-fbar .sp{flex:1}
.mx .mx-on,.mx select.mx-on,.mx input.mx-on{border-color:var(--mx-acc);background-color:var(--mx-acc-w);color:var(--mx-acc-t)}
.mx-tagset{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center}
.mx-tagset .tl{font-size:12px;color:var(--mut);margin-right:2px}
.mx-tag{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 10px;font-size:12.5px;cursor:pointer;color:var(--fg2);user-select:none}
.mx-tag input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.mx-tag:has(input:checked){border-color:var(--mx-acc);background:var(--mx-acc-w);color:var(--mx-acc-t)}
.mx-tag:has(input:focus-visible){outline:2px solid color-mix(in srgb,var(--mx-acc) 55%,transparent)}
.mx-tag:has(input:disabled){opacity:.5;cursor:default}
.mx-advbtn.mx-on{border-color:var(--mx-acc);background:var(--mx-acc-w);color:var(--mx-acc-t);font-weight:600}
.mx-adv{margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.mx-adv .mx-advgrid{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.mx-adv label.f{display:inline-flex}
.mx-adv .tags{display:flex;gap:6px;flex-wrap:wrap}
.mx-adv .tags label{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer}
.mx-adv .tags label:has(input:checked){border-color:var(--mx-acc);background:var(--mx-acc-w);color:var(--mx-acc-t)}
.mx-advfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line2)}
.mx-advfoot .sp{flex:1}
.mx-lock{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--line2);border-radius:8px;padding:8px 10px;margin:0 0 10px;font-size:12.5px}
.mx-lock span{flex:1;min-width:200px}
.mx-adv.locked .mx-advgrid{opacity:.55}
.mx-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mx-chips:empty{display:none}
.mx-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--mx-acc);background:var(--mx-acc-w);color:var(--mx-acc-t);border-radius:99px;padding:1px 4px 1px 10px;font-size:12px;max-width:100%}
.mx-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx .mx-chip button{all:unset;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:11px;color:inherit}
.mx .mx-chip button:hover{background:rgba(255,106,0,.2)}
.mx .mx-chip button:focus-visible{outline:2px solid var(--mx-acc)}
.mx-chipclr{all:unset;font-size:12px;color:var(--mut);cursor:pointer;padding:1px 6px;text-decoration:underline}
/* công tắc phân đoạn (vd Shopping | Ảnh) */
.mx-seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)}
.mx .mx-seg button{border:0;border-radius:0;min-height:28px;padding:2px 12px;font-size:12.5px;color:var(--fg2);background:transparent}
.mx .mx-seg button+button{border-left:1px solid var(--line)}
.mx .mx-seg button.on{background:var(--mx-acc-w);color:var(--mx-acc-t);font-weight:600}

/* ---------- bảng kiểu Finder ---------- */
.mx table.tb,.mx table.kw{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13px}
.mx table.tb th,.mx table.kw th{background:var(--surface);color:var(--mut);font-size:11.5px;font-weight:600;padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.mx table.tb td,.mx table.kw td{padding:5px 10px;border-top:1px solid var(--line2);vertical-align:middle}
.mx table.tb tr:first-child td,.mx table.kw tr:first-child td{border-top:0}
.mx table.tb tr:hover td,.mx table.kw tr:hover td{background:var(--hover)}
.mx table.tb tr.click:hover td{background:var(--hover)}
.mx table.tb img{width:32px;height:32px;border-radius:5px}
.mx table.tb .sub2,.mx .sub2{font-size:11.5px}
.mx .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mx .reshead{margin:6px 0 8px;gap:8px;align-items:baseline}
.mx .reshead b{font-size:13px}
.mx .reshead .mut{font-size:12px}
.mx .more{margin:14px 0 24px}

/* ---------- khối / thẻ / hộp chi tiết ---------- */
.mx .panel{border-radius:10px;padding:14px 16px}
.mx .panel h3{font-size:15px}
.mx-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 12px}
.mx-block{margin:0 0 18px}
.mx-block>h2{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-size:14px}
.mx-block>h2 .mut{font-weight:400;font-size:12px}
.mx .card{border-radius:10px}
.mx .mcard{border-radius:10px}
.mx .modal{background:rgba(0,0,0,.4)}
.mx .modal .box{border-radius:12px;border:1px solid var(--line)}
.mx .modal .x{min-height:28px;padding:2px 8px}
.mx .gt{font-size:11px;letter-spacing:.04em}
.mx .kwl a,.mx .kwl span.lk{text-decoration:none;color:var(--fg2);border-color:var(--line);font-size:12.5px}
.mx .kwl a:hover{background:var(--hover);color:var(--fg)}
.mx .lk.gb,.mx .lk.cr{background:var(--line2);color:var(--fg2)}
.mx .lanes{margin:0 0 10px}
.mx .lanes button{border-radius:99px;min-height:28px;padding:2px 12px;font-size:12.5px}
.mx .lanes button.on{background:var(--mx-acc-w);border-color:var(--mx-acc);color:var(--mx-acc-t);font-weight:600}
.mx .lanenote{margin:-4px 0 10px;font-size:12px}
.mx .months button{min-height:26px;padding:2px 10px;font-size:12px}
.mx .months button.on{background:var(--mx-acc-w);border-color:var(--mx-acc);color:var(--mx-acc-t);font-weight:600}
.mx .sgbar{border-color:var(--line);box-shadow:0 6px 20px rgba(0,0,0,.08);border-radius:10px}
.mx .alert{border-radius:8px}
.mx .alert.new{border-left:3px solid var(--fg)}
.mx .est{background:var(--line2);border-radius:8px}
.mx .st.running,.mx .st.queued{background:var(--line2);color:var(--fg2)}
.mx .exseas .ss.now{border-color:var(--fg2)}
.mx .gscore{height:22px;min-width:30px;border-radius:6px;font-size:12px}
.mx .cell{border-radius:8px}
.mx .sgbox,.mx .trendbox,.mx .exday .it,.mx .atc,.mx .adrow{border-radius:8px}
.mx .msg:empty{display:none}

/* ---------- ngăn trượt bên phải (vd Tính lãi) ---------- */
.mx-drawer{position:fixed;inset:0;z-index:110}
.mx-drawer .bg{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.mx-drawer .pane{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--bg);border-left:1px solid var(--line);box-shadow:-12px 0 36px rgba(0,0,0,.18);display:flex;flex-direction:column;animation:mxin .16s ease-out}
@keyframes mxin{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
.mx-dhead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.mx-dhead b{flex:1;font-size:14px}
.mx-dbody{overflow-y:auto;padding:14px}
.mx-dbody .panel{margin:0!important}
.mx-dbody .calc{grid-template-columns:1fr 1fr}
.mx-dbody .cells{grid-template-columns:1fr 1fr}

/* ---------- đăng nhập ---------- */
.mx .login{max-width:420px;margin:64px auto;padding:0 16px}

/* ---------- điện thoại: thanh bên thành ngăn trượt ---------- */
@media (max-width:767px){
  .mx-bar{gap:8px;padding:0 8px}
  #mxMenuBtn{display:inline-grid}
  .mx-tools a{padding:3px 8px;font-size:12px}
  .mx-search{width:auto;flex:0 0 30px;padding:0;justify-content:center;border-color:transparent;background:transparent}
  .mx-search input{display:none}
  .mx-search.open{position:absolute;left:8px;right:8px;top:9px;width:auto;flex:none;background:var(--mx-bar2);border-color:#555;padding:0 8px;justify-content:flex-start;z-index:5}
  .mx-search.open input{display:block}
  .mx-sp{display:none}
  .mx-caret{display:none}
  .mx-win{grid-template-columns:minmax(0,1fr)}
  .mx-side{position:fixed;top:48px;left:0;bottom:0;height:auto;width:270px;z-index:70;transform:translateX(-105%);transition:transform .18s ease-out;box-shadow:12px 0 30px rgba(0,0,0,.2)}
  body.mx-open .mx-side{transform:none}
  body.mx-open .mx-scrim{display:block;position:fixed;inset:48px 0 0 0;background:rgba(0,0,0,.3);z-index:65}
  body.mx-collapsed{--mx-side-w:232px}
  .mx-collapse{display:none}
  .mx-main{padding:14px 16px 32px}
  .mx-head{gap:10px}
  .mx-kpi{min-width:0;flex:1;padding:4px 10px}
  .mx-kpi b{font-size:17px}
  .mx-fbar label.f{flex:1 1 calc(50% - 4px);flex-direction:column;align-items:stretch;gap:2px;font-size:11.5px;min-width:0}
  .mx-fbar label.f select,.mx-fbar label.f input{width:100%;min-width:0}
  .mx-fbar label.f.grow{flex-basis:100%}
  .mx-fbar label.f.grow.mx-q{max-width:none}
  .mx-warn,.mx-note{flex-wrap:wrap;padding:6px 10px}
}
@media (max-width:480px){.mx-logo img.full{display:none}.mx-logo img.mini{display:block}.mx-tools{flex:1}}

/* sửa chung 09/10/2026 (góp ý khi nhân khuôn sang các tool) */
.mx [hidden]{display:none!important}
.mx input[type=checkbox],.mx input[type=radio]{min-height:0;padding:0;accent-color:var(--mx-acc,#FF6A00)}
.mx .mx-fbar select{max-width:240px}
.mx-menu a.btn{margin:4px 0;width:100%;box-sizing:border-box}

/* màu trạng thái "đang bật" đậm, dễ nhìn (sếp góp ý 09/10/2026) — đè các kiểu nhạt cũ ở mọi tool */
html body.mx :is(.lanes,.months,.chips,.seg,.brvm,.cpos,.depths,.mx-seg) button.on,
html body.mx .ya .ch.on,html body.mx .mx-plat a.on{background:var(--mx-acc);border-color:var(--mx-acc);color:#fff;font-weight:600}
html body.mx :is(.lanes,.months,.chips,.seg,.brvm,.cpos,.depths,.mx-seg) button.on :is(span,small,b,i),
html body.mx .ya .ch.on :is(span,small){color:rgba(255,255,255,.9)}
html body.mx :is(.mx-tag,.tags label,.groups label):has(input:checked){border-color:var(--mx-acc);background:rgba(255,106,0,.14);color:#B83F00;font-weight:600}
html body.mx :is(select,input,textarea).mx-on{background-color:var(--surface);border-color:var(--mx-acc);box-shadow:inset 0 0 0 1px var(--mx-acc);color:var(--fg);font-weight:600}
html body.mx .mx-advbtn.mx-on{background:var(--surface);border-color:var(--mx-acc);box-shadow:inset 0 0 0 1px var(--mx-acc);color:var(--fg);font-weight:600}
html body.mx .mx-chip{background:var(--mx-dark,#141414);border-color:var(--mx-dark,#141414);color:var(--mx-dark-fg,#fff);font-weight:500}
html body.mx .mx-chip button{color:var(--mx-acc)}
html body.mx .mx-chip button:hover{background:rgba(255,106,0,.25)}
@media (prefers-color-scheme:dark){html body.mx :is(.mx-tag,.tags label,.groups label):has(input:checked){color:#FF9A55}}
html body.mx .zv-bar button.on{background:var(--mx-acc);color:#fff}

/* ================= quy chuẩn đồng bộ 8 tool (sếp chốt 09/10/2026) ================= */
/* thang điểm chung 0–100 (A8): ≥70 xanh lá · 45–69 cam · <45 xám. Biểu đồ / thanh số liệu dùng --mx-chart (trung tính), KHÔNG dùng cam khung */
body.mx{--mx-score-hi:#15803D;--mx-score-hi-w:rgba(22,163,74,.14);--mx-score-mid:#B45309;--mx-score-mid-w:rgba(245,158,11,.18);--mx-score-lo:#6E6E73;--mx-score-lo-w:rgba(120,120,128,.14);
  --mx-chart:#55555A;--mx-chart-2:#2563EB;--mx-chart-w:rgba(85,85,90,.16);--mx-chart-grid:#E5E5EA}
@media (prefers-color-scheme:dark){body.mx{--mx-score-hi:#4ADE80;--mx-score-hi-w:rgba(74,222,128,.16);--mx-score-mid:#FBBF24;--mx-score-mid-w:rgba(251,191,36,.16);--mx-score-lo:#A1A1AA;--mx-score-lo-w:rgba(161,161,170,.16);
  --mx-chart:#C7C7CC;--mx-chart-2:#60A5FA;--mx-chart-w:rgba(199,199,204,.18);--mx-chart-grid:#3A3A3C}}
.mx-score{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:6px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;background:var(--mx-score-lo-w);color:var(--mx-score-lo)}
.mx-score.hi{background:var(--mx-score-hi-w);color:var(--mx-score-hi)}
.mx-score.mid{background:var(--mx-score-mid-w);color:var(--mx-score-mid)}
.mx-score.lo{background:var(--mx-score-lo-w);color:var(--mx-score-lo)}
.mx-score.solid.hi{background:var(--mx-score-hi);color:#fff}.mx-score.solid.mid{background:var(--mx-score-mid);color:#fff}.mx-score.solid.lo{background:var(--mx-score-lo);color:#fff}
.mx-txt-hi{color:var(--mx-score-hi)}.mx-txt-mid{color:var(--mx-score-mid)}.mx-txt-lo{color:var(--mx-score-lo)}

/* gói Free (A9): 1 dòng nâng cấp mảnh + 1 nút đen; trong bảng ⚙ khoá chỉ còn chữ + link chữ */
.mx-upsell{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 6px 4px 12px;margin:0 0 10px;min-height:34px;font-size:12.5px;color:var(--fg2)}
.mx-upsell>span{flex:1;min-width:180px}
.mx-upsell .btn{min-height:26px;padding:2px 10px;font-size:12px}
.mx-lock a.mx-uplink{color:var(--fg);font-weight:600;white-space:nowrap}

/* hộp hệ thống thay alert / confirm / prompt (MacShell.alert / confirm / prompt) */
.mx-dlg{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px}
.mx-dlgbg{position:absolute;inset:0;background:rgba(0,0,0,.32)}
.mx-dlgbox{position:relative;width:min(380px,100%);background:var(--surface,#fff);color:var(--fg,#1D1D1F);border:1px solid var(--line,#E2E2E5);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.28);padding:18px 18px 14px;animation:mxpop .14s ease-out;font:400 13.5px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Be Vietnam Pro",sans-serif}
@keyframes mxpop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
.mx-dlgmsg{margin:0 0 12px;white-space:pre-wrap;word-break:break-word;font-size:13.5px}
.mx-dlgin{display:block;width:100%;box-sizing:border-box;margin:0 0 12px;min-height:32px;padding:5px 9px;border:1px solid var(--line,#E2E2E5);border-radius:7px;background:var(--bg,#fff);color:var(--fg,#1D1D1F);font:inherit}
.mx-dlgin:focus-visible{outline:2px solid color-mix(in srgb,var(--mx-acc,#FF6A00) 55%,transparent);outline-offset:1px}
.mx-dlgbtns{display:flex;justify-content:flex-end;gap:8px}
.mx-dlgbtns button{min-width:76px}
.mx .mx-dlgbtns button.mx-danger,.mx-dlgbtns button.mx-danger{background:#DC2626;border-color:#DC2626;color:#fff;font-weight:600}
@media (max-width:480px){.mx-dlg{align-items:end}.mx-dlgbox{width:100%}.mx-dlgbtns button{flex:1}}

/* thanh chuyển tool đủ 8 tool: màn hẹp cuộn ngang, mép bị cắt thì mờ dần (không cắt chữ giữa chừng) */
.mx-tools a{flex:none}
.mx-tools.mx-fr{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
.mx-tools.mx-fl{-webkit-mask-image:linear-gradient(to right,transparent,#000 22px);mask-image:linear-gradient(to right,transparent,#000 22px)}
.mx-tools.mx-fl.mx-fr{-webkit-mask-image:linear-gradient(to right,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to right,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
@media (max-width:1100px){.mx-tools a{padding:3px 8px}}
@media (max-width:767px){.mx-tools{scroll-snap-type:x proximity;scroll-padding:0 22px}.mx-tools a{scroll-snap-align:start;padding:3px 9px}}

/* nút ▦ Lưới ảnh | ☰ Bảng (js/zh-view.js) dùng kiểu .mx-seg */
.mx .zv-bar{display:flex;justify-content:flex-end;margin:0 0 8px}