/* CRM & Quản lý khách hàng services (scripts/crm-atlas): look-alikes of Bitrix24 (menu, deal Kanban, deal card, CRM form, telephony, robots, analytics) and HubSpot
   (top bar, deals board, contact record, settings, form editor, sequences, tasks, dashboards, import), a website form, Zalo OA and a call log, plus the parts of the group hub, drawn in CSS/SVG.
   Loaded after seo-atlas-lp.css, web-atlas-lp.css, data-atlas-lp.css, ads-atlas-lp.css, strategy-atlas-lp.css and social-atlas-lp.css and uses their base (.sa, .sa-gc, .sa-chip,
   .sa-dot, sheets, browser frames, .wa-tb tables, .wa-kp tiles, .ta- documents and boards). Own prefix: cr-. The .sa box is a size container, so narrow layouts use @container.
   Sample data only ("Nhà Thơm (mẫu)"); logos are plain-text approximations and every brand belongs to its owner. */

.sa{ /* every rule down to the closing brace before "outside the .sa scope" is scoped to .sa (CSS nesting) */

/* ================= shared pieces ================= */
.cr-sp{flex:1}
.cr-av{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#e1ecf6;font:700 11px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-style:normal;color:#35607f;
&.is-s{width:20px;height:20px;font-size:10px}
&.is-m{width:34px;height:34px;font-size:13px}
&.is-b{background:#d6e8fb;color:#1f5fa8}
&.is-g{background:#d9f0dd;color:#2a7a3c}
&.is-r{background:#fadbd7;color:#b0453d}
&.is-o{background:#ffe3d6;color:#c2552c}
}
.cr-btn{display:inline-flex;align-items:center;gap:5px;flex:none;padding:6px 12px;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px #c6cdd3;font:600 11.5px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#535c69;white-space:nowrap;
& .ico{width:12px;height:12px}
&.is-g{background:#bbed21;box-shadow:none;color:#3a4a05}
&.is-o{background:#ff7a59;box-shadow:none;color:#fff}
&.is-t{background:#0091ae;box-shadow:none;color:#fff}
&.is-p{background:#fff;color:#2067b0;box-shadow:inset 0 0 0 1px #2067b0}
}
.cr-tg{display:inline-block;padding:1px 6px;border-radius:9px;background:#eaf0f4;font-size:9.500px;font-weight:600;color:#5a6a78;white-space:nowrap;
&.is-g{background:#dff3e4;color:#2a7a3c}
&.is-y{background:#fdf0cc;color:#8a5b00}
&.is-r{background:#fbdcd8;color:#b0453d}
&.is-b{background:#dbeafc;color:#1f5fa8}
}
.cr-rw{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid #edf0f2;font-size:11.5px;line-height:1.4;
&:last-child{border-bottom:0}
& em{color:#7c8794}
& span{color:#292f46;min-width:0;overflow-wrap:anywhere}
}
.cr-cd{padding:10px 12px;border:1px solid #dfe5ea;border-radius:6px;background:#fff;
& h5{margin:0 0 6px;font-size:12px;font-weight:700;color:#292f46}
}
.cr-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start;
& > div{display:grid;gap:10px;min-width:0}
}
.cr-swl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px}
.cr-sw{position:relative;display:inline-block;flex:none;width:28px;height:15px;border-radius:9px;background:#c9d1d8;
&::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff}
&.is-on{background:#2fb344}
&.is-on::after{left:15px}
}

/* ================= Bitrix24 ================= */
.cr-bx{display:flex;flex-direction:column;background:linear-gradient(150deg,#1b8fd6,#45b9ec 58%,#7cd2f4);font:12px/1.4 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#333;
& .cr-bxu{display:flex;align-items:center;gap:10px;padding:8px 12px;color:#fff}
& .cr-bxl{display:inline-flex;align-items:baseline;gap:1px;font-size:17px;letter-spacing:-.3px}
& .cr-bxl b{font-weight:800}
& .cr-bxl em{display:inline-grid;place-items:center;min-width:24px;padding:0 4px;margin-left:2px;border-radius:12px;background:#ffffff40;font-size:12px;font-weight:700;line-height:18px}
& .cr-bxs{display:flex;align-items:center;gap:6px;flex:0 1 230px;min-width:0;padding:5px 10px;border-radius:14px;background:#ffffff38;font-size:11px;
& .ico{width:12px;height:12px}
& em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
& .cr-bxi{flex:none;padding:4px 11px;border-radius:14px;background:#ffffff38;font-size:11px;font-weight:600}
& .cr-bxb{display:grid;grid-template-columns:128px minmax(0,1fr);flex:1}
& .cr-bxm{display:grid;align-content:start;gap:1px;padding:4px 8px 8px 8px}
& .cr-bxn{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:7px;font-size:11.5px;color:#ffffffee;
& .ico{width:14px;height:14px}
&.is-on{background:#ffffff38;font-weight:700;color:#fff}
}
& .cr-bxp{min-width:0;margin:0 8px 8px 0;padding:12px 14px 14px;border-radius:10px;background:#fff;overflow:hidden}
& .cr-bxh{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px;
& h3{font-size:17px;font-weight:600;color:#292f46}
}
& .cr-bxt{display:flex;gap:14px;
& span{padding:3px 0;font-size:12px;color:#6a737f}
& span.is-on{font-weight:700;color:#292f46;box-shadow:inset 0 -2px #2fc6f6}
}
& .cr-bxr{display:flex;align-items:center;gap:8px;margin-bottom:10px}
& .cr-bxf{display:flex;align-items:center;gap:6px;flex:0 1 220px;min-width:0;padding:5px 9px;border-radius:4px;background:#eef2f4;font-size:11px;color:#6a737f;
& .ico{width:12px;height:12px}
& em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
& .cr-bxv{display:inline-flex;flex:none;border-radius:4px;background:#eef2f4;overflow:hidden}
& .cr-bxv > i{padding:5px 9px;font-size:10.5px;color:#6a737f}
& .cr-bxv > i.is-on{background:#d3e9f7;font-weight:700;color:#1f5f8f}
}
/* Kanban */
.cr-bk{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding:8px;border-radius:6px;background:#eef2f4}
.cr-bkk{min-width:0}
.cr-bkh{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px 8px;border-radius:3px 13px 13px 3px;background:#39a8ef;color:#fff;font-size:9.500px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;
& b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& span{flex:none;font-weight:600}
&.is-prep{background:#2fc6f6}
&.is-quote{background:#55d0e0}
&.is-won{background:#7bd500}
&.is-lost{background:#ff5752}
&.is-amber{background:#ffa900}
}
.cr-bks{margin:5px 2px 6px;font-size:10px;color:#6a737f}
.cr-bkc{margin-bottom:6px;padding:7px 8px;border-radius:3px;background:#fff;box-shadow:0 1px 2px #0003;font-size:10.500px;line-height:1.35;
& > b{display:block;font-weight:600;color:#2067b0;overflow-wrap:anywhere}
& > span{display:block;color:#7c8794}
& > em{display:block;margin-top:2px;font-weight:700;color:#292f46}
& > p{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;margin-top:5px}
& small{display:inline-flex;align-items:center;gap:3px;font-size:9.500px;color:#7c8794;white-space:nowrap}
& small.is-late{color:#d9372b}
& small .ico{width:10px;height:10px}
}
/* Deal card */
.cr-bst{display:flex;gap:2px;margin-bottom:10px;
& > span{flex:1;min-width:0;padding:6px 6px 6px 12px;background:#e6eaed;font-size:10px;font-weight:600;color:#6a737f;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%,9px 50%)}
& > span:first-child{clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);padding-left:8px}
& > span.is-done{background:#39a8ef;color:#fff}
& > span.is-done.is-prep{background:#2fc6f6}
& > span.is-done.is-quote{background:#55d0e0}
& > span.is-done.is-won{background:#7bd500}
& > span.is-done.is-lost{background:#ff5752}
}
.cr-bpn{margin-bottom:8px;padding:10px 12px;border:1px solid #dfe5ea;border-radius:6px;background:#fff;
&:last-child{margin-bottom:0}
& > h5{margin:0 0 6px;font-size:12px;font-weight:700;color:#292f46}
}
.cr-bxg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;align-items:start;
& > div{min-width:0}
}
.cr-btl{display:grid;gap:8px}
.cr-btr{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:start;font-size:11px;
& > div{min-width:0}
& b{display:block;font-weight:600;color:#292f46;overflow-wrap:anywhere}
& span{display:block;color:#7c8794}
& small{font-size:10px;color:#9aa4ae;white-space:nowrap}
}
.cr-bti{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e4f4fc;color:#1b8fd6;
& .ico{width:13px;height:13px}
}

/* ================= HubSpot ================= */
.cr-hs{display:flex;flex-direction:column;background:#f5f8fa;font:12px/1.4 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#354174;
& .cr-hsu{display:flex;align-items:center;gap:1px;height:36px;padding:0 10px;background:#232d59;color:#fff}
& .cr-hsl{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-right:8px}
& .cr-hsl > i{display:block;width:14px;height:14px;border:3px solid #ff7a59;border-radius:50%;box-shadow:5px -5px 0 -3px #ff7a59}
& .cr-hsn{display:inline-flex;align-items:center;gap:3px;height:36px;padding:0 8px;font-size:11px;color:#cbd6e2;white-space:nowrap}
& .cr-hsn .ico{width:9px;height:9px}
& .cr-hsn.is-on{color:#fff;box-shadow:inset 0 -2px #ff7a59}
& .cr-hsq{display:grid;place-items:center;width:26px;height:26px;color:#cbd6e2}
& .cr-hsq .ico{width:14px;height:14px}
& .cr-hsb{padding:12px 16px 14px;min-width:0}
& .cr-hsh{display:flex;align-items:center;gap:10px;margin-bottom:8px;
& h3{font-size:17px;font-weight:600;color:#354174}
& p{margin-top:2px;font-size:11px;color:#7c98b6}
}
& .cr-hst{display:flex;gap:16px;margin-bottom:10px;border-bottom:1px solid #dfe3eb;
& span{padding:5px 0;font-size:12px;color:#516f90}
& span.is-on{font-weight:600;color:#0091ae;box-shadow:inset 0 -2px #0091ae}
}
& .cr-hsm{min-width:0}
}
.cr-hk{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.cr-hkk{min-width:0;padding:8px;border-radius:5px;background:#eaf0f6;
& > h5{display:flex;align-items:baseline;gap:4px;margin:0;font-size:11.5px;font-weight:600;color:#354174}
& > h5 small{font-size:10.500px;font-weight:400;color:#7c98b6}
& > p{margin:1px 0 7px;font-size:10px;color:#7c98b6}
}
.cr-hkc{margin-bottom:6px;padding:8px;border:1px solid #dfe3eb;border-radius:4px;background:#fff;font-size:10.500px;line-height:1.4;
& > b{display:block;font-weight:600;color:#0091ae;overflow-wrap:anywhere}
& > span{display:block;color:#516f90}
& > span em{color:#7c98b6}
& > span.is-late{color:#d94c53}
& > p{display:flex;align-items:center;margin-top:5px}
}
.cr-hr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.9fr);gap:10px;align-items:start;
& > aside,& > section{display:grid;gap:8px;min-width:0}
}
.cr-hbx{padding:10px 12px;border:1px solid #dfe3eb;border-radius:4px;background:#fff;
& > h5{display:flex;align-items:center;margin:0 0 6px;font-size:12px;font-weight:600;color:#354174}
}
.cr-hp{padding:4px 0;font-size:11px;line-height:1.4;
& em{display:block;color:#7c98b6}
& span{color:#354174;overflow-wrap:anywhere}
}
.cr-htl{display:grid;gap:8px}
.cr-htr{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 10px;border:1px solid #dfe3eb;border-radius:4px;background:#fff;font-size:11px;
& > div{min-width:0}
& b{display:block;font-weight:600;color:#354174;overflow-wrap:anywhere}
& span{display:block;color:#516f90}
& small{font-size:10px;color:#7c98b6;white-space:nowrap}
}
.cr-hti{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e5f5f8;color:#0091ae;
& .ico{width:13px;height:13px}
}

/* Bitrix24 lists: tighter cell padding so a 5-column list and its last dot fit the window */
.cr-bx .wa-tb :is(th,td){padding-inline:6px 4px}
.cr-bx .wa-tb :is(th,td):first-child{padding-left:2px}

/* ================= narrow screens (the .sa box is the container) ================= */
@container (max-width:470px){
.cr-bx .cr-bxb{grid-template-columns:minmax(0,1fr)}
.cr-bx .cr-bxm{display:none}
.cr-bx .cr-bxp{margin:0 6px 6px}
.cr-bxg,.cr-two{grid-template-columns:minmax(0,1fr)}
.cr-bkk:nth-child(n+4){display:none}
.cr-hkk:nth-child(n+4){display:none}
.cr-hr{grid-template-columns:minmax(0,1fr)}
.cr-hs .cr-hsn:nth-child(n+5){display:none}
.cr-bk{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
.cr-hk{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ---- Bitrix24 robots, HubSpot workflow ---- */
.cr-ba .cr-bkh{border-radius:3px}
.cr-brc{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;margin-bottom:6px;padding:7px 8px;border:1px solid #9fd3f2;border-radius:4px;background:#f1faff;font-size:10.500px;line-height:1.35;
& > i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#2fc6f6;color:#fff;font-style:normal}
& > i .ico{width:11px;height:11px}
& b{display:block;font-weight:600;color:#292f46;overflow-wrap:anywhere}
& span{display:block;color:#6a737f}
}
.cr-bra{display:flex;align-items:center;justify-content:center;gap:4px;margin:0 0 6px;padding:6px;border:1px dashed #b7c4cf;border-radius:4px;font-size:10px;color:#7c8794;
& .ico{width:10px;height:10px}
}
.cr-hfl{display:grid;justify-items:center;gap:0;max-width:430px;margin:0 auto;padding:6px 0}
.cr-hfn{width:100%;padding:9px 12px;border:1px solid #cbd6e2;border-radius:6px;background:#fff;font-size:11px;line-height:1.4;
&.is-t{border-color:#0091ae;background:#f2fbfd}
&.is-t small{display:block;margin-bottom:2px;font-size:9.500px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#0091ae}
&:not(.is-t){display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;align-items:start}
& b{display:block;font-weight:600;color:#354174;overflow-wrap:anywhere}
& span{display:block;color:#516f90}
}
.cr-hfi{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff1ec;color:#ff7a59;font-style:normal;
& .ico{width:13px;height:13px}
}
.cr-hfa{display:block;width:2px;height:14px;background:#cbd6e2}
.cr-hsf{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;
& span{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border:1px solid #cbd6e2;border-radius:14px;background:#fff;font-size:10.500px;color:#354174}
& span .ico{width:8px;height:8px;color:#7c98b6}
}
.cr-fn{display:grid;gap:9px;margin:0;padding:2px 0 0;list-style:none;
& li{display:grid;grid-template-columns:92px 1fr;gap:2px 10px;align-items:center}
& li>span{font-size:12px;font-weight:600;color:#313856}
& li>em{grid-column:2;font-style:normal;font-size:10.5px;color:#7a828d}
}
.cr-fb{position:relative;display:flex;align-items:center;height:26px;border-radius:3px 13px 13px 3px;background:#edf1f5;
& b{position:relative;padding-left:10px;font-size:12px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.18)}
}
.cr-fi{position:absolute;inset:0 auto 0 0;border-radius:3px 13px 13px 3px;background:#39a8ef;
&.is-prep{background:#2fc6f6}
&.is-quote{background:#55d0e0}
&.is-won{background:#7bd500}
&.is-lost{background:#ff5752}
}
.cr-bkc,.cr-hkc{position:relative;
& > b > .sa-dot{position:absolute;top:-6px;right:-5px;margin:0;z-index:4}
}
/* ---- form fields, website form, call pop-up ---- */
.cr-fm{display:grid;gap:9px}
.cr-ff{display:grid;gap:3px;min-width:0;
& > em{font-style:normal;font-size:10.500px;font-weight:600;color:#6a737f}
& > em.is-req::after{content:" *";color:#d9534f}
& > span{position:relative;display:flex;align-items:center;gap:6px;min-height:28px;padding:5px 9px;border:1px solid #c6cdd3;border-radius:4px;background:#fff;font-size:11.500px;color:#292f46;overflow-wrap:anywhere}
& > span.is-ph{color:#9aa3ad}
& > span .ico{width:10px;height:10px;margin-left:auto;color:#8b95a1}
}
.cr-ws{display:grid;gap:10px;padding:16px 18px;background:#fbf3e4;font:12px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#4a2c12;
& .cr-wh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#5b3416}
& .cr-wh i{width:16px;height:16px;border-radius:50%;background:#5b3416}
& h4{margin:0;font-size:15px;color:#5b3416}
& > p{margin:0;font-size:11.500px;color:#7a5a3c}
& .cr-ff > em{color:#7a5a3c}
& .cr-ff > span{border-color:#d9c3a0}
& .cr-wb{justify-self:start;padding:8px 20px;border-radius:5px;background:#c4584f;font-size:12px;font-weight:700;color:#fff}
& small{font-size:10px;color:#8a6c50}
}
.cr-pu{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px 10px;align-items:center;max-width:300px;padding:11px 13px;border:1px solid #cfd8e0;border-radius:8px;background:#fff;box-shadow:0 6px 18px #2b35672e;
& b{display:block;font-size:12.500px;color:#292f46}
& span{display:block;font-size:10.500px;color:#6a737f}
& p{grid-column:1 / -1;display:flex;gap:6px;margin:0}
}
/* ================= Zalo Official Account, option, banner, code box ================= */
.cr-zn{display:flex;flex-direction:column;background:#eaf1fb;font:12px/1.4 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#292f46;
& .cr-znu{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:#0068ff;color:#fff}
& .cr-znl{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
& .cr-znl b{font-size:16px;font-weight:800;letter-spacing:-.3px}
& .cr-znl em{font-size:11px;font-style:normal;opacity:.92}
& .cr-znb{display:grid;grid-template-columns:104px minmax(0,1fr);flex:1}
& .cr-znm{display:grid;align-content:start;gap:2px;padding:8px 6px;background:#fff;border-right:1px solid #dbe5f2}
& .cr-znn{display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:5px;font-size:11px;color:#5b6572}
& .cr-znn .ico{width:13px;height:13px;flex:none}
& .cr-znn em{font-style:normal;overflow-wrap:anywhere}
& .cr-znn.is-on{background:#e3eeff;color:#0068ff;font-weight:600}
& .cr-znp{min-width:0;padding:12px 14px 14px;background:#fff}
& .cr-znh{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px;
& h3{margin:0;font-size:15px;font-weight:700;color:#1c2450}
& p{margin:0;font-size:11px;color:#6a737f}
}
& .cr-znt{display:flex;gap:14px;margin:-4px 0 10px;border-bottom:1px solid #dbe5f2;
& span{padding:5px 0;font-size:12px;color:#5b6572}
& span.is-on{font-weight:700;color:#0068ff;box-shadow:inset 0 -2px #0068ff}
}
}
.cr-zc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border:1px solid #dbe5f2;border-radius:6px;overflow:hidden;background:#fff}
.cr-zl{min-width:0;border-right:1px solid #dbe5f2;background:#f7f9fc}
.cr-zi{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid #e6edf6;font-size:11px;
&.is-on{background:#e3eeff}
& > div{min-width:0}
& b{display:block;font-weight:600;color:#1c2450;overflow-wrap:anywhere}
& span{display:block;color:#6a737f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& small{display:flex;align-items:center;gap:4px;font-size:10px;color:#8a95a3;white-space:nowrap}
& small i{width:8px;height:8px;border-radius:50%;background:#e03a3a}
}
.cr-zt{display:flex;flex-direction:column;min-width:0}
.cr-zth{padding:8px 12px;border-bottom:1px solid #e6edf6;font-size:11px;
& b{display:block;font-size:12px;color:#1c2450}
& span{color:#6a737f}
}
.cr-zm{display:grid;gap:6px;align-content:start;flex:1;padding:10px 12px;background:#f1f6fd}
.cr-zb{position:relative;margin:0;max-width:86%;padding:7px 10px 6px;border-radius:8px;background:#fff;box-shadow:0 1px 1px #0000001f;font-size:11.500px;line-height:1.4;color:#1c2450;overflow-wrap:anywhere;
&.is-out{justify-self:end;background:#d6e6ff}
& small{display:block;margin-top:2px;font-size:10px;color:#8a95a3}
}
.cr-zin{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid #e6edf6;
& > span{flex:1;min-width:0;font-size:11px;color:#8a95a3}
& .ico{flex:none;width:14px;height:14px;color:#0068ff}
}
.cr-op{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;align-items:start;margin:0 0 8px;padding:9px 11px;border:1px solid #d6dde4;border-radius:6px;background:#fff;font-size:11.500px;
&.is-on{border-color:#2f6fe0;background:#f2f7ff}
& > i{width:14px;height:14px;margin-top:1px;border:2px solid #9aa6b2;border-radius:50%;background:#fff}
&.is-on > i{border-color:#2f6fe0;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 8px #2f6fe0}
& b{display:block;font-weight:600;color:#1c2450;overflow-wrap:anywhere}
& em{display:block;font-style:normal;color:#6a737f}
}
.cr-bn{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:8px 11px;border-radius:6px;border:1px solid #f0d58a;background:#fff8e1;font-size:11.500px;line-height:1.4;color:#5c4510;
&.is-r{border-color:#f1b4ae;background:#fff0ee;color:#7a1f18}
&.is-g{border-color:#a8dcb4;background:#eefaf1;color:#1c5b2c}
&.is-b{border-color:#b9d3f5;background:#eef5ff;color:#1f4f8f}
& .ico{flex:none;width:14px;height:14px;margin-top:1px}
& span{min-width:0;overflow-wrap:anywhere}
}
.cr-cb{display:grid;gap:2px;margin:0 0 8px;padding:9px 11px;border-radius:6px;background:#20263b;font:11px/1.5 Consolas,"SFMono-Regular",Menlo,monospace;color:#d6e2ee;white-space:normal;
& span{display:block;overflow-wrap:anywhere}
}
@container (max-width:470px){
.cr-zn .cr-znm{display:none}
.cr-zn .cr-znb{grid-template-columns:minmax(0,1fr)}
.cr-zc{grid-template-columns:minmax(0,1fr)}
.cr-zl{border-right:0;border-bottom:1px solid #dbe5f2}
.cr-zb{max-width:94%}
}
/* ================= Care: to-do list grouped by time ================= */
.cr-tk{margin:0 0 8px;border:1px solid #dde1e6;border-radius:6px;overflow:hidden;background:#fff;
& h5{display:flex;align-items:center;gap:8px;margin:0;padding:6px 10px;border-bottom:1px solid #e3e6ea;background:#f4f5f7;font-size:11.500px;font-weight:700;color:#39415c}
& h5.is-r{background:#fff0ee;color:#9a2a20}
& h5.is-y{background:#fff8e1;color:#6f5300}
& h5 small{margin-left:auto;font-size:10.500px;font-weight:600;color:#6a737f}
}
.cr-tkr{display:grid;grid-template-columns:16px minmax(0,1fr) auto 24px;gap:4px 9px;align-items:center;margin:0;padding:8px 10px;border-bottom:1px solid #eef0f2;font-size:11.500px;
&:last-child{border-bottom:0}
& > span{min-width:0}
& b{display:block;font-weight:600;color:#1e2643;overflow-wrap:anywhere}
& em{display:block;font-style:normal;color:#6a737f}
& small{font-size:10.500px;color:#5b6572;white-space:nowrap}
&.is-done b{color:#8a95a3;text-decoration:line-through}
& .cr-av{width:24px;height:24px;font-size:10px}
}
.cr-ck{display:grid;place-items:center;width:16px;height:16px;border:2px solid #9aa6b2;border-radius:4px;background:#fff;color:#fff;
& .ico{width:10px;height:10px}
}
.cr-tkr.is-done .cr-ck{border-color:#2f9e55;background:#2f9e55}
@container (max-width:470px){
.cr-tkr{grid-template-columns:16px minmax(0,1fr) 24px}
.cr-tkr small{grid-column:2;grid-row:2}
}
/* ================= Care: two columns, right side wider (timeline next to the customer card) ================= */
.cr-two.is-tl{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
@container (max-width:470px){
.cr-two.is-tl{grid-template-columns:minmax(0,1fr)}
}
/* ================= Reports: six number tiles sit three by three (no grey filler cell) ================= */
.wa-kp:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@container (max-width:470px){
.wa-kp:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/*@@next*/
}
/* ================= outside the .sa scope (hero, hub) ================= */
/*@@out*/

/* ---------- group hub (scripts/crm-atlas/hub.mjs) ---------- */
.cr-hub-def{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px 48px;align-items:center;padding:30px 34px;border:1px solid var(--edge);border-radius:20px;background:linear-gradient(160deg,#ffffff0e,#ffffff05)}
.cr-hub-def h2{margin:8px 0 12px;font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.4px}
.cr-hub-def p{margin:0;font-size:16px;line-height:1.65;color:var(--text-2)}
.cr-hub-def dl{display:grid;gap:10px;margin:0}
.cr-hub-def dl>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 14px;border-radius:12px;background:#ffffff0a;box-shadow:inset 0 0 0 1px var(--edge)}
.cr-hub-def dt{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}
.cr-hub-def dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--text)}
.cr-hub-route{padding:16px 22px 22px;border-radius:18px;background:linear-gradient(180deg,#f7f9fc,#e9eff6);box-shadow:0 26px 60px #0008;color:#192045}
.cr-hub-bar{display:flex;gap:6px;margin-bottom:12px}
.cr-hub-bar i{width:10px;height:10px;border-radius:50%;background:#c4cfdc}
.cr-hub-rt{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:15px}
.cr-hub-rt .ico{width:18px;height:18px;padding:3px;border-radius:6px;background:#2f6fe0;color:#fff}
.cr-hub-route ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0;padding:0;list-style:none}
.cr-hub-route li{display:grid;grid-template-columns:minmax(0,1fr) minmax(12px,32px) auto;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1920451a}
.cr-hub-pb{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35}
.cr-hub-pb i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:#eef3f8;color:#2f6fe0}
.cr-hub-pb .ico{width:16px;height:16px}
.cr-hub-ln{height:2px;background:repeating-linear-gradient(90deg,#b9c6d4 0 4px,#0000 4px 8px)}
.cr-hub-route a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 34%,#fff);color:#131a4a;font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 80%,#131a4a);transition:transform .2s ease}
.cr-hub-route a .ico{width:14px;height:14px}
.cr-hub-route a:hover{transform:translateX(3px)}
.cr-hub-group{margin-top:40px}
.cr-hub-group:first-child{margin-top:6px}
.cr-hub .cr-hub-gh{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}
.cr-hub-gh .ico{width:18px;height:18px}
.cr-hub-gh em{flex:none;margin-left:auto;white-space:nowrap;font-size:12px;font-style:normal;letter-spacing:.4px;text-transform:none;color:var(--text-3)}
.cr-hub-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.cr-hub-card{grid-column:span 2;position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;overflow:hidden;border:1px solid var(--edge);border-radius:18px;background:var(--surface);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.cr-hub-card:nth-child(3n+1):nth-last-child(2),.cr-hub-card:nth-child(3n+2):last-child{grid-column:span 3}
.cr-hub-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 24px 50px #0009,0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.cr-hub-art{position:relative;display:block;height:232px;overflow:hidden;padding:18px 18px 0;border-bottom:1px solid var(--edge);background:radial-gradient(120% 110% at 0 0,color-mix(in srgb,var(--c) 34%,#0e1340),#0b1038 72%)}
.cr-hub-art::after{content:"";position:absolute;inset:auto 0 0;height:48px;background:linear-gradient(#0b103800,#0b1038cc);pointer-events:none}
.cr-hub-art .sa-th{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cr-hub-card:hover .cr-hub-art .sa-th{transform:translateY(-10px)}
.cr-hub-body{display:grid;align-content:start;gap:9px;padding:16px 22px 22px}
.cr-hub-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:1px;color:var(--c)}
.cr-hub-meta em{font-style:normal;letter-spacing:.3px;color:var(--text-3)}
.cr-hub .cr-hub-body h3{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.2px}
.cr-hub-body h3 a{color:var(--text);text-decoration:none}
.cr-hub-body h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.cr-hub-body h3 a:focus-visible{outline:none}
.cr-hub-body h3 a:focus-visible::after{border-radius:18px;box-shadow:inset 0 0 0 2px var(--c)}
.cr-hub-body p{margin:0;font-size:14px;line-height:1.55;color:var(--text-3)}
.cr-hub-tags{display:flex;flex-wrap:wrap;gap:6px}
.cr-hub-tags i{padding:3px 9px;border-radius:999px;background:#ffffff0d;box-shadow:inset 0 0 0 1px var(--edge);font-size:12px;font-style:normal;color:var(--text-2)}
.cr-hub-tags i.is-more{color:var(--c)}
.cr-hub-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--c)}
.cr-hub-go .ico{width:16px;height:16px;transition:transform .25s ease}
.cr-hub-card:hover .cr-hub-go .ico{transform:translateX(4px)}
@media(max-width:1000px){
.cr-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cr-hub-card,.cr-hub-card:nth-child(3n+1):nth-last-child(2),.cr-hub-card:nth-child(3n+2):last-child{grid-column:auto}
.cr-hub-card:last-child:nth-child(odd){grid-column:1/-1}
.cr-hub-route ul{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){.cr-hub-def{grid-template-columns:minmax(0,1fr);padding:22px 20px}}
@media(max-width:620px){
.cr-hub-grid{grid-template-columns:minmax(0,1fr)}
.cr-hub-card:last-child:nth-child(odd){grid-column:auto}
.cr-hub-art{height:208px;padding:14px 14px 0}
.cr-hub-body{padding:14px 18px 20px}
.cr-hub-route{padding:14px 14px 16px}
.cr-hub-route li{grid-template-columns:minmax(0,1fr)}
.cr-hub-ln{display:none}
.cr-hub-route a{justify-self:start}
.cr-hub-def dl>div{grid-template-columns:minmax(0,1fr);gap:4px}
}