:root{--bg:#f1f1ec;--surface:#fff;--surface-2:#fafbf7;--surface-3:#f2f3ee;--line-nhat:#e8e9e3;--line:#dedfd8;--line-dam:#d2d4cb;--ink:#171817;--ink-2:#2f332c;--ink-3:#4f534b;--muted:#6d7167;--muted-2:#8b8f84;--lime:#d8ff00;--olive:#7e8b23;--lime-dam:#4a5a08;--do:#a8452a;--do-nen:#fbeee9;--vang:#a87c0a;--vang-nen:#fbf4e1;--xanh:#2f7a3d;--xanh-nen:#eaf5ec;--r-sm:12px;--r-md:20px;--r-lg:24px;--r-pill:999px;--shadow-1:0 1px 2px #1718170a, 0 2px 8px #1718170a;--shadow-2:0 12px 32px #17181714;--focus:0 0 0 3px #7e8b2359;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Be Vietnam Pro,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);font-size:14px;line-height:1.5}button,input,textarea,select{font:inherit;color:inherit}img{display:block}.shell{grid-template-columns:248px 1fr;min-height:100vh;display:grid}.side{flex-direction:column;gap:6px;height:100vh;padding:20px 16px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.02em;align-items:center;gap:10px;padding:6px 10px 22px;font-size:17px;font-weight:800;display:flex}.brand-dot{background:var(--ink);border-radius:10px;place-items:center;width:30px;height:30px;display:grid}.brand-dot i{background:var(--lime);border-radius:50%;width:11px;height:11px}.nav-btn{border-radius:var(--r-sm);color:var(--ink-3);cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:12px;width:100%;padding:11px 14px;font-weight:500;display:flex}.nav-btn:hover{background:var(--surface-3);color:var(--ink)}.nav-btn.on{background:var(--ink);color:#fff}.side-foot{margin-top:auto}.main{width:100%;max-width:1240px;padding:28px 32px 48px}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;display:flex}.page-head h1{letter-spacing:-.035em;margin:0;font-size:34px;font-weight:800;line-height:1.1}.page-head p{color:var(--muted);margin:6px 0 0}.bento{grid-template-columns:repeat(12,1fr);gap:16px;display:grid}.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-1);min-width:0;padding:22px}.card h2{letter-spacing:-.01em;align-items:center;gap:8px;margin:0 0 14px;font-size:15px;font-weight:700;display:flex}.card.accent{background:var(--lime)}.card.dark{background:var(--ink);color:#fff}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}.big-num{letter-spacing:-.04em;font-size:44px;font-weight:800;line-height:1}.label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:500}.card.accent .label,.card.dark .label{color:inherit;opacity:.7}.muted{color:var(--muted)}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.between{justify-content:space-between}.stack{flex-direction:column;gap:14px;display:flex}.btn{border-radius:var(--r-pill);cursor:pointer;background:var(--ink);color:#fff;white-space:nowrap;border:0;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-weight:600;display:inline-flex}.btn:hover{background:var(--ink-2)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.ghost{background:var(--surface-3);color:var(--ink)}.btn.ghost:hover{background:var(--line-nhat)}.btn.danger{background:var(--do-nen);color:var(--do)}.btn.sm{padding:7px 13px;font-size:13px}.btn:focus-visible,.input:focus,.textarea:focus,.select:focus,.switch:focus-visible{box-shadow:var(--focus);outline:none}.field{flex-direction:column;gap:6px;display:flex}.field>span{font-size:13px;font-weight:600}.field small{color:var(--muted)}.input,.select,.textarea{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);width:100%;padding:11px 14px}.textarea{resize:vertical;min-height:220px;line-height:1.6}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.seg{background:var(--surface-3);border-radius:var(--r-pill);gap:4px;padding:4px;display:inline-flex}.seg button{border-radius:var(--r-pill);cursor:pointer;color:var(--ink-3);background:0 0;border:0;padding:8px 16px;font-weight:600}.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}.switch{border-radius:var(--r-pill);background:var(--line-dam);cursor:pointer;border:0;flex:none;width:46px;height:28px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.switch.on{background:var(--ink)}.switch.on:after{background:var(--lime);transform:translate(18px)}.switch:disabled{opacity:.5;cursor:not-allowed}.pill{white-space:nowrap;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-3);align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.pill.ok{background:var(--xanh-nen);color:var(--xanh)}.pill.warn{background:var(--vang-nen);color:var(--vang)}.pill.err{background:var(--do-nen);color:var(--do)}.pill.lime{background:var(--ink);color:var(--lime)}.dot{background:currentColor;border-radius:50%;width:7px;height:7px}.notice{border-radius:var(--r-md);background:var(--surface-3);color:var(--ink-2);padding:14px 16px;font-size:13px}.notice.warn{background:var(--vang-nen);color:#6b4f05}.notice.err{background:var(--do-nen);color:var(--do)}.qr-box{border-radius:var(--r-md);background:var(--surface-3);flex:none;place-items:center;width:236px;height:236px;display:grid;overflow:hidden}.qr-box img{border-radius:12px;width:220px;height:220px}.avatar{object-fit:cover;background:var(--surface-3);width:44px;height:44px;color:var(--muted);border-radius:50%;flex:none;place-items:center;display:grid}.avatar.lg{width:64px;height:64px}.toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;display:flex}.search{flex:1;min-width:220px;position:relative}.search svg{color:var(--muted);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.search .input{border-radius:var(--r-pill);background:var(--surface);padding-left:40px}.list{flex-direction:column;display:flex}.item{border-bottom:1px solid var(--line-nhat);align-items:center;gap:14px;padding:12px 6px;display:flex}.item:last-child{border-bottom:0}.item .grow{flex:1;min-width:0}.item .name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.item .sub{color:var(--muted);font-size:12px}.item.on{background:linear-gradient(90deg,#d8ff001f,#0000 60%);border-radius:12px}.empty{text-align:center;color:var(--muted);padding:40px 10px}.log{border-bottom:1px solid var(--line-nhat);grid-template-columns:120px 1fr;gap:14px;padding:14px 4px;display:grid}.log:last-child{border-bottom:0}.log .reply{white-space:pre-wrap;background:var(--surface-2);border-radius:12px;margin-top:6px;padding:10px 12px}.bubble{background:var(--surface-3);white-space:pre-wrap;border-radius:16px;max-width:80%;padding:8px 12px}.bubble.me{background:var(--ink);color:#fff;align-self:flex-end}.bubble.bot{background:var(--lime);color:var(--ink);align-self:flex-end}.overlay{z-index:50;background:#17181759;justify-content:flex-end;display:flex;position:fixed;inset:0}.drawer{background:var(--bg);flex-direction:column;gap:16px;width:min(520px,100%);height:100%;padding:24px;display:flex;overflow-y:auto}.login-wrap{place-items:center;min-height:100vh;padding:16px;display:grid}.login{width:min(400px,100%)}.login h1{letter-spacing:-.035em;margin:18px 0 4px;font-size:30px}.toast{background:var(--ink);color:#fff;z-index:60;box-shadow:var(--shadow-2);border-radius:16px;max-width:calc(100% - 32px);padding:10px 18px;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.toast.err{background:var(--do)}.nav-badge{border-radius:var(--r-pill);background:var(--lime);min-width:20px;height:20px;color:var(--ink);place-items:center;margin-left:auto;padding:0 6px;font-size:11px;font-weight:800;display:inline-grid}.nav-btn.on .nav-badge{background:var(--lime)}.draft{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;display:grid}.draft+.draft{margin-top:16px}.ctx{flex-direction:column;gap:6px;max-height:300px;padding-right:4px;display:flex;overflow-y:auto}.table-wrap{overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:13px}.table th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;padding:8px 10px;font-size:11px;font-weight:600}.table td{border-bottom:1px solid var(--line-nhat);vertical-align:top;padding:11px 10px}.table tr:last-child td{border-bottom:0}.table tr.off td{opacity:.5}.rate{gap:4px;display:inline-flex}.rate button{background:var(--surface-3);color:var(--ink-3);border-radius:var(--r-pill);cursor:pointer;border:0;place-items:center;width:32px;height:32px;display:grid}.rate button.up.on{background:var(--ink);color:var(--lime)}.rate button.down.on{background:var(--do);color:#fff}.opt{border-bottom:1px solid var(--line-nhat);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 14px;padding:12px 0;display:flex}.opt>div:first-child{flex:220px}.seg button{white-space:nowrap}.opt:last-child{border-bottom:0}.opt small{color:var(--muted);font-weight:400;display:block}@media (width<=900px){.shell{grid-template-columns:1fr}.side{z-index:20;background:var(--bg);flex-flow:row;align-items:center;gap:4px;height:auto;padding:10px 12px;position:sticky;top:0;overflow-x:auto}.brand{padding:0 8px 0 0}.brand span{display:none}.nav-btn{width:auto;padding:9px 12px}.nav-btn span{display:none}.side-foot{margin:0 0 0 auto}.main{padding:16px 16px 40px}.page-head h1{font-size:26px}.bento>*{grid-column:span 12}.grid-2{grid-template-columns:1fr}.log{grid-template-columns:1fr;gap:4px}.qr-box{width:100%;max-width:236px}.draft{grid-template-columns:1fr}.nav-badge{margin-left:0}}