/* HD Homes CRM: token HD Group (sao từ tokens.json) + lớp giao diện app. */
:root{
/* Avicasa Boutique Living: giá trị lấy từ ds/avicasa/tokens.json */
--bg:#f9f8f4;--bg-subtle:#f3f1ea;--bg-muted:#efece3;--bg-hover:#e7e3d8;--surface:#ffffff;--border:#123c3d1a;--border-strong:#79716b;
--ink:#1f2937;--ink-muted:#79716b;--ink-faint:#a6a09b;--heading:#123c3d;
--brand:#0f5a5c;--brand-hover:#0c4a4c;--brand-soft:#e4eeec;--on-brand:#ffffff;--brand-text:#0f5a5c;--focus:#0f5a5c;
--gold:#d4af37;--gold-700:#8f741d;--teal-900:#0a3234;--teal-800:#123c3d;
--success:#1f7a44;--warning:#a35c00;--danger:#c4321f;
--tag-gray-bg:#efece3;--tag-gray-text:#57514c;--tag-orange-bg:#fbecdd;--tag-orange-text:#8a4b12;--tag-yellow-bg:#f7efd2;--tag-yellow-text:#6e5814;
--tag-green-bg:#e3f2e8;--tag-green-text:#1d6636;--tag-blue-bg:#e4eeec;--tag-blue-text:#0f5a5c;--tag-purple-bg:#efe8f8;--tag-purple-text:#5b3a8c;--tag-red-bg:#fbe4e2;--tag-red-text:#a12a22;
--font-sans:"Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-serif:"Fraunces",Georgia,serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-card:26px;--radius-full:9999px;
--shadow-card:0 1px 2px 0 rgba(15,90,92,0.04),0 12px 32px -12px rgba(15,90,92,0.18);
--shadow-raised:0 1px 2px 0 rgba(15,90,92,0.06),0 18px 40px -12px rgba(15,90,92,0.28);
/* Màu nhận diện workspace */
--ws-living:#0f5a5c;--ws-living-soft:#e4eeec;--ws-laundry:#4338ca;--ws-laundry-soft:#e0e7ff;
}
.theme-dark{
--bg:#0a3234;--bg-subtle:#0d3a3c;--bg-muted:#124446;--bg-hover:#174f51;--surface:#0f3e40;--border:#ffffff26;--border-strong:#ffffff73;
--ink:#ffffff;--ink-muted:#ffffffbf;--ink-faint:#ffffff73;--heading:#ffffff;--brand:#d4af37;--brand-hover:#e5c04a;--brand-soft:#174f51;--on-brand:#123c3d;--brand-text:#d4af37;--focus:#d4af37;
--success:#7fcf98;--warning:#f0b35c;--danger:#f09a92;
--tag-gray-bg:#174f51;--tag-gray-text:#ffffffd9;--tag-orange-bg:#4a2f17;--tag-orange-text:#f0b37a;--tag-green-bg:#1e3a28;--tag-green-text:#7fcf98;--tag-blue-bg:#174f51;--tag-blue-text:#a7d8d4;--tag-red-bg:#4b2220;--tag-red-text:#f09a92;
--ws-living:#5fb3ad;--ws-laundry:#a5b4fc;
--shadow-card:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
background:var(--bg);color:var(--ink);
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:22px}
*{box-sizing:border-box}
.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i-20{width:20px;height:20px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}
.cap{font:500 12px/16px var(--font-sans)}
.sm{font:400 13px/20px var(--font-sans)}
.h1{font:600 26px/32px var(--font-serif);letter-spacing:-0.26px;color:var(--heading);margin:0}
.h2{font:600 19px/26px var(--font-serif);color:var(--heading);margin:0}
.h3{font:600 14px/20px var(--font-sans);margin:0}
.over{font:600 11px/16px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-700)}
.row{display:flex;align-items:center;gap:8px}
.wrap{flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}

/* Khung app */
.app{display:flex;flex-wrap:wrap;min-height:900px;background:var(--bg)}
.app-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.sb{width:232px;min-height:900px;height:100%;background:var(--bg-subtle);border-right:1px solid var(--border);padding:8px;display:flex;flex-direction:column;gap:2px;font-family:var(--font-sans)}
.ws-btn{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:6px;background:transparent;color:var(--ink);font:600 14px/20px var(--font-sans);cursor:pointer;text-align:left}
.ws-btn:hover{background:var(--bg-hover)}
.ws-logo{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font:700 11px/1 var(--font-sans);flex:none}
.ws-living{background:var(--ws-living)}.ws-laundry{background:var(--ws-laundry)}
.ws-role{display:block;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.sb .hd-nav{min-height:32px}
.sb .hd-nav.is-active{box-shadow:inset 2px 0 0 var(--ws-accent,var(--brand))}
.sbws-living{--ws-accent:var(--ws-living)}.sbws-laundry{--ws-accent:var(--ws-laundry)}
.sb-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:8px}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:56px;padding:10px 24px;border-bottom:1px solid var(--border);background:var(--bg);font-family:var(--font-sans)}
.sel{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);font:500 13px/20px var(--font-sans);cursor:pointer;white-space:nowrap}
.sel:hover{border-color:var(--border-strong)}
.search{display:flex;align-items:center;gap:8px;height:32px;flex:1 1 260px;max-width:440px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-subtle);color:var(--ink-muted);font:400 13px/20px var(--font-sans);cursor:text}
.kbd{display:inline-flex;align-items:center;height:18px;padding:0 5px;border:1px solid var(--border);border-radius:4px;background:var(--bg);font:500 11px/16px var(--font-mono);color:var(--ink-muted)}
.ibtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--ink-muted);cursor:pointer;padding:0}
.ibtn:hover{background:var(--bg-hover);color:var(--ink)}
.badge-n{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font:600 10px/16px var(--font-sans)}
.page{width:100%;max-width:1400px;padding:24px 32px 48px;display:flex;flex-direction:column;gap:20px}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}

/* Ô số */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.stat{border:1px solid var(--border);border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;background:var(--surface)}
.stat__v{font:600 30px/36px var(--font-serif);color:var(--brand)}
.stat--danger .stat__v{color:var(--danger)}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.col-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:16px}
.col-side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}

/* Dòng việc */
.grp{display:flex;align-items:center;gap:8px;padding:4px 0;font:600 13px/20px var(--font-sans);color:var(--ink)}
.grp__n{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.grp--late{color:var(--danger)}
.list{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
.trow{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-bottom:1px solid var(--border)}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--bg-subtle)}
.trow--urgent{box-shadow:inset 3px 0 0 var(--danger)}
.tick{width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border-strong);border-radius:50%;background:transparent;color:transparent;padding:0;cursor:pointer}
.tick:hover{border-color:var(--success);color:var(--success)}
.tick--done{background:var(--success);border-color:var(--success);color:#fff}
.tick .i{width:12px;height:12px;stroke-width:2.5}
.ttl{font:500 14px/20px var(--font-sans);color:var(--ink);margin:0}
.ttl--done{text-decoration:line-through;color:var(--ink-muted)}
.tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 12px/16px var(--font-sans);color:var(--ink-muted);margin-top:2px}
.due{display:inline-flex;align-items:center;gap:4px;font:500 12px/16px var(--font-sans);color:var(--ink-muted);white-space:nowrap}
.due--late{color:var(--danger);font-weight:600}
.due--soon{color:var(--warning)}
.chipb{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--border);border-radius:4px;font:500 11px/16px var(--font-mono);color:var(--ink-muted);white-space:nowrap}
.lk{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:4px;background:var(--bg-muted);color:var(--ink);font:500 12px/16px var(--font-sans);text-decoration:none;white-space:nowrap}
.lk:hover{background:var(--bg-hover)}
.prog{display:inline-flex;align-items:center;gap:6px;font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
.bar{width:44px;height:4px;border-radius:2px;background:var(--bg-hover);overflow:hidden;display:inline-block}
.bar>span{display:block;height:100%;background:var(--success)}
.ract{display:flex;gap:2px;opacity:1}
.prio-urgent{display:inline-flex;align-items:center;gap:4px}

/* Bảng điều khiển */
.panel{border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden}
.panel__h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}
.pitem{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)}
.pitem:last-child{border-bottom:0}
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--border)}
.tab{height:36px;padding:0 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--ink-muted);font:500 13px/20px var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink);border-bottom-color:var(--brand)}
.tab__n{font:500 11px/16px var(--font-sans);padding:0 5px;border-radius:8px;background:var(--bg-muted);color:var(--ink-muted)}
.seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border);border-radius:6px;background:var(--bg)}
.seg__b{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:4px;background:none;color:var(--ink-muted);font:500 13px/20px var(--font-sans);cursor:pointer}
.seg__b.is-active{background:var(--bg-muted);color:var(--ink)}
.fchip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px dashed var(--border-strong);border-radius:14px;background:var(--bg);color:var(--ink-muted);font:500 12px/16px var(--font-sans);cursor:pointer;white-space:nowrap}
.fchip--on{border-style:solid;border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}
.fchip .i{width:14px;height:14px}
.bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--ink);color:var(--bg);font:500 13px/20px var(--font-sans)}
.bulk .hd-btn--secondary{background:transparent;color:var(--bg);border-color:#5a5955}
.tbox{overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.tbl{width:100%;min-width:1000px;border-collapse:collapse;font:400 13px/20px var(--font-sans)}
.tbl th{text-align:left;font:500 12px/16px var(--font-sans);color:var(--ink-muted);padding:8px 10px;border-bottom:1px solid var(--border);background:var(--bg-subtle);white-space:nowrap}
.tbl td{padding:0 10px;height:44px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.is-selected td{background:var(--brand-soft)}
.tbl tr.urgent td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.cbx{width:16px;height:16px;margin:0;accent-color:var(--brand)}

/* Ngăn trượt, hộp thoại, toast */
.drawer{background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-raised);display:flex;flex-direction:column;font-family:var(--font-sans)}
.dsec{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.props{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.prop{display:flex;align-items:center;gap:8px;min-height:32px;font:400 13px/20px var(--font-sans)}
.prop__k{width:92px;flex:none;font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.ckl{display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 6px;border-radius:6px}
.ckl:hover{background:var(--bg-subtle)}
.ckbox{width:18px;height:18px;flex:none;border:1.5px solid var(--border-strong);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;background:transparent;padding:0;color:#fff}
.ckbox--on{background:var(--success);border-color:var(--success)}
.ckbox .i{width:12px;height:12px;stroke-width:2.5}
.tl{display:flex;gap:10px;font:400 13px/20px var(--font-sans)}
.tl__dot{width:24px;flex:none;display:flex;justify-content:center;padding-top:6px}
.tl__dot span{width:6px;height:6px;border-radius:3px;background:var(--border-strong)}
.comment{border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:var(--bg)}
.mention{color:var(--brand-text);font-weight:500}
.ccard{border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.dialog{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-raised);display:flex;flex-direction:column;font-family:var(--font-sans);overflow:hidden}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.dlg-b{padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.dlg-f{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:var(--bg-subtle)}
.scrim{background:rgba(31,31,29,.36)}
.toast{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;background:#1f1f1d;color:#f7f7f5;font:500 13px/20px var(--font-sans);box-shadow:var(--shadow-raised)}
.toast a{color:#8ab1f7;font-weight:600;text-decoration:none}
.menu{width:220px;background:var(--surface);border-radius:8px;box-shadow:var(--shadow-raised);padding:4px;display:flex;flex-direction:column;font-family:var(--font-sans)}
.mi{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;border:0;border-radius:4px;background:none;color:var(--ink);font:400 13px/20px var(--font-sans);text-align:left;cursor:pointer}
.mi:hover,.mi.is-hl{background:var(--bg-hover)}
.mi--danger{color:var(--danger)}
.msep{height:1px;background:var(--border);margin:4px 0}
.qs{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--ink);font:500 12px/16px var(--font-sans);cursor:pointer;white-space:nowrap}
.qs:hover{background:var(--bg-hover)}
.qs.is-on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}
.tinput{width:100%;border:0;padding:0;background:transparent;color:var(--ink);font:600 17px/24px var(--font-sans);outline:none}
.textarea{width:100%;min-height:72px;border:1px solid var(--border);border-radius:6px;padding:8px 12px;font:400 14px/22px var(--font-sans);color:var(--ink);background:var(--bg);resize:vertical}

/* Trạng thái */
.skel{display:block;background:var(--bg-muted);border-radius:4px;height:12px}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 24px}
.state__ic{width:48px;height:48px;border-radius:24px;background:var(--bg-muted);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-muted)}
.alert-err{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:8px;background:var(--tag-red-bg);color:var(--tag-red-text);font:400 13px/20px var(--font-sans)}
.offline{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tag-yellow-bg);color:var(--tag-yellow-text);font:500 12px/16px var(--font-sans)}

/* Mobile */
.m{width:390px;height:844px;position:relative;overflow:hidden;background:var(--bg-subtle);display:flex;flex-direction:column;font-family:var(--font-sans)}
.m-head{padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.m-body{flex:1 1 auto;overflow:hidden;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.mcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.mcard--urgent{box-shadow:inset 3px 0 0 var(--danger)}
.mtick{width:44px;height:44px;margin:-10px -6px -10px -10px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0}
.mtick span{width:26px;height:26px;border-radius:13px;border:2px solid var(--border-strong);display:inline-flex}
.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font:600 14px/20px var(--font-sans);text-decoration:none;cursor:pointer}
.mbtn--primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.m-tabbar{display:flex;background:var(--bg);border-top:1px solid var(--border);height:64px;flex:none}
.m-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-muted);font:500 11px/14px var(--font-sans);text-decoration:none;min-height:44px}
.m-tab.is-active{color:var(--brand-text)}
.m-tab .i{width:20px;height:20px}
.fab{position:absolute;right:16px;bottom:80px;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:24px;border:0;background:var(--brand);color:var(--on-brand);font:600 14px/20px var(--font-sans);box-shadow:var(--shadow-raised);cursor:pointer}
.mck{display:flex;align-items:center;gap:14px;min-height:52px;padding:4px 14px;border-bottom:1px solid var(--border)}
.mck:last-child{border-bottom:0}
.mck .ckbox{width:26px;height:26px;border-radius:6px}
.mck .ckbox .i{width:16px;height:16px}

/* Lịch */
.cal{display:grid;grid-template-columns:64px repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface);min-width:900px}
.cal__h{padding:10px 12px;border-bottom:1px solid var(--border);border-left:1px solid var(--border);background:var(--bg-subtle);font:600 13px/20px var(--font-sans)}
.cal__t{padding:0 8px;height:64px;border-top:1px solid var(--border);font:500 11px/16px var(--font-mono);color:var(--ink-muted);text-align:right;padding-top:4px}
.cal__c{height:64px;border-top:1px solid var(--border);border-left:1px solid var(--border);padding:3px 4px;position:relative}
.ev{display:flex;flex-direction:column;gap:1px;padding:4px 8px;border-radius:6px;font:500 12px/16px var(--font-sans);margin-bottom:3px;overflow:hidden}
.ev--n{background:var(--tag-blue-bg);color:var(--tag-blue-text)}
.ev--h{background:var(--tag-orange-bg);color:var(--tag-orange-text)}
.ev--u{background:var(--tag-red-bg);color:var(--tag-red-text)}
.ev--d{background:var(--bg-muted);color:var(--ink-muted);text-decoration:line-through}
.ev--l{background:var(--tag-gray-bg);color:var(--tag-gray-text)}
.cal__now{position:absolute;left:0;right:0;top:40px;height:2px;background:var(--danger)}

/* Trang thành phần */
.ds-sec{display:flex;flex-direction:column;gap:12px;padding:28px 0;border-top:1px solid var(--border)}
.ds-why{max-width:820px;margin:0;color:var(--ink-muted);font:400 14px/22px var(--font-sans)}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sw{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
.sw__c{height:56px}
.sw__t{padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.demo{border:1px solid var(--border);border-radius:12px;padding:20px;background:var(--bg);display:flex;flex-direction:column;gap:12px}
.ttab{width:100%;border-collapse:collapse;font:400 13px/20px var(--font-sans)}
.ttab th{text-align:left;font:500 12px/16px var(--font-sans);color:var(--ink-muted);padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-subtle)}
.ttab td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.cmp{border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}

/* Avicasa: lớp phủ cho thành phần */
.hd-btn{border-radius:9999px;padding:0 16px;font-weight:600;transition:background .5s cubic-bezier(.32,.72,0,1),transform .2s}
.hd-btn:active{transform:scale(.98)}
.hd-btn--sm{padding:0 12px}
.hd-btn--secondary{border-color:#0f5a5c40;color:var(--brand)}
.hd-input{border-radius:10px;border-color:#123c3d33;background:#fff}
.sel,.search{border-radius:10px}
.seg{border-radius:14px;background:#f3f4f6;border-color:transparent;padding:4px}
.seg__b{border-radius:10px;font-weight:600}
.seg__b.is-active{background:var(--brand);color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1)}
.tab.is-active{border-bottom-color:var(--gold);color:var(--heading)}
.fchip--on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}
.list,.panel,.tbox,.stat,.ccard,.cmp,.demo,.sw{border-radius:18px}
.lg{border-radius:18px}
.dialog{border-radius:26px}
.hd-card{border-radius:14px}
.hd-column{border-radius:18px}
.tbl th{background:#f3f1ea}
.hd-tag{border-radius:9999px;padding:0 8px}
.chipb{border-radius:9999px;border-color:#123c3d26}
.toast{background:#0a3234}
.toast a{color:var(--gold)}
.bulk{background:#0a3234;color:#fff}
.fab{background:var(--brand)}
.tick--done{background:var(--brand);border-color:var(--brand)}
.ckbox--on{background:var(--brand);border-color:var(--brand)}
.bar>span{background:var(--brand)}
.hd-avatar{background:#e4eeec;color:#0f5a5c}
/* Sidebar nền teal đậm như footer Avicasa */
.sb{background:#0a3234;border-right:0;color:#fff}
.sb .hd-nav{color:#ffffffbf}
.sb .hd-nav:hover{background:#ffffff14;color:#fff}
.sb .hd-nav.is-active{background:#ffffff1a;color:#fff;box-shadow:inset 2px 0 0 var(--gold)}
.sb .hd-nav__badge{color:#ffffff99}
.sb .hd-sidebar__group{color:var(--gold)}
.sb .ws-btn{color:#fff}
.sb .ws-btn:hover{background:#ffffff14}
.sb .ws-role{color:#ffffff99}
.sb .sb-foot{border-top-color:#ffffff26}
.sb .ws-logo{box-shadow:0 0 0 1px #ffffff33}
.sb-brand{display:flex;align-items:center;gap:10px;padding:8px 8px 14px;border-bottom:1px solid #ffffff1f;margin-bottom:8px}
.sb-brand img{height:36px;width:auto}
.sb-brand b{display:block;font:700 18px/20px var(--font-serif);color:#fff;letter-spacing:.4px}
.sb-brand span{display:block;font:600 9.5px/12px var(--font-sans);letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.sb :focus-visible{outline-color:var(--gold)}
.ws-living{background:#0f5a5c}