@gemboss/ui 0.46.0 → 0.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +90 -0
  2. package/README.md +59 -8
  3. package/catalog/editor.html +1 -1
  4. package/catalog/index.html +44 -40
  5. package/gemboss-ui.css +4 -4
  6. package/package.json +6 -1
  7. package/parts/components.css +2 -2
  8. package/parts/core.css +1 -1
  9. package/parts/shell.css +2 -2
  10. package/src/assistant-plain.js +1 -1
  11. package/src/assistant.css +1 -1
  12. package/src/index.ts +2 -0
  13. package/src/kit-plain.css +1 -1
  14. package/src/language-switcher-plain.js +1 -1
  15. package/src/language-switcher.css +1 -1
  16. package/src/logo-sheet.css +1 -0
  17. package/src/logo-sheet.tsx +63 -0
  18. package/src/portal.tsx +19 -4
  19. package/src/question-card.css +1 -1
  20. package/src/question-card.tsx +19 -4
  21. package/src/session-rail-plain.js +1 -0
  22. package/src/shell.css +1 -1
  23. package/src/topnav-fold.css +1 -0
package/catalog/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html><html lang="vi"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
2
- <title>@gemboss/ui catalog</title><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"><style>
2
+ <title>@gemboss/ui catalog</title><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"><link rel="stylesheet" href="../src/topnav-fold.css"><style>
3
3
  body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text);font-family:var(--gemboss-font-sans)}
4
4
  .cat{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1180px;margin:0 auto;gap:32px;padding:32px 24px}
5
5
  .cat-nav{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:2px}
@@ -27,7 +27,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
27
27
  @media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
28
28
  </style></head><body>
29
29
  <div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#sheet">Ngăn trượt cạnh phải</a><a href="#reader">Hộp đọc tài liệu</a><a href="#settings">Hộp cài đặt</a><a href="#switcher">Chuyển dịch vụ</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#site">Trang công khai: thanh trên, logo cỡ site, nút, chân trang</a><a href="#auth">Đăng nhập</a><a href="#setup">Hướng dẫn thiết lập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#team-chat">Chat đội</a><a href="#action-card">Thẻ hành động</a><a href="#assistant-engine">Trợ lý: chọn engine</a><a href="#assistant-bridge">Trợ lý: cầu nối trên máy (0.32.0)</a><a href="#assistant-chat">Trợ lý: khung chat (0.29.0)</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
30
- <main><header class="cat-head"><h1>@gemboss/ui 0.46.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>e0c757540276</code>.</p></header>
30
+ <main><header class="cat-head"><h1>@gemboss/ui 0.48.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>0a653d36517c</code>.</p></header>
31
31
  <section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-wash)"></i><code>--gemboss-accent-wash</code><span>#f7f8ff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-tint)"></i><code>--gemboss-accent-tint</code><span>#dfe2ff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-mid)"></i><code>--gemboss-accent-mid</code><span>#c9cffd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
32
32
  <section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. Dùng được trên <code>&lt;button&gt;</code> lẫn <code>&lt;a&gt;</code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;cat-row&quot;&gt;
33
33
  &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Lưu nháp&lt;/button&gt;
@@ -785,7 +785,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
785
785
  &lt;/tbody&gt;
786
786
  &lt;/table&gt;
787
787
  &lt;/div&gt;
788
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính</figcaption><div class="cat-wide"><iframe title="1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính" style="height:300px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-table-wrap&quot;&gt;&lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;&lt;caption class=&quot;ui-sr-only&quot;&gt;Pages captured per day&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th scope=&quot;col&quot;&gt;Store&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Mon&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Tue&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Wed&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Thu&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Fri&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Sat&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Sun&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Week&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Prev&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Δ&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;glowrecipe.com&lt;/th&gt;&lt;td class=&quot;is-num&quot;&gt;102&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;136&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;170&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;204&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;238&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;272&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;306&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;340&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;374&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;408&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;fluke.com&lt;/th&gt;&lt;td class=&quot;is-num&quot;&gt;153&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;204&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;255&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;306&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;357&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;408&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;459&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;510&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;561&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;612&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;ruggable.com&lt;/th&gt;&lt;td class=&quot;is-num&quot;&gt;204&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;272&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;340&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;408&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;476&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;544&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;612&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;680&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;748&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;816&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;allbirds.com&lt;/th&gt;&lt;td class=&quot;is-num&quot;&gt;255&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;340&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;425&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;510&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;595&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;680&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;765&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;850&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;935&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;1020&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
788
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính</figcaption><div class="cat-wide"><iframe title="1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính" style="height:300px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-table-wrap&quot;&gt;&lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;&lt;caption class=&quot;ui-sr-only&quot;&gt;Pages captured per day&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th scope=&quot;col&quot;&gt;Store&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Mon&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Tue&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Wed&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Thu&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Fri&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Sat&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Sun&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Week&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Prev&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Δ&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;glowrecipe.com&lt;/th&gt;&lt;td class=&quot;is-num&quot;&gt;102&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;136&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;170&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;204&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;238&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;272&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;306&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;340&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;374&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;408&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;fluke.com&lt;/th&gt;&lt;td class=&quot;is-num&quot;&gt;153&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;204&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;255&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;306&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;357&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;408&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;459&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;510&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;561&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;612&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;ruggable.com&lt;/th&gt;&lt;td class=&quot;is-num&quot;&gt;204&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;272&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;340&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;408&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;476&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;544&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;612&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;680&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;748&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;816&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;allbirds.com&lt;/th&gt;&lt;td class=&quot;is-num&quot;&gt;255&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;340&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;425&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;510&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;595&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;680&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;765&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;850&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;935&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;1020&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
789
789
  &lt;div class=&quot;ui-table-wrap&quot;&gt;
790
790
  &lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;
791
791
  &lt;caption class=&quot;ui-sr-only&quot;&gt;Pages captured per day&lt;/caption&gt;
@@ -917,7 +917,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
917
917
  &lt;/tr&gt;
918
918
  &lt;/tbody&gt;
919
919
  &lt;/table&gt;
920
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng</figcaption><div class="cat-wide"><iframe title="1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng" style="height:320px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-table-wrap&quot;&gt;&lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;&lt;caption class=&quot;ui-sr-only&quot;&gt;Jobs&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th scope=&quot;col&quot;&gt;Job&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;State&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Source&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Last run&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Runs&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;&lt;a href=&quot;#job0&quot;&gt;Weekly integrations crawl&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;OK&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;a href=&quot;#src0&quot;&gt;sitemap&lt;/a&gt;&lt;/td&gt;&lt;td&gt;2h ago&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;1,204&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;&lt;a href=&quot;#job1&quot;&gt;StoreLeads refresh&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;Apps with a GemPages mention, ranked by install growth · daily&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--warning&quot;&gt;Late&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;a href=&quot;#src1&quot;&gt;api&lt;/a&gt;&lt;/td&gt;&lt;td&gt;26h ago&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;311&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;&lt;a href=&quot;#job2&quot;&gt;LinkedIn people at Shopify&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;367 profiles · Find people on the organization page&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;OK&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;a href=&quot;#src2&quot;&gt;apify&lt;/a&gt;&lt;/td&gt;&lt;td&gt;3d ago&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;18&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
920
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng</figcaption><div class="cat-wide"><iframe title="1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng" style="height:320px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-table-wrap&quot;&gt;&lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;&lt;caption class=&quot;ui-sr-only&quot;&gt;Jobs&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th scope=&quot;col&quot;&gt;Job&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;State&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Source&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Last run&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Runs&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;&lt;a href=&quot;#job0&quot;&gt;Weekly integrations crawl&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;OK&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;a href=&quot;#src0&quot;&gt;sitemap&lt;/a&gt;&lt;/td&gt;&lt;td&gt;2h ago&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;1,204&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;&lt;a href=&quot;#job1&quot;&gt;StoreLeads refresh&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;Apps with a GemPages mention, ranked by install growth · daily&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--warning&quot;&gt;Late&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;a href=&quot;#src1&quot;&gt;api&lt;/a&gt;&lt;/td&gt;&lt;td&gt;26h ago&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;311&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;&lt;a href=&quot;#job2&quot;&gt;LinkedIn people at Shopify&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;367 profiles · Find people on the organization page&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;OK&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;a href=&quot;#src2&quot;&gt;apify&lt;/a&gt;&lt;/td&gt;&lt;td&gt;3d ago&lt;/td&gt;&lt;td class=&quot;is-num&quot;&gt;18&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
921
921
  &lt;div class=&quot;ui-table-wrap&quot;&gt;
922
922
  &lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;
923
923
  &lt;caption class=&quot;ui-sr-only&quot;&gt;Jobs&lt;/caption&gt;
@@ -1343,7 +1343,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1343
1343
  &lt;/tbody&gt;
1344
1344
  &lt;/table&gt;
1345
1345
  &lt;/div&gt;
1346
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ</figcaption><div class="cat-wide"><iframe title="2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ" style="height:460px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-index&quot;&gt;&lt;div class=&quot;ui-index__sortbar&quot; role=&quot;group&quot; aria-label=&quot;Sort&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;Sort&lt;/span&gt;&lt;a class=&quot;ui-chip&quot; href=&quot;#collections&quot; aria-current=&quot;true&quot;&gt;Supplier ↑&lt;/a&gt;&lt;a class=&quot;ui-chip&quot; href=&quot;#collections&quot;&gt;Score&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;ui-bulkbar&quot; hidden&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select-all aria-label=&quot;Select all&quot;&gt;&lt;/label&gt;&lt;span class=&quot;ui-bulkbar__count&quot; data-gb-count=&quot;{n} selected&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Add to outreach&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Archive&lt;/button&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-table-wrap&quot;&gt;&lt;table class=&quot;ui-table ui-table--index&quot; data-gb-sort=&quot;client&quot;&gt;&lt;caption class=&quot;ui-sr-only&quot;&gt;Suppliers&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th class=&quot;ui-table__check&quot; scope=&quot;col&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select-all aria-label=&quot;Select all&quot;&gt;&lt;/label&gt;&lt;/th&gt;&lt;th class=&quot;ui-table__primary&quot; scope=&quot;col&quot; aria-sort=&quot;ascending&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-table__sort&quot;&gt;Supplier&lt;/button&gt;&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Location&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Verdict&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot; aria-sort=&quot;none&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-table__sort&quot;&gt;Score&lt;/button&gt;&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Ads&lt;/th&gt;&lt;th class=&quot;ui-table__actions&quot; scope=&quot;col&quot;&gt;&lt;span class=&quot;ui-sr-only&quot;&gt;Actions&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr data-href=&quot;#c1&quot;&gt;&lt;td class=&quot;ui-table__check&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c1&quot; aria-label=&quot;Select Guangzhou Yanmei Cosmetics&quot;&gt;&lt;/label&gt;&lt;/td&gt;&lt;td class=&quot;ui-table__primary&quot;&gt;&lt;a class=&quot;ui-table__title&quot; href=&quot;#c1&quot; title=&quot;Guangzhou Yanmei Cosmetics&quot;&gt;Guangzhou Yanmei Cosmetics&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;OEM · Skincare&lt;/span&gt;&lt;/td&gt;&lt;td data-label=&quot;In&quot;&gt;Guangzhou&lt;/td&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Likely factory&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;86&quot;&gt;86&lt;/td&gt;&lt;td data-condensed=&quot;hide&quot;&gt;TikTok&lt;/td&gt;&lt;td class=&quot;ui-table__actions&quot;&gt;&lt;span class=&quot;ui-row-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Guangzhou Yanmei Cosmetics&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-href=&quot;#c2&quot;&gt;&lt;td class=&quot;ui-table__check&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c2&quot; aria-label=&quot;Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)&quot;&gt;&lt;/label&gt;&lt;/td&gt;&lt;td class=&quot;ui-table__primary&quot;&gt;&lt;a class=&quot;ui-table__title&quot; href=&quot;#c2&quot; title=&quot;Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)&quot;&gt;Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;ODM · Haircare&lt;/span&gt;&lt;/td&gt;&lt;td data-label=&quot;In&quot;&gt;Shantou&lt;/td&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--warning&quot;&gt;Maybe&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;64&quot;&gt;64&lt;/td&gt;&lt;td data-condensed=&quot;hide&quot;&gt;Meta&lt;/td&gt;&lt;td class=&quot;ui-table__actions&quot;&gt;&lt;span class=&quot;ui-row-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-href=&quot;#c3&quot;&gt;&lt;td class=&quot;ui-table__check&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c3&quot; aria-label=&quot;Select Yiwu Bloom Packaging&quot;&gt;&lt;/label&gt;&lt;/td&gt;&lt;td class=&quot;ui-table__primary&quot;&gt;&lt;a class=&quot;ui-table__title&quot; href=&quot;#c3&quot; title=&quot;Yiwu Bloom Packaging&quot;&gt;Yiwu Bloom Packaging&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;Trader · Packaging&lt;/span&gt;&lt;/td&gt;&lt;td data-label=&quot;In&quot;&gt;Yiwu&lt;/td&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--danger&quot;&gt;Trader&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;31&quot;&gt;31&lt;/td&gt;&lt;td data-condensed=&quot;hide&quot;&gt;—&lt;/td&gt;&lt;td class=&quot;ui-table__actions&quot;&gt;&lt;span class=&quot;ui-row-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Yiwu Bloom Packaging&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-href=&quot;#c4&quot;&gt;&lt;td class=&quot;ui-table__check&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c4&quot; aria-label=&quot;Select Shanghai Kerui Labs&quot;&gt;&lt;/label&gt;&lt;/td&gt;&lt;td class=&quot;ui-table__primary&quot;&gt;&lt;a class=&quot;ui-table__title&quot; href=&quot;#c4&quot; title=&quot;Shanghai Kerui Labs&quot;&gt;Shanghai Kerui Labs&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;OEM · Serums&lt;/span&gt;&lt;/td&gt;&lt;td data-label=&quot;In&quot;&gt;Shanghai&lt;/td&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Likely factory&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;91&quot;&gt;91&lt;/td&gt;&lt;td data-condensed=&quot;hide&quot;&gt;Google&lt;/td&gt;&lt;td class=&quot;ui-table__actions&quot;&gt;&lt;span class=&quot;ui-row-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Shanghai Kerui Labs&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1346
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ</figcaption><div class="cat-wide"><iframe title="2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ" style="height:460px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-index&quot;&gt;&lt;div class=&quot;ui-index__sortbar&quot; role=&quot;group&quot; aria-label=&quot;Sort&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;Sort&lt;/span&gt;&lt;a class=&quot;ui-chip&quot; href=&quot;#collections&quot; aria-current=&quot;true&quot;&gt;Supplier ↑&lt;/a&gt;&lt;a class=&quot;ui-chip&quot; href=&quot;#collections&quot;&gt;Score&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;ui-bulkbar&quot; hidden&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select-all aria-label=&quot;Select all&quot;&gt;&lt;/label&gt;&lt;span class=&quot;ui-bulkbar__count&quot; data-gb-count=&quot;{n} selected&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Add to outreach&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Archive&lt;/button&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-table-wrap&quot;&gt;&lt;table class=&quot;ui-table ui-table--index&quot; data-gb-sort=&quot;client&quot;&gt;&lt;caption class=&quot;ui-sr-only&quot;&gt;Suppliers&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th class=&quot;ui-table__check&quot; scope=&quot;col&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select-all aria-label=&quot;Select all&quot;&gt;&lt;/label&gt;&lt;/th&gt;&lt;th class=&quot;ui-table__primary&quot; scope=&quot;col&quot; aria-sort=&quot;ascending&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-table__sort&quot;&gt;Supplier&lt;/button&gt;&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Location&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Verdict&lt;/th&gt;&lt;th scope=&quot;col&quot; class=&quot;is-num&quot; aria-sort=&quot;none&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-table__sort&quot;&gt;Score&lt;/button&gt;&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Ads&lt;/th&gt;&lt;th class=&quot;ui-table__actions&quot; scope=&quot;col&quot;&gt;&lt;span class=&quot;ui-sr-only&quot;&gt;Actions&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr data-href=&quot;#c1&quot;&gt;&lt;td class=&quot;ui-table__check&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c1&quot; aria-label=&quot;Select Guangzhou Yanmei Cosmetics&quot;&gt;&lt;/label&gt;&lt;/td&gt;&lt;td class=&quot;ui-table__primary&quot;&gt;&lt;a class=&quot;ui-table__title&quot; href=&quot;#c1&quot; title=&quot;Guangzhou Yanmei Cosmetics&quot;&gt;Guangzhou Yanmei Cosmetics&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;OEM · Skincare&lt;/span&gt;&lt;/td&gt;&lt;td data-label=&quot;In&quot;&gt;Guangzhou&lt;/td&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Likely factory&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;86&quot;&gt;86&lt;/td&gt;&lt;td data-condensed=&quot;hide&quot;&gt;TikTok&lt;/td&gt;&lt;td class=&quot;ui-table__actions&quot;&gt;&lt;span class=&quot;ui-row-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Guangzhou Yanmei Cosmetics&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-href=&quot;#c2&quot;&gt;&lt;td class=&quot;ui-table__check&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c2&quot; aria-label=&quot;Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)&quot;&gt;&lt;/label&gt;&lt;/td&gt;&lt;td class=&quot;ui-table__primary&quot;&gt;&lt;a class=&quot;ui-table__title&quot; href=&quot;#c2&quot; title=&quot;Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)&quot;&gt;Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;ODM · Haircare&lt;/span&gt;&lt;/td&gt;&lt;td data-label=&quot;In&quot;&gt;Shantou&lt;/td&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--warning&quot;&gt;Maybe&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;64&quot;&gt;64&lt;/td&gt;&lt;td data-condensed=&quot;hide&quot;&gt;Meta&lt;/td&gt;&lt;td class=&quot;ui-table__actions&quot;&gt;&lt;span class=&quot;ui-row-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-href=&quot;#c3&quot;&gt;&lt;td class=&quot;ui-table__check&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c3&quot; aria-label=&quot;Select Yiwu Bloom Packaging&quot;&gt;&lt;/label&gt;&lt;/td&gt;&lt;td class=&quot;ui-table__primary&quot;&gt;&lt;a class=&quot;ui-table__title&quot; href=&quot;#c3&quot; title=&quot;Yiwu Bloom Packaging&quot;&gt;Yiwu Bloom Packaging&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;Trader · Packaging&lt;/span&gt;&lt;/td&gt;&lt;td data-label=&quot;In&quot;&gt;Yiwu&lt;/td&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--danger&quot;&gt;Trader&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;31&quot;&gt;31&lt;/td&gt;&lt;td data-condensed=&quot;hide&quot;&gt;—&lt;/td&gt;&lt;td class=&quot;ui-table__actions&quot;&gt;&lt;span class=&quot;ui-row-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Yiwu Bloom Packaging&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr data-href=&quot;#c4&quot;&gt;&lt;td class=&quot;ui-table__check&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c4&quot; aria-label=&quot;Select Shanghai Kerui Labs&quot;&gt;&lt;/label&gt;&lt;/td&gt;&lt;td class=&quot;ui-table__primary&quot;&gt;&lt;a class=&quot;ui-table__title&quot; href=&quot;#c4&quot; title=&quot;Shanghai Kerui Labs&quot;&gt;Shanghai Kerui Labs&lt;/a&gt;&lt;span class=&quot;ui-sub&quot;&gt;OEM · Serums&lt;/span&gt;&lt;/td&gt;&lt;td data-label=&quot;In&quot;&gt;Shanghai&lt;/td&gt;&lt;td&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Likely factory&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;91&quot;&gt;91&lt;/td&gt;&lt;td data-condensed=&quot;hide&quot;&gt;Google&lt;/td&gt;&lt;td class=&quot;ui-table__actions&quot;&gt;&lt;span class=&quot;ui-row-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Shanghai Kerui Labs&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1347
1347
  &lt;div class=&quot;ui-index&quot;&gt;
1348
1348
  &lt;div class=&quot;ui-index__sortbar&quot; role=&quot;group&quot; aria-label=&quot;Sort&quot;&gt;
1349
1349
  &lt;span aria-hidden=&quot;true&quot;&gt;Sort&lt;/span&gt;
@@ -1806,7 +1806,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1806
1806
  &lt;/div&gt;
1807
1807
  &lt;/li&gt;
1808
1808
  &lt;/ul&gt;
1809
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-resource&quot;&gt;&lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;ui-bulkbar__count&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Shortlist&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Compare&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot; disabled=&quot;&quot;&gt;Not fit&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__measure&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Shortlist&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--icon&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;82&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;77&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;+1 more&lt;span class=&quot;ui-sr-only&quot;&gt;: &lt;span class=&quot;ui-badge&quot;&gt;Partner&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;64&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1809
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-resource&quot;&gt;&lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;ui-bulkbar__count&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Shortlist&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Compare&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot; disabled=&quot;&quot;&gt;Not fit&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__measure&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Shortlist&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--icon&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;82&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;77&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;+1 more&lt;span class=&quot;ui-sr-only&quot;&gt;: &lt;span class=&quot;ui-badge&quot;&gt;Partner&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;64&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1810
1810
  &lt;div class=&quot;ui-resource&quot;&gt;
1811
1811
  &lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;
1812
1812
  &lt;label class=&quot;ui-table__checkbox&quot;&gt;
@@ -1902,7 +1902,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1902
1902
  &lt;/li&gt;
1903
1903
  &lt;/ul&gt;
1904
1904
  &lt;/div&gt;
1905
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng</figcaption><div class="cat-wide"><iframe title="3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng" style="height:420px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;People&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--40&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#n1&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable. I help Shopify Plus brands turn traffic into revenue with landing pages, offers and A/B tests&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;linkedin · cro-agency · Austin, TX · posted 2d ago&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;82&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__actions&quot;&gt;&lt;a href=&quot;#orig&quot; aria-label=&quot;Open original profile&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px&quot;&gt;↗&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#n2&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell UGC Studio · 12,400 followers&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;&lt;span&gt;Runs the ads himself&lt;span style=&quot;display:block;margin-top:4px&quot;&gt;Signals: arcads · heygen · veo 3 · capcut&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-tag&quot;&gt;Hands-on&lt;/span&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Email verified&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;span&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;91&lt;/span&gt;&lt;span class=&quot;ui-sub&quot;&gt;Unverified&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__actions&quot;&gt;&lt;span&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost&quot;&gt;Evidence (3)&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More profiles&quot;&gt;⋯&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;a class=&quot;ui-menu__item&quot; href=&quot;#x&quot;&gt;X ↗&lt;/a&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1905
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng</figcaption><div class="cat-wide"><iframe title="3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng" style="height:420px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;People&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--40&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#n1&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable. I help Shopify Plus brands turn traffic into revenue with landing pages, offers and A/B tests&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;linkedin · cro-agency · Austin, TX · posted 2d ago&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;82&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__actions&quot;&gt;&lt;a href=&quot;#orig&quot; aria-label=&quot;Open original profile&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px&quot;&gt;↗&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#n2&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell UGC Studio · 12,400 followers&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;&lt;span&gt;Runs the ads himself&lt;span style=&quot;display:block;margin-top:4px&quot;&gt;Signals: arcads · heygen · veo 3 · capcut&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-tag&quot;&gt;Hands-on&lt;/span&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Email verified&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;span&gt;&lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;91&lt;/span&gt;&lt;span class=&quot;ui-sub&quot;&gt;Unverified&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__actions&quot;&gt;&lt;span&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost&quot;&gt;Evidence (3)&lt;/button&gt;&lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More profiles&quot;&gt;⋯&lt;/summary&gt;&lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;&lt;a class=&quot;ui-menu__item&quot; href=&quot;#x&quot;&gt;X ↗&lt;/a&gt;&lt;/div&gt;&lt;/details&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
1906
1906
  &lt;ul class=&quot;ui-list&quot; aria-label=&quot;People&quot;&gt;
1907
1907
  &lt;li class=&quot;ui-list__item&quot;&gt;
1908
1908
  &lt;div class=&quot;ui-list__media&quot;&gt;
@@ -2017,7 +2017,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2017
2017
  &lt;time class=&quot;ui-list__time&quot;&gt;Yesterday&lt;/time&gt;
2018
2018
  &lt;/li&gt;
2019
2019
  &lt;/ul&gt;
2020
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>4 · &lt;code&gt;--activity&lt;/code&gt; + &lt;code&gt;body&lt;/code&gt; + &lt;code&gt;wrap&lt;/code&gt; (0.15.0): nhãn và chi tiết xuống dòng thay vì &quot;…&quot; (title không đọc được trên màn chạm), thân (&lt;code&gt;.ui-list__content&lt;/code&gt;) cỡ chữ thân, không cắt</figcaption><div class="cat-wide"><iframe title="4 · &lt;code&gt;--activity&lt;/code&gt; + &lt;code&gt;body&lt;/code&gt; + &lt;code&gt;wrap&lt;/code&gt; (0.15.0): nhãn và chi tiết xuống dòng thay vì &quot;…&quot; (title không đọc được trên màn chạm), thân (&lt;code&gt;.ui-list__content&lt;/code&gt;) cỡ chữ thân, không cắt" style="height:360px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;ul class=&quot;ui-list ui-list--compact ui-list--activity ui-list--wrap&quot; aria-label=&quot;Relationship history&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;span class=&quot;ui-list__dot ui-list__dot--info&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;div&gt;&lt;span class=&quot;ui-list__label&quot;&gt;&lt;span&gt;Intro call with &lt;a href=&quot;#org&quot;&gt;Ruggable&lt;/a&gt;&amp;#x27;s growth team&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ui-list__detail&quot;&gt;by Lily Tran · with Marcus Bell and Aiko Sato&lt;/span&gt;&lt;div class=&quot;ui-list__content&quot;&gt;&lt;p&gt;They want a landing page per ad set and asked whether the agency plan covers four stores; send the pricing sheet by Friday.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;time class=&quot;ui-list__time&quot; dateTime=&quot;2026-10-03&quot;&gt;Oct 3&lt;/time&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;span class=&quot;ui-list__dot ui-list__dot--warning&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;div&gt;&lt;span class=&quot;ui-list__label&quot;&gt;No reply to the follow-up&lt;/span&gt;&lt;span class=&quot;ui-list__detail&quot;&gt;sent by Lily Tran&lt;/span&gt;&lt;/div&gt;&lt;time class=&quot;ui-list__time&quot;&gt;Sep 28&lt;/time&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;span class=&quot;ui-list__dot ui-list__dot--success&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;div&gt;&lt;span class=&quot;ui-list__label&quot;&gt;Signed the agency plan&lt;/span&gt;&lt;span class=&quot;ui-list__detail&quot;&gt;4 stores · Shopify Plus&lt;/span&gt;&lt;div class=&quot;ui-list__content&quot;&gt;&lt;p&gt;Starts Monday; the first store is the Austin one.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;time class=&quot;ui-list__time&quot;&gt;Sep 20&lt;/time&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
2020
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>4 · &lt;code&gt;--activity&lt;/code&gt; + &lt;code&gt;body&lt;/code&gt; + &lt;code&gt;wrap&lt;/code&gt; (0.15.0): nhãn và chi tiết xuống dòng thay vì &quot;…&quot; (title không đọc được trên màn chạm), thân (&lt;code&gt;.ui-list__content&lt;/code&gt;) cỡ chữ thân, không cắt</figcaption><div class="cat-wide"><iframe title="4 · &lt;code&gt;--activity&lt;/code&gt; + &lt;code&gt;body&lt;/code&gt; + &lt;code&gt;wrap&lt;/code&gt; (0.15.0): nhãn và chi tiết xuống dòng thay vì &quot;…&quot; (title không đọc được trên màn chạm), thân (&lt;code&gt;.ui-list__content&lt;/code&gt;) cỡ chữ thân, không cắt" style="height:360px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;ul class=&quot;ui-list ui-list--compact ui-list--activity ui-list--wrap&quot; aria-label=&quot;Relationship history&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;span class=&quot;ui-list__dot ui-list__dot--info&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;div&gt;&lt;span class=&quot;ui-list__label&quot;&gt;&lt;span&gt;Intro call with &lt;a href=&quot;#org&quot;&gt;Ruggable&lt;/a&gt;&amp;#x27;s growth team&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ui-list__detail&quot;&gt;by Lily Tran · with Marcus Bell and Aiko Sato&lt;/span&gt;&lt;div class=&quot;ui-list__content&quot;&gt;&lt;p&gt;They want a landing page per ad set and asked whether the agency plan covers four stores; send the pricing sheet by Friday.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;time class=&quot;ui-list__time&quot; dateTime=&quot;2026-10-03&quot;&gt;Oct 3&lt;/time&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;span class=&quot;ui-list__dot ui-list__dot--warning&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;div&gt;&lt;span class=&quot;ui-list__label&quot;&gt;No reply to the follow-up&lt;/span&gt;&lt;span class=&quot;ui-list__detail&quot;&gt;sent by Lily Tran&lt;/span&gt;&lt;/div&gt;&lt;time class=&quot;ui-list__time&quot;&gt;Sep 28&lt;/time&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;span class=&quot;ui-list__dot ui-list__dot--success&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;div&gt;&lt;span class=&quot;ui-list__label&quot;&gt;Signed the agency plan&lt;/span&gt;&lt;span class=&quot;ui-list__detail&quot;&gt;4 stores · Shopify Plus&lt;/span&gt;&lt;div class=&quot;ui-list__content&quot;&gt;&lt;p&gt;Starts Monday; the first store is the Austin one.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;time class=&quot;ui-list__time&quot;&gt;Sep 20&lt;/time&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
2021
2021
  &lt;ul class=&quot;ui-list ui-list--compact ui-list--activity ui-list--wrap&quot; aria-label=&quot;Relationship history&quot;&gt;
2022
2022
  &lt;li class=&quot;ui-list__item&quot;&gt;
2023
2023
  &lt;span class=&quot;ui-list__dot ui-list__dot--info&quot; aria-hidden=&quot;true&quot;&gt;
@@ -2460,7 +2460,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2460
2460
  &lt;/header&gt;
2461
2461
  &lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;
2462
2462
  &lt;/section&gt;
2463
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng</figcaption><div class="cat-wide"><iframe title="6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng" style="height:520px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-board&quot; role=&quot;region&quot; aria-label=&quot;Element pipeline&quot;&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;todo&quot; aria-labelledby=&quot;ui-board-todo&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;ui-board-todo&quot;&gt;To do&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;14&lt;/span&gt;&lt;/header&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b0&quot;&gt;Popup variant 1&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#120 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b1&quot;&gt;Popup variant 2&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#121 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b2&quot;&gt;Popup variant 3&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#122 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b3&quot;&gt;Popup variant 4&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#123 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b4&quot;&gt;Popup variant 5&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#124 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b5&quot;&gt;Popup variant 6&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#125 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b6&quot;&gt;Popup variant 7&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#126 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b7&quot;&gt;Popup variant 8&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#127 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b8&quot;&gt;Popup variant 9&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#128 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b9&quot;&gt;Popup variant 10&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#129 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b10&quot;&gt;Popup variant 11&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#130 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b11&quot;&gt;Popup variant 12&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#131 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;details class=&quot;ui-board__more&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--sm&quot;&gt;Show 2 more&lt;/summary&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b12&quot;&gt;Popup variant 13&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#132 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b13&quot;&gt;Popup variant 14&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#133 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/details&gt;&lt;/section&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;review&quot; aria-labelledby=&quot;ui-board-review&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot ui-board__dot--info&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;ui-board-review&quot;&gt;Review&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;2&lt;/span&gt;&lt;/header&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b40&quot;&gt;Countdown bar, 6 frames&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#160 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b41&quot;&gt;Spin to win, no bait&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#161 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/section&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;done&quot; aria-labelledby=&quot;ui-board-done&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot ui-board__dot--success&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;ui-board-done&quot;&gt;Done&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;0&lt;/span&gt;&lt;/header&gt;&lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
2463
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng</figcaption><div class="cat-wide"><iframe title="6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng" style="height:520px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-board&quot; role=&quot;region&quot; aria-label=&quot;Element pipeline&quot;&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;todo&quot; aria-labelledby=&quot;ui-board-todo&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;ui-board-todo&quot;&gt;To do&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;14&lt;/span&gt;&lt;/header&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b0&quot;&gt;Popup variant 1&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#120 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b1&quot;&gt;Popup variant 2&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#121 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b2&quot;&gt;Popup variant 3&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#122 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b3&quot;&gt;Popup variant 4&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#123 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b4&quot;&gt;Popup variant 5&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#124 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b5&quot;&gt;Popup variant 6&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#125 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b6&quot;&gt;Popup variant 7&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#126 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b7&quot;&gt;Popup variant 8&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#127 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b8&quot;&gt;Popup variant 9&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#128 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b9&quot;&gt;Popup variant 10&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#129 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b10&quot;&gt;Popup variant 11&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#130 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b11&quot;&gt;Popup variant 12&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#131 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;details class=&quot;ui-board__more&quot;&gt;&lt;summary class=&quot;ui-btn ui-btn--sm&quot;&gt;Show 2 more&lt;/summary&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b12&quot;&gt;Popup variant 13&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#132 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b13&quot;&gt;Popup variant 14&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#133 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/details&gt;&lt;/section&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;review&quot; aria-labelledby=&quot;ui-board-review&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot ui-board__dot--info&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;ui-board-review&quot;&gt;Review&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;2&lt;/span&gt;&lt;/header&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b40&quot;&gt;Countdown bar, 6 frames&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#160 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#b41&quot;&gt;Spin to win, no bait&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#161 · 2 errors&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/section&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;done&quot; aria-labelledby=&quot;ui-board-done&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot ui-board__dot--success&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;ui-board-done&quot;&gt;Done&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;0&lt;/span&gt;&lt;/header&gt;&lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
2464
2464
  &lt;div class=&quot;ui-board&quot; role=&quot;region&quot; aria-label=&quot;Element pipeline&quot;&gt;
2465
2465
  &lt;section class=&quot;ui-board__col&quot; data-col=&quot;todo&quot; aria-labelledby=&quot;ui-board-todo&quot;&gt;
2466
2466
  &lt;header class=&quot;ui-board__head&quot;&gt;
@@ -2690,7 +2690,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2690
2690
  &lt;/header&gt;
2691
2691
  &lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;
2692
2692
  &lt;/section&gt;
2693
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board phân trang THEO SERVER (0.18.0, &lt;code&gt;hasMore&lt;/code&gt; + &lt;code&gt;moreHref&lt;/code&gt;): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link &quot;Show 24 more&quot; (&lt;code&gt;?col=x&amp;amp;page=2&lt;/code&gt;); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng &lt;code&gt;onLoadMore&lt;/code&gt; hoặc &lt;code&gt;linkAs&lt;/code&gt;</figcaption><div class="cat-wide"><iframe title="6 · Board phân trang THEO SERVER (0.18.0, &lt;code&gt;hasMore&lt;/code&gt; + &lt;code&gt;moreHref&lt;/code&gt;): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link &quot;Show 24 more&quot; (&lt;code&gt;?col=x&amp;amp;page=2&lt;/code&gt;); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng &lt;code&gt;onLoadMore&lt;/code&gt; hoặc &lt;code&gt;linkAs&lt;/code&gt;" style="height:560px;width:900px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-board&quot; id=&quot;catalog-paged&quot; role=&quot;region&quot; aria-label=&quot;Ideas&quot;&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;enough&quot; aria-labelledby=&quot;catalog-paged-enough&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot ui-board__dot--success&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-paged-enough&quot;&gt;Ready to write&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;412&lt;/span&gt;&lt;/header&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li data-id=&quot;i0&quot; data-name=&quot;Idea 1&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i0&quot;&gt;Idea 1&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#0 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i1&quot; data-name=&quot;Idea 2&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i1&quot;&gt;Idea 2&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#1 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i2&quot; data-name=&quot;Idea 3&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i2&quot;&gt;Idea 3&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#2 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i3&quot; data-name=&quot;Idea 4&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i3&quot;&gt;Idea 4&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#3 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i4&quot; data-name=&quot;Idea 5&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i4&quot;&gt;Idea 5&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#4 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i5&quot; data-name=&quot;Idea 6&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i5&quot;&gt;Idea 6&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#5 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i6&quot; data-name=&quot;Idea 7&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i6&quot;&gt;Idea 7&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#6 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i7&quot; data-name=&quot;Idea 8&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i7&quot;&gt;Idea 8&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#7 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i8&quot; data-name=&quot;Idea 9&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i8&quot;&gt;Idea 9&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#8 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i9&quot; data-name=&quot;Idea 10&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i9&quot;&gt;Idea 10&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#9 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i10&quot; data-name=&quot;Idea 11&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i10&quot;&gt;Idea 11&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#10 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i11&quot; data-name=&quot;Idea 12&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i11&quot;&gt;Idea 12&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#11 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div class=&quot;ui-more ui-board__next&quot;&gt;&lt;a class=&quot;ui-btn ui-btn--sm&quot; href=&quot;#collections&quot;&gt;Show 24 more&lt;/a&gt;&lt;/div&gt;&lt;/section&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;partial&quot; aria-labelledby=&quot;catalog-paged-partial&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot ui-board__dot--warning&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-paged-partial&quot;&gt;Needs more&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;9&lt;/span&gt;&lt;/header&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li data-id=&quot;p0&quot; data-name=&quot;Idea 100&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p0&quot;&gt;Idea 100&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#0 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p1&quot; data-name=&quot;Idea 101&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p1&quot;&gt;Idea 101&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#1 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p2&quot; data-name=&quot;Idea 102&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p2&quot;&gt;Idea 102&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#2 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p3&quot; data-name=&quot;Idea 103&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p3&quot;&gt;Idea 103&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#3 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p4&quot; data-name=&quot;Idea 104&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p4&quot;&gt;Idea 104&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#4 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p5&quot; data-name=&quot;Idea 105&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p5&quot;&gt;Idea 105&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#5 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p6&quot; data-name=&quot;Idea 106&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p6&quot;&gt;Idea 106&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#6 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p7&quot; data-name=&quot;Idea 107&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p7&quot;&gt;Idea 107&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#7 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p8&quot; data-name=&quot;Idea 108&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p8&quot;&gt;Idea 108&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#8 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
2693
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board phân trang THEO SERVER (0.18.0, &lt;code&gt;hasMore&lt;/code&gt; + &lt;code&gt;moreHref&lt;/code&gt;): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link &quot;Show 24 more&quot; (&lt;code&gt;?col=x&amp;amp;page=2&lt;/code&gt;); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng &lt;code&gt;onLoadMore&lt;/code&gt; hoặc &lt;code&gt;linkAs&lt;/code&gt;</figcaption><div class="cat-wide"><iframe title="6 · Board phân trang THEO SERVER (0.18.0, &lt;code&gt;hasMore&lt;/code&gt; + &lt;code&gt;moreHref&lt;/code&gt;): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link &quot;Show 24 more&quot; (&lt;code&gt;?col=x&amp;amp;page=2&lt;/code&gt;); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng &lt;code&gt;onLoadMore&lt;/code&gt; hoặc &lt;code&gt;linkAs&lt;/code&gt;" style="height:560px;width:900px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-board&quot; id=&quot;catalog-paged&quot; role=&quot;region&quot; aria-label=&quot;Ideas&quot;&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;enough&quot; aria-labelledby=&quot;catalog-paged-enough&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot ui-board__dot--success&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-paged-enough&quot;&gt;Ready to write&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;412&lt;/span&gt;&lt;/header&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li data-id=&quot;i0&quot; data-name=&quot;Idea 1&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i0&quot;&gt;Idea 1&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#0 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i1&quot; data-name=&quot;Idea 2&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i1&quot;&gt;Idea 2&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#1 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i2&quot; data-name=&quot;Idea 3&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i2&quot;&gt;Idea 3&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#2 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i3&quot; data-name=&quot;Idea 4&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i3&quot;&gt;Idea 4&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#3 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i4&quot; data-name=&quot;Idea 5&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i4&quot;&gt;Idea 5&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#4 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i5&quot; data-name=&quot;Idea 6&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i5&quot;&gt;Idea 6&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#5 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i6&quot; data-name=&quot;Idea 7&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i6&quot;&gt;Idea 7&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#6 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i7&quot; data-name=&quot;Idea 8&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i7&quot;&gt;Idea 8&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#7 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i8&quot; data-name=&quot;Idea 9&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i8&quot;&gt;Idea 9&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#8 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i9&quot; data-name=&quot;Idea 10&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i9&quot;&gt;Idea 10&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#9 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i10&quot; data-name=&quot;Idea 11&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i10&quot;&gt;Idea 11&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#10 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;i11&quot; data-name=&quot;Idea 12&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#i11&quot;&gt;Idea 12&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#11 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div class=&quot;ui-more ui-board__next&quot;&gt;&lt;a class=&quot;ui-btn ui-btn--sm&quot; href=&quot;#collections&quot;&gt;Show 24 more&lt;/a&gt;&lt;/div&gt;&lt;/section&gt;&lt;section class=&quot;ui-board__col&quot; data-col=&quot;partial&quot; aria-labelledby=&quot;catalog-paged-partial&quot;&gt;&lt;header class=&quot;ui-board__head&quot;&gt;&lt;span class=&quot;ui-board__dot ui-board__dot--warning&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-paged-partial&quot;&gt;Needs more&lt;/span&gt;&lt;span class=&quot;ui-board__count&quot;&gt;9&lt;/span&gt;&lt;/header&gt;&lt;ol class=&quot;ui-board__list&quot;&gt;&lt;li data-id=&quot;p0&quot; data-name=&quot;Idea 100&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p0&quot;&gt;Idea 100&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#0 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p1&quot; data-name=&quot;Idea 101&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p1&quot;&gt;Idea 101&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#1 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p2&quot; data-name=&quot;Idea 102&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p2&quot;&gt;Idea 102&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#2 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p3&quot; data-name=&quot;Idea 103&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p3&quot;&gt;Idea 103&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#3 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p4&quot; data-name=&quot;Idea 104&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p4&quot;&gt;Idea 104&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#4 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p5&quot; data-name=&quot;Idea 105&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p5&quot;&gt;Idea 105&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#5 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p6&quot; data-name=&quot;Idea 106&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p6&quot;&gt;Idea 106&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#6 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p7&quot; data-name=&quot;Idea 107&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p7&quot;&gt;Idea 107&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#7 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;li data-id=&quot;p8&quot; data-name=&quot;Idea 108&quot;&gt;&lt;article class=&quot;ui-card ui-card--media&quot;&gt;&lt;div class=&quot;ui-card__body&quot;&gt;&lt;a class=&quot;ui-card__link&quot; href=&quot;#p8&quot;&gt;Idea 108&lt;/a&gt;&lt;span class=&quot;ui-card__meta&quot;&gt;#8 · Section&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
2694
2694
  &lt;div class=&quot;ui-board&quot; id=&quot;catalog-paged&quot; role=&quot;region&quot; aria-label=&quot;Ideas&quot;&gt;
2695
2695
  &lt;section class=&quot;ui-board__col&quot; data-col=&quot;enough&quot; aria-labelledby=&quot;catalog-paged-enough&quot;&gt;
2696
2696
  &lt;header class=&quot;ui-board__head&quot;&gt;
@@ -3627,7 +3627,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3627
3627
  &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Xoá&lt;/button&gt;
3628
3628
  &lt;/div&gt;
3629
3629
  &lt;/div&gt;</code></pre></details></figure></section>
3630
- <section id="sheet"><h2>Ngăn trượt cạnh phải</h2><p><code>Sheet</code>: hộp thoại của gói (<code>ui-modal</code>, cùng head / body / foot) dính cạnh phải, cao hết màn, rộng 560 (<code>wide</code> 760), ở điện thoại chiếm cả màn. Mở một bản ghi ngay trên danh sách đang xem (người, tổ chức, app), đọc xong đóng lại đúng chỗ cũ. Escape, nền bị khoá, focus trả về hàng đã mở: nó chính là <code>Dialog</code> thêm lớp <code>ui-sheet</code>. CSS <code>sheet.css</code> do component tự nạp. Markup dưới đây mang thuộc tính <code>open</code> chỉ để vẽ được trong catalog; chép về thì bỏ <code>open</code> và mở bằng <code>showModal()</code> (thiếu nó: không nền mờ, trang sau không bị khoá).</p><figure class="cat-demo cat-screen"><figcaption>Sheet mở trên một danh sách</figcaption><iframe title="Sheet mở trên một danh sách" style="height:380px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px;display:grid;gap:8px&quot;&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Jane Doe&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Minh Tran&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Ana Silva&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Kenji Sato&lt;/div&gt;&lt;/div&gt;&lt;dialog open class=&quot;ui-modal ui-sheet&quot; aria-labelledby=&quot;:c56-R0:&quot; aria-describedby=&quot;:c56-R0H1:&quot; tabindex=&quot;-1&quot;&gt;&lt;div class=&quot;ui-modal__head&quot;&gt;&lt;div class=&quot;ui-modal__title&quot;&gt;&lt;span id=&quot;:c56-R0:&quot;&gt;Jane Doe&lt;/span&gt;&lt;span class=&quot;ui-modal__subtitle&quot; id=&quot;:c56-R0H1:&quot;&gt;CRO agency · Plus partner&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-modal__actions&quot;&gt;&lt;a class=&quot;ui-btn&quot; href=&quot;#&quot;&gt;Open full profile&lt;/a&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-modal__body&quot;&gt;&lt;p style=&quot;margin:0&quot;&gt;Founder at Example Agency. Last talked 3 days ago, next step due Friday.&lt;/p&gt;&lt;p class=&quot;ui-muted&quot; style=&quot;margin:12px 0 0&quot;&gt;The body scrolls; the head stays.&lt;/p&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px;display:grid;gap:8px&quot;&gt;
3630
+ <section id="sheet"><h2>Ngăn trượt cạnh phải</h2><p><code>Sheet</code>: hộp thoại của gói (<code>ui-modal</code>, cùng head / body / foot) dính cạnh phải, cao hết màn, rộng 560 (<code>wide</code> 760), ở điện thoại chiếm cả màn. Mở một bản ghi ngay trên danh sách đang xem (người, tổ chức, app), đọc xong đóng lại đúng chỗ cũ. Escape, nền bị khoá, focus trả về hàng đã mở: nó chính là <code>Dialog</code> thêm lớp <code>ui-sheet</code>. CSS <code>sheet.css</code> do component tự nạp. Markup dưới đây mang thuộc tính <code>open</code> chỉ để vẽ được trong catalog; chép về thì bỏ <code>open</code> và mở bằng <code>showModal()</code> (thiếu nó: không nền mờ, trang sau không bị khoá).</p><figure class="cat-demo cat-screen"><figcaption>Sheet mở trên một danh sách</figcaption><iframe title="Sheet mở trên một danh sách" style="height:380px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px;display:grid;gap:8px&quot;&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Jane Doe&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Minh Tran&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Ana Silva&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Kenji Sato&lt;/div&gt;&lt;/div&gt;&lt;dialog open class=&quot;ui-modal ui-sheet&quot; aria-labelledby=&quot;:c56-R0:&quot; aria-describedby=&quot;:c56-R0H1:&quot; tabindex=&quot;-1&quot;&gt;&lt;div class=&quot;ui-modal__head&quot;&gt;&lt;div class=&quot;ui-modal__title&quot;&gt;&lt;span id=&quot;:c56-R0:&quot;&gt;Jane Doe&lt;/span&gt;&lt;span class=&quot;ui-modal__subtitle&quot; id=&quot;:c56-R0H1:&quot;&gt;CRO agency · Plus partner&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-modal__actions&quot;&gt;&lt;a class=&quot;ui-btn&quot; href=&quot;#&quot;&gt;Open full profile&lt;/a&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-modal__body&quot;&gt;&lt;p style=&quot;margin:0&quot;&gt;Founder at Example Agency. Last talked 3 days ago, next step due Friday.&lt;/p&gt;&lt;p class=&quot;ui-muted&quot; style=&quot;margin:12px 0 0&quot;&gt;The body scrolls; the head stays.&lt;/p&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px;display:grid;gap:8px&quot;&gt;
3631
3631
  &lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Jane Doe&lt;/div&gt;
3632
3632
  &lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Minh Tran&lt;/div&gt;
3633
3633
  &lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Ana Silva&lt;/div&gt;
@@ -3656,7 +3656,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3656
3656
  &lt;p class=&quot;ui-muted&quot; style=&quot;margin:12px 0 0&quot;&gt;The body scrolls; the head stays.&lt;/p&gt;
3657
3657
  &lt;/div&gt;
3658
3658
  &lt;/dialog&gt;</code></pre></details></figure></section>
3659
- <section id="reader"><h2>Hộp đọc tài liệu</h2><p><code>ReaderDialog</code>: hộp thoại của gói (<code>ui-modal</code>, cùng head / body / foot) cỡ để ĐỌC một tài liệu ngay trên danh sách đang xem: rộng <code>min(1440px, 94vw)</code>, cao <code>min(92dvh, 1200px)</code>, ở điện thoại chiếm cả màn và hàng nút xuống dòng dưới tiêu đề. Thân không đệm, tài liệu lấp đầy: một <code>iframe.ui-reader__frame</code> (file HTML tự đứng) hoặc khung cuộn của chính trang với <code>ui-reader__scroll</code>. Nó chính là <code>Dialog</code> thêm lớp <code>ui-reader</code>; CSS <code>reader-dialog.css</code> do component tự nạp. Docs của GemMedia và Partner Radar dùng nó. Markup dưới đây mang thuộc tính <code>open</code> chỉ để vẽ được trong catalog; chép về thì bỏ <code>open</code> và mở bằng <code>showModal()</code>.</p><figure class="cat-demo cat-screen"><figcaption>ReaderDialog mở trên danh sách tài liệu</figcaption><iframe title="ReaderDialog mở trên danh sách tài liệu" style="height:420px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px;display:grid;gap:8px&quot;&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Partnership Playbook&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;GemMedia developer brief&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Media Studio research&lt;/div&gt;&lt;/div&gt;&lt;dialog open class=&quot;ui-modal ui-reader&quot; aria-labelledby=&quot;:c57-R0:&quot; aria-describedby=&quot;:c57-R0H1:&quot;&gt;&lt;div class=&quot;ui-modal__head&quot;&gt;&lt;div class=&quot;ui-modal__title&quot;&gt;&lt;span id=&quot;:c57-R0:&quot;&gt;Partnership Playbook&lt;/span&gt;&lt;span class=&quot;ui-modal__subtitle&quot; id=&quot;:c57-R0H1:&quot;&gt;v1.1 · updated 20 Oct 2026&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-modal__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Copy link&lt;/button&gt;&lt;a class=&quot;ui-btn ui-btn--sm&quot; href=&quot;#&quot;&gt;Open in a new tab&lt;/a&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-modal__body&quot;&gt;&lt;div class=&quot;ui-reader__scroll&quot;&gt;&lt;h2 style=&quot;margin:0 0 8px&quot;&gt;1. How to use this doc&lt;/h2&gt;&lt;p style=&quot;margin:0 0 12px&quot;&gt;The document fills the popup and scrolls inside it; the list behind holds still.&lt;/p&gt;&lt;p class=&quot;ui-muted&quot; style=&quot;margin:0&quot;&gt;An iframe takes ui-reader__frame instead of this scroller.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px;display:grid;gap:8px&quot;&gt;
3659
+ <section id="reader"><h2>Hộp đọc tài liệu</h2><p><code>ReaderDialog</code>: hộp thoại của gói (<code>ui-modal</code>, cùng head / body / foot) cỡ để ĐỌC một tài liệu ngay trên danh sách đang xem: rộng <code>min(1440px, 94vw)</code>, cao <code>min(92dvh, 1200px)</code>, ở điện thoại chiếm cả màn và hàng nút xuống dòng dưới tiêu đề. Thân không đệm, tài liệu lấp đầy: một <code>iframe.ui-reader__frame</code> (file HTML tự đứng) hoặc khung cuộn của chính trang với <code>ui-reader__scroll</code>. Nó chính là <code>Dialog</code> thêm lớp <code>ui-reader</code>; CSS <code>reader-dialog.css</code> do component tự nạp. Docs của GemMedia và Partner Radar dùng nó. Markup dưới đây mang thuộc tính <code>open</code> chỉ để vẽ được trong catalog; chép về thì bỏ <code>open</code> và mở bằng <code>showModal()</code>.</p><figure class="cat-demo cat-screen"><figcaption>ReaderDialog mở trên danh sách tài liệu</figcaption><iframe title="ReaderDialog mở trên danh sách tài liệu" style="height:420px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px;display:grid;gap:8px&quot;&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Partnership Playbook&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;GemMedia developer brief&lt;/div&gt;&lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Media Studio research&lt;/div&gt;&lt;/div&gt;&lt;dialog open class=&quot;ui-modal ui-reader&quot; aria-labelledby=&quot;:c57-R0:&quot; aria-describedby=&quot;:c57-R0H1:&quot;&gt;&lt;div class=&quot;ui-modal__head&quot;&gt;&lt;div class=&quot;ui-modal__title&quot;&gt;&lt;span id=&quot;:c57-R0:&quot;&gt;Partnership Playbook&lt;/span&gt;&lt;span class=&quot;ui-modal__subtitle&quot; id=&quot;:c57-R0H1:&quot;&gt;v1.1 · updated 20 Oct 2026&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-modal__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Copy link&lt;/button&gt;&lt;a class=&quot;ui-btn ui-btn--sm&quot; href=&quot;#&quot;&gt;Open in a new tab&lt;/a&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-modal__body&quot;&gt;&lt;div class=&quot;ui-reader__scroll&quot;&gt;&lt;h2 style=&quot;margin:0 0 8px&quot;&gt;1. How to use this doc&lt;/h2&gt;&lt;p style=&quot;margin:0 0 12px&quot;&gt;The document fills the popup and scrolls inside it; the list behind holds still.&lt;/p&gt;&lt;p class=&quot;ui-muted&quot; style=&quot;margin:0&quot;&gt;An iframe takes ui-reader__frame instead of this scroller.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px;display:grid;gap:8px&quot;&gt;
3660
3660
  &lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Partnership Playbook&lt;/div&gt;
3661
3661
  &lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;GemMedia developer brief&lt;/div&gt;
3662
3662
  &lt;div class=&quot;ui-card&quot; style=&quot;padding:12px&quot;&gt;Media Studio research&lt;/div&gt;
@@ -3688,7 +3688,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3688
3688
  &lt;/div&gt;
3689
3689
  &lt;/div&gt;
3690
3690
  &lt;/dialog&gt;</code></pre></details></figure></section>
3691
- <section id="settings"><h2>Hộp cài đặt</h2><p><code>SettingsDialog</code>: Settings là MỘT hộp thoại phủ lên app, dáng của admin: rail các mục bên trái có ô tìm, mục đang chọn bên phải, nút đóng ở góc; dưới 861px rail thành một dải ngang trên đầu. Chỉ là khung: bề mặt đưa danh sách mục và vẽ mục đang chọn (<code>children</code>); mục là nút (<code>onSelect</code>) hoặc link (<code>href</code> + <code>linkAs</code>, khi mỗi mục là một route). CSS <code>settings-dialog.css</code> do component tự nạp. Markup dưới đây mang <code>open</code> chỉ để vẽ trong catalog; chép về thì mở bằng <code>showModal()</code>.</p><figure class="cat-demo cat-screen"><figcaption>SettingsDialog, mục Scoring principles đang chọn</figcaption><div class="cat-wide"><iframe title="SettingsDialog, mục Scoring principles đang chọn" style="height:520px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;dialog open class=&quot;ui-modal ui-modal--lg ui-settings&quot; aria-labelledby=&quot;:c58-R0:&quot; tabindex=&quot;-1&quot;&gt;&lt;div class=&quot;ui-settings__layout&quot;&gt;&lt;nav class=&quot;ui-settings__rail&quot; aria-label=&quot;Settings sections&quot;&gt;&lt;div class=&quot;ui-settings__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;settings-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Search settings&quot; aria-label=&quot;Search settings&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;ui-settings__scroll&quot;&gt;&lt;div class=&quot;ui-settings__group&quot;&gt;&lt;h3 class=&quot;ui-settings__group-title&quot;&gt;Workspace&lt;/h3&gt;&lt;button type=&quot;button&quot; class=&quot;ui-settings__item&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.4&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;ui-settings__label&quot;&gt;General&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-settings__item ui-settings__item--active&quot; aria-current=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;ui-settings__label&quot;&gt;Scoring principles&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-settings__group&quot;&gt;&lt;h3 class=&quot;ui-settings__group-title&quot;&gt;Account&lt;/h3&gt;&lt;button type=&quot;button&quot; class=&quot;ui-settings__item&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;ui-settings__label&quot;&gt;Members&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-settings__foot&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-settings__item&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;ui-settings__label&quot;&gt;Jobs&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;ui-settings__pane&quot; aria-labelledby=&quot;:c58-R0:&quot;&gt;&lt;div class=&quot;ui-settings__pane-head&quot;&gt;&lt;h2 class=&quot;ui-settings__pane-title&quot; id=&quot;:c58-R0:&quot;&gt;Scoring principles&lt;/h2&gt;&lt;p class=&quot;ui-settings__pane-sub&quot;&gt;What makes a partner worth a call, and how much each signal weighs.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;ui-settings__pane-body&quot;&gt;&lt;div class=&quot;ui-settings__measure&quot;&gt;&lt;p style=&quot;margin:0&quot;&gt;The active section is the surface&amp;#x27;s own content.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close ui-settings__close&quot; aria-label=&quot;Close settings&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/dialog&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;dialog open class=&quot;ui-modal ui-modal--lg ui-settings&quot; aria-labelledby=&quot;:c58-R0:&quot; tabindex=&quot;-1&quot;&gt;
3691
+ <section id="settings"><h2>Hộp cài đặt</h2><p><code>SettingsDialog</code>: Settings là MỘT hộp thoại phủ lên app, dáng của admin: rail các mục bên trái có ô tìm, mục đang chọn bên phải, nút đóng ở góc; dưới 861px rail thành một dải ngang trên đầu. Chỉ là khung: bề mặt đưa danh sách mục và vẽ mục đang chọn (<code>children</code>); mục là nút (<code>onSelect</code>) hoặc link (<code>href</code> + <code>linkAs</code>, khi mỗi mục là một route). CSS <code>settings-dialog.css</code> do component tự nạp. Markup dưới đây mang <code>open</code> chỉ để vẽ trong catalog; chép về thì mở bằng <code>showModal()</code>.</p><figure class="cat-demo cat-screen"><figcaption>SettingsDialog, mục Scoring principles đang chọn</figcaption><div class="cat-wide"><iframe title="SettingsDialog, mục Scoring principles đang chọn" style="height:520px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;dialog open class=&quot;ui-modal ui-modal--lg ui-settings&quot; aria-labelledby=&quot;:c58-R0:&quot; tabindex=&quot;-1&quot;&gt;&lt;div class=&quot;ui-settings__layout&quot;&gt;&lt;nav class=&quot;ui-settings__rail&quot; aria-label=&quot;Settings sections&quot;&gt;&lt;div class=&quot;ui-settings__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;settings-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Search settings&quot; aria-label=&quot;Search settings&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;ui-settings__scroll&quot;&gt;&lt;div class=&quot;ui-settings__group&quot;&gt;&lt;h3 class=&quot;ui-settings__group-title&quot;&gt;Workspace&lt;/h3&gt;&lt;button type=&quot;button&quot; class=&quot;ui-settings__item&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.4&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;ui-settings__label&quot;&gt;General&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-settings__item ui-settings__item--active&quot; aria-current=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;ui-settings__label&quot;&gt;Scoring principles&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;ui-settings__group&quot;&gt;&lt;h3 class=&quot;ui-settings__group-title&quot;&gt;Account&lt;/h3&gt;&lt;button type=&quot;button&quot; class=&quot;ui-settings__item&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;ui-settings__label&quot;&gt;Members&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-settings__foot&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;ui-settings__item&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;ui-settings__label&quot;&gt;Jobs&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;ui-settings__pane&quot; aria-labelledby=&quot;:c58-R0:&quot;&gt;&lt;div class=&quot;ui-settings__pane-head&quot;&gt;&lt;h2 class=&quot;ui-settings__pane-title&quot; id=&quot;:c58-R0:&quot;&gt;Scoring principles&lt;/h2&gt;&lt;p class=&quot;ui-settings__pane-sub&quot;&gt;What makes a partner worth a call, and how much each signal weighs.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;ui-settings__pane-body&quot;&gt;&lt;div class=&quot;ui-settings__measure&quot;&gt;&lt;p style=&quot;margin:0&quot;&gt;The active section is the surface&amp;#x27;s own content.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close ui-settings__close&quot; aria-label=&quot;Close settings&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/dialog&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;dialog open class=&quot;ui-modal ui-modal--lg ui-settings&quot; aria-labelledby=&quot;:c58-R0:&quot; tabindex=&quot;-1&quot;&gt;
3692
3692
  &lt;div class=&quot;ui-settings__layout&quot;&gt;
3693
3693
  &lt;nav class=&quot;ui-settings__rail&quot; aria-label=&quot;Settings sections&quot;&gt;
3694
3694
  &lt;div class=&quot;ui-settings__search&quot;&gt;
@@ -3784,7 +3784,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3784
3784
  &lt;/svg&gt;
3785
3785
  &lt;/button&gt;
3786
3786
  &lt;/dialog&gt;</code></pre></details></figure></section>
3787
- <section id="switcher"><h2>Chuyển dịch vụ</h2><p><code>ServiceSwitcher</code> (0.36.0): bấm logo vẫn về trang chủ của dịch vụ; nút chín chấm ngay sau logo mở bảng mọi dịch vụ Gem, xếp theo cách một store được dựng rồi vận hành: GemBoss, Dựng store, Đọc thị trường, Nội dung và cộng đồng, Khách hàng, Đội và đối tác. Mỗi ô là logo (icon của bộ, nền tô theo dịch vụ, đọc được cả sáng lẫn tối), tên, một câu nói nó để làm gì; ô của dịch vụ đang đứng có viền accent và vẫn là link về trang chủ của nó. Ô tìm lọc theo tên và công dụng; mũi tên đi giữa các ô theo vị trí trên màn. Desktop: treo dưới topbar từ mép trái logo, rộng 760, cao tối đa 80%; ≤640px: cả màn, hai cột. React: <code>BrandLockup switcher={{ current: "gemfactory" }}</code>, hoặc <code>&lt;ServiceSwitcher current=… /&gt;</code> sau logo riêng. Danh sách là <code>GEM_SERVICES</code> (<code>@gemboss/ui/services</code>). CSS <code>service-switcher.css</code> do component tự nạp. Markup dưới đây mang <code>open</code> chỉ để vẽ trong catalog; chép về thì mở bằng <code>showModal()</code>. HTML thuần (không React): đặt <code>&lt;span data-gb-service-switcher="gemcapture" hidden&gt;</code> ngay sau logo, nạp <code>service-switcher.css</code>, rồi <code>kit-plain.js</code>, <code>service-switcher-plain.js</code> và gọi <code>gembossUI.initServiceSwitcher()</code>: script vẽ đúng markup trên vào chỗ đó, cùng hành vi (khung cuối chạy thật).</p><figure class="cat-demo cat-screen"><figcaption>Bảng dịch vụ mở, desktop 1280</figcaption><div class="cat-wide"><iframe title="Bảng dịch vụ mở, desktop 1280" style="height:720px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c59-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c59-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c59-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c59-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Find a service&quot; aria-label=&quot;Find a service&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://admin.gemboss.ai&quot; data-tint=&quot;iris&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemfactory.ops.gemboss.ai&quot; data-tint=&quot;blue&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://media.gemboss.ai&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.8&quot;&gt;&lt;/rect&gt;&lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemform.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://x.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemwatcher.ops.gemboss.ai&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://market.gemboss.ai&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://pixel.gemboss.ai&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://capture.gemboss.ai/admin&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://search-radar.ops.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://press.gemboss.ai/admin&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://content-radar.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://community.gemboss.ai/admin&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://news.gemboss.ai/admin&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://care.gemboss.ai/inbox&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://feedback.gemboss.ai/admin&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://partner-radar.ops.gemboss.ai&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemlabs-taskdesk-production.up.railway.app&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;a class=&quot;gb-svc__all&quot; href=&quot;https://gemfactory.ops.gemboss.ai/services&quot;&gt;All services and their health&lt;span aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
3787
+ <section id="switcher"><h2>Chuyển dịch vụ</h2><p><code>ServiceSwitcher</code> (0.36.0): bấm logo vẫn về trang chủ của dịch vụ; nút chín chấm ngay sau logo mở bảng mọi dịch vụ Gem, xếp theo cách một store được dựng rồi vận hành: GemBoss, Dựng store, Đọc thị trường, Nội dung và cộng đồng, Khách hàng, Đội và đối tác. Mỗi ô là logo (icon của bộ, nền tô theo dịch vụ, đọc được cả sáng lẫn tối), tên, một câu nói nó để làm gì; ô của dịch vụ đang đứng có viền accent và vẫn là link về trang chủ của nó. Ô tìm lọc theo tên và công dụng; mũi tên đi giữa các ô theo vị trí trên màn. Desktop: treo dưới topbar từ mép trái logo, rộng 760, cao tối đa 80%; ≤640px: cả màn, hai cột. React: <code>BrandLockup switcher={{ current: "gemfactory" }}</code>, hoặc <code>&lt;ServiceSwitcher current=… /&gt;</code> sau logo riêng. Danh sách là <code>GEM_SERVICES</code> (<code>@gemboss/ui/services</code>). CSS <code>service-switcher.css</code> do component tự nạp. Markup dưới đây mang <code>open</code> chỉ để vẽ trong catalog; chép về thì mở bằng <code>showModal()</code>. HTML thuần (không React): đặt <code>&lt;span data-gb-service-switcher="gemcapture" hidden&gt;</code> ngay sau logo, nạp <code>service-switcher.css</code>, rồi <code>kit-plain.js</code>, <code>service-switcher-plain.js</code> và gọi <code>gembossUI.initServiceSwitcher()</code>: script vẽ đúng markup trên vào chỗ đó, cùng hành vi (khung cuối chạy thật).</p><figure class="cat-demo cat-screen"><figcaption>Bảng dịch vụ mở, desktop 1280</figcaption><div class="cat-wide"><iframe title="Bảng dịch vụ mở, desktop 1280" style="height:720px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c59-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c59-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c59-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c59-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Find a service&quot; aria-label=&quot;Find a service&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://admin.gemboss.ai&quot; data-tint=&quot;iris&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemfactory.ops.gemboss.ai&quot; data-tint=&quot;blue&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://media.gemboss.ai&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.8&quot;&gt;&lt;/rect&gt;&lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemform.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://x.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemwatcher.ops.gemboss.ai&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://market.gemboss.ai&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://pixel.gemboss.ai&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://capture.gemboss.ai/admin&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://search-radar.ops.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://press.gemboss.ai/admin&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://content-radar.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://community.gemboss.ai/admin&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://news.gemboss.ai/admin&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://care.gemboss.ai/inbox&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://feedback.gemboss.ai/admin&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://partner-radar.ops.gemboss.ai&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemlabs-taskdesk-production.up.railway.app&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;a class=&quot;gb-svc__all&quot; href=&quot;https://gemfactory.ops.gemboss.ai/services&quot;&gt;All services and their health&lt;span aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
3788
3788
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3789
3789
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3790
3790
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;
@@ -4257,7 +4257,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4257
4257
  &lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;
4258
4258
  &lt;/div&gt;
4259
4259
  &lt;/main&gt;
4260
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Bảng dịch vụ mở, nền tối</figcaption><div class="cat-wide"><iframe title="Bảng dịch vụ mở, nền tối" style="height:720px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c59-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c59-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c59-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c59-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Find a service&quot; aria-label=&quot;Find a service&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://admin.gemboss.ai&quot; data-tint=&quot;iris&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemfactory.ops.gemboss.ai&quot; data-tint=&quot;blue&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://media.gemboss.ai&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.8&quot;&gt;&lt;/rect&gt;&lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemform.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://x.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemwatcher.ops.gemboss.ai&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://market.gemboss.ai&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://pixel.gemboss.ai&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://capture.gemboss.ai/admin&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://search-radar.ops.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://press.gemboss.ai/admin&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://content-radar.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://community.gemboss.ai/admin&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://news.gemboss.ai/admin&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://care.gemboss.ai/inbox&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://feedback.gemboss.ai/admin&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://partner-radar.ops.gemboss.ai&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemlabs-taskdesk-production.up.railway.app&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;a class=&quot;gb-svc__all&quot; href=&quot;https://gemfactory.ops.gemboss.ai/services&quot;&gt;All services and their health&lt;span aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
4260
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Bảng dịch vụ mở, nền tối</figcaption><div class="cat-wide"><iframe title="Bảng dịch vụ mở, nền tối" style="height:720px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c59-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c59-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c59-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c59-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Find a service&quot; aria-label=&quot;Find a service&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://admin.gemboss.ai&quot; data-tint=&quot;iris&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemfactory.ops.gemboss.ai&quot; data-tint=&quot;blue&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://media.gemboss.ai&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.8&quot;&gt;&lt;/rect&gt;&lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemform.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://x.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemwatcher.ops.gemboss.ai&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://market.gemboss.ai&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://pixel.gemboss.ai&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://capture.gemboss.ai/admin&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://search-radar.ops.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://press.gemboss.ai/admin&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://content-radar.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://community.gemboss.ai/admin&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://news.gemboss.ai/admin&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://care.gemboss.ai/inbox&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://feedback.gemboss.ai/admin&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://partner-radar.ops.gemboss.ai&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemlabs-taskdesk-production.up.railway.app&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;a class=&quot;gb-svc__all&quot; href=&quot;https://gemfactory.ops.gemboss.ai/services&quot;&gt;All services and their health&lt;span aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
4261
4261
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4262
4262
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4263
4263
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;
@@ -4730,7 +4730,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4730
4730
  &lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;
4731
4731
  &lt;/div&gt;
4732
4732
  &lt;/main&gt;
4733
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Bảng dịch vụ mở, điện thoại 390</figcaption><div class="cat-wide"><iframe title="Bảng dịch vụ mở, điện thoại 390" style="height:760px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c59-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c59-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c59-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c59-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Find a service&quot; aria-label=&quot;Find a service&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://admin.gemboss.ai&quot; data-tint=&quot;iris&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemfactory.ops.gemboss.ai&quot; data-tint=&quot;blue&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://media.gemboss.ai&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.8&quot;&gt;&lt;/rect&gt;&lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemform.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://x.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemwatcher.ops.gemboss.ai&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://market.gemboss.ai&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://pixel.gemboss.ai&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://capture.gemboss.ai/admin&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://search-radar.ops.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://press.gemboss.ai/admin&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://content-radar.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://community.gemboss.ai/admin&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://news.gemboss.ai/admin&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://care.gemboss.ai/inbox&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://feedback.gemboss.ai/admin&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://partner-radar.ops.gemboss.ai&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemlabs-taskdesk-production.up.railway.app&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;a class=&quot;gb-svc__all&quot; href=&quot;https://gemfactory.ops.gemboss.ai/services&quot;&gt;All services and their health&lt;span aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
4733
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Bảng dịch vụ mở, điện thoại 390</figcaption><div class="cat-wide"><iframe title="Bảng dịch vụ mở, điện thoại 390" style="height:760px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c59-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c59-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c59-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c59-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Find a service&quot; aria-label=&quot;Find a service&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://admin.gemboss.ai&quot; data-tint=&quot;iris&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemfactory.ops.gemboss.ai&quot; data-tint=&quot;blue&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://media.gemboss.ai&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.8&quot;&gt;&lt;/rect&gt;&lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemform.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://x.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemwatcher.ops.gemboss.ai&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://market.gemboss.ai&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://pixel.gemboss.ai&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://capture.gemboss.ai/admin&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://search-radar.ops.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://press.gemboss.ai/admin&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://content-radar.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://community.gemboss.ai/admin&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://news.gemboss.ai/admin&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://care.gemboss.ai/inbox&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://feedback.gemboss.ai/admin&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c59-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c59-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://partner-radar.ops.gemboss.ai&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemlabs-taskdesk-production.up.railway.app&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;a class=&quot;gb-svc__all&quot; href=&quot;https://gemfactory.ops.gemboss.ai/services&quot;&gt;All services and their health&lt;span aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
4734
4734
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4735
4735
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4736
4736
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c59-R0:&quot;&gt;
@@ -5203,7 +5203,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5203
5203
  &lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;
5204
5204
  &lt;/div&gt;
5205
5205
  &lt;/main&gt;
5206
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Switcher (0.40.0): nhóm cộng đồng dạng thẻ có hình, desktop 1280</figcaption><div class="cat-wide"><iframe title="Switcher (0.40.0): nhóm cộng đồng dạng thẻ có hình, desktop 1280" style="height:760px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCommunity home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemCommunity&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c61-Rkj:svc&quot; aria-label=&quot;Đổi nhóm&quot; title=&quot;Đổi nhóm&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c61-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c61-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c61-Rkj:svc-t&quot;&gt;Cộng đồng&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Tìm nhóm&quot; aria-label=&quot;Tìm nhóm&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-mine&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-mine&quot;&gt;Nhóm của bạn&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;iris&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;◈&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhóm người dùng GemBoss: funnel, store, kết quả thật.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;img src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235661f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230d9488%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20d%3D%22M120%2C50%20200%2C50%20230%2C90%20160%2C150%2090%2C90Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;/&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;AI-native Sales Funnel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Người dùng GemPages và GemBoss dựng funnel bằng AI.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-discover&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-discover&quot;&gt;Khám phá thêm&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;🇨🇳&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;China Brands Go Global · 中国品牌出海&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Thương hiệu Trung Quốc bán ra thế giới.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;💄&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Beauty Brands&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhà sáng lập skincare và làm đẹp.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;＋ Tạo cộng đồng&lt;/button&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Tìm bài &amp;amp; thành viên&quot; aria-label=&quot;Tìm bài &amp;amp; thành viên&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c61-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5206
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Switcher (0.40.0): nhóm cộng đồng dạng thẻ có hình, desktop 1280</figcaption><div class="cat-wide"><iframe title="Switcher (0.40.0): nhóm cộng đồng dạng thẻ có hình, desktop 1280" style="height:760px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCommunity home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemCommunity&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c61-Rkj:svc&quot; aria-label=&quot;Đổi nhóm&quot; title=&quot;Đổi nhóm&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c61-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c61-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c61-Rkj:svc-t&quot;&gt;Cộng đồng&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Tìm nhóm&quot; aria-label=&quot;Tìm nhóm&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-mine&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-mine&quot;&gt;Nhóm của bạn&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;iris&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;◈&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhóm người dùng GemBoss: funnel, store, kết quả thật.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;img src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235661f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230d9488%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20d%3D%22M120%2C50%20200%2C50%20230%2C90%20160%2C150%2090%2C90Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;/&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;AI-native Sales Funnel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Người dùng GemPages và GemBoss dựng funnel bằng AI.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-discover&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-discover&quot;&gt;Khám phá thêm&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;🇨🇳&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;China Brands Go Global · 中国品牌出海&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Thương hiệu Trung Quốc bán ra thế giới.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;💄&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Beauty Brands&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhà sáng lập skincare và làm đẹp.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;＋ Tạo cộng đồng&lt;/button&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Tìm bài &amp;amp; thành viên&quot; aria-label=&quot;Tìm bài &amp;amp; thành viên&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c61-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5207
5207
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
5208
5208
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
5209
5209
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;
@@ -5366,7 +5366,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5366
5366
  &lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;
5367
5367
  &lt;/div&gt;
5368
5368
  &lt;/main&gt;
5369
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Switcher: nhóm cộng đồng, nền tối</figcaption><div class="cat-wide"><iframe title="Switcher: nhóm cộng đồng, nền tối" style="height:760px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCommunity home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemCommunity&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c61-Rkj:svc&quot; aria-label=&quot;Đổi nhóm&quot; title=&quot;Đổi nhóm&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c61-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c61-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c61-Rkj:svc-t&quot;&gt;Cộng đồng&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Tìm nhóm&quot; aria-label=&quot;Tìm nhóm&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-mine&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-mine&quot;&gt;Nhóm của bạn&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;iris&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;◈&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhóm người dùng GemBoss: funnel, store, kết quả thật.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;img src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235661f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230d9488%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20d%3D%22M120%2C50%20200%2C50%20230%2C90%20160%2C150%2090%2C90Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;/&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;AI-native Sales Funnel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Người dùng GemPages và GemBoss dựng funnel bằng AI.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-discover&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-discover&quot;&gt;Khám phá thêm&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;🇨🇳&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;China Brands Go Global · 中国品牌出海&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Thương hiệu Trung Quốc bán ra thế giới.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;💄&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Beauty Brands&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhà sáng lập skincare và làm đẹp.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;＋ Tạo cộng đồng&lt;/button&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Tìm bài &amp;amp; thành viên&quot; aria-label=&quot;Tìm bài &amp;amp; thành viên&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c61-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5369
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Switcher: nhóm cộng đồng, nền tối</figcaption><div class="cat-wide"><iframe title="Switcher: nhóm cộng đồng, nền tối" style="height:760px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCommunity home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemCommunity&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c61-Rkj:svc&quot; aria-label=&quot;Đổi nhóm&quot; title=&quot;Đổi nhóm&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c61-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c61-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c61-Rkj:svc-t&quot;&gt;Cộng đồng&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Tìm nhóm&quot; aria-label=&quot;Tìm nhóm&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-mine&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-mine&quot;&gt;Nhóm của bạn&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;iris&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;◈&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhóm người dùng GemBoss: funnel, store, kết quả thật.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;img src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235661f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230d9488%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20d%3D%22M120%2C50%20200%2C50%20230%2C90%20160%2C150%2090%2C90Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;/&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;AI-native Sales Funnel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Người dùng GemPages và GemBoss dựng funnel bằng AI.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-discover&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-discover&quot;&gt;Khám phá thêm&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;🇨🇳&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;China Brands Go Global · 中国品牌出海&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Thương hiệu Trung Quốc bán ra thế giới.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;💄&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Beauty Brands&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhà sáng lập skincare và làm đẹp.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;＋ Tạo cộng đồng&lt;/button&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Tìm bài &amp;amp; thành viên&quot; aria-label=&quot;Tìm bài &amp;amp; thành viên&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c61-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5370
5370
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
5371
5371
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
5372
5372
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;
@@ -5529,7 +5529,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5529
5529
  &lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;
5530
5530
  &lt;/div&gt;
5531
5531
  &lt;/main&gt;
5532
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Switcher: nhóm cộng đồng, điện thoại 390</figcaption><div class="cat-wide"><iframe title="Switcher: nhóm cộng đồng, điện thoại 390" style="height:820px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCommunity home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemCommunity&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c61-Rkj:svc&quot; aria-label=&quot;Đổi nhóm&quot; title=&quot;Đổi nhóm&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c61-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c61-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c61-Rkj:svc-t&quot;&gt;Cộng đồng&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Tìm nhóm&quot; aria-label=&quot;Tìm nhóm&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-mine&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-mine&quot;&gt;Nhóm của bạn&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;iris&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;◈&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhóm người dùng GemBoss: funnel, store, kết quả thật.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;img src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235661f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230d9488%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20d%3D%22M120%2C50%20200%2C50%20230%2C90%20160%2C150%2090%2C90Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;/&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;AI-native Sales Funnel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Người dùng GemPages và GemBoss dựng funnel bằng AI.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-discover&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-discover&quot;&gt;Khám phá thêm&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;🇨🇳&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;China Brands Go Global · 中国品牌出海&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Thương hiệu Trung Quốc bán ra thế giới.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;💄&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Beauty Brands&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhà sáng lập skincare và làm đẹp.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;＋ Tạo cộng đồng&lt;/button&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Tìm bài &amp;amp; thành viên&quot; aria-label=&quot;Tìm bài &amp;amp; thành viên&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c61-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5532
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Switcher: nhóm cộng đồng, điện thoại 390</figcaption><div class="cat-wide"><iframe title="Switcher: nhóm cộng đồng, điện thoại 390" style="height:820px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCommunity home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemCommunity&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c61-Rkj:svc&quot; aria-label=&quot;Đổi nhóm&quot; title=&quot;Đổi nhóm&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog open id=&quot;:c61-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c61-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c61-Rkj:svc-t&quot;&gt;Cộng đồng&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Tìm nhóm&quot; aria-label=&quot;Tìm nhóm&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-mine&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-mine&quot;&gt;Nhóm của bạn&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;iris&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;◈&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhóm người dùng GemBoss: funnel, store, kết quả thật.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;img src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235661f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230d9488%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20d%3D%22M120%2C50%20200%2C50%20230%2C90%20160%2C150%2090%2C90Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E&quot; alt=&quot;&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;/&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;AI-native Sales Funnel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Người dùng GemPages và GemBoss dựng funnel bằng AI.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c61-Rkj:svc-discover&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c61-Rkj:svc-discover&quot;&gt;Khám phá thêm&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid gb-svc__grid--media&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;🇨🇳&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;China Brands Go Global · 中国品牌出海&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Thương hiệu Trung Quốc bán ra thế giới.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile gb-svc__tile--media&quot; href=&quot;#&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__media&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-svc__media-glyph&quot;&gt;💄&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Beauty Brands&lt;span class=&quot;gb-svc__badge&quot;&gt;Xin vào&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Nhà sáng lập skincare và làm đẹp.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;＋ Tạo cộng đồng&lt;/button&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Tìm bài &amp;amp; thành viên&quot; aria-label=&quot;Tìm bài &amp;amp; thành viên&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c61-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5533
5533
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
5534
5534
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
5535
5535
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c61-R0:&quot;&gt;
@@ -5692,7 +5692,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5692
5692
  &lt;h1 style=&quot;margin:0&quot;&gt;Bảng tin&lt;/h1&gt;
5693
5693
  &lt;/div&gt;
5694
5694
  &lt;/main&gt;
5695
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>HTML thuần (service-switcher-plain.js, chạy thật): bấm nút chín chấm</figcaption><div class="cat-wide"><iframe title="HTML thuần (service-switcher-plain.js, chạy thật): bấm nút chín chấm" style="height:720px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c60-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCapture home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemCapture&lt;/span&gt;&lt;/a&gt;&lt;span data-gb-service-switcher=&quot;gemcapture&quot; hidden=&quot;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c60-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Captures&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Live captures&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/service-switcher-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initMenus(); gembossUI.initServiceSwitcher();&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5695
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>HTML thuần (service-switcher-plain.js, chạy thật): bấm nút chín chấm</figcaption><div class="cat-wide"><iframe title="HTML thuần (service-switcher-plain.js, chạy thật): bấm nút chín chấm" style="height:720px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c60-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCapture home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemCapture&lt;/span&gt;&lt;/a&gt;&lt;span data-gb-service-switcher=&quot;gemcapture&quot; hidden=&quot;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c60-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Captures&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Live captures&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/service-switcher-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initMenus(); gembossUI.initServiceSwitcher();&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5696
5696
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
5697
5697
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
5698
5698
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c60-R0:&quot;&gt;
@@ -5775,7 +5775,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5775
5775
  &lt;script src=&quot;../src/service-switcher-plain.js&quot;&gt;
5776
5776
  &lt;/script&gt;
5777
5777
  &lt;script&gt;gembossUI.initMenus(); gembossUI.initServiceSwitcher();&lt;/script&gt;</code></pre></details></figure></section>
5778
- <section id="shell"><h2>Khung app</h2><p>Topbar 56px, rail 240px, ≤760px thành ngăn kéo. Logo <code>BrandLockup</code> (với <code>switcher</code>: nút chín chấm mở bảng các dịch vụ Gem, mục “Chuyển dịch vụ”), tài khoản <code>AccountMenu</code> (bấm chữ viết tắt), mục Trợ lý ở chân rail có class <code>gnav-assistant</code>.</p><figure class="cat-demo cat-screen"><figcaption>AppShell + BrandLockup (switcher) + AccountMenu + Icon</figcaption><iframe title="AppShell + BrandLockup (switcher) + AccountMenu + Icon" style="height:460px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Mở menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Mở menu&quot; data-label-close=&quot;Đóng menu&quot; aria-controls=&quot;:c62-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c62-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog id=&quot;:c62-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c62-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c62-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Find a service&quot; aria-label=&quot;Find a service&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://admin.gemboss.ai&quot; data-tint=&quot;iris&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemfactory.ops.gemboss.ai&quot; data-tint=&quot;blue&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://media.gemboss.ai&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.8&quot;&gt;&lt;/rect&gt;&lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemform.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://x.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemwatcher.ops.gemboss.ai&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://market.gemboss.ai&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://pixel.gemboss.ai&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://capture.gemboss.ai/admin&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://search-radar.ops.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://press.gemboss.ai/admin&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://content-radar.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://community.gemboss.ai/admin&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://news.gemboss.ai/admin&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://care.gemboss.ai/inbox&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://feedback.gemboss.ai/admin&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://partner-radar.ops.gemboss.ai&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemlabs-taskdesk-production.up.railway.app&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;a class=&quot;gb-svc__all&quot; href=&quot;https://gemfactory.ops.gemboss.ai/services&quot;&gt;All services and their health&lt;span aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search by #ID, name or key&quot; aria-label=&quot;Search by #ID, name or key&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;div class=&quot;gb-account-role&quot;&gt;Designer&lt;/div&gt;&lt;/div&gt;&lt;a role=&quot;menuitem&quot; class=&quot;gemboss-account-menu-item&quot; href=&quot;#&quot;&gt;Cài đặt&lt;/a&gt;&lt;form method=&quot;post&quot; action=&quot;#&quot; class=&quot;gb-account-form&quot;&gt;&lt;button role=&quot;menuitem&quot; type=&quot;submit&quot; class=&quot;gemboss-account-menu-item danger&quot;&gt;Đăng xuất&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c62-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3.5&quot; y=&quot;3&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;8.25&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;13.5&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Ghép trang&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3.2 17.3 16H2.7z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M10 8.2v3.6M10 13.9v.1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Framework thiếu&lt;/span&gt;&lt;span class=&quot;gnav-count&quot; aria-label=&quot;3 mục đang mở&quot;&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gnav-bottom&quot;&gt;&lt;div class=&quot;gnav-sep&quot;&gt;&lt;/div&gt;&lt;a class=&quot;gnav-item gnav-assistant&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Trợ lý&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Đóng menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Nội dung màn&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5778
+ <section id="shell"><h2>Khung app</h2><p>Topbar 56px, rail 240px, ≤760px thành ngăn kéo. Logo <code>BrandLockup</code> (với <code>switcher</code>: nút chín chấm mở bảng các dịch vụ Gem, mục “Chuyển dịch vụ”), tài khoản <code>AccountMenu</code> (bấm chữ viết tắt), mục Trợ lý ở chân rail có class <code>gnav-assistant</code>.</p><figure class="cat-demo cat-screen"><figcaption>AppShell + BrandLockup (switcher) + AccountMenu + Icon</figcaption><iframe title="AppShell + BrandLockup (switcher) + AccountMenu + Icon" style="height:460px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Mở menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Mở menu&quot; data-label-close=&quot;Đóng menu&quot; aria-controls=&quot;:c62-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;button type=&quot;button&quot; class=&quot;gb-svc-trigger&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c62-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;dialog id=&quot;:c62-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c62-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c62-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;&lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__search&quot;&gt;&lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-field__bare&quot; type=&quot;search&quot; name=&quot;service-search&quot; autoComplete=&quot;off&quot; placeholder=&quot;Find a service&quot; aria-label=&quot;Find a service&quot; value=&quot;&quot;/&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__body&quot;&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://admin.gemboss.ai&quot; data-tint=&quot;iris&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemfactory.ops.gemboss.ai&quot; data-tint=&quot;blue&quot; aria-current=&quot;page&quot; tabindex=&quot;0&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://media.gemboss.ai&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.8&quot;&gt;&lt;/rect&gt;&lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemform.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://x.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemwatcher.ops.gemboss.ai&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://market.gemboss.ai&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://pixel.gemboss.ai&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://capture.gemboss.ai/admin&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;3.5&quot; width=&quot;15&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://search-radar.ops.gemboss.ai&quot; data-tint=&quot;amber&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://press.gemboss.ai/admin&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://content-radar.ops.gemboss.ai&quot; data-tint=&quot;teal&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M10 10l5-5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://community.gemboss.ai/admin&quot; data-tint=&quot;blue&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://news.gemboss.ai/admin&quot; data-tint=&quot;rose&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://care.gemboss.ai/inbox&quot; data-tint=&quot;green&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://feedback.gemboss.ai/admin&quot; data-tint=&quot;violet&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c62-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c62-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;&lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://partner-radar.ops.gemboss.ai&quot; data-tint=&quot;orange&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-svc__tile&quot; href=&quot;https://gemlabs-taskdesk-production.up.railway.app&quot; data-tint=&quot;slate&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;&lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-svc__foot&quot;&gt;&lt;a class=&quot;gb-svc__all&quot; href=&quot;https://gemfactory.ops.gemboss.ai/services&quot;&gt;All services and their health&lt;span aria-hidden=&quot;true&quot;&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gemboss-topbar-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gemboss-topbar-search-input&quot; type=&quot;search&quot; name=&quot;q&quot; placeholder=&quot;Search by #ID, name or key&quot; aria-label=&quot;Search by #ID, name or key&quot; autoComplete=&quot;off&quot; enterKeyHint=&quot;search&quot;/&gt;&lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;&lt;/form&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;details class=&quot;gb-account&quot;&gt;&lt;summary class=&quot;gemboss-account-chip&quot; aria-label=&quot;Account · Minh Anh&quot; title=&quot;Minh Anh&quot;&gt;MA&lt;/summary&gt;&lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;&lt;div class=&quot;gb-account-head&quot;&gt;&lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;&lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;&lt;div class=&quot;gb-account-role&quot;&gt;Designer&lt;/div&gt;&lt;/div&gt;&lt;a role=&quot;menuitem&quot; class=&quot;gemboss-account-menu-item&quot; href=&quot;#&quot;&gt;Cài đặt&lt;/a&gt;&lt;form method=&quot;post&quot; action=&quot;#&quot; class=&quot;gb-account-form&quot;&gt;&lt;button role=&quot;menuitem&quot; type=&quot;submit&quot; class=&quot;gemboss-account-menu-item danger&quot;&gt;Đăng xuất&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/details&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c62-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3.5&quot; y=&quot;3&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;8.25&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;13.5&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Ghép trang&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3.2 17.3 16H2.7z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M10 8.2v3.6M10 13.9v.1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Framework thiếu&lt;/span&gt;&lt;span class=&quot;gnav-count&quot; aria-label=&quot;3 mục đang mở&quot;&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gnav-bottom&quot;&gt;&lt;div class=&quot;gnav-sep&quot;&gt;&lt;/div&gt;&lt;a class=&quot;gnav-item gnav-assistant&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Trợ lý&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Đóng menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Nội dung màn&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
5779
5779
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
5780
5780
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
5781
5781
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Mở menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Mở menu&quot; data-label-close=&quot;Đóng menu&quot; aria-controls=&quot;:c62-R0:&quot;&gt;
@@ -6303,7 +6303,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
6303
6303
  &lt;/div&gt;
6304
6304
  &lt;/main&gt;
6305
6305
  &lt;/div&gt;</code></pre></details></figure></section>
6306
- <section id="nav"><h2>Chờ điều hướng</h2><p>Bấm một mục rail là có phản hồi ở khung hình đầu tiên: icon thành spinner trong đúng ô 20px (chữ không xê dịch), mục con có spinner 12px ở phần thụt lề ngay trước chữ, con trỏ chờ. Một trạng thái, ba cách đặt: <code>RailItem pending</code> / <code>RailSubItem pending</code> (React, thành <code>aria-busy="true"</code>); <code>RailItem as={NavLink}</code> của <code>@gemboss/ui/next</code> (đọc <code>useLinkStatus</code> của Next, tải trước khi chuột hoặc focus bàn phím dừng 120 ms, hoặc khi chạm); trang HTML thuần nạp <code>kit-plain.js</code> là tự có, kể cả tải trước (speculation rules ở Chromium, không có thì <code>&lt;link rel="prefetch"&gt;</code>). Link trong nội dung trang thêm <code>data-gb-pending</code> ("inline" hoặc "corner").</p><figure class="cat-demo cat-screen"><figcaption>RailItem pending + RailSubItem pending</figcaption><iframe title="RailItem pending + RailSubItem pending" style="height:300px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c63-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c63-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; aria-busy=&quot;true&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3.5&quot; y=&quot;3&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;8.25&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;13.5&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Ghép trang (đang mở)&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group active has-active-child&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Báo cáo&lt;/span&gt;&lt;/a&gt;&lt;ul class=&quot;gnav-sub&quot;&gt;&lt;li&gt;&lt;a class=&quot;gnav-subitem active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Tổng quan&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gnav-subitem&quot; aria-busy=&quot;true&quot; href=&quot;#&quot;&gt;Theo kênh (đang mở)&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Tổng quan&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6306
+ <section id="nav"><h2>Chờ điều hướng</h2><p>Bấm một mục rail là có phản hồi ở khung hình đầu tiên: icon thành spinner trong đúng ô 20px (chữ không xê dịch), mục con có spinner 12px ở phần thụt lề ngay trước chữ, con trỏ chờ. Một trạng thái, ba cách đặt: <code>RailItem pending</code> / <code>RailSubItem pending</code> (React, thành <code>aria-busy="true"</code>); <code>RailItem as={NavLink}</code> của <code>@gemboss/ui/next</code> (đọc <code>useLinkStatus</code> của Next, tải trước khi chuột hoặc focus bàn phím dừng 120 ms, hoặc khi chạm); trang HTML thuần nạp <code>kit-plain.js</code> là tự có, kể cả tải trước (speculation rules ở Chromium, không có thì <code>&lt;link rel="prefetch"&gt;</code>). Link trong nội dung trang thêm <code>data-gb-pending</code> ("inline" hoặc "corner").</p><figure class="cat-demo cat-screen"><figcaption>RailItem pending + RailSubItem pending</figcaption><iframe title="RailItem pending + RailSubItem pending" style="height:300px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c63-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c63-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; aria-busy=&quot;true&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3.5&quot; y=&quot;3&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;8.25&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;13.5&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Ghép trang (đang mở)&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group active has-active-child&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 16.5h14&quot;&gt;&lt;/path&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;2.8&quot; height=&quot;5.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8.6&quot; y=&quot;5&quot; width=&quot;2.8&quot; height=&quot;9.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;12.7&quot; y=&quot;11&quot; width=&quot;2.8&quot; height=&quot;3.5&quot; rx=&quot;.7&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Báo cáo&lt;/span&gt;&lt;/a&gt;&lt;ul class=&quot;gnav-sub&quot;&gt;&lt;li&gt;&lt;a class=&quot;gnav-subitem active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Tổng quan&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gnav-subitem&quot; aria-busy=&quot;true&quot; href=&quot;#&quot;&gt;Theo kênh (đang mở)&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div style=&quot;padding:24px&quot;&gt;&lt;h1 style=&quot;margin:0&quot;&gt;Tổng quan&lt;/h1&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6307
6307
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
6308
6308
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
6309
6309
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c63-R0:&quot;&gt;
@@ -6423,7 +6423,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
6423
6423
  &lt;/span&gt;
6424
6424
  &lt;/div&gt;
6425
6425
  &lt;/div&gt;</code></pre></details></figure></section>
6426
- <section id="page"><h2>Bề rộng nội dung</h2><p>Rail bên trái, bên phải là một cột có bề rộng tối đa theo bậc của admin: <code>ui-page</code> 900px (<code>--ui-content-max</code>: danh sách, bảng, lưới card, dashboard), <code>--feed</code> 720, <code>--form</code> 662, <code>--canvas</code> 1440 (chỉ khi nội dung đo được là rộng hơn một cột chữ), <code>--full</code> không giới hạn (board, editor; ghi lý do). React: một <code>PageContainer width="form"</code> ngay trong <code>AppShell</code>. Một cap chỉ có tác dụng khi nó NHỎ HƠN chỗ trống thật: ở 1280 chỗ trống là 992. Hai khung dưới vẽ ở 1440, kéo ngang để xem hết.</p><figure class="cat-demo cat-screen"><figcaption>PageContainer width=&quot;default&quot; ở 1440: cột 900</figcaption><div class="cat-wide"><iframe title="PageContainer width=&quot;default&quot; ở 1440: cột 900" style="height:300px;width:1440px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c65-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c65-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3.5&quot; y=&quot;3&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;8.25&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;13.5&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Ghép trang&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3.2 17.3 16H2.7z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M10 8.2v3.6M10 13.9v.1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Framework thiếu&lt;/span&gt;&lt;span class=&quot;gnav-count&quot; aria-label=&quot;3 mục đang mở&quot;&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div class=&quot;ui-page&quot;&gt;&lt;h1 style=&quot;margin:0 0 16px&quot;&gt;Board&lt;/h1&gt;&lt;div class=&quot;ui-card&quot;&gt;&lt;div class=&quot;ui-card__title&quot;&gt;#412 Hero split&lt;/div&gt;&lt;p class=&quot;ui-muted&quot;&gt;Cột 900px, căn giữa trong chỗ trống bên phải rail.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6426
+ <section id="page"><h2>Bề rộng nội dung</h2><p>Rail bên trái, bên phải là một cột có bề rộng tối đa theo bậc của admin: <code>ui-page</code> 900px (<code>--ui-content-max</code>: danh sách, bảng, lưới card, dashboard), <code>--feed</code> 720, <code>--form</code> 662, <code>--canvas</code> 1440 (chỉ khi nội dung đo được là rộng hơn một cột chữ), <code>--full</code> không giới hạn (board, editor; ghi lý do). React: một <code>PageContainer width="form"</code> ngay trong <code>AppShell</code>. Một cap chỉ có tác dụng khi nó NHỎ HƠN chỗ trống thật: ở 1280 chỗ trống là 992. Hai khung dưới vẽ ở 1440, kéo ngang để xem hết.</p><figure class="cat-demo cat-screen"><figcaption>PageContainer width=&quot;default&quot; ở 1440: cột 900</figcaption><div class="cat-wide"><iframe title="PageContainer width=&quot;default&quot; ở 1440: cột 900" style="height:300px;width:1440px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c65-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c65-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3.5&quot; y=&quot;3&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;8.25&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;13.5&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Ghép trang&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3.2 17.3 16H2.7z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M10 8.2v3.6M10 13.9v.1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Framework thiếu&lt;/span&gt;&lt;span class=&quot;gnav-count&quot; aria-label=&quot;3 mục đang mở&quot;&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div class=&quot;ui-page&quot;&gt;&lt;h1 style=&quot;margin:0 0 16px&quot;&gt;Board&lt;/h1&gt;&lt;div class=&quot;ui-card&quot;&gt;&lt;div class=&quot;ui-card__title&quot;&gt;#412 Hero split&lt;/div&gt;&lt;p class=&quot;ui-muted&quot;&gt;Cột 900px, căn giữa trong chỗ trống bên phải rail.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6427
6427
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
6428
6428
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
6429
6429
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c65-R0:&quot;&gt;
@@ -6517,7 +6517,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
6517
6517
  &lt;/div&gt;
6518
6518
  &lt;/div&gt;
6519
6519
  &lt;/main&gt;
6520
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>PageContainer width=&quot;form&quot; ở 1440: cột 662</figcaption><div class="cat-wide"><iframe title="PageContainer width=&quot;form&quot; ở 1440: cột 662" style="height:300px;width:1440px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c66-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c66-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3.5&quot; y=&quot;3&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;8.25&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;13.5&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Ghép trang&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3.2 17.3 16H2.7z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M10 8.2v3.6M10 13.9v.1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Framework thiếu&lt;/span&gt;&lt;span class=&quot;gnav-count&quot; aria-label=&quot;3 mục đang mở&quot;&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div class=&quot;ui-page ui-page--form&quot;&gt;&lt;h1 style=&quot;margin:0 0 16px&quot;&gt;Settings&lt;/h1&gt;&lt;div class=&quot;ui-card&quot; style=&quot;display:grid;gap:6px&quot;&gt;&lt;label for=&quot;cat-pw-name&quot;&gt;Tên hiển thị&lt;/label&gt;&lt;input id=&quot;cat-pw-name&quot; class=&quot;gemboss-field&quot; value=&quot;Minh Anh&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6520
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>PageContainer width=&quot;form&quot; ở 1440: cột 662</figcaption><div class="cat-wide"><iframe title="PageContainer width=&quot;form&quot; ở 1440: cột 662" style="height:300px;width:1440px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c66-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;/div&gt;&lt;/header&gt;&lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c66-R0:&quot;&gt;&lt;div class=&quot;gnav-scroll&quot;&gt;&lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;&lt;div class=&quot;gnav-group active&quot;&gt;&lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;13&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;8&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;9&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;13&quot; y=&quot;3.5&quot; width=&quot;4&quot; height=&quot;6&quot; rx=&quot;1.2&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3.5&quot; y=&quot;3&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;8.25&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;3.5&quot; y=&quot;13.5&quot; width=&quot;13&quot; height=&quot;3.5&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Ghép trang&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gnav-group&quot;&gt;&lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;gnav-ico&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 3.2 17.3 16H2.7z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M10 8.2v3.6M10 13.9v.1&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gnav-label&quot;&gt;Framework thiếu&lt;/span&gt;&lt;span class=&quot;gnav-count&quot; aria-label=&quot;3 mục đang mở&quot;&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;&lt;/button&gt;&lt;main class=&quot;gemboss-platform-main&quot;&gt;&lt;div class=&quot;ui-page ui-page--form&quot;&gt;&lt;h1 style=&quot;margin:0 0 16px&quot;&gt;Settings&lt;/h1&gt;&lt;div class=&quot;ui-card&quot; style=&quot;display:grid;gap:6px&quot;&gt;&lt;label for=&quot;cat-pw-name&quot;&gt;Tên hiển thị&lt;/label&gt;&lt;input id=&quot;cat-pw-name&quot; class=&quot;gemboss-field&quot; value=&quot;Minh Anh&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/main&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6521
6521
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
6522
6522
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
6523
6523
  &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c66-R0:&quot;&gt;
@@ -6614,7 +6614,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
6614
6614
  &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>HTML thuần: một lớp bọc là con đầu tiên của main</figcaption><div class="cat-live"><div class="ui-page ui-page--feed"><div class="ui-card">Một mục trong feed, cột 720px.</div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-page ui-page--feed&quot;&gt;
6615
6615
  &lt;div class=&quot;ui-card&quot;&gt;Một mục trong feed, cột 720px.&lt;/div&gt;
6616
6616
  &lt;/div&gt;</code></pre></details></figure></section>
6617
- <section id="portal"><h2>Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</h2><p>Cho bề mặt công khai kiểu bảng Featurebase (GemFeedback) và cộng đồng (GemCommunity). <code>TopbarNav</code> đặt tab mục ngay trên topbar cạnh logo; <code>SearchDialog</code> là popup tìm (⌘K, gõ là ra); <code>ThemeToggle</code> + <code>themeScript</code> bật bảng màu tối (chỉ đổi token, mọi class theo); <code>Avatar</code> ảnh hoặc chữ viết tắt trên một tông lấy theo tên; <code>Leaderboard</code> huy chương 1–3 rồi thứ hạng; <code>Podium</code> ba người đầu.</p><figure class="cat-demo cat-screen"><figcaption>TopbarNav + SearchDialog + ThemeToggle, sáng</figcaption><iframe title="TopbarNav + SearchDialog + ThemeToggle, sáng" style="height:360px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFeedback&lt;/span&gt;&lt;/a&gt;&lt;nav class=&quot;gb-topnav&quot; aria-label=&quot;Sections&quot;&gt;&lt;div class=&quot;gb-topnav-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Roadmap&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;details class=&quot;gb-topnav-fold&quot;&gt;&lt;summary class=&quot;gb-topnav-link gb-topnav-fold-btn&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;svg class=&quot;gb-topnav-chevron&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;path d=&quot;M3 4.5 6 7.5 9 4.5&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;gb-topnav-pop gemboss-popover-surface&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot;&gt;Roadmap&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;/details&gt;&lt;/nav&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;a class=&quot;gb-search-trigger&quot; href=&quot;#portal&quot; aria-label=&quot;Search&quot; aria-haspopup=&quot;dialog&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/a&gt;&lt;dialog class=&quot;ui-modal gb-search&quot; aria-label=&quot;Search&quot;&gt;&lt;div class=&quot;gb-search-box&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gb-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gb-search-input&quot; type=&quot;search&quot; placeholder=&quot;Search…&quot; aria-label=&quot;Search&quot; role=&quot;combobox&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;:c69-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gb-search-empty&quot; aria-live=&quot;polite&quot;&gt;&lt;/p&gt;&lt;div class=&quot;gb-search-results&quot; id=&quot;:c69-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gb-search-foot&quot; aria-hidden=&quot;true&quot;&gt;&lt;span&gt;↵ open&lt;/span&gt;&lt;span&gt;↑↓ move&lt;/span&gt;&lt;span&gt;esc&lt;/span&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;button type=&quot;button&quot; class=&quot;gb-theme-toggle&quot; aria-label=&quot;Switch to dark mode&quot; title=&quot;Switch to dark mode&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;ui-btn ui-btn--primary&quot; href=&quot;#portal&quot;&gt;Sign in&lt;/a&gt;&lt;/div&gt;&lt;/header&gt;&lt;div&gt;&lt;div style=&quot;padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px&quot;&gt;&lt;div class=&quot;ui-card&quot;&gt;&lt;b&gt;Have something to say?&lt;/b&gt;&lt;p class=&quot;ui-muted&quot;&gt;Tell us what to build next.&lt;/p&gt;&lt;/div&gt;&lt;section class=&quot;gb-leaderboard&quot; aria-labelledby=&quot;gb-lb-most-helpful-1wqxo9r&quot;&gt;&lt;h2 class=&quot;gb-leaderboard-title&quot; id=&quot;gb-lb-most-helpful-1wqxo9r&quot;&gt;Most helpful&lt;/h2&gt;&lt;p class=&quot;gb-leaderboard-caption&quot;&gt;By votes on their comments.&lt;/p&gt;&lt;ol class=&quot;gb-leaderboard-list&quot;&gt;&lt;li class=&quot;gb-leaderboard-row is-first&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥇&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 1: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;LN&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Lucas Nguyen&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;163&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥈&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 2: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;DC&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Dima Chernyshov&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;56&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥉&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 3: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AR&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Artjom&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;55&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank is-number&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 4: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;GU&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;GutBrush&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;34&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank is-number&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 5: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;WO&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Wondercraft&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;30&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6617
+ <section id="portal"><h2>Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</h2><p>Cho bề mặt công khai kiểu bảng Featurebase (GemFeedback) và cộng đồng (GemCommunity). <code>TopbarNav</code> đặt tab mục ngay trên topbar cạnh logo; <code>SearchDialog</code> là popup tìm (⌘K, gõ là ra); <code>ThemeToggle</code> + <code>themeScript</code> bật bảng màu tối (chỉ đổi token, mọi class theo); <code>Avatar</code> ảnh hoặc chữ viết tắt trên một tông lấy theo tên; <code>Leaderboard</code> huy chương 1–3 rồi thứ hạng; <code>Podium</code> ba người đầu.</p><figure class="cat-demo cat-screen"><figcaption>TopbarNav + SearchDialog + ThemeToggle, sáng</figcaption><iframe title="TopbarNav + SearchDialog + ThemeToggle, sáng" style="height:360px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFeedback&lt;/span&gt;&lt;/a&gt;&lt;nav class=&quot;gb-topnav&quot; aria-label=&quot;Sections&quot;&gt;&lt;div class=&quot;gb-topnav-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Roadmap&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;details class=&quot;gb-topnav-fold&quot;&gt;&lt;summary class=&quot;gb-topnav-link gb-topnav-fold-btn&quot; aria-current=&quot;page&quot;&gt;&lt;span class=&quot;gb-topnav-fold-label&quot;&gt;Feedback&lt;/span&gt;&lt;svg class=&quot;gb-topnav-chevron&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;path d=&quot;M3 4.5 6 7.5 9 4.5&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;gb-topnav-pop gemboss-popover-surface&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot;&gt;Roadmap&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;/details&gt;&lt;/nav&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;a class=&quot;gb-search-trigger&quot; href=&quot;#portal&quot; aria-label=&quot;Search&quot; aria-haspopup=&quot;dialog&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/a&gt;&lt;dialog class=&quot;ui-modal gb-search&quot; aria-label=&quot;Search&quot;&gt;&lt;div class=&quot;gb-search-box&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gb-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gb-search-input&quot; type=&quot;search&quot; placeholder=&quot;Search…&quot; aria-label=&quot;Search&quot; role=&quot;combobox&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;:c69-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gb-search-empty&quot; aria-live=&quot;polite&quot;&gt;&lt;/p&gt;&lt;div class=&quot;gb-search-results&quot; id=&quot;:c69-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gb-search-foot&quot; aria-hidden=&quot;true&quot;&gt;&lt;span&gt;↵ open&lt;/span&gt;&lt;span&gt;↑↓ move&lt;/span&gt;&lt;span&gt;esc&lt;/span&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;button type=&quot;button&quot; class=&quot;gb-theme-toggle&quot; aria-label=&quot;Switch to dark mode&quot; title=&quot;Switch to dark mode&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;ui-btn ui-btn--primary&quot; href=&quot;#portal&quot;&gt;Sign in&lt;/a&gt;&lt;/div&gt;&lt;/header&gt;&lt;div&gt;&lt;div style=&quot;padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px&quot;&gt;&lt;div class=&quot;ui-card&quot;&gt;&lt;b&gt;Have something to say?&lt;/b&gt;&lt;p class=&quot;ui-muted&quot;&gt;Tell us what to build next.&lt;/p&gt;&lt;/div&gt;&lt;section class=&quot;gb-leaderboard&quot; aria-labelledby=&quot;gb-lb-most-helpful-1wqxo9r&quot;&gt;&lt;h2 class=&quot;gb-leaderboard-title&quot; id=&quot;gb-lb-most-helpful-1wqxo9r&quot;&gt;Most helpful&lt;/h2&gt;&lt;p class=&quot;gb-leaderboard-caption&quot;&gt;By votes on their comments.&lt;/p&gt;&lt;ol class=&quot;gb-leaderboard-list&quot;&gt;&lt;li class=&quot;gb-leaderboard-row is-first&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥇&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 1: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;LN&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Lucas Nguyen&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;163&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥈&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 2: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;DC&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Dima Chernyshov&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;56&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥉&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 3: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AR&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Artjom&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;55&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank is-number&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 4: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;GU&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;GutBrush&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;34&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank is-number&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 5: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;WO&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Wondercraft&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;30&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6618
6618
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
6619
6619
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
6620
6620
  &lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;
@@ -6637,7 +6637,9 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
6637
6637
  &lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Changelog&lt;/a&gt;
6638
6638
  &lt;/div&gt;
6639
6639
  &lt;details class=&quot;gb-topnav-fold&quot;&gt;
6640
- &lt;summary class=&quot;gb-topnav-link gb-topnav-fold-btn&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;svg class=&quot;gb-topnav-chevron&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
6640
+ &lt;summary class=&quot;gb-topnav-link gb-topnav-fold-btn&quot; aria-current=&quot;page&quot;&gt;
6641
+ &lt;span class=&quot;gb-topnav-fold-label&quot;&gt;Feedback&lt;/span&gt;
6642
+ &lt;svg class=&quot;gb-topnav-chevron&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
6641
6643
  &lt;path d=&quot;M3 4.5 6 7.5 9 4.5&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
6642
6644
  &lt;/path&gt;
6643
6645
  &lt;/svg&gt;
@@ -6770,7 +6772,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
6770
6772
  &lt;/section&gt;
6771
6773
  &lt;/div&gt;
6772
6774
  &lt;/div&gt;
6773
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Cùng trang, tối (data-theme=&quot;dark&quot;)</figcaption><iframe title="Cùng trang, tối (data-theme=&quot;dark&quot;)" style="height:360px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFeedback&lt;/span&gt;&lt;/a&gt;&lt;nav class=&quot;gb-topnav&quot; aria-label=&quot;Sections&quot;&gt;&lt;div class=&quot;gb-topnav-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Roadmap&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;details class=&quot;gb-topnav-fold&quot;&gt;&lt;summary class=&quot;gb-topnav-link gb-topnav-fold-btn&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;svg class=&quot;gb-topnav-chevron&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;path d=&quot;M3 4.5 6 7.5 9 4.5&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;gb-topnav-pop gemboss-popover-surface&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot;&gt;Roadmap&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;/details&gt;&lt;/nav&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;a class=&quot;gb-search-trigger&quot; href=&quot;#portal&quot; aria-label=&quot;Search&quot; aria-haspopup=&quot;dialog&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/a&gt;&lt;dialog class=&quot;ui-modal gb-search&quot; aria-label=&quot;Search&quot;&gt;&lt;div class=&quot;gb-search-box&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gb-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gb-search-input&quot; type=&quot;search&quot; placeholder=&quot;Search…&quot; aria-label=&quot;Search&quot; role=&quot;combobox&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;:c69-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gb-search-empty&quot; aria-live=&quot;polite&quot;&gt;&lt;/p&gt;&lt;div class=&quot;gb-search-results&quot; id=&quot;:c69-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gb-search-foot&quot; aria-hidden=&quot;true&quot;&gt;&lt;span&gt;↵ open&lt;/span&gt;&lt;span&gt;↑↓ move&lt;/span&gt;&lt;span&gt;esc&lt;/span&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;button type=&quot;button&quot; class=&quot;gb-theme-toggle&quot; aria-label=&quot;Switch to dark mode&quot; title=&quot;Switch to dark mode&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;ui-btn ui-btn--primary&quot; href=&quot;#portal&quot;&gt;Sign in&lt;/a&gt;&lt;/div&gt;&lt;/header&gt;&lt;div&gt;&lt;div style=&quot;padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px&quot;&gt;&lt;div class=&quot;ui-card&quot;&gt;&lt;b&gt;Have something to say?&lt;/b&gt;&lt;p class=&quot;ui-muted&quot;&gt;Tell us what to build next.&lt;/p&gt;&lt;/div&gt;&lt;section class=&quot;gb-leaderboard&quot; aria-labelledby=&quot;gb-lb-most-helpful-1wqxo9r&quot;&gt;&lt;h2 class=&quot;gb-leaderboard-title&quot; id=&quot;gb-lb-most-helpful-1wqxo9r&quot;&gt;Most helpful&lt;/h2&gt;&lt;p class=&quot;gb-leaderboard-caption&quot;&gt;By votes on their comments.&lt;/p&gt;&lt;ol class=&quot;gb-leaderboard-list&quot;&gt;&lt;li class=&quot;gb-leaderboard-row is-first&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥇&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 1: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;LN&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Lucas Nguyen&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;163&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥈&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 2: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;DC&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Dima Chernyshov&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;56&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥉&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 3: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AR&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Artjom&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;55&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank is-number&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 4: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;GU&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;GutBrush&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;34&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank is-number&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 5: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;WO&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Wondercraft&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;30&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6775
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Cùng trang, tối (data-theme=&quot;dark&quot;)</figcaption><iframe title="Cùng trang, tối (data-theme=&quot;dark&quot;)" style="height:360px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemFeedback&lt;/span&gt;&lt;/a&gt;&lt;nav class=&quot;gb-topnav&quot; aria-label=&quot;Sections&quot;&gt;&lt;div class=&quot;gb-topnav-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Roadmap&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;details class=&quot;gb-topnav-fold&quot;&gt;&lt;summary class=&quot;gb-topnav-link gb-topnav-fold-btn&quot; aria-current=&quot;page&quot;&gt;&lt;span class=&quot;gb-topnav-fold-label&quot;&gt;Feedback&lt;/span&gt;&lt;svg class=&quot;gb-topnav-chevron&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;path d=&quot;M3 4.5 6 7.5 9 4.5&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/summary&gt;&lt;div class=&quot;gb-topnav-pop gemboss-popover-surface&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot;&gt;Roadmap&lt;/a&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-item&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;/details&gt;&lt;/nav&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-center&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-topbar-end&quot;&gt;&lt;a class=&quot;gb-search-trigger&quot; href=&quot;#portal&quot; aria-label=&quot;Search&quot; aria-haspopup=&quot;dialog&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/a&gt;&lt;dialog class=&quot;ui-modal gb-search&quot; aria-label=&quot;Search&quot;&gt;&lt;div class=&quot;gb-search-box&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; class=&quot;gb-search-icon&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;input class=&quot;gb-search-input&quot; type=&quot;search&quot; placeholder=&quot;Search…&quot; aria-label=&quot;Search&quot; role=&quot;combobox&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;:c69-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gb-search-empty&quot; aria-live=&quot;polite&quot;&gt;&lt;/p&gt;&lt;div class=&quot;gb-search-results&quot; id=&quot;:c69-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gb-search-foot&quot; aria-hidden=&quot;true&quot;&gt;&lt;span&gt;↵ open&lt;/span&gt;&lt;span&gt;↑↓ move&lt;/span&gt;&lt;span&gt;esc&lt;/span&gt;&lt;/div&gt;&lt;/dialog&gt;&lt;button type=&quot;button&quot; class=&quot;gb-theme-toggle&quot; aria-label=&quot;Switch to dark mode&quot; title=&quot;Switch to dark mode&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;ui-btn ui-btn--primary&quot; href=&quot;#portal&quot;&gt;Sign in&lt;/a&gt;&lt;/div&gt;&lt;/header&gt;&lt;div&gt;&lt;div style=&quot;padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px&quot;&gt;&lt;div class=&quot;ui-card&quot;&gt;&lt;b&gt;Have something to say?&lt;/b&gt;&lt;p class=&quot;ui-muted&quot;&gt;Tell us what to build next.&lt;/p&gt;&lt;/div&gt;&lt;section class=&quot;gb-leaderboard&quot; aria-labelledby=&quot;gb-lb-most-helpful-1wqxo9r&quot;&gt;&lt;h2 class=&quot;gb-leaderboard-title&quot; id=&quot;gb-lb-most-helpful-1wqxo9r&quot;&gt;Most helpful&lt;/h2&gt;&lt;p class=&quot;gb-leaderboard-caption&quot;&gt;By votes on their comments.&lt;/p&gt;&lt;ol class=&quot;gb-leaderboard-list&quot;&gt;&lt;li class=&quot;gb-leaderboard-row is-first&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥇&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 1: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;LN&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Lucas Nguyen&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;163&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥈&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 2: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;DC&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Dima Chernyshov&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;56&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;🥉&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 3: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AR&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Artjom&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;55&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank is-number&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 4: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;GU&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;GutBrush&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;34&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;gb-leaderboard-row&quot;&gt;&lt;a href=&quot;#portal&quot; class=&quot;gb-leaderboard-link&quot;&gt;&lt;span class=&quot;gb-leaderboard-rank is-number&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;gb-sr-only&quot;&gt;Rank 5: &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;WO&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-name&quot;&gt;Wondercraft&lt;/span&gt;&lt;span class=&quot;gb-leaderboard-value&quot;&gt;30&lt;span class=&quot;gb-sr-only&quot;&gt; votes&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-platform-shell&quot;&gt;
6774
6776
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
6775
6777
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
6776
6778
  &lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;
@@ -6793,7 +6795,9 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
6793
6795
  &lt;a href=&quot;#portal&quot; class=&quot;gb-topnav-link&quot;&gt;Changelog&lt;/a&gt;
6794
6796
  &lt;/div&gt;
6795
6797
  &lt;details class=&quot;gb-topnav-fold&quot;&gt;
6796
- &lt;summary class=&quot;gb-topnav-link gb-topnav-fold-btn&quot; aria-current=&quot;page&quot;&gt;Feedback&lt;svg class=&quot;gb-topnav-chevron&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
6798
+ &lt;summary class=&quot;gb-topnav-link gb-topnav-fold-btn&quot; aria-current=&quot;page&quot;&gt;
6799
+ &lt;span class=&quot;gb-topnav-fold-label&quot;&gt;Feedback&lt;/span&gt;
6800
+ &lt;svg class=&quot;gb-topnav-chevron&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
6797
6801
  &lt;path d=&quot;M3 4.5 6 7.5 9 4.5&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
6798
6802
  &lt;/path&gt;
6799
6803
  &lt;/svg&gt;
@@ -7030,7 +7034,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
7030
7034
  &lt;/a&gt;
7031
7035
  &lt;/li&gt;
7032
7036
  &lt;/ol&gt;</code></pre></details></figure></section>
7033
- <section id="site"><h2>Trang công khai: thanh trên, logo cỡ site, nút, chân trang</h2><p>Lớp <code>site</code> (0.40.0) cho trang CÔNG KHAI: gemboss.ai, docs, news, trang chủ một sản phẩm. Trang trong app (admin, cổng sau đăng nhập) giữ <code>Topbar</code> + <code>BrandLockup</code>. Hai cỡ logo (Chris 20/10/2026): site 18px, app 13,3px; cùng một viên gem. Trang HTML tĩnh chép markup dưới đây và nạp <code>site.css</code> sau phần lõi.</p><figure class="cat-demo cat-screen"><figcaption>SiteHeader + SiteBrand + link + nút, sáng</figcaption><iframe title="SiteHeader + SiteBrand + link + nút, sáng" style="height:140px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;header class=&quot;gb-site-header&quot;&gt;&lt;div class=&quot;gb-site-header__in&quot;&gt;&lt;a class=&quot;gb-brand gb-brand--site&quot; href=&quot;#site&quot; aria-label=&quot;GemBoss home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemBoss&lt;/span&gt;&lt;/a&gt;&lt;nav class=&quot;gb-site-nav&quot; aria-label=&quot;Main&quot;&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot; aria-current=&quot;page&quot;&gt;Product&lt;/a&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Pricing&lt;/a&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Docs&lt;/a&gt;&lt;/nav&gt;&lt;div class=&quot;gb-site-actions&quot;&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Sign in&lt;/a&gt;&lt;a class=&quot;gb-site-btn gb-site-btn--primary&quot; href=&quot;#site&quot;&gt;Start free&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;header class=&quot;gb-site-header&quot;&gt;
7037
+ <section id="site"><h2>Trang công khai: thanh trên, logo cỡ site, nút, chân trang</h2><p>Lớp <code>site</code> (0.40.0) cho trang CÔNG KHAI: gemboss.ai, docs, news, trang chủ một sản phẩm. Trang trong app (admin, cổng sau đăng nhập) giữ <code>Topbar</code> + <code>BrandLockup</code>. Hai cỡ logo (Chris 20/10/2026): site 18px, app 13,3px; cùng một viên gem. Trang HTML tĩnh chép markup dưới đây và nạp <code>site.css</code> sau phần lõi.</p><figure class="cat-demo cat-screen"><figcaption>SiteHeader + SiteBrand + link + nút, sáng</figcaption><iframe title="SiteHeader + SiteBrand + link + nút, sáng" style="height:140px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;header class=&quot;gb-site-header&quot;&gt;&lt;div class=&quot;gb-site-header__in&quot;&gt;&lt;a class=&quot;gb-brand gb-brand--site&quot; href=&quot;#site&quot; aria-label=&quot;GemBoss home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemBoss&lt;/span&gt;&lt;/a&gt;&lt;nav class=&quot;gb-site-nav&quot; aria-label=&quot;Main&quot;&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot; aria-current=&quot;page&quot;&gt;Product&lt;/a&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Pricing&lt;/a&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Docs&lt;/a&gt;&lt;/nav&gt;&lt;div class=&quot;gb-site-actions&quot;&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Sign in&lt;/a&gt;&lt;a class=&quot;gb-site-btn gb-site-btn--primary&quot; href=&quot;#site&quot;&gt;Start free&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;header class=&quot;gb-site-header&quot;&gt;
7034
7038
  &lt;div class=&quot;gb-site-header__in&quot;&gt;
7035
7039
  &lt;a class=&quot;gb-brand gb-brand--site&quot; href=&quot;#site&quot; aria-label=&quot;GemBoss home&quot;&gt;
7036
7040
  &lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
@@ -7055,7 +7059,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
7055
7059
  &lt;a class=&quot;gb-site-btn gb-site-btn--primary&quot; href=&quot;#site&quot;&gt;Start free&lt;/a&gt;
7056
7060
  &lt;/div&gt;
7057
7061
  &lt;/div&gt;
7058
- &lt;/header&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Cùng thanh, tối (data-theme=&quot;dark&quot;)</figcaption><iframe title="Cùng thanh, tối (data-theme=&quot;dark&quot;)" style="height:140px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;header class=&quot;gb-site-header&quot;&gt;&lt;div class=&quot;gb-site-header__in&quot;&gt;&lt;a class=&quot;gb-brand gb-brand--site&quot; href=&quot;#site&quot; aria-label=&quot;GemBoss home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemBoss&lt;/span&gt;&lt;/a&gt;&lt;nav class=&quot;gb-site-nav&quot; aria-label=&quot;Main&quot;&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot; aria-current=&quot;page&quot;&gt;Product&lt;/a&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Pricing&lt;/a&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Docs&lt;/a&gt;&lt;/nav&gt;&lt;div class=&quot;gb-site-actions&quot;&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Sign in&lt;/a&gt;&lt;a class=&quot;gb-site-btn gb-site-btn--primary&quot; href=&quot;#site&quot;&gt;Start free&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;header class=&quot;gb-site-header&quot;&gt;
7062
+ &lt;/header&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Cùng thanh, tối (data-theme=&quot;dark&quot;)</figcaption><iframe title="Cùng thanh, tối (data-theme=&quot;dark&quot;)" style="height:140px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;header class=&quot;gb-site-header&quot;&gt;&lt;div class=&quot;gb-site-header__in&quot;&gt;&lt;a class=&quot;gb-brand gb-brand--site&quot; href=&quot;#site&quot; aria-label=&quot;GemBoss home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemBoss&lt;/span&gt;&lt;/a&gt;&lt;nav class=&quot;gb-site-nav&quot; aria-label=&quot;Main&quot;&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot; aria-current=&quot;page&quot;&gt;Product&lt;/a&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Pricing&lt;/a&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Docs&lt;/a&gt;&lt;/nav&gt;&lt;div class=&quot;gb-site-actions&quot;&gt;&lt;a class=&quot;gb-site-link&quot; href=&quot;#site&quot;&gt;Sign in&lt;/a&gt;&lt;a class=&quot;gb-site-btn gb-site-btn--primary&quot; href=&quot;#site&quot;&gt;Start free&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;header class=&quot;gb-site-header&quot;&gt;
7059
7063
  &lt;div class=&quot;gb-site-header__in&quot;&gt;
7060
7064
  &lt;a class=&quot;gb-brand gb-brand--site&quot; href=&quot;#site&quot; aria-label=&quot;GemBoss home&quot;&gt;
7061
7065
  &lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
@@ -7110,7 +7114,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
7110
7114
  &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Nút: chính (gb-site-btn--primary) và phụ (gb-site-btn--secondary)</figcaption><div class="cat-live"><div class="cat-row"><a class="gb-site-btn gb-site-btn--primary" href="#site">Start free</a><a class="gb-site-btn gb-site-btn--secondary" href="#site">Book a demo</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;cat-row&quot;&gt;
7111
7115
  &lt;a class=&quot;gb-site-btn gb-site-btn--primary&quot; href=&quot;#site&quot;&gt;Start free&lt;/a&gt;
7112
7116
  &lt;a class=&quot;gb-site-btn gb-site-btn--secondary&quot; href=&quot;#site&quot;&gt;Book a demo&lt;/a&gt;
7113
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Chân trang</figcaption><iframe title="Chân trang" style="height:360px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;footer class=&quot;gb-site-footer&quot;&gt;&lt;div class=&quot;gb-site-wrap&quot;&gt;&lt;div class=&quot;gb-site-footer__grid&quot;&gt;&lt;div&gt;&lt;a class=&quot;gb-brand gb-brand--site&quot; href=&quot;#site&quot; aria-label=&quot;GemBoss home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemBoss&lt;/span&gt;&lt;/a&gt;&lt;p&gt;Every angle gets its own funnel.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-site-footer__col&quot;&gt;&lt;h4&gt;Product&lt;/h4&gt;&lt;a href=&quot;#site&quot;&gt;Adaptive funnels&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Adaptive storefront&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Pricing&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gb-site-footer__col&quot;&gt;&lt;h4&gt;Resources&lt;/h4&gt;&lt;a href=&quot;#site&quot;&gt;Docs&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Blog&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gb-site-footer__col&quot;&gt;&lt;h4&gt;Company&lt;/h4&gt;&lt;a href=&quot;#site&quot;&gt;About&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Careers&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-site-footer__bottom&quot;&gt;&lt;span&gt;© 2026 GemBoss&lt;/span&gt;&lt;span&gt;&lt;a href=&quot;#site&quot;&gt;Terms&lt;/a&gt; · &lt;a href=&quot;#site&quot;&gt;Privacy&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/footer&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;footer class=&quot;gb-site-footer&quot;&gt;
7117
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Chân trang</figcaption><iframe title="Chân trang" style="height:360px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;footer class=&quot;gb-site-footer&quot;&gt;&lt;div class=&quot;gb-site-wrap&quot;&gt;&lt;div class=&quot;gb-site-footer__grid&quot;&gt;&lt;div&gt;&lt;a class=&quot;gb-brand gb-brand--site&quot; href=&quot;#site&quot; aria-label=&quot;GemBoss home&quot;&gt;&lt;svg class=&quot;gb-brand-gem&quot; viewBox=&quot;0 0 32 40&quot; width=&quot;20.8&quot; height=&quot;26&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;8.75&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;5.45&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-brand-name&quot;&gt;GemBoss&lt;/span&gt;&lt;/a&gt;&lt;p&gt;Every angle gets its own funnel.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-site-footer__col&quot;&gt;&lt;h4&gt;Product&lt;/h4&gt;&lt;a href=&quot;#site&quot;&gt;Adaptive funnels&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Adaptive storefront&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Pricing&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gb-site-footer__col&quot;&gt;&lt;h4&gt;Resources&lt;/h4&gt;&lt;a href=&quot;#site&quot;&gt;Docs&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Blog&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Changelog&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;gb-site-footer__col&quot;&gt;&lt;h4&gt;Company&lt;/h4&gt;&lt;a href=&quot;#site&quot;&gt;About&lt;/a&gt;&lt;a href=&quot;#site&quot;&gt;Careers&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-site-footer__bottom&quot;&gt;&lt;span&gt;© 2026 GemBoss&lt;/span&gt;&lt;span&gt;&lt;a href=&quot;#site&quot;&gt;Terms&lt;/a&gt; · &lt;a href=&quot;#site&quot;&gt;Privacy&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/footer&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;footer class=&quot;gb-site-footer&quot;&gt;
7114
7118
  &lt;div class=&quot;gb-site-wrap&quot;&gt;
7115
7119
  &lt;div class=&quot;gb-site-footer__grid&quot;&gt;
7116
7120
  &lt;div&gt;
@@ -7155,7 +7159,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
7155
7159
  &lt;/div&gt;
7156
7160
  &lt;/div&gt;
7157
7161
  &lt;/footer&gt;</code></pre></details></figure></section>
7158
- <section id="auth"><h2>Đăng nhập</h2><p><code>backdrop</code> (0.30.0) chọn nền của panel thương hiệu: <code>"facet"</code> (mặc định, đường cắt của viên gem), <code>"grid"</code> (lưới iris mờ dần từ góc trên trái, nền của trang đăng nhập gemform), <code>"none"</code>. Panel chỉ hiện khi khung rộng 900 VÀ cao 520; hai khung dưới vẽ ở 1280.</p><figure class="cat-demo cat-screen"><figcaption>AuthLayout + PasswordField (backdrop mặc định: facet)</figcaption><div class="cat-wide"><iframe title="AuthLayout + PasswordField (backdrop mặc định: facet)" style="height:620px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;main class=&quot;gb-auth&quot;&gt;&lt;div class=&quot;gb-auth-split&quot;&gt;&lt;div class=&quot;gb-auth-stage&quot;&gt;&lt;div class=&quot;gb-auth-card&quot;&gt;&lt;header class=&quot;gb-auth-header&quot;&gt;&lt;span class=&quot;gb-auth-mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 32 32&quot; width=&quot;56&quot; height=&quot;56&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;rect width=&quot;32&quot; height=&quot;32&quot; rx=&quot;7&quot; style=&quot;fill:var(--gb-mark-bg)&quot;&gt;&lt;/rect&gt;&lt;g transform=&quot;translate(16,16) scale(0.24) translate(-50,-62)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#8a93ff&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;#f4f4f2&quot; stroke-width=&quot;5&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;#f4f4f2&quot; stroke-opacity=&quot;0.72&quot; stroke-width=&quot;3&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;h1&gt;GemFactory&lt;/h1&gt;&lt;p&gt;Kho section của GemBoss&lt;/p&gt;&lt;/header&gt;&lt;form class=&quot;gb-auth-form&quot; method=&quot;post&quot; action=&quot;#&quot;&gt;&lt;div class=&quot;gb-auth-field&quot;&gt;&lt;label for=&quot;pw&quot;&gt;Mật khẩu&lt;/label&gt;&lt;div class=&quot;gb-auth-pw&quot;&gt;&lt;input class=&quot;gb-auth-input&quot; id=&quot;pw&quot; type=&quot;password&quot;/&gt;&lt;button type=&quot;button&quot; aria-controls=&quot;pw&quot; aria-label=&quot;Hiện&quot; title=&quot;Hiện&quot; data-label-show=&quot;Hiện&quot; data-label-hide=&quot;Ẩn&quot; class=&quot;gb-auth-pw-toggle&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;path d=&quot;M1.5 10S4.6 4.5 10 4.5 18.5 10 18.5 10 15.4 15.5 10 15.5 1.5 10 1.5 10Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.6&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;submit&quot; class=&quot;gb-auth-submit&quot;&gt;Đăng nhập&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;aside class=&quot;gb-auth-panel&quot;&gt;&lt;div class=&quot;gb-auth-panel-in&quot;&gt;&lt;p class=&quot;gb-auth-eyebrow&quot;&gt;GemBoss&lt;/p&gt;&lt;h2 class=&quot;gb-auth-panel-h&quot;&gt;Một ngôn ngữ thiết kế cho mọi công cụ&lt;/h2&gt;&lt;p class=&quot;gb-auth-panel-p&quot;&gt;Đăng nhập bằng mật khẩu đội đã gửi riêng.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;main class=&quot;gb-auth&quot;&gt;
7162
+ <section id="auth"><h2>Đăng nhập</h2><p><code>backdrop</code> (0.30.0) chọn nền của panel thương hiệu: <code>"facet"</code> (mặc định, đường cắt của viên gem), <code>"grid"</code> (lưới iris mờ dần từ góc trên trái, nền của trang đăng nhập gemform), <code>"none"</code>. Panel chỉ hiện khi khung rộng 900 VÀ cao 520; hai khung dưới vẽ ở 1280.</p><figure class="cat-demo cat-screen"><figcaption>AuthLayout + PasswordField (backdrop mặc định: facet)</figcaption><div class="cat-wide"><iframe title="AuthLayout + PasswordField (backdrop mặc định: facet)" style="height:620px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;main class=&quot;gb-auth&quot;&gt;&lt;div class=&quot;gb-auth-split&quot;&gt;&lt;div class=&quot;gb-auth-stage&quot;&gt;&lt;div class=&quot;gb-auth-card&quot;&gt;&lt;header class=&quot;gb-auth-header&quot;&gt;&lt;span class=&quot;gb-auth-mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 32 32&quot; width=&quot;56&quot; height=&quot;56&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;rect width=&quot;32&quot; height=&quot;32&quot; rx=&quot;7&quot; style=&quot;fill:var(--gb-mark-bg)&quot;&gt;&lt;/rect&gt;&lt;g transform=&quot;translate(16,16) scale(0.24) translate(-50,-62)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#8a93ff&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;#f4f4f2&quot; stroke-width=&quot;5&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;#f4f4f2&quot; stroke-opacity=&quot;0.72&quot; stroke-width=&quot;3&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;h1&gt;GemFactory&lt;/h1&gt;&lt;p&gt;Kho section của GemBoss&lt;/p&gt;&lt;/header&gt;&lt;form class=&quot;gb-auth-form&quot; method=&quot;post&quot; action=&quot;#&quot;&gt;&lt;div class=&quot;gb-auth-field&quot;&gt;&lt;label for=&quot;pw&quot;&gt;Mật khẩu&lt;/label&gt;&lt;div class=&quot;gb-auth-pw&quot;&gt;&lt;input class=&quot;gb-auth-input&quot; id=&quot;pw&quot; type=&quot;password&quot;/&gt;&lt;button type=&quot;button&quot; aria-controls=&quot;pw&quot; aria-label=&quot;Hiện&quot; title=&quot;Hiện&quot; data-label-show=&quot;Hiện&quot; data-label-hide=&quot;Ẩn&quot; class=&quot;gb-auth-pw-toggle&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;path d=&quot;M1.5 10S4.6 4.5 10 4.5 18.5 10 18.5 10 15.4 15.5 10 15.5 1.5 10 1.5 10Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.6&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;submit&quot; class=&quot;gb-auth-submit&quot;&gt;Đăng nhập&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;aside class=&quot;gb-auth-panel&quot;&gt;&lt;div class=&quot;gb-auth-panel-in&quot;&gt;&lt;p class=&quot;gb-auth-eyebrow&quot;&gt;GemBoss&lt;/p&gt;&lt;h2 class=&quot;gb-auth-panel-h&quot;&gt;Một ngôn ngữ thiết kế cho mọi công cụ&lt;/h2&gt;&lt;p class=&quot;gb-auth-panel-p&quot;&gt;Đăng nhập bằng mật khẩu đội đã gửi riêng.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;main class=&quot;gb-auth&quot;&gt;
7159
7163
  &lt;div class=&quot;gb-auth-split&quot;&gt;
7160
7164
  &lt;div class=&quot;gb-auth-stage&quot;&gt;
7161
7165
  &lt;div class=&quot;gb-auth-card&quot;&gt;
@@ -7204,7 +7208,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
7204
7208
  &lt;/div&gt;
7205
7209
  &lt;/aside&gt;
7206
7210
  &lt;/div&gt;
7207
- &lt;/main&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>backdrop=&quot;grid&quot;</figcaption><div class="cat-wide"><iframe title="backdrop=&quot;grid&quot;" style="height:620px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;main class=&quot;gb-auth&quot;&gt;&lt;div class=&quot;gb-auth-split&quot;&gt;&lt;div class=&quot;gb-auth-stage&quot;&gt;&lt;div class=&quot;gb-auth-card&quot;&gt;&lt;header class=&quot;gb-auth-header&quot;&gt;&lt;span class=&quot;gb-auth-mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 32 32&quot; width=&quot;56&quot; height=&quot;56&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;rect width=&quot;32&quot; height=&quot;32&quot; rx=&quot;7&quot; style=&quot;fill:var(--gb-mark-bg)&quot;&gt;&lt;/rect&gt;&lt;g transform=&quot;translate(16,16) scale(0.24) translate(-50,-62)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#8a93ff&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;#f4f4f2&quot; stroke-width=&quot;5&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;#f4f4f2&quot; stroke-opacity=&quot;0.72&quot; stroke-width=&quot;3&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;h1&gt;gemform&lt;/h1&gt;&lt;p&gt;GemBoss Ops · internal tool&lt;/p&gt;&lt;/header&gt;&lt;form class=&quot;gb-auth-form&quot; method=&quot;post&quot; action=&quot;#&quot;&gt;&lt;div class=&quot;gb-auth-field&quot;&gt;&lt;label for=&quot;pw2&quot;&gt;Password&lt;/label&gt;&lt;div class=&quot;gb-auth-pw&quot;&gt;&lt;input class=&quot;gb-auth-input&quot; id=&quot;pw2&quot; type=&quot;password&quot;/&gt;&lt;button type=&quot;button&quot; aria-controls=&quot;pw2&quot; aria-label=&quot;Show password&quot; title=&quot;Show password&quot; data-label-show=&quot;Show password&quot; data-label-hide=&quot;Hide password&quot; class=&quot;gb-auth-pw-toggle&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;path d=&quot;M1.5 10S4.6 4.5 10 4.5 18.5 10 18.5 10 15.4 15.5 10 15.5 1.5 10 1.5 10Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.6&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;submit&quot; class=&quot;gb-auth-submit&quot;&gt;Sign in&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;aside class=&quot;gb-auth-panel gb-auth-panel--grid&quot;&gt;&lt;div class=&quot;gb-auth-panel-in&quot;&gt;&lt;p class=&quot;gb-auth-eyebrow&quot;&gt;gemform · GemBoss Ops&lt;/p&gt;&lt;h2 class=&quot;gb-auth-panel-h&quot;&gt;Every Gem registration, in one place.&lt;/h2&gt;&lt;p class=&quot;gb-auth-panel-p&quot;&gt;Coffee chats, demo requests and workshop sign-ups from every Gem site, with a Telegram ping the moment one lands.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;main class=&quot;gb-auth&quot;&gt;
7211
+ &lt;/main&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>backdrop=&quot;grid&quot;</figcaption><div class="cat-wide"><iframe title="backdrop=&quot;grid&quot;" style="height:620px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;main class=&quot;gb-auth&quot;&gt;&lt;div class=&quot;gb-auth-split&quot;&gt;&lt;div class=&quot;gb-auth-stage&quot;&gt;&lt;div class=&quot;gb-auth-card&quot;&gt;&lt;header class=&quot;gb-auth-header&quot;&gt;&lt;span class=&quot;gb-auth-mark&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 32 32&quot; width=&quot;56&quot; height=&quot;56&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;rect width=&quot;32&quot; height=&quot;32&quot; rx=&quot;7&quot; style=&quot;fill:var(--gb-mark-bg)&quot;&gt;&lt;/rect&gt;&lt;g transform=&quot;translate(16,16) scale(0.24) translate(-50,-62)&quot;&gt;&lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#8a93ff&quot;&gt;&lt;/polygon&gt;&lt;path d=&quot;M26,14 74,14 96,50 50,110 4,50Z&quot; fill=&quot;none&quot; stroke=&quot;#f4f4f2&quot; stroke-width=&quot;5&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110&quot; fill=&quot;none&quot; stroke=&quot;#f4f4f2&quot; stroke-opacity=&quot;0.72&quot; stroke-width=&quot;3&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;h1&gt;gemform&lt;/h1&gt;&lt;p&gt;GemBoss Ops · internal tool&lt;/p&gt;&lt;/header&gt;&lt;form class=&quot;gb-auth-form&quot; method=&quot;post&quot; action=&quot;#&quot;&gt;&lt;div class=&quot;gb-auth-field&quot;&gt;&lt;label for=&quot;pw2&quot;&gt;Password&lt;/label&gt;&lt;div class=&quot;gb-auth-pw&quot;&gt;&lt;input class=&quot;gb-auth-input&quot; id=&quot;pw2&quot; type=&quot;password&quot;/&gt;&lt;button type=&quot;button&quot; aria-controls=&quot;pw2&quot; aria-label=&quot;Show password&quot; title=&quot;Show password&quot; data-label-show=&quot;Show password&quot; data-label-hide=&quot;Hide password&quot; class=&quot;gb-auth-pw-toggle&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;path d=&quot;M1.5 10S4.6 4.5 10 4.5 18.5 10 18.5 10 15.4 15.5 10 15.5 1.5 10 1.5 10Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.6&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;submit&quot; class=&quot;gb-auth-submit&quot;&gt;Sign in&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;aside class=&quot;gb-auth-panel gb-auth-panel--grid&quot;&gt;&lt;div class=&quot;gb-auth-panel-in&quot;&gt;&lt;p class=&quot;gb-auth-eyebrow&quot;&gt;gemform · GemBoss Ops&lt;/p&gt;&lt;h2 class=&quot;gb-auth-panel-h&quot;&gt;Every Gem registration, in one place.&lt;/h2&gt;&lt;p class=&quot;gb-auth-panel-p&quot;&gt;Coffee chats, demo requests and workshop sign-ups from every Gem site, with a Telegram ping the moment one lands.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;main class=&quot;gb-auth&quot;&gt;
7208
7212
  &lt;div class=&quot;gb-auth-split&quot;&gt;
7209
7213
  &lt;div class=&quot;gb-auth-stage&quot;&gt;
7210
7214
  &lt;div class=&quot;gb-auth-card&quot;&gt;
@@ -7680,7 +7684,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
7680
7684
  &lt;/div&gt;
7681
7685
  &lt;/div&gt;
7682
7686
  &lt;/div&gt;</code></pre></details></figure></section>
7683
- <section id="team-chat"><h2>Chat đội</h2><p>Lớp <code>team-chat</code> (20/10/2026, CSS <code>team-chat.css</code> do component tự nạp): chat kênh của GemCare thành chung cho cả fleet, GemCare (HTML thuần) và GemCommunity (React) vẽ cùng một thứ. Cột kênh có số chưa đọc và <code>@</code> gọi tên, vạch ngày, vạch "New messages", tin liền nhau của một người gộp thành một lượt, trích tin được trả lời, thanh thao tác khi rê chuột (dưới ngón tay: chạm vào tin là hiện), reactions của gói, luồng bên phải, nút về tin mới nhất, và cột người. Màn tự quyết theo bề rộng CỦA NÓ (container query): trên 1100px ngăn phải là một cột, từ 1100px trở xuống là ngăn trượt phủ lên cuộc trò chuyện, từ 760px trở xuống chỉ hiện danh sách kênh HOẶC cuộc trò chuyện. Markup của từng phần là hợp đồng ở README "The team chat layer" (test giữ React và hợp đồng khớp nhau). HTML thuần (GemCare) không viết tay markup đó: <code>team-chat-plain.js</code> (<code>gembossUI.teamChat</code>) dựng tin, vạch ngày, vạch "New messages", nút về tin mới nhất, hàng kênh và hàng người từ dữ liệu, cùng markup với component (test so từng nút trong Chromium); khung cuối chạy thật.</p><figure class="cat-demo cat-screen"><figcaption>Desktop 1366: cột kênh · cuộc trò chuyện · luồng</figcaption><div class="cat-wide"><iframe title="Desktop 1366: cột kênh · cuộc trò chuyện · luồng" style="height:680px;width:1366px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;thread&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;div class=&quot;gb-tc-scrim&quot; aria-hidden=&quot;true&quot;&gt;&lt;/div&gt;&lt;aside id=&quot;tc-thread&quot; class=&quot;gb-tc-thread&quot; aria-labelledby=&quot;tc-thread-title&quot; tabindex=&quot;-1&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-thread-title&quot;&gt;Thread&lt;/h2&gt;&lt;p class=&quot;gb-tc-panel-head__sub&quot;&gt;#general&lt;/p&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close&quot; aria-label=&quot;Close thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-labelledby=&quot;tc-thread-title&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-thread__count&quot;&gt;&lt;span&gt;2 replies&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;17:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;I can take the cart drawer.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Linh&quot; aria-label=&quot;👍, Linh. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Quan Le&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;17:05&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Hero copy is mine.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-thread-input&quot;&gt;Reply to thread&lt;/label&gt;&lt;textarea id=&quot;tc-thread-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Reply…&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;label class=&quot;ui-check gb-tc-composer__also&quot;&gt;&lt;input type=&quot;checkbox&quot;/&gt;&lt;span&gt;Also send to #general&lt;/span&gt;&lt;/label&gt;&lt;/form&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
7687
+ <section id="team-chat"><h2>Chat đội</h2><p>Lớp <code>team-chat</code> (20/10/2026, CSS <code>team-chat.css</code> do component tự nạp): chat kênh của GemCare thành chung cho cả fleet, GemCare (HTML thuần) và GemCommunity (React) vẽ cùng một thứ. Cột kênh có số chưa đọc và <code>@</code> gọi tên, vạch ngày, vạch "New messages", tin liền nhau của một người gộp thành một lượt, trích tin được trả lời, thanh thao tác khi rê chuột (dưới ngón tay: chạm vào tin là hiện), reactions của gói, luồng bên phải, nút về tin mới nhất, và cột người. Màn tự quyết theo bề rộng CỦA NÓ (container query): trên 1100px ngăn phải là một cột, từ 1100px trở xuống là ngăn trượt phủ lên cuộc trò chuyện, từ 760px trở xuống chỉ hiện danh sách kênh HOẶC cuộc trò chuyện. Markup của từng phần là hợp đồng ở README "The team chat layer" (test giữ React và hợp đồng khớp nhau). HTML thuần (GemCare) không viết tay markup đó: <code>team-chat-plain.js</code> (<code>gembossUI.teamChat</code>) dựng tin, vạch ngày, vạch "New messages", nút về tin mới nhất, hàng kênh và hàng người từ dữ liệu, cùng markup với component (test so từng nút trong Chromium); khung cuối chạy thật.</p><figure class="cat-demo cat-screen"><figcaption>Desktop 1366: cột kênh · cuộc trò chuyện · luồng</figcaption><div class="cat-wide"><iframe title="Desktop 1366: cột kênh · cuộc trò chuyện · luồng" style="height:680px;width:1366px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;thread&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;div class=&quot;gb-tc-scrim&quot; aria-hidden=&quot;true&quot;&gt;&lt;/div&gt;&lt;aside id=&quot;tc-thread&quot; class=&quot;gb-tc-thread&quot; aria-labelledby=&quot;tc-thread-title&quot; tabindex=&quot;-1&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-thread-title&quot;&gt;Thread&lt;/h2&gt;&lt;p class=&quot;gb-tc-panel-head__sub&quot;&gt;#general&lt;/p&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close&quot; aria-label=&quot;Close thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-labelledby=&quot;tc-thread-title&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-thread__count&quot;&gt;&lt;span&gt;2 replies&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;17:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;I can take the cart drawer.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Linh&quot; aria-label=&quot;👍, Linh. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Quan Le&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;17:05&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Hero copy is mine.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-thread-input&quot;&gt;Reply to thread&lt;/label&gt;&lt;textarea id=&quot;tc-thread-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Reply…&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;label class=&quot;ui-check gb-tc-composer__also&quot;&gt;&lt;input type=&quot;checkbox&quot;/&gt;&lt;span&gt;Also send to #general&lt;/span&gt;&lt;/label&gt;&lt;/form&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
7684
7688
  &lt;div style=&quot;position:fixed;inset:0&quot;&gt;
7685
7689
  &lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;thread&quot;&gt;
7686
7690
  &lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;
@@ -8443,7 +8447,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
8443
8447
  &lt;/form&gt;
8444
8448
  &lt;/aside&gt;
8445
8449
  &lt;/div&gt;
8446
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Desktop 1366, tối: cột người (Online / Members)</figcaption><div class="cat-wide"><iframe title="Desktop 1366, tối: cột người (Online / Members)" style="height:680px;width:1366px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;people&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;div class=&quot;gb-tc-scrim&quot; aria-hidden=&quot;true&quot;&gt;&lt;/div&gt;&lt;aside id=&quot;tc-people&quot; class=&quot;gb-tc-people&quot; aria-labelledby=&quot;tc-people-title&quot; tabindex=&quot;-1&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-people-title&quot;&gt;Members&lt;/h2&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;tc-people-body&quot; aria-label=&quot;Hide members&quot; title=&quot;Hide members&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M12.5 3.5v13&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-people__body&quot; id=&quot;tc-people-body&quot;&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-on-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-on-h&quot;&gt;Online — 3&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Linh Tran&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Support lead&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__role&quot;&gt;Admin&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Mai Pham&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Writing the hero copy&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Quan Le&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--away&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Away&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Quan Le&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;In a meeting until 11:00&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-all-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-all-h&quot;&gt;Members — 2&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person gb-tc-person--offline&quot; title=&quot;Bo Nguyen&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;BN&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Offline&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Bo Nguyen&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Back Monday&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person gb-tc-person--offline&quot; title=&quot;An Vo&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;AV&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Offline&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;An Vo&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
8450
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Desktop 1366, tối: cột người (Online / Members)</figcaption><div class="cat-wide"><iframe title="Desktop 1366, tối: cột người (Online / Members)" style="height:680px;width:1366px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;people&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;div class=&quot;gb-tc-scrim&quot; aria-hidden=&quot;true&quot;&gt;&lt;/div&gt;&lt;aside id=&quot;tc-people&quot; class=&quot;gb-tc-people&quot; aria-labelledby=&quot;tc-people-title&quot; tabindex=&quot;-1&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-people-title&quot;&gt;Members&lt;/h2&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;tc-people-body&quot; aria-label=&quot;Hide members&quot; title=&quot;Hide members&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M12.5 3.5v13&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-people__body&quot; id=&quot;tc-people-body&quot;&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-on-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-on-h&quot;&gt;Online — 3&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Linh Tran&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Support lead&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__role&quot;&gt;Admin&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Mai Pham&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Writing the hero copy&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Quan Le&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--away&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Away&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Quan Le&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;In a meeting until 11:00&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-all-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-all-h&quot;&gt;Members — 2&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person gb-tc-person--offline&quot; title=&quot;Bo Nguyen&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;BN&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Offline&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Bo Nguyen&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Back Monday&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person gb-tc-person--offline&quot; title=&quot;An Vo&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;AV&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Offline&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;An Vo&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
8447
8451
  &lt;div style=&quot;position:fixed;inset:0&quot;&gt;
8448
8452
  &lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;people&quot;&gt;
8449
8453
  &lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;
@@ -9087,7 +9091,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
9087
9091
  &lt;/div&gt;
9088
9092
  &lt;/aside&gt;
9089
9093
  &lt;/div&gt;
9090
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng</figcaption><div class="cat-wide"><iframe title="1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng" style="height:640px;width:1024px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;thread&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;div class=&quot;gb-tc-scrim&quot; aria-hidden=&quot;true&quot;&gt;&lt;/div&gt;&lt;aside id=&quot;tc-thread&quot; class=&quot;gb-tc-thread&quot; aria-labelledby=&quot;tc-thread-title&quot; tabindex=&quot;-1&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-thread-title&quot;&gt;Thread&lt;/h2&gt;&lt;p class=&quot;gb-tc-panel-head__sub&quot;&gt;#general&lt;/p&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close&quot; aria-label=&quot;Close thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-labelledby=&quot;tc-thread-title&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-thread__count&quot;&gt;&lt;span&gt;2 replies&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;17:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;I can take the cart drawer.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Linh&quot; aria-label=&quot;👍, Linh. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Quan Le&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;17:05&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Hero copy is mine.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-thread-input&quot;&gt;Reply to thread&lt;/label&gt;&lt;textarea id=&quot;tc-thread-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Reply…&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;label class=&quot;ui-check gb-tc-composer__also&quot;&gt;&lt;input type=&quot;checkbox&quot;/&gt;&lt;span&gt;Also send to #general&lt;/span&gt;&lt;/label&gt;&lt;/form&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
9094
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng</figcaption><div class="cat-wide"><iframe title="1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng" style="height:640px;width:1024px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;thread&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;div class=&quot;gb-tc-scrim&quot; aria-hidden=&quot;true&quot;&gt;&lt;/div&gt;&lt;aside id=&quot;tc-thread&quot; class=&quot;gb-tc-thread&quot; aria-labelledby=&quot;tc-thread-title&quot; tabindex=&quot;-1&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-thread-title&quot;&gt;Thread&lt;/h2&gt;&lt;p class=&quot;gb-tc-panel-head__sub&quot;&gt;#general&lt;/p&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close&quot; aria-label=&quot;Close thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-labelledby=&quot;tc-thread-title&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-thread__count&quot;&gt;&lt;span&gt;2 replies&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;17:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;I can take the cart drawer.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Linh&quot; aria-label=&quot;👍, Linh. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Quan Le&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;17:05&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Hero copy is mine.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-thread-input&quot;&gt;Reply to thread&lt;/label&gt;&lt;textarea id=&quot;tc-thread-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Reply…&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;label class=&quot;ui-check gb-tc-composer__also&quot;&gt;&lt;input type=&quot;checkbox&quot;/&gt;&lt;span&gt;Also send to #general&lt;/span&gt;&lt;/label&gt;&lt;/form&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
9091
9095
  &lt;div style=&quot;position:fixed;inset:0&quot;&gt;
9092
9096
  &lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot; data-panel=&quot;thread&quot;&gt;
9093
9097
  &lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;
@@ -9850,7 +9854,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
9850
9854
  &lt;/form&gt;
9851
9855
  &lt;/aside&gt;
9852
9856
  &lt;/div&gt;
9853
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)</figcaption><div class="cat-wide"><iframe title="Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)" style="height:720px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
9857
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)</figcaption><div class="cat-wide"><iframe title="Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)" style="height:720px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
9854
9858
  &lt;div style=&quot;position:fixed;inset:0&quot;&gt;
9855
9859
  &lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot;&gt;
9856
9860
  &lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;
@@ -10393,7 +10397,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
10393
10397
  &lt;/form&gt;
10394
10398
  &lt;/section&gt;
10395
10399
  &lt;/div&gt;
10396
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390, tối: danh sách kênh</figcaption><div class="cat-wide"><iframe title="Điện thoại 390, tối: danh sách kênh" style="height:520px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;list&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
10400
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390, tối: danh sách kênh</figcaption><div class="cat-wide"><iframe title="Điện thoại 390, tối: danh sách kênh" style="height:520px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html data-theme=&quot;dark&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;list&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;div class=&quot;gb-tc-rail__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon&quot; aria-label=&quot;New message&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M10 4v12M4 10h12&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-ch-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-ch-h&quot;&gt;Channels&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-current=&quot;true&quot; aria-label=&quot;general&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;general&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;launch-week, 2 mentioning you, 12 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;launch-week&lt;/span&gt;&lt;span class=&quot;gb-tc-badge gb-tc-badge--mention&quot; aria-hidden=&quot;true&quot;&gt;@2&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;12&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel gb-tc-channel--unread&quot; aria-label=&quot;support-escalations, 3 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;support-escalations&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-channel&quot; aria-label=&quot;payroll, private channel&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;4.5&quot; y=&quot;9&quot; width=&quot;11&quot; height=&quot;8&quot; rx=&quot;1.5&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M7 9V6.5a3 3 0 0 1 6 0V9&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;payroll&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-dm-h&quot;&gt;&lt;h3 class=&quot;gb-tc-rail__heading&quot; id=&quot;tc-dm-h&quot;&gt;Direct messages&lt;/h3&gt;&lt;ul class=&quot;gb-tc-rail__list&quot;&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel gb-tc-channel--unread&quot; href=&quot;#team-chat&quot; aria-label=&quot;Linh Tran, direct message, 1 unread&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-badge&quot; aria-hidden=&quot;true&quot;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;gb-tc-channel&quot; href=&quot;#team-chat&quot; aria-label=&quot;Quan Le, direct message&quot;&gt;&lt;span class=&quot;gb-tc-channel__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;7&quot; r=&quot;3.2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-channel__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Yesterday&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;16:20&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.&lt;/div&gt;&lt;div class=&quot;ui-reactions&quot;&gt;&lt;div class=&quot;ui-reactions__row&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;&lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;&lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the message from Linh Tran&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-threadprev&quot; aria-label=&quot;Open the thread, 3 replies, Last reply 2 hours ago&quot;&gt;&lt;span class=&quot;gb-tc-threadprev__faces&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-avatar gb-avatar--24&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__count&quot;&gt;3 replies&lt;/span&gt;&lt;span class=&quot;gb-tc-threadprev__last&quot;&gt;Last reply 2 hours ago&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Remove 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;16:21&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Linh Tran, 16:21: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Who takes the hero copy?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Linh Tran&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Linh Tran&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Linh Tran&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Linh Tran&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Linh Tran&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Linh Tran&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-day&quot;&gt;&lt;span class=&quot;gb-tc-day__label&quot;&gt;Today&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-quote&quot;&gt;&lt;span class=&quot;gb-tc-quote__who&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-quote__text&quot;&gt;Who takes the hero copy?&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:02&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Mine. Shipping it at noon.&lt;span class=&quot;gb-tc-msg__edited&quot;&gt;(edited)&lt;/span&gt;&lt;span class=&quot;gb-tc-receipt&quot; role=&quot;img&quot; aria-label=&quot;Read by Linh, Quan. Not yet: Bo&quot; title=&quot;Read by Linh, Quan. Not yet: Bo&quot;&gt;&lt;svg viewBox=&quot;0 0 14 14&quot; width=&quot;14&quot; height=&quot;14&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;circle cx=&quot;7&quot; cy=&quot;7&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Mai Pham&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Mai Pham&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Mai Pham&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Mai Pham&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Mai Pham&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Mai Pham&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-new&quot;&gt;&lt;span class=&quot;gb-tc-new__label&quot; role=&quot;separator&quot; aria-label=&quot;New messages&quot;&gt;New messages&lt;/span&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--mention&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;Quan Le&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:40&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Pushed the cart drawer fix, @Mai can you check it on your phone?&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg gb-tc-msg--grouped&quot; tabindex=&quot;-1&quot;&gt;&lt;time class=&quot;gb-tc-msg__hover-time&quot;&gt;09:41&lt;/time&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Quan Le, 09:41: &lt;/span&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Preview is up.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from Quan Le&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from Quan Le&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from Quan Le&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from Quan Le&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from Quan Le&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from Quan Le&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;gb-tc-msg&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32 gb-tc-msg__av&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AI&lt;/span&gt;&lt;div class=&quot;gb-tc-msg__main&quot;&gt;&lt;div class=&quot;gb-tc-msg__who&quot;&gt;&lt;span class=&quot;gb-tc-msg__name&quot;&gt;GemCare&lt;/span&gt;&lt;span class=&quot;ui-badge ui-badge--info&quot;&gt;AI&lt;/span&gt;&lt;time class=&quot;gb-tc-msg__time&quot;&gt;09:42&lt;/time&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-msg__body&quot;&gt;Three customers asked about the cart drawer this morning; all on iOS Safari.&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-acts&quot; role=&quot;toolbar&quot; aria-label=&quot;Actions for the message from GemCare&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add 👍 on the message from GemCare&quot;&gt;👍&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act gb-tc-act--quick&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Add ✅ on the message from GemCare&quot;&gt;✅&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More reactions for the message from GemCare&quot; title=&quot;Add reaction&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply to the message from GemCare&quot; title=&quot;Reply&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-act&quot; aria-label=&quot;Reply in thread to the message from GemCare&quot; title=&quot;Reply in thread&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;18&quot; height=&quot;18&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M6.5 8h7M6.5 10.5h4.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-jump&quot; aria-label=&quot;Jump to the latest message, 3 new&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 5.5l4 4 4-4M6 10.5l4 4 4-4&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-jump__n&quot; aria-hidden=&quot;true&quot;&gt;3&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
10397
10401
  &lt;div style=&quot;position:fixed;inset:0&quot;&gt;
10398
10402
  &lt;div class=&quot;gb-tc&quot; data-view=&quot;list&quot;&gt;
10399
10403
  &lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;
@@ -10936,7 +10940,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
10936
10940
  &lt;/form&gt;
10937
10941
  &lt;/section&gt;
10938
10942
  &lt;/div&gt;
10939
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component</figcaption><div class="cat-wide"><iframe title="HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component" style="height:600px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;/ol&gt;&lt;/div&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/team-chat-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;
10943
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component</figcaption><div class="cat-wide"><iframe title="HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component" style="height:600px;width:1280px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;position:fixed;inset:0&quot;&gt;&lt;div class=&quot;gb-tc&quot; data-view=&quot;conversation&quot;&gt;&lt;nav class=&quot;gb-tc-rail&quot; aria-label=&quot;Channels&quot;&gt;&lt;div class=&quot;gb-tc-rail__head&quot;&gt;&lt;h2 class=&quot;gb-tc-rail__title&quot;&gt;Acme team&lt;/h2&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-rail__scroll&quot;&gt;&lt;/div&gt;&lt;/nav&gt;&lt;section class=&quot;gb-tc-main&quot; aria-label=&quot;Conversation&quot;&gt;&lt;header class=&quot;gb-tc-head&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back&quot; aria-label=&quot;Back to channels&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M12.5 4.5 7 10l5.5 5.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;div class=&quot;gb-tc-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-head__title&quot;&gt;&lt;span class=&quot;gb-tc-head__glyph&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-head__name&quot;&gt;general&lt;/span&gt;&lt;/h2&gt;&lt;p class=&quot;gb-tc-head__sub&quot;&gt;Everyone on the team is here. Customers never see this.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-head__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-tc-head__members&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people&quot; aria-label=&quot;Members, 8&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;gb-tc-head__count&quot;&gt;8&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-body&quot;&gt;&lt;div class=&quot;gb-tc-log&quot; role=&quot;log&quot; aria-live=&quot;polite&quot; aria-label=&quot;Messages in #general&quot; tabindex=&quot;0&quot;&gt;&lt;ol class=&quot;gb-tc-list&quot;&gt;&lt;/ol&gt;&lt;/div&gt;&lt;/div&gt;&lt;form class=&quot;gb-tc-composer&quot;&gt;&lt;div class=&quot;gb-tc-composer__box&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach&quot; aria-label=&quot;Attach a file&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;label class=&quot;gb-tc-sr&quot; for=&quot;tc-input&quot;&gt;Message&lt;/label&gt;&lt;textarea id=&quot;tc-input&quot; class=&quot;gb-tc-composer__input&quot; rows=&quot;1&quot; maxLength=&quot;4000&quot; placeholder=&quot;Message #general&quot;&gt;&lt;/textarea&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji&quot; aria-label=&quot;Emoji&quot; aria-expanded=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;6.5&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send&quot; aria-label=&quot;Send&quot; disabled=&quot;&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M3.5 10 16.5 3.5 13 16.5 9.5 11z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9.5 11 16.5 3.5&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/form&gt;&lt;/section&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/team-chat-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;
10940
10944
  var tc = gembossUI.teamChat, noop = function () {}, at = function (hm) { return &quot;2026-10-20T&quot; + hm + &quot;:00+07:00&quot;; };
10941
10945
  document.querySelector(&quot;.gb-tc-rail__scroll&quot;).replaceChildren(
10942
10946
  tc.channelSection({ id: &quot;p-ch&quot;, label: &quot;Channels&quot;, items: [{ name: &quot;general&quot;, active: true, onOpen: noop }, { name: &quot;launch-week&quot;, unread: 12, mentions: 2, onOpen: noop }, { name: &quot;payroll&quot;, kind: &quot;private&quot;, onOpen: noop }] }),
@@ -11068,7 +11072,7 @@ document.querySelector(&quot;.gb-tc-body&quot;).append(tc.jumpToLatest({ count:
11068
11072
  thread: m.thread ? { count: m.thread, last: &quot;Last reply 2 hours ago&quot;, repliers: [{ name: &quot;Linh Tran&quot; }], onOpen: noop } : undefined, onReact: noop, onReply: noop, onOpenThread: noop });
11069
11073
  }));
11070
11074
  document.querySelector(&quot;.gb-tc-body&quot;).append(tc.jumpToLatest({ count: 3, onJump: noop }));
11071
- &lt;/script&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>PeoplePanel đứng riêng (cột phải của app shell): mở và thu gọn</figcaption><iframe title="PeoplePanel đứng riêng (cột phải của app shell): mở và thu gọn" style="height:460px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;display:flex;gap:24px;height:420px;padding:16px;box-sizing:border-box&quot;&gt;&lt;aside id=&quot;tc-people&quot; class=&quot;gb-tc-people&quot; aria-labelledby=&quot;tc-people-title&quot; tabindex=&quot;-1&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-people-title&quot;&gt;Members&lt;/h2&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;tc-people-body&quot; aria-label=&quot;Hide members&quot; title=&quot;Hide members&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M12.5 3.5v13&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-people__body&quot; id=&quot;tc-people-body&quot;&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-on-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-on-h&quot;&gt;Online — 3&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Linh Tran&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Support lead&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__role&quot;&gt;Admin&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Mai Pham&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Writing the hero copy&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Quan Le&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--away&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Away&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Quan Le&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;In a meeting until 11:00&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-all-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-all-h&quot;&gt;Members — 2&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person gb-tc-person--offline&quot; title=&quot;Bo Nguyen&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;BN&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Offline&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Bo Nguyen&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Back Monday&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person gb-tc-person--offline&quot; title=&quot;An Vo&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;AV&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Offline&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;An Vo&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;aside id=&quot;tc-people-2&quot; class=&quot;gb-tc-people&quot; aria-labelledby=&quot;tc-people-2-title&quot; tabindex=&quot;-1&quot; data-collapsed=&quot;true&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-people-2-title&quot;&gt;Members&lt;/h2&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people-2-body&quot; aria-label=&quot;Show members&quot; title=&quot;Show members&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M12.5 3.5v13&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-people__body&quot; id=&quot;tc-people-2-body&quot;&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-on-2-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-on-2-h&quot;&gt;Online — 2&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Linh Tran&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Quan Le&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--away&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Away&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
11075
+ &lt;/script&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>PeoplePanel đứng riêng (cột phải của app shell): mở và thu gọn</figcaption><iframe title="PeoplePanel đứng riêng (cột phải của app shell): mở và thu gọn" style="height:460px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/sheet.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reader-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/site.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/topnav-fold.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;&lt;div style=&quot;display:flex;gap:24px;height:420px;padding:16px;box-sizing:border-box&quot;&gt;&lt;aside id=&quot;tc-people&quot; class=&quot;gb-tc-people&quot; aria-labelledby=&quot;tc-people-title&quot; tabindex=&quot;-1&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-people-title&quot;&gt;Members&lt;/h2&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;tc-people-body&quot; aria-label=&quot;Hide members&quot; title=&quot;Hide members&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M12.5 3.5v13&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-people__body&quot; id=&quot;tc-people-body&quot;&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-on-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-on-h&quot;&gt;Online — 3&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Linh Tran&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Support lead&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__role&quot;&gt;Admin&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Mai Pham&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;7&quot; aria-hidden=&quot;true&quot;&gt;MP&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Mai Pham&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Writing the hero copy&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Quan Le&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--away&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Away&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Quan Le&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;In a meeting until 11:00&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-all-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-all-h&quot;&gt;Members — 2&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person gb-tc-person--offline&quot; title=&quot;Bo Nguyen&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;BN&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Offline&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Bo Nguyen&lt;/span&gt;&lt;span class=&quot;gb-tc-person__sub&quot;&gt;Back Monday&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person gb-tc-person--offline&quot; title=&quot;An Vo&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;AV&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--offline&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Offline&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;An Vo&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;aside id=&quot;tc-people-2&quot; class=&quot;gb-tc-people&quot; aria-labelledby=&quot;tc-people-2-title&quot; tabindex=&quot;-1&quot; data-collapsed=&quot;true&quot;&gt;&lt;header class=&quot;gb-tc-panel-head&quot;&gt;&lt;div class=&quot;gb-tc-panel-head__text&quot;&gt;&lt;h2 class=&quot;gb-tc-panel-head__title&quot; id=&quot;tc-people-2-title&quot;&gt;Members&lt;/h2&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;tc-people-2-body&quot; aria-label=&quot;Show members&quot; title=&quot;Show members&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3.5&quot; width=&quot;14&quot; height=&quot;13&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M12.5 3.5v13&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gb-tc-people__body&quot; id=&quot;tc-people-2-body&quot;&gt;&lt;div class=&quot;gb-tc-people__section&quot; role=&quot;group&quot; aria-labelledby=&quot;tc-on-2-h&quot;&gt;&lt;h3 class=&quot;gb-tc-people__heading&quot; id=&quot;tc-on-2-h&quot;&gt;Online — 2&lt;/h3&gt;&lt;ul class=&quot;gb-tc-people__list&quot;&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Linh Tran&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;4&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--online&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Online&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Linh Tran&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button type=&quot;button&quot; class=&quot;gb-tc-person&quot; title=&quot;Quan Le&quot;&gt;&lt;span class=&quot;gb-tc-person__av&quot;&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;QL&lt;/span&gt;&lt;span class=&quot;gb-tc-presence gb-tc-presence--away&quot;&gt;&lt;span class=&quot;gb-tc-sr&quot;&gt;Away&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gb-tc-person__text&quot;&gt;&lt;span class=&quot;gb-tc-person__name&quot;&gt;Quan Le&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe><details class="cat-code"><summary>Markup</summary><pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/team-chat.css&quot;&gt;
11072
11076
  &lt;div style=&quot;display:flex;gap:24px;height:420px;padding:16px;box-sizing:border-box&quot;&gt;
11073
11077
  &lt;aside id=&quot;tc-people&quot; class=&quot;gb-tc-people&quot; aria-labelledby=&quot;tc-people-title&quot; tabindex=&quot;-1&quot;&gt;
11074
11078
  &lt;header class=&quot;gb-tc-panel-head&quot;&gt;